/* =========================================================================
   운세칼 (unsekal) — 미드나잇 퍼플 + 골드, 시크 미스틱 무드
   ========================================================================= */
:root{
  --bg:#140f22; --bg2:#0e0a18;
  --surface:#1f1733; --glass:rgba(40,30,66,.55); --glass-2:rgba(48,36,78,.5);
  --line:rgba(212,175,120,.18); --line2:rgba(212,175,120,.3);
  --ink:#f4eefb; --muted:#a99cc4; --faint:#6f6391;
  --gold:#d4af6a; --gold2:#e7c98a; --purple:#9b7ddb;
  --up:#6fe0b0; --down:#ff8aa0;
  --radius:20px; --blur:saturate(140%) blur(16px);
  --shadow:0 16px 44px rgba(0,0,0,.5);
  --font:-apple-system,BlinkMacSystemFont,"Pretendard","Apple SD Gothic Neo",sans-serif;
  --serif:"Nanum Myeongjo","Pretendard",serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--ink);font-family:var(--font);line-height:1.65;min-height:100vh;
  background:
   radial-gradient(60% 50% at 80% -5%, rgba(212,175,106,.10), transparent 60%),
   radial-gradient(55% 45% at 5% 0%, rgba(155,125,219,.12), transparent 55%),
   var(--bg);background-attachment:fixed}
a{color:inherit;text-decoration:none}
.wrap{max-width:880px;margin:0 auto;padding:0 18px}

.u-header{position:sticky;top:0;z-index:40;background:rgba(20,15,34,.72);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border-bottom:1px solid var(--line)}
.u-head-in{display:flex;align-items:center;justify-content:space-between;height:60px}
.u-logo{display:flex;align-items:center;gap:9px;font-family:var(--serif);font-weight:800;font-size:1.25rem;letter-spacing:.02em;color:var(--gold2)}
.u-logo .star{width:13px;height:13px;color:var(--gold)}
.u-nav{display:flex;gap:4px;flex-wrap:wrap}
.u-nav a{padding:7px 11px;border-radius:10px;font-weight:600;font-size:.9rem;color:var(--muted);transition:all .15s}
.u-nav a:hover,.u-nav a.active{color:var(--gold2);background:rgba(212,175,106,.1)}

.hero{text-align:center;padding:44px 0 26px}
.hero .eyebrow{font-size:.78rem;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin:0 0 12px}
.hero h1{font-family:var(--serif);font-size:2.3rem;font-weight:800;margin:0 0 12px;letter-spacing:-.01em}
.hero h1 em{font-style:normal;color:var(--gold2)}
.hero p.sub{color:var(--muted);max-width:560px;margin:0 auto}
@media(max-width:560px){.hero h1{font-size:1.8rem}}

.card,.panel{background:var(--glass);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;margin:18px 0}
.sec-title{font-family:var(--serif);font-size:1.2rem;font-weight:800;margin:0 0 4px}
.sec-sub{color:var(--muted);font-size:.9rem;margin:0 0 14px}

/* 선택 그리드 (띠/별자리) */
.pick-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:8px}
@media(max-width:560px){.pick-grid{grid-template-columns:repeat(4,1fr)}}
.pick{display:flex;flex-direction:column;align-items:center;gap:3px;padding:11px 4px;border-radius:14px;border:1px solid var(--line);background:var(--glass-2);cursor:pointer;color:var(--ink);font:inherit;transition:all .15s}
.pick:hover{border-color:var(--gold);transform:translateY(-2px)}
.pick.on{border-color:var(--gold);background:rgba(212,175,106,.16);box-shadow:0 0 0 1px var(--gold) inset}
.pick b{font-size:.92rem;font-weight:800}
.pick small{font-size:.66rem;color:var(--muted)}

/* 운세 결과 */
.fo{margin-top:18px}
.fo-head{text-align:center;margin-bottom:14px}
.fo-sign{font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--gold2)}
.fo-date{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.fo-total{display:flex;align-items:center;justify-content:center;gap:10px;margin:10px 0}
.meter{display:inline-flex;gap:4px}
.meter i{width:11px;height:11px;border-radius:50%;background:rgba(212,175,106,.22)}
.meter i.on{background:linear-gradient(135deg,var(--gold),var(--gold2));box-shadow:0 0 7px rgba(212,175,106,.6)}
.fo-msg{background:var(--glass-2);border:1px solid var(--line);border-radius:14px;padding:16px;font-size:1rem;line-height:1.7}
.fo-sub{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin:14px 0}
.fo-stat{background:var(--glass-2);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center}
.fo-stat small{display:block;color:var(--muted);font-size:.74rem;margin-bottom:6px}
/* 띠별 — 년생별 카드 */
.zy-wrap{margin-top:18px}
.zy-top{text-align:center;margin-bottom:14px}
.zy-sign{font-family:var(--serif);font-size:1.5rem;font-weight:800;color:var(--gold2)}
.zy-date{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}
.zy-card{background:var(--glass-2);border:1px solid var(--line);border-radius:16px;padding:15px 17px;margin-bottom:11px}
.zy-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;flex-wrap:wrap}
.zy-year{font-family:var(--serif);font-size:1.18rem;font-weight:800;color:var(--ink)}
.zy-year small{display:block;font-family:var(--font);font-size:.74rem;font-weight:600;color:var(--muted);margin-top:1px}
.zy-band{flex:none;font-size:.72rem;font-weight:800;color:var(--gold2);background:rgba(212,175,106,.13);border:1px solid var(--line);border-radius:999px;padding:5px 11px}
.zy-total{display:flex;align-items:center;gap:9px;margin:11px 0 9px}
.zy-total b{font-size:.9rem;color:var(--gold2)}
.zy-msg{margin:0 0 11px;font-size:.95rem;line-height:1.7;color:var(--ink)}
.zy-cats{display:grid;grid-template-columns:repeat(2,1fr);gap:7px 14px;margin-bottom:10px}
.mcat{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:.84rem;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:9px;padding:6px 10px}
.mcat i{font-style:normal;color:var(--muted);font-weight:700}
.mcat .meter i{width:8px;height:8px}
.zy-tip{margin:0;font-size:.88rem;color:var(--ink);border-left:2px solid var(--gold);padding:3px 0 3px 12px}

.cat-list{margin:14px 0;display:flex;flex-direction:column;gap:9px}
.cat-row{background:var(--glass-2);border:1px solid var(--line);border-radius:12px;padding:11px 14px}
.cat-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:5px}
.cat-top b{font-weight:800;color:var(--gold2);font-size:.95rem}
.cat-row p{margin:0;font-size:.9rem;line-height:1.6;color:var(--muted)}
.fo-lucky{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:14px}
.fo-lucky span{font-size:.84rem;color:var(--muted);background:var(--glass-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.fo-lucky b{color:var(--gold2)}
.fo-advice{margin-top:12px;font-size:.92rem;color:var(--ink);border-left:2px solid var(--gold);padding:4px 0 4px 14px}

/* 도구 카드 */
.tools{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:8px 0}
.tcard{display:block;padding:20px;border-radius:18px;background:var(--glass-2);border:1px solid var(--line);transition:transform .15s,border-color .15s}
.tcard:hover{transform:translateY(-3px);border-color:var(--gold)}
.tcard .ti{display:inline-flex;width:42px;height:42px;align-items:center;justify-content:center;border-radius:12px;background:linear-gradient(135deg,rgba(212,175,106,.3),rgba(155,125,219,.2));color:var(--gold2);margin-bottom:12px}
.tcard .ti svg{width:22px;height:22px}
.tcard b{display:block;font-size:1.06rem;font-weight:800}
.tcard small{display:block;color:var(--muted);font-size:.88rem;margin-top:4px}
@media(max-width:560px){.tools{grid-template-columns:1fr}}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:7px;cursor:pointer;border:none;font-family:var(--font);font-weight:700;font-size:1rem;color:#211934;padding:12px 22px;border-radius:14px;background:linear-gradient(135deg,var(--gold2),var(--gold));box-shadow:0 8px 20px rgba(212,175,106,.25)}
.btn.block{display:flex;width:100%}
.field{display:flex;flex-direction:column;gap:6px;font-size:.86rem;font-weight:700}
.field input,.field select{font-family:var(--font);font-size:1rem;padding:11px 13px;border-radius:12px;border:1px solid var(--line);background:rgba(14,10,24,.5);color:var(--ink)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:520px){.grid2{grid-template-columns:1fr}}

.ad-slot{margin:18px 0;min-height:90px;border:1px dashed var(--line);border-radius:16px;display:flex;align-items:center;justify-content:center}
.ad-label{color:var(--faint);font-size:.8rem}
.content-block{padding:22px;margin:18px 0}
.content-block h2{font-family:var(--serif);font-size:1.2rem;margin:0 0 10px}
.content-block p{color:var(--muted)}
.disclaimer{display:flex;gap:10px;align-items:flex-start;color:var(--faint);font-size:.82rem;margin:24px 0;padding:14px;border:1px solid var(--line);border-radius:14px}
.disclaimer svg{width:18px;height:18px;flex:none;color:var(--gold)}

/* 타로 */
.tarot-row{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin:16px 0}
.tcardx{width:120px;height:190px;border-radius:14px;border:1px solid var(--line2);background:linear-gradient(160deg,#241a3c,#1a1330);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;cursor:pointer;transition:transform .2s;position:relative;overflow:hidden}
.tcardx:hover{transform:translateY(-4px)}
.tcardx .tc-no{font-family:var(--serif);color:var(--gold2);font-size:1.4rem}
.tcardx .tc-name{font-size:.8rem;color:var(--muted);text-align:center;padding:0 6px}
.tcardx.back .tc-star{font-size:2rem;color:var(--gold)}
.tpos{text-align:center;font-size:.78rem;color:var(--gold);margin-bottom:6px}
.tarot-mean{margin-top:14px}
.tmean{background:var(--glass-2);border:1px solid var(--line);border-radius:12px;padding:13px;margin:8px 0}
.tmean b{color:var(--gold2)}

/* 성별 세그먼트 */
.seg{display:flex;gap:6px;background:rgba(14,10,24,.5);border:1px solid var(--line);border-radius:12px;padding:4px}
.seg button{flex:1;padding:9px;border:none;border-radius:9px;background:transparent;color:var(--muted);font:inherit;font-weight:700;font-size:.88rem;cursor:pointer;transition:all .15s}
.seg button.on{background:linear-gradient(135deg,var(--gold2),var(--gold));color:#211934}

/* 사주 요약 */
.saju-sum{margin-top:18px}
.saju-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.pil{background:var(--glass-2);border:1px solid var(--line);border-radius:14px;padding:10px 6px;text-align:center}
.pil.day{border-color:var(--gold);box-shadow:0 0 0 1px var(--gold) inset}
.pil.empty{opacity:.5}
.pil-l{font-size:.72rem;color:var(--muted);margin-bottom:8px}
.pil-c{font-family:var(--serif);font-size:1.7rem;font-weight:800;line-height:1.15}
.pil-c small{display:block;font-family:var(--font);font-size:.66rem;font-weight:600;color:var(--muted)}
.saju-meta{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin:16px 0 6px}
.badge{font-size:.82rem;color:var(--muted);background:var(--glass-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.badge b{color:var(--gold2)}
.saju-sec{font-family:var(--serif);font-weight:800;font-size:.98rem;margin:18px 0 8px;color:var(--gold2)}
.ohbars{display:flex;flex-direction:column;gap:7px}
.ohbar{display:flex;align-items:center;gap:10px}
.ohl{width:20px;font-weight:800;font-size:.9rem}
.oht{flex:1;height:10px;border-radius:6px;background:rgba(255,255,255,.06);overflow:hidden}
.ohf{display:block;height:100%;border-radius:6px}
.ohbar b{width:18px;text-align:right;color:var(--muted);font-size:.84rem}
.spills{display:flex;flex-wrap:wrap;gap:7px}
.spill{display:inline-flex;align-items:center;gap:6px;font-size:.84rem;font-weight:700;background:var(--glass-2);border:1px solid var(--line);border-radius:10px;padding:6px 11px}
.spill i{font-style:normal;color:var(--muted);font-weight:600;font-size:.78rem}
.saju-luck{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-top:16px}
.saju-luck span{font-size:.84rem;color:var(--muted);background:var(--glass-2);border:1px solid var(--line);border-radius:999px;padding:6px 13px}
.saju-luck b{color:var(--gold2)}

/* 사주 입력 폼 */
.saju-form .sec-title{margin-top:4px}
.cal-seg{max-width:260px}
.dob-row{display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:10px;margin-top:12px}
.leap-row{display:inline-flex;align-items:center;gap:8px;margin-top:12px;font-size:.9rem;color:var(--muted);background:rgba(212,175,106,.1);border:1px solid var(--line);border-radius:10px;padding:9px 13px;cursor:pointer}
.leap-row[hidden]{display:none}
.leap-row b{color:var(--gold2)}
.leap-row input{width:17px;height:17px;accent-color:var(--gold)}
.hour-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:7px;margin-top:10px}
@media(max-width:560px){.hour-grid{grid-template-columns:repeat(3,1fr)}}
.hchip{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:54px;padding:7px 3px;border-radius:13px;border:1px solid var(--line);background:var(--glass-2);color:var(--ink);font:inherit;cursor:pointer;transition:all .15s}
.hchip:hover{border-color:var(--gold);transform:translateY(-2px)}
.hchip.on{border-color:var(--gold);background:rgba(212,175,106,.16);box-shadow:0 0 0 1px var(--gold) inset}
.hchip b{font-family:var(--serif);font-size:1.02rem;font-weight:800}
.hchip small{font-size:.6rem;color:var(--muted);letter-spacing:-.02em}
.hchip.none{justify-content:center;font-size:.78rem;font-weight:700;line-height:1.15;color:var(--muted)}
.hchip.none.on{color:var(--gold2)}
.big-go{font-size:1.06rem;padding:14px}
.form-hint{margin:10px 0 0;font-size:.86rem;color:var(--gold2);text-align:center;min-height:1px}
.form-hint b{color:var(--gold)}

/* 분야별 상세 카드 */
.dom-wrap{margin-top:18px;display:flex;flex-direction:column;gap:13px}
.dom-card{background:var(--glass-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.dom-card:first-child{border-color:var(--line2);background:linear-gradient(160deg,rgba(212,175,106,.1),var(--glass-2))}
.dom-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:8px}
.dom-h b{font-family:var(--serif);font-size:1.14rem;font-weight:800;color:var(--gold2)}
.dom-m{display:inline-flex;align-items:center;gap:8px;flex:none}
.dom-n{font-style:normal;font-size:.82rem;color:var(--muted);font-weight:700}
.dom-lead{margin:0 0 12px;font-size:1rem;font-weight:700;line-height:1.6;color:var(--ink)}
.dom-sub{display:flex;gap:11px;padding:10px 0;border-top:1px solid var(--line)}
.dom-tag{flex:none;width:62px;font-size:.74rem;font-weight:800;padding:4px 0;height:fit-content;text-align:center;border-radius:8px}
.s-why .dom-tag{color:#9fc6ff;background:rgba(120,160,255,.14)}
.s-warn .dom-tag{color:#ffb3a0;background:rgba(255,140,120,.14)}
.s-do .dom-tag{color:#7fe3b0;background:rgba(110,224,176,.14)}
.dom-sub p{margin:0;font-size:.93rem;line-height:1.72;color:var(--ink)}

/* 설명 노트 카드 */
.note-card{background:var(--glass-2);border:1px solid var(--line);border-radius:16px;padding:16px 18px}
.note-h{font-family:var(--serif);font-size:1.1rem;font-weight:800;color:var(--gold2);margin-bottom:8px}
.note-b{margin:0;font-size:.95rem;line-height:1.78;color:var(--ink)}
.note-b b{color:var(--gold2)}

/* 핵심어 강조 (사주·띠별 공통) */
.em-key{color:var(--gold2);font-weight:800;text-decoration:underline;text-decoration-color:rgba(212,175,106,.55);text-underline-offset:3px;text-decoration-thickness:2px}
.em-good{color:var(--up);font-weight:800}
.em-warn{color:var(--down);font-weight:800}
.em-num{color:var(--gold2);font-weight:800;background:rgba(212,175,106,.13);padding:0 5px;border-radius:5px}

.u-foot{border-top:1px solid var(--line);margin-top:40px;padding:26px 0;text-align:center}
.u-foot-nav{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-bottom:10px}
.u-foot-nav a{color:var(--muted);font-size:.88rem}
.u-copy{color:var(--faint);font-size:.8rem}

/* ===== 타로 플립 카드 애니메이션 ===== */
.tarot-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin: 16px 0 8px; }
.tcell { display: flex; flex-direction: column; align-items: center; }
.tflip { width: 116px; height: 184px; perspective: 1000px; cursor: pointer; }
.tflip-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .55s cubic-bezier(.2,.85,.3,1); }
.tflip.flipped .tflip-in { transform: rotateY(180deg); }
.tflip-f { position: absolute; inset: 0; -webkit-backface-visibility: hidden; backface-visibility: hidden; border-radius: 14px; border: 1px solid var(--line2); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; overflow: hidden; }
.tflip-f.back { background: linear-gradient(160deg, #2a1f48, #1a1330); }
.tflip-f.back .tc-star { font-size: 2rem; color: var(--gold); animation: tstar 2.4s ease-in-out infinite; }
@keyframes tstar { 0%,100% { opacity: .55; transform: scale(1) rotate(0); } 50% { opacity: 1; transform: scale(1.15) rotate(20deg); } }
.tflip-f.front { transform: rotateY(180deg); background: linear-gradient(160deg, #3a2a5e, #241a3c); box-shadow: inset 0 0 0 1px rgba(212,175,106,.3); }
.tflip-f.front .tc-no { font-family: var(--serif); color: var(--gold2); font-size: 1.5rem; }
.tflip-f.front .tc-name { font-size: .82rem; color: var(--ink); text-align: center; padding: 0 6px; }
.tflip.shuffling .tflip-in { animation: tshuffle .5s ease-in-out; }
@keyframes tshuffle { 0% { transform: rotateY(0) translateY(0); } 20% { transform: rotateY(-22deg) translateY(-10px); } 40% { transform: rotateY(16deg) translateY(2px); } 60% { transform: rotateY(-12deg) translateY(-6px); } 80% { transform: rotateY(7deg) translateY(0); } 100% { transform: rotateY(0) translateY(0); } }

/* ===== 꿈해몽 사전 ===== */
.dream-search-card { padding: 18px; }
.dream-search { width: 100%; font-family: var(--font); font-size: 1rem; padding: 13px 16px; border-radius: 14px; border: 1px solid var(--line2); background: rgba(14,10,24,.5); color: var(--ink); }
.dream-search:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 4px rgba(212,175,106,.15); }
.dream-cats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.dchip { font-family: var(--font); font-size: .82rem; font-weight: 700; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line); background: var(--glass-2); color: var(--muted); cursor: pointer; transition: all .15s; }
.dchip:hover { border-color: var(--gold); color: var(--gold2); }
.dchip.on { background: linear-gradient(135deg, var(--gold2), var(--gold)); color: #211934; border-color: transparent; }
.dream-count { margin-top: 12px; font-size: .84rem; color: var(--muted); }
#dream-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 4px 0; }
@media (max-width: 640px) { #dream-list { grid-template-columns: 1fr; } }
.dream-item { background: var(--glass-2); border: 1px solid var(--line); border-radius: 14px; padding: 15px 17px; }
.dream-h { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 7px; }
.dream-h h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 800; color: var(--gold2); margin: 0; }
.dream-cat { flex: none; font-size: .68rem; font-weight: 800; color: var(--gold); background: rgba(212,175,106,.13); border: 1px solid var(--line); border-radius: 999px; padding: 3px 9px; }
.dream-item p { margin: 0; font-size: .9rem; line-height: 1.7; color: var(--ink); }
.dream-item mark { background: rgba(212,175,106,.3); color: var(--gold2); border-radius: 3px; padding: 0 2px; }
.dream-empty { color: var(--muted); text-align: center; padding: 30px 10px; }

/* ===== 모바일 최적화 (데스크톱 유지) ===== */
.m-tools, .m-sites { display: none; }
@media (max-width: 640px) {
  .u-head-in { flex-direction: column; align-items: flex-start; height: auto; padding: 9px 0; gap: 8px; }
  .u-nav { width: 100%; justify-content: center; gap: 5px; }
  .u-nav a { padding: 6px 10px; font-size: .84rem; }
  .hero { padding: 30px 0 18px; }
  .hero h1 { font-size: 1.75rem; }
  .tools { grid-template-columns: 1fr; }
  .fab-wrap, .xfam { display: none !important; }
  .m-tools, .m-sites { display: flex; flex-wrap: wrap; gap: 7px; align-items: center; padding: 12px 18px 6px; }
  .m-sites { padding-bottom: 26px; }
  .m-tools b, .m-sites b { flex-basis: 100%; font-size: .76rem; color: var(--muted); font-weight: 800; margin-bottom: 3px; }
  .m-tools a, .m-sites a { font-size: .85rem; font-weight: 700; padding: 7px 12px; border-radius: 999px; border: 1px solid var(--line); color: var(--ink); background: var(--glass-2); text-decoration: none; }
}