@charset "UTF-8";
/* ══════════════════════════════════════════════════════════════
   착한 태아보험 연구소 — 공용 스타일시트 v4 (2026 리뉴얼)
   v3 확정본의 컬러 팔레트 · 클래스명을 그대로 유지하고
   타이포 / 여백 / 표면 / 모션만 2026 트렌드로 재설계했습니다.

   변경 요약
   · 순수 흰색 → 웜 오프화이트(paper) 기본 지면
   · 두꺼운 물결 디바이더 → 얇은 단일 곡선 + 헤어라인
   · 카드 그림자 남발 → 헤어라인 + 호버에만 그림자
   · 디스플레이 타이포 대비 강화 (hero 1.06 라인하이트)
   · 벤토 그리드 · 스크롤 구동 리빌 · 뷰포트 스냅 지표바
   · 신규 컴포넌트 : .aisim(AI 답변 시뮬레이터) .dx(맞춤 진단)
                     .chunk(인용 청크) .entity(동일주체)
   ══════════════════════════════════════════════════════════════ */

:root{
  /* ── 브랜드 (v3 확정 팔레트 유지) ── */
  --peri:#5C6CC4; --peri-dp:#46549F; --peri-lt:#8E9BDD;
  --navy:#1B3358; --ink:#122540;
  --coral:#F0563A; --coral-dp:#D63C21; --orange:#F5803F;
  --lime:#E4EE5A;

  /* ── 지면 ── */
  --white:#FFFFFF; --paper:#FCFAF7;
  --cream:#FFF6EA; --peach:#FBDCC6; --lilac:#D9DDF3; --mist:#F6F7FC;

  /* ── 텍스트 ── */
  --tx:#1B3358; --tx-2:#59687F; --tx-3:#93A0B4;
  --on:#FFFFFF; --on-2:rgba(255,255,255,.86);

  /* ── 선 ── */
  --line:#E9E4DC; --line-2:#D6D0C6;
  --hair:rgba(27,51,88,.10);
  --hair-2:rgba(27,51,88,.16);

  /* ── 표면 그림자 (레이어드) ── */
  --sh-1:0 1px 2px rgba(27,51,88,.04);
  --sh-2:0 2px 4px rgba(27,51,88,.04),0 8px 20px rgba(27,51,88,.05);
  --sh-3:0 4px 8px rgba(27,51,88,.05),0 18px 42px rgba(27,51,88,.10);
  --sh-4:0 8px 16px rgba(27,51,88,.06),0 32px 64px rgba(27,51,88,.14);
  --sh-c:0 8px 24px rgba(240,86,58,.26);

  /* ── 반경 ── */
  --r-xs:8px; --r:12px; --r-lg:20px; --r-xl:28px; --r-2xl:36px;

  /* ── 레이아웃 ── */
  --maxw:1180px;
  --gut:clamp(20px,5vw,56px);
  --pad:clamp(64px,8.4vw,132px);
  --wave:clamp(26px,3.4vw,56px);

  /* ── 타입 스케일 (대비 강화) ── */
  --d0:clamp(34px,7.2vw,72px);
  --d1:clamp(26px,4.4vw,50px);
  --d2:clamp(19px,2.3vw,26px);
  --body:clamp(15px,1.5vw,17px);
  --micro:clamp(10.5px,1vw,11.5px);

  --ff:'Wanted Sans Variable','Wanted Sans','Pretendard Variable',Pretendard,
       'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',sans-serif;
  /* 숫자·영문 라벨용. 한글이 섞이면 monospace 에 한글이 없어 Malgun Gothic 으로
     떨어지면서 본문과 다른 서체로 보입니다. 뒤에 본문 한글 폰트를 붙여 막습니다. */
  --mono:'SFMono-Regular',ui-monospace,'Menlo','Consolas',
         'Wanted Sans Variable','Wanted Sans','Pretendard Variable',Pretendard,
         'Noto Sans KR','Malgun Gothic','Apple SD Gothic Neo',monospace;
  --ez:cubic-bezier(.16,1,.3,1);
  --ez2:cubic-bezier(.22,1.1,.36,1);
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:104px}
body{
  margin:0;background:var(--paper);color:var(--tx);
  font-family:var(--ff);font-size:var(--body);line-height:1.76;
  letter-spacing:-.02em;overflow-x:hidden;
  word-break:keep-all;overflow-wrap:break-word;
  font-feature-settings:'ss01','tnum';
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
}
img,svg{max-width:100%}
img{display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;line-height:1.2;letter-spacing:-.048em;font-weight:800;text-wrap:balance}
p{margin:0;text-wrap:pretty}
ul,ol{margin:0;padding:0;list-style:none}
:focus-visible{outline:3px solid var(--coral);outline-offset:3px;border-radius:8px}
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
::selection{background:var(--lime);color:var(--ink)}

/* ─── 진행바 ─── */
.prog{position:fixed;top:0;left:0;height:2.5px;width:0;z-index:300;
  background:linear-gradient(90deg,var(--orange),var(--coral));transition:width .1s linear;
  box-shadow:0 0 12px rgba(240,86,58,.5)}

/* ─── 공지바 ─── */
.notice{background:var(--ink);color:rgba(255,255,255,.9);font-size:12.2px;font-weight:600;
  letter-spacing:-.015em;text-align:center;padding:9px var(--gut);position:relative;z-index:210}
.notice b{font-weight:800;color:#fff}

/* ═══ GNB ═══ */
.gnb{position:sticky;top:0;z-index:200;height:70px;display:flex;align-items:center;
  background:color-mix(in srgb,var(--paper) 78%,transparent);
  -webkit-backdrop-filter:saturate(180%) blur(22px);backdrop-filter:saturate(180%) blur(22px);
  border-bottom:1px solid transparent;
  transition:height .32s var(--ez),box-shadow .32s,border-color .32s,background .32s}
.gnb.stuck{height:60px;box-shadow:0 1px 0 var(--hair),0 8px 28px rgba(27,51,88,.06);
  border-bottom-color:var(--hair)}
.gnb-in{width:100%;max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{display:flex;align-items:center;gap:9px;flex:none;min-height:44px}
.brand svg{width:29px;height:29px;flex:none;transition:transform .45s var(--ez2)}
.brand:hover svg{transform:rotate(-9deg) scale(1.1)}
.brand span{font-weight:800;font-size:15px;letter-spacing:-.055em;white-space:nowrap;color:var(--ink)}
.brand em{font-style:normal;color:var(--coral)}
.nav{display:none;gap:clamp(6px,1vw,16px);font-size:13.8px;font-weight:700;color:var(--tx-2)}
.nav a{position:relative;display:inline-flex;align-items:center;min-height:44px;padding-inline:6px;
  border-radius:9px;transition:color .2s,background .2s;white-space:nowrap}
.nav a::after{content:"";position:absolute;left:6px;right:calc(100% - 6px);bottom:9px;height:2px;
  background:var(--coral);border-radius:3px;transition:right .36s var(--ez)}
.nav a:hover{color:var(--coral)}
.nav a:hover::after,.nav a[aria-current="page"]::after{right:6px}
.nav a[aria-current="page"]{color:var(--coral)}
@media(min-width:1080px){.nav{display:flex}}
.kbtn{flex:none;display:inline-flex;align-items:center;justify-content:center;gap:7px;
  background:var(--coral);color:#fff;font-weight:700;font-size:13.5px;letter-spacing:-.03em;
  padding:0 18px;min-height:42px;border-radius:999px;box-shadow:var(--sh-c);
  transition:transform .26s var(--ez2),box-shadow .26s,background .2s}
.kbtn:hover{transform:translateY(-2px);box-shadow:0 12px 30px rgba(240,86,58,.36);background:var(--coral-dp)}
@media(max-width:430px){.kbtn i{display:none}.kbtn{min-width:44px;padding:0 14px}}
.burger{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;
  border:0;background:transparent;cursor:pointer;flex:none;border-radius:12px}
.burger span{display:block;width:20px;height:2px;background:var(--ink);border-radius:2px;position:relative;
  transition:transform .3s var(--ez),background .2s}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:20px;height:2px;
  background:var(--ink);border-radius:2px;transition:transform .3s var(--ez)}
.burger span::before{top:-6px}.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg)}
.burger[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg)}
@media(min-width:1080px){.burger{display:none}}
.drawer{position:fixed;inset:70px 0 auto 0;z-index:195;background:var(--paper);
  border-bottom:1px solid var(--line);box-shadow:0 24px 48px rgba(27,51,88,.12);
  max-height:0;overflow:hidden;transition:max-height .42s var(--ez)}
.drawer.open{max-height:560px}
.drawer ul{padding:8px var(--gut) 20px}
.drawer a{display:flex;align-items:center;min-height:52px;font-size:15.5px;font-weight:700;
  border-bottom:1px solid var(--line)}
.drawer a[aria-current="page"]{color:var(--coral)}

/* ─── 밴드 + 디바이더 ─── */
.band{position:relative;overflow:hidden;padding-top:var(--pad);padding-bottom:calc(var(--pad) + var(--wave))}
.band.nowave{padding-bottom:var(--pad)}
.b-white{background:var(--paper)} .b-cream{background:var(--cream)}
.b-peach{background:var(--peach)} .b-lilac{background:var(--lilac)}
.b-mist{background:var(--mist)}
.b-peri{background:var(--peri);color:var(--on)}
.b-ink{background:var(--ink);color:var(--on)}
.b-coral{background:linear-gradient(148deg,var(--orange) 0%,var(--coral) 54%,#DC3A1E 100%);color:var(--on)}
.wave{position:absolute;left:0;right:0;bottom:-1px;line-height:0;z-index:2;pointer-events:none}
.wave svg{display:block;width:100%;height:var(--wave)}
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);position:relative;z-index:3}

/* 미세 텍스처 — 밋밋한 단색 지면에 종이 결을 더합니다 */
.band::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.5;
  background-image:radial-gradient(rgba(27,51,88,.045) .6px,transparent .6px);
  background-size:22px 22px}
.b-coral::after,.b-peri::after,.b-ink::after{
  background-image:radial-gradient(rgba(255,255,255,.09) .7px,transparent .7px);opacity:.6}

/* 장식 */
.deco{position:absolute;pointer-events:none;z-index:1}
.deco.circ{border-radius:50%;background:var(--orange)}
.deco.lime{background:var(--lime);border-radius:10px;transform:rotate(6deg)}
.deco.blur{border-radius:50%;filter:blur(60px);opacity:.5}

/* ─── 지그재그 ─── */
.zig{display:grid;gap:clamp(30px,4.6vw,64px);align-items:center}
@media(min-width:960px){
  .zig{grid-template-columns:minmax(0,1fr) minmax(0,1.02fr)}
  .zig.rev .zig-txt{order:2} .zig.rev .zig-vis{order:1}
}
.zig-txt,.zig-vis{min-width:0}
.zig-vis{position:relative}

/* ─── 타이포 ─── */
.eyebrow{display:inline-flex;align-items:center;gap:8px;color:var(--coral);
  font-size:11.4px;font-weight:800;letter-spacing:.09em;margin-bottom:15px;text-transform:uppercase}
.eyebrow .d{width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none;animation:pulse 2.4s ease-in-out infinite}
.b-peri .eyebrow,.b-coral .eyebrow,.b-ink .eyebrow{color:#fff}
.b-peri .eyebrow .d,.b-coral .eyebrow .d,.b-ink .eyebrow .d{background:#fff}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.65)}}

h1.hero-h{font-size:var(--d0);color:var(--ink);line-height:1.06;letter-spacing:-.055em;font-weight:850}
h2.big{font-size:var(--d1);margin-bottom:18px;max-width:20ch;color:var(--ink);line-height:1.14;letter-spacing:-.052em}
h3.mid{font-size:var(--d2);margin:28px 0 10px;color:var(--ink)}
.b-peri h2.big,.b-coral h2.big,.b-ink h2.big,.b-peri h3.mid{color:#fff}
.lead{max-width:48ch;color:var(--tx-2);font-size:clamp(15px,1.6vw,17px)}
.lead b{color:var(--ink);font-weight:700}
.b-peri .lead,.b-coral .lead,.b-ink .lead{color:var(--on-2)}
.b-peri .lead b,.b-coral .lead b,.b-ink .lead b{color:#fff}
.lead + .lead{margin-top:13px}
.center{text-align:center}
.center h2.big{margin-inline:auto;max-width:24ch}
.center .lead{margin-inline:auto;max-width:54ch}

/* 결론 선행 답변 블록 (GEO 인용 타깃) */
.answer{position:relative;padding:2px 0 2px 20px;margin:20px 0 24px;
  font-size:clamp(15.5px,1.8vw,18.5px);line-height:1.7;color:var(--ink);max-width:60ch;font-weight:500}
.answer::before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:3px;border-radius:3px;
  background:linear-gradient(180deg,var(--orange),var(--coral))}
.answer b{font-weight:800}

/* ─── 버튼 ─── */
.btn{appearance:none;-webkit-appearance:none;border:0;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:54px;padding:0 26px;border-radius:999px;position:relative;
  font-weight:700;font-size:15.5px;letter-spacing:-.03em;
  transition:transform .28s var(--ez2),box-shadow .28s,background .22s,color .22s}
.btn:hover{transform:translateY(-3px)}
.btn-c{background:var(--coral);color:#fff;box-shadow:var(--sh-c)}
.btn-c:hover{background:var(--coral-dp);box-shadow:0 16px 38px rgba(240,86,58,.36)}
.btn-w{background:#fff;color:var(--coral);box-shadow:0 10px 28px rgba(27,51,88,.16)}
.btn-o{background:transparent;color:#fff;box-shadow:inset 0 0 0 1.6px rgba(255,255,255,.55)}
.btn-o:hover{background:rgba(255,255,255,.14)}
.btn-n{background:var(--ink);color:#fff;box-shadow:0 10px 26px rgba(18,37,64,.22)}
.btn-n:hover{background:#0C1B31}
.btn-g{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--hair-2)}
.btn-g:hover{background:#fff;box-shadow:inset 0 0 0 1.5px var(--ink),var(--sh-2)}
.btn.pulse::after{content:"";position:absolute;inset:-3px;border-radius:999px;border:2px solid currentColor;
  opacity:0;animation:ring 2.8s var(--ez) infinite}
@keyframes ring{0%{transform:scale(.94);opacity:.45}70%{transform:scale(1.14);opacity:0}100%{opacity:0}}
/* CTA 버튼은 어디에 있든 가운데 정렬 */
.acts{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px;justify-content:center}

/* ─── 마스코트 ─── */
.mascot{width:clamp(150px,20vw,280px);height:auto;filter:drop-shadow(0 24px 38px rgba(27,51,88,.15))}
.mascot-float{animation:mfloat 7s ease-in-out infinite}
/* 모바일에서는 마스코트를 줄여 첫 화면이 글로 시작하게 한다 */
@media(max-width:700px){
  .zig-vis .mascot{width:clamp(112px,30vw,158px)!important;margin-top:-4px}
}
@keyframes mfloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-15px) rotate(-2deg)}}

/* ═══ 이미지/영상 PLACEHOLDER ═══ */
.ph-box{position:relative;margin:0;border-radius:var(--r-2xl);
  background:repeating-linear-gradient(135deg,rgba(92,108,196,.045) 0 12px,rgba(92,108,196,.015) 12px 24px),#fff;
  border:1.5px dashed var(--peri-lt);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,3vw,32px);overflow:hidden}
.ph-tag{display:inline-flex;align-items:center;gap:7px;align-self:flex-start;
  background:var(--peri);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em;
  padding:6px 12px;border-radius:999px;margin-bottom:14px}
.ph-tag.vid{background:var(--coral)}
.ph-h{font-size:clamp(15px,1.85vw,17.5px);font-weight:800;color:var(--ink);margin-bottom:9px;letter-spacing:-.04em}
.ph-box p{font-size:13.4px;color:var(--tx-2);line-height:1.72;max-width:46ch}
.ph-spec{margin-top:14px;padding-top:12px;border-top:1px dashed var(--line-2);
  font-family:var(--mono);font-size:10.6px;color:var(--tx-3);line-height:1.75}
.ph-r45{aspect-ratio:4/5} .ph-r11{aspect-ratio:1/1} .ph-r32{aspect-ratio:3/2} .ph-r34{aspect-ratio:3/4}
@media(max-width:600px){.ph-r45,.ph-r11,.ph-r32,.ph-r34{aspect-ratio:auto;min-height:220px}}

/* 설명 영상 */
.vfig{margin:0;border-radius:var(--r-2xl);overflow:hidden;background:var(--cream);
  border:1px solid var(--hair);box-shadow:var(--sh-2)}
.vfig video{display:block;width:100%;height:auto;aspect-ratio:1/1;object-fit:cover;background:var(--cream)}
.vfig figcaption{padding:13px 18px 15px;font-size:12.4px;line-height:1.7;color:var(--tx-3);background:#fff}
.vfig figcaption b{color:var(--tx-2);font-weight:700}

/* 주수별 준비 3컷 — 파일이 없으면 스스로 숨는다 */
.wfig{margin:0;border-radius:var(--r-xl);overflow:hidden;background:var(--cream);
  border:1px solid var(--hair);box-shadow:var(--sh-1);
  transition:transform .34s var(--ez2),box-shadow .34s}
.wfig[hidden]{display:none}
.wfig:hover{transform:translateY(-4px);box-shadow:var(--sh-3)}
.wfig img{display:block;width:100%;height:auto;aspect-ratio:3/4;object-fit:cover}
.wfig figcaption{padding:18px 20px 20px;font-size:14px;line-height:1.62;
  color:var(--tx-2);background:#fff;text-align:center}
.wfig figcaption b{display:inline-block;color:var(--coral-dp);background:#FFEDE4;
  border-radius:999px;padding:8px 16px;font-size:13.6px;letter-spacing:-.03em;line-height:1;
  font-weight:800}
.wfig figcaption b:not(:only-child){margin-bottom:9px;display:block;width:fit-content;
  margin-left:auto;margin-right:auto}

/* ─── 카드 (헤어라인 기반으로 전환) ─── */
.cards{display:grid;gap:10px}
@media(min-width:560px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.cards.c3{grid-template-columns:1fr}
@media(min-width:760px){.cards.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.card{background:#fff;border-radius:var(--r-lg);padding:22px;position:relative;overflow:hidden;
  border:1px solid var(--hair);box-shadow:var(--sh-1);
  transition:transform .34s var(--ez2),box-shadow .34s,border-color .34s}
.card::before{content:"";position:absolute;inset:auto auto 0 0;height:2.5px;width:0;
  background:linear-gradient(90deg,var(--orange),var(--coral));transition:width .55s var(--ez)}
.card:hover{transform:translateY(-5px);box-shadow:var(--sh-3);border-color:transparent}
.card:hover::before{width:100%}
.card .n{width:34px;height:34px;border-radius:11px;display:grid;place-items:center;background:var(--cream);
  color:var(--coral);font-family:var(--mono);font-size:12.5px;font-weight:700;margin-bottom:13px}
.card h3{font-size:clamp(17.5px,1.6vw,19.5px);margin-bottom:8px;letter-spacing:-.05em;line-height:1.34}
.card p{font-size:clamp(14.2px,1.25vw,15.4px);color:var(--tx-2);line-height:1.72}
.card .q{margin-top:12px;padding-top:11px;border-top:1px dashed var(--line);font-size:12.4px;color:var(--tx-2);line-height:1.6}
.card .q b{display:block;font-size:9.8px;color:var(--coral);font-family:var(--mono);letter-spacing:.1em;margin-bottom:3px}
.card .more{margin-top:11px;font-size:12.6px;font-weight:700;color:var(--coral);display:inline-flex;align-items:center;gap:5px;min-height:40px;
  transition:gap .28s var(--ez2)}
a.card{display:block}
a.card:hover .more{gap:10px}

/* 벤토 그리드 — 8가지 기준용 */
.bento{display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.bento{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1000px){
  .bento{grid-template-columns:repeat(4,minmax(0,1fr))}
  .bento > :nth-child(1){grid-column:span 2}
  .bento > :nth-child(6){grid-column:span 2}
}

/* ─── 비교표 카드 ─── */
.tblc{background:#fff;border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--hair);box-shadow:var(--sh-2)}
.tblc .hd{padding:20px 24px;background:var(--ink);color:#fff}
.tblc .hd b{display:block;font-size:15.5px;letter-spacing:-.045em}
.tblc .hd small{font-size:11.5px;color:rgba(255,255,255,.78)}
.tblc .row{display:grid;grid-template-columns:96px minmax(0,1fr);gap:12px;padding:15px 24px;
  border-top:1px solid var(--line);align-items:start}
.tblc .row:first-of-type{border-top:0}
.tblc .k{font-size:13.2px;font-weight:800;letter-spacing:-.03em}
.tblc .v{font-size:13.2px;color:var(--tx-2);line-height:1.65}
.tblc .v em{display:block;font-style:normal;color:var(--coral);font-weight:700;margin-top:4px;font-size:12.4px}
.tblc .ft{padding:14px 24px;background:var(--cream);font-size:11.3px;color:var(--tx-3);line-height:1.72}

/* ─── 목록 ─── */
.ck{display:grid;gap:10px;margin:18px 0 22px;max-width:62ch}
.ck li{position:relative;padding-left:26px;font-size:14.6px;color:var(--tx-2);line-height:1.74}
.ck li::before{content:"";position:absolute;left:4px;top:.66em;width:7px;height:7px;border-radius:50%;background:var(--coral)}
.ck li b{color:var(--ink)}
.b-peri .ck li,.b-ink .ck li{color:var(--on-2)} .b-peri .ck li b,.b-ink .ck li b{color:#fff}

/* ─── 타임라인 ─── */
.tl{position:relative;margin-top:clamp(24px,3.2vw,38px)}
.tl-line{position:absolute;left:19px;top:10px;bottom:10px;width:2px;background:var(--hair);border-radius:2px}
.tl-fill{position:absolute;left:19px;top:10px;width:2px;height:0;border-radius:2px;
  background:linear-gradient(180deg,var(--orange),var(--coral));transition:height .16s linear}
.tl-it{position:relative;padding-left:56px;padding-bottom:26px}
.tl-it:last-child{padding-bottom:0}
.tl-it .dot{position:absolute;left:9px;top:4px;width:22px;height:22px;border-radius:50%;background:var(--paper);
  box-shadow:0 0 0 2px var(--hair-2);display:grid;place-items:center;transition:box-shadow .35s var(--ez)}
.tl-it .dot i{width:8px;height:8px;border-radius:50%;background:rgba(27,51,88,.2);transition:background .35s,transform .35s var(--ez2)}
.tl-it.on .dot{box-shadow:0 0 0 2px var(--coral),0 0 0 7px rgba(240,86,58,.14)}
.tl-it.on .dot i{background:var(--coral);transform:scale(1.15)}
.tl-it .wk{font-size:12.4px;font-weight:800;color:var(--coral);margin-bottom:3px;letter-spacing:-.01em}
.tl-it h3{font-size:16.5px;margin-bottom:4px}
.tl-it p{font-size:13.8px;color:var(--tx-2);max-width:48ch}

/* ─── 3열 아이콘 ─── */
.trio{display:grid;gap:clamp(20px,3vw,32px);margin-top:clamp(28px,3.8vw,44px);text-align:center}
@media(min-width:760px){.trio{grid-template-columns:repeat(3,minmax(0,1fr))}}
.trio-it .ic{width:clamp(72px,9vw,94px);height:clamp(72px,9vw,94px);margin:0 auto 16px;
  border-radius:28px;display:grid;place-items:center;box-shadow:var(--sh-2);
  transition:transform .5s var(--ez2)}
.trio-it:hover .ic{transform:translateY(-8px) rotate(-6deg)}
.trio-it .ic svg{width:50%;height:50%}
.trio-it h3{font-size:17.5px;margin-bottom:7px}
.trio-it p{font-size:13.8px;color:var(--tx-2);max-width:30ch;margin:0 auto}

/* ─── 카운터 ─── */
.stats{display:grid;gap:10px;margin-top:clamp(26px,3.4vw,42px)}
@media(min-width:620px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);border-radius:var(--r-lg);padding:20px}
.stat .num{font-size:clamp(28px,3.9vw,42px);font-weight:850;letter-spacing:-.06em;line-height:1;color:#fff;font-variant-numeric:tabular-nums}
.stat .num small{font-size:.42em;font-weight:700;margin-left:3px}
.stat .lb{margin-top:8px;font-size:12.4px;color:var(--on-2);line-height:1.6}

/* ─── FAQ ─── */
.faq{display:grid;gap:8px;margin-top:clamp(24px,3vw,38px)}
.faq details{background:#fff;border-radius:var(--r-lg);border:1px solid var(--hair);
  overflow:hidden;transition:box-shadow .3s,border-color .3s}
.faq details[open]{box-shadow:var(--sh-3);border-color:transparent}
.faq summary{cursor:pointer;list-style:none;position:relative;
  padding:20px clamp(52px,6vw,60px) 20px clamp(18px,2.4vw,26px);
  font-weight:700;font-size:clamp(14.6px,1.7vw,16.4px);letter-spacing:-.04em;line-height:1.52;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{color:var(--coral)}
.faq summary::after{content:"";position:absolute;right:clamp(18px,2.4vw,26px);top:50%;width:26px;height:26px;
  margin-top:-13px;border-radius:50%;background:var(--cream);transition:background .3s}
.faq summary::before{content:"";position:absolute;right:calc(clamp(18px,2.4vw,26px) + 8px);top:50%;z-index:2;
  width:9px;height:9px;margin-top:-6px;border-right:2.2px solid var(--coral);border-bottom:2.2px solid var(--coral);
  transform:rotate(45deg);transition:transform .35s var(--ez2),margin-top .35s var(--ez2)}
.faq details[open] summary::after{background:var(--peach)}
.faq details[open] summary::before{transform:rotate(225deg);margin-top:-2px}
.faq .a{padding:0 clamp(18px,2.4vw,26px) 22px;color:var(--tx-2);font-size:14.4px;line-height:1.84}
.faq .a b{color:var(--ink)}

/* ─── 감수 블록 ─── */
.review{margin-top:clamp(24px,3.2vw,40px);background:#fff;border-radius:var(--r-xl);
  padding:clamp(22px,3vw,32px);border:1px solid var(--hair)}
.review .rvh{font-size:15px;margin-bottom:12px;letter-spacing:-.045em;color:var(--ink)}
.review p{font-size:13.2px;color:var(--tx-2);margin-bottom:9px;line-height:1.78}
.review .stamp{display:flex;flex-wrap:wrap;gap:7px;margin-top:15px;padding-top:15px;border-top:1px solid var(--line)}
.review .stamp span{font-size:11.4px;color:var(--tx-3);background:var(--cream);border-radius:999px;padding:6px 12px}

/* ─── 관련 문서 ─── */
/* 이어서 볼 페이지 — 무엇을 하는 블록인지 이름을 붙이고 크기를 키웠습니다 */
.rel{display:grid;gap:12px;margin-top:clamp(30px,3.6vw,46px)}
.rel::before{content:"이어서 보면 좋아요";grid-column:1/-1;
  display:flex;align-items:center;gap:9px;margin-bottom:2px;
  font-size:13px;font-weight:800;letter-spacing:-.03em;color:var(--coral-dp)}
@media(min-width:620px){.rel{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rel a{background:#fff;border-radius:var(--r-2xl);padding:24px 60px 24px 24px;
  display:block;position:relative;border:1px solid var(--hair);
  box-shadow:0 1px 2px rgba(27,51,88,.04),0 8px 22px rgba(27,51,88,.06);
  transition:transform .28s var(--ez2),box-shadow .28s,border-color .28s}
.rel a::after{content:"";position:absolute;right:22px;top:50%;
  width:34px;height:34px;margin-top:-17px;border-radius:50%;
  background:#FFEDE4 url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23D63C21' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M12 5l7 7-7 7'/%3E%3C/svg%3E") center/17px 17px no-repeat;
  transition:transform .28s var(--ez2),background-color .28s}
.rel a:hover{transform:translateY(-3px);border-color:rgba(240,86,58,.28);
  box-shadow:0 2px 4px rgba(27,51,88,.05),0 16px 34px rgba(27,51,88,.12)}
.rel a:hover::after{transform:translateX(4px);background-color:#FFDCCC}
.rel b{display:block;font-size:clamp(16.5px,1.5vw,19px);letter-spacing:-.05em;
  margin-bottom:7px;color:var(--ink);line-height:1.34}
.rel span{font-size:clamp(13.4px,1.2vw,14.6px);line-height:1.6;color:var(--tx-2)}
@media(max-width:520px){
  .rel a{padding:20px 54px 20px 20px}
  .rel a::after{right:16px;width:30px;height:30px;margin-top:-15px}
}

/* ─── 빵부스러기 ─── */
.crumb{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.2px;color:var(--tx-3);font-weight:600;margin-bottom:18px}
.crumb a{display:inline-flex;align-items:center;min-height:40px}
.crumb a:hover{color:var(--coral)}
.crumb i{opacity:.45;font-style:normal}

/* ─── FOOTER ─── */
footer{background:var(--ink);color:rgba(255,255,255,.82);padding-block:clamp(46px,5.8vw,74px) 32px;font-size:13px}
.f-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
.f-top{display:grid;gap:28px;padding-bottom:28px;border-bottom:1px solid rgba(255,255,255,.14);
  align-items:stretch}
@media(min-width:768px){.f-top{grid-template-columns:minmax(0,1.3fr) repeat(2,minmax(0,1fr))}}
.f-brand{display:flex;flex-direction:column}
.f-brand strong{color:#fff;font-size:17.5px;font-weight:800;letter-spacing:-.05em;display:block}
.f-brand p{margin-top:10px;line-height:1.82;max-width:36ch;font-size:12.6px}
.f-col h3{font-size:10.5px;font-family:var(--mono);letter-spacing:.16em;color:rgba(255,255,255,.5);margin-bottom:6px;font-weight:600}
.f-col a{display:inline-flex;align-items:center;min-height:40px;font-size:13px;transition:color .2s}
.f-col a:hover{color:var(--lime)}
.f-col li.plain{padding:8px 0;line-height:1.6;font-size:12.4px;color:rgba(255,255,255,.68)}

/* 인용 블록 */
.qt{margin:20px 0 0;padding:18px 20px 16px 24px;background:#fff;border-radius:var(--r-lg);position:relative;
    border:1px solid var(--hair);box-shadow:var(--sh-1)}
.qt::before{content:"";position:absolute;left:0;top:14px;bottom:14px;width:3px;border-radius:0 3px 3px 0;background:var(--coral)}
.qt p{margin:0;font-size:clamp(15px,1.7vw,17.5px);font-weight:700;line-height:1.6;letter-spacing:-.04em;color:var(--ink);word-break:keep-all}
.qt cite{display:block;margin-top:10px;font-style:normal;font-size:11.6px;line-height:1.6;color:var(--tx-3)}

/* 화면 캡처 증거 — 정사각 1장 */
.shots[hidden]{display:none}
.shot-sq{display:block;width:100%}
.shot-sq[hidden]{display:none}
.shot-sq img{aspect-ratio:1/1;object-fit:cover;border-radius:var(--r-xl)}
/* 맥 모니터 목업 — 목업 자체가 프레임이므로 흰 카드·테두리를 씌우지 않습니다.
   .shots img 의 border/background 를 이기려면 이 선택자가 더 구체적이어야 합니다. */
.shots .shot-mac img{aspect-ratio:auto;object-fit:contain;
  border:0;background:none;background-color:transparent;border-radius:0;box-shadow:none;
  filter:drop-shadow(0 16px 30px rgba(27,51,88,.13));
  transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.shots .shot-mac:hover img{box-shadow:none;transform:translateY(-4px)}
.shots{margin:0;display:grid;gap:12px;justify-items:center}
.shots a{display:block;width:100%}
.shots a[hidden]{display:none}
.shots img{display:block;width:100%;height:auto;border-radius:14px;border:1px solid var(--line);background:#fff;
    box-shadow:var(--sh-2);transition:box-shadow .3s}
.shots a:hover img{box-shadow:var(--sh-3)}
.shots .shot-sm{width:min(214px,58%);justify-self:start;margin-top:-4px}
.shots figcaption{font-size:11.6px;line-height:1.65;color:var(--tx-3);text-align:center;margin-top:2px}
@media (max-width:760px){.shots .shot-sm{width:min(190px,64%);justify-self:center}}

/* 이름 대조표 */
.names{display:grid;gap:9px;margin:22px 0 14px;grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.names>div{border:1px solid var(--hair);border-radius:16px;padding:15px 17px;background:#fff;
    display:flex;flex-direction:column;gap:6px}
.names dt{font-size:10.5px;font-family:var(--mono);letter-spacing:.12em;color:var(--tx-3)}
.names dd{margin:0}
.names dd b{display:block;font-size:15px;font-weight:800;letter-spacing:-.045em;color:var(--ink);word-break:keep-all}
.names dd span{display:block;margin-top:3px;font-size:12px;color:var(--tx-2)}

/* CTA 하단 안내 */
.cta-note{margin:18px auto 0;max-width:34ch;font-size:12.6px;line-height:1.75;color:rgba(255,255,255,.82);text-align:center}

/* 등록증 스캔 */
.scans{margin:0}
.scan-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.scan-row a{display:block;text-decoration:none;color:inherit}
.scan-row a[hidden]{display:none}
.scan-row img{display:block;width:100%;height:auto;border-radius:12px;border:1px solid var(--line);background:#fff;
    box-shadow:var(--sh-2);transition:box-shadow .18s,transform .18s}
.scan-row a:hover img{box-shadow:var(--sh-3);transform:translateY(-2px)}
.scan-row span{display:block;text-align:center;margin-top:8px;font-size:12px;font-weight:700;letter-spacing:-.02em;color:var(--tx-2)}
.scans figcaption{margin-top:12px;font-size:11.6px;line-height:1.65;color:var(--tx-3);text-align:center}
@media (max-width:420px){.scan-row{gap:8px}.scan-row span{font-size:11px}}

/* 인증 배지 */
.badges{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-top:14px;padding-top:12px;border-top:1px dashed var(--line)}
.badges figure{margin:0;display:flex;flex-direction:column;align-items:center;gap:5px;width:62px}
.badges figure[hidden]{display:none}
.badges img{display:block;width:40px;height:40px;object-fit:contain}
.badges figcaption{font-size:10.4px;line-height:1.4;color:var(--tx-3);text-align:center;word-break:keep-all}

.words{display:grid;gap:9px;margin-top:22px}
.words>div{border:1px solid var(--hair);border-radius:16px;padding:15px 19px;background:#fff}
.words dt{font-size:14.5px;font-weight:800;letter-spacing:-.04em;color:var(--ink)}
.words dd{margin:5px 0 0;font-size:13.6px;line-height:1.78;color:var(--tx-2)}
@media (min-width:760px){.words{grid-template-columns:1fr 1fr}}

/* 운영사 로고 — 오른쪽 두 열의 밑선에 맞춰 아래로 붙인다 */
.f-oper{margin-top:auto;padding-top:20px;display:flex;align-items:flex-end;gap:10px}
.f-oper[hidden]{display:none}
.f-oper-lb{display:none}          /* 「운영」 배지 미사용 */
.f-oper img{display:block;height:clamp(58px,6.4vw,86px);width:auto;
  background:#fff;border-radius:14px;padding:12px 20px;box-shadow:0 8px 22px rgba(0,0,0,.18)}
@media (max-width:767px){.f-oper{margin-top:18px;padding-top:0}}
@media (max-width:600px){.f-oper img{height:56px;padding:10px 16px;border-radius:12px}}

.certs{display:grid;gap:9px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));margin-top:18px}
.cert{border:1px solid var(--hair);border-radius:16px;padding:15px 17px;background:#fff}
.cert b{display:block;font-size:13.5px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.cert span{display:block;margin-top:5px;font-size:12.2px;color:var(--tx-2);line-height:1.65}
.cert-note{margin-top:12px;font-size:12.2px;line-height:1.75;color:var(--tx-3)}

.biz{margin-top:24px;font-size:11.7px;line-height:1.95;color:rgba(255,255,255,.72)}
.biz b{color:#fff;font-weight:800;font-size:13px;display:block;margin-bottom:6px}
.biz .sep{opacity:.4;margin-inline:6px}
.legal{margin-top:20px;font-size:11.1px;line-height:1.85;color:rgba(255,255,255,.58)}
.legal p+p{margin-top:9px}
.legal .req{border-radius:var(--r-lg);padding:18px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08)}
.legal .req b{color:#fff;font-weight:700}
.ph2{color:var(--lime);font-weight:600}

/* ══════════════════════════════════════════════════════════════
   소비자 관점 요소 · 연구 노트 · 플로팅 CTA
   ══════════════════════════════════════════════════════════════ */
.hero-h .hl{font-style:normal;color:var(--coral);position:relative;white-space:nowrap}
.hero-h .hl::after{content:"";position:absolute;left:-.04em;right:-.04em;bottom:.06em;height:.16em;z-index:-1;
  background:var(--lime);border-radius:3px;transform:scaleX(0);transform-origin:left;
  transition:transform .9s var(--ez) .55s}
.js .revealed .hero-h .hl::after{transform:scaleX(1)}
.ilink{color:var(--coral);font-weight:700;border-bottom:1.5px solid rgba(240,86,58,.3);transition:border-color .2s}
.ilink:hover{border-bottom-color:var(--coral)}

/* ─── 맘카페 검증 근거 ─── */
.proofs{display:grid;gap:9px;margin-top:24px}
.proof{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:start;
  background:rgba(255,255,255,.76);border:1px solid rgba(255,255,255,.9);border-radius:var(--r-lg);padding:16px 18px}
.proof .pi{width:44px;height:44px;border-radius:14px;background:#fff;display:grid;place-items:center;
  font-size:20px;box-shadow:var(--sh-1)}
.proof b{display:block;font-size:15px;letter-spacing:-.045em;color:var(--ink);margin-bottom:4px}
.proof span{font-size:13.1px;color:var(--tx-2);line-height:1.68}
.ph2i{font-style:normal;color:var(--peri);font-weight:600;font-size:12px}

/* ─── 가치 3종 ─── */
.values{display:grid;gap:12px;margin-top:clamp(28px,3.6vw,44px);text-align:left}
@media(min-width:820px){.values{grid-template-columns:repeat(3,minmax(0,1fr))}}
.value{position:relative;background:#fff;border-radius:var(--r-xl);padding:clamp(24px,2.9vw,32px);
  border:1px solid var(--hair);overflow:hidden;
  transition:transform .34s var(--ez2),box-shadow .34s,border-color .34s}
.value:hover{transform:translateY(-6px);box-shadow:var(--sh-4);border-color:transparent}
.value::after{content:"";position:absolute;inset:0 0 auto 0;height:4px;
  background:linear-gradient(90deg,var(--orange),var(--coral))}
.value .vnum{position:absolute;right:20px;top:18px;font-family:var(--mono);font-size:34px;font-weight:800;
  color:var(--ink);opacity:.06;letter-spacing:-.06em}
.value .vic{display:grid;place-items:center;width:54px;height:54px;border-radius:18px;
  background:var(--cream);font-size:25px;margin-bottom:17px}
.value h3{font-size:19px;margin-bottom:9px;letter-spacing:-.05em}
.value p{font-size:14px;color:var(--tx-2);line-height:1.74}
.value p b{color:var(--ink)}
.value .vtag{display:inline-block;margin-top:14px;margin-bottom:2px;font-size:11.4px;font-weight:700;color:var(--coral);
  background:var(--cream);border-radius:999px;padding:6px 12px}
.value .more{display:flex;align-items:center;gap:5px;margin-top:8px;min-height:40px;
  font-size:13px;font-weight:700;color:var(--peri);transition:gap .28s var(--ez2)}
.value:hover .more{gap:10px}

/* ─── 하단 카카오톡 CTA — 높이를 절반으로 ─── */
.band.b-coral{padding-top:clamp(34px,4.2vw,58px);padding-bottom:clamp(34px,4.2vw,58px)}
.b-coral .eyebrow{margin-bottom:10px}
.b-coral h2.big{margin-bottom:10px}
.b-coral .gifts{margin-top:clamp(16px,2vw,22px);max-width:940px}
@media(min-width:820px){.b-coral .gifts{grid-template-columns:repeat(3,minmax(0,1fr))}}
.b-coral .gifts li{padding:12px 15px;gap:11px;grid-template-columns:36px minmax(0,1fr)}
.b-coral .gifts .gi{width:36px;height:36px;border-radius:12px;font-size:16px}
.b-coral .gifts .gt b{font-size:14px}
.b-coral .gifts .gt span{font-size:12px}
.b-coral .acts{margin-top:20px}
.b-coral .cta-note{margin-top:13px;max-width:46ch}
/* 하단 CTA의 마스코트는 히어로와 중복이라 쓰지 않는다 */
.b-coral .mascot{display:none}
/* 상담 버튼 — 위 카카오 아이콘과 같은 톤(카카오 옐로우 + 진한 라벨색) */
.b-coral .btn-w{background:linear-gradient(180deg,#FFEC4A,#FEE500);
  color:#1B1710;border:0;
  box-shadow:0 5px 0 #D9B800,0 14px 30px rgba(120,80,0,.30)}
.b-coral .btn-w:hover{background:linear-gradient(180deg,#FFF16E,#FDDF00);
  color:#1B1710;box-shadow:0 3px 0 #D9B800,0 10px 22px rgba(120,80,0,.34);
  transform:translateY(2px)}
.b-coral .btn-w svg{color:#1B1710}

/* ─── CTA 3단계 ─── */
.gifts{display:grid;gap:9px;margin:clamp(24px,3vw,34px) auto 0;max-width:660px;text-align:left}
.gifts li{display:grid;grid-template-columns:44px minmax(0,1fr);gap:14px;align-items:center;
  background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.26);
  border-radius:var(--r-lg);padding:15px 18px}
.gifts .gi{width:44px;height:44px;border-radius:14px;background:rgba(255,255,255,.94);
  display:grid;place-items:center;font-size:19px;font-weight:800;color:var(--coral)}
.gifts .gt{min-width:0}
.gifts .gt b{display:block;font-size:15px;color:#fff;letter-spacing:-.045em;line-height:1.4}
.gifts .gt span{display:block;font-size:12.6px;color:rgba(255,255,255,.8);line-height:1.6;margin-top:2px}
.cta-sub{margin-top:14px;font-size:12.4px;color:rgba(255,255,255,.82);font-weight:600}

/* ─── 연구 노트 ─── */
.ncats{display:flex;flex-wrap:wrap;gap:8px;margin-top:clamp(22px,3vw,34px)}
.ncat-chip{display:inline-flex;align-items:center;gap:8px;background:#fff;border-radius:999px;
  padding:9px 15px;font-size:12.4px;color:var(--tx-2);border:1px solid var(--hair)}
.ncat-chip b{color:var(--coral);font-weight:800}
.notes-grid{display:grid;gap:10px}
@media(min-width:640px){.notes-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.ncard{display:block;background:#fff;border-radius:var(--r-lg);padding:20px 22px;
  border:1px solid var(--hair);position:relative;overflow:hidden;
  transition:transform .3s var(--ez2),box-shadow .3s,border-color .3s}
.ncard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:transparent}
.ncard b{display:block;font-size:16px;letter-spacing:-.048em;color:var(--ink);line-height:1.44;margin:10px 0 8px}
.ncard .nmeta{font-size:11.8px;color:var(--tx-3);font-family:var(--mono)}
.ncard.soon{opacity:.62;background:transparent;border:1px dashed var(--line-2)}
.ncard.soon:hover{transform:none;box-shadow:none}
.ncat{display:inline-flex;align-items:center;font-size:10.6px;font-weight:800;letter-spacing:.05em;
  color:#fff;background:var(--peri);border-radius:999px;padding:4px 11px}
.ncat.solo{margin-bottom:14px}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ⑤ — 연구 노트 목록 (.nlist)
   모바일 우선. 한 줄에 한 편, 제목 아래 「한 줄 답」을 먼저 보여준다.
   ══════════════════════════════════════════════════════════════ */
.nwrap{max-width:860px;margin-inline:auto}

/* 카테고리 필터 */
.nfilter{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 clamp(18px,2.4vw,26px)}
.nfilter button{appearance:none;font-family:inherit;cursor:pointer;
  background:#fff;border:1px solid var(--hair);color:var(--tx-2);
  border-radius:999px;padding:9px 15px;min-height:42px;font-size:13.2px;font-weight:700;
  letter-spacing:-.03em;transition:border-color .2s,color .2s,background .2s,transform .2s var(--ez2)}
.nfilter button:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}
.nfilter button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.nfilter button i{font-style:normal;opacity:.55;margin-left:5px;font-weight:600}
/* FAQ 필터 — 접힌 질문이 숨겨져도 목록 간격이 무너지지 않게 */
.faq details[hidden]{display:none}
#faqFilter{margin-top:clamp(20px,2.6vw,30px)}

/* 목록 */
.nlist{display:grid;gap:9px;counter-reset:nl}
.nlist li[hidden]{display:none}
.nl-item{position:relative}
.nl-item > a{display:block;background:#fff;border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:clamp(20px,2.6vw,28px);position:relative;overflow:hidden;
  transition:transform .3s var(--ez2),box-shadow .3s,border-color .3s}
.nl-item > a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--orange),var(--coral));
  transform:scaleY(0);transform-origin:top;transition:transform .4s var(--ez)}
.nl-item > a:hover{transform:translateY(-3px);box-shadow:var(--sh-3);border-color:transparent}
.nl-item > a:hover::before{transform:scaleY(1)}
/* 썸네일 — 파일이 없으면 스스로 숨고 1단 레이아웃으로 돌아간다 */
.nl-in{display:grid;gap:clamp(13px,1.8vw,18px)}
@media(min-width:640px){
  .nl-in{grid-template-columns:220px minmax(0,1fr);align-items:start}
  .nl-in:has(.nl-thumb[hidden]){grid-template-columns:minmax(0,1fr)}
}
.nl-thumb{margin:0;border-radius:16px;overflow:hidden;background:var(--cream);
  aspect-ratio:16/9;border:1px solid var(--hair)}
.nl-thumb[hidden]{display:none}
.nl-thumb img{display:block;width:100%;height:100%;object-fit:cover;
  transition:transform .5s var(--ez)}
.nl-item > a:hover .nl-thumb img{transform:scale(1.04)}
.nl-body{min-width:0}
.nl-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:11px}
.nl-cat{display:inline-flex;align-items:center;font-size:11px;font-weight:800;letter-spacing:.03em;
  color:#fff;background:var(--peri);border-radius:999px;padding:4px 11px;flex:none}
.nl-top time,.nl-min{font-size:11.8px;color:var(--tx-3);font-family:var(--mono)}
.nl-min::before{content:"·";margin-right:7px;opacity:.5}
.nl-t{font-size:clamp(17.5px,2.2vw,22px);letter-spacing:-.05em;line-height:1.38;color:var(--ink);
  margin:0 0 9px;transition:color .2s}
.nl-item > a:hover .nl-t{color:var(--coral)}
.nl-a{font-size:14.2px;line-height:1.75;color:var(--tx-2);max-width:62ch}
.nl-a b{color:var(--ink);font-weight:700}
.nl-go{display:inline-flex;align-items:center;gap:5px;margin-top:13px;min-height:34px;
  font-size:13px;font-weight:700;color:var(--coral);transition:gap .28s var(--ez2)}
.nl-item > a:hover .nl-go{gap:10px}
.nl-empty{background:var(--mist);border:1px dashed var(--line-2);border-radius:var(--r-xl);
  padding:28px 24px;text-align:center;color:var(--tx-2);font-size:14px}
.nl-empty[hidden]{display:none}
@media(max-width:520px){
  .nl-t{font-size:17.5px}
  .nl-a{font-size:13.6px}
  .nfilter button{font-size:12.6px;padding:8px 13px}
}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ⑦ — 페이지별 히어로 비주얼
   마스코트는 홈에서만 쓴다. 나머지 페이지는 그 페이지의 내용 자체를
   비주얼로 세워 첫 화면이 서로 달라 보이게 한다.
   ══════════════════════════════════════════════════════════════ */
/* 8가지 기준 — 번호 그리드 */
/* 흰 카드 없이 한 줄씩. 질문이 오른쪽에서 하나씩 날아와 쌓입니다. */
.numgrid{display:grid;grid-template-columns:1fr;gap:9px;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none}
.numgrid a{display:flex;gap:11px;align-items:center;padding:14px 16px;border-radius:16px;
  background:linear-gradient(100deg,#FFEDDF,#FDF6EE);
  border:1px solid rgba(240,86,58,.16);min-height:54px;
  box-shadow:0 1px 2px rgba(27,51,88,.04),0 6px 16px rgba(179,86,45,.07);
  opacity:0;animation:ngIn .6s cubic-bezier(.18,.86,.28,1) both;
  transition:border-color .22s,box-shadow .22s,background .22s}
.numgrid a:hover{border-color:var(--coral);background:linear-gradient(100deg,#FFE2CE,#FFF1E4);
  box-shadow:0 2px 4px rgba(27,51,88,.05),0 12px 26px rgba(179,86,45,.14)}
.numgrid .n{font-family:var(--mono);font-size:11px;font-weight:700;color:var(--coral-dp);flex:none;
  background:rgba(255,255,255,.72);border-radius:8px;padding:5px 7px;line-height:1}
.numgrid b{font-size:13.6px;letter-spacing:-.042em;color:var(--navy);line-height:1.42}
@keyframes ngIn{
  from{opacity:0;transform:translate3d(38px,10px,0) scale(.95)}
  to{opacity:1;transform:none}}
.numgrid a:nth-child(1){animation-delay:.30s}
.numgrid a:nth-child(2){animation-delay:.42s}
.numgrid a:nth-child(3){animation-delay:.54s}
.numgrid a:nth-child(4){animation-delay:.66s}
.numgrid a:nth-child(5){animation-delay:.78s}
.numgrid a:nth-child(6){animation-delay:.90s}
.numgrid a:nth-child(7){animation-delay:1.02s}
.numgrid a:nth-child(8){animation-delay:1.14s}
@media(max-width:420px){.numgrid b{font-size:12.8px}.numgrid a{padding:12px 13px;min-height:48px}}
@media (prefers-reduced-motion:reduce){.numgrid a{animation:none;opacity:1}}

/* 연구소 소개 — 팩트 시트 (어두운 배경 위) */
.factsheet{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.2);
  border-radius:var(--r-2xl);padding:clamp(16px,2vw,24px);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.factsheet .fh{display:flex;align-items:center;gap:8px;margin-bottom:10px;
  font-size:10.6px;font-family:var(--mono);letter-spacing:.12em;color:rgba(255,255,255,.6)}
.factsheet .fh::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--lime)}
.factsheet dl{margin:0;display:grid}
.factsheet dl > div{display:grid;grid-template-columns:92px minmax(0,1fr);gap:12px;
  padding:10px 0;border-top:1px solid rgba(255,255,255,.14);align-items:baseline}
.factsheet dl > div:first-child{border-top:0}
.factsheet dt{font-size:11.6px;color:rgba(255,255,255,.62);letter-spacing:-.02em}
.factsheet dd{margin:0;font-size:13.8px;font-weight:700;color:#fff;letter-spacing:-.03em;
  font-variant-numeric:tabular-nums}
.factsheet dd small{display:block;font-weight:500;font-size:11.4px;color:rgba(255,255,255,.66);
  margin-top:2px;letter-spacing:-.01em}
.factsheet .fn{margin-top:12px;padding-top:11px;border-top:1px solid rgba(255,255,255,.14);
  font-size:11.4px;line-height:1.6;color:rgba(255,255,255,.62)}
@media(max-width:430px){.factsheet dl > div{grid-template-columns:80px minmax(0,1fr);gap:9px}}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ⑥ — 인포그래픽 3종
   이미지가 아니라 HTML로 그린다. 글자가 텍스트로 남아 AI가 인용할 수 있고,
   어떤 화면 크기에서도 깨지지 않는다. 톤은 클레이 계열과 맞춘다.
   ══════════════════════════════════════════════════════════════ */
.info{margin-top:clamp(26px,3.4vw,40px)}
/* 한글은 단어 중간에서 끊기면 읽기 나빠집니다. 줄간격을 넉넉히 두고
   어절 단위로만 줄바꿈되게 합니다. */
.info-cap{margin:18px auto 0;font-size:13.2px;line-height:2;color:var(--tx-3);
  text-align:center;max-width:70ch;word-break:keep-all;text-wrap:pretty}
.info-cap b{color:var(--tx-2)}

/* ① 조건 대조도 */
.cmp{display:grid;gap:12px}
@media(min-width:800px){.cmp{grid-template-columns:1fr 1fr}}
.cmp-col{background:#fff;border:1px solid var(--hair);border-radius:var(--r-2xl);
  padding:clamp(18px,2.2vw,24px);box-shadow:0 1px 2px rgba(27,51,88,.04),0 10px 26px rgba(27,51,88,.05)}
.cmp-col.bad{background:#FFF7F5;border-color:rgba(240,86,58,.2)}
.cmp-col.good{background:#F6FBF8;border-color:rgba(44,122,92,.18)}
.cmp-h{display:flex;align-items:center;gap:9px;margin-bottom:14px}
.cmp-h .mk{width:26px;height:26px;border-radius:50%;flex:none;display:grid;place-items:center;
  font-size:14px;font-weight:800;color:#fff}
.cmp-col.bad .mk{background:var(--coral)}
.cmp-col.good .mk{background:#2C7A5C}
.cmp-h b{font-size:15px;letter-spacing:-.045em;color:var(--ink)}
.cmp-row{display:grid;grid-template-columns:60px minmax(0,1fr);gap:10px;align-items:center;
  padding:10px 0;border-top:1px dashed var(--line)}
.cmp-row:first-of-type{border-top:0}
.cmp-row .co{font-size:11.5px;font-weight:800;color:var(--tx-3);letter-spacing:-.02em}
.cmp-chips{display:flex;flex-wrap:wrap;gap:5px}
.cmp-chips span{font-size:11.4px;font-weight:700;letter-spacing:-.02em;border-radius:999px;
  padding:4px 9px;background:var(--mist);color:var(--tx-2);white-space:nowrap}
.cmp-col.bad .cmp-chips span.x{background:#FFE4DD;color:#C6371C}
.cmp-col.good .cmp-chips span.o{background:#E3F2EA;color:#25674E}
.cmp-foot{margin-top:12px;padding-top:12px;border-top:1px solid var(--hair);
  font-size:12.4px;line-height:1.68;color:var(--tx-2)}
.cmp-foot b{color:var(--ink)}

/* ② 주수 타임라인 띠 */
.tlbar{position:relative;display:grid;gap:0;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-2xl);padding:clamp(20px,2.4vw,28px) clamp(14px,2vw,22px);
  box-shadow:0 1px 2px rgba(27,51,88,.04),0 10px 26px rgba(27,51,88,.05);
  grid-auto-flow:column;grid-auto-columns:minmax(150px,1fr);
  overflow-x:auto;scroll-snap-type:x mandatory;overscroll-behavior-x:contain}
.tlbar::-webkit-scrollbar{height:0}
.tlbar-it{scroll-snap-align:start;position:relative;padding:30px 12px 0;min-width:0}
.tlbar-it::before{content:"";position:absolute;left:0;right:0;top:10px;height:3px;
  background:linear-gradient(90deg,var(--orange),var(--coral))}
.tlbar-it:first-child::before{left:50%;border-radius:3px 0 0 3px}
.tlbar-it:last-child::before{right:50%;border-radius:0 3px 3px 0}
.tlbar-it .nd{position:absolute;left:50%;top:3px;transform:translateX(-50%);
  width:17px;height:17px;border-radius:50%;background:#fff;
  box-shadow:0 0 0 3px var(--coral),0 0 0 7px rgba(240,86,58,.16)}
.tlbar-it .wk{font-size:12px;font-weight:800;color:var(--coral);letter-spacing:-.02em;text-align:center}
.tlbar-it h3{margin:5px 0 4px;font-size:14px;letter-spacing:-.045em;color:var(--ink);text-align:center}
.tlbar-it p{font-size:12.2px;line-height:1.6;color:var(--tx-2);text-align:center}
@media(max-width:760px){.tlbar{grid-auto-columns:minmax(160px,78%)}}

/* ③ 갈림길 흐름도 */
.fork{background:#fff;border:1px solid var(--hair);border-radius:var(--r-2xl);
  padding:clamp(20px,2.4vw,28px);box-shadow:0 1px 2px rgba(27,51,88,.04),0 10px 26px rgba(27,51,88,.05)}
.fork-top{display:flex;justify-content:center}
.fork-node{background:var(--ink);color:#fff;border-radius:999px;padding:10px 20px;
  font-size:14px;font-weight:800;letter-spacing:-.04em}
.fork-split{position:relative;height:36px;margin:4px 0 11px}
.fork-split::before{content:"";position:absolute;left:50%;top:0;width:2px;height:16px;
  background:var(--line-2);transform:translateX(-50%);border-radius:2px}
.fork-split::after{content:"";position:absolute;left:25%;right:25%;top:16px;height:2px;
  background:var(--line-2);border-radius:2px}
.fork-split i{position:absolute;top:16px;width:2px;height:20px;background:var(--line-2);border-radius:2px}
.fork-split i:first-child{left:25%}
.fork-split i:last-child{right:25%}
@media(max-width:699px){
  .fork-split{height:22px;margin:6px 0 10px}
  .fork-split::before{height:22px}
  .fork-split::after,.fork-split i{display:none}
}
.fork-cols{display:grid;gap:11px}
@media(min-width:700px){.fork-cols{grid-template-columns:1fr 1fr}}
.fork-card{border-radius:var(--r-xl);padding:16px 18px;border:1px solid transparent}
.fork-card.ok{background:#F6FBF8;border-color:rgba(44,122,92,.18)}
.fork-card.no{background:#FFF7F5;border-color:rgba(240,86,58,.2)}
.fork-card .tag{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:800;
  border-radius:999px;padding:4px 11px;margin-bottom:9px}
.fork-card.ok .tag{background:#E3F2EA;color:#25674E}
.fork-card.no .tag{background:#FFE4DD;color:#C6371C}
.fork-card b{display:block;font-size:14.6px;letter-spacing:-.045em;color:var(--ink);margin-bottom:6px}
.fork-card p{font-size:12.8px;line-height:1.7;color:var(--tx-2)}
.fork-card .then{margin-top:10px;padding-top:10px;border-top:1px dashed rgba(27,51,88,.12);
  font-size:12.4px;line-height:1.65;color:var(--tx-2)}
.fork-card .then b{display:inline;font-size:12.4px;color:var(--ink)}

/* 캡처 자리 대체 박스 */
.shot-fb[hidden]{display:none}

/* ─── 아티클 ─── */
.article{max-width:740px;margin-inline:auto}
.art-h{font-size:clamp(27px,4.2vw,44px);line-height:1.2;margin-bottom:18px;color:var(--ink)}
.art-meta{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:28px}
.art-meta span{font-size:11.4px;color:var(--tx-3);background:var(--mist);border-radius:999px;padding:6px 12px}
/* 아티클 대표 이미지 — 파일이 없으면 스스로 숨는다 */
.art-hero{margin:0 0 clamp(22px,2.8vw,30px);border-radius:var(--r-2xl);overflow:hidden;
  background:var(--cream);aspect-ratio:16/9;border:1px solid var(--hair)}
.art-hero[hidden]{display:none}
.art-hero img{display:block;width:100%;height:100%;object-fit:cover}
.art-h2{font-size:clamp(20px,2.6vw,28px);margin:clamp(34px,4.2vw,52px) 0 14px;color:var(--ink);letter-spacing:-.05em}
.article > p{font-size:16px;color:var(--tx-2);line-height:1.88;margin-bottom:16px}
.article > p b{color:var(--ink)}
.callout{background:var(--cream);border-radius:var(--r-xl);position:relative;
  padding:22px 24px 22px 26px;margin:28px 0;overflow:hidden}
.callout::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--coral)}
.callout b{display:block;font-size:12.6px;color:var(--coral);margin-bottom:8px;letter-spacing:.02em}
.callout p{font-size:14.6px;color:var(--tx-2);line-height:1.82;margin:0}
.steps{display:grid;gap:12px;margin:18px 0 22px;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding-left:44px;font-size:15px;color:var(--tx-2);line-height:1.8}
.steps li::before{content:counter(st);position:absolute;left:0;top:3px;width:28px;height:28px;border-radius:50%;
  background:var(--coral);color:#fff;font-size:13px;font-weight:800;display:grid;place-items:center;font-family:var(--mono)}
.steps li b{color:var(--ink)}
.art-cta{display:grid;gap:16px;align-items:center;background:var(--cream);border-radius:var(--r-2xl);
  padding:clamp(24px,3vw,32px);margin:clamp(30px,4vw,48px) 0}
@media(min-width:700px){.art-cta{grid-template-columns:minmax(0,1fr) auto}}
.art-cta b{display:block;font-size:18px;color:var(--ink);letter-spacing:-.05em;margin-bottom:6px}
.art-cta span{font-size:13.6px;color:var(--tx-2);line-height:1.7}

/* 본문 목차 — 모바일에서 접힘 */
.art-toc{background:var(--mist);border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:6px 4px;margin:26px 0}
.art-toc summary{cursor:pointer;list-style:none;position:relative;padding:14px 44px 14px 20px;
  font-size:13.4px;font-weight:800;letter-spacing:-.035em;color:var(--ink)}
.art-toc summary::-webkit-details-marker{display:none}
.art-toc summary::after{content:"";position:absolute;right:22px;top:50%;width:8px;height:8px;margin-top:-6px;
  border-right:2px solid var(--coral);border-bottom:2px solid var(--coral);transform:rotate(45deg);
  transition:transform .3s var(--ez2),margin-top .3s var(--ez2)}
.art-toc[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.art-toc ol{counter-reset:tc;padding:0 20px 16px}
.art-toc li{counter-increment:tc;position:relative;padding-left:24px}
.art-toc li::before{content:counter(tc);position:absolute;left:0;top:.55em;font-family:var(--mono);
  font-size:10.5px;font-weight:700;color:var(--tx-3)}
.art-toc a{display:block;padding:8px 0;min-height:40px;font-size:13.8px;line-height:1.55;color:var(--tx-2);
  border-bottom:1px solid var(--hair);transition:color .2s}
.art-toc li:last-child a{border-bottom:0}
.art-toc a:hover{color:var(--coral)}

/* 이전 글 / 다음 글 */
.art-nav{display:grid;gap:9px;margin-top:clamp(24px,3vw,36px)}
@media(min-width:640px){.art-nav{grid-template-columns:1fr 1fr}}
.art-nav a{display:block;background:#fff;border:1px solid var(--hair);border-radius:var(--r-lg);
  padding:16px 18px;transition:transform .28s var(--ez2),box-shadow .28s,border-color .28s}
.art-nav a:hover{transform:translateY(-3px);box-shadow:var(--sh-2);border-color:transparent}
.art-nav .d{display:block;font-size:10.5px;font-family:var(--mono);letter-spacing:.12em;color:var(--tx-3);margin-bottom:6px}
.art-nav b{display:block;font-size:14.2px;letter-spacing:-.045em;line-height:1.45;color:var(--ink)}
.art-nav .next{text-align:right}

/* ─── 플로팅 카카오 CTA ─── */
.float-cta{position:fixed;right:clamp(14px,3vw,28px);bottom:clamp(14px,3vw,28px);z-index:180;
  display:inline-flex;align-items:center;gap:9px;background:#FEE500;color:#191600;
  font-weight:800;font-size:14px;letter-spacing:-.03em;padding:0 20px;min-height:54px;border-radius:999px;
  box-shadow:0 10px 30px rgba(27,51,88,.22);
  transform:translateY(120px);opacity:0;
  transition:transform .45s var(--ez2),opacity .35s,box-shadow .3s}
.float-cta.show{transform:none;opacity:1}
.float-cta:hover{box-shadow:0 16px 40px rgba(27,51,88,.3);transform:translateY(-3px)}
.float-cta .fdot{position:absolute;top:-3px;right:-3px;width:12px;height:12px;border-radius:50%;
  background:var(--coral);border:2px solid #fff;animation:pulse 2s ease-in-out infinite}
@media(max-width:520px){.float-cta{font-size:13.5px;padding:0 17px;min-height:50px;right:12px;bottom:12px}}

/* ══ 맘스홀릭 검증 배지 · 신뢰 지표 바 ══ */
.vbadge{display:inline-flex;align-items:center;gap:12px;background:#fff;border-radius:999px;
  padding:9px 16px 9px 10px;margin-bottom:20px;max-width:100%;
  border:1px solid var(--hair);box-shadow:var(--sh-1);
  transition:transform .28s var(--ez2),box-shadow .28s}
.vbadge:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}
.vbadge .vb-ic{width:34px;height:34px;border-radius:50%;background:var(--cream);
  display:grid;place-items:center;font-size:17px;flex:none}
.vbadge .vb-tx{display:block;min-width:0}
.vbadge .vb-tx b{display:block;font-size:13.2px;color:var(--ink);letter-spacing:-.045em;line-height:1.35}
.vbadge .vb-tx > span{display:block;font-size:11.6px;color:var(--tx-3);line-height:1.4}
.vbadge .vb-tx em{font-style:normal;color:var(--coral);font-weight:800}
.vbadge .vb-arw{color:var(--tx-3);font-size:13px;flex:none;transition:transform .28s var(--ez2)}
.vbadge:hover .vb-arw{transform:translateX(3px);color:var(--coral)}
@media(max-width:400px){.vbadge{padding:8px 13px 8px 8px;gap:9px}.vbadge .vb-tx b{font-size:12.4px}}

.trustbar{display:grid;gap:1px;background:var(--hair);border-radius:var(--r-xl);overflow:hidden;
  margin-top:clamp(30px,4vw,50px);border:1px solid var(--hair)}
@media(min-width:640px){.trustbar{grid-template-columns:repeat(4,minmax(0,1fr))}}
.trustbar .tb{background:#fff;padding:20px 16px;text-align:center;transition:background .3s}
.trustbar .tb:hover{background:var(--cream)}
.trustbar .tb b{display:block;font-size:clamp(22px,2.8vw,31px);font-weight:850;color:var(--coral);
  letter-spacing:-.055em;line-height:1.08;font-variant-numeric:tabular-nums}
.trustbar .tb b small{font-size:.48em;font-weight:700;margin-left:2px}
.trustbar .tb span{display:block;margin-top:7px;font-size:11.8px;color:var(--tx-2);line-height:1.5}

/* ══ 필수안내 접이식 ══ */
.req-fold{margin-top:12px;border-top:1px solid rgba(255,255,255,.12);padding-top:10px}
.req-fold summary{cursor:pointer;list-style:none;position:relative;padding:8px 22px 8px 0;
  font-size:11.5px;color:rgba(255,255,255,.68);font-weight:600;min-height:40px;display:flex;align-items:center;
  transition:color .2s}
.req-fold summary::-webkit-details-marker{display:none}
.req-fold summary:hover{color:#fff}
.req-fold summary::after{content:"";position:absolute;right:4px;top:50%;width:7px;height:7px;margin-top:-5px;
  border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg);
  transition:transform .3s var(--ez2)}
.req-fold[open] summary::after{transform:rotate(225deg);margin-top:-2px}
.req-body{padding:6px 0 4px;font-size:11.1px;line-height:1.88;color:rgba(255,255,255,.56)}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ① — 인용 청크 (.chunk)
   AI가 문단 통째로 인용하도록 설계한 4문장 블록
   ══════════════════════════════════════════════════════════════ */
.chunk{background:#fff;border:1px solid var(--hair);border-radius:var(--r-xl);
  padding:clamp(22px,2.8vw,30px);margin-top:18px;position:relative;overflow:hidden}
.chunk + .chunk{margin-top:10px}
.chunk-h{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap}
.chunk-h .ci{width:30px;height:30px;border-radius:10px;background:var(--ink);color:#fff;flex:none;
  display:grid;place-items:center;font-family:var(--mono);font-size:12px;font-weight:700}
.chunk-h b{flex:1 1 auto;font-size:clamp(17.5px,1.7vw,21px);letter-spacing:-.05em;color:var(--ink);line-height:1.34;min-width:0}
.chunk-q{display:block;margin-bottom:14px;font-size:13.4px;color:var(--tx-3);line-height:1.6}
.chunk-q em{font-style:normal;color:var(--peri);font-weight:700}
.chunk p{font-size:clamp(15px,1.35vw,16.4px);line-height:1.82;color:var(--tx-2)}
.chunk p + p{margin-top:11px}
.chunk p b{color:var(--ink);font-weight:700}
.chunk-src{margin-top:15px;padding-top:13px;border-top:1px dashed var(--line);
  font-size:11.6px;line-height:1.7;color:var(--tx-3)}
.chunk-src b{color:var(--tx-2);font-weight:700}
.chunk-ask{margin-top:15px;background:var(--cream);border-radius:16px;padding:17px 19px}
.chunk-ask b{display:block;font-size:12px;letter-spacing:-.02em;font-weight:800;color:var(--coral-dp);margin-bottom:8px}
.chunk-ask p{font-size:clamp(14.4px,1.3vw,16px);color:var(--ink);font-weight:600;line-height:1.68}
.chunk-src{font-size:12.8px}

/* ══ v4 신규 ② — 동일주체 청크 (.entity) : 전 페이지 푸터 위 ══ */
.entity{background:var(--mist);border-top:1px solid var(--hair);border-bottom:1px solid var(--hair);
  padding:clamp(22px,3vw,30px) 0}
.entity-in{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut);
  display:grid;gap:14px;align-items:start}
@media(min-width:860px){.entity-in{grid-template-columns:minmax(0,1fr) minmax(0,1.5fr)}}
.entity h2{font-size:14.5px;letter-spacing:-.045em;color:var(--ink);display:flex;align-items:center;gap:8px}
.entity h2::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--coral);flex:none}
.entity p{font-size:13.2px;line-height:1.85;color:var(--tx-2);max-width:74ch}
.entity p b{color:var(--ink);font-weight:700}
.entity .ents{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.entity .ents span{font-size:11.4px;font-weight:600;color:var(--tx-2);background:#fff;
  border:1px solid var(--hair);border-radius:999px;padding:5px 11px}
.entity .ents span b{color:var(--coral);font-weight:800}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ③ — AI 답변 시뮬레이터 (.aisim)
   ══════════════════════════════════════════════════════════════ */
/* 아이폰 목업 */
.aisim{display:grid;gap:clamp(22px,3vw,40px);align-items:center;margin-top:clamp(26px,3.4vw,42px)}
@media(min-width:920px){.aisim{grid-template-columns:minmax(0,auto) minmax(0,1fr);justify-content:center}}

.phone{justify-self:center;position:relative;width:clamp(288px,32vw,376px);flex:none}
.phone-body{position:relative;aspect-ratio:390/844;border-radius:12.2%/5.6%;
  background:linear-gradient(150deg,#3a3d44,#15171b 28%,#0c0d10 62%,#2a2d33);
  padding:2.6%;box-shadow:0 2px 4px rgba(0,0,0,.4),0 34px 80px rgba(18,37,64,.34),
  inset 0 0 0 1px rgba(255,255,255,.14)}
.phone-screen{position:relative;width:100%;height:100%;border-radius:10.4%/4.8%;overflow:hidden;
  background:#F7F7F9;display:flex;flex-direction:column}
.phone-island{position:absolute;top:2.4%;left:50%;transform:translateX(-50%);
  width:31%;height:4.1%;border-radius:999px;background:#08090b;z-index:6}
.phone-status{flex:none;display:flex;align-items:flex-end;justify-content:space-between;
  padding:5.2% 8% 1.6%;font-size:clamp(11px,3.2cqw,13px)}
.phone-status .tm{font-weight:700;color:#0b0c0e;letter-spacing:-.02em;font-size:13px}
.phone-status .ico{display:flex;align-items:center;gap:5px;color:#0b0c0e}
.phone-status svg{display:block}
.phone-nav{flex:none;display:flex;align-items:center;gap:9px;padding:9px 16px 10px;
  background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(0,0,0,.07)}
.phone-nav .av{width:30px;height:30px;border-radius:50%;flex:none;
  background:linear-gradient(140deg,var(--lime),var(--orange));display:grid;place-items:center;
  font-size:13px;font-weight:800;color:#122540}
.phone-nav b{display:block;font-size:13.4px;letter-spacing:-.04em;color:var(--ink);line-height:1.25}
.phone-nav span{display:block;font-size:10.6px;color:#8b93a1}

.phone-chat{flex:1;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  padding:14px 13px 8px;display:flex;flex-direction:column;gap:9px;scroll-behavior:smooth}
.phone-chat::-webkit-scrollbar{width:0}
.bb{max-width:88%;font-size:13px;line-height:1.68;letter-spacing:-.02em;
  animation:bbIn .34s var(--ez2) both}
@keyframes bbIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.bb-you{align-self:flex-end;background:var(--peri);color:#fff;font-weight:600;
  border-radius:17px 17px 5px 17px;padding:9px 13px}
.bb-ai{align-self:flex-start;background:#fff;color:#2b3a50;border:1px solid rgba(0,0,0,.06);
  border-radius:17px 17px 17px 5px;padding:11px 13px;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.bb-ai p{font-size:12.8px;line-height:1.72}
.bb-ai p + p{margin-top:7px}
.bb-ai p b{color:var(--ink);font-weight:700}
.bb-ai .rub{display:block;margin-bottom:7px;font-size:10px;font-weight:800;letter-spacing:.04em;
  color:var(--coral);background:var(--cream);border-radius:999px;padding:3px 9px;width:fit-content}
.bb-ai .cite{margin-top:9px;padding-top:8px;border-top:1px dashed rgba(0,0,0,.1);
  font-size:11px;line-height:1.62;color:#7a8494}
.bb-ai .cite b{color:var(--ink);font-weight:700}
.bb-ai .cite a{color:var(--coral);font-weight:700;white-space:nowrap}
.bb-typing{align-self:flex-start;background:#fff;border:1px solid rgba(0,0,0,.06);
  border-radius:17px 17px 17px 5px;padding:12px 14px;display:inline-flex;gap:4px}
.bb-typing i{width:6px;height:6px;border-radius:50%;background:#b6bdc8;animation:tp 1.2s ease-in-out infinite}
.bb-typing i:nth-child(2){animation-delay:.15s}
.bb-typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.phone-input{flex:none;display:flex;align-items:center;gap:8px;padding:9px 12px 8px;
  background:rgba(255,255,255,.92);border-top:1px solid rgba(0,0,0,.07)}
.phone-input .field{flex:1;min-width:0;min-height:34px;display:flex;align-items:center;
  background:#EDEEF1;border-radius:999px;padding:6px 13px;font-size:12.6px;color:var(--ink);
  line-height:1.4;letter-spacing:-.02em}
.phone-input .field.ph{color:#98a0ad}
.phone-input .caret{display:inline-block;width:1.5px;height:14px;background:var(--peri);
  margin-left:1px;animation:cb 1s step-end infinite}
@keyframes cb{0%,50%{opacity:1}51%,100%{opacity:0}}
.phone-input .send{width:30px;height:30px;flex:none;border:0;border-radius:50%;cursor:default;
  background:#C9CDD4;display:grid;place-items:center;transition:background .25s}
.phone-input .send.on{background:var(--peri)}
.phone-input .send svg{width:15px;height:15px;color:#fff}
.phone-home{position:absolute;left:50%;bottom:1%;transform:translateX(-50%);
  width:34%;height:4px;border-radius:999px;background:#0b0c0e;opacity:.22;z-index:6}

/* 질문 칩 */
.aisim-side{min-width:0}
.aisim-lb{font-size:11px;font-family:var(--mono);letter-spacing:.12em;color:var(--tx-3);margin-bottom:12px}
.aisim-qs{display:flex;flex-direction:column;gap:7px;max-width:520px}
.aisim-qs button{appearance:none;font-family:inherit;cursor:pointer;text-align:left;
  background:#fff;border:1px solid var(--hair);color:var(--tx-2);
  border-radius:14px;padding:12px 16px;font-size:13.4px;font-weight:600;letter-spacing:-.025em;
  line-height:1.5;min-height:46px;position:relative;
  transition:border-color .22s,color .22s,transform .22s var(--ez2),box-shadow .22s}
.aisim-qs button:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px);box-shadow:var(--sh-2)}
.aisim-qs button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.aisim-qs button::before{content:"“";margin-right:2px;opacity:.45}
.aisim-qs button::after{content:"”";margin-left:2px;opacity:.45}
@media(max-width:919px){
  .aisim-side{justify-self:center;width:100%;max-width:520px}
  .aisim-qs{max-width:none}
}
@media(max-width:520px){
  .phone{width:min(100%,320px)}
  .aisim-qs button{font-size:12.8px;padding:11px 14px}
}
@media(max-width:400px){
  .dx-copybox p{font-size:12.8px}
  .dx-copy .btn{width:100%}
  .entity .ents span{font-size:11px}
}

/* ══════════════════════════════════════════════════════════════
   v4 신규 ④ — 내 상황 맞춤 진단 (.dx)
   ══════════════════════════════════════════════════════════════ */
.dx{background:#fff;border:1px solid var(--hair);border-radius:var(--r-2xl);overflow:hidden;
  box-shadow:var(--sh-3);margin-top:clamp(26px,3.4vw,40px);text-align:left}
.dx-bar{display:flex;gap:4px;padding:16px clamp(18px,2.6vw,30px) 0}
.dx-bar i{flex:1;height:4px;border-radius:3px;background:var(--line);transition:background .4s var(--ez)}
.dx-bar i.on{background:var(--coral)}
.dx-body{padding:clamp(20px,2.8vw,32px)}
.dx-step[hidden]{display:none}
.dx-num{font-family:var(--mono);font-size:11px;letter-spacing:.12em;color:var(--coral);margin-bottom:9px}
.dx-q{font-size:clamp(18px,2.2vw,23px);letter-spacing:-.05em;color:var(--ink);margin-bottom:6px;line-height:1.3}
.dx-hint{font-size:12.8px;color:var(--tx-3);line-height:1.6;margin-bottom:18px}
.dx-opts{display:grid;gap:8px}
@media(min-width:640px){.dx-opts.c2{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dx-opts.c3{grid-template-columns:repeat(3,minmax(0,1fr))}}
.dx-opts button{appearance:none;font-family:inherit;cursor:pointer;text-align:left;
  background:var(--paper);border:1.5px solid var(--hair);border-radius:16px;
  padding:15px 17px;min-height:56px;transition:border-color .24s,background .24s,transform .24s var(--ez2)}
.dx-opts button:hover{border-color:var(--coral);transform:translateY(-2px);background:#fff}
.dx-opts button[aria-pressed="true"]{border-color:var(--coral);background:var(--cream)}
.dx-opts button b{display:block;font-size:15px;letter-spacing:-.04em;color:var(--ink)}
.dx-opts button span{display:block;margin-top:3px;font-size:12.4px;color:var(--tx-2);line-height:1.55}
.dx-nav{display:flex;gap:8px;align-items:center;margin-top:18px;flex-wrap:wrap}
.dx-back{appearance:none;background:none;border:0;font-family:inherit;cursor:pointer;
  font-size:13px;font-weight:700;color:var(--tx-3);min-height:44px;padding:0 6px}
.dx-back:hover{color:var(--ink)}

/* 결과 */
.dx-res{display:grid;gap:14px}
.dx-res-h{background:var(--ink);color:#fff;border-radius:var(--r-xl);padding:clamp(20px,2.6vw,26px)}
.dx-res-h .rl{font-family:var(--mono);font-size:10.6px;letter-spacing:.12em;color:rgba(255,255,255,.5);margin-bottom:9px}
.dx-res-h b{display:block;font-size:clamp(18px,2.2vw,23px);letter-spacing:-.05em;line-height:1.34}
.dx-res-h p{margin-top:9px;font-size:13.6px;line-height:1.78;color:rgba(255,255,255,.78)}
.dx-grid{display:grid;gap:9px}
@media(min-width:700px){.dx-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.dx-card{border:1px solid var(--hair);border-radius:18px;padding:18px 20px;background:var(--paper)}
.dx-card .dh{display:flex;align-items:center;gap:8px;margin-bottom:9px}
.dx-card .dh i{width:24px;height:24px;border-radius:8px;background:var(--cream);color:var(--coral);
  display:grid;place-items:center;font-size:12px;font-style:normal;font-weight:800;flex:none}
.dx-card .dh b{font-size:14.4px;letter-spacing:-.04em;color:var(--ink)}
.dx-card ul{display:grid;gap:7px}
.dx-card li{position:relative;padding-left:16px;font-size:13.2px;line-height:1.7;color:var(--tx-2)}
.dx-card li::before{content:"";position:absolute;left:2px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--coral)}
.dx-card li b{color:var(--ink)}
.dx-note{background:var(--cream);border-radius:16px;padding:16px 18px;font-size:12.6px;line-height:1.8;color:var(--tx-2)}
.dx-note b{color:var(--ink)}
.dx-copy{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
.dx-copybox{background:var(--mist);border:1px dashed var(--line-2);border-radius:16px;padding:16px 18px}
.dx-copybox .cl{font-size:10.6px;font-family:var(--mono);letter-spacing:.1em;color:var(--tx-3);margin-bottom:8px}
.dx-copybox p{font-size:13.6px;line-height:1.82;color:var(--ink);font-weight:600}
.dx-toast{font-size:12.4px;font-weight:700;color:var(--coral);opacity:0;transition:opacity .3s}
.dx-toast.on{opacity:1}

/* ══ 섹션 내 앵커 목차 ══ */
.toc{display:flex;flex-wrap:wrap;gap:6px;margin:20px 0 0}
.toc a{font-size:12.4px;font-weight:600;color:var(--tx-2);background:#fff;border:1px solid var(--hair);
  border-radius:999px;padding:8px 14px;min-height:38px;display:inline-flex;align-items:center;
  transition:border-color .2s,color .2s,transform .2s var(--ez2)}
.toc a:hover{border-color:var(--coral);color:var(--coral);transform:translateY(-2px)}

/* ─── 모션 ─── */
.mask{display:block;overflow:hidden}
.mask > span{display:block;transform:translateY(112%);transition:transform 1s var(--ez)}
.js .revealed .mask > span{transform:none}
.js .rv{opacity:0;transform:translateY(20px)}
.rv{transition:opacity .82s var(--ez),transform .82s var(--ez)}
.rv.in{opacity:1!important;transform:none!important}
.js .tilt-init{opacity:0;transform:perspective(1300px) rotateY(9deg) rotateX(4deg) translateY(20px);
  transition:transform 1.05s var(--ez),opacity .85s var(--ez)}
.js .tilt-init.in{opacity:1;transform:perspective(1300px) rotateY(0) rotateX(0) translateY(0)}
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
  .rv,.tilt-init{opacity:1!important;transform:none!important}
  .mask > span{transform:none!important}
  .hero-h .hl::after{transform:scaleX(1)!important}
  .prog{display:none}
}

/* ══ 검토 모드 ══ */
.rvw-toggle{position:fixed;left:clamp(12px,2.4vw,22px);bottom:clamp(12px,2.4vw,22px);z-index:185;
  display:inline-flex;align-items:center;gap:8px;background:var(--ink);color:#fff;border:0;cursor:pointer;
  font-family:inherit;font-weight:700;font-size:12.5px;letter-spacing:-.02em;
  padding:0 15px;min-height:42px;border-radius:999px;box-shadow:0 8px 22px rgba(18,37,64,.26);
  transition:transform .24s var(--ez2),background .2s;opacity:.7}
.rvw-toggle:hover{opacity:1;transform:translateY(-2px)}
.rvw-toggle[aria-pressed="true"]{background:var(--coral);opacity:1}
.rvw-dot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.45)}
.rvw-toggle[aria-pressed="true"] .rvw-dot{background:#fff;box-shadow:0 0 0 3px rgba(255,255,255,.3)}
@media(max-width:520px){.rvw-lb{display:none}.rvw-toggle{padding:0 13px;min-width:42px}}

.rvw-help{position:fixed;left:clamp(12px,2.4vw,22px);bottom:calc(clamp(12px,2.4vw,22px) + 52px);z-index:186;
  width:min(310px,calc(100vw - 24px));background:#fff;border-radius:20px;padding:18px 20px;
  box-shadow:var(--sh-4);border:1px solid var(--line)}
.rvw-help b{display:block;font-size:14px;color:var(--ink);margin-bottom:7px}
.rvw-help p{font-size:12.6px;color:var(--tx-2);line-height:1.7}
.rvw-help code{background:var(--cream);color:var(--coral-dp);border-radius:5px;padding:1px 6px;font-size:11.5px;font-weight:700}
.rvw-help button{margin-top:12px;background:var(--ink);color:#fff;border:0;border-radius:999px;
  font-family:inherit;font-weight:700;font-size:12.5px;padding:9px 16px;cursor:pointer;min-height:40px}

body.review-mode .band,body.review-mode article.band{outline:1px dashed rgba(240,86,58,.45);outline-offset:-1px}
body.review-mode .band::before{content:attr(data-rvw);position:absolute;left:0;top:0;z-index:60;
  background:var(--coral);color:#fff;font-family:var(--mono);font-size:11px;font-weight:700;letter-spacing:.06em;
  padding:5px 10px;border-radius:0 0 10px 0;pointer-events:none}
body.review-mode .gnb::after{content:"검토 모드 — 영역 번호가 표시됩니다";position:absolute;left:50%;
  transform:translateX(-50%);bottom:-26px;background:var(--ink);color:#fff;font-size:11px;font-weight:700;
  padding:4px 12px;border-radius:999px;white-space:nowrap;z-index:100}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ① 선택 기준 8항목 카드 시각 리디자인 (#std8)
   텍스트 나열 → 아이콘 타일 + 결론 콜아웃 + 「왜 / 저희는」 2칸
   문구는 심의본 그대로. 배치만 바뀝니다.
   ══════════════════════════════════════════════════════════════ */
#std8 .chunk{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;
  padding:clamp(24px,3vw,34px);margin-top:14px;border-radius:var(--r-2xl)}
#std8 .chunk + .chunk{margin-top:14px}
#std8 .chunk::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;
  background:linear-gradient(90deg,var(--coral),var(--orange) 62%,var(--lime))}

/* 카드 배경 2색 교차 — 홀수는 흰색, 짝수는 따뜻한 크림 */
#std8 article:nth-of-type(odd){background:#FFFFFF}
#std8 article:nth-of-type(even){background:#FFF6EC;border-color:rgba(240,86,58,.13)}
#std8 article:nth-of-type(even)::before{
  background:linear-gradient(90deg,var(--peri),var(--coral) 62%,var(--orange))}
#std8 article:nth-of-type(even) .chunk-h .ci{
  background:linear-gradient(155deg,#E6E9FA,#F5F7FE);border-color:rgba(92,108,196,.2);color:var(--peri)}
#std8 article:nth-of-type(even) > p:nth-of-type(1){
  background:linear-gradient(100deg,#FFFFFF,#FFFDFA);border-left-color:var(--peri)}
#std8 article:nth-of-type(even) > p:nth-of-type(2){background:#FFFFFF}
#std8 article:nth-of-type(even) > p:nth-of-type(3){background:#F3F8F5}
#std8 article:nth-of-type(even) .chunk-ask{background:#FFFFFF;border:1px solid rgba(240,86,58,.14)}

/* 카테고리 배지 — DOM 순서상 제목 뒤에 있지만 위로 올립니다 */
#std8 .chunk-q{order:-1;grid-column:1/-1;justify-self:start;
  display:inline-flex;align-items:center;gap:5px;margin:0 0 15px;padding:6px 13px;
  border-radius:999px;background:var(--mist);border:1px solid rgba(92,108,196,.18);
  font-size:11.4px;font-weight:700;color:var(--tx-3);letter-spacing:-.02em;line-height:1}
#std8 .chunk-q em{color:var(--peri);font-weight:800}

/* 헤더 — 아이콘 타일 + 제목 */
#std8 .chunk-h{grid-column:1/-1;display:flex;align-items:center;gap:16px;margin-bottom:18px;flex-wrap:nowrap}
#std8 .chunk-h .ci{width:68px;height:68px;border-radius:22px;flex:none;
  display:grid;place-items:center;align-content:center;gap:2px;
  background:linear-gradient(155deg,#FFE9DF,#FFF7F1);border:1px solid rgba(240,86,58,.16);
  font-family:var(--mono);font-size:10.4px;font-weight:700;color:var(--coral-dp);letter-spacing:.08em}
#std8 .chunk-h .ci i{font-size:28px;line-height:1;display:block}
#std8 .chunk-h b{flex:1 1 auto;font-size:clamp(17px,1.5vw,21px);letter-spacing:-.05em;line-height:1.32}

/* 결론 문장 — 콜아웃 */
#std8 .chunk > p:nth-of-type(1){grid-column:1/-1;margin:0 0 14px;
  padding:16px 20px;border-radius:16px;border-left:4px solid var(--coral);
  background:linear-gradient(100deg,#FFF3EA,#FFFBF7);
  font-size:clamp(14.8px,1.2vw,16.4px);line-height:1.72;color:var(--ink);font-weight:600}
#std8 .chunk > p:nth-of-type(1) b{font-weight:800}

/* 왜 / 저희는 — 2칸 */
#std8 .chunk > p:nth-of-type(2),
#std8 .chunk > p:nth-of-type(3){margin:0;padding:42px 18px 18px;border-radius:16px;
  position:relative;border:1px solid var(--hair);font-size:14.1px;line-height:1.8}
#std8 .chunk > p:nth-of-type(2){background:var(--paper)}
#std8 .chunk > p:nth-of-type(3){background:#F4F9F6;border-color:rgba(44,122,92,.14)}
#std8 .chunk > p:nth-of-type(2)::before,
#std8 .chunk > p:nth-of-type(3)::before{position:absolute;left:18px;top:16px;line-height:1;
  font-size:10.6px;font-weight:800;letter-spacing:.02em}
#std8 .chunk > p:nth-of-type(2)::before{content:"왜 확인하나요";color:var(--tx-3)}
#std8 .chunk > p:nth-of-type(3)::before{content:"저희는 이렇게 합니다";color:#2C7A5C}

#std8 .chunk-ask{grid-column:1/-1;margin-top:14px;border-radius:16px;padding:15px 18px}
#std8 .chunk > p.chunk-src{grid-column:1/-1;margin:15px 0 0;padding:13px 0 0;
  background:none;border:0;border-top:1px dashed var(--line);border-radius:0;
  font-size:11.8px;line-height:1.7;color:var(--tx-3);font-weight:400}
#std8 .chunk > p.chunk-src::before{content:none}

@media (max-width:820px){
  #std8 .chunk{grid-template-columns:1fr}
  #std8 .chunk > p:nth-of-type(3){margin-top:10px}
  #std8 .chunk-h{gap:12px;margin-bottom:14px}
  #std8 .chunk-h .ci{width:56px;height:56px;border-radius:18px;font-size:9.6px}
  #std8 .chunk-h .ci::before{font-size:23px}
  #std8 .chunk > p:nth-of-type(1){padding:14px 16px}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ⑨ 연혁·등록 정리 (about.html)
   긴 연표를 접고, 고객이 실제로 확인하는 숫자 세 개만 먼저 보여줍니다.
   ══════════════════════════════════════════════════════════════ */
.bignum{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(8px,1vw,14px);margin-top:clamp(18px,2.2vw,26px)}
@media (max-width:520px){.bignum{grid-template-columns:1fr;gap:10px}}
.bn{background:linear-gradient(165deg,#FFFFFF,#FFF4EC);
  border:1px solid rgba(240,86,58,.16);border-radius:20px;
  padding:clamp(16px,1.8vw,22px) clamp(12px,1.4vw,18px);text-align:center;
  box-shadow:0 1px 2px rgba(27,51,88,.04),0 10px 24px rgba(179,86,45,.09)}
@media (max-width:520px){.bn{display:flex;align-items:center;gap:14px;text-align:left}}
.bn b,.bn b span{font-size:clamp(28px,3.3vw,40px);line-height:1.08;
  letter-spacing:-.06em;color:var(--coral-dp);font-weight:800}
.bn b{display:block;white-space:nowrap}
.bn i{display:block;margin-top:10px;font-style:normal;
  font-size:clamp(12.6px,1.12vw,13.8px);
  line-height:1.55;color:var(--tx-2);font-weight:600;word-break:keep-all}
@media (max-width:520px){.bn i{margin-top:0}.bn b{flex:none;min-width:104px}}

.hist{margin-top:14px;border-radius:16px;border:1px solid var(--hair);background:#fff;
  overflow:hidden}
.hist summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:14px 18px;font-size:14.2px;color:var(--tx-2);transition:background .2s}
.hist summary::-webkit-details-marker{display:none}
.hist summary:hover{background:var(--paper)}
.hist summary b{flex:1 1 auto;font-weight:700;color:var(--ink);letter-spacing:-.04em}
.hist summary .oa-x{background:var(--tx-3)}
.hist[open] summary{border-bottom:1px solid var(--hair)}
.hist .ck{padding:0 18px 16px}

/* 「그래서, 뭐가 다른가요?」 — 입체 아이콘 + 결론 한 줄 */
.dfx{display:grid;gap:clamp(12px,1.4vw,18px);margin-top:clamp(20px,2.4vw,30px)}
@media (min-width:720px){.dfx{grid-template-columns:1fr 1fr}}
.dfx-c{position:relative;background:#fff;border:1px solid var(--hair);
  border-radius:26px;padding:clamp(24px,2.6vw,32px) clamp(20px,2.2vw,28px);
  box-shadow:0 1px 2px rgba(27,51,88,.05),0 14px 32px rgba(27,51,88,.08),
             0 32px 56px -28px rgba(27,51,88,.16);
  transition:transform .3s var(--ez2),box-shadow .3s}
.dfx-c:hover{transform:translateY(-5px);
  box-shadow:0 2px 4px rgba(27,51,88,.06),0 22px 44px rgba(27,51,88,.13),
             0 46px 72px -30px rgba(27,51,88,.22)}
.dfx-n{position:absolute;top:20px;right:22px;font-family:var(--mono);
  font-size:11.5px;font-weight:700;letter-spacing:.06em;color:rgba(27,51,88,.22)}
.dfx-ico{display:grid;place-items:center;width:66px;height:66px;margin-bottom:16px;
  border-radius:22px;
  background:linear-gradient(155deg,#FFFFFF 0%,#FFF1E7 54%,#FFE0CD 100%);
  box-shadow:0 7px 0 #F2C4AC, 0 13px 22px rgba(200,90,50,.24),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 7px rgba(214,60,33,.09);
  transition:transform .3s var(--ez2)}
.dfx-c:nth-child(even) .dfx-ico{
  background:linear-gradient(155deg,#FFFFFF 0%,#F1F3FD 54%,#DDE2F8 100%);
  box-shadow:0 7px 0 #C0C7EC, 0 13px 22px rgba(60,75,170,.22),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 7px rgba(60,75,170,.09)}
.dfx-c:hover .dfx-ico{transform:translateY(-3px) rotate(-5deg)}
.dfx-ico i{font-style:normal;font-size:30px;line-height:1;
  filter:drop-shadow(0 3px 3px rgba(120,50,25,.24))}
.dfx-c h3{font-size:clamp(18px,1.7vw,21px);letter-spacing:-.05em;color:var(--ink);
  line-height:1.32;margin-bottom:11px}
.dfx-c p{font-size:clamp(14.4px,1.3vw,15.6px);line-height:1.78;color:var(--tx-2)}
.dfx-c p b{color:var(--ink);font-weight:700}
.dfx-so{margin-top:15px;padding:13px 16px;border-radius:14px;
  background:#FFF4EC;color:var(--tx-2);font-size:clamp(13.6px,1.2vw,14.8px)}
.dfx-so b{color:var(--coral-dp);font-weight:800}
.dfx-c:nth-child(even) .dfx-so{background:#F1F3FD}
.dfx-c:nth-child(even) .dfx-so b{color:#3B4AA8}
@media (prefers-reduced-motion:reduce){.dfx-c,.dfx-ico{transition:none}}

.certs-h{margin-top:clamp(26px,3.2vw,38px);margin-bottom:14px;
  font-size:clamp(19px,1.9vw,24px);font-weight:800;letter-spacing:-.05em;color:var(--ink)}
.certs{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-top:0}
@media (max-width:560px){.certs{grid-template-columns:1fr}}
.cert{padding:18px 20px;border-radius:18px}
.cert b{font-size:14.6px}
.cert span{margin-top:7px;font-size:13.4px}
.cert em{font-style:normal;font-weight:800;color:var(--coral-dp);
  font-size:1.06em;letter-spacing:-.01em}
/* ISO 블록은 대리점등록증 스캔 아래에 놓습니다 */
.cert-iso{background:linear-gradient(165deg,#FFFFFF,#F7F8FE);
  border-color:rgba(92,108,196,.18)}
.zig-vis > .cert-iso{margin-top:clamp(14px,1.6vw,20px)}
.cert-iso .badges{justify-content:center;gap:clamp(16px,2.4vw,30px)}
.cert-iso b{font-size:15.4px}
.cert-note{margin-top:14px;font-size:13px;line-height:1.8}
.cert-note b{color:var(--ink)}
.cert-note span{display:block;margin-top:7px;color:var(--tx-3);font-size:.9em}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ⑧ 「여기, 믿을 만한 곳인가요?」 문답 카드 (#facts)
   질문은 남색 띠, 답변은 흰 바탕. 한눈에 나뉘게.
   ══════════════════════════════════════════════════════════════ */
#facts .chunk{display:flex;flex-direction:column;padding:0;overflow:hidden;
  border:1px solid var(--hair);border-radius:var(--r-2xl);
  box-shadow:0 1px 2px rgba(27,51,88,.05),0 14px 34px rgba(27,51,88,.09)}
#facts .chunk > *{order:3}
#facts .chunk-h{order:1;margin:0;
  background:linear-gradient(135deg,#31456F 0%,#1B3358 62%,#152A4A 100%);
  padding:clamp(20px,2.2vw,26px) clamp(20px,2.4vw,30px) 10px;
  display:flex;align-items:center;gap:13px}
/* 번호 대신 섹션에 맞는 입체 아이콘. 아이콘 문자는 HTML 에 둡니다
   (CSS content 로 넣으면 폰트 대체·색 상속에 걸려 안 보이는 환경이 있습니다) */
#facts .chunk-h .ci{width:clamp(50px,5.2vw,60px);height:clamp(50px,5.2vw,60px);
  border-radius:19px;flex:none;display:grid;place-items:center;
  background:linear-gradient(155deg,#FFFFFF 0%,#F2F4FE 54%,#DCE1F8 100%);
  box-shadow:0 6px 0 rgba(12,24,48,.55), 0 12px 20px rgba(6,14,34,.34),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 7px rgba(60,75,170,.10)}
#facts .chunk-h b{color:#fff;font-size:clamp(18px,1.75vw,22px);letter-spacing:-.05em}
#facts .chunk-q{order:2;margin:0;
  background:linear-gradient(135deg,#31456F 0%,#1B3358 62%,#152A4A 100%);
  padding:0 clamp(20px,2.4vw,30px) clamp(18px,2vw,22px) clamp(61px,5.6vw,71px);
  color:rgba(255,255,255,.6);font-size:13px}
#facts .chunk-q em{color:#A8B8EC;font-weight:700}

#facts .chunk > p{background:#fff;padding-left:clamp(20px,2.4vw,30px);padding-right:clamp(20px,2.4vw,30px)}
#facts .chunk > p:nth-of-type(1){padding-top:clamp(22px,2.4vw,28px);
  font-size:clamp(15.4px,1.4vw,17.2px);line-height:1.76;color:var(--ink);font-weight:600}
#facts .chunk > p:nth-of-type(1)::before{content:"답변";display:block;width:fit-content;
  margin-bottom:13px;padding:6px 13px;border-radius:999px;
  background:#FFEDE4;color:var(--coral-dp);
  font-size:11.8px;font-weight:800;letter-spacing:-.02em;line-height:1}
#facts .chunk > p:last-of-type{padding-bottom:clamp(20px,2.2vw,26px)}
#facts .chunk > p.chunk-src{margin-top:16px;padding-top:14px;
  border-top:1px dashed var(--line);color:var(--tx-3)}
#facts .chunk-ask{margin:0 clamp(20px,2.4vw,30px) clamp(20px,2.2vw,26px)}
@media (max-width:560px){
  #facts .chunk-q{padding-left:20px}
  #facts .chunk-h b{font-size:18px}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ⑦ 「착한 태아보험 연구소는?」 접이식 답변 (.oa)
   질문(그대로 물어보세요) 바로 아래에서 저희 답을 펼쳐 봅니다.
   ══════════════════════════════════════════════════════════════ */
.oa{margin-top:10px;border-radius:16px;overflow:hidden;
  background:linear-gradient(180deg,#F1F3FD,#F7F8FE);
  border:1.5px solid rgba(92,108,196,.26)}
.oa summary{list-style:none;cursor:pointer;
  display:flex;align-items:center;gap:10px;padding:15px 18px;
  font-size:clamp(14.6px,1.3vw,16px);color:var(--peri);
  transition:background .2s}
.oa summary::-webkit-details-marker{display:none}
.oa summary:hover{background:rgba(92,108,196,.07)}
.oa summary b{flex:1 1 auto;font-weight:800;letter-spacing:-.04em;color:#3B4AA8}
.oa-ic{flex:none;font-size:17px;line-height:1}
.oa-x{flex:none;width:22px;height:22px;border-radius:50%;position:relative;
  background:var(--peri);transition:transform .28s var(--ez2)}
.oa-x::before,.oa-x::after{content:"";position:absolute;left:50%;top:50%;
  background:#fff;border-radius:2px;transform:translate(-50%,-50%)}
.oa-x::before{width:10px;height:2px}
.oa-x::after{width:2px;height:10px;transition:opacity .22s}
.oa[open] .oa-x{transform:rotate(180deg)}
.oa[open] .oa-x::after{opacity:0}
.oa-body{padding:2px 18px 18px;animation:oaIn .32s cubic-bezier(.2,.85,.3,1) both}
@keyframes oaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.oa-body p{font-size:clamp(14.4px,1.3vw,15.8px);line-height:1.78;color:var(--ink)}
.oa-body p b{color:#3B4AA8;font-weight:800}
.oa-body .oa-note{margin-top:10px;padding-top:10px;
  border-top:1px dashed rgba(92,108,196,.28);
  font-size:12.6px;line-height:1.66;color:var(--tx-3);font-weight:400}
@media (prefers-reduced-motion:reduce){.oa-body{animation:none}}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ⑥ 주수별 준비 (when.html)
   히어로 = 아이콘·키워드만 / 아래 = 주차별 구체 내용. 중복을 없앴습니다.
   ══════════════════════════════════════════════════════════════ */
.step3d{position:relative;list-style:none;margin:0;padding:0;
  display:flex;flex-direction:column;gap:16px}
.step3d li{position:relative;z-index:1;display:flex;align-items:center;
  gap:clamp(13px,1.6vw,18px);
  background:#fff;border:1px solid var(--hair);border-radius:22px;
  padding:14px 16px;
  box-shadow:0 1px 2px rgba(27,51,88,.04),0 10px 24px rgba(27,51,88,.07);
  opacity:0;animation:s3In .62s cubic-bezier(.18,.86,.28,1) both;
  transition:transform .3s var(--ez2),box-shadow .3s var(--ez2),border-color .3s}
.step3d li:hover{transform:translateY(-3px);border-color:rgba(240,86,58,.26);
  box-shadow:0 2px 4px rgba(27,51,88,.05),0 18px 36px rgba(27,51,88,.12)}
/* 카드 사이를 잇는 짧은 연결선 */
.step3d li:not(:last-child)::after{content:"";position:absolute;
  left:calc(16px + clamp(30px,3.5vw,38px));top:100%;width:3px;height:16px;
  background:linear-gradient(180deg,rgba(240,86,58,.55),rgba(245,128,63,.35));
  border-radius:2px}
.s3-t{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1 1 auto}
.s3-n{flex:none;width:26px;height:26px;border-radius:9px;display:grid;place-items:center;
  background:var(--mist);color:var(--peri);
  font-family:var(--mono);font-size:11.5px;font-weight:700;line-height:1}
.step3d li:nth-child(1){animation-delay:.30s}
.step3d li:nth-child(2){animation-delay:.44s}
.step3d li:nth-child(3){animation-delay:.58s}
.step3d li:nth-child(4){animation-delay:.72s}
.step3d li:nth-child(5){animation-delay:.86s}
@keyframes s3In{from{opacity:0;transform:translateX(26px) scale(.94)}to{opacity:1;transform:none}}

.s3-ico{flex:none;width:clamp(60px,7vw,76px);height:clamp(60px,7vw,76px);
  border-radius:22px;display:grid;place-items:center;
  background:linear-gradient(155deg,#FFFFFF 0%,#FFF1E7 54%,#FFE0CD 100%);
  box-shadow:0 7px 0 #F2C4AC, 0 13px 22px rgba(200,90,50,.24),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 7px rgba(214,60,33,.09);
  animation:s3Float 3.6s ease-in-out infinite}
.step3d li:nth-child(2) .s3-ico{animation-delay:.3s}
.step3d li:nth-child(3) .s3-ico{animation-delay:.6s}
.step3d li:nth-child(4) .s3-ico{animation-delay:.9s}
.step3d li:nth-child(5) .s3-ico{animation-delay:1.2s}
@keyframes s3Float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.s3-ico i{font-style:normal;font-size:clamp(28px,3vw,34px);line-height:1;
  filter:drop-shadow(0 3px 3px rgba(120,50,25,.26))}
.s3-w{font-size:12.4px;font-weight:700;letter-spacing:-.03em;color:var(--coral-dp)}
.s3-k{font-size:clamp(17px,1.7vw,22px);letter-spacing:-.05em;color:var(--ink);line-height:1.3}
@media (max-width:520px){
  .step3d li{padding:12px 14px;border-radius:19px;gap:12px}
  .step3d li:not(:last-child)::after{left:44px}
  .s3-ico{width:56px;height:56px;border-radius:18px}
  .s3-ico i{font-size:24px}
  .s3-w{font-size:11.8px}
  .s3-n{width:23px;height:23px;border-radius:8px;font-size:10.8px}
}
@media (prefers-reduced-motion:reduce){
  .step3d li{animation:none;opacity:1;transition:none}
  .s3-ico{animation:none}
}

/* 주차별 상세 — 가로 스크롤 없이 한 화면에. 스크롤을 따라 하나씩 올라옵니다 */
.wkmap{padding:4px 2px 6px}
.wk-rail{position:relative;display:grid;gap:clamp(9px,1vw,14px);
  grid-template-columns:repeat(5,minmax(0,1fr));padding-top:30px;align-items:stretch}
@media (max-width:1080px){.wk-rail{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:16px}}
@media (max-width:680px){.wk-rail{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:430px){.wk-rail{grid-template-columns:1fr}}
.wk-line{position:absolute;left:6%;right:6%;top:13px;height:3px;border-radius:2px;
  background:rgba(240,86,58,.20);overflow:hidden}
.wk-prog{display:block;height:100%;width:100%;border-radius:2px;
  background:linear-gradient(90deg,var(--coral),var(--orange));
  transform:scaleX(0);transform-origin:left;
  transition:transform 1.1s cubic-bezier(.2,.8,.25,1) .1s}
.rv.in .wk-prog{transform:scaleX(1)}

.wk-c{position:relative;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFDFB 62%,#FFF6EE 100%);
  border:1px solid var(--hair);border-radius:24px;
  padding:clamp(18px,1.8vw,24px) clamp(14px,1.4vw,20px) clamp(16px,1.6vw,22px);
  box-shadow:0 1px 2px rgba(27,51,88,.05),0 14px 32px rgba(27,51,88,.09),
             0 30px 54px -26px rgba(27,51,88,.16);
  opacity:0;transform:translateY(26px) scale(.97);
  transition:opacity .6s,transform .6s cubic-bezier(.18,.86,.28,1),box-shadow .3s}
.wk-c:hover{box-shadow:0 2px 4px rgba(27,51,88,.06),0 20px 42px rgba(27,51,88,.14),
             0 44px 70px -30px rgba(27,51,88,.22)}
/* 히어로 5단계와 같은 입체 아이콘 타일 */
.wk-ico{display:grid;place-items:center;width:60px;height:60px;margin-bottom:15px;
  border-radius:20px;
  background:linear-gradient(155deg,#FFFFFF 0%,#FFF1E7 54%,#FFE0CD 100%);
  box-shadow:0 6px 0 #F2C4AC, 0 11px 18px rgba(200,90,50,.22),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 6px rgba(214,60,33,.09)}
.wk-ico i{font-style:normal;font-size:27px;line-height:1;
  filter:drop-shadow(0 3px 3px rgba(120,50,25,.24))}
.rv.in .wk-c{opacity:1;transform:none}
.rv.in .wk-c:nth-child(2){transition-delay:.20s}
.rv.in .wk-c:nth-child(3){transition-delay:.34s}
.rv.in .wk-c:nth-child(4){transition-delay:.48s}
.rv.in .wk-c:nth-child(5){transition-delay:.62s}
.rv.in .wk-c:nth-child(6){transition-delay:.76s}
.wk-dot{position:absolute;left:50%;top:-30px;transform:translateX(-50%) scale(0);
  width:17px;height:17px;border-radius:50%;background:#fff;
  border:4px solid var(--coral);box-shadow:0 3px 8px rgba(214,60,33,.3);
  transition:transform .4s cubic-bezier(.2,1.5,.4,1)}
.rv.in .wk-c .wk-dot{transform:translateX(-50%) scale(1)}
/* 히어로 5단계와 같은 표기 — 코럴 주수 라벨 위, 굵은 제목 아래 */
.wk-badge{display:block;margin-bottom:3px;
  color:var(--coral-dp);font-size:clamp(11.6px,1.05vw,12.8px);font-weight:800;
  letter-spacing:-.03em;line-height:1.3}
.wk-c h3{font-size:clamp(17px,1.6vw,21px);letter-spacing:-.055em;color:var(--ink);
  line-height:1.28;margin-bottom:13px}
.wk-c ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.wk-c ul li{position:relative;padding-left:15px;
  font-size:clamp(13px,1.15vw,14.2px);line-height:1.58;color:var(--tx-2)}
.wk-c ul li::before{content:"";position:absolute;left:0;top:7px;width:6px;height:6px;
  border-radius:50%;background:var(--orange)}
.wk-c ul li b{color:var(--ink);font-weight:700}
.wk-tip{margin-top:14px;padding-top:12px;border-top:1px dashed rgba(27,51,88,.14);
  font-size:clamp(12.4px,1.08vw,13.2px);line-height:1.58;color:var(--peri);font-weight:600}
/* 줄바꿈되면 레일이 첫 줄에만 걸리므로 감춥니다 */
@media (max-width:1080px){
  .wk-line,.wk-dot{display:none}
  .wk-rail{padding-top:4px}
}

/* 스크롤을 따라 카드가 하나씩 — 지원 브라우저에서는 스크롤 위치에 물립니다 */
@keyframes wkRise{
  from{opacity:0;transform:translateY(30px) scale(.96)}
  to{opacity:1;transform:none}}
@supports (animation-timeline:view()){
  @media (prefers-reduced-motion:no-preference){
    .wk-c{animation:wkRise linear both;
      animation-timeline:view();animation-range:entry 6% cover 24%}
    .rv.in .wk-c,
    .rv.in .wk-c:nth-child(2),.rv.in .wk-c:nth-child(3),
    .rv.in .wk-c:nth-child(4),.rv.in .wk-c:nth-child(5),
    .rv.in .wk-c:nth-child(6){transition-delay:0s}
  }
}
@media (prefers-reduced-motion:reduce){
  .wk-c,.wk-dot,.wk-prog{transition:none;animation:none;opacity:1;transform:none}
  .wk-dot{transform:translateX(-50%)}
  .wk-prog{transform:scaleX(1)}
}

/* 쌍둥이 · 시험관 전용 일러스트 아이콘 */
.sp-chunk{padding-top:clamp(84px,9vw,104px)}
.sp-ico{position:absolute;right:clamp(18px,2.4vw,28px);top:clamp(16px,2vw,22px);
  width:clamp(76px,8.4vw,104px);pointer-events:none}
.sp-ico svg{display:block;width:100%;height:auto;overflow:visible}
.sp-b1{animation:spBob 3.4s ease-in-out infinite;transform-origin:44px 62px}
.sp-b2{animation:spBob 3.4s ease-in-out infinite .55s;transform-origin:76px 56px}
@keyframes spBob{0%,100%{transform:translateY(0) rotate(-3deg)}50%{transform:translateY(-5px) rotate(3deg)}}
.sp-tube{animation:spTilt 4s ease-in-out infinite;transform-origin:60px 90px}
@keyframes spTilt{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.sp-bb1,.sp-bb2,.sp-bb3{animation:spRise 2.6s ease-in-out infinite}
.sp-bb2{animation-delay:.5s}.sp-bb3{animation-delay:1s}
@keyframes spRise{
  0%{opacity:0;transform:translateY(10px)}
  30%{opacity:.9}
  100%{opacity:0;transform:translateY(-16px)}}
@media (max-width:560px){
  .sp-chunk{padding-top:clamp(78px,22vw,96px)}
  .sp-ico{right:14px;top:14px;width:72px}
}
@media (prefers-reduced-motion:reduce){
  .sp-b1,.sp-b2,.sp-tube,.sp-bb1,.sp-bb2,.sp-bb3{animation:none}
  .sp-bb1,.sp-bb2,.sp-bb3{opacity:.7}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ⑤ 요청 문장 보내기 시연 (.kkwrap / .kkphone)
   아이폰 목업 안에서 카카오톡 채널에 문장을 타이핑해 보내는 화면.
   ※ 실제 대화 기록이 아니라, 보내실 문장을 보여드리기 위한 예시입니다.
   ══════════════════════════════════════════════════════════════ */
.kkwrap{display:grid;gap:clamp(26px,3.4vw,44px);align-items:center;
  margin-top:clamp(30px,4vw,52px)}
@media (min-width:900px){.kkwrap{grid-template-columns:1fr minmax(0,340px);gap:clamp(34px,4vw,60px)}}
.kk-txt{min-width:0}
.kk-txt .answer{margin-top:16px}
.kk-acts{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:20px;position:relative}
.kk-acts .btn{min-height:46px;font-size:14px}
.kk-vis{display:flex;flex-direction:column;align-items:center;min-width:0}
.kk-cap{margin-top:14px;font-size:11.6px;line-height:1.6;color:var(--tx-3);text-align:center}

.kkphone{width:min(300px,86vw);perspective:1400px}
.kkp-body{position:relative;border-radius:44px;padding:11px;
  background:linear-gradient(155deg,#3B4048,#15181D 46%,#2A2E35);
  box-shadow:0 2px 0 rgba(255,255,255,.20) inset,
             0 26px 50px rgba(27,51,88,.28),0 60px 90px -40px rgba(27,51,88,.42);
  transform:rotateY(-7deg) rotateX(3deg);
  transition:transform .6s cubic-bezier(.16,1,.3,1)}
.kkwrap.in .kkp-body{transform:rotateY(0) rotateX(0)}
.kkp-island{position:absolute;left:50%;top:20px;transform:translateX(-50%);
  width:78px;height:22px;border-radius:999px;background:#0A0C0F;z-index:3}
.kkp-screen{position:relative;border-radius:34px;overflow:hidden;background:#B2C7DA;
  height:clamp(430px,58vw,486px);display:flex;flex-direction:column}

.kkp-bar{flex:none;display:flex;align-items:center;gap:9px;
  padding:44px 14px 11px;background:#B2C7DA}
.kkp-back{width:9px;height:9px;border-left:2px solid #2C3946;border-bottom:2px solid #2C3946;
  transform:rotate(45deg);flex:none;margin-left:2px}
.kkp-bar b{font-size:13.4px;letter-spacing:-.045em;color:#1E2A36;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.kkp-chat{flex:1 1 auto;overflow:hidden;padding:6px 12px 12px;
  display:flex;flex-direction:column;gap:8px}
.kkp-row{display:flex;gap:7px;align-items:flex-end;max-width:100%;
  animation:kkPop .34s cubic-bezier(.2,.9,.3,1) both}
.kkp-row.me{justify-content:flex-end}
@keyframes kkPop{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:none}}
.kkp-av{width:26px;height:26px;border-radius:9px;flex:none;
  background:linear-gradient(150deg,#FFE45C,#F5C400);
  display:grid;place-items:center;font-size:13px;line-height:1}
.kkp-bub{max-width:78%;padding:9px 11px;border-radius:13px;
  font-size:12.2px;line-height:1.62;letter-spacing:-.03em;
  box-shadow:0 1px 2px rgba(20,40,60,.12)}
.kkp-row.you .kkp-bub{background:#fff;color:#1B2430;border-top-left-radius:4px}
.kkp-row.me .kkp-bub{background:#FEE500;color:#1B1710;border-top-right-radius:4px;font-weight:500}
.kkp-time{align-self:flex-end;font-size:9.4px;color:#54677A;flex:none;margin-bottom:2px}
.kkp-typing{display:flex;gap:4px;background:#fff;padding:12px 13px;border-radius:13px;
  border-top-left-radius:4px}
.kkp-typing i{width:6px;height:6px;border-radius:50%;background:#B6C0CB;
  animation:kkDot 1.3s ease-in-out infinite}
.kkp-typing i:nth-child(2){animation-delay:.16s}
.kkp-typing i:nth-child(3){animation-delay:.32s}
@keyframes kkDot{0%,60%,100%{opacity:.35;transform:translateY(0)}30%{opacity:1;transform:translateY(-4px)}}

.kkp-input{flex:none;display:flex;align-items:center;gap:8px;
  padding:9px 12px 16px;background:#fff}
.kkp-plus{width:22px;height:22px;flex:none;display:grid;place-items:center;
  color:#8A97A5;font-size:17px;font-weight:400;line-height:1}
.kkp-field{flex:1 1 auto;min-width:0;font-size:12px;line-height:1.5;color:#1B2430;
  letter-spacing:-.03em;max-height:44px;overflow:hidden;word-break:break-all}
.kkp-field.ph{color:#9AA6B2}
.kkp-field .caret{display:inline-block;width:1.5px;height:12px;vertical-align:-2px;
  background:#F0563A;margin-left:1px;animation:kkCaret 1s steps(1) infinite}
@keyframes kkCaret{0%,49%{opacity:1}50%,100%{opacity:0}}
.kkp-send{flex:none;font-size:11.6px;font-weight:800;letter-spacing:-.03em;
  color:#B9C3CD;background:#EFF2F5;border-radius:999px;padding:7px 12px;line-height:1;
  transition:background .2s,color .2s}
.kkp-send.on{background:#FEE500;color:#1B1710}

@media (prefers-reduced-motion:reduce){
  .kkp-body{transform:none}
  .kkp-row{animation:none}
  .kkp-typing i,.kkp-field .caret{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ④ 「착한태아보험연구소는 어떤가요?」 8문답 입체 카드 (.qa3d)
   질문 8개와 한 줄 요약 답변. 아이콘은 두께·하이라이트로 입체 처리.
   ══════════════════════════════════════════════════════════════ */
.qa3d{display:grid;gap:14px;margin-top:clamp(26px,3.4vw,40px);
  grid-template-columns:1fr}
@media (min-width:760px){.qa3d{grid-template-columns:1fr 1fr;gap:16px}}
@media (min-width:1180px){.qa3d{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}}

.q3{position:relative;background:#fff;border:1px solid var(--hair);
  border-radius:var(--r-2xl);padding:26px 20px 22px;
  box-shadow:0 1px 2px rgba(27,51,88,.05),0 10px 26px rgba(27,51,88,.07),
             0 26px 50px -22px rgba(27,51,88,.16);
  transition:transform .3s var(--ez2),box-shadow .3s var(--ez2)}
.q3:hover{transform:translateY(-6px);
  box-shadow:0 2px 4px rgba(27,51,88,.06),0 18px 40px rgba(27,51,88,.12),
             0 40px 66px -26px rgba(27,51,88,.22)}
.q3-n{position:absolute;top:16px;right:18px;font-family:var(--mono);
  font-size:11px;font-weight:700;letter-spacing:.06em;color:rgba(27,51,88,.24)}

/* 입체 아이콘 타일 — 아랫면 두께 + 상단 광택 */
.q3-ico{position:relative;width:64px;height:64px;margin-bottom:16px;
  border-radius:21px;display:grid;place-items:center;
  background:linear-gradient(155deg,#FFE7DC 0%,#FFF4EC 52%,#FFE0D2 100%);
  box-shadow:0 6px 0 #F0C4B2, 0 10px 18px rgba(200,90,50,.26),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 6px rgba(214,60,33,.10);
  transition:transform .3s var(--ez2),box-shadow .3s var(--ez2)}
.q3-ico i{font-style:normal;font-size:29px;line-height:1;
  filter:drop-shadow(0 2px 2px rgba(120,50,25,.28))}
.q3:hover .q3-ico{transform:translateY(-3px) rotate(-5deg);
  box-shadow:0 9px 0 #F0C4B2, 0 16px 24px rgba(200,90,50,.3),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 6px rgba(214,60,33,.10)}
/* 짝수 카드는 페리윙클 톤으로 교차 */
.q3:nth-child(even) .q3-ico{
  background:linear-gradient(155deg,#E2E6FA 0%,#F3F5FE 52%,#DDE2F8 100%);
  box-shadow:0 6px 0 #C0C7EC, 0 10px 18px rgba(60,75,170,.24),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 6px rgba(60,75,170,.10)}
.q3:nth-child(even):hover .q3-ico{
  box-shadow:0 9px 0 #C0C7EC, 0 16px 24px rgba(60,75,170,.28),
             inset 0 2px 0 rgba(255,255,255,.95),
             inset 0 -3px 6px rgba(60,75,170,.10)}

.q3-q{margin:0 0 9px;font-size:15.6px;font-weight:800;letter-spacing:-.05em;
  line-height:1.38;color:var(--ink)}
.q3-a{margin:0;font-size:13.4px;line-height:1.76;color:var(--tx-2)}
.q3-a b{color:var(--coral-dp);font-weight:700}
.q3:nth-child(even) .q3-a b{color:var(--peri)}
@media (prefers-reduced-motion:reduce){.q3,.q3-ico{transition:none}}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ③ 카카오톡 3D 말풍선 (.k3d) — 하단 상담 CTA 상단
   SVG 그라디언트로 입체감, perspective + rotate3d 로 떠 있는 움직임
   ══════════════════════════════════════════════════════════════ */
/* 카페 검증 섹션 하단 필수 안내 — 개별 카드에서 뺀 문장을 한 줄로 모았습니다 */
.zig-cap{margin-top:16px;padding-top:13px;border-top:1px dashed rgba(27,51,88,.16);
  font-size:11.6px;line-height:1.7;color:var(--tx-3)}

/* 하단 CTA 밴드는 높이를 줄여 둔 상태라, 아이콘은 밴드가 다시 커지지 않는 크기로 잡습니다 */
.k3d{width:clamp(84px,9vw,120px);margin:-8px auto clamp(6px,1vw,12px);
  perspective:820px;pointer-events:none}
.k3d svg{display:block;width:100%;height:auto;overflow:visible;
  transform-origin:50% 64%;animation:k3dFloat 4s ease-in-out infinite;
  filter:drop-shadow(0 12px 20px rgba(96,26,10,.30))}
.k3d .k3d-sh{fill:#8A2A12;opacity:.26;animation:k3dShadow 4s ease-in-out infinite}
@keyframes k3dFloat{
  0%,100%{transform:translateY(0) rotate3d(1,1,0,-11deg) rotate(-8deg)}
  50%{transform:translateY(-13px) rotate3d(1,1,0,11deg) rotate(5deg)}}
@keyframes k3dShadow{
  0%,100%{transform:scale(1);opacity:.26}
  50%{transform:scale(.8);opacity:.14}}
@media (prefers-reduced-motion:reduce){
  .k3d svg,.k3d .k3d-sh{animation:none}
  .k3d svg{transform:rotate(-6deg)}
  .k3d .k3d-sh{opacity:.2}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — ② 「조건이 다르면 비교가 안 됩니다」 인포그래픽 (.fivex)
   다섯 칸의 경계가 어긋난 모습 ↔ 딱 맞아떨어진 모습
   ══════════════════════════════════════════════════════════════ */
.fivex{display:grid;gap:16px}
@media (min-width:960px){.fivex{grid-template-columns:1fr 1fr;gap:20px}}
.fx-col{position:relative;overflow:hidden;background:#fff;
  border:1px solid var(--hair);border-radius:var(--r-2xl);
  padding:clamp(22px,2.6vw,32px)}
.fx-col.bad{background:linear-gradient(170deg,#FFF1ED,#FFFBFA 60%);border-color:rgba(240,86,58,.22)}
.fx-col.good{background:linear-gradient(170deg,#EFF9F3,#FBFEFC 60%);border-color:rgba(44,122,92,.22)}
.fx-col::before{content:"";position:absolute;left:0;right:0;top:0;height:5px}
.fx-col.bad::before{background:linear-gradient(90deg,var(--coral),#F5803F)}
.fx-col.good::before{background:linear-gradient(90deg,#2C7A5C,#5BB98E)}

.fx-h{display:flex;align-items:center;gap:13px;margin-bottom:20px}
.fx-h .mk{width:40px;height:40px;border-radius:14px;flex:none;display:grid;place-items:center;
  color:#fff;font-size:19px;font-weight:800;line-height:1}
.fx-col.bad .mk{background:linear-gradient(150deg,#F5674C,#D63C21);
  box-shadow:0 5px 0 #B93018,0 9px 16px rgba(190,50,25,.28)}
.fx-col.good .mk{background:linear-gradient(150deg,#41946F,#22664B);
  box-shadow:0 5px 0 #1B5540,0 9px 16px rgba(30,90,65,.26)}
.fx-h b{display:block;font-size:clamp(17px,1.5vw,20.5px);letter-spacing:-.05em;
  color:var(--ink);line-height:1.3}
.fx-h span{display:block;margin-top:3px;font-size:12.8px;color:var(--tx-3);letter-spacing:-.02em}

.fx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:16px}
.fx-legend span{display:inline-flex;align-items:center;gap:6px;
  font-size:12.4px;font-weight:700;color:var(--tx-2);letter-spacing:-.03em}
.fx-legend i{width:11px;height:11px;border-radius:4px;flex:none}
.fx-legend .k1{background:#5C6CC4}.fx-legend .k2{background:#F5803F}
.fx-legend .k3{background:#F0563A}.fx-legend .k4{background:#2C7A5C}
.fx-legend .k5{background:#1B3358}

.fx-plot{position:relative}
.fx-row{display:grid;grid-template-columns:26px minmax(0,1fr);gap:10px;align-items:center}
.fx-row + .fx-row{margin-top:11px}
.fx-row .fx-n{font-family:var(--mono);font-size:13px;font-weight:700;
  color:var(--tx-3);text-align:center}
.fx-bar{display:flex;height:clamp(46px,5vw,56px);border-radius:13px;overflow:hidden;
  background:#fff;box-shadow:inset 0 0 0 1px var(--hair),0 4px 12px rgba(27,51,88,.07)}
.fx-bar i{height:100%;position:relative;min-width:0;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  font-style:normal;font-size:clamp(12px,1.15vw,15px);font-weight:800;color:#fff;
  letter-spacing:-.05em;white-space:nowrap;padding:0 2px;
  text-shadow:0 1px 2px rgba(0,0,0,.18);flex-grow:var(--f1);flex-basis:0}
.fx-bar i + i{box-shadow:inset 1.5px 0 0 rgba(255,255,255,.95)}
.fx-bar .k1{background:linear-gradient(180deg,#6D7CD0,#4F5FBA)}
.fx-bar .k2{background:linear-gradient(180deg,#F98F4E,#EE7130)}
.fx-bar .k3{background:linear-gradient(180deg,#F5674C,#E1472B)}
.fx-bar .k4{background:linear-gradient(180deg,#39886A,#256B50)}
.fx-bar .k5{background:linear-gradient(180deg,#28456E,#152C4C)}

/* 정렬선 — 같은 위치에 그어 두고, 왼쪽은 벗어나고 오른쪽은 올라탑니다 */
.fx-guide{position:absolute;left:36px;right:0;top:-2px;bottom:-2px;pointer-events:none;z-index:2}
.fx-guide i{position:absolute;top:0;bottom:0;width:0;border-left:2px dashed;
  transform:scaleY(.25);transform-origin:top;opacity:0;
  transition:transform .5s var(--ez2),opacity .4s}
.fx-col.bad .fx-guide i{border-color:rgba(214,60,33,.5)}
.fx-col.good .fx-guide i{border-color:rgba(30,110,80,.62)}
.fx-col.in .fx-guide i{transform:scaleY(1);opacity:1;transition-delay:1.15s}

/* 맞추는 과정 — 오른쪽 막대는 어긋난 폭에서 시작해 제자리로 모입니다 */
.fx-col.good .fx-bar i{flex-grow:var(--f0);
  transition:flex-grow 1s cubic-bezier(.18,.86,.28,1)}
.fx-col.good.in .fx-bar i{flex-grow:var(--f1)}
.fx-col.good.in .fx-row:nth-child(2) .fx-bar i{transition-delay:.10s}
.fx-col.good.in .fx-row:nth-child(3) .fx-bar i{transition-delay:.20s}
.fx-col.good.in .fx-row:nth-child(4) .fx-bar i{transition-delay:.30s}

.fx-verdict{margin:20px 0 0;display:inline-flex;align-items:center;gap:8px;
  padding:11px 20px;border-radius:999px;font-size:clamp(14.5px,1.3vw,17px);
  font-weight:800;letter-spacing:-.05em;line-height:1;
  opacity:0;transform:translateY(8px) scale(.94);
  transition:opacity .45s,transform .45s var(--ez2)}
.fx-col.in .fx-verdict{opacity:1;transform:none;transition-delay:1.4s}
.fx-col.bad .fx-verdict{background:#FFE2DB;color:var(--coral-dp)}
.fx-col.good .fx-verdict{background:#D8F0E4;color:#1B5540}
.fx-col.bad .fx-verdict::before{content:"✕";font-size:.9em}
.fx-col.good .fx-verdict::before{content:"✓";font-size:.9em}

.fx-note{margin-top:16px;padding-top:15px;border-top:1px solid var(--hair);
  font-size:clamp(13.2px,1.15vw,14.6px);line-height:1.75;color:var(--tx-2)}
.fx-note b{font-weight:700}
.fx-col.bad .fx-note b{color:var(--coral-dp)}
.fx-col.good .fx-note b{color:#25674E}

@media (max-width:520px){
  .fx-row{grid-template-columns:20px minmax(0,1fr);gap:8px}
  .fx-guide{left:28px}
  .fx-bar i{font-size:11.4px;letter-spacing:-.07em}
}
@media (prefers-reduced-motion:reduce){
  .fx-col.good .fx-bar i{flex-grow:var(--f1);transition:none}
  .fx-guide i,.fx-verdict{transition:none;opacity:1;transform:none}
}

/* 한글 줄바꿈 — 어절 중간에서 끊지 않습니다 */
.lead,.answer,.chunk p,.chunk-ask p,.rel span,.rel b,.card p,.card h3,
.wk-c ul li,.wk-tip,.wk-c h3,.q3-a,.q3-q,.fx-note,.fx-h span,
.wfig figcaption,.kkp-bub,.s3-k{word-break:keep-all}

/* ── 한글 라벨은 본문 서체로 통일 ────────────────────────────────
   숫자·영문에 쓰던 mono + 넓은 자간을 한글에 그대로 쓰면
   글자가 벌어지고 서체도 달라 보입니다. 한글이 들어가는 라벨만 되돌립니다.
   (.f-col h3 = GUIDE/CONTACT, .card .n / .ci / .fx-n = 숫자·영문이라 유지) */
.art-nav .d,
.aisim-lb,
.dx-num,
.dx-res-h .rl,
.dx-copybox .cl,
.names dt,
.card .q,
.card .q b,
.ncard .nmeta,
.nl-top time,.nl-min,
.factsheet .fh,
.ph-spec{
  font-family:var(--ff);
  letter-spacing:-.02em}
.factsheet .fh{font-size:12.2px;font-weight:700}
.art-nav .d{font-size:12.4px;font-weight:700}
.aisim-lb,.dx-num,.dx-copybox .cl{font-size:12.4px;font-weight:700}
.dx-res-h .rl{font-size:12.4px;font-weight:700}
.ncard .nmeta,.nl-top time,.nl-min{font-size:12.6px}
.names dt{font-size:12.2px;font-weight:700}
/* 주석·안내문은 줄이 촘촘하면 읽기 어렵습니다. 줄간격을 넉넉히. */
.info-cap{line-height:1.95;word-break:keep-all;letter-spacing:-.015em}
.wk-c ul li,.wk-tip{word-break:keep-all}

/* ══════════════════════════════════════════════════════════════
   v4.1 — 입체 아이콘 공통 (글리프 + 모션)  ※ 파일 끝쪽에 둘 것
   아이콘 문자는 전부 HTML 의 <i> 안에 있습니다. CSS content 로 넣으면
   환경에 따라 폰트 대체에 걸려 빈 칸으로 보입니다.
   ══════════════════════════════════════════════════════════════ */
.q3-ico i,.wk-ico i,.dfx-ico i,.s3-ico i,#facts .ci i,#std8 .ci i{
  font-style:normal;line-height:1;color:initial;
  font-family:'Apple Color Emoji','Segoe UI Emoji','Noto Color Emoji',
              'Segoe UI Symbol',sans-serif}
#facts .chunk-h .ci i{font-size:clamp(24px,2.5vw,29px);
  filter:drop-shadow(0 3px 3px rgba(10,20,44,.32))}

/* 살아 있는 느낌 — 타일마다 박자를 달리해 떠 있게 합니다 */
@keyframes icoFloat{
  0%,100%{transform:translateY(0) rotate(-2.5deg)}
  50%{transform:translateY(-7px) rotate(2.5deg)}}
@media (prefers-reduced-motion:no-preference){
  .q3-ico,.wk-ico,.dfx-ico,#facts .chunk-h .ci,#std8 .chunk-h .ci{
    animation:icoFloat 3.6s ease-in-out infinite;will-change:transform}
  .q3:nth-child(2n) .q3-ico,
  .wk-c:nth-child(2n) .wk-ico,
  .dfx-c:nth-child(2n) .dfx-ico{animation-delay:.45s}
  .q3:nth-child(3n) .q3-ico,
  .wk-c:nth-child(3n) .wk-ico{animation-delay:.9s}
  .q3:nth-child(4n) .q3-ico,
  .wk-c:nth-child(4n) .wk-ico{animation-delay:1.35s}
  #facts .chunk:nth-of-type(2) .ci{animation-delay:.5s}
  #facts .chunk:nth-of-type(3) .ci{animation-delay:1s}
  #std8 article:nth-of-type(2n) .ci{animation-delay:.5s}
  #std8 article:nth-of-type(3n) .ci{animation-delay:1s}
  /* 카드에 마우스를 올리면 잠깐 멈추고 살짝 튀어오릅니다 */
  .q3:hover .q3-ico,.wk-c:hover .wk-ico,.dfx-c:hover .dfx-ico{
    animation-play-state:paused}
}
@media (prefers-reduced-motion:reduce){
  .q3-ico,.wk-ico,.dfx-ico,#facts .chunk-h .ci,#std8 .chunk-h .ci{animation:none}
}

/* ══════════════════════════════════════════════════════════════
   v4.1 — 모바일 가독성 하한선  ※ 반드시 파일 맨 끝에 둘 것
   clamp() 의 최솟값이 좁은 화면에서 그대로 쓰이므로, 폰에서 작아지는
   본문·캡션·목록 글씨에 바닥을 깔아 둡니다. 위쪽에 두면 뒤 규칙에 밀립니다.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .lead{font-size:15.8px;line-height:1.72}
  .chunk p{font-size:15.6px;line-height:1.78}
  .chunk-h b{font-size:18px}
  .chunk-ask p{font-size:15px}
  .chunk-q,.chunk-src{font-size:13.4px}
  .wfig figcaption{font-size:14.6px;padding:16px 18px 18px}
  .wfig figcaption b{font-size:13.8px}
  .rel b{font-size:17.2px}
  .rel span{font-size:14.2px}
  .rel::before{font-size:13.4px}
  .card h3{font-size:18px}
  .card p{font-size:14.8px}
  .info-cap{font-size:13.2px;text-align:left}
  .wk-c h3{font-size:17.6px}
  .wk-c ul li{font-size:14.2px}
  .wk-tip{font-size:13.4px}
  .wk-badge{font-size:12.4px}
  .q3-q{font-size:16.8px}
  .q3-a{font-size:14.6px}
  .fx-h b{font-size:18px}
  .fx-h span{font-size:13.4px}
  .fx-legend span{font-size:12.8px}
  .fx-note{font-size:14px}
  .fx-bar i{font-size:12px}
  .s3-k{font-size:18.5px}
  .s3-w{font-size:12.8px}
  .kkp-bub{font-size:12.6px}
}

/* ══════════════════════════════════════════════════════════════
   v4.2 — 모바일 최적화  ※ 반드시 파일 맨 끝
   한 손으로, 스크롤을 덜 하고, 눌러야 할 것이 크게 보이도록.
   ══════════════════════════════════════════════════════════════ */
@media (max-width:700px){
  /* 섹션 여백 — 폰에서는 132px 여백이 스크롤만 늘립니다 */
  :root{--pad:clamp(46px,11vw,60px);--wave:22px}

  /* 한글은 단어 중간에서 끊기면 읽기 어렵습니다 */
  h1,h2,h3,p,li,dt,dd,summary,figcaption{word-break:keep-all}

  /* 상단 고정 영역을 줄여 첫 화면을 넓게 */
  .notice{font-size:11.4px;line-height:1.5;padding:8px 16px}
  .gnb{height:60px}

  /* 누를 것은 크게, 손가락 하나로 */
  .acts{flex-direction:column;align-items:stretch;gap:9px}
  .acts .btn{width:100%;justify-content:center;min-height:56px;font-size:16px}
  .dx-copy{flex-direction:column;align-items:stretch}
  .dx-copy .btn{width:100%;justify-content:center;min-height:54px}
  .kk-acts .btn{flex:1 1 100%;justify-content:center;min-height:52px}
  .btn{padding-inline:20px}

  /* 카드 안쪽 여백을 줄여 한 화면에 더 담기게 */
  .card{padding:20px}
  .chunk{padding:20px 18px}
  .q3{padding:22px 18px 20px}
  .dfx-c{padding:22px 18px}
  .wk-c{padding:20px 16px 18px}

  /* 문답 카드 — 남색 띠가 화면을 덜 먹도록 */
  #facts .chunk-h{padding:18px 18px 8px;gap:11px}
  #facts .chunk-h .ci{width:46px;height:46px;border-radius:15px}
  #facts .chunk-h .ci i{font-size:22px}
  #facts .chunk-q{padding:0 18px 16px 18px}
  #facts .chunk > p{padding-left:18px;padding-right:18px}
  #facts .chunk-ask{margin:0 18px 18px}

  /* 등록증은 나란히 두면 글씨가 안 보입니다. 한 장씩 크게. */
  .scan-row{grid-template-columns:1fr;display:grid;gap:12px}

  /* 하단 고정 버튼이 마지막 문단을 가리지 않도록 */
  .float-cta{left:14px;right:14px;justify-content:center;min-height:56px;font-size:15px}

  /* ── 푸터 압축 ── */
  /* 위 여백을 줄이고, 아래는 고정 카톡 버튼에 가리지 않게 띄웁니다 */
  footer{padding-block:34px 92px}
  .f-top{gap:18px 14px;padding-bottom:18px;
    grid-template-columns:repeat(2,minmax(0,1fr))}
  .f-brand{grid-column:1/-1}
  .f-brand strong{font-size:16px}
  .f-brand p{display:none}          /* 같은 소개문이 본문 위쪽에 이미 있습니다 */
  .f-oper{margin-top:12px;padding-top:0}
  .f-col h3{font-size:11px;letter-spacing:-.02em;margin-bottom:2px;
    color:rgba(255,255,255,.62);font-weight:700}
  .f-col a{min-height:38px;font-size:13.2px;line-height:1.35}
  .f-col li.plain{font-size:11.8px;padding:6px 0;line-height:1.5}
  .biz{margin-top:16px;font-size:11.4px;line-height:1.78}
  .biz b{font-size:12.4px;margin-bottom:4px}
  .legal{margin-top:14px;font-size:11px;line-height:1.72}
  .legal .req{padding:14px;border-radius:14px}
  .req-fold{margin-top:10px;padding-top:8px}
  .req-body{font-size:10.8px;line-height:1.8}

  /* 푸터 위 동일주체 안내도 한 번에 읽히게 */
  .entity{padding:18px 0}
  .entity p{font-size:12.8px;line-height:1.75}
  .entity .ents span{font-size:11px}
}

/* 아주 좁은 화면에서도 두 칸을 유지합니다.
   한 칸으로 세우면 링크 10개가 그대로 세로로 쌓여 오히려 길어집니다. */
@media (max-width:400px){
  .f-top{gap:16px 10px}
  .f-col a{font-size:12.6px;min-height:36px}
}