/* =========================================================
   고상철 — Quiet Authority
   Shared design system (dark editorial luxury)
   ========================================================= */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@300;400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=IBM+Plex+Sans+KR:wght@300;400;500;600;700&family=Noto+Sans+KR:wght@300;400;500;600;700&display=swap');

:root{
  /* ---- non-color ---- */
  --maxw: 1240px;
  --gutter: clamp(20px, 5vw, 64px);
  --serif: 'Pretendard', 'Pretendard Variable', system-ui, sans-serif;
  --latin: 'Pretendard', 'Pretendard Variable', system-ui, sans-serif;
  --sans: 'Pretendard', system-ui, sans-serif;
  --ease: cubic-bezier(.22,.61,.36,1);

  /* ============================================================
     LIGHT THEMES — token names kept; values redefined light.
     --ink* = light page surfaces · --on-dark* = dark text on them
     --paper* = contrast (deeper light) band · --gold* = accent
     --on-accent = text on accent · --invert/--on-invert = dramatic
     dark fill (index hover) · --spot = hero spotlight glow
     Default below = Theme 3 (Greige & Clay · Claude-style), tuned to the
     onboarding deck palette (cream #FAF9F6 · coral #D45F3D · charcoal #1B1B1F).
     ============================================================ */
  --ink:        #f3efe6;
  --ink-2:      #ece6db;
  --ink-3:      #e4ddce;
  --ink-line:   rgba(38,28,20,.13);
  --paper:      #ece3d4;
  --paper-2:    #e2d6c1;
  --paper-line: rgba(38,28,20,.15);

  --gold:       #c0573a;
  --gold-soft:  #d4674a;
  --gold-deep:  #8e3a22;

  --on-dark:        #211c17;
  --on-dark-dim:    #5f574b;
  --on-dark-faint:  #9a9082;
  --on-paper:       #211c17;
  --on-paper-dim:   #5f574b;

  --on-accent:  #ffffff;
  --invert:     #1b1b1f;
  --on-invert:  #faf9f6;
  --spot:       #fbf8f2;
}

/* Theme 1 — Ivory & Gold (explicit, = :root default) */
[data-theme="ivory"]{
  --ink:#f4efe4; --ink-2:#ece5d6; --ink-3:#e6ddca;
  --ink-line:rgba(40,32,18,.14);
  --paper:#e8dec9; --paper-2:#ddd0b6; --paper-line:rgba(40,32,18,.16);
  --gold:#a9823b; --gold-soft:#c0a05a; --gold-deep:#855f24;
  --on-dark:#241d12; --on-dark-dim:#675f4e; --on-dark-faint:#9a917b;
  --on-paper:#241d12; --on-paper-dim:#5f5642;
  --on-accent:#2a2113; --invert:#201a10; --on-invert:#f4efe4; --spot:#fdfaf3;
}

/* Theme 2 — Cool Stone & Steel Blue */
[data-theme="stone"]{
  --ink:#eef1f3; --ink-2:#e4e8ec; --ink-3:#dce2e7;
  --ink-line:rgba(24,34,44,.13);
  --paper:#e1e6ea; --paper-2:#d2dae1; --paper-line:rgba(24,34,44,.15);
  --gold:#3f6079; --gold-soft:#5a7e9b; --gold-deep:#2e4860;
  --on-dark:#19222b; --on-dark-dim:#566069; --on-dark-faint:#929aa3;
  --on-paper:#19222b; --on-paper-dim:#505a64;
  --on-accent:#ffffff; --invert:#162029; --on-invert:#eef1f3; --spot:#fafcfd;
}

/* Theme 3 — Greige & Clay (tuned to onboarding-deck palette) */
[data-theme="clay"]{
  --ink:#f3efe6; --ink-2:#ece6db; --ink-3:#e4ddce;
  --ink-line:rgba(38,28,20,.13);
  --paper:#ece3d4; --paper-2:#e2d6c1; --paper-line:rgba(38,28,20,.15);
  --gold:#c0573a; --gold-soft:#d4674a; --gold-deep:#8e3a22;
  --on-dark:#211c17; --on-dark-dim:#5f574b; --on-dark-faint:#9a9082;
  --on-paper:#211c17; --on-paper-dim:#5f574b;
  --on-accent:#ffffff; --invert:#1b1b1f; --on-invert:#faf9f6; --spot:#fbf8f2;
}

/* Theme 4 — Midnight (dark UI) */
[data-theme="midnight"]{
  --ink:#0b0b0e; --ink-2:#131319; --ink-3:#1b1b22;
  --ink-line:rgba(255,255,255,.11);
  --paper:#15151c; --paper-2:#1d1d25; --paper-line:rgba(255,255,255,.09);
  --gold:#c6a463; --gold-soft:#dcc08a; --gold-deep:#caa765;
  --on-dark:#ece8df; --on-dark-dim:#a09b90; --on-dark-faint:#6e6b63;
  --on-paper:#ece8df; --on-paper-dim:#a09b90;
  --on-accent:#0b0b0e; --invert:#ece8df; --on-invert:#0b0b0e; --spot:#16161e;
}

/* Theme 5 — Deep Navy & Champagne (금융·법조 신뢰감) */
[data-theme="navy"]{
  --ink:#0a1220; --ink-2:#0f1a2c; --ink-3:#152238;
  --ink-line:rgba(215,225,245,.12);
  --paper:#101c30; --paper-2:#16243c; --paper-line:rgba(215,225,245,.09);
  --gold:#d3b878; --gold-soft:#e4cd96; --gold-deep:#d6bc7e;
  --on-dark:#e9ecf3; --on-dark-dim:#9aa5b8; --on-dark-faint:#66718a;
  --on-paper:#e9ecf3; --on-paper-dim:#9aa5b8;
  --on-accent:#0a1220; --invert:#e9ecf3; --on-invert:#0a1220; --spot:#13203a;
}

/* Theme 6 — Deep Forest & Brass (헤리티지 · 품격) */
[data-theme="forest"]{
  --ink:#0c1410; --ink-2:#111c16; --ink-3:#17251d;
  --ink-line:rgba(222,236,226,.11);
  --paper:#122019; --paper-2:#182a20; --paper-line:rgba(222,236,226,.09);
  --gold:#c9a35c; --gold-soft:#dcbd7f; --gold-deep:#cda85f;
  --on-dark:#e8ede8; --on-dark-dim:#9cab9e; --on-dark-faint:#69796c;
  --on-paper:#e8ede8; --on-paper-dim:#9cab9e;
  --on-accent:#0c1410; --invert:#e8ede8; --on-invert:#0c1410; --spot:#152720;
}

/* ---- font toggle (body sans) ---- */
[data-font="plex"]{ --sans:'IBM Plex Sans KR','Pretendard',system-ui,sans-serif; }
[data-font="noto"]{ --sans:'Noto Sans KR','Pretendard',system-ui,sans-serif; }

*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; }
body{
  font-family:var(--sans);
  background:var(--ink);
  color:var(--on-dark);
  line-height:1.7;
  font-size:17px;
  letter-spacing:-.01em;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
::selection{ background:var(--gold); color:var(--on-accent); }

/* ---------- layout ---------- */
.wrap{ max-width:var(--maxw); margin:0 auto; padding-inline:var(--gutter); }
.section{ padding-block:clamp(72px,11vw,148px); }
.section--tight{ padding-block:clamp(54px,8vw,96px); }

/* ---------- type ---------- */
.serif{ font-family:var(--serif); font-weight:500; letter-spacing:-.02em; line-height:1.18; }
.display-xl{ font-family:var(--serif); font-weight:600; font-size:clamp(2.9rem,7vw,6rem); line-height:1.04; letter-spacing:-.03em; }
.display{ font-family:var(--serif); font-weight:500; font-size:clamp(2.2rem,4.6vw,3.9rem); line-height:1.12; letter-spacing:-.025em; }
.h2{ font-family:var(--serif); font-weight:500; font-size:clamp(1.8rem,3.3vw,2.9rem); line-height:1.18; letter-spacing:-.02em; }
.h3{ font-family:var(--serif); font-weight:500; font-size:clamp(1.25rem,2vw,1.6rem); line-height:1.3; letter-spacing:-.01em; }
.lead{ font-size:clamp(1.05rem,1.5vw,1.28rem); line-height:1.75; color:var(--on-dark-dim); font-weight:300; }
.body-dim{ color:var(--on-dark-dim); font-weight:300; }

.eyebrow{
  font-family:var(--sans); font-weight:600;
  font-size:.72rem; letter-spacing:.34em; text-transform:uppercase;
  color:var(--gold); display:inline-flex; align-items:center; gap:.85em;
}
.eyebrow::before{ content:""; width:34px; height:1px; background:var(--gold); opacity:.6; }
.eyebrow.no-rule::before{ display:none; }

.num-label{ font-family:var(--latin); font-weight:500; font-style:italic; color:var(--gold); }

/* paper inversion */
.paper{ background:var(--paper); color:var(--on-paper); }
.paper .lead{ color:var(--on-paper-dim); }
.paper .eyebrow{ color:var(--gold-deep); }
.paper .eyebrow::before{ background:var(--gold-deep); }
.paper .body-dim{ color:var(--on-paper-dim); }
.paper .num-label{ color:var(--gold-deep); }

/* ---------- nav ---------- */
.nav{
  position:fixed; inset:0 0 auto 0; z-index:100;
  display:flex; align-items:center; justify-content:space-between;
  padding:18px var(--gutter);
  transition:background .45s var(--ease), padding .45s var(--ease), border-color .45s;
  border-bottom:1px solid transparent;
  /* fallback for in-app browsers (KakaoTalk/Naver/Instagram) that don't support color-mix:
     an opaque theme-colored bar so the menu is ALWAYS visible. */
  background:var(--ink);
  /* soft scrim so menu text stays legible over the hero photo before scroll (modern browsers) */
  background:linear-gradient(to bottom, color-mix(in srgb, var(--ink) 90%, transparent) 0%, color-mix(in srgb, var(--ink) 66%, transparent) 48%, transparent 100%);
}
.nav.scrolled{
  background:var(--ink); /* fallback for browsers without color-mix */
  background:color-mix(in srgb, var(--ink) 88%, transparent);
  -webkit-backdrop-filter:blur(14px) saturate(1.2);
  backdrop-filter:blur(14px) saturate(1.2);
  border-bottom-color:var(--ink-line);
  padding-block:13px;
}
.nav__brand{ font-family:var(--serif); font-weight:600; font-size:1.18rem; letter-spacing:.02em; display:flex; align-items:baseline; gap:.55em; }
.nav__brand .en{ font-family:var(--latin); font-style:italic; font-weight:500; font-size:.92rem; color:var(--gold); letter-spacing:.04em; }
.nav__links{ display:flex; align-items:center; gap:clamp(14px,2vw,32px); }
.nav__links a{ font-size:.86rem; font-weight:600; letter-spacing:.01em; color:var(--on-dark); transition:color .3s; position:relative; }
.nav__links a:hover{ color:var(--gold); }
.nav__links a.cta{
  color:var(--on-accent); background:var(--gold); padding:9px 20px; border-radius:999px; white-space:nowrap;
  font-weight:600; transition:background .3s, transform .3s;
}
.nav__links a.cta:hover{ background:var(--gold-soft); color:var(--on-accent); transform:translateY(-1px); }
.nav__toggle{
  display:none; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; border:0; border-radius:12px;
  background:var(--gold); color:var(--on-accent); cursor:pointer;
  -webkit-tap-highlight-color:transparent; flex-shrink:0;
}
.nav__toggle:active{ transform:scale(.94); }
@media (max-width:940px){
  .nav__links{ display:none; }
  .nav__toggle{ display:inline-flex; }
}

/* professional light / dark mode toggle (nav) */
.nav__modetog{
  cursor:pointer; white-space:nowrap; font-family:var(--sans);
  font-size:.82rem; font-weight:700; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.45em;
  padding:7px 15px; border-radius:999px;
  color:var(--on-dark); background:transparent;
  border:1px solid var(--ink-line);
  transition:color .3s, background .3s, border-color .3s, transform .3s;
}
.nav__modetog:hover{
  color:var(--gold); border-color:var(--gold);
  background:color-mix(in srgb, var(--gold) 10%, transparent);
  transform:translateY(-1px);
}
.nav__modetog svg{ flex:none; }
.nav__modetog .mt-label{ line-height:1; }

/* mobile drawer variant */
.ms-modetog{
  cursor:pointer; width:100%; margin-top:18px;
  display:inline-flex; align-items:center; justify-content:center; gap:.5em;
  padding:14px 18px; border-radius:14px;
  font-family:var(--sans); font-size:1rem; font-weight:700; letter-spacing:.01em;
  color:var(--on-accent); background:var(--gold); border:none;
  transition:filter .3s;
}
.ms-modetog:hover{ filter:brightness(1.05); }
.ms-modetog svg{ flex:none; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:.7em;
  font-family:var(--sans); font-weight:600; font-size:.92rem; letter-spacing:.01em;
  padding:15px 30px; border-radius:999px; cursor:pointer;
  transition:transform .35s var(--ease), background .35s, color .35s, border-color .35s;
}
.btn .arrow{ transition:transform .35s var(--ease); }
.btn:hover .arrow{ transform:translateX(4px); }
.btn--gold{ background:var(--gold); color:var(--on-accent); }
.btn--gold:hover{ background:var(--gold-soft); color:var(--on-accent); transform:translateY(-2px); }
.btn--ghost{ border:1px solid var(--ink-line); color:var(--on-dark); }
.btn--ghost:hover{ border-color:var(--gold); color:var(--gold); }
.paper .btn--ghost{ border-color:var(--paper-line); color:var(--on-paper); }
.paper .btn--ghost:hover{ border-color:var(--gold-deep); color:var(--gold-deep); }

/* ---------- hairline ---------- */
.rule{ height:1px; background:var(--ink-line); border:0; }
.paper .rule{ background:var(--paper-line); }

/* ---------- footer ---------- */
.footer{ background:var(--ink-2); border-top:1px solid var(--ink-line); padding-block:clamp(56px,8vw,90px); }
.footer__grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:48px; }
.footer__brand .serif{ font-size:1.7rem; }
.footer__col h4{ font-size:.72rem; letter-spacing:.26em; text-transform:uppercase; color:var(--on-dark-faint); margin-bottom:18px; font-weight:600; }
.footer__col a, .footer__col p{ display:block; font-size:.94rem; color:var(--on-dark-dim); font-weight:300; margin-bottom:11px; transition:color .3s; }
.footer__col a:hover{ color:var(--gold); }
.footer__base{ display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; margin-top:54px; padding-top:26px; border-top:1px solid var(--ink-line); font-size:.8rem; color:var(--on-dark-faint); }
@media (max-width:760px){ .footer__grid{ grid-template-columns:1fr 1fr; } .footer__brand{ grid-column:1/-1; } }

/* ---------- reveal ---------- */
.reveal{ opacity:0; transform:translateY(26px); transition:opacity 1s var(--ease), transform 1s var(--ease); }
.reveal.in{ opacity:1; transform:none; }
.reveal[data-d="1"]{ transition-delay:.08s; }
.reveal[data-d="2"]{ transition-delay:.16s; }
.reveal[data-d="3"]{ transition-delay:.24s; }
.reveal[data-d="4"]{ transition-delay:.32s; }
@media (prefers-reduced-motion:reduce){
  .reveal{ opacity:1; transform:none; transition:none; }
  html{ scroll-behavior:auto; }
}

/* ---------- tag / chip ---------- */
.chip{
  display:inline-flex; align-items:center; gap:.5em;
  font-size:.78rem; font-weight:500; letter-spacing:.02em;
  padding:7px 14px; border-radius:999px; border:1px solid var(--ink-line);
  color:var(--on-dark-dim);
}
.paper .chip{ border-color:var(--paper-line); color:var(--on-paper-dim); }

/* gold underline link */
.ulink{ color:var(--gold); font-weight:500; display:inline-flex; align-items:center; gap:.5em; }
.ulink::after{ content:""; }
.ulink .arrow{ transition:transform .3s var(--ease); }
.ulink:hover .arrow{ transform:translateX(4px); }

/* ============================================================
   SUB-PAGE COMPONENTS (shared across the 6 domain pages)
   ============================================================ */

/* breadcrumb */
.crumb{ display:flex; align-items:center; gap:.6em; font-size:.8rem; color:var(--on-dark-dim); }
.crumb a{ color:var(--on-dark-dim); transition:color .3s; }
.crumb a:hover{ color:var(--gold); }
.crumb .sep{ color:var(--on-dark-faint); }
.crumb .here{ color:var(--gold); }

/* sub-hero */
.subhero{ position:relative; min-height:88vh; min-height:88svh; display:flex; align-items:flex-end; overflow:hidden; }
.subhero__img{
  position:absolute; right:0; bottom:0; height:94%; width:auto; max-width:none; z-index:1;
  object-fit:contain; object-position:bottom right;
  -webkit-mask-image:linear-gradient(to left,#000 50%,transparent 100%), linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
          mask-image:linear-gradient(to left,#000 50%,transparent 100%), linear-gradient(to bottom,transparent 0%,#000 12%,#000 88%,transparent 100%);
  -webkit-mask-composite:source-in; mask-composite:intersect;
}
.subhero::after{ content:""; position:absolute; inset:auto 0 0 0; height:34%; background:linear-gradient(to top,var(--ink),transparent); z-index:2; }
.subhero__inner{ position:relative; z-index:3; width:100%; padding-block:160px clamp(56px,8vw,96px); }
.subhero .big-num{ font-family:var(--latin); font-style:italic; font-size:clamp(4rem,12vw,9rem); line-height:.8; color:var(--gold); opacity:.9; }
.subhero h1{ max-width:16ch; margin-top:14px; }
.subhero__sub{ margin-top:24px; max-width:46ch; }
@media (max-width:860px){
  .subhero__img{ height:54%; opacity:.34; -webkit-mask-image:linear-gradient(to left,#000 78%,transparent); mask-image:linear-gradient(to left,#000 78%,transparent); }
}

/* intro split */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(36px,6vw,84px); align-items:center; }
.split--text-first .split__media{ order:2; }
.split__media img{ width:100%; border-radius:5px; }
.split__media{ position:relative; }
.split__media .frame{ position:absolute; inset:14px -14px -14px 14px; border:1px solid var(--gold); border-radius:5px; z-index:-1; }
@media (max-width:820px){ .split{ grid-template-columns:1fr; } .split--text-first .split__media{ order:0; } .split__media{ max-width:420px; } }

/* feature cards (세분화된 항목) */
.feat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:18px; }
.feat{
  border:1px solid var(--ink-line); border-radius:8px; padding:32px 30px;
  background:linear-gradient(180deg,rgba(194,160,92,.045),transparent);
  transition:border-color .4s, transform .4s var(--ease), background .4s; position:relative; overflow:hidden;
}
.feat:hover{ border-color:var(--gold); transform:translateY(-4px); }
.feat__n{ font-family:var(--latin); font-style:italic; font-size:1.25rem; color:var(--gold); }
.feat h3{ font-family:var(--serif); font-size:1.28rem; font-weight:500; margin:14px 0 10px; line-height:1.3; }
.feat p{ font-size:.96rem; color:var(--on-dark-dim); font-weight:300; line-height:1.7; }
.feat__list{ margin-top:16px; display:flex; flex-direction:column; gap:9px; }
.feat__list span{ font-size:.9rem; color:var(--on-dark-dim); font-weight:300; display:flex; gap:.6em; align-items:flex-start; }
.feat__list span::before{ content:""; width:5px; height:5px; border-radius:50%; background:var(--gold); margin-top:.65em; flex-shrink:0; }
.paper .feat{ border-color:var(--paper-line); }
.paper .feat:hover{ border-color:var(--gold-deep); }
.paper .feat h3{ color:var(--on-paper); }
.paper .feat p, .paper .feat__list span{ color:var(--on-paper-dim); }

/* stat row */
.statrow{ display:grid; grid-template-columns:repeat(auto-fit,minmax(160px,1fr)); gap:30px; }
.statcard .n{ font-family:var(--serif); font-size:clamp(2.4rem,4vw,3.4rem); color:var(--gold); line-height:1; }
.statcard .l{ margin-top:12px; font-size:.92rem; color:var(--on-dark-dim); font-weight:300; }
.paper .statcard .n{ color:var(--gold-deep); }
.paper .statcard .l{ color:var(--on-paper-dim); }

/* quote */
.quote{ max-width:24ch; }
.quote p{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.6rem); line-height:1.4; font-weight:400; letter-spacing:-.01em; }
.quote .mark{ font-family:var(--latin); font-size:4rem; color:var(--gold); line-height:0; display:block; height:.5em; }

/* numbered steps / list */
.steps{ border-top:1px solid var(--ink-line); }
.steprow{ display:grid; grid-template-columns:90px 1fr; gap:clamp(16px,3vw,44px); padding:clamp(22px,3vw,34px) 0; border-bottom:1px solid var(--ink-line); align-items:start; }
.steprow .sn{ font-family:var(--latin); font-style:italic; font-size:1.9rem; color:var(--gold-deep); }
.steprow h4{ font-family:var(--serif); font-size:1.24rem; font-weight:500; margin-bottom:8px; }
.steprow p{ color:var(--on-dark-dim); font-weight:300; max-width:62ch; }
.paper .steps{ border-color:var(--paper-line); }
.paper .steprow{ border-color:var(--paper-line); }
.paper .steprow h4{ color:var(--on-paper); }
.paper .steprow p{ color:var(--on-paper-dim); }
.paper .steprow .sn{ color:var(--gold-deep); }

/* other domains cross-nav */
.others{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.othercard{ border:1px solid var(--ink-line); border-radius:8px; padding:24px; transition:border-color .4s, transform .4s var(--ease); display:flex; flex-direction:column; gap:8px; }
.othercard:hover{ border-color:var(--gold); transform:translateY(-3px); }
.othercard .on{ font-family:var(--latin); font-style:italic; color:var(--gold); font-size:1rem; }
.othercard h4{ font-family:var(--serif); font-size:1.14rem; font-weight:500; }
.othercard .go{ margin-top:auto; color:var(--on-dark-faint); font-size:.82rem; display:flex; align-items:center; gap:.5em; transition:color .4s; }
.othercard:hover .go{ color:var(--gold); }

/* mobile sheet (shared) */
.mobile-sheet{ position:fixed; inset:0; z-index:99; background:var(--ink); transform:translateY(-100%); transition:transform .5s var(--ease); display:flex; flex-direction:column; justify-content:flex-start; overflow-y:auto; -webkit-overflow-scrolling:touch; padding:104px var(--gutter) 48px; gap:6px; }
.mobile-sheet.open{ transform:none; }
.mobile-sheet a{ font-family:var(--sans); font-weight:600; font-size:1.18rem; letter-spacing:-.01em; padding:14px 0; border-bottom:1px solid var(--ink-line); color:var(--on-dark); }
.mobile-sheet a .n{ font-family:var(--sans); font-weight:700; font-style:normal; font-size:.8rem; color:var(--gold); margin-right:14px; }

/* ---------- hero spotlight (light themes) ---------- */
.hero, .subhero{ background:radial-gradient(74% 80% at 80% 60%, var(--spot), transparent 60%); }

/* ---------- theme switcher ---------- */
.theme-switch{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; align-items:center; gap:9px;
  padding:9px 13px 9px 14px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter:blur(13px) saturate(1.25); -webkit-backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid var(--ink-line);
  box-shadow:0 14px 34px -16px rgba(20,16,8,.5);
}
.theme-switch .ts-label{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-faint); font-weight:700; white-space:nowrap; }
.theme-switch button{
  width:22px; height:22px; border-radius:50%; cursor:pointer; padding:0;
  border:2px solid var(--ink); outline:1px solid var(--ink-line);
  transition:transform .3s var(--ease), box-shadow .3s var(--ease);
}
.theme-switch button:hover{ transform:scale(1.14); }
.theme-switch button[aria-pressed="true"]{ box-shadow:0 0 0 2px var(--ink), 0 0 0 4px var(--gold); }
@media (max-width:560px){ .theme-switch .ts-label{ display:none; } .theme-switch{ right:12px; bottom:12px; } }

/* ---------- font switcher ---------- */
.font-switch{
  position:fixed; right:18px; bottom:66px; z-index:200;
  display:flex; align-items:center; gap:7px;
  padding:7px 10px 7px 13px; border-radius:999px;
  background:color-mix(in srgb, var(--ink) 80%, transparent);
  backdrop-filter:blur(13px) saturate(1.25); -webkit-backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid var(--ink-line);
  box-shadow:0 14px 34px -16px rgba(20,16,8,.5);
}
.font-switch .ts-label{ font-size:.6rem; letter-spacing:.22em; text-transform:uppercase; color:var(--on-dark-faint); font-weight:700; white-space:nowrap; }
.font-switch button{
  min-width:30px; height:25px; padding:0 9px; border-radius:7px;
  border:1px solid var(--ink-line); background:transparent; color:var(--on-dark-dim);
  cursor:pointer; font-size:.86rem; line-height:1; transition:background .25s, color .25s, border-color .25s;
}
.font-switch button:hover{ color:var(--on-dark); border-color:var(--on-dark-faint); }
.font-switch button[aria-pressed="true"]{ background:var(--gold); color:var(--on-accent); border-color:var(--gold); }
@media (max-width:560px){ .font-switch .ts-label{ display:none; } .font-switch{ right:12px; bottom:58px; } }

/* ---------- nav dropdown: 연결사이트 (linked sites) ---------- */
.nav__drop{ position:relative; display:inline-flex; }
/* 연결사이트 — 시그니처 강조(내비의 핵심): 반짝이는 골드 알약 + ✦ 스파클로 클릭 유도 */
.nav__droptrig{
  position:relative; overflow:hidden; cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:.86rem; font-weight:700; letter-spacing:.01em;
  display:inline-flex; align-items:center; gap:.4em;
  padding:7px 15px; border-radius:999px;
  color:var(--gold-deep);
  background:color-mix(in srgb, var(--gold) 14%, transparent);
  border:1px solid color-mix(in srgb, var(--gold) 42%, transparent);
  transition:color .3s, background .3s, border-color .3s, box-shadow .3s;
  animation:sigPulse 3.6s ease-in-out infinite;
}
.nav__droptrig .sig-spark{ color:var(--gold); font-size:.72em; line-height:1; transform-origin:center; animation:sigTwinkle 2.4s ease-in-out infinite; }
.nav__droptrig svg{ transition:transform .35s var(--ease); }
.nav__droptrig::after{ /* glint sweep */
  content:""; position:absolute; top:0; left:0; width:100%; height:100%; pointer-events:none;
  background:linear-gradient(105deg, transparent 38%, color-mix(in srgb, #fff 78%, transparent) 50%, transparent 62%);
  transform:translateX(-130%); animation:sigGlint 3.6s ease-in-out infinite;
}
.nav__drop:hover .nav__droptrig,
.nav__drop:focus-within .nav__droptrig,
.nav__drop.open .nav__droptrig{
  color:var(--on-accent); background:var(--gold); border-color:var(--gold);
  animation:none; box-shadow:0 6px 18px -6px color-mix(in srgb, var(--gold) 55%, transparent);
}
.nav__drop:hover .nav__droptrig .sig-spark,
.nav__drop.open .nav__droptrig .sig-spark{ color:var(--on-accent); }
.nav__drop:hover .nav__droptrig svg,
.nav__drop.open .nav__droptrig svg{ transform:rotate(180deg); color:var(--on-accent); }
@keyframes sigPulse{
  0%,100%{ box-shadow:0 0 0 0 color-mix(in srgb, var(--gold) 0%, transparent); }
  55%{ box-shadow:0 0 0 4px color-mix(in srgb, var(--gold) 14%, transparent), 0 7px 18px -7px color-mix(in srgb, var(--gold) 48%, transparent); }
}
@keyframes sigGlint{ 0%,14%{ transform:translateX(-130%); } 40%,100%{ transform:translateX(130%); } }
@keyframes sigTwinkle{ 0%,100%{ opacity:.45; transform:scale(.8) rotate(0deg); } 50%{ opacity:1; transform:scale(1.15) rotate(90deg); } }
@media (prefers-reduced-motion:reduce){ .nav__droptrig, .nav__droptrig::after, .nav__droptrig .sig-spark{ animation:none !important; } }
.nav__dropmenu{
  position:absolute; top:calc(100% + 16px); right:0; min-width:344px;
  background:color-mix(in srgb, var(--ink) 97%, transparent);
  backdrop-filter:blur(16px) saturate(1.25); -webkit-backdrop-filter:blur(16px) saturate(1.25);
  border:1px solid var(--ink-line); border-radius:16px; padding:8px;
  box-shadow:0 28px 64px -24px rgba(20,16,8,.5);
  display:flex; flex-direction:column; gap:2px;
  opacity:0; visibility:hidden; transform:translateY(10px); pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
}
.nav__dropmenu::before{ content:""; position:absolute; top:-16px; left:0; right:0; height:16px; }
.nav__drop:hover .nav__dropmenu,
.nav__drop:focus-within .nav__dropmenu,
.nav__drop.open .nav__dropmenu{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
.ds-item{ display:flex; align-items:center; gap:13px; padding:12px 14px; border-radius:10px; transition:background .25s; }
.ds-item:hover{ background:var(--paper); }
.ds-item .di{ font-family:var(--latin); font-style:italic; font-size:1.05rem; color:var(--gold); width:1.5em; flex-shrink:0; }
.ds-item .dt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-item .dt b{ font-size:.9rem; font-weight:600; color:var(--on-dark); letter-spacing:-.01em; }
.ds-item .dt span{ font-size:.72rem; color:var(--on-dark-dim); font-weight:300; }
.ds-item .dx{ margin-left:auto; color:var(--on-dark-faint); flex-shrink:0; transition:color .25s, transform .25s var(--ease); }
.ds-item:hover .dx{ color:var(--gold); transform:translate(2px,-2px); }
.ds-item.is-soon{ cursor:default; }
.ds-item.is-soon:hover{ background:transparent; }
.ds-item.is-soon .dt b{ color:var(--on-dark-dim); }
.ds-soon{ margin-left:auto; flex-shrink:0; white-space:nowrap; font-size:.62rem; font-weight:700; letter-spacing:.1em; color:var(--on-dark-faint); border:1px solid var(--ink-line); border-radius:999px; padding:4px 9px; }

/* nested submenu — AI 부동산 활용 → MR.K 도구 (click → side flyout, distinct dark card) */
.ds-group{ position:relative; border-radius:10px; }
.ds-parent{ cursor:pointer; }
.ds-parent .ds-caret{ margin-left:auto; flex-shrink:0; color:var(--on-dark-faint); transition:transform .35s var(--ease), color .3s; }
.ds-group:hover > .ds-parent,
.ds-group:focus-within > .ds-parent,
.ds-group.open > .ds-parent{ background:var(--paper); }
.ds-group:hover > .ds-parent .ds-caret,
.ds-group:focus-within > .ds-parent .ds-caret,
.ds-group.open > .ds-parent .ds-caret{ color:var(--gold); transform:translateX(-3px); }
/* the flyout — a distinct charcoal card. Opens to the LEFT on hover so it always fits
   on screen (the dropdown hugs the right edge; a right flyout would need a menu-shift
   that breaks hover-follow, so we cascade left toward centre). */
.ds-sub{
  position:absolute; top:-6px; right:calc(100% + 14px); left:auto; width:300px;
  background:var(--invert); color:var(--on-invert);
  border:1px solid color-mix(in srgb, var(--on-invert) 13%, transparent);
  border-radius:16px; padding:9px;
  box-shadow:0 30px 64px -22px rgba(15,12,8,.6);
  opacity:0; visibility:hidden; transform:translateX(12px) scale(.98); transform-origin:right center;
  pointer-events:none; transition:opacity .28s var(--ease), transform .28s var(--ease), visibility .28s;
  z-index:6;
}
.ds-group:hover .ds-sub,
.ds-group:focus-within .ds-sub,
.ds-group.open .ds-sub{ opacity:1; visibility:visible; transform:none; pointer-events:auto; }
/* invisible bridge across the flyout→menu gap (on the right) so hover doesn't drop */
.ds-sub::before{ content:""; position:absolute; right:-22px; left:auto; top:0; width:22px; height:100%; }
.ds-sub__h{ font-size:.62rem; letter-spacing:.2em; text-transform:uppercase; font-weight:700; color:#ffb37a; padding:9px 12px 11px; }
.ds-subitem{ display:flex; align-items:center; gap:12px; padding:11px 12px; border-radius:11px; transition:background .25s; }
.ds-subitem:hover{ background:color-mix(in srgb, var(--on-invert) 9%, transparent); }
.ds-subitem .dt{ display:flex; flex-direction:column; gap:2px; min-width:0; }
.ds-subitem .dt b{ font-size:.9rem; font-weight:600; color:var(--on-invert); letter-spacing:-.01em; }
.ds-subitem .dt span{ font-size:.72rem; color:color-mix(in srgb, var(--on-invert) 58%, transparent); font-weight:300; }
.ds-subitem .dx{ margin-left:auto; flex-shrink:0; color:color-mix(in srgb, var(--on-invert) 48%, transparent); transition:color .25s, transform .25s var(--ease); }
.ds-subitem:hover .dx{ color:#ffb37a; transform:translate(2px,-2px); }
.ds-subitem.is-soon{ cursor:default; }
.ds-subitem.is-soon:hover{ background:transparent; }
.ds-subitem.is-soon .dt b{ color:color-mix(in srgb, var(--on-invert) 55%, transparent); }
.ds-sub .ds-soon{ color:color-mix(in srgb, var(--on-invert) 60%, transparent); border-color:color-mix(in srgb, var(--on-invert) 24%, transparent); }

/* mobile sheet — linked sites */
.ms-sites{ margin-top:20px; padding-top:18px; border-top:1px solid var(--ink-line); }
.ms-sites__h{ font-family:var(--sans); font-size:.66rem; letter-spacing:.24em; text-transform:uppercase; color:var(--gold); font-weight:700; margin-bottom:8px; }
.ms-sites a{ font-family:var(--sans); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; padding:11px 0; border-bottom:1px solid var(--ink-line); color:var(--on-dark); display:flex; align-items:center; gap:11px; }
.ms-sites a .di{ font-family:var(--sans); font-weight:700; font-style:normal; font-size:.78rem; color:var(--gold); }
.ms-sites a.is-soon{ color:var(--on-dark-dim); }
.ms-sites a .ds-soon{ margin-left:auto; }
.ms-parent{ font-family:var(--sans); font-weight:600; font-size:1.08rem; letter-spacing:-.01em; padding:11px 0 4px; color:var(--on-dark); display:flex; align-items:center; gap:11px; }
.ms-parent .di{ font-family:var(--sans); font-weight:700; font-style:normal; font-size:.78rem; color:var(--gold); }
.ms-sites a.ms-sub{ font-family:var(--sans); font-size:.98rem; padding:9px 0 9px 24px; color:var(--on-dark-dim); }
.ms-sites a.ms-sub::before{ content:"–"; margin-right:9px; color:var(--gold); flex-shrink:0; }
.ms-sites a.ms-sub.is-soon{ color:var(--on-dark-faint); }

/* ---------- floating controls (collapsible: 글꼴 + 테마) ---------- */
.controls{
  position:fixed; right:18px; bottom:18px; z-index:200;
  display:flex; flex-direction:column; align-items:flex-end; gap:11px;
}
.controls__panel{
  display:flex; flex-direction:column; align-items:flex-end; gap:10px;
  opacity:0; visibility:hidden; pointer-events:none;
  transform:translateY(12px) scale(.96); transform-origin:bottom right;
  transition:opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.controls.open .controls__panel{ opacity:1; visibility:visible; pointer-events:auto; transform:none; }
/* switchers now live inside the panel — drop their own fixed positioning */
.controls .theme-switch,
.controls .font-switch{ position:static; right:auto; bottom:auto; }
.controls__toggle{
  width:48px; height:48px; padding:0; border-radius:50%; cursor:pointer;
  display:grid; place-items:center; color:var(--on-dark);
  background:color-mix(in srgb, var(--ink) 82%, transparent);
  backdrop-filter:blur(13px) saturate(1.25); -webkit-backdrop-filter:blur(13px) saturate(1.25);
  border:1px solid var(--ink-line);
  box-shadow:0 14px 34px -16px rgba(20,16,8,.5);
  transition:transform .35s var(--ease), background .3s, color .3s, border-color .3s;
}
.controls__toggle:hover{ transform:translateY(-2px); color:var(--gold); border-color:var(--gold); }
.controls__toggle svg{ transition:transform .45s var(--ease); }
.controls.open .controls__toggle{ background:var(--gold); color:var(--on-accent); border-color:var(--gold); }
.controls.open .controls__toggle svg{ transform:rotate(90deg); }
@media (max-width:560px){ .controls{ right:12px; bottom:12px; } }

/* ---------- footer social icons ---------- */
.social{ display:flex; align-items:center; gap:10px; margin-top:24px; flex-wrap:wrap; }
.social a{
  width:40px; height:40px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center; color:var(--on-dark-dim);
  border:1px solid var(--ink-line);
  transition:color .3s, border-color .3s, background .3s, transform .3s var(--ease);
}
.social a:hover{ color:var(--on-accent); background:var(--gold); border-color:var(--gold); transform:translateY(-2px); }
.social a svg{ width:19px; height:19px; }