/* 한봇 던전 페이지 전용 스타일 — dungeon.html 인라인 <style>에서 그대로 옮김 (2026-11-01, 공용은 style.css) */
.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; }
.modal p { white-space: pre-line; }
.up { color: #ff7070; }
.down { color: #6aa8ff; }

/* 명예 피드 */
.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; }

/* 참여/로그인 박스 + 직업 선택 */
/* 첫걸음 가이드 (참여자 첫 방문) */
.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; }
/* 첫걸음 체크리스트 (2026-11-01) — 보상 버튼·표시는 오른쪽 끝 */
.qs-check { align-items: center; }
.qs-check > span:nth-child(2) { flex: 1; min-width: 0; }
.qs-check > .mini-btn, .qs-check > .st-tag { flex-shrink: 0; }
.qs-check.claimed > span:nth-child(2) { opacity: 0.6; }
.qs-foot { display: flex; gap: 8px; justify-content: flex-end; margin-top: 10px; }
.qs-btn { font-size: 0.76rem; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; }
.qs-btn:hover { color: var(--brand); border-color: var(--brand); }
.join-box, .login-box { background: var(--bg-card); border: 1px dashed var(--border); border-radius: 12px; padding: 26px 20px; text-align: center; margin: 16px 0; }
.join-box h3, .login-box h3 { color: #ddd; font-size: 1rem; margin: 0 0 10px; }
.join-box p, .login-box p { color: var(--text-dim); font-size: 0.82rem; margin: 0 0 16px; line-height: 1.7; }
.big-btn { display: inline-block; padding: 10px 26px; background: rgba(var(--brand-rgb), 0.12); color: var(--brand); border: 1px solid rgba(var(--brand-rgb), 0.4); border-radius: 8px; font-weight: 700; font-size: 0.9rem; cursor: pointer; text-decoration: none; }
.big-btn:hover { background: rgba(var(--brand-rgb), 0.22); }
.big-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.job-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 14px auto 18px; max-width: 640px; }
.job-card { border: 1px solid var(--border); border-radius: 12px; padding: 16px 12px; cursor: pointer; background: var(--bg-deep, rgba(255,255,255,0.03)); text-align: center; }
.job-card:hover { border-color: var(--border-strong); }
.job-card.active { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.07); }
.job-name { font-size: 0.95rem; font-weight: 800; color: var(--text-main); }
.job-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 6px; line-height: 1.6; }

/* 모험가 요약 */
.hero-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; margin-bottom: 14px; }
.hero-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; }
.hero-label { font-size: 0.72rem; color: var(--text-dim); margin-bottom: 4px; }
.hero-value { font-size: 1.05rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.hero-value.brand { color: var(--brand); }
.hero-sub { font-size: 0.68rem; color: var(--text-dim); margin-top: 3px; }
.exp-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); margin-top: 6px; overflow: hidden; }
.exp-fill { height: 100%; background: var(--brand); border-radius: 3px; }
.injured-badge { font-size: 0.7rem; color: #ff8a8a; background: rgba(255,78,78,0.1); border: 1px solid rgba(255,78,78,0.35); border-radius: 6px; padding: 2px 8px; font-weight: 700; }

/* 층 목록 */
.zone-label { font-size: 0.8rem; font-weight: 800; color: var(--text-sub); margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; }
.zone-label .zl-range { font-size: 0.68rem; color: var(--text-dim); font-weight: 400; }
.floor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 8px; }
.floor-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-card); position: relative; }
.floor-card.locked { opacity: 0.45; }
.floor-card.boss { border-color: rgba(242,201,76,0.4); }
.floor-card.cleared::after { content: "클리어"; position: absolute; top: 8px; right: 10px; font-size: 0.6rem; font-weight: 800; color: var(--ok); }
.fc-name { font-size: 0.82rem; font-weight: 800; color: var(--text-main); }
.fc-name .fc-no { color: var(--text-dim); font-weight: 700; font-size: 0.72rem; }
.fc-meta { font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.fc-odds { font-weight: 700; }
.fc-rarity { font-size: 0.66rem; margin-top: 4px; line-height: 1.5; font-variant-numeric: tabular-nums; }
.fc-rarity .r-normal { color: #aaa; }
.fc-rarity .r-rare { color: #7db4ff; }
.fc-rarity .r-epic { color: #b18aff; }
.fc-rarity .r-legendary { color: #ffd76a; }
.fc-rarity .r-mythic { color: #ff7eb6; }
.fc-rarity .r-eternal { color: #5ff0d0; }
.fc-rarity .r-origin { color: #ff6b45; }
/* 구역 탭 (2026-09-18 던전 2구역) */
.zone-tabs { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.zone-tab { flex: 1 1 200px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 10px 14px; cursor: pointer; text-align: left; color: var(--text-sub); }
.zone-tab.active { border-color: var(--brand); color: var(--text-main); box-shadow: inset 0 0 0 1px var(--brand); }
.zone-tab.locked { opacity: 0.5; cursor: not-allowed; }
.zone-tab .zt-name { font-size: 0.85rem; font-weight: 800; display: block; }
.zone-tab .zt-sub { font-size: 0.68rem; color: var(--text-dim); display: block; margin-top: 2px; }
.zone-locked-box { border: 1px dashed var(--border-strong); border-radius: 10px; background: var(--bg-card); padding: 22px 16px; text-align: center; font-size: 0.82rem; color: var(--text-sub); line-height: 1.8; }
.zone-locked-box b { color: #f2c94c; }
/* 스테이터스·스킬 (v43.4.0) */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.stat-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 9px 12px; display: flex; align-items: center; gap: 8px; }
.stat-info { flex: 1; min-width: 0; }
.stat-name { font-size: 0.76rem; font-weight: 800; color: var(--text-main); }
.stat-name b { color: var(--brand); }
.stat-desc { font-size: 0.64rem; color: var(--text-dim); margin-top: 2px; }
.skill-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 8px; }
.skill-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 10px 12px; }
.skill-name { font-size: 0.78rem; font-weight: 800; color: #7db4ff; }
.skill-desc { font-size: 0.68rem; color: var(--text-dim); margin: 3px 0 8px; }
.skill-card.locked { opacity: 0.55; border-style: dashed; }
.skill-card .sk-adv { font-size: 0.6rem; font-weight: 800; color: #f2c94c; border: 1px solid rgba(242,201,76,0.4); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
/* 전직·세트 효과 (2026-09-07) */
.adv-chip { display: inline-block; font-size: 0.62rem; font-weight: 800; color: #f2c94c; border: 1px solid rgba(242,201,76,0.4); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.set-line { font-size: 0.72rem; color: var(--text-dim); margin: -6px 0 10px; line-height: 1.6; }
.set-line b { color: var(--brand); }
.cmp-up { color: var(--ok); font-weight: 700; }
.cmp-down { color: #ff8a8a; font-weight: 700; }
.cmp-flat { color: var(--text-dim); }
.inv-toolbar { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 10px; }
.inv-toolbar .tb-note { font-size: 0.68rem; color: var(--text-dim); margin-left: auto; }
.mini-btn.active { border-color: var(--brand); color: var(--brand); }
.mini-btn:disabled { opacity: 0.28; cursor: default; }
.mini-btn.dim { opacity: 0.45; } /* 지금은 못 쓰는 버튼 — 누르면 이유를 알려 준다 */
.mini-btn:disabled:hover { border-color: var(--border-strong); color: var(--text-sub); }
/* 자동 판매 규칙 (2026-09-09) — select·checkbox는 style.css 전역 기준선(배경·테두리·accent) 사용, 여기선 크기만 */
.inv-settings { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: rgba(255,255,255,0.02); }
.inv-settings .inv-settings-label { font-size: 0.72rem; font-weight: 700; color: var(--text-main); }
.inv-settings select { padding: 3px 8px; font-size: 0.72rem; }
.inv-check { display: inline-flex; align-items: center; gap: 5px; font-size: 0.72rem; color: var(--text-sub); cursor: pointer; }
/* 관리 버튼 열 고정 (2026-09-09) — 조건에 안 맞는 버튼은 비활성 자리로 남겨 열이 밀리지 않게 */
/* 가방 관리 열 — 잠금·장착·강화·초월·각인·판매·거래소 등록 7종 (각인 추가 후 6칸이라 마지막이 줄바꿈되던 것 수정)
   2026-09-24: 강화 버튼을 장착 카드처럼 짧게(강화 +N, 비용·확률은 강화 창) 줄여 PC 1440에서도 표가 가로로 넘치지 않게 */
.inv-actions { display: grid; grid-template-columns: 60px 46px 64px 46px 60px 46px 74px; gap: 4px; }
.inv-actions .mini-btn { margin: 0; width: 100%; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 가방·거래소 표 — 부위·직업·등급을 이름 아래 한 줄로 모아 열 수를 줄였다 */
.inv-meta { display: flex; align-items: center; gap: 4px 6px; flex-wrap: wrap; margin-top: 3px; font-size: 0.7rem; color: var(--text-dim); white-space: normal; }
.data-table td.dg-wrap { white-space: normal; min-width: 150px; }
/* 이름 칸은 길면 줄바꿈 — 긴 닉네임 하나가 표를 넓혀 버튼 칸이 가로 스크롤 뒤로 밀리던 것 */
.data-table td.dg-c-main { white-space: normal; overflow-wrap: anywhere; min-width: 110px; }
.inv-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 8px; }
.inv-filter .tb-note { margin-left: auto; }
/* 장착 카드 버튼 — 칸이 좁아 글자가 잘리던 것을 유동 격자로 (자세한 비용은 버튼 툴팁) */
.slot-actions { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 4px; margin-top: 8px; }
.slot-actions .mini-btn { width: 100%; padding-left: 4px; padding-right: 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 내 기록 필터 */
.rec-filters { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
.rec-filters .rf-count { font-size: 0.68rem; color: var(--text-dim); margin-left: auto; }
.record-head .r-boss { font-size: 0.62rem; font-weight: 800; color: #f2c94c; }
.record-head .r-first { font-size: 0.62rem; font-weight: 800; color: var(--brand); }
.record-head .r-meta { color: var(--text-dim); font-size: 0.7rem; }
/* 요일 이벤트 배너 (v43.3.0) */
.day-event-banner { border: 1px solid rgba(242,201,76,0.4); border-radius: 10px; background: rgba(242,201,76,0.06); padding: 9px 14px; margin-bottom: 12px; font-size: 0.76rem; color: var(--text-main); }
.day-event-banner b { color: #f2c94c; }
/* 장비 도감 (v43.3.0) */
.dex-slot-label { font-size: 0.78rem; font-weight: 800; color: var(--text-main); margin: 14px 0 8px; }
.dex-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; }
.dex-card { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 7px 10px; }
.dex-base { font-size: 0.72rem; font-weight: 700; color: var(--text-main); }
.dex-dots { margin-top: 4px; display: flex; gap: 5px; }
.dex-dot { width: 11px; height: 11px; border-radius: 50%; border: 1px solid var(--border); background: transparent; }
.dex-dot.on.normal { background: #ccc; border-color: #ccc; }
.dex-dot.on.rare { background: #7db4ff; border-color: #7db4ff; }
.dex-dot.on.epic { background: #b18aff; border-color: #b18aff; }
.dex-dot.on.legendary { background: #ffd76a; border-color: #ffd76a; }
.dex-dot.on.mythic { background: #ff7eb6; border-color: #ff7eb6; }
.dex-dot.on.eternal { background: #5ff0d0; border-color: #5ff0d0; }
.dex-dot.on.origin { background: linear-gradient(135deg, #ffc27a, #ff5a3c 60%, #d8321e); border-color: #ff6b45; }
.dex-ms-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 10px; }
.dex-ms { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-card); padding: 8px 10px; font-size: 0.72rem; color: var(--text-dim); }
.dex-ms b { color: var(--text-main); }
/* 일일 과제 (v43.3.0) */
.daily-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.daily-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 10px 12px; display: flex; align-items: center; gap: 10px; }
.daily-info { flex: 1; min-width: 0; }
.daily-name { font-size: 0.76rem; font-weight: 700; color: var(--text-main); }
.daily-prog { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; font-variant-numeric: tabular-nums; }
.daily-done { color: var(--ok); font-weight: 700; }
/* 토벌전 (v43.3.0) */
.raid-card { border: 1px solid rgba(255,126,182,0.35); border-radius: 12px; background: var(--bg-card); padding: 16px 18px; margin-bottom: 14px; }
.raid-boss { font-size: 1.05rem; font-weight: 800; color: #ff7eb6; }
.raid-sub { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; line-height: 1.6; }
.raid-hp-bar { height: 14px; border-radius: 7px; background: rgba(255,255,255,0.07); overflow: hidden; margin: 10px 0 6px; }
.raid-hp-fill { height: 100%; border-radius: 7px; background: linear-gradient(90deg, #ff4e4e, #ff7eb6); transition: width 0.6s; }
.raid-hp-num { font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.raid-dead { font-size: 0.86rem; font-weight: 800; color: #f2c94c; margin-top: 8px; }
/* 거울 미궁 (2026-10-02) — 토벌전 카드 틀 재사용, 색은 토큰 */
.mirror-card { border-color: rgba(var(--brand-rgb), 0.35); }
.mirror-card .raid-boss { color: var(--brand); display: flex; align-items: center; gap: 8px; }
.mirror-next { margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-deep, rgba(255,255,255,0.03)); border: 1px solid var(--border); }
.mirror-next .mn-head { font-size: 0.86rem; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.mirror-actions { margin-top: 10px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.mirror-actions select { max-width: 100%; min-width: 0; }
.st-tag.bound { background: rgba(var(--brand-rgb), 0.15); color: var(--brand); }
/* 칭호 (v43.3.0) */
.title-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.title-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 10px 12px; }
.title-card.locked { opacity: 0.45; }
.title-card.on { border-color: rgba(242,201,76,0.5); }
.title-name { font-size: 0.8rem; font-weight: 800; color: #f2c94c; }
.title-desc { font-size: 0.68rem; color: var(--text-dim); margin: 3px 0 8px; }
.hero-title-chip { display: inline-block; font-size: 0.62rem; font-weight: 700; color: #f2c94c; border: 1px solid rgba(242,201,76,0.4); border-radius: 20px; padding: 1px 8px; margin-right: 4px; vertical-align: 2px; }
.rk-title { display: block; font-size: 0.62rem; color: #f2c94c; }
.fc-btn { margin-top: 8px; width: 100%; padding: 6px 0; font-size: 0.76rem; font-weight: 700; border-radius: 8px; cursor: pointer; background: rgba(var(--brand-rgb), 0.1); color: var(--brand); border: 1px solid rgba(var(--brand-rgb), 0.35); }
.fc-btn:hover:not(:disabled) { background: rgba(var(--brand-rgb), 0.2); }
.fc-btn:disabled, .fc-btn.dim { opacity: 0.4; }
.fc-btn:disabled { cursor: not-allowed; }

/* 진행 중 탐험 배너 */
.ongoing-box { background: var(--bg-card); border: 1px solid rgba(var(--brand-rgb), 0.35); border-radius: 12px; padding: 14px 18px; margin-bottom: 14px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ongoing-title { font-size: 0.9rem; font-weight: 800; color: var(--text-main); }
.ongoing-timer { font-size: 1.3rem; font-weight: 900; color: var(--brand); font-variant-numeric: tabular-nums; }
.ongoing-sub { font-size: 0.72rem; color: var(--text-dim); }
.resolve-btn { margin-left: auto; padding: 10px 22px; font-size: 0.88rem; font-weight: 800; border-radius: 8px; cursor: pointer; background: rgba(242,201,76,0.15); color: #f2c94c; border: 1px solid rgba(242,201,76,0.5); }
.resolve-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* 탐험 실시간 일지 */
.ongoing-progress { flex-basis: 100%; height: 5px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; }
.ongoing-progress-fill { height: 100%; background: var(--brand); border-radius: 3px; transition: width 1s linear; }
.ongoing-log { flex-basis: 100%; display: none; flex-direction: column; gap: 3px; border-top: 1px dashed var(--border); padding-top: 8px; }
.ol-line { font-size: 0.74rem; color: var(--text-dim); line-height: 1.6; }
.ol-line.latest { color: var(--text-sub); animation: olFade 0.6s ease; }
.ol-line .ol-dot { color: var(--brand); margin-right: 6px; }
.ol-pending { font-size: 0.72rem; color: #666; }
.ol-pending .ol-dots::after { content: ""; animation: olDots 1.8s steps(4, end) infinite; }
@keyframes olFade { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes olDots { 0% { content: ""; } 25% { content: "."; } 50% { content: ".."; } 75% { content: "..."; } }

/* 결과 카드 */
.result-box { border-radius: 12px; padding: 18px; margin-bottom: 14px; display: none; }
.result-box.win { background: rgba(var(--ok-rgb), 0.07); border: 1px solid rgba(var(--ok-rgb), 0.4); }
.result-box.great { background: rgba(242,201,76,0.08); border: 1px solid rgba(242,201,76,0.5); }
.result-box.lose { background: rgba(255,78,78,0.06); border: 1px solid rgba(255,78,78,0.3); }
.result-title { font-size: 1.05rem; font-weight: 900; margin-bottom: 6px; }
.result-log { font-size: 0.82rem; color: var(--text-sub); line-height: 1.8; }
.result-rewards { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 10px; font-size: 0.8rem; color: var(--text-dim); }
.result-rewards b { color: var(--text-main); }

/* 장비 */
.equip-slots { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; margin-bottom: 14px; }
.slot-card { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-deep, rgba(255,255,255,0.03)); }
.slot-label { font-size: 0.68rem; color: var(--text-dim); margin-bottom: 4px; }
.item-line { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.item-name { font-size: 0.8rem; font-weight: 700; }
.item-name.r-normal { color: #ccc; }
.item-name.r-rare { color: #7db4ff; }
.item-name.r-epic { color: #b18aff; }
.item-name.r-legendary { color: #ffd76a; }
.item-name.r-mythic { color: #ff7eb6; text-shadow: 0 0 8px rgba(255,126,182,0.35); }
.item-name.r-eternal { color: #5ff0d0; text-shadow: 0 0 10px rgba(95,240,208,0.45); }
/* 근원 등급 (2026-10-19 던전 3구역) — 맨 위 등급만 한 색이 아니라 새벽빛 띠(금→분홍→하늘). 글자 그림자는 투명 글자 뒤로 비쳐 drop-shadow로 */
.item-name.r-origin { color: #ff6b45; background: linear-gradient(90deg, #ffc27a, #ff5a3c 55%, #ff9a5c); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; filter: drop-shadow(0 0 6px rgba(255,90,60,0.4)); }
.rune-tag { font-size: 0.62rem; font-weight: 800; color: #5ff0d0; border: 1px solid rgba(95,240,208,0.45); border-radius: 4px; padding: 0 5px; vertical-align: 1px; }
.mini-btn.rune { border-color: rgba(95,240,208,0.5); color: #5ff0d0; }
.item-stat { font-size: 0.7rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.stat-up { color: var(--ok); font-size: 0.92em; }
.inv-table td .mini-btn { margin-right: 4px; }
.mini-btn { padding: 3px 9px; font-size: 0.7rem; font-weight: 700; border-radius: 6px; cursor: pointer; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); }
.mini-btn:hover { border-color: var(--brand); color: var(--brand); }
.mini-btn.gold { border-color: rgba(242,201,76,0.5); color: #f2c94c; }

.table-wrap { overflow-x: auto; }
.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; }
.rank-1 td { color: #ffd76a; font-weight: 700; }

/* 기록 */
.record-item { padding: 10px 4px; border-bottom: 1px solid rgba(255,255,255,0.04); }
.record-head { display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; font-size: 0.78rem; }
.record-head .r-time { color: #666; font-size: 0.68rem; }
.record-log { font-size: 0.76rem; color: var(--text-dim); margin-top: 4px; line-height: 1.7; }
.st-tag { font-size: 0.64rem; font-weight: 800; padding: 1px 7px; border-radius: 5px; }
.st-tag.success { background: rgba(var(--ok-rgb), 0.15); color: var(--ok); }
.st-tag.great { background: rgba(242,201,76,0.18); color: #f2c94c; }
.st-tag.fail { background: rgba(255,255,255,0.08); color: #aaa; }
.st-tag.injured { background: rgba(255,78,78,0.15); color: #ff8a8a; }

/* 결투장 (2026-09-12) */
.res-win { color: #6ee7a8; font-weight: 700; }
.res-lose { color: #ff8f9c; font-weight: 700; }
.duel-head { font-size: 0.95rem; font-weight: 800; margin-bottom: 4px; }
.duel-rounds { margin-top: 10px; display: flex; flex-direction: column; gap: 4px; }
.duel-round { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--bg-deep, rgba(255,255,255,0.03)); border-left: 3px solid transparent; flex-wrap: wrap; }
.duel-round.win { border-left-color: #6ee7a8; }
.duel-round.lose { border-left-color: #ff8f9c; }
.duel-round .dr-no { font-size: 0.68rem; font-weight: 800; color: var(--text-dim); flex-shrink: 0; }
.duel-round .dr-text { font-size: 0.78rem; color: var(--text-sub); }
.duel-round .dr-num { margin-left: auto; font-size: 0.72rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }

/* 파티 (2026-09-12) */
.party-members { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 8px; }
.party-chip { font-size: 0.72rem; color: var(--text-sub); background: var(--bg-deep, rgba(255,255,255,0.03)); border: 1px solid var(--border); border-radius: 999px; padding: 3px 10px; }
.party-chip.npc { color: #9ab; border-style: dashed; }
.party-chip.me { color: var(--brand); border-color: var(--brand); font-weight: 700; }
.party-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid rgba(255,255,255,0.05); flex-wrap: wrap; }
.party-row:last-child { border-bottom: 0; }
.party-row .pr-main { flex: 1; min-width: 200px; font-size: 0.84rem; color: var(--text-main); }
.party-row .pr-sub { display: block; font-size: 0.72rem; color: var(--text-dim); margin-top: 2px; }
#party-create-panel select { min-width: 150px; }
.tb-note { font-size: 0.68rem; color: var(--text-dim); }

/* 게임 안내 */
.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; }
.npc-chip { font-size: 0.58rem; font-weight: 800; color: #9ab; border: 1px solid rgba(150,170,190,0.4); border-radius: 4px; padding: 0 4px; vertical-align: middle; flex-shrink: 0; }
#npc-list, #npc-demand-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr)); gap: 10px; align-items: start; }
.npc-card { background: var(--bg-deep, rgba(255,255,255,0.03)); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; }
.npc-card .nc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.npc-card .nc-name { font-size: 0.86rem; font-weight: 800; color: var(--text-main); }
.npc-card .nc-assets { margin-left: auto; font-size: 0.78rem; font-weight: 700; color: var(--text-sub); font-variant-numeric: tabular-nums; }
.npc-card .nc-desc { font-size: 0.72rem; color: var(--text-dim); margin-top: 3px; line-height: 1.5; }
.npc-card .nc-props { font-size: 0.72rem; color: var(--text-sub); margin-top: 5px; line-height: 1.6; }
.npc-card .nc-props b { color: var(--brand); font-weight: 700; }
.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); }

/* 소모품 */
.consumable-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.cons-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--bg-deep, rgba(255,255,255,0.03)); }
.cons-name { font-size: 0.84rem; font-weight: 800; color: var(--text-main); display: flex; align-items: baseline; gap: 8px; }
.cons-qty { font-size: 0.7rem; color: var(--brand); font-weight: 700; }
.cons-desc { font-size: 0.7rem; color: var(--text-dim); margin: 5px 0 8px; line-height: 1.6; min-height: 2.2em; }
.cons-price { font-size: 0.74rem; color: #f2c94c; font-weight: 700; margin-bottom: 8px; }

/* 직업 태그 */
.job-tag { font-size: 0.62rem; font-weight: 800; padding: 1px 6px; border-radius: 5px; background: rgba(255,255,255,0.07); color: var(--text-dim); }
.job-tag.mine { background: rgba(var(--brand-rgb), 0.12); color: var(--brand); }
.job-tag.other { background: rgba(255,178,106,0.12); color: #ffb26a; }

/* 거래소 */
.market-filters { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
/* 셀렉트·체크박스 공통 디자인 — 모달 포함 페이지 전체 적용 (v43.4.1) */
select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; }
input[type="checkbox"] { accent-color: var(--brand); width: 15px; height: 15px; cursor: pointer; flex-shrink: 0; }
.market-filters select { background: var(--bg-input); border: 1px solid var(--border); color: var(--text-main); border-radius: 8px; padding: 6px 10px; font-size: 0.78rem; }
.fee-note { font-size: 0.7rem; color: var(--text-dim); margin-left: auto; }

/* 탐험 출발 모달 (소모품 지참 선택) */
.dep-overlay { display: none; position: fixed; inset: 0; z-index: 950; background: rgba(0,0,0,0.6); align-items: center; justify-content: center; padding: 16px; }
.dep-overlay.open { display: flex; }
.dep-modal { width: 440px; max-width: 100%; max-height: 85vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 20px; }
.dep-title { font-size: 1rem; font-weight: 800; color: var(--text-main); margin-bottom: 6px; }
.dep-sub { font-size: 0.76rem; color: var(--text-dim); line-height: 1.7; margin-bottom: 12px; white-space: pre-line; }
.dep-cons-label { font-size: 0.74rem; font-weight: 700; color: var(--text-sub); margin-bottom: 6px; }
.dep-cons-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 6px; cursor: pointer; }
.dep-cons-item:hover { border-color: var(--border-strong); }
.dep-cons-item input { accent-color: var(--brand); }
.dep-cons-info { flex: 1; }
.dep-cons-name { font-size: 0.78rem; font-weight: 700; color: var(--text-main); }
.dep-cons-desc { font-size: 0.68rem; color: var(--text-dim); margin-top: 2px; }
.dep-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }
.dep-cancel { padding: 9px 18px; font-size: 0.82rem; border-radius: 8px; cursor: pointer; background: transparent; color: var(--text-sub); border: 1px solid var(--border-strong); }

/* 채팅 오버레이 (stock.html 패턴) */
/* ── 연간 시즌 배너 · 명예의 전당 ── */
.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; }

/* ══ 2026-09-18 대형 고도화 ══ */
/* SVG 아트 — public/img/dungeon/<분류>/<이름>.png (생성기 scratchpad/dungeon-icons-gen.js) */
.dg-ico { width: 1.3em; height: 1.3em; vertical-align: -0.32em; flex-shrink: 0; }
.dg-ico.sm { width: 1.05em; height: 1.05em; vertical-align: -0.2em; }
.dg-ico.lg { width: 2.2em; height: 2.2em; vertical-align: -0.7em; }
.tab-btn .dg-ico { width: 1.1em; height: 1.1em; vertical-align: -0.22em; margin-right: 5px; }
/* 탭 11개 — 공용 .tab-bar는 줄바꿈이 없어 좁은 화면에서 글자가 세로로 찌그러진다.
   공용 클래스를 덮지 않고 이 페이지 전용 클래스를 덧붙여 줄바꿈만 허용 */
.dg-tabs { flex-wrap: wrap; }
.dg-tabs .tab-btn { white-space: nowrap; }
/* 탭 15개 — 휴대폰은 4칸 격자 4줄이 첫 화면 절반을 차지했다(2026-11-01) → 묶음 4칸 한 줄 + 고른 묶음의 탭만 가로 한 줄(넘치면 옆으로 밀기) */
.dg-groups { display: none; }
@media (max-width: 640px) {
    .dg-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-bottom: 6px; }
    .dg-groups .tab-btn { justify-content: center; font-weight: 700; }
    .dg-tabs { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; }
    .dg-tabs .tab-btn { flex: 0 0 auto; font-size: 0.76rem; }
    .dg-tabs[data-grp="adv"] .tab-btn:not([data-g="adv"]), .dg-tabs[data-grp="gear"] .tab-btn:not([data-g="gear"]),
    .dg-tabs[data-grp="with"] .tab-btn:not([data-g="with"]), .dg-tabs[data-grp="log"] .tab-btn:not([data-g="log"]) { display: none; }
}
/* 키보드 포커스·모션 최소화 (2026-10-19) */
.name-link:focus-visible, .job-card:focus-visible, .map-node:focus-visible, .zone-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
    .ol-line.latest, .ol-pending .ol-dots::after { animation: none; }
    .raid-hp-fill, .ongoing-progress-fill { transition: none; }
}
/* 확장 기능 자리 (public/js/dungeon/<key>.js가 채움) — 채워졌을 때만 아래 여백 */
.dgx-slot:not(:empty) { margin-bottom: 14px; }
.hero-label .dg-ico, .section-label .dg-ico { width: 1.15em; height: 1.15em; vertical-align: -0.24em; margin-right: 4px; }

/* 던전 지도 — 세부 구역 문장 격자 (층 100개를 한 줄로 늘어놓지 않기 위한 1단계 선택 화면) */
.map-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 2px 0 8px; }
.map-head .mh-title { font-size: 0.84rem; font-weight: 800; color: var(--text-main); display: flex; align-items: center; gap: 6px; }
.map-head .mh-sub { font-size: 0.72rem; color: var(--text-dim); }
.map-head .mh-jump { margin-left: auto; }
.area-prog { flex-basis: 100%; margin-top: 2px; }
/* 높이 26px 고정이면 비율 때문에 PC에서 가운데 590px 띠로 줄어 3구역 마름모 20개가 붙어 보였다 → 폭 기준, 높이는 40px까지 */
.area-prog svg { display: block; width: 100%; height: auto; max-height: 40px; }
.map-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(146px, 1fr)); gap: 8px; margin-bottom: 14px; }
.map-node { position: relative; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 8px 10px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-card); cursor: pointer; color: var(--text-sub); font-family: inherit; text-align: center; }
.map-node:hover { border-color: var(--border-strong); }
.map-node.on { border-color: var(--brand); background: rgba(var(--brand-rgb), 0.06); }
.map-node.locked { opacity: 0.45; cursor: not-allowed; }
.map-node img { width: 50px; height: 50px; filter: drop-shadow(0 2px 6px rgba(0,0,0,0.5)); }
.map-node.locked img { filter: grayscale(0.85) brightness(0.6); }
.map-node .mn-name { font-size: 0.78rem; font-weight: 800; color: var(--text-main); }
.map-node .mn-range { font-size: 0.66rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.map-node .mn-state { font-size: 0.62rem; font-weight: 800; }
.map-node .mn-state.clear { color: var(--ok); }
.map-node .mn-state.now { color: #f2c94c; }
.map-node .mn-state.lock { color: var(--text-dim); }
.map-node .mn-bar { width: 100%; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.08); overflow: hidden; margin-top: 2px; }
.map-node .mn-fill { display: block; height: 100%; background: var(--brand); border-radius: 2px; } /* span은 inline이라 display 없으면 width·height가 안 먹어 막대가 안 보임 */
.map-node .mn-boss { font-size: 0.62rem; color: #f2c94c; }

/* 층 카드 머리말 */
.sub-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 4px 0 8px; }
.sub-head img { width: 34px; height: 34px; }
.sub-head .sh-name { font-size: 0.9rem; font-weight: 800; color: var(--text-main); }
.sub-head .sh-sub { font-size: 0.7rem; color: var(--text-dim); }
/* 보스 표시는 이름 앞 작은 그림으로 — 예전엔 오른쪽 위에 떠 있어 긴 층 이름·'클리어' 글자와 겹쳤다 */
.floor-card .fc-slot { opacity: 0.8; margin-right: 2px; }
.floor-card.cleared .fc-name { padding-right: 38px; }

/* 전투력 분해 */
.pw-panel { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 14px; align-items: center; }
/* 휴대폰 — 한 줄로 쌓되 도넛은 화면 폭 전체(330px)로 커지지 않게 */
@media (max-width: 640px) { .pw-panel { grid-template-columns: 1fr; } .pw-chart { width: min(180px, 60%); margin: 0 auto; } }
.pw-chart svg { display: block; width: 100%; height: auto; }
.pw-desc { font-size: 0.68rem; color: var(--text-dim); }
.pw-rows { display: flex; flex-direction: column; gap: 5px; }
.pw-row { display: flex; align-items: center; gap: 8px; font-size: 0.76rem; color: var(--text-sub); }
.pw-row .pw-key { width: 96px; flex-shrink: 0; color: var(--text-dim); }
.pw-row .pw-bar { flex: 1; height: 8px; border-radius: 4px; background: rgba(255,255,255,0.06); overflow: hidden; }
.pw-row .pw-fill { display: block; height: 100%; border-radius: 4px; } /* span은 inline이라 display 없으면 width·height가 안 먹어 막대가 안 보임 */
.pw-row .pw-val { width: 92px; text-align: right; font-variant-numeric: tabular-nums; color: var(--text-main); font-weight: 700; }

/* 모험가 프로필 모달 */
.pf-overlay { display: none; position: fixed; inset: 0; z-index: 980; background: rgba(0,0,0,0.65); align-items: center; justify-content: center; padding: 16px; }
.pf-overlay.open { display: flex; }
.pf-box { width: min(720px, 100%); max-height: 86vh; overflow-y: auto; background: var(--bg-card); border: 1px solid var(--border-strong); border-radius: 14px; padding: 18px; }
.pf-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.pf-head img { width: 44px; height: 44px; }
.pf-name { font-size: 1.02rem; font-weight: 800; color: var(--text-main); }
.pf-sub { font-size: 0.74rem; color: var(--text-dim); line-height: 1.6; }
.pf-close { margin-left: auto; font-size: 0.74rem; padding: 5px 12px; border-radius: 6px; border: 1px solid var(--border-strong); background: transparent; color: var(--text-sub); cursor: pointer; }
.pf-stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)); gap: 6px; margin: 10px 0; }
.pf-stat { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-deep, rgba(255,255,255,0.03)); padding: 7px 9px; }
.pf-stat .k { font-size: 0.64rem; color: var(--text-dim); }
.pf-stat .v { font-size: 0.86rem; font-weight: 800; color: var(--text-main); font-variant-numeric: tabular-nums; }
.pf-gear { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 6px; }
.pf-slot { border: 1px solid var(--border); border-radius: 8px; background: var(--bg-deep, rgba(255,255,255,0.03)); padding: 8px 10px; display: flex; gap: 8px; align-items: flex-start; }
.pf-slot img { width: 24px; height: 24px; margin-top: 2px; }
.pf-slot .ps-label { font-size: 0.64rem; color: var(--text-dim); }
.pf-slot .ps-stat { font-size: 0.68rem; color: var(--text-dim); font-variant-numeric: tabular-nums; }
.name-link { cursor: pointer; border-bottom: 1px dashed rgba(255,255,255,0.22); }
.name-link:hover { color: var(--brand); border-bottom-color: var(--brand); }

/* 거래소 시세 */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.price-card { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-card); padding: 9px 11px; }
.price-card .pc-head { display: flex; align-items: center; gap: 6px; font-size: 0.78rem; font-weight: 800; }
.price-card .pc-head img { width: 20px; height: 20px; }
.price-card .pc-body { font-size: 0.7rem; color: var(--text-dim); margin-top: 4px; line-height: 1.6; font-variant-numeric: tabular-nums; }
.price-card .pc-body b { color: var(--text-main); }
.price-card.empty { opacity: 0.45; }

/* ══ 2026-09-24 페이지 고도화 3차 ══ */
/* 확인 창 안내 줄 — 예상 성공률·주의·참고 */
.dep-odds { font-size: 0.8rem; color: var(--text-sub); margin: -4px 0 12px; line-height: 1.6; }
.dep-odds b { font-size: 0.95rem; }
.dep-warn, .dg-warn { font-size: 0.76rem; color: var(--danger); line-height: 1.6; margin: 8px 0 0; }
.dg-warn { margin: 0 0 10px; }
.dep-note { font-size: 0.72rem; color: var(--text-dim); line-height: 1.6; margin: 6px 0 0; }
.dep-actions .big-btn:disabled { opacity: 0.4; cursor: not-allowed; }
/* 도감 점 색 설명 */
.dex-legend { display: flex; gap: 4px 12px; flex-wrap: wrap; align-items: center; font-size: 0.72rem; color: var(--text-dim); margin: 8px 0 0; }
.dex-legend span { display: inline-flex; align-items: center; gap: 4px; }
.sub-head .help-tip { margin-left: 2px; }
/* 화면으로 끌어오는 칸 — 태블릿·휴대폰 상단 바(48px) 밑에 가려지지 않게 */
#arena-result-panel, #sub-floors { scroll-margin-top: calc(var(--topbar-h, 0px) + 12px); }

/* 태블릿 — 모험가 요약 5칸이 4칸+1칸으로 어긋나고 이름이 잘리던 것 → 3열(모험가 칸은 2칸 차지) */
@media (min-width: 641px) and (max-width: 1024px) {
    .hero-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .hero-row .hero-card:first-child { grid-column: span 2; }
}
/* 휴대폰 — 본문을 화면 폭 전체로, 모험가 요약 2열, 작은 글자 키우기 */
@media (max-width: 640px) {
    .wrap { max-width: 100%; padding: 12px 12px 40px; }
    .hero-row { grid-template-columns: 1fr 1fr; gap: 8px; }
    .hero-row .hero-card:first-child { grid-column: 1 / -1; }
    .fc-meta, .item-stat, .skill-desc, .cons-desc, .hero-sub, .daily-prog, .tb-note, .inv-toolbar .tb-note, .dep-cons-desc, .pw-desc, .map-node .mn-range, .raid-sub, .record-log { font-size: 0.74rem; }
    .fc-rarity, .stat-desc, .map-node .mn-state, .map-node .mn-boss, .zone-tab .zt-sub, .inv-meta, .record-head .r-time, .record-head .r-meta { font-size: 0.72rem; }
    .rune-tag, .st-tag, .npc-chip, .adv-chip, .job-tag, .hero-title-chip, .skill-card .sk-adv, .rk-title, .season-badge, .record-head .r-boss, .record-head .r-first, .floor-card.cleared::after { font-size: 0.7rem; }
    .jr-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .jr-grid-2 .job-card { padding: 12px 8px; }
    /* 던전 지도 문장 — 세로 카드 10개가 650px를 차지해 층 카드까지 한참 내려가야 했다 → 그림 왼쪽·글 오른쪽 가로형으로 절반 높이 */
    .map-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .map-node { display: grid; grid-template-columns: 34px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: center; justify-items: start; text-align: left; padding: 8px 10px; }
    .map-node img { grid-row: span 3; width: 34px; height: 34px; }
    .map-node > span { grid-column: 2; max-width: 100%; overflow-wrap: anywhere; }
    .map-node .mn-boss { display: none; } /* 고른 구역의 보스 이름은 아래 층 카드 머리말에 나온다 */
    /* 구역 탭 3개(2026-10-19 3구역) — 한 줄에 나란히, 설명은 고른 구역과 잠긴 구역(여는 방법)만 */
    .zone-tab { flex: 1 1 0; min-width: 0; padding: 8px 10px; }
    .zone-tab:not(.active):not(.locked) .zt-sub { display: none; }
    /* 칭호 40여 개가 한 줄씩이라 3,000px 넘게 길어지던 것 → 2열 */
    .title-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
    .title-card { padding: 9px 10px; }
}
/* 터치 화면(휴대폰·태블릿) — 작은 버튼도 손가락으로 누르기 쉽게 */
@media (pointer: coarse) {
    .mini-btn { min-height: 32px; }
    .fc-btn { min-height: 38px; }
    .qs-btn, .hbs-open, .sx-close, .pf-close, .chat-close, .dep-cancel { min-height: 34px; }
    .inv-settings select { min-height: 34px; }
    .inv-check { min-height: 32px; } /* 체크박스는 글자까지 누르는 영역 */
}

/* 표 → 카드 — 휴대폰(≤640)은 모든 표, 태블릿(≤1024)은 칸이 많은 가방·거래소 판매 목록까지.
   이름 줄(굵게) / 나머지 칸은 '제목 값'으로 이어 쓰고 / 버튼은 맨 아래 한 줄 (가로 스크롤 없이 버튼이 보이게) */
@media (max-width: 1024px) {
    table.dg-cards-wide thead { display: none; }
    table.dg-cards-wide, table.dg-cards-wide > tbody { display: block; width: 100%; }
    table.dg-cards-wide > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 2px; border-bottom: 1px solid var(--border-dim); }
    table.dg-cards-wide > tbody > tr > td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; }
    table.dg-cards-wide > tbody > tr > td[data-label]:not([data-label=""])::before { content: attr(data-label); margin-right: 5px; font-size: 0.7rem; color: var(--text-dim); }
    table.dg-cards-wide td.dg-c-main, table.dg-cards-wide td.empty-state { flex: 1 1 100%; overflow-wrap: anywhere; }
    table.dg-cards-wide td.dg-c-act { flex: 1 1 100%; margin-top: 4px; }
    table.dg-cards-wide td.dg-c-act:empty { display: none; }
    .inv-actions { grid-template-columns: repeat(auto-fit, minmax(76px, 1fr)); }
}
@media (max-width: 640px) {
    table.dg-cards thead { display: none; }
    table.dg-cards, table.dg-cards > tbody { display: block; width: 100%; }
    table.dg-cards > tbody > tr { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; padding: 10px 2px; border-bottom: 1px solid var(--border-dim); }
    table.dg-cards > tbody > tr > td { display: block; padding: 0; border: 0; white-space: normal; min-width: 0; font-size: 0.78rem; }
    table.dg-cards > tbody > tr > td[data-label]:not([data-label=""])::before { content: attr(data-label); margin-right: 5px; font-size: 0.7rem; color: var(--text-dim); }
    table.dg-cards td.dg-c-main, table.dg-cards td.empty-state { flex: 1 1 100%; font-size: 0.84rem; overflow-wrap: anywhere; }
    table.dg-cards td.dg-c-rank, table.dg-cards td.dg-c-pre { font-weight: 800; }
    table.dg-cards td.dg-c-rank::after { content: "위"; }
    table.dg-cards td.dg-c-rank + td.dg-c-main, table.dg-cards td.dg-c-pre + td.dg-c-main { flex-basis: calc(100% - 64px); } /* 순위·구분과 이름만 첫 줄에 */
    table.dg-cards td.dg-c-act { flex: 1 1 100%; margin-top: 4px; }
    table.dg-cards td.dg-c-act:empty { display: none; }
}

/* ══ 2026-10-08 고도화 — 지금 하면 좋은 일·새싹·장인의 기운·토벌전 구간 보상 (색은 토큰) ══ */
.todo-box { background: var(--bg-card); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.todo-head { display: flex; align-items: center; gap: 6px 10px; flex-wrap: wrap; font-size: 0.86rem; font-weight: 800; color: var(--text-main); }
.todo-head .tb-note { font-weight: 400; }
.todo-head .todo-fold { margin-left: auto; }
.todo-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 6px; margin-top: 8px; }
.todo-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg-deep, rgba(255,255,255,0.03)); min-width: 0; }
.todo-item .ti-text { flex: 1; min-width: 0; }
.todo-item .ti-title { font-size: 0.8rem; font-weight: 700; color: var(--text-main); }
.todo-item .ti-desc { font-size: 0.7rem; color: var(--text-dim); margin-top: 2px; line-height: 1.5; overflow-wrap: anywhere; }
.todo-item .mini-btn { flex-shrink: 0; }
.todo-foot { display: flex; gap: 6px 14px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.todo-list > .todo-more { grid-column: 1 / -1; justify-self: start; }
.sprout-line { font-size: 0.74rem; color: var(--text-sub); background: rgba(var(--ok-rgb), 0.07); border: 1px solid rgba(var(--ok-rgb), 0.35); border-radius: 10px; padding: 7px 12px; margin: -4px 0 14px; line-height: 1.6; }
.sprout-line b { color: var(--ok); }
.sprout-chip { display: inline-block; font-size: 0.62rem; font-weight: 800; color: var(--ok); border: 1px solid rgba(var(--ok-rgb), 0.45); border-radius: 4px; padding: 0 5px; margin-left: 4px; vertical-align: 1px; }
.pity-line { font-size: 0.74rem; color: var(--text-sub); margin: 8px 0 2px; line-height: 1.6; }
.pity-line b { color: var(--brand); }
.pity-bar { height: 6px; border-radius: 3px; background: rgba(255,255,255,0.08); overflow: hidden; margin: 4px 0 8px; }
.pity-fill { display: block; height: 100%; background: var(--brand); border-radius: 3px; } /* span은 inline이라 display 없으면 막대가 안 보임 */
.raid-hp-wrap { position: relative; }
.raid-mark { position: absolute; top: 7px; height: 20px; width: 2px; margin-left: -1px; background: var(--text-sub); opacity: 0.6; border-radius: 1px; }
.raid-mark.done { background: var(--brand); opacity: 1; }
.raid-ms { font-size: 0.72rem; color: var(--text-dim); margin-top: 4px; line-height: 1.6; }
.raid-ms b { color: var(--text-main); }
.result-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
/* 사용자 입장 점검 (2026-10-08) */
.fc-meta, .job-desc, .todo-item .ti-desc { word-break: keep-all; } /* '예상 성공 / 률'처럼 단어 중간에서 끊기던 것 */
.odds-hi { color: var(--ok); }   /* 성공률 높음 — 예전엔 빨강(주식의 '오름' 색)이라 위험해 보였다 */
.odds-lo { color: var(--warn); }
.map-locked-note { display: none; font-size: 0.72rem; color: var(--text-dim); margin: -8px 0 12px; }
.guide-toc { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.need-join { text-align: center; padding: 18px 14px; margin-bottom: 14px; }
.need-join p { font-size: 0.82rem; color: var(--text-sub); margin: 0 0 10px; line-height: 1.7; }
.adv-lack { color: var(--warn); font-weight: 700; }
#tab-hero.dg-nojoin > :not(#hero-need-join):not(#shop-panel) { display: none; }
#tab-guide .guide-card { scroll-margin-top: calc(var(--topbar-h, 0px) + 12px); }
/* PC에서 채팅 창이 열려 있어도 본문 폭은 그대로 두고, 아래 여백을 채팅창 높이만큼 늘려 가려진 버튼도 스크롤로 올려 누르게 한다
   — 예전엔 오른쪽을 300px 비워 게임이 옆으로 접혔다 (2026-10-09, 넓은 화면만 처음부터 열린다) */
@media (min-width: 1025px) { body.dg-chat-open .wrap { padding-bottom: calc(min(70vh, 480px) + 96px); } }
/* 태블릿·휴대폰 — 오른쪽 아래 '채팅' 버튼이 맨 아래 버튼을 가리지 않게 */
@media (max-width: 1024px) { .wrap { padding-bottom: 84px; } }
@media (max-width: 640px) {
    .todo-item .ti-desc, .raid-ms, .pity-line { font-size: 0.74rem; }
    .todo-item { align-items: flex-start; }
    .map-node.locked { display: none; } /* 잠긴 구역 문장은 접고 한 줄로 */
    .map-locked-note { display: block; }
}
body[data-hb-chat] :is(.chat-fab, .chat-panel) { --chat-accent: #f2c94c; --chat-accent-ink: var(--brand-ink); } /* 채팅 단추·창 공용 규칙(style.css)에 넘기는 이 게임 색 */