:root{
  --fg:#f5f7ff;
  --muted:#cbd3f0;
  --card: rgba(18, 22, 42, 0.78);
  --card2: rgba(18, 22, 42, 0.62);
  --line: rgba(255,255,255,.10);
  --accent:#9ed0ff;
  --good:#78ffa8;
  --warn:#ffd36a;
  --bad:#ff7a7a;
  --shadow: 0 12px 35px rgba(0,0,0,.35);
  --radius: 18px;
}

*{ box-sizing: border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, "Noto Sans KR", Arial, sans-serif;
  color: var(--fg);
  background:#0a0d18;
}

.bg{
  position:fixed; inset:0;
  background-image: url("./background.jpg");
  background-size: cover;
  background-position:center;
  background-repeat:no-repeat;
  filter: blur(0px) saturate(1.05);
  transform: scale(1.02);
  z-index:-3;
}

.overlay{
  position:fixed; inset:0;
  background: radial-gradient(1200px 600px at 20% 10%, rgba(0,0,0,.15), rgba(0,0,0,.62)),
              linear-gradient(180deg, rgba(5,7,14,.45), rgba(5,7,14,.78));
  z-index:-2;
}

/* ── 스크린 기반 모바일 내비게이션 ── */
.screen {
  display: none;
  flex-direction: column;
  min-height: 100vh;
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  position: relative;
}
.screen.active { display: flex; }

/* 상단 바 */
.screen-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: rgba(8,10,24,.92);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.screen-topbar::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(200,168,96,.35), transparent);
}
.screen-topbar-title {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .14em;
  font-family: Georgia, serif;
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.back-btn {
  width: 36px; height: 36px;
  border-radius: 50%;
  border: 1px solid rgba(200,168,96,.4);
  background: rgba(255,255,255,.03);
  color: #d6bf85;
  font-size: 18px;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.back-btn svg { width: 18px; height: 18px; }

/* 스크롤 콘텐츠 영역 */
.screen-body {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  -webkit-overflow-scrolling: touch;
}

/* ── 홈 스크린 ── */
.home-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 16px 14px;
  border-bottom: 1px solid rgba(232,192,105,.12);
}
.home-brand { display: flex; align-items: center; gap: 11px; }
.home-logo {
  width: 42px; height: 42px;
  display: grid; place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 32%, rgba(244,230,189,.25), rgba(20,16,40,.5) 72%);
  border: 1px solid rgba(200,168,96,.55);
  box-shadow: 0 0 16px -2px rgba(200,160,70,.45);
  color: #e6cd8a;
}
.home-logo svg { width: 20px; height: 20px; }
.home-logo-img { height: 44px; width: auto; display: block; }
.gold-text {
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.home-title { font-size: 16px; font-weight: 600; font-family: Georgia, serif; letter-spacing: .06em; }
.home-sub { font-size: 10.5px; color: #9a8a5e; margin-top: 2px; letter-spacing: .04em; }
.home-badges { display: flex; flex-wrap: wrap; gap: 6px; }

.home-hero {
  padding: 22px 16px 22px;
  position: relative;
}
.home-hero-line {
  width: 40px; height: 2px;
  background: linear-gradient(90deg, #dfba6b, transparent);
  margin-bottom: 12px;
  box-shadow: 0 0 8px rgba(223,186,107,.5);
}
.home-hero-date {
  font-size: 10.5px; color: #9a8a5e; margin: 0 0 10px;
  letter-spacing: .18em; text-transform: uppercase; font-family: Georgia, serif;
}
.home-hero-title {
  font-size: 27px; font-weight: 700; font-family: Georgia, serif;
  line-height: 1.32; margin: 0 0 14px; letter-spacing: .005em;
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.home-hero-desc { font-size: 13px; color: #cabfa0; font-weight: 300; line-height: 1.8; margin: 0; }

.home-cards {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 0 16px;
  flex: 1;
}
.home-card {
  position: relative;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px;
  border-radius: 16px;
  background: linear-gradient(158deg, rgba(44,36,82,.5) 0%, rgba(17,13,36,.6) 100%);
  border: 1px solid rgba(200,168,96,.2);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
  cursor: pointer;
  transition: transform .25s ease, border-color .25s ease;
  -webkit-tap-highlight-color: transparent;
}
.home-card:active {
  transform: translateY(-2px);
  border-color: rgba(200,168,96,.45);
}

.home-card-img,
.home-card-badge {
  width: 50px; height: 50px;
  border-radius: 50%;
  flex-shrink: 0;
  display: grid; place-items: center;
  border: 1px solid rgba(200,168,96,.4);
  box-shadow: 0 0 14px -2px rgba(200,160,70,.4), inset 0 0 8px rgba(200,160,70,.2);
  background-size: cover;
  background-position: center;
}
.home-card-badge {
  background: radial-gradient(circle at 38% 32%, rgba(244,230,189,.28), rgba(20,16,40,.6) 72%);
  color: #e6cd8a;
}
.home-card-badge svg { width: 24px; height: 24px; }

.home-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.home-card-num { font-size: 11px; font-weight: 600; letter-spacing: .2em; font-family: Georgia, serif; }
.home-card-title { font-size: 17px; font-weight: 500; color: #efe8d6; font-family: Georgia, serif; margin: 1px 0 3px; }
.home-card-desc { font-size: 12px; color: var(--muted); }
.home-card-arrow { width: 22px; height: 22px; color: #7d7257; flex-shrink: 0; }

.home-footer {
  padding: 18px 16px 24px;
  text-align: center;
  font-size: 10.5px;
  letter-spacing: .03em;
  color: rgba(232,192,105,.28);
}

/* ── 폼 카드 ── */
.form-card {
  position: relative; overflow: hidden;
  background: radial-gradient(115% 80% at 50% -12%, #171232 0%, #0c0a20 55%, #07060f 100%);
  border: 1px solid rgba(200,168,96,.22);
  border-radius: 18px;
  padding: 22px 20px;
  box-shadow: 0 18px 48px -24px rgba(0,0,0,.85), inset 0 1px 0 rgba(255,255,255,.04);
}
.form-grid {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin-bottom: 16px;
}
.form-grid label span {
  display: block;
  font-size: 11px;
  letter-spacing: .14em;
  color: #9b8f74;
  margin-bottom: 7px;
  font-family: Georgia, serif;
}
.run-btn {
  position: relative; overflow: hidden;
  width: 100%;
  padding: 16px;
  border-radius: 8px;
  border: none;
  background: linear-gradient(165deg,#f8edc6 0%,#e8cd86 38%,#caa44f 72%,#e4cd92 100%);
  color: #3a2b07;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: .18em;
  margin-top: 6px;
  font-family: Georgia, serif;
  box-shadow: 0 14px 34px -12px rgba(200,160,70,.7), 0 0 0 1px rgba(120,90,30,.25),
    inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(150,110,40,.35);
}
.action-btn {
  position: relative; overflow: hidden;
  padding: 13px 22px;
  border-radius: 8px;
  border: none;
  width: 100%;
  background: linear-gradient(165deg,#f8edc6 0%,#e8cd86 38%,#caa44f 72%,#e4cd92 100%);
  color: #3a2b07;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: .14em;
  cursor: pointer;
  font-family: Georgia, serif;
  box-shadow: 0 10px 26px -12px rgba(200,160,70,.65), inset 0 1px 0 rgba(255,255,255,.6);
}

/* ── 결과 카드 ── */
.result-card {
  position: relative;
  background: radial-gradient(115% 80% at 50% -12%, #171232 0%, #0c0a20 55%, #07060f 100%);
  border: 1px solid rgba(200,168,96,.2);
  border-radius: 18px;
  padding: 20px;
  box-shadow: 0 16px 40px -22px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.04);
}

/* 애니메이션 */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: .5; }
}

/* 골드 CTA 버튼 반짝임(sheen) — 여러 화면에서 재사용 */
@keyframes cta-sheen-move { 0% { background-position: -130% 0; } 100% { background-position: 230% 0; } }
.cta-sheen {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.65) 50%, transparent 60%);
  background-size: 250% 100%;
  animation: cta-sheen-move 4.5s ease-in-out infinite;
}

/* 액자형 인트로 카드(코너 브래킷 + 트윙클) — 연간 운세에서 시작, 여러 화면에서 재사용 */
@keyframes intro-card-twinkle { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.intro-card {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(115% 80% at 50% -12%, #171232 0%, #0c0a20 48%, #07060f 100%);
  border: 1px solid rgba(200,168,96,.22); border-radius: 20px; padding: 34px 26px 30px;
  box-shadow: 0 24px 60px -28px rgba(0,0,0,.95), inset 0 1px 0 rgba(255,255,255,.04);
}
.intro-card-frame {
  position: absolute; inset: 12px; border: 1px solid rgba(200,168,96,.28); border-radius: 13px; pointer-events: none;
}
.intro-card-corner { position: absolute; width: 13px; height: 13px; }
.intro-card-corner.tl { top: 8px; left: 8px; border-top: 1px solid rgba(200,168,96,.7); border-left: 1px solid rgba(200,168,96,.7); }
.intro-card-corner.tr { top: 8px; right: 8px; border-top: 1px solid rgba(200,168,96,.7); border-right: 1px solid rgba(200,168,96,.7); }
.intro-card-corner.bl { bottom: 8px; left: 8px; border-bottom: 1px solid rgba(200,168,96,.7); border-left: 1px solid rgba(200,168,96,.7); }
.intro-card-corner.br { bottom: 8px; right: 8px; border-bottom: 1px solid rgba(200,168,96,.7); border-right: 1px solid rgba(200,168,96,.7); }
.intro-card-twinkle {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: #f0e3b8; box-shadow: 0 0 6px 1px rgba(240,227,184,.5);
  animation: intro-card-twinkle 3.6s ease-in-out infinite;
}
.intro-card-eyebrow { position: relative; display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 24px; }
.intro-card-eyebrow .line { flex: 0 0 26px; height: 1px; background: linear-gradient(90deg, transparent, rgba(200,168,96,.7)); }
.intro-card-eyebrow .line.r { background: linear-gradient(90deg, rgba(200,168,96,.7), transparent); }
.intro-card-eyebrow .label {
  font-size: 12px; font-weight: 500; letter-spacing: .34em; font-family: Georgia, serif;
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}
.intro-card-headline {
  position: relative; margin: 0 0 22px; font-size: 16.5px; line-height: 1.85;
  color: #efe8d6; font-weight: 400; letter-spacing: .01em; font-family: Georgia, serif;
}
.intro-card-tags {
  position: relative; margin: 0 0 26px; font-size: 11.5px; letter-spacing: .14em;
  color: #9b8f74; font-weight: 300; font-family: Georgia, serif;
}
.intro-card-tags .dot { color: #c8a860; margin: 0 8px; }
.intro-card-section-label { position: relative; display: block; font-size: 10px; letter-spacing: .28em; color: #7d7257; margin-bottom: 10px; }
.intro-card-section {
  position: relative; text-align: center;
  border-top: 1px solid rgba(200,168,96,.2); border-bottom: 1px solid rgba(200,168,96,.2); padding: 13px 0;
}
.intro-card-cta {
  position: relative; overflow: hidden; width: 100%; box-sizing: border-box; margin-top: 28px;
  border: none; border-radius: 8px; padding: 16px; cursor: pointer;
  background: linear-gradient(165deg, #f8edc6 0%, #e8cd86 38%, #caa44f 72%, #e4cd92 100%);
  box-shadow: 0 14px 34px -12px rgba(200,160,70,.7), 0 0 0 1px rgba(120,90,30,.25),
    inset 0 1px 0 rgba(255,255,255,.75), inset 0 -2px 6px rgba(150,110,40,.35);
  transition: transform .15s ease;
}
.intro-card-cta:active { transform: scale(.97); }
.intro-card-cta-label {
  position: relative; display: flex; align-items: center; justify-content: center; gap: 10px;
  font-size: 15px; font-weight: 600; letter-spacing: .2em; color: #3a2b07; font-family: Georgia, serif;
}

/* 기존 .app 클래스 (하위 호환) */
.app { max-width: 480px; margin: 0 auto; padding: 12px; }

.top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-bottom: 14px;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
}
.logo{
  width:44px;height:44px;
  display:grid; place-items:center;
  border-radius: 14px;
  background: rgba(255,255,255,.08);
  border:1px solid var(--line);
  box-shadow: var(--shadow);
  font-size: 20px;
}
.title{ font-weight: 800; letter-spacing: .2px; }
.subtitle{ font-size: 12px; color: var(--muted); margin-top:2px; }

.panel{
  background: var(--card2);
  border:1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow:hidden;
}

.form{
  padding: 14px;
  display:grid;
  gap:10px;
  grid-template-columns: 1fr;
  align-items:end;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.12);
}

label span{
  display:block;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 6px;
}

input,select{
  width:100%;
  padding: 13px 14px;
  border-radius: 10px;
  border:1px solid rgba(200,168,96,.25);
  background: rgba(255,255,255,.03);
  color: #efe8d6;
  outline:none;
  font-family: inherit;
}
input::placeholder{ color: #6f6651; }
input:focus,select:focus{ border-color: rgba(200,168,96,.55); }


.alert{
  grid-column: 1 / -1;
  padding: 11px 14px;
  border-radius: 10px;
  border:1px solid rgba(210,110,110,.4);
  background: rgba(120,40,40,.18);
  color: #f0d2cf;
  font-size: 13px;
}
.hidden{ display:none !important; }

.badge{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.14);
  background: rgba(0,0,0,.28);
  font-size: 12px;
  white-space:nowrap;
}
.badge.good{ border-color: rgba(120,255,168,.45); background: rgba(120,255,168,.12); }
.badge.warn{ border-color: rgba(255,211,106,.55); background: rgba(255,211,106,.12); color:#ffe9b6; }
.badge.bad{ border-color: rgba(255,122,122,.55); background: rgba(255,122,122,.12); color:#ffd2d2; }

.badges{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  justify-content:flex-end;
}

.tabs{
  display:flex;
  gap:6px;
  padding: 10px 12px;
  border-bottom:1px solid var(--line);
  background: rgba(0,0,0,.08);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.tabs::-webkit-scrollbar{ display:none; }
.tab{
  padding: 8px 12px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.06);
  color: var(--fg);
  cursor:pointer;
  flex-shrink: 0;
  font-size: 13px;
  white-space: nowrap;
}
.tab.active{
  border-color: rgba(158,208,255,.55);
  background: rgba(158,208,255,.16);
}

.tabpane{ display:none; padding: 14px; }
.tabpane.active{ display:block; }

.grid2{
  display:grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.card{
  background: var(--card);
  border:1px solid var(--line);
  border-radius: var(--radius);
  padding: 14px;
  box-shadow: var(--shadow);
}

.card-title{
  font-weight: 600;
  margin-bottom: 12px;
  letter-spacing: .06em;
  font-family: Georgia, serif;
  font-size: 17px;
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.tiny{
  font-size: 12px;
  color: #9b8f74;
  margin-top: 8px;
}

.muted{ color: #9b8f74; }

.pillars{
  display:grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap:10px;
}

.pillar{
  padding: 12px 10px;
  border-radius: 14px;
  border:1px solid rgba(200,168,96,.22);
  background: rgba(200,168,96,.04);
  text-align: center;
}
.p-label{ font-size: 11px; letter-spacing: .1em; color: #9b8f74; }
.p-ganji{ font-size: 20px; font-weight: 600; margin-top: 6px; letter-spacing:.05em; color: #efe8d6; font-family: Georgia, serif; }

.top2{
  font-weight: 600;
  font-size: 18px;
  margin: 4px 0 10px 0;
  font-family: Georgia, serif;
  background: linear-gradient(100deg, #f4e6bd 0%, #d8bd80 50%, #c2a25a 100%);
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent;
}

.bars{ display:grid; gap:10px; margin-top: 8px; }
.bar{
  display:grid;
  grid-template-columns: 86px 1fr 42px;
  gap:10px;
  align-items:center;
}
.bar .name{ font-size: 12px; color: #9b8f74; }
.track{
  height: 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.06);
  border:1px solid rgba(200,168,96,.15);
  overflow:hidden;
}
.fill{
  height:100%;
  width:0%;
  background: linear-gradient(90deg, #b8942a, #f0dca0);
}
.val{ font-size: 12px; color: #cabfa0; text-align:right; }

.hiddenlist{
  display:grid;
  gap:10px;
}

/* 십신 스타일 */
.p-shishen{
  font-size: 15px;
  color: var(--accent);
  margin-top: 6px;
  font-weight: 700;
  letter-spacing: 0.3px;
}

.shishen-label{
  font-size: 13px;
  color: var(--accent);
  margin-left: 6px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(158, 208, 255, 0.15);
  border: 1px solid rgba(158, 208, 255, 0.3);
  font-weight: 600;
  display: inline-block;
}

.shishen-pillars{
  margin-top: 8px;
}

.summaryRow{
  display:flex;
  gap:10px;
  align-items:stretch;
}

.bigScore{
  flex:1;
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.20);
  padding: 12px;
}
.bigScoreNum{
  font-size: 30px;
  font-weight: 1000;
}
.bigScoreLabel{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 8px; }
.chip{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  font-size: 12px;
}

.accordion{ display:grid; gap:10px; margin-top: 10px; }
.accItem{
  border-radius: 16px;
  border:1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
  overflow:hidden;
}
.accHead{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  padding: 12px;
  cursor:pointer;
}
.accTitle{
  font-weight: 900;
  letter-spacing:.2px;
}
.accMeta{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.accBody{
  border-top:1px solid rgba(255,255,255,.10);
  padding: 12px;
  display:none;
}
.accItem.open .accBody{ display:block; }

.row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap:10px;
  padding: 10px;
  border-radius: 14px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(0,0,0,.18);
  margin-top: 10px;
}
.row .left{ flex:1; }
.row .right{ display:flex; gap:8px; flex-wrap:wrap; justify-content:flex-end; }

.kvs{
  display:flex; flex-wrap:wrap; gap:8px; margin-top:8px;
}
.kv{
  padding: 6px 10px;
  border-radius: 999px;
  border:1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.06);
  font-size: 12px;
}


/* 대운 리스트 스타일 */
.daeun-list{
  display: grid;
  gap: 12px;
  margin-top: 12px;
}

.daeun-card{
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--shadow);
}

.daeun-header{
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.daeun-num{
  font-size: 16px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.3px;
}

.daeun-ganji{
  font-size: 22px;
  font-weight: 900;
  letter-spacing: 1px;
}

.daeun-score{
  margin-left: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
}

.grade-letter{
  font-size: 24px;
  font-weight: 900;
  line-height: 1;
}

.grade-number{
  font-size: 11px;
  font-weight: 600;
  opacity: 0.8;
}

.daeun-score.grade-S{
  border-color: rgba(120,255,168,.55);
  background: rgba(120,255,168,.12);
  color: #c0ffe0;
}

.daeun-score.grade-A{
  border-color: rgba(158,208,255,.55);
  background: rgba(158,208,255,.12);
  color: #d4ebff;
}

.daeun-score.grade-B{
  border-color: rgba(255,211,106,.45);
  background: rgba(255,211,106,.10);
  color: #ffe9b6;
}

.daeun-score.grade-C{
  border-color: rgba(255,178,122,.45);
  background: rgba(255,178,122,.10);
  color: #ffdcc6;
}

.daeun-score.grade-D,
.daeun-score.grade-F{
  border-color: rgba(255,122,122,.45);
  background: rgba(255,122,122,.10);
  color: #ffd2d2;
}

.daeun-info{
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.daeun-age{
  font-size: 13px;
  color: var(--muted);
  font-weight: 600;
}

.daeun-summary{
  font-size: 14px;
  line-height: 1.6;
  color: var(--fg);
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.08);
}

/* 대운 십신 정보 스타일 */
.daeun-stem-info{
  font-size: 13px;
  color: var(--muted);
  margin-top: 8px;
  padding: 8px 10px;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.08);
}

.daeun-stem-info strong{
  color: var(--fg);
  font-size: 15px;
}

.daeun-branch-info{
  margin-top: 10px;
  padding: 10px;
  background: rgba(0,0,0,.20);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.08);
}

.daeun-branch-label{
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 8px;
  font-weight: 600;
}

.daeun-hidden-list{
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.daeun-hidden-item{
  font-size: 12px;
  padding: 6px 10px;
  background: rgba(255,255,255,.06);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,.10);
  color: var(--fg);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.shishen-mini{
  font-size: 11px;
  color: var(--accent);
  padding: 2px 6px;
  background: rgba(158, 208, 255, 0.12);
  border-radius: 4px;
  font-weight: 600;
}

/* 모바일 기본값으로 전환됨 — 데스크탑 확장 없음 */
.badges{ justify-content:flex-start; }
.daeun-header{ flex-wrap: wrap; }
.daeun-score{ width:100%; text-align:center; }

/* =========================================
   격/용희기한 분석 스타일
   ========================================= */

/* 격 카드 */
.geok-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.geok-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.geok-label {
  font-size: 13px;
  color: var(--muted);
}

.geok-name {
  font-size: 20px;
  font-weight: 900;
  color: var(--accent);
  letter-spacing: 0.5px;
}

.geok-purity {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(158, 208, 255, 0.15);
  border: 1px solid rgba(158, 208, 255, 0.3);
  color: #d4ebff;
}

.geok-broken {
  font-size: 12px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(255, 122, 122, 0.15);
  border: 1px solid rgba(255, 122, 122, 0.3);
  color: #ffd2d2;
}

.geok-notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.geok-note {
  font-size: 12px;
  color: var(--muted);
  padding: 4px 8px;
  background: rgba(0,0,0,.15);
  border-radius: 6px;
}

/* 신강약 카드 */
.strength-card {
  padding: 12px;
  border-radius: 12px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.strength-score {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.strength-label {
  font-size: 18px;
  font-weight: 900;
  letter-spacing: 0.5px;
}

.strength-number {
  font-size: 24px;
  font-weight: 1000;
}

.strength-breakdown {
  display: grid;
  gap: 6px;
}

.strength-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
  font-size: 13px;
}

.strength-item span:first-child {
  color: var(--muted);
}

.strength-item span:last-child {
  font-weight: 700;
  color: var(--fg);
}

/* 용희기한 그리드 */
.gods-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 10px;
}

.god-card {
  padding: 12px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.18);
}

.god-card.yong {
  border-color: rgba(120, 255, 168, 0.4);
  background: rgba(120, 255, 168, 0.08);
}

.god-card.hee {
  border-color: rgba(158, 208, 255, 0.4);
  background: rgba(158, 208, 255, 0.08);
}

.god-card.gi {
  border-color: rgba(255, 122, 122, 0.4);
  background: rgba(255, 122, 122, 0.08);
}

.god-card.han {
  border-color: rgba(255, 211, 106, 0.4);
  background: rgba(255, 211, 106, 0.08);
}

.god-label {
  font-size: 12px;
  font-weight: 700;
  margin-bottom: 6px;
  opacity: 0.8;
}

.god-content {
  font-size: 16px;
  font-weight: 900;
  margin-bottom: 4px;
  letter-spacing: 0.3px;
}

.god-elements {
  font-size: 11px;
  opacity: 0.7;
}

/* 프로파일 선택 */
.profile-selector {
  display: flex;
  gap: 12px;
  margin: 12px 0;
  padding: 10px;
  background: rgba(0,0,0,.15);
  border-radius: 10px;
}

.profile-selector label {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 12px;
  border-radius: 8px;
  transition: background 0.2s;
}

.profile-selector label:hover {
  background: rgba(255,255,255,.06);
}

.profile-selector input[type="radio"] {
  width: auto;
  margin: 0;
}

.profile-selector span {
  font-size: 13px;
  font-weight: 600;
}

/* 원국 총점 카드 */
.base-score-card {
  padding: 16px;
  border-radius: 14px;
  background: rgba(0,0,0,.18);
  border: 1px solid rgba(255,255,255,.10);
}

.score-main {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.score-number {
  font-size: 48px;
  font-weight: 1000;
  line-height: 1;
}

.score-label {
  font-size: 16px;
  font-weight: 700;
  opacity: 0.8;
}

.score-breakdown {
  margin-top: 16px;
}

.breakdown-title {
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 10px;
  color: var(--muted);
}

.breakdown-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.breakdown-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}

.breakdown-label {
  font-size: 11px;
  color: var(--muted);
}

.breakdown-value {
  font-size: 18px;
  font-weight: 900;
  color: var(--accent);
}

/* 대운 breakdown mini */
.daeun-breakdown {
  margin-top: 10px;
  padding: 10px;
  background: rgba(0,0,0,.15);
  border-radius: 8px;
}

.breakdown-mini {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  font-size: 11px;
}

.breakdown-mini span {
  padding: 4px 8px;
  background: rgba(255,255,255,.06);
  border-radius: 6px;
  border: 1px solid rgba(255,255,255,.08);
}

.profile-selector{ flex-direction: column; }

/* =========================================================
   직관 능력 패널 스타일
   ========================================================= */

/* 대분류 카드 그리드 */
.intuition-categories {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
  margin-bottom: 16px;
}

.category-card {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  text-align: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.category-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.category-name {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.category-score {
  font-size: 42px;
  font-weight: 700;
  margin-bottom: 4px;
}

.category-meta {
  font-size: 13px;
  color: var(--muted);
}

/* 종합 결과 */
.intuition-overall {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  margin-bottom: 24px;
}

.overall-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 16px;
}

.overall-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px;
}

.overall-card {
  background: var(--card2);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
}

.overall-name {
  font-size: 14px;
  color: var(--muted);
  margin-bottom: 8px;
}

.overall-score {
  font-size: 36px;
  font-weight: 700;
  margin-bottom: 4px;
}

.overall-meta {
  font-size: 12px;
  color: var(--muted);
}

/* 과부하 경고 */
.overload-warning {
  background: var(--card2);
  border: 1px solid rgba(255, 210, 106, 0.3);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.overload-warning.high-risk {
  border-color: rgba(255, 122, 122, 0.5);
  background: rgba(255, 122, 122, 0.08);
}

.overload-icon {
  font-size: 32px;
}

.overload-content {
  flex: 1;
}

.overload-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 4px;
}

.overload-score {
  font-size: 24px;
  font-weight: 700;
  color: var(--warn);
  margin-bottom: 4px;
}

.overload-warning.high-risk .overload-score {
  color: var(--bad);
}

.overload-desc {
  font-size: 13px;
  color: var(--muted);
}

/* 중분류 리스트 */
.intuition-subs {
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
}

.subs-title {
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 24px;
}

.subs-category {
  margin-bottom: 24px;
}

.subs-category:last-child {
  margin-bottom: 0;
}

.subs-category-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--accent);
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.sub-item {
  background: var(--card2);
  border-radius: 10px;
  padding: 12px 16px;
  margin-bottom: 8px;
}

.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.sub-name {
  font-size: 14px;
  font-weight: 500;
}

.sub-score {
  font-size: 18px;
  font-weight: 700;
}

.sub-meta {
  font-size: 12px;
  color: var(--muted);
}

.sub-fired {
  margin-top: 4px;
  font-size: 11px;
  color: var(--accent);
}

/* 등급별 색상 */
.grade-S {
  color: #ff6b9d;
}

.grade-A {
  color: var(--good);
}

.grade-B {
  color: var(--accent);
}

.grade-C {
  color: var(--warn);
}

.grade-D {
  color: var(--bad);
}

/* 스타일 라벨 */
.sub-style {
  margin-top: 4px;
  font-size: 12px;
  color: #9ed0ff;
  font-weight: 500;
}

/* =========================================================
   [v2.0 추가] 능력 분석 UI - 타입 헤더 + 백분위
   ========================================================= */

/* 타입 헤더 카드 */
.type-header-card {
  background: linear-gradient(135deg, rgba(120, 80, 220, 0.25), rgba(60, 40, 120, 0.20));
  border: 1px solid rgba(160, 100, 255, 0.35);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 16px;
  text-align: center;
}

.type-badge {
  display: inline-block;
  font-size: 22px;
  font-weight: 800;
  color: #c9a0ff;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
  text-shadow: 0 0 18px rgba(180, 120, 255, 0.5);
}

.type-desc {
  font-size: 13px;
  color: rgba(200, 180, 255, 0.75);
  line-height: 1.5;
}

/* 대분류 카드 - 백분위 추가 */
.category-percentile {
  font-size: 12px;
  font-weight: 700;
  color: #78ffa8;
  margin: 2px 0 4px;
  letter-spacing: 0.3px;
}

/* 중분류 점수 랩 */
.sub-score-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sub-bonus {
  font-size: 12px;
  color: var(--accent);
  font-weight: 600;
}

.sub-percentile {
  font-size: 11px;
  color: #78ffa8;
  font-weight: 600;
  background: rgba(120, 255, 168, 0.10);
  border-radius: 6px;
  padding: 1px 5px;
}

.sub-style-badge {
  display: inline-block;
  font-size: 10px;
  color: #9ed0ff;
  background: rgba(158, 208, 255, 0.12);
  border-radius: 5px;
  padding: 1px 5px;
  margin-left: 4px;
  vertical-align: middle;
  font-weight: 500;
}

/* 등급 한글 매핑 (최상/상위/중상/중위/하위) */
.grade-최상 { color: #ff6b9d; }
.grade-상위 { color: var(--good); }
.grade-중상 { color: #78ffa8; }
.grade-중위 { color: var(--accent); }
.grade-하위 { color: var(--bad); }

/* sub-header flex 정렬 개선 */
.sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.sub-name {
  flex: 1;
  font-size: 14px;
  font-weight: 500;
}