/* 명랑사주 — 공통 스타일 (애플식 구조 + 사주 색) */
:root {
  --bg: #f2f2f7;
  --card: #ffffff;
  --fill: rgba(118, 118, 128, .12);
  --fill-2: rgba(118, 118, 128, .08);
  --ink: #1d1d1f;
  --ink-2: #6e6e73;
  --ink-3: #8a8a8e;
  --sep: rgba(60, 60, 67, .13);
  --accent: #e5533d;
  --accent-soft: rgba(229, 83, 61, .1);
  --on-accent: #ffffff;
  --bar-bg: rgba(249, 249, 251, .78);
  --pop-bg: rgba(255, 255, 255, .94);
  --night: #15173a;
  color-scheme: light dark;
  --radius: 22px;
  --ease: cubic-bezier(.32, .72, 0, 1);
  --wood: #2f9e5b; --wood-bg: rgba(47, 158, 91, .11);
  --fire: #e5533d; --fire-bg: rgba(229, 83, 61, .11);
  --earth: #c08a1e; --earth-bg: rgba(192, 138, 30, .13);
  --metal: #7d8590; --metal-bg: rgba(125, 133, 144, .14);
  --water: #3159b5; --water-bg: rgba(49, 89, 181, .11);
  --serif: 'Noto Serif KR', serif;
  --sans: -apple-system, BlinkMacSystemFont, 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #000000;
    --card: #1c1c1e;
    --fill: rgba(118, 118, 128, .24);
    --fill-2: rgba(118, 118, 128, .16);
    --ink: #f5f5f7;
    --ink-2: #98989d;
    --ink-3: #8a8a90;
    --sep: rgba(84, 84, 88, .55);
    --accent: #ff6a4d;
    --accent-soft: rgba(255, 106, 77, .16);
    --on-accent: #ffffff;
    --bar-bg: rgba(22, 22, 24, .78);
    --pop-bg: rgba(44, 44, 46, .96);
    --wood: #4fd282; --wood-bg: rgba(79, 210, 130, .14);
    --fire: #ff6a4d; --fire-bg: rgba(255, 106, 77, .15);
    --earth: #f0b840; --earth-bg: rgba(240, 184, 64, .15);
    --metal: #b6bec8; --metal-bg: rgba(182, 190, 200, .14);
    --water: #6f97ff; --water-bg: rgba(111, 151, 255, .16);
  }
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.6;
  letter-spacing: -.01em;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}
a { color: inherit; }
button, input, select { font: inherit; color: inherit; letter-spacing: inherit; }

.wrap { max-width: 640px; margin: 0 auto; padding: 0 16px; }

/* 상단 바 */
.top {
  position: sticky; top: 0; z-index: 20;
  background: var(--bar-bg);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 .5px 0 var(--sep);
}
.top .wrap { display: flex; align-items: center; justify-content: space-between; height: 52px; }
.logo { display: flex; align-items: center; gap: 8px; text-decoration: none; font-weight: 700; font-size: 18px; letter-spacing: -.02em; }
.logo-mark { display: block; width: 26px; height: 26px; border-radius: 7px; }
.logo-word {
  display: block; width: 79px; height: 20px; overflow: hidden; text-indent: -9999px;
  background: var(--ink);
  -webkit-mask: url(logo-word.png) center / contain no-repeat; mask: url(logo-word.png) center / contain no-repeat;
}
.nav { display: flex; gap: 4px; }
.nav a { text-decoration: none; font-size: 14px; font-weight: 500; color: var(--ink-2); padding: 6px 10px; border-radius: 8px; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--ink); font-weight: 600; }
@media (max-width: 560px) { .nav { display: none; } }

/* 하단 탭바 */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20;
  background: var(--bar-bg);
  backdrop-filter: saturate(1.8) blur(20px);
  -webkit-backdrop-filter: saturate(1.8) blur(20px);
  box-shadow: 0 -.5px 0 var(--sep);
  display: none; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar a { flex: 1; text-decoration: none; text-align: center; font-size: 10px; font-weight: 500; color: var(--ink-3); padding: 7px 0 5px; }
.tabbar a b { display: block; font-family: var(--serif); font-size: 21px; line-height: 1.25; font-weight: 700; }
.tabbar a[aria-current="page"] { color: var(--accent); }
@media (max-width: 560px) {
  .tabbar { display: flex; }
  body { padding-bottom: 84px; }
}

/* 큰 제목 */
.hero { padding: 28px 4px 22px; }
.eyebrow { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 0 4px; letter-spacing: 0; }
.hero h1 { font-size: clamp(32px, 8.6vw, 44px); line-height: 1.15; font-weight: 800; letter-spacing: -.035em; margin: 0 0 10px; }
.hero p { color: var(--ink-2); margin: 0; font-size: 17px; }

/* 카드 */
.card { background: var(--card); border-radius: var(--radius); padding: 22px 20px; margin: 0 0 12px; }
.card h2 { font-size: 22px; font-weight: 700; letter-spacing: -.025em; line-height: 1.3; margin: 0 0 12px; }
.card h3 { font-size: 17px; font-weight: 700; margin: 22px 0 8px; }
.card p { margin: 0 0 10px; color: var(--ink); opacity: .86; }
.card p:last-child { margin-bottom: 0; }
.muted { color: var(--ink-2) !important; opacity: 1 !important; font-size: 15px; }
.section-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 22px 4px 8px; }

/* 입력: 설정 앱식 묶음 목록 */
.form-grid { display: grid; gap: 0; }
.group { background: var(--fill-2); border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.card .group { background: var(--fill-2); }
.group-title { font-size: 13px; font-weight: 600; color: var(--ink-2); margin: 0 4px 8px; display: flex; align-items: center; gap: 6px; }
.group-title i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); display: inline-block; }
.group-title i.b { background: var(--water); }
.row { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 6px 14px; position: relative; }
.row + .row::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--sep); }
.row-label { flex: none; width: 84px; font-size: 16px; font-weight: 500; }
.row-body { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
.row-input { flex: 1; min-width: 0; border: 0; background: transparent; text-align: right; font-size: 16px; padding: 8px 0; }
.row-input::placeholder { color: var(--ink-3); }
.row-input:focus { outline: none; }
.selects { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 6px; flex: 1; }
select, input[type="time"] {
  height: 36px; padding: 0 10px; border: 0; border-radius: 9px;
  background: var(--fill); font-size: 16px; font-weight: 500; text-align: center; text-align-last: center;
  appearance: none; -webkit-appearance: none; min-width: 0; width: 100%;
}
input[type="time"] { width: auto; flex: 0 1 120px; }
select { cursor: pointer; }
select:hover { box-shadow: inset 0 0 0 1px var(--sep); }
select[aria-expanded="true"] { outline: 2px solid var(--accent); outline-offset: 2px; }

/* 고르기 팝업 (데스크톱) */
.picker {
  position: fixed; z-index: 60; overflow-y: auto; overscroll-behavior: contain;
  display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 2px; padding: 6px;
  background: var(--pop-bg); border-radius: 14px;
  box-shadow: 0 0 0 .5px var(--sep), 0 14px 40px rgba(0, 0, 0, .22);
  backdrop-filter: saturate(1.8) blur(24px); -webkit-backdrop-filter: saturate(1.8) blur(24px);
  animation: pop-in .18s var(--ease);
  scrollbar-width: thin; scrollbar-color: var(--ink-3) transparent;
}
.picker button {
  border: 0; background: transparent; border-radius: 9px; padding: 8px 4px;
  font-size: 15px; font-weight: 500; cursor: pointer; font-variant-numeric: tabular-nums;
}
.picker button:hover, .picker button.on { background: var(--fill); }
.picker button[aria-selected="true"] { background: var(--accent); color: var(--on-accent); font-weight: 700; }
.picker.list button { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 10px 12px; text-align: left; }
.picker.list button small { font-size: 13px; color: var(--ink-2); }
.picker.list button[aria-selected="true"] small { color: inherit; opacity: .85; }
@keyframes pop-in { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@media (prefers-reduced-motion: reduce) { .picker { animation: none; } }
select:focus-visible, input:focus-visible, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
input:disabled { opacity: .35; }

/* iOS 스위치 */
.switch { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; color: var(--ink-2); cursor: pointer; user-select: none; }
.switch input {
  appearance: none; -webkit-appearance: none; margin: 0; flex: none;
  width: 51px; height: 31px; border-radius: 999px; background: var(--fill); position: relative; cursor: pointer;
  transition: background .25s var(--ease);
}
.switch input::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 27px; height: 27px; border-radius: 50%;
  background: #fff; box-shadow: 0 3px 8px rgba(0,0,0,.15), 0 1px 1px rgba(0,0,0,.06);
  transition: transform .3s var(--ease);
}
.switch input:checked { background: #34c759; }
.switch input:checked::after { transform: translateX(20px); }

/* 세그먼트 */
.seg { display: flex; background: var(--fill); border-radius: 9px; padding: 2px; gap: 0; }
.seg button {
  flex: 1; border: 0; background: transparent; padding: 6px 10px; border-radius: 7px;
  font-weight: 500; font-size: 14px; color: var(--ink); cursor: pointer; white-space: nowrap;
  transition: background .2s var(--ease);
}
.seg button[aria-pressed="true"] { background: var(--card); font-weight: 600; box-shadow: 0 3px 8px rgba(0,0,0,.12), 0 3px 1px rgba(0,0,0,.04); }
@media (prefers-color-scheme: dark) { .seg button[aria-pressed="true"] { background: #636366; } }

.btn {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  width: 100%; height: 52px; border: 0; border-radius: 14px;
  background: var(--accent); color: var(--on-accent);
  font-size: 17px; font-weight: 600; text-decoration: none; cursor: pointer;
  transition: transform .2s var(--ease), opacity .2s;
}
.btn:active { transform: scale(.97); opacity: .85; }
.btn.ghost { background: var(--fill); color: var(--accent); }
.form-error { color: var(--fire); font-size: 14px; margin: -4px 4px 12px; }

/* 저장된 프로필 */
.profile-bar {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: 16px; padding: 12px 14px; margin-bottom: 12px;
}
.avatar {
  flex: none; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 19px;
}
.profile-bar .who { flex: 1; min-width: 0; font-weight: 600; line-height: 1.35; font-size: 16px; }
.profile-bar .who small { display: block; font-weight: 400; color: var(--ink-2); font-size: 13px; }
.linkish { background: none; border: 0; color: var(--accent); font-size: 15px; font-weight: 500; cursor: pointer; padding: 6px 2px; white-space: nowrap; }

/* 사주 기둥 */
.pillars { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pillar { text-align: center; }
.pillar-label { font-size: 12px; font-weight: 600; color: var(--ink-2); margin-bottom: 6px; }
.cell { border-radius: 16px; padding: 12px 0 9px; margin-bottom: 6px; display: flex; flex-direction: column; align-items: center; }
.cell .hj { font-family: var(--serif); font-size: clamp(30px, 8.6vw, 38px); font-weight: 700; line-height: 1.1; }
.cell .ko { font-size: 12px; font-weight: 600; margin-top: 2px; }
.cell .ss { font-size: 11px; font-weight: 500; color: var(--ink-2); margin-top: 1px; }
.cell.empty { background: var(--fill-2); color: var(--ink-3); min-height: 90px; justify-content: center; font-size: 13px; line-height: 1.3; }
.el-0 { background: var(--wood-bg); color: var(--wood); }
.el-1 { background: var(--fire-bg); color: var(--fire); }
.el-2 { background: var(--earth-bg); color: var(--earth); }
.el-3 { background: var(--metal-bg); color: var(--metal); }
.el-4 { background: var(--water-bg); color: var(--water); }
.pillar.is-me .cell:first-of-type { box-shadow: inset 0 0 0 2px currentColor; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.chip { font-size: 13px; font-weight: 500; background: var(--fill-2); color: var(--ink); padding: 5px 11px; border-radius: 999px; }

/* 오행 막대 */
.bars { display: grid; gap: 12px; margin-top: 4px; }
.bar { display: grid; grid-template-columns: 52px 1fr 20px; align-items: center; gap: 12px; font-weight: 600; font-size: 15px; }
.bar-track { height: 8px; background: var(--fill-2); border-radius: 999px; overflow: hidden; }
.bar-fill { height: 100%; border-radius: 999px; width: 0; transition: width 1s var(--ease); }
.bar .n { text-align: right; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.bar-0 { color: var(--wood); } .bar-0 .bar-fill { background: var(--wood); }
.bar-1 { color: var(--fire); } .bar-1 .bar-fill { background: var(--fire); }
.bar-2 { color: var(--earth); } .bar-2 .bar-fill { background: var(--earth); }
.bar-3 { color: var(--metal); } .bar-3 .bar-fill { background: var(--metal); }
.bar-4 { color: var(--water); } .bar-4 .bar-fill { background: var(--water); }

/* 해석 머리 */
.lead { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.lead-badge { flex: none; width: 60px; height: 60px; border-radius: 16px; display: grid; place-items: center; font-family: var(--serif); font-size: 32px; font-weight: 700; }
.lead h2 { margin: 0; font-size: 20px; }
.lead small { display: block; color: var(--ink-2); font-weight: 500; font-size: 13px; }
.kv { margin-top: 16px; border-radius: 14px; background: var(--fill-2); overflow: hidden; }
.kv div { padding: 12px 14px; font-size: 15px; position: relative; display: grid; grid-template-columns: 76px 1fr; gap: 8px; }
.kv div + div::before { content: ''; position: absolute; top: 0; left: 14px; right: 0; height: .5px; background: var(--sep); }
.kv b { color: var(--ink-2); font-weight: 500; }

/* 점수 링 */
.score { display: grid; grid-template-columns: auto 1fr; gap: 18px; align-items: center; }
.ring { position: relative; width: 104px; height: 104px; }
.ring svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.ring circle { fill: none; stroke-width: 11; }
.ring .track { stroke: var(--fill-2); }
.ring .val { stroke: var(--accent); stroke-linecap: round; transition: stroke-dashoffset 1.2s var(--ease); }
.ring .num { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; }
.ring .num b { font-size: 34px; font-weight: 700; letter-spacing: -.04em; font-variant-numeric: tabular-nums; }
.ring .num small { display: block; font-size: 11px; color: var(--ink-2); font-weight: 600; }
.score h2 { margin: 0 0 2px; font-size: 24px; }
.score .eyebrow { margin-bottom: 2px; }

/* 운세 항목 */
.fortune-list { display: grid; gap: 0; margin: 0 -20px -22px; }
.fortune-item { display: grid; grid-template-columns: 36px 1fr; gap: 14px; align-items: start; padding: 14px 20px; position: relative; }
.fortune-item + .fortune-item::before { content: ''; position: absolute; top: 0; left: 70px; right: 0; height: .5px; background: var(--sep); }
.fortune-item .ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; font-family: var(--serif); font-weight: 700; font-size: 17px; }
.fortune-item b { display: block; font-size: 15px; font-weight: 600; }
.fortune-item p { margin: 0; font-size: 16px; }

.lucky { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; text-align: center; }
.lucky div { background: var(--fill-2); border-radius: 14px; padding: 12px 4px; }
.lucky small { display: block; font-size: 12px; font-weight: 500; color: var(--ink-2); }
.lucky b { font-size: 15px; font-weight: 600; line-height: 1.35; display: block; margin-top: 3px; }
.swatch { display: inline-block; width: 11px; height: 11px; border-radius: 50%; vertical-align: 0; margin-right: 4px; }
@media (max-width: 400px) { .lucky { grid-template-columns: repeat(2, 1fr); } }

.day-switch { margin: 0 0 12px; }

/* 홈 */
.menu { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.menu a {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; justify-content: space-between; gap: 18px;
  min-height: 156px; padding: 18px; border-radius: var(--radius);
  text-decoration: none; background: var(--card);
  transition: transform .35s var(--ease);
}
.menu a:active { transform: scale(.97); }
.menu a .big { font-family: var(--serif); font-size: 40px; font-weight: 700; line-height: 1; }
.menu a b { font-size: 19px; font-weight: 700; letter-spacing: -.025em; display: block; }
.menu a span { font-size: 14px; color: var(--ink-2); }
.menu a.feature {
  grid-column: 1 / -1; min-height: 190px; color: #f5f5f7;
  background:
    radial-gradient(1.5px 1.5px at 14% 24%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 44% 16%, #ffffffbb 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 58% 64%, #ffffff77 50%, transparent 51%),
    radial-gradient(1px 1px at 33% 52%, #ffffff99 50%, transparent 51%),
    radial-gradient(1px 1px at 86% 88%, #ffffffaa 50%, transparent 51%),
    radial-gradient(1px 1px at 70% 30%, #ffffff66 50%, transparent 51%),
    linear-gradient(165deg, #2a2f63 0%, var(--night) 75%);
}
.menu a.feature span { color: rgba(235, 235, 245, .62); }
.menu a.feature .big { color: #f3cd72; }
.menu a.feature::after {
  content: ''; position: absolute; right: 24px; top: 24px; width: 92px; height: 92px; border-radius: 50%;
  background: radial-gradient(circle at 38% 36%, #fff6d6, #f3cd72 55%, #dba542);
  box-shadow: 0 0 44px 10px rgba(243, 205, 114, .26), 0 0 100px 24px rgba(243, 205, 114, .1);
}
.menu a.feature > * { position: relative; z-index: 1; }
@media (max-width: 400px) { .menu a.feature::after { width: 70px; height: 70px; right: 18px; top: 20px; } }

.today-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; text-decoration: none;
  background: var(--card); border-radius: 18px; padding: 14px 18px; margin-bottom: 12px;
}
.today-strip .d { font-weight: 600; font-size: 16px; line-height: 1.4; }
.today-strip .d small { display: block; color: var(--ink-2); font-weight: 400; font-size: 13px; }
.today-strip .gz { font-family: var(--serif); font-size: 28px; font-weight: 700; }
.today-strip .gz.num { font-family: var(--sans); font-size: 30px; letter-spacing: -.04em; color: var(--accent); }

/* 띠 그리드 */
.tti-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.tti-grid button, .tti-grid a {
  display: flex; flex-direction: column; align-items: center; gap: 1px;
  background: var(--fill-2); border: 0; border-radius: 16px;
  padding: 12px 0 10px; cursor: pointer; text-decoration: none;
  transition: transform .3s var(--ease), background .2s;
}
.tti-grid button:active, .tti-grid a:active { transform: scale(.94); }
.tti-grid .hj { font-family: var(--serif); font-size: 24px; font-weight: 700; line-height: 1.2; }
.tti-grid .nm { font-size: 13px; font-weight: 600; }
.tti-grid .sc { font-size: 12px; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.tti-grid [aria-pressed="true"] { background: var(--accent); color: var(--on-accent); }
.tti-grid [aria-pressed="true"] .sc { color: rgba(255,255,255,.8); }
@media (max-width: 360px) { .tti-grid { grid-template-columns: repeat(3, 1fr); } }

.year-lines { margin: 0 -20px -22px; }
.year-lines div { display: grid; grid-template-columns: 72px 1fr; gap: 10px; padding: 13px 20px; font-size: 15px; position: relative; }
.year-lines div + div::before { content: ''; position: absolute; top: 0; left: 20px; right: 0; height: .5px; background: var(--sep); }
.year-lines b { font-weight: 600; font-variant-numeric: tabular-nums; }

/* 궁합 */
.duo { display: grid; gap: 0; }
.vs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 10px; align-items: center; text-align: center; margin-bottom: 20px; }
.vs .p { background: var(--fill-2); border-radius: 18px; padding: 14px 6px 12px; }
.vs .p .hj { font-family: var(--serif); font-size: 34px; font-weight: 700; line-height: 1.2; }
.vs .p small { display: block; font-size: 12px; color: var(--ink-2); font-weight: 500; }
.vs .heart { font-size: 20px; color: var(--accent); }
.factor { padding: 16px 0 0; margin-top: 16px; position: relative; }
.factor::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: .5px; background: var(--sep); }
.factor:first-of-type { padding-top: 0; margin-top: 0; }
.factor:first-of-type::before { display: none; }
.factor .t { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.factor .t b { font-size: 16px; font-weight: 600; }
.tag { font-size: 12px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tag.up { background: var(--wood-bg); color: var(--wood); }
.tag.down { background: var(--fire-bg); color: var(--fire); }
.tag.mid { background: var(--fill-2); color: var(--ink-2); }

/* 광고 자리 */
.ad { margin: 0 0 12px; min-height: 100px; border-radius: var(--radius); background: var(--fill-2); display: grid; place-items: center; color: var(--ink-3); font-size: 12px; }
.ad { display: none; } /* 애드센스 승인 전에는 빈 광고 칸 숨김 — 승인 후 이 줄만 지우기 */
.ad::before { content: '광고 영역'; }

/* 설명 글 */
.article h2 { font-size: 19px; margin: 24px 0 8px; }
.article h2:first-child { margin-top: 0; }
.article p, .article li { font-size: 16px; }
.article ul { padding-left: 20px; margin: 0 0 10px; color: var(--ink); opacity: .86; }

.footer { padding: 28px 0 40px; color: var(--ink-2); font-size: 13px; text-align: center; }
.footer a { margin: 0 6px; text-decoration: none; }

/* 결과 등장: 아래에서 올라오는 시트처럼 */
.reveal { animation: rise .7s var(--ease) both; }
.reveal:nth-child(2) { animation-delay: .05s; }
.reveal:nth-child(3) { animation-delay: .1s; }
.reveal:nth-child(4) { animation-delay: .15s; }
.reveal:nth-child(5) { animation-delay: .2s; }
.reveal:nth-child(6) { animation-delay: .25s; }
@keyframes rise { from { opacity: 0; transform: translateY(28px) scale(.985); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .reveal { animation: none; } .bar-fill, .ring .val { transition: none; } }

.hidden { display: none !important; }
.day-switch button { padding: 9px 10px; font-size: 15px; }

/* 좁은 화면에서 입력 칸이 잘리지 않게 */
.row-label { width: 66px; }
.selects { grid-template-columns: 1.5fr 1fr 1fr; gap: 5px; }
select { padding: 0 4px; font-size: 15px; }
input[type="time"] { flex: 1 1 auto; min-width: 0; padding: 0 8px; font-size: 15px; }
.switch span { white-space: nowrap; font-size: 14px; }

/* 공유 */
.share { padding: 14px; }
.share-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.share-btn {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  border: 0; border-radius: 16px; background: var(--fill-2); padding: 14px 4px 12px;
  font-size: 14px; font-weight: 600; cursor: pointer;
  transition: transform .25s var(--ease);
}
.share-btn:active { transform: scale(.94); }
.share-ic { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--card); }
.share-btn.kakao .share-ic { background: #fee500; color: #191600; }
.share-preview { margin-top: 12px; text-align: center; }
.share-preview canvas { width: 180px; height: auto; border-radius: 14px; }
.toast {
  position: fixed; left: 50%; bottom: calc(100px + env(safe-area-inset-bottom)); z-index: 50;
  transform: translate(-50%, 20px); opacity: 0; pointer-events: none;
  background: rgba(40, 40, 44, .92); color: #fff; font-size: 15px; font-weight: 500;
  padding: 12px 18px; border-radius: 999px; white-space: nowrap;
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  transition: opacity .3s var(--ease), transform .4s var(--ease);
}
.toast.on { opacity: 1; transform: translate(-50%, 0); }

/* 다음 단계 버튼 */
.next-links { display: grid; gap: 8px; margin-bottom: 12px; }

/* 신년운세 월별 흐름 */
.months { margin: 0 -20px -22px; }
.month { display: grid; grid-template-columns: 40px 1fr 28px; gap: 12px; align-items: center; padding: 11px 20px; position: relative; }
.month + .month::before { content: ''; position: absolute; top: 0; left: 20px; right: 0; height: .5px; background: var(--sep); }
.month b { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; }
.month-bar small { display: block; font-size: 13px; color: var(--ink-2); margin-top: 4px; line-height: 1.35; }
.month .bar-fill { background: var(--ink-3); }
.month.best .bar-fill { background: var(--accent); }
.month.best b, .month.best .n { color: var(--accent); }
.month .n { text-align: right; font-size: 15px; font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }

/* 홈 신년운세 배너 */
.banner {
  display: flex; align-items: center; gap: 14px; text-decoration: none;
  background: var(--card); border-radius: 18px; padding: 14px 16px; margin-bottom: 12px;
}
.banner .em { flex: none; width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--fire-bg); color: var(--fire); font-family: var(--serif); font-size: 24px; font-weight: 700; }
.banner .tx { flex: 1; font-weight: 600; line-height: 1.4; }
.banner .tx small { display: block; color: var(--ink-2); font-weight: 400; font-size: 13px; }
.banner .chev { color: var(--ink-3); font-size: 20px; }

/* 읽기 쉽게: 작은 글씨 키우기 */
.tabbar a { font-size: 11.5px; }
.tabbar a b { font-size: 22px; }
.chip { font-size: 14px; }
.pillar-label { font-size: 13px; }
.cell .ko { font-size: 13px; }
.time-select { flex: 1; text-align: center; }
.more { display: inline-block; margin-top: 12px; color: var(--accent); font-weight: 600; font-size: 15px; text-decoration: none; }
.link-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(92px, 1fr)); gap: 6px; margin-top: 8px; }
.link-grid a { text-align: center; text-decoration: none; background: var(--fill-2); border-radius: 12px; padding: 10px 4px; font-size: 14px; font-weight: 600; }
.link-grid a[aria-current="page"] { background: var(--accent); color: var(--on-accent); }
.cta { margin: 4px 0 12px; }

/* 날짜별 띠 운세: 어제 · 오늘 · 내일 */
.day-nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; margin: 0 0 12px; }
.day-nav a, .day-nav span { font-size: 15px; font-weight: 600; text-decoration: none; padding: 9px 12px; border-radius: 12px; }
.day-nav a { background: var(--card); }
.day-nav > :last-child { text-align: right; }
.day-nav .now { color: var(--accent); text-align: center; }
.day-nav span.now { background: var(--accent-soft); }