@charset "utf-8";
/* =========================================================
   노르드킨 상담문의 (리뉴얼)
   Figma : full 1223-1132 (PC) / mo 1226-1469 (MO)
   - 이 파일은 consult.php 에서만 사용한다.
   - PC 콘텐츠 폭 980 (1920 기준 x 470~1450)
   - 브레이크포인트 1200px
   ========================================================= */

.ncs {
  --ncs-primary: #212121;
  --ncs-body:    #424242;
  --ncs-point:   #fd6c01;
  --ncs-stroke:  #ebebeb;
  --ncs-caption: #9e9e9e;

  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ncs-primary);

  /* clip 이어야 한다. hidden 은 스크롤 컨테이너를 만들어 안쪽 sticky 를 깨뜨린다 */
  overflow-x: clip;
}
.ncs * { box-sizing: border-box; }

.ncs-container {
  max-width: 1020px;   /* 980 + 좌우 20 패딩 */
  margin: 0 auto;
  padding: 0 20px;
}

.ncs-br-mo { display: none; }

/* 공통 타이포 */
.ncs-h2 {
  margin: 0;
  font-weight: 700;
  font-size: 28px;
  line-height: 1.6;
  color: var(--ncs-primary);
  word-break: keep-all;
}
.ncs-body {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ncs-primary);
  word-break: keep-all;
}
.ncs-body b { font-weight: 700; }

/* =========================================================
   1. 페이지 타이틀
   ========================================================= */
/* 고정 헤더(약 80px)가 밴드 위를 덮으므로, 그만큼 패딩을 줘서
   '헤더 아래로 264px' 라는 디자인 높이를 그대로 확보한다.
   (그래야 제목이 보이는 영역의 정중앙에 온다) */
.ncs-title {
  min-height: 344px;          /* 80(헤더) + 264(디자인 밴드) */
  padding-top: 80px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* 위쪽이 주황, 아래로 갈수록 흰색 */
  background: linear-gradient(0deg, #fff 0%, #fff2e5 51.8%, #ffd3a6 103.61%);
}
.ncs-title-text {
  margin: 0;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.3;
  color: var(--ncs-primary);
}

/* =========================================================
   2. 소개 (지그재그 2블록)
   ========================================================= */
.ncs-intro { padding: 135px 0 145px; background: #fff; }

.ncs-zig {
  display: grid;
  grid-template-columns: 293px 580px;
  gap: 107px;
  align-items: center;
}
.ncs-zig + .ncs-zig { margin-top: 110px; }

/* 두 번째 블록은 이미지가 왼쪽 */
.ncs-zig--rev {
  grid-template-columns: 480px 339px;
  gap: 120px;
}
.ncs-zig--rev .ncs-zig-txt { order: 2; }
.ncs-zig--rev .ncs-zig-img { order: 1; }

.ncs-zig-txt .ncs-h2 { margin-bottom: 31px; }
.ncs-zig-txt .ncs-body + .ncs-body { margin-top: 26px; }

.ncs-zig-img img {
  display: block;
  width: 100%;
  aspect-ratio: 580 / 356;
  object-fit: cover;
  border-radius: 4px;
}
.ncs-zig--rev .ncs-zig-img img { aspect-ratio: 480 / 356; }

/* 불릿 목록 */
.ncs-bullets {
  margin: 0;
  padding: 0;
  list-style: none;
}
.ncs-bullets li {
  position: relative;
  padding-left: 14px;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ncs-primary);
  word-break: keep-all;
}
.ncs-bullets li + li { margin-top: 11px; }
.ncs-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .55em;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ncs-point);
}

/* =========================================================
   3. 상담 진행 절차
   ========================================================= */
.ncs-process {
  padding: 110px 0 148px;
  background: #f7f7f7;
}
.ncs-process-title {
  margin-bottom: 40px;
  font-size: 36px;
  line-height: 1.6;
  text-align: center;
}

.ncs-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.ncs-step {
  min-height: 278px;
  padding: 50px 20px 40px;
  border: 1px solid var(--ncs-stroke);
  border-radius: 12px;
  background: #fff;
  text-align: center;
}
.ncs-step-no {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 23px;
  height: 23px;
  margin-bottom: 14px;
  border-radius: 50%;
  background: var(--ncs-point);
  font-weight: 500;
  font-size: 13px;
  line-height: 1.1;
  color: #fff;
}
.ncs-step-title {
  margin: 0 0 6px;
  font-weight: 700;
  font-size: 24px;
  line-height: 1.9;
  color: var(--ncs-primary);
  word-break: keep-all;
}
.ncs-step-desc {
  margin: 0;
  font-weight: 400;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ncs-primary);
  word-break: keep-all;
}

/* =========================================================
   4. 상담 신청
   ========================================================= */
.ncs-cta {
  position: relative;
  padding: 179px 0 178px;
  overflow: hidden;
}
.ncs-cta-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
.ncs-cta-dim {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, .45);
  pointer-events: none;
}
.ncs-cta .ncs-container { position: relative; z-index: 1; }

.ncs-cta-title {
  margin: 0 0 56px;
  font-weight: 700;
  font-size: 36px;
  line-height: 1.4;
  color: #fff;
  text-align: center;
  word-break: keep-all;
}

/* 폼 — index.php 상담 섹션과 동일 규격 */
.ncs-form {
  width: 380px;
  max-width: 100%;
  margin: 0 auto;
}
.ncs-field { margin-bottom: 12px; }
.ncs-field--half {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.ncs-input,
.ncs-select select {
  width: 100%;
  height: 52px;
  padding: 16px;
  border: 1px solid var(--ncs-stroke);
  border-radius: 4px;
  background: #fff;
  font-family: inherit;
  font-weight: 400;
  font-size: 14px;
  line-height: 1.9;
  color: var(--ncs-primary);
  appearance: none;
}
.ncs-input::placeholder { color: var(--ncs-caption); }
.ncs-input:focus,
.ncs-select select:focus { outline: none; border-color: var(--ncs-primary); }

.ncs-select { position: relative; }
.ncs-select select { padding: 10px 40px 10px 16px; color: var(--ncs-caption); cursor: pointer; }
.ncs-select select.has-value { color: var(--ncs-primary); }
.ncs-select select option { color: var(--ncs-primary); }
.ncs-select svg {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
}

.ncs-submit {
  width: 100%;
  height: 52px;
  margin-top: 8px;
  border: 0;
  border-radius: 4px;
  background: var(--ncs-primary);
  color: #fff;
  font-family: inherit;
  font-weight: 700;
  font-size: 18px;
  line-height: 1.9;
  cursor: pointer;
  transition: background-color .2s ease;
}
.ncs-submit:hover { background: #000; }

.ncs-agree {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 16px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.9;
  color: #fff;
}
.ncs-agree input[type="checkbox"] {
  flex: 0 0 16px;
  width: 16px;
  height: 16px;
  margin: 0;
  accent-color: var(--ncs-point);
  cursor: pointer;
}
.ncs-agree label { margin: 0; cursor: pointer; }
.ncs-agree-link {
  color: #fff;
  text-decoration: underline;
  margin-left: -2px;
}
.ncs-agree-link:hover { color: #fff; }

/* =========================================================
   모바일 (< 1200px) — Figma mo 1226-1469
   ========================================================= */
@media (max-width: 1199px) {

  .ncs-br-pc { display: none; }
  .ncs-br-mo { display: inline; }

  .ncs-h2 { font-size: 24px; }

  /* 1. 타이틀 */
  .ncs-title { min-height: 284px; }   /* 80(헤더) + 204(디자인 밴드) */
  .ncs-title-text { font-size: 28px; }

  /* 2. 소개 — 이미지가 위, 텍스트가 아래 (두 블록 모두) */
  .ncs-intro { padding: 0 0 60px; }
  .ncs-zig,
  .ncs-zig--rev {
    grid-template-columns: 1fr;
    gap: 31px;
    max-width: 315px;
    margin-left: auto;
    margin-right: auto;
  }
  .ncs-zig + .ncs-zig { margin-top: 79px; }
  .ncs-zig .ncs-zig-txt,
  .ncs-zig--rev .ncs-zig-txt { order: 2; }
  .ncs-zig .ncs-zig-img,
  .ncs-zig--rev .ncs-zig-img { order: 1; }

  .ncs-zig-img img,
  .ncs-zig--rev .ncs-zig-img img { aspect-ratio: 310 / 190; }

  .ncs-zig-txt .ncs-h2 { margin-bottom: 31px; }
  .ncs-zig-txt .ncs-body + .ncs-body { margin-top: 20px; }

  /* 3. 절차 — 카드 세로 배치 */
  .ncs-process { padding: 101px 0 64px; }
  .ncs-process-title {
    font-size: 28px;
    margin-bottom: 32px;
  }
  .ncs-steps {
    grid-template-columns: 1fr;
    gap: 16px;
    max-width: 310px;
    margin: 0 auto;
  }

  /* 4. 상담 신청 */
  .ncs-cta { padding: 117px 0 118px; }
  .ncs-cta-title {
    font-size: 24px;
    margin-bottom: 40px;
  }
  .ncs-form { width: 320px; }
  .ncs-field--half { grid-template-columns: 1fr; }
  .ncs-submit { font-size: 16px; }
  .ncs-agree { font-size: 13px; gap: 6px; flex-wrap: wrap; }
}

@media (max-width: 767px) {
  .ncs-title-text { font-size: 24px; }
  .ncs-process-title { font-size: 22px; }
}