@charset "UTF-8";
/* ============================================================
   concern.css — 고민별 안내 페이지 공용 (lifting / elasticity / eye /
                 wrinkle / jawline / pigment / trouble)   v2
   ============================================================
   · 스코프: .cn 하위. 7페이지 공유.
   · 토큰: wz_pages.css 의 --nas-* 와 동일 값(메인 전용이라 여기 재정의).
   · 히어로: 레이아웃이 sub_hero_use=N 이면 `.hero` 를 display:none 으로
     감춘다(general.css). 그래서 이 페이지는 .cn-hero 를 쓴다.
   · 전역 리셋: 사이트 CSS 가 .sub_content p 등에 여백을 주므로
     .cn 안의 p/h/ul 여백을 여기서 다시 잡는다.
   · 페이지 역할: 갈림길. 자가 체크(.chk) 가 두 갈래(.path) 중 하나를
     강조한다. JS 는 각 페이지 하단 인라인(20줄).
   ============================================================ */
.cn{
  --nas-forest:#1a0b1a; --nas-forest-d:#221d24; --nas-forest-l:#4f4752;
  --nas-bronze:#c29d78; --nas-bronze-l:#dfcfbd; --nas-bronze-d:#967654;
  --nas-point:#330033; --nas-point-l:#4d004d;
  --nas-ivory:#f7f5f8; --nas-ivory-d:#ebe7ee; --nas-white:#fff;
  --nas-ink:#1f1a21; --nas-gray:#6f6773; --nas-gray-l:#9f96a3;
  --nas-on-dark:#f7f5f8; --nas-on-dark-2:#e4dde8; --nas-on-dark-3:#b9adc0;
  --nas-line:#e3dee5; --nas-line-d:#cfc8d4;
  --nas-r:16px; --nas-r-s:8px; --nas-r-pill:999px;
  --nas-shadow-l:0 24px 60px rgba(31,26,33,.14);
  --max-w:clamp(1100px, 72vw, 1360px);
  --pad-x:24px;
  --u:clamp(13px, 1.15vw, 30px);
  --dur:.3s;
  color:var(--nas-ink); word-break:keep-all; overflow-wrap:break-word;
  letter-spacing:-0.03em; line-height:1.6;
}
.cn *{ box-sizing:border-box; }
.cn img{ max-width:100%; display:block; }
.cn a{ color:inherit; text-decoration:none; }
.cn p, .cn h1, .cn h2, .cn h3, .cn h4, .cn ul, .cn ol{ margin:0; padding:0; }
.cn ul, .cn ol{ list-style:none; }
.cn button{ font:inherit; letter-spacing:inherit; }
.cn .wrap{ max-width:var(--max-w); margin:0 auto; padding:0 var(--pad-x); }
.cn .sec{ padding:clamp(60px, 6vw, 104px) 0; position:relative; scroll-margin-top:70px; }

/* 공통 타이포 */
.cn .eyebrow{
  font-size:max(11px, calc(var(--u) * .59)); letter-spacing:.22em; text-transform:uppercase;
  color:var(--nas-bronze); font-weight:700; margin-bottom:max(10px, calc(var(--u) * .5));
}
.cn .sec-title{ font-size:clamp(25px, 3.4vw, 38px); font-weight:800; line-height:1.28; text-wrap:balance; }
.cn .sec-lead{ font-size:max(15px, calc(var(--u) * .82)); color:var(--nas-gray); line-height:1.75; margin-top:max(12px, calc(var(--u) * .7)); text-wrap:balance; }
.cn .sec-head{ text-align:center; }
.cn .sec-head .sec-lead{ max-width:calc(var(--u) * 42); margin-left:auto; margin-right:auto; }

/* ─────────── 1. 히어로 (.cn-hero — .hero 금지) ─────────── */
.cn .cn-hero{
  position:relative; overflow:hidden; isolation:isolate;
  min-height:clamp(440px, 56vh, 640px);
  display:flex; align-items:center;
  background:var(--nas-forest-d); color:var(--nas-on-dark);
}
.cn .cn-hero-bg{ position:absolute; inset:0; z-index:-2; }
.cn .cn-hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 30%; }
.cn .cn-hero::before{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(to bottom, rgba(26,11,26,.5), rgba(26,11,26,.2) 40%, rgba(26,11,26,.75)),
             linear-gradient(to right, rgba(26,11,26,.5), rgba(26,11,26,0) 60%);
}
.cn .cn-hero .wrap{ width:100%; padding-top:clamp(48px, 4vw, 64px); padding-bottom:clamp(44px, 3.6vw, 60px); }
.cn .cn-hero-eyebrow{ font-size:max(11px, calc(var(--u) * .6)); letter-spacing:.24em; text-transform:uppercase; color:var(--nas-bronze-l); font-weight:700; margin-bottom:10px; }
.cn .cn-hero-h1{
  font-family:'Nanum Myeongjo','NanumMyeongjo',serif;
  font-size:clamp(26px, 3.4vw, 44px); font-weight:800; line-height:1.2;
  text-shadow:0 2px 12px rgba(0,0,0,.35); text-wrap:balance; max-width:14em;
}
.cn .cn-hero-copy{ font-size:clamp(14.5px, .95vw, 16px); font-weight:300; line-height:1.7; color:var(--nas-on-dark-2); margin-top:14px; max-width:34em; }
.cn .cn-hero-copy b{ font-weight:600; color:var(--nas-on-dark); }
.cn .cn-hero-en{ position:absolute; right:var(--pad-x); bottom:20px; font-size:11px; letter-spacing:.3em; color:var(--nas-on-dark-3); text-transform:uppercase; }
/* 히어로 하단 "아래에서 확인" 유도 */
.cn .cn-hero-cta{ margin-top:18px; display:inline-flex; align-items:center; gap:10px; font-size:14px; font-weight:700; color:var(--nas-bronze-l); }
.cn .cn-hero-cta::after{ content:'↓'; }


/* ─────────── 1-b. 히어로 한 줄 선 초상 (2026-10-05 v4) ───────────
   · 생성 라인아트 WebP 3종: line_34(3/4) · line_front(정면) · line_side(측면)
   · 파일은 검정 배경 + 아이보리 선. mix-blend-mode:screen 으로 올리면 검정은
     사라지고 선만 남는다 → 알파 채널 없이 장당 50KB 안팎.
   · 페이지마다 포즈·배치가 다르다:
       .cn-hero--art-left   그림을 왼쪽에, 본문을 오른쪽으로
       .cn-hero--art-flip   좌우 반전 (얼굴이 글 쪽을 보게)
   · 높이 기준으로 맞춘다 — 정수리가 잘리지 않는다. */
.cn .cn-hero-art{
  position:absolute; top:0; bottom:0; z-index:-1;
  /* 화면 끝이 아니라 본문(wrap) 오른쪽 끝에 맞춘다 → 아래 탭 박스 오른쪽 끝과 같은 선 */
  right:max(var(--pad-x), calc((100% - var(--max-w)) / 2 + var(--pad-x)));
  display:flex; align-items:flex-end;
  pointer-events:none;
  /* 블렌드는 반드시 이 요소에. <img> 에 걸면 부모 스택 컨텍스트 안에서만
     섞여서 검정 배경이 그대로 보인다 (2026-10-05 확인) */
  mix-blend-mode:screen; opacity:.92;
}
.cn .cn-hero-fig{ position:relative; display:flex; height:100%; }
.cn .cn-hero-img{ display:block; height:100%; width:auto; }
/* 고민별 표식 — 이미지와 같은 좌표계(849×1500)의 SVG 를 그 위에 겹친다 */
.cn .cn-hero-acc{ position:absolute; inset:0; width:100%; height:100%; overflow:visible; }
.cn .cn-hero-acc .a{
  fill:none; stroke:#e3b46e; stroke-width:7; stroke-linecap:round; stroke-linejoin:round;
}
.cn .cn-hero-acc .d{ stroke-width:4.5; opacity:.65; }
.cn .cn-hero--art-flip .cn-hero-img{ transform:scaleX(-1); }

/* 왼쪽 배치: 그림은 왼쪽, 본문 블록은 오른쪽으로 */
.cn .cn-hero--art-left .cn-hero-art{ right:auto; left:clamp(8px, 3vw, 72px); }
.cn .cn-hero-txt{ max-width:100%; }
.cn .cn-hero--art-left .cn-hero-txt{ margin-left:auto; }

/* 캡션은 본문 칼럼 끝에 한 줄로 */
.cn .cn-hero-figcap{
  margin-top:clamp(12px, 1.2vw, 16px); padding-top:8px;
  border-top:1px solid rgba(223,207,189,.14);
  max-width:24em;
  display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 12px;
}
.cn .cn-hero-figcap b{
  font-size:11px; letter-spacing:.2em; text-transform:uppercase;
  color:var(--nas-bronze-l); font-weight:700;
}
.cn .cn-hero-figcap span{
  font-size:12.5px; line-height:1.6; color:var(--nas-on-dark-3); letter-spacing:0;
}

@media (min-width:1181px){
  .cn .cn-hero{ min-height:clamp(360px, 40vh, 460px);
    /* 그림 폭 = 높이 × (849/1500) ≈ 높이의 57%. 본문이 그 폭을 침범하지 않게 뺀다 */
    --fig-w:clamp(200px, 24vh, 270px); --fig-gap:clamp(40px, 5vw, 96px); }
  .cn .cn-hero-txt{ max-width:calc(100% - var(--fig-w) - var(--fig-gap)); }
  .cn .cn-hero-copy{ max-width:34em; }
  .cn .cn-hero-h1{ max-width:14em; }
  .cn .cn-hero-en{ display:none; }
}
@media (max-width:1180px){
  /* 태블릿(901~1180): 오른쪽에 그대로, 조금 옅게. 1024px 에서 본문과 겹치지 않음 확인 */
  .cn .cn-hero-art{ right:-4%; left:auto; opacity:.6; }
  .cn .cn-hero--art-left .cn-hero-txt{ margin-left:0; }
  .cn .cn-hero-figcap{ display:none; }
}
@media (max-width:900px){
  /* 모바일·작은 태블릿: 글 뒤에 깔지 않는다.
     얼굴 부분만 우상단에 작게 잘라 넣고, 글은 그 아래에서 시작.
     → 글과 그림이 겹치는 구간이 없다. */
  .cn .cn-hero{ --mob-art-h:clamp(200px, 54vw, 280px); }
  .cn .cn-hero-art{
    top:0; bottom:auto; right:-6%;
    height:var(--mob-art-h); width:clamp(170px, 46vw, 240px);
    overflow:hidden; align-items:flex-start; opacity:.75;
    /* 잘리는 아래쪽을 직선 대신 서서히 사라지게 */
    -webkit-mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
            mask-image:linear-gradient(to bottom, #000 62%, transparent 100%);
  }
  .cn .cn-hero-fig{ height:auto; width:100%; display:block; }
  .cn .cn-hero-img{ height:auto; width:100%; }   /* 가로 기준 → 머리 위쪽이 보이고 아래는 잘림 */
  .cn .cn-hero .wrap{ padding-top:calc(var(--mob-art-h) + 8px); }
}
@media (max-width:640px){
  /* 우하단 영문 표기가 두 줄로 꺾이며 CTA 와 겹치는 폭 (390px 색소 페이지에서 확인) → 감춘다 */
  .cn .cn-hero-en{ display:none; }
}

/* 블렌드 미지원(아주 오래된 브라우저)에서는 검정 사각형이 보이므로 감춘다 */
@supports not (mix-blend-mode:screen){
  .cn .cn-hero-art{ display:none; }
}

/* ─────────── 1-c. 피부고민 탭 (v8: 히어로 아래, 칸형) ───────────
   7개 형제 페이지를 히어로 바로 아래 칸형 탭으로 보여 준다.
   현재 페이지 칸은 브론즈로 채운다. 히어로 높이를 줄여(최대 560px)
   1366×768 노트북에서도 탭이 첫 화면 안에 들어온다. */
.cn .cn-tabs{ background:var(--nas-forest-d); border-top:1px solid rgba(223,207,189,.08); }
/* 위아래 여백을 같게 — 라이브에서 본문이 길어지면 히어로가 늘어나 탭이 그림에 바로 붙어 보였다 */
.cn .cn-tabs-wrap{ padding-top:18px; padding-bottom:22px; }
.cn .cn-tabs-list{
  display:grid; grid-template-columns:repeat(7, 1fr);
  border:1px solid rgba(223,207,189,.22); border-radius:var(--nas-r-s); overflow:hidden;
  background:rgba(223,207,189,.04);
}
.cn .cn-tab{
  display:flex; align-items:center; justify-content:center; gap:8px;
  min-height:50px; padding:0 8px;
  font-size:clamp(14px, 1vw, 16px); font-weight:600; letter-spacing:.01em; white-space:nowrap;
  color:var(--nas-on-dark-2); text-decoration:none;
  border-right:1px solid rgba(223,207,189,.16);
  transition:background .18s, color .18s;
}
.cn .cn-tab:last-child{ border-right:0; }
.cn .cn-tab i{ font-style:normal; font-size:11px; letter-spacing:.1em; font-weight:700; color:var(--nas-bronze); }
.cn .cn-tab:hover{ background:rgba(223,207,189,.1); color:var(--nas-on-dark); }
.cn .cn-tab.is-active{ background:var(--nas-bronze); color:var(--nas-forest); font-weight:700; }
.cn .cn-tab.is-active i{ color:var(--nas-forest); opacity:.75; }
.cn .cn-tab:focus-visible{ outline:2px solid var(--nas-bronze-l); outline-offset:-3px; }

@media (max-width:900px){
  .cn .cn-tabs-wrap{ padding:14px 0 14px; }
  .cn .cn-tabs-list{
    display:flex; border-radius:0; border-left:0; border-right:0;
    overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
  }
  .cn .cn-tabs-list::-webkit-scrollbar{ display:none; }
  .cn .cn-tab{ flex:0 0 auto; min-height:48px; padding:0 16px; font-size:14px; }
}

/* ─────────── 2. 자가 체크 ─────────── */
.cn .check{ background:var(--nas-white); }
.cn .chk-grid{
  display:grid; grid-template-columns:repeat(2, 1fr); gap:10px 14px;
  margin-top:clamp(28px, 3vw, 44px); max-width:calc(var(--u) * 48); margin-left:auto; margin-right:auto;
}
.cn .chk{
  display:flex; align-items:center; gap:14px; text-align:left; width:100%;
  padding:16px 18px; border-radius:12px; cursor:pointer;
  border:1px solid var(--nas-line); background:var(--nas-white); color:var(--nas-ink);
  font-size:max(15px, calc(var(--u) * .76)); line-height:1.45;
  transition:border-color var(--dur), background var(--dur), transform var(--dur);
}
.cn .chk:hover{ border-color:var(--nas-bronze-l); transform:translateY(-1px); }
.cn .chk-box{
  flex:none; width:22px; height:22px; border-radius:6px; border:1.5px solid var(--nas-line-d);
  display:grid; place-items:center; transition:background var(--dur), border-color var(--dur);
}
.cn .chk-box::after{ content:''; width:11px; height:6px; border-left:2px solid #fff; border-bottom:2px solid #fff; transform:rotate(-45deg) translate(1px,-1px); opacity:0; }
.cn .chk.on{ border-color:var(--nas-point); background:#fbf7fb; }
.cn .chk.on .chk-box{ background:var(--nas-point); border-color:var(--nas-point); }
.cn .chk.on .chk-box::after{ opacity:1; }
.cn .chk-tag{ margin-left:auto; flex:none; font-size:11px; letter-spacing:.06em; color:var(--nas-gray-l); padding:3px 8px; border-radius:var(--nas-r-pill); border:1px solid var(--nas-line); }
.cn .chk[data-path="a"] .chk-tag{ color:var(--nas-bronze-d); border-color:var(--nas-bronze-l); }
.cn .chk[data-path="b"] .chk-tag{ color:var(--nas-point); border-color:#d9c4d9; }

/* 결과 바 */
.cn .chk-result{
  margin:clamp(22px, 2.4vw, 34px) auto 0; max-width:calc(var(--u) * 48);
  padding:20px 24px; border-radius:12px; background:var(--nas-ivory); border:1px solid var(--nas-line);
  display:flex; align-items:center; gap:18px; flex-wrap:wrap;
}
.cn .chk-result-txt{ flex:1 1 320px; font-size:15px; line-height:1.6; color:var(--nas-gray); }
.cn .chk-result-txt b{ color:var(--nas-ink); font-weight:700; }
.cn .chk-result-go{
  flex:none; display:inline-flex; align-items:center; gap:8px; height:44px; padding:0 20px;
  border-radius:var(--nas-r-pill); background:var(--nas-point); color:var(--nas-on-dark);
  font-size:14px; font-weight:700; cursor:pointer; border:0;
}
.cn .chk-result-go::after{ content:'↓'; }
.cn .chk-result[data-state="none"] .chk-result-go{ display:none; }

/* ─────────── 3. 원인 · 접근 (한 줄 요약) ─────────── */
.cn .why{ background:var(--nas-ivory); }
.cn .why-row{
  display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, 1fr); gap:clamp(24px, 4vw, 64px); align-items:center;
}
.cn .why-row h2{ font-size:clamp(22px, 2.2vw, 30px); font-weight:800; line-height:1.3; }
.cn .why-row p{ font-size:max(15px, calc(var(--u) * .8)); line-height:1.8; color:var(--nas-gray); margin-top:14px; }
.cn .why-layers{ display:grid; gap:10px; }
.cn .why-layers li{
  display:grid; grid-template-columns:auto 1fr; gap:14px; align-items:center;
  padding:14px 16px; background:var(--nas-white); border:1px solid var(--nas-line); border-radius:12px;
  font-size:15px; line-height:1.5;
}
.cn .why-layers li > span:first-child{
  font-size:11px; letter-spacing:.14em; font-weight:700; color:var(--nas-bronze-d);
  padding:4px 9px; border-radius:var(--nas-r-s); background:var(--nas-ivory); border:1px solid var(--nas-line-d); white-space:nowrap;
}


/* ─────────── 3-b. 피부 단면 비교 (2026-10-05 추가) ───────────
   · 이미지는 글자 없는 단면. 번호·라벨·설명은 전부 여기 텍스트.
   · 이미지가 404 면 onerror 가 .layer-compare 를 통째로 지운다.
   · 900px 이하에서 세로로 쌓이고, 가운데 구분선이 가로줄로 바뀐다. */
.cn .lc-lead{
  max-width:calc(var(--u) * 40); margin:clamp(28px, 3vw, 44px) auto 0;
  text-align:center; font-size:max(15px, calc(var(--u) * .82));
  line-height:1.75; color:var(--nas-gray); text-wrap:balance;
}
.cn .layer-compare{
  display:grid; grid-template-columns:1fr auto 1fr; align-items:start;
  gap:clamp(16px, 2vw, 32px);
  margin-top:clamp(24px, 2.6vw, 40px);
}
.cn .layer-compare.layer-single{ grid-template-columns:minmax(0, 620px); justify-content:center; }
.cn .lc-item{ margin:0; min-width:0; }
.cn .lc-img{
  border:1px solid var(--nas-line); border-radius:var(--nas-r);
  background:var(--nas-white); overflow:hidden;
}
.cn .lc-focus .lc-img{ border-color:var(--nas-bronze); box-shadow:var(--nas-shadow-l); }
.cn .lc-img img{ width:100%; height:auto; display:block; }
.cn .lc-item figcaption{ margin-top:max(12px, calc(var(--u) * .7)); }
.cn .lc-item figcaption b{
  display:block; font-size:max(15px, calc(var(--u) * .84)); font-weight:800;
  color:var(--nas-ink); letter-spacing:-0.02em;
}
.cn .lc-focus figcaption b{ color:var(--nas-bronze-d); }
.cn .lc-item figcaption span{
  display:block; margin-top:6px; font-size:max(13.5px, calc(var(--u) * .74));
  line-height:1.7; color:var(--nas-gray);
}
/* 가운데 구분 — 화살표가 아니라 얇은 세로선. 방향을 단정하지 않는다 */
.cn .lc-sep{ align-self:stretch; width:1px; background:var(--nas-line-d); margin-top:clamp(40px, 6vw, 90px); }

@media (max-width:900px){
  .cn .layer-compare{ grid-template-columns:1fr; gap:clamp(20px, 4vw, 28px); }
  .cn .lc-sep{ width:auto; height:1px; margin:0; align-self:auto; }
}

/* ─────────── 4. 두 갈래 ─────────── */
.cn .paths{ background:var(--nas-white); }
.cn .path-grid{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(16px, 2vw, 28px); margin-top:clamp(30px, 3.2vw, 48px); }
.cn .path{
  position:relative; display:flex; flex-direction:column;
  border:1px solid var(--nas-line); border-radius:var(--nas-r); overflow:hidden;
  background:var(--nas-white); transition:border-color var(--dur), box-shadow var(--dur), opacity var(--dur);
}
.cn .path-head{ padding:clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 34px) 0; }
.cn .path-kicker{ font-size:12px; letter-spacing:.18em; text-transform:uppercase; font-weight:700; color:var(--nas-bronze); }
.cn .path h3{ font-size:clamp(22px, 1.9vw, 30px); font-weight:800; line-height:1.28; margin-top:8px; }
.cn .path-for{ font-size:15px; color:var(--nas-gray); line-height:1.7; margin-top:10px; }
/* 단계 */
.cn .path-steps{ padding:20px clamp(22px, 2.2vw, 34px) 0; display:grid; gap:10px; }
.cn .step{
  display:grid; grid-template-columns:auto 1fr auto; gap:14px; align-items:center;
  padding:14px 16px; border:1px solid var(--nas-line); border-radius:12px;
  transition:border-color var(--dur), background var(--dur);
}
.cn .step:hover{ border-color:var(--nas-bronze-l); background:var(--nas-ivory); }
.cn .step-n{ width:28px; height:28px; border-radius:50%; display:grid; place-items:center; font-size:12px; font-weight:800; background:var(--nas-ivory-d); color:var(--nas-forest-l); }
.cn .step-body b{ display:block; font-size:16px; font-weight:700; }
.cn .step-body span{ display:block; font-size:13px; color:var(--nas-gray); margin-top:2px; line-height:1.5; }
.cn .step-go{ font-size:13px; font-weight:700; color:var(--nas-point); white-space:nowrap; }
.cn .step-go::after{ content:'→'; margin-left:5px; }
/* 시그니처 (갈래 안) */
.cn .path-sig{
  margin:22px clamp(22px, 2.2vw, 34px) clamp(22px, 2.2vw, 34px);
  padding:20px 22px; border-radius:12px; background:var(--nas-forest-d); color:var(--nas-on-dark);
  position:relative;
}
.cn .path-sig-eyebrow{ font-size:11px; letter-spacing:.2em; text-transform:uppercase; color:var(--nas-bronze-l); font-weight:700; }
.cn .path-sig-name{ font-family:'Libre Baskerville','Nanum Myeongjo',serif; font-size:clamp(20px, 1.6vw, 26px); font-weight:700; margin-top:6px; }
.cn .path-sig-name em{ font-style:normal; color:var(--nas-bronze); }
.cn .path-sig-combo{ margin-top:12px; display:flex; flex-wrap:wrap; gap:6px; }
.cn .path-sig-combo span{ font-size:13px; padding:5px 11px; border-radius:var(--nas-r-pill); border:1px solid rgba(247,245,248,.22); color:var(--nas-on-dark-2); }
.cn .path-sig-combo span + span::before{ content:'+'; margin-right:8px; color:var(--nas-bronze); }
.cn .path-sig-note{ font-size:13px; color:var(--nas-on-dark-3); margin-top:12px; line-height:1.6; }
.cn .path-sig-link{ display:inline-flex; margin-top:14px; font-size:13px; font-weight:700; color:var(--nas-bronze-l); }
.cn .path-sig-link::after{ content:'→'; margin-left:6px; }
.cn .path-sig-link .cover{ position:absolute; inset:0; border-radius:inherit; }
/* 추천 강조 */
.cn .path-grid[data-pick="a"] .path[data-path="b"],
.cn .path-grid[data-pick="b"] .path[data-path="a"]{ opacity:.55; }
.cn .path.pick{ border-color:var(--nas-bronze); box-shadow:var(--nas-shadow-l); }
.cn .path-badge{
  position:absolute; top:16px; right:16px; font-size:11px; letter-spacing:.1em; font-weight:800;
  padding:6px 11px; border-radius:var(--nas-r-pill); background:var(--nas-bronze); color:var(--nas-forest);
  opacity:0; transform:translateY(-4px); transition:opacity var(--dur), transform var(--dur);
}
.cn .path.pick .path-badge{ opacity:1; transform:none; }

/* ─────────── 5. 상담 ─────────── */
.cn .cta{ background:var(--nas-ivory); text-align:center; }
.cn .cta-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:28px; }
.cn .nbtn{
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 26px;
  border-radius:var(--nas-r-pill); font-size:15px; font-weight:700; cursor:pointer;
  border:1px solid var(--nas-line-d); background:var(--nas-white); color:var(--nas-ink);
  transition:background var(--dur), border-color var(--dur), transform var(--dur);
}
.cn .nbtn svg{ width:18px; height:18px; fill:currentColor; }
.cn .nbtn:hover{ transform:translateY(-2px); border-color:var(--nas-bronze); }
.cn .nbtn-primary{ background:var(--nas-point); border-color:var(--nas-point); color:var(--nas-on-dark); }
.cn .nbtn-primary:hover{ background:var(--nas-point-l); border-color:var(--nas-point-l); }
.cn .cta-price{ margin-top:22px; font-size:14px; }
.cn .cta-price a{ color:var(--nas-point); font-weight:700; border-bottom:1px solid currentColor; }
.cn .cta-note{ font-size:13px; color:var(--nas-gray-l); margin:20px auto 0; max-width:40em; line-height:1.7; }

/* ─────────── 반응형 ─────────── */
@media (max-width:991px){
  .cn .why-row{ grid-template-columns:1fr; }
}
@media (max-width:640px){
  .cn{ --pad-x:20px; }
  .cn .cn-hero{ min-height:auto; }
  .cn .cn-hero-h1{ max-width:none; }
  .cn .chk-grid, .cn .path-grid{ grid-template-columns:1fr; }
  .cn .chk-tag{ display:none; }
  .cn .step{ grid-template-columns:auto 1fr; }
  .cn .step-go{ grid-column:2; }
  .cn .nbtn{ width:100%; justify-content:center; }
}
@media (prefers-reduced-motion:reduce){
  .cn *{ transition:none !important; }
}