/* 어루의 다른 점괘(궁합·꿈해몽·타로·토정비결) 공통 디자인 — 사주 페이지와 같은 대나무숲 길 배경. 2026-11-09 */
:root{color-scheme:only dark;--night:#120e1c;--ink:#f6efe4;--muted:#c9bda9;--gold:#e9c27a;--gold2:#f7dfa6;--ember:#f08a4b;--line:rgba(233,194,122,.28);--card:rgba(24,17,42,.66)}
*{box-sizing:border-box;margin:0;padding:0}
body{background:transparent;color:var(--ink);font-family:"Noto Sans KR",system-ui,sans-serif;line-height:1.65;-webkit-font-smoothing:antialiased;min-height:100vh}
a{color:inherit}
.pagebg{position:fixed;inset:0;z-index:-2;background:#120e1c url(../img/eoru/saju_pc.jpg) center/cover no-repeat;pointer-events:none}
@media (max-aspect-ratio:4/5){.pagebg{background-image:url(../img/eoru/saju_mobile.jpg);background-position:center bottom}}
.pagebg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(16,11,28,.25),rgba(16,11,28,.1) 35%,rgba(16,11,28,.45) 80%,rgba(12,8,22,.7))}
.top{display:flex;justify-content:space-between;align-items:center;max-width:860px;margin:0 auto;padding:16px 20px}
.brand{font-family:"Cinzel",serif;font-weight:700;letter-spacing:.12em;color:var(--gold);text-decoration:none;font-size:20px}
.brand small{font-family:"Noto Sans KR";font-weight:400;letter-spacing:.3em;color:var(--muted);font-size:12px;margin-left:8px}
.top a.back{color:var(--muted);font-size:14px;text-decoration:none}
.wrap{max-width:860px;margin:0 auto;padding:0 20px 80px}
.menu{display:flex;gap:8px;flex-wrap:wrap;margin:4px 0 18px}
.menu a{font-size:14px;text-decoration:none;padding:8px 14px;border-radius:999px;border:1px solid var(--line);background:rgba(18,14,28,.5);backdrop-filter:blur(6px);color:var(--gold2)}
.menu a[aria-current=page]{background:var(--gold);color:var(--night);font-weight:700;border-color:var(--gold)}
.intro{display:grid;grid-template-columns:120px 1fr;gap:20px;align-items:center;padding:10px 0 22px}
.intro img{width:120px;height:120px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 1px var(--line),0 16px 50px rgba(240,138,75,.25)}
.eyebrow{font-family:"Cinzel",serif;letter-spacing:.3em;color:var(--gold);font-size:12px;text-transform:uppercase}
h1{font-family:"Gowun Batang",serif;font-size:clamp(26px,4.4vw,36px);line-height:1.3;margin:6px 0 8px;text-shadow:0 2px 12px rgba(8,5,18,.8)}
.say{font-family:"Gowun Batang",serif;font-size:17px;color:var(--gold2);text-shadow:0 2px 10px rgba(8,5,18,.8)}
.panel,.result{border:1px solid var(--line);border-radius:20px;padding:20px;background:var(--card);backdrop-filter:blur(12px) saturate(1.1);-webkit-backdrop-filter:blur(12px) saturate(1.1)}
.result{margin-top:18px}
.panel h2,.result h2{font-family:"Gowun Batang",serif;font-size:21px;margin:0 0 10px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
label.f{display:block;font-size:14px;color:var(--muted);margin-bottom:12px}
label.f input,label.f select,label.f textarea{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:#1a1428;color:var(--ink);font:inherit;font-size:16px}
label.f textarea{min-height:120px;resize:vertical;line-height:1.6}
.check{display:flex;gap:8px;align-items:center;font-size:14px;color:var(--muted);margin:-2px 0 12px}
.go{display:block;width:100%;padding:15px;border:0;border-radius:999px;background:linear-gradient(180deg,#f7dfa6,#e2a95a);color:#2a1d0c;font:inherit;font-weight:700;font-size:17px;cursor:pointer;margin-top:6px}
.go[disabled]{opacity:.65;cursor:default}
.fine{font-size:12.5px;color:#b7aac6;margin-top:12px}
.err{background:rgba(240,138,75,.15);border:1px solid var(--ember);color:#ffd9c2;border-radius:12px;padding:10px 12px;margin:8px 0 12px;font-size:14px}
.person{border:1px solid rgba(255,255,255,.1);border-radius:16px;padding:14px;margin-bottom:12px;background:rgba(18,13,32,.45)}
.person legend,.person .pt{font-weight:700;color:var(--gold2);margin-bottom:8px;display:block}
.result .who{font-size:12px;color:var(--gold);letter-spacing:.1em;margin-bottom:4px}
.result h3{font-family:"Gowun Batang",serif;font-size:18px;color:var(--gold2);margin:16px 0 4px}
.result p{color:#e8def0;font-size:15.5px;white-space:pre-line}
.result .ainote,.result .note{font-size:12.5px;color:#b7aac6;margin-top:14px}
.result .note{font-size:15px;color:#e8def0;margin-top:0}
.badge{display:inline-block;font-size:14px;font-weight:700;border-radius:999px;padding:4px 14px;background:var(--gold);color:var(--night);margin:2px 0 8px}
.facts{list-style:none;display:grid;gap:8px;margin:8px 0 4px}
.facts li{border-left:3px solid var(--gold);padding:2px 0 2px 12px;color:#e8def0;font-size:15px}
.base{border:1px dashed var(--line);border-radius:14px;padding:14px;margin:6px 0 4px}
.base b{font-family:"Gowun Batang",serif;font-size:19px;color:var(--gold2);display:block;margin-bottom:4px}
/* 타로 */
.deck{display:grid;grid-template-columns:repeat(11,1fr);gap:8px;margin:8px 0 12px}
.tcard{position:relative;aspect-ratio:2/3;border-radius:12px;border:1px solid rgba(233,194,122,.55);cursor:pointer;perspective:800px;background:none;padding:0;font:inherit;color:inherit}
.tcard .in{position:absolute;inset:0;transition:transform .6s;transform-style:preserve-3d}
.tcard.open .in{transform:rotateY(180deg)}
.tcard .back,.tcard .face{position:absolute;inset:0;border-radius:11px;backface-visibility:hidden;-webkit-backface-visibility:hidden;display:grid;place-items:center;text-align:center}
.tcard .back{background:radial-gradient(circle at 50% 40%,#4a3576,#221838 70%);box-shadow:inset 0 0 0 4px rgba(233,194,122,.25)}
.tcard .back::after{content:"✦";font-size:22px;color:var(--gold)}
.tcard .face{transform:rotateY(180deg);background:linear-gradient(180deg,#fbf3e1,#ecd9b0);color:#2a1d0c;padding:6px;align-content:center;gap:4px}
.tcard .face .m{font-family:"Cinzel",serif;font-size:13px;font-weight:700}
.tcard .face .ic{font-size:26px}
.tcard .face .nm{font-family:"Gowun Batang",serif;font-weight:700;font-size:13px;line-height:1.3}
.tcard .face .rv{font-size:11px;color:#8a5a1c}
.tcard.rev .face .ic{transform:rotate(180deg)}
.tcard .back{background:#221838 url(../img/tarot/back.webp?v=20261110) center/cover no-repeat}
.tcard .back::after{content:none}
.tcard .face.pic{padding:0;background:#221838;overflow:hidden;display:block}
.tcard .face.pic img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border-radius:inherit}
.tcard.rev .face.pic img{transform:rotate(180deg)}
.tcard .face.pic .nm{position:absolute;left:0;right:0;bottom:0;padding:16px 3px 6px;background:linear-gradient(transparent,rgba(18,12,30,.88));color:#fbeed2;font-size:12px;border-radius:0 0 11px 11px;word-break:keep-all}
.tcard .face.pic .rv{position:absolute;top:5px;right:5px;background:rgba(18,12,30,.8);color:#f3d79c;border-radius:6px;padding:1px 6px;font-size:10px}
.tcard .face.pic .rv:empty{display:none}
.tcard.picked{outline:2px solid var(--gold);outline-offset:3px}
.tcard[disabled]{cursor:default}
.spread{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:10px 0}
.spread .slot{text-align:center;font-size:13px;color:var(--gold2)}
.spread .tcard{width:100%;max-width:150px;margin:6px auto 0;display:block}
.hint{font-size:14px;color:var(--muted);margin:0 0 6px}
@media (max-width:640px){.intro{grid-template-columns:1fr;justify-items:center;text-align:center}.intro img{width:100px;height:100px}.deck{grid-template-columns:repeat(6,1fr);gap:6px}}
@media (prefers-reduced-motion:reduce){.tcard .in{transition:none}}
.lunar{display:flex;gap:6px;margin-top:6px}.lunar select{flex:1;min-width:0;padding:12px 8px;border-radius:12px;border:1px solid var(--line);background:#1a1428;color:var(--ink);font:inherit;font-size:15px}
.lhint{display:block;font-size:13px;color:var(--muted);margin-top:6px;line-height:1.5}
[hidden]{display:none!important}
.toshrine{display:block;margin-top:14px;text-align:center;text-decoration:none;border:1px solid var(--gold);border-radius:18px;padding:13px 16px;color:var(--gold2);font-weight:700;background:rgba(18,13,32,.55);backdrop-filter:blur(8px)}
.toshrine small{display:block;font-weight:400;font-size:12.5px;color:var(--muted);margin-top:2px}

/* 오늘의 한 장 (2026-11-10) */
.today{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:start;margin:8px 0 6px}
.today .tslot .tcard{width:100%;display:block}
.today .kicker{font-family:"Cinzel",serif;color:var(--gold2);font-size:13px;letter-spacing:.08em}
.today h2{font-family:"Gowun Batang",serif;font-size:24px;margin:4px 0 10px}
.today p{line-height:1.75}
.today .tact{margin-top:12px;padding:12px 14px;border:1px solid var(--line);border-radius:12px;background:rgba(233,194,122,.06);display:grid;gap:4px}
.today .tact b{color:var(--gold2);font-size:13px}
@media (max-width:640px){.today{grid-template-columns:1fr;justify-items:center;text-align:center}.today .tslot{width:170px}}

/* 자물쇠 칸: 유료 풀이에 들어 있는 칸 이름만 (2026-11-11) */
.locked{margin-top:18px;border:1px solid rgba(233,194,122,.45);border-radius:18px;padding:16px;background:rgba(233,194,122,.05)}
.locked .lt{display:block;color:#f7dfa6;font-size:15.5px;margin-bottom:8px}
.locked ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:10px}
.locked li{border-left:3px solid rgba(233,194,122,.5);padding:2px 0 2px 10px}
.locked .lh{display:block;color:#efe6d6;font-size:14.5px;font-weight:700;margin-bottom:5px}
.locked .bars{display:grid;gap:5px}.locked .bars i{display:block;height:8px;border-radius:6px;background:rgba(255,255,255,.12)}
.locked .toshrine{margin-top:4px}