/* 성장 허브 — 시즌 레인 패널이 모이는 화면. 기존 팔레트(--ink/--gold/--paper)를 그대로 쓴다. */
#screen-growth .panel-body { padding: 0 0 calc(90px + var(--safe-b)); }
.growth-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; padding: 10px 14px; background: var(--ink-2); border-bottom: 2px solid var(--line); }
.growth-tabs::-webkit-scrollbar { display: none; }
.growth-tab { position: relative; flex: 0 0 auto; min-width: 44px; min-height: 44px; padding: 8px 16px; border: 2px solid var(--line); border-radius: 5px; background: var(--ink-3); color: var(--paper-dim); font: 700 14px/1.2 var(--serif); box-shadow: var(--shadow-sm); cursor: pointer; }
.growth-tab[aria-selected="true"] { color: var(--gold-2); border-color: var(--gold); background: var(--ink-4); }
.growth-tab:focus-visible { outline: 2px solid var(--spirit); outline-offset: 2px; }
.growth-badge { position: absolute; top: -6px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; box-sizing: border-box; border-radius: 9px; background: var(--red); color: #fbf3e6; font: 800 11px/18px var(--sans); text-align: center; box-shadow: 0 0 0 2px var(--ink-2); }
.growth-badge[data-dot="true"] { min-width: 12px; width: 12px; height: 12px; padding: 0; top: -3px; right: -3px; }
.growth-panel { padding: 14px; min-height: 40vh; }
.growth-empty { margin: 36px 0; text-align: center; color: var(--paper-dim); font-size: 14px; line-height: 1.6; }
.tab[data-open="growth"][data-badge="true"]::after { content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%; background: var(--red); vertical-align: top; }
.play-menu-card[data-open="growth"][data-badge="true"] { position: relative; }
.play-menu-card[data-open="growth"][data-badge="true"]::after { content: ''; position: absolute; top: 10px; right: 10px; width: 10px; height: 10px; margin: 0; border-radius: 50%; background: var(--red); box-shadow: 0 0 0 2px var(--ink-2); }

/* ───────── 시안 A 맞춤(L6c): 성장 허브 = 어두운 사찰 배경 + 아래 메달 탭 독 ─────────
 * 그림은 Codex CLI로 만든 UI 에셋(assets/img/season/ui, 원본 design/season/ui-codex). 글자는 전부 실제 텍스트.
 * 배경은 허브를 열 때만 불러온다(.open). 탭 아이콘은 CSS 배경이라 JS·마크업은 그대로다. */
#screen-growth { --sg-gold: #e8c077; --sg-jade: #73b3ba; }
#screen-growth.open { background: #070504 url('../assets/img/season/ui/hub-bg.webp') center top / cover no-repeat; }
#screen-growth::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, #050403d9 0, #05040300 22%, #05040300 62%, #050403e6 100%); }
#screen-growth .panel-head { position: absolute; left: 0; right: 0; top: 0; background: linear-gradient(180deg, #050403f2, #05040300); border-bottom: 0; color: var(--paper); justify-content: center; min-height: 64px; padding: calc(10px + var(--safe-t)) 14px 6px; pointer-events: none; }
#screen-growth .panel-head h2 { flex: none; font: 800 24px/1 var(--serif); color: #f3dc9c; letter-spacing: .12em; text-shadow: 0 0 14px #e8c07766, 0 2px 0 #1a1208; display: flex; align-items: center; gap: 10px; }
#screen-growth .panel-head h2::before, #screen-growth .panel-head h2::after { content: ''; width: 30px; height: 10px; background: linear-gradient(90deg, transparent, var(--sg-gold) 55%, transparent); clip-path: polygon(0 50%, 100% 0, 100% 100%); opacity: .8; }
#screen-growth .panel-head h2::before { transform: scaleX(-1); }
#screen-growth .panel-head .btn-icon { position: absolute; right: 12px; top: calc(10px + var(--safe-t)); pointer-events: auto; width: 44px; height: 44px; padding: 0; border-radius: 50%; background: #0d0907e8; border: 2px solid #b98f45; color: #f3dc9c; box-shadow: 0 0 0 2px #05030a, 0 0 12px #e8c07733; }
#screen-growth .panel-body { top: 0; display: flex; flex-direction: column; overflow: hidden; padding: 0; }
#screen-growth .growth-panel { order: 1; flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: calc(60px + var(--safe-t)) 14px 10px; }
#screen-growth .growth-panel:not(:has(.sgear)) { background: linear-gradient(180deg, #050403c4, #050403ee 40%); }
/* 아래 탭 독 */
#screen-growth .growth-tabs { order: 2; flex: none; position: relative; z-index: 3; gap: 0; justify-content: space-between; overflow: visible; padding: 8px 4px calc(6px + var(--safe-b)); background: linear-gradient(180deg, #0a0706f5, #030202); border: 0; border-top: 2px solid #8a6420; box-shadow: 0 -10px 22px #000c, 0 1px 0 #e8c07755 inset; }
#screen-growth .growth-tabs::before { content: ''; position: absolute; left: 50%; top: -9px; width: 64px; height: 10px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, #e8c077 50%, transparent); clip-path: polygon(0 100%, 50% 0, 100% 100%); opacity: .75; }
#screen-growth .growth-tab { flex: 1 1 0; min-width: 44px; min-height: 60px; padding: 2px 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 1px; border: 0; border-radius: 8px; background: none; box-shadow: none; color: #b7a98b; font: 700 11px/1.15 var(--serif); letter-spacing: .02em; }
#screen-growth .growth-tab::before { content: ''; flex: none; width: 44px; height: 44px; background: var(--tab-icon) center / contain no-repeat; filter: brightness(.62) saturate(.8); transition: filter .15s, transform .15s; }
#screen-growth .growth-tab[data-panel="gear"] { --tab-icon: url('../assets/img/season/ui/tab-lotus.webp'); }
#screen-growth .growth-tab[data-panel="taming"] { --tab-icon: url('../assets/img/season/ui/tab-fox.webp'); }
#screen-growth .growth-tab[data-panel="codex"] { --tab-icon: url('../assets/img/season/ui/tab-book.webp'); }
#screen-growth .growth-tab[data-panel="progress"] { --tab-icon: url('../assets/img/season/ui/tab-torii.webp'); }
#screen-growth .growth-tab[data-panel="combat"] { --tab-icon: url('../assets/img/season/ui/tab-swords.webp'); }
#screen-growth .growth-tab[data-panel="shop"] { --tab-icon: url('../assets/img/season/ui/tab-pouch.webp'); }
#screen-growth .growth-tab[aria-selected="true"] { color: #f6dd9c; background-color: #e8c07712; }
#screen-growth .growth-tab[aria-selected="true"]::before { filter: brightness(1.08) drop-shadow(0 0 7px #ffc45a99); transform: translateY(-3px) scale(1.08); }
#screen-growth .growth-tab > span:first-child { text-shadow: 0 1px 2px #000; }
#screen-growth .growth-badge { top: 0; right: calc(50% - 30px); }
#screen-growth .growth-badge[data-dot="true"] { top: 2px; right: calc(50% - 26px); }
@media (max-width: 340px) { #screen-growth .growth-tab { font-size: 10px; } #screen-growth .growth-tab::before { width: 38px; height: 38px; } }
/* 가로 화면: 독을 낮추고 아이콘을 줄인다 */
@media (orientation: landscape) and (max-height: 520px) {
  #screen-growth .panel-head { min-height: 44px; padding-top: 6px; }
  #screen-growth .panel-head h2 { font-size: 18px; }
  #screen-growth .panel-head .btn-icon { top: 4px; }
  #screen-growth .growth-panel { padding-top: 46px; }
  #screen-growth .growth-tabs { padding-top: 4px; padding-bottom: 2px; }
  #screen-growth .growth-tab { min-height: 48px; flex-direction: row; justify-content: center; align-items: center; gap: 4px; font-size: 10.5px; white-space: nowrap; }
  #screen-growth .growth-tab::before { width: 32px; height: 32px; }
  #screen-growth .growth-tab[aria-selected="true"]::before { transform: scale(1.06); }
  #screen-growth .growth-badge { right: 4px; top: 2px; }
}