/* 베이니움 운세박람회 웹앱 — 다크 우주톤 셸 + 결과에서 컬러 공개 */
:root{
  --bg:#080a1c; --bg2:#0f1230; --bg3:#161a3d;
  --panel:rgba(255,255,255,.045);
  --panel-line:rgba(255,255,255,.10);
  --gold:#e8c874; --gold-dim:#b99a4e;
  --text:#eceafc; --muted:#9a97bd; --muted2:#6f6c92;
  --accent:#8a6cf0; /* 결과별로 JS가 덮어씀 */
  --radius:20px;
  --shadow:0 12px 40px rgba(0,0,0,.45);
  --font:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--font); color:var(--text);
  background:#0a0b1e;
  -webkit-font-smoothing:antialiased;
  min-height:100dvh;
  --tint: transparent;   /* 오행 결과일 때 JS가 해당 오행 색으로 설정 */
}
/* 수정동굴 배경 이미지 (수정·금색 광맥·육각 결정) */
body::before{
  content:""; position:fixed; inset:0; z-index:-2; pointer-events:none;
  background:url("assets/bg-cave.jpg") center top / cover no-repeat;
}
/* 가독성 오버레이 + 오행별 살짝 tint (10~15%) */
body::after{
  content:""; position:fixed; inset:0; z-index:-1; pointer-events:none;
  transition:background .45s ease;
  background:
    radial-gradient(95% 60% at 50% 20%, var(--tint), transparent 68%),
    radial-gradient(135% 95% at 50% 42%, transparent 34%, rgba(8,10,28,.5) 100%),
    linear-gradient(180deg, rgba(8,10,28,.34) 0%, rgba(8,10,28,.10) 38%, rgba(8,10,28,.58) 100%);
}
@media (prefers-reduced-motion:reduce){body::after{transition:none}}

.wrap{position:relative; z-index:1; max-width:460px; margin:0 auto; padding:22px 18px 60px; min-height:100dvh}

/* 헤더 */
.brand{display:flex; flex-direction:column; align-items:center; text-align:center; gap:6px; padding:14px 0 8px}
.brand .logo{font-size:26px; letter-spacing:.06em}
.brand .logo b{color:var(--gold)}
.brand .sub{font-size:12.5px; color:var(--muted); letter-spacing:.02em}
.star{color:var(--gold)}

/* 홈 인트로 */
.intro{text-align:center; margin:18px 4px 26px}
.intro h1{font-size:22px; line-height:1.45; font-weight:700; letter-spacing:-.01em}
.intro h1 .hl{color:var(--gold)}
.intro p{margin-top:10px; font-size:13.5px; color:var(--muted); line-height:1.6}

/* 섹션 라벨 */
.sec-label{display:flex; align-items:center; gap:8px; margin:26px 4px 12px; font-size:12px; color:var(--gold-dim); letter-spacing:.14em}
.sec-label::after{content:""; flex:1; height:1px; background:linear-gradient(90deg,var(--panel-line),transparent)}

/* 진단 히어로 카드 (오행) */
.hero{
  position:relative; border-radius:var(--radius); padding:22px 20px; overflow:hidden;
  background:linear-gradient(135deg, rgba(138,108,240,.22), rgba(46,196,196,.10));
  border:1px solid var(--panel-line); box-shadow:var(--shadow); cursor:pointer;
  transition:transform .18s ease, box-shadow .18s ease;
}
.hero:hover{transform:translateY(-2px)}
.hero .badge{display:inline-block; font-size:11px; color:var(--gold); border:1px solid var(--gold-dim); border-radius:999px; padding:3px 10px; letter-spacing:.08em}
.hero h2{margin:12px 0 6px; font-size:19px}
.hero p{font-size:13px; color:var(--muted); line-height:1.55}
.hero .go{margin-top:14px; display:inline-flex; align-items:center; gap:6px; color:var(--gold); font-size:13.5px; font-weight:600}

/* 바로찾기 그리드 */
.grid{display:grid; grid-template-columns:1fr 1fr; gap:12px}
.card{
  position:relative; border-radius:16px; padding:18px 16px; min-height:104px;
  background:var(--panel); border:1px solid var(--panel-line);
  cursor:pointer; transition:transform .16s ease, border-color .16s ease, background .16s ease;
  display:flex; flex-direction:column; justify-content:space-between;
}
.card:hover{transform:translateY(-2px); border-color:var(--gold-dim); background:rgba(255,255,255,.07)}
.card .ic{font-size:22px}
.card .t{font-size:15px; font-weight:600; margin-top:8px}
.card .d{font-size:11.5px; color:var(--muted2); margin-top:3px; line-height:1.4}
.card .flag{position:absolute; top:10px; right:10px; font-size:9.5px; color:var(--muted2); border:1px solid var(--panel-line); border-radius:6px; padding:1px 5px}

/* 뷰 전환 */
.view{display:none; animation:fade .35s ease}
.view.active{display:block}
@keyframes fade{from{opacity:0; transform:translateY(8px)}to{opacity:1; transform:none}}

.topbar{display:flex; align-items:center; gap:10px; padding:6px 2px 14px}
.back{background:var(--panel); border:1px solid var(--panel-line); color:var(--text); border-radius:10px; padding:8px 12px; font-size:13px; cursor:pointer; font-family:var(--font)}
.back:hover{border-color:var(--gold-dim)}
.topbar .title{font-size:15px; font-weight:600}

/* 입력 */
.field{margin:10px 2px 16px}
.field label{display:block; font-size:12.5px; color:var(--muted); margin-bottom:8px}
.seg{display:inline-flex; background:var(--bg3); border:1px solid var(--panel-line); border-radius:12px; padding:3px; gap:3px}
.seg button{border:none; background:transparent; color:var(--muted); font-family:var(--font); font-size:14px; font-weight:600; padding:9px 22px; border-radius:9px; cursor:pointer; transition:all .15s}
.seg button.on{background:linear-gradient(135deg,var(--gold),#f3dd9e); color:#0a0a18}
.row{display:flex; gap:8px}
select,input[type=number]{
  flex:1; background:var(--bg3); color:var(--text); border:1px solid var(--panel-line);
  border-radius:12px; padding:13px 12px; font-size:15px; font-family:var(--font); appearance:none;
}
select:focus,input:focus{outline:none; border-color:var(--accent)}
.btn{
  width:100%; margin-top:6px; border:none; border-radius:14px; padding:15px; cursor:pointer;
  font-size:15px; font-weight:700; font-family:var(--font); color:#0a0a18;
  background:linear-gradient(135deg,var(--gold),#f3dd9e); box-shadow:0 8px 24px rgba(232,200,116,.25);
}
.btn:active{transform:translateY(1px)}
.btn.ghost{background:var(--panel); color:var(--text); border:1px solid var(--panel-line); box-shadow:none; font-weight:600}

/* 선택 리스트(별자리/띠/목표/MBTI) */
.pick{display:grid; grid-template-columns:1fr 1fr 1fr; gap:9px}
.pick.two{grid-template-columns:1fr 1fr}
.pick.four{grid-template-columns:1fr 1fr 1fr 1fr}
.pick button{
  background:var(--panel); border:1px solid var(--panel-line); color:var(--text);
  border-radius:12px; padding:14px 6px; font-size:13.5px; cursor:pointer; font-family:var(--font);
  transition:transform .14s, border-color .14s;
}
.pick button:hover{transform:translateY(-2px); border-color:var(--gold-dim)}
.pick button small{display:block; color:var(--muted2); font-size:10.5px; margin-top:3px}

/* ── 결과 카드: 여기서 컬러가 터진다 ── */
.result{
  position:relative; border-radius:24px; padding:0; overflow:hidden; box-shadow:var(--shadow);
  border:1px solid var(--panel-line);
}
.result .glow{
  padding:30px 22px 24px; text-align:center; position:relative; overflow:hidden;
  background:
    radial-gradient(420px 220px at 50% -20%, color-mix(in srgb, var(--accent) 70%, transparent), transparent 70%),
    linear-gradient(180deg, color-mix(in srgb, var(--accent) 26%, #0c0e22), #0c0e22);
}
.result .kicker{font-size:12px; letter-spacing:.14em; color:color-mix(in srgb,var(--accent) 60%, #fff); text-transform:uppercase}
.result .big{font-size:30px; font-weight:800; margin:8px 0 4px; letter-spacing:-.01em}
.result .sub{font-size:13.5px; color:var(--muted)}
.swatch{width:78px; height:78px; border-radius:50%; margin:16px auto 4px; border:3px solid rgba(255,255,255,.85);
  background:var(--accent); box-shadow:0 0 0 6px color-mix(in srgb,var(--accent) 30%, transparent), 0 8px 30px color-mix(in srgb,var(--accent) 50%, transparent);}
.chips{display:flex; flex-wrap:wrap; gap:7px; justify-content:center; margin-top:14px}
.chip{font-size:12px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.16)}
.result .body{padding:20px 22px 22px; background:#0c0e22}
.result .body .line{font-size:14.5px; line-height:1.65; color:var(--text)}
.stones{display:flex; gap:10px; margin:16px 0 4px}
.stone{
  flex:1; text-align:center; border-radius:14px; padding:14px 8px; background:var(--panel); border:1px solid var(--panel-line);
}
.stone .dot{width:44px; height:44px; border-radius:50%; margin:0 auto 8px; background:var(--accent);
  box-shadow:0 0 14px color-mix(in srgb,var(--accent) 55%, transparent); border:2px solid rgba(255,255,255,.7)}
.stone .gimg{width:56px; height:56px; border-radius:50%; margin:0 auto 8px; object-fit:cover; display:block;
  border:2px solid rgba(255,255,255,.75); box-shadow:0 0 16px color-mix(in srgb,var(--accent) 45%, transparent)}
.stone.noimg .gimg{display:none}          /* 이미지 없으면 컬러 dot 폴백 */
.stone:not(.noimg) .dot{display:none}     /* 이미지 있으면 dot 숨김 */
.stone .n{font-size:13px; font-weight:600}
.stone .sm{font-size:10.5px; color:var(--muted2); margin-top:3px; letter-spacing:.01em}
.meta{margin-top:14px; padding-top:14px; border-top:1px solid var(--panel-line); font-size:12.5px; color:var(--muted); line-height:1.6}

/* 오행 바 (진단 결과 부가) */
.bars{margin-top:14px; display:flex; flex-direction:column; gap:7px}
.bar{display:flex; align-items:center; gap:9px; font-size:12px}
.bar .lb{width:44px; color:var(--muted)}
.bar .tr{flex:1; height:8px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden}
.bar .fl{display:block; height:100%; border-radius:6px}
.bar .vv{width:34px; text-align:right; color:var(--muted2)}
.bar.lack .lb{color:var(--gold); font-weight:700}

/* CTA */
.cta{margin-top:18px}
.cta .note{margin-top:10px; font-size:11px; color:var(--muted2); text-align:center; line-height:1.5}

/* 푸터 */
.foot{margin-top:34px; text-align:center; font-size:10.5px; color:var(--muted2); line-height:1.7}
.disclaimer{margin-top:8px; font-size:10px; color:var(--muted2)}