/* 사주 사전(공개 콘텐츠) 공통 스타일 — 홈과 같은 우주·궤도 배경(다크, 궤도는 정지)
   2026-07-15 오너 지시: 홈 궤도 배경 도입 + 다크 배경 위 가시성 보정(카드 불투명·금색 포인트) */
:root{--bg:#0d0922;--card:rgba(24,19,46,.88);--bd:rgba(233,210,138,.26);--tx:#e6e1f5;--sub:#a99fce;--accent:#c9a9ff;--accent-deep:#b49bff;--gold:#e9d28a;--serif:"Noto Serif KR","Nanum Myeongjo",serif}
*{box-sizing:border-box;margin:0;padding:0}
body{font-family:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo",system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:15px;line-height:1.8;letter-spacing:-.1px;-webkit-font-smoothing:antialiased;word-break:keep-all;overflow-x:clip}
a{color:inherit;text-decoration:none}

/* ── 홈 궤도 배경(정지) — 파생 페이지의 pagebg-cosmic/dial과 동일한 값, CSS만으로 구현 ── */
body::before{content:"";position:fixed;inset:0;z-index:-2;pointer-events:none;
  background:radial-gradient(125% 108% at 50% 14%,#2a2356 0%,#191444 45%,#0d0922 100%)}
body::after{content:"";position:fixed;top:46%;left:50%;width:min(257vmin,2300px);height:min(257vmin,2300px);
  transform:translate(-50%,-50%);z-index:-1;pointer-events:none;border-radius:50%;opacity:.5;
  background:url(/assets/home-hero-clock.png) center/cover no-repeat;
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.42) 75%,transparent 86%);
  mask-image:radial-gradient(circle at 50% 50%,#000 60%,rgba(0,0,0,.42) 75%,transparent 86%)}

.hdr{position:sticky;top:0;z-index:10;background:rgba(13,9,34,.78);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:1px solid rgba(233,210,138,.18)}
.hdr-in{max-width:860px;margin:0 auto;padding:14px 20px;display:flex;align-items:center;gap:10px}
.hdr-logo{font-family:var(--serif);font-weight:800;font-size:18px;color:#f2e7c8}
.hdr-home{margin-left:auto;font-size:13px;font-weight:700;color:var(--accent);border:1px solid rgba(201,169,255,.4);border-radius:99px;padding:6px 14px;background:rgba(124,77,255,.1)}

.wrap{max-width:860px;margin:0 auto;padding:22px 20px 80px}
.crumb{font-size:12.5px;color:#8b81ad;margin-bottom:16px}
.crumb a{color:var(--accent);font-weight:600}

h1{font-family:var(--serif);font-size:27px;line-height:1.35;color:#f2e7c8;margin-bottom:8px;text-shadow:0 2px 10px rgba(8,5,26,.6)}
h1 .hanja{font-size:17px;color:var(--gold);font-weight:600;margin-left:6px}
.lead{font-size:15px;color:#c2bade;margin-bottom:22px;text-shadow:0 1px 6px rgba(8,5,26,.5)}
.lead b{color:#ffe9a8}

.sec{background:var(--card);border:1px solid var(--bd);border-radius:16px;padding:24px 24px 22px;margin-bottom:16px;box-shadow:0 10px 30px rgba(8,5,26,.35);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.sec h2{font-family:var(--serif);font-size:19px;color:#e9d28a;margin-bottom:12px}
.sec h3{font-size:14.5px;color:#d9c8f5;margin:16px 0 6px}
.sec p{margin:9px 0;color:#d8d2f0}
.sec b{color:#f0ecff}
.sec ul{margin:6px 0 0 20px}
.sec li{margin:6px 0;color:#d8d2f0}

.note{background:rgba(233,210,138,.09);border-left:3px solid rgba(233,210,138,.5);border-radius:0 10px 10px 0;padding:11px 15px;font-size:13.5px;color:#d9cba0;margin-top:14px;line-height:1.75}
.note b{color:#ffe9a8}
.lnk{color:var(--accent);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.lnk:hover{color:#e7c6ff}

table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:10px}
th,td{border:1px solid rgba(233,210,138,.22);padding:8px 10px;text-align:left}
th{background:rgba(233,210,138,.12);font-weight:700;color:#e9d28a;font-size:13px}
td{color:#d8d2f0}
td b{color:#ffe9a8}

.star{border:1px solid rgba(233,210,138,.32);background:rgba(233,210,138,.07);border-radius:12px;padding:12px 14px;margin-bottom:9px}
.star b{display:block;font-size:15px;color:#ffd98a;margin-bottom:3px}
.star p{font-size:13.5px;color:#c9c2e0;margin:0}

.fam{list-style:none;margin:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.fam li{background:rgba(255,255,255,.045);border:1px solid var(--bd);border-radius:10px;padding:9px 12px;margin:0;font-size:14px;color:#f0ecff}
.fam li span{font-size:12px;color:var(--sub);margin-left:4px}

.cta-box{background:linear-gradient(165deg,#2b2152,#161027);border:1.5px solid rgba(233,210,138,.42);border-radius:18px;padding:26px 24px;margin:22px 0 16px;color:#e7e1ff;box-shadow:0 14px 40px rgba(8,5,26,.5),0 0 18px rgba(240,205,120,.14)}
.cta-box h2{font-family:var(--serif);font-size:19px;color:#f2e7c8;margin-bottom:8px}
.cta-box p{font-size:14px;color:#c2bade;line-height:1.75}
.cta-box b{color:#ffe9a8}
.cta-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:16px}
.cta{display:inline-block;padding:12px 20px;border-radius:12px;font-weight:800;font-size:14.5px;color:#2c2008;background:linear-gradient(135deg,#fbeec4,#f0d28a 46%,#dfb257);box-shadow:0 8px 20px rgba(224,180,92,.28)}
.cta.ghost{background:transparent;color:#e9d28a;border:1px solid rgba(233,210,138,.5);box-shadow:none}

.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:14px}
.col{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:14px 14px 12px;box-shadow:0 8px 22px rgba(8,5,26,.3)}
.col h3{font-family:var(--serif);font-size:15px;color:#e9d28a;margin-bottom:8px;padding-bottom:6px;border-bottom:1px solid var(--bd)}
.col ul{list-style:none}
.col li{margin:5px 0}
.col li a{font-size:13.5px;color:#d8d2f0;font-weight:600}
.col li a:hover{color:#fff}
.col li a span{font-size:11.5px;color:var(--sub);font-weight:500;margin-left:3px}

.nav-sec{text-align:center}

/* 신살 사전 */
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{background:rgba(233,210,138,.08);border:1px solid rgba(233,210,138,.35);border-radius:10px;padding:7px 12px;font-size:13.5px;color:#d9cba0}
.chip b{color:#ffd98a;margin-left:3px}
.chips a.chip{color:#d9cba0;font-weight:600}
.chips a.chip:hover{border-color:var(--accent);color:#e7c6ff}
.quote{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-left:3px solid rgba(233,210,138,.55);border-radius:0 12px 12px 0;padding:13px 16px}
.q-src{font-size:12px;font-weight:700;color:#e9d28a;margin-bottom:5px}
.quote p{font-size:13.5px;color:#c9c2e0;line-height:1.8;margin:0}
.scards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:11px}
.scard{background:var(--card);border:1px solid var(--bd);border-radius:14px;padding:15px 16px;transition:border-color .15s,transform .12s;box-shadow:0 8px 22px rgba(8,5,26,.3)}
.scard:hover{border-color:var(--accent);transform:translateY(-1px)}
.scard b{display:block;font-size:15.5px;color:#f0ecff;margin-bottom:4px}
.scard span{display:block;font-size:12.5px;color:var(--sub);line-height:1.6}
.faq-q{border-top:1px solid var(--bd);padding:13px 0 3px}
.faq-q:first-of-type{border-top:0;padding-top:0}
.faq-q>b{display:block;font-size:14.5px;color:#f0ecff;margin-bottom:5px}
.faq-q p{font-size:13.5px;color:#b9b0d6;line-height:1.8;margin:0}
.faq-q p b{color:#e9d28a}
.sec h2 .sm{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--sub);margin-left:5px}

@media(max-width:640px){
  h1{font-size:23px}
  .sec{padding:19px 16px}
  .cta-box{padding:22px 17px}
  .cta,.cta.ghost{flex:1;text-align:center;padding:12px 14px;font-size:14px}
  .grid{grid-template-columns:repeat(auto-fill,minmax(140px,1fr));gap:10px}
  th,td{padding:7px 8px;font-size:12.5px}
  .scards{grid-template-columns:1fr}
  body::after{opacity:.42}
}