/* 제목용 리디바탕 — 굵기가 하나뿐이라 모든 굵기를 이 파일 하나로 받아서 가짜 볼드가 생기지 않게 한다 */
@font-face{ font-family:'RIDIBatang'; font-weight:100 900; font-display:swap;
  src:url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_twelve@1.0/RIDIBatang.woff') format('woff'); }
/* =====================================================================
   LOVETAIN — 디자인 토큰 (러브테인_디자인 지침 / lovetain-tokens.css 기준)
   ===================================================================== */
:root{
  --surface-100:#fffdfc; --surface-200:#faf7f9; --surface-300:#efebf1; --surface-paper:#fff8ee;
  --ink:#1e1822; --ink-muted:#4a4152; --ink-faint:#6b6274;
  --line:#e8e2ec; --line-gold:#dac9a0;
  --gold:#96762c; --gold-text:#7f6320; --gold-tint:#f0e8d6;
  --wine:#8a2433; --wine-deep:#6a1a26; --wine-tint:#f5e3e3;
  --crest-ivory:#f0e2c8;
  --btn-bg:#8a2433; --btn-bg-hover:#6a1a26; --btn-fg:#f0e2c8;

  /* 위·아래를 잡아주는 어두운 구간 — 두 테마 모두 같은 값 (컬러웨이 4 · 라이트 골드/다크) */
  --night:#140e11; --night-2:#1b1317; --night-3:#271b20; --night-line:#3a2a2e;
  --night-ink:#fff8ee; --night-muted:#ded7e2; --night-faint:#b9b0c2;
  --night-gold:#d8b86a; --night-gold-text:#e4cb92; --night-gold-line:#5c4e2e;

  --serif:"RIDIBatang","AppleMyungjo","Batang",serif;   /* 제목·인용 : 리디바탕 */
  --en:"Cormorant Garamond","Times New Roman",serif;      /* 영어 포인트 */
  --sans:"IBM Plex Sans KR",system-ui,-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --r:3px;
  --maxw:1000px;
  --gutter:22px;
  --hd-h:64px;
  color-scheme:light;
}
:root[data-theme="dark"]{
  --surface-100:#140e11; --surface-200:#1b1317; --surface-300:#271b20; --surface-paper:#221a16;
  --ink:#fbf3e8; --ink-muted:#e0d5d2; --ink-faint:#b8aaa8;
  --line:#3a2a2e; --line-gold:#5c4a2c;
  --gold:#d8b86a; --gold-text:#e4cb92; --gold-tint:#33281c;
  --wine:#e59a8c; --wine-deep:#c97b6c; --wine-tint:#3a1f22;
  --btn-bg:#8a2433; --btn-bg-hover:#a32d3f; --btn-fg:#fbf3e8;
  color-scheme:dark;
}

/* ---------- base ---------- */
*,*::before,*::after{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:calc(var(--hd-h) + 12px); -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--surface-100); color:var(--ink);
  font-family:var(--sans); font-size:12.5px; line-height:1.65; font-weight:400;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  word-break:keep-all; overflow-wrap:break-word; line-break:strict;
}
img,svg{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
h1,h2,h3,h4,p,ul,ol,figure,blockquote{ margin:0; }
ul{ padding:0; list-style:none; }
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.nw{ white-space:nowrap; }
.br-d{ display:none; }
@media (min-width:720px){ .br-d{ display:inline; } }
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
.skip{ position:absolute; left:12px; top:-60px; z-index:100; background:var(--ink); color:var(--surface-100); padding:10px 14px; border-radius:var(--r); }
.skip:focus{ top:12px; }
:focus-visible{ outline:2px solid var(--wine); outline-offset:3px; }
.night :focus-visible{ outline-color:var(--night-gold); }

/* ---------- type ---------- */
.label{
  font-family:var(--en); font-size:12.5px; font-weight:600; letter-spacing:.2em;
  text-transform:uppercase; color:var(--gold-text);
}
.h2{
  font-family:var(--serif); font-weight:700; letter-spacing:-.02em;
  font-size:clamp(21.5px,2.82vw,31.5px); line-height:1.42; color:var(--ink); text-wrap:balance;
}
.sub{ font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
.sh{ margin-bottom:44px; }
.sh .h2{ margin-top:12px; }
.sh .sub{ margin-top:14px; max-width:36em; }
.sh.center{ text-align:center; }
.sh.center .sub{ margin-inline:auto; }
.sh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:20px; }
.more{ font-size:12px; color:var(--ink-faint); display:inline-flex; align-items:center; gap:6px; white-space:nowrap; padding:6px 0; }
.more:hover{ color:var(--wine); }
.more svg{ width:16px; height:16px; }

section{ position:relative; }
.sec{ padding:64px 0; }
.bg-2{ background:var(--surface-200); }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:0 28px; border-radius:var(--r); border:1px solid transparent;
  font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.04em; line-height:1;
  cursor:pointer; transition:background-color .2s, color .2s, border-color .2s, transform .2s;
  white-space:nowrap;
}
.btn svg{ width:17px; height:17px; transition:transform .2s; }
.btn:hover svg{ transform:translateX(3px); }
.btn-primary{ background:var(--btn-bg); color:var(--btn-fg); }
.btn-primary:hover{ background:var(--btn-bg-hover); }
.btn-line{ border-color:var(--line); color:var(--ink); background:transparent; }
.btn-line:hover{ border-color:var(--ink); }
.btn-sm{ min-height:40px; padding:0 18px; font-size:12px; }
/* 어두운 구간 버튼 */
.night .btn-primary{ background:#8a2433; color:#f0e2c8; border-color:rgba(216,184,106,.28); }
.night .btn-primary:hover{ background:#a32d3f; }
.night .btn-ghost{ border-color:rgba(240,226,200,.32); color:var(--night-ink); background:transparent; }
.night .btn-ghost:hover{ border-color:var(--night-gold); color:var(--night-gold-text); }
.btn-gold{ background:var(--night-gold); color:var(--night); }
.btn-gold:hover{ background:#e6c97f; }

/* ---------- announcement ---------- */
.announce{ background:#8a2433; color:#f0e2c8; font-size:12px; letter-spacing:.01em; }
.announce .wrap{ display:flex; align-items:center; justify-content:center; gap:10px; min-height:40px; position:relative; padding-right:48px; }
.announce a{ display:inline-flex; align-items:center; gap:8px; }
.announce a b{ font-weight:600; }
.announce a span{ opacity:.82; }
.announce a:hover span{ opacity:1; text-decoration:underline; text-underline-offset:3px; }
.announce-x{ position:absolute; right:10px; top:50%; transform:translateY(-50%); width:36px; height:36px;
  display:grid; place-items:center; background:none; border:0; color:#f0e2c8; opacity:.7; cursor:pointer; }
.announce-x:hover{ opacity:1; }
.announce-x svg{ width:14px; height:14px; }
@media (max-width:719px){ .announce a span{ display:none; } }

/* ---------- header ---------- */
.hd{
  position:sticky; top:0; z-index:50;
  background:color-mix(in srgb, var(--surface-100) 92%, transparent);
  -webkit-backdrop-filter:saturate(1.3) blur(12px); backdrop-filter:saturate(1.3) blur(12px);
  border-bottom:1px solid var(--line-gold);   /* 페이지의 유일한 금색 괘선 */
}
.hd-in{ height:var(--hd-h); display:flex; align-items:center; justify-content:space-between; gap:20px; }
.logo{ display:inline-flex; align-items:center; gap:11px; color:var(--gold); min-height:44px; }
.logo svg{ width:26px; height:auto; }
.logo b{ font-family:var(--sans); font-weight:500; font-size:12px; letter-spacing:.28em; color:var(--gold-text); padding-left:.28em; }
.nav{ display:none; gap:clamp(18px, 2.2vw, 34px); }
.nav a{ position:relative; font-size:12.5px; color:var(--ink-muted); padding:22px 0; transition:color .2s; }
.nav a::after{ content:""; position:absolute; left:0; right:0; bottom:14px; height:1.5px; background:var(--wine);
  transform:scaleX(0); transform-origin:center; transition:transform .25s; }
.nav a:hover, .nav a.is-active{ color:var(--ink); }
.nav a.is-active::after{ transform:scaleX(1); }
.hd-act{ display:flex; align-items:center; gap:8px; }
.theme-btn{ background:none; border:1px solid var(--line); border-radius:var(--r); height:40px; padding:0 13px;
  font-size:12px; color:var(--ink-faint); cursor:pointer; display:inline-flex; align-items:center; gap:7px; transition:.2s; }
.theme-btn:hover{ color:var(--ink); border-color:var(--ink-faint); }
.theme-btn svg{ width:15px; height:15px; }
.hd-cta{ display:none; }
.hamb{ width:44px; height:44px; display:grid; place-items:center; background:none; border:0; cursor:pointer; margin-right:-10px; }
.hamb i{ display:block; width:20px; height:1.5px; background:var(--ink); position:relative; transition:background .2s; }
.hamb i::before,.hamb i::after{ content:""; position:absolute; left:0; width:20px; height:1.5px; background:var(--ink); transition:transform .25s; }
.hamb i::before{ top:-6px; } .hamb i::after{ top:6px; }
.hamb[aria-expanded="true"] i{ background:transparent; }
.hamb[aria-expanded="true"] i::before{ transform:translateY(6px) rotate(45deg); }
.hamb[aria-expanded="true"] i::after{ transform:translateY(-6px) rotate(-45deg); }
.mnav{ border-top:1px solid var(--line); background:var(--surface-100); }
.mnav[hidden]{ display:none; }
.mnav .wrap{ padding-block:10px 22px; }
.mnav a.ml{ display:flex; justify-content:space-between; align-items:center; padding:16px 2px; border-bottom:1px solid var(--line);
  font-family:var(--serif); font-size:14.5px; }
.mnav a.ml small{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; color:var(--gold-text); }
.mnav .btn{ width:100%; margin-top:18px; }
@media (max-width:719px){ .theme-btn span{ display:none; } .theme-btn{ width:40px; padding:0; justify-content:center; } }
@media (min-width:1024px){
  .nav{ display:flex; } .hd-cta{ display:inline-flex; } .hamb{ display:none; } .mnav{ display:none !important; }
}

/* ---------- hero ---------- */
.night{ background:var(--night); color:var(--night-ink); }
.night .label{ color:var(--night-gold-text); }
.hero{ overflow:hidden; isolation:isolate; }
/* 첫 화면 그림 : 왕관을 쓴 여왕. 휴대폰은 그림 위에 글자, 데스크톱은 그림을 오른쪽에 크게 */
.hero-bg{ position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    linear-gradient(0deg, var(--night) 6%, rgba(20,14,17,.80) 42%, rgba(20,14,17,.50) 100%),
    url('images/S3_여왕.webp') center top / cover no-repeat,
    var(--night); }
@media (min-width:1024px){
  .hero-bg{ background:
    linear-gradient(90deg, var(--night) 0%, rgba(20,14,17,.96) 34%, rgba(20,14,17,.55) 54%, rgba(20,14,17,0) 78%),
    linear-gradient(0deg, var(--night) 0%, rgba(20,14,17,0) 20%),
    url('images/S3_여왕.webp') right 6% center / auto 115% no-repeat,
    var(--night); }
}
.hero-bg::after{ display:none; }
.hero-bg::after{ content:""; position:absolute; inset:0;
  background:
    repeating-linear-gradient(45deg, rgba(216,184,106,.045) 0 1px, transparent 1px 22px),
    repeating-linear-gradient(-45deg, rgba(216,184,106,.045) 0 1px, transparent 1px 22px);
  -webkit-mask-image:radial-gradient(80% 80% at 70% 40%, #000 20%, transparent 85%);
          mask-image:radial-gradient(80% 80% at 70% 40%, #000 20%, transparent 85%); }
.hero-grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:0; min-height:620px; padding-block:76px 92px; position:relative; }
.slides{ display:grid; }
.slide{ grid-area:1/1; opacity:0; visibility:hidden; transition:opacity .9s ease, visibility .9s; }
.slide.is-active{ opacity:1; visibility:visible; }
.slide > *{ transform:translateY(14px); transition:transform 1s cubic-bezier(.2,.7,.2,1); }
.slide.is-active > *{ transform:none; }
.slide.is-active > *:nth-child(2){ transition-delay:.06s; }
.slide.is-active > *:nth-child(3){ transition-delay:.12s; }
.slide.is-active > *:nth-child(4){ transition-delay:.18s; }
.hero h1{
  font-family:var(--serif); font-weight:700; color:var(--night-ink);
  font-size:clamp(28px,4.64vw,51.5px); line-height:1.3; letter-spacing:-.025em;
  margin-top:18px; text-wrap:balance;
}
.hero h1 em{ font-style:normal; color:var(--night-gold-text); }
.hero h1.long{ font-size:clamp(25px,3.81vw,43px); }
.hero .lead{ margin-top:22px; font-size:13.5px; line-height:1.7; color:var(--night-muted); max-width:30em; }
.hero .btns{ display:flex; flex-wrap:wrap; gap:12px; margin-top:36px; }
@media (max-width:719px){ .hero .btns .btn, .final .btns .btn{ flex:1 1 100%; } }
.hero-ctrl{ display:flex; align-items:center; gap:18px; margin-top:52px; }
.dots{ display:flex; gap:6px; }
.dot{ width:44px; height:28px; padding:0; border:0; background:none; cursor:pointer; display:grid; align-items:center; }
.dot i{ display:block; height:2px; background:rgba(240,226,200,.22); overflow:hidden; position:relative; }
.dot i::after{ content:""; position:absolute; inset:0; background:var(--night-gold); transform:scaleX(0); transform-origin:left; }
.dot.is-active i::after{ animation:fill var(--dur,7s) linear forwards; }
.hero.is-paused .dot.is-active i::after{ animation-play-state:paused; }
@keyframes fill{ to{ transform:scaleX(1); } }
.count{ font-size:12px; letter-spacing:.14em; color:var(--night-faint); font-variant-numeric:tabular-nums; }
.count b{ color:var(--night-ink); font-weight:500; }

.seal{ position:absolute; right:-200px; top:60%; width:420px; transform:translateY(-50%); opacity:.15; z-index:-1; color:var(--night-gold); }
.seal .ring-text{ fill:var(--night-gold-text); font-family:var(--sans); font-size:12px; font-weight:500; letter-spacing:.2em; }
.seal-spin{ transform-origin:0 0; animation:spin 90s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
.scroll-cue{ position:absolute; left:50%; bottom:24px; transform:translateX(-50%); display:none; flex-direction:column; align-items:center; gap:8px;
  font-size:10.5px; letter-spacing:.24em; color:var(--night-faint); }
.scroll-cue i{ width:1px; height:34px; background:linear-gradient(var(--night-gold), transparent); animation:cue 2.2s ease-in-out infinite; transform-origin:top; }
@keyframes cue{ 0%{ transform:scaleY(0); } 50%{ transform:scaleY(1); } 100%{ transform:scaleY(1); opacity:0; } }

@media (min-width:1024px){
  .hero-grid{ grid-template-columns:1.12fr .88fr; gap:40px; min-height:calc(100vh - var(--hd-h) - 40px); max-height:880px; min-height:min(calc(100vh - var(--hd-h) - 40px), 880px); padding-block:72px; }
  .hero-grid{ min-height:680px; }
  .seal{ position:relative; right:auto; top:auto; transform:none; width:100%; max-width:470px; justify-self:end; opacity:1; z-index:auto; }
  .seal::before{ content:""; position:absolute; inset:12%; border-radius:50%; background:radial-gradient(closest-side, rgba(216,184,106,.14), transparent); z-index:-1; }
  .scroll-cue{ display:flex; }
}

/* ---------- trust strip ---------- */
.trust{ border-bottom:1px solid var(--line); background:var(--surface-100); }
.trust ul{ display:grid; grid-template-columns:repeat(3,1fr); }
.trust li{ padding:26px 8px; text-align:center; }
.trust li + li{ border-left:1px solid var(--line); }
.trust strong{ display:block; font-family:var(--serif); font-weight:700; font-size:clamp(16.5px,2.15vw,23px); color:var(--ink); letter-spacing:-.01em; line-height:1.3; }
.trust span{ display:block; margin-top:6px; font-size:12px; color:var(--ink-faint); line-height:1.5; }

/* ---------- manifesto ---------- */
.manifesto{ text-align:center; }
.manifesto .tag{ font-family:var(--serif); font-size:clamp(13.5px,1.49vw,15.5px); color:var(--gold-text); margin-top:18px; }
.verse{ margin:40px auto 0; max-width:34em; font-family:var(--serif); font-size:clamp(13.5px,1.41vw,15px); line-height:1.95; color:var(--ink-faint); }
.verse p + p{ margin-top:22px; }
.verse strong{ color:var(--ink); font-weight:700; }
.verse .hl{ box-shadow:inset 0 -.45em 0 var(--wine-tint); color:var(--ink); }

/* ---------- symptoms ---------- */
.sym-grid{ display:grid; gap:12px; }
.sym{ display:grid; align-content:start; grid-template-columns:auto 1fr; gap:18px; align-items:start; padding:24px 22px;
  border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); transition:border-color .25s; }
.sym:hover{ border-color:var(--line-gold); }
.sym .ic{ width:46px; height:46px; border-radius:50%; display:grid; place-items:center; background:var(--wine-tint); color:var(--wine); }
.sym .ic svg{ width:22px; height:22px; }
.sym .no{ font-size:11px; letter-spacing:.16em; color:var(--gold-text); font-weight:600; }
.sym p{ font-family:var(--serif); font-size:14.5px; line-height:1.65; color:var(--ink); margin-top:4px; }
.sym-foot{ margin-top:28px; display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:14px 24px;
  padding:22px 24px; background:var(--gold-tint); border-radius:var(--r); }
.sym-foot p{ font-family:var(--serif); font-size:14.5px; color:var(--ink); }
.sym-foot p b{ color:var(--wine); }
.sym-foot a{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--wine); min-height:44px; }
.sym-foot a svg{ width:16px; height:16px; transition:transform .2s; }
.sym-foot a:hover svg{ transform:translateX(3px); }
@media (min-width:720px){ .sym-grid{ grid-template-columns:1fr 1fr; gap:16px; } .sym{ padding:30px 28px; } }

/* ---------- mechanism ---------- */
.mech{ display:grid; gap:48px; align-items:center; }
.mech > .diagram{ order:2; }
@media (max-width:1023px){ .diagram .shell-text{ font-size:12.5px; } .diagram .lbl{ font-size:12.5px; } .diagram .lbl-s{ font-size:12px; } .diagram .core-t{ font-size:21px; } .diagram .core-s{ font-size:12px; } }
.diagram{ width:100%; max-width:480px; margin-inline:auto; color:var(--gold); }
.diagram .shell{ fill:none; stroke:var(--gold); }
.diagram .shell-text{ font-family:var(--serif); font-size:12px; fill:var(--ink-muted); letter-spacing:.02em; }
.diagram .core{ fill:var(--wine-tint); stroke:var(--wine); stroke-width:1.2; }
.diagram .core-t{ font-family:var(--serif); font-weight:700; font-size:17.5px; fill:var(--ink); }
.diagram .core-s{ font-family:var(--sans); font-size:11px; letter-spacing:.16em; fill:var(--wine); font-weight:600; }
.diagram .lbl{ font-family:var(--sans); font-size:11.5px; font-weight:600; letter-spacing:.06em; fill:var(--ink); }
.diagram .lbl-s{ font-family:var(--sans); font-size:11px; fill:var(--ink-faint); }
.diagram .lead-line{ stroke:var(--ink-faint); stroke-width:1; fill:none; }
.diagram .crack{ stroke:var(--wine); stroke-width:1.6; fill:none; stroke-linecap:round; stroke-linejoin:round; }
.diagram .ego{ fill:var(--surface-100); stroke:var(--wine); stroke-width:1.2; }
.layers{ display:grid; gap:0; border-top:1px solid var(--line); }
.layer{ display:grid; grid-template-columns:56px 1fr; gap:4px 16px; padding:22px 0; border-bottom:1px solid var(--line); }
.layer .n{ font-family:var(--serif); font-size:22px; color:var(--gold-text); line-height:1.2; }
.layer h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; line-height:1.5; }
.layer h3 small{ font-family:var(--sans); font-size:12px; font-weight:500; color:var(--ink-faint); letter-spacing:.04em; margin-left:6px; }
.layer p{ grid-column:2; font-size:12.5px; color:var(--ink-muted); line-height:1.65; }
.layer q{ font-family:var(--serif); color:var(--ink); quotes:"“" "”"; }
.layer-more{ grid-column:2; margin-top:10px; }
.layer-more summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; min-height:32px;
  font-size:12px; font-weight:600; letter-spacing:.02em; color:var(--gold-text); }
.layer-more summary::-webkit-details-marker{ display:none; }
.layer-more summary::after{ content:"+"; font-size:12.5px; font-weight:400; line-height:1; transition:transform .25s; }
.layer-more[open] summary::after{ transform:rotate(45deg); }
.layer-more summary:hover{ color:var(--wine); }
.layer-more p{ margin-top:8px; padding:14px 16px; border-left:2px solid var(--line-gold); background:var(--surface-100);
  font-size:12px; line-height:1.7; color:var(--ink-faint); }
.layer.target{ position:relative; }
.layer.target .pill{ display:inline-block; vertical-align:2px; margin-left:8px; font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.1em;
  color:var(--wine); background:var(--wine-tint); padding:3px 8px; border-radius:var(--r); }
.quote-box{ margin-top:26px; padding:22px 24px; border-left:2px solid var(--gold); background:var(--surface-100); }
.bg-2 .quote-box{ background:var(--surface-100); }
.quote-box p{ font-family:var(--serif); font-size:14px; line-height:1.65; color:var(--ink); }
.quote-box .qb-label{ font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--gold-text); margin-bottom:8px; }
.quote-box .qb-quote{ margin-top:12px; color:var(--ink-muted); }
.quote-box cite{ display:block; margin-top:8px; font-style:normal; font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }
.finds{ display:grid; gap:12px; margin-top:64px; }
.find{ padding:28px 24px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.find .label{ font-size:11px; }
.find h4{ font-family:var(--serif); font-size:15px; font-weight:700; line-height:1.55; margin-top:10px; }
.find p{ font-size:12.5px; color:var(--ink-faint); margin-top:8px; line-height:1.6; }
.chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:14px; }
.chip{ font-size:12px; padding:6px 11px; border:1px solid var(--line); border-radius:999px; color:var(--ink-muted); background:var(--surface-200); }
.finds-title{ margin-top:72px; text-align:center; }
.finds-title + .finds{ margin-top:28px; }
@media (min-width:720px){ .finds{ grid-template-columns:repeat(3,1fr); gap:16px; } }
@media (min-width:1024px){ .mech{ grid-template-columns:1fr 1fr; gap:72px; } .mech > .diagram{ order:0; } .diagram{ max-width:500px; } }

/* ---------- journey ---------- */
.steps{ display:grid; gap:12px; counter-reset:s; }
.step{ position:relative; display:grid; align-content:start; grid-template-columns:auto 1fr; gap:6px 18px; padding:24px 22px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.step .ic{ grid-row:span 3; width:52px; height:52px; display:grid; place-items:center; border:1px solid var(--line-gold); border-radius:50%; color:var(--gold); }
.step .ic svg{ width:24px; height:24px; }
.step .no{ font-size:11px; font-weight:600; letter-spacing:.16em; color:var(--gold-text); }
.step h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; line-height:1.45; text-wrap:balance; }
.step p{ font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
.step-arrow{ display:none; }
@media (min-width:1024px){
  .steps{ grid-template-columns:repeat(4,1fr); gap:28px; }
  .step{ grid-template-columns:1fr; padding:32px 26px 34px; gap:0; }
  .step .ic{ grid-row:auto; margin-bottom:26px; }
  .step h3{ margin-top:8px; }
  .step p{ margin-top:10px; }
  .step-arrow{ display:block; position:absolute; right:-23px; top:56px; width:18px; height:18px; color:var(--ink-faint); opacity:.6; }
}

/* ---------- image slot (이미지 자리) ----------
   data-src 경로에 파일이 있으면 JS가 자동으로 채운다. 없으면 자리 표시만 보인다. */
.img-slot{ position:relative; margin:0; aspect-ratio:var(--ar,4/5); border:1px dashed var(--line-gold); border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:12px; text-align:center;
  background:repeating-linear-gradient(45deg, rgba(150,118,44,.06) 0 1px, transparent 1px 14px), var(--surface-200); color:var(--gold); }
.img-slot > svg{ width:26px; height:auto; opacity:.7; }
.img-slot .slot-tag{ font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--gold-text); line-height:1.4; }
.img-slot .slot-file{ font-size:10.5px; color:var(--ink-faint); line-height:1.4; word-break:break-all; }
.img-slot img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.img-slot.has-img{ border:0; padding:0; background:none; }
.img-slot.has-img > :not(img){ display:none !important; }   /* 그림이 뜨면 자리 표시(파일 이름 등)는 어떤 경우에도 숨긴다 */
.night .img-slot{ border-color:var(--night-gold-line); color:var(--night-gold);
  background:repeating-linear-gradient(45deg, rgba(216,184,106,.05) 0 1px, transparent 1px 14px), var(--night-2); }
.night .img-slot .slot-tag{ color:var(--night-gold-text); }
.night .img-slot .slot-file{ color:var(--night-faint); }

/* ---------- knights (아기 공주의 다섯 얼굴) ---------- */
.knights{ display:grid; gap:12px; }
.knight{ display:grid; grid-template-columns:96px 1fr; gap:18px; align-items:start; padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); transition:border-color .25s; }
.knight:hover{ border-color:var(--line-gold); }
.knight .img-slot{ padding:6px; }
.knight .img-slot > svg, .knight .img-slot .slot-file{ display:none; }
.knight .img-slot .slot-tag{ font-size:10.5px; letter-spacing:.02em; }
.knight .no{ font-size:11px; letter-spacing:.16em; color:var(--gold-text); font-weight:600; }
.knight h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; line-height:1.4; margin-top:2px; }
.knight q{ display:block; font-family:var(--serif); font-size:12.5px; line-height:1.6; color:var(--ink); margin-top:8px; quotes:"“" "”"; }
.knight p{ font-size:12px; color:var(--ink-faint); line-height:1.6; margin-top:6px; }
#knights .sym-foot{ margin-top:28px; }
@media (min-width:720px){
  .knights{ grid-template-columns:repeat(3,1fr); gap:16px; }
  .knight{ grid-template-columns:1fr; gap:18px; padding:16px 16px 22px; }
  .knight .img-slot{ padding:12px; }
  .knight .img-slot > svg, .knight .img-slot .slot-file{ display:block; }
  .knight .img-slot .slot-tag{ font-size:12px; }
  .kn-body{ padding-inline:4px; }
}
@media (min-width:1024px){ .knights{ grid-template-columns:repeat(5,1fr); } }

/* ---------- law (예전 자리의 법칙 표 스타일 · 지금은 거울의 법칙 요약·안내문에만 일부 쓰임) ---------- */
.law{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.law-h{ display:none; }
.law-cell{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; padding:12px 12px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.law-cell .img-slot{ --ar:1/1; width:100%; }
.law-cell .cap{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; }
.law-cell .res{ font-size:12px; font-weight:600; letter-spacing:.06em; padding:4px 9px; border-radius:var(--r); line-height:1.4; }
.res.stay{ background:var(--wine-tint); color:var(--wine); }
.res.leave{ background:var(--surface-300); color:var(--ink-muted); }
.law-cell p{ font-family:var(--serif); font-size:12.5px; line-height:1.6; color:var(--ink); }
.law-cell.goal{ border-color:var(--wine); }
.law-sum{ margin-top:36px; text-align:center; font-family:var(--serif); font-size:clamp(14.5px,1.66vw,17.5px); line-height:1.6; color:var(--ink-muted); }
.law-sum p + p{ margin-top:6px; }
.law-sum strong{ color:var(--ink); }
.law-sum em{ font-style:normal; color:var(--wine); }
.law-note{ margin-top:18px; text-align:center; font-size:12px; line-height:1.6; color:var(--ink-faint); }
.law-basis{ display:inline-block; margin-top:18px; padding:7px 14px; border:1px solid var(--line-gold); border-radius:var(--r);
  font-size:12px; font-weight:600; color:var(--gold-text); line-height:1.5; }
.law-basis span{ font-weight:400; color:var(--ink-faint); }
@media (min-width:720px){
  .law{ grid-template-columns:auto 1fr 1fr; gap:16px 20px; max-width:720px; margin-inline:auto; }
  .law-h{ display:block; font-family:var(--serif); color:var(--ink-muted); }
  .law-col{ text-align:center; font-size:14.5px; font-weight:700; color:var(--ink); align-self:end; padding-bottom:2px; }
  .law-row{ align-self:center; font-size:13.5px; line-height:1.55; padding-right:6px; }
  .law-row b{ color:var(--wine); }
  .law-cell{ padding:16px 16px 20px; }
  .law-cell .cap{ display:none; }
  .law-cell p{ font-size:13.5px; }
}

/* ---------- journey (어두운 구간 · 변신 4컷) ---------- */
.night .h2{ color:var(--night-ink); }
.night .sub{ color:var(--night-muted); }
.night .step{ background:var(--night-2); border-color:var(--night-line); }
.night .step .no{ color:var(--night-gold-text); }
.night .step h3{ color:var(--night-ink); }
.night .step p{ color:var(--night-muted); }
.night .step-arrow{ color:var(--night-faint); }
.steps.pics .step{ grid-template-columns:104px 1fr; gap:16px; padding:14px; align-items:start; }
.steps.pics .img-slot{ padding:6px; }
.steps.pics .img-slot > svg, .steps.pics .img-slot .slot-file{ display:none; }
.steps.pics .img-slot .slot-tag{ font-size:10.5px; letter-spacing:.02em; }
.steps.pics .st-body h3{ margin-top:4px; }
.steps.pics .st-body p{ margin-top:6px; }
.journey-note{ margin-top:44px; text-align:center; font-family:var(--serif); font-size:clamp(14.5px,1.82vw,19px); line-height:1.6; color:var(--night-ink); }
.journey-note em{ font-style:normal; color:var(--night-gold-text); }
/* 영어 포인트 */
.en{ display:block; font-family:var(--en); font-style:italic; font-weight:500; letter-spacing:.02em; color:var(--gold-text); }
.night .en{ color:var(--night-gold-text); }
.knight .en{ font-size:13.5px; margin-top:2px; }
.knight .freud{ display:table; margin-top:10px; padding:2px 10px; border:1px solid var(--line-gold); border-radius:999px; font-size:11.5px; letter-spacing:.03em; color:var(--ink-faint); }
.kn-note{ margin-top:18px; text-align:center; font-size:12px; line-height:1.6; color:var(--ink-faint); }
.steps.pics .en{ font-size:14.5px; margin-top:2px; }
.en-line{ font-family:var(--en); font-style:italic; font-weight:500; letter-spacing:.03em; color:var(--gold-text); font-size:clamp(15.5px,1.82vw,20px); line-height:1.4; }
.night .en-line{ color:var(--night-gold-text); }
.manifesto .en-line{ margin-top:10px; }
.journey-note + .en-line{ text-align:center; margin-top:6px; }
.final .en-line{ margin-top:14px; }
@media (min-width:720px){ .steps.pics{ grid-template-columns:1fr 1fr; gap:16px; } }
@media (min-width:1024px){
  .steps.pics{ grid-template-columns:repeat(4,1fr); gap:28px; }
  .steps.pics .step{ grid-template-columns:1fr; gap:20px; padding:14px 14px 26px; }
  .steps.pics .img-slot{ padding:12px; }
  .steps.pics .img-slot > svg, .steps.pics .img-slot .slot-file{ display:block; }
  .steps.pics .img-slot .slot-tag{ font-size:12px; }
  .steps.pics .st-body{ padding-inline:8px; }
  .steps.pics .step-arrow{ top:38%; }
}

/* ---------- programs ---------- */
.programs{ display:grid; gap:44px; }
.prod{ display:flex; flex-direction:column; }
.cover{ position:relative; aspect-ratio:4/5; border-radius:var(--r); overflow:hidden;
  display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:40px 28px; isolation:isolate; }
.cover::before{ content:""; position:absolute; inset:14px; border:1px solid var(--fr); pointer-events:none; }
.cover::after{ content:""; position:absolute; inset:19px; border:1px solid var(--fr); opacity:.45; pointer-events:none; }
.cover .cv-pat{ position:absolute; inset:0; z-index:-1;
  background:
    repeating-linear-gradient(45deg, var(--pat) 0 1px, transparent 1px 16px),
    repeating-linear-gradient(-45deg, var(--pat) 0 1px, transparent 1px 16px); }
.cover .cv-crest{ width:76px; color:var(--cc); transition:transform .6s cubic-bezier(.2,.7,.2,1); }
.cover .cv-eyebrow{ margin-top:26px; font-size:10.5px; font-weight:600; letter-spacing:.3em; color:var(--ce); padding-left:.3em; }
.cover .cv-title{ font-family:var(--serif); font-weight:700; font-size:clamp(20px,1.99vw,24px); line-height:1.35; margin-top:12px; color:var(--ct); letter-spacing:-.02em; }
.cover .cv-title--en{ font-family:var(--en); font-weight:600; font-size:clamp(22.5px,2.24vw,27px); line-height:1.12; letter-spacing:.06em; }
.cover .cv-rule{ width:36px; height:1px; background:var(--fr); margin:18px auto 0; }
.cover .cv-sub{ margin-top:14px; font-size:12px; color:var(--cs); line-height:1.6; }
.cover .cv-foot{ position:absolute; left:0; right:0; bottom:34px; font-size:10px; letter-spacing:.38em; color:var(--ce); padding-left:.38em; }
.cv-badge{ position:absolute; top:28px; left:28px; font-size:10.5px; font-weight:600; letter-spacing:.12em; padding:5px 9px; border-radius:var(--r); background:var(--bb); color:var(--bf); z-index:2; }
.cover--paper{ --fr:#d9c69b; --pat:rgba(150,118,44,.06); --cc:#96762c; --ce:#7f6320; --ct:#1e1822; --cs:#4a4152; --bb:#1e1822; --bf:#f0e2c8;
  background:#fff8ee; box-shadow:inset 0 0 0 1px #e3d7c0; }
.cover--wine{ --fr:rgba(240,226,200,.5); --pat:rgba(240,226,200,.05); --cc:#f0e2c8; --ce:#e4cb92; --ct:#fff8ee; --cs:rgba(255,248,238,.78); --bb:#f0e2c8; --bf:#6a1a26;
  background:radial-gradient(90% 70% at 50% 30%, #9a2b3b, #741e2b 70%, #6a1a26); }
.cover--night{ --fr:#5c4e2e; --pat:rgba(216,184,106,.05); --cc:#d8b86a; --ce:#e4cb92; --ct:#fff8ee; --cs:#b9b0c2; --bb:#d8b86a; --bf:#17131c;
  background:radial-gradient(90% 70% at 50% 30%, #262030, #17131c 70%); }
.prod:hover .cv-crest{ transform:translateY(-4px); }
.prod-body{ padding-top:22px; display:flex; flex-direction:column; flex:1; }
.prod-body h3{ font-family:var(--serif); font-size:17.5px; font-weight:700; line-height:1.45; }
.prod-body h3 small{ font-family:var(--sans); font-weight:500; font-size:12px; color:var(--ink-faint); margin-left:4px; }
.prod-body .desc{ margin-top:8px; font-size:12.5px; color:var(--ink-faint); line-height:1.6; }
.prod-body ul{ margin-top:16px; display:grid; gap:7px; }
.prod-body li{ position:relative; padding-left:18px; font-size:12px; color:var(--ink-muted); line-height:1.6; }
.prod-body li::before{ content:""; position:absolute; left:2px; top:.62em; width:6px; height:6px; border:1px solid var(--gold); transform:rotate(45deg); }
.prod-foot{ margin-top:auto; padding-top:22px; display:flex; align-items:center; justify-content:space-between; gap:16px; }
.price{ font-family:var(--serif); font-weight:700; font-size:21px; color:var(--ink); letter-spacing:-.01em; line-height:1; }
.price small{ font-family:var(--sans); font-weight:400; font-size:12px; color:var(--ink-faint); margin-left:6px; letter-spacing:0; }
.prod .btn{ min-height:46px; padding:0 20px; }
@media (min-width:720px){ .programs{ grid-template-columns:repeat(2,1fr); gap:44px 28px; } }
@media (min-width:1024px){ .programs{ grid-template-columns:repeat(3,1fr); gap:32px; } }

/* ---------- free banner ---------- */
.free{ display:grid; gap:36px; align-items:center; padding:40px 24px; border-radius:var(--r); overflow:hidden; position:relative; isolation:isolate; }
.free::before{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(60% 90% at 100% 0%, rgba(138,36,51,.42), transparent 60%), radial-gradient(50% 70% at 0% 100%, rgba(216,184,106,.08), transparent 60%); }
.free-cover{ width:min(280px, 72%); margin-inline:auto; padding:10px; border:1px solid var(--night-gold-line); }
.free-cover img{ width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; }
.free h3{ font-family:var(--serif); font-weight:700; font-size:clamp(19px,2.24vw,26px); line-height:1.45; color:var(--night-ink); margin-top:14px; letter-spacing:-.02em; }
.free h3 em{ font-style:normal; color:var(--night-gold-text); display:block; font-size:.62em; letter-spacing:0; margin-bottom:6px; font-weight:400; }
.free p.d{ margin-top:16px; color:var(--night-muted); font-size:12.5px; line-height:1.7; max-width:34em; }
.free .meta{ display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.free .meta span{ font-size:12px; color:var(--night-muted); border:1px solid var(--night-line); border-radius:999px; padding:6px 12px; }
.free .btn{ margin-top:30px; }
.free small.note{ display:block; margin-top:14px; font-size:12px; color:var(--night-faint); }
@media (min-width:860px){ .free{ grid-template-columns:320px 1fr; gap:64px; padding:56px 64px; } .free-cover{ width:100%; } }

/* ---------- founder ---------- */
.founder{ display:grid; gap:40px; align-items:start; }
.voices{ background:var(--surface-paper); box-shadow:inset 0 0 0 1px #e3d7c0; border-radius:var(--r); padding:34px 28px 30px; position:relative; }
:root[data-theme="dark"] .voices{ box-shadow:inset 0 0 0 1px var(--line-gold); }
.voices .label{ font-size:11px; }
.voices ul{ margin-top:18px; }
.voices li{ font-family:var(--serif); font-size:clamp(14px,1.49vw,15.5px); color:var(--ink); padding:13px 0; border-bottom:1px dashed var(--line); line-height:1.55; }
.voices li:last-child{ border-bottom:0; }
.voices li span{ position:relative; display:inline; background-image:linear-gradient(var(--wine), var(--wine)); background-repeat:no-repeat;
  background-position:0 58%; background-size:0% 1.5px; transition:background-size .9s cubic-bezier(.6,0,.2,1); }
.voices.is-in li span, html:not(.js) .voices li span{ background-size:100% 1.5px; }
.voices.is-in li:nth-child(2) span{ transition-delay:.25s; }
.voices.is-in li:nth-child(3) span{ transition-delay:.5s; }
.voices.is-in li:nth-child(4) span{ transition-delay:.75s; }
.voices.is-in li:nth-child(5) span{ transition-delay:1s; }
.voices .after{ margin-top:18px; font-size:12px; color:var(--ink-faint); line-height:1.6; }
.story p{ font-family:var(--serif); font-size:14px; line-height:1.85; color:var(--ink-muted); }
.story p + p{ margin-top:18px; }
.story p strong{ color:var(--ink); }
.creds{ display:flex; flex-wrap:wrap; gap:8px; margin-top:26px; }
.creds span{ font-size:12px; padding:8px 13px; border:1px solid var(--line); border-radius:var(--r); color:var(--ink-muted); background:var(--surface-100); }
.sign{ display:flex; align-items:center; gap:14px; margin-top:30px; padding-top:24px; border-top:1px solid var(--line); }
.sign svg{ width:44px; color:var(--gold); flex-shrink:0; }
.sign b{ display:block; font-family:var(--serif); font-size:13.5px; }
.sign span{ display:block; font-size:12px; color:var(--ink-faint); letter-spacing:.04em; }
@media (min-width:1024px){ .founder{ grid-template-columns:.9fr 1.1fr; gap:72px; } .voices{ position:sticky; top:calc(var(--hd-h) + 32px); padding:44px 40px 38px; } }

/* ---------- reviews ---------- */
.reviews{ display:grid; grid-auto-flow:column; grid-auto-columns:86%; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory; scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1); padding:0 var(--gutter) 8px; scrollbar-width:none; }
.reviews::-webkit-scrollbar{ display:none; }
.rv{ scroll-snap-align:start; display:flex; flex-direction:column; padding:30px 26px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.rv .qm{ font-family:var(--serif); font-size:44px; line-height:.6; color:var(--gold); height:22px; }
.rv p{ font-family:var(--serif); font-size:14px; line-height:1.8; color:var(--ink); margin-top:14px; }
.rv footer{ margin-top:auto; padding-top:24px; display:flex; align-items:center; gap:12px; }
.rv .av{ width:40px; height:40px; border-radius:50%; display:grid; place-items:center; background:var(--wine-tint); color:var(--wine); font-family:var(--serif); font-weight:700; font-size:12.5px; flex-shrink:0; }
.rv footer b{ display:block; font-size:12px; font-weight:600; }
.rv footer span{ display:block; font-size:12px; color:var(--ink-faint); }
.rv-note{ margin-top:18px; font-size:12px; color:var(--ink-faint); }
.swipe-hint{ margin-top:14px; font-size:12px; color:var(--ink-faint); display:flex; align-items:center; gap:6px; }
.swipe-hint svg{ width:14px; height:14px; }
@media (min-width:1024px){ .reviews{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); margin:0; padding:0; overflow:visible; gap:20px; } .swipe-hint{ display:none; } }

/* ---------- faq ---------- */
.faq-grid{ display:grid; gap:36px; }
.faq-side .btn{ margin-top:26px; }
.acc{ border-top:1px solid var(--ink); }
.acc details{ border-bottom:1px solid var(--line); }
.acc summary{ list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:22px 2px; min-height:44px;
  font-family:var(--serif); font-size:14.5px; font-weight:700; line-height:1.55; }
.acc summary::-webkit-details-marker{ display:none; }
.acc summary .q{ color:var(--gold-text); font-family:var(--sans); font-size:12px; font-weight:600; margin-right:12px; }
.acc summary i{ position:relative; width:14px; height:14px; flex-shrink:0; }
.acc summary i::before,.acc summary i::after{ content:""; position:absolute; left:0; top:50%; width:14px; height:1.5px; background:var(--ink); transition:transform .3s; }
.acc summary i::after{ transform:rotate(90deg); }
.acc details[open] summary i::after{ transform:rotate(0deg); }
.acc .a{ padding:0 2px 24px 0; font-size:12.5px; line-height:1.75; color:var(--ink-muted); max-width:44em; }
@media (min-width:1024px){ .faq-grid{ grid-template-columns:.8fr 1.2fr; gap:80px; } .faq-side{ position:sticky; top:calc(var(--hd-h) + 32px); align-self:start; } }

/* ---------- final cta ---------- */
.final{ text-align:center; padding:112px 0; overflow:hidden; isolation:isolate; }
.final::before{ content:""; position:absolute; left:50%; top:50%; width:760px; height:760px; transform:translate(-50%,-50%); border-radius:50%; z-index:-1;
  background:radial-gradient(closest-side, rgba(138,36,51,.42), rgba(138,36,51,.12) 60%, transparent); }
.final::after{ content:""; position:absolute; left:50%; top:50%; width:520px; height:520px; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(216,184,106,.14); z-index:-1; }
.final h2{ font-family:var(--serif); font-weight:700; font-size:clamp(23px,3.31vw,36.5px); line-height:1.42; letter-spacing:-.02em; color:var(--night-ink); margin-top:16px; }
.final h2 em{ font-style:normal; color:var(--night-gold-text); }
.final p{ margin-top:18px; color:var(--night-muted); font-size:13px; }
.final .btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; margin-top:38px; }

/* ---------- footer ---------- */
.ft{ background:var(--night-2); color:var(--night-faint); border-top:1px solid rgba(255,255,255,.04); font-size:12px; }
.ft-top{ display:grid; gap:36px; padding:64px 0 44px; }
.ft-brand .logo{ color:var(--night-gold); }
.ft-brand .logo b{ color:var(--night-gold-text); font-size:12.5px; letter-spacing:.32em; }
.ft-brand p{ margin-top:18px; line-height:1.7; color:var(--night-muted); }
.ft-brand p span{ color:var(--night-faint); }
.ft h4{ font-size:11.5px; font-weight:600; letter-spacing:.16em; color:var(--night-ink); opacity:.55; margin-bottom:16px; }
.ft ul a{ display:inline-block; padding:5px 0; color:var(--night-muted); transition:color .2s; }
.ft ul a:hover{ color:var(--night-gold-text); }
.ft-cols{ display:grid; grid-template-columns:1fr 1fr; gap:24px; }
.ft-biz{ border-top:1px solid var(--night-line); padding:32px 0 44px; font-size:12px; line-height:1.8; }
.ft-biz b{ color:var(--night-muted); font-weight:600; }
.ft-biz .policy{ margin-top:18px; }
.ft-biz .copy{ margin-top:26px; padding-top:22px; border-top:1px solid var(--night-line); font-size:12px; letter-spacing:.06em; display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px; }
@media (min-width:860px){ .ft-top{ grid-template-columns:1.4fr 1fr; gap:64px; } }

/* ---------- floating ----------
   --nf-badge : Netlify 무료 요금제가 오른쪽 아래에 붙이는 'Powered by Netlify' 배지(높이 64px) 자리.
                배지가 없어지면(유료 · 다른 호스팅) 0px 로 바꾸면 버튼이 원래 자리로 내려간다 */
:root{ --nf-badge:64px; }
.fab{ position:fixed; right:18px; bottom:calc(18px + var(--nf-badge) + env(safe-area-inset-bottom,0px)); z-index:40;
  display:inline-flex; align-items:center; gap:10px; height:52px; padding:0 20px 0 16px; border-radius:999px;
  background:var(--night); color:#f0e2c8; border:1px solid rgba(216,184,106,.35); font-size:12.5px; font-weight:600;
  transition:transform .3s, opacity .3s; }
.fab:hover{ border-color:var(--night-gold); }
.fab .k{ width:28px; height:28px; border-radius:50%; background:#fee500; display:grid; place-items:center; }
.fab .k svg{ width:16px; height:16px; }
.fab.is-hidden{ transform:translateY(160px); opacity:0; pointer-events:none; }

.toast{ position:fixed; left:50%; bottom:calc(92px + var(--nf-badge)); transform:translate(-50%, 10px); z-index:60; background:var(--ink); color:var(--surface-100);
  padding:12px 20px; border-radius:var(--r); font-size:12px; opacity:0; pointer-events:none; transition:opacity .25s, transform .25s; max-width:calc(100% - 40px); text-align:center; }
.toast.on{ opacity:1; transform:translate(-50%,0); }

/* ---------- reveal ---------- */
.js .rv-up{ opacity:0; transform:translateY(22px); transition:opacity .9s ease, transform .9s cubic-bezier(.2,.7,.2,1); transition-delay:var(--d,0s); }
.js .rv-up.is-in, .qa-static .rv-up{ opacity:1; transform:none; }
.qa-static .rv-up{ transition:none !important; }
.qa-static .voices li span{ background-size:100% 1.5px; }

@media (min-width:720px){ :root{ --gutter:32px; } .sec{ padding:76px 0; } .sh{ margin-bottom:40px; } }
@media (min-width:1024px){ :root{ --gutter:40px; --hd-h:72px; } .sec{ padding:84px 0; } .sh{ margin-bottom:44px; } }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *,*::before,*::after{ animation:none !important; transition-duration:.01ms !important; transition-delay:0s !important; }
  .rv-up{ opacity:1; transform:none; }
  .voices li span{ background-size:100% 1.5px; }
}

/* =====================================================================
   그림이 주인공 — 구조 변경 (2026-10-30)
   ===================================================================== */
@media (min-width:1024px){ .sec{ padding:84px 0; } }

/* 빈 그림 자리는 숨긴다. 자리를 확인하고 싶으면 주소 끝에 ?slots 를 붙인다 */
.img-slot:not(.has-img){ display:none; }
.show-slots .img-slot:not(.has-img){ display:flex; }
/* 새 그림이 오기 전까지 3단계 1칸은 '너무 큰 왕관' 임시 그림을 보여준다 */
.img-slot.ph-crown:not(.has-img){ display:flex !important; border:0; padding:0;
  background:radial-gradient(70% 55% at 50% 38%, rgba(138,36,51,.55), rgba(20,14,17,.96) 75%), var(--night-2); }
.img-slot.ph-crown .slot-tag, .img-slot.ph-crown .slot-file{ display:none !important; }
.img-slot.ph-crown .ph-art{ width:62%; color:var(--night-gold); opacity:.85; transform:rotate(-16deg) translate(-4%,-14%); }

/* 변신 4컷 : 화면 가로 전체를 쓰는 띠. 글자는 그림 아래쪽 위에 얹는다 */
#journey .steps.pics{ display:grid; grid-template-columns:repeat(3,1fr); gap:3px; margin-top:8px; }
#journey .steps.pics .step{ display:block; position:relative; padding:0; border:0; border-radius:0; background:var(--night-2); overflow:hidden; }
#journey .steps.pics .img-slot{ border-radius:0; padding:0; }
#journey .steps.pics .img-slot img{ transition:transform 1.4s cubic-bezier(.2,.7,.2,1); }
#journey .steps.pics .step:hover .img-slot img{ transform:scale(1.04); }
#journey .steps.pics .step:has(.has-img) .st-body, #journey .steps.pics .step:has(.ph-crown) .st-body{ position:absolute; left:0; right:0; bottom:0; padding:56px 10px 14px;
  background:linear-gradient(0deg, rgba(20,14,17,.94) 18%, rgba(20,14,17,0)); }
#journey .steps.pics .st-body{ padding:18px 16px; }
#journey .steps.pics .st-body p{ display:none; }
#journey .steps.pics .st-body h3{ font-size:12.5px; line-height:1.4; margin-top:4px; }
#journey .steps.pics .en{ font-size:12px; }
#journey .step-arrow{ display:none !important; }
@media (min-width:1024px){
  #journey .steps.pics .en{ font-size:14.5px; }
  #journey .steps.pics .step:has(.has-img) .st-body, #journey .steps.pics .step:has(.ph-crown) .st-body{ padding:110px 24px 26px; }
  #journey .steps.pics .st-body h3{ font-size:17.5px; }
}

/* 공주 유형 다섯 : 그림을 크게, 테두리·여백 없이 꽉 채운다. 휴대폰은 옆으로 넘기기 */
#knights .knights{ display:grid; grid-auto-flow:column; grid-auto-columns:74%; gap:3px; overflow-x:auto;
  scroll-snap-type:x mandatory; scrollbar-width:none; padding:0 var(--gutter) 4px; scroll-padding-inline:var(--gutter); }
#knights .knights::-webkit-scrollbar{ display:none; }
#knights .knight{ display:block; scroll-snap-align:start; padding:0; border:0; border-radius:0; background:var(--surface-200); }
#knights .knight .img-slot{ border-radius:0; padding:0; }
#knights .knight .kn-body{ padding:18px 18px 22px; }
#knights .knight q{ display:none; }
#knights .knight p{ font-size:12px; line-height:1.6; color:var(--ink-muted); margin-top:10px; }
#knights .knight h3{ font-size:16.5px; }
#knights .knight q{ font-size:12.5px; }
@media (min-width:720px){
  #knights .knights{ grid-auto-flow:row; grid-template-columns:repeat(3,1fr); overflow:visible; padding:0; }
}
@media (min-width:1024px){ #knights .knights{ grid-template-columns:repeat(5,1fr); } }

/* 프로그램 표지 : 코드로 그린 무늬 대신 변신 그림. 글자는 아래쪽에 */
.cover--img{ --fr:rgba(216,184,106,.5); --ce:#e4cb92; --ct:#fbf3e8; --cs:rgba(251,243,232,.85); --bb:#e4cb92; --bf:#140e11;
  justify-content:flex-end; padding-bottom:48px;
  background:linear-gradient(0deg, rgba(20,14,17,.96) 10%, rgba(20,14,17,.55) 45%, rgba(20,14,17,.05) 78%),
    var(--img) center top / cover no-repeat, var(--night-2); }
.cover--img .cv-crest, .cover--img .cv-pat, .cover--img .cv-foot{ display:none; }
.cover--img .cv-eyebrow{ margin-top:0; }
.cover--img{ transition:background-size .8s ease; }

/* 무료 진단서 상자 : 어두운 바탕 위에서도 상자로 보이게 */
#start .free{ background:var(--night-2); border:1px solid var(--night-gold-line); margin-bottom:56px; }
.sym-foot a.btn{ color:var(--btn-fg); }
.theory-law{ margin-top:110px; }
/* 거울의 법칙 : 3단계 비교 카드 */
.mirror{ display:grid; gap:12px; max-width:880px; margin-inline:auto; }
.mirror-card{ padding:24px 22px 26px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); text-align:center; }
.mirror-card.goal{ border-color:var(--wine); }
.mirror-stage{ display:inline-block; font-family:var(--serif); font-size:15.5px; font-weight:700; color:var(--ink); }
.mirror-card.goal .mirror-stage{ color:var(--gold-text); }
.mirror small{ display:block; font-family:var(--en),var(--sans); font-size:12px; letter-spacing:.06em; color:var(--ink-faint); margin-bottom:6px; }
.mirror-self{ margin-top:16px; font-family:var(--serif); font-size:14.5px; line-height:1.55; color:var(--ink); }
.mirror-arrow{ display:block; margin:12px 0; color:var(--gold); font-size:14.5px; }
.mirror-man{ font-size:12.5px; line-height:1.6; color:var(--ink-muted); }
@media (min-width:720px){ .mirror{ grid-template-columns:repeat(3,1fr); gap:18px; } }
.quote-more{ margin-top:22px; }
.quote-more summary{ list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px; min-height:32px; font-size:12px; font-weight:600; color:var(--gold-text); }
.quote-more summary::-webkit-details-marker{ display:none; }
.quote-more summary::after{ content:"+"; font-size:12.5px; font-weight:400; transition:transform .25s; }
.quote-more[open] summary::after{ transform:rotate(45deg); }
.quote-more .quote-box{ margin-top:10px; }
.journey-cta{ text-align:center; margin-top:30px; }
/* 여왕이 되면 : 장면별 전후 비교 */
.after{ max-width:820px; margin-inline:auto; border-top:1px solid var(--line); }
.after-head{ display:none; }
.after-row{ display:grid; grid-template-columns:1fr 1fr; gap:8px 16px; padding:20px 4px; border-bottom:1px solid var(--line); }
.after-q{ grid-column:1 / -1; font-family:var(--serif); font-size:14.5px; line-height:1.5; color:var(--ink); }
.after-a{ font-size:12.5px; line-height:1.65; }
.after-a::before{ display:block; font-family:var(--en),var(--sans); font-size:12px; letter-spacing:.08em; margin-bottom:3px; }
.after-a.baby{ color:var(--ink-faint); }
.after-a.baby::before{ content:"Baby Princess"; }
.after-a.queen{ color:var(--gold-text); font-weight:500; }
.after-a.queen::before{ content:"Queen"; }
.after-note{ margin-top:36px; text-align:center; font-family:var(--serif); font-size:clamp(14.5px,1.66vw,16.5px); line-height:1.6; color:var(--ink-muted); }
.after-note em{ font-style:normal; color:var(--ink); }
@media (min-width:720px){
  .after-head{ display:grid; grid-template-columns:1.05fr 1fr 1.2fr; gap:20px; padding:14px 4px; border-bottom:1px solid var(--line);
    font-family:var(--serif); font-size:12.5px; color:var(--ink-faint); }
  .after-head span:last-child{ color:var(--gold-text); }
  .after-row{ grid-template-columns:1.05fr 1fr 1.2fr; gap:20px; align-items:center; }
  .after-q{ grid-column:auto; font-size:13.5px; }
  .after-a::before{ display:none; }
  .after-a{ font-size:12.5px; }
}

/* 대표 사진 (images/F1_대표사진 을 넣으면 나타난다) */
.founder-photo{ --ar:4/5; margin:0 0 22px; border-radius:var(--r); }

/* 마지막 화면 : 어른 여자 그림 위에 문장 */
.final.night{ background:
    radial-gradient(60% 70% at 50% 50%, rgba(20,14,17,.55), rgba(20,14,17,.92)),
    url('images/S2_어른여자.webp') center 25% / cover no-repeat,
    var(--night); }
.final::before{ opacity:.5; }

/* 좌우 여백 (원러브처럼 가운데 기둥 안에) : 화면 끝까지 꽉 차던 유형 카드·3단계 그림도 같은 폭 안에 둔다. 모바일 넘김 카드는 그대로 */
@media (min-width:720px){
  #knights .knights, #journey .steps.pics{ max-width:var(--maxw); margin-inline:auto; padding-inline:var(--gutter); }
  #knights .knights{ gap:10px; }
  #knights .knight{ border-radius:var(--r); overflow:hidden; }
  #journey .steps.pics{ gap:10px; }
  #journey .steps.pics .step{ border-radius:var(--r); }
}

/* =====================================================================
   서브페이지 (2026-11-01) — 홈 · 소개 · 원리 · 전자책 · 칼럼 · 영상 · 클래스 · FAQ
   ===================================================================== */
.br-m{ display:inline; }
@media (min-width:720px){ .br-m{ display:none; } }

/* 서브페이지 첫 화면 */
.page-hero{ position:relative; isolation:isolate; overflow:hidden; text-align:center; padding:clamp(64px,9vw,112px) 0 clamp(48px,6vw,76px); }
.page-hero::before{ content:""; position:absolute; inset:0; z-index:-2; background:var(--img, none) center 28% / cover no-repeat; opacity:.42; }
.page-hero::after{ content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(ellipse at 50% 0%, rgba(138,36,51,.28), transparent 60%), linear-gradient(180deg, rgba(20,14,17,.55) 0%, var(--night) 96%); }
.page-hero h1{ font-family:var(--serif); font-weight:700; font-size:clamp(24px,3.4vw,36px); line-height:1.42; letter-spacing:-.02em; color:var(--night-ink); margin-top:14px; text-wrap:balance; }
.page-hero h1 em{ font-style:normal; color:var(--night-gold-text); }
.page-hero .lead{ margin-top:16px; font-size:13.5px; line-height:1.7; color:var(--night-muted); }
.page-tabs{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-top:30px; }
.page-tabs a{ font-size:12px; color:var(--night-muted); padding:7px 14px; border:1px solid var(--night-line); border-radius:999px; background:rgba(20,14,17,.45); transition:border-color .2s, color .2s; }
.page-tabs a:hover{ color:var(--night-ink); border-color:var(--night-gold-line); }

/* 섹션 제목 + 오른쪽 '전체 보기' */
.sh-row{ display:flex; align-items:flex-end; justify-content:space-between; gap:16px; margin-bottom:28px; }
.sh-row .h2{ margin-top:10px; }
.more{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--gold-text); white-space:nowrap; min-height:40px; }
.more svg, .more-link svg{ width:15px; height:15px; transition:transform .2s; }
.more:hover svg, .more-link a:hover svg{ transform:translateX(3px); }
.more-link{ text-align:center; margin-top:28px; font-size:13px; color:var(--ink-faint); }
.night .more-link{ color:var(--night-muted); }
.more-link a{ display:inline-flex; align-items:center; gap:6px; font-weight:600; color:var(--gold-text); }
.night .more-link a{ color:var(--night-gold-text); }

/* 홈 : 대표 클래스 띠 */
.class-banner{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px 24px; margin-top:16px; padding:26px 28px;
  border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-100); transition:border-color .25s; }
.class-banner:hover{ border-color:var(--gold); }
.cb-text{ display:flex; flex-direction:column; gap:4px; }
.cb-text .label{ font-size:11px; }
.cb-text b{ font-family:var(--en); font-weight:600; font-size:clamp(22px,2.6vw,28px); letter-spacing:.06em; color:var(--ink); line-height:1.2; }
.cb-text > span:last-child{ font-size:12.5px; color:var(--ink-faint); }
.cb-go{ display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:600; color:var(--wine); }
.cb-go svg{ width:16px; height:16px; }
#start .free{ margin-bottom:0; }

/* 칼럼 카드 */
.cols{ display:grid; gap:12px; }
@media (min-width:720px){ .cols{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:1024px){ .cols{ grid-template-columns:repeat(3,1fr); } }
.col-card{ display:flex; flex-direction:column; padding:22px 22px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); transition:border-color .25s, transform .25s; }
.bg-2 .col-card{ background:var(--surface-100); }
.col-card:hover{ border-color:var(--line-gold); transform:translateY(-2px); }
.col-card[hidden]{ display:none; }
.col-top{ display:flex; justify-content:space-between; align-items:center; gap:10px; }
.col-tag{ font-size:11px; font-weight:600; color:var(--wine); background:var(--wine-tint); padding:3px 9px; border-radius:999px; }
.col-ep{ font-family:var(--en); font-size:12.5px; font-weight:600; letter-spacing:.08em; color:var(--gold-text); }
.col-card h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; line-height:1.5; margin-top:14px; color:var(--ink); }
.col-card p{ font-size:12.5px; color:var(--ink-faint); line-height:1.65; margin-top:8px; flex:1; }
.col-more{ display:inline-flex; align-items:center; gap:6px; margin-top:16px; font-size:12px; font-weight:600; color:var(--gold-text); }
.col-more svg{ width:14px; height:14px; }
.col-filter{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:24px; }
.col-filter button{ font-size:12.5px; padding:8px 15px; border:1px solid var(--line); border-radius:999px; background:transparent; color:var(--ink-muted); cursor:pointer; transition:all .2s; }
.col-filter button:hover{ border-color:var(--line-gold); }
.col-filter button.is-on{ background:var(--btn-bg); border-color:var(--btn-bg); color:var(--btn-fg); }

/* 영상 카드 */
.vids{ display:grid; gap:16px; }
@media (min-width:720px){ .vids{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .vids{ grid-template-columns:repeat(3,1fr); } }
.vid-card{ display:flex; flex-direction:column; gap:12px; }
.vid-thumb{ position:relative; display:grid; place-items:center; aspect-ratio:16/9; border-radius:var(--r); overflow:hidden;
  background:radial-gradient(ellipse at 30% 20%, rgba(138,36,51,.55), transparent 60%), linear-gradient(135deg, var(--night-2), var(--night)); border:1px solid var(--night-line);
  background-size:cover; background-position:center; }
.vid-thumb.has-thumb::after{ content:""; position:absolute; inset:0; background:rgba(0,0,0,.18); }
.vid-play{ position:relative; z-index:1; display:grid; place-items:center; width:52px; height:52px; border-radius:50%; background:rgba(251,243,232,.92); color:var(--wine); transition:transform .25s; }
.vid-play svg{ width:22px; height:22px; margin-left:3px; }
.vid-card:hover .vid-play{ transform:scale(1.08); }
.vid-soon{ position:absolute; left:12px; bottom:10px; font-size:11px; color:var(--night-faint); letter-spacing:.04em; }
.vid-meta{ display:flex; flex-direction:column; gap:6px; }
.vid-tag{ font-family:var(--en); font-size:11.5px; font-weight:600; letter-spacing:.14em; color:var(--gold-text); }
.vid-meta h3{ font-family:var(--serif); font-size:15px; font-weight:700; line-height:1.5; color:var(--ink); }

/* 소개 : 연애를 잘하는 여자가 결혼도 잘한다 (통계) */
.why-act{ max-width:820px; margin:0 auto; padding:34px 0; border-top:1px solid var(--line); }
.why-act:first-of-type{ border-top:0; padding-top:0; }
.why-no{ font-family:var(--en); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--gold-text); }
.why-act h3{ font-family:var(--serif); font-size:clamp(17px,2vw,20px); font-weight:700; line-height:1.5; margin-top:8px; color:var(--ink); }
.stats{ display:grid; gap:12px; margin-top:20px; }
@media (min-width:720px){ .stats{ grid-template-columns:1fr 1fr; gap:16px; } }
.stat{ padding:22px 22px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-200); }
.stat > b{ display:block; font-family:var(--en); font-weight:600; font-size:clamp(38px,4.6vw,50px); line-height:1; color:var(--wine); letter-spacing:-.01em; }
.stat > b small{ font-size:.5em; margin-left:2px; }
.stat p{ font-size:12.5px; line-height:1.7; color:var(--ink-faint); margin-top:14px; }
.stat p strong{ color:var(--ink); font-weight:600; }
.duo-row, .gap-row{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; padding:6px 0; border-bottom:1px dashed var(--line); }
.duo-row i, .gap-row i{ font-style:normal; font-size:12px; color:var(--ink-faint); }
.duo-row b, .gap-row b{ font-family:var(--en); font-weight:600; font-size:clamp(26px,3vw,32px); line-height:1.1; color:var(--ink-muted); }
.duo-row b small, .gap-row b small{ font-size:.55em; margin-left:1px; }
.duo-row.her b, .gap-row.her b{ color:var(--wine); }
.duo-row.her i, .gap-row.her i{ color:var(--ink); font-weight:600; }
.why-src{ max-width:820px; margin:8px auto 0; font-size:11px; line-height:1.7; color:var(--ink-faint); }
.why-key{ max-width:820px; margin:56px auto 0; text-align:center; }
.why-a{ font-family:var(--serif); font-size:clamp(15px,1.7vw,17px); line-height:1.7; color:var(--ink-faint); }
.why-b{ font-family:var(--serif); font-size:clamp(15px,1.7vw,17px); line-height:1.7; color:var(--ink); margin-top:14px; }
.why-b em{ font-style:normal; color:var(--wine); }
.why-c{ font-family:var(--serif); font-size:clamp(16px,1.9vw,19px); line-height:1.7; color:var(--ink); margin-top:14px; }
.why-c strong{ color:var(--gold-text); }
.why-final{ margin-top:40px; padding:40px 24px 36px; border-radius:var(--r); background:var(--night); color:var(--night-ink); border:1px solid var(--night-gold-line); }
.why-final p{ font-family:var(--serif); font-size:clamp(17px,2.2vw,22px); line-height:1.6; }
.why-final p b{ color:var(--night-gold-text); }
.why-final .small{ font-family:var(--sans); font-size:12.5px; line-height:1.75; color:var(--night-muted); margin-top:12px; }
.why-final .big{ margin-top:26px; font-size:clamp(18px,2.4vw,24px); }
.why-final .big strong{ color:var(--night-gold-text); }
.why-final .en-line{ margin-top:10px; }

/* 전자책 */
.ebook{ display:grid; gap:36px; align-items:start; }
@media (min-width:860px){ .ebook{ grid-template-columns:340px 1fr; gap:56px; } }
.ebook .prod .prod-body{ display:none; }
.ebook-info .h2{ margin-top:12px; }
.ebook-lead{ margin-top:16px; font-size:13.5px; line-height:1.75; color:var(--ink-muted); }
.ebook-info h3{ font-family:var(--serif); font-size:15px; font-weight:700; margin-top:28px; color:var(--ink); }
.ticks{ margin-top:10px; }
.ticks li{ position:relative; padding:7px 0 7px 22px; font-size:13px; line-height:1.6; color:var(--ink-muted); border-bottom:1px dashed var(--line); }
.ticks li::before{ content:""; position:absolute; left:2px; top:14px; width:9px; height:5px; border-left:1.5px solid var(--wine); border-bottom:1.5px solid var(--wine); transform:rotate(-45deg); }
.ebook-buy{ display:flex; align-items:center; justify-content:space-between; gap:16px; margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.ebook-buy .price{ font-family:var(--en); font-weight:600; font-size:30px; color:var(--ink); }
.ebook-buy .price small{ font-family:var(--sans); font-size:13px; margin-left:3px; color:var(--ink-faint); }
#free-start .free, #theory-cta .free, #free-ebook .free{ background:var(--night-2); border:1px solid var(--night-gold-line); }

/* 클래스 */
@media (min-width:720px){ .programs--two{ grid-template-columns:repeat(2,1fr); max-width:780px; margin-inline:auto; } }
.proc{ display:grid; gap:12px; }
@media (min-width:720px){ .proc{ grid-template-columns:repeat(2,1fr); gap:14px; } }
@media (min-width:1024px){ .proc{ grid-template-columns:repeat(4,1fr); } }
.proc-step{ padding:22px 20px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.proc-step .no{ font-family:var(--en); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--gold-text); }
.proc-step h3{ font-family:var(--serif); font-size:15.5px; font-weight:700; margin-top:10px; color:var(--ink); }
.proc-step p{ font-size:12.5px; line-height:1.7; color:var(--ink-faint); margin-top:8px; }

/* =====================================================================
   소개 : 대표 소개 · 스토리(챕터) · 연구 · 비전 (2026-11-01)
   ===================================================================== */
/* 사진 자리 : 내 컴퓨터에서 열 때(또는 주소 끝 ?slots)만 비어 있는 자리를 점선 상자로 보여준다. 실제 홈페이지에서는 숨김 (파일을 넣으면 사진으로 바뀜) */
.show-slots .story-img:not(.has-img){ display:flex !important; flex-direction:column; align-items:center; justify-content:center; gap:6px; text-align:center;
  padding:20px; background:var(--surface-200); border:1.5px dashed var(--line-gold); }
.story-img .slot-hint{ font-size:11.5px; color:var(--ink-faint); line-height:1.5; max-width:26em; }
.show-slots .night .story-img:not(.has-img){ background:var(--night-2); }

/* 대표 소개 */
.profile{ display:grid; gap:32px; align-items:center; }
@media (min-width:860px){ .profile{ grid-template-columns:340px 1fr; gap:56px; } }
.profile-text .h2{ margin-top:12px; }
.profile-lead{ font-family:var(--serif); font-size:clamp(15px,1.7vw,17px); line-height:1.7; color:var(--ink); margin-top:18px; }
.profile-text > p:not(.label):not(.profile-lead){ font-size:13.5px; line-height:1.8; color:var(--ink-muted); margin-top:12px; }
/* 예전 '대표 이야기'의 알약형 .creds 규칙을 덮어쓴다 : 한 줄에 하나씩, 글자 기준선을 맞춘다 */
.profile .creds{ display:block; margin-top:22px; border-top:1px solid var(--line); }
.profile .creds li{ display:flex; flex-wrap:wrap; align-items:baseline; gap:2px 12px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13px; line-height:1.5; }
.profile .creds li b{ font-weight:600; color:var(--ink); }
.profile .creds li span{ padding:0; border:0; border-radius:0; background:none; font-size:12px; line-height:1.5; color:var(--ink-faint); }

/* 스토리 : 챕터 */
.story{ max-width:900px; margin-inline:auto; }
.chapter{ display:grid; gap:14px; padding:40px 0; border-top:1px solid var(--line); }
.chapter:first-child{ border-top:0; padding-top:8px; }
@media (min-width:860px){ .chapter{ grid-template-columns:230px 1fr; gap:48px; } .ch-head{ position:sticky; top:calc(var(--hd-h) + 28px); align-self:start; } }
.ch-no{ font-family:var(--en); font-size:13px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--gold-text); }
.ch-head h3{ font-family:var(--serif); font-size:clamp(18px,2.1vw,21px); font-weight:700; line-height:1.5; margin-top:8px; color:var(--ink); text-wrap:balance; }
.ch-body > p{ font-size:13.5px; line-height:1.85; color:var(--ink-muted); }
.ch-body > p + p, .ch-body > * + p{ margin-top:12px; }
.ch-body b{ color:var(--ink); font-weight:600; }
.ch-body .story-img{ margin-top:22px; }
.ch-quote{ margin:22px 0 0; padding:4px 0 4px 18px; border-left:2px solid var(--wine); font-family:var(--serif); font-size:clamp(15px,1.7vw,17px); line-height:1.7; color:var(--ink); }
.ch-voices{ margin:16px 0 4px; padding:16px 20px; border-radius:var(--r); background:var(--surface-200); }
.ch-voices li{ font-family:var(--serif); font-size:14.5px; line-height:1.6; color:var(--ink); padding:7px 0; border-bottom:1px dashed var(--line); }
.ch-voices li:last-child{ border-bottom:0; }
.ch-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.ch-tags span{ font-size:12px; padding:5px 11px; border:1px solid var(--line-gold); border-radius:999px; color:var(--gold-text); }
.ch-model{ display:grid; gap:8px; margin-top:16px; }
@media (min-width:720px){ .ch-model{ grid-template-columns:repeat(3,1fr); } }
.ch-model div{ padding:16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-200); }
.ch-model div.is-key{ border-color:var(--wine); }
.ch-model b{ display:block; font-family:var(--serif); font-size:15.5px; color:var(--ink); }
.ch-model span{ display:block; font-size:12.5px; line-height:1.65; color:var(--ink-faint); margin-top:6px; }
.ch-model em{ font-style:normal; font-weight:600; color:var(--wine); }
.ch-list{ margin:12px 0 0; padding-left:20px; }
.ch-list li{ font-size:13.5px; line-height:1.75; color:var(--ink-muted); padding:4px 0; }
.ch-list li::marker{ color:var(--gold-text); font-family:var(--en); font-weight:600; }
.ch-nums{ display:grid; grid-template-columns:repeat(2,1fr); gap:8px; margin-top:18px; }
@media (min-width:720px){ .ch-nums{ grid-template-columns:repeat(4,1fr); } }
.ch-nums div{ padding:16px 12px; text-align:center; border:1px solid var(--line); border-radius:var(--r); }
.ch-nums b{ display:block; font-family:var(--en); font-weight:600; font-size:28px; line-height:1.1; color:var(--wine); }
.ch-nums span{ display:block; font-size:11.5px; color:var(--ink-faint); margin-top:6px; }
.ch-link{ margin-top:16px !important; }
.ch-link a{ display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--gold-text); }
.ch-link svg{ width:15px; height:15px; transition:transform .2s; }
.ch-link a:hover svg{ transform:translateX(3px); }

/* 연구 */
.rs-grid{ display:grid; gap:12px; }
@media (min-width:720px){ .rs-grid{ grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px){ .rs-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.rs-card{ padding:24px 22px; border:1px solid var(--night-line); border-radius:var(--r); background:var(--night-2); }
.rs-en{ font-family:var(--en); font-style:italic; font-size:14px; color:var(--night-gold-text); }
.rs-card h3{ font-family:var(--serif); font-size:16.5px; font-weight:700; margin-top:6px; color:var(--night-ink); }
.rs-what{ font-size:12.5px; line-height:1.65; color:var(--night-faint); margin-top:8px; }
.rs-to{ font-size:13px; line-height:1.6; color:var(--night-ink); margin-top:14px; padding-top:12px; border-top:1px dashed var(--night-line); }
.rs-to span{ color:var(--night-gold); }
.rs-nums{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; margin-top:28px; border:1px solid var(--night-gold-line); border-radius:var(--r); overflow:hidden; background:var(--night-gold-line); }
@media (min-width:720px){ .rs-nums{ grid-template-columns:repeat(4,1fr); } }
.rs-nums div{ padding:22px 12px; text-align:center; background:var(--night); }
.rs-nums b{ display:block; font-family:var(--en); font-weight:600; font-size:clamp(30px,3.6vw,40px); line-height:1; color:var(--night-gold-text); }
.rs-nums b small{ font-family:var(--sans); font-size:12px; font-weight:500; margin-left:3px; color:var(--night-muted); }
.rs-nums span{ display:block; font-size:12px; color:var(--night-muted); margin-top:8px; }

/* 비전 */
.vision{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px; max-width:860px; margin-inline:auto; }
@media (min-width:860px){ .vision{ grid-template-columns:repeat(4,1fr); gap:14px; } }
.vs-card{ padding:24px 18px; text-align:center; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-200); }
.vs-no{ font-family:var(--en); font-size:13px; font-weight:600; letter-spacing:.14em; color:var(--gold-text); }
.vs-card h3{ font-family:var(--serif); font-size:19px; font-weight:700; margin-top:6px; color:var(--ink); }
.vs-card p{ font-size:12.5px; line-height:1.6; color:var(--ink-faint); margin-top:8px; }
.vision-end{ margin-top:36px; text-align:center; font-family:var(--serif); font-size:clamp(15px,1.8vw,18px); line-height:1.75; color:var(--ink-muted); }
.vision-end strong{ color:var(--ink); }

/* 클래스 : 이런 공주 환영합니다 · 커리큘럼 8회 */
.fy-grid{ display:grid; gap:14px; }
@media (min-width:860px){ .fy-grid{ grid-template-columns:1fr 1fr; gap:18px; } }
.fy-card{ padding:30px 26px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); }
.fy-card.is-queen{ border-color:var(--line-gold); }
.fy-card .h2{ font-size:clamp(20px,2.4vw,25px); margin:10px 0 8px; }
.curri{ max-width:820px; margin:0 auto; padding:0; list-style:none; border-top:1px solid var(--line); }
.curri li{ display:grid; grid-template-columns:52px 1fr; gap:14px; padding:20px 4px; border-bottom:1px solid var(--line); }
.cu-n{ font-family:var(--en); font-size:24px; font-weight:600; line-height:1.1; color:var(--gold-text); }
.curri h3{ font-family:var(--serif); font-size:16px; font-weight:700; line-height:1.5; color:var(--ink); }
.curri h3 em{ font-style:normal; font-family:var(--sans); font-size:11px; font-weight:600; color:var(--wine); background:var(--wine-tint); padding:2px 8px; border-radius:999px; margin-left:6px; vertical-align:2px; }
.curri p{ font-size:13px; line-height:1.7; color:var(--ink-faint); margin-top:6px; }
.perks{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; max-width:820px; margin:32px auto 0; border:1px solid var(--line-gold); border-radius:var(--r); overflow:hidden; background:var(--line-gold); }
@media (min-width:720px){ .perks{ grid-template-columns:repeat(4,1fr); } }
.perks div{ padding:20px 10px; text-align:center; background:var(--surface-100); }
.perks b{ display:block; font-family:var(--en); font-weight:600; font-size:clamp(28px,3.2vw,36px); line-height:1; color:var(--wine); }
.perks b small{ font-family:var(--sans); font-size:12px; font-weight:500; margin-left:2px; color:var(--ink-faint); }
.perks span{ display:block; font-size:12px; color:var(--ink-muted); margin-top:8px; }
.curri-note{ max-width:820px; margin:14px auto 0; text-align:center; font-size:11.5px; color:var(--ink-faint); }

/* 클래스 : The Crown Fit Method (4단계 · 6개 모듈) */
.method-flow{ display:grid; grid-template-columns:repeat(2,1fr); gap:1px; max-width:820px; margin:0 auto 28px; border:1px solid var(--line-gold); border-radius:var(--r); overflow:hidden; background:var(--line-gold); }
@media (min-width:720px){ .method-flow{ grid-template-columns:repeat(4,1fr); } }
.method-flow span{ position:relative; display:flex; flex-direction:column; align-items:center; gap:2px; padding:14px 8px; background:var(--surface-100); font-size:11.5px; color:var(--ink-faint); }
.method-flow b{ font-family:var(--en); font-size:17px; font-weight:600; letter-spacing:.04em; color:var(--gold-text); }
.mods{ max-width:820px; margin:0 auto; padding:0; list-style:none; }
.phase{ display:flex; align-items:baseline; gap:10px; padding:26px 4px 10px; border-bottom:1px solid var(--line-gold); }
.phase:first-child{ padding-top:4px; }
.ph-no{ font-family:var(--en); font-size:12px; font-weight:600; letter-spacing:.18em; text-transform:uppercase; color:var(--wine); }
.ph-en{ font-family:var(--en); font-size:20px; font-weight:600; letter-spacing:.03em; color:var(--ink); }
.ph-ko{ font-size:12px; color:var(--ink-faint); }
.mod{ display:grid; gap:10px; padding:22px 4px; border-bottom:1px solid var(--line); }
@media (min-width:720px){ .mod{ grid-template-columns:120px 1fr; gap:24px; } }
.mod-side{ display:flex; align-items:center; gap:8px; }
@media (min-width:720px){ .mod-side{ flex-direction:column; align-items:flex-start; gap:8px; } }
.mod-no{ font-family:var(--en); font-size:12.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.mod-count{ font-size:11px; font-weight:600; color:var(--wine); background:var(--wine-tint); padding:2px 9px; border-radius:999px; }
.mod-en{ font-family:var(--en); font-style:italic; font-size:16px; color:var(--gold-text); line-height:1.3; }
.mod-main h3{ font-family:var(--serif); font-size:17px; font-weight:700; line-height:1.45; color:var(--ink); margin-top:2px; }
.mod-basis, .mod-out{ display:flex; align-items:baseline; gap:8px; font-size:12.5px; line-height:1.6; color:var(--ink-muted); margin-top:10px; }
.mod-basis span, .mod-out span{ flex:none; font-size:10.5px; font-weight:600; letter-spacing:.06em; padding:2px 7px; border-radius:2px; }
.mod-basis span{ color:var(--gold-text); border:1px solid var(--line-gold); }
.mod-out span{ color:var(--btn-fg); background:var(--btn-bg); }
.mod-out{ color:var(--ink); font-weight:500; }
.mod-desc{ font-size:13px; line-height:1.75; color:var(--ink-faint); margin-top:10px; }
#curriculum .sh .sub{ max-width:46em; }

/* 클래스 : 선발제 프라이빗 */
.price--private{ font-family:var(--serif) !important; font-size:15px !important; color:var(--gold-text); }
.prod--private .cv-badge{ letter-spacing:.14em; }
.pv-grid{ display:grid; gap:12px; max-width:880px; margin-inline:auto; }
@media (min-width:720px){ .pv-grid{ grid-template-columns:repeat(3,1fr); gap:14px; } }
.pv-card{ padding:26px 22px; text-align:center; border:1px solid var(--night-gold-line); border-radius:var(--r); background:var(--night-2); }
.pv-en{ font-family:var(--en); font-style:italic; font-size:18px; color:var(--night-gold-text); }
.pv-card h3{ font-family:var(--serif); font-size:17px; font-weight:700; margin-top:4px; color:var(--night-ink); }
.pv-card p:last-child{ font-size:12.5px; line-height:1.7; color:var(--night-muted); margin-top:10px; }
.pv-method{ max-width:880px; margin:28px auto 0; padding-top:24px; border-top:1px solid var(--night-line); text-align:center; font-size:14px; color:var(--night-ink); line-height:1.8; }
.pv-method b{ font-family:var(--en); font-size:18px; font-weight:600; letter-spacing:.04em; color:var(--night-gold-text); }
.pv-method span{ font-size:12.5px; color:var(--night-muted); }
.apply-box{ max-width:640px; margin:32px auto 0; padding:32px 24px; text-align:center; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-100); }
.apply-t{ font-family:var(--serif); font-size:clamp(16px,2vw,19px); color:var(--ink); margin:10px 0 20px; }
.apply-box small{ display:block; margin-top:14px; font-size:11.5px; color:var(--ink-faint); }
.ticks li b{ color:var(--ink); font-weight:600; }

/* 검사 선택지 : LITE 무료 · 정식 (지금은 안 씀 · 정식 검사는 진단 컨설팅에 포함) */
.cc-opts{ display:grid; gap:10px; margin:20px 0 12px; }
@media (min-width:560px){ .cc-opts{ grid-template-columns:1fr 1fr; } }
.cc-opt{ display:flex; flex-direction:column; gap:3px; padding:16px 16px 14px; border:1px solid var(--night-line); border-radius:var(--r); background:rgba(20,14,17,.45); color:var(--night-ink); transition:border-color .2s, transform .2s; }
.cc-opt:hover{ border-color:var(--night-gold-line); transform:translateY(-2px); }
.cc-opt .t{ font-family:var(--en); font-size:12px; font-weight:600; letter-spacing:.14em; color:var(--night-gold-text); }
.cc-opt b{ font-family:var(--serif); font-size:17px; font-weight:700; }
.cc-opt b s{ font-family:var(--sans); font-size:12px; font-weight:400; color:var(--night-faint); margin-right:4px; }
.cc-opt .m{ font-size:12px; color:var(--night-muted); }
.cc-opt .go{ margin-top:8px; font-size:12.5px; font-weight:600; color:var(--night-gold-text); }
.cc-opt.is-full{ border-color:var(--night-gold-line); background:linear-gradient(180deg, rgba(138,36,51,.35), rgba(20,14,17,.5)); }
.cc-deduct{ text-align:center; margin-top:20px; font-size:12.5px; color:var(--gold-text); }

/* 무료 간단 검사 표지 (그림 대신 글자로) */
.cc-cover{ background:var(--night); }
.cc-cover-in{ aspect-ratio:4/5; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:20px 14px;
  border:1px solid var(--night-gold-line); background:radial-gradient(ellipse at 50% 20%, rgba(138,36,51,.45), transparent 65%), var(--night-2); }
.cc-cover .cv-crest{ width:60px; color:var(--night-gold); }
.cc-cover .e{ margin-top:16px; font-size:9.5px; letter-spacing:.28em; color:var(--night-gold-text); }
.cc-cover .t{ margin-top:12px; font-family:var(--en); font-weight:600; font-size:34px; line-height:1.02; letter-spacing:.08em; color:var(--night-ink); }
.cc-cover .l{ margin-top:8px; font-family:var(--en); font-weight:600; font-size:14px; letter-spacing:.4em; padding-left:.4em; color:var(--night-gold-text); }
.cc-cover .r{ display:block; width:34px; height:1px; background:var(--night-gold-line); margin:16px auto 0; }
.cc-cover .s{ margin-top:14px; font-family:var(--serif); font-size:13px; line-height:1.6; color:var(--night-muted); }
.cc-cover .f{ margin-top:16px; font-family:var(--en); font-style:italic; font-size:12px; color:var(--night-faint); }

/* =====================================================================
   LEVEL TEST — 여왕 지수 진입 카드
   (테스트 본문·이론·게이지는 '러브테인_여왕 지수 테스트/' 폴더의 단독 페이지)
   ===================================================================== */
/* journey(3단계) 챕터 끝에서 검사로 잇는 CTA (어두운 구간) */
.journey-cta{ margin-top:52px; text-align:center; }
.journey-cta .jc-lead{ font-family:var(--serif); font-size:clamp(16.5px,2.1vw,22px); font-weight:700; color:var(--night-ink); line-height:1.5; }
.journey-cta .jc-lead em{ font-style:normal; color:var(--night-gold-text); }
.journey-cta .jc-sub{ margin-top:12px; font-size:12.5px; line-height:1.7; color:var(--night-muted); }
.journey-cta .btn{ margin-top:24px; }
.journey-cta + .more-link{ margin-top:28px; text-align:center; }

/* =====================================================================
   CROWN NARRATIVE — 왕관의 서사 10단계 (원리 페이지 · 어두운 구간)
   3막(형성 · 해체 · 통합) × 10단계. 기준 : 브랜드북 §5
   ===================================================================== */
.cn-quote{ margin-top:22px; font-family:var(--serif); font-size:clamp(14px,1.6vw,16.5px); line-height:1.6; color:var(--night-gold-text); }
.cn-quote cite{ display:block; margin-top:4px; font-family:var(--sans); font-style:normal; font-size:11.5px; color:var(--night-faint); }
.cn-acts{ display:grid; gap:14px; }
.cn-act{ border:1px solid var(--night-line); border-top:2px solid var(--act-c); border-radius:var(--r); background:var(--night-2); padding:22px 20px 6px; }
.cn-act.s1{ --act-c:#8a2433; --ref-c:#e59a8c; }
.cn-act.s2{ --act-c:#e9dcc6; --ref-c:#cdbfb8; }
.cn-act.s3{ --act-c:var(--night-gold); --ref-c:var(--night-gold-text); border-color:var(--night-gold-line); }
.cn-act-head{ display:flex; align-items:baseline; gap:12px; padding-bottom:16px; border-bottom:1px solid var(--night-line); }
.cn-roman{ font-family:var(--en); font-weight:600; font-size:26px; line-height:1; color:var(--act-c); }
.cn-act-head h3{ font-family:var(--serif); font-size:17px; font-weight:700; color:var(--night-ink); }
.cn-act-head small{ display:block; margin-top:4px; font-family:var(--sans); font-size:11.5px; font-weight:400; color:var(--night-faint); }
.cn-steps{ list-style:none; padding:0; }
.cn-step{ display:grid; grid-template-columns:32px 1fr; gap:12px; padding:16px 0; }
.cn-step + .cn-step{ border-top:1px solid var(--night-line); }
.cn-no{ font-family:var(--en); font-weight:600; font-size:20px; line-height:1.2; color:var(--act-c); font-variant-numeric:lining-nums; }
.cn-step h4{ display:flex; flex-wrap:wrap; align-items:baseline; gap:4px 9px; font-family:var(--serif); font-size:17px; font-weight:700; letter-spacing:.04em; color:var(--night-ink); }
.cn-en{ font-family:var(--en); font-size:11.5px; font-weight:600; letter-spacing:.14em; text-transform:uppercase; color:var(--ref-c); }
.cn-step p{ margin-top:6px; font-size:12.5px; line-height:1.7; color:var(--night-muted); }
.cn-step .cn-ref{ margin-top:8px; font-size:11px; line-height:1.5; color:var(--ref-c); }
.cn-ref span{ font-family:var(--en); font-size:12px; letter-spacing:.02em; font-variant-numeric:lining-nums; white-space:nowrap; }
.cn-act.s1 .cn-roman, .cn-act.s1 .cn-no{ color:var(--ref-c); }
.cn-act.s3 .cn-step:last-child h4{ color:var(--night-gold-text); }
.cn-note{ margin-top:24px; text-align:center; font-size:11.5px; line-height:1.7; color:var(--night-faint); }
@media (min-width:1024px){ .cn-acts{ grid-template-columns:repeat(3,1fr); gap:16px; align-items:start; } }

/* ---------- 무료 전자책 신청 (ebook.html #free-ebook) : 신청 → 구글폼 접수 → 다운로드 ---------- */
[hidden]{ display:none !important; }
.eb-book{ position:relative; aspect-ratio:148/210; width:min(240px, 64%); margin-inline:auto; overflow:hidden; border-radius:2px; background:var(--night);
  box-shadow:0 24px 50px -20px rgba(0,0,0,.75), 0 0 0 1px rgba(216,184,106,.28); transform:rotate(-2deg); }
.eb-book::before{ content:""; position:absolute; inset:0; background:url('images/E1_전자책_표지.webp') center top / cover no-repeat; }
.eb-book::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(20,14,17,.96) 8%, rgba(20,14,17,.55) 40%, rgba(20,14,17,0) 64%); }
.eb-book-in{ position:absolute; inset:auto 0 0; z-index:1; padding:0 9% 9%; color:var(--night-ink); }
.eb-book .k{ font-family:var(--en); font-size:9.5px; font-weight:600; letter-spacing:.22em; text-transform:uppercase; color:var(--night-gold-text); }
.eb-book .t{ margin-top:6px; font-family:var(--serif); font-weight:700; font-size:clamp(18px,2.4vw,22px); line-height:1.25; letter-spacing:-.02em; }
.eb-book .s{ margin-top:6px; font-family:var(--serif); font-size:10.5px; line-height:1.55; color:var(--night-muted); }
.eb-book--sm{ width:110px; transform:none; } .eb-book--sm .k, .eb-book--sm .s{ display:none; } .eb-book--sm .t{ font-size:12px; }
.eb-scenes{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.eb-scenes span{ font-size:11.5px; color:var(--night-gold-text); border:1px solid var(--night-gold-line); border-radius:999px; padding:4px 10px; }

.eb-apply{ max-width:640px; margin:36px auto 0; padding:8px 26px 30px; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-200); }
.eb-apply .eb-fs{ border:0; margin:0; padding:24px 0; min-width:0; }
.eb-apply .eb-fs + .eb-fs{ border-top:1px solid var(--line); }
.eb-apply .eb-fs > :not(legend){ clear:both; }
.eb-apply legend{ float:left; width:100%; padding:0; display:flex; align-items:baseline; gap:10px; font-family:var(--serif); font-size:15.5px; font-weight:700; color:var(--ink); }
.eb-apply legend .n{ font-family:var(--en); font-style:italic; font-weight:600; font-size:15px; color:var(--gold-text); }
.eb-apply legend small{ font-family:var(--sans); font-size:12px; font-weight:400; color:var(--ink-faint); margin-left:-4px; }
.eb-apply legend .req{ margin-left:-6px; }
.eb-apply .req{ color:var(--wine); margin-left:2px; }
.eb-apply .eb-hint{ margin-top:8px; font-size:12px; line-height:1.7; color:var(--ink-faint); }
.eb-fields{ margin-top:16px; display:grid; gap:14px; }
@media (min-width:600px){ .eb-fields.two{ grid-template-columns:1fr 1fr; } }
.eb-f label{ display:block; font-size:12.5px; font-weight:500; color:var(--ink-muted); margin-bottom:6px; }
.eb-f label small{ color:var(--ink-faint); font-weight:400; }
.eb-f input, .eb-f textarea{ width:100%; padding:13px 14px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100);
  font:inherit; font-size:16px; line-height:1.5; color:var(--ink); transition:border-color .2s, box-shadow .2s; -webkit-appearance:none; appearance:none; }
.eb-f textarea{ min-height:100px; resize:vertical; }
.eb-f input::placeholder, .eb-f textarea::placeholder{ color:var(--ink-faint); opacity:.7; }
.eb-f input:focus, .eb-f textarea:focus{ outline:none; border-color:var(--wine); box-shadow:0 0 0 3px var(--wine-tint); }
.eb-f .tip{ margin-top:6px; font-size:11.5px; color:var(--ink-faint); }
.eb-err{ display:none; margin-top:6px; font-size:12px; color:var(--wine); }
.is-bad > .eb-err, .is-bad + .eb-err{ display:block; }
.eb-f.is-bad input, .eb-chips.is-bad .eb-chip span, .eb-check.is-bad .box{ border-color:var(--wine); }
.eb-chips{ margin-top:16px; display:flex; flex-wrap:wrap; gap:8px; }
.eb-chip input, .eb-check input{ position:absolute; opacity:0; pointer-events:none; }
.eb-chip span{ display:inline-flex; align-items:center; min-height:42px; padding:0 16px; border:1px solid var(--line); border-radius:var(--r);
  background:var(--surface-100); font-size:13px; color:var(--ink-muted); cursor:pointer; transition:.2s; }
.eb-chip span:hover{ border-color:var(--wine); color:var(--ink); }
.eb-chip input:checked + span{ border-color:var(--wine); background:var(--wine-tint); color:var(--ink); font-weight:600; }
.eb-chip input:focus-visible + span, .eb-check input:focus-visible + .box{ outline:2px solid var(--wine); outline-offset:2px; }
.eb-check{ margin-top:14px; display:flex; gap:12px; align-items:flex-start; cursor:pointer; font-size:13px; color:var(--ink); }
.eb-check .box{ flex-shrink:0; width:20px; height:20px; margin-top:1px; border:1.5px solid var(--line-gold); border-radius:2px; display:grid; place-items:center; transition:.2s; }
.eb-check .box svg{ width:13px; height:13px; color:var(--btn-fg); opacity:0; }
.eb-check input:checked + .box{ background:var(--btn-bg); border-color:var(--btn-bg); }
.eb-check input:checked + .box svg{ opacity:1; }
.eb-check small{ display:block; margin-top:2px; font-size:12px; color:var(--ink-faint); }
.eb-check.soft{ font-size:12.5px; color:var(--ink-muted); }
.eb-privacy{ margin:14px 0 0; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); font-size:12px; line-height:1.75; color:var(--ink-faint); }
.eb-privacy dt{ font-weight:600; color:var(--ink-muted); }
.eb-privacy dd{ margin:0 0 6px; }
.eb-submit{ padding-top:26px; border-top:1px solid var(--line); text-align:center; }
.eb-submit .btn, .eb-done .btn-primary{ width:100%; max-width:360px; }
.eb-submit p{ margin-top:12px; font-size:12px; color:var(--ink-faint); }
.eb-form-err{ display:none; margin-top:14px; padding:12px 14px; border:1px solid var(--wine); border-radius:var(--r); background:var(--wine-tint); font-size:12.5px; color:var(--ink); text-align:left; }
.eb-form-err.on{ display:block; }
.eb-form-err a{ color:var(--wine); text-decoration:underline; }
.btn[disabled]{ opacity:.55; cursor:wait; }

.eb-done{ max-width:640px; margin:36px auto 0; text-align:center; padding:36px 24px 30px; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-200); }
.eb-done:focus{ outline:none; }
.eb-done .eb-book{ margin-bottom:22px; }
.eb-done h3{ font-family:var(--serif); font-size:clamp(19px,2.4vw,23px); font-weight:700; color:var(--ink); }
.eb-done > p{ margin-top:12px; font-size:13px; line-height:1.85; color:var(--ink-muted); }
.eb-done .btn-primary{ margin-top:22px; }
.eb-done .btn .dl{ transform:rotate(90deg); }
.eb-done .small{ margin-top:14px; font-size:12px; color:var(--ink-faint); }
.eb-done .small a{ text-decoration:underline; }
.eb-next{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); text-align:left; display:grid; gap:8px; }
.eb-next a{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 16px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-100); transition:border-color .2s; }
.eb-next a:hover{ border-color:var(--wine); }
.eb-next b{ font-size:13px; font-weight:600; color:var(--ink); }
.eb-next small{ display:block; font-size:11.5px; color:var(--ink-faint); }
.eb-next svg{ width:16px; height:16px; flex-shrink:0; color:var(--gold-text); }

/* =====================================================================
   푸터 약관 링크 · 약관/개인정보처리방침 문서 · 칼럼 본문 · 404 (2026-11-02)
   ===================================================================== */
.ft-legal{ margin-top:18px; display:flex; flex-wrap:wrap; gap:6px 18px; }
.ft-legal a{ color:var(--night-muted); text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--night-line); transition:color .2s; }
.ft-legal a:hover{ color:var(--night-gold-text); }
.ft-legal b{ color:var(--night-ink); font-weight:600; }

/* 약관 · 개인정보처리방침 */
.doc{ max-width:760px; margin:0 auto; font-size:13px; line-height:1.9; color:var(--ink-muted); }
.doc-meta{ padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); background:var(--surface-200); font-size:12.5px; color:var(--ink-faint); }
.doc-meta b{ color:var(--ink); font-weight:600; }
.doc-toc{ margin-top:22px; display:grid; gap:2px 18px; counter-reset:toc; font-size:12.5px; }
@media (min-width:720px){ .doc-toc{ grid-template-columns:1fr 1fr; } }
.doc-toc a{ color:var(--ink-faint); padding:3px 0; display:inline-block; }
.doc-toc a:hover{ color:var(--wine); }
.doc h2{ margin-top:44px; padding-top:22px; border-top:1px solid var(--line); font-family:var(--serif); font-size:16.5px; font-weight:700; line-height:1.5; color:var(--ink); }
.doc h2 .no{ font-family:var(--en); font-style:italic; font-weight:600; color:var(--gold-text); margin-right:8px; }
.doc h3{ margin-top:20px; font-size:13.5px; font-weight:600; color:var(--ink); }
.doc p, .doc ul, .doc ol, .doc table{ margin-top:10px; }
.doc ul{ list-style:none; padding:0; }
.doc ul > li{ position:relative; padding-left:14px; }
.doc ul > li::before{ content:""; position:absolute; left:2px; top:.85em; width:4px; height:4px; border-radius:50%; background:var(--gold); }
.doc ol{ padding-left:20px; }
.doc ol > li + li, .doc ul > li + li{ margin-top:4px; }
.doc a{ color:var(--wine); text-decoration:underline; text-underline-offset:3px; }
.doc strong{ color:var(--ink); font-weight:600; }
.doc-tbl{ width:100%; overflow-x:auto; -webkit-overflow-scrolling:touch; }
.doc table{ width:100%; min-width:520px; border-collapse:collapse; font-size:12.5px; line-height:1.7; }
.doc th, .doc td{ border:1px solid var(--line); padding:10px 12px; text-align:left; vertical-align:top; }
.doc th{ background:var(--surface-200); color:var(--ink); font-weight:600; white-space:nowrap; }
.doc-note{ margin-top:48px; font-size:12px; color:var(--ink-faint); }

/* 칼럼 본문 (column-ep00.html) */
.art-hero .art-cat{ display:inline-flex; gap:10px; align-items:center; margin-top:14px; font-size:12px; color:var(--night-gold-text); }
.art-hero .art-cat span + span::before{ content:"·"; margin-right:10px; color:var(--night-faint); }
.art-hero .lead{ font-family:var(--serif); }
.article{ max-width:680px; margin:0 auto; font-size:14.5px; line-height:2; color:var(--ink-muted); }
.article > p + p{ margin-top:18px; }
.article .art-open{ font-family:var(--serif); font-size:clamp(17px,2.1vw,19.5px); line-height:1.75; font-weight:700; color:var(--ink); }
.article .art-open + p{ margin-top:20px; }
.article h2{ margin:56px 0 20px; padding-top:26px; border-top:1px solid var(--line-gold); font-family:var(--serif); font-size:clamp(17px,2vw,19.5px); font-weight:700; line-height:1.55; color:var(--ink); }
.article h2 em{ font-style:normal; color:var(--gold-text); }
.article .art-list{ margin:18px 0 22px; padding:18px 22px; border-left:2px solid var(--wine); background:var(--surface-200); border-radius:0 var(--r) var(--r) 0; list-style:none; counter-reset:al; }
.article .art-list li{ counter-increment:al; position:relative; padding-left:26px; }
.article .art-list li + li{ margin-top:8px; }
.article .art-list li::before{ content:counter(al); position:absolute; left:0; top:0; font-family:var(--en); font-weight:600; font-size:16px; color:var(--wine); }
.article .art-list.is-queen{ border-left-color:var(--gold); }
.article .art-list.is-queen li::before{ color:var(--gold-text); }
.article .art-last{ margin-top:40px; text-align:center; font-family:var(--serif); font-size:clamp(16px,1.9vw,18.5px); font-weight:700; color:var(--ink); }
.article .art-ref{ margin-top:40px; padding-top:18px; border-top:1px solid var(--line); font-size:11.5px; line-height:1.7; color:var(--ink-faint); }
.art-cta{ max-width:680px; margin:48px auto 0; padding:28px 24px; text-align:center; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-200); }
.art-cta p{ font-family:var(--serif); font-size:15.5px; font-weight:700; color:var(--ink); line-height:1.6; }
.art-cta small{ display:block; margin-top:6px; font-size:12px; color:var(--ink-faint); }
.art-cta .btn{ margin-top:18px; }
.art-nav{ max-width:680px; margin:28px auto 0; display:grid; gap:10px; }
@media (min-width:600px){ .art-nav{ grid-template-columns:1fr 1fr; } }
.art-nav a{ display:block; padding:16px 18px; border:1px solid var(--line); border-radius:var(--r); transition:border-color .2s; }
.art-nav a:hover{ border-color:var(--wine); }
.art-nav a.next{ text-align:right; }
.art-nav small{ display:block; font-family:var(--en); font-size:11.5px; letter-spacing:.14em; text-transform:uppercase; color:var(--gold-text); }
.art-nav b{ display:block; margin-top:4px; font-size:13px; font-weight:600; color:var(--ink); line-height:1.5; }
.art-nav .all{ grid-column:1/-1; text-align:center; }

/* 404 */
.nf{ min-height:70vh; display:grid; place-items:center; text-align:center; padding:96px 0; }
.nf svg.c{ width:84px; margin:0 auto; color:var(--night-gold); transform:rotate(-14deg); opacity:.9; }
.nf .label{ margin-top:26px; }
.nf h1{ margin-top:12px; font-family:var(--serif); font-size:clamp(22px,3vw,30px); font-weight:700; color:var(--night-ink); line-height:1.5; }
.nf p{ margin-top:14px; font-size:13px; color:var(--night-muted); line-height:1.8; }
.nf .btns{ margin-top:30px; display:flex; flex-wrap:wrap; gap:10px; justify-content:center; }
.article h2 .k{ display:block; margin-bottom:6px; font-family:var(--sans); font-size:12px; font-weight:600; letter-spacing:.06em; color:var(--gold-text); }
.article .art-quote{ margin:22px 0; padding:22px 24px; text-align:center; font-family:var(--serif); font-size:clamp(15.5px,1.8vw,17.5px); line-height:1.75; font-weight:700; color:var(--ink); border-top:1px solid var(--line-gold); border-bottom:1px solid var(--line-gold); }
.article sup{ font-size:.7em; color:var(--gold-text); }

/* ---------- 클래스 지원 박스 : 버튼 두 개 (카카오톡 지원 문의 · 진단 컨설팅 먼저) ---------- */
.apply-btns{ display:flex; flex-wrap:wrap; justify-content:center; gap:10px; }
@media (max-width:519px){ .apply-btns .btn{ flex:1 1 100%; } }

/* ---------- 보호막 해체 워크북 표지 (ebook.html #workbook) : 그림 없이 CSS 로 그린 가죽 양장본 · 금박 ---------- */
.wb-book{ --foil:linear-gradient(160deg,#f6e4ad 0%,#d9b664 28%,#a9852f 50%,#ecd18a 70%,#b8923c 100%);
  margin:0 auto; width:min(310px,80%); padding:6px 0 40px; perspective:1500px; }
.wb-cover{ position:relative; aspect-ratio:3/4; border-radius:2px 7px 7px 2px; overflow:visible;
  background:
    linear-gradient(115deg, rgba(255,240,220,.10) 0%, rgba(255,240,220,0) 32%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E"),
    radial-gradient(130% 90% at 32% 18%, #4a1a27 0%, #2a1018 46%, #160a0f 100%);
  box-shadow:
    inset 0 0 0 1px rgba(216,184,106,.22), inset 0 0 40px rgba(0,0,0,.55),
    3px 2px 0 -1px #efe4cd, 5px 4px 0 -1px #d9cbae, 7px 6px 0 -2px #c4b494,
    26px 34px 46px -16px rgba(0,0,0,.85);
  transform:rotateY(-13deg) rotateX(3deg); transform-origin:left center; transition:transform .8s cubic-bezier(.2,.7,.2,1); }
.wb-book:hover .wb-cover{ transform:rotateY(-5deg) rotateX(1deg); }
.wb-spine{ position:absolute; left:0; top:0; bottom:0; width:18px; border-radius:2px 0 0 2px;
  background:linear-gradient(90deg, rgba(0,0,0,.55), rgba(255,235,210,.07) 45%, rgba(0,0,0,.35) 75%, rgba(216,184,106,.35) 92%, rgba(0,0,0,.4)); }
.wb-frame{ position:absolute; inset:16px 14px 16px 30px; border:1px solid transparent; pointer-events:none;
  border-image:var(--foil) 1; }
.wb-frame::before{ content:""; position:absolute; inset:5px; border:1px solid rgba(216,184,106,.32); }
.wb-orn{ position:absolute; width:30px; height:30px; color:#d6b25e; }
.wb-orn.tl{ left:-1px; top:-1px; } .wb-orn.tr{ right:-1px; top:-1px; transform:scaleX(-1); }
.wb-orn.bl{ left:-1px; bottom:-1px; transform:scaleY(-1); } .wb-orn.br{ right:-1px; bottom:-1px; transform:scale(-1,-1); }
.wb-in{ position:absolute; inset:16px 14px 16px 30px; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; padding:18px 14px 52px; }
.wb-ed, .wb-s, .wb-foot{ font-family:var(--en); font-weight:600; text-transform:uppercase; color:#d9bd78; }
.wb-ed{ font-size:10.5px; letter-spacing:.42em; padding-left:.42em; }
.wb-medal{ margin-top:18px; width:82px; height:82px; display:grid; place-items:center; border-radius:50%;
  background:radial-gradient(circle at 35% 30%, #3b1620, #1a0b11 70%);
  box-shadow:0 0 0 1px rgba(216,184,106,.55), 0 0 0 5px rgba(20,10,15,.9), 0 0 0 6px rgba(216,184,106,.3), inset 0 2px 6px rgba(0,0,0,.6); }
.wb-medal svg{ width:66px; color:#dcbc6c; filter:drop-shadow(0 1px 0 rgba(0,0,0,.7)); }
.wb-t{ margin-top:22px; font-family:var(--serif); font-weight:700; font-size:clamp(22px,2.4vw,26px); line-height:1.32; letter-spacing:.02em;
  background:var(--foil); -webkit-background-clip:text; background-clip:text; color:transparent; filter:drop-shadow(0 1px 0 rgba(0,0,0,.75)); }
.wb-rule{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.wb-rule::before, .wb-rule::after{ content:""; width:30px; height:1px; background:linear-gradient(90deg,transparent,#c9a654); }
.wb-rule::after{ transform:scaleX(-1); }
.wb-rule i{ width:5px; height:5px; background:#d6b25e; transform:rotate(45deg); }
.wb-s{ margin-top:14px; font-size:11px; letter-spacing:.2em; font-style:italic; text-transform:none; color:#cdb98a; }
.wb-foot{ position:absolute; left:0; right:0; bottom:24px; font-size:10px; letter-spacing:.5em; padding-left:.5em; color:#b99a55; }
.wb-ribbon{ position:absolute; bottom:-30px; left:64%; width:15px; height:58px; z-index:-1;
  background:linear-gradient(90deg,#5a1420,#a32d3f 45%,#7a1f2d);
  clip-path:polygon(0 0,100% 0,100% 100%,50% 84%,0 100%); box-shadow:0 2px 4px rgba(0,0,0,.4); }
.wb-status{ margin-top:28px; padding-top:20px; border-top:1px solid var(--line); }
.wb-status p{ font-size:12.5px; line-height:1.7; color:var(--ink-faint); display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; }
.wb-pill{ display:inline-flex; align-items:center; height:26px; padding:0 12px; border:1px solid var(--line-gold); border-radius:999px;
  font-size:11.5px; font-weight:600; letter-spacing:.06em; color:var(--gold-text); background:var(--gold-tint); }
.wb-btns{ display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
@media (max-width:519px){ .wb-btns .btn{ flex:1 1 100%; } }
@media (prefers-reduced-motion:reduce){ .wb-cover{ transition:none; } }

/* ---------- 소개 STORY : 사진 설명 · 플레이리스트 카드 (2026-11-02) ---------- */
.ch-cap{ margin-top:10px !important; font-size:12px !important; line-height:1.7 !important; color:var(--ink-faint) !important; }
.ch-song{ margin-top:20px; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:16px; max-width:460px;
  padding:16px 18px; border:1px solid var(--line-gold); border-radius:var(--r); background:var(--surface-200); }
.cs-disc{ width:58px; height:58px; border-radius:50%; flex-shrink:0;
  background:radial-gradient(circle, #e4cb92 0 4px, #8a2433 5px 17px, transparent 18px), repeating-radial-gradient(circle, #1a1215 0 2px, #2c2126 2px 4px);
  box-shadow:0 0 0 1px rgba(216,184,106,.35); animation:csSpin 9s linear infinite; }
@keyframes csSpin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .cs-disc{ animation:none; } }
.cs-k{ font-size:11px; letter-spacing:.06em; color:var(--gold-text); }
.cs-t{ margin-top:3px; font-family:var(--en); font-size:19px; font-weight:600; line-height:1.2; color:var(--ink); }
.cs-t small{ font-size:13px; color:var(--ink-faint); font-weight:500; }
.cs-a{ margin-top:2px; font-size:12px; color:var(--ink-faint); }
.cs-n{ text-align:right; }
.cs-n b{ display:block; font-family:var(--en); font-size:32px; font-weight:600; line-height:1; color:var(--wine); }
.cs-n span{ font-size:11px; color:var(--ink-faint); }