@charset "utf-8";
/* ============================================================
   fmtcare_8 — Neo-Vital Bio Extended
   fmtcare_11 의 디자인 시스템을 그대로 계승하고,
   긴 본문을 담기 위한 컴포넌트(문제 카드 · 시뮬레이터 · 근거표 ·
   스크리닝 스텝 · 경로/패키지 카드 · FAQ 아코디언)를 추가한다.
   ------------------------------------------------------------
   컬러 4종
     Crystal White #F7FAFA / Fresh Aqua #00B2A9
     Sky Amber     #FFB13D / Deep Ink   #0A2A31
   ============================================================ */

:root{
  --paper:#F7FAFA; --white:#FFFFFF;
  --aqua:#00B2A9; --aqua-dk:#007F79; --aqua-mist:#E6F5F4; --aqua-film:#F1FAF9;
  --amber:#FFB13D; --amber-mist:#FFF4E3; --amber-dk:#8A5A12;
  --ink:#0A2A31; --ink-2:#35545B; --muted:#6E8A90;
  --line:#DDEAEA; --line-soft:#EBF3F3;
  --shell:1240px; --r-lg:28px; --r-md:18px; --r-sm:10px;
  --hdh:76px;
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;
  --ease:cubic-bezier(.22,.61,.36,1);
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--hdh) + 56px)}
body{background:var(--paper);color:var(--ink);
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  font-size:16.5px;line-height:1.78;letter-spacing:-.015em;word-break:keep-all;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img,svg,canvas{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,select,textarea{font:inherit;color:inherit}
table{border-collapse:collapse;width:100%}
::selection{background:var(--aqua);color:#fff}
:focus-visible{outline:2.5px solid var(--aqua);outline-offset:3px}

.shell{width:100%;max-width:var(--shell);margin:0 auto;padding:0 32px}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:#fff;padding:12px 20px}
.skip:focus{left:0}

/* ---------- 타이포 ---------- */
.eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-size:12px;font-weight:600;
  letter-spacing:.14em;color:var(--aqua-dk);text-transform:uppercase;margin-bottom:20px}
.eyebrow::before{content:'';width:32px;height:1.5px;background:var(--aqua);flex:none}
.eyebrow--amber{color:var(--amber-dk)}
.eyebrow--amber::before{background:var(--amber)}
.eyebrow--w{color:rgba(255,255,255,.66)}
.eyebrow--w::before{background:rgba(255,255,255,.5)}

.h-xl{font-size:clamp(34px,5.8vw,64px);font-weight:800;line-height:1.14;letter-spacing:-.045em}
.h-lg{font-size:clamp(27px,4vw,44px);font-weight:800;line-height:1.22;letter-spacing:-.04em}
.h-md{font-size:clamp(20px,2.3vw,27px);font-weight:750;line-height:1.36;letter-spacing:-.032em}
.h-sm{font-size:18px;font-weight:700;line-height:1.45;letter-spacing:-.028em}
.lede{font-size:clamp(16px,1.5vw,18.5px);font-weight:380;line-height:1.84;color:var(--ink-2)}
.body{font-size:16px;font-weight:380;line-height:1.8;color:var(--ink-2)}
.tiny{font-size:13.5px;line-height:1.7;color:var(--muted)}
.mark{color:var(--aqua-dk)}
.mark-a{color:var(--amber-dk)}
.hl{box-shadow:inset 0 -.4em 0 var(--aqua-mist)}
.hl-a{box-shadow:inset 0 -.4em 0 var(--amber-mist)}

/* ---------- 버튼 ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 30px;
  border-radius:999px;font-size:16px;font-weight:620;letter-spacing:-.02em;white-space:nowrap;border:1.5px solid transparent;
  transition:background .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease),transform .2s var(--ease)}
.btn--solid{background:var(--ink);color:#fff}
.btn--solid:hover{background:var(--aqua-dk);transform:translateY(-2px)}
.btn--aqua{background:var(--aqua);color:#fff}
.btn--aqua:hover{background:var(--aqua-dk);transform:translateY(-2px)}
.btn--amber{background:var(--amber);color:#3B2A08}
.btn--amber:hover{background:#F0A32F;transform:translateY(-2px)}
.btn--ghost{border-color:var(--line);background:var(--white);color:var(--ink)}
.btn--ghost:hover{border-color:var(--aqua);color:var(--aqua-dk);transform:translateY(-2px)}
.btn--w{border-color:rgba(255,255,255,.34);background:transparent;color:#fff}
.btn--w:hover{background:#fff;color:var(--ink);border-color:#fff;transform:translateY(-2px)}
.btn--sm{min-height:44px;padding:0 20px;font-size:14.5px}
.btn--lg{min-height:64px;padding:0 38px;font-size:18px}
.btn--full{width:100%}
.btn i{font-style:normal;transition:transform .2s var(--ease)}
.btn:hover i{transform:translateX(4px)}
.btn:disabled{opacity:.45;cursor:not-allowed;transform:none}

/* ---------- 헤더 ---------- */
.hd{position:sticky;top:0;z-index:70;background:rgba(247,250,250,.9);backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;transition:border-color .3s var(--ease)}
.hd.stuck{border-bottom-color:var(--line)}
.hd__in{display:flex;align-items:center;gap:20px;height:var(--hdh)}
.wm{display:flex;align-items:center;line-height:1.1;flex:none}
.wm__k{font-size:24px;font-weight:800;letter-spacing:.01em;color:var(--ink);margin-right:7px}
.wm__r{display:flex;flex-direction:column;justify-content:center;gap:3px;padding-left:7px;border-left:1.5px solid var(--line)}
.wm__a{font-size:10.5px;font-weight:700;letter-spacing:.18em;color:var(--muted)}
.wm__b{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--aqua-dk)}
.hd__nav{display:flex;gap:16px;margin-right:auto}
.hd__nav a{position:relative;white-space:nowrap;font-size:14.5px;font-weight:520;color:var(--ink-2);padding:6px 0;transition:color .2s var(--ease)}
.hd__nav a::after{content:'';position:absolute;left:0;right:100%;bottom:0;height:1.5px;background:var(--aqua);transition:right .26s var(--ease)}
.hd__nav a:hover{color:var(--ink)}
.hd__nav a:hover::after,.hd__nav a[aria-current]::after{right:0}
.hd__cta{display:flex;gap:9px;flex:none}
.burger{display:none;width:44px;height:44px;position:relative;margin-left:auto;flex:none}
.burger span{position:absolute;left:11px;width:22px;height:1.6px;background:var(--ink);transition:transform .25s var(--ease)}
.burger span:nth-child(1){top:18px}.burger span:nth-child(2){top:25px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(3.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){transform:translateY(-3.5px) rotate(-45deg)}
.drawer{display:none;flex-direction:column;padding:8px 32px 26px;border-top:1px solid var(--line);background:var(--paper)}
.drawer a{padding:15px 0;font-size:16px;font-weight:520;border-bottom:1px solid var(--line-soft)}
.drawer__hi{color:var(--aqua-dk);font-weight:750;border-bottom:0 !important}

/* ---------- 섹션 바로가기 ---------- */
.jump{position:sticky;top:var(--hdh);z-index:60;background:var(--white);border-bottom:1px solid var(--line);
  transform:translateY(-100%);opacity:0;pointer-events:none;transition:transform .35s var(--ease),opacity .35s var(--ease)}
.jump.on{transform:none;opacity:1;pointer-events:auto}
.jump__in{display:flex;align-items:center;gap:18px;height:56px}
.jump__lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;color:var(--muted);flex:none}
.jump__ls{display:flex;gap:20px;overflow-x:auto;scrollbar-width:none;margin-right:auto}
.jump__ls::-webkit-scrollbar{display:none}
.jump__ls a{font-size:14px;font-weight:550;color:var(--ink-2);white-space:nowrap;padding:4px 0;border-bottom:2px solid transparent;transition:all .2s var(--ease)}
.jump__ls a:hover,.jump__ls a.on{color:var(--aqua-dk);border-bottom-color:var(--aqua)}
.jump__cta{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 16px;border-radius:999px;
  background:var(--ink);color:#fff;font-size:13.5px;font-weight:650;flex:none;transition:background .2s var(--ease)}
.jump__cta:hover{background:var(--aqua-dk)}

/* ---------- 섹션 뼈대 ---------- */
.sec{padding:clamp(66px,8.5vw,120px) 0}
.sec--tight{padding:clamp(48px,6vw,84px) 0}
.sec--film{background:var(--aqua-film)}
.sec--white{background:var(--white)}
.sec--ink{background:var(--ink);color:#fff}
.sec--ink .lede,.sec--ink .body{color:rgba(255,255,255,.8)}
.sec__hd{max-width:780px;margin-bottom:clamp(40px,4.6vw,64px)}
.sec__hd .lede{margin-top:20px}
.sec__note{margin-top:26px;padding:20px 24px;border-radius:var(--r-md);background:var(--amber-mist);
  border-left:4px solid var(--amber);font-size:15px;line-height:1.75;color:#6B4610}
.sec--ink .sec__note{background:rgba(255,255,255,.07);border-left-color:#7FE3DB;color:rgba(255,255,255,.82)}

.vis{position:relative;overflow:hidden;border-radius:var(--r-lg);background:var(--aqua-mist)}
.vis>svg{width:100%;height:auto;display:block}
.vis>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ============================================================
   HERO
   ============================================================ */
.hero{padding:clamp(48px,6vw,92px) 0 clamp(52px,6vw,88px)}
.hero__g{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,5vw,72px);align-items:center}
.hero h1{margin-bottom:24px}
.hero h1 em{font-style:normal;color:var(--aqua-dk)}
.hero__x{max-width:520px}
.hero__a{display:flex;flex-wrap:wrap;gap:12px;margin-top:34px}
.hero__n{display:flex;align-items:center;gap:9px;margin-top:22px;font-size:14px;color:var(--muted)}
.hero__dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);flex:none;box-shadow:0 0 0 4px var(--aqua-mist)}
/* 히어로는 fmtcare_11 의 정사각 이미지(1100x1100)를 쓴다.
   16:10 슬롯에 넣으면 위아래가 37% 잘려 궤도가 날아가므로 정사각으로 맞춘다. */
.hero__v{aspect-ratio:1/1}
/* 본문 비주얼 슬롯 */
/* 원본이 3:2 라 2:1 로 자르면 세로 25% 가 날아간다. 16:9 면 16% 만 잘린다. */
.prob__vis{aspect-ratio:16/9;margin-bottom:clamp(22px,2.8vw,38px)}
.safety__vis{aspect-ratio:16/9;margin-bottom:clamp(26px,3.2vw,44px);background:rgba(255,255,255,.05)}
.rc__vis{aspect-ratio:16/10;border-radius:var(--r-md);margin-bottom:20px}

.metrics{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--white)}
.metrics__g{display:grid;grid-template-columns:repeat(4,1fr)}
.metrics__c{padding:32px 28px;border-right:1px solid var(--line-soft)}
.metrics__c:last-child{border-right:0}
.metrics__n{font-size:clamp(28px,3.2vw,40px);font-weight:800;letter-spacing:-.05em;line-height:1}
.metrics__n small{font-size:.48em;font-weight:650;margin-left:3px;color:var(--aqua-dk)}
.metrics__l{margin-top:11px;font-size:14.5px;font-weight:650;color:var(--ink-2)}
.metrics__s{margin-top:5px;font-family:var(--mono);font-size:11px;letter-spacing:.03em;line-height:1.6;color:var(--muted)}

/* ============================================================
   THE PROBLEM (fmtcare_4 계승)
   ============================================================ */
.prob{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:var(--r-lg);
  overflow:hidden;background:var(--white)}
.prob__c{padding:clamp(28px,3vw,38px);border-right:1px solid var(--line);transition:background .25s var(--ease)}
.prob__c:last-child{border-right:0}
.prob__c:hover{background:var(--aqua-film)}
.prob__n{font-family:var(--mono);font-size:11px;letter-spacing:.14em;color:var(--amber-dk);margin-bottom:16px}
.prob__c h3{font-size:19.5px;font-weight:750;letter-spacing:-.03em;margin-bottom:12px}
.prob__c p{font-size:15.5px;line-height:1.76;color:var(--ink-2)}

/* ============================================================
   생태계 시뮬레이터 (fmtcare_13 계승)
   ============================================================ */
.simw{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,4.6vw,64px);align-items:center}
.sim{background:var(--ink);border-radius:var(--r-lg);padding:clamp(22px,2.4vw,30px);color:#fff}
.sim__hd{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:14px}
.sim__t{font-family:var(--mono);font-size:11px;letter-spacing:.13em;color:rgba(255,255,255,.5)}
.sim__st{font-size:15px;font-weight:750;transition:color .35s var(--ease)}
.sim__cv{position:relative;aspect-ratio:16/10;border-radius:var(--r-md);overflow:hidden;background:#05181D}
.sim__cv canvas{width:100%;height:100%;display:block}
.sim__rd{display:flex;justify-content:space-between;align-items:flex-end;margin-top:16px;gap:12px}
.sim__num{font-size:32px;font-weight:800;letter-spacing:-.04em;line-height:1;font-variant-numeric:tabular-nums}
.sim__lb{font-family:var(--mono);font-size:10px;letter-spacing:.11em;color:rgba(255,255,255,.5);margin-top:6px}
.sim__rg{margin-top:16px}
.sim__rg input{-webkit-appearance:none;appearance:none;width:100%;height:36px;background:transparent;cursor:grab}
.sim__rg input:active{cursor:grabbing}
.sim__rg input::-webkit-slider-runnable-track{height:5px;border-radius:3px;background:#25454C}
.sim__rg input::-moz-range-track{height:5px;border-radius:3px;background:#25454C}
.sim__rg input::-webkit-slider-thumb{-webkit-appearance:none;width:32px;height:32px;margin-top:-13.5px;border-radius:50%;
  background:#fff;border:4px solid var(--aqua);box-shadow:0 3px 12px rgba(0,0,0,.45)}
.sim__rg input::-moz-range-thumb{width:32px;height:32px;border-radius:50%;background:#fff;border:4px solid var(--aqua);box-shadow:0 3px 12px rgba(0,0,0,.45)}
.sim__ends{display:flex;justify-content:space-between;font-family:var(--mono);font-size:10px;letter-spacing:.09em;color:rgba(255,255,255,.42);margin-top:-4px}
.sim__hint{margin-top:12px;display:flex;align-items:center;gap:8px;font-size:13px;color:rgba(255,255,255,.6);transition:opacity .4s var(--ease)}
.sim__hint.hide{opacity:0}

/* ============================================================
   본문 블록 — 섹션 아이템 리스트
   ============================================================ */
.blk{display:grid;gap:0;border-top:1px solid var(--line)}
.blk__i{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,.64fr);gap:clamp(20px,3vw,48px);
  padding:clamp(28px,3vw,40px) 0;border-bottom:1px solid var(--line)}
.blk__h h3{font-size:clamp(19px,2.1vw,24px);font-weight:750;letter-spacing:-.032em;margin-bottom:10px}
.blk__k{font-size:15px;line-height:1.7;color:var(--aqua-dk);font-weight:550}
.blk__l{list-style:none;display:grid;gap:18px}
.blk__l li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:14px;align-items:start}
.blk__lb{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:var(--muted);
  background:var(--aqua-mist);color:var(--aqua-dk);padding:5px 10px;border-radius:6px;white-space:nowrap}
.blk__l li p{font-size:15.5px;line-height:1.8;color:var(--ink-2)}
.blk__l li.plain{grid-template-columns:1fr}

/* 근거와 한계 표 */
.etab{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.etab table{font-size:15.5px}
.etab th,.etab td{padding:20px 22px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line);
  border-right:1px solid var(--line-soft);line-height:1.72}
.etab th:last-child,.etab td:last-child{border-right:0}
.etab thead th{background:var(--ink);color:#fff;font-size:14.5px;font-weight:700;letter-spacing:-.02em;border-bottom:0}
.etab thead th:nth-child(2){background:var(--aqua-dk)}
.etab thead th:nth-child(3){background:#2C4A52}
.etab tbody th{font-weight:750;background:var(--aqua-film);white-space:nowrap;width:130px}
.etab td{color:var(--ink-2)}
.etab tbody tr:last-child th,.etab tbody tr:last-child td{border-bottom:0}

/* 기대 영역 카드 */
.bene{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
.bc{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.5vw,32px);transition:border-color .22s var(--ease),transform .22s var(--ease)}
.bc:hover{border-color:var(--aqua);transform:translateY(-3px)}
.bc__t{display:flex;align-items:center;gap:8px;margin-bottom:16px;flex-wrap:wrap}
.bc__lv{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:5px 10px;border-radius:6px;
  background:var(--aqua-mist);color:var(--aqua-dk)}
.bc__tag{font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:5px 10px;border-radius:6px}
.bc__tag.strong{background:#E4F3E9;color:#256B44}
.bc__tag.research{background:var(--amber-mist);color:var(--amber-dk)}
.bc__tag.care{background:#EEF1F5;color:#4A5B66}
.bc h3{font-size:20px;font-weight:750;letter-spacing:-.03em;margin-bottom:8px}
.bc__sub{font-size:14.5px;color:var(--aqua-dk);font-weight:550;line-height:1.6;margin-bottom:14px}
.bc p{font-size:15px;line-height:1.78;color:var(--ink-2)}
.bc__pts{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto;padding-top:18px}
.bc__pts span{font-size:12.5px;font-weight:600;padding:5px 11px;border-radius:999px;background:var(--paper);color:var(--ink-2)}

/* 스크리닝 스텝 */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,20px)}
.stp{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(22px,2.3vw,30px);
  display:flex;flex-direction:column;transition:border-color .22s var(--ease)}
.stp:hover{border-color:var(--aqua)}
.stp__n{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--aqua-dk);margin-bottom:14px}
.stp h3{font-size:18px;font-weight:750;letter-spacing:-.03em;margin-bottom:9px}
.stp__k{font-size:14px;line-height:1.65;color:var(--muted);margin-bottom:16px}
.stp ul{list-style:none;display:grid;gap:11px;margin-top:auto}
.stp li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:9px;font-size:14.5px;line-height:1.66;color:var(--ink-2)}
.stp li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--aqua);margin-top:9px}

/* 프로세스 표 */
.ptab{border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.ptab table{font-size:15px}
.ptab th,.ptab td{padding:17px 20px;text-align:left;vertical-align:top;border-bottom:1px solid var(--line-soft);line-height:1.7}
.ptab thead th{background:var(--aqua-film);font-size:13.5px;font-weight:700;color:var(--aqua-dk);
  font-family:var(--mono);letter-spacing:.05em;border-bottom:1px solid var(--line)}
.ptab td{color:var(--ink-2)}
.ptab tbody tr:last-child td{border-bottom:0}
.ptab tbody tr:hover{background:var(--aqua-film)}

/* 경로 · 패키지 카드 */
.duo{display:grid;grid-template-columns:1fr 1fr;gap:clamp(16px,2vw,24px)}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
.rc{background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);padding:clamp(26px,2.8vw,36px)}
.rc__lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--aqua-dk);margin-bottom:12px}
.rc h3{font-size:21px;font-weight:750;letter-spacing:-.03em;margin-bottom:18px}
.rc ul{list-style:none;display:grid;gap:12px}
.rc li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:11px;font-size:15px;line-height:1.72;color:var(--ink-2)}
.rc li svg{flex:none;margin-top:5px}
.pk{border-radius:var(--r-lg);padding:clamp(26px,2.8vw,36px);border:1.5px solid var(--line);background:var(--white);display:flex;flex-direction:column}
.pk--starter{background:var(--white)}
.pk--rebuild{background:var(--ink);color:#fff;border-color:var(--ink)}
.pk--rebuild li{color:rgba(255,255,255,.84)}
.pk--lockin{background:var(--aqua-film);border-color:var(--aqua-mist)}
.pk__lb{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;margin-bottom:12px;color:var(--aqua-dk)}
.pk--rebuild .pk__lb{color:#7FE3DB}
.pk h3{font-size:22px;font-weight:800;letter-spacing:-.035em;margin-bottom:18px}
.pk ul{list-style:none;display:grid;gap:12px}
.pk li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;font-size:15px;line-height:1.72;color:var(--ink-2)}
.pk li::before{content:'';width:5px;height:5px;border-radius:50%;background:var(--aqua);margin-top:9px}
.pk--rebuild li::before{background:#7FE3DB}
.pk__badge{position:absolute;top:-11px;left:50%;transform:translateX(-50%);background:var(--amber);color:#3B2A08;
  font-size:12px;font-weight:750;padding:5px 14px;border-radius:999px;white-space:nowrap}
.pk{position:relative}

/* 집중 케어 밴드 (3개 패키지 아래 별도 강조 블록) — 주 1~2회 · 3/5/10회 집중 패키지 */
.pkint{position:relative;margin-top:clamp(18px,2.2vw,28px);border:1.5px solid var(--line);border-left:4px solid var(--amber);border-radius:var(--r-lg);background:var(--aqua-film);padding:clamp(24px,2.8vw,34px)}
.pkint__lb{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--aqua-dk);margin-bottom:11px}
.pkint h3{font-size:clamp(20px,2.1vw,24px);font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:12px}
.pkint__lead{font-size:15px;line-height:1.8;color:var(--ink-2);max-width:820px;margin-bottom:22px}
.pkint__for{background:var(--white);border:1px solid var(--line);border-radius:var(--r-md);padding:20px 24px;margin-bottom:22px}
.pkint__forttl{font-size:13px;font-weight:800;color:var(--ink);letter-spacing:-.01em;margin-bottom:14px}
.pkint__forlist{list-style:none;display:grid;grid-template-columns:repeat(2,1fr);gap:11px 30px}
.pkint__forlist li{position:relative;padding-left:28px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.pkint__forlist li::before{content:'';position:absolute;left:0;top:1px;width:18px;height:18px;border-radius:50%;background:var(--aqua)}
.pkint__forlist li::after{content:'';position:absolute;left:6px;top:4px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg)}
.pkint__tiers{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
/* 강도 램프: 3회(흰색) → 5회(아쿠아 솔리드·추천) → 10회(다크). 밴드 배경과 구분되게. */
.pkint__tier{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--r-md);padding:24px 22px 26px}
.pkint__tier--aqua{background:var(--aqua);border-color:var(--aqua)}
.pkint__tier--dark{background:var(--ink);border-color:var(--ink)}
.pkint__best{position:absolute;top:-11px;left:22px;background:var(--amber);color:#3B2A08;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 12px;border-radius:999px}
.pkint__tn{font-size:32px;font-weight:800;letter-spacing:-.04em;color:var(--ink);line-height:1}
.pkint__tn span{font-size:15px;font-weight:700;color:var(--aqua-dk);margin-left:3px;letter-spacing:0}
.pkint__tname{font-size:14px;font-weight:800;color:var(--aqua-dk);margin-top:8px}
.pkint__tmeta{font-size:12px;font-weight:700;color:var(--muted);margin-top:7px;padding-top:9px;border-top:1px solid var(--line-soft)}
.pkint__td{font-size:13.5px;line-height:1.66;color:var(--ink-2);margin-top:8px}
.pkint__tier--aqua .pkint__tn,.pkint__tier--aqua .pkint__tname{color:#fff}
.pkint__tier--aqua .pkint__tn span{color:#EAFBF9}
.pkint__tier--aqua .pkint__tmeta{color:rgba(255,255,255,.82);border-top-color:rgba(255,255,255,.3)}
.pkint__tier--aqua .pkint__td{color:rgba(255,255,255,.94)}
.pkint__tier--dark .pkint__tn{color:#fff}
.pkint__tier--dark .pkint__tn span,.pkint__tier--dark .pkint__tname{color:#7FE3DB}
.pkint__tier--dark .pkint__tmeta{color:rgba(255,255,255,.62);border-top-color:rgba(255,255,255,.16)}
.pkint__tier--dark .pkint__td{color:rgba(255,255,255,.85)}
.pkint__note{font-size:12.5px;line-height:1.6;color:var(--muted);margin-top:16px}

/* FAQ 아코디언 */
.faq__g{margin-bottom:clamp(26px,3vw,42px)}
.faq__gt{display:flex;align-items:center;gap:12px;margin-bottom:18px}
.faq__gn{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--aqua-dk)}
.faq__gt h3{font-size:19px;font-weight:750;letter-spacing:-.03em}
.faq__l{border-top:1px solid var(--line)}
.fq{border-bottom:1px solid var(--line)}
.fq__q{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:18px;align-items:center;width:100%;text-align:left;
  padding:22px 4px;font-size:16.5px;font-weight:620;letter-spacing:-.025em;line-height:1.55;transition:color .2s var(--ease)}
.fq__q:hover{color:var(--aqua-dk)}
.fq__p{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);display:grid;place-items:center;flex:none;transition:all .25s var(--ease)}
.fq.on .fq__p{background:var(--ink);border-color:var(--ink);color:#fff;transform:rotate(45deg)}
.fq__a{display:none;padding:0 4px 26px}
.fq.on .fq__a{display:block}
.fq__a p{font-size:15.5px;line-height:1.84;color:var(--ink-2);max-width:840px}

/* 참고 문헌 */
.refs{display:flex;flex-wrap:wrap;gap:9px;margin-top:26px}
.refs a{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--line);border-radius:999px;
  background:var(--white);font-size:12.5px;color:var(--ink-2);transition:border-color .2s var(--ease),color .2s var(--ease)}
.refs a:hover{border-color:var(--aqua);color:var(--aqua-dk)}
.sec--ink .refs a{background:transparent;border-color:rgba(255,255,255,.24);color:rgba(255,255,255,.76)}
.sec--ink .refs a:hover{border-color:#7FE3DB;color:#7FE3DB}

/* 흐름 스트립 */
.flow{display:flex;flex-wrap:wrap;gap:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:var(--white)}
.flow__i{flex:1 1 170px;padding:22px 20px;border-right:1px solid var(--line-soft);position:relative}
.flow__i:last-child{border-right:0}
.flow__n{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--aqua-dk);margin-bottom:8px}
.flow__i p{font-size:15px;font-weight:650;line-height:1.5}

/* 카드 레일 (임상연구 / 언론) */
.rail{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,1.8vw,22px)}
.card{display:flex;flex-direction:column;background:var(--white);border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(24px,2.4vw,30px);transition:border-color .22s var(--ease),transform .22s var(--ease)}
.card:hover{border-color:var(--aqua);transform:translateY(-3px)}
.card__t{align-self:flex-start;font-family:var(--mono);font-size:10.5px;letter-spacing:.08em;padding:5px 11px;
  border-radius:6px;background:var(--aqua-mist);color:var(--aqua-dk);margin-bottom:16px}
.card__t--a{background:var(--amber-mist);color:var(--amber-dk)}
.card h3{font-size:17px;font-weight:720;line-height:1.48;letter-spacing:-.028em;margin-bottom:10px}
.card p{font-size:15px;line-height:1.75;color:var(--ink-2)}
.card__f{margin-top:auto;padding-top:18px;font-family:var(--mono);font-size:11px;color:var(--muted);word-break:break-all;line-height:1.6}
.card__th{aspect-ratio:16/9;border-radius:var(--r-md);overflow:hidden;background:var(--aqua-mist);margin-bottom:16px}
.card__th img{width:100%;height:100%;object-fit:cover}
.more{display:flex;justify-content:center;margin-top:clamp(30px,3.6vw,48px)}

/* 마감 */
.closing{position:relative;background:var(--ink);color:#fff;padding:clamp(68px,8.6vw,120px) 0;overflow:hidden}
.closing::after{content:'';position:absolute;right:-10%;top:-28%;width:580px;height:580px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,178,169,.32) 0%,transparent 68%);pointer-events:none}
.closing .shell{position:relative;z-index:1}
.closing h2{max-width:800px;margin-bottom:20px}
.closing h2 em{font-style:normal;color:#7FE3DB}
.closing p{max-width:560px;color:rgba(255,255,255,.76);font-size:16.5px;line-height:1.8}
.closing__a{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px}
.closing__t{display:flex;flex-wrap:wrap;gap:30px;margin-top:44px;padding-top:30px;border-top:1px solid rgba(255,255,255,.16)}
.closing__t div{font-family:var(--mono);font-size:11px;letter-spacing:.06em;color:rgba(255,255,255,.55)}
.closing__t b{display:block;font-family:'Pretendard Variable',sans-serif;font-size:20px;font-weight:750;letter-spacing:-.02em;color:#fff;margin-top:6px}

/* 하위 페이지 상단 */
.phead{background:var(--white);border-bottom:1px solid var(--line);padding:clamp(38px,4.6vw,70px) 0 clamp(32px,3.6vw,52px)}
.phead__d{margin-top:18px;max-width:720px}

/* 푸터 */
.ft{background:var(--white);border-top:1px solid var(--line);padding:clamp(48px,5.6vw,76px) 0 40px}
.ft__top{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:40px;padding-bottom:36px;border-bottom:1px solid var(--line-soft)}
.ft__mk{display:flex;flex-direction:column;gap:3px;font-size:17px;font-weight:800;letter-spacing:.01em;line-height:1.2}
.ft__mk span{font-size:11.5px;font-weight:600;letter-spacing:.2em;color:var(--aqua-dk)}
.ft__d{margin-top:13px;font-size:14.5px;line-height:1.75;color:var(--ink-2)}
.ft__n{display:grid;grid-template-columns:repeat(2,auto);gap:11px 40px;align-content:start}
.ft__n a{font-size:14px;color:var(--ink-2)}
.ft__n a:hover{color:var(--aqua-dk)}
.ft__loc{display:grid;grid-template-columns:minmax(0,1fr) minmax(280px,340px) minmax(0,1fr);gap:100px;align-items:center;padding:32px 0;font-size:13.5px;color:var(--ink-2);line-height:1.75}
.ft__ll{font-weight:750;color:var(--ink);margin-bottom:5px}
.ft__map-frame{position:relative;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:var(--aqua-mist)}
.ft__map-load{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:12.5px;color:var(--muted);z-index:0}
#ftNaverMap{display:block;width:100%;height:190px;position:relative;z-index:1}
.ft__loc-c:first-child{text-align:right}
.ft__map-btns{display:flex;gap:8px;margin-top:10px}
.ft__map-btn{flex:1;text-align:center;font-size:12.5px;font-weight:700;padding:9px 10px;border-radius:9px;border:1px solid var(--line);color:var(--ink);transition:border-color .2s var(--ease),color .2s var(--ease),background .2s var(--ease)}
.ft__map-btn:hover{border-color:var(--aqua);color:var(--aqua-dk)}
.ft__map-btn--n{background:var(--aqua);border-color:var(--aqua);color:#fff}
.ft__map-btn--n:hover{background:var(--aqua-dk);border-color:var(--aqua-dk);color:#fff}
.ft__fine{font-size:12px;color:var(--muted);line-height:1.7;padding-top:24px;border-top:1px solid var(--line-soft)}

/* 리빌 */
.rv{opacity:0;transform:translateY(16px);transition:opacity .65s var(--ease),transform .65s var(--ease)}
.rv.in{opacity:1;transform:none}
.d1{transition-delay:.07s}.d2{transition-delay:.14s}.d3{transition-delay:.21s}.d4{transition-delay:.28s}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv{opacity:1;transform:none;transition:none}
  .jump{transition:none}
  *{animation-duration:.001ms !important;transition-duration:.001ms !important}
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1240px){
  .hd__nav,.hd__cta{display:none}
  .burger{display:block}
  .hd.open .drawer{display:flex}
  .metrics__g{grid-template-columns:repeat(2,1fr)}
  .metrics__c:nth-child(2){border-right:0}
  .metrics__c:nth-child(-n+2){border-bottom:1px solid var(--line-soft)}
  .bene,.trio{grid-template-columns:repeat(2,1fr)}
  .steps{grid-template-columns:repeat(2,1fr)}
  .rail{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:900px){
  .shell{padding:0 22px}
  .drawer{padding-left:22px;padding-right:22px}
  .hero__g{grid-template-columns:1fr;gap:36px}
  .hero__v{order:-1;aspect-ratio:4/3}
  .simw{grid-template-columns:1fr}
  .prob{grid-template-columns:1fr}
  .prob__c{border-right:0;border-bottom:1px solid var(--line)}
  .prob__c:last-child{border-bottom:0}
  .blk__i{grid-template-columns:1fr;gap:16px}
  .duo{grid-template-columns:1fr}
  .ft__top{grid-template-columns:1fr}
  .ft__loc{grid-template-columns:1fr;gap:24px;align-items:start}
  .ft__loc-c:first-child{text-align:left}
  .etab thead{display:none}
  .etab tbody th,.etab tbody td{display:block;width:auto;border-right:0}
  .etab tbody td::before{content:attr(data-h);display:block;font-family:var(--mono);font-size:10.5px;
    letter-spacing:.1em;color:var(--aqua-dk);margin-bottom:7px}
}
@media (max-width:620px){
  .bene,.trio,.steps,.rail{grid-template-columns:1fr}
  .pkint__tiers,.pkint__forlist{grid-template-columns:1fr;gap:12px}
  .hero__a .btn,.closing__a .btn{width:100%}
  .ptab{overflow-x:auto}
  .ptab table{min-width:560px}
}

/* ============================================================
   우측 고정 퀵메뉴
   ------------------------------------------------------------
   데스크톱은 오른쪽 세로 스택, 모바일은 하단 가로 바로 바뀐다.
   토글로 접을 수 있고 선택은 localStorage 에 기억한다.
   ============================================================ */
.quick{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:80;
  display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.quick__tg{width:44px;height:44px;border-radius:50%;background:var(--white);border:1px solid var(--line);
  position:relative;box-shadow:0 4px 16px rgba(10,42,49,.1);transition:background .2s var(--ease),border-color .2s var(--ease)}
.quick__tg:hover{border-color:var(--aqua)}
.quick__tg span{position:absolute;left:13px;width:18px;height:1.8px;background:var(--ink);border-radius:2px;
  transition:transform .28s var(--ease),opacity .2s var(--ease)}
.quick__tg span:nth-child(1){top:16px}
.quick__tg span:nth-child(2){top:21px}
.quick__tg span:nth-child(3){top:26px}
.quick__tg[aria-expanded="false"] span:nth-child(1){transform:translateY(5px) rotate(45deg)}
.quick__tg[aria-expanded="false"] span:nth-child(2){opacity:0}
.quick__tg[aria-expanded="false"] span:nth-child(3){transform:translateY(-5px) rotate(-45deg)}

.quick__l{display:flex;flex-direction:column;gap:8px;
  transition:opacity .3s var(--ease),transform .3s var(--ease);transform-origin:top right}
.quick.off .quick__l{opacity:0;transform:scale(.9) translateX(12px);pointer-events:none}

.quick__b{width:72px;min-height:72px;padding:11px 6px;border-radius:18px;background:var(--white);
  border:1px solid var(--line);box-shadow:0 4px 16px rgba(10,42,49,.08);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  font-size:12px;font-weight:650;letter-spacing:-.03em;color:var(--ink-2);line-height:1.25;text-align:center;
  transition:background .2s var(--ease),border-color .2s var(--ease),color .2s var(--ease),transform .2s var(--ease)}
.quick__b svg{width:23px;height:23px;flex:none}
.quick__b:hover{border-color:var(--aqua);color:var(--aqua-dk);transform:translateX(-3px)}
.quick__b--book{background:var(--ink);border-color:var(--ink);color:#fff}
.quick__b--book:hover{background:var(--aqua-dk);border-color:var(--aqua-dk);color:#fff}
.quick__b--kakao{background:#FEE500;border-color:#F2DA00;color:#3C1E1E}
.quick__b--kakao:hover{background:#F5DE00;border-color:#E5CE00;color:#3C1E1E}
.quick__b--check{background:var(--aqua-mist);border-color:var(--aqua-mist);color:var(--aqua-dk)}
.quick__b--check:hover{background:var(--aqua);border-color:var(--aqua);color:#fff}
.quick__b--top{min-height:56px;font-size:11px}

@media (max-width:1400px){ .quick{right:14px} }

/* 좁은 화면 : 하단 고정 가로 바 */
@media (max-width:900px){
  .quick{right:0;left:0;top:auto;bottom:0;transform:none;flex-direction:row;align-items:stretch;gap:0;
    background:rgba(255,255,255,.96);backdrop-filter:blur(12px);border-top:1px solid var(--line);
    box-shadow:0 -4px 20px rgba(10,42,49,.07)}
  .quick__tg{display:none}
  .quick__l{flex-direction:row;flex:1;gap:0;opacity:1 !important;transform:none !important;pointer-events:auto !important}
  .quick__b{flex:1;width:auto;min-height:62px;border-radius:0;border:0;border-right:1px solid var(--line-soft);
    box-shadow:none;gap:4px;font-size:11.5px;padding:9px 4px}
  .quick__b:last-child{border-right:0}
  .quick__b:hover{transform:none}
  .quick__b svg{width:20px;height:20px}
  .quick__b--top{display:none}
  body{padding-bottom:62px}
}

/* ------------------------------------------------------------
   퀵메뉴 겹침 방지
   본문(shell 1240px)과 우측 스택(72px)이 같이 들어가려면 최소 1460px 이
   필요하다. 그보다 좁으면 본문을 가리므로 하단 플로팅 바로 전환한다.
     1460px 이상 : 우측 세로 스택
     900~1460px  : 하단 중앙 알약형 바 (본문을 가리지 않음)
     900px 미만  : 하단 전체폭 바
   ------------------------------------------------------------ */
@media (max-width:1460px){
  .quick{right:auto;left:50%;top:auto;bottom:18px;transform:translateX(-50%);
    flex-direction:row;align-items:center;gap:0;
    background:rgba(255,255,255,.94);backdrop-filter:blur(14px);
    border:1px solid var(--line);border-radius:999px;padding:6px;
    box-shadow:0 8px 30px rgba(10,42,49,.14)}
  .quick__tg{display:none}
  .quick__l{flex-direction:row;gap:5px;opacity:1 !important;transform:none !important;pointer-events:auto !important}
  .quick__b{width:auto;min-height:46px;flex-direction:row;gap:8px;padding:0 18px;border-radius:999px;
    border:0;box-shadow:none;font-size:14px}
  .quick__b svg{width:19px;height:19px}
  .quick__b:hover{transform:none}
  .quick__b--top{display:none}
  body{padding-bottom:84px}
}
@media (max-width:900px){
  .quick{left:0;right:0;bottom:0;transform:none;border-radius:0;border:0;
    border-top:1px solid var(--line);padding:0;box-shadow:0 -4px 20px rgba(10,42,49,.07)}
  .quick__l{flex:1;gap:0}
  .quick__b{flex:1;min-height:62px;flex-direction:column;gap:4px;border-radius:0;
    border-right:1px solid var(--line-soft);padding:9px 4px;font-size:11.5px}
  .quick__b:last-child{border-right:0}
  .quick__b svg{width:20px;height:20px}
  body{padding-bottom:62px}
}

/* ============================================================
   섹션 색 리듬
   ------------------------------------------------------------
   paper(#F7FAFA) · white · film(#F1FAF9) 세 가지가 육안으로
   구분이 안 될 만큼 비슷해서 전체가 흰 화면으로 읽혔다.
   채도를 올린 틴트 3종을 추가해 스크롤할 때 색이 넘어가게 한다.
     따뜻(문제) → 아쿠아(생태계) → 흰(정의) → 차가운(기대영역)
     → 잉크(검증) → 흰(프로그램) → 따뜻(관리) → 잉크(마감)
   ============================================================ */
:root{
  --tint-amber:#FFF4E4;   /* 문제 제기 · 시술 전후 관리 */
  --tint-aqua:#E4F3F1;    /* 생태계 · 언론 */
  --tint-mist:#EAF1F4;    /* 기대 영역 */
}
.sec--amber{background:var(--tint-amber)}
.sec--aqua{background:var(--tint-aqua)}
.sec--mist{background:var(--tint-mist)}

/* 기존 film 은 너무 옅어 흰색과 구분되지 않았다 */
.sec--film{background:var(--tint-aqua)}

/* 틴트 위에 얹히는 카드·표는 흰 배경을 유지해 대비를 만든다 */
.sec--amber .prob,.sec--amber .stp,.sec--amber .etab,.sec--amber .ptab,
.sec--aqua .card,.sec--aqua .bc,.sec--aqua .rc,.sec--mist .bc,.sec--mist .card{background:var(--white)}
.sec--amber .prob__c:hover{background:#FFFAF2}

/* 섹션 경계에 얇은 색선 — 면이 바뀌는 지점을 눈에 띄게 */
.sec--amber{border-top:3px solid var(--amber)}
.sec--aqua{border-top:3px solid var(--aqua)}
.sec--mist{border-top:3px solid #8FB4C4}
.sec--ink{border-top:3px solid var(--aqua)}
.closing{border-top:3px solid var(--amber)}

/* 히어로에 은은한 그라디언트 */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 55%,var(--tint-aqua) 100%)}
.metrics{background:var(--white);border-top:0}

/* 문제 제기 섹션의 강조 하이라이트를 앰버로 (경고 성격에 맞춤) */
.sec--amber .hl{box-shadow:inset 0 -.4em 0 rgba(255,177,61,.34)}

/* ============================================================
   섹션 색 리듬 — 수정
   ------------------------------------------------------------
   앰버(#FFF4E4)를 섹션 배경 같은 큰 면에 썼더니 아쿠아 기반 전체
   톤에서 베이지가 혼자 튀었다. 앰버는 원래 설계대로 아주 작은
   포인트(아이브로우 선·태그)에만 남기고, 배경 리듬은 아쿠아 계열
   안에서 '명도'만 단계적으로 바꿔 만든다. 색상은 하나, 밝기는 넷.
   ============================================================ */
:root{
  --tint-1:#EDF4F5;   /* 한 단계 어두운 쿨 화이트 */
  --tint-2:#E1F0EF;   /* 아쿠아 라이트 */
  --tint-3:#D2E8E6;   /* 아쿠아 미디엄 — 가장 진한 밝은 톤 */
}
.sec--amber{background:var(--tint-1);border-top:3px solid #B9D4D6}
.sec--aqua{background:var(--tint-3);border-top:3px solid var(--aqua)}
.sec--mist{background:var(--tint-2);border-top:3px solid #7FCFC9}
.sec--film{background:var(--tint-2)}
.closing{border-top:3px solid var(--aqua)}

/* 틴트 위 카드는 흰 배경 유지 */
.sec--amber .prob,.sec--amber .stp,.sec--amber .etab,.sec--amber .ptab,
.sec--amber .flow,.sec--aqua .rc,.sec--aqua .card,.sec--aqua .bc,
.sec--mist .bc,.sec--mist .card{background:var(--white)}
.sec--amber .prob__c:hover{background:var(--aqua-film)}

/* 강조 하이라이트는 다시 아쿠아로 (앰버는 큰 면에서 튄다) */
.sec--amber .hl{box-shadow:inset 0 -.4em 0 rgba(0,178,169,.18)}

/* 히어로 그라디언트도 아쿠아 계열로 통일 */
.hero{background:linear-gradient(180deg,#FFFFFF 0%,var(--paper) 50%,var(--tint-1) 100%)}

/* ============================================================
   3회 패키지(어두운 카드) 글자 대비 수정
   ------------------------------------------------------------
   .pk--rebuild li 와 .pk li 는 우선순위가 (0,1,1) 로 완전히 같아서
   파일 뒤에 있는 .pk li{color:var(--ink-2)} 가 이겼다.
   그 결과 딥 잉크 배경 위에 딥 잉크 계열 글자가 얹혀 명암비가
   1.85 까지 떨어졌다. 우선순위를 올려 확실히 덮는다.
   ============================================================ */
.pk.pk--rebuild li{color:rgba(255,255,255,.9)}
.pk.pk--rebuild li::before{background:#7FE3DB}
.pk.pk--rebuild li span{color:inherit}
.pk.pk--rebuild h3{color:#fff}
.pk.pk--rebuild .pk__lb{color:#7FE3DB}
/* 유지 관리 옵션 카드도 틴트 배경이라 본문색을 한 단계 진하게 */
.pk.pk--lockin li{color:var(--ink-2)}
.pk.pk--lockin li::before{background:var(--aqua-dk)}

/* ============================================================
   스크롤 진행에 따라 짙어지는 헤더
   ------------------------------------------------------------
   밝은 아쿠아 계열 안에서만 아주 조금씩 깊어진다. 어두운 톤으로
   넘어가지 않으므로 글자색은 딥 잉크 그대로 유지된다.
     맨 위 #F7FAFA → 맨 아래 #D6E7E6
     전환 지점이 없어 갑자기 바뀌는 순간이 없다.
   실제 색은 JS 가 --hd-bg 에 넣는다. 어느 지점에서도 본문 글자
   명암비가 6.4:1 아래로 내려가지 않는다.
   ============================================================ */
.hd{--hd-bg:rgba(247,250,250,.9);background:var(--hd-bg);
  transition:background-color .18s linear,border-color .3s var(--ease)}

/* 바로가기 바도 함께 어두워져야 헤더와 한 덩어리로 읽힌다 */
.jump{--jp-bg:var(--white);background:var(--jp-bg);transition:background-color .18s linear}

@media (prefers-reduced-motion:reduce){
  .hd,.jump{transition:none}
}

/* ============================================================
   안내 박스(.sec__note) 톤 정리
   ------------------------------------------------------------
   앰버 미스트(#FFF4E3) 배경이라 아쿠아 기반 전체 톤에서 베이지가
   혼자 떠 보였다. 섹션 배경이 흰색·페이퍼·아쿠아 틴트로 계속
   바뀌므로, 고정 색 대신 잉크를 옅게 얹어(rgba) 어떤 배경 위에서도
   같은 정도로만 진해지게 한다. 왼쪽 굵은 선만 아쿠아로 남긴다.
   ============================================================ */
.sec__note{
  background:rgba(10,42,49,.045);
  border-left:3px solid var(--aqua);
  border-radius:0 var(--r-md) var(--r-md) 0;
  color:var(--ink-2);
  padding:20px 24px;
}
.sec--ink .sec__note{
  background:rgba(255,255,255,.07);
  border-left-color:#7FE3DB;
  color:rgba(255,255,255,.82);
}

/* ============================================================
   BEFORE / AFTER 대조 카드 (fmtcare_11 계승)
   ------------------------------------------------------------
   시뮬레이터가 '움직이는 설명'이라면 이 카드는 '읽는 설명'이다.
   둘을 같이 두면 훑어보는 사람과 정독하는 사람이 각자 얻어간다.
   ============================================================ */
.contrast{display:grid;grid-template-columns:1fr 1fr;gap:clamp(18px,2.2vw,28px)}
.ccard{position:relative;border-radius:var(--r-lg);padding:clamp(26px,2.8vw,38px);
  border:1px solid var(--line);background:var(--white);overflow:hidden}
.ccard--bad{background:#FBFAF8;border-color:#EDE6DA}
.ccard--good{background:linear-gradient(168deg,#F0FAF9 0%,#FFFFFF 62%);border-color:#CDE9E6}
.ccard__tag{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;border-radius:999px;
  font-size:12px;font-weight:750;letter-spacing:.02em;margin-bottom:20px}
.ccard--bad .ccard__tag{background:var(--amber-mist);color:var(--amber-dk)}
.ccard--good .ccard__tag{background:var(--aqua-mist);color:var(--aqua-dk)}
.ccard h3{font-size:clamp(19px,2.1vw,24px);font-weight:750;letter-spacing:-.032em;line-height:1.36}
.ccard__visual{aspect-ratio:16/9;margin:24px 0;border-radius:var(--r-md)}
.cclist{list-style:none;display:grid;gap:13px}
.cclist li{display:flex;gap:12px;font-size:15px;line-height:1.68;color:var(--ink-2)}
.cclist li svg{flex:none;margin-top:4px}
@media (max-width:900px){ .contrast{grid-template-columns:1fr} }

/* ============================================================
   작은 라벨 가독성 수정
   ------------------------------------------------------------
   문제 : 태그·라벨을 모노스페이스 10.5px / weight 400 으로 잡았는데
          모노스페이스 폰트에는 한글 글리프가 없다. 그래서 한글만
          시스템 대체 폰트로 떨어지면서 획이 얇아지고, 양수 자간까지
          겹쳐 흩어져 보였다. 대비도 4.34 로 기준(4.5) 미달이었다.
   해결 : ① --mono 폴백 끝에 Pretendard 를 넣어 한글 글리프만
             제대로 된 폰트로 렌더링되게 한다 (영문·숫자는 모노 유지)
          ② 한글이 들어가는 라벨은 크기와 굵기를 올린다
   ============================================================ */
:root{
  --mono:ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,
         'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',monospace;
}

/* 기대 영역 카드의 두 태그 — 사용자가 지적한 지점 */
.bc__lv,.bc__tag{
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;
  font-size:12.5px;font-weight:750;letter-spacing:-.01em;padding:6px 12px;
}
.bc__lv{background:var(--aqua-mist);color:#00615C}
.bc__tag.strong{background:#DFF0E6;color:#1E5C39}
.bc__tag.research{background:var(--amber-mist);color:#7A4F0F}
.bc__tag.care{background:#E7ECF1;color:#3E4F5A}
.bc__pts span{font-size:13px;font-weight:650}

/* 같은 결함을 가진 다른 한글 라벨들 */
.card__t,.rc__lb,.pk__lb,.jump__lb,.blk__lb{
  font-family:'Pretendard Variable',Pretendard,'Apple SD Gothic Neo',sans-serif;
  letter-spacing:-.01em;font-weight:700;
}
.card__t{font-size:12.5px;padding:6px 12px}
.rc__lb{font-size:13px}
.pk__lb{font-size:12.5px}
.jump__lb{font-size:12px;color:var(--ink-2)}
.blk__lb{font-size:12.5px;padding:6px 11px}
.metrics__s{font-size:12px;letter-spacing:0}
.stp__k{font-size:14.5px;color:var(--ink-2)}

/* --aqua-dk(#007F79) 를 아쿠아 미스트 위에 얹으면 대비가 4.34 로
   기준(4.5)을 못 넘는다. 작은 라벨에 한해 한 단계 더 진한 청록을 쓴다. */
.card__t{color:#00615C}
.blk__lb{color:#00615C}
.rc__lb{color:#00615C}
.pk__lb{color:#00615C}
.pk--rebuild .pk__lb{color:#7FE3DB}
.bc__sub{color:#00615C}

/* ============================================================
   작은 글씨 대비 전수 정리
   ------------------------------------------------------------
   페이지의 15px 미만 텍스트를 전부 훑어 기준(4.5) 미달을 찾아 고쳤다.
     --muted  #6E8A90 → #566E75  (흰 배경 대비 3.68 → 5.4)
     .eyebrow / .ccard__tag 은 틴트 배경 위라 한 단계 더 진한 청록으로
   ============================================================ */
:root{ --muted:#566E75; }
.eyebrow{color:#00615C}
.eyebrow--amber{color:#7A4F0F}
.ccard--good .ccard__tag{color:#00615C}
.ccard--bad .ccard__tag{color:#7A4F0F}
.hero__n{color:var(--muted)}
.metrics__s{color:var(--muted)}

/* 위에서 .eyebrow 색을 다시 지정하면서 같은 우선순위의 .eyebrow--w(흰색 변형)를
   덮어써 어두운 섹션에서 대비가 2.06 까지 떨어졌다. 우선순위를 올려 되살린다. */
.eyebrow.eyebrow--w{color:rgba(255,255,255,.78)}
.eyebrow.eyebrow--w::before{background:rgba(255,255,255,.55)}

/* ============================================================
   본문 가독성 + 첫 화면 안내 카드
   ------------------------------------------------------------
   본문 weight 380 은 한글에서 획이 얇아 눈에 잘 안 들어온다.
   420~430 으로 올리고 한 줄 길이를 제한한다.
   ============================================================ */
.lede{font-weight:430;line-height:1.82}
.body{font-weight:420}
.sec__hd .lede{max-width:64ch}
.blk__l li p{font-weight:420}
.bc p,.stp li,.rc li,.pk li,.prob__c p,.cclist li{font-weight:430}
.fq__a p{font-weight:420;font-size:16px}

/* 첫 화면의 '어디로 갈지' 카드 4장 */
.gnav{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,1.8vw,22px)}
.gcard{display:flex;flex-direction:column;position:relative;overflow:hidden;
  padding:clamp(28px,3vw,40px);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.gcard:hover{border-color:var(--aqua);transform:translateY(-4px);box-shadow:0 12px 30px rgba(10,42,49,.07)}
.gcard__n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--aqua-dk);margin-bottom:16px}
.gcard h3{font-size:clamp(21px,2.3vw,26px);font-weight:800;letter-spacing:-.035em;margin-bottom:12px}
.gcard p{font-size:16px;font-weight:430;line-height:1.76;color:var(--ink-2);max-width:42ch}
.gcard__go{margin-top:auto;padding-top:22px;display:inline-flex;align-items:center;gap:8px;
  font-size:14px;font-weight:700;color:var(--aqua-dk)}
.gcard__go i{font-style:normal;transition:transform .2s var(--ease)}
.gcard:hover .gcard__go i{transform:translateX(4px)}

/* 언론 카드 안의 작은 썸네일 줄 */
.mini-th{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.mini-th img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:8px;background:var(--aqua-mist)}

/* 근거 섹션의 두 카드는 링크라 커서와 호버를 준다 */
a.rc{transition:border-color .22s var(--ease),transform .22s var(--ease)}
a.rc:hover{border-color:var(--aqua);transform:translateY(-3px)}
a.rc h3{margin-bottom:0}

@media (max-width:860px){ .gnav{grid-template-columns:1fr} }

/* ============================================================
   원본 구조용 컴포넌트
   메뉴 그리드(7개) · 페이지 안 바로가기
   ============================================================ */
.mgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.6vw,20px)}
.mcard{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.8vw,36px);
  border:1px solid var(--line);border-radius:var(--r-lg);background:var(--white);
  transition:border-color .22s var(--ease),transform .22s var(--ease),box-shadow .22s var(--ease)}
.mcard:hover{border-color:var(--aqua);transform:translateY(-4px);box-shadow:0 12px 30px rgba(10,42,49,.07)}
.mcard__n{font-family:var(--mono);font-size:12px;letter-spacing:.14em;color:var(--aqua-dk);margin-bottom:14px}
.mcard h3{font-size:clamp(19px,2vw,23px);font-weight:800;letter-spacing:-.034em;margin-bottom:10px}
.mcard p{font-size:15.5px;font-weight:430;line-height:1.72;color:var(--ink-2)}
.mcard__go{position:absolute;right:clamp(22px,2.4vw,30px);bottom:clamp(22px,2.4vw,30px);
  font-size:19px;color:var(--aqua-dk);transition:transform .2s var(--ease)}
.mcard:hover .mcard__go{transform:translateX(4px)}
/* 마지막 두 칸은 강조 (평가·예약) */
.mcard:nth-child(2){background:var(--aqua-film);border-color:var(--aqua-mist)}
.mcard:nth-child(7){background:var(--ink);border-color:var(--ink);color:#fff}
.mcard:nth-child(7) p{color:rgba(255,255,255,.8)}
.mcard:nth-child(7) .mcard__n,.mcard:nth-child(7) .mcard__go{color:#7FE3DB}

.inpage{display:flex;flex-wrap:wrap;gap:8px}
.inpage a{display:inline-flex;align-items:center;gap:9px;padding:11px 18px;border-radius:999px;
  border:1px solid var(--line);background:var(--white);font-size:14.5px;font-weight:650;color:var(--ink-2);
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.inpage a:hover{border-color:var(--aqua);color:var(--aqua-dk)}
.inpage a b{font-family:var(--mono);font-size:11.5px;font-weight:700;color:var(--aqua-dk)}

@media (max-width:1080px){ .mgrid{grid-template-columns:repeat(2,1fr)} }
@media (max-width:620px){ .mgrid{grid-template-columns:1fr} }