/* =====================================================================
   seo-pages.css : 2027 운세 · 타로 카드 사전 정적 페이지 (build_seo.js 가 만든 쪽) 전용
   style.css 위에 얹어요. method.html 의 문서형 쪽 모양을 따라요.
   ===================================================================== */
body { background-color: #0d0e24; }
.wrap { gap: 22px; }
.sp-top { display: flex; flex-wrap: wrap; gap: 4px 12px; justify-content: center; font-size: .86rem; }
.sp-top a { color: var(--mist); min-height: 32px; display: inline-flex; align-items: center; }
.sp-top a:hover { color: var(--gilt); }
.sp-lang { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; font-size: .78rem; margin: 0; padding: 0; list-style: none; }
.sp-lang a { color: var(--ink); text-decoration: none; border: 1px solid var(--line); border-radius: 999px; padding: 4px 10px; min-height: 30px; display: inline-flex; align-items: center; }
.sp-lang a[aria-current="true"] { border-color: var(--gilt); color: var(--gilt); }
.crumb { font-size: .78rem; color: var(--mist); display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin: 0; padding: 0; list-style: none; }
.crumb li + li::before { content: '›'; margin-right: 4px; opacity: .6; }
.crumb a { color: inherit; }
.doc { max-width: 760px; width: 100%; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.doc > header { text-align: center; display: flex; flex-direction: column; gap: 8px; align-items: center; padding: 4px 0; }
.kick { font-family: var(--font-numeral); letter-spacing: .3em; font-size: .7rem; color: var(--gilt); margin: 0; }
.doc h1 { font-size: clamp(1.5rem, 5.4vw, 2.1rem); letter-spacing: .02em; margin: 0; color: #fff3da; }
.lede { color: var(--ink); line-height: 1.85; margin: 0; max-width: 620px; }
.meta { color: var(--mist); font-size: .78rem; margin: 0; }
.toc { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.toc a { font-size: .8rem; color: var(--ink); text-decoration: none; border: 1px solid rgba(216,180,106,.35); border-radius: 999px; padding: 6px 12px; min-height: 32px; display: inline-flex; align-items: center; }
.toc a:hover { background: rgba(216,180,106,.12); }
.sec { border: 1px solid var(--line); border-radius: 18px; padding: 18px 18px 16px; background: linear-gradient(180deg, rgba(27,30,60,.82), rgba(17,19,42,.78)); scroll-margin-top: 16px; min-width: 0; }
.sec.hi { border-color: rgba(216,180,106,.55); background: linear-gradient(160deg, rgba(64,44,92,.6), rgba(17,19,42,.85)); }
.sec h2 { margin: 0 0 10px; font-size: 1.12rem; color: var(--gilt); }
.sec h3 { margin: 14px 0 6px; font-size: 1rem; color: #fff3da; font-family: var(--font-display); }
.sec h3:first-child { margin-top: 0; }
.sec p, .sec li, .sec dd { color: var(--ink); line-height: 1.8; font-size: .95rem; margin: 0; }
.sec p + p, .sec p + ul, .sec ul + p, .sec p + ol, .sec ol + p, .sec .tw + p { margin-top: 8px; }
.sec ul, .sec ol { margin: 0; padding-left: 1.2em; display: flex; flex-direction: column; gap: 6px; }
.sec b { color: #fff3da; }
.sec a { color: #f1d796; }
.muted, .sec .muted { color: var(--mist); font-size: .84rem; }
.tw { overflow-x: auto; max-width: 100%; }
.sec table { width: 100%; border-collapse: collapse; font-size: .86rem; margin-top: 10px; }
.sec th, .sec td { border: 1px solid var(--line); padding: 8px 10px; text-align: left; vertical-align: top; color: var(--ink); line-height: 1.6; }
.sec th { background: var(--night-2); color: var(--gilt); font-weight: normal; }
.facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; }
.facts > div { border: 1px solid rgba(216,180,106,.22); border-radius: 12px; padding: 10px 12px; background: rgba(255,255,255,.02); min-width: 0; }
.facts dt { font-size: .76rem; color: var(--mist); }
.facts dd { margin: 2px 0 0; font-size: .92rem; color: #fff3da; overflow-wrap: anywhere; }
.facts .wide { grid-column: 1 / -1; }
.areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.areas > div { border: 1px solid rgba(216,180,106,.2); border-radius: 14px; padding: 12px 14px; min-width: 0; }
.areas h3 { margin: 0 0 4px; font-size: .98rem; }
.months { list-style: none; padding: 0 !important; gap: 8px !important; }
.months li { border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; background: rgba(255,255,255,.02); }
.months .mh { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: baseline; margin-bottom: 4px; }
.months .mh b { font-family: var(--font-display); }
.months .mh span { color: var(--mist); font-size: .78rem; }
.tag { display: inline-block; font-size: .72rem; border-radius: 999px; padding: 1px 8px; border: 1px solid var(--line); color: var(--mist); white-space: nowrap; }
.tag.good { color: #a7d39a; border-color: rgba(167,211,154,.5); }
.tag.care { color: var(--rev); border-color: rgba(227,154,138,.5); }
.tag.self { color: var(--gilt); border-color: rgba(216,180,106,.55); }
.years { list-style: none; padding: 0 !important; }
.years li { border-left: 2px solid rgba(216,180,106,.4); padding-left: 10px; }
.cta { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-top: 10px; }
.cta a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; border: 1px solid rgba(216,180,106,.45); border-radius: 14px; padding: 12px 14px; background: rgba(216,180,106,.07); color: var(--ink); min-width: 0; }
.cta a:hover, .cta a:focus-visible { background: rgba(216,180,106,.16); border-color: var(--gilt); outline: none; }
.cta a b { color: var(--gilt); font-family: var(--font-display); font-size: .98rem; }
.cta a span { font-size: .8rem; color: var(--mist); line-height: 1.5; }
.cta a.main { grid-column: 1 / -1; background: linear-gradient(135deg, rgba(216,180,106,.24), rgba(216,180,106,.08)); }
.links { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.links a { display: flex; flex-direction: column; text-decoration: none; border: 1px solid var(--line); border-radius: 12px; padding: 8px 10px; color: var(--ink); font-size: .88rem; min-width: 0; }
.links a small { color: var(--mist); font-size: .74rem; }
.links a:hover { border-color: var(--gilt); }
.links a[aria-current="page"] { border-color: var(--gilt); color: var(--gilt); }
.faq details { border-top: 1px solid var(--line); padding: 10px 0; }
.faq details:first-of-type { border-top: 0; padding-top: 0; }
.faq summary { cursor: pointer; font-weight: 700; color: #fff3da; line-height: 1.6; min-height: 32px; }
.faq details p { margin-top: 6px; color: var(--ink); }
.note { font-size: .8rem; color: var(--mist); line-height: 1.6; margin: 0; }
/* 카드 쪽 */
.card-hero { display: grid; grid-template-columns: minmax(0, 220px) minmax(0, 1fr); gap: 16px; align-items: start; }
.card-hero figure { margin: 0; }
.card-hero img { width: 100%; height: auto; border-radius: 14px; box-shadow: 0 10px 30px rgba(0,0,0,.45); display: block; aspect-ratio: 2 / 3; background: var(--night-2); }
.card-hero figcaption { font-size: .74rem; color: var(--mist); text-align: center; margin-top: 6px; }
.kw { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0 !important; margin: 6px 0 0 !important; flex-direction: row !important; }
.kw li { font-size: .8rem; border: 1px solid rgba(216,180,106,.35); border-radius: 999px; padding: 2px 10px; }
.kw.rv li { border-color: rgba(227,154,138,.45); }
.yn { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; }
.pos { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; }
.pos dt { color: var(--gilt); font-size: .86rem; white-space: nowrap; }
.pos dd { margin: 0; font-size: .92rem; line-height: 1.7; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 10px; margin-top: 8px; }
.thumbs a { display: flex; flex-direction: column; gap: 4px; text-decoration: none; color: var(--ink); font-size: .76rem; line-height: 1.35; text-align: center; min-width: 0; }
.thumbs img { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--night-2); display: block; }
.thumbs a:hover img { outline: 2px solid var(--gilt); outline-offset: 2px; }
.grid12 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
.grid12 a { display: flex; flex-direction: column; gap: 2px; text-decoration: none; border: 1px solid var(--line); border-radius: 14px; padding: 10px 12px; color: var(--ink); min-width: 0; }
.grid12 a b { font-family: var(--font-display); font-size: .98rem; }
.grid12 a small { color: var(--mist); font-size: .74rem; line-height: 1.45; overflow-wrap: anywhere; }
.grid12 a:hover { border-color: var(--gilt); }
.doc footer { display: flex; flex-direction: column; gap: 6px; padding-top: 8px; }
.doc footer a { color: inherit; }
html[lang="ja"] *, html[lang="zh-Hans"] * { word-break: normal; }
html[lang="en"], html[lang="vi"] { overflow-wrap: break-word; }
@media (max-width: 560px) {
  .sec { padding: 16px 14px 14px; }
  .cta, .areas { grid-template-columns: minmax(0, 1fr); }
  .links, .grid12 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .card-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .card-hero figure { width: min(240px, 70vw); }
}
@media (max-width: 360px) { .facts { grid-template-columns: minmax(0, 1fr); } }
/* 꿈 쪽 (build_seo.js 6번) */
.months ul.cases { margin-top: 6px; padding-left: 1.1em; gap: 4px; }
.months ul.cases li { border: 0; padding: 0; background: none; font-size: .9rem; }
.dream-card { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: start; }
.dream-card img { width: 100%; height: auto; aspect-ratio: 2 / 3; border-radius: 8px; background: var(--night-2); display: block; }
.months li[id] { scroll-margin-top: 16px; }