/* ── 커스텀 붓글씨 폰트 ── */
@font-face {
  font-family: 'HanjiCalligraphy';
  src: url('/static/fonts/TT9_unicode.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

/* ── lifegraph 페이지 추가 CSS 변수 ── */
:root {
  --bg3:       #252f42;
  --wood-bg:   #3a5c30;  --wood-text:   #d4f5b8;
  --fire-bg:   #6b2d1a;  --fire-text:   #ff7755;
  --earth-bg:  #5c4a18;  --earth-text:  #e8cc80;
  --metal-bg:  #2e3f52;  --metal-text:  #b0c8e0;
  --water-bg:  #1a2e52;  --water-text:  #88b8e8;
}

/* ── 페이지 기본 ── */
html { font-size: 16px; }
body { padding-bottom: 60px; }
.hidden { display: none; }

/* ── 입력 폼 ── */
.form-section {
  max-width: 700px;
  margin: 88px auto 0;
  padding: 0 20px;
}
.form-card {
  background: var(--bg2);
  border: 1px solid rgba(201,168,92,.2);
  border-radius: var(--radius);
  padding: 28px 24px;
}
.form-card h2 {
  font-size: 1rem;
  color: var(--gold);
  margin-bottom: 20px;
  letter-spacing: .05em;
}
.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: flex-end;
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.form-group label {
  font-size: .75rem;
  color: var(--muted);
  letter-spacing: .04em;
}
.form-group input[type="number"],
.form-group input[type="text"] {
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: 8px;
  color: var(--text);
  font-size: 1rem;
  padding: 8px 10px;
  width: 80px;
  text-align: center;
  -moz-appearance: textfield;
}
.form-group input[type="number"]::-webkit-inner-spin-button,
.form-group input[type="number"]::-webkit-outer-spin-button { -webkit-appearance: none; }
.form-group input[type="number"]:focus,
.form-group input[type="text"]:focus {
  outline: none;
  border-color: var(--gold);
}
.form-group.year input { width: 90px; }
.form-group.name input { width: 110px; text-align: left; }
.sex-group {
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.sex-group > span { font-size: .75rem; color: var(--muted); }
.sex-btns {
  display: flex;
  gap: 6px;
}
.sex-btn {
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
  font-size: .9rem;
  padding: 8px 16px;
  transition: all .2s;
}
.sex-btn.active {
  background: rgba(201,168,92,.15);
  border-color: var(--gold);
  color: var(--gold);
}
#btn-search {
  background: var(--gold);
  border: none;
  border-radius: 8px;
  color: #111827;
  cursor: pointer;
  font-size: .95rem;
  font-weight: 700;
  padding: 9px 24px;
  transition: opacity .2s;
  white-space: nowrap;
  align-self: flex-end;
}
#btn-search:hover { opacity: .85; }

/* ── 결과 영역 ── */
.result-section {
  max-width: 900px;
  margin: 36px auto 0;
  padding: 0 20px;
}
#result-title {
  font-size: .85rem;
  color: var(--muted);
  letter-spacing: .1em;
  margin-bottom: 20px;
  text-align: center;
}
#result-title span { color: var(--gold); }

/* ── 사주 기둥 그리드 ── */
#pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
@media (max-width: 600px) {
  #pillars-grid { gap: 6px; }
  .pillar-label { font-size: .72rem; letter-spacing: .06em; padding: 6px 0 4px; }
  .gz-box { padding: 8px 4px 6px; gap: 2px; }
  .gz-shinsin { font-size: .7rem; min-height: 2.6em; }
  .gz-char { font-size: 2.0rem; }
  .gz-korean { font-size: .7rem; }
  .gz-roman { font-size: .62rem; }
  .gz-animal { font-size: .7rem; }
  .earth-dot { width: 54px; height: 54px; }
}

/* ── 기둥 카드 ── */
.pillar-card {
  background: var(--bg2);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: var(--radius);
  box-shadow: 0 4px 24px rgba(0,0,0,.5);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 0;
  gap: 0;
}
.pillar-label {
  text-align: center;
  font-size: .9375rem;
  letter-spacing: .12em;
  color: var(--muted);
  padding: 8px 0 6px;
  background: var(--bg3);
}

/* 간지 박스 */
.gz-box {
  padding: 12px 8px 10px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 3px;
  position: relative;
  background-size: cover;
  background-position: center top;
}
.gz-box::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 0;
}
.gz-box.wood  { background-image: url('/static/img/chart_wood.png'); }
.gz-box.fire  { background-image: url('/static/img/chart_fire.png'); }
.gz-box.earth { background-image: url('/static/img/chart_earth.png'); }
.gz-box.metal { background-image: url('/static/img/chart_metal.png'); }
.gz-box.water { background-image: url('/static/img/chart_water.png'); }

/* 진술축미 토 내부 원 */
.earth-dot {
  position: absolute;
  border-radius: 50%;
  width: 85px;
  height: 85px;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.gz-shinsin, .gz-char, .gz-korean, .gz-roman, .gz-elem, .gz-animal, .gz-gongmang {
  position: relative;
  z-index: 1;
}
.gz-gongmang {
  position: absolute;
  bottom: 5px;
  left: 6px;
  font-size: .58rem;
  color: #f08080;
  letter-spacing: .05em;
  font-weight: 600;
  z-index: 2;
}

.gz-shinsin {
  font-size: .95rem;
  letter-spacing: .05em;
  opacity: .95;
  line-height: 1.3;
  min-height: 2.6em;
  display: flex;
  align-items: flex-start;
  justify-content: center;
}
.gz-box.wood  .gz-shinsin { color: #c8f0a8; }
.gz-box.fire  .gz-shinsin { color: #ffb8a8; }
.gz-box.earth .gz-shinsin { color: #ffe8a0; }
.gz-box.metal .gz-shinsin { color: #dce8f8; }
.gz-box.water .gz-shinsin { color: #a8d0f8; }

.gz-char {
  font-size: 2.9rem;
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Serif SC', serif;
  text-shadow: 0 2px 10px rgba(0,0,0,.6);
}
.gz-box.wood  .gz-char { color: #c8f0a8; }
.gz-box.fire  .gz-char { color: #ffb8a8; }
.gz-box.earth .gz-char { color: #ffe8a0; }
.gz-box.metal .gz-char { color: #dce8f8; }
.gz-box.water .gz-char { color: #a8d0f8; }

.gz-korean {
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: .05em;
}
.gz-box.wood  .gz-korean { color: #c8f0a8; }
.gz-box.fire  .gz-korean { color: #ffb8a8; }
.gz-box.earth .gz-korean { color: #ffe8a0; }
.gz-box.metal .gz-korean { color: #dce8f8; }
.gz-box.water .gz-korean { color: #a8d0f8; }

.gz-roman  { font-size: .9rem; color: rgba(255,255,255,.6); letter-spacing: .04em; }
.gz-elem   { font-size: .82rem; color: rgba(255,255,255,.55); letter-spacing: .06em; }
.gz-animal { font-size: .95rem; color: rgba(255,255,255,.75); }

/* 기둥 구분선 */
.pillar-divider {
  height: 1px;
  background: rgba(255,255,255,.06);
  margin: 0 8px;
}

/* ── 지장간 ── */
.jijanggan-area {
  padding: 7px 10px 6px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  align-items: center;
}
.jijanggan-area > div {
  display: grid;
  grid-template-columns: 1.6rem 1.2rem;
  align-items: center;
  gap: 3px;
}
.jijanggan-area .jjg-stem {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
  font-family: 'Noto Serif SC', serif;
  text-align: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.6rem;
  height: 1.6rem;
}
.jijanggan-area .jjg-day {
  font-size: .8rem;
  color: var(--muted);
  text-align: left;
  padding-left: 2px;
}
.dangyeong-active {
  border-radius: 50%;
  box-shadow: 0 0 0 2px var(--gold);
  outline: none;
}
.jijanggan-area .wood  { color: #c8f0a8; }
.jijanggan-area .fire  { color: #ffb8a8; }
.jijanggan-area .earth { color: #ffe8a0; }
.jijanggan-area .metal { color: #dce8f8; }
.jijanggan-area .water { color: #a8d0f8; }
.jijanggan-area .jjg-day { color: rgba(255,255,255,.55); }


/* 신살 영역 */
.shinsal-area {
  padding: 8px 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shinsal-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.shinsal-key { font-size: .6rem; color: var(--muted); letter-spacing: .08em; }
.shinsal-val { font-size: .75rem; color: var(--text); text-align: center; }

/* 신살 태그 */
.tag-row {
  display: flex;
  flex-wrap: wrap;
  gap: 3px;
  justify-content: center;
  min-height: 20px;
  padding: 4px 4px 2px;
}
.tag {
  font-size: .68rem;
  padding: 3px 7px;
  border-radius: 4px;
  letter-spacing: .03em;
  white-space: nowrap;
}
.tag-normal   { background: rgba(201,168,92,.15); color: var(--gold);   border: 1px solid rgba(201,168,92,.3); }
.tag-gongmang { background: rgba(220,80,80,.15);  color: #f08080;       border: 1px solid rgba(220,80,80,.3); }
.tag-ganyeo   { background: rgba(100,180,120,.15);color: #80d0a0;       border: 1px solid rgba(100,180,120,.3); }
.tag-guiin    { background: rgba(180,140,255,.15);color: #c8a8ff;       border: 1px solid rgba(180,140,255,.3); }
.tag-dohua    { background: rgba(255,130,180,.15);color: #ffaacc;       border: 1px solid rgba(255,130,180,.3); }

/* ── 지장간·신살 토글 버튼 ── */
#detail-toggle-bar {
  display: flex;
  justify-content: center;
  margin-top: 10px;
}
#btn-detail-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px solid rgba(201,168,92,.25);
  border-radius: 20px;
  padding: 5px 18px;
  color: var(--muted);
  font-size: .76rem;
  cursor: pointer;
  letter-spacing: .05em;
  transition: border-color .2s, color .2s;
}
#btn-detail-toggle:hover {
  border-color: var(--gold);
  color: var(--gold);
}
#detail-toggle-icon {
  font-size: .8rem;
  transition: transform .25s;
  display: inline-block;
}
#pillars-grid.details-hidden ~ #detail-toggle-bar #detail-toggle-icon {
  transform: rotate(-90deg);
}

/* 숨김 상태 */
#pillars-grid.details-hidden .jijanggan-area,
#pillars-grid.details-hidden .shinsal-area,
#pillars-grid.details-hidden .pillar-divider {
  display: none;
}

/* ── 공망 안내 ── */
#gongmang-info {
  margin-top: 16px;
  text-align: center;
  font-size: .82rem;
  color: var(--muted);
}
#gongmang-info span { color: #f08080; font-weight: 600; }

/* ── 로딩/에러 ── */
#status-msg {
  text-align: center;
  padding: 40px 0;
  color: var(--muted);
  font-size: .9rem;
}

/* ── 대운 섹션 ── */
.dayun-section {
  max-width: 700px;
  margin: 28px auto 0;
  padding: 0 20px 40px;
}
.dayun-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  justify-content: space-between;
}
.dayun-header > span:first-child { font-size: .9rem; color: var(--gold); letter-spacing: .08em; }
#dayun-meta  { font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
#dayun-grid {
  display: flex;
  flex-direction: row-reverse;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.dayun-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(201,168,92,.12);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 1 0 90px;
  background: var(--bg2);
}
.dayun-card.current {
  border-color: var(--gold);
  box-shadow: 0 0 10px rgba(201,168,92,.25);
}
.dayun-gz {
  padding: 8px 6px 6px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: center top;
}
.dayun-gz::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 0;
}
.dayun-gz.wood  { background-image: url('/static/img/chart_wood.png'); }
.dayun-gz.fire  { background-image: url('/static/img/chart_fire.png'); }
.dayun-gz.earth { background-image: url('/static/img/chart_earth.png'); }
.dayun-gz.metal { background-image: url('/static/img/chart_metal.png'); }
.dayun-gz.water { background-image: url('/static/img/chart_water.png'); }
.dayun-char {
  font-size: 2.3rem;
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Serif SC', serif;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.dayun-gz.wood  .dayun-char { color: #c8f0a8; }
.dayun-gz.fire  .dayun-char { color: #ffb8a8; }
.dayun-gz.earth .dayun-char { color: #ffe8a0; }
.dayun-gz.metal .dayun-char { color: #dce8f8; }
.dayun-gz.water .dayun-char { color: #a8d0f8; }
.dayun-korean {
  font-size: 1.0rem;
  font-weight: 600;
  letter-spacing: .04em;
  position: relative;
  z-index: 1;
}
.dayun-gz.wood  .dayun-korean { color: #c8f0a8; }
.dayun-gz.fire  .dayun-korean { color: #ffb8a8; }
.dayun-gz.earth .dayun-korean { color: #ffe8a0; }
.dayun-gz.metal .dayun-korean { color: #dce8f8; }
.dayun-gz.water .dayun-korean { color: #a8d0f8; }
.dayun-roman {
  font-size: 1.0rem;
  opacity: .75;
  letter-spacing: .03em;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.7);
}
.dayun-animal {
  font-size: .88rem;
  opacity: .85;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.8);
}
.dayun-dot {
  position: absolute;
  border-radius: 50%;
  width: 54px;
  height: 54px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.dayun-info {
  padding: 6px 4px 5px;
  text-align: center;
  width: 100%;
  background: var(--bg3);
  border-bottom: 1px solid rgba(201,168,92,.1);
}
.dayun-age { font-size: 1.0rem; color: var(--gold); font-weight: 600; }
.dayun-year { font-size: .9rem; color: var(--muted); margin-top: 1px; }
.dayun-current-label { font-size: .55rem; color: var(--gold); letter-spacing: .06em; margin-top: 2px; }

/* ── 세운 섹션 ── */
.sewoon-section {
  max-width: 700px;
  margin: 10px auto 0;
  padding: 0 20px 40px;
}
.sewoon-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}
.sewoon-header > span:first-child { font-size: .9rem; color: var(--muted); letter-spacing: .08em; }
#sewoon-meta  { font-size: .75rem; color: var(--muted); opacity: .7; letter-spacing: .04em; }
#sewoon-grid {
  display: flex;
  flex-direction: row-reverse;
  gap: 6px;
  overflow-x: auto;
  padding-bottom: 4px;
}
.sewoon-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  border: 1px solid rgba(201,168,92,.08);
  border-radius: var(--radius);
  overflow: hidden;
  flex: 0 0 60px;
  background: var(--bg2);
  cursor: default;
}
.sewoon-card.current {
  border-color: var(--gold);
  box-shadow: 0 0 8px rgba(201,168,92,.2);
}
.sewoon-gz {
  padding: 6px 4px 5px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  position: relative;
  background-size: cover;
  background-position: center top;
}
.sewoon-gz::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.28);
  z-index: 0;
}
.sewoon-gz.wood  { background-image: url('/static/img/chart_wood.png'); }
.sewoon-gz.fire  { background-image: url('/static/img/chart_fire.png'); }
.sewoon-gz.earth { background-image: url('/static/img/chart_earth.png'); }
.sewoon-gz.metal { background-image: url('/static/img/chart_metal.png'); }
.sewoon-gz.water { background-image: url('/static/img/chart_water.png'); }
.sewoon-char {
  font-size: 1.85rem;
  font-weight: 700;
  line-height: 1;
  font-family: 'Noto Serif SC', serif;
  position: relative;
  z-index: 1;
  text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.sewoon-gz.wood  .sewoon-char { color: #c8f0a8; }
.sewoon-gz.fire  .sewoon-char { color: #ffb8a8; }
.sewoon-gz.earth .sewoon-char { color: #ffe8a0; }
.sewoon-gz.metal .sewoon-char { color: #dce8f8; }
.sewoon-gz.water .sewoon-char { color: #a8d0f8; }
.sewoon-korean {
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .03em;
  position: relative;
  z-index: 1;
}
.sewoon-gz.wood  .sewoon-korean { color: #c8f0a8; }
.sewoon-gz.fire  .sewoon-korean { color: #ffb8a8; }
.sewoon-gz.earth .sewoon-korean { color: #ffe8a0; }
.sewoon-gz.metal .sewoon-korean { color: #dce8f8; }
.sewoon-gz.water .sewoon-korean { color: #a8d0f8; }
.sewoon-animal {
  font-size: .88rem;
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.8);
}
.sewoon-dot {
  position: absolute;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  top: 30%;
  left: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 0;
}
.sewoon-info {
  padding: 4px 3px 5px;
  text-align: center;
  width: 100%;
  background: var(--bg3);
  border-bottom: 1px solid rgba(201,168,92,.1);
}
.sewoon-year { font-size: .9rem; color: var(--gold); font-weight: 600; }

#dayun-change-info {
  font-size: .72rem;
  color: var(--muted);
  letter-spacing: .03em;
  margin-left: auto;
  white-space: nowrap;
}
#dayun-change-info span { color: var(--gold); font-weight: 600; }

.dayun-card.selected,
.sewoon-card.selected {
  border: 3px solid #c9a85c !important;
  box-shadow: 0 0 0 2px #c9a85c !important;
}

/* ── 오행 도넛차트 ── */
.chart-section {
  max-width: 700px;
  margin: 10px auto 0;
  padding: 0 20px 48px;
}
.chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
@media (max-width: 480px) { .chart-grid { grid-template-columns: 1fr; } }

.chart-box {
  position: relative;
  background: #0b1220;
  border: 1px solid rgba(201,168,92,.45);
  border-radius: 10px;
  padding: 22px 12px 14px;
  text-align: center;
}

/* 코너 장식 */
.chart-corner {
  position: absolute;
  width: 14px;
  height: 14px;
}
.chart-corner.tl { top: 7px; left: 7px;   border-top: 2px solid #c9a85c; border-left: 2px solid #c9a85c; }
.chart-corner.tr { top: 7px; right: 7px;  border-top: 2px solid #c9a85c; border-right: 2px solid #c9a85c; }
.chart-corner.bl { bottom: 7px; left: 7px;  border-bottom: 2px solid #c9a85c; border-left: 2px solid #c9a85c; }
.chart-corner.br { bottom: 7px; right: 7px; border-bottom: 2px solid #c9a85c; border-right: 2px solid #c9a85c; }

/* 상단 메달리온 */
.chart-medallion {
  color: #c9a85c;
  font-size: 1rem;
  line-height: 1;
  margin-bottom: 6px;
  letter-spacing: 0;
}

/* 메인 타이틀 */
.chart-title-main {
  margin: 0 0 5px;
  font-size: 1.05rem;
  font-family: 'Noto Serif KR', serif;
  color: #ede8dc;
  font-weight: 600;
  letter-spacing: .06em;
}

/* 서브타이틀 (양쪽 금선) */
.chart-title-sub {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  margin: 0 0 10px;
  font-size: .6rem;
  color: rgba(201,168,92,.75);
  letter-spacing: .1em;
  text-transform: uppercase;
}
.chart-title-sub::before,
.chart-title-sub::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(201,168,92,.35);
}

/* ── 인생그래프 섹션 ── */
.lifeline-section {
  max-width: 900px;
  margin: 10px auto 0;
  padding: 0 20px 60px;
}
.lifeline-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 14px;
}
.lifeline-header > span:first-child { font-size: .9rem; color: var(--gold); letter-spacing: .08em; white-space: nowrap; }
.lifeline-controls {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.range-btn {
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: 20px;
  color: var(--muted);
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 16px;
  font-family: 'Noto Serif KR', serif;
  transition: all .2s;
}
.range-btn.active {
  background: rgba(201,168,92,.15);
  border-color: var(--gold);
  color: var(--gold);
}
.range-custom {
  display: flex;
  align-items: center;
  gap: 6px;
}
.range-custom input {
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: 8px;
  color: var(--text);
  font-size: .85rem;
  padding: 5px 8px;
  width: 76px;
  text-align: center;
  -moz-appearance: textfield;
  font-family: 'Noto Serif KR', serif;
}
.range-custom input::-webkit-inner-spin-button,
.range-custom input::-webkit-outer-spin-button { -webkit-appearance: none; }
.range-custom input:focus { outline: none; border-color: var(--gold); }
.range-custom span { color: var(--muted); font-size: .85rem; }
#btn-range-apply {
  background: transparent;
  border: 1px solid rgba(201,168,92,.4);
  border-radius: 8px;
  color: var(--gold);
  cursor: pointer;
  font-size: .8rem;
  padding: 5px 12px;
  font-family: 'Noto Serif KR', serif;
  transition: all .2s;
}
#btn-range-apply:hover { background: rgba(201,168,92,.1); }
.life-panel { margin-bottom: 14px; }
.life-panel-title {
  font-size: .7rem;
  color: var(--muted);
  letter-spacing: .04em;
  margin-bottom: 5px;
  padding-left: 2px;
}
.life-panel-box {
  background: var(--bg2);
  border: 1px solid rgba(201,168,92,.12);
  border-radius: var(--radius);
  padding: 12px 14px 8px;
  position: relative;
  height: 270px;
}
.life-panel-box.delta { height: 210px; }
@media (max-width: 600px) {
  .life-panel-box { height: 210px; }
  .life-panel-box.delta { height: 170px; }
}

/* ── 도시 시간 보정 ── */
.city-row {
  margin-top: 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
}
.city-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 160px;
  flex: 1;
  position: relative;
}
.city-suggestions {
  position: absolute;
  top: calc(100% + 4px);
  left: 0; right: 0;
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.35);
  border-radius: 8px;
  max-height: 260px;
  overflow-y: auto;
  z-index: 600;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
}
.sugg-item {
  padding: 8px 12px;
  cursor: pointer;
  font-size: .87rem;
  color: var(--text);
  border-bottom: 1px solid rgba(255,255,255,.04);
  transition: background .12s;
}
.sugg-item:last-child { border-bottom: none; }
.sugg-item:hover,
.sugg-item.active { background: rgba(201,168,92,.15); color: var(--gold); }
.sugg-hi { color: var(--gold); font-weight: 700; }
.city-input-wrap label { font-size: .75rem; color: var(--muted); letter-spacing: .04em; }
.city-input-wrap input {
  background: var(--bg3);
  border: 1px solid rgba(201,168,92,.3);
  border-radius: 8px;
  color: var(--text);
  font-size: .9rem;
  padding: 8px 10px;
  width: 100%;
  font-family: 'Noto Serif KR', serif;
}
.city-input-wrap input:focus { outline: none; border-color: var(--gold); }
.corr-info-box {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 2;
  min-width: 220px;
  padding-top: 22px;
}
.corr-line { font-size: .78rem; color: var(--muted); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; min-height: 18px; }
.corr-val  { color: var(--gold); font-weight: 600; }
.corr-warn { color: #f08080; font-size: .75rem; }
.eot-row {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .78rem;
  color: var(--muted);
}
.eot-row input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
.eot-row label { cursor: pointer; }
.corr-result { font-size: .8rem; color: #88c888; font-weight: 600; min-height: 18px; }

/* 양력/음력 토글 */
.cal-toggle {
  display: flex;
  gap: 6px;
  margin-bottom: 14px;
}
.cal-btn {
  padding: 4px 16px;
  border: 1px solid var(--gold);
  border-radius: 20px;
  background: transparent;
  color: var(--gold);
  font-size: .82rem;
  cursor: pointer;
  transition: background .2s, color .2s;
}
.cal-btn.active {
  background: var(--gold);
  color: #1a1a1a;
  font-weight: 600;
}

/* 윤달 체크박스 */
.leap-group {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .82rem;
  color: var(--muted);
  align-self: flex-end;
  padding-bottom: 6px;
}
.leap-group input[type="checkbox"] { accent-color: var(--gold); width: 14px; height: 14px; cursor: pointer; }
.leap-group label { cursor: pointer; }

/* ════════════════════════════════════════
   테마 선택 버튼
════════════════════════════════════════ */
#theme-selector {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: 14px;
}
.theme-btn {
  background: transparent;
  border: 1px solid rgba(201,168,92,.2);
  border-radius: 20px;
  padding: 5px 18px;
  color: var(--muted);
  font-size: .76rem;
  cursor: pointer;
  letter-spacing: .05em;
  transition: all .2s;
}
.theme-btn:hover { border-color: var(--gold); color: var(--gold); }
.theme-btn.active {
  background: rgba(201,168,92,.15);
  border-color: var(--gold);
  color: var(--gold);
}

/* ── 한지 테마 폰트 크기 (Zhi Mang Xing은 시각적으로 작아 보여 확대) ── */
body[data-theme="hanji"] .gz-char      { font-size: 6.0rem !important; }
body[data-theme="hanji"] .gz-korean    { font-size: 1.05rem !important; }
body[data-theme="hanji"] .dayun-char   { font-size: 3.0rem !important; }
body[data-theme="hanji"] .dayun-korean { font-size: 1.05rem !important; }
body[data-theme="hanji"] .sewoon-char  { font-size: 2.0rem !important; }
body[data-theme="hanji"] .sewoon-korean{ font-size: 0.9rem !important; }

/* ════════════════════════════════════════
   한지 테마
════════════════════════════════════════ */
body[data-theme="hanji"] .pillar-card { background: #ddd0b4; border-color: #b8986a; }
body[data-theme="hanji"] .pillar-label { background: #cec0a0; color: #4a3018; }
body[data-theme="hanji"] .pillar-divider { background: rgba(100,70,40,.15); }

/* 한지 오행 이미지 배경 */
body[data-theme="hanji"] .gz-box,
body[data-theme="hanji"] .dayun-gz,
body[data-theme="hanji"] .sewoon-gz {
  background-size: cover !important;
  background-position: center !important;
}
body[data-theme="hanji"] .gz-box::before,
body[data-theme="hanji"] .dayun-gz::before,
body[data-theme="hanji"] .sewoon-gz::before { background: rgba(0,0,0,.12); }

/* 오행별 한지 이미지 — 사주 원국 */
body[data-theme="hanji"] .gz-box.wood  { background-image: url('/static/img/han_wood_light.png') !important; }
body[data-theme="hanji"] .gz-box.fire  { background-image: url('/static/img/han_red_light.png') !important; }
body[data-theme="hanji"] .gz-box.earth { background-image: url('/static/img/han_yellow_light.png') !important; }
body[data-theme="hanji"] .gz-box.metal { background-image: url('/static/img/han_silver_light.png') !important; }
body[data-theme="hanji"] .gz-box.water { background-image: url('/static/img/han_blue_light.png') !important; }

/* 오행별 한지 이미지 — 대운 */
body[data-theme="hanji"] .dayun-gz.wood  { background-image: url('/static/img/han_wood_light.png') !important; }
body[data-theme="hanji"] .dayun-gz.fire  { background-image: url('/static/img/han_red_light.png') !important; }
body[data-theme="hanji"] .dayun-gz.earth { background-image: url('/static/img/han_yellow_light.png') !important; }
body[data-theme="hanji"] .dayun-gz.metal { background-image: url('/static/img/han_silver_light.png') !important; }
body[data-theme="hanji"] .dayun-gz.water { background-image: url('/static/img/han_blue_light.png') !important; }

/* 오행별 한지 이미지 — 세운 */
body[data-theme="hanji"] .sewoon-gz.wood  { background-image: url('/static/img/han_wood_light.png') !important; }
body[data-theme="hanji"] .sewoon-gz.fire  { background-image: url('/static/img/han_red_light.png') !important; }
body[data-theme="hanji"] .sewoon-gz.earth { background-image: url('/static/img/han_yellow_light.png') !important; }
body[data-theme="hanji"] .sewoon-gz.metal { background-image: url('/static/img/han_silver_light.png') !important; }
body[data-theme="hanji"] .sewoon-gz.water { background-image: url('/static/img/han_blue_light.png') !important; }

body[data-theme="hanji"] .gz-char,
body[data-theme="hanji"] .gz-box.wood .gz-char,
body[data-theme="hanji"] .gz-box.fire .gz-char,
body[data-theme="hanji"] .gz-box.earth .gz-char,
body[data-theme="hanji"] .gz-box.metal .gz-char,
body[data-theme="hanji"] .gz-box.water .gz-char { color: #111 !important; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; text-shadow: none; }

body[data-theme="hanji"] .gz-korean,
body[data-theme="hanji"] .gz-box.wood .gz-korean,
body[data-theme="hanji"] .gz-box.fire .gz-korean,
body[data-theme="hanji"] .gz-box.earth .gz-korean,
body[data-theme="hanji"] .gz-box.metal .gz-korean,
body[data-theme="hanji"] .gz-box.water .gz-korean { color: #111 !important; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; }

body[data-theme="hanji"] .gz-shinsin,
body[data-theme="hanji"] .gz-box.wood .gz-shinsin,
body[data-theme="hanji"] .gz-box.fire .gz-shinsin,
body[data-theme="hanji"] .gz-box.earth .gz-shinsin,
body[data-theme="hanji"] .gz-box.metal .gz-shinsin,
body[data-theme="hanji"] .gz-box.water .gz-shinsin { color: #222 !important; }

body[data-theme="hanji"] .gz-roman  { color: #222 !important; }
body[data-theme="hanji"] .gz-elem   { color: #333 !important; }
body[data-theme="hanji"] .gz-animal { color: #222 !important; }

body[data-theme="hanji"] .jijanggan-area .jjg-stem,
body[data-theme="hanji"] .jijanggan-area .wood,
body[data-theme="hanji"] .jijanggan-area .fire,
body[data-theme="hanji"] .jijanggan-area .earth,
body[data-theme="hanji"] .jijanggan-area .metal,
body[data-theme="hanji"] .jijanggan-area .water { color: #111 !important; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; }
body[data-theme="hanji"] .jijanggan-area .jjg-day { color: #333 !important; }
body[data-theme="hanji"] .dangyeong-active { box-shadow: 0 0 0 2px #8b6014; }

body[data-theme="hanji"] .tag-normal   { background: rgba(139,96,20,.12);  color: #8b6014; border-color: rgba(139,96,20,.3); }
body[data-theme="hanji"] .tag-guiin    { background: rgba(120,80,160,.12);  color: #8050a0; border-color: rgba(120,80,160,.3); }
body[data-theme="hanji"] .tag-dohua    { background: rgba(180,80,100,.12);  color: #b05060; border-color: rgba(180,80,100,.3); }
body[data-theme="hanji"] .tag-ganyeo   { background: rgba(60,120,70,.12);   color: #3c7846; border-color: rgba(60,120,70,.3); }
body[data-theme="hanji"] .tag-gongmang { background: rgba(180,60,60,.12);   color: #b04040; border-color: rgba(180,60,60,.3); }

/* 대운 */
body[data-theme="hanji"] .dayun-card { background: #ddd0b4; border-color: #b8986a; }
body[data-theme="hanji"] .dayun-card.current { border-color: #8b6014; box-shadow: 0 0 10px rgba(139,96,20,.25); }

body[data-theme="hanji"] .dayun-char,
body[data-theme="hanji"] .dayun-gz.wood .dayun-char,
body[data-theme="hanji"] .dayun-gz.fire .dayun-char,
body[data-theme="hanji"] .dayun-gz.earth .dayun-char,
body[data-theme="hanji"] .dayun-gz.metal .dayun-char,
body[data-theme="hanji"] .dayun-gz.water .dayun-char { color: #2c1a0e; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; text-shadow: 1px 1px 3px rgba(80,40,10,.25); }

body[data-theme="hanji"] .dayun-korean,
body[data-theme="hanji"] .dayun-gz.wood .dayun-korean,
body[data-theme="hanji"] .dayun-gz.fire .dayun-korean,
body[data-theme="hanji"] .dayun-gz.earth .dayun-korean,
body[data-theme="hanji"] .dayun-gz.metal .dayun-korean,
body[data-theme="hanji"] .dayun-gz.water .dayun-korean { color: #5c3d20; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; }

body[data-theme="hanji"] .dayun-roman  { color: #7a5c3a; }
body[data-theme="hanji"] .dayun-animal { color: #7a5c3a; }
body[data-theme="hanji"] .dayun-info { background: #cec0a0; border-color: rgba(100,70,40,.2); }
body[data-theme="hanji"] .dayun-age { color: #8b6014; }
body[data-theme="hanji"] .dayun-year { color: #6b4c30; }
body[data-theme="hanji"] .dayun-current-label { color: #8b6014; }

/* 세운 */
body[data-theme="hanji"] .sewoon-card { background: #ddd0b4; border-color: rgba(184,152,106,.4); }
body[data-theme="hanji"] .sewoon-card.current { border-color: #8b6014; }

body[data-theme="hanji"] .sewoon-char,
body[data-theme="hanji"] .sewoon-gz.wood .sewoon-char,
body[data-theme="hanji"] .sewoon-gz.fire .sewoon-char,
body[data-theme="hanji"] .sewoon-gz.earth .sewoon-char,
body[data-theme="hanji"] .sewoon-gz.metal .sewoon-char,
body[data-theme="hanji"] .sewoon-gz.water .sewoon-char { color: #2c1a0e; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; text-shadow: 1px 1px 3px rgba(80,40,10,.25); }

body[data-theme="hanji"] .sewoon-korean,
body[data-theme="hanji"] .sewoon-gz.wood .sewoon-korean,
body[data-theme="hanji"] .sewoon-gz.fire .sewoon-korean,
body[data-theme="hanji"] .sewoon-gz.earth .sewoon-korean,
body[data-theme="hanji"] .sewoon-gz.metal .sewoon-korean,
body[data-theme="hanji"] .sewoon-gz.water .sewoon-korean { color: #5c3d20; font-family: 'Zhi Mang Xing', 'Noto Serif SC', serif !important; }

body[data-theme="hanji"] .sewoon-animal { color: #7a5c3a; }
body[data-theme="hanji"] .sewoon-info { background: #cec0a0; border-color: rgba(100,70,40,.2); }
body[data-theme="hanji"] .sewoon-year { color: #8b6014; }


/* ════════════════════════════════════════
   칠판 테마
════════════════════════════════════════ */
body[data-theme="board"] .pillar-card { background: #1e3d1e; border-color: rgba(190,210,170,.25); }
body[data-theme="board"] .pillar-label { background: #192e19; color: rgba(220,235,200,.75); }
body[data-theme="board"] .pillar-divider { background: rgba(190,210,170,.12); }

body[data-theme="board"] .gz-box { background-image: none !important; background-color: #243e24; }
body[data-theme="board"] .gz-box::before { background: rgba(0,0,0,.08); }

body[data-theme="board"] .gz-char { font-size: 4.0rem !important; font-family: 'Ma Shan Zheng', cursive; text-shadow: 1px 2px 5px rgba(0,0,0,.6); }
body[data-theme="board"] .gz-box.wood  .gz-char { color: #a3c0a5; }
body[data-theme="board"] .gz-box.fire  .gz-char { color: #e09395; }
body[data-theme="board"] .gz-box.earth .gz-char { color: #f5da90; }
body[data-theme="board"] .gz-box.metal .gz-char { color: #e8e8e8; }
body[data-theme="board"] .gz-box.water .gz-char { color: #9ab3cc; }

body[data-theme="board"] .gz-korean { font-family: 'Caveat', cursive; }
body[data-theme="board"] .gz-box.wood  .gz-korean { color: #a3c0a5; }
body[data-theme="board"] .gz-box.fire  .gz-korean { color: #e09395; }
body[data-theme="board"] .gz-box.earth .gz-korean { color: #f5da90; }
body[data-theme="board"] .gz-box.metal .gz-korean { color: #e8e8e8; }
body[data-theme="board"] .gz-box.water .gz-korean { color: #9ab3cc; }

body[data-theme="board"] .gz-shinsin,
body[data-theme="board"] .gz-box.wood .gz-shinsin,
body[data-theme="board"] .gz-box.fire .gz-shinsin,
body[data-theme="board"] .gz-box.earth .gz-shinsin,
body[data-theme="board"] .gz-box.metal .gz-shinsin,
body[data-theme="board"] .gz-box.water .gz-shinsin { color: rgba(220,215,195,.7); }

body[data-theme="board"] .gz-roman  { color: rgba(220,215,195,.75); font-family: 'Caveat', cursive; }
body[data-theme="board"] .gz-elem   { color: rgba(210,225,190,.6); }
body[data-theme="board"] .gz-animal { color: rgba(220,215,195,.8); font-family: 'Caveat', cursive; }

body[data-theme="board"] .jijanggan-area .jjg-stem,
body[data-theme="board"] .jijanggan-area .wood,
body[data-theme="board"] .jijanggan-area .fire,
body[data-theme="board"] .jijanggan-area .earth,
body[data-theme="board"] .jijanggan-area .metal,
body[data-theme="board"] .jijanggan-area .water { color: #f0ede0; font-family: 'Ma Shan Zheng', cursive; }
body[data-theme="board"] .jijanggan-area .jjg-day { color: rgba(220,215,195,.65); font-family: 'Caveat', cursive; }
body[data-theme="board"] .dangyeong-active { box-shadow: 0 0 0 2px rgba(220,210,140,.8); }

body[data-theme="board"] .tag-normal   { background: rgba(180,200,120,.15); color: #c8d890; border-color: rgba(180,200,120,.3); }
body[data-theme="board"] .tag-guiin    { background: rgba(160,140,220,.15); color: #b0a8e0; border-color: rgba(160,140,220,.3); }
body[data-theme="board"] .tag-dohua    { background: rgba(220,140,160,.15); color: #d8a0b0; border-color: rgba(220,140,160,.3); }
body[data-theme="board"] .tag-ganyeo   { background: rgba(130,200,140,.15); color: #90d090; border-color: rgba(130,200,140,.3); }
body[data-theme="board"] .tag-gongmang { background: rgba(220,100,80,.15);  color: #d87060; border-color: rgba(220,100,80,.3); }

/* 대운 */
body[data-theme="board"] .dayun-card { background: #1e3d1e; border-color: rgba(190,210,170,.2); }
body[data-theme="board"] .dayun-card.current { border-color: rgba(220,210,140,.7); box-shadow: 0 0 10px rgba(180,200,100,.2); }
body[data-theme="board"] .dayun-gz { background-image: none !important; background-color: #243e24; }
body[data-theme="board"] .dayun-gz::before { background: rgba(0,0,0,.08); }

body[data-theme="board"] .dayun-char { font-family: 'Ma Shan Zheng', cursive; text-shadow: 1px 2px 5px rgba(0,0,0,.6); }
body[data-theme="board"] .dayun-gz.wood  .dayun-char { color: #a3c0a5; }
body[data-theme="board"] .dayun-gz.fire  .dayun-char { color: #e09395; }
body[data-theme="board"] .dayun-gz.earth .dayun-char { color: #f5da90; }
body[data-theme="board"] .dayun-gz.metal .dayun-char { color: #e8e8e8; }
body[data-theme="board"] .dayun-gz.water .dayun-char { color: #9ab3cc; }

body[data-theme="board"] .dayun-korean { font-family: 'Caveat', cursive; }
body[data-theme="board"] .dayun-gz.wood  .dayun-korean { color: #a3c0a5; }
body[data-theme="board"] .dayun-gz.fire  .dayun-korean { color: #e09395; }
body[data-theme="board"] .dayun-gz.earth .dayun-korean { color: #f5da90; }
body[data-theme="board"] .dayun-gz.metal .dayun-korean { color: #e8e8e8; }
body[data-theme="board"] .dayun-gz.water .dayun-korean { color: #9ab3cc; }

body[data-theme="board"] .dayun-roman  { color: rgba(220,215,195,.75); font-family: 'Caveat', cursive; }
body[data-theme="board"] .dayun-animal { color: rgba(220,215,195,.8);  font-family: 'Caveat', cursive; }
body[data-theme="board"] .dayun-info { background: #192e19; border-color: rgba(190,210,170,.12); }
body[data-theme="board"] .dayun-age { color: #d4c870; }
body[data-theme="board"] .dayun-year { color: rgba(220,215,195,.75); }
body[data-theme="board"] .dayun-current-label { color: #d4c870; }

/* 세운 */
body[data-theme="board"] .sewoon-card { background: #1e3d1e; border-color: rgba(190,210,170,.15); }
body[data-theme="board"] .sewoon-card.current { border-color: rgba(220,210,140,.7); }
body[data-theme="board"] .sewoon-gz { background-image: none !important; background-color: #243e24; }
body[data-theme="board"] .sewoon-gz::before { background: rgba(0,0,0,.08); }

body[data-theme="board"] .sewoon-char { font-family: 'Ma Shan Zheng', cursive; text-shadow: 1px 2px 5px rgba(0,0,0,.6); }
body[data-theme="board"] .sewoon-gz.wood  .sewoon-char { color: #a3c0a5; }
body[data-theme="board"] .sewoon-gz.fire  .sewoon-char { color: #e09395; }
body[data-theme="board"] .sewoon-gz.earth .sewoon-char { color: #f5da90; }
body[data-theme="board"] .sewoon-gz.metal .sewoon-char { color: #e8e8e8; }
body[data-theme="board"] .sewoon-gz.water .sewoon-char { color: #9ab3cc; }

body[data-theme="board"] .sewoon-korean { font-family: 'Caveat', cursive; }
body[data-theme="board"] .sewoon-gz.wood  .sewoon-korean { color: #a3c0a5; }
body[data-theme="board"] .sewoon-gz.fire  .sewoon-korean { color: #e09395; }
body[data-theme="board"] .sewoon-gz.earth .sewoon-korean { color: #f5da90; }
body[data-theme="board"] .sewoon-gz.metal .sewoon-korean { color: #e8e8e8; }
body[data-theme="board"] .sewoon-gz.water .sewoon-korean { color: #9ab3cc; }

body[data-theme="board"] .sewoon-animal { color: rgba(220,215,195,.8); font-family: 'Caveat', cursive; }
body[data-theme="board"] .sewoon-info { background: #192e19; border-color: rgba(190,210,170,.12); }
body[data-theme="board"] .sewoon-year { color: #d4c870; }

/* ── 원국 요약 바 (오행 분포 · 편중 · 조후) ── */
.natal-summary-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 14px;
  margin: 6px 0 10px;
  background: rgba(255,255,255,0.05);
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.1);
  flex-wrap: wrap;
}

.natal-summary-ohaeng {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  flex: 1;
  justify-content: center;
}

.ohaeng-bar-item {
  display: flex;
  align-items: center;
  gap: 3px;
  font-size: 0.82rem;
}

.ohaeng-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  display: inline-block;
}

.ohaeng-label { opacity: 0.75; }
.ohaeng-pct   { font-weight: 600; }

.natal-summary-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.natal-dominant {
  font-size: 0.85rem;
  font-weight: 600;
  opacity: 0.9;
}

.natal-dominant::before { content: attr(data-label) ' '; opacity: 0.6; font-weight: 400; }

.natal-johu {
  font-size: 0.85rem;
  font-weight: 700;
  padding: 2px 10px;
  border-radius: 20px;
}

.johu-excold { background: #1a237e; color: #90caf9; }
.johu-cold   { background: #1565c0; color: #bbdefb; }
.johu-neutral{ background: #2e7d32; color: #c8e6c9; }
.johu-warm   { background: #e65100; color: #ffe0b2; }
.johu-hot    { background: #b71c1c; color: #ffcdd2; }

/* ── 사주 능력치 섹션 ── */
.ability-section {
  max-width: 760px;
  margin: 10px auto 0;
  padding: 0 20px 60px;
}

.ability-section > .ability-header {
  text-align: center;
  margin-bottom: 1.2rem;
}

.ability-section > .ability-header > h2 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: .08em;
  margin-bottom: 4px;
}

.ability-section > .ability-header > #ability-profile-type {
  font-size: .8rem;
  color: var(--muted);
  letter-spacing: .04em;
}

.ability-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}

.ability-radar-wrap {
  width: 100%;
  max-width: 380px;
}

.ability-axis-btns {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  width: 100%;
}

.ability-axis-btn {
  display: flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  background: var(--bg3);
  border: none;
  border-left: 3px solid #888;
  border-radius: 0 6px 6px 0;
  cursor: pointer;
  font-size: .78rem;
  color: var(--text);
  font-family: 'Noto Serif KR', serif;
  transition: opacity .15s;
}

.ability-axis-btn:hover { opacity: .7; }

.ability-axis-btn > span { opacity: .85; }

.ability-axis-btn > strong {
  font-size: .9rem;
  margin-left: .15rem;
}

.ability-sub-panel {
  background: var(--bg3);
  border-radius: 8px;
  padding: 1rem;
  margin-top: 1rem;
  width: 100%;
}

.ability-sub-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: .75rem;
  font-size: .85rem;
  font-weight: 700;
  color: var(--gold);
}

.ability-sub-header > button {
  background: none;
  border: none;
  cursor: pointer;
  font-size: .95rem;
  color: var(--muted);
  padding: 0 4px;
}

#ability-sub-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: .35rem;
}

#ability-sub-list > li {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .8rem;
  color: var(--text);
}

#ability-sub-list .sub-name {
  width: 7.5rem;
  flex-shrink: 0;
  opacity: .85;
}

#ability-sub-list .sub-bar-wrap {
  flex: 1;
  background: rgba(255,255,255,.08);
  border-radius: 4px;
  height: 6px;
  overflow: hidden;
}

#ability-sub-list .sub-bar {
  display: block;
  height: 100%;
  background: rgba(100,160,220,.8);
  border-radius: 4px;
  transition: width .3s;
}

#ability-sub-list .sub-score {
  width: 2rem;
  text-align: right;
  font-weight: 600;
  font-size: .82rem;
  color: var(--gold);
}

.ability-top5 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-top: 1.4rem;
  width: 100%;
}

.ability-top5-block {
  background: var(--bg3);
  border-radius: 8px;
  padding: .75rem 1rem;
}

.ability-top5-block > p {
  font-size: .72rem;
  font-weight: 700;
  color: var(--muted);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: .5rem;
}

.ability-top5-block > ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ability-top5-block > ul > li {
  font-size: .82rem;
  padding: .2rem 0;
  border-bottom: 1px solid rgba(255,255,255,.05);
  color: var(--text);
}

.ability-top5-block > ul > li:last-child { border-bottom: none; }

@media (max-width: 480px) {
  .ability-top5 { grid-template-columns: 1fr; }
  #ability-sub-list .sub-name { width: 5.5rem; }
  .ability-axis-btn { font-size: .72rem; padding: .3rem .6rem; }
}