/* SajuHub — 확정 디자인 E2(design/시안/e2.html)에서 옮김 */
:root{
  --night:#141110; --night2:#1e1917; --gold:#d9b25f; --paper:#ecc867; --paper2:#f3d98f; --cinnabar:#c0161b; --ink:#f4ead6; --muted:#b5a68d; --line:#3a302a;
  --wood:#3b82c4; --fire:#e04a3a; --earth:#e7b322; --metal:#e9e4d8; --water:#8b93a7;
}
*{box-sizing:border-box}
body{margin:0;background:radial-gradient(900px 500px at 75% 10%,#3a1d16 0%,transparent 60%),var(--night);color:var(--ink);font:16px/1.7 Inter,"Gowun Batang",system-ui,sans-serif;overflow-x:hidden}
#sky{position:fixed;inset:0;pointer-events:none;z-index:0;overflow:hidden}
#sky span{position:absolute;bottom:-60px;font-family:"Ma Shan Zheng";color:var(--gold);opacity:0;animation:rise linear infinite}
@keyframes rise{0%{transform:translateY(0) rotate(0);opacity:0}10%{opacity:.16}90%{opacity:.12}100%{transform:translateY(-115vh) rotate(25deg);opacity:0}}
.wrap{max-width:1080px;margin:0 auto;padding:0 16px;position:relative;z-index:1}
.nav{display:flex;align-items:center;gap:20px;height:64px;overflow-x:auto}
.logo{display:flex;align-items:center;gap:10px;font:700 21px "Cormorant Garamond",serif;white-space:nowrap;letter-spacing:.02em}
.seal{display:inline-grid;place-items:center;width:30px;height:30px;background:var(--cinnabar);color:#fde9c8;font:22px/1 "Ma Shan Zheng";border-radius:3px;transform:rotate(-4deg)}
.nav a{color:var(--muted);text-decoration:none;font-size:14px;white-space:nowrap}.nav a.on{color:var(--ink)}
.hero{display:grid;grid-template-columns:1fr 400px;gap:40px;align-items:center;padding:20px 0 10px}
.brush{font:64px/1 "Nanum Brush Script";color:var(--gold)}
h1{font:700 50px/1.05 "Cormorant Garamond",serif;margin:6px 0 14px}
.lede{color:var(--muted);margin:0 0 22px;max-width:480px}
form{border:1px solid var(--line);background:rgba(30,25,23,.85);border-radius:14px;padding:18px;display:grid;grid-template-columns:1fr 1fr;gap:12px;backdrop-filter:blur(3px)}
label{display:block;font-size:12px;color:var(--muted);letter-spacing:.06em;text-transform:uppercase;margin-bottom:5px}
input{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 12px;font:inherit;background:var(--night2);color:var(--ink);color-scheme:dark}
.full{grid-column:1/-1}.ok{font-size:13px;color:#7fd39b;margin-top:4px}
.go{grid-column:1/-1;height:54px;border:0;border-radius:10px;background:var(--cinnabar);color:#fde9c8;font:600 17px Inter;cursor:pointer;letter-spacing:.02em;box-shadow:0 0 0 1px #e45a50 inset,0 10px 30px rgba(192,22,27,.35)}
/* 부적 */
.stage{position:relative;height:580px;display:grid;place-items:start center}
.charm{position:relative;width:300px;height:540px;background:
   radial-gradient(circle at 30% 20%,rgba(255,255,255,.25),transparent 40%),
   repeating-linear-gradient(0deg,rgba(120,80,0,.05) 0 2px,transparent 2px 7px),
   linear-gradient(180deg,var(--paper2),var(--paper));
  border-radius:4px;box-shadow:0 30px 60px rgba(0,0,0,.6);transform-origin:top;color:var(--cinnabar);padding:20px 18px}
/* 기본은 다 보임(자바스크립트 없는 검색 로봇용) — 애니메이션은 .anim 일 때만 숨겼다가 나타냄 */
.charm.anim{transform:scaleY(0)}
.charm.anim.open{animation:unroll 1s cubic-bezier(.3,1.2,.4,1) forwards}
@keyframes unroll{to{transform:scaleY(1)}}
.charm::before{content:"";position:absolute;inset:10px;border:3px solid var(--cinnabar);border-radius:2px;opacity:.9}
.charm::after{content:"";position:absolute;inset:16px;border:1px solid var(--cinnabar);opacity:.7}
.rod{position:absolute;left:50%;transform:translateX(-50%);width:336px;height:16px;border-radius:8px;background:linear-gradient(#6b3a21,#3b1e10);top:-8px;z-index:2;box-shadow:0 4px 8px rgba(0,0,0,.5)}
.ttl{text-align:center;font:44px/1 "Ma Shan Zheng";margin-top:16px;letter-spacing:.2em}
.cols{display:flex;flex-direction:row-reverse;justify-content:center;gap:8px;margin-top:22px}
.col{text-align:center;width:56px}
.col small{display:block;font:600 10px Inter;letter-spacing:.12em;color:#8a5a12;text-transform:uppercase;margin-bottom:4px}
.ch{display:block;font:52px/1.12 "Ma Shan Zheng"}
.charm.anim .ch{clip-path:inset(0 0 100% 0)}
.charm.anim .ch.w{animation:write .55s ease-out forwards}
@keyframes write{to{clip-path:inset(0 0 0 0)}}
.col.me .ch{text-shadow:0 0 1px var(--cinnabar)}
.col.me small{color:var(--cinnabar)}
.kn{font:600 12px "Gowun Batang";color:#8a5a12}
.stamp{position:absolute;right:26px;bottom:30px;width:86px;height:86px;border:4px solid var(--cinnabar);border-radius:6px;display:grid;grid-template-columns:1fr 1fr;place-items:center;font:30px/1 "Ma Shan Zheng";color:var(--cinnabar);opacity:.92;transform:rotate(-8deg);mix-blend-mode:multiply}
.charm.anim .stamp{opacity:0;transform:scale(2.2) rotate(-14deg)}
.charm.anim .stamp.hit{animation:stamp .35s cubic-bezier(.5,0,.75,0) forwards}
@keyframes stamp{to{opacity:.92;transform:scale(1) rotate(-8deg)}}
.charm.shake{animation:shake .25s}
@keyframes shake{25%{transform:translate(2px,1px)}75%{transform:translate(-2px,-1px)}}
.foot{position:absolute;left:30px;right:118px;bottom:40px;text-align:left;font:600 10px/1.4 Inter;letter-spacing:.12em;color:#8a5a12}
.core{position:relative;width:118px;height:118px;margin:22px auto 0;border:3px solid var(--cinnabar);border-radius:50%;display:grid;place-items:center}
.charm.anim .core{opacity:0;transform:rotate(-90deg) scale(.4)}
.core::before{content:"";position:absolute;inset:8px;border:1px dashed var(--cinnabar);border-radius:50%}
.core b{font:64px/1 "Ma Shan Zheng"}
.charm.anim .core.on{animation:core .6s cubic-bezier(.3,1.4,.5,1) forwards}
@keyframes core{to{opacity:1;transform:none}}
/* sections */
.sec{margin-top:56px}
.k{font:34px/1 "Nanum Brush Script";color:var(--gold)}
h2{font:700 34px/1.15 "Cormorant Garamond",serif;margin:2px 0 16px}
.why{border:1px solid #5b2a22;background:linear-gradient(90deg,rgba(192,22,27,.18),transparent);border-radius:14px;padding:16px 18px;display:flex;gap:18px;align-items:center;flex-wrap:wrap}
.why .vs{font:40px/1 "Ma Shan Zheng";color:var(--paper)}.why s{opacity:.4}
.grid2{display:grid;grid-template-columns:1fr 1.2fr;gap:24px}
.panel{border:1px solid var(--line);background:rgba(30,25,23,.85);border-radius:16px;padding:22px}
.seals{display:flex;justify-content:space-between;gap:8px}
.ss{text-align:center;flex:1}
.ss .o{width:64px;height:64px;margin:0 auto 6px;border-radius:50%;display:grid;place-items:center;font:34px/1 "Ma Shan Zheng";border:3px solid currentColor;position:relative}
.ss .o i{position:absolute;right:-6px;bottom:-6px;font:700 13px Inter;font-style:normal;background:var(--night);border:2px solid currentColor;border-radius:50%;width:26px;height:26px;display:grid;place-items:center}
.ss small{font-size:12px;color:var(--muted)}
.read p{margin:0 0 12px;color:#e6dcc6}.disc{font-size:13px;color:var(--muted);font-style:italic}
/* 십간 붓글씨 줄 */
.stems{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;text-align:center}
.stems div{padding:8px 0;border-radius:10px;transition:background .2s}
.stems div:hover{background:rgba(217,178,95,.1)}
.stems b{display:block;font:44px/1.1 "Ma Shan Zheng"}.stems span{display:block;font:700 14px "Gowun Batang"}.stems small{font-size:11px;color:var(--muted)}
.stems .you b{color:var(--paper);text-shadow:0 0 18px rgba(236,200,103,.6)}
/* 십이지 나무패 */
.plaques{display:grid;grid-template-columns:repeat(12,1fr);gap:8px;padding-top:14px;border-top:3px solid #5a3a22}
.pl{transform-origin:top center;animation:sway 4s ease-in-out infinite;position:relative;text-align:center}
.pl::before{content:"";position:absolute;top:-14px;left:50%;width:2px;height:14px;background:#8b6b4a}
.pl div{background:linear-gradient(#5b3a22,#3f2716);border:1px solid #7a5434;border-radius:6px;padding:10px 0 8px;color:var(--paper)}
.pl div{padding:8px 4px 9px}
.pl b{display:block;font:22px/1 "Ma Shan Zheng";color:#e9cf8f}
.pl svg{display:block;width:100%;max-width:66px;aspect-ratio:1;margin:6px auto 4px;fill:var(--paper);filter:drop-shadow(0 2px 0 rgba(0,0,0,.55));transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.pl:hover svg{transform:translateY(-5px) scale(1.1)}
.pl small{display:block;font:600 10.5px Inter;letter-spacing:.08em;text-transform:uppercase;color:#f1dfb4}
.pl span{display:block;font:700 11px "Gowun Batang";color:#b99b6b}
.pl.you svg{fill:#ffe3a3}
.mine{margin-top:22px;color:var(--muted);font-size:15px}.mine b{color:var(--paper)}
.pl.you div{background:linear-gradient(#a0161b,#6d0f12);border-color:#e05a4f}
@keyframes sway{0%,100%{transform:rotate(-2.5deg)}50%{transform:rotate(2.5deg)}}
.ad{border:1px dashed var(--line);border-radius:14px;color:#6f6152;font-size:12px;text-align:center;padding:26px 0;margin:46px 0}
.faq h2{font-size:25px;margin:22px 0 4px}.faq p{margin:0;color:#e0d6c1}
footer{margin-top:44px;border-top:1px solid var(--line);padding:22px 0;font-size:13px;color:var(--muted);position:relative;z-index:1}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}.brush{font-size:48px}h1{font-size:36px}
  .grid2{grid-template-columns:1fr}.stems{grid-template-columns:repeat(5,1fr)}.plaques{grid-template-columns:repeat(4,1fr);row-gap:26px}
  .ss .o{width:52px;height:52px;font-size:28px}
}
@media(max-width:380px){.charm{width:280px}.rod{width:310px}.ch{font-size:46px}.col{width:52px}}
@media(prefers-reduced-motion:reduce){*{animation:none!important}}   /* 이때는 saju-ui.js 가 .anim 을 안 붙여 처음부터 다 보임 */

/* ---- 실제 계산기에서 새로 생긴 부분 (E2 스타일에 맞춤) ---- */
[hidden]{display:none!important}   /* .why{display:flex} 같은 규칙이 hidden 을 덮어쓰지 않게 */
select{width:100%;height:46px;border:1px solid var(--line);border-radius:10px;padding:0 10px;font:inherit;background:var(--night2);color:var(--ink);color-scheme:dark}
input:disabled{opacity:.45}
.dob{display:grid;grid-template-columns:1.1fr 1fr .8fr;gap:8px}
.chk{display:inline-flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);margin:6px 14px 0 0;text-transform:none;letter-spacing:0;cursor:pointer}
.chk input{width:auto;height:auto;margin:0;accent-color:var(--cinnabar)}
.citybox{position:relative}
#city-list{position:absolute;left:0;right:0;top:100%;margin:4px 0 0;padding:4px;list-style:none;background:#241e1b;border:1px solid var(--line);border-radius:10px;z-index:20;max-height:320px;overflow:auto;box-shadow:0 18px 40px rgba(0,0,0,.5)}
#city-list li{padding:9px 10px;border-radius:8px;cursor:pointer;font-size:15px}
#city-list li:hover,#city-list li.on{background:rgba(217,178,95,.14)}
#city-list li.none{color:var(--muted);cursor:default;font-size:14px}
#city-info{font-size:12.5px;color:#7fd39b;margin-top:5px;min-height:1em}
details.opts{grid-column:1/-1;font-size:14px;color:var(--muted)}
details.opts summary{cursor:pointer;color:var(--gold);font-size:13.5px}
details.opts .in{padding:10px 0 2px;display:grid;gap:8px}
details.opts .row{display:grid;grid-template-columns:1fr 1fr auto;gap:8px;align-items:end}
details.opts button{height:46px;border:1px solid var(--line);border-radius:10px;background:var(--night2);color:var(--ink);padding:0 14px;cursor:pointer}
#form-err{grid-column:1/-1;margin:0;color:#ff8f86;font-size:14px}
#example{font:600 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-align:center;margin-bottom:10px}
.why .vs small{font:600 13px Inter;color:var(--muted)}
.why .vs.ok{color:#7fd39b}
.trace{list-style:none;margin:0;padding:0;font-size:14.5px}
.trace li{display:grid;grid-template-columns:24px 1fr auto;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)}
.trace li:last-child{border:0}
.trace .n{color:var(--gold);font-weight:600}.trace .t{font-weight:600;color:var(--paper);text-align:right}
#warn{margin-top:16px;border:1px solid #6b5420;background:rgba(217,178,95,.08);border-radius:12px;padding:6px 14px;font-size:14px;color:#ecd9a8}
#warn p{margin:8px 0}
.ss.wood{color:var(--wood)}.ss.fire{color:var(--fire)}.ss.earth{color:var(--earth)}.ss.metal{color:var(--metal)}.ss.water{color:var(--water)}
.ss.zero .o{opacity:.4}
.src{font-size:13px;color:var(--muted)}
.src a,.read a,footer a{color:var(--gold)}
@media(max-width:900px){.trace li{grid-template-columns:22px 1fr}.trace .t{grid-column:2;text-align:left}details.opts .row{grid-template-columns:1fr}}

.nav a.logo{font:700 21px "Cormorant Garamond",serif;color:var(--ink)}
@media(max-width:600px){#saju-form>div{grid-column:1/-1}}
.stems em,.pl em{display:block;font:500 10.5px Inter;font-style:normal;color:var(--muted);letter-spacing:.02em}
/* 나무패 길이 항상 같게(번역 등으로 글자가 길어져도) */
.plaques{align-items:stretch}.pl{display:flex}.pl>div{flex:1}

/* ---- 글 페이지(About·Privacy·Contact·Terms) ---- */
.doc{max-width:760px;margin:0 auto;padding:26px 0 10px}
.doc .brush{font-size:52px}
.doc h1{font-size:46px}
.doc h2{font-size:28px;margin:40px 0 10px}
.doc h3{font:600 17px Inter;margin:24px 0 6px;color:var(--paper)}
.doc p,.doc li{color:#e6dcc6}
.doc p{margin:0 0 14px}
.doc ul{margin:0 0 14px;padding-left:22px}.doc li{margin-bottom:6px}
.doc a{color:var(--gold)}
.doc .upd{font:600 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:22px}
.doc .box{border:1px solid var(--line);background:rgba(30,25,23,.85);border-radius:14px;padding:16px 20px;margin:0 0 18px}
.doc .box ul{margin:0}
.doc .mail{display:inline-block;margin:6px 0 10px;padding:12px 20px;border-radius:10px;background:var(--cinnabar);color:#fde9c8;text-decoration:none;font-weight:600;box-shadow:0 0 0 1px #e45a50 inset}
.doc table{width:100%;border-collapse:collapse;font-size:14.5px;margin:0 0 16px}
.doc th,.doc td{text-align:left;padding:8px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.doc th{color:var(--muted);font-weight:600;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase}
@media(max-width:600px){.doc h1{font-size:36px}.doc .brush{font-size:40px}.doc table{display:block;overflow-x:auto}}
.doc code{overflow-wrap:anywhere;font-size:.92em;color:var(--paper2)}

/* ---- 십신·지장간 표 · 일간 링크 · Bazi 붓글씨 한자 ---- */
.tgw{overflow-x:auto}
.tg{width:100%;border-collapse:collapse;font-size:14.5px;min-width:540px}
.tg th,.tg td{padding:9px 10px;border-bottom:1px dashed var(--line);text-align:center;vertical-align:top}
.tg tr:last-child td{border:0}
.tg th{color:var(--muted);font:600 12px Inter;letter-spacing:.08em;text-transform:uppercase}
.tg td:first-child{text-align:left;color:var(--muted);font-size:13px;width:150px}
.tg b{display:block;font:34px/1.1 "Ma Shan Zheng";color:var(--paper)}
.tg td.me b{color:#ffe3a3;text-shadow:0 0 16px rgba(236,200,103,.55)}
.tg small{display:block;color:var(--muted);font-size:11.5px}
.tg .hs{font:22px/1.2 "Ma Shan Zheng";color:#e9cf8f}
.tg .na{color:#6f6152}
.read .more{margin-top:14px}.read .more a{color:var(--gold);font-weight:600}
.brush .hz{font-family:"Ma Shan Zheng";font-size:.86em}

/* ---- 일간 페이지 · 허브 · 궁합 · 비교 글 ---- */
.crumb{font-size:13px;color:var(--muted);margin:0 0 6px}.crumb a{color:var(--gold)}
.dmhead{display:flex;gap:20px;align-items:center}
.dmseal{flex:none;width:96px;height:96px;border:3px solid var(--cinnabar);border-radius:8px;display:grid;place-items:center;font:66px/1 "Ma Shan Zheng";color:var(--paper);background:rgba(192,22,27,.12);transform:rotate(-3deg)}
.doc .lede{max-width:none;font-size:17px}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 18px;margin:0 0 18px;padding:16px 18px;border:1px solid var(--line);border-radius:14px;background:rgba(30,25,23,.85)}
.facts dt{font:600 11px Inter;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}.facts dd{margin:2px 0 0;color:var(--ink)}
.cta a{display:inline-block;padding:11px 18px;border-radius:10px;background:var(--cinnabar);color:#fde9c8!important;text-decoration:none;font-weight:600;box-shadow:0 0 0 1px #e45a50 inset}
.pts li{margin-bottom:9px}
.seasons{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.seasons>div{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:rgba(30,25,23,.6)}
.seasons h3{margin:0 0 4px}.seasons h3 small{font:500 12px Inter;color:var(--muted);margin-left:6px}.seasons p{margin:0;font-size:15px}
.tblw{overflow-x:auto}
.doc table.rel th{width:150px;text-transform:none;letter-spacing:0;font-size:14px;color:var(--paper)}
.rel td small{display:block;color:var(--muted);font-size:13.5px;margin-top:3px}
.rel a{white-space:nowrap}
.dmgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:8px 0 10px}
.dmgrid a{display:block;text-align:center;padding:12px 6px;border:1px solid var(--line);border-radius:12px;background:rgba(30,25,23,.7);color:var(--ink)!important;text-decoration:none;transition:border-color .2s,transform .2s}
.dmgrid a:hover{border-color:var(--gold);transform:translateY(-2px)}
.dmgrid a.on{border-color:var(--cinnabar);background:rgba(192,22,27,.15)}
.dmgrid b{display:block;font:44px/1.1 "Ma Shan Zheng";color:var(--paper)}
.dmgrid span{display:block;font-weight:600;font-size:14px}.dmgrid small{display:block;color:var(--muted);font-size:12px}
.dmgrid em{display:block;font-style:italic;color:#cbb994;font-size:12.5px;margin-top:2px}
.doc h2.other{margin-top:46px}
.doc .ad{margin:34px 0}
@media(max-width:700px){.seasons{grid-template-columns:1fr}.dmgrid{grid-template-columns:repeat(2,1fr)}.dmseal{width:72px;height:72px;font-size:50px}.doc table.rel th{width:110px}}
/* 허브 찾기 · 궁합 */
.doc.wide{max-width:980px}
form.finder{max-width:560px;margin:4px 0 18px}
#f-err,#c-err{grid-column:1/-1;margin:0;color:#ff8f86;font-size:14px}
.dmout{display:flex;gap:20px;align-items:flex-start;border:1px solid #5b2a22;background:linear-gradient(90deg,rgba(192,22,27,.18),transparent);border-radius:14px;padding:18px 20px;margin:0 0 10px}
.dmout h2{margin:2px 0 8px;font-size:30px}.dmout p{margin:0 0 8px}
.cta-a{color:var(--gold);font-weight:600}
form.cform{max-width:760px;margin:4px 0 22px}
form.cform fieldset{border:1px solid var(--line);border-radius:12px;padding:10px 12px 12px;margin:0;min-width:0}
form.cform legend{font:600 12px Inter;letter-spacing:.08em;text-transform:uppercase;color:var(--gold);padding:0 6px}
.cout{margin-bottom:10px}
.cout .exl{font:600 11px Inter;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);text-align:center;margin:0 0 10px}
.pair{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:center}
.pair .vs{font:54px/1 "Ma Shan Zheng";color:var(--cinnabar)}
.who{border:1px solid var(--line);border-radius:14px;padding:14px 16px;background:linear-gradient(180deg,var(--paper2),var(--paper));color:#4a2a10}
.who .k{color:var(--cinnabar);font-size:26px}.who>small{color:#8a5a12;font-weight:600}
.who p{margin:8px 0 0;font-size:14px;color:#4a2a10}.who a{color:var(--cinnabar);font-weight:600}
.mcols{display:flex;flex-direction:row-reverse;justify-content:center;gap:12px;margin-top:6px}
.mcols div{text-align:center}.mcols small{display:block;font:600 10px Inter;letter-spacing:.1em;text-transform:uppercase;color:#8a5a12}
.mcols b{display:block;font:44px/1.1 "Ma Shan Zheng";color:var(--cinnabar)}
.mcols .me b{text-shadow:0 0 1px var(--cinnabar)}.mcols .me small{color:var(--cinnabar)}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0}
.tagc{border-radius:999px;padding:5px 12px;font-size:13px;font-weight:600;border:1px solid var(--line)}
.tagc.harmony{border-color:#3f8a5a;color:#9fe0b4}.tagc.flow{border-color:#3b6ea3;color:#a8cdf2}.tagc.spark{border-color:#a8452f;color:#ffb09b}
.tagc.mirror{border-color:#8a7440;color:var(--paper2)}.tagc.neutral{color:var(--muted)}
.cgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.cgrid .panel h3{margin:4px 0 6px;font:600 18px Inter;color:var(--paper)}.cgrid .panel p,.cgrid .panel li{font-size:15px}
.cgrid ul{padding-left:20px;margin:0}
@media(max-width:700px){.pair{grid-template-columns:1fr}.pair .vs{text-align:center;font-size:40px}.cgrid{grid-template-columns:1fr}.dmout{flex-direction:column}}
.stage{overflow-x:clip}   /* 도장 애니메이션(크게→작게) 중 폰 화면 1px 넘침 방지 */
@media(max-width:600px){form.cform fieldset{grid-column:1/-1}}   /* 폰: 두 사람 입력칸을 한 줄씩 */
.cwarn{border:1px solid #6b5420;background:rgba(217,178,95,.08);border-radius:12px;padding:10px 14px;font-size:14px;color:#ecd9a8;margin:0 0 12px}.cwarn a{color:var(--gold)}

/* ---- 버튼·링크 반응(10-07 사용자 "버튼들에 액션을 좀 줘~롤오버~멀 클릭했는지를 모르겠네~") ----
   올림(hover): 밝아지고 살짝 뜸 · 누름(active): 눌려 들어감 · 키보드 초점(focus-visible): 금색 테두리 */
.go,.cta a,.doc .mail,details.opts button{transition:transform .15s ease,filter .15s ease,box-shadow .15s ease,background-color .15s ease}
.go:hover,.cta a:hover,.doc .mail:hover{filter:brightness(1.12);transform:translateY(-2px);box-shadow:0 0 0 1px #ff7a70 inset,0 14px 34px rgba(192,22,27,.5)}
.go:active,.cta a:active,.doc .mail:active{transform:translateY(1px) scale(.985);filter:brightness(.92);box-shadow:0 0 0 1px #e45a50 inset,0 4px 10px rgba(192,22,27,.35)}
.go.pressed{animation:pressed .45s ease}
@keyframes pressed{0%{transform:scale(.97)}40%{transform:scale(1.02);filter:brightness(1.2)}100%{transform:none}}
details.opts button:hover{border-color:var(--gold);background:#2a221e}
details.opts button:active{transform:translateY(1px)}
.go:focus-visible,.cta a:focus-visible,.doc .mail:focus-visible,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
input:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(217,178,95,.22)}
input:hover:not(:disabled),select:hover{border-color:#5a4a3e}
/* 위 메뉴: 올리면 금색 밑줄, 지금 페이지는 붉은 밑줄 */
.nav a:not(.logo){position:relative;padding:4px 0;transition:color .15s}
.nav a:not(.logo)::after{content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .2s ease}
.nav a:not(.logo):hover{color:var(--ink)}.nav a:not(.logo):hover::after{transform:scaleX(1)}
.nav a.on::after{transform:scaleX(1);background:var(--cinnabar)}
.nav a.logo:hover .seal{transform:rotate(4deg) scale(1.08)}.seal{transition:transform .2s}
/* 글 속 링크·체크칸·펼침 */
.doc a:not(.mail):not(.cta-a):hover,.src a:hover,.read a:hover,footer a:hover,.crumb a:hover{color:var(--paper2);text-decoration-thickness:2px}
.chk:hover{color:var(--ink)}
details.opts summary:hover{color:var(--paper2)}
/* 카드(일간 10개)·나무패·십간: 누르는 순간도 보이게 */
.dmgrid a:active{transform:translateY(0) scale(.97);border-color:var(--cinnabar)}
.stems div{cursor:default}
#city-list li:active{background:rgba(217,178,95,.28)}
@media(hover:none){.go:hover,.cta a:hover,.doc .mail:hover{transform:none;filter:none}}   /* 폰은 올림이 없어 누름만 */
.fresh{animation:fresh 1.1s ease}
@keyframes fresh{0%{box-shadow:0 0 0 0 rgba(236,200,103,.0)}25%{box-shadow:0 0 0 4px rgba(236,200,103,.55)}100%{box-shadow:0 0 0 0 rgba(236,200,103,0)}}
#result.fresh{border-radius:14px}
footer .explore{display:flex;flex-wrap:wrap;gap:6px 14px;margin-bottom:12px;font-size:14px}
footer .explore a{color:var(--paper)!important;text-decoration:none}
footer .explore a:hover{color:var(--gold)!important;text-decoration:underline}
/* 일간 고르기 단추(Ten Gods·Today 등 공통) */
.dmbtns{display:grid;grid-template-columns:repeat(10,1fr);gap:6px;margin:6px 0 12px}
.dmb{border:1px solid var(--line);background:rgba(30,25,23,.85);color:var(--ink);border-radius:10px;padding:8px 2px;cursor:pointer;font:inherit;text-align:center;transition:border-color .15s,transform .15s,background .15s}
.dmb b{display:block;font:30px/1.1 "Ma Shan Zheng";color:var(--paper)}.dmb span{display:block;font-size:13px;font-weight:600}.dmb small{display:block;font-size:10.5px;color:var(--muted)}
.dmb:hover{border-color:var(--gold);transform:translateY(-2px)}
.dmb:active{transform:scale(.95)}
.dmb.on{border-color:var(--cinnabar);background:rgba(192,22,27,.22);box-shadow:0 0 0 1px var(--cinnabar) inset}
.dmb.on b{color:#ffe3a3}
.tgnow{font-size:15px}
.tgcols{display:grid;grid-template-columns:1fr 1fr;gap:16px;border-radius:12px}
.doc table.tgt td small{color:var(--muted);font-size:12px}
.doc table.tgt td b{font:22px/1 "Ma Shan Zheng";color:var(--paper)}
.doc table.tgt tr.me td{background:rgba(192,22,27,.12)}
.tgn{display:inline-block;font-weight:600;font-size:13.5px;border-radius:999px;padding:1px 9px;margin-right:4px;border:1px solid}
.tgn.peer{color:#e9e4d8;border-color:#8a7f6a}.tgn.output{color:#ffb09b;border-color:#a8452f}.tgn.wealth{color:#f2d27a;border-color:#8a7440}
.tgn.power{color:#c9b6ff;border-color:#6a5aa8}.tgn.resource{color:#a8cdf2;border-color:#3b6ea3}.tgn.self{color:#ffe3a3;border-color:var(--cinnabar)}
@media(max-width:900px){.tgcols{grid-template-columns:1fr}.dmbtns{grid-template-columns:repeat(5,1fr)}}
/* 오행·대운·띠·오늘 */
.eout,.lpout,.zout,.tdout{border:1px solid #5b2a22;background:linear-gradient(180deg,rgba(192,22,27,.12),rgba(30,25,23,.6));border-radius:14px;padding:16px 18px;margin:0 0 14px}
.eout .seals{margin:6px 0 14px}.pl4{font:30px/1.2 "Ma Shan Zheng";color:var(--paper);margin:2px 0 10px;letter-spacing:.06em}
form.lpform{max-width:760px;margin:4px 0 18px}
.sexf{border:1px solid var(--line);border-radius:12px;padding:6px 12px 10px;margin:0}.sexf legend{font:600 12px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);padding:0 6px}
.sexf .chk input{accent-color:var(--cinnabar)}
#lp-err,#z-err{grid-column:1/-1;margin:0;color:#ff8f86;font-size:14px}
.lpsum{font-size:15px}
.lpgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px;margin:10px 0}
.lpc{position:relative;border:1px solid var(--line);border-radius:12px;padding:10px 8px;text-align:center;background:rgba(30,25,23,.8);transition:transform .15s,border-color .15s}
.lpc:hover{transform:translateY(-2px);border-color:var(--gold)}
.lpc small{display:block;font:600 11px Inter;color:var(--muted)}.lpc sup{font-size:9px}
.lpc b{display:inline-block;font:36px/1.1 "Ma Shan Zheng";color:var(--paper);margin:4px 1px}
.lpc span{display:block;font-size:12px;color:var(--muted)}.lpc em{display:block;font-style:normal;font-weight:600;font-size:13px;margin-top:4px;color:var(--paper2)}
.lpc i{display:block;font-style:normal;font-size:12px;color:#cbb994;margin-top:2px}
.lpc.now{border-color:var(--cinnabar);background:rgba(192,22,27,.2);box-shadow:0 0 0 1px var(--cinnabar) inset}
.lpc strong{position:absolute;top:-9px;right:8px;background:var(--cinnabar);color:#fde9c8;font:700 10px Inter;letter-spacing:.08em;text-transform:uppercase;padding:2px 7px;border-radius:999px}
@media(max-width:700px){.lpgrid{grid-template-columns:repeat(2,1fr)}}
.emeta{font-size:13.5px;color:var(--muted)}
details.yrs{margin:4px 0 8px}details.yrs summary{cursor:pointer;color:var(--gold);font-size:14px}details.yrs summary:hover{color:var(--paper2)}
details.yrs ul{columns:2;font-size:14px;padding-left:18px}details.yrs li{break-inside:avoid;margin-bottom:4px}details.yrs small{display:block;color:var(--muted);font-size:12px}
.zplaques{margin:22px 0 8px}.zplaques a.pl{text-decoration:none;color:inherit}.zplaques a.pl:hover div{border-color:var(--gold)}
.zres{display:flex;gap:18px;align-items:flex-start}.zbig{flex:none;width:110px}.zbig .pl{animation:none}.zres h2{font-size:28px;margin:2px 0 8px}
.tdtop{display:flex;gap:24px;align-items:center;flex-wrap:wrap}.tdbig small{display:block;font:600 12px Inter;color:var(--muted);letter-spacing:.06em;text-transform:uppercase}
.tdbig b{display:block;font:72px/1.05 "Ma Shan Zheng";color:var(--paper)}.tdbig span{font-size:14px;color:var(--paper2)}.tdmeta p{margin:4px 0;font-size:15px}.tdmeta b{font:24px "Ma Shan Zheng";color:var(--paper)}
.week{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-top:14px}
.wk{border:1px solid var(--line);border-radius:10px;text-align:center;padding:8px 4px;background:rgba(30,25,23,.7)}.wk.on{border-color:var(--cinnabar);background:rgba(192,22,27,.18)}
.wk small{display:block;font-size:11.5px;color:var(--muted)}.wk b{display:block;font:30px/1.1 "Ma Shan Zheng";color:var(--paper)}.wk span{display:block;font-size:11.5px}.wk em{display:block;font-size:11px;color:#cbb994;font-style:normal}
.tdout h3{margin:4px 0 6px;font:600 19px Inter;color:var(--paper)}.tdout h3 small{color:var(--muted);font-weight:400;font-size:13px}
.ygrid{display:grid;grid-template-columns:1fr 1fr;gap:12px}.ycard{border:1px solid var(--line);border-radius:12px;padding:12px 16px;background:rgba(30,25,23,.6)}
.ycard h3{margin:0 0 6px;font:600 16px Inter}.ycard p{margin:0;font-size:14.5px}
.doc table.mtab td b{font:22px "Ma Shan Zheng";color:var(--paper)}
@media(max-width:700px){.week{grid-template-columns:repeat(4,1fr)}.ygrid{grid-template-columns:1fr}details.yrs ul{columns:1}.zres{flex-direction:column}}
.igrid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin:8px 0}
.icard{border:1px solid var(--line);border-radius:12px;padding:10px 12px;background:rgba(30,25,23,.8);transition:transform .15s,border-color .15s}
.icard:hover{transform:translateY(-2px);border-color:var(--gold)}.icard.best{border-color:var(--cinnabar);background:rgba(192,22,27,.16)}
.icard small{font:600 11px Inter;letter-spacing:.06em;text-transform:uppercase;color:var(--gold)}.icard h3{margin:2px 0 4px;font:600 17px Inter;color:var(--paper)}
.icard .ib{font-size:13px;margin:0 0 6px}.icard ul{margin:0;padding-left:16px;font-size:13px}
.doc table.itab td{font-size:14px}
@media(max-width:900px){.igrid{grid-template-columns:repeat(2,1fr)}}