.wrap { max-width: 90%; margin: 0 auto; padding: 14px 16px 40px; }
.top-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-title { font-size: 1.25rem; font-weight: 800; color: var(--text-main); }
.page-sub { font-size: 0.74rem; color: var(--text-dim); }
.market-closed { display: none; font-size: 0.76rem; color: #ffb26a; background: rgba(255,178,106,0.08); border: 1px solid rgba(255,178,106,0.3); border-radius: 8px; padding: 4px 12px; }
.back-btn { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); text-decoration: none; padding: 7px 14px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; background: transparent; }
.back-btn:hover { color: var(--text-main); border-color: var(--border-strong); }
.panel { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; }
.section-gap { margin-top: 14px; }
.section-label { font-size: 0.78rem; font-weight: 700; color: var(--text-sub); margin: 14px 0 8px; }
.modal p { white-space: pre-line; }

.feed-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 8px 14px; margin: 12px 0; }
.feed-line { display: flex; gap: 8px; align-items: baseline; font-size: 0.76rem; padding: 2px 0; overflow: hidden; white-space: nowrap; }
.feed-line .f-nick { color: var(--text-sub); font-weight: 700; flex-shrink: 0; }
.feed-line .f-text { color: var(--text-dim); overflow: hidden; text-overflow: ellipsis; }

.login-box { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; text-align: center; margin: 14px 0; }
.login-box h3 { font-size: 1rem; color: var(--text-main); margin: 0 0 8px; }
.login-box p { font-size: 0.82rem; color: var(--text-dim); line-height: 1.7; margin: 0 0 14px; }
.join-row { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.big-btn { background: var(--brand); border: 1px solid var(--brand); border-radius: 10px; color: var(--brand-ink); font-size: 0.88rem; font-weight: 800; padding: 11px 26px; cursor: pointer; }
.big-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.mini-btn { background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-sub); font-size: 0.74rem; padding: 6px 12px; cursor: pointer; }
.mini-btn:hover:not(:disabled) { color: var(--text-main); border-color: var(--brand); }
.mini-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.mini-btn.gold { background: var(--brand); border-color: var(--brand); color: var(--brand-ink); font-weight: 800; }
.mini-btn.danger { border-color: rgba(255,120,120,0.45); color: #ff9a9a; }
input.txt, select.sel { background: var(--bg-input); border: 1px solid var(--border); border-radius: 8px; color: var(--text-main); padding: 8px 12px; font-size: 0.82rem; }

/* 날씨·계절 띠 */
.weather-bar { display: none; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0; padding: 10px 14px; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid #6aa8ff; border-radius: 10px; }
.weather-bar.show { display: flex; }
.wb-now { font-size: 0.86rem; font-weight: 800; color: var(--text-main); }
.wb-desc { font-size: 0.74rem; color: var(--text-dim); }
.wb-fore { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.wb-slot { font-size: 0.68rem; color: var(--text-dim); border: 1px solid var(--border); border-radius: 8px; padding: 3px 8px; white-space: nowrap; }
.wb-slot b { color: var(--text-sub); font-weight: 700; }

/* 일일 과제 */
.task-bar { display: none; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 12px 0; }
.task-bar.show { display: flex; }
.task-card { flex: 1; min-width: 210px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.task-card.done { border-color: rgba(110,231,168,0.45); }
.task-card.claimed { opacity: 0.55; }
.tc-head { display: flex; align-items: baseline; gap: 6px; }
.tc-title { font-size: 0.8rem; font-weight: 800; color: var(--text-main); }
.tc-reward { margin-left: auto; font-size: 0.68rem; color: var(--brand); white-space: nowrap; }
.tc-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 3px; }
.tc-gauge { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 6px; }
.tc-gauge > span { display: block; height: 100%; background: var(--brand); }
.tc-gauge.full > span { background: #6ee7a8; }
/* 진행도와 보상 버튼을 한 줄에 — 휴대폰에서 과제 카드 세 장이 화면을 너무 많이 차지하던 것 */
.tc-foot { margin-top: 6px; display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tc-foot .tc-sub { margin-top: 0; }

.sum-bar { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.sum-card { flex: 1; min-width: 122px; background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; }
.sum-card .sc-label { font-size: 0.68rem; color: var(--text-dim); }
.sum-card .sc-value { font-size: 1rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; margin-top: 2px; }
.sum-card .sc-note { font-size: 0.64rem; color: var(--text-dim); margin-top: 2px; }
.sum-card.good .sc-value { color: #6ee7a8; }
.sum-card.bad .sc-value { color: #ff9a9a; }

/* 탭은 공용 .tab-bar/.tab-btn 모양을 그대로 쓰고 간격만 이 페이지에 맞춘다 */
.wrap > .tab-bar { gap: 6px; margin: 14px 0 12px; }

/* 정산 알림 */
.settle-box { display: none; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid #6ee7a8; border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.settle-box.show { display: block; }
.settle-box.loss { border-left-color: #ff9a9a; }
.settle-title { font-size: 0.86rem; font-weight: 700; color: var(--text-main); margin-bottom: 6px; }
.settle-grid { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 0.76rem; color: var(--text-sub); }
.settle-grid b { color: var(--text-main); font-variant-numeric: tabular-nums; }

/* 동물 카드 */
.animal-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
/* 태블릿(641~1024)도 두 줄 — 한 줄이면 820px에서 카드가 가로로 늘어나 빈 곳만 넓어졌다 */
@media (max-width: 640px) { .animal-grid { grid-template-columns: 1fr; } }
.animal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.animal-card.sick { border-color: rgba(255,120,120,0.4); }
.ac-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ac-name { font-size: 0.92rem; font-weight: 800; color: var(--text-main); }
.ac-gen { font-size: 0.66rem; color: var(--text-dim); }
.ac-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; line-height: 1.6; }
.rarity-chip { font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid; }
.rarity-chip.normal { color: #9aa; border-color: rgba(153,170,170,0.4); }
.rarity-chip.rare { color: #6aa8ff; border-color: rgba(106,168,255,0.45); }
.rarity-chip.epic { color: #c58cff; border-color: rgba(197,140,255,0.45); }
.rarity-chip.legendary { color: #ffd76a; border-color: rgba(255,215,106,0.5); }
.state-chip { font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid rgba(255,255,255,0.18); color: var(--text-dim); }
.state-chip.warn { color: #ffb26a; border-color: rgba(255,178,106,0.45); }
.state-chip.bad { color: #ff9a9a; border-color: rgba(255,154,154,0.45); }
.state-chip.ok { color: #6ee7a8; border-color: rgba(110,231,168,0.45); }
.morph-chip { font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid rgba(255,215,106,0.5); color: #ffd76a; }
.trait-chip { font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid rgba(106,168,255,0.45); color: #6aa8ff; cursor: help; }
/* 성별 — 표기 전용 (2026-09-21 시청자 문의) */
.sex-chip { font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid; white-space: nowrap; }
.sex-chip.female { color: #ff9ec4; border-color: rgba(255,158,196,0.45); }
.sex-chip.male { color: #7fc4ff; border-color: rgba(127,196,255,0.45); }
.sex-mark { font-size: 0.78rem; font-weight: 900; line-height: 1; }
.sex-mark.female { color: #ff9ec4; }
.sex-mark.male { color: #7fc4ff; }
/* 지금 사는 사육장 — 누르면 그 사육장 동물만 모아 본다 (2026-09-18 시청자 문의) */
.enc-chip { display: inline-flex; align-items: center; gap: 4px; max-width: 150px; font-size: 0.62rem; font-weight: 800; border-radius: 5px; padding: 1px 6px; border: 1px solid rgba(255,255,255,0.3); background: rgba(255,255,255,0.07); color: var(--text-sub); cursor: pointer; }
.enc-chip:hover { border-color: var(--brand); color: var(--text-main); }
.enc-chip .ec-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.enc-chip.none { color: #ff9a9a; border-color: rgba(255,154,154,0.45); cursor: default; }
/* 사육장별로 묶어 볼 때의 구분 머리글 */
.enc-group { grid-column: 1 / -1; display: flex; align-items: center; gap: 6px; margin: 4px 2px 0; font-size: 0.74rem; font-weight: 800; color: var(--text-sub); border-top: 1px solid rgba(255,255,255,0.1); padding-top: 8px; }
.enc-group:first-child { border-top: 0; padding-top: 0; }
.enc-group .eg-sub { font-size: 0.66rem; font-weight: 700; color: var(--text-dim); }

/* 동물 목록 정렬·필터 */
.filter-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 10px; }
.filter-row .sel, .filter-row .txt { padding: 6px 10px; font-size: 0.76rem; max-width: 100%; }
.filter-row .f-count { font-size: 0.68rem; color: var(--text-dim); margin-left: auto; }
.filter-row .f-label { font-size: 0.7rem; font-weight: 700; color: var(--text-dim); display: inline-flex; align-items: center; gap: 4px; }
#animal-search { width: 150px; }

/* 보전 프로그램 */
.conserv-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.conserv-now { font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
.conserv-sub { font-size: 0.72rem; color: var(--text-dim); }
.conserv-gauge { height: 8px; border-radius: 5px; background: rgba(255,255,255,0.06); overflow: hidden; margin: 8px 0 6px; }
.conserv-gauge > span { display: block; height: 100%; background: #6ee7a8; }
.tier-list { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.tier-pip { font-size: 0.66rem; border: 1px solid var(--border); border-radius: 8px; padding: 3px 9px; color: var(--text-dim); }
.tier-pip.on { color: #6ee7a8; border-color: rgba(110,231,168,0.5); font-weight: 700; }

/* 공용 선택 모달 (사육장 이동·사육장 상세) */
.pick-overlay { display: none; position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.7); align-items: center; justify-content: center; padding: 20px; }
.pick-overlay.open { display: flex; }
.pick-box { background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px; width: min(560px, 100%); max-height: 80vh; overflow-y: auto; }
.pick-box h3 { margin: 0 0 6px; font-size: 0.96rem; color: var(--text-main); display: flex; align-items: center; gap: 8px; }
.pick-box .pk-close { margin-left: auto; font-size: 0.74rem; padding: 4px 10px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; }
.pick-box .pk-sub { font-size: 0.76rem; color: var(--text-dim); margin-bottom: 12px; line-height: 1.6; }
.pick-item { width: 100%; text-align: left; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 6px; cursor: pointer; color: var(--text-sub); }
.pick-item:hover:not(:disabled) { border-color: var(--brand); color: var(--text-main); }
.pick-item:disabled { opacity: 0.4; cursor: not-allowed; }
.pick-item .pi-title { font-size: 0.84rem; font-weight: 700; color: var(--text-main); }
.pick-item .pi-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
.pick-item.cur { border-color: var(--brand); }
.stat-rows { margin-top: 8px; display: flex; flex-direction: column; gap: 5px; }
.stat-row { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: var(--text-sub); }
.stat-row .sr-label { width: 50px; flex-shrink: 0; color: var(--text-dim); display: inline-flex; align-items: center; gap: 3px; white-space: nowrap; }
.stat-row .sr-bar { flex: 1; height: 7px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.stat-row .sr-fill { display: block; height: 100%; background: var(--brand); border-radius: 4px; }
.stat-row .sr-num { width: 60px; text-align: right; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.stat-row.capped .sr-fill { background: #6ee7a8; }
.gauge { height: 6px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; margin-top: 6px; }
.gauge > span { display: block; height: 100%; }
.gauge.stress > span { background: #ffb26a; }
.gauge.hyg > span { background: #6aa8ff; }
.ac-actions { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 10px; }
.care-note { font-size: 0.7rem; color: var(--brand); margin-top: 6px; }

/* 지도 */
.map-wrap { overflow-x: auto; padding-bottom: 6px; --map-cell: 82px; --map-row: 80px; }
.map-grid { display: grid; grid-template-columns: repeat(var(--map-cols, 12), var(--map-cell)); grid-auto-rows: var(--map-row); gap: 5px; width: max-content; }
.map-cell { border: 1px dashed rgba(255,255,255,0.08); border-radius: 8px; background: rgba(255,255,255,0.015); }
.map-cell.drop { border-color: var(--brand); background: rgba(242,201,76,0.08); }
.map-tile { border-radius: 8px; padding: 5px 6px; cursor: grab; border: 1px solid var(--border-strong); display: flex; flex-direction: column; justify-content: center; gap: 2px; overflow: hidden; }
/* 배치 옮기기 모드 (터치 전용 경로 — 눌러서 고르고, 눌러서 놓기) */
.map-tools { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.map-move-hint { font-size: 0.7rem; color: var(--text-dim); }
.map-move-hint.on { color: var(--brand); font-weight: 700; }
.map-grid.moving .map-tile, .map-grid.moving .map-cell { cursor: pointer; }
.map-grid.moving.picked .map-cell { border-style: solid; border-color: rgba(242,201,76,0.35); background: rgba(242,201,76,0.05); }
.map-tile.picked { outline: 2px solid var(--brand); outline-offset: -1px; box-shadow: 0 0 0 3px rgba(242,201,76,0.18); }
/* 추천 배치 미리보기 — 옮겨질 건물만 점선으로 표시 */
.map-tile.moved { outline: 2px dashed #6ee7a8; outline-offset: -1px; }
.map-suggest { border: 1px solid var(--border-strong); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: rgba(110,231,168,0.05); }
.map-suggest .ms-title { font-size: 0.78rem; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.map-suggest .ms-rows { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 0.72rem; color: var(--text-dim); }
.map-suggest .ms-rows b { color: var(--text-main); }
.map-suggest .ms-up { color: #6ee7a8; font-weight: 800; }
.map-suggest .ms-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.map-suggest .ms-note { font-size: 0.68rem; color: var(--text-dim); margin-top: 6px; }
.map-tile .mt-name { font-size: 0.66rem; font-weight: 800; color: var(--text-main); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 20px; }
.map-tile .mt-sub { font-size: 0.6rem; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.map-tile .mt-eff { font-size: 0.58rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; gap: 4px; }
.map-tile .mt-up { color: #6ee7a8; font-weight: 800; }
.map-tile .mt-perk { color: var(--text-dim); }
.map-tile .mt-bad { color: #ff9a9a; font-weight: 800; }
.map-tile.biome-savanna { background: rgba(224,178,84,0.16); }
.map-tile.biome-jungle { background: rgba(96,186,120,0.16); }
.map-tile.biome-polar { background: rgba(140,200,240,0.16); }
.map-tile.biome-desert { background: rgba(232,182,120,0.16); }
.map-tile.biome-wetland { background: rgba(110,170,220,0.16); }
.map-tile.biome-forest { background: rgba(120,180,140,0.16); }
.map-tile.facility { background: rgba(200,160,255,0.14); }
.map-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.7rem; color: var(--text-dim); margin: 8px 0; }
.map-legend span { display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 700px) {
    .map-wrap { --map-cell: 70px; --map-row: 74px; }
    .map-tile { padding: 4px 5px; }
    .map-tile .mt-name { font-size: 0.62rem; }
    .map-tile .mt-sub, .map-tile .mt-eff { font-size: 0.55rem; }
}

/* 목록형 카드 */
.row-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 14px; margin-bottom: 8px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.row-card .rc-title { font-size: 0.84rem; font-weight: 700; color: var(--text-main); }
.row-card .rc-sub { font-size: 0.72rem; color: var(--text-dim); }
.row-card .rc-right { margin-left: auto; display: flex; gap: 5px; flex-wrap: wrap; align-items: center; }
/* 사육장 공사 할인의 날 (2026-10-12) — 아닌 날은 다음 날짜만 작게, 할인 날은 띠로 */
.build-sale { display: none; font-size: 0.68rem; color: var(--text-dim); }
.build-sale.show { display: block; }
.build-sale.on { font-size: 0.76rem; color: var(--text-main); background: var(--brand-tint); border: 1px solid rgba(var(--brand-rgb), 0.35); border-left: 3px solid var(--brand); border-radius: 8px; padding: 7px 12px; }
.build-sale.on b { color: var(--brand); }
.cost-full { opacity: 0.6; margin-right: 2px; }

.show-card { border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); padding: 14px 16px; margin-bottom: 12px; }
.show-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.show-title { font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
.show-meta { font-size: 0.72rem; color: var(--text-dim); }
.show-enter { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
/* 출연 목록에서 빠진 동물 안내 — 교감 결과 일괄 확인 버튼이 글 뒤에 붙는다 (2026-09-30) */
.show-miss { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.entry-line { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-sub); padding: 5px 0; border-bottom: 1px solid rgba(255,255,255,0.04); flex-wrap: wrap; }
.entry-line:last-child { border-bottom: 0; }
.entry-line .el-no { width: 20px; color: var(--text-dim); font-size: 0.7rem; flex-shrink: 0; }
.entry-line .el-owner { color: var(--text-dim); font-size: 0.7rem; }
.entry-line .el-total { margin-left: auto; font-variant-numeric: tabular-nums; }
.entry-line.mine { color: var(--brand); font-weight: 700; }
.result-row { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; padding: 4px 0; flex-wrap: wrap; }
.result-row .rr-rank { width: 32px; font-weight: 800; color: var(--text-dim); flex-shrink: 0; }
.result-row.top1 .rr-rank { color: #ffd76a; }
.seg-line { font-size: 0.7rem; color: var(--text-dim); padding: 2px 0; }

.data-table { width: 100%; border-collapse: collapse; }
.data-table th { font-size: 0.74rem; color: var(--text-dim); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border); white-space: nowrap; }
.data-table td { font-size: 0.8rem; color: var(--text-sub); padding: 8px 10px; border-bottom: 1px solid rgba(255,255,255,0.04); font-variant-numeric: tabular-nums; white-space: nowrap; }
.data-table tr.rank-1 td { color: #ffd76a; }
.data-table td.pos { color: #6ee7a8; }
.data-table td.neg { color: #ff9a9a; }
.data-table td.empty-state { white-space: normal; }
.table-wrap { overflow-x: auto; }

/* 도감 */
.codex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.codex-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.codex-card.none { opacity: 0.5; }
.codex-name { font-size: 0.82rem; font-weight: 700; color: var(--text-main); }
.codex-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; line-height: 1.5; }
.codex-grades { display: flex; gap: 4px; margin-top: 6px; flex-wrap: wrap; }
.codex-pip { font-size: 0.6rem; font-weight: 800; border-radius: 4px; padding: 1px 5px; border: 1px solid rgba(255,255,255,0.12); color: #555; }
.codex-pip.got.normal { color: #9aa; border-color: rgba(153,170,170,0.5); }
.codex-pip.got.rare { color: #6aa8ff; border-color: rgba(106,168,255,0.5); }
.codex-pip.got.epic { color: #c58cff; border-color: rgba(197,140,255,0.5); }
.codex-pip.got.legendary { color: #ffd76a; border-color: rgba(255,215,106,0.55); }

.guide-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; margin-bottom: 12px; }
.guide-card h3 { font-size: 0.92rem; color: var(--brand); margin: 0 0 8px; }
.guide-card p, .guide-card li { font-size: 0.8rem; color: var(--text-sub); line-height: 1.8; }
.guide-card ul { margin: 0; padding-left: 18px; }
.guide-card b { color: var(--text-main); }

.quickstart { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 10px; padding: 14px 16px; margin-bottom: 14px; }
.qs-title { font-size: 0.86rem; font-weight: 700; color: var(--text-main); margin-bottom: 10px; }
.qs-step { display: flex; gap: 10px; align-items: baseline; font-size: 0.82rem; color: var(--text-sub); line-height: 1.6; margin-bottom: 6px; }
.qs-step > b:first-child { color: var(--brand); flex-shrink: 0; }
.qs-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.qs-btn { background: transparent; border: 1px solid var(--border-strong); border-radius: 8px; color: var(--text-sub); font-size: 0.74rem; padding: 6px 12px; cursor: pointer; }


.season-badge { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 8px; font-size: 0.66rem; font-weight: 700; background: rgba(255,215,106,0.14); color: #ffd76a; border: 1px solid rgba(255,215,106,0.35); vertical-align: middle; white-space: nowrap; }

/* SVG 아트 (2026-09-18 대형 고도화) - public/img/zoo/<분류>/<이름>.png (생성기 scratchpad/zoo-icons-gen.js) */
.z-ico { width: 18px; height: 18px; vertical-align: -3px; flex-shrink: 0; }
.z-ico.sm { width: 14px; height: 14px; vertical-align: -2px; }
.z-ico.xs { width: 12px; height: 12px; vertical-align: -2px; }
.z-ico.md { width: 22px; height: 22px; vertical-align: -5px; }
.z-ico.lg { width: 30px; height: 30px; vertical-align: -8px; }
.tab-btn .z-ico { margin-right: 5px; }
.sc-label .z-ico, .section-label .z-ico, .guide-card h3 .z-ico, .tc-title .z-ico { margin-right: 5px; }
.section-label, .guide-card h3 { display: flex; align-items: center; }
/* 변이는 같은 그림을 색만 바꿔 보여 준다 (설백/흑요/황금) */
img.morph-albino { filter: grayscale(0.82) brightness(1.3) contrast(0.95); }
img.morph-melanistic { filter: grayscale(0.62) brightness(0.78) contrast(1.12); }
img.morph-golden { filter: sepia(0.8) saturate(1.7) hue-rotate(-6deg) brightness(1.2); }

/* 동물 카드 - 초상 + 정보 2단 */
.ac-top { display: flex; gap: 12px; align-items: flex-start; }
.ac-body { flex: 1; min-width: 0; }
.ac-photo { position: relative; flex-shrink: 0; width: 78px; height: 78px; border-radius: 16px; border: 2px solid rgba(255,255,255,0.14); background: rgba(0,0,0,0.22); padding: 0; cursor: pointer; }
.ac-photo img.pt { width: 100%; height: 100%; display: block; border-radius: 14px; }
.ac-photo.r-normal { border-color: rgba(153,170,170,0.5); }
.ac-photo.r-rare { border-color: rgba(106,168,255,0.6); }
.ac-photo.r-epic { border-color: rgba(197,140,255,0.6); }
.ac-photo.r-legendary { border-color: rgba(255,215,106,0.7); box-shadow: 0 0 10px rgba(255,215,106,0.22); }
.ac-photo:hover { border-color: var(--brand); }
.ac-photo .pt-badge { position: absolute; right: -7px; top: -7px; width: 22px; height: 22px; }
.ac-photo .pt-sick { position: absolute; right: -7px; bottom: -7px; width: 20px; height: 20px; }
.ac-photo .pt-gen { position: absolute; left: -5px; bottom: -7px; font-size: 0.56rem; font-weight: 800; color: var(--text-sub); background: var(--bg-card); border: 1px solid var(--border); border-radius: 6px; padding: 0 4px; line-height: 1.5; }

/* 오늘 할 일 */
.todo-box { display: none; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.todo-box.show { display: block; }
.todo-title { display: flex; align-items: center; gap: 6px; font-size: 0.84rem; font-weight: 800; color: var(--text-main); margin-bottom: 8px; }
.todo-list { display: flex; flex-wrap: wrap; gap: 6px; }
.todo-item { display: inline-flex; align-items: center; gap: 5px; font-size: 0.74rem; color: var(--text-sub); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.todo-item:hover { color: var(--text-main); border-color: var(--brand); }
.todo-item.urgent { border-color: rgba(255,154,154,0.5); color: #ff9a9a; }
.todo-item.warn { border-color: rgba(255,178,106,0.45); color: #ffb26a; }
.todo-item.good { border-color: rgba(110,231,168,0.45); color: #6ee7a8; }
.todo-empty { font-size: 0.76rem; color: var(--text-dim); }

/* 관람객 반응 */
.voice-list { display: flex; flex-direction: column; gap: 7px; }
.voice-line { display: flex; gap: 8px; align-items: flex-start; font-size: 0.78rem; color: var(--text-sub); line-height: 1.6; }
.voice-line img { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; }
.voice-line.bad { color: #ffb26a; }
.voice-line.good { color: #6ee7a8; }

/* 상세 모달 */
.detail-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 12px; }
.detail-photo { width: 104px; height: 104px; border-radius: 20px; border: 2px solid var(--border-strong); flex-shrink: 0; background: rgba(0,0,0,0.22); }
.detail-side { flex: 1; min-width: 0; }
.detail-chips { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 6px; }
.detail-line { font-size: 0.76rem; color: var(--text-dim); line-height: 1.7; }
.detail-line b { color: var(--text-sub); }

/* 도감 */
.codex-card { display: flex; gap: 10px; align-items: flex-start; }
.codex-art { width: 58px; height: 58px; border-radius: 13px; flex-shrink: 0; background: rgba(0,0,0,0.22); }
.codex-card.none .codex-art { filter: grayscale(1) brightness(0.3); }
.codex-body { flex: 1; min-width: 0; }

/* 지도 타일 아이콘 */
.map-tile { position: relative; }
.map-tile .mt-bio { position: absolute; right: 3px; top: 3px; width: 19px; height: 19px; opacity: 0.6; pointer-events: none; }
.map-tile .mt-pets { display: flex; gap: 1px; margin-top: 1px; }
.map-tile .mt-pets img { width: 16px; height: 16px; border-radius: 4px; }
.map-tile .mt-pets span { font-size: 0.55rem; color: var(--text-dim); align-self: center; margin-left: 2px; }
.wb-ico { width: 32px; height: 32px; vertical-align: -9px; margin-right: 2px; }
.wb-slot img { width: 15px; height: 15px; vertical-align: -3px; margin-right: 3px; }
img.el-ico { width: 20px; height: 20px; border-radius: 6px; flex-shrink: 0; }
.row-card .rc-ico { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
/* 목록 카드의 글 칸은 그림 옆에 붙어 남는 폭을 쓴다 — 휴대폰에서 그림만 한 줄을 차지하던 것 */
.row-card > div:not(.rc-right) { flex: 1 1 200px; min-width: 0; }
/* 번식 확률 상자 (2026-10-01) — 고른 두 마리의 새끼가 어떻게 나올지. 글줄은 상세 창의 .detail-line을 쓴다 */
.breed-odds { display: none; margin-top: 10px; padding: 10px 14px; background: rgba(255,255,255,0.03); border: 1px solid var(--border); border-left: 3px solid #6aa8ff; border-radius: 10px; }
.breed-odds.show { display: block; }
.breed-odds .bo-title { font-size: 0.8rem; font-weight: 800; color: var(--text-main); margin-bottom: 2px; }

/* 2026-09-24 페이지 고도화 — 버튼·안내 공통 */
.mini-btn, .big-btn, .qs-btn, .todo-item, .pick-item, .enc-chip, .ac-photo, .back-btn,
.hbs-bar .hbs-open, .season-box .sx-close, .pick-box .pk-close, .chat-close, .chat-send, .chat-fab { font-family: inherit; }
.map-scroll-hint { display: none; font-size: 0.72rem; color: var(--text-dim); margin: 0 0 6px; }
.map-scroll-hint.show { display: block; }
/* 랭킹 — 동물원 이름을 닉네임 아래로 모아 기준(누적 수익)이 휴대폰에서도 바로 보이게 */
.data-table td.rk-name > span { display: block; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.data-table td.rk-name .rk-zoo { font-size: 0.7rem; color: var(--text-dim); margin-top: 1px; }
/* 탐사·교환 (2026-10-02) — 새 색은 토큰만 */
.ex-head { font-size: 0.74rem; color: var(--text-dim); line-height: 1.7; margin: 0 0 10px; }
.ex-head b { color: var(--text-main); }
.ex-sub { font-size: 0.72rem; font-weight: 700; color: var(--text-sub); margin: 12px 0 6px; }
.ex-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.ex-chip { display: inline-flex; align-items: center; gap: 5px; font-family: inherit; font-size: 0.74rem; color: var(--text-sub); background: transparent; border: 1px solid var(--border-strong); border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.ex-chip:hover { color: var(--text-main); border-color: var(--brand); }
.ex-chip.on { color: var(--text-main); border-color: var(--brand); background: var(--brand-tint); font-weight: 700; }
.ex-chip .ex-tag { font-size: 0.6rem; font-weight: 800; color: var(--ok); }
.ex-plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.ex-plan { text-align: left; font-family: inherit; background: transparent; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; cursor: pointer; color: var(--text-sub); min-width: 0; }
.ex-plan:hover { border-color: var(--brand); }
.ex-plan.on { border-color: var(--brand); background: var(--brand-tint); }
.ex-plan.locked { opacity: 0.6; }
.ex-plan .ep-title { font-size: 0.82rem; font-weight: 800; color: var(--text-main); }
.ex-plan .ep-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 3px; line-height: 1.55; }
.ex-plan .ep-lock { font-size: 0.66rem; color: var(--warn); margin-top: 4px; line-height: 1.5; }
.ex-odds { font-size: 0.7rem; color: var(--text-dim); line-height: 1.7; margin-top: 8px; }
.ex-odds b { color: var(--text-sub); }
.ex-go { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 12px; }
.ex-note { font-size: 0.7rem; color: var(--text-dim); line-height: 1.6; }
.ex-card { border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: 10px; padding: 12px 14px; background: rgba(var(--fg-rgb), 0.02); }
.ex-card.ready { border-left-color: var(--ok); }
.ex-card .ec-top { display: flex; gap: 12px; align-items: flex-start; }
.ex-card .ec-photo { width: 78px; height: 78px; border-radius: 16px; flex-shrink: 0; background: rgba(0,0,0,0.22); }
.ex-card .ec-body { flex: 1; min-width: 0; }
.ex-card .ec-title { font-size: 0.88rem; font-weight: 800; color: var(--text-main); }
.ex-card .ec-log { font-size: 0.74rem; color: var(--text-sub); line-height: 1.75; margin-top: 6px; }
.ex-card .ec-actions { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.ex-hist { margin-top: 12px; }
.trade-row { padding: 10px 0; border-top: 1px solid rgba(var(--fg-rgb), 0.06); }
.trade-row.first { border-top: 0; padding-top: 8px; }
.trade-row .tr-want { font-size: 0.76rem; color: var(--text-sub); display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.trade-row .tr-want b { color: var(--text-main); }
.trade-row .tr-give { margin-top: 4px; }
.trade-row .tr-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.trade-row .tr-act select.sel { max-width: 100%; min-width: 0; padding: 6px 10px; font-size: 0.76rem; }
.trade-row .tr-why { font-size: 0.7rem; color: var(--text-dim); line-height: 1.6; }
.state-chip.npc { color: var(--info-soft); border-color: rgba(var(--info-rgb), 0.45); }
@media (max-width: 1024px) { .ex-plans { grid-template-columns: 1fr; } }
@media (max-width: 640px) {
    .trade-row .tr-act select.sel { flex: 1 1 100%; width: 100%; }
    .ex-card .ec-photo { width: 64px; height: 64px; }
}
/* 2026-10-08 고도화 — 개장 길잡이·훈련 시간·아끼는 동물·자리 정리·알맞은 입장료 (새 색은 토큰만) */
.guide-box { display: none; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 10px; padding: 12px 16px; margin: 12px 0; }
.guide-box.show { display: block; }
.gb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.84rem; font-weight: 800; color: var(--text-main); }
.gb-head .gb-count { font-size: 0.72rem; font-weight: 700; color: var(--text-dim); }
.gb-head .gb-btns { margin-left: auto; display: flex; gap: 6px; flex-wrap: wrap; }
.gb-next { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 0.8rem; color: var(--text-sub); line-height: 1.6; }
.gb-next b { color: var(--text-main); }
.gb-desc { font-size: 0.72rem; color: var(--text-dim); line-height: 1.6; margin-top: 2px; }
.gb-reward { font-size: 0.72rem; font-weight: 700; color: var(--brand); white-space: nowrap; }
.gb-gauge { height: 6px; border-radius: 4px; background: rgba(var(--fg-rgb), 0.06); overflow: hidden; margin-top: 6px; }
.gb-gauge > span { display: block; height: 100%; background: var(--brand); }
.gb-list { margin-top: 10px; border-top: 1px solid var(--border); padding-top: 8px; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 4px 14px; }
.gb-row { display: flex; gap: 8px; align-items: center; font-size: 0.74rem; color: var(--text-sub); padding: 3px 0; min-width: 0; }
.gb-row .gb-mark { width: 16px; flex-shrink: 0; text-align: center; font-weight: 900; color: var(--text-dim); }
.gb-row.done .gb-mark { color: var(--ok); }
.gb-row.claimed { color: var(--text-dim); }
.gb-row .gb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gb-row .gb-tail { font-size: 0.68rem; color: var(--text-dim); white-space: nowrap; }
.fav-btn { background: transparent; border: 1px solid var(--border-strong); border-radius: 6px; color: var(--text-dim); font-family: inherit; font-size: 0.8rem; line-height: 1; padding: 2px 6px; cursor: pointer; }
.fav-btn.on { color: var(--brand); border-color: var(--brand); }
.fav-btn:hover { color: var(--brand); }
.ac-actions .ac-gap { flex: 1 1 auto; }
.price-box { display: none; margin-top: 10px; padding: 10px 14px; border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: 10px; background: rgba(var(--fg-rgb), 0.02); }
.price-box.show { display: block; }
.price-box .pb-line { font-size: 0.78rem; color: var(--text-sub); line-height: 1.7; }
.price-box .pb-line b { color: var(--text-main); }
.price-box .pb-up { color: var(--ok); font-weight: 800; }
.price-box .pb-rows { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 6px; font-size: 0.68rem; color: var(--text-dim); }
.price-box .pb-rows span.on { color: var(--text-main); font-weight: 700; }
.price-box .pb-act { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.arr-row { display: flex; gap: 8px; align-items: center; font-size: 0.76rem; color: var(--text-sub); padding: 5px 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.05); flex-wrap: wrap; }
.arr-row:last-child { border-bottom: 0; }
.arr-row .arr-why { font-size: 0.66rem; color: var(--text-dim); }
.fold-more { background: transparent; border: 0; padding: 2px 0; color: var(--text-dim); font-family: inherit; font-size: 0.7rem; cursor: pointer; text-decoration: underline; }
.fold-more:hover { color: var(--text-main); }
details.fac-max { margin-top: 4px; }
details.fac-max > summary { cursor: pointer; font-size: 0.74rem; color: var(--text-dim); padding: 6px 2px; }
details.fac-max[open] > summary { margin-bottom: 6px; }
/* 지도 사육장·시설 창 — 긴 효과 칩이 창 밖으로 넘치지 않게 */
#pick-body .state-chip { display: inline-block; max-width: 100%; white-space: normal; line-height: 1.5; margin: 2px 0; }
/* 받은 과제는 한 줄로 */
.task-card.claimed .tc-desc, .task-card.claimed .tc-gauge { display: none; }
/* 요약 카드 — 남는 한 장이 혼자 한 줄을 다 차지하지 않게 */
.sum-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
/* 탭 줄은 화면 위에 붙여 둔다 — 긴 동물 목록에서도 바로 다른 탭으로 */
.wrap > .tab-bar { position: sticky; top: calc(var(--banner-h, 0px) + var(--topbar-h, 0px)); z-index: 40; background: var(--bg-base); padding: 6px 0; }
/* 휴대폰: 좌우 여백을 줄여 화면을 넓게 쓴다 (공용 기준 ≤640px) */
@media (max-width: 640px) {
    .wrap { max-width: 100%; padding: 12px 12px 40px; }
    .page-title { font-size: 1.12rem; }
    .filter-row .sel, .filter-row .txt { flex: 1 1 140px; min-width: 0; }
    #animal-search { width: auto; flex-basis: 100%; }
    #breed-sort, #breed-p1, #breed-p2 { flex: 1 1 100%; min-width: 0; }
    /* 공연 출연 고르기 칸 — 긴 이름·예상 점수 줄에 밀려 화면이 옆으로 넘치지 않게 (390폭 실측 443px로 밀리던 것) */
    .show-enter { flex: 1 1 100%; min-width: 0; margin-left: 0; }
    .show-enter select.sel { flex: 1 1 0; width: 100%; min-width: 0; max-width: 100%; }
    .sum-card .sc-note { font-size: 0.68rem; }
    .pick-overlay, .hbs-overlay { padding: 12px; }
    .pick-box, .season-box { padding: 14px; max-height: 86vh; }
    .detail-photo { width: 84px; height: 84px; }
    /* 탭 10개를 한 줄로 밀어 보기 — 세 줄(114px)이 화면을 덮던 것 */
    .wrap > .tab-bar { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
    .wrap > .tab-bar::-webkit-scrollbar { display: none; }
    .wrap > .tab-bar .tab-btn { flex: 0 0 auto; white-space: nowrap; }
    .sum-bar { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .sum-card { padding: 8px 10px; min-width: 0; }
    .sum-card .sc-value { font-size: 0.92rem; overflow-wrap: anywhere; }
    .gb-list { grid-template-columns: 1fr; }
}
/* 터치 화면: 작은 버튼도 손가락으로 누르기 쉽게 */
@media (pointer: coarse) {
    .mini-btn, .todo-item, .qs-btn, .hbs-bar .hbs-open, .season-box .sx-close, .pick-box .pk-close, .chat-close, .chat-send { min-height: 34px; }
}
/* 2026-10-20 고도화 — 특별전·오늘의 소식·응원·배지·후원·공동 목표·이번 주 순위·동물원 구경 (새 색은 토큰만) */
.wb-feat { display: none; font-size: 0.7rem; color: var(--text-sub); border: 1px solid rgba(var(--brand-rgb), 0.45); background: var(--brand-tint); border-radius: 8px; padding: 3px 9px; white-space: nowrap; }
.wb-feat.show { display: inline-flex; align-items: center; gap: 4px; }
.wb-feat b { color: var(--brand); }
.event-box { display: none; background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--info); border-radius: 10px; padding: 10px 16px; margin: 12px 0; }
.event-box.show { display: block; }
.event-box .ev-title { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 0.82rem; font-weight: 800; color: var(--text-main); }
.event-box .ev-title .ev-tag { font-size: 0.66rem; font-weight: 700; color: var(--text-dim); }
.event-box .ev-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.event-box .ev-done { font-size: 0.74rem; color: var(--text-dim); margin-top: 4px; }
.rank-mode { display: none; gap: 6px; margin-bottom: 10px; flex-wrap: wrap; align-items: center; }
.rank-mode.show { display: flex; }
.rank-mode .rm-note { font-size: 0.7rem; color: var(--text-dim); }
.link-btn { background: transparent; border: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; text-decoration: underline; text-decoration-color: rgba(var(--fg-rgb), 0.25); text-underline-offset: 3px; }
.link-btn:hover { color: var(--brand); text-decoration-color: var(--brand); }
.title-chip { display: inline-block; margin-left: 6px; padding: 1px 6px; border-radius: 6px; font-size: 0.64rem; font-weight: 800; color: var(--info-soft); border: 1px solid rgba(var(--info-rgb), 0.45); vertical-align: middle; white-space: nowrap; }
.visit-stars { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.visit-star { display: flex; gap: 8px; align-items: center; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; min-width: 0; font-size: 0.72rem; color: var(--text-dim); }
.visit-star img { width: 34px; height: 34px; border-radius: 9px; flex-shrink: 0; }
.visit-star > div { min-width: 0; }
.visit-star .vs-name { font-weight: 800; color: var(--text-main); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.visit-map { display: grid; grid-template-columns: repeat(var(--vm-cols, 12), minmax(0, 1fr)); gap: 2px; margin-top: 6px; }
.visit-map > span { aspect-ratio: 1; border-radius: 3px; background: rgba(var(--fg-rgb), 0.03); border: 1px dashed rgba(var(--fg-rgb), 0.06); }
.visit-map > span.map-tile { border: 1px solid var(--border-strong); padding: 0; cursor: default; border-radius: 3px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 6px; }
.badge-item { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; font-size: 0.7rem; color: var(--text-dim); min-width: 0; }
.badge-item b { display: block; font-size: 0.78rem; color: var(--text-sub); }
.badge-item.got { border-color: var(--ok); }
.badge-item.got b { color: var(--ok); }
.coop-box { display: none; margin-top: 12px; border-top: 1px solid var(--border); padding-top: 10px; }
.coop-box.show { display: block; }
.breed-suggest { display: none; margin-top: 10px; }
.breed-suggest.show { display: block; }
.breed-suggest .bs-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 0.74rem; color: var(--text-sub); padding: 4px 0; border-bottom: 1px solid rgba(var(--fg-rgb), 0.05); }
.breed-suggest .bs-row:last-child { border-bottom: 0; }
.show-odds { font-size: 0.72rem; color: var(--text-sub); margin-top: 6px; }
.show-odds b { color: var(--text-main); }
@media (max-width: 640px) { .visit-stars { grid-template-columns: repeat(2, minmax(0, 1fr)); } .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: #f2c94c; --chat-accent-ink: var(--brand-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */