/* 부화 공방 — 컬렉션 ▸ 🥚 부화 공방 (2026-09-29 · web/hatchery.js 와 짝)
 * 칸 · 격자는 조합 · 부화캡슐 화면의 것을 그대로 쓴다(.craft-pool · .capsule-cell · .craft-go) — 여기는 공방에만 있는 것만. */

/* 컬렉션 세그먼트는 4칸 격자(8개 = 2줄) — 아홉째인 공방은 셋째 줄을 통째로 쓴다. 열린 사람에게만 보인다(hidden). */
.col-seg-btn[data-col="hatchery"]{grid-column:1/-1}
.col-seg-btn[data-col="hatchery"][hidden]{display:none}

.hx-banner{margin:0 0 8px;padding:6px 8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:#e6c46a;border:2px solid var(--line)}
.hx-seg{display:flex;gap:4px;margin:0 0 10px}
.hx-seg-btn{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:7px 2px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;color:var(--muted);background:var(--panel2);border:2px solid var(--line);cursor:pointer}
.hx-seg-btn.active{color:var(--gold);box-shadow:inset 0 -3px 0 var(--gold)}
.hx-seg-n{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}

.hx-tiers{display:grid;gap:4px;margin-bottom:8px}
.hx-tier{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;background:var(--panel2);border:2px solid var(--line)}
.hx-tier.off{opacity:.45}
.hx-tier-to{color:var(--ink)}
.hx-arrow{color:var(--muted)}
.hx-ico{image-rendering:pixelated;vertical-align:middle;flex:0 0 auto}

.rt-common{color:var(--com)} .rt-uncommon{color:var(--unc)} .rt-rare{color:var(--rare)}
.rt-epic{color:var(--epic)} .rt-legendary{color:var(--leg)}

.hx-chip{margin-left:auto;padding:1px 6px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--muted);border:1px solid var(--line);background:var(--panel);white-space:nowrap}
.hx-chip.warn{color:#ffb070;border-color:#8a4a1a}
.hx-filter{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin:6px 0}
.hx-filter .chip{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;padding:4px 7px;border-width:1px}
.hx-mini{font-family:"Galmuri9","Galmuri11",sans-serif;font-size:10px;padding:4px 8px;color:var(--ink);background:var(--panel2);border:2px solid var(--line);cursor:pointer}
.hx-mini.on{color:var(--gold);border-color:var(--gold-lo)}
.hx-mini:disabled{opacity:.45;cursor:not-allowed}
.hx-mini.buy{margin-left:6px}
.hx-need{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);margin-right:2px}

.hx-pool{margin-top:4px}
.hx-pet,.hx-frag{position:relative}
.hx-star{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--gold)}
.hx-have{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:var(--ink);font-variant-numeric:tabular-nums}
.hx-flag{position:absolute;top:2px;left:2px;padding:0 3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:#e6c46a}
.hx-frag.dead .hx-flag{background:#c47a7a;color:#fff}
/* 등급 테두리(조각 · 반납 펫 — 2026-09-29 사용자) — 고른 칸은 테두리 색을 지키고 바깥 금색 고리로 가른다 */
.hx-pool .capsule-cell.picked{box-shadow:0 0 0 2px var(--gold);background:#4a3a1f}
.hx-pool .capsule-cell.rb-common{border-color:var(--com)}
.hx-pool .capsule-cell.rb-uncommon{border-color:var(--unc)}
.hx-pool .capsule-cell.rb-rare{border-color:var(--rare)}
.hx-pool .capsule-cell.rb-epic{border-color:var(--epic)}
.hx-pool .capsule-cell.rb-legendary{border-color:var(--leg)}

.hx-pending{display:flex;align-items:center;gap:6px;margin:0 0 6px;padding:6px 8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#2a1d0c;background:#e6c46a;border:2px solid var(--line)}
.hx-pending .hx-mini{margin-left:auto}
.hx-sum{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin:8px 0 4px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.hx-get{display:inline-flex;align-items:center;gap:4px}

.hx-tabs{display:flex;align-items:center;gap:4px;margin-bottom:6px}
.hx-tab{font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;padding:5px 10px;background:var(--panel2);border:2px solid var(--line);cursor:pointer;color:var(--muted)}
.hx-tab.active{box-shadow:inset 0 -3px 0 var(--gold)}
.hx-tab:disabled{opacity:.45;cursor:not-allowed}
.hx-odds{width:100%;border-collapse:collapse;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin:0 0 6px;background:var(--panel2);border:2px solid var(--line)}
.hx-odds td{padding:4px 8px;color:var(--ink);border-bottom:1px solid var(--line)}
.hx-odds td:last-child{text-align:right;color:var(--gold);font-variant-numeric:tabular-nums;white-space:nowrap}
.hx-frag-any{display:inline-block;width:18px;text-align:center}

.hx-dust{margin:0 0 8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.hx-dust strong{color:var(--gold)}
.hx-shop{display:grid;gap:4px}
.hx-shop-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap;padding:6px 8px;background:var(--panel2);border:2px solid var(--line);font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}
.hx-shop-row.dim{opacity:.6}
.hx-shop-name{flex:1 1 90px;min-width:0}
.hx-cost{color:var(--gold);white-space:nowrap}

.hx-result{margin-top:10px}
.hx-got{display:grid;gap:4px;padding:8px;background:var(--panel);border:2px solid var(--gold-lo)}
.hx-got-row{display:flex;align-items:center;gap:8px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:var(--ink)}
.hx-got-row .hx-mini{margin-left:auto}

/* 가방 ▸ 조각 · 적립 탭 → 공방 링크(열린 사람에게만) */
.hx-link{display:block;width:100%;margin:6px 0 0;padding:7px 8px;font-family:"Galmuri11","Galmuri9",sans-serif;font-size:12px;text-align:left;
  color:var(--ink);background:var(--panel2);border:2px solid var(--line);cursor:pointer}
.hx-link[hidden]{display:none}

@media(max-width:380px){
  .hx-seg-btn{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
  .hx-tier{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}
}