:root{--dq-ink:#fff7df;--dq-dark:#17131d;--dq-panel:#282131;--dq-line:#0e0a12;--dq-gold:#f3c65b;--dq-mint:#70dbb0;--dq-red:#ef765f;--dq-blue:#78bce8;--game-shell-max:460px;--mode-nav-height:54px;--subnav-height:56px}
html{overflow-x:hidden}
/* 페이지 스크롤 막대 숨김 — 스크롤 동작(휠·드래그·키보드)은 그대로 두고 막대만 감춘다.
   실제 스크롤 컨테이너는 html 이 아니라 body 다: 바로 아래 body{overflow-x:hidden} 때문에
   overflow-y 가 visible → auto 로 계산되면서 body 가 스크롤포트가 된다(그래서 둘 다 지정).
   모달·상세 패널의 자체 스크롤(scrollbar-width:thin)은 의도된 것이므로 건드리지 않는다. */
html,body{scrollbar-width:none}
html::-webkit-scrollbar,body::-webkit-scrollbar{width:0;height:0;display:none}
body{padding-bottom:8px;overflow-x:hidden}body.game-mode-authorized{padding-bottom:calc(var(--mode-nav-height) + env(safe-area-inset-bottom) + 8px)}body.game-ready.idle-open:not(.game-mode-authorized){padding-bottom:calc(var(--subnav-height) + env(safe-area-inset-bottom) + 8px)}body.game-mode-authorized.dungeon-open,body.game-mode-authorized.idle-open{padding-bottom:calc(var(--mode-nav-height) + var(--subnav-height) + env(safe-area-inset-bottom) + 8px)}
.game-shell{width:100%;max-width:var(--game-shell-max);margin-left:auto;margin-right:auto}
.mode-hidden{display:none!important}
/* 공유 월드(별도 서비스 8703) iframe 임베드 — 하단 모드 내비(z70)만 남기고 전체 화면 */
body.world-open{overflow:hidden}
#worldMode iframe{position:fixed;top:48px;right:0;bottom:0;left:0;width:100%;height:calc(100dvh - 48px);border:0;z-index:30;background:#0d1520}
#worldFramePlaceholder{position:fixed;top:48px;right:0;bottom:0;left:0;z-index:29;display:grid;place-items:center;background:#0d1520;color:#cfe0ee;font:700 13px "Galmuri11","Galmuri9",sans-serif}
.game-mode-nav{position:fixed;z-index:70;left:50%;bottom:0;transform:translateX(-50%);width:min(100%,var(--game-shell-max));padding-bottom:env(safe-area-inset-bottom);display:none;grid-template-columns:repeat(auto-fit,minmax(68px,1fr));background:#15111b;border:3px solid #08060a;border-bottom:0;box-shadow:0 -4px 0 rgba(0,0,0,.28)}body.game-mode-authorized .game-mode-nav{display:grid}.game-mode-nav[hidden]{display:none!important}
.game-mode-nav button{min-height:var(--mode-nav-height);display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-right:2px solid #08060a;background:#2a2232;color:#a99dad;font:700 11px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation;padding:0 2px;white-space:nowrap}.game-mode-nav button[hidden]{display:none!important}
.game-mode-nav button:last-child{border-right:0}.game-mode-nav button span{display:inline-block;font-size:15px;line-height:1;margin:0}.game-mode-nav button.active{background:linear-gradient(#5f4b78,#40314f);color:#fff7df;box-shadow:inset 0 3px 0 var(--dq-gold)}
.dungeon-shell{padding:12px 10px 28px;color:var(--dq-ink);font-family:"Galmuri11","Galmuri9",sans-serif;background:radial-gradient(circle at top,#3f3150 0,#211a29 36%,#16121b 100%);min-height:calc(100vh - var(--mode-nav-height));min-height:calc(100dvh - var(--mode-nav-height) - env(safe-area-inset-bottom))}body.dungeon-open .dungeon-shell{min-height:calc(100dvh - var(--mode-nav-height) - var(--subnav-height) - env(safe-area-inset-bottom))}
.dungeon-header,.panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.dungeon-header{border:3px solid var(--dq-line);background:#241d2d;padding:15px;box-shadow:inset 0 3px 0 #5f4d70,4px 4px 0 #0d0911}.dungeon-header h1,.panel-title h2{margin:2px 0 0}.dungeon-header h1{font-size:22px}.eyebrow{display:block;color:var(--dq-gold);font-size:9px;letter-spacing:1.4px}.dungeon-summary{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.dungeon-summary span{padding:7px 9px;background:#17131d;border:2px solid #0e0a12;font-size:10px}.dungeon-summary b{color:var(--dq-mint)}
.dungeon-state{margin:15px 0;padding:14px;border:3px solid var(--dq-line);background:#282131;text-align:center}.dungeon-state.error{color:#ffc1b5}.dungeon-state.warning{color:#ffe3a1;border-color:#8f682b}.dungeon-state button{margin-left:10px}
/* 던전 전용 2층 하단 탭 — 편성 / 아이템(파워스톤) 전환. 상세 배치·모션은 파일 하단 규칙. */
.dtab{flex:1;font-family:inherit;cursor:pointer;font-size:13px;padding:11px 4px;color:var(--muted);background:var(--panel2);border:3px solid var(--line);touch-action:manipulation}
.dtab.active{color:var(--gold);background:var(--panel);box-shadow:inset 0 3px 0 var(--gold)}
.dungeon-tabpanel.hidden{display:none}
.dungeon-panel{margin-top:15px;padding:15px;border:3px solid var(--dq-line);background:linear-gradient(135deg,#30283a,#211b29);box-shadow:inset 0 3px 0 #584967,4px 4px 0 #0d0911}.panel-title h2{font-size:16px}.panel-title>strong{font-size:11px;color:#17131d;background:var(--dq-gold);padding:7px 9px;border:2px solid var(--dq-line)}
.dungeon-zone{padding:10px;margin-top:10px;background:#1a151f;border:2px solid #0d0911}.dungeon-zone h3{font-size:11px;margin:0 0 8px;color:#d8cde2}.stage-row{display:grid;grid-template-columns:repeat(5,1fr);gap:7px}.stage-node{min-height:48px;border:2px solid #0c0910;background:#40344c;color:#eee2f5;box-shadow:inset 0 3px 0 #655472;font:700 12px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.stage-node small{display:block;font-size:8px;color:#ffb79f;margin-top:2px}.stage-node.cleared{background:#355c50;box-shadow:inset 0 3px 0 #63a38c}.stage-node.selected{outline:3px solid var(--dq-gold);transform:translateY(-2px)}.stage-node:disabled{opacity:.38;cursor:not-allowed;filter:grayscale(1)}
.repeat-reward-status{margin:9px 0 2px;padding:8px 10px;border:2px solid #604f6d;background:#211a28;color:#d9cde0;font-size:9px;line-height:1.6}.repeat-reward-status strong{color:#ffe09a}.repeat-reward-status.first-clear{border-color:#4b967d;background:#1c302a;color:#b9efd9}.repeat-reward-status.exhausted{border-color:#a7504c;background:#3a2023;color:#ffc1b8}.repeat-reward-status .quota{color:#fff0b2}
.dungeon-actions{display:grid;grid-template-columns:1.5fr 1fr;gap:8px;margin-top:12px}.cube-action{border:3px solid var(--dq-line);padding:11px;background:#5b496d;color:#fff8e8;box-shadow:inset 0 3px 0 #88749b,3px 3px 0 #0d0911;font:700 12px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}.cube-action:active{transform:translate(2px,2px);box-shadow:inset 0 2px 0 #88749b}.cube-action.primary{background:#b0643f;box-shadow:inset 0 3px 0 #e59a69,3px 3px 0 #0d0911}.cube-action.rest{background:#387563;box-shadow:inset 0 3px 0 #6bb397,3px 3px 0 #0d0911}.cube-action.small{padding:8px;font-size:10px}.system-note{font-size:10px;line-height:1.7;color:#b9aebe;margin:11px 0 0}
/* 편성 레인/슬롯 보드의 본 스타일은 파일 하단 '원탭 편성 개편' 섹션 참고. .assignment-empty 는 상대 상세 빈 상태에서 재사용. */
.assignment-empty{display:grid;place-items:center;min-height:30px;padding:4px;border:1px dashed #403648;color:#8f8496;font-size:9px;text-align:center;line-height:1.45}
.fatigue-guide{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:8px;padding:8px 9px;background:#211a28;border:1px solid #463950;font-size:9px;color:#bdb1c4}.fatigue-guide-title{color:#ffe09a}.fatigue-guide>span{display:flex;align-items:center;gap:4px}.fatigue-dot{display:inline-block;width:8px;height:8px;border:1px solid #09070a}.fatigue-dot.ready{background:#71d8aa}.fatigue-dot.resting{background:#e9b959}.fatigue-dot.empty{background:#69404a}
.dungeon-pets{display:grid;grid-template-columns:1fr;gap:10px;margin-top:12px}.dungeon-pet-card{position:relative;order:0;border:3px solid #111;background:#1c1722;padding:10px;box-shadow:inset 0 3px 0 #42354e}.dungeon-pet-card.common{border-color:#4d4b51}.dungeon-pet-card.uncommon{border-color:#3f8a68}.dungeon-pet-card.rare{border-color:#387ca6}.dungeon-pet-card.epic{border-color:#805da8}.dungeon-pet-card.legendary{border-color:#c39239;box-shadow:inset 0 3px 0 #7f6330,0 0 12px rgba(243,198,91,.2)}.dungeon-pet-card.in-party{order:-30;border-color:var(--dq-mint)!important;box-shadow:inset 0 3px 0 #3d7767,0 0 0 2px rgba(112,219,176,.2)}.pet-fatigue{margin-top:8px;padding:7px;background:#15111a;border:1px solid #3f3348}.fatigue-label,.rest-progress{display:flex;align-items:center;justify-content:space-between;font-size:9px}.fatigue-label strong{color:#ffd36b;font-size:9px}.fatigue-meter{height:8px;margin:4px 0 7px;background:#452b34;border:1px solid #09070a;overflow:hidden}.fatigue-meter i{display:block;width:0;height:100%;transition:width .2s;background:linear-gradient(90deg,#e7b853,#71d8aa)}.rest-progress{color:#aca0b4}.rest-pips{display:flex;gap:3px;margin-left:auto}.rest-pips i{width:12px;height:5px;background:#43384a;border:1px solid #0a080b}.rest-pips i.filled{background:var(--dq-blue)}.skill-list{display:grid;gap:4px}.pet-skill{display:block;background:#33293d;border-left:3px solid #a47dc2;padding:6px}.pet-skill b,.pet-skill small{display:block}.pet-skill b{font-size:10px;color:#ffe19a}.pet-skill small{font-size:9px;line-height:1.55;color:#bfb4c5;margin-top:3px}.empty-note{text-align:center;color:#b7abbc;font-size:11px;padding:30px}

/* Compact pet grid: the same three-column scan view is used on mobile and desktop. */
.roster-lane-heading{display:flex;align-items:baseline;gap:7px;min-width:0;flex-wrap:wrap}
.dungeon-pets{grid-template-columns:repeat(3,minmax(0,1fr));gap:7px}.dungeon-pet-card{appearance:none;min-width:0;min-height:82px;padding:12px 6px 7px;display:flex;flex-direction:column;align-items:center;gap:5px;color:var(--dq-ink);font-family:"Galmuri11","Galmuri9",sans-serif;text-align:center;touch-action:manipulation}.dungeon-pet-card:hover{background:#261e2e}.pet-grid-name{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;color:#fff8e7;font-size:10px;line-height:1.35}.pet-name-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}.pet-grid-meta{display:flex;align-items:center;justify-content:center;gap:5px;width:100%;color:#c6bacd;font-size:9px}.pet-grid-meta b{color:#ffe19a;font-size:10px}.pet-grid-fatigue{width:100%;margin-top:auto}.pet-grid-fatigue-meter{height:6px;margin-top:3px;background:#452b34;border:1px solid #09070a;overflow:hidden}.pet-grid-fatigue-meter i{display:block;height:100%;background:linear-gradient(90deg,#e7b853,#71d8aa)}

/* Accessible pet details dialog. */
body.pet-detail-open{overflow:hidden}.pet-detail-modal[hidden]{display:none!important}.pet-detail-modal{position:fixed;z-index:85;inset:0;display:grid;place-items:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(var(--mode-nav-height) + 10px + env(safe-area-inset-bottom));background:rgba(7,5,9,.78);font-family:"Galmuri11","Galmuri9",sans-serif}.pet-detail-dialog{position:relative;width:min(100%,440px);max-height:100%;overflow-y:auto;padding:15px;background:linear-gradient(145deg,#352b40,#1d1724);color:var(--dq-ink);border:3px solid #0b080d;box-shadow:inset 0 3px 0 #665476,0 12px 40px #000;scrollbar-width:thin}.pet-detail-dialog:focus{outline:none}.pet-detail-close{position:absolute;z-index:2;top:8px;right:8px;width:34px;height:34px;border:2px solid #0b080d;background:#5c3540;color:#fff;font:700 18px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.pet-detail-header{padding-right:30px}.pet-detail-title-wrap h2{margin:0;color:#fff7df;font-size:15px;line-height:1.4}.pet-detail-title-wrap p{margin:5px 0 0;color:#bfb2c7;font-size:10px;line-height:1.6}.pet-detail-status{display:flex;gap:4px;flex-wrap:wrap;margin-top:7px}.pet-detail-status>span{padding:3px 6px;background:#2a2232;border:1px solid #51415e;color:#bfb3c6;font-size:9px}.pet-detail-status .pet-detail-element{display:inline-flex;align-items:center;gap:5px}.pet-detail-status .party{border-color:#55a98b;color:#a8f1d3}.pet-detail-status .training{border-color:#5589aa;color:#b9e8ff}.pet-detail-section{margin-top:11px;padding:9px;background:#17131d;border:1px solid #493b53}.pet-detail-section h3{margin:0 0 7px;color:#ffe09a;font-size:10px}.pet-detail-fatigue .pet-fatigue{margin:0}.pet-detail-stat-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.pet-detail-stat{min-width:0;padding:6px 4px;background:#2a2232;border:1px solid #493b53;text-align:center}.pet-detail-stat span,.pet-detail-stat b{display:block}.pet-detail-stat span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#a99eaf;font-size:8px}.pet-detail-stat b{margin-top:3px;color:#fff5d9;font-size:10px}.pet-attribute-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-top:6px}.pet-attribute{min-width:0;padding:5px 2px;background:#24202a;text-align:center}.pet-attribute span,.pet-attribute b{display:block}.pet-attribute span{overflow:hidden;text-overflow:ellipsis;color:#9e92a5;font-size:8px}.pet-attribute b{margin-top:3px;color:#8fe0c2;font-size:10px}.pet-detail-section .skill-list{gap:5px}.pet-detail-section .pet-skill{padding:7px}.pet-detail-actions{position:sticky;bottom:-15px;display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:12px -15px -15px;padding:10px 15px calc(10px + env(safe-area-inset-bottom));background:#1a151feF;border-top:2px solid #0d0911}.pet-detail-actions button{min-height:42px;padding:6px;border:2px solid #0e0a12;background:#584669;color:#fff;font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}.pet-detail-actions button.team-active,.pet-detail-actions button.selected{background:#32715e;border-color:#b8ffe6}.pet-detail-actions button.danger{background:#753d45;border-color:#ffb2a9}.pet-detail-actions button:disabled{opacity:.5;cursor:not-allowed}
.stone-target{display:flex;align-items:center;gap:8px;width:max-content;margin-top:10px;padding:6px 8px;background:#1b1621;border:2px solid #0d0911;font-size:10px}.stone-target select,.stone-card button{min-height:32px;border:2px solid #0d0911;background:#4c3c59;color:#fff;font:700 10px "Galmuri11","Galmuri9",sans-serif}.stone-target select{padding:0 6px}.dungeon-stones{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}.stone-card{display:grid;grid-template-columns:40px 1fr auto auto;align-items:center;gap:7px;padding:8px;background:#1b1621;border:2px solid #0d0911}.stone-gem{width:36px;height:36px;display:grid;place-items:center;background:#3d3047;border:2px solid #0c0910;color:#79c8f0;font-size:18px}.stone-card.hp .stone-gem{color:#ef7f87}.stone-card strong,.stone-card span,.stone-card em{display:block}.stone-card strong{font-size:10px}.stone-card span{font-size:9px;color:#b7abbc;margin-top:3px}.stone-card em{font-size:9px;color:#87d9b9;margin-top:3px;font-style:normal}.stone-card button{padding:0 8px}.stone-card button.ghost{background:#332b38}
.battle-panel{position:fixed;visibility:hidden;z-index:90;top:0;bottom:0;left:50%;right:auto;width:min(100%,var(--game-shell-max));height:100vh;height:100dvh;transform:translateX(-50%);overflow:hidden;background:#0d0a10;opacity:0;pointer-events:none;transition:opacity .2s;box-shadow:0 0 28px #000}.battle-panel.active{visibility:visible;opacity:1;pointer-events:auto}.dungeon-canvas,.dungeon-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}.battle-top{position:absolute;z-index:4;top:calc(8px + env(safe-area-inset-top));left:8px;right:8px;display:flex;justify-content:space-between;align-items:flex-start;pointer-events:none}.battle-progress-box{display:flex;align-items:stretch;min-width:0;background:#17131ddd;border:2px solid #e8c265}.battle-top strong{display:grid;place-items:center;padding:7px 9px;font-size:11px;white-space:nowrap}.battle-progress-box span{display:grid;place-items:center;min-width:0;padding:6px 8px;border-left:1px solid #7f6738;color:#f3e8c7;font-size:9px;line-height:1.35}.battle-top button{pointer-events:auto;padding:7px;background:#5d2d32;color:#fff;border:2px solid #170b0c;font:700 9px "Galmuri11","Galmuri9",sans-serif;touch-action:manipulation}.battle-top button:disabled{opacity:.5;cursor:not-allowed}.battle-field-legend{position:absolute;z-index:3;top:calc(47px + env(safe-area-inset-top));left:8px;display:flex;align-items:center;gap:5px;padding:4px 6px;background:#100d13b8;border:1px solid #504259;color:#d4cadb;font-size:9px}.battle-field-legend i{color:#9f93a8;font-style:normal}.battle-field-legend .ally-side{color:#80dfbd}.battle-field-legend .enemy-side{color:#ff9385}.battle-camera-controls{position:absolute;z-index:5;top:calc(47px + env(safe-area-inset-top));right:8px;display:flex;flex-direction:column;align-items:flex-end;gap:5px;pointer-events:none}.battle-camera-controls button{pointer-events:auto;display:grid;place-items:center;min-width:32px;min-height:30px;padding:0;border:2px solid #0a080c;background:#2b2333dd;color:#f9efff;font:700 9px "Galmuri11","Galmuri9",sans-serif;touch-action:manipulation}.battle-camera-controls .camera-follow{min-width:106px;padding:0 7px}.battle-camera-controls .camera-follow.active{border-color:var(--dq-mint);color:#baffdf;background:#254d42e8}.camera-dpad{display:grid;grid-template-columns:repeat(3,32px);grid-template-rows:repeat(3,30px);gap:2px}.camera-dpad #cameraUp{grid-column:2}.camera-dpad #cameraLeft{grid-column:1;grid-row:2}.camera-dpad #cameraReset{grid-column:2;grid-row:2;color:var(--dq-gold)}.camera-dpad #cameraRight{grid-column:3;grid-row:2}.camera-dpad #cameraDown{grid-column:2;grid-row:3}.battle-pets{position:absolute;z-index:4;left:5px;right:5px;bottom:calc(6px + env(safe-area-inset-bottom));display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}.battle-pet-hud{min-width:0;background:#17131de8;border:2px solid #0b080d;padding:5px}.battle-pet-name{display:flex;align-items:center;gap:3px;min-width:0}.battle-pet-name span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.battle-pet-hud>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}.hp-track{height:6px;background:#4b2229;margin:4px 0;border:1px solid #0a0709}.hp-track i{display:block;height:100%;background:#67d296}.battle-skills{display:grid;grid-template-columns:1fr;gap:2px}.battle-skills button{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:4px 2px;background:#704c82;color:#fff;border:1px solid #130d17;font:700 8px "Galmuri11","Galmuri9",sans-serif;touch-action:manipulation}.battle-skills button:disabled{filter:grayscale(1);opacity:.55}.battle-skills small{display:inline;margin-left:2px;font-size:7px;color:#ffe89b}.battle-result{position:absolute;z-index:8;inset:0;display:grid;place-items:center;pointer-events:none}.result-card{width:calc(100% - 40px);max-width:330px;min-width:0;max-height:calc(100dvh - 40px);overflow:auto;padding:22px 16px;background:#19141eee;border:4px solid #ded2e7;text-align:center;box-shadow:0 0 40px #000}.result-card strong,.result-card span{display:block}.result-card strong{font-size:22px;color:#ffd66d}.result-card span{font-size:10px;line-height:1.7;margin-top:9px}.result-card button{pointer-events:auto;margin-top:12px;padding:9px 12px;background:#5b496d;color:#fff;border:2px solid #0d0911;font:700 10px "Galmuri11","Galmuri9",sans-serif}.result-card .result-return{width:100%;background:#3c8069;border-color:#b8ffe6}.result-card.lose strong{color:#ff8b7f}
.dungeon-toast{position:fixed;z-index:110;left:50%;bottom:calc(var(--mode-nav-height) + env(safe-area-inset-bottom) + 10px);transform:translate(-50%,20px);opacity:0;pointer-events:none;width:max-content;max-width:min(90%,420px);padding:10px 14px;background:#1a151f;color:#fff5da;border:3px solid var(--dq-gold);font:700 11px "Galmuri11","Galmuri9",sans-serif;transition:.2s}.dungeon-toast.show{opacity:1;transform:translate(-50%,0)}.dungeon-toast.error{border-color:#e46d60}
body.dungeon-open .dungeon-toast{bottom:calc(var(--mode-nav-height) + var(--subnav-height) + env(safe-area-inset-bottom) + 10px)}
/* 토스트를 하단 내비 위로 올리는 조건은 '던전 권한'이 아니라 '모드 내비가 보이는가'다 —
   game.js updateModeNavigation 이 game-mode-authorized 와 nav.hidden 을 함께 토글한다.
   dungeon-authorized 로 좁히면 월드만 열린 유저(던전 OFF + 월드 ON)의 토스트가 내비 뒤에 깔린다. */
body.game-ready.idle-open .toast{bottom:calc(var(--subnav-height) + env(safe-area-inset-bottom) + 10px)}body.game-mode-authorized.idle-open .toast{bottom:calc(var(--mode-nav-height) + var(--subnav-height) + env(safe-area-inset-bottom) + 10px)}
/* 상점 모드: 하단 모드 내비(방치/던전/월드/상점) 위로 토스트를 올려 겹침 방지 */
body.game-mode-authorized.shop-open .toast{bottom:calc(var(--mode-nav-height) + env(safe-area-inset-bottom) + 10px)}
@media(max-width:460px){.dungeon-shell{padding:10px 8px 24px}.dungeon-header{align-items:flex-start}.dungeon-summary{max-width:145px}.dungeon-stones{grid-template-columns:1fr}.stone-card{grid-template-columns:38px 1fr auto}.stone-card select{grid-column:1/3}.panel-title{align-items:flex-start}.dungeon-header h1{font-size:17px}}
@media(max-width:360px){.dungeon-header{display:block}.dungeon-summary{max-width:none;justify-content:flex-start;margin-top:9px}.dungeon-summary span{padding:6px}.roster-lanes{grid-template-columns:1fr}.dungeon-pets{gap:5px}.dungeon-pet-card{min-height:78px;padding:11px 4px 6px}.pet-grid-name{font-size:9px}.pet-detail-dialog{padding:12px}.pet-detail-title-wrap h2{font-size:13px}.pet-detail-actions{bottom:-12px;margin:10px -12px -12px;padding-left:12px;padding-right:12px}.battle-camera-controls .camera-follow{min-width:94px;font-size:8px}.camera-dpad{grid-template-columns:repeat(3,29px);grid-template-rows:repeat(3,27px)}.battle-camera-controls button{min-width:29px;min-height:27px}.battle-field-legend{max-width:165px}.battle-pet-hud{padding:4px 3px}.battle-skills button{font-size:7px}}
.pet-grid-fatigue{display:block;width:100%}.pet-grid-fatigue-meter{display:block;width:100%;height:6px;box-sizing:border-box}.dungeon-zone h3>small{float:right;color:#8f8397;font-size:8px;font-weight:400;line-height:1.6}.stage-node small{white-space:nowrap}.pet-experience-label{display:flex;align-items:center;justify-content:space-between;color:#bcb0c4;font-size:9px}.pet-experience-label strong{color:#ffe09a;font-size:9px}.pet-experience-meter{height:8px;margin-top:5px;background:#31243b;border:1px solid #09070a;overflow:hidden}.pet-experience-meter i{display:block;height:100%;background:linear-gradient(90deg,#7669dc,#68d6d2,#f0ca66)}.pet-detail-experience p{margin:5px 0 0;color:#8f8398;font-size:9px;line-height:1.55}.result-card .experience-summary{color:#9de2ca}.result-card .repeat-limit-summary{padding:6px;border:1px solid #8c6d36;background:#332817;color:#ffe1a0}
@media(prefers-reduced-motion:reduce){.battle-panel,.dungeon-toast{transition:none}}

/* Cube Pet HD — 목록/팀 3D 썸네일 */
.dungeon-pet-card .pet-grid-portrait { display:block; margin:2px auto 4px; line-height:0; }
.dungeon-pet-card .pet-grid-portrait .pet-portrait { width:72px; height:72px; display:block; margin:0 auto; }
/* 슬롯 보드 타일 얼굴 — 옛 편성 칩의 황금 얼굴판을 계승 */
.slot-face .pet-portrait { display:block; width:44px; height:44px; box-sizing:border-box; border:1px solid rgba(255,255,255,.14); border-radius:8px; background:rgba(255,255,255,.06); }
.slot-face .pet-portrait-face { border-color:#8b691e; background:linear-gradient(145deg,#fff4b8,#e8b42d); box-shadow:inset 0 2px 0 rgba(255,255,255,.48); }
/* GHUB 마스터: 이벤트 펫 얼굴 배경 = 애니메이션 그라디언트(시즌 보상 등 특별 펫).
   그라디언트는 portrait_fx.js 카탈로그의 프리셋을 인라인 --evt-bg 로 주입(기본 rainbow 폴백).
   기본 노란색·시즌 티어 무지개·인라인 단색보다 항상 우선(!important)이어야 특별함이 드러난다. */
.pet-portrait.pet-portrait-event{ background:var(--evt-bg,linear-gradient(125deg,#ff5db1,#ffd166,#6ee7a8,#7cf5ff,#a78bfa,#ff5db1))!important; background-size:320% 320%!important; border-color:#ffd9f2!important; animation:portraitHolo 6s ease-in-out infinite alternate; }
@keyframes portraitHolo{ from{background-position:0% 50%} to{background-position:100% 50%} }
@media(prefers-reduced-motion:reduce){ .pet-portrait.pet-portrait-event{ animation:none } }

/* Dungeon 3D presentation FX. The pulse/sweep keyframes are shared with the
   idle-game formation UI in style.css; the aura itself is baked by WebGL. */
.pet-portrait.pet-shiny{animation:minerShiny 1.5s ease-in-out infinite}
.slot-tile.shiny,.dungeon-pet-card.shiny{position:relative;isolation:isolate;border-color:#fff6b0!important;animation:shinyPulse 1.6s ease-in-out infinite}
.slot-tile.shiny::after,.dungeon-pet-card.shiny::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;background:linear-gradient(105deg,transparent 28%,rgba(255,255,255,.08) 40%,rgba(255,246,176,.5) 49%,rgba(174,244,255,.18) 56%,transparent 69%);background-size:280% 100%;background-repeat:no-repeat;animation:shinySweep 2.6s ease-in-out infinite}
@media(prefers-reduced-motion:reduce){.pet-portrait.pet-shiny,.slot-tile.shiny,.dungeon-pet-card.shiny,.slot-tile.shiny::after,.dungeon-pet-card.shiny::after{animation:none}.pet-portrait.pet-shiny{filter:drop-shadow(0 0 7px #ffe27a)}.slot-tile.shiny,.dungeon-pet-card.shiny{box-shadow:0 0 16px #ffe27a}}

.pet-detail-header{display:grid;grid-template-columns:116px minmax(0,1fr);align-items:center;gap:13px;min-height:122px;padding:8px 38px 8px 8px;border:2px solid #0b080d;background:linear-gradient(145deg,#443453,#251d2d)}
.pet-detail-portrait{width:112px;height:112px;display:grid;place-items:center;background:radial-gradient(circle,#fff9d9,rgba(255,255,255,.15) 55%,rgba(0,0,0,.13) 72%);border:2px solid rgba(255,255,255,.28);overflow:hidden}
.pet-detail-portrait .pet-portrait{display:block;width:112px;height:112px}
@media(max-width:360px){.pet-detail-header{grid-template-columns:92px minmax(0,1fr);gap:9px}.pet-detail-portrait,.pet-detail-portrait .pet-portrait{width:88px;height:88px}}

/* Dungeon battle cinematic state. World HP bars and numbers are rendered in WebGL. */
.battle-phase-banner{position:absolute;z-index:7;top:24%;left:50%;min-width:170px;max-width:calc(100% - 40px);padding:10px 16px;transform:translate(-50%,-10px) scale(.92);opacity:0;pointer-events:none;text-align:center;color:#fff8dc;background:#17131de8;border:3px solid #ffd66d;box-shadow:0 0 28px rgba(255,211,77,.26),inset 0 2px 0 rgba(255,255,255,.18);font:700 14px "Galmuri11","Galmuri9",sans-serif;letter-spacing:1px;transition:opacity .16s,transform .16s}
.battle-phase-banner.show{opacity:1;transform:translate(-50%,0) scale(1);animation:battlePhasePop .42s ease-out}
.battle-phase-banner[data-phase="enemy-focus"]{color:#ffd7d1;border-color:#ff7c70;box-shadow:0 0 28px rgba(255,84,74,.3)}
.battle-phase-banner[data-phase="ally-focus"]{color:#dff6ff;border-color:#6fc5ff;box-shadow:0 0 28px rgba(83,175,255,.3)}
.battle-phase-banner[data-phase="combat-start"]{color:#fff1a3;border-color:#ffe050;font-size:20px}
.battle-phase-banner[data-phase="wave-transition"]{color:#dfffe9;border-color:#67d99b}
.battle-phase-banner[data-phase="battle-defeat"]{color:#ffd3cf;border-color:#ff655c;box-shadow:0 0 32px rgba(255,66,57,.38)}
.battle-camera-controls button:disabled{pointer-events:none;opacity:.32;filter:grayscale(1)}
@keyframes battlePhasePop{0%{transform:translate(-50%,-8px) scale(.82)}65%{transform:translate(-50%,1px) scale(1.06)}100%{transform:translate(-50%,0) scale(1)}}
@media(prefers-reduced-motion:reduce){.battle-phase-banner{transition:none}.battle-phase-banner.show{animation:none}}

.battle-pet-hud.skill-casting{border-color:#ffe06b;box-shadow:0 0 15px rgba(255,218,74,.42);animation:battleSkillHudPulse .46s ease-out 2}.battle-pet-name{position:relative}.battle-skill-callout{position:absolute;z-index:2;left:50%;bottom:calc(100% + 5px);max-width:130px;padding:4px 6px;transform:translateX(-50%);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;background:#2b1738e8;border:2px solid #ffe06b;color:#fff2a8;font:700 8px "Galmuri11","Galmuri9",sans-serif;font-style:normal;box-shadow:0 0 14px rgba(255,218,74,.42);animation:battleSkillCallout 1.3s ease-out both}.battle-skills button.skill-used,.battle-skills button.skill-used:disabled{filter:none;opacity:1;color:#251500;background:linear-gradient(100deg,#ffd55f,#fff4ae,#ffad50);border-color:#fff5bc;animation:battleSkillButton .5s ease-out 2}.battle-skills button.skill-used small{color:#7b2600}
.battle-skills button{position:relative;isolation:isolate}.battle-skills button:disabled{filter:none;opacity:.55}.battle-skills button.cooldown:disabled{opacity:1}.battle-skills .skill-cooldown-gauge{position:absolute;z-index:0;inset:0;display:block;background:rgba(48,51,58,.82);box-shadow:inset -1px 0 0 rgba(255,255,255,.3);pointer-events:none;transform:scaleX(var(--skill-cooldown,0));transform-origin:left;transition:transform .12s linear}.battle-skills .skill-button-label,.battle-skills button small{position:relative;z-index:1}.battle-skills .skill-button-label{display:inline-block;max-width:70%;overflow:hidden;text-overflow:ellipsis;vertical-align:middle}.battle-skills button.cooldown small{color:#f4f4f4;text-shadow:0 1px #24262b}.battle-skills button.ready .skill-cooldown-gauge{opacity:0}.battle-skills button.skill-used .skill-cooldown-gauge{background:rgba(54,55,59,.52)}
.battle-pet-hud.pet-down{position:relative;background:linear-gradient(145deg,rgba(51,34,42,.96),rgba(26,22,29,.96));border-color:#a84b55;box-shadow:inset 0 0 13px rgba(118,24,35,.45)}.battle-pet-hud.pet-down .battle-pet-name>span:first-child{color:#aaa1aa;text-decoration:line-through}.battle-death-state{flex:0 0 auto!important;display:inline-flex!important;align-items:center;gap:2px;min-width:max-content!important;padding:2px 3px;overflow:visible!important;background:#6d2831;border:1px solid #e6787f;color:#fff2f2!important;font-size:7px!important;line-height:1;white-space:nowrap}.battle-death-state b{font-family:"Segoe UI Emoji",sans-serif;font-size:10px;line-height:1}.battle-pet-hud.pet-down .hp-track{background:#251d22;border-color:#4f333a}.battle-pet-hud.pet-down .hp-track i{background:#6f555b}.battle-pet-hud.pet-down .battle-skills{filter:grayscale(1);opacity:.38}.battle-pet-hud.pet-down .battle-skills button{cursor:not-allowed}
@keyframes battleSkillHudPulse{0%{transform:scale(.97)}55%{transform:scale(1.035)}100%{transform:scale(1)}}@keyframes battleSkillCallout{0%{opacity:0;transform:translate(-50%,7px) scale(.72) rotateX(55deg)}18%{opacity:1;transform:translate(-50%,0) scale(1.08) rotateX(0)}72%{opacity:1}100%{opacity:0;transform:translate(-50%,-13px) scale(.96)}}@keyframes battleSkillButton{0%{transform:scale(.95)}55%{transform:scale(1.035)}100%{transform:scale(1)}}

.slot-tile.level-up,.dungeon-pet-card.level-up{position:relative;isolation:isolate;overflow:visible!important;animation:levelUpCardGlow 1s ease-in-out 4}.slot-tile.level-up::before,.dungeon-pet-card.level-up::after{content:"✦  ✧  ✦";position:absolute;z-index:5;inset:8% -4%;display:grid;place-items:center;color:#fff8a8;font-size:16px;letter-spacing:14px;pointer-events:none;text-shadow:0 0 8px #fff,0 0 14px #ffce47;animation:levelUpSparkBurst 1.25s ease-out 3}.level-up-event{position:absolute;z-index:7;left:50%;top:50%;display:grid;place-items:center;min-width:max-content;pointer-events:none;transform-style:preserve-3d;perspective:180px;animation:levelUpEvent3d 4.8s cubic-bezier(.18,.8,.22,1) both}.level-up-event b{display:block;color:#fff28a;font:900 13px "Galmuri11","Galmuri9",sans-serif;letter-spacing:1px;text-shadow:0 1px 0 #f4a928,0 2px 0 #d87b13,0 3px 0 #93410c,0 0 7px #fff,0 0 18px #ffcb45}.slot-tile .level-up-event b{font-size:9px}.level-up-event small{display:block;margin-top:5px;padding:3px 5px;color:#fff;background:#5a2d78e8;border:1px solid #f6d474;font:700 8px "Galmuri11","Galmuri9",sans-serif;box-shadow:0 2px 0 #25122f}.result-card .level-up-summary{color:#fff0a3;background:#4c315e;padding:7px;border:1px solid #a67bc0}.result-card .result-return{font-size:10px}
@keyframes levelUpEvent3d{0%{opacity:0;transform:translate(-50%,-20%) rotateX(72deg) scale(.45)}10%{opacity:1;transform:translate(-50%,-62%) rotateX(-10deg) scale(1.18)}18%{transform:translate(-50%,-56%) rotateX(0) scale(1)}78%{opacity:1;transform:translate(-50%,-56%) rotateX(0) scale(1)}100%{opacity:0;transform:translate(-50%,-105%) rotateX(-20deg) scale(.82)}}@keyframes levelUpSparkBurst{0%{opacity:0;transform:scale(.25) rotate(-12deg)}22%{opacity:1}100%{opacity:0;transform:scale(1.45) rotate(9deg)}}@keyframes levelUpCardGlow{0%,100%{box-shadow:0 0 0 rgba(255,221,89,0)}50%{box-shadow:0 0 22px rgba(255,221,89,.8),inset 0 0 12px rgba(255,246,163,.32)}}

/* 원정 제한시간 시계. 남은 2분부터만 나타나므로(dungeon.js RUN_DEADLINE_HUD_FROM_SECONDS)
   대부분의 원정에서는 이 칸이 아예 없다 — 늘 떠 있는 카운트다운은 방치 게임의 결이 아니다. */
.battle-progress-box .battle-time-left{white-space:nowrap;color:#ffe9b0;background:#3f3018dd}
.battle-progress-box .battle-time-left.urgent{color:#fff;background:#7a2222ee;animation:battleTimeLeftPulse 1s steps(2,end) infinite}
@keyframes battleTimeLeftPulse{0%,100%{opacity:1}50%{opacity:.5}}
@media(prefers-reduced-motion:reduce){.battle-progress-box .battle-time-left.urgent{animation:none}}
.result-card .late-summary{color:#ffd9b0;background:#4a3324;padding:6px;border:1px solid #a87a52;font-size:9px}
.result-card .trinket-summary{color:#cfe8ff;background:#24384a;padding:6px;border:1px solid #4f7fa8}

/* 장신구 가방 — 계열 필터 + 카드 목록. 파워스톤(.dungeon-stones)과 별도 스타일을 쓰는 이유는
   장착 단위가 다르기 때문이다(전역 슬롯 vs 펫별 부위). 섞으면 어느 쪽 규칙인지 헷갈린다. */
/* 공개 전 관리자 미리보기 배너 — 켜진 것과 헷갈리면 "왜 아무도 안 쓰지"가 된다. */
.admin-preview-note{margin-top:8px;padding:8px 10px;border:2px dashed #c9a227;background:#fffbe9;color:#7a5c10;font-size:8px;line-height:1.6}
/* 길드 — 내 길드 / 목록. 1차 골격이라 보여줄 값이 적다(이름·인원·기여도). */
/* 내 부족 카드 — 부족원 목록뿐이다. 길드 목록·신청 줄(`.guild-row`/`.guild-list`)과
   가입 대기(`.guild-pending`)는 자유 결성 폐지와 함께 걷어냈다(2026-08-19). */
.guild-card{border:2px solid #6e6180;background:#fff;padding:9px 10px;margin-top:8px}
.guild-card h3{font-size:12px;margin:0}
.guild-card .g-meta{margin-top:3px;color:#6b6280;font-size:8px;line-height:1.5}
.guild-members{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.guild-member{display:grid;grid-template-columns:1fr auto auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid #b9acc5;background:#faf7ff;font-size:9px}
.guild-member .g-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.guild-member .g-contrib{font-variant-numeric:tabular-nums;color:#3f6b8f}
.guild-actions{display:flex;flex-wrap:wrap;gap:5px;margin-top:9px}
.guild-actions button{padding:5px 9px;border:1px solid #55c797;background:#eafff5;color:#25705a;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.guild-actions button.danger{border-color:#d98a8a;background:#fff0f0;color:#8f3f3f}
.guild-actions button:disabled{opacity:.45;cursor:default}
/* 영역 지도 모달 — 상시 화면이 아니라 고를 때만 연다. 지도는 **영역 구분만** 되면 되므로
   높이를 45vh 로 묶고 카드가 아래에서 스크롤되게 둔다(9:16 지도가 화면을 다 먹지 않도록). */
/* 지도는 탭 안에 그대로 깔린다(모달이 아니다). 세로 9:16 이라 높이를 묶어야 카드가 안 밀린다. */
/* 제목 줄이 없으므로 패널 안쪽 여백만 남긴다. */
.dungeon-panel.is-map{padding-top:10px}
.tribe-map{position:relative;border:2px solid #6e6180;background:#1a1a22;text-align:center;line-height:0}
.tribe-map img{display:block;width:100%;max-height:46vh;object-fit:contain;margin:0 auto;image-rendering:auto}
/* 지도 위 클릭 영역. 좌표는 이미지 박스 기준 퍼센트라 화면 폭이 바뀌어도 따라간다. */
#tribeMapSpots{position:absolute;inset:0;pointer-events:none}
/* 클릭 영역은 **보이지 않는다** — 선택 표시는 지도 이미지가 바뀌는 것으로 충분하다.
   ⚠ `-webkit-tap-highlight-color` 를 끄지 않으면 모바일에서 파란 사각형이 번쩍인다. */
.tribe-spot{position:absolute;padding:0;border:0;background:transparent;cursor:pointer;
  pointer-events:auto;-webkit-tap-highlight-color:transparent;outline:none;appearance:none}
/* 키보드 이동은 보여야 한다(마우스·터치로는 안 뜬다). */
.tribe-spot:focus-visible{outline:2px solid #e6c76a;outline-offset:-2px}

/* 지도 위 인구 배지 — 설명 안의 작은 글씨는 안 읽힌다. 어디에 사람이 많은지는
   지도만 봐도 보여야 한다. ⚠ 클릭을 막으면 안 되므로 pointer-events 를 끈다. */
.tribe-pop{position:absolute;transform:translate(-50%,-50%);pointer-events:none;
  padding:4px 8px;border:2px solid var(--tribe,#6e6180);border-radius:10px;text-align:center;
  background:rgba(11,9,16,.88);color:#fff;font:700 11px/1.1 "Galmuri11","Galmuri9",sans-serif;
  white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.45)}
/* 전투력은 인구 **바로 아래**에 묶는다 — 따로 떼면 어느 영역 값인지 눈으로 잇기 어렵다. */
.tribe-pop small{display:block;margin-top:3px;font-size:8px;font-weight:400;color:#cfc2dd}
.tribe-pop.is-mine{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 2px 0 rgba(0,0,0,.45)}

/* 지도 위 오버레이 — 아래로 스크롤하지 않고 고른 영역을 읽고 바로 정할 수 있어야 한다. */
.tribe-overlay{position:absolute;left:0;right:0;bottom:0;max-height:46%;overflow:hidden;
  padding:10px 10px calc(9px + env(safe-area-inset-bottom,0px));text-align:left;line-height:1.5;
  background:linear-gradient(to top,rgba(11,9,16,.95) 58%,rgba(11,9,16,.72) 82%,rgba(11,9,16,0));
  border-top:2px solid var(--tribe,#6e6180);color:#f4eefb}
.tribe-overlay[hidden]{display:none}
/* 좌측은 설명, **우측 상단은 선택 버튼**. 버튼을 아래에 두면 버튼이 없는 영역
   (공허의 숲·거인성)과 높이가 달라져 지도가 들썩인다. */
.tribe-overlay{display:grid;grid-template-columns:1fr auto;align-items:start;column-gap:10px}
.tribe-ov-head{display:flex;align-items:baseline;gap:6px}
.tribe-ov-head b{font-size:12px;color:#fff}
.tribe-ov-head small{font-size:8px;color:#cabbd9}
.tribe-ov-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:9px;color:#ddd2e8;font-variant-numeric:tabular-nums}
.tribe-ov-stats em{font-style:normal;color:#a99cb8;font-size:8px}
.tribe-ov-blurb{margin:4px 0 0;font-size:8px;color:#c3b6d1}
.tribe-ov-act{grid-column:2;grid-row:1;justify-self:end;display:flex;gap:6px}
.tribe-ov-act button{padding:6px 12px;border:1px solid #55c797;background:#1d4a3c;color:#c9ffe9;
  font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.tribe-ov-note{display:inline-block;padding:5px 8px;border:1px dashed rgba(255,255,255,.28);
  font-size:8px;color:#cabbd9;white-space:nowrap}

/* 하단 목록은 없앴다 — 인구·전투력이 지도 배지로 올라가면서 이름만 남는 줄이 됐다.
   세 부족 비교는 배지 셋을 한눈에 보는 것으로 충분하고, 상세는 오버레이가 맡는다. */
.tribe-note{font-size:8px;color:#6b6280}

/* ── 거점 점령전 ──────────────────────────────────────────────────────────────
   ⚠ 클래스 접두사는 `op-` 다(규칙 13) — 전역 클래스명이 얕아 `.spot`·`.ring` 은 충돌한다. */
.op-bar{display:flex;align-items:center;gap:8px;margin-bottom:6px}
.op-bar strong{flex:1;min-width:0;font-size:11px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-back{padding:5px 9px;border:2px solid #6e6180;background:#fff;color:#3b3348;
  font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.op-tribe{padding:3px 8px;border:2px solid var(--tribe,#9a8fae);border-radius:999px;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#3b3348;white-space:nowrap}
.op-tickets{padding:3px 8px;border:2px solid #d9a441;background:#fff8e6;color:#7a5a12;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;white-space:nowrap}
.op-field{border:3px solid #6e6180;background:#0b0910;line-height:0}
/* 마커 좌표(%)의 기준 상자 — **이미지와 정확히 같아야 한다.** `.op-field` 를 기준으로 두고
   거기에 여백을 주면 여백까지 100%에 들어가 마커가 아래로 밀린다. */
.op-canvas{position:relative;line-height:0}
.op-field img{display:block;width:100%;height:auto}
/* 점령 링 — 등각 타원. `padding-bottom` %는 부모 **폭** 기준이라 이미지 비율이 달라져도 안 찌그러진다. */
.op-ring{position:absolute;transform:translate(-50%,-50%);height:0;pointer-events:none;
  border:2px solid var(--op,#9a8fae);border-radius:50%;
  box-shadow:0 0 10px var(--op,#9a8fae),inset 0 0 10px rgba(255,255,255,.25)}
.op-ring.is-free{border-style:dashed;opacity:.65;box-shadow:none}
/* 공성 중 — 굵은 흰 테두리. ⚠ 상시 애니메이션을 쓰지 않는다(규칙 32 의 절전 배선을 끌어와야 한다). */
.op-ring.is-siege{border-width:4px;border-color:#fff;box-shadow:0 0 14px #fff,0 0 22px var(--op,#9a8fae)}
/* 클릭 영역은 링과 **같은 자리**다. 테두리를 그리면 지도에 격자가 얹힌 것처럼 지저분해진다. */
.op-spot{position:absolute;transform:translate(-50%,-50%);height:0;padding:0;border:0;
  border-radius:50%;background:transparent;cursor:pointer;-webkit-tap-highlight-color:transparent}
.op-spot:focus-visible{outline:2px solid var(--dq-gold);outline-offset:2px}
.op-spot.is-active+.op-tag,.op-tag.is-mine{border-color:#fff}
.op-tag{position:absolute;transform:translate(-50%,4px);pointer-events:none;
  padding:3px 7px;border:2px solid var(--op,#9a8fae);border-radius:8px;
  background:rgba(11,9,16,.88);color:#fff;font:400 9px/1.2 "Galmuri11","Galmuri9",sans-serif;
  white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.45)}
.op-tag b{color:var(--op,#9a8fae);font-size:8px;letter-spacing:1px}
/* 상세 카드 — **항상 화면 하단**에 고정한다(스크롤 위치와 무관).
   ⚠ `sticky` 로 했더니 컨테이닝 블록(`.op-field`) 밖으로 못 나가서 **화면 중앙에 걸렸다**
     (2026-08-22 제보). 하단 고정이 요구사항이므로 `fixed` 가 맞다.
   ⚠ 가로 위치는 하단 내비와 **같은 변수**를 쓴다 — 런타임이 측정해 넣는 값이라 어떤 해상도에서도
     탭 바와 정확히 겹쳐 선다. 따로 계산하면 두 값이 갈린다.
   ⚠ 하단 크롬 위로 띄운다: 모드 내비 + 던전 서브탭 + 안전영역. 안 빼면 탭 바 뒤로 들어간다.
   ⚠ `#outpostPanel` 이 `hidden` 이면 자손이라 함께 사라진다 — 다른 탭으로 가도 안 남는다. */
.op-overlay{position:fixed;z-index:60;
  left:var(--mode-nav-left,50%);
  width:var(--mode-nav-width,calc(min(100vw,460px) - 24px));
  transform:translateX(var(--mode-nav-shift,-50%));
  bottom:calc(var(--mode-nav-height) + var(--subnav-height) + env(safe-area-inset-bottom) + 6px);
  box-sizing:border-box;margin:0;padding:8px 9px;border:2px solid var(--op,#9a8fae);
  background:rgba(11,9,16,.96);color:#fff5da;line-height:1.5;text-align:left;
  box-shadow:0 4px 14px rgba(0,0,0,.55)}
/* 카드가 떠 있는 동안 **지도를 그 위로 밀어 올릴 수 있게** 아래 여백을 준다.
   이게 없으면 지도 맨 아래 거점이 카드 뒤에서 영영 안 나온다(높이는 JS 가 실측해 넣는다). */
#outpostPanel.has-card{padding-bottom:calc(var(--op-card-h,150px) + 14px)}
.op-ov-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.op-ov-head b{font-size:11px}
.op-ov-head small{font-size:8px;color:#bdb1c4}
/* 닫기 — 터치 타깃 30px. 없으면 아래쪽 거점이 카드에 영영 가린다(규칙 31). */
.op-ov-close{margin-left:auto;width:30px;height:30px;flex:0 0 auto;
  border:2px solid #6e6180;background:#5c3540;color:#fff;cursor:pointer;
  font:700 15px/1 "Galmuri11","Galmuri9",sans-serif;-webkit-tap-highlight-color:transparent}
.op-guards{max-height:84px;overflow-y:auto;margin:6px 0 0}
.op-guard{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;
  padding:3px 5px;border-left:3px solid var(--op,#9a8fae);font-size:9px}
.op-guard.is-me{background:rgba(255,255,255,.10)}
/* 중립 몬스터 수비대 — 사람 수비대와 한눈에 갈려야 한다. */
.op-guard.is-npc{border-left-color:#9a8fae}
.op-guard.is-npc .op-who{color:#cfc2dd}
.op-slot{color:var(--op,#9a8fae);font-weight:700;font-size:8px}
.op-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-pow{color:#cfc2dd;font-size:8px;font-variant-numeric:tabular-nums}
.op-empty{padding:8px 0;font-size:8px;color:#bdb1c4;text-align:center}
.op-note{font-size:8px;color:#bdb1c4}
/* 집결 로비 — 수비 목록과 액션 사이에 낀다. */
.op-siege{margin-top:7px;padding:6px 7px;border:2px dashed #fff;background:rgba(255,255,255,.07)}
.op-siege-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;font-size:9px}
.op-clock{font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#ffd9d5;font-variant-numeric:tabular-nums}
.op-fighters{display:flex;flex-wrap:wrap;gap:3px;margin:5px 0}
.op-fighter{padding:2px 5px;border:1px solid #6e6180;background:rgba(11,9,16,.6);font-size:8px}
.op-fighter.is-me{border-color:#55c797;color:#eafff5}
.op-siege-foot{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:8px;color:#bdb1c4}
.op-siege-foot button{min-height:28px;padding:4px 10px;border:2px solid #55c797;background:#123;
  color:#eafff5;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.op-siege-foot button.danger{border-color:#d98a8a;background:#4a2a2f;color:#ffd9d5}
.op-attack{border-color:#d9a441!important;background:#3a2c12!important;color:#ffe9b8!important}

/* ── 부족 금고 ─────────────────────────────────────────────────────────────
   '있어보이게' 를 장식이 아니라 **위계**로 만든다: 적립 속도 하나만 크게(20px), 나머지는
   9px 이하로 눌러 시선이 한 곳에 꽂히게. 금색은 이 카드에서 **숫자에만** 쓴다.
   ⚠ 상시 애니메이션을 두지 않는다(규칙 32) — 절전 배선을 카드 하나에 끌어오지 않는다. */
.tribe-vault{position:relative;margin-bottom:8px;padding:9px 10px 8px;
  border:2px solid #6e6180;background:linear-gradient(180deg,#2b2135 0%,#1b1522 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 0 rgba(0,0,0,.35)}
/* 상단 금색 러너 — 3px 한 줄이 '값진 것' 신호를 가장 싸게 준다.
   ⚠ 테두리 밖으로 빼지 않는다(`-2px`). 2px 만 삐져나와도 모바일에서 **가로 스크롤**이 생긴다
     (2026-08-22 실측: scrollWidth 355 vs clientWidth 353). */
.tribe-vault::before{content:"";position:absolute;left:0;right:0;top:0;height:3px;
  background:linear-gradient(90deg,#7a5c1f,#f3c65b 45%,#fff0b8 50%,#f3c65b 55%,#7a5c1f);
  pointer-events:none}
.tribe-vault.is-idle{filter:saturate(.45)}
.tribe-vault.is-idle::before{background:#4a4356}
.tv-top{display:flex;align-items:baseline;gap:6px}
.tv-eyebrow{font:700 7px/1 "Galmuri11","Galmuri9",sans-serif;letter-spacing:1.5px;color:#8f8398}
.tv-title{font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#fff5da}
.tv-hold{margin-left:auto;padding:2px 5px;border:1px solid #6e6180;background:#171220;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#cfc2dd;font-variant-numeric:tabular-nums}
/* 적립 속도 — 이 카드에서 **가장 큰 것 하나**. */
.tv-rate{display:flex;align-items:baseline;gap:5px;margin-top:7px}
.tv-coin{width:18px;height:18px;image-rendering:pixelated;align-self:center}
.tv-rate b{font:700 20px/1 "Galmuri11","Galmuri9",sans-serif;color:var(--dq-gold,#f3c65b);
  font-variant-numeric:tabular-nums;text-shadow:0 2px 0 rgba(0,0,0,.55)}
.tv-unit{font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#a99dad}
.tv-day{margin-left:auto;font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#8f8398;text-align:right}
/* 오늘 쌓임 — 매초 오르는 자리. 숫자만 바뀌므로 **레이아웃이 흔들리면 안 된다**:
   `tabular-nums` 로 글자 폭을 고정한다(안 하면 1↔8 에서 줄이 들썩인다). */
.tv-today{display:flex;align-items:baseline;gap:5px;margin-top:6px;padding:5px 7px;
  border:1px solid #4a4356;background:#171220}
.tv-today-k{font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#8f8398}
.tv-today b{font:700 13px "Galmuri11","Galmuri9",sans-serif;color:#e6dcc4;
  font-variant-numeric:tabular-nums}
.tv-today-cap{margin-left:auto;font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#8f8398}
.tv-today-cap.is-cap{color:var(--dq-gold,#f3c65b)}
/* 거점별 보유 단계 — 오래 쥔 순으로 위에 온다(서버가 정렬해 준다). */
.tv-holds{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px}
.tv-hold-row{display:grid;grid-template-columns:minmax(0,1fr) auto 54px 26px 58px;align-items:center;
  gap:5px;padding:3px 6px;border-left:2px solid #6e6180;background:#171220;
  font:700 8px "Galmuri11","Galmuri9",sans-serif}
.tv-hold-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#cfc2dd}
.tv-pips{letter-spacing:1px;color:var(--dq-gold,#f3c65b)}
/* 이 거점이 실제로 내는 시간당 — 거점마다 다르다(GHUB 에서 개별 지정). */
.tv-rate-each{color:var(--dq-gold,#f3c65b);text-align:right;font-variant-numeric:tabular-nums;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tv-rate-each.is-off{color:#6f6579}
.tv-mult{color:#e6dcc4;text-align:right;font-variant-numeric:tabular-nums}
.tv-next{color:#8f8398;text-align:right;white-space:nowrap}

/* 점령 진행 — 게이지 하나로 '얼마나 쥐고 있나'를 말한다. */
.tv-bar{height:7px;margin-top:7px;border:1px solid #0e0a12;background:#120e19;overflow:hidden}
.tv-bar i{display:block;height:100%;width:0;
  background:linear-gradient(90deg,#7a5c1f,#f3c65b);box-shadow:inset 0 1px 0 rgba(255,255,255,.25)}
/* 정산 문턱 — 도달하면 켜진다. */
.tv-tiers{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:4px}
.tv-tier{display:grid;grid-template-columns:14px 34px minmax(0,1fr);align-items:center;gap:5px;
  padding:4px 6px;border:1px solid #4a4356;background:#171220;opacity:.72}
/* ⚠ `opacity` 는 글자 대비를 **같이** 깎는다 — 색만 재면 과대평가된다. .55 에서 미달 티어의
   '개수' 실효 대비가 4.03:1 로 기준(4.5) 아래였다(2026-08-22 실측). .72 로 올려 5.3:1. */
.tv-tier.is-on{opacity:1;border-color:#8a6b2a;background:#241b17}
.tv-step{font:700 10px/1 "Galmuri11","Galmuri9",sans-serif;color:#6b6280;text-align:center}
.tv-tier.is-on .tv-step{color:var(--dq-gold,#f3c65b)}
.tv-need{font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#cfc2dd;font-variant-numeric:tabular-nums}
.tv-gain{display:flex;flex-wrap:wrap;gap:4px 8px;min-width:0}
.tv-item{display:inline-flex;align-items:center;gap:3px;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#e6dcc4;white-space:nowrap}
.tv-item img{width:12px;height:12px;image-rendering:pixelated}
.tv-note{margin:7px 0 0;font-size:8px;color:#8f8398;line-height:1.55}

/* 요약 스트립 — 모바일 375px 기준. 4칸 2줄이 한 화면에서 가장 읽기 쉽다(6칸은 글자가 깨진다). */
.tribe-strip{margin-bottom:8px;padding:8px}
.ts-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px}
.ts-cell{min-width:0;padding:5px 7px;border:2px solid #b9acc5;background:#fff;
  display:flex;flex-direction:column;gap:2px}
.ts-k{font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#6b6280}
.ts-cell b{font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#3b3348;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-cell b.is-empty{color:#c04a4a}
/* 거점 칩 — 6개가 2줄로 접힌다. ⚠ `flex-wrap` 없으면 375px 에서 밀려 나간다. */
.ts-chips{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
/* ⚠ `min-height` 로 터치 타깃을 확보한다 — 글꼴이 8px 이라 padding 만으로는 22px 밖에 안 되어
   모바일에서 누르기 어렵다(2026-08-21 실측). 폰트를 키우면 이름이 잘리므로 높이로 푼다. */
.ts-chip{flex:1 1 calc(33.333% - 3px);min-width:0;min-height:34px;
  display:flex;align-items:center;gap:4px;
  padding:4px 6px;border:2px solid #b9acc5;background:#fff;cursor:pointer;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#3b3348;
  -webkit-tap-highlight-color:transparent}
.ts-chip i{flex:0 0 auto;width:7px;height:7px;background:var(--chip,#9a8fae);
  border:1px solid rgba(0,0,0,.35)}
.ts-chip span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ts-chip.is-free i{background:transparent;border-style:dashed}
.ts-chip.is-mine{border-color:#55c797;background:#eafff5}

/* '오늘 할 일' 안내 — 남은 단계가 있을 때만 뜬다. ⚠ 상시 애니메이션 없음(규칙 32). */
.tribe-guide{margin-bottom:8px}
.tg-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#3b3348}
.tg-head span{font-size:9px;color:#6b6280;font-variant-numeric:tabular-nums}
.tg-steps{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:5px}
.tg-step{display:grid;grid-template-columns:16px minmax(0,1fr);gap:6px;align-items:start;
  padding:5px 6px;border:2px solid #b9acc5;background:#fff}
.tg-step.is-done{border-color:#55c797;background:#eafff5;opacity:.7}
.tg-mark{font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#6b6280;text-align:center}
.tg-step.is-done .tg-mark{color:#2f7d5a}
.tg-body{min-width:0;display:flex;flex-direction:column;gap:2px}
.tg-body b{font-size:10px;color:#3b3348}
.tg-body span{font-size:8px;color:#6b6280;line-height:1.5}
.tg-goal{margin:7px 0 0;font-size:8px;color:#6b6280;line-height:1.6}
/* 지도가 둘이라 관계를 적어 준다 — 지도 **아래**여야 누른 뒤 읽는 순서와 맞는다. */
.tribe-map-note{margin:6px 0 0;font:700 8px "Galmuri11","Galmuri9",sans-serif;
  color:#6b6280;line-height:1.6;text-align:center}
.tribe-map-note b{color:#3b3348}
.op-er-why{display:block;margin-top:3px;font-size:8px;color:#3b3348;line-height:1.4}

/* 공허 침식 — 점령이 무엇을 주는지 한 줄로 보여준다. ⚠ 상시 애니메이션을 두지 않는다(규칙 32). */
.op-erosion{margin:0 0 7px;padding:6px 8px;border:2px solid #6e6180;background:#f6f2fa}
.op-er-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px;
  font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#6b6280}
.op-er-head b{font-size:11px;color:#3b3348}
.op-er-head span.is-on{color:#2f7d5a}
.op-er-bar{height:10px;margin-top:4px;border:2px solid #6e6180;background:#2a2232;overflow:hidden}
.op-er-bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7fd9a8,#2f7d5a)}
.op-er-note{display:block;margin-top:4px;font-size:8px;color:#6b6280;line-height:1.4}

.op-ov-act{display:flex;justify-content:flex-end;align-items:center;gap:6px;margin-top:7px}
.op-ov-act button{min-height:30px;padding:5px 11px;border:2px solid #55c797;background:#123;
  color:#eafff5;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.op-ov-act button.danger{border-color:#d98a8a;background:#4a2a2f;color:#ffd9d5}
.op-enter{min-height:30px;padding:5px 11px;border:2px solid var(--dq-gold);background:#2a2232;
  color:#fff5da;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
/* 수비 편성 모달 */
.op-pick{position:relative;width:min(92vw,380px);max-height:80vh;display:flex;flex-direction:column;
  padding:14px 12px 12px;background:#1a151f;border:3px solid var(--dq-gold);color:#fff5da}
.op-pick-head{display:flex;flex-direction:column;gap:3px;padding:0 22px 8px 0}
.op-pick-head strong{font-size:11px}
.op-pick-head span{font-size:8px;color:#bdb1c4}
.op-pick-list{flex:1;min-height:0;overflow-y:auto;display:grid;grid-template-columns:1fr 1fr;gap:5px}
.op-pet{display:flex;align-items:center;gap:5px;padding:4px 5px;border:2px solid #6e6180;
  background:#2a2232;color:#e8ddf2;font:400 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;
  text-align:left;-webkit-tap-highlight-color:transparent}
.op-pet.is-on{border-color:#55c797;background:#1d3b30}
.op-pet img{width:28px;height:28px;object-fit:contain;flex:0 0 auto}
.op-pet-blank{width:28px;text-align:center}
.op-pet-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.op-pet-lv{font-size:8px;color:#bdb1c4}
.op-pick-act{display:flex;justify-content:flex-end;margin-top:9px}
.op-pick-act button{min-height:36px;padding:7px 16px;border:2px solid #55c797;background:#123;
  color:#eafff5;font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.op-pick-act button:disabled{opacity:.45;cursor:default}
.tribe-note.is-mine-note{color:#25705a;font-weight:700}
/* 주간 임무 — 진척 게이지 + 단계 카드. 순위가 아니라 달성형이라 남과 비교하는 칸이 없다.
   접두사 `gw-` 는 전역 클래스명 충돌을 피하려는 것(.mine 사고와 같은 이유). */
.gw-head{display:flex;align-items:baseline;gap:6px;margin-top:8px;font-size:9px;color:#6b6280}
.gw-head b{font-size:14px;color:#3f6b8f;font-variant-numeric:tabular-nums}
.gw-head em{margin-left:auto;font-style:normal;font-size:8px}
.gw-bar{position:relative;height:12px;margin-top:6px;border:2px solid #6e6180;background:#efeaf5;overflow:hidden}
.gw-bar i{display:block;height:100%;background:#55c797}
.gw-bar u{position:absolute;top:0;bottom:0;width:2px;background:#6e6180;transform:translateX(-1px)}
.gw-tiers{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.gw-tier{display:grid;grid-template-columns:auto auto 1fr auto;align-items:center;gap:8px;padding:6px 8px;border:1px solid #b9acc5;background:#faf7ff;font-size:8px}
.gw-tier .gw-t{font-size:9px;font-weight:700}
.gw-tier .gw-goal,.gw-tier .gw-state{color:#6b6280;font-variant-numeric:tabular-nums}
.gw-tier .gw-reward{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gw-tier.is-done{border-color:#55c797;background:#eafff5}
.gw-tier.is-done .gw-state{color:#25705a}
.gw-tier.is-claimed{opacity:.6}
.gw-note{margin-top:8px;color:#6b6280;font-size:8px;line-height:1.6}
/* 타임어택 — 대상/내 기록/순위. 값은 서버가 준 문자열을 그대로 쓴다(자체 계산 금지). */
.ta-target{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px;border:2px solid #6e6180;background:#fff}
.ta-target .ta-zone{font-size:22px;line-height:1}
.ta-target b{display:block;font-size:11px}
.ta-target small{display:block;margin-top:3px;color:#6b6280;font-size:8px;line-height:1.5}
.ta-mine{margin-top:8px;padding:9px 10px;border:2px solid #6e6180;background:#fff;font-size:9px}
.ta-mine b{font-size:12px;color:#3f6b8f}
.ta-board{display:flex;flex-direction:column;gap:4px;margin-top:8px}
.ta-row{display:grid;grid-template-columns:32px 1fr auto;align-items:center;gap:8px;padding:7px 9px;border:1px solid #6e6180;background:#fff;font-size:9px}
.ta-row .ta-rank{font-weight:700;text-align:center}
.ta-row .ta-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ta-row .ta-time{font-variant-numeric:tabular-nums;color:#3f6b8f}
.ta-row.me{border-color:#c9a227;background:#fffbe9}
.ta-empty{padding:14px;border:1px dashed #a99fb5;color:#6b6280;font-size:9px;text-align:center;line-height:1.6}
.trinket-filters{display:flex;flex-wrap:wrap;gap:4px;margin:8px 0}
.trinket-filters button{padding:4px 8px;border:1px solid #6e6180;background:#fff;color:#3d3550;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.trinket-filters button[aria-selected="true"]{background:#3d3550;color:#fff}
/* 보유 칸은 본문 **아래**에 깔리므로 카드 폭을 늘릴 필요가 없다(오른쪽에 열을 더 만들었을 때는
   본문 몫이 음수가 되어 글자가 한 자씩 접혔다). 남은 제약은 '스트립 폭 ≤ 본문 폭' 하나뿐이다. */
.trinket-bag{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.trinket-card{display:flex;gap:8px;align-items:flex-start;padding:8px;border:1px solid #6e6180;background:#fff}
.trinket-card .t-icon img{width:36px;height:36px;flex:none;image-rendering:pixelated}
/* 액션 버튼은 아이콘 **바로 아래**에 둔다 — 본문 오른쪽 끝에 있으면 카드마다 세로 위치가 달라져
   눈이 매번 버튼을 찾아야 했다(효과 줄 수에 따라 카드 높이가 다르다). */
.trinket-card .t-icon{flex:none;display:flex;flex-direction:column;align-items:center;gap:4px;width:44px}
.trinket-card .t-icon button{width:100%;padding:3px 2px;text-align:center}
/* 사용 중인 장신구는 테두리로 먼저 눈에 들어오고, 누가 끼고 있는지는 얼굴이 말한다. */
.trinket-card.tk-worn{border-color:var(--dq-mint);box-shadow:inset 0 0 0 1px rgba(85,199,151,.35)}
/* 보유 칸 스트립(우측 상단, 5칸×2줄) — 칸 수=보유량, 빈 칸=남은 수량, 얼굴=착용 펫.
   숫자 문구('보유 N · 남음 N')를 이 칸들이 대신하므로 카드에서 그 줄을 없앴다. */
/* 스탯 줄 아래 여백에 깔린다. 폭은 본문 폭을 넘지 않아야 한다 — 넘으면 6번째 칸이 다음 줄로
   내려가 '5칸 × 2줄'이라는 읽는 규칙이 깨진다. 카드 150px 기준 본문 82px, 스트립 78px. */
.t-slots{display:grid;grid-template-columns:repeat(5,14px);gap:2px;margin-top:5px}
.t-slots i{display:grid;place-items:center;width:14px;height:14px;overflow:hidden;
  border:1px solid #b9acc5;background:#f3eefa;font-style:normal}
/* 초상은 28px 로 렌더된 것을 여기서 줄여 쓴다(캐시 공유) — 크기를 여기서만 바꾸면 안 된다. */
.t-slots img{width:14px;height:14px;image-rendering:pixelated}
.t-slots .ts-on{border-color:var(--dq-mint);background:#eafff5}
.t-slots .ts-off{border-style:dashed}
.t-slots .ts-more{border-style:dotted;color:#6b6280;font:700 8px "Galmuri11","Galmuri9",sans-serif}
.trinket-card .t-body{min-width:0;flex:1}
/* 한글은 어절 단위로 접는다 — 기본값은 글자 단위라 좁아지면 '진실/의/아이' 처럼 쪼개진다. */
.trinket-card b{display:block;font-size:10px;margin-bottom:2px;word-break:keep-all}
.trinket-card small{display:block;color:#6b6280;font-size:8px;line-height:1.4;word-break:keep-all}
.trinket-card .t-stats{margin-top:3px;color:#3f6b8f;font-size:8px}
.trinket-card button{padding:3px 7px;border:1px solid #55c797;background:#eafff5;color:#25705a;font:700 8px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.trinket-card button:disabled{opacity:.45;cursor:default}
.trinket-empty{grid-column:1/-1;padding:14px;border:1px dashed #a99fb5;color:#6b6280;font-size:9px;text-align:center;line-height:1.6}

/* 장착할 펫 고르기 — 파워스톤 상세(.rune-modal)의 오버레이를 그대로 재사용하고 카드만 따로 둔다.
   ⚠ window.prompt 를 쓰지 않는 이유는 dungeon.js openTrinketEquipModal 주석 참조. */
.trinket-pick{position:relative;width:min(92vw,420px);max-height:82vh;display:flex;flex-direction:column;
  padding:14px;background:#1a151f;border:3px solid var(--dq-gold);color:#fff5da}
.trinket-pick .tpick-head{display:flex;align-items:center;gap:9px;margin-bottom:6px}
.trinket-pick .tpick-head img{image-rendering:pixelated}
.trinket-pick .tpick-head strong{display:block;font-size:12px}
.trinket-pick .tpick-head span{display:block;color:#bdb1c4;font-size:9px;margin-top:2px}
.trinket-pick .tpick-note-top{margin:0 0 8px;color:#bdb1c4;font-size:8px;line-height:1.5}
.trinket-pick .tpick-list{flex:1;overflow-y:auto;margin:0;padding:0 4px 0 0;list-style:none;display:grid;gap:4px}

/* 모달 안쪽 스크롤 — 픽셀 스크롤바 공용 규칙.
   숨기지 않는 이유: 목록이 수백 줄까지 가므로 '아래에 더 있다'는 신호가 사라지면 안 된다.
   페이지 전체 스크롤바(파일 상단)는 계속 숨긴 채, 자체 스크롤을 가진 패널만 여기서 칠한다.
   새 스크롤 영역에는 `dq-scroll` 클래스를 붙이면 된다(아래 목록은 옛 요소들의 소급 적용). */
.dq-scroll,
.trinket-pick .tpick-list,
.pet-detail-dialog,
.expedition-party-dialog,
.stage-season-dialog,
.stage-season-list,
.battle-opponent-detail .opp-card.opp-scout-card{scrollbar-width:thin;scrollbar-color:#5b4a6b #191420}
.dq-scroll::-webkit-scrollbar,
.trinket-pick .tpick-list::-webkit-scrollbar,
.pet-detail-dialog::-webkit-scrollbar,
.expedition-party-dialog::-webkit-scrollbar,
.stage-season-dialog::-webkit-scrollbar,
.stage-season-list::-webkit-scrollbar,
.battle-opponent-detail .opp-card.opp-scout-card::-webkit-scrollbar{width:10px;height:10px}
.dq-scroll::-webkit-scrollbar-track,
.trinket-pick .tpick-list::-webkit-scrollbar-track,
.pet-detail-dialog::-webkit-scrollbar-track,
.expedition-party-dialog::-webkit-scrollbar-track,
.stage-season-dialog::-webkit-scrollbar-track,
.stage-season-list::-webkit-scrollbar-track,
.battle-opponent-detail .opp-card.opp-scout-card::-webkit-scrollbar-track{background:#191420;border:2px solid #0d0911}
/* 손잡이는 카드와 같은 픽셀 입체(위/왼쪽 하이라이트 + 아래/오른쪽 그림자) */
.dq-scroll::-webkit-scrollbar-thumb,
.trinket-pick .tpick-list::-webkit-scrollbar-thumb,
.pet-detail-dialog::-webkit-scrollbar-thumb,
.expedition-party-dialog::-webkit-scrollbar-thumb,
.stage-season-dialog::-webkit-scrollbar-thumb,
.stage-season-list::-webkit-scrollbar-thumb,
.battle-opponent-detail .opp-card.opp-scout-card::-webkit-scrollbar-thumb{background:#5b4a6b;border:2px solid #0d0911;
  box-shadow:inset 1px 1px 0 rgba(255,255,255,.18),inset -1px -1px 0 rgba(0,0,0,.45)}
.dq-scroll::-webkit-scrollbar-thumb:hover,
.trinket-pick .tpick-list::-webkit-scrollbar-thumb:hover,
.pet-detail-dialog::-webkit-scrollbar-thumb:hover,
.expedition-party-dialog::-webkit-scrollbar-thumb:hover,
.stage-season-dialog::-webkit-scrollbar-thumb:hover,
.stage-season-list::-webkit-scrollbar-thumb:hover,
.battle-opponent-detail .opp-card.opp-scout-card::-webkit-scrollbar-thumb:hover{background:#71598a}
/* 장신구 모달은 금색 테두리라 손잡이도 금색 계열로 맞춘다(같은 카드 안에서 색이 겉돌지 않게). */
.trinket-pick .tpick-list{scrollbar-color:var(--dq-gold) #191420}
.trinket-pick .tpick-list::-webkit-scrollbar-thumb{background:#7a5c2c}
.trinket-pick .tpick-list::-webkit-scrollbar-thumb:hover{background:var(--dq-gold)}
.tpick-row{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"pet slot" "loadout loadout";column-gap:6px;row-gap:4px;padding:5px 6px;background:#241d2c;border:1px solid #463950}
.tpick-row.worn{border-color:var(--dq-mint)}
.tpick-pet{grid-area:pet;min-width:0;display:flex;align-items:center;gap:5px}
.tpick-pet img{width:22px;height:22px;flex:none}
.tpick-pet b{font-size:9px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tpick-pet em{font-style:normal;color:#8f8496;font-size:8px;white-space:nowrap}
.tpick-row button{padding:3px 8px;border:1px solid var(--dq-mint);background:#25705a;color:#eafff5;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;flex:none}
.tpick-row button:disabled{opacity:.4;cursor:default}
/* 슬롯이 곧 버튼이다 — 빈 칸을 누르면 끼우고, 착용 중인 칸을 누르면 뺀다(별도 해제 버튼 없음).
   ⚠ 칸 안의 그림만으로는 구분이 안 된다(아이콘이 계열당 하나) — 그래서 이름을 함께 싣고
   테두리로 상태를 나눈다: 점선=빈 칸, 민트=이 장신구, 금색=다른 장신구(누르면 교체). */
/* 이름이 붙는 건 '다른 장신구' 칸뿐이다 — 나머지는 아이콘만 남으므로 패딩을 균등하게 준다. */
.tpick-slot.tpick-mine,.tpick-slot.tpick-vacant{padding:3px}
.tpick-row .tpick-slot{grid-area:slot;align-self:center;flex:none;display:flex;align-items:center;gap:5px;max-width:54%;padding:3px 6px 3px 3px;
  border:2px solid #463950;background:#1d1826;color:#e7dcef;
  font:700 8px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.tslot-box{position:relative;flex:none;display:grid;place-items:center;width:26px;height:26px;border:2px solid #5b4a6b;background:#120f17}
.tslot-box img{image-rendering:pixelated}
.tslot-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 선택 계열 슬롯과 별개로, 펫이 이미 낀 모든 장신구를 아이콘으로 압축해 보여 준다.
   상세 이름은 아이콘의 접근성 라벨·툴팁에만 둬 목록을 짧게 유지한다. */
.tpick-loadout{grid-area:loadout;display:flex;align-items:flex-start;gap:4px;min-width:0;padding-top:4px;border-top:1px dashed #51435d}
.tpick-equipped-count{flex:none;padding:2px 3px;background:#3b2d20;color:#ffd88a;font:700 7px/1.35 "Galmuri11","Galmuri9",sans-serif;white-space:nowrap}
.tpick-equipped-items{min-width:0;display:flex;flex-wrap:wrap;gap:3px}
.tpick-equipped-item{display:inline-flex;align-items:center;justify-content:center;width:18px;height:18px;padding:1px;border:1px solid #5b4a6b;background:#191420;color:#dcd1e4;line-height:1.35}
.tpick-equipped-item img{width:14px;height:14px;flex:none;image-rendering:pixelated}
.tpick-equipped-empty{color:#8f8496;font-size:7px;line-height:1.65}
/* 빈 칸 = 들어갈 장신구의 **검은 실루엣**. 색을 통째로 죽여서(brightness 0) 채워진 칸과 헷갈리지
   않게 하면서도, 그 자리에 뭐가 들어가는지는 보여준다. 아이콘 파일은 계열당 하나뿐이라
   실루엣용 자산을 따로 만들지 않는다. */
.tpick-slot.tpick-vacant .tslot-box{border-style:dashed}
.tpick-slot.tpick-vacant .tslot-box img{filter:brightness(0);opacity:.42}
/* 착용 중 표시 — 라벨 대신 배지 하나. 누르면(호버·포커스) ✕ 로 바뀌어 '빠진다'를 예고한다. */
.tslot-badge{position:absolute;top:-5px;right:-5px;display:grid;place-items:center;width:13px;height:13px;
  border:1px solid #0d0911;background:var(--dq-mint);color:#0f3f2d;font:700 8px/1 "Galmuri11","Galmuri9",sans-serif}
.tslot-badge::after{content:'✓'}
.tpick-slot.tpick-mine:hover .tslot-badge,
.tpick-slot.tpick-mine:focus-visible .tslot-badge{background:#e46d60;color:#2d0f0c}
.tpick-slot.tpick-mine:hover .tslot-badge::after,
.tpick-slot.tpick-mine:focus-visible .tslot-badge::after{content:'✕'}
.tpick-slot.tpick-mine{border-color:var(--dq-mint);background:#22503f;color:#d6ffee}
.tpick-slot.tpick-mine .tslot-box{border-color:var(--dq-mint);background:#17402f}
.tpick-slot.tpick-moving-out{border-style:dashed;border-color:#c99a52;background:#3b2d20;color:#ffe6b8;cursor:default}
.tpick-slot.tpick-moving-out .tslot-box{border-color:#c99a52;background:#261b13;filter:grayscale(.45)}
.tpick-slot.tpick-other{border-color:#8a6a2c;background:#33291a;color:#ffe6b8}
.tpick-slot.tpick-other .tslot-box{border-color:#8a6a2c;background:#241c11}
.tpick-row .tpick-slot:disabled{opacity:.42;cursor:default}
.battle-progress-box .battle-weather{white-space:nowrap;color:#dff7ff;background:#21313ddd}.battle-progress-box .battle-weather[data-weather="storm"]{color:#fff1a8;background:#30334ddd}.battle-progress-box .battle-weather[data-weather="ash"]{color:#ffd0a8;background:#452c28dd}.battle-progress-box .battle-weather[data-weather="snow"]{color:#efffff;background:#30435bdd}.battle-progress-box .battle-weather[data-weather="fog"]{color:#e5e9e5;background:#343a38dd}

@media(prefers-reduced-motion:reduce){.battle-pet-hud.skill-casting,.battle-skill-callout,.battle-skills button.skill-used,.slot-tile.level-up,.dungeon-pet-card.level-up,.slot-tile.level-up::before,.dungeon-pet-card.level-up::after,.level-up-event{animation:none}.battle-skill-callout,.level-up-event{opacity:1;transform:translate(-50%,-56%)}}

/* 2026-07 pastel dashboard + dense expedition/roster layout. Battle HUD keeps
   its high-contrast theme; these overrides are scoped to the dashboard. */
.dungeon-shell{--dq-ink:#3d3550;--dq-line:#6e6180;--dq-gold:#f3ad38;--dq-mint:#55c797;--dq-blue:#64b9e8;padding:7px 7px 22px;background:linear-gradient(180deg,#d9f6ff 0,#f5eaff 38%,#fff3d2 100%);color:var(--dq-ink)}
.dungeon-header{padding:8px 9px;border:2px solid #756687;background:linear-gradient(135deg,#fff9db,#e8ddff);box-shadow:inset 0 2px 0 #fff,2px 2px 0 #b8a9c8}.dungeon-header h1{font-size:16px;color:#403451}.dungeon-header .eyebrow,.dungeon-panel .eyebrow{color:#a76700;font-size:9px}.dungeon-summary{gap:4px}.dungeon-summary span{padding:5px 6px;background:#fff;border:1px solid #b8a8c8;color:#554963;font-size:10px}.dungeon-summary b{color:#16845e}
.dungeon-panel{margin-top:8px;padding:9px;border:2px solid #8b7b9d;background:rgba(255,255,255,.82);box-shadow:inset 0 2px 0 #fff,2px 2px 0 #c8b9d6}.panel-title{gap:7px}.panel-title h2{font-size:12px;color:#403451}.panel-title>strong{padding:5px 6px;border:1px solid #8b7041;background:#ffd879;color:#58400c;font-size:8px}.system-note{margin:6px 0 0;color:#6e6379;font-size:9px;line-height:1.6}
.dungeon-zone{padding:5px 6px;margin-top:5px;border:1px solid #a597b3;background:linear-gradient(135deg,#efffe8,#e9f8ff)}.dungeon-zone h3{margin:0 0 4px;color:#4a4058;font-size:10px}.stage-row{gap:4px}.stage-node{min-height:42px;border:1px solid #796b89;background:#cfc4ef;color:#403657;box-shadow:inset 0 2px 0 #eee7ff;font-size:11px}.stage-node small{font-size:8px;color:#6f4161}.stage-node.cleared{background:#a9ebcc;box-shadow:inset 0 2px 0 #ddfff0}.stage-node.selected{outline:2px solid #ef9e22;transform:translateY(-1px)}.dungeon-actions{margin-top:6px}.cube-action{padding:8px;border:2px solid #756687;box-shadow:inset 0 2px 0 #fff4c4,2px 2px 0 #b9a8c6;color:#41364f}.cube-action.primary{background:#ffbd73;box-shadow:inset 0 2px 0 #ffe8bf,2px 2px 0 #cba071}.cube-action.small{padding:6px;background:#aee8d1;color:#245c4a;font-size:10px}
.assignment-empty{color:#857b8e;border-color:#c7bbcF}.fatigue-guide{margin-top:5px;padding:6px 7px;background:#fff9df;border-color:#cfc08a;color:#665c55}.fatigue-guide-title{color:#8f650d}
.dungeon-pets{gap:5px;margin-top:7px}.dungeon-pet-card{min-height:0;padding:4px;border-width:2px;background:linear-gradient(155deg,#fff,#f4efff);box-shadow:inset 0 2px 0 #fff;color:#403650;cursor:default}.dungeon-pet-card:hover{background:linear-gradient(155deg,#fffdf3,#eee8ff)}.dungeon-pet-card.common{border-color:#a59cab}.dungeon-pet-card.in-party{box-shadow:inset 0 2px 0 #e9fff7,0 0 0 1px rgba(58,178,134,.22)}
.dungeon-pet-card>.pet-stars{position:absolute;z-index:4;top:4px;left:4px;max-width:62%;text-align:left}.pet-stars{display:block;color:#f2a91f;font-size:8px;line-height:1.15;letter-spacing:-1px;text-shadow:0 1px #fff,0 0 3px #ffd76c;overflow-wrap:anywhere}.pet-stars.empty{color:#b9adb8;text-shadow:none}.pet-stars.compact{margin-top:2px;font-size:7px;white-space:normal}.pet-detail-title-wrap>.pet-stars{margin-top:4px;font-size:8px;letter-spacing:0}
.pet-card-hit{appearance:none;display:flex;flex:1;flex-direction:column;align-items:center;gap:3px;width:100%;min-width:0;padding:14px 0 2px;border:0;background:transparent;color:inherit;font-family:inherit;cursor:pointer}.pet-card-hit:focus-visible{outline:2px solid #e99b22;outline-offset:1px}.dungeon-pet-card .pet-grid-portrait{margin:0 auto}.dungeon-pet-card .pet-grid-portrait .pet-portrait{width:64px;height:64px}.pet-grid-name{color:#403650;font-size:10px}.pet-grid-meta b{color:#8a5b06}.pet-grid-fatigue-meter{height:5px;background:#eadfe5;border-color:#9f8f9b}
.pet-detail-star-bonus{margin:6px 0 0;padding:5px;background:#fff3c9;border:1px solid #e4c36d;color:#76530d;font-size:9px;line-height:1.5}
.pet-detail-dialog{background:linear-gradient(145deg,#fffdf4,#eee7ff);color:#41364e;border-color:#81728f;box-shadow:inset 0 2px 0 #fff,0 12px 40px #51445c66}.pet-detail-header{background:linear-gradient(145deg,#fff7cf,#dff4ff);border-color:#9385a0}.pet-detail-title-wrap h2{color:#43364e}.pet-detail-title-wrap p{color:#6d6374}.pet-detail-section{background:#fff;border-color:#cbbfd4}.pet-detail-section h3{color:#865d0a}.pet-detail-stat,.pet-attribute{background:#f3eef8;border-color:#d5c9dd}.pet-detail-stat span,.pet-attribute span{color:#746a7c}.pet-detail-stat b{color:#44384f}.pet-detail-actions{background:#fffdf4f2;border-color:#cbbfd4}.pet-skill{background:#eee5fa;border-left-color:#9f74bd}.pet-skill b{color:#704e0a}.pet-skill small{color:#665b70}.pet-experience-meter{background:#e1d7e7;border-color:#9d8fa7}
.stone-target,.stone-card{background:#fff;border-color:#b9acC5}.stone-card strong{color:#403650}.stone-card span{color:#746a7d}.stone-gem{background:#ece5f4;border-color:#a99bb5}.empty-note{color:#786d80}
.game-mode-nav{background:#f1e9fa;border-color:#8d7c9b;box-shadow:0 -4px 12px #6b5d7540}.game-mode-nav button{border-color:#b8aac3;background:#eee5f5;color:#65596d}.game-mode-nav button.active{background:linear-gradient(#fff2b9,#f5d47b);color:#493d48;box-shadow:inset 0 3px 0 #fff8db}
@media(max-width:360px){.dungeon-shell{padding:5px 5px 20px}.dungeon-header{display:flex}.dungeon-summary{max-width:140px;margin-top:0}.dungeon-pet-card .pet-grid-portrait .pet-portrait{width:58px;height:58px}.dungeon-zone{padding:4px}.stage-node{min-height:38px}}

/* 2026-07 idle-game theme sync.
   Dungeon dashboard reuses the mining game's brown pixel panels and gold accents. */
.dungeon-shell{--dq-ink:var(--ink);--dq-dark:var(--bg);--dq-panel:var(--panel);--dq-line:var(--line);--dq-gold:var(--gold);--dq-mint:var(--unc);--dq-red:#ef765f;--dq-blue:var(--rare);padding:12px 12px 28px;color:var(--ink);background-color:var(--bg);background-image:linear-gradient(rgba(0,0,0,.25) 1px,transparent 1px),linear-gradient(90deg,rgba(0,0,0,.25) 1px,transparent 1px);background-size:16px 16px}
.dungeon-header.bar{padding:10px 12px;border:3px solid var(--line);background:var(--panel);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.dungeon-header-main{display:flex;flex:1;min-width:0;align-items:center;gap:8px;flex-wrap:nowrap}
.dungeon-who{display:flex;align-items:center;justify-content:flex-end;min-height:20px;color:var(--muted);font-size:11px}.dungeon-who .cosmetic-badges{margin-right:5px}
.dungeon-summary{flex:none;flex-wrap:nowrap;gap:4px;white-space:nowrap}.dungeon-summary span{padding:4px 6px;border:2px solid var(--line);background:var(--panel2);color:var(--muted);font-size:10px}.dungeon-summary b{color:var(--gold)}
.dungeon-panel{margin-top:12px;padding:12px;border:3px solid var(--line);background:var(--panel);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}
.panel-title h2{color:var(--ink);font-size:14px}.dungeon-panel .eyebrow{color:var(--gold);font-size:9px}.panel-title>strong{padding:6px 8px;border:2px solid var(--line);background:var(--gold);color:#2a1d0c;font-size:10px}.system-note{color:var(--muted)}
.dungeon-zone{padding:7px;margin-top:7px;border:2px solid var(--line);background:var(--panel2);box-shadow:inset -2px -2px 0 rgba(0,0,0,.28),inset 2px 2px 0 rgba(255,255,255,.05)}.dungeon-zone h3{color:var(--ink)}.dungeon-zone h3>small{color:var(--muted)}
.stage-node{border:2px solid var(--line);background:var(--dirt);color:var(--ink);box-shadow:inset -2px -2px 0 var(--dirt-lo),inset 2px 2px 0 rgba(255,255,255,.06)}.stage-node small{color:#d7bd98}.stage-node.cleared{background:#376b4e;box-shadow:inset -2px -2px 0 #244a36,inset 2px 2px 0 rgba(255,255,255,.08)}.stage-node.selected{outline:2px solid var(--gold);background:#7a592e;transform:translateY(-1px)}
.cube-action{border:3px solid var(--line);color:#2a1d0c;box-shadow:inset -3px -3px 0 var(--gold-lo),inset 3px 3px 0 rgba(255,255,255,.14)}.cube-action.primary{background:var(--gold)}.cube-action.small{background:var(--unc);color:#173b2a;box-shadow:inset -3px -3px 0 #34845a,inset 3px 3px 0 rgba(255,255,255,.15)}
.assignment-empty{color:var(--muted);border-color:var(--dirt)}.fatigue-guide{border-color:var(--line);background:#4a3a24;color:#d5bd98}.fatigue-guide-title{color:var(--gold)}
.dungeon-pet-card{border-color:var(--line);background:var(--panel2);color:var(--ink);box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.05)}.dungeon-pet-card:hover{background:#443522}.dungeon-pet-card.common{border-color:var(--com)}.dungeon-pet-card.uncommon{border-color:var(--unc)}.dungeon-pet-card.rare{border-color:var(--rare)}.dungeon-pet-card.epic{border-color:var(--epic)}.dungeon-pet-card.legendary{border-color:var(--leg)}
.pet-grid-name{color:var(--ink)}.pet-grid-meta{color:var(--muted)}.pet-grid-meta b{color:var(--gold)}.pet-grid-fatigue-meter{border-color:var(--line);background:var(--dirt-lo)}
.pet-card-hit:focus-visible{outline-color:var(--gold)}
.pet-detail-dialog{border-color:var(--line);background:var(--panel);color:var(--ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 12px 40px #000}.pet-detail-header,.pet-detail-section{border-color:var(--line);background:var(--panel2)}.pet-detail-title-wrap h2{color:var(--gold)}.pet-detail-title-wrap p,.pet-detail-stat span,.pet-attribute span,.pet-skill small{color:var(--muted)}.pet-detail-section h3,.pet-skill b{color:var(--gold)}.pet-detail-stat,.pet-attribute{border-color:var(--line);background:var(--panel)}.pet-detail-stat b{color:var(--ink)}.pet-detail-actions{border-color:var(--line);background:#231a13f2}.pet-detail-star-bonus{border-color:var(--gold-lo);background:#4a3921;color:#f1d894}.pet-skill{background:#3b2d20;border-left-color:var(--gold)}.pet-experience-meter{border-color:var(--line);background:var(--dirt-lo)}
.stone-target,.stone-card{border-color:var(--line);background:var(--panel2)}.stone-card strong{color:var(--ink)}.stone-card span,.empty-note{color:var(--muted)}.stone-gem{border-color:var(--line);background:var(--panel)}
/* 장신구도 스톤과 같은 3층(기본→파스텔→idle 테마)을 밟는다. 이 줄이 없으면 주변 패널이 갈색일 때
   가방 카드만 흰색으로 남는다 — 기본층의 #fff 를 덮는 규칙이 여기밖에 없기 때문. */
.ta-target,.ta-mine,.ta-row{border-color:var(--line);background:var(--panel2);color:var(--ink)}.ta-row.me{border-color:var(--gold);background:#4a3921}.ta-empty{color:var(--muted)}
.admin-preview-note{border-color:var(--gold-lo);background:#4a3921;color:#f1d894}
.tribe-note{color:var(--muted)}.tribe-map{border-color:var(--line)}
.op-back{border-color:var(--line);background:var(--panel2);color:var(--ink)}.op-tribe{color:var(--ink)}
.op-tickets{background:var(--panel2);color:var(--ink)}
.ts-cell,.ts-chip{border-color:var(--line);background:var(--panel2);color:var(--ink)}
.ts-k{color:var(--muted)}.ts-cell b{color:var(--ink)}
.ts-cell b.is-empty{color:#ff9b9b}
.ts-chip.is-mine{border-color:var(--unc);background:var(--panel)}
.tg-step{border-color:var(--line);background:var(--panel2)}
.tg-head b,.tg-body b{color:var(--ink)}.tg-head span,.tg-body span,.tg-goal{color:var(--muted)}
.tg-step.is-done{border-color:var(--unc);background:var(--panel)}
.tg-step.is-done .tg-mark{color:var(--unc)}
.tribe-map-note{color:var(--muted)}.tribe-map-note b{color:var(--ink)}
.op-er-why{color:var(--ink)}
.op-erosion{border-color:var(--line);background:var(--panel2)}
.op-er-head b{color:var(--ink)}.op-er-head,.op-er-note{color:var(--muted)}
.op-er-bar{border-color:var(--line);background:var(--panel)}
/* ⚠ 밝은 배경용 초록(#2f7d5a)을 그대로 두면 어두운 패널에서 **대비 2.67:1** 이라 9px 글씨가
   묻힌다(2026-08-21 실측). 기존 '긍정' 토큰을 쓰면 7.1:1 이다. */
.op-er-head span.is-on{color:var(--unc)}
.gw-tier{border-color:var(--line);background:var(--panel2);color:var(--ink)}.gw-tier .gw-goal,.gw-tier .gw-state,.gw-head,.gw-note{color:var(--muted)}.gw-head b{color:var(--gold)}.gw-bar{border-color:var(--line);background:var(--panel)}.gw-tier.is-done{border-color:var(--unc);background:#2f4a3a}.gw-tier.is-done .gw-state{color:#bfe8d2}
.guild-card,.guild-member{border-color:var(--line);background:var(--panel2);color:var(--ink)}.guild-card .g-meta{color:var(--muted)}.guild-member{background:var(--panel)}
.trinket-card,.trinket-filters button{border-color:var(--line);background:var(--panel2);color:var(--ink)}.trinket-filters button[aria-selected="true"]{background:var(--gold);color:#2a1d0c}.trinket-card small{color:var(--muted)}.trinket-card .t-stats{color:var(--rare)}.trinket-empty{border-color:var(--line);color:var(--muted)}
.trinket-card.tk-worn{border-color:var(--unc)}.t-slots i{border-color:var(--line);background:var(--panel)}.t-slots .ts-on{border-color:var(--unc);background:var(--panel2)}.t-slots .ts-more{color:var(--muted)}
.dungeon-state{border:3px solid var(--line);background:var(--panel);color:var(--ink);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06)}

/* 스티커 장착 시에도 던전 패널의 기본 픽셀 테두리를 유지한다. 던전 헤더(.bar)는 idle .bar 규칙의
   외곽 글로우·타이틀 글로우·코너 핀을 상속하고, 상태 패널과 내부 활성 탭도 같은 색을 공유한다. */
body.has-sticker .dungeon-panel,
body.has-sticker .dungeon-state{box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 0 9px var(--sticker)}
/* 탭 바 전체에는 아주 옅은 빛을 두르고, 선택된 탭은 한 단계 더 또렷하게 표시한다. */
body.has-sticker .dungeon-tabs{filter:drop-shadow(0 0 3px var(--sticker))}
body.has-sticker .dtab.active{box-shadow:inset 0 3px 0 var(--sticker),0 0 6px var(--sticker);text-shadow:0 0 7px var(--sticker)}

/* The runtime measures the rendered Dungeon header so navigation keeps the
   exact same border-box width and horizontal position at every resolution. */
.game-mode-nav{left:var(--mode-nav-left,50%);width:var(--mode-nav-width,calc(min(100vw,460px) - 24px));max-width:none;transform:translateX(var(--mode-nav-shift,-50%));background:#15111b;border-color:#08060a;box-shadow:0 -4px 0 rgba(0,0,0,.28)}.game-mode-nav button{border-color:#08060a;background:#2a2232;color:#a99dad}.game-mode-nav button.active{background:linear-gradient(#5f4b78,#40314f);color:#fff7df;box-shadow:inset 0 3px 0 var(--gold)}
body.has-sticker .game-mode-nav{box-shadow:0 -4px 0 rgba(0,0,0,.28),0 0 12px var(--sticker)}
body.has-sticker .game-mode-nav button.active{box-shadow:inset 0 3px 0 var(--sticker);text-shadow:0 0 8px var(--sticker)}
body.has-sticker .game-mode-nav button.active span{filter:drop-shadow(0 0 4px var(--sticker))}
.battle-top-actions{display:flex;align-items:stretch;gap:4px;pointer-events:auto}.battle-top-actions button{min-width:0}
@media(max-width:360px){.dungeon-shell{padding:8px 8px 24px}.dungeon-header.bar{gap:5px;padding:8px}.dungeon-header-main{gap:5px}.dungeon-who{font-size:9px}.dungeon-who .cb{width:18px;height:18px;padding:0}.dungeon-who .cb img{width:14px;height:14px}.dungeon-summary{gap:2px}.dungeon-summary span{padding:2px 3px;font-size:9px}}
@media(max-width:360px){.game-mode-nav{width:var(--mode-nav-width,calc(100vw - 16px))}.battle-top-actions{gap:2px}}
@media(max-width:320px){.dungeon-header.bar{display:block}.dungeon-header-main{justify-content:flex-start}.dungeon-who{justify-content:flex-start;margin-top:7px}}

/* ===== 배틀 허브(비동기 PvP P1): 출전 분리 · 대표팀 편성 · 3D 단상 · TOP10 랭킹 ===== */
.cube-action.battle{background:#7c4a5e;color:#fff2f4;box-shadow:inset -3px -3px 0 #4e2c3b,inset 3px 3px 0 rgba(255,255,255,.12)}

.battle-podium{position:relative;height:206px;margin-top:4px;border:2px solid var(--line);background:linear-gradient(180deg,#2b1a4e 0%,#6a2d6e 30%,#c8506a 50%,#f09a5e 60%,#1d1130 62%,#0c0714 100%);overflow:hidden}
.battle-podium canvas{display:block}
.battle-podium-hint{position:absolute;z-index:2;left:50%;top:50%;width:80%;transform:translate(-50%,-50%);text-align:center;color:#d7c8ea;font-size:10px;line-height:1.6}
.podium-fallback{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center;gap:10px;padding:14px}
.podium-fallback .podium-slot{display:flex;flex-direction:column;align-items:center;width:76px}
.podium-fallback .podium-figure{display:grid;place-items:center;width:64px;height:64px}
.podium-fallback .podium-figure .pet-portrait{width:60px;height:60px}
.podium-fallback .podium-initial{color:#ffe6a6;font:700 12px "Galmuri11","Galmuri9",sans-serif}
.podium-fallback .podium-pillar{width:100%;border:2px solid #0d0911;border-bottom:0}
.podium-fallback .podium-slot.center .podium-pillar{height:52px;background:#5a3f74}
.podium-fallback .podium-slot.left .podium-pillar{height:34px;background:#3f4760}
.podium-fallback .podium-slot.right .podium-pillar{height:34px;background:#5c4a30}
.podium-fallback .podium-empty{margin:auto;color:#cbbcde;font-size:10px}

.battle-hub-summary{display:flex;align-items:center;gap:8px;margin-top:8px}
.battle-hub-stats{display:grid;grid-template-columns:repeat(2,1fr);gap:5px;flex:1;min-width:0}
.battle-stat{padding:6px 5px;background:var(--panel2);border:2px solid var(--line);text-align:center}
.battle-stat:last-child{grid-column:1/-1}
.battle-stat span{display:block;color:var(--muted);font-size:9px}
.battle-stat b{display:block;margin-top:3px;color:var(--gold);font-size:14px}
.battle-stat b.battle-stat-depleted{color:#e08a8a}
#startBattle{position:relative}
/* 알림 배지는 버튼 모서리 '밖'에 걸친다 — 버튼(.cta-hero)이 스택 컨텍스트(isolation:isolate)라
   z-index 를 광택 스윕(::after=1)·아이콘/라벨(=2)보다 위로 올려야 숫자가 가려지지 않는다.
   클릭은 버튼이 받아야 하므로 pointer-events 는 뚫는다. ⚠ 부모 overflow 를 hidden 으로 되돌리면
   -7px 만큼 튀어나온 부분이 잘려 숫자가 안 보인다(2026-08-04 회귀 수정). */
.battle-inbox-badge{position:absolute;top:-8px;right:-8px;z-index:5;display:grid;place-items:center;min-width:22px;height:22px;padding:0 5px;border:2px solid #2b0b12;border-radius:11px;background:#ec5f78;color:#fff;font:700 9px "Galmuri11","Galmuri9",sans-serif;box-shadow:0 2px 7px rgba(0,0,0,.45);pointer-events:none}
.battle-section-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}.battle-section-head>div:first-child{min-width:0}.battle-section-head strong,.battle-section-head span{display:block}.battle-section-head strong{color:#ffe09a;font-size:11px}.battle-section-head>div:first-child>span{margin-top:3px;color:var(--muted);font-size:8px}.battle-section-head>#battleCandidateState{color:#9bd8c2;font-size:8px;text-align:right}
.battle-matchmaking{margin-top:11px;padding:10px;border:2px solid var(--line);background:linear-gradient(150deg,rgba(92,57,131,.2),rgba(23,18,29,.88))}
.battle-matchmaking{border-color:#7858a6;box-shadow:inset 0 0 14px rgba(109,58,214,.12)}
.battle-candidate-list{display:flex;flex-direction:column;gap:6px}.battle-candidate-empty,.battle-activity-empty{padding:14px 8px;color:var(--muted);font-size:9px;line-height:1.6;text-align:center}
.battle-candidate-row{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:8px;border:2px solid #59466e;background:linear-gradient(135deg,#332641,#211a29);color:var(--ink);font-family:"Galmuri11","Galmuri9",sans-serif;text-align:left;cursor:pointer}.battle-candidate-row:hover{border-color:#a886d4;filter:brightness(1.08)}.candidate-pets{display:flex;gap:2px}.candidate-pets .pet-portrait,.candidate-pets .rank-pet-blank{width:32px;height:32px}.candidate-info{min-width:0}.candidate-info b,.candidate-info small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.candidate-info b{font-size:10px;color:#fff1c9}.candidate-info small{margin-top:3px;color:#a99dad;font-size:8px}.candidate-score{text-align:right}.candidate-score b,.candidate-score small{display:block;white-space:nowrap}.candidate-score b{color:#8fe0bd;font-size:10px}.candidate-score small{margin-top:3px;color:#cbb7db;font-size:8px}
.battle-hub-actions{margin-top:11px}.battle-activity-open{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;width:100%;min-height:56px;padding:9px 11px;border:2px solid #4c6970;background:linear-gradient(135deg,#1d3336,#172329);color:var(--ink);font-family:"Galmuri11","Galmuri9",sans-serif;text-align:left;cursor:pointer;box-shadow:inset 0 0 14px rgba(70,177,173,.10)}.battle-activity-open:hover{border-color:#79cfc6;filter:brightness(1.08)}.battle-activity-open:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.battle-activity-open-icon{display:grid;place-items:center;width:34px;height:34px;border:1px solid #5c9d98;background:#153238;font-size:16px}.battle-activity-open-copy{min-width:0}.battle-activity-open-copy strong,.battle-activity-open-copy small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.battle-activity-open-copy strong{color:#ddfff7;font-size:11px}.battle-activity-open-copy small{margin-top:4px;color:#a7d8d2;font-size:8px}.battle-activity-open-arrow{color:#95e4d8;font-size:25px;line-height:1}.battle-activity-modal{position:fixed;z-index:94;inset:0;background:rgba(7,5,9,.78)}.battle-activity-dialog{display:flex;flex-direction:column;border:3px solid #526d72;background:linear-gradient(160deg,#272134,#171c22);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 12px 40px #000}.battle-activity-dialog-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px;padding:13px 13px 11px;border-bottom:1px solid #45575e;background:linear-gradient(100deg,rgba(87,183,171,.12),transparent)}.battle-activity-dialog-head .eyebrow{color:#85d5cb;font-size:8px;letter-spacing:.11em}.battle-activity-dialog-head h3{margin:3px 0 0;color:#fff0c3;font-size:14px}.battle-activity-dialog-head p{margin:4px 0 0;color:#a7d8d2;font-size:8px}.battle-activity-close{flex:0 0 auto;width:30px;height:30px;padding:0;border:2px solid var(--line);background:#5c3540;color:#fff;font:700 16px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.battle-activity-close:hover{background:#754450}.battle-activity-dialog-body{overflow-y:auto;padding:10px}.battle-activity-dialog-body .battle-activity-tabs{margin-bottom:9px}.battle-activity-tabs{display:flex;gap:3px}.battle-activity-tabs button{padding:5px 7px;border:1px solid #504759;background:#26202d;color:#9e93a6;font:700 8px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.battle-activity-tabs button.active{border-color:#d8b768;background:#554125;color:#ffe8aa}.battle-activity-list{display:flex;flex-direction:column;gap:5px;margin:0;padding:0;list-style:none}.battle-activity-row{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:7px 8px;border:1px solid #4b4252;background:#211b27;color:var(--ink);font-family:"Galmuri11","Galmuri9",sans-serif;text-align:left;cursor:pointer}.battle-activity-row:hover{border-color:#7c9b9d;background:#273139}.battle-activity-row:focus-visible{outline:2px solid var(--gold);outline-offset:2px}.battle-activity-row.unread{border-color:#d4ad58;background:linear-gradient(90deg,rgba(212,173,88,.16),#211b27)}.battle-activity-row.unread::before{content:"";position:absolute;left:-4px;top:50%;width:7px;height:7px;transform:translateY(-50%);border-radius:50%;background:#ffd56e;box-shadow:0 0 7px #ffd56e}.activity-kind{display:grid;place-items:center;min-height:31px;border:1px solid #4d4554;background:#18131d;color:#bcb0c3;font-size:8px}.activity-kind.defense{border-color:#577b70;color:#9cdec8}.activity-main{min-width:0}.activity-main b,.activity-main small{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.activity-main b{font-size:9px}.activity-main small{margin-top:3px;color:#8f8496;font-size:7px}.activity-result{text-align:right}.activity-result b,.activity-result small{display:block;white-space:nowrap}.activity-result b{font-size:9px}.activity-result small{margin-top:3px;color:#9b90a1;font-size:7px}.activity-result.win b{color:#7fddb8}.activity-result.loss b{color:#ef9292}.activity-result.draw b{color:#c2b7c8}body.battle-activity-modal-open{overflow:hidden}

/* 최근 대전은 허브 레이아웃과 분리된 뷰포트 오버레이다. safe-area를 제외한 영역 안에서만 그린다.
   - height:100dvh(고정) 대신 inset:0 로 실제 표시 뷰포트에 핀한다. iOS 등에서 dvh 가 툴바 상태에 따라
     보이는 높이보다 커져 컨테이너가 넘치는 것을 막는다.
   - 중앙정렬은 place-items:center(=align-items:center) 대신 자식의 margin:auto 로 한다. align-items:center 는
     자식이 컨테이너보다 길면 위쪽을 뷰포트 밖으로 잘라먹지만, margin:auto 는 넘칠 때 상단부터 붙고
     컨테이너 overflow-y:auto 로 스크롤되어 상단이 잘리지 않는다. */
.battle-activity-modal{box-sizing:border-box;display:flex;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:calc(12px + env(safe-area-inset-top)) calc(12px + env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) calc(12px + env(safe-area-inset-left))}
.battle-activity-dialog{box-sizing:border-box;margin:auto;width:min(100%,420px);max-width:100%;max-height:100%;min-width:0;min-height:0;overflow:hidden}
.battle-activity-dialog-head{flex:0 0 auto}
.battle-activity-dialog-body{flex:1 1 auto;min-height:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.battle-activity-list,.battle-activity-row{min-width:0}

/* 돌아가기 버튼을 가로로 넓혀 클릭 영역 확보(패널 타이틀 우측). */
#battleHubBack{min-width:104px;padding-left:18px;padding-right:18px;white-space:nowrap}

.battle-ranking-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:11px;padding-bottom:5px;border-bottom:2px solid var(--line)}
.battle-ranking-head strong{color:var(--gold);font-size:12px}
#myBattleRank{color:var(--muted);font-size:9px}
.battle-ranking-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.battle-ranking-list .battle-rank-empty{padding:16px;text-align:center;color:var(--muted);font-size:10px}
.battle-rank-row{display:grid;grid-template-columns:26px auto minmax(0,1fr) auto;align-items:center;gap:7px;width:100%;padding:6px 7px;border:2px solid var(--line);background:var(--panel2);color:var(--ink);font-family:"Galmuri11","Galmuri9",sans-serif;text-align:left;cursor:pointer;touch-action:manipulation}
.battle-rank-row:hover{background:#3a2c1c}
.battle-rank-row.me{border-color:var(--gold);box-shadow:inset 0 0 0 1px var(--gold)}
/* 상위 3위 강조 — 순위가 높을수록 카드가 크고 테두리 색이 다르다(1위 금 › 2위 하늘 실버 › 3위 초록 실버). */
.battle-rank-row.r1{grid-template-columns:46px auto minmax(0,1fr) auto;padding:11px 10px;gap:9px;border:3px solid #ffd66d;background:linear-gradient(135deg,#5a4620,var(--panel2));box-shadow:0 0 0 1px rgba(255,214,109,.5),0 0 16px rgba(255,214,109,.32)}
.battle-rank-row.r1 .rank-num{font-size:16px}
.battle-rank-row.r1 .rank-pets .pet-portrait,.battle-rank-row.r1 .rank-pets .rank-pet-blank{width:38px;height:38px}
.battle-rank-row.r1 .rank-meta b{font-size:12px}
.battle-rank-row.r1 .rank-score b{font-size:13px}
.battle-rank-row.r2{grid-template-columns:42px auto minmax(0,1fr) auto;padding:9px 9px;gap:8px;border:2px solid #bcd8ec;background:linear-gradient(135deg,#3a4450,var(--panel2));box-shadow:0 0 0 1px rgba(188,216,236,.42),0 0 12px rgba(188,216,236,.24)}
.battle-rank-row.r2 .rank-num{font-size:14px}
.battle-rank-row.r2 .rank-pets .pet-portrait,.battle-rank-row.r2 .rank-pets .rank-pet-blank{width:33px;height:33px}
.battle-rank-row.r2 .rank-meta b{font-size:11px}
.battle-rank-row.r3{grid-template-columns:40px auto minmax(0,1fr) auto;padding:8px 8px;gap:8px;border:2px solid #a9d8b9;background:linear-gradient(135deg,#2f4636,var(--panel2));box-shadow:0 0 0 1px rgba(169,216,185,.4),0 0 12px rgba(169,216,185,.22)}
.battle-rank-row.r3 .rank-num{font-size:13px}
.battle-rank-row.r3 .rank-pets .pet-portrait,.battle-rank-row.r3 .rank-pets .rank-pet-blank{width:30px;height:30px}
.battle-rank-row .rank-num{font:700 12px "Galmuri11","Galmuri9",sans-serif;text-align:center;color:var(--gold)}
/* 1~3위 순위 배지 이미지(메달 이모지 대체). 순위 열 폭에 맞춰 크기 차등. */
.battle-rank-row .rank-badge{display:block;width:34px;height:34px;margin:0 auto;object-fit:contain;filter:drop-shadow(0 1px 2px rgba(0,0,0,.5))}
.battle-rank-row.r1 .rank-badge{width:44px;height:44px}
.battle-rank-row.r2 .rank-badge{width:40px;height:40px}
.battle-rank-row.r3 .rank-badge{width:38px;height:38px}
.battle-rank-row .rank-pets{display:flex;gap:2px}
.battle-rank-row .rank-pets .pet-portrait{width:26px;height:26px;border:1px solid var(--line);background:rgba(255,255,255,.06)}
/* 얼굴 초상 기본 배경(편성 슬롯과 동일한 금빛). GHUB 종별 portraitBg 인라인 스타일이 있으면 그 값이 우선한다. */
.battle-rank-row .rank-pets .pet-portrait-face{border-color:#8b691e;background:linear-gradient(145deg,#fff4b8,#e8b42d)}
.rank-pet-blank,.opp-pet-blank{display:grid;place-items:center;width:26px;height:26px;background:var(--panel);border:1px solid var(--line);color:var(--muted);font-size:11px}
.battle-rank-row .rank-meta{min-width:0}
.battle-rank-row .rank-meta b{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:10px}
.battle-rank-row .rank-meta b em{font-style:normal;color:#3ec78d;font-size:8px}
.battle-rank-row .rank-meta small{display:block;margin-top:2px;color:var(--muted);font-size:9px}
.battle-rank-row .rank-score{text-align:right}
.battle-rank-row .rank-score b{display:block;color:var(--gold);font-size:11px}
.battle-rank-row .rank-score small{display:block;color:var(--muted);font-size:8px}

.battle-opponent-detail{position:fixed;z-index:95;inset:0;display:grid;place-items:center;padding:16px;background:rgba(7,5,9,.78)}
.battle-opponent-detail .opp-card{position:relative;width:min(100%,340px);padding:16px;background:var(--panel);border:3px solid var(--line);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 12px 40px #000}
.opp-close{position:absolute;top:6px;right:6px;width:30px;height:30px;border:2px solid var(--line);background:#5c3540;color:#fff;font:700 16px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer}
.opp-head{padding-right:28px}.opp-head b{color:var(--gold);font-size:13px}.opp-head span{display:block;margin-top:3px;color:var(--muted);font-size:9px}
/* ⚠ `flex-wrap` 이 없으면 공성 수비 9마리가 한 줄에 눌려 카드 밖으로 밀린다(대전은 3마리라
   지금까지 드러나지 않았다). */
.opp-pets{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:12px 0}
.opp-pet{display:grid;place-items:center;width:60px;height:60px;background:var(--panel2);border:2px solid var(--line)}
.opp-pet .pet-portrait{width:54px;height:54px}
.opp-pet.pet-rarity-legendary{border-color:var(--leg)}.opp-pet.pet-rarity-epic{border-color:var(--epic)}.opp-pet.pet-rarity-rare{border-color:var(--rare)}.opp-pet.pet-rarity-uncommon{border-color:var(--unc)}
/* 상대 펫 셀 = 클릭 시 상세보기(편성 화면과 동일). 버튼 기본 스타일 리셋 + 눌림 피드백. */
.opp-pet-btn{appearance:none;padding:0;color:inherit;font:inherit;cursor:pointer;touch-action:manipulation}
.opp-pet-btn:hover{filter:brightness(1.12)}
.opp-pet-btn:active{transform:translateY(1px)}
/* 상대 펫 상세 모달은 상대 상세(z-index 95) 위에 뜬다(편성 펫 상세 스타일 재사용). */
#oppPetDetailModal{z-index:100}
/* 이름 옆 속성 배지 정렬 + 상세 카드에 맞춰 또렷하게(작은 elem-sm 대신 24px 고정). */
.opp-detail-title{display:flex;align-items:center;gap:6px}
.opp-detail-title .elem-badge{flex:0 0 auto;width:24px;height:24px}
.opp-detail-title>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.opp-score{display:flex;justify-content:center;gap:14px;color:var(--muted);font-size:10px}.opp-score b{color:var(--gold)}
.opp-challenge{width:100%;margin-top:12px;padding:10px;border:2px solid var(--line);background:#3a323f;color:#b7abbc;font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:not-allowed;opacity:.7}
.opp-challenge-ready{background:#6d3ad6;color:#fff;border-color:#8f63d6;cursor:pointer;opacity:1}
.opp-challenge-ready:hover{background:#7d47e6}
.opp-challenge-ready:disabled{cursor:progress;opacity:.75}
/* 상대 스카우팅 리포트 — 팀 비교·대표 펫·시너지·도전 정보를 한 흐름으로 묶는다. */
.battle-opponent-detail .opp-card.opp-scout-card{--opp-accent:#b0b0b0;position:relative;width:min(100%,420px);max-height:calc(100dvh - 32px);overflow-y:auto;padding:0;border-color:var(--opp-accent);background:radial-gradient(circle at 12% 0,rgba(255,255,255,.08),transparent 34%),linear-gradient(160deg,#282030,#17131d 68%);box-shadow:inset -3px -3px 0 rgba(0,0,0,.35),inset 3px 3px 0 rgba(255,255,255,.06),0 0 18px rgba(0,0,0,.65),0 16px 42px #000;scrollbar-width:thin}
.opp-scout-card::before{content:"";position:absolute;z-index:1;top:0;left:12px;right:12px;height:2px;background:linear-gradient(90deg,transparent,var(--opp-accent),transparent);opacity:.9;pointer-events:none}
.opp-scout-card.opp-accent-fire{--opp-accent:#ff7a3c}.opp-scout-card.opp-accent-ice{--opp-accent:#6fd8ff}.opp-scout-card.opp-accent-storm{--opp-accent:#ffd23c}.opp-scout-card.opp-accent-water{--opp-accent:#4aa3ff}.opp-scout-card.opp-accent-void{--opp-accent:#c07de0}.opp-scout-card.opp-accent-light{--opp-accent:#ffe27a}.opp-scout-card.opp-accent-nature{--opp-accent:#6fd66a}.opp-scout-card.opp-accent-earth{--opp-accent:#d0a566}.opp-scout-card.opp-accent-beast{--opp-accent:#b0b0b0}
.opp-scout-card .opp-close{position:sticky;z-index:5;float:right;top:8px;margin:8px 8px -38px 0}
.opp-scout-head{display:grid;grid-template-columns:58px minmax(0,1fr);align-items:center;gap:10px;padding:16px 48px 13px 14px;border-bottom:1px solid #4b3e55;background:linear-gradient(100deg,rgba(255,255,255,.045),transparent)}
.opp-rank-mark{display:grid;place-items:center;width:54px;height:54px;color:var(--gold);background:#17131ddd;border:2px solid #51445c;box-shadow:inset 0 0 0 2px #0e0b12;font:700 14px "Galmuri11","Galmuri9",sans-serif}.opp-rank-mark img{display:block;width:46px;height:46px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.55))}.opp-rank-mark.rank-1{border-color:#e8c265}.opp-rank-mark.rank-2{border-color:#bcd8ec}.opp-rank-mark.rank-3{border-color:#a9d8b9}
.opp-scout-identity{min-width:0}.opp-eyebrow{display:block;color:var(--opp-accent);font:700 7px "Galmuri11","Galmuri9",sans-serif;letter-spacing:.12em}.opp-scout-identity h2{overflow:hidden;margin:4px 0 0;color:#fff6dc;font-size:14px;line-height:1.35;text-overflow:ellipsis;white-space:nowrap}.opp-scout-identity p{margin:5px 0 0;color:#b7abbc;font-size:8px;line-height:1.5}
.opp-record{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;padding:9px 12px 0}.opp-record>span{min-width:0;padding:7px 4px;background:#15111bb8;border:1px solid #45394f;text-align:center}.opp-record small,.opp-record b{display:block}.opp-record small{color:#92869a;font-size:7px}.opp-record b{overflow:hidden;margin-top:4px;color:#f4e9f8;font-size:9px;text-overflow:ellipsis;white-space:nowrap}
.opp-scout-section{margin:9px 12px 0;padding:9px;background:#15111bbd;border:1px solid #493d53}.opp-section-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:8px}.opp-section-head b{color:#ffe09a;font-size:9px}.opp-section-head span{color:#8f8398;font-size:7px;text-align:right}.opp-scout-note{margin:0;color:#a99ead;font-size:8px;line-height:1.6}
.opp-matchup-verdict.good{color:#82dfba}.opp-matchup-verdict.even{color:#d8cde0}.opp-matchup-verdict.warn{color:#efc66e}.opp-matchup-verdict.danger{color:#ff9488}.opp-power-row{display:grid;grid-template-columns:34px minmax(0,1fr) 68px;align-items:center;gap:6px;margin-top:5px;color:#9e92a5;font-size:8px}.opp-power-row>b{text-align:right;color:#f3e8f7;font-size:9px}.opp-power-track{height:7px;overflow:hidden;background:#302638;border:1px solid #0d0a10}.opp-power-track i{display:block;height:100%;min-width:5px}.opp-power-track .mine{background:linear-gradient(90deg,#3a806b,#79d9b7)}.opp-power-track .foe{background:linear-gradient(90deg,#74425a,var(--opp-accent))}.opp-matchup-meta{display:flex;justify-content:space-between;gap:8px;margin-top:7px;padding-top:6px;border-top:1px dashed #3e3347;color:#a89dae;font-size:7px}
.opp-scout-pets{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.opp-scout-pet{appearance:none;min-width:0;padding:7px 4px;background:linear-gradient(160deg,#33293d,#211a28);border:2px solid #51435d;color:#eee3f2;font-family:"Galmuri11","Galmuri9",sans-serif;text-align:center;cursor:pointer;touch-action:manipulation}.opp-scout-pet:hover{filter:brightness(1.1);transform:translateY(-1px)}.opp-scout-pet:active{transform:translateY(1px)}.opp-scout-pet:focus-visible{outline:2px solid var(--opp-accent);outline-offset:2px}.opp-scout-pet.loading{cursor:progress;opacity:.68}.opp-scout-pet.pet-rarity-legendary{border-color:var(--leg);box-shadow:inset 0 0 10px rgba(243,198,91,.12)}.opp-scout-pet.pet-rarity-epic{border-color:var(--epic)}.opp-scout-pet.pet-rarity-rare{border-color:var(--rare)}.opp-scout-pet.pet-rarity-uncommon{border-color:var(--unc)}
.opp-scout-portrait{position:relative;display:grid;place-items:center;width:72px;height:72px;max-width:100%;margin:0 auto 5px;background:var(--opp-portrait-bg,linear-gradient(145deg,#fff4b8,#e8b42d));border:1px solid #8b691e;box-shadow:inset 0 2px 0 rgba(255,255,255,.48),inset 0 -6px 12px rgba(90,52,0,.18)}.opp-scout-portrait.opp-scout-portrait-event{background:var(--opp-portrait-bg,linear-gradient(125deg,#ff5db1,#ffd166,#6ee7a8,#7cf5ff,#a78bfa,#ff5db1));background-size:320% 320%;border-color:#ffd9f2;animation:portraitHolo 6s ease-in-out infinite alternate}.opp-scout-portrait .pet-portrait{position:relative;z-index:1;width:70px;height:70px;max-width:100%}.opp-scout-pet-blank{position:relative;z-index:1;display:grid;place-items:center;width:70px;height:70px;max-width:100%;color:#6d5525;font-size:18px}.opp-scout-pet>b{display:block;overflow:hidden;color:#fff4d8;font-size:8px;line-height:1.4;text-overflow:ellipsis;white-space:nowrap}.opp-scout-pet-meta{display:block;overflow:hidden;margin-top:3px;color:#aaa0b1;font-size:7px;text-overflow:ellipsis;white-space:nowrap}.opp-role{display:inline-block;margin-top:5px;padding:2px 4px;background:#292130;border:1px solid #51435d;color:#c8bbce;font-size:7px}.opp-role.role-tank{border-color:#6f9ec7;color:#a9d8ff}.opp-role.role-ranged{border-color:#62a77f;color:#a7e7bd}.opp-role.role-aoe{border-color:#a06dc2;color:#dcb4f5}.opp-role.role-support{border-color:#c1a35e;color:#ffe09a}.opp-role.role-melee{border-color:#b46868;color:#f2aaaa}
@media(prefers-reduced-motion:reduce){.opp-scout-portrait.opp-scout-portrait-event{animation:none}}
.opp-team-metrics{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px;margin-top:7px}.opp-team-metrics>span{min-width:0;padding:5px 3px;background:#211a28;text-align:center}.opp-team-metrics small,.opp-team-metrics b{display:block}.opp-team-metrics small{color:#8e8296;font-size:7px}.opp-team-metrics b{overflow:hidden;margin-top:3px;color:#dcd0e2;font-size:8px;text-overflow:ellipsis;white-space:nowrap}
.opp-strategy-list,.opp-tactic-list{display:flex;flex-wrap:wrap;gap:5px}.opp-strategy-chip{display:flex;flex:1 1 130px;align-items:center;justify-content:space-between;gap:6px;padding:6px;background:rgba(141,99,214,.15);border:1px solid rgba(141,99,214,.45)}.opp-strategy-chip b{color:#ffe7a6;font-size:8px}.opp-strategy-chip small{color:#cbbce0;font-size:7px;white-space:nowrap}.opp-tactic-head{margin-top:9px}.opp-tactic-chip{padding:4px 6px;background:#21312e;border:1px solid #416d60;color:#a9e7d3;font-size:7px}.opp-strategy-empty,.opp-strategy-loading{color:#978b9e;font-size:8px;line-height:1.6}.opp-strategy-loading .opp-spin{margin-right:3px}
.opp-scout-actions{position:sticky;z-index:4;bottom:0;margin-top:10px;padding:8px 12px 12px;background:linear-gradient(180deg,rgba(23,19,29,.2),#17131d 25%);border-top:1px solid #493d53}.opp-challenge-meta{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px;color:#b9aec0;font-size:7px}.opp-challenge-meta span:first-child{color:#f0d58e}.opp-scout-actions .opp-challenge{margin-top:7px;min-height:40px}.opp-scout-actions .opp-challenge-ready{border-color:var(--opp-accent);box-shadow:0 0 10px rgba(109,58,214,.25)}
@media(max-width:380px){.battle-opponent-detail{padding:8px}.battle-opponent-detail .opp-card.opp-scout-card{max-height:calc(100dvh - 16px)}.opp-scout-head{grid-template-columns:50px minmax(0,1fr);padding-left:10px}.opp-rank-mark{width:48px;height:48px}.opp-rank-mark img{width:41px;height:41px}.opp-record,.opp-scout-section{margin-left:8px;margin-right:8px}.opp-record{padding-left:0;padding-right:0}.opp-scout-pets{gap:4px}.opp-scout-pet{padding-left:3px;padding-right:3px}.opp-scout-portrait{width:64px;height:64px}.opp-scout-portrait .pet-portrait,.opp-scout-pet-blank{width:62px;height:62px}.opp-power-row{grid-template-columns:30px minmax(0,1fr) 58px}.opp-scout-actions{padding-left:8px;padding-right:8px}}
/* 로딩 스피너(도전 버튼·랭킹) — 데이터 로드 전 COMING SOON 오표기 방지 */
.opp-spin{display:inline-block;width:10px;height:10px;border:2px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:opp-spin .7s linear infinite;vertical-align:-1px}
@keyframes opp-spin{to{transform:rotate(360deg)}}
.battle-rank-loading{display:flex;align-items:center;justify-content:center;gap:8px;padding:22px;color:var(--muted);font:700 10px "Galmuri11","Galmuri9",sans-serif;list-style:none}
/* 대전 결과 카드 */
.battle-result-card{text-align:center}
.result-verdict{font:700 16px "Galmuri11","Galmuri9",sans-serif;margin:6px 0}
.result-win .result-verdict{color:var(--gold)}
.result-loss .result-verdict{color:#e08a8a}
.result-draw .result-verdict{color:#b7abbc}
.result-opponent{display:inline-block;margin:0 0 7px;padding:4px 7px;border:1px solid #527b74;background:rgba(65,133,122,.16);color:#b7efe0;font:700 9px "Galmuri11","Galmuri9",sans-serif}
.result-rating{font:700 10px "Galmuri11","Galmuri9",sans-serif;color:#c7bcd0;margin-bottom:10px}
/* 두 팀(각 3마리)을 세로로 쌓아 모달 폭을 넘지 않게(가로 나열 시 넘침 → 펫이 카드 밖으로 삐져나옴) */
.result-teams{display:flex;flex-direction:column;align-items:center;gap:8px;margin:8px 0}
.result-team{display:flex;flex-direction:column;align-items:center;gap:4px}
.result-team-label{font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#9a8fa3}
.battle-result-card .opp-pets{margin:2px 0}
/* 편성 세트효과 발동 배지 */
.result-set-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:2px;max-width:100%}
.set-badge{font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#ffe7a6;background:rgba(141,99,214,.22);border:1px solid rgba(141,99,214,.5);border-radius:6px;padding:2px 6px;white-space:nowrap}
/* 속성 아이콘 배지(펫 카드·슬롯·상대 셀 공용) — SVG 글리프(속성색 currentColor) + 색상 링 */
.elem-badge{flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;line-height:0;width:20px;height:20px;border-radius:50%;color:var(--elem-c,#8a8a8a);background:rgba(20,14,26,.78);border:1.5px solid var(--elem-c,#8a8a8a);box-shadow:0 0 6px var(--elem-c,#8a8a8a)}
.elem-svg{width:76%;height:76%;display:block}
.elem-sm{width:19px;height:19px}
.elem-fire{--elem-c:#ff7a3c}.elem-ice{--elem-c:#6fd8ff}.elem-storm{--elem-c:#ffd23c}.elem-water{--elem-c:#4aa3ff}
.elem-void{--elem-c:#c07de0}.elem-light{--elem-c:#ffe27a}.elem-nature{--elem-c:#6fd66a}.elem-earth{--elem-c:#d0a566}.elem-beast{--elem-c:#b0b0b0}
.slot-tile{position:relative}
.opp-pet{position:relative}
.opp-pet-elem{position:absolute;top:-5px;right:-5px;z-index:3}
/* 편성 세트 미리보기 + 상대 세트 배지 */
.formation-set-preview{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin-top:6px;min-height:16px}
.formation-set-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px}
.formation-set-none{font:700 8px "Galmuri11","Galmuri9",sans-serif;color:#7a7080}
.opp-set-badges{display:flex;flex-wrap:wrap;justify-content:center;gap:4px;margin:6px 0 2px}
/* VS 를 카드 폭 전체에 걸친 구분선으로 */
.result-vs{font:700 11px "Galmuri11","Galmuri9",sans-serif;color:#8f63d6;letter-spacing:1px}
.battle-result-card .result-vs{display:flex;align-items:center;gap:10px;align-self:stretch}
.battle-result-card .result-vs::before,.battle-result-card .result-vs::after{content:"";flex:1;height:2px;background:var(--line);opacity:.55}
.result-meta{font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#8d8292;margin-top:8px}
/* PvP 3D 리플레이 컨트롤(배틀 패널 위 오버레이) */
.pvp-replay-controls{position:absolute;left:50%;bottom:calc(14px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100% - 20px);transform:translateX(-50%);display:flex;flex-wrap:nowrap;align-items:center;justify-content:center;gap:10px;white-space:nowrap;z-index:40;background:rgba(20,14,26,.74);border:2px solid #6d3ad6;border-radius:9px;padding:6px 12px}
.pvp-replay-tag{font:700 10px "Galmuri11","Galmuri9",sans-serif;color:#e6d8ff;letter-spacing:.02em}
.pvp-weather-tag{font:700 9px "Galmuri11","Galmuri9",sans-serif;color:#bfe3ff;background:rgba(60,120,180,.28);border:1px solid rgba(120,180,230,.5);border-radius:6px;padding:3px 8px}
.pvp-replay-skip{font:700 10px "Galmuri11","Galmuri9",sans-serif;color:#fff;background:#6d3ad6;border:none;border-radius:6px;padding:6px 11px;cursor:pointer}
.pvp-replay-skip:hover{background:#7d47e6}
@media(max-width:360px){.battle-podium{height:172px}.battle-hub-summary{flex-wrap:wrap}.battle-stat b{font-size:12px}.battle-section-head{align-items:flex-start}.battle-candidate-row{grid-template-columns:auto minmax(0,1fr)}.candidate-score{grid-column:2;text-align:left}.battle-activity-row{grid-template-columns:42px minmax(0,1fr)}.activity-result{grid-column:2;text-align:left}}
@media(max-width:360px){.battle-activity-modal{padding:calc(8px + env(safe-area-inset-top)) calc(8px + env(safe-area-inset-right)) calc(8px + env(safe-area-inset-bottom)) calc(8px + env(safe-area-inset-left))}.battle-activity-dialog-head{padding:11px}.battle-activity-dialog-body{padding:8px}.battle-activity-open{padding-left:9px;padding-right:9px}}

/* 이번 시즌 보상 — 3D 쇼케이스 + 티어 리스트 */
.season-rewards{margin-top:14px;padding-top:12px;border-top:2px solid var(--line)}
.season-head{display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.season-title .eyebrow{color:var(--muted);letter-spacing:.06em}
.season-title h3{margin:2px 0 0;color:var(--gold);font-size:12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:210px}
.season-meta{display:flex;flex-direction:column;align-items:flex-end;gap:3px;text-align:right;flex:0 0 auto}
.season-status{padding:2px 7px;border:1px solid var(--line);font:700 9px "Galmuri11","Galmuri9",sans-serif;letter-spacing:.04em;color:var(--muted)}
.season-status.status-active{border-color:#3ec78d;color:#3ec78d}
.season-status.status-draft{border-color:var(--muted);color:var(--muted)}
.season-status.status-ended{border-color:var(--gold);color:var(--gold)}
.season-status.status-distributed{border-color:var(--rare);color:var(--rare)}
.season-countdown{color:#d7c8ea;font-size:9px}
/* 트랙 B — 이번 시즌 출전 등급. 제한이 없는 시즌에는 아예 숨긴다(mode-hidden). */
.season-rarity-gate{color:#ffd8a8;font-size:9px;border:1px solid rgba(255,190,110,.45);border-radius:6px;padding:1px 5px;white-space:nowrap}
.season-showcase{position:relative;height:220px;margin-top:8px;border:2px solid var(--line);background:#1a1126;overflow:hidden;box-shadow:0 0 14px rgba(255,120,220,.30),0 0 28px rgba(124,245,255,.18)}
/* 썸네일 렌더러가 아직 로드되지 않았거나(콜드 로드) 초상 렌더에 실패했을 때 펫 그림 대신 들어가는
   자리지킴 — .reward-slot-figure 안. 보상 펫이 없는 티어는 애초에 슬롯에 오지 않는다. */
.reward-showcase-trophy{font-size:72px;line-height:1;filter:drop-shadow(0 0 12px rgba(255,210,122,.6))}
.season-tier-list{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
/* 얼굴 칸은 내용 폭 — 보상 펫이 여러 종이면 그만큼 가로로 늘어난다(고정 폭이면 2번째부터 잘린다). */
.season-tier-row{display:grid;grid-template-columns:auto max-content minmax(0,1fr);align-items:center;gap:9px;padding:6px 8px;border:2px solid var(--line);background:var(--panel2)}
.season-tier-row.pet-rarity-legendary{border-color:var(--leg)}
.season-tier-row.pet-rarity-epic{border-color:var(--epic)}
.season-tier-row.pet-rarity-rare{border-color:var(--rare)}
.season-tier-row.pet-rarity-uncommon{border-color:var(--unc)}
.season-tier-rank{color:var(--gold);font:700 10px "Galmuri11","Galmuri9",sans-serif;white-space:nowrap}
.season-tier-figure{display:flex;align-items:center;gap:3px;height:40px}
/* 종이 늘어날수록 얼굴을 줄여 한 줄에 담는다(줄바꿈 금지 — 넘치면 잘려 보인다). */
.season-tier-figure[data-count="3"] .pet-portrait{width:32px;height:32px}
.season-tier-figure[data-count="4"] .pet-portrait,.season-tier-figure[data-count="5"] .pet-portrait{width:26px;height:26px}
/* 시즌 보상 티어 얼굴 — 알록달록 배경(보상 펫 강조). 종별 커스텀 배경(인라인)·이벤트가 있으면 그쪽 우선. */
.season-tier-figure .pet-portrait{width:40px;height:40px;border:1px solid var(--line);background:linear-gradient(135deg,#ff8ac4,#ffd98a,#8af0c0,#8ad4ff,#c0a3ff)}
.season-tier-blank{display:grid;place-items:center;width:40px;height:40px;background:var(--panel);border:1px solid var(--line);font-size:16px}
.season-tier-reward{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0}
.season-tier-pet{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink);font-size:10px}
.season-tier-points{color:var(--gold);font:700 10px "Galmuri11","Galmuri9",sans-serif;white-space:nowrap}
.season-tier-none{color:var(--muted);font-size:9px}
.season-tier-empty{padding:14px;text-align:center;color:var(--muted);font-size:10px}
.season-claim{margin-top:9px;padding:9px;border:2px solid #8b6ed8;background:linear-gradient(135deg,rgba(92,49,139,.35),rgba(26,17,38,.96));display:flex;align-items:center;justify-content:space-between;gap:10px}
.season-claim>div{display:flex;min-width:0;flex-direction:column;gap:4px}
.season-claim span{color:#cbb9ee;font-size:9px}
.season-claim strong{color:#fff3bd;font:700 10px "Galmuri11","Galmuri9",sans-serif;line-height:1.5}
.season-claim button{flex:0 0 auto;border:1px solid #ffd166;background:#f0b94a;color:#25162f;padding:7px 10px;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;box-shadow:0 0 10px rgba(255,209,102,.25)}
.season-claim button:hover:not(:disabled){filter:brightness(1.1);transform:translateY(-1px)}
.season-claim button:disabled{border-color:var(--line);background:var(--panel);color:var(--muted);cursor:not-allowed;box-shadow:none}
.season-claim.claimed{border-color:#4fc99a;background:rgba(34,121,90,.2)}
/* 시즌 미설정 → 예시(피카츄) 미리보기 상태를 명확히 구분 */
.season-preview .season-showcase{border-style:dashed}
.season-preview .season-tier-empty{opacity:.85}

/* ===== 시즌 보상 쇼케이스: 무지개 홀로그램 시상식 ===== */
/* 홀로그램 배경 — background-position(매 프레임 재페인트) 대신 오버사이즈 레이어를 transform 이동(GPU 합성). 부모 overflow:hidden 이 클립. */
.season-showcase::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(125deg,#ff5db1,#ffd166,#6ee7a8,#7cf5ff,#a78bfa,#ff5db1);opacity:.85;will-change:transform;animation:rewardHolo 9s ease-in-out infinite alternate}
.reward-stage{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,rgba(14,7,22,0) 24%,rgba(14,7,22,.58) 100%)}
.reward-stage-rays{position:absolute;left:50%;top:44%;width:620px;height:620px;transform:translate(-50%,-50%);background:repeating-conic-gradient(rgba(255,255,255,0) 0 9deg,rgba(255,255,255,.11) 9deg 18deg);-webkit-mask:radial-gradient(circle,#000 0 34%,transparent 66%);mask:radial-gradient(circle,#000 0 34%,transparent 66%);will-change:transform;animation:rewardRays 26s linear infinite}
.reward-stage-confetti{position:absolute;inset:0;pointer-events:none}
.reward-stage-confetti i{position:absolute;top:-24px;width:var(--s);height:calc(var(--s)*.55);background:var(--c);border-radius:1px;box-shadow:0 0 6px var(--c);will-change:transform;animation:rewardConfetti var(--dur) linear var(--delay) infinite}
.reward-stage-confetti i:nth-child(3n){border-radius:50%;height:var(--s)}
.reward-stage-confetti i:nth-child(2n){opacity:.8}
/* 보상 펫 라인업 — 순위 순으로 왼쪽부터 **모두 같은 크기**로 세운다.
   슬롯 폭은 `flex:1 1 0` 이 남은 폭을 균등 분배해 정하므로(상한 160px = 1마리일 때의 기존 크기),
   보상 펫이 3마리든 5마리든 CSS 를 고치지 않아도 자동으로 줄어들며 들어간다.
   순위 뱃지·단상은 두지 않는다 — 바로 아래 '순위별 보상' 목록이 같은 정보를 이미 보여준다. */
.reward-lineup{position:absolute;left:8px;right:8px;top:47%;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;gap:var(--reward-gap,10px)}
/* 단상은 없앴지만 시상식 문구는 남긴다(도형 없이 하단 캡션으로).
   펫 이름과 같은 무지개 흐름(rewardName)을 입혀 기존 연출 톤을 유지한다. */
/* 폭을 글자에 맞춘다 — left:0/right:0 으로 넓게 깔면 그라디언트(요소 폭의 2배)가 가운데 글자
   위를 거의 지나가지 않아 색이 멈춘 것처럼 보인다(펫 이름은 슬롯 폭이라 글자가 요소를 채운다). */
.reward-stage-caption{position:absolute;left:50%;bottom:7px;transform:translateX(-50%);white-space:nowrap;font:700 9px "Galmuri11","Galmuri9",sans-serif;letter-spacing:.14em;background:linear-gradient(90deg,#ff5db1,#ffd166,#6ee7a8,#7cf5ff,#a78bfa,#ff5db1);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rewardName 3s linear infinite;filter:drop-shadow(0 1px 2px rgba(20,8,30,.95)) drop-shadow(0 0 6px rgba(255,200,120,.4))}
.reward-lineup[data-count="4"],.reward-lineup[data-count="5"]{--reward-gap:6px}
.reward-slot{position:relative;display:flex;flex-direction:column;align-items:center;flex:1 1 0;min-width:0;max-width:160px}
/* 정사각 비율 — 슬롯 폭이 곧 펫 크기가 된다(마리 수에 따라 자동 축소). */
.reward-slot-figure{width:100%;aspect-ratio:1;display:grid;place-items:center;will-change:transform;animation:rewardFloat 3.4s ease-in-out calc(var(--i,0) * .45s) infinite alternate}
.reward-slot-figure .pet-portrait{width:100%;height:100%;filter:drop-shadow(0 6px 10px rgba(8,3,16,.7)) drop-shadow(0 0 12px rgba(255,255,255,.35))}
.reward-slot-name{max-width:100%;margin-top:-2px;text-align:center;padding:0 2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:700 11px "Galmuri11","Galmuri9",sans-serif;background:linear-gradient(90deg,#ff5db1,#ffd166,#6ee7a8,#7cf5ff,#a78bfa,#ff5db1);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:rewardName 3s linear infinite;filter:drop-shadow(0 1px 2px rgba(0,0,0,.9)) drop-shadow(0 0 4px rgba(0,0,0,.75))}
.reward-lineup[data-count="4"] .reward-slot-name,.reward-lineup[data-count="5"] .reward-slot-name{font-size:9px}
.season-tier-row:first-child{background:linear-gradient(90deg,rgba(255,93,177,.16),rgba(255,209,102,.13),rgba(124,245,255,.16));box-shadow:0 0 10px rgba(255,170,235,.16)}
@keyframes rewardHolo{from{transform:translate3d(-12%,-12%,0)}to{transform:translate3d(12%,12%,0)}}
@keyframes rewardRays{to{transform:translate(-50%,-50%) rotate(360deg)}}
@keyframes rewardConfetti{0%{transform:translate(0,0) rotate(0)}100%{transform:translate(var(--drift),250px) rotate(660deg)}}
@keyframes rewardFloat{from{transform:translateY(0)}to{transform:translateY(-6px)}}
@keyframes rewardName{to{background-position:200% 0}}
/* 감속 모드 완화 버전 — 정지가 아니라 '약하게'.
   Windows '애니메이션 표시'(SPI_GETCLIENTAREAANIMATION)를 끈 PC 는 브라우저가 항상
   prefers-reduced-motion:reduce 를 보고한다. 사내 PC 다수가 이 상태라, 여기서 쇼케이스를
   통째로 animation:none 하면 시상식 연출이 전부 얼어붙는다(제보 2026-08-03 — 배경·펫 이름·
   하단 캡션이 안 움직인다). 그래서 위치가 움직이는 연출만 느리고 작게 완화하고,
   자리를 옮기지 않는 무지개 마퀴(rewardName: background-position 만 흐름)는 그대로 재생한다. */
@keyframes rewardHoloCalm{from{transform:translate3d(-5%,-5%,0)}to{transform:translate3d(5%,5%,0)}}
@keyframes rewardFloatCalm{from{transform:translateY(0)}to{transform:translateY(-2px)}}
@media (prefers-reduced-motion:reduce){
  .season-showcase::before{animation-name:rewardHoloCalm;animation-duration:22s}
  .reward-stage-rays{animation-duration:72s;opacity:.6}
  .reward-stage-confetti i{animation-duration:calc(var(--dur) * 1.9)}
  .reward-slot-figure{animation-name:rewardFloatCalm;animation-duration:5.2s}
}
@media(max-width:360px){.season-showcase{height:186px}.season-title h3{max-width:150px}.reward-lineup{--reward-gap:6px}.reward-slot{max-width:132px}.reward-slot-name{font-size:10px}}

/* ===== 2026-07-17 원탭 편성 개편 — 슬롯 보드 + 편성 모드 도크 + 카드 배지 =====
   펫 카드마다 흩어져 있던 [팀 편성]/[⚔ 배틀] 버튼을 없애고,
   도크에서 모드를 고르면 카드 전체가 그 모드의 토글 버튼이 된다(원탭 편성). */
/* 슬롯 보드: 전투 팀(3)/배틀 대표팀(3)을 고정 칸으로 항상 노출. 빈 칸을 누르면 그 편성 모드가 열린다. */
.roster-lanes{display:grid;grid-template-columns:1fr;gap:8px;margin-top:10px}
.roster-lane{min-width:0;padding:8px;border:2px solid var(--line);background:var(--panel2);box-shadow:inset -2px -2px 0 rgba(0,0,0,.25),inset 2px 2px 0 rgba(255,255,255,.04)}
.roster-lane.party-lane{border-left:4px solid var(--unc)}
.roster-lane.battle-lane{border-left:4px solid var(--gold)}
.roster-lane-title{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-bottom:7px}
.roster-lane-title strong{font-size:11px;color:var(--ink);white-space:nowrap}
.roster-lane-title span{font-size:9px;color:var(--muted)}
.roster-lane-actions{display:flex;gap:4px;flex:none}
.roster-lane-actions button{min-height:30px;padding:4px 9px;border:2px solid var(--line);background:#3f805c;color:#e7fff0;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}
.roster-lane-actions button.danger{background:#7c4038;color:#ffe3dc}
.roster-lane-actions button:disabled{opacity:.45;cursor:not-allowed}
.roster-lane-actions button.hidden{display:none}  /* 등록 완료(변경 없음)면 '대표팀 등록' 숨김 */
/* '대표팀 등록'이 눌러야 할 다음 동작일 때 — 공통 전광판 링(.mq-ring)을 배틀색으로 두른다.
   예전엔 버튼 배경에 직접 점선을 깔았는데 골드 배경과 겹쳐 지저분했다. */
.roster-lane-actions button.needs-register{color:#2a1d0c;background-color:var(--gold)}
@keyframes ctaGlow{0%,100%{box-shadow:0 0 4px var(--gold)}50%{box-shadow:0 0 13px var(--gold),0 0 5px #fff7dd}}
.battle-team-state{padding:3px 6px;border:2px solid var(--line);background:var(--panel);color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}
.battle-team-state.ok{color:#173b2a;background:var(--unc)}
.battle-team-state.dirty{color:#2a1d0c;background:var(--gold);animation:battleStatePulse 1.6s ease-in-out infinite}
@keyframes battleStatePulse{0%,100%{box-shadow:none}50%{box-shadow:0 0 8px var(--gold)}}
.roster-slot{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.slot-tile{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:3px;min-width:0;min-height:88px;padding:8px 4px 6px;border:2px solid var(--line);background:var(--panel);text-align:center}
.slot-tile.filled.party{box-shadow:inset 0 3px 0 rgba(95,211,138,.4)}
.slot-tile.filled.battle{box-shadow:inset 0 3px 0 rgba(242,193,78,.45)}
.slot-tile b{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;color:var(--ink);font-size:9px;font-weight:700;line-height:1.3}
.slot-name-txt{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
.slot-tile small{display:block;width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--muted);font-size:9px;line-height:1.3}
.slot-face{display:block;line-height:0}
.slot-order{position:absolute;top:-2px;left:-2px;z-index:2;display:grid;place-items:center;width:16px;height:16px;background:var(--unc);color:#173b2a;border:2px solid var(--line);font:700 9px "Galmuri11","Galmuri9",sans-serif;font-style:normal}
.slot-x{position:absolute;top:-2px;right:-2px;z-index:3;display:grid;place-items:center;width:22px;height:22px;padding:0;border:2px solid var(--line);background:#7c4038;color:#ffe3dc;font:700 10px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}
.slot-x:hover{background:#96504a}
.slot-tile.empty{justify-content:center;border-style:dashed;border-color:var(--dirt);background:transparent;color:var(--muted);cursor:pointer;font-size:20px;line-height:1}
.slot-tile.empty:hover,.slot-tile.empty:focus-visible{border-color:var(--gold);color:var(--gold);outline:none}
/* 빈 슬롯의 '펫 선택 중' 강조는 공통 전광판 링(.mq-ring)이 담당한다 —
   파일 하단 '공통 전광판 링' 섹션 참고. 예전의 4변 점선(slotMarch)은 픽셀이 깨져 보이고
   레인마다 구현이 따로 놀아서 폐기했다. */
/* 편성 모드 도크(.assign-dock)는 2026-07-28 편성 보드 개편에서 없어졌다 —
   지금은 파일 하단 '편성 보드 재편' 섹션의 .formation-board / .fb-tabs 가 그 역할을 한다. */
/* 펫 목록 정렬 바 — 모드 안내 문구가 있던 자리(펫 목록 바로 위).
   기준이 7개라 좁은 화면에서는 줄바꿈 대신 가로 스크롤로 흘린다(스크롤바는 숨김 — 픽셀 UI 를 깬다). */
.pet-sort-bar{display:flex;align-items:center;gap:7px;margin:8px 2px 0}
.pet-sort-label{flex:none;color:var(--muted);font-size:10px}
.pet-sort-btns{display:flex;gap:4px;min-width:0;overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none}
.pet-sort-btns::-webkit-scrollbar{display:none}
.pet-sort-btns button{flex:none;min-height:28px;padding:4px 9px;border:2px solid var(--line);background:#2a2232;color:#a99dad;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}
.pet-sort-btns button:hover{background:#332a3d;color:#d6c9dd}
.pet-sort-btns button.active{background:#584669;border-color:#8a74a0;color:#fff6df;box-shadow:inset 0 2px 0 #7c66904d}
/* 카드 배지 — 어느 편성에 들어가 있는지를 카드 안에서 바로 보여준다.
   칩 본체(.pb / .pb-*)는 2026-07-28 아이콘화 때 파일 하단 '배치 라벨' 섹션으로 옮겼다. */
.pet-badges{display:flex;justify-content:center;width:100%}
/* 카드 우상단 ⓘ — 편성 모드 중에도 상세 정보로 가는 고정 통로 */
.pet-info-btn{position:absolute;z-index:5;top:2px;right:2px;display:grid;place-items:center;width:26px;height:26px;padding:0;border:2px solid var(--line);background:var(--panel);color:var(--gold);font:700 12px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}
.pet-info-btn:hover{background:var(--gold);color:#2a1d0c}
.dungeon-pet-card.in-battle{box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.05),0 0 0 2px var(--gold-lo)}
.dungeon-pet-card.ineligible{opacity:.55;filter:saturate(.6)}
/* 모드 활성 중 호버 — 카드 전체가 눌리는 버튼임을 레인 색으로 예고 */
.dungeon-pets[data-mode="party"] .dungeon-pet-card:not(.ineligible):hover{border-color:var(--unc)}
.dungeon-pets[data-mode="battle"] .dungeon-pet-card:hover{border-color:var(--gold)}
@media(max-width:360px){
  .roster-slot{gap:4px}
  .slot-tile{min-height:80px}
  .slot-face .pet-portrait{width:38px;height:38px}
  .roster-lane-actions button{padding:4px 6px}
}
@media(prefers-reduced-motion:reduce){.battle-team-state.dirty{animation:none}.roster-lane-actions button.needs-register{animation:none;border-color:#fff7dd;box-shadow:0 0 8px var(--gold)}}

/* ===== 던전 CTA 히어로 버튼 — '선택 스테이지 출전' / '배틀 허브' (2026-07-17) =====
   두 핵심 액션이 밋밋해 한눈에 안 들어오던 문제 개편. 픽셀 테마는 유지하되 네 가지 모션 어휘로
   시선을 잡는다: ① 대각선 광택 스윕(통과 후 한 사이클 쉼) ② 숨쉬는 오라 글로우(금색/진홍 위상 반대)
   ③ 살아있는 아이콘(⛏ 스윙 · ⚔ 진동) ④ 눌리는 픽셀 베벨. 전역 .cube-action 규칙(idle 테마 싱크·배틀
   허브 섹션) 뒤에 위치해 배경/베벨을 이긴다. 진행 중(:disabled)·prefers-reduced-motion 에서는
   과한 움직임을 멈추고 정적 글로우로 정착. 스코프는 .cta-hero/.cta-gold/.cta-ember 신규 클래스 전용. */
.dungeon-actions{gap:9px;margin-top:11px}
/* overflow 는 visible — 광택 스윕(::after)은 background 라 자기 박스를 넘지 않으므로 클립이 불필요하고,
   hidden 이면 버튼 모서리에 걸친 알림 배지(.battle-inbox-badge)가 잘려 숫자가 안 보인다. */
.cube-action.cta-hero{position:relative;isolation:isolate;overflow:visible;display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;padding:11px 10px;font-size:13px;letter-spacing:.4px;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.22)}
.cta-hero .cta-icon{position:relative;z-index:2;display:inline-block;font-size:16px;line-height:1;transform-origin:60% 80%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.28))}
.cta-hero .cta-label{position:relative;z-index:2}

/* 광택 스윕 — 대각선 하이라이트가 지나간 뒤 한 사이클 쉬어 과하지 않게. text/icon 아래(z-index:1). */
.cta-hero::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.16) 43%,rgba(255,255,255,.62) 50%,rgba(255,255,255,.16) 57%,transparent 66%);
  background-size:250% 100%;background-repeat:no-repeat;background-position:-140% 0;
  animation:ctaSheen 4.6s cubic-bezier(.4,0,.2,1) infinite}
@keyframes ctaSheen{0%{background-position:-140% 0}24%{background-position:170% 0}100%{background-position:170% 0}}

/* 금색 출전(주인공) — 몰튼 골드가 천천히 흐르는 그라디언트 + 금빛 숨쉬는 오라 + ⛏ 스윙.
   오라는 filter(overflow 밖으로 번짐), 몰튼 드리프트는 background-position(스윕과 별개 축)로 표현. */
.cube-action.cta-gold{background:linear-gradient(150deg,#e7a637 0%,#f7cf6a 42%,#ffe39c 52%,#f2c14e 66%,#d99a2f 100%);
  background-size:155% 155%;background-position:20% 50%;color:#3a2408;
  box-shadow:inset -3px -3px 0 #a9741f,inset 3px 3px 0 rgba(255,255,255,.42);
  animation:ctaAuraGold 2.6s ease-in-out infinite,ctaGoldFlow 5.5s ease-in-out infinite}
.cta-gold .cta-icon{animation:ctaPickSwing 2.6s ease-in-out infinite}
@keyframes ctaAuraGold{0%,100%{filter:drop-shadow(0 0 1px rgba(255,208,92,.25))}50%{filter:drop-shadow(0 0 8px rgba(255,206,80,.8))}}
@keyframes ctaGoldFlow{0%,100%{background-position:20% 50%}50%{background-position:80% 50%}}
@keyframes ctaPickSwing{0%,58%,100%{transform:rotate(0) translateY(0)}68%{transform:rotate(-16deg) translateY(-1px)}80%{transform:rotate(9deg)}90%{transform:rotate(-4deg)}}

/* 진홍 배틀 허브 — 잉걸불 그라디언트 + 진홍 오라(금색과 위상 반대: -1.3s 지연) + ⚔ 진동. */
.cube-action.cta-ember{background:linear-gradient(150deg,#b23350 0%,#8f2b45 46%,#7c2740 62%,#a5304e 100%);color:#fff1f3;
  box-shadow:inset -3px -3px 0 #5a2131,inset 3px 3px 0 rgba(255,255,255,.22);
  animation:ctaAuraEmber 2.6s ease-in-out infinite;animation-delay:-1.3s}
.cta-ember .cta-icon{animation:ctaSwordShiver 3.2s ease-in-out infinite}
@keyframes ctaAuraEmber{0%,100%{filter:drop-shadow(0 0 1px rgba(255,96,124,.2))}50%{filter:drop-shadow(0 0 9px rgba(255,72,104,.72))}}
@keyframes ctaSwordShiver{0%,84%,100%{transform:rotate(0) scale(1)}88%{transform:rotate(-8deg) scale(1.1)}92%{transform:rotate(8deg)}96%{transform:rotate(-4deg)}}

/* Hover(데스크톱 살짝 들림) · 포커스(고대비 아웃라인) · 눌림(픽셀 베벨 반전) · 진행 중 정지. */
.cube-action.cta-hero:hover{transform:translateY(-1px)}
.cta-hero:focus-visible{outline:3px solid #fff7df;outline-offset:2px}
.cube-action.cta-hero:active{transform:translate(2px,2px)}
.cube-action.cta-gold:active{box-shadow:inset 3px 3px 0 #a9741f,inset -2px -2px 0 rgba(255,255,255,.3)}
.cube-action.cta-ember:active{box-shadow:inset 3px 3px 0 #5a2131,inset -2px -2px 0 rgba(255,255,255,.16)}
.cube-action.cta-hero:disabled{animation:none;cursor:not-allowed;filter:grayscale(.55) brightness(.82);opacity:.92}
.cta-hero:disabled::after{animation:none;opacity:0}
.cta-hero:disabled .cta-icon{animation:none}
@media(max-width:360px){.cube-action.cta-hero{min-height:50px;gap:6px;font-size:12px;padding:9px 7px}.cta-hero .cta-icon{font-size:14px}}
@media(prefers-reduced-motion:reduce){
  .cta-hero::after{animation:none;opacity:.4;background-position:58% 0}
  .cta-gold .cta-icon,.cta-ember .cta-icon{animation:none}
  .cube-action.cta-gold{animation:none;filter:drop-shadow(0 0 5px rgba(255,206,80,.55))}
  .cube-action.cta-ember{animation:none;filter:drop-shadow(0 0 5px rgba(255,80,110,.5))}
}

/* ===== 모드별 2층 하단 탭 — 방치 3개 / 던전 3개 공통 프레임 ===== */
.context-subnav{position:fixed;z-index:69;left:var(--mode-nav-left,50%);width:var(--mode-nav-width,calc(min(100vw,460px) - 24px));height:var(--subnav-height);box-sizing:border-box;transform:translateX(var(--mode-nav-shift,-50%));display:none;gap:0;margin:0;padding:0;background:#15111b;border:3px solid #08060a;border-bottom:0;box-shadow:0 -4px 0 rgba(0,0,0,.24)}
.idle-subnav.tabs{bottom:env(safe-area-inset-bottom);grid-template-columns:repeat(3,minmax(0,1fr))}body.game-mode-authorized .idle-subnav.tabs{bottom:calc(var(--mode-nav-height) + env(safe-area-inset-bottom))}body.game-ready.idle-open .idle-subnav.tabs{display:grid}
.dungeon-tabs.dungeon-subnav{bottom:calc(var(--mode-nav-height) + env(safe-area-inset-bottom));grid-template-columns:repeat(3,minmax(0,1fr))}body.dungeon-authorized.dungeon-open .dungeon-tabs.dungeon-subnav{display:grid}
/* 선택 탭(타임어택·길드)은 운영이 켤 때만 뜬다. 열 수를 함께 늘리지 않으면 늘어난 버튼이
   다음 줄로 접힌다(하단 내비는 높이가 고정이라 접힌 줄이 화면 밖으로 나간다).
   ⚠ 두 기능을 따로 켤 수 있으므로 3·4·5칸을 **조합마다** 지정해야 한다. */
/* ⚠ 숨김은 반드시 `:not()` 으로 건다. `.dtab.dtab-timeattack{display:none}` 처럼 쓰면
   뒤에 오는 `.dtab.dtab-hero{display:flex}`(671행)와 특정성이 같아 **나중 규칙이 이겨**
   꺼져 있어도 탭이 계속 보인다(그러면 5칸이 다 떠서 다음 줄로 접힌다 — 2026-08-16 실제 발생).
   `body:not(...)` 는 클래스 하나만큼 특정성이 높아 순서에 기대지 않는다. */
body:not(.time-attack-open) .dungeon-subnav .dtab.dtab-timeattack,
body:not(.guild-open) .dungeon-subnav .dtab.dtab-guild{display:none}
body.time-attack-open .dungeon-tabs.dungeon-subnav,
body.guild-open .dungeon-tabs.dungeon-subnav{grid-template-columns:repeat(4,minmax(0,1fr))}
body.time-attack-open.guild-open .dungeon-tabs.dungeon-subnav{grid-template-columns:repeat(5,minmax(0,1fr))}
.dtab.dtab-guild{background:linear-gradient(145deg,#5c3f22 0%,#8a6231 43%,#c99a52 55%,#714c28 100%);box-shadow:inset -3px -3px 0 #46301a,inset 3px 3px 0 rgba(255,238,205,.26)}
.dtab.dtab-timeattack{background:linear-gradient(145deg,#1f4f63 0%,#2f7794 43%,#57b3d3 55%,#265f79 100%);box-shadow:inset -3px -3px 0 #173d4d,inset 3px 3px 0 rgba(214,244,255,.26)}

.dtab.dtab-hero{position:relative;isolation:isolate;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:10px;border:3px solid var(--line);font-size:13px;font-weight:700;letter-spacing:.35px;line-height:1;color:#fff;box-shadow:inset -3px -3px 0 rgba(0,0,0,.32),inset 3px 3px 0 rgba(255,255,255,.2);text-shadow:0 1px 0 rgba(0,0,0,.3);transform:translateY(0)}
/* 던전 하위 탭은 어떤 탭 수·브라우저에서도 아이콘 위, 라벨 아래의 한 줄 구조를 유지한다.
   Edge는 폭이 촘촘할 때 기본 가로 flex 배치를 유지해 '자동 훈련'을 두 줄로 분리했으므로,
   축과 줄바꿈 정책을 명시적으로 고정한다. */
.dungeon-subnav .dtab.dtab-hero{min-width:0;min-height:0;height:100%;flex:1 1 0;flex-flow:column nowrap;gap:2px;padding:6px 2px;border:0;border-right:2px solid #08060a;font-size:10px;letter-spacing:0}.dungeon-subnav .dtab.dtab-hero:last-child{border-right:0}
.dtab-hero .dtab-icon,.dtab-hero .dtab-label{position:relative;z-index:2}.dtab-hero .dtab-icon{display:inline-block;font-size:17px;line-height:1;transform-origin:50% 65%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))}
.dungeon-subnav .dtab-hero .dtab-icon{display:block;flex:0 0 auto;font-size:16px}
.dungeon-subnav .dtab-hero .dtab-label{display:block;flex:0 0 auto;white-space:nowrap;word-break:keep-all;overflow-wrap:normal;line-height:1}
.dtab-hero::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.1) 43%,rgba(255,255,255,.48) 50%,rgba(255,255,255,.1) 57%,transparent 66%);background-size:250% 100%;background-repeat:no-repeat;background-position:-140% 0;animation:dtabSheen 4.8s cubic-bezier(.4,0,.2,1) infinite}
.dtab.dtab-team{background:linear-gradient(145deg,#285d4c 0%,#3c8067 43%,#65b891 55%,#2f715a 100%);box-shadow:inset -3px -3px 0 #1d493b,inset 3px 3px 0 rgba(210,255,235,.28);animation:dtabAuraTeam 2.8s ease-in-out infinite}.dtab.dtab-auto{background:linear-gradient(145deg,#7c3f2d 0%,#b96036 43%,#ef9d4e 55%,#a64d2e 100%);box-shadow:inset -3px -3px 0 #6d3027,inset 3px 3px 0 rgba(255,235,190,.28);animation:dtabAuraAuto 2.8s ease-in-out infinite;animation-delay:-.7s}.dtab.dtab-stones{background:linear-gradient(145deg,#403873 0%,#5d4e9e 43%,#8172c7 55%,#4c4187 100%);box-shadow:inset -3px -3px 0 #302957,inset 3px 3px 0 rgba(235,229,255,.26);animation:dtabAuraStones 2.8s ease-in-out infinite;animation-delay:-1.4s}
.dtab-team .dtab-icon{animation:dtabShieldGuard 2.9s ease-in-out infinite}.dtab-auto .dtab-icon{animation:dtabSwordTap 1.9s ease-in-out infinite}.dtab-stones .dtab-icon{animation:dtabGemFloat 2.6s ease-in-out infinite}.dtab-hero.active{border-color:#ffe29c;color:#fffdf4;transform:translateY(-1px)}.dtab-hero:hover{transform:translateY(-2px);filter:brightness(1.08)}.dtab-hero:focus-visible{outline:3px solid #fff7df;outline-offset:2px}.dtab-hero:active{transform:translate(2px,2px)}

.idle-subnav .tab{position:relative;isolation:isolate;overflow:hidden;min-width:0;height:100%;padding:8px 3px;display:flex;align-items:center;justify-content:center;gap:4px;border:0;border-right:2px solid #08060a;color:#fff;font:700 12px "Galmuri11","Galmuri9",sans-serif;letter-spacing:.2px;line-height:1;text-shadow:0 1px 0 rgba(0,0,0,.3);box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.18);transform:translateY(0);touch-action:manipulation}.idle-subnav .tab:last-child{border-right:0}
.idle-subnav .tab-icon,.idle-subnav .tab-label{position:relative;z-index:2}.idle-subnav .tab-icon{display:inline-block;font-size:17px;line-height:1;transform-origin:50% 65%;filter:drop-shadow(0 1px 0 rgba(0,0,0,.3))}
.idle-subnav .tab::after{content:"";position:absolute;z-index:1;inset:0;pointer-events:none;background:linear-gradient(105deg,transparent 34%,rgba(255,255,255,.08) 43%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.08) 57%,transparent 66%);background-size:250% 100%;background-repeat:no-repeat;background-position:-140% 0;animation:dtabSheen 5.2s cubic-bezier(.4,0,.2,1) infinite}
.idle-subnav .idle-tab-pet{background:linear-gradient(145deg,#285d4c 0%,#3c8067 45%,#58a986 55%,#2f715a 100%)}.idle-subnav .idle-tab-item{background:linear-gradient(145deg,#403873 0%,#5d4e9e 45%,#796abd 55%,#4c4187 100%)}.idle-subnav .idle-tab-ghub{background:linear-gradient(145deg,#876127 0%,#b98533 45%,#d7a84d 55%,#8f6728 100%)}
.idle-subnav .tab.active{color:#fffdf4;box-shadow:inset 0 3px 0 #ffe29c,inset -3px -3px 0 rgba(0,0,0,.3),inset 3px 3px 0 rgba(255,255,255,.2);filter:brightness(1.08);animation:idleTabAura 2.8s ease-in-out infinite}.idle-subnav .tab:hover{filter:brightness(1.12);transform:translateY(-1px)}.idle-subnav .tab:focus-visible{outline:3px solid #fff7df;outline-offset:-3px}.idle-subnav .tab:active{transform:translate(2px,2px)}
.idle-subnav .idle-tab-pet.active .tab-icon{animation:idlePetHop 2.8s ease-in-out infinite}.idle-subnav .idle-tab-item.active .tab-icon{animation:idleBagSway 2.7s ease-in-out infinite}.idle-subnav .idle-tab-ghub.active .tab-icon{animation:idleStarPulse 2.5s ease-in-out infinite}

@keyframes dtabSheen{0%{background-position:-140% 0}24%{background-position:170% 0}100%{background-position:170% 0}}@keyframes dtabAuraTeam{0%,100%{filter:drop-shadow(0 0 1px rgba(95,211,165,.22))}50%{filter:drop-shadow(0 0 8px rgba(95,211,165,.68))}}@keyframes dtabAuraAuto{0%,100%{filter:drop-shadow(0 0 1px rgba(255,150,82,.2))}50%{filter:drop-shadow(0 0 8px rgba(255,142,69,.66))}}@keyframes dtabAuraStones{0%,100%{filter:drop-shadow(0 0 1px rgba(176,150,255,.2))}50%{filter:drop-shadow(0 0 8px rgba(155,128,238,.65))}}
@keyframes dtabShieldGuard{0%,66%,100%{transform:rotate(0) scale(1)}76%{transform:rotate(-7deg) scale(.94)}86%{transform:rotate(4deg) scale(1.08)}93%{transform:rotate(-2deg)}}@keyframes dtabSwordTap{0%,64%,100%{transform:rotate(0) translateY(0)}72%{transform:rotate(-14deg) translateY(-1px)}82%{transform:rotate(9deg) translateY(1px)}}@keyframes dtabGemFloat{0%,100%{transform:translateY(0) rotate(0)}45%{transform:translateY(-2px) rotate(-5deg)}58%{transform:translateY(0) rotate(4deg)}72%{transform:translateY(-1px) rotate(0)}}
@keyframes idleTabAura{0%,100%{filter:brightness(1.05) drop-shadow(0 0 1px rgba(255,226,156,.25))}50%{filter:brightness(1.12) drop-shadow(0 0 7px rgba(255,226,156,.58))}}@keyframes idlePetHop{0%,68%,100%{transform:translateY(0) rotate(0)}76%{transform:translateY(-2px) rotate(-5deg)}86%{transform:translateY(0) rotate(4deg)}}@keyframes idleBagSway{0%,72%,100%{transform:rotate(0) scale(1)}80%{transform:rotate(-6deg) scale(.96)}90%{transform:rotate(5deg) scale(1.05)}}@keyframes idleStarPulse{0%,70%,100%{transform:scale(1) rotate(0)}80%{transform:scale(1.18) rotate(-10deg)}90%{transform:scale(1.04) rotate(8deg)}}

body.has-sticker .dtab-hero.active,body.has-sticker .idle-subnav .tab.active{box-shadow:inset 0 3px 0 var(--sticker),0 0 8px var(--sticker);text-shadow:0 0 7px var(--sticker)}
@media(max-width:360px){.dtab.dtab-hero{min-height:46px;gap:6px;padding:8px;font-size:12px}.dtab-hero .dtab-icon,.idle-subnav .tab-icon{font-size:15px}.idle-subnav .tab{gap:5px;padding:7px 4px;font-size:11px}}
@media(prefers-reduced-motion:reduce){
  .dtab.dtab-hero,.dtab-hero::after,.dtab-hero .dtab-icon{animation:none}
  .dtab-hero::after{opacity:.35;background-position:58% 0}
  .dtab.dtab-team{filter:drop-shadow(0 0 4px rgba(95,211,165,.5))}
  .dtab.dtab-stones{filter:drop-shadow(0 0 4px rgba(155,128,238,.48))}
  .idle-subnav .tab.active,.idle-subnav .tab::after,.idle-subnav .tab.active .tab-icon{animation:none}
  .idle-subnav .tab::after{opacity:.35;background-position:58% 0}
  .idle-subnav .tab.active{filter:brightness(1.08) drop-shadow(0 0 4px rgba(255,226,156,.5))}
}

/* ── 던전 자동 훈련: 3D 필드 사냥 ──────────────────────────────────────────
   원정 전투와 같은 렌더러/씬을 쓴다(dungeon.js `mountAutoField`). 여기서는
   캔버스를 담을 무대와 그 위에 얹는 HUD/배너만 정의한다. 화면 아래로는
   출전 펫 상세 → 성장 시뮬레이터 → 확장 예정 슬롯이 이어진다. */
.auto-training-panel{overflow:hidden}
.panel-title>strong.auto-running{background:#73d59d;color:#163e2a;animation:auto-state-pulse 1.8s ease-in-out infinite}

.auto-field{position:relative;width:100%;height:var(--auto-field-h,320px);margin-top:10px;overflow:hidden;
  border:3px solid var(--dq-line,#4a3d5e);background:#0f0c16;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.08),inset 0 -8px 0 rgba(0,0,0,.3)}
.auto-field-canvas,.auto-field-canvas canvas{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none}
.auto-field-hud{position:absolute;z-index:4;left:6px;right:6px;top:6px;display:flex;align-items:center;gap:6px;pointer-events:none}
.af-tag{flex:0 0 auto;padding:3px 6px;border:2px solid #6a5a80;background:rgba(12,9,20,.82);color:#ffd76a;font-size:9px;white-space:nowrap}
.af-bar{flex:1 1 auto;height:8px;border:2px solid #6a5a80;background:rgba(12,9,20,.72);overflow:hidden}
.af-bar>i{display:block;height:100%;width:0;background:linear-gradient(90deg,#7bd6a0,#ffd76a);transition:width .18s linear}
.af-count{flex:0 0 auto;color:#e2d8ef;font-size:8px;text-shadow:1px 1px 0 #14101c;white-space:nowrap}
.af-banner{position:absolute;z-index:6;left:50%;top:42%;padding:5px 9px;border:2px solid #ffdc62;background:#3d2a12;
  color:#fff7c9;font-size:11px;white-space:nowrap;pointer-events:none;opacity:0;transform:translate(-50%,-50%) scale(.7)}
.af-banner.show{animation:af-banner 1.8s ease-out}
.af-idle{position:absolute;z-index:5;inset:0;display:grid;place-items:center;padding:14px;text-align:center;
  color:#cdc3dc;font-size:10px;line-height:1.7;background:rgba(10,8,15,.72)}
.af-idle.hidden{display:none}
.af-idle b{color:var(--gold,#ffd76a)}
.af-note{margin-top:6px;color:var(--muted,#baaec4);font-size:8px;line-height:1.6}

/* 요약 지표 */
.auto-training-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:8px}
.auto-training-metrics span{min-width:0;padding:6px;border:2px solid var(--dq-line,#4a3d5e);background:var(--panel2,#2d2538);color:var(--muted,#baaec4);font-size:8px}
.auto-training-metrics b{display:block;margin-bottom:2px;color:var(--gold,#ffd76a);font-size:8px}
.auto-training-notice{margin-top:8px;padding:6px;border:2px solid #a4763a;background:rgba(164,118,58,.16);
  color:#ffd9a0;font-size:8px;line-height:1.55}
.auto-training-notice.hidden{display:none}

/* 출전 펫 상세 */
.auto-training-roster-head{display:flex;justify-content:space-between;gap:8px;margin-top:11px;color:var(--dq-ink,#eee4f5);font-size:10px}
.auto-training-roster-head span{color:var(--muted,#baaec4);font-size:8px}
.auto-training-squad{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin-top:6px}
.auto-squad-card{display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:auto auto auto auto;
  column-gap:5px;row-gap:2px;padding:5px;border:2px solid var(--dq-line,#4a3d5e);background:var(--panel2,#2d2538);
  color:#eee4f5;font-size:8px}
.auto-squad-art{grid-row:1 / span 4;display:grid;place-items:center;width:30px;height:30px;overflow:hidden;background:#f2dda0}
.auto-squad-art .pet-portrait{width:30px;height:30px}
.auto-squad-card b,.auto-squad-card small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-squad-card small{color:#b8dfb6;font-size:7px}
.auto-squad-bar{display:block;height:5px;border:1px solid #17131f;background:#211a2c}
.auto-squad-bar>i{display:block;height:100%;background:linear-gradient(90deg,#7bd6a0,#ffd76a);transition:width .3s ease}
.auto-squad-card em{color:var(--muted,#baaec4);font-style:normal;font-size:7px}
.auto-squad-card.capped{filter:saturate(.55)}
.auto-squad-card.capped em{color:#e6a3a3}

/* 성장 시뮬레이터 */
.auto-sim-controls{display:flex;justify-content:flex-end;margin-top:6px}
.auto-sim-controls label{display:inline-flex;align-items:center;gap:5px;color:var(--muted,#baaec4);font-size:8px}
.auto-sim-controls select{padding:4px 6px;border:2px solid var(--dq-line,#4a3d5e);background:var(--panel2,#2d2538);
  color:#eee4f5;font-family:inherit;font-size:8px}
.auto-sim{margin-top:6px;padding:6px;border:2px solid var(--dq-line,#4a3d5e);background:rgba(0,0,0,.16)}
.auto-sim-summary{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}
.auto-sim-summary span{min-width:0;padding:5px;border:1px solid #4a3d5e;background:var(--panel2,#2d2538);
  color:var(--muted,#baaec4);font-size:8px}
.auto-sim-summary b{display:block;margin-bottom:2px;color:var(--gold,#ffd76a)}
.auto-sim-rows{display:grid;gap:3px;margin-top:6px}
.auto-sim-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:6px;
  padding:4px 5px;border:1px solid #3d3350;background:rgba(255,255,255,.03);color:#eee4f5;font-size:8px}
.auto-sim-row b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.auto-sim-row strong{color:#9ff0bb}
.auto-sim-row em{color:var(--muted,#baaec4);font-style:normal;font-size:7px}
.auto-sim-row.capped strong{color:#e6a3a3}

/* 확장 예정 자리 — 추후 기능이 이 슬롯에 들어간다 */
.auto-ext{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;margin-top:6px}
.auto-ext-slot{display:grid;gap:3px;padding:9px 6px;border:2px dashed #55496a;background:rgba(255,255,255,.02);
  color:var(--muted,#baaec4);text-align:center;font-size:8px}
.auto-ext-slot b{color:#cabfd8;font-size:8px}
.auto-ext-slot small{font-size:7px;opacity:.75}

/* 시작/종료 버튼 없이 편성만으로 굴러가므로, 그 자리에 동작 규칙만 안내한다. */
.af-auto-note{margin:11px 0 0;padding:7px;border:2px solid #4a6a55;background:rgba(74,106,85,.18);
  color:#bfe9cf;font-size:8px;line-height:1.6}

/* 편성 탭 — 자동 훈련 편성 표시 (.pb-auto 칩은 하단 '배치 라벨' 섹션에 있다) */
.dungeon-pet-card.in-auto-party{box-shadow:inset 0 0 0 2px rgba(122,214,160,.55)}

@keyframes af-banner{0%{opacity:0;transform:translate(-50%,-50%) scale(.7)}18%{opacity:1;transform:translate(-50%,-50%) scale(1.06)}72%{opacity:1;transform:translate(-50%,-50%) scale(1)}100%{opacity:0;transform:translate(-50%,-72%) scale(.95)}}
@keyframes auto-state-pulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.16)}}

@media(max-width:360px){
  .auto-field{--auto-field-h:262px}
  .auto-training-squad{grid-template-columns:minmax(0,1fr)}
  .auto-sim-summary{grid-template-columns:minmax(0,1fr)}
  .auto-ext{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(prefers-reduced-motion:reduce){
  .panel-title>strong.auto-running,.af-banner.show{animation:none}
  .af-banner.show{opacity:1;transform:translate(-50%,-50%)}
}

/* ── 파워스톤 v2: 전역 5슬롯 젬 소켓 보드(소닉 크리스탈 느낌) ─────────────── */
.stone-loadout{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin:6px 0 10px;padding:14px 8px;border:3px solid var(--dq-line,#4a3d5e);background:linear-gradient(180deg,#241d30,#191320)}
.stone-socket{position:relative;width:60px;height:74px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;border:0;background:transparent;font-family:inherit;padding:0}
.stone-socket .socket-index{width:34px;height:34px;transform:rotate(45deg);border:2px dashed #5b4e70;display:flex;align-items:center;justify-content:center;color:#6d6080;font-size:12px;background:rgba(255,255,255,.02)}
.stone-socket .socket-index>*{transform:rotate(-45deg)}
.stone-socket.filled{cursor:pointer}
.stone-socket .socket-gem{width:38px;height:38px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;font-size:17px;color:#fff;text-shadow:0 1px 2px rgba(0,0,0,.5);border:2px solid rgba(255,255,255,.65);box-shadow:0 0 10px var(--g-glow),inset 0 2px 6px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.35);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),var(--g-hi) 42%,var(--g-lo));animation:stone-bob 2.6s ease-in-out infinite}
.stone-socket .socket-gem>*{transform:rotate(-45deg)}
.stone-socket .socket-grade{font-size:11px;color:var(--g-hi);letter-spacing:.5px}
.stone-socket.filled:hover .socket-gem{filter:brightness(1.12)}
.stone-socket.filled:active{transform:translateY(1px)}
@keyframes stone-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
.stone-loadout-hint{text-align:center;font-size:12px;color:var(--muted,#9a8fae);margin:0 0 12px}
.stone-loadout-hint b{color:var(--gold,#ffd76a)}
.stone-inventory{display:grid;grid-template-columns:repeat(auto-fill,minmax(180px,1fr));gap:8px}
.stone-inventory .empty-note{grid-column:1/-1}
.stone-chip-wrap{position:relative;display:flex;align-items:stretch;border:3px solid var(--g-lo);background:linear-gradient(180deg,#251e32,#1c1626)}
.stone-chip-wrap:hover{border-color:var(--g-hi)}
.stone-chip{flex:1;min-width:0;display:flex;align-items:center;gap:9px;text-align:left;padding:8px 10px;border:0;background:transparent;color:var(--dq-ink,#e7dcf5);font-family:inherit;cursor:pointer}
.stone-chip:hover{background:rgba(255,255,255,.04)}
.chip-detail{flex:none;width:36px;display:flex;align-items:center;justify-content:center;border:0;border-left:2px solid rgba(255,255,255,.09);background:transparent;cursor:pointer}
.chip-detail::before{content:"i";display:flex;align-items:center;justify-content:center;width:20px;height:20px;border:2px solid currentColor;border-radius:50%;color:var(--muted,#9a8fae);font:italic 700 12px/1 Georgia,serif}
.chip-detail:hover::before{color:var(--g-hi)}
.chip-detail:active{transform:translateY(1px)}
.stone-chip:active{transform:translateY(1px)}
.stone-chip .chip-gem{flex:none;width:26px;height:26px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;font-size:13px;color:#fff;border:2px solid rgba(255,255,255,.6);box-shadow:0 0 7px var(--g-glow),inset 0 -3px 6px rgba(0,0,0,.3);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),var(--g-hi) 44%,var(--g-lo))}
.stone-chip .chip-gem>*{transform:rotate(-45deg)}
.stone-chip .chip-body{display:flex;flex-direction:column;line-height:1.35;min-width:0;flex:1}
.stone-chip .chip-body strong{font-size:13px;color:var(--g-hi);white-space:nowrap}
.stone-chip .chip-body span{font-size:11px;color:var(--muted,#9a8fae);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.chip-more{display:inline-block;vertical-align:middle;font-style:normal;margin-left:7px;padding:1px 6px;border-radius:8px;background:rgba(255,255,255,.12);color:var(--g-hi);font-size:10px}
.chip-affix{display:inline-block;vertical-align:middle;font-style:normal;margin-left:5px;padding:1px 6px;border-radius:8px;background:rgba(255,238,163,.16);color:#fff0a5;font-size:10px}
.g1{--g-hi:#c3cdd8;--g-lo:#7f8a99;--g-glow:rgba(195,205,216,.5)}
.g2{--g-hi:#74e08b;--g-lo:#2f8f4b;--g-glow:rgba(116,224,139,.55)}
.g3{--g-hi:#6bb6ff;--g-lo:#2f6dbf;--g-glow:rgba(107,182,255,.6)}
.g4{--g-hi:#c58bff;--g-lo:#7a3fd0;--g-glow:rgba(197,139,255,.62)}
.g5{--g-hi:#ffc34d;--g-lo:#d98a1f;--g-glow:rgba(255,195,77,.7)}
.g6{--g-hi:#f58dff;--g-lo:#a53ec7;--g-glow:rgba(245,141,255,.76)}
.g7{--g-hi:#fff3a6;--g-lo:#e4a432;--g-glow:rgba(255,235,119,.96)}
.stone-socket.shiny .socket-gem{animation:stone-bob 2.6s ease-in-out infinite,stone-shiny 1.7s ease-in-out infinite}
.stone-chip-wrap.shiny{border-color:#fff0a5;box-shadow:0 0 12px rgba(255,221,91,.54),inset 0 0 14px rgba(255,235,152,.1);background:linear-gradient(180deg,#3a2f20,#211a25)}
.rune-card.shiny{border-color:#fff1a3;box-shadow:0 14px 44px rgba(0,0,0,.7),0 0 28px rgba(255,226,105,.82)}
@keyframes stone-shiny{0%,100%{filter:brightness(1);box-shadow:0 0 10px var(--g-glow),inset 0 2px 6px rgba(255,255,255,.5),inset 0 -4px 8px rgba(0,0,0,.35)}50%{filter:brightness(1.22);box-shadow:0 0 20px #fff1a3,0 0 36px rgba(255,209,67,.75),inset 0 2px 8px rgba(255,255,255,.8),inset 0 -4px 8px rgba(0,0,0,.3)}}
/* 아이템 탭: 던전 원정 패널을 실제로 숨기고(=.dungeon-panel엔 전역 .hidden 규칙이 없음) 젬 보드가 그 자리를 프로미넌트하게 차지 */
.expedition-panel.hidden{display:none}

/* Two saved PvE presets can be edited independently and chosen at launch. */
/* 전투 1팀/2팀 전환 탭(.party-preset-tabs)은 편성 보드의 .fb-tab.fb-party 로 흡수됐다(2026-07-28). */
.expedition-party-modal[hidden]{display:none!important}.expedition-party-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(var(--mode-nav-height) + 10px + env(safe-area-inset-bottom));background:rgba(7,5,9,.78);font-family:"Galmuri11","Galmuri9",sans-serif}.expedition-party-dialog{width:min(100%,500px);max-height:100%;overflow:auto;padding:14px;background:linear-gradient(145deg,#352b40,#1d1724);color:var(--dq-ink);border:3px solid #0b080d;box-shadow:inset 0 3px 0 #665476,0 12px 40px #000;scrollbar-width:thin}.expedition-party-dialog:focus{outline:none}.expedition-party-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.expedition-party-head h3{margin:2px 0 0;color:#fff7df;font-size:16px}.expedition-party-close{flex:none;width:34px;height:34px;border:2px solid #0b080d;background:#5c3540;color:#fff;font:700 18px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.expedition-party-description{margin:11px 0 10px;color:#c9bdcf;font-size:10px;line-height:1.65}.expedition-party-choices{display:grid;gap:8px}.expedition-party-choice{display:grid;gap:7px;width:100%;padding:10px;border:2px solid #0d0911;background:#332a3b;color:#eee5f1;text-align:left;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}.expedition-party-choice.ready{border-color:#3f9a6c;background:#284d3b}.expedition-party-choice.ready:hover{background:#326348}.expedition-party-choice:disabled{opacity:1;cursor:not-allowed}.expedition-party-choice.unavailable{border-color:#6f515a;background:#32272e}.expedition-party-choice-head{display:flex;align-items:baseline;justify-content:space-between;gap:8px}.expedition-party-choice-head strong{font-size:12px}.expedition-party-choice-head em{color:#aae8c9;font-size:9px;font-style:normal;text-align:right}.expedition-party-choice.unavailable .expedition-party-choice-head em{color:#f2b7b0}.expedition-party-choice ul{display:flex;flex-wrap:wrap;gap:5px;margin:0;padding:0;list-style:none}.expedition-party-choice li{display:grid;grid-template-columns:34px minmax(0,1fr);grid-template-rows:auto auto;column-gap:5px;min-width:104px;flex:1;padding:4px;background:#1a151f;border:1px solid rgba(255,255,255,.13)}.expedition-party-choice li>span{grid-row:1 / span 2;display:grid;place-items:center;width:34px;height:34px;overflow:hidden;background:#251e2c}.expedition-party-choice li .pet-portrait{width:34px;height:34px}.expedition-party-choice li b,.expedition-party-choice li small{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.expedition-party-choice li b{align-self:end;color:#fff5dd;font-size:8px}.expedition-party-choice li small{align-self:start;color:#bfb2c7;font-size:8px}.expedition-party-choice li.empty{display:block;min-width:0;color:#a89daa;font-size:9px;text-align:center}.expedition-party-close:focus-visible,.expedition-party-choice:focus-visible{outline:3px solid #fff4be;outline-offset:2px}
@media(max-width:360px){.expedition-party-dialog{padding:11px}.expedition-party-choice{padding:8px}.expedition-party-choice li{min-width:92px}}

/* Expedition season browser: completed seasons remain selectable for replay. */
.stage-browser-tools{margin:8px 0 2px}.stage-season-open{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:34px;padding:7px 10px;border:2px solid #8f6d35;background:#342a1c;color:#ffe3a4;box-shadow:inset 0 2px 0 #5c492b;font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}.stage-season-open:hover{background:#4a3a22}.stage-season-open:focus-visible,.stage-season-choice:focus-visible,.stage-season-zone-tabs button:focus-visible,.stage-season-close:focus-visible{outline:3px solid #fff4be;outline-offset:2px}
.stage-season-modal[hidden]{display:none!important}.stage-season-modal{position:fixed;z-index:100;inset:0;display:grid;place-items:center;padding:calc(10px + env(safe-area-inset-top)) 10px calc(var(--mode-nav-height) + 10px + env(safe-area-inset-bottom));background:rgba(7,5,9,.78);font-family:"Galmuri11","Galmuri9",sans-serif}.stage-season-dialog{width:min(100%,500px);max-height:100%;overflow:auto;padding:14px;background:linear-gradient(145deg,#352b40,#1d1724);color:var(--dq-ink);border:3px solid #0b080d;box-shadow:inset 0 3px 0 #665476,0 12px 40px #000;scrollbar-width:thin}.stage-season-dialog:focus{outline:none}.stage-season-head{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}.stage-season-head h3{margin:2px 0 0;color:#fff7df;font-size:16px}.stage-season-close{flex:none;width:34px;height:34px;border:2px solid #0b080d;background:#5c3540;color:#fff;font:700 18px/1 "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.stage-season-description{margin:11px 0 9px;color:#c9bdcf;font-size:10px;line-height:1.65}.stage-season-zone-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.stage-season-zone-tabs button{min-width:0;min-height:35px;padding:5px 4px;border:2px solid #0d0911;background:#2a2232;color:#c7bbcE;font:700 9px "Galmuri11","Galmuri9",sans-serif;cursor:pointer}.stage-season-zone-tabs button.active{border-color:#e7bd63;background:#705126;color:#fff4cf}.stage-season-summary{display:grid;gap:3px;margin:10px 0;padding:9px;background:#17131d;border:1px solid #4f405a;font-size:9px;line-height:1.45}.stage-season-summary strong{color:#ffe09a;font-size:11px}.stage-season-summary span{color:#d8ccde}.stage-season-summary small{color:#91d9bd;font-size:9px}.stage-season-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(92px,1fr));gap:6px;max-height:min(48dvh,350px);padding:2px;overflow-y:auto}.stage-season-choice{display:grid;gap:3px;min-height:54px;padding:6px;border:2px solid #0d0911;background:#332a3b;color:#eee5f1;text-align:left;font-family:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}.stage-season-choice strong{font-size:10px}.stage-season-choice small{color:#c4b8cb;font-size:8px;line-height:1.35}.stage-season-choice:hover{background:#4a3c55}.stage-season-choice.selected{border-color:#e7bd63;background:#705126;color:#fff8df;box-shadow:inset 0 2px 0 #a98243}.stage-season-choice.selected small{color:#fff0be}.stage-season-choice.current:not(.selected){border-color:#5d957d}.stage-season-choice.current small{color:#a9ebcb}
@media(max-width:360px){.stage-season-dialog{padding:11px}.stage-season-zone-tabs button{font-size:8px}.stage-season-list{grid-template-columns:repeat(2,minmax(0,1fr));max-height:min(46dvh,300px)}}
#dtab-items>.dungeon-panel{min-height:min(56vh,440px);display:flex;flex-direction:column}
/* v2 젬보드는 구 stone-card용 2단 그리드를 쓰지 않고 전폭 세로 스택 — 5슬롯 한 줄·힌트/인벤은 그 아래로(PC/모바일 공통) */
#dtab-items .dungeon-stones{display:block;margin-top:0}
/* 5칸을 컨테이너 폭 기준 5등분(항상 한 줄에 딱 맞음 · 폭 넓을수록 크게) */
#dtab-items .stone-loadout{display:grid;grid-template-columns:repeat(5,1fr);justify-items:center;align-items:center;gap:clamp(5px,1.4vw,12px);padding:20px 8px;margin:0 0 2px}
#dtab-items .stone-socket{width:100%;max-width:82px;height:auto;min-height:clamp(84px,23vw,104px)}
#dtab-items .stone-socket .socket-gem{width:clamp(34px,9.5vw,52px);height:clamp(34px,9.5vw,52px);font-size:clamp(16px,4vw,21px)}
#dtab-items .stone-socket .socket-index{width:clamp(32px,8vw,44px);height:clamp(32px,8vw,44px)}
#dtab-items .stone-socket .socket-grade{font-size:clamp(10px,2.5vw,13px)}
#dtab-items .stone-loadout-hint{max-width:520px;margin:2px auto 14px}
#dtab-items .stone-inventory{margin-top:14px}
/* 인벤 헤더 + 조합 모드 토글 + 선택 + 중앙 조합 바 */
.stone-inventory-head{display:flex;justify-content:space-between;align-items:center;margin:14px 2px 8px;font-size:12px;color:var(--muted,#9a8fae)}
.stone-inventory-head .inv-count{color:var(--gold,#ffd76a)}
.forge-toggle{font-family:inherit;font-size:11px;padding:7px 13px;border:2px solid var(--dq-line,#4a3d5e);background:#2a2236;color:var(--dq-ink,#e7dcf5);cursor:pointer}
.forge-toggle.on{background:var(--dq-gold,#ffd76a);color:#2a2010;border-color:#8b7041}
.forge-toggle:active{transform:translateY(1px)}
.forge-mode-hint{font-size:11px;color:var(--muted,#9a8fae);margin:0 2px 8px;text-align:center}
.stone-inventory.forge-on .stone-chip-wrap{border-style:dashed}
.stone-chip-wrap.sel{border-color:var(--dq-gold,#ffd76a);border-style:solid;box-shadow:0 0 0 2px rgba(255,215,106,.4)}
.chip-selnum{position:absolute;top:-9px;right:8px;width:20px;height:20px;border-radius:50%;background:var(--dq-gold,#ffd76a);color:#2a2010;font-size:11px;display:flex;align-items:center;justify-content:center;border:2px solid #8b7041;z-index:2}
/* 파워스톤 상세 모달(룬 인스펙터) — 콤팩트 칩의 ⓘ 로 열림 */
.rune-modal{position:fixed;inset:0;z-index:130;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,4,10,.62)}
.rune-card{position:relative;width:min(340px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow:auto;border:3px solid var(--g-hi,#c39239);background:linear-gradient(180deg,#241d30,#171220);box-shadow:0 14px 44px rgba(0,0,0,.7),0 0 22px var(--g-glow);padding:20px 18px 18px;animation:offlinePop .2s ease-out}
.rune-close{position:absolute;top:8px;right:8px;width:30px;height:30px;border:0;background:transparent;color:var(--muted,#9a8fae);font-family:inherit;font-size:15px;cursor:pointer}
/* 확인 대화상자 — 목록 선택창(`.trinket-pick`)을 빌려 쓰면 폭이 420px 로 넓고
   `flex-direction:column` 이라 짧은 메시지에서 배치가 어긋난다. 메시지 상자는 따로 둔다.
   글은 가운데로 모으고 버튼은 2등분 그리드라 좌우 폭이 항상 같다. */
.rune-confirm{position:relative;width:min(86vw,320px);padding:18px 16px 16px;text-align:center;
  background:#1a151f;border:3px solid var(--dq-gold);color:#fff5da;
  box-shadow:0 10px 30px rgba(0,0,0,.5)}
/* 닫기(✕)와 겹치지 않게 좌우 같은 여백 — 한쪽만 주면 글이 가운데에서 밀린다. */
.rc-title{display:block;padding:0 20px;font-size:12px;line-height:1.55;color:#fff}
.rc-note{margin:10px 0 0;font-size:9px;line-height:1.75;color:#bdb1c4}
.rc-act{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:15px}
.rc-act button{min-height:40px;padding:8px 6px;border:2px solid #6e6180;background:#2a2232;
  color:#e8ddf2;font:700 10px "Galmuri11","Galmuri9",sans-serif;cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.rc-act button.danger{border-color:#d98a8a;background:#4a2a2f;color:#ffd9d5}
.rc-act button:hover{filter:brightness(1.15)}
.rc-act button:focus-visible{outline:2px solid var(--dq-gold);outline-offset:-2px}
.rune-close:hover{color:#fff}
.rune-head{display:flex;align-items:center;gap:12px;padding-right:26px}
.rune-gem{flex:none;width:46px;height:46px;transform:rotate(45deg);display:flex;align-items:center;justify-content:center;font-size:21px;color:#fff;border:2px solid rgba(255,255,255,.65);box-shadow:0 0 12px var(--g-glow),inset 0 2px 6px rgba(255,255,255,.45),inset 0 -4px 8px rgba(0,0,0,.35);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),var(--g-hi) 42%,var(--g-lo))}
.rune-gem>span{transform:rotate(-45deg)}
.rune-title{display:flex;flex-direction:column;gap:3px;min-width:0}
.rune-title strong{font-size:15px;color:var(--g-hi)}
.rune-title>span{font-size:11px;color:var(--muted,#9a8fae)}
.rune-stats{margin:15px 0 4px;display:flex;flex-direction:column;gap:6px}
.rune-stat{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:9px 11px;border:2px solid var(--dq-line,#4a3d5e);background:#1b1622}
.rune-stat.primary{border-color:var(--g-hi);background:linear-gradient(180deg,#2a2136,#1c1626)}
.rune-affix-heading{margin:15px 0 -8px;color:#fff0a5;font-size:10px;font-weight:700;letter-spacing:.4px}
.rune-stat.affix{border-color:rgba(255,231,141,.45);background:linear-gradient(90deg,rgba(245,173,255,.11),rgba(255,231,141,.09))}
.rune-stat.affix>b{color:#fff0a5}
.rune-stat>span{font-size:10px;color:var(--muted,#9a8fae);flex:none;letter-spacing:.5px}
.rune-stat>b{font-size:13px;color:#e7dcf5;text-align:right}
.rune-stat.primary>b{color:var(--g-hi)}
.rune-note{font-size:11px;color:var(--muted,#9a8fae);line-height:1.6;margin:12px 0 0;text-align:center}
.rune-note b{color:var(--gold,#ffd76a)}
.rune-actions{margin-top:14px;display:flex}
.rune-btn{flex:1;font-family:inherit;font-size:14px;font-weight:700;padding:12px;border:3px solid #8b7041;background:linear-gradient(180deg,#ffe27a,#e0a52f);color:#3a2a0a;cursor:pointer}
.rune-btn.ghost{background:#2a2236;color:var(--dq-ink,#e7dcf5);border-color:var(--dq-line,#4a3d5e);font-weight:400}
.rune-btn:active{transform:translateY(1px)}
.forge-bar{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);z-index:120;display:flex;flex-direction:column;align-items:stretch;gap:11px;width:min(440px,calc(100vw - 16px));padding:16px 18px;border:3px solid var(--dq-gold,#ffd76a);background:linear-gradient(180deg,#2a2135,#191320);box-shadow:0 12px 40px rgba(0,0,0,.7),0 0 24px rgba(255,215,106,.28);animation:forge-bar-in .18s ease}
.forge-bar::before{content:"";position:fixed;inset:0;z-index:-1;background:rgba(8,6,12,.5);pointer-events:none}
@keyframes forge-bar-in{from{opacity:0;transform:translate(-50%,-50%) scale(.92)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.forge-bar-preview{display:flex;align-items:center;justify-content:center;gap:8px}
.forge-bar-preview i{color:var(--muted,#9a8fae);font-style:normal;font-size:13px}
.forge-bar .fb-gem{width:28px;height:28px;border-radius:6px;display:flex;align-items:center;justify-content:center;font-size:14px;color:#fff;border:2px solid rgba(255,255,255,.6);box-shadow:0 0 8px var(--g-glow);background:radial-gradient(circle at 32% 28%,rgba(255,255,255,.85),var(--g-hi) 44%,var(--g-lo))}
.forge-bar .fb-result{animation:stone-bob 1.6s ease-in-out infinite}
.forge-bar-odds{font-size:12px;color:var(--dq-gold,#ffd76a);text-align:center;white-space:normal;line-height:1.5;letter-spacing:.2px}
.forge-bar-actions{display:flex;gap:10px;width:100%}
.forge-bar-actions button{flex:1 1 0;min-width:0;font-family:inherit;font-size:14px;padding:12px 12px;border:3px solid #8b7041;cursor:pointer;white-space:nowrap}
/* 조합 버튼: 금빛 글로우 맥동 + 셔인 스윕으로 조합 유발 */
.forge-bar-actions .fb-go{position:relative;overflow:hidden;background:linear-gradient(180deg,#ffe27a,#e0a52f);color:#3a2a0a;font-weight:700;box-shadow:0 0 14px 2px rgba(255,216,121,.55);animation:fb-go-glow 1.25s ease-in-out infinite}
.forge-bar-actions .fb-go::after{content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.85),transparent);transform:skewX(-18deg);animation:fb-go-shine 1.9s ease-in-out infinite;pointer-events:none}
.forge-bar-actions .fb-go:disabled{opacity:.5;cursor:not-allowed;animation:none;box-shadow:none}
.forge-bar-actions .fb-go:disabled::after{display:none}
@keyframes fb-go-glow{0%,100%{box-shadow:0 0 8px 1px rgba(255,216,121,.45)}50%{box-shadow:0 0 20px 5px rgba(255,216,121,.9),0 0 34px 10px rgba(255,150,60,.4)}}
@keyframes fb-go-shine{0%{left:-65%}55%,100%{left:135%}}
.forge-bar-actions .fb-cancel{background:#2a2236;color:var(--dq-ink,#e7dcf5);border-color:var(--dq-line,#4a3d5e)}
.forge-bar-actions button:active{transform:translateY(1px)}
@media(prefers-reduced-motion:reduce){.forge-bar-actions .fb-go,.stone-socket.shiny .socket-gem{animation:none}.forge-bar-actions .fb-go::after{display:none}}

/* ── 버닝타임 던전 표시 (Phase 2) — 헤더 배너 + 3D 전투 틴트 + 보상 배지 ─────────── */
/* 던전 헤더 배너: 던전 EXP/포인트 배율 표시(없으면 '버닝타임'). style=window.__BURNING__.style */
/* 전역 상단 배너(.burn-banner)와 동일하게 화면 상단 중앙에 고정(#dungeonMode 안이지만 fixed 라 뷰포트 기준). */
.dungeon-burn-banner{position:fixed;top:7px;left:50%;transform:translate(-50%,0);z-index:47;pointer-events:none;
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;color:#fff;padding:5px 13px;border-radius:999px;white-space:nowrap;
  background:var(--burn-grad);border:2px solid var(--line,#1a130d);
  box-shadow:0 4px 16px -4px #ff7a18,inset 0 0 0 1px rgba(255,255,255,.18);
  animation:dbBurnPulse 1.7s ease-in-out infinite,bannerEnter .55s cubic-bezier(.2,1.35,.4,1),bannerFloat 5.5s ease-in-out .55s infinite}
.dungeon-burn-banner.mode-hidden{display:none}
.dungeon-burn-banner[data-burn-style="aurora"]{background:var(--burn-grad-aurora)}
.dungeon-burn-banner[data-burn-style="meteor"]{background:var(--burn-grad-meteor)}
.dungeon-burn-banner[data-burn-style="festival"]{background:var(--burn-grad-festival)}
@keyframes dbBurnPulse{50%{box-shadow:0 4px 20px -2px #ff7a18,inset 0 0 0 1px rgba(255,255,255,.18)}}

/* 3D 전투 틴트 — #battlePanel 안, 캔버스(z0) 위·HUD(z4+) 아래. three.js 무수정 CSS 오버레이. */
.battle-burn-overlay{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .5s;
  mix-blend-mode:screen;
  background:radial-gradient(120% 92% at 50% 100%,rgba(255,90,30,.30),rgba(120,20,10,.06) 58%,transparent 74%)}
.battle-burn-overlay.active{opacity:1}
.battle-burn-overlay[data-burn-style="aurora"]{background:radial-gradient(120% 92% at 50% 100%,rgba(60,220,160,.26),rgba(20,80,60,.06) 58%,transparent 74%)}
.battle-burn-overlay[data-burn-style="meteor"]{background:radial-gradient(120% 96% at 50% 100%,rgba(140,110,255,.28),rgba(40,30,90,.06) 58%,transparent 76%)}
.battle-burn-overlay[data-burn-style="festival"]{background:radial-gradient(120% 92% at 50% 100%,rgba(255,90,180,.26),rgba(90,20,70,.06) 58%,transparent 74%)}

/* 보상 카드 버닝 배지 */
.result-card .burning-summary{display:inline-block;margin-top:4px;font-size:12px;color:#fff;
  padding:3px 11px;border-radius:6px;background:var(--burn-grad);
  box-shadow:0 0 12px -2px #ff7a18}

/* 던전 모드에선 전역 상단 배너(Phase1) 숨김 → 던전 헤더 배너로 대체(중복 방지) */
body.dungeon-open .burn-banner{display:none}

@media (prefers-reduced-motion:reduce){.dungeon-burn-banner{animation:none}.battle-burn-overlay{transition:none}}

/* ── 던전 전용 아이템 가방(아이템 탭 상단) ─────────────────────────────────── */
.dungeon-bag-panel .system-note{margin-bottom:10px}

/* 영구 강화/잔여 스택 요약 칩 */
.dungeon-upgrade-strip{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.dus-chip{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.09);
  font-size:12px;color:#9fb0c4;line-height:1}
.dus-chip i{font-style:normal;font-size:13px}
.dus-chip b{color:#e8eef6;font-weight:700}
.dus-chip.on{background:linear-gradient(135deg,rgba(243,184,63,.16),rgba(243,184,63,.05));
  border-color:rgba(243,184,63,.45);color:#f6dfae}
.dus-chip.on b{color:#ffd97a}

/* 아이템 카드 목록 */
.dungeon-bag{display:grid;gap:10px}
.dbag-item{display:grid;grid-template-columns:56px 1fr auto;align-items:center;gap:12px;
  padding:11px 13px;border-radius:14px;background:rgba(255,255,255,.035);
  border:1px solid rgba(255,255,255,.08)}
.dbag-item.permanent{border-color:rgba(243,184,63,.38);
  background:linear-gradient(135deg,rgba(243,184,63,.10),rgba(255,255,255,.03))}
.dbag-art{display:grid;place-items:center;width:56px;height:56px;border-radius:12px;
  background:rgba(0,0,0,.28);box-shadow:inset 0 0 0 1px rgba(255,255,255,.07)}
.dbag-art img{width:40px;height:40px;object-fit:contain;image-rendering:auto}
.dbag-body{display:flex;flex-direction:column;gap:3px;min-width:0}
.dbag-body strong{display:flex;align-items:center;gap:7px;font-size:14px;color:#eef3f9}
.dbag-count{font-style:normal;font-size:12px;color:#f3b83f;font-weight:700}
.dbag-short{font-size:11px;color:#8fe3b6;letter-spacing:.02em}
.dbag-desc{font-size:11.5px;color:#8c9bad;line-height:1.45;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.dbag-use{min-width:86px;padding:9px 12px;border-radius:10px;border:0;cursor:pointer;
  background:linear-gradient(135deg,#f3b83f,#d98222);color:#2b1a05;font-weight:800;font-size:12.5px}
.dbag-use:disabled{opacity:.5;cursor:default}
.dbag-use.picking{background:linear-gradient(135deg,#7fd3f5,#2c9bd1);color:#04202f}
.dbag-item.r-legendary .dbag-art{box-shadow:inset 0 0 0 1px rgba(243,184,63,.5),0 0 14px -4px #f3b83f}

/* 변환권 대상 선택 모드 */
.forge-mode-hint.reroll{color:#9fe0ff}
.stone-inventory.reroll-on .stone-chip{box-shadow:inset 0 0 0 1px rgba(127,211,245,.45)}
.stone-socket.rerolling{outline:2px dashed rgba(127,211,245,.65);outline-offset:2px}

/* 출전 활력제 초과 스태미나(surge) 표시 */
.surge-badge{margin-left:6px;font-style:normal;font-size:11px;font-weight:800;color:#2b1a05;
  padding:1px 7px;border-radius:999px;background:linear-gradient(135deg,#ffe066,#f3b83f)}
.fatigue-meter.surged i,.pet-grid-fatigue-meter.surged i{background:linear-gradient(90deg,#ffe066,#2fbf71)}

@media (max-width:520px){
  .dbag-item{grid-template-columns:44px 1fr;grid-template-areas:"art body" "use use";row-gap:9px}
  .dbag-art{grid-area:art;width:44px;height:44px}
  .dbag-art img{width:32px;height:32px}
  .dbag-body{grid-area:body}
  .dbag-use{grid-area:use;width:100%}
}

/* ===== 게임 아이콘 — 컬러 이모지 (2026-07-28) =====
   iOS/Android/Windows 어디서나 같은 컬러 이모지로 나오게 하는 두 가지 조건:
   1) **U+FE0F(변형 선택자-16)** — 🛡(U+1F6E1)·⚔(U+2694) 처럼 유니코드 기본이
      *텍스트 표현*인 문자는 VS16 을 붙여야 컬러로 강제된다. 안 붙이면 폰트 색을 따르는
      단색 글리프로 떨어져 서로 구분되지 않는다(🌿·👀·💪 는 기본이 emoji 라 없어도 된다).
   2) **이모지 폰트를 스택 맨 앞에** — 본문 폰트(Galmuri 픽셀)가 글리프를 가로채지 않도록.
   ⚠ 사람 이모지(🏋 등)는 플랫폼마다 성별·피부톤 표현이 갈리므로 피하고 사물/신체 단독을 쓴다. */
.emo{display:inline-block;font-style:normal;line-height:1;
  font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji","Android Emoji","EmojiOne Color","Twemoji Mozilla",sans-serif}

/* ===== 2026-07-28 편성 보드 재편 + 등급 배경 + 실시간 EXP =====
   문제 1) 편성 레인 3종이 세로로 흩어져 있고 모드 도크는 또 따로라, 아래 펫 그리드에서
           카드를 눌러도 어느 칸이 채워지는지 보이지 않았다.
   문제 2) 자동 훈련만 슬롯 보드가 없어 카드 라벨로만 편성 여부를 알 수 있었다.
   해결) 탭(=배치 대상) + 그 편성의 슬롯만 담은 보드 하나로 합치고, 펫 목록 바로 위에
        sticky 로 붙여 스크롤해도 시야에서 벗어나지 않게 한다.
   top 은 0(=화면 최상단에 밀착). 예전 6px 는 스크롤 중 보드 위로 6px 띠가 남아 그 사이로
   아래 펫 카드가 지나다녔다. env() 는 viewport-fit=cover 대응 — 노치 기기에서만 상태바
   높이만큼 내려가고, 그 밖에는 0 이라 여백이 생기지 않는다. */
.formation-board{display:block;position:sticky;top:env(safe-area-inset-top,0px);z-index:24;margin-top:10px;padding:6px;
  border:3px solid var(--line);background:var(--panel2);
  box-shadow:inset -3px -3px 0 rgba(0,0,0,.3),0 5px 0 rgba(0,0,0,.35),0 10px 20px rgba(0,0,0,.4)}
.fb-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:4px}
.fb-tab{display:flex;align-items:center;justify-content:center;gap:4px;min-width:0;min-height:33px;padding:4px 5px;
  border:2px solid var(--line);border-bottom-width:4px;background:var(--panel);color:var(--muted);
  font:700 10px/1.2 "Galmuri11","Galmuri9",sans-serif;cursor:pointer;touch-action:manipulation}
.fb-tab>.emo{flex:none;font-size:13px}
.fb-tab>span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-tab>b{flex:none;font-size:9px;font-weight:800;font-variant-numeric:tabular-nums;opacity:.9}
.fb-tab:disabled{opacity:.45;cursor:not-allowed}
.fb-tab:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
/* 비활성일 때도 아래 굵은 선 색으로 어느 편성인지 알 수 있다 */
.fb-tab.fb-view{border-bottom-color:#8d8272}
.fb-tab.fb-party{border-bottom-color:#2f8a5b}
.fb-tab.fb-battle{border-bottom-color:#b3892b}
.fb-tab.fb-auto{border-bottom-color:#7a44ad}
/* 비활성 탭 — 아이콘만 편성 고유색으로 세운다(글자는 muted 라 아이콘이 먼저 눈에 들어온다).
   활성 탭은 배경이 그 색으로 꽉 차므로 아이콘은 글자와 같은 어두운 색(currentColor)이라야 보인다. */
.fb-tab.active{border-bottom-color:var(--line);color:#2a1d0c;background:var(--gold)}
.fb-tab.fb-view.active{color:#2a1d0c;background:var(--ink);box-shadow:inset -2px -2px 0 #b0a48c}
.fb-tab.fb-party.active{color:#052414;background:#57e39a;box-shadow:inset -2px -2px 0 #2f8a5b}
.fb-tab.fb-battle.active{color:#382400;background:#ffd257;box-shadow:inset -2px -2px 0 #b3892b}
.fb-tab.fb-auto.active{color:#240540;background:#c98bff;box-shadow:inset -2px -2px 0 #7a44ad}
/* 고른 탭의 편성만 펼친다 — 나머지는 탭의 숫자로 확인한다 */
.fb-panes{margin-top:5px}
.fb-pane{display:none}
.formation-board[data-mode="view"] .fb-pane[data-pane="view"],
.formation-board[data-mode="party"] .fb-pane[data-pane="party"],
.formation-board[data-mode="battle"] .fb-pane[data-pane="battle"],
.formation-board[data-mode="auto"] .fb-pane[data-pane="auto"]{display:block}
.formation-board .roster-lane{padding:6px;border-width:2px}
.formation-board .roster-lane-title{margin-bottom:5px}
.formation-board .roster-lane.auto-lane{border-left:4px solid var(--epic)}
.formation-board .slot-tile{min-height:76px;padding:6px 3px 5px}
.formation-board .slot-face .pet-portrait{width:36px;height:36px}
.formation-board .roster-lane-actions button{min-height:26px;padding:3px 7px;font-size:9px}
.pet-sort-bar{gap:6px;margin:7px 3px 0}
.pet-sort-label{font-size:9px}
.pet-sort-btns button{min-height:26px;padding:3px 7px}

/* 보기 탭 — 다섯 편성을 한 줄씩 요약. 줄을 누르면 그 편성 탭으로 바로 간다. */
.fb-summary{display:grid;gap:4px}
.fb-sum-row{display:grid;grid-template-columns:82px minmax(0,1fr) auto;align-items:center;gap:6px;
  width:100%;min-height:36px;padding:4px 6px;border:2px solid var(--line);border-left-width:4px;
  background:var(--panel);color:var(--ink);font:700 10px/1.3 "Galmuri11","Galmuri9",sans-serif;
  text-align:left;cursor:pointer;touch-action:manipulation}
.fb-sum-row:hover{background:#4a3a26}
.fb-sum-row:focus-visible{outline:2px solid var(--gold);outline-offset:1px}
.fb-sum-row.party{border-left-color:#57e39a}
.fb-sum-row.battle{border-left-color:#ffd257}
.fb-sum-row.auto{border-left-color:#c98bff}
.fb-sum-name{display:flex;align-items:center;gap:4px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fb-sum-name>.emo{flex:none;font-size:12px}
/* 레인 제목 — 레인 왼쪽 테두리 색과 같은 색으로 세운다 */
.roster-lane-heading>strong{display:inline-flex;align-items:center;gap:4px}
.roster-lane-heading>strong>.emo{flex:none;font-size:12px}
.fb-sum-faces{display:flex;align-items:center;gap:3px;min-width:0;overflow:hidden}
.fb-sum-faces>em{flex:none;display:grid;place-items:center;width:26px;height:26px;overflow:hidden;
  border:2px solid var(--com);background:#f2dda0;font-style:normal;line-height:0}
.fb-sum-faces>em .pet-portrait{width:22px;height:22px}
.fb-sum-faces>em.r-uncommon{border-color:var(--unc)}
.fb-sum-faces>em.r-rare{border-color:var(--rare)}
.fb-sum-faces>em.r-epic{border-color:var(--epic)}
.fb-sum-faces>em.r-legendary{border-color:var(--leg)}
.fb-sum-faces>em.fb-sum-empty{width:auto;height:auto;border:0;background:none;color:var(--muted);
  font-size:9px;font-weight:400;line-height:1.4}
.fb-sum-count{flex:none;padding:2px 5px;border:2px solid var(--line);background:var(--dirt-lo);
  color:var(--ink);font-size:9px;font-variant-numeric:tabular-nums}
.fb-sum-count.full{background:var(--gold);color:#2a1d0c}

/* 자동 훈련 레인 */
.auto-lane-state{padding:3px 6px;border:2px solid var(--line);background:var(--panel);
  color:var(--muted);font-size:9px;font-weight:700;white-space:nowrap}
.auto-lane-state.running{color:#002e29;background:#3ff0dc;animation:autoLaneRun 1.7s ease-in-out infinite}
@keyframes autoLaneRun{0%,100%{box-shadow:none}50%{box-shadow:0 0 9px #3ff0dc}}
.auto-lane-note{margin:6px 0 0;color:var(--muted);font-size:9px;line-height:1.55}
/* 실시간 EXP 바 — 정산과 정산 사이를 예측으로 채운다(autoLiveTick 이 width/글자만 갱신) */
.xp-live{position:relative;display:block;width:100%;height:12px;margin-top:4px;overflow:hidden;
  border:1px solid var(--line);background:#241a10}
.xp-live>i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3f9d6a,#c8922c);
  transition:width .9s linear}
.xp-live>em{position:absolute;inset:0;display:grid;place-items:center;color:#fff9ea;
  font:800 8px/1 "Galmuri11","Galmuri9",sans-serif;font-style:normal;letter-spacing:-.2px;
  text-shadow:0 1px 0 #000,-1px 0 0 #000,1px 0 0 #000,0 -1px 0 #000}
.xp-live.capped>i{background:#6d5c46}
.xp-live.capped>em{color:#e7bfa0}
/* 다음 정산에서 레벨업이 확정된 상태 — 밝은 바 위에는 어두운 글자가 읽힌다 */
.xp-live.ready>i{background:linear-gradient(90deg,#ffd76a,#fff6d8)}
.xp-live.ready>em{color:#2b1a05;text-shadow:none}
.xp-live.ready{animation:xpReady .85s ease-in-out infinite}
@keyframes xpReady{0%,100%{box-shadow:none}50%{box-shadow:0 0 9px #ffe9a3}}
.xp-live.squad-xp{height:12px}
.xp-live.squad-xp>em{font-size:8px}
/* 이 아래 셋은 **위치가 움직이지 않는 글로우**다(box-shadow 만 변한다). 전정기관을 자극하는
   요소가 없고 '진행 중'을 알리는 유일한 신호라서 reduce 에서도 끄지 않는다. */
@media(prefers-reduced-motion:reduce){.xp-live>i{transition:none}}
/* 출전 펫 카드의 EXP 는 이제 실시간 바 한 줄이 대신한다(예전 바 + 숫자 두 줄) */
.auto-squad-card{grid-template-rows:auto auto auto}
.auto-squad-art{grid-row:1 / span 3}

/* 성장 시뮬레이터 — 값이 고정돼 있으면 "정말 오르고 있나"를 알 수 없다.
   숫자를 매초 실시간 예측으로 갈아 끼우고, 바뀌는 순간 한 번 튕겨 눈에 걸리게 한다. */
.auto-sim-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
.auto-sim-summary span{display:flex;align-items:baseline;justify-content:space-between;gap:5px;font-size:9px}
.auto-sim-summary b{display:block;margin:0;flex:none}
.auto-sim-summary i{font-style:normal;font-size:11px;font-weight:800;color:var(--ink);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 지금 이 순간 쌓이고 있는 값 — 다른 칸(예상치)과 구분되게 청록으로 세워 둔다 */
.auto-sim-summary .sim-live{border-color:#3ff0dc;background:rgba(63,240,220,.1)}
.auto-sim-summary .sim-live b{color:#8ef7ea}
.auto-sim-summary .sim-live i{color:#c9fff8}
.auto-sim-summary .sim-live i.bump{animation:simBump .5s ease-out}
@keyframes simBump{
  0%{transform:translateY(0);color:#fff}
  35%{transform:translateY(-3px);color:#fff;text-shadow:0 0 8px #3ff0dc}
  100%{transform:translateY(0)}
}
.auto-sim-row{grid-template-columns:minmax(0,1fr) auto auto;row-gap:4px;font-size:9px}
.auto-sim-row [data-sim-path]{color:#9ff0bb;font-weight:700;white-space:nowrap}
.auto-sim-row em{font-size:8px}
.auto-sim-row .xp-live{grid-column:1 / -1;margin-top:0}
.auto-sim-row.capped [data-sim-path]{color:#e6a3a3}
.auto-sim-row.capped{filter:saturate(.6)}
/* bump 만 유일하게 위치가 움직인다 → reduce 에서는 색 번쩍임만 남긴다(숫자는 계속 오른다) */
@media(prefers-reduced-motion:reduce){.auto-sim-summary .sim-live i.bump{animation:simBumpFlat .5s ease-out}}
@keyframes simBumpFlat{0%{color:#fff}40%{color:#fff;text-shadow:0 0 8px #3ff0dc}100%{color:#c9fff8}}
/* 파일 위쪽 360px 규칙이 1열로 떨어뜨리지만, 라벨/숫자를 좌우로 나눈 뒤로는 2열도 들어간다 */
@media(max-width:360px){
  .auto-sim-summary{grid-template-columns:repeat(2,minmax(0,1fr))}
  .auto-sim-summary span{font-size:8px}
  .auto-sim-summary i{font-size:10px}
}

/* 배치 라벨 — 카드 폭이 120px 남짓이라 글자를 붙이면 두 줄로 늘어지거나 잘린다.
   그래서 **아이콘 칩 한 줄**로 고정하고, 숫자(팀 번호·남은 턴)만 모서리 첨자로 얹는다.
   편성 종류는 색으로 가른다(전투=연두 / 자동 대기=보라 / 자동 진행=청록 …). */
/* gap 은 첨자(칩 밖으로 2px 나온다)가 옆 칩에 닿지 않을 만큼 준다 */
.pet-badges{flex-wrap:nowrap;gap:6px;margin-top:5px}
/* 컬러 이모지를 밝은 색 칩 위에 올리면 서로 묻힌다 → 칩 안쪽은 어둡게 두고
   편성 색은 **테두리와 숫자 첨자**가 맡는다(색 신호는 그대로, 아이콘 대비는 최대). */
.pb{position:relative;display:grid;place-items:center;flex:none;width:22px;height:22px;padding:0;
  border:2px solid var(--chip);background:#1b140d;font-size:12px;font-style:normal;line-height:1;
  box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.5)}
.pb>.emo{font-size:12px}
.pb>b{position:absolute;right:-3px;bottom:-3px;min-width:11px;height:11px;padding:0 1px;
  border:1px solid rgba(0,0,0,.8);background:var(--chip);color:#17120c;
  font:800 8px/10px "Galmuri11","Galmuri9",sans-serif;font-variant-numeric:tabular-nums}
.pb-party{--chip:#57e39a}
.pb-battle{--chip:#ffd257}
.pb-auto{--chip:#c98bff}
.pb-auto-run{--chip:#3ff0dc;animation:pbAutoRun 1.5s ease-in-out infinite}
@keyframes pbAutoRun{0%,100%{box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.5)}
  50%{box-shadow:0 2px 0 rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.5),0 0 10px #3ff0dc}}


/* 펫 등급 — 테두리만으로는 알아보기 어려워 배경 틴트 + 바닥 등급 띠를 함께 준다 */
.dungeon-pet-card{--rar:var(--com);--rar-soft:rgba(154,160,166,.20)}
.dungeon-pet-card.uncommon{--rar:var(--unc);--rar-soft:rgba(95,211,138,.22)}
.dungeon-pet-card.rare{--rar:var(--rare);--rar-soft:rgba(90,169,230,.22)}
.dungeon-pet-card.epic{--rar:var(--epic);--rar-soft:rgba(176,110,230,.26)}
.dungeon-pet-card.legendary{--rar:var(--leg);--rar-soft:rgba(242,161,62,.30)}
.dungeon-pet-card{border-color:var(--rar);background-color:var(--panel2);
  background-image:linear-gradient(180deg,var(--rar-soft) 0,rgba(0,0,0,0) 64%)}
.dungeon-pet-card:hover{background-color:#4a3a26}
.dungeon-pet-card.legendary{box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.05),0 0 12px rgba(242,161,62,.28)}
/* 등급 문장(紋章) — 카드 좌상단 한 줄: [등급 젬][별].
   예전엔 등급이 카드 바닥 전폭 텍스트 띠였다(세로 21px 낭비 + 별과 따로 놀았다). */
.pet-crest{position:absolute;z-index:4;top:3px;left:3px;display:flex;align-items:center;gap:3px;
  max-width:calc(100% - 30px)}
.rar-gem{flex:none;display:grid;place-items:center;width:16px;height:16px;
  border:1px solid rgba(0,0,0,.65);background:var(--rar);color:#17120c;font-style:normal;
  font:800 9px/1 "Galmuri11","Galmuri9",sans-serif;
  box-shadow:inset -1px -1px 0 rgba(0,0,0,.28),inset 1px 1px 0 rgba(255,255,255,.42)}
.rar-gem.r-legendary{animation:gemLegend 2.4s ease-in-out infinite}
@keyframes gemLegend{0%,100%{box-shadow:inset -1px -1px 0 rgba(0,0,0,.28),inset 1px 1px 0 rgba(255,255,255,.42)}
  50%{box-shadow:inset -1px -1px 0 rgba(0,0,0,.28),inset 1px 1px 0 rgba(255,255,255,.42),0 0 8px var(--leg)}}

/* 별은 젬 오른쪽에 한 줄로. 5개 이상은 `★12` 로 접혀 줄바꿈되지 않는다(별 최대 20). */
.pet-crest .pet-stars{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:9px}
.pet-crest .pet-stars.collapsed{letter-spacing:0;font-variant-numeric:tabular-nums}
/* 초상이 문장 줄과 겹치지 않도록 위쪽 여백을 젬 높이에 맞춘다 */
.dungeon-pet-card .pet-card-hit{padding-top:21px}
/* 슬롯 타일에도 같은 등급 신호를 준다 */
.slot-tile.filled{--rar:var(--com);--rar-soft:rgba(154,160,166,.18)}
.slot-tile.filled.r-uncommon{--rar:var(--unc);--rar-soft:rgba(95,211,138,.20)}
.slot-tile.filled.r-rare{--rar:var(--rare);--rar-soft:rgba(90,169,230,.20)}
.slot-tile.filled.r-epic{--rar:var(--epic);--rar-soft:rgba(176,110,230,.24)}
.slot-tile.filled.r-legendary{--rar:var(--leg);--rar-soft:rgba(242,161,62,.26)}
.slot-tile.filled{border-color:var(--rar);background-color:var(--panel);
  background-image:linear-gradient(180deg,var(--rar-soft) 0,rgba(0,0,0,0) 70%)}
.slot-tile.filled.auto{box-shadow:inset 0 3px 0 rgba(201,139,255,.5)}

/* 편성 상태 테두리는 등급색을 덮어쓴다(지금 어디에 들어가 있는지가 우선). 아래일수록 우선. */
.dungeon-pet-card.in-auto-party{order:-10;box-shadow:inset 0 0 0 2px rgba(201,139,255,.6)}
.dungeon-pet-card.in-battle{order:-15;border-color:#ffd257!important;box-shadow:inset 0 0 0 2px rgba(255,210,87,.45)}
.dungeon-pet-card.auto-running{order:-25;border-color:#3ff0dc!important;box-shadow:inset 0 0 0 2px rgba(63,240,220,.4)}
.dungeon-pet-card.in-party{order:-30;border-color:#57e39a!important}
/* 반짝이(shiny)는 편성 색보다도 위 — 원래 우선순위를 유지한다.
   단 아래 '편성 모드에서 담긴 펫' 규칙은 선택자가 더 강해 편성 모드에서만 이 색을 이긴다. */
.slot-tile.shiny,.dungeon-pet-card.shiny{border-color:#fff6b0!important}
.dungeon-pets[data-mode="auto"] .dungeon-pet-card:hover{border-color:#c98bff}

/* ══ 공통 전광판 링 (.mq-ring) ══════════════════════════════════════════════
   "지금 이 편성과 관련된 것"을 알리는 **단 하나의** 테두리 연출.
   빈 슬롯(여기 채우세요) · 담긴 펫 카드(이미 담김) · 대표팀 등록 버튼(눌러 확정)이
   모두 이 컴포넌트를 쓴다. 예전엔 셋이 각자 4변 점선을 구현해 픽셀이 깨져 보이고
   조금씩 달라져 있었다.
   쓰는 법: 요소에 `mq-ring` + 색 모디파이어(`mq-party|battle|auto`)를 준다.

   왜 색으로만 알리면 안 되나: 등급도 테두리 '색'을 쓴다. 언커먼(연두)↔전투 편성(연두),
   레전드(금)↔배틀(금)이 같은 색이라 색만으로는 구분이 안 됐다. */
.mq-party{--pick:#6effc0}
.mq-battle{--pick:#ffe27a}
.mq-auto{--pick:#e0b6ff}
/* 베이스 링은 편성색을 어둡게 — 그 위를 지나는 빛과 대비가 생긴다 */
.mq-ring{position:relative;border-style:solid!important;
  border-color:color-mix(in srgb,var(--pick) 38%,#0b0808)!important;
  animation:pickedPulse 1.7s ease-in-out infinite}
/* 빛은 배경이 아니라 ::before 레이어에 그린다 — 카드 background-image 는
   등급 틴트(--rar-soft)가 이미 쓰고 있어 덮으면 안 된다.
   inset 은 -2px 까지만(그리드 gap 5px — 더 나가면 옆 칸과 맞닿는다). */
.mq-ring::before{
  content:"";position:absolute;z-index:3;inset:-2px;padding:2px;pointer-events:none;
  /* @property 를 모르는 브라우저에서도 var() 가 유효하도록 초기값을 직접 깔아 둔다
     (없으면 conic-gradient 전체가 무효가 되어 링이 통째로 사라진다). */
  --marquee:0deg;
  background:conic-gradient(from var(--marquee),
    transparent 0deg 14deg,
    var(--pick) 26deg,#fff 34deg,var(--pick) 42deg,
    transparent 54deg 194deg,
    var(--pick) 206deg,#fff 214deg,var(--pick) 222deg,
    transparent 234deg 360deg);
  /* 가운데를 도려내 링(테두리)만 남긴다 */
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  mask-composite:exclude;
  animation:marqueeSpin 1.5s linear infinite}
/* 각도를 애니메이션하려면 커스텀 속성을 <angle> 로 등록해야 한다(미지원 시 정적 링) */
@property --marquee{syntax:"<angle>";initial-value:0deg;inherits:false}
@keyframes marqueeSpin{to{--marquee:360deg}}
@keyframes pickedPulse{
  0%,100%{box-shadow:0 0 4px color-mix(in srgb,var(--pick) 55%,transparent)}
  50%{box-shadow:0 0 14px var(--pick)}}
/* 빈 슬롯은 링이 테두리를 대신하므로 안쪽 점선/글자색만 링 색에 맞춘다 */
.slot-tile.empty.mq-ring{color:var(--pick)}
/* 담긴 펫은 목록 맨 앞으로 — 연출이 화면 밖에 있으면 소용이 없다 */
.dungeon-pet-card.mq-ring{order:-40}

/* 모션을 줄여 달라는 사용자에게도 **끄지 않는다** — 이 빛이 '지금 담겨 있다'를 알리는
   핵심 신호라 없애면 기능을 잃는다. 대신 현기증 유발 요소만 뺀다:
   번쩍이는 흰 하이라이트 제거 + 회전을 3배 이상 느리게 + 글로우도 완만하게.
   ⚠ 헤드리스 크롬은 **항상** reduce 로 보고한다 → 이 경로가 사실상 기본값이므로,
     애니메이션을 헤드리스로 검증할 때는 이 미디어쿼리를 걷어내고 측정해야 한다. */
@media(prefers-reduced-motion:reduce){
  .mq-ring{animation:pickedPulse 5s ease-in-out infinite}
  .mq-ring::before{animation:marqueeSpin 5s linear infinite;
    background:conic-gradient(from var(--marquee),
      transparent 0deg 24deg,var(--pick) 44deg,transparent 64deg 204deg,
      var(--pick) 224deg,transparent 244deg 360deg)}
}

@media(max-width:360px){
  .formation-board{padding:4px}
  .fb-tabs{gap:3px}
  .fb-tab{gap:2px;min-height:30px;padding:3px;font-size:9px}
  .fb-tab>b{font-size:8px}
  .fb-sum-row{grid-template-columns:70px minmax(0,1fr) auto;font-size:9px}
  .formation-board .slot-tile{min-height:70px}
  .formation-board .slot-face .pet-portrait{width:32px;height:32px}
  .pb{width:20px;height:20px;font-size:10px}
  .rar-gem{width:15px;height:15px;font-size:8px}
  .pet-crest .pet-stars{font-size:8px}
}

/* 월드 비공개(개발자 우회) — 탭은 보이되 '공개됨'으로 오해하지 않게 자물쇠 + 흐린 라벨.
   조건은 world_access=true && world_open=false 하나뿐이고 game.js updateModeNavigation 이
   붙였다 뗀다(공개 전환 시 저절로 사라짐). 라이트/스티커 테마의 button 규칙보다 선택자가
   구체적이라 순서와 무관하게 이긴다. */
.game-mode-nav button.is-private{position:relative}
.game-mode-nav button.is-private::after{content:"🔒";position:absolute;top:3px;right:5px;font-size:9px;line-height:1;opacity:.85;pointer-events:none}
.game-mode-nav button.is-private:not(.active){opacity:.68}

/* ── 펫 상점 출몰: 모드 내비 '상점' 버튼 무지개화 ─────────────────────────────
   ⚠ 이 PC(및 사내 다수 PC)는 Windows '애니메이션 표시' OFF 라 실제 크롬도 항상
   prefers-reduced-motion: reduce 다. 그래서 **색은 정적 background 로 먼저 칠하고**,
   @keyframes 는 '움직임'만 담당한다. 색을 keyframes 안에만 두면 그 PC 에서 단색 버튼이
   된다(animation:none 이면 keyframes 안의 속성이 기본값으로 튄다 — 공략집 wash 사례). */
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"]{
  position:relative;color:#fff;text-shadow:0 1px 0 rgba(0,0,0,.55);
  background-image:linear-gradient(100deg,#ff4d6d,#ff9f1c,#ffe14d,#3ddc84,#4cc9f0,#b15cff,#ff4d6d);
  background-size:300% 100%;background-position:0% 50%;
  box-shadow:inset 0 3px 0 rgba(255,255,255,.45);
}
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"].active{
  box-shadow:inset 0 3px 0 #fff,0 0 0 2px rgba(255,255,255,.35) inset;
}
/* 황금·전설 무드는 더 진하게 — 정지 상태에서도 구분된다 */
body.pet-shop-live[data-pet-shop-mood="golden"] .game-mode-nav button[data-game-mode="shop"],
body.pet-shop-live[data-pet-shop-mood="mythic"] .game-mode-nav button[data-game-mode="shop"]{
  background-image:linear-gradient(100deg,#ffd60a,#ff9f1c,#fff3b0,#ffd60a,#ff6b35,#ffd60a);
  filter:saturate(1.25);
}
body.pet-shop-live .game-mode-nav button[data-game-mode="shop"] .gm-icon{
  filter:drop-shadow(0 0 3px rgba(255,255,255,.85));
}
.pet-shop-nav-badge{
  position:absolute;top:2px;right:4px;min-width:15px;padding:1px 3px;
  background:#12101a;color:#ffe14d;border:1px solid rgba(255,255,255,.6);
  font:700 9px "Galmuri11","Galmuri9",sans-serif;line-height:13px;text-align:center;
}
.pet-shop-nav-badge[hidden]{display:none!important}

@keyframes petShopNavFlow{to{background-position:300% 50%}}
@media (prefers-reduced-motion: no-preference){
  body.pet-shop-live .game-mode-nav button[data-game-mode="shop"]{
    animation:petShopNavFlow 3.2s linear infinite;
  }
}

/* ══ 종별 지정색 (.bc) — GHUB 펫 마스터 '도감 색상' ═════════════════════════
   등급색 5종만으로는 히든·이벤트 종이 같은 레전드색에 묻힌다. 편성 상태가 쓰는 속성
   (.in-party/.in-battle 의 `border-color:!important`, .in-battle/.in-auto-party 의
   box-shadow)은 건드리지 않고, 아무도 안 쓰는 **outline(안쪽 링) + 배경 틴트**로만
   종 색을 얹는다 → 편성 중이어도 '무슨 종인지'와 '어디 편성됐는지'를 동시에 읽는다.
   ⚠ 두께를 border-width 로 내면 카드 높이가 종마다 달라져 그리드 정렬이 흔들린다. */
.dungeon-pet-card.bc{outline:3px solid var(--rar);outline-offset:-6px;
  background-image:linear-gradient(158deg,var(--rar-soft) 0%,rgba(0,0,0,0) 70%)}
.slot-tile.filled.bc{outline:3px solid var(--rar);outline-offset:-5px;
  background-image:linear-gradient(170deg,var(--rar-soft) 0%,rgba(0,0,0,0) 74%)}
/* 편성 링이 없는 카드는 바깥 테두리·글로우까지 종 색으로(가장 강한 신호) */
.dungeon-pet-card.bc:not(.in-party):not(.in-battle):not(.in-auto-party){
  border-color:var(--rar);
  box-shadow:inset -2px -2px 0 rgba(0,0,0,.32),inset 2px 2px 0 rgba(255,255,255,.05),0 0 11px var(--rar-glow)}

/* 편성 슬롯의 전투 역할 배지 — 레벨/피로와 같은 줄에 서므로 아주 작게 둔다. */
.pet-role{display:inline-flex;align-items:center;gap:2px;margin-right:4px;padding:0 3px;
  border-radius:3px;background:rgba(255,255,255,.10);font-size:9px;line-height:1.5;white-space:nowrap}
.pet-role i{font-style:normal;font-size:9px}

/* 전투 역할 라벨 — 색은 상대 정찰 카드의 `.role-*` 를 그대로 쓴다(같은 축을 두 색으로 칠하지 않는다).
   카드에서는 역할이 왼쪽, 배치 칩이 오른쪽에 선다. */
/* 배치 칩이 3개(팀+배틀+자동)까지 붙을 수 있다. 칩은 flex:none 이라 안 줄어드니
   좁아지면 역할 라벨이 밀려 넘친다 — 이쪽이 줄어들게 둔다. */
.pet-role{display:inline-block;min-width:0;overflow:hidden;text-overflow:ellipsis;
  padding:2px 4px;background:#292130;border:1px solid #51435d;
  color:#c8bbce;font-size:8px;line-height:1.4;white-space:nowrap}
/* 카드 content 끝(테두리에서 6px)에 딱 붙으면 배지가 박스라 답답해 보인다 — 3px 더 물린다.
   더 키우면 배치 칩이 3개일 때(팀·배틀·자동) 남는 폭이 모자란다. */
.pet-badges{justify-content:space-between;align-items:center;padding:0 3px;box-sizing:border-box}
.pb-set{display:flex;gap:6px;margin-left:auto}
/* 편성 슬롯은 폭이 좁다 — 레벨/피로와 한 줄에 서므로 더 작게. */
.slot-tile .pet-role{margin-right:4px;padding:1px 3px;font-size:7px}
/* 상세 모달 상태 줄 — '전투 팀 편성' 옆에 같은 크기로 선다. */
.pet-detail-status .role{background:#292130}
/* ⚠️ `.role-*` 는 이 파일 앞쪽(상대 정찰용)에 있어 같은 특이도로는 위 `.pet-role` 에 밀린다.
   조합 선택자로 다시 얹어야 색이 산다(실측: 안 그러면 전부 기본 회색으로 나온다). */
.pet-role.role-tank,.pet-detail-status .role.role-tank{border-color:#6f9ec7;color:#a9d8ff}
.pet-role.role-ranged,.pet-detail-status .role.role-ranged{border-color:#62a77f;color:#a7e7bd}
.pet-role.role-aoe,.pet-detail-status .role.role-aoe{border-color:#a06dc2;color:#dcb4f5}
.pet-role.role-support,.pet-detail-status .role.role-support{border-color:#c1a35e;color:#ffe09a}
.pet-role.role-melee,.pet-detail-status .role.role-melee{border-color:#b46868;color:#f2aaaa}

/* BGM lives in each screen's own header, not in a page-covering overlay. */
.dungeon-header.has-bgm-control{display:flex;align-items:center;justify-content:space-between;gap:8px}
.dungeon-header.has-bgm-control>.dungeon-header-main{order:0;flex:1;min-width:0}
.dungeon-header.has-bgm-control>.dungeon-who{order:1;min-width:0}
.dungeon-header.has-bgm-control>.bgm-header-slot{order:2;flex:none;display:flex}
.world-bgm-dock{position:fixed;z-index:80;top:0;left:50%;transform:translateX(-50%);width:min(100%,var(--game-shell-max));height:48px;display:flex;align-items:center;justify-content:center;padding:6px 12px;background:#15111b;border:3px solid #08060a;border-top:0}
.battle-panel .battle-top-actions{flex-direction:column;align-items:flex-end;gap:4px}
.battle-top-actions .bgm-control{max-width:none}
.battle-top-actions .bgm-toggle,.battle-top-actions .bgm-next{background:#34291f;color:#d9d4c9;border-color:#170b0c}
.battle-top-actions .bgm-next{display:none}
.battle-top-actions .bgm-track-title{display:none}
@media(max-width:360px){.dungeon-header.has-bgm-control{gap:4px;padding:8px}}

/* ── 모바일 절전(무입력 60초) — 던전 화면 ─────────────────────────────────
   game.js 가 body.power-save 를 토글한다. 예전에는 이 클래스가 방치 화면에서만 붙어서
   3D 가 도는 던전이 통째로 절전 사각지대였다(2026-08-19 수정).
   선택자를 하나씩 나열하지 않고 컨테이너 단위로 묶는다 — 나열식은 새 애니메이션이 추가될
   때마다 조용히 새기 때문이다. animation-play-state 는 레이아웃에 영향이 없고, 해제하면
   멈춘 지점에서 이어서 재생된다.
   ⚠️ 전투 중에는 절전이 걸리지 않는다(dungeon.js 의 registerBlocker) — 그 가드가 빠지면
   진행 중인 전투 연출이 얼어붙는다. */
/* ⚠️ `*` 는 타입 선택자라 ::before/::after 를 매칭하지 않고 animation-play-state 는 상속되지도
   않는다. 확장하지 않으면 pseudo 애니메이션(shinySweep·rewardHolo·dtabSheen·marqueeSpin 등)이
   절전을 통째로 통과한다 — 옛 나열식 규칙이 오히려 커버하던 것들이다. */
body.power-save #dungeonMode *,
body.power-save #dungeonMode *::before,
body.power-save #dungeonMode *::after{animation-play-state:paused!important}

/* ══ 배틀 내비 버튼 — 불꽃 격투 연출 ═════════════════════════════════════════
   배틀 허브가 던전 화면 **안쪽**에 있어서 존재를 모르는 사람이 많았다. 하단 내비로
   끌어올리면서 "여기서 붙는다"가 한눈에 읽히도록 불이 붙은 버튼으로 만든다.
   ⚠️ 상시 노출이라 월드보스 드래곤(로비가 열린 동안**만** 뿜는다)만큼 크게 태우지 않는다 —
      평상시는 낮게 일렁이고, 그 화면에 있을 때(.active)와 누르는 순간에만 확 붙는다.
   ⚠️ **keyframes 로 바꾸는 속성은 시작 프레임 값을 규칙 본문에도 적는다.** reduce 환경에서는
      animation 이 죽어 속성이 기본값으로 되돌아가는데, opacity 를 keyframes 에만 두면 불꽃이
      버튼을 통째로 덮는다(2026-08-04 조합 공략집이 정확히 이 사고였다).
   ⚠️ 장식 레이어에는 pointer-events:none — 없으면 버튼 클릭을 장식이 먹는다. */
.game-mode-nav button[data-game-mode="battle"]{position:relative;isolation:isolate;overflow:hidden}
.game-mode-nav button[data-game-mode="battle"]>.battle-nav-icon,
.game-mode-nav button[data-game-mode="battle"]>.battle-nav-label{position:relative;z-index:2}
.battle-nav-label{font-size:inherit;text-shadow:0 1px 2px #2a0a02,0 0 6px rgba(255,142,58,.55)}
.battle-nav-icon{filter:drop-shadow(0 1px 2px #1a0703)}
.game-mode-nav button[data-game-mode="battle"].active .battle-nav-icon{filter:drop-shadow(0 0 5px #ffb64a) drop-shadow(0 1px 2px #2a0a02)}

/* 화염 레이어 — 컨테이너 자체는 크기가 없고(font-size:0) 자식 넷이 층을 이룬다.
   ::before 화염 본체 / i 코어(속불) / b 임팩트 섬광 / em 불티. */
.battle-nav-flame{position:absolute;z-index:0;inset:0;display:block;overflow:hidden;pointer-events:none;font-size:0;opacity:.62}
.game-mode-nav button[data-game-mode="battle"].active .battle-nav-flame{opacity:.95}

.battle-nav-flame::before{content:"";position:absolute;left:-6%;right:-6%;bottom:-2px;height:20px;opacity:.82;transform:scaleY(1);transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,#fff3c4 0 9%,#ffd24a 16%,#ff8b21 34%,#e5401b 52%,rgba(150,26,10,.55) 68%,transparent 82%);
  clip-path:polygon(0 100%,6% 62%,17% 78%,24% 30%,34% 64%,42% 12%,50% 48%,58% 6%,66% 52%,75% 22%,82% 70%,93% 56%,100% 100%);
  filter:blur(.3px);animation:battleNavFlame 1.05s cubic-bezier(.45,0,.55,1) infinite}
.battle-nav-flame i{position:absolute;left:24%;right:24%;bottom:-1px;height:12px;opacity:.88;transform:scaleY(1);transform-origin:50% 100%;
  background:radial-gradient(ellipse at 50% 100%,#fffbe8 0 18%,#ffe27a 40%,rgba(255,150,40,.6) 70%,transparent 88%);
  clip-path:polygon(0 100%,12% 58%,26% 74%,36% 22%,50% 58%,62% 16%,72% 66%,88% 50%,100% 100%);
  animation:battleNavCore .72s ease-in-out infinite}

/* 임팩트 섬광 — 격투 히트의 "쾅". 평상시엔 숨어 있고 그 화면에 있을 때만 터진다. */
.battle-nav-flame b{position:absolute;left:50%;top:44%;width:26px;height:26px;margin:-13px 0 0 -13px;opacity:0;transform:scale(.4) rotate(0deg);
  background:radial-gradient(circle,#fff 0 18%,#ffe08a 34%,rgba(255,138,40,.75) 52%,transparent 72%);
  clip-path:polygon(50% 0,60% 34%,90% 12%,68% 42%,100% 50%,68% 58%,90% 88%,60% 66%,50% 100%,40% 66%,10% 88%,32% 58%,0 50%,32% 42%,10% 12%,40% 34%)}
.game-mode-nav button[data-game-mode="battle"].active .battle-nav-flame b{animation:battleNavImpact 2.4s ease-out infinite}
.game-mode-nav button[data-game-mode="battle"]:active .battle-nav-flame b{opacity:.95;transform:scale(1.15) rotate(18deg);animation:none}

/* 불티 — 점 하나에 box-shadow 로 네 개를 더 찍는다(요소를 늘리지 않으려고). */
.battle-nav-flame em{position:absolute;left:46%;bottom:9px;width:2px;height:2px;border-radius:50%;opacity:.8;transform:translateY(0);
  background:#ffd98a;box-shadow:-13px -3px 0 -.5px #ff9a3c,11px -6px 0 -.5px #ffc45e,-6px -9px 0 -1px #ff7a2a,17px -1px 0 -1px #ffae4d;
  animation:battleNavEmber 1.9s linear infinite}

@keyframes battleNavFlame{
  0%,100%{transform:scaleY(1);opacity:.85}
  28%{transform:scaleY(1.28) translateX(.6px);opacity:1}
  54%{transform:scaleY(.88) translateX(-.5px);opacity:.72}
  76%{transform:scaleY(1.16);opacity:.95}}
@keyframes battleNavCore{
  0%,100%{transform:scaleY(1);opacity:.9}
  40%{transform:scaleY(1.35);opacity:1}
  70%{transform:scaleY(.82);opacity:.78}}
@keyframes battleNavImpact{
  0%,72%{opacity:0;transform:scale(.4) rotate(0deg)}
  78%{opacity:.95;transform:scale(1.1) rotate(12deg)}
  86%{opacity:.45;transform:scale(.85) rotate(20deg)}
  92%{opacity:.8;transform:scale(1) rotate(26deg)}
  100%{opacity:0;transform:scale(.5) rotate(34deg)}}
@keyframes battleNavEmber{
  0%{opacity:0;transform:translateY(0)}
  18%{opacity:.85}
  100%{opacity:0;transform:translateY(-19px)}}

/* 활성 — 버튼 자체가 달아오른다. 기본 `.active`(보라)를 덮어야 하므로 특정성을 한 칸 올린다. */
.game-mode-nav button[data-game-mode="battle"].active{background:linear-gradient(#7d2a20,#3d1310);color:#ffeacc;box-shadow:inset 0 3px 0 #ff9c34,0 0 14px rgba(255,105,32,.34)}
body.has-sticker .game-mode-nav button[data-game-mode="battle"].active{box-shadow:inset 0 3px 0 #ff9c34,0 0 14px rgba(255,105,32,.34),0 0 10px var(--sticker)}
.game-mode-nav button[data-game-mode="battle"]:active{transform:translateY(1px)}

/* 절전(규칙 32) — 하단 내비는 `#dungeonMode` 밖이라 그 컨테이너 규칙에 안 걸린다.
   상시 도는 연출이므로 여기서 함께 재운다(월드보스 드래곤 불꽃도 같은 컨테이너다). */
body.power-save .game-mode-nav *,
body.power-save .game-mode-nav *::before,
body.power-save .game-mode-nav *::after{animation-play-state:paused!important}

/* reduce — 위치가 움직이는 것(불티 상승·임팩트 회전)만 멈추고 **불은 계속 타게** 둔다.
   이 버튼의 연출은 장식이 아니라 "여기가 대전"이라는 신호라, 통째로 끄면 다른 칸과
   구분이 사라진다. 정지 시 보이는 모습은 위 본문의 시작 프레임 값 그대로다. */
@media(prefers-reduced-motion:reduce){
  .battle-nav-flame em{animation:none;opacity:.7}
  .game-mode-nav button[data-game-mode="battle"].active .battle-nav-flame b{animation:none;opacity:0}
  .battle-nav-flame::before{animation-duration:2.6s}
  .battle-nav-flame i{animation-duration:2s}}

/* 칸이 많아지면 2줄로 접는다 — 6칸부터 "던전게임"(4글자)이 칸 폭을 넘겨 내비 전체가
   가로로 삐져나간다. 열 수는 JS 만 알기 때문에 game.js 가 data-cols 로 알려준다. */
.game-mode-nav[data-cols="6"] button,
.game-mode-nav[data-cols="7"] button{flex-direction:column;gap:1px;padding:0 1px;font-size:9px;line-height:1.15}
.game-mode-nav[data-cols="6"] button>span,
.game-mode-nav[data-cols="7"] button>span{font-size:13px}
.game-mode-nav[data-cols="6"] .battle-nav-label,
.game-mode-nav[data-cols="7"] .battle-nav-label,
.game-mode-nav[data-cols="6"] .world-boss-nav-label,
.game-mode-nav[data-cols="7"] .world-boss-nav-label{font-size:9px}
.game-mode-nav[data-cols="7"] button{letter-spacing:-.4px}
/* 2줄 배치에서는 라벨이 아래로 내려와 화염과 같은 자리에 온다 — 불을 더 낮춘다.
   (라벨을 위로 올리는 대신 불을 낮추는 이유: 아이콘이 위, 이름이 아래라는 다른 칸의
    순서를 이 칸만 뒤집으면 내비 전체가 어긋나 보인다.) */
.game-mode-nav[data-cols="6"] .battle-nav-flame::before,
.game-mode-nav[data-cols="7"] .battle-nav-flame::before{height:15px}
.game-mode-nav[data-cols="6"] .battle-nav-flame i,
.game-mode-nav[data-cols="7"] .battle-nav-flame i{height:9px}
.game-mode-nav[data-cols="6"] .battle-nav-flame em,
.game-mode-nav[data-cols="7"] .battle-nav-flame em{bottom:6px}