/* ══════════════════════════════════════════════════════════
   K-Fortune Story — Ink Night 테마 (2026-10 디자인 개편 A안)
   각 페이지의 기존 다크모드 규칙을 항상 적용(@media all)한 위에 이 파일을 마지막으로 얹는다.
   - 바탕: 먹색 밤하늘 + 은은한 종이 결
   - 단청: 오방색 빛(오로라) + 가는 선 연꽃무늬 (.roof 안의 옛 처마 SVG는 숨김)
   - 백호: 그대로, 어둠 속에서 빛나도록 그림자만 조정
   - 글꼴: 제목 Instrument Serif(+한글은 Gowun Batang), 본문 Inter(+Noto Sans KR)
   ══════════════════════════════════════════════════════════ */
:root{
  color-scheme:dark;
  --ink-bg:#0D0C11; --ink-bg2:#15141B; --ink-card:rgba(255,255,255,.045); --ink-line:rgba(243,238,230,.13);
  --ink-fg:#F3EEE6; --ink-mute:#A9A297;
  --ob-jade:#3FA57A; --ob-red:#E0533A; --ob-gold:#E8B54D; --ob-blue:#4C7BD9; --ob-pink:#E38AA0;
  --f-display:"Instrument Serif","Gowun Batang",Georgia,serif;
  --f-body:Inter,"Noto Sans KR",system-ui,sans-serif;
  /* 기존 토큰을 어두운 바탕에 맞게 */
  --jinsa:#EE6A4F; --noeurok:#6FC3A3; --samcheong:#8FB3E8; --hwang:#E8B54D; --gold-line:rgba(232,181,77,.45);
  --seokganju:#D8A374;
}

html body{
  background:var(--ink-bg) !important; color:var(--ink-fg);
  font-family:var(--f-body);
}
/* 종이 결 */
html body::before{
  content:""; display:block !important; position:fixed; inset:0; width:auto; left:0; right:0; z-index:0;
  pointer-events:none; opacity:.07; box-shadow:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 좌우 나무 기둥 제거 */
html body::after{display:none !important}
main, footer, .topbar, .roof{position:relative; z-index:1}

/* ── 단청: 오로라 + 선 연꽃무늬 ── */
.roof{height:clamp(120px,22vw,220px); overflow:hidden; margin-bottom:calc(-1 * clamp(40px,8vw,90px));}
.roof > svg{display:none !important}
.roof::before{
  content:""; position:absolute; inset:-60% -20% -10% -20%; filter:blur(56px); opacity:.6;
  background:
    radial-gradient(closest-side at 18% 55%, var(--ob-jade), transparent),
    radial-gradient(closest-side at 46% 35%, var(--ob-red), transparent),
    radial-gradient(closest-side at 74% 55%, var(--ob-gold), transparent),
    radial-gradient(closest-side at 60% 85%, var(--ob-blue), transparent);
}
.roof::after{
  content:""; position:absolute; inset:0; opacity:.42;
  -webkit-mask:linear-gradient(#000 20%, transparent); mask:linear-gradient(#000 20%, transparent);
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='80' height='80'%3E%3Cg fill='none' stroke='%23F3EEE6' stroke-width='.8' opacity='.6'%3E%3Ccircle cx='40' cy='40' r='7'/%3E%3Ccircle cx='40' cy='40' r='2.5'/%3E%3Cpath d='M40 33c-4-8-4-14 0-20 4 6 4 12 0 20zM40 47c-4 8-4 14 0 20 4-6 4-12 0-20zM33 40c-8-4-14-4-20 0 6 4 12 4 20 0zM47 40c8-4 14-4 20 0-6 4-12 4-20 0z'/%3E%3Cpath d='M35 35c-7-3-10-8-10-13 5 0 10 3 13 10zM45 35c7-3 10-8 10-13-5 0-10 3-13 10zM35 45c-7 3-10 8-10 13 5 0 10-3 13-10zM45 45c7 3 10 8 10 13-5 0-10-3-13-10z' opacity='.7'/%3E%3C/g%3E%3C/svg%3E") repeat;
}
/* 백호: 어둠 속에서 은은하게 빛나게 */
.tiger{filter:drop-shadow(0 0 26px rgba(255,255,255,.16)) drop-shadow(0 10px 18px rgba(0,0,0,.55)) !important; z-index:2 !important}

/* ── 언어 토글 ── */
.lang-toggle{background:rgba(255,255,255,.06) !important; border:1px solid var(--ink-line) !important; font-family:var(--f-body) !important}
.lang-toggle button{color:var(--ink-mute) !important}
.lang-toggle button.active{background:var(--ink-fg) !important; color:var(--ink-bg) !important}

/* ── 타이포 ── */
h1, h2, .menu-title, .res-head h1, .sec h3, .luck-card h3, .faq-title, .ml-title{
  font-family:var(--f-display) !important; font-weight:400 !important; letter-spacing:-.005em; text-wrap:balance;
}
h1{color:var(--ink-fg) !important; line-height:1.02 !important}
h1 .accent{color:var(--ob-pink) !important; font-style:italic}
.eyebrow{font-family:var(--f-body) !important; color:var(--ob-gold) !important; letter-spacing:.22em !important; font-weight:600 !important}
.subtitle{font-family:var(--f-body) !important; color:var(--ink-mute) !important}
p, li, .desc, .sec p, label, input, select, textarea, button{font-family:var(--f-body)}
.menu-title{color:var(--ink-fg) !important; font-size:1.6rem !important}
.menu-title::before, .menu-title::after{display:none !important}

/* ── 카드·부품 공통: 반투명 먹 카드 ── */
.sec, .luck-card, .grade-card, .vcard, .scard, .xchart, .menu-btn, .form-card, .person-block,
.sum-card, .today-bar, .myday, .faq-item, .field-row, .dayrow, .homelink, .btn-reset, .ml-chip,
.col-card, .term-card, .info-card, .card, .result-card, .sample-notice, .zodiac-card, .zc, .ins-card{
  background:var(--ink-card) !important; border:1px solid var(--ink-line) !important; box-shadow:none !important;
  color:var(--ink-fg) !important;
}
.sec h3, .luck-card h3{color:var(--ink-fg) !important; border-bottom:1px solid var(--ink-line) !important}
.sec p, .age-row .at, .dayrow .dt, .field-row .fr-txt, .grade-card .gc-desc, .v-row p, .sc-why{color:#D9D3C9 !important}
.luck-item, .v-try, .tj-note, .mingsik .ss, .chip, .dream-sym, .field-row{background:rgba(255,255,255,.05) !important; color:var(--ink-fg) !important}
.luck-item .k, .v-k, .tj-note{color:var(--ink-mute) !important}
.luck-item .v, .v-vibe, .sc-name, .grade-card .gc-cat, .fr-name{color:var(--ink-fg) !important}
.v-vibe, .sc-name, .grade-card .gc-cat{font-family:var(--f-display) !important; font-weight:400 !important}
.v-vibe{font-size:1.5rem !important; line-height:1.15 !important}
.sc-name{font-size:2.6rem !important}
.scard{background:linear-gradient(160deg, rgba(255,255,255,.05), color-mix(in srgb, var(--acc) 22%, transparent)) !important; border-color:color-mix(in srgb, var(--acc) 60%, transparent) !important}
.sc-row{border-top:1px solid var(--ink-line) !important}
.gc-empty, .mstar .gc-empty{color:rgba(255,255,255,.15) !important}
.note, .res-visitor, .visitor, .who, .poem-r, .sc-sub, .v-skip{color:var(--ink-mute) !important}
.age-row, .mingsik td, .deun td, .hanja-table td{border-color:var(--ink-line) !important}
.mingsik, .hanja-table{background:transparent !important; border-color:var(--ink-line) !important}
.mingsik th, .hanja-table th{background:rgba(255,255,255,.06) !important; color:var(--ink-mute) !important}
.deun tr.now{background:rgba(238,106,79,.14) !important}
.ohrow .bar{background:rgba(255,255,255,.08) !important}
.radar .rlbl{fill:var(--ink-fg) !important}

/* 버튼 */
.btn-run, .sample-cta, .sr-btn{background:var(--ink-fg) !important; color:var(--ink-bg) !important; border:none !important; font-family:var(--f-body) !important; font-weight:600 !important; box-shadow:none !important}
.btn-reset, .homelink{color:var(--ink-fg) !important}

/* 입력 폼 */
input[type=text], input[type=date], input[type=time], input[type=email], select, textarea, .field input, .field select, .field textarea{
  background:rgba(255,255,255,.06) !important; color:var(--ink-fg) !important; border:1px solid var(--ink-line) !important;
}
.radiorow label{background:rgba(255,255,255,.05) !important; border-color:var(--ink-line) !important; color:var(--ink-fg) !important}
.radiorow label.sel{background:rgba(238,106,79,.16) !important; border-color:var(--jinsa) !important}

/* ── 홈 메뉴 타일 ── */
.menu-grid{display:grid !important; grid-template-columns:1fr 1fr; gap:10px !important; max-width:620px !important}
.menu-btn{flex-direction:column !important; align-items:flex-start !important; justify-content:flex-start !important; gap:.6rem !important;
  border-radius:18px !important; padding:1rem !important; min-height:132px; position:relative; text-decoration:none !important}
.menu-btn:hover, .menu-btn:focus-visible{border-color:rgba(243,238,230,.35) !important; transform:translateY(-2px)}
.menu-btn .emblem{display:none !important}
.menu-btn::before{content:""; width:24px; height:24px; border-radius:50%; background:var(--dot, var(--ob-gold)); flex:0 0 auto}
.menu-btn .name{font-family:var(--f-body) !important; font-weight:600 !important; font-size:1.02rem !important; color:var(--ink-fg) !important}
.menu-btn .desc{color:var(--ink-mute) !important; font-size:.84rem !important}
.menu-btn--hero{grid-column:1/-1; min-height:150px;
  background:linear-gradient(120deg, rgba(76,123,217,.26), rgba(63,165,122,.14)) !important}
.menu-btn--hero::before{background:conic-gradient(var(--ob-blue), var(--ob-jade), var(--ob-blue))}
.menu-btn--hero .name{font-family:var(--f-display) !important; font-weight:400 !important; font-size:1.9rem !important}
.mbadge{background:var(--ob-gold) !important; color:var(--ink-bg) !important; font-family:var(--f-body) !important; font-weight:700 !important;
  position:absolute !important; top:12px !important; right:12px !important; left:auto !important; font-size:.66rem !important; letter-spacing:.06em; text-transform:uppercase}
.menu-sub{grid-column:1/-1; margin:1.2rem 0 .2rem; font-family:var(--f-display); font-size:1.25rem; color:var(--ink-fg); text-align:left}
.menu-btn--classic{min-height:auto; padding:.8rem 1rem !important; flex-direction:row !important; align-items:center !important}
.menu-btn--classic::before{width:10px; height:10px}

/* 공유 바·오늘 바 */
.share-bar .sb-label{color:var(--ink-mute) !important}
.sb-icons a, .sb-icons button{background:rgba(255,255,255,.06) !important; border-color:var(--ink-line) !important}

/* 하단 */
footer{background:transparent !important; border-top:1px solid var(--ink-line)}
footer::before{display:none !important}
footer p, footer a{color:var(--ink-mute) !important; border-color:var(--ink-line) !important}
.toast, .kf-toast{background:var(--ink-fg) !important; color:var(--ink-bg) !important}

/* 홈 안내 박스(인라인 스타일 덮기) */
.ink-box{margin:2rem 0 0; padding:1.4rem; background:var(--ink-card); border:1px solid var(--ink-line); border-radius:18px; text-align:center}
.ink-box .t{font-family:var(--f-display); font-size:1.35rem; color:var(--ink-fg); margin-bottom:.4rem}
.ink-box .s{font-size:.88rem; color:var(--ink-mute); margin-bottom:1rem}
.ink-box a{display:inline-block; background:var(--ink-fg); color:var(--ink-bg); font-weight:600; font-size:.9rem; padding:.7rem 1.3rem; border-radius:12px; text-decoration:none}

a:focus-visible, button:focus-visible{outline:2px solid var(--ob-gold); outline-offset:2px}
@media (prefers-reduced-motion: reduce){ .menu-btn{transition:none !important} }

/* ── 홈 첫 화면 크게 (시안 A 비율) ── */
main > h1{font-size:clamp(2.6rem, 11vw, 5.6rem) !important; margin-top:.4rem}
main > .subtitle{max-width:34ch; margin-left:auto; margin-right:auto}
.tiger{height:clamp(110px, 24vw, 300px) !important; top:clamp(40px, 6vw, 90px) !important}
@media (max-width:560px){ .tiger{height:clamp(96px, 28vw, 130px) !important; top:44px !important} }
.menu-btn--classic{flex-direction:column !important; align-items:flex-start !important; min-height:auto !important; gap:.35rem !important}
.menu-btn--classic::before{display:none}
.menu-btn--classic .name{font-size:.95rem !important}

/* ── 진한 글자색 토큰을 밝게 (기존 규칙의 color:var(--meok) 일괄 대응) ── */
:root{--meok:#F3EEE6}
.ohrow .n{color:var(--ink-fg) !important}
.ohrow .v{color:var(--ink-mute) !important}
/* 공유 아이콘: 브랜드 색이 보이도록 밝은 원 */
.sb-icons a, .sb-icons button{background:var(--ink-fg) !important; border-color:transparent !important}

/* ── 작명·한국이름·매일칼럼 페이지 부품 ── */
.topband{height:clamp(90px,18vw,150px) !important; position:relative; overflow:hidden; background:transparent !important;
  margin-bottom:calc(-1 * clamp(30px,6vw,60px))}
.topband::before{content:""; position:absolute; inset:-60% -20% -10% -20%; filter:blur(56px); opacity:.55;
  background:radial-gradient(closest-side at 18% 55%, var(--ob-jade), transparent),radial-gradient(closest-side at 46% 35%, var(--ob-red), transparent),
  radial-gradient(closest-side at 74% 55%, var(--ob-gold), transparent),radial-gradient(closest-side at 60% 85%, var(--ob-blue), transparent)}
.homelink{border-radius:999px !important; padding:.45rem 1rem !important; font-family:var(--f-body) !important; font-size:.88rem !important; position:relative; z-index:1}
.tabs{background:rgba(255,255,255,.05) !important}
.tab-btn{color:var(--ink-mute) !important; font-family:var(--f-body) !important}
.tab-btn.active{background:rgba(255,255,255,.1) !important; color:var(--ink-fg) !important}
.vibe-opt, .hj-opt{background:rgba(255,255,255,.04) !important; border:1px solid var(--ink-line) !important; color:var(--ink-fg) !important}
.vibe-opt.sel, .hj-opt.sel{background:rgba(238,106,79,.16) !important; border-color:var(--jinsa) !important; box-shadow:none !important}
.sub-card{background:linear-gradient(135deg, rgba(232,181,77,.12), rgba(255,255,255,.03)) !important; border:1px solid var(--ink-line) !important}
.sub-card h3, .sub-card .t{color:var(--ink-fg) !important; font-family:var(--f-display) !important; font-weight:400 !important}
.sub-card button, .btn-gen, .gen-btn{background:var(--ink-fg) !important; color:var(--ink-bg) !important; font-family:var(--f-body) !important; font-weight:600 !important}
.cc-title, .card h2, .result-card h2, .info-card h2, .month-title, .term-word{color:var(--ink-fg) !important; font-family:var(--f-display) !important; font-weight:400 !important}
.rmeaning b{color:var(--ob-gold) !important}

/* ── 내 사람들 링크·오늘 반짝이는 사람 배너·저장된 사람 불러오기 ── */
.topbar{display:flex; align-items:center; gap:.5rem}
.people-link{font:600 .8rem var(--f-body); color:var(--ink-fg); text-decoration:none; padding:.4rem .85rem; border-radius:999px;
  background:rgba(255,255,255,.06); border:1px solid var(--ink-line)}
.glow-banner{display:block; margin:0 auto 1rem; max-width:620px; padding:.85rem 1rem; border-radius:14px; text-decoration:none;
  color:var(--ink-fg); font-weight:600; background:linear-gradient(120deg, rgba(232,181,77,.2), rgba(227,138,160,.14)); border:1px solid rgba(232,181,77,.4)}
.saved-pick{width:100%; margin:.2rem 0 .8rem}
.glow-banner[hidden]{display:none !important}
/* 좁은 화면: 언어 전환과 '내 사람들'이 한 줄에 안 들어가면 줄바꿈 (오른쪽은 백호 자리) */
.topbar{flex-wrap:wrap; max-width:calc(100vw - 150px)}
html:lang(ko) body, [lang="ko"] h1, .sec p, .v-row p, h1, h2, .sc-vibe, .sc-why{word-break:keep-all; overflow-wrap:anywhere}