/* ── 命理 × Apple Design System ─────────────────────────────────
   Global stylesheet — loaded on every page via _seo.html
   Typography: Inter (Latin/num) + Noto Sans KR (Korean)
───────────────────────────────────────────────────────────────── */

/* ── Google Fonts — preload via <link> in _seo.html, not @import ── */

/* ── Design Tokens ── */
:root {
  /* Brand accent — Notion purple */
  --blue:        #5645d4;
  --blue-focus:  #4534b3;
  --blue-dark:   #7b3ff2;

  /* Notion pastel tints */
  --tint-lavender: #e6e0f5;
  --tint-peach:    #ffe8d4;
  --tint-mint:     #d9f3e1;
  --tint-sky:      #dcecfa;
  --tint-yellow:   #fef7d6;
  --tint-rose:     #fde0ec;

  /* Surfaces — Notion warm palette */
  --canvas:      #ffffff;
  --parchment:   #f6f5f4;
  --pearl:       #fafaf9;
  --tile-1:      #0a1530;
  --tile-2:      #1a2a52;
  --tile-3:      #070f24;
  --void:        #000000;

  /* Text — Notion warm charcoal */
  --ink:         #1a1a1a;
  --ink-80:      #37352f;
  --ink-48:      #787671;
  --on-dark:     #ffffff;
  --muted-dark:  #a4a097;

  /* Hairlines — Notion warm */
  --hairline:    #e5e3df;
  --divider:     rgba(0,0,0,.06);

  /* Five-element palette (result pages only) */
  --wood:   #3a7d1e;
  --fire:   #c0311d;
  --earth:  #9a6310;
  --metal:  #5878a0;
  --water:  #1c4e9a;

  /* Radii — Notion scale */
  --r-none: 0px;
  --r-xs:   4px;
  --r-sm:   6px;
  --r-md:   8px;
  --r-lg:   12px;
  --r-pill: 9999px;

  /* Spacing */
  --sp-xxs: 4px;
  --sp-xs:  8px;
  --sp-sm:  12px;
  --sp-md:  16px;
  --sp-lg:  24px;
  --sp-xl:  32px;
  --sp-xxl: 48px;
  --sp-sec: 80px;

  /* Typography stacks — Inter-first (Notion Sans basis) */
  --f-display: 'Inter', 'Noto Sans KR', system-ui, sans-serif;
  --f-body:    'Inter', 'Noto Sans KR', system-ui, sans-serif;

  /* Ease */
  --ease: cubic-bezier(.4,0,.2,1);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
  background: var(--canvas);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
img { display: block; max-width: 100%; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Global Nav ── */
.g-nav {
  position: sticky; top: 0; z-index: 100;
  background: rgba(0,0,0,.72);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  height: 44px;
  display: flex; align-items: center;
}
.g-nav__inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.g-nav__logo {
  font-family: var(--f-display);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--on-dark);
  text-decoration: none;
  flex-shrink: 0;
}
.g-nav__logo:hover { text-decoration: none; opacity: .8; }
.g-nav__links {
  display: flex; align-items: center; gap: 28px;
  list-style: none;
}
.g-nav__links a {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: rgba(255,255,255,.8);
  text-decoration: none;
  transition: color .15s;
  white-space: nowrap;
}
.g-nav__links a:hover { color: #fff; text-decoration: none; }
.g-nav__links a.active { color: #fff; }
.g-nav__cta {
  font-family: var(--f-display);
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--blue-dark);
  text-decoration: none;
  transition: opacity .15s;
}
.g-nav__cta:hover { opacity: .8; text-decoration: none; }

/* ── Sub-nav (frosted, page-specific) ── */
.sub-nav {
  position: sticky; top: 44px; z-index: 90;
  background: rgba(245,245,247,.92);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--divider);
  height: 52px;
  display: flex; align-items: center;
}
.sub-nav__inner {
  max-width: 980px;
  margin: 0 auto;
  width: 100%;
  padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
}
.sub-nav__title {
  font-family: var(--f-display);
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ink);
}
.sub-nav__links {
  display: flex; align-items: center; gap: 24px;
  list-style: none;
}
.sub-nav__links a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  color: var(--blue);
  text-decoration: none;
}
.sub-nav__links a:hover { text-decoration: underline; }

/* ── Tile Sections ── */
.tile {
  width: 100%;
  padding: var(--sp-sec) 20px;
}
.tile--light  { background: var(--canvas); }
.tile--parch  { background: var(--parchment); }
.tile--dark   { background: var(--tile-1); color: var(--on-dark); }
.tile--dark-2 { background: var(--tile-2); color: var(--on-dark); }
.tile--void   { background: var(--void);   color: var(--on-dark); }

.tile__inner {
  max-width: 980px;
  margin: 0 auto;
}
.tile__inner--narrow {
  max-width: 560px;
  margin: 0 auto;
}
.tile__inner--wide {
  max-width: 1200px;
  margin: 0 auto;
}

/* ── Typography ── */
.t-hero {
  font-family: var(--f-display);
  font-size: clamp(40px, 6vw, 56px);
  font-weight: 600;
  line-height: 1.07;
  letter-spacing: -0.28px;
  color: var(--ink);
}
.t-hero--on-dark { color: var(--on-dark); }
.t-display {
  font-family: var(--f-display);
  font-size: clamp(28px, 4vw, 40px);
  font-weight: 600;
  line-height: 1.10;
  letter-spacing: 0;
  color: var(--ink);
}
.t-display--on-dark { color: var(--on-dark); }
.t-section {
  font-family: var(--f-display);
  font-size: 34px;
  font-weight: 600;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}
.t-tagline {
  font-family: var(--f-display);
  font-size: clamp(19px, 3vw, 28px);
  font-weight: 400;
  line-height: 1.14;
  color: var(--ink-80);
}
.t-tagline--on-dark { color: var(--muted-dark); }
.t-label {
  font-family: var(--f-display);
  font-size: 21px;
  font-weight: 600;
  letter-spacing: 0.231px;
  color: var(--ink);
}
.t-body {
  font-size: 17px;
  font-weight: 400;
  line-height: 1.47;
  letter-spacing: -0.374px;
  color: var(--ink);
}
.t-body--on-dark { color: var(--on-dark); }
.t-body--muted { color: var(--ink-48); }
.t-body--muted-dark { color: var(--muted-dark); }
.t-caption {
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: -0.224px;
}
.t-fine {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: -0.12px;
  color: var(--ink-48);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  font-family: var(--f-display);
  cursor: pointer;
  text-decoration: none;
  border: none;
  transition: opacity .15s var(--ease), transform .15s var(--ease);
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
}
.btn:active { transform: scale(.95); text-decoration: none; }
.btn:focus-visible { outline: 2px solid var(--blue-focus); outline-offset: 2px; }
.btn:hover { text-decoration: none; }

/* Primary pill CTA */
.btn--primary {
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  padding: 11px 22px;
}
.btn--primary:hover { opacity: .88; color: #fff; }

/* Primary pill — large (store hero) */
.btn--primary-lg {
  background: var(--blue);
  color: #fff;
  font-size: 18px;
  font-weight: 300;
  border-radius: var(--r-pill);
  padding: 14px 28px;
}
.btn--primary-lg:hover { opacity: .88; color: #fff; }

/* Ghost pill CTA */
.btn--ghost {
  background: transparent;
  color: var(--blue);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  border: 1px solid var(--blue);
  padding: 10px 22px;
}
.btn--ghost:hover { opacity: .8; }

/* Ghost pill — on dark */
.btn--ghost-dark {
  background: transparent;
  color: var(--blue-dark);
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  border: 1px solid var(--blue-dark);
  padding: 10px 22px;
}
.btn--ghost-dark:hover { opacity: .8; }

/* Utility rect (dark) */
.btn--util {
  background: var(--ink);
  color: var(--on-dark);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: -0.224px;
  border-radius: var(--r-sm);
  padding: 8px 15px;
}
.btn--util:hover { opacity: .82; color: var(--on-dark); }

/* Full-width primary (form submit) */
.btn--submit {
  width: 100%;
  background: var(--blue);
  color: #fff;
  font-size: 17px;
  font-weight: 400;
  letter-spacing: -0.374px;
  border-radius: var(--r-pill);
  padding: 14px 22px;
  height: 52px;
}
.btn--submit:hover { opacity: .88; color: #fff; }

/* ── Utility Cards ── */
.u-card {
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: var(--sp-lg);
}
.u-card--parch { background: var(--parchment); }

/* ── Form Elements ── */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}
.field__label {
  font-size: 12px;
  font-weight: 400;
  letter-spacing: -0.12px;
  color: var(--ink-48);
}
.field__label em {
  font-style: normal;
  color: var(--blue);
  margin-left: 4px;
  font-size: 11px;
}
.field__input,
.field__select {
  width: 100%;
  height: 44px;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  font-weight: 400;
  padding: 0 14px;
  outline: none;
  transition: border-color .15s;
  -webkit-appearance: none;
  appearance: none;
}
.field__input:focus,
.field__select:focus {
  border-color: var(--blue);
  background: var(--canvas);
}
.field__input::placeholder { color: var(--ink-48); font-size: 15px; }
.field__hint {
  font-size: 12px;
  letter-spacing: -0.12px;
  color: var(--ink-48);
}

.field-row {
  display: grid;
  gap: 8px;
}
.field-row--3 { grid-template-columns: 2fr 1fr 1fr; }
.field-row--2 { grid-template-columns: 1fr 1fr; }

/* Gender toggle */
.gender-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.gender-btn {
  height: 44px;
  background: var(--parchment);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  color: var(--ink-48);
  font-family: var(--f-body);
  font-size: 15px;
  font-weight: 400;
  cursor: pointer;
  transition: all .15s var(--ease);
  text-align: center;
  -webkit-tap-highlight-color: transparent;
}
.gender-btn:hover { border-color: var(--blue); color: var(--blue); }
.gender-btn.active {
  background: rgba(0,102,204,.08);
  border-color: var(--blue);
  border-width: 2px;
  color: var(--blue);
  font-weight: 600;
}

/* Checkbox row */
.check-row {
  display: flex; align-items: center; gap: 8px;
  margin-top: 8px;
}
.check-row input[type="checkbox"] {
  width: 16px; height: 16px;
  accent-color: var(--blue);
  cursor: pointer;
  flex-shrink: 0;
}
.check-row label {
  font-size: 13px;
  color: var(--ink-48);
  cursor: pointer;
  letter-spacing: -0.12px;
}

/* Error box */
.error-box {
  background: rgba(192,48,32,.07);
  border: 1px solid rgba(192,48,32,.25);
  border-radius: var(--r-sm);
  padding: 12px 16px;
  font-size: 14px;
  color: #c0311d;
  margin-bottom: 20px;
  letter-spacing: -0.12px;
}

/* ── Utility Grid ── */
.ugrid {
  display: grid;
  gap: var(--sp-lg);
}
.ugrid--2 { grid-template-columns: repeat(2, 1fr); }
.ugrid--3 { grid-template-columns: repeat(3, 1fr); }
.ugrid--4 { grid-template-columns: repeat(4, 1fr); }

/* ── Divider ── */
.divider {
  height: 1px;
  background: var(--hairline);
  margin: var(--sp-xxl) 0;
}

/* ── CTA pair ── */
.cta-pair {
  display: flex; align-items: center; flex-wrap: wrap; gap: 16px;
  margin-top: var(--sp-lg);
}

/* ── Feature icon chip ── */
.feat-chip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: var(--parchment);
  border-radius: var(--r-md);
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  margin-bottom: var(--sp-xs);
  font-family: 'Noto Sans KR', sans-serif;
}
.tile--dark .feat-chip,
.tile--dark-2 .feat-chip { background: rgba(255,255,255,.1); color: var(--on-dark); }

/* ── Accordion (FAQ) — Notion style ── */
.accordion-item {
  border-bottom: 1px solid var(--hairline);
}
.accordion-item:first-child { border-top: 1px solid var(--hairline); }
.accordion-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 0;
  background: none; border: none;
  text-align: left;
  font-family: var(--f-body);
  font-size: 16px;
  font-weight: 500;
  letter-spacing: -0.1px;
  color: var(--ink-80);
  cursor: pointer;
  gap: 16px;
  transition: color .15s;
}
.accordion-q:hover { color: var(--ink); }
.accordion-icon {
  flex-shrink: 0;
  width: 20px; height: 20px;
  border-radius: var(--r-xs);
  background: var(--parchment);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  font-weight: 400;
  color: var(--ink-48);
  line-height: 1;
  transition: background .2s var(--ease), transform .2s var(--ease);
}
.accordion-item.open .accordion-icon {
  background: var(--tint-lavender);
  color: var(--blue);
  transform: rotate(45deg);
}
.accordion-item.open .accordion-q { color: var(--ink); }
.accordion-a {
  max-height: 0; overflow: hidden;
  transition: max-height .3s var(--ease), padding .3s var(--ease);
}
.accordion-item.open .accordion-a { max-height: 600px; }
.accordion-a__inner {
  padding: 0 0 18px 0;
  font-size: 15px;
  line-height: 1.65;
  color: var(--ink-48);
  letter-spacing: -0.1px;
}
.accordion-a__inner strong { color: var(--ink-80); font-weight: 600; }
.accordion-a__inner em { font-style: normal; color: var(--blue); }

/* ── Info strip ── */
.info-strip {
  padding: 14px 16px;
  border-left: 3px solid var(--blue);
  background: rgba(0,102,204,.05);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-80);
  letter-spacing: -0.224px;
}
.info-strip strong { color: var(--ink); font-weight: 600; }

/* ── Footer ── */
.site-footer {
  background: var(--parchment);
  padding: 40px 20px;
  border-top: 1px solid var(--hairline);
}
.site-footer__inner {
  max-width: 980px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  text-align: center;
}
.site-footer__copy {
  font-size: 12px;
  color: var(--ink-48);
  letter-spacing: -0.12px;
  line-height: 1.6;
}
.site-footer__links {
  display: flex; gap: 20px;
  list-style: none;
}
.site-footer__links a {
  font-size: 12px;
  color: var(--ink-48);
  text-decoration: none;
}
.site-footer__links a:hover { color: var(--blue); text-decoration: underline; }

/* ── 命理 brand specific ── */
.saju-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2px;
  background: var(--hairline);
  border: 1px solid var(--hairline);
  border-radius: var(--r-sm);
  overflow: hidden;
}
.saju-cell {
  background: var(--canvas);
  padding: 14px 8px;
  text-align: center;
}
.saju-cell__label {
  font-size: 10px;
  color: var(--ink-48);
  letter-spacing: 1px;
  margin-bottom: 8px;
}
.saju-cell__char {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: var(--ink);
  line-height: 1;
}
.saju-cell__sub {
  font-size: 11px;
  color: var(--ink-48);
  margin-top: 4px;
}

/* ── Link chips (example readings) ── */
.link-chip {
  display: block;
  background: var(--canvas);
  border: 1px solid var(--hairline);
  border-radius: var(--r-lg);
  padding: 16px 20px;
  text-decoration: none;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.link-chip:hover {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,102,204,.1);
  text-decoration: none;
}
.link-chip__han {
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: var(--blue);
  display: block;
  margin-bottom: 4px;
  line-height: 1;
}
.link-chip__meta {
  font-size: 13px;
  color: var(--ink-48);
  letter-spacing: -0.12px;
}

/* ── Dark Mode — media query (시스템 설정) ── */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --blue:        #7b6ee8;   /* 퍼플 — 다크 배경에서 가독성 확보 */
    --blue-focus:  #9485f0;
    --blue-dark:   #a593f5;

    --canvas:      #191919;   /* 본문 배경 — 순수 검정보다 따뜻한 다크 */
    --parchment:   #222220;   /* 섹션 배경 */
    --pearl:       #1e1e1c;

    --tile-1:      #0a1530;   /* 네이비 다크 섹션 — 라이트와 동일 유지 */
    --tile-2:      #1a2a52;
    --tile-3:      #070f24;

    --ink:         #e8e6e0;   /* 본문 텍스트 — 따뜻한 오프화이트 */
    --ink-80:      #ccc9c0;
    --ink-48:      #8a8680;
    --on-dark:     #ffffff;
    --muted-dark:  #a4a097;

    --hairline:    #2e2c28;   /* 구분선 — 다크 따뜻한 베이지 */
    --divider:     rgba(255,255,255,.06);

    /* Notion pastel tints — 다크에서 채도 낮춤 */
    --tint-lavender: #2a2240;
    --tint-peach:    #2e1e10;
    --tint-mint:     #122418;
    --tint-sky:      #101e2e;
    --tint-yellow:   #2a2510;
    --tint-rose:     #2a1020;
  }

  /* 배경/표면 — .light 클래스가 없을 때만 적용 */
  html:not(.light) body { background: var(--canvas); color: var(--ink); }
  html:not(.light) .g-nav { background: rgba(10,10,10,.85); }
  html:not(.light) .sub-nav { background: rgba(25,25,25,.92); border-bottom-color: var(--hairline); }
  html:not(.light) .sub-nav__title { color: var(--ink); }
  html:not(.light) .u-card { background: var(--parchment); border-color: var(--hairline); }
  html:not(.light) .u-card--parch { background: #27271f; }
  html:not(.light) .field__input,
  html:not(.light) .field__select { background: var(--parchment); border-color: var(--hairline); color: var(--ink); }
  html:not(.light) .field__input:focus,
  html:not(.light) .field__select:focus { background: var(--canvas); border-color: var(--blue); }
  html:not(.light) .link-chip { background: var(--parchment); border-color: var(--hairline); }
  html:not(.light) .saju-cell { background: var(--parchment); }
  html:not(.light) .site-footer { background: var(--parchment); border-top-color: var(--hairline); }
  html:not(.light) .faq-q { color: var(--ink-80); }
  html:not(.light) .faq-item.open .faq-q { color: var(--ink); }
  html:not(.light) .error-box { background: rgba(192,48,32,.15); border-color: rgba(192,48,32,.4); }
  html:not(.light) .info-strip { background: rgba(123,110,232,.08); border-left-color: var(--blue); color: var(--ink-80); }
}

/* ── Dark Mode — 클래스 강제 (토글 버튼) ── */
html.dark {
  --blue:        #7b6ee8;
  --blue-focus:  #9485f0;
  --blue-dark:   #a593f5;
  --canvas:      #191919;
  --parchment:   #222220;
  --pearl:       #1e1e1c;
  --ink:         #e8e6e0;
  --ink-80:      #ccc9c0;
  --ink-48:      #8a8680;
  --on-dark:     #ffffff;
  --muted-dark:  #a4a097;
  --hairline:    #2e2c28;
  --divider:     rgba(255,255,255,.06);
  --tint-lavender: #2a2240;
  --tint-peach:    #2e1e10;
  --tint-mint:     #122418;
  --tint-sky:      #101e2e;
  --tint-yellow:   #2a2510;
  --tint-rose:     #2a1020;
}
html.dark body { background: var(--canvas); color: var(--ink); }
html.dark .g-nav { background: rgba(10,10,10,.85); }
html.dark .sub-nav { background: rgba(25,25,25,.92); border-bottom-color: var(--hairline); }
html.dark .sub-nav__title { color: var(--ink); }
html.dark .u-card { background: var(--parchment); border-color: var(--hairline); }
html.dark .u-card--parch { background: #27271f; }
html.dark .field__input,
html.dark .field__select { background: var(--parchment); border-color: var(--hairline); color: var(--ink); }
html.dark .field__input:focus,
html.dark .field__select:focus { background: var(--canvas); border-color: var(--blue); }
html.dark .link-chip { background: var(--parchment); border-color: var(--hairline); }
html.dark .saju-cell { background: var(--parchment); }
html.dark .site-footer { background: var(--parchment); border-top-color: var(--hairline); }
html.dark .faq-q { color: var(--ink-80); }
html.dark .faq-item.open .faq-q { color: var(--ink); }
html.dark .error-box { background: rgba(192,48,32,.15); border-color: rgba(192,48,32,.4); }
html.dark .info-strip { background: rgba(123,110,232,.08); border-left-color: var(--blue); color: var(--ink-80); }

/* 라이트 강제 (시스템이 다크여도 라이트로) */
html.light {
  color-scheme: light;
  --blue:        #5645d4;
  --blue-focus:  #4534b3;
  --blue-dark:   #7b3ff2;
  --canvas:      #ffffff;
  --parchment:   #f6f5f4;
  --pearl:       #fafaf9;
  --ink:         #1a1a1a;
  --ink-80:      #37352f;
  --ink-48:      #787671;
  --hairline:    #e5e3df;
  --divider:     rgba(0,0,0,.06);
  --tint-lavender: #e6e0f5;
  --tint-peach:    #ffe8d4;
  --tint-mint:     #d9f3e1;
  --tint-sky:      #dcecfa;
  --tint-yellow:   #fef7d6;
  --tint-rose:     #fde0ec;
}
html.light body { background: #ffffff !important; color: #1a1a1a !important; }
html.light .g-nav { background: rgba(250,249,246,.92) !important; }
html.light .sub-nav { background: rgba(250,249,246,.95) !important; border-bottom-color: #e5e3df !important; }
html.light .u-card { background: #f6f5f4 !important; border-color: #e5e3df !important; }
html.light .field__input,
html.light .field__select { background: #f6f5f4 !important; border-color: #e5e3df !important; color: #1a1a1a !important; }
html.light .link-chip { background: #f6f5f4 !important; border-color: #e5e3df !important; }
html.light .saju-cell { background: #f6f5f4 !important; }
html.light .site-footer { background: #f6f5f4 !important; border-top-color: #e5e3df !important; }
html.light .faq-q { color: #37352f !important; }
html.light .error-box { background: rgba(192,48,32,.08) !important; border-color: rgba(192,48,32,.3) !important; }
html.light .info-strip { background: rgba(86,69,212,.06) !important; border-left-color: #5645d4 !important; color: #37352f !important; }

/* ── 다크모드 슬라이드 토글 ── */
#theme-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: var(--r-pill);
  border: none;
  background: rgba(255,255,255,.18);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background .25s;
  -webkit-tap-highlight-color: transparent;
}
#theme-toggle::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  transition: transform .25s var(--ease), background .25s;
  box-shadow: 0 1px 4px rgba(0,0,0,.25);
}
/* 다크 모드: 파란색 + 오른쪽 */
html.dark #theme-toggle {
  background: var(--blue);
}
html.dark #theme-toggle::after {
  transform: translateX(20px);
  background: #fff;
}
/* 라이트 모드: 회색 배경 + 왼쪽 */
html.light #theme-toggle {
  background: rgba(0,0,0,.15);
}
html.light #theme-toggle::after {
  transform: translateX(0);
  background: #fff;
}

/* ── Responsive ── */
@media (max-width: 834px) {
  .g-nav__links { display: none; }
  .tile { padding: var(--sp-xxl) 20px; }
  .ugrid--4 { grid-template-columns: repeat(2, 1fr); }
  .ugrid--3 { grid-template-columns: repeat(2, 1fr); }
  .saju-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .t-hero  { font-size: 34px; }
  .t-display { font-size: 28px; }
  .field-row--3 { grid-template-columns: 1fr; }
  .ugrid--2 { grid-template-columns: 1fr; }
  .ugrid--3 { grid-template-columns: 1fr; }
  .ugrid--4 { grid-template-columns: repeat(2, 1fr); }
  .tile { padding: var(--sp-xl) 20px; }
}
@media (max-width: 419px) {
  .t-hero { font-size: 28px; }
  .cta-pair { flex-direction: column; align-items: stretch; }
  .cta-pair .btn { text-align: center; justify-content: center; }
}

/* ── Kakao AdFit ── */
.kakao-ad-wrap {
  text-align: center;
  margin: 16px 0;
  min-height: 50px;
}