:root{--dq-ink:#fff7df;--dq-dark:#1f1711;--dq-panel:#34271e;--dq-line:#120d0a;--dq-gold:#f3c65b;--dq-mint:#70dbb0;--dq-red:#ef765f;--dq-blue:#78bce8;--game-shell-max:460px;--mode-nav-height:60px;--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} /* 하단 내비(1~2층)에 가리지 않게 비워 둘 높이 = --page-pad. 방치 게임 화면은 이 여백을 body 가 아니라 #app 이 진다(style.css #app 절). body 가 스크롤 상자라 **body 의 아래 여백을 스크롤 범위에 넣지 않는 모바일 엔진**이 있다 — 그러면 적립 탭 맨 아래 「제작」이 내비 밑에 깔려 끝까지 안 올라온다(2026-09-28 「모바일에서 생명의가루로 한도 제작이 안 됩니다」). 내용 안의 여백은 어느 엔진이든 스크롤된다. */ body{--page-pad:8px;padding-bottom:var(--page-pad);overflow-x:hidden}body.game-mode-authorized{--page-pad:calc(var(--mode-nav-height) + env(safe-area-inset-bottom) + 8px)}body.game-ready.idle-open:not(.game-mode-authorized){--page-pad:calc(var(--subnav-height) + env(safe-area-inset-bottom) + 8px)}body.game-mode-authorized.dungeon-open,body.game-mode-authorized.idle-open{--page-pad: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 임베드 — **화면 전체**(2026-09-24 개편). 헤더 도구 묶음(소리·알림·설정)과 하단 모드 메뉴는 월드 위에서 사라진다 — 겹쳐서 스틱·점프·레일을 덮었다. 나가기·소리·알림·설정은 월드 안의 메뉴가 청한다(dungeon.js `world:*`). 월드 메뉴를 못 누르는 동안(부팅·로그인·접속 종료)만 게임 창이 「나가기」를 대신 띄운다(.world-exit-fallback). */ body.world-open{overflow:hidden} body.world-open .game-mode-nav{display:none!important} /* 버닝타임 배너(모든 모드 공통 · 위 가운데)는 월드 메뉴 자리를 덮는다 — 월드에서는 무지개 테두리만 남긴다 */ body.world-open .burn-banner{display:none!important} #worldMode iframe{position:fixed;inset:0;width:100%;height:100dvh;border:0;z-index:30;background:#0d1520} #worldFramePlaceholder{position:fixed;inset:0;z-index:29;display:grid;place-items:center;background:#0d1520;color:#cfe0ee;font:700 12px "Galmuri11","Galmuri9",sans-serif} .world-exit-fallback{position:fixed;z-index:31;top:calc(env(safe-area-inset-top) + 10px);left:calc(env(safe-area-inset-left) + 10px);display:inline-flex;align-items:center;gap:6px;padding:7px 14px 7px 9px;border-radius:999px;border:1px solid rgba(236,95,82,.65);background:rgba(13,19,29,.9);color:#ffe3de;font:800 13px "Segoe UI","Apple SD Gothic Neo","Malgun Gothic",sans-serif;box-shadow:0 6px 18px rgba(0,0,0,.42);cursor:pointer;touch-action:manipulation} .world-exit-fallback img{width:22px;height:22px} .world-exit-fallback[hidden]{display:none} .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));border-bottom:0;}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;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} /* ⚠️ 여기 있던 `font-size:15px` 는 **아이콘이 글자(이모지)이던 시절의 크기**였다(2026-08-29 제거). 지금 아이콘은 `.gi` 로 px 가 고정이라 이 값이 닿는 곳은 라벨 span 둘(.battle-nav-label · .world-boss-nav-label)뿐이었고, 버튼 기본값 9px 을 이겨서 **그 둘만 15px** 로 커져 있었다 (3~5칸에서 눈에 띄고, 6·7칸에서만 [data-cols] 패치가 9px 로 되돌리고 있었다). */ .game-mode-nav button span{display:inline-block;line-height:1;margin:0} .dungeon-shell{padding:12px 10px 28px;font-family:"Galmuri11","Galmuri9",sans-serif;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))} .panel-title{display:flex;align-items:center;justify-content:space-between;gap:12px}.panel-title h2{margin:2px 0 0}.eyebrow{display:block;color:var(--dq-gold);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;letter-spacing:1.4px}.dungeon-summary{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}.dungeon-summary span{padding:7px 9px;} .dungeon-state{margin:15px 0;padding:14px;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:"Galmuri11","Galmuri9",sans-serif;cursor:pointer;font-size:12px;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;}.panel-title>strong{padding:7px 9px;} .dungeon-zone{padding:10px;margin-top:10px;}.dungeon-zone h3{margin:0 0 8px;}.stage-row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}.stage-node{min-height:48px;font:700 12px "Galmuri11","Galmuri9",sans-serif;overflow:hidden;cursor:pointer}.stage-node small{display:block;margin-top:2px}.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 #755a47;background:#2b1f17;color:#e8dac5;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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{padding:11px;cursor:pointer;touch-action:manipulation}.cube-action:active{transform:translate(2px,2px);}.cube-action.rest{background:#387563;box-shadow:inset 0 3px 0 #6bb397,3px 3px 0 #110c09}.cube-action.small{padding:8px;}.system-note{line-height:1.7;margin:11px 0 0} /* 편성 레인/슬롯 보드의 본 스타일은 파일 하단 '원탭 편성 개편' 섹션 참고. .assignment-empty 는 상대 상세 빈 상태에서 재사용. */ .assignment-empty{display:grid;place-items:center;min-height:30px;padding:4px;border:1px dashed #4e3d30;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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;border:1px solid #564233;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;}.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;padding:10px;}.dungeon-pet-card.in-party{order:-30;}.pet-fatigue{margin-top:8px;padding:7px;background:#1c140f;border:1px solid #4d3b2e}.fatigue-label,.rest-progress{display:flex;align-items:center;justify-content:space-between;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.fatigue-label strong{color:#ffd36b;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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:#bcae98}.rest-pips{display:flex;gap:3px;margin-left:auto}.rest-pips i{width:12px;height:5px;background:#503e32;border:1px solid #0a080b}.rest-pips i.filled{background:var(--dq-blue)}.skill-list{display:grid;gap:4px}.pet-skill{display:block;border-left:3px solid #a47dc2;padding:6px}.pet-skill b,.pet-skill small{display:block}.pet-skill b{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;}.pet-skill small{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.55;margin-top:3px}.empty-note{text-align:center;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;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;font-family:"Galmuri11","Galmuri9",sans-serif;text-align:center;touch-action:manipulation}.pet-grid-name{display:flex;align-items:center;justify-content:center;gap:3px;width:100%;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%;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-grid-meta b{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-grid-fatigue{width:100%;margin-top:auto}.pet-grid-fatigue-meter{height:6px;margin-top:3px;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;border:3px solid #0b080d;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;font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;line-height:1.4}.pet-detail-title-wrap p{margin:5px 0 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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:#35281f;border:1px solid #654c3a;color:#ccc0ad;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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;border:1px solid #594435}.pet-detail-section h3{margin:0 0 7px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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;border:1px solid #594435;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;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-detail-stat b{margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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;text-align:center}.pet-attribute span,.pet-attribute b{display:block}.pet-attribute span{overflow:hidden;text-overflow:ellipsis;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-attribute b{margin-top:3px;color:#8fe0c2;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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));border-top:2px solid #110c09}.pet-detail-actions button{min-height:42px;padding:6px;border:2px solid #120d0a;background:#70533f;color:#fff;font:700 10px "Galmuri9","Galmuri11",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;border:2px solid #110c09;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.stone-target select,.stone-card button{min-height:32px;border:2px solid #110c09;background:#5f4736;color:#fff;font:700 10px "Galmuri9","Galmuri11",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;border:2px solid #110c09}.stone-gem{width:36px;height:36px;display:grid;place-items:center;border:2px solid #100c08;color:#79c8f0;font-size:18px;font-family:"Galmuri11","Galmuri9",sans-serif}.stone-card.hp .stone-gem{color:#ef7f87}.stone-card strong,.stone-card span,.stone-card em{display:block}.stone-card strong{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.stone-card span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;margin-top:3px}.stone-card em{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#87d9b9;margin-top:3px;font-style:normal}.stone-card button{padding:0 8px}.stone-card button.ghost{background:#3d3026} .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:#110c09;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:#1f1711dd;border:2px solid #e8c265}.battle-top strong{display:grid;place-items:center;padding:7px 9px;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.35}.battle-top button{pointer-events:auto;padding:7px;background:#5d2d32;color:#fff;border:2px solid #170b0c;font:700 10px "Galmuri9","Galmuri11",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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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:#37291fdd;color:#fbf8f3;font:700 10px "Galmuri9","Galmuri11",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:#1f1711e8;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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.battle-pet-hud>span{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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:#886246;color:#fff;border:1px solid #18110c;font:700 10px "Galmuri9","Galmuri11",sans-serif;touch-action:manipulation}.battle-skills button:disabled{opacity:.55}.battle-skills small{display:inline;margin-left:2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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:24px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#ffd66d}.result-card span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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 "Galmuri9","Galmuri11",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;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-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}} @media(max-width:360px){.dungeon-summary{justify-content:flex-start}.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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-detail-dialog{padding:12px}.pet-detail-title-wrap h2{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif}.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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}} .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;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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:#cabdaa;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-experience-label strong{color:#ffe09a;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.pet-experience-meter{height:8px;margin-top:5px;border:1px solid #09070a;overflow:hidden}.pet-experience-meter i{display:block;height:100%;background:linear-gradient(90deg,#7669dc,#68d6d2,#f0ca66)}.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;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;} .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:#1f1711e8;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 15px "Galmuri14","Galmuri11",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;font-family:"Galmuri11","Galmuri9",sans-serif} .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:#34251be8;border:2px solid #ffe06b;color:#fff2a8;font:700 10px "Galmuri9","Galmuri11",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(31,25,20,.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:#b4a897;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:10px!important;font-family:"Galmuri9","Galmuri11",sans-serif!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} /* ── 상시 발동(패시브) 배지 ───────────────────────────────────────────────────── **버튼이 아니다** — 쿨다운도 시전도 없어 누를 게 없다. 그래서 버튼 색을 빌리지 않고, 대신 *살아 있는 연출*을 준다: 이 펫이 남과 다른 기술을 늘 두르고 있다는 것을 글자가 아니라 움직임으로 말한다(제보 #5315 "히든인데 기술이 2개로 보이니까 쩌리같아여"). 두 축으로 갈린다 — **움직임은 behavior(`data-fx`)**, **색은 속성**. 색은 새로 정하지 않고 화면이 이미 쓰는 `.elem-*`(`--elem-c`, 아래 §속성 배지)에서 끌어온다 — 따로 적었더니 전기 배지는 노랑인데 같은 펫 패시브 배지는 보라로 뜨는 일이 실제로 있었다. 짝은 뜻 그대로다: burn 솟는 열기(공격) · spike 톱니(반사) · hunt 조준선(노림) · stalk 흐르는 그림자(추격). ⚠️ **`--pfx-t` 없이는 연출이 한 번도 안 보인다.** `renderBattleHud` 가 120ms 마다 `innerHTML` 을 통째로 갈아 끼우므로 배지 노드는 초당 8번 새로 태어나고, 그때마다 CSS 애니메이션이 0% 로 되감긴다(2.2~5.2초짜리가 4~5% 만 재생되고 끊긴다). 그래서 화면이 경과 초를 `--pfx-t` 로 실어 주고, 여기서 **음수 지연**으로 되돌린다 — 새로 태어난 노드가 "이미 그만큼 재생된" 상태로 시작해 끊김 없이 이어진다. 전투 화면이라 **읽기가 먼저다**: 연출은 전부 글자 뒤(z-index 0)에 깔리고 `transform`· `opacity` 만 움직인다(합성기가 돌려 메인 스레드 페인트가 0 — WebGL 프레임과 같은 스레드다). `background-position` 은 쓰지 않는다. 정지는 파일 끝 reduced-motion 블록이 맡는다. */ .battle-skills .skill-passive,.battle-pet-hud.has-passive{--pfx-core:var(--elem-c,#cebca1);--pfx-hot:color-mix(in srgb,var(--pfx-core) 52%,#fff);--pfx-edge:color-mix(in srgb,var(--pfx-core) 68%,#1e150f);--pfx-fx-delay:calc(var(--pfx-t,0) * -1s)} .battle-skills .skill-passive{position:relative;isolation:isolate;contain:paint;display:flex;align-items:center;gap:3px;min-width:0;padding:4px 3px;overflow:hidden;background:#251b13;border:1px solid var(--pfx-edge);color:#f6ecde;font:700 10px "Galmuri9","Galmuri11",sans-serif;text-align:left;cursor:default} .battle-skills .skill-passive>.passive-mark,.battle-skills .skill-passive>.skill-button-label,.battle-skills .skill-passive>small{position:relative;z-index:1} .battle-skills .skill-passive>.passive-mark{flex:0 0 auto;padding:1px 3px;background:var(--pfx-edge);color:#faf4ec;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.25;font-style:normal} .battle-skills .skill-passive>.skill-button-label{flex:1 1 auto;max-width:none;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;text-align:left} .battle-skills .skill-passive>small{flex:0 0 auto;margin-left:0;color:var(--pfx-hot);text-shadow:0 1px 2px #0f0a07} .battle-skills .skill-passive .passive-fx{position:absolute;inset:0;z-index:0;display:block;overflow:hidden;pointer-events:none} .battle-skills .skill-passive .passive-fx::before,.battle-skills .skill-passive .passive-fx::after{content:'';position:absolute;display:block;animation-delay:var(--pfx-fx-delay)} /* 반경 안에 적이 들어와 실제로 피해가 들어가는 순간 — 배지가 눈에 띄게 달아오른다. */ .battle-skills .skill-passive.hitting{border-color:var(--pfx-hot);color:#fff;box-shadow:inset 0 0 9px rgba(255,255,255,.12),0 0 7px -2px var(--pfx-core)} .battle-skills .skill-passive.hitting .passive-fx{filter:brightness(1.4) saturate(1.25)} .battle-skills .skill-passive.hitting>.passive-mark{background:var(--pfx-hot);color:#1c140f} /* burn — 공격형 오라. 아래에서 열기가 솟고 사선 광택이 훑는다("세다"). */ .battle-skills .skill-passive[data-fx="burn"] .passive-fx{background:radial-gradient(ellipse 46% 58% at 16% 118%,var(--pfx-hot),transparent 70%),radial-gradient(ellipse 40% 64% at 52% 126%,var(--pfx-core),transparent 72%),radial-gradient(ellipse 44% 56% at 84% 120%,var(--pfx-hot),transparent 70%);opacity:.5;animation:pfxBurnRise 2.2s ease-in-out infinite;animation-delay:var(--pfx-fx-delay)} .battle-skills .skill-passive[data-fx="burn"] .passive-fx::after{top:0;bottom:0;left:-120%;right:-120%;background:linear-gradient(104deg,transparent 46%,var(--pfx-hot) 50%,transparent 54%);opacity:.26;animation:pfxSheen 3s linear infinite} /* spike — 반사. 위아래 모서리에서 톱니가 자라 서로 반대로 흐른다("뾰족하다"). */ .battle-skills .skill-passive[data-fx="spike"] .passive-fx::before,.battle-skills .skill-passive[data-fx="spike"] .passive-fx::after{left:-14px;right:-14px;height:5px;background-image:linear-gradient(45deg,var(--pfx-edge) 25%,transparent 25%),linear-gradient(-45deg,var(--pfx-edge) 25%,transparent 25%);background-size:7px 5px;background-repeat:repeat-x} .battle-skills .skill-passive[data-fx="spike"] .passive-fx::after{top:0;opacity:.55;animation:pfxSaw 2.6s linear infinite} .battle-skills .skill-passive[data-fx="spike"] .passive-fx::before{bottom:0;opacity:.75;animation:pfxSawFlip 2.6s linear infinite} /* hunt — 강자 사냥. 네 귀퉁이 조준 브래킷 + 좌우로 훑는 스캔선("노린다"). */ .battle-skills .skill-passive[data-fx="hunt"] .passive-fx{background:linear-gradient(var(--pfx-core),var(--pfx-core)) 0 0/5px 1px no-repeat,linear-gradient(var(--pfx-core),var(--pfx-core)) 0 0/1px 5px no-repeat,linear-gradient(var(--pfx-core),var(--pfx-core)) 100% 100%/5px 1px no-repeat,linear-gradient(var(--pfx-core),var(--pfx-core)) 100% 100%/1px 5px no-repeat;opacity:.8;animation:pfxLock 2.4s ease-in-out infinite;animation-delay:var(--pfx-fx-delay)} .battle-skills .skill-passive[data-fx="hunt"] .passive-fx::after{top:0;bottom:0;left:-120%;right:-120%;background:linear-gradient(90deg,transparent 46%,var(--pfx-hot) 50%,transparent 54%);opacity:.34;animation:pfxSheen 2.6s linear infinite} /* stalk — 후열 추격. 그림자 덩어리가 옆으로 미끄러진다("숨어 돈다"). */ .battle-skills .skill-passive[data-fx="stalk"] .passive-fx{background:radial-gradient(ellipse 52% 130% at 22% 50%,#000,transparent 72%),radial-gradient(ellipse 46% 130% at 74% 50%,var(--pfx-core),transparent 74%);opacity:.45;animation:pfxDrift 4.2s ease-in-out infinite;animation-delay:var(--pfx-fx-delay)} /* 상시 기술을 가진 펫은 칸 자체가 다르게 보인다 — 배지 하나가 아니라 칸이 "특별하다"고 말한다. */ .battle-pet-hud.has-passive{position:relative;border-color:var(--pfx-edge)} .battle-pet-hud.has-passive::after{content:'';position:absolute;inset:-2px;border:1px solid var(--pfx-core);pointer-events:none;opacity:.12;animation:pfxPetBreath 3.4s ease-in-out infinite;animation-delay:var(--pfx-fx-delay)} /* 쓰러지면 오라도 멈춘다(sim §8.5) — 화면도 같이 멈춘다. ⚠️ `!important` 는 게으름이 아니다. 계열 규칙이 `[data-fx=…]` 로 특이도가 한 단 높아서, 특이도로 이기려면 계열이 늘 때마다 이 선택자를 다시 세야 한다. 한 번 못 세면 조용히 죽는다. */ .battle-pet-hud.pet-down .skill-passive .passive-fx,.battle-pet-hud.pet-down .skill-passive .passive-fx::before,.battle-pet-hud.pet-down .skill-passive .passive-fx::after,.battle-pet-hud.has-passive.pet-down::after{animation:none!important} .battle-pet-hud.has-passive.pet-down::after{opacity:.06} @keyframes pfxBurnRise{0%,100%{transform:translateY(8%) scaleY(1);opacity:.4}50%{transform:translateY(-7%) scaleY(1.22);opacity:.74}} @keyframes pfxSheen{from{transform:translateX(-18%)}to{transform:translateX(18%)}} @keyframes pfxSaw{from{transform:translateX(0)}to{transform:translateX(14px)}} @keyframes pfxSawFlip{from{transform:scaleY(-1) translateX(0)}to{transform:scaleY(-1) translateX(-14px)}} @keyframes pfxLock{0%,100%{opacity:.45}50%{opacity:1}} @keyframes pfxDrift{0%,100%{transform:translateX(-8%)}50%{transform:translateX(8%)}} @keyframes pfxPetBreath{0%,100%{opacity:.1}50%{opacity:.4}} @media(max-width:360px){.battle-skills .skill-passive{gap:2px;padding:4px 2px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.battle-skills .skill-passive>.passive-mark{padding:1px 2px}} @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:15px;font-family:"Galmuri14","Galmuri11",sans-serif;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 12px "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:10px;font-family:"Galmuri9","Galmuri11",sans-serif}.level-up-event small{display:block;margin-top:5px;padding:3px 5px;color:#fff;background:#5a2d78e8;border:1px solid #f6d474;font:700 10px "Galmuri9","Galmuri11",sans-serif;box-shadow:0 2px 0 #2b1f16}.result-card .level-up-summary{color:#fff0a3;background:#4c315e;padding:7px;border:1px solid #a67bc0}.result-card .result-return{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} @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:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .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;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6} /* 길드 — 내 길드 / 목록. 1차 골격이라 보여줄 값이 적다(이름·인원·기여도). */ /* 내 부족 카드 — 부족원 목록뿐이다. 길드 목록·신청 줄(`.guild-row`/`.guild-list`)과 가입 대기(`.guild-pending`)는 자유 결성 폐지와 함께 걷어냈다(2026-08-19). */ .guild-card{border:2px solid #8a6c57;padding:9px 10px;margin-top:8px} .guild-card h3{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;margin:0} .guild-card .g-meta{margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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 #cbbca6;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .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-member.is-chief{border-color:#d9a441;background:#fffaf0} .guild-member .g-contrib.is-dim{opacity:.55} .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 10px "Galmuri9","Galmuri11",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 #8a6c57;background:#251d17;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,#8a6c57);border-radius:10px;text-align:center; background:rgba(16,12,8,.88);color:#fff;font:700 12px/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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:400;color:#e6d4b9} .tribe-pop.is-mine{box-shadow:0 0 0 2px rgba(255,255,255,.55),0 2px 0 rgba(0,0,0,.45)} /* 지도 위 오버레이 — 아래로 스크롤하지 않고 고른 영역을 읽고 바로 정할 수 있어야 한다. */ /* 지도 **아래** 제 자리(2026-09-09). 예전에는 `position:absolute;bottom:0` 으로 지도에 얹혀 아래 27%(390px 화면에서 107px)를 덮었고, 그 자리의 인구 배지 하나와 지도 안내문(`.tribe-map-note`)이 통째로 가려졌다. ⚠ 자리는 늘 비워 둔다(`min-height`) — 영역을 누를 때마다 판이 늘었다 줄면 눈이 흔들린다. 112px 은 흔한 경우(설명 + 사유 한 줄) 실측 107px 를 담는 값이고, 단추까지 붙는 가장 긴 경우(120px)에만 그만큼 늘어난다. */ .tribe-overlay{margin-top:8px;min-height:112px; padding:10px 10px calc(9px + env(safe-area-inset-bottom,0px));text-align:left;line-height:1.5; background:#251d17;border:2px solid var(--tribe,#8a6c57);color:#faf6ef} .tribe-overlay[hidden]{display:none} /* 아직 아무 영역도 안 눌렀을 때 — 빈 칸만 두면 고장 난 것처럼 보인다. */ .tribe-ov-hint{grid-column:1/-1;margin:0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#b6a387;line-height:1.7} /* 좌측은 설명, **우측 상단은 선택 버튼**. 버튼을 아래에 두면 버튼이 없는 영역 (공허의 숲·거인성)과 높이가 달라져 지도가 들썩인다. */ /* ⚠ 왼쪽은 `minmax(0,1fr)` 이다. 그냥 `1fr` 이면 오른쪽 `auto` 칸의 내용이 길 때 왼쪽이 **글자 하나 폭까지** 밀린다(2026-09-06 제보: 부족 이름이 세로로 쌓였다). */ .tribe-overlay{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:start; column-gap:10px} .tribe-ov-main{min-width:0} .tribe-ov-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} /* 이름은 줄이지 않는다 — 줄이면 세로로 쌓인다. 좁으면 지역명이 다음 줄로 내려간다. */ .tribe-ov-head b{flex:0 0 auto;white-space:nowrap;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;color:#fff} .tribe-ov-head small{flex:0 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis; white-space:nowrap;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#e3cfb1} .tribe-ov-stats{display:flex;flex-wrap:wrap;gap:10px;margin-top:4px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#eee0cc;font-variant-numeric:tabular-nums} .tribe-ov-stats em{font-style:normal;color:#bfae95;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .tribe-ov-blurb{margin:4px 0 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ddc9aa} .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 "Galmuri9","Galmuri11",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent} .tribe-ov-act:empty{display:none} /* 못 고르는 이유 — **전체 폭 한 줄**이다. 단추 자리(오른쪽 `auto` 칸)에 두면 문장 길이가 곧 그 칸의 폭이 되어 왼쪽 설명을 짓누른다(2026-09-06). */ .tribe-ov-why{grid-column:1/-1;margin:7px 0 0;padding:5px 8px; border:1px dashed rgba(255,255,255,.28); font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#e3cfb1;line-height:1.6} /* 하단 목록은 없앴다 — 인구·전투력이 지도 배지로 올라가면서 이름만 남는 줄이 됐다. 세 부족 비교는 배지 셋을 한눈에 보는 것으로 충분하고, 상세는 오버레이가 맡는다. */ .tribe-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;} /* ── 거점 점령전 ────────────────────────────────────────────────────────────── ⚠ 클래스 접두사는 `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:12px;font-family:"Galmuri11","Galmuri9",sans-serif;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .op-back{padding:5px 9px;border:2px solid #8a6c57; font:700 10px "Galmuri9","Galmuri11",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent} .op-tribe{padding:3px 8px;border:2px solid var(--tribe,#b6a387);border-radius:999px; font:700 10px "Galmuri9","Galmuri11",sans-serif;white-space:nowrap} .op-tickets{padding:3px 8px;border:2px solid #d9a441; font:700 10px "Galmuri9","Galmuri11",sans-serif;white-space:nowrap} .op-field{border:3px solid #8a6c57;background:#100c08;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,#b6a387);border-radius:50%; box-shadow:0 0 10px var(--op,#b6a387),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,#b6a387)} /* 클릭 영역은 링과 **같은 자리**다. 테두리를 그리면 지도에 격자가 얹힌 것처럼 지저분해진다. */ .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,#b6a387);border-radius:8px; background:rgba(16,12,8,.88);color:#fff;font:400 10px/1.2 "Galmuri9","Galmuri11",sans-serif; white-space:nowrap;box-shadow:0 2px 0 rgba(0,0,0,.45)} .op-tag b{color:var(--op,#b6a387);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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,#b6a387); background:rgba(16,12,8,.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:12px;font-family:"Galmuri11","Galmuri9",sans-serif} .op-ov-head small{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab} /* 닫기 — 터치 타깃 30px. 없으면 아래쪽 거점이 카드에 영영 가린다(규칙 31). */ .op-ov-close{margin-left:auto;width:30px;height:30px;flex:0 0 auto; border:2px solid #8a6c57;background:#5c3540;color:#fff;cursor:pointer; font:700 15px/1 "Galmuri14","Galmuri11",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,#b6a387);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .op-guard.is-me{background:rgba(255,255,255,.10)} /* 중립 몬스터 수비대 — 사람 수비대와 한눈에 갈려야 한다. */ .op-guard.is-npc{border-left-color:#b6a387} .op-guard.is-npc .op-who{color:#e6d4b9} .op-slot{color:var(--op,#b6a387);font-weight:700;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .op-who{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .op-pow{color:#e6d4b9;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-variant-numeric:tabular-nums} .op-empty{padding:8px 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab;text-align:center} .op-note{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab} /* 집결 로비 — 수비 목록과 액션 사이에 낀다. */ .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:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .op-clock{font:700 12px "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 #8a6c57;background:rgba(16,12,8,.6);font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab} .op-siege-foot button{min-height:28px;padding:4px 10px;border:2px solid #55c797;background:#123; color:#eafff5;font:700 10px "Galmuri9","Galmuri11",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} /* 이 거점에 걸린 전쟁 — 수비가 걸린 순간이 특히 중요하다(색만으로 말하지 않고 글자도 바뀐다). */ .op-war-note{margin:6px 0 0;padding:5px 7px;border:1px solid #d9a441;background:#2c2416; color:#ffe9b8;font:700 10px "Galmuri9","Galmuri11",sans-serif;line-height:1.6} .op-war-note.is-defend{border-color:#d98a8a;background:#2e1c1c;color:#ffd9d5} .op-front-go.is-defend{border-color:#d98a8a;color:#ffd9d5} /* 선포 가능 시각 한 줄(2026-09-19) — 🔒 풀리는 때 · ⭐ 우리 부족만 선포 가능 · 🛡 보호 중. ⚠ 전쟁 색(금색 · 붉은색 · 주황)을 쓰지 않는다 — 전쟁이 아니라 기다림이다. 뜻은 글자와 그림 글자가 말한다. */ .op-when{margin:6px 0 0;padding:4px 7px;border:1px solid #8a6c57;background:#281d16; color:#f3e8d8;font:400 10px "Galmuri9","Galmuri11",sans-serif;line-height:1.6} .op-when b{color:#fff} .op-when small{margin-left:4px;color:#cabeab} .op-tag .op-lock{font-style:normal;margin-left:3px;color:#f3e8d8} /* ── 부족 금고 ───────────────────────────────────────────────────────────── '있어보이게' 를 장식이 아니라 **위계**로 만든다: 적립 속도 하나만 크게(20px), 나머지는 9px 이하로 눌러 시선이 한 곳에 꽂히게. 금색은 이 카드에서 **숫자에만** 쓴다. ⚠ 상시 애니메이션을 두지 않는다(규칙 32) — 절전 배선을 카드 하나에 끌어오지 않는다. */ .tribe-vault{position:relative;margin-bottom:8px;padding:9px 10px 8px; border:2px solid #8a6c57;background:linear-gradient(180deg,#38291e 0%,#241a13 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:#5d4a3c} .tv-top{display:flex;align-items:baseline;gap:6px} .tv-eyebrow{font:700 10px/1 "Galmuri9","Galmuri11",sans-serif;letter-spacing:1.5px;color:#a49277} .tv-title{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#fff5da} .tv-hold{margin-left:auto;padding:2px 5px;border:1px solid #8a6c57;background:#211811; font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#e6d4b9;font-variant-numeric:tabular-nums} /* 적립 속도 — 이 카드에서 **가장 큰 것 하나**. */ .tv-rate{display:flex;align-items:baseline;gap:5px;margin-top:7px} .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 10px "Galmuri9","Galmuri11",sans-serif;color:#b6a894} .tv-day{margin-left:auto;font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#a49277;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 #5d4a3c;background:#211811} .tv-today-k{font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#a49277} .tv-today b{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#e6dcc4; font-variant-numeric:tabular-nums} .tv-today-cap{margin-left:auto;font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#a49277} .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 #8a6c57;background:#211811; font:700 10px "Galmuri9","Galmuri11",sans-serif} .tv-hold-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:#e6d4b9} .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:#846b5a} .tv-mult{color:#e6dcc4;text-align:right;font-variant-numeric:tabular-nums} .tv-next{color:#a49277;text-align:right;white-space:nowrap} /* 점령 진행 — 게이지 하나로 '얼마나 쥐고 있나'를 말한다. */ .tv-bar{height:7px;margin-top:7px;border:1px solid #120d0a;background:#1a120d;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 #5d4a3c;background:#211811;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 "Galmuri9","Galmuri11",sans-serif;color:#8b6d57;text-align:center} .tv-tier.is-on .tv-step{color:var(--dq-gold,#f3c65b)} .tv-need{font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#e6d4b9;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 10px "Galmuri9","Galmuri11",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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#a49277;line-height:1.55} .tv-claim{display:flex;align-items:center;gap:6px;margin-top:7px;padding-top:7px; border-top:1px solid #553f30} /* ⚠ `hidden` 속성이 위 `display:flex` 에 지면 **안 숨는다**(HiddenAttributeGuardTests). */ .tv-claim[hidden]{display:none} /* 2026-09-17 — 룬 · 시간당 아이템 · 되찾으면 · 현상금 */ .tv-claim-extra{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#e6d4b9} .tv-items{margin:7px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:3px} .tv-items[hidden]{display:none} .tv-item-row{display:grid;grid-template-columns:minmax(0,1fr) auto 52px;align-items:center;gap:6px; font:700 10px "Galmuri9","Galmuri11",sans-serif} .tv-item-row .tv-item{min-width:0;overflow:hidden;white-space:nowrap} .tv-item-rate{color:#a49277;white-space:nowrap} .tv-item-today{color:var(--dq-gold,#f3c65b);text-align:right;font-variant-numeric:tabular-nums} .tv-rune{color:#7fe0c4} .tv-tier-done{font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#7fe0c4} .tv-extra{display:grid;grid-template-columns:62px minmax(0,1fr);align-items:center;gap:6px;margin-top:6px} .tv-extra[hidden],.tv-bounty[hidden]{display:none} .tv-extra-k{font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#a49277} .tv-note[hidden]{display:none} .tv-claim-k{font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#a49277} .tv-claim b{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:var(--dq-gold,#f3c65b); font-variant-numeric:tabular-nums} .tv-claim-btn{margin-left:auto;min-height:32px;padding:6px 10px;cursor:pointer; border:2px solid var(--dq-gold,#d9a441);background:#3a2d1d;color:#fff5da; font:700 10px "Galmuri9","Galmuri11",sans-serif} .tv-claim-btn:disabled{border-color:#5d4a3c;background:#2d2119;color:#846b5a;cursor:default} /* 내 부족의 전쟁 — 금고와 같은 결의 어두운 카드다(두 테마에서 같게 읽힌다). ⚠ 색만으로 상태를 말하지 않는다 — 배지 글자가 늘 함께 바뀐다(§5.0). */ .tribe-war{margin-bottom:8px;padding:9px 10px 8px; border:2px solid #8a6c57;background:linear-gradient(180deg,#38291e 0%,#241a13 100%); box-shadow:inset 0 1px 0 rgba(255,255,255,.10),0 2px 0 rgba(0,0,0,.35)} .tribe-war.is-live{border-color:#ff8a3d} .tribe-war.is-incoming{border-color:#d98a8a} /* ⚠ 제목을 **줄이지 않는다**. flex 가 줄이면 360px 에서 "내 부족의 전쟁" 이 한 글자씩 세로로 쌓인다(2026-09-06 하네스 실측). 좁으면 배지가 다음 줄로 내려간다. */ .tw-head{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap} .tw-eyebrow{flex:0 0 auto;font:700 10px/1 "Galmuri9","Galmuri11",sans-serif;letter-spacing:1.5px;color:#a49277} .tw-title{flex:0 0 auto;white-space:nowrap;font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#fff5da} .tw-badge{margin-left:auto;padding:2px 6px;border:2px solid #8a6c57; font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#b6a894;white-space:nowrap} .tw-badge.is-proposed,.tw-badge.is-confirmed{border-color:#d9a441;color:#fff5da} .tw-badge.is-live{border-color:#ff8a3d;color:#ffb37a} .tw-badge.is-defend{border-color:#d98a8a;color:#ffd9d5} .tw-line{margin:7px 0 0;font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#f3e6cf; line-height:1.6} .tw-sub,.tw-people{margin:3px 0 0;font:700 10px "Galmuri9","Galmuri11",sans-serif; color:#b6a894;line-height:1.7} .tw-people{color:#8de0bb} .tw-bar{height:8px;margin-top:7px;border:2px solid #120d0a;background:#1a120d;overflow:hidden} .tw-bar>i{display:block;height:100%;width:0;background:var(--dq-gold,#f3c65b)} .tw-act{margin-top:8px} .tw-act:empty{display:none} .tw-main{width:100%;min-height:48px;padding:12px;cursor:pointer; border:2px solid #8a6c57;background:#35281f;color:#f3e6cf; font:700 12px "Galmuri11","Galmuri9",sans-serif} .tw-main.is-primary{border-color:var(--dq-gold,#d9a441);background:#3a2d1d;color:#fff5da} .tw-main:focus-visible{outline:2px solid var(--dq-gold,#d9a441);outline-offset:2px} .tw-main + .tw-main{margin-top:6px} /* 요약 스트립 — 모바일 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 #cbbca6; display:flex;flex-direction:column;gap:2px} .ts-k{font:700 10px "Galmuri9","Galmuri11",sans-serif;} .ts-cell b{font:700 12px "Galmuri11","Galmuri9",sans-serif; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* 거점 칩 — 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 #cbbca6;cursor:pointer; font:700 10px "Galmuri9","Galmuri11",sans-serif; -webkit-tap-highlight-color:transparent} .ts-chip i{flex:0 0 auto;width:7px;height:7px;background:var(--chip,#b6a387); 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} /* '오늘 할 일' 안내 — 남은 단계가 있을 때만 뜬다. ⚠ 상시 애니메이션 없음(규칙 32). */ .tribe-guide{margin-bottom:8px} .tg-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px; font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#4d3b2e} .tg-head span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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 #cbbca6;} .tg-step.is-done{opacity:.7} .tg-mark{font:700 12px "Galmuri11","Galmuri9",sans-serif;color:#8b6d57;text-align:center} .tg-body{min-width:0;display:flex;flex-direction:column;gap:2px} .tg-body b{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;} .tg-body span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5} .tg-goal{margin:7px 0 0;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6} /* 지도가 둘이라 관계를 적어 준다 — 지도 **아래**여야 누른 뒤 읽는 순서와 맞는다. */ .tribe-map-note{margin:6px 0 0;font:700 10px "Galmuri9","Galmuri11",sans-serif;line-height:1.6;text-align:center} .op-er-why{display:block;margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.4} /* 공허 침식 — 점령이 무엇을 주는지 한 줄로 보여준다. ⚠ 상시 애니메이션을 두지 않는다(규칙 32). */ .op-erosion{margin:0 0 7px;padding:6px 8px;border:2px solid #8a6c57;} .op-er-head{display:flex;align-items:baseline;justify-content:space-between;gap:6px; font:700 10px "Galmuri9","Galmuri11",sans-serif;} .op-er-head b{font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif;} .op-er-bar{height:10px;margin-top:4px;border:2px solid #8a6c57;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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;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 10px "Galmuri9","Galmuri11",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:#35281f; color:#fff5da;font:700 10px "Galmuri9","Galmuri11",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:#211913;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:12px;font-family:"Galmuri11","Galmuri9",sans-serif} .op-pick-head span{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab} .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 #8a6c57; background:#35281f;color:#f4eadb;font:400 10px "Galmuri9","Galmuri11",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-face{width:28px;height:28px;flex:0 0 auto;display:flex;align-items:center;justify-content:center} .op-pet-name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .op-pet-lv{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#cabeab} /* 예비 편성 — 팀 탭. 목록은 수비 편성과 같은 칸을 쓴다(규칙이 한 벌이다). */ .sq-tabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:7px} .sq-tab{padding:5px 7px;min-height:28px;border:2px solid #8a6c57;background:#35281f; color:#e2d0b5;font:400 10px "Galmuri9","Galmuri11",sans-serif;cursor:pointer; -webkit-tap-highlight-color:transparent} .sq-tab.is-on{border-color:var(--dq-gold);background:#3a2f18;color:#fff5da} .sq-tab.is-empty{opacity:.62} /* 덜 찬 팀 — 비어 있는 것과 **다르게** 보여야 한다(빈 팀은 그냥 안 쓰는 칸이고, 덜 찬 팀은 사람이 채우다 만 것이다). 저장 단추도 이때 잠긴다. */ .sq-tab.is-short{border-color:#d8734a;color:#ffd8c4} .sq-tab.is-short b{color:#ff9b6a} .sq-tab b{color:#8de0bb} .sq-add{border-style:dashed;color:#b1a087} /* 지금 고르는 팀에 든 펫 — 목록이 길어 스크롤하면 방금 넣은 것이 화면 밖으로 나간다. */ .sq-now{display:flex;flex-wrap:wrap;align-items:center;gap:4px;margin-bottom:7px; padding:5px 6px;background:#2d2119;border-left:3px solid var(--dq-gold); font:400 10px "Galmuri9","Galmuri11",sans-serif;color:#f4eadb} .sq-now>b{color:#ffd98a;margin-right:2px} .sq-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 5px;background:#1d3b30; border:1px solid #55c797;color:#dffaee;cursor:pointer} .sq-chip i{font-style:normal;color:#8fd8b8} .sq-none{color:#b1a087} .sq-clear{margin-right:auto;min-height:36px;padding:7px 12px;border:2px solid #8a6c57; background:#2f231a;color:#e2d0b5;font:700 10px "Galmuri9","Galmuri11",sans-serif;cursor:pointer} .sq-clear:disabled{opacity:.4;cursor:default} /* 다른 팀에 이미 든 펫 — 눌러도 안 들어간다는 것이 보여야 한다. */ .op-pet.is-other{opacity:.55;border-style:dashed} .op-pet-team{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ffd98a;white-space:nowrap} .sq-pick .op-pet-lv{white-space:nowrap} /* 전선 작전실 — 전쟁 카드와 편성 격자 */ .fr-warfixed h4{display:flex;align-items:baseline;gap:6px} .fr-warfixed.is-live{border-color:#ff8a3d} .fr-warfixed.is-incoming{border-color:#d98a8a} .fr-warfixed.is-none{border-color:#664f3f} .fr-war h4{display:flex;align-items:baseline;gap:6px} .fr-war-state{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;color:#ffd98a} .fr-war.is-live{border-color:#ff8a3d} .fr-war.is-live .fr-war-state{color:#ffb37a} .fr-teams{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:6px 0} .fr-team{display:flex;align-items:center;gap:3px;padding:4px 5px;background:#2d2119; border:1px solid #634d3d;font:700 10px "Galmuri9","Galmuri11",sans-serif;color:#f4eadb} .fr-team.is-empty{opacity:.45} /* 덜 찬 팀 — 3마리를 못 채워 **출전하지 않는다**(2026-09-03 규칙 고정). 빈 팀(그냥 안 쓰는 칸)과 달리 흐리게 두지 않고 눈에 띄게 둔다. */ .fr-team.is-short{border-color:#d8734a;color:#ffd8c4} .fr-warn{margin:6px 0 0;font:700 10px "Galmuri9","Galmuri11",sans-serif; color:#ff9b6a;line-height:1.7} .fr-team i{width:6px;height:6px;background:#634d3d;border-radius:50%} .fr-team i.is-on{background:#8de0bb} @media(max-width:420px){.fr-teams{grid-template-columns:repeat(2,1fr)}} .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 "Galmuri9","Galmuri11",sans-serif;cursor:pointer} .op-pick-act button:disabled{opacity:.45;cursor:default} /* 전선 입구 — 교전 중에는 불이 탄다. 움직임을 줄이려는 사람에게는 정지시킨다. */ .op-front-go.is-ablaze{border-color:#ff8a3d;color:#fff1de; background:linear-gradient(180deg,#7a2d10,#3a1408); animation:frontAblaze 1.1s ease-in-out infinite alternate} @keyframes frontAblaze{ from{box-shadow:0 0 0 0 #ff6a1a00,inset 0 -6px 10px -6px #ffb15a} to{box-shadow:0 0 10px 1px #ff6a1a88,inset 0 -10px 14px -6px #ffd9a8}} @media(prefers-reduced-motion:reduce){.op-front-go.is-ablaze{animation:none; box-shadow:0 0 8px 1px #ff6a1a66}} .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:10px;font-family:"Galmuri9","Galmuri11",sans-serif;} .gw-head b{font-size:15px;font-family:"Galmuri14","Galmuri11",sans-serif;font-variant-numeric:tabular-nums} .gw-head em{margin-left:auto;font-style:normal;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .gw-bar{position:relative;height:12px;margin-top:6px;border:2px solid #8a6c57;overflow:hidden} .gw-bar i{display:block;height:100%;background:#55c797} .gw-bar u{position:absolute;top:0;bottom:0;width:2px;background:#8a6c57;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 #cbbca6;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif} .gw-tier .gw-t{font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;font-weight:700} .gw-tier .gw-goal,.gw-tier .gw-state{font-variant-numeric:tabular-nums} .gw-tier .gw-reward{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .gw-tier.is-claimed{opacity:.6} .gw-note{margin-top:8px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.6} /* 미니게임 「박자 원정」 — 이번 주 곡 카드와 전체 화면 무대. 카드 골격(아이콘 + 제목 + 작은 줄 둘)은 던전의 다른 안내 카드와 같은 모양을 쓴다. 종목이 늘면 이 카드가 그대로 복제되는 자리다. */ .weekly-song{display:flex;align-items:center;gap:10px;margin-top:8px;padding:10px;border:2px solid #8a6c57;} .weekly-song .weekly-disc{font-size:24px;font-family:"Galmuri11","Galmuri9",sans-serif;line-height:1} .weekly-song b{display:block;font-size:12px;font-family:"Galmuri11","Galmuri9",sans-serif} .weekly-song small{display:block;margin-top:3px;font-size:10px;font-family:"Galmuri9","Galmuri11",sans-serif;line-height:1.5} /* 종목 배너 — 관리자가 올렸으면 카드 본문은 그림만 둔다. 게임명·내 기록·도전은 카드 머리에 모으므로 이미지 둘레에 설명/메타를 덧붙이지 않는다(관리 콘솔 ▸ 미니게임 ▸ 「종목별 공개」). */ .weekly-song.has-banner{display:block;margin-top:0;padding:0;overflow:hidden} .mg-banner-frame{aspect-ratio:755/213;overflow:hidden} .weekly-song.has-banner .mg-banner{display:block;width:100%;height:100%;object-fit:cover;object-position:center 27%} .weekly-actions{display:flex;align-items:center;gap:10px;margin-top:8px;flex-wrap:wrap} .weekly-play{flex:0 0 auto;padding:9px 18px;border:2px solid #8a6c57; font:700 12px "Galmuri11","Galmuri9",sans-serif;cursor:pointer} .weekly-play:focus-visible{outline:2px solid #c9a227;outline-offset:2px} /* 이번 주 종목이 아직 없을 때 — 버튼을 지우지 않고 **잠근다**. 사라지면 왜 못 하는지가 안 보인다. */ .weekly-play:disabled{opacity:.45;cursor:not-allowed} /* 무대는 화면을 통째로 덮는다. z-index 는 하단 내비(게임 모드 바)보다 위여야 한다 — 아래에 깔리면 나가기 버튼 위로 내비가 겹쳐 눌린다. */ .minigame-stage{position:fixed;inset:0;z-index:9000;background:#0b0d12} .minigame-stage iframe{display:block;width:100%;height:100%;border:0} /* 오른쪽 위 단추 줄 — 부족 대화 · BGM · 닫기(✕)가 나란히(2026-09-17 — 「✕ 나가기」 글자 단추가 머리줄을 가렸다). 단추 한 칸 28px · 틈 4px — 줄 폭은 단추 셋 92px(BGM 없는 종목은 둘 60px). 종목 머리줄은 오른쪽을 그만큼 비운다 (광차 · 피하기 · 박자 원정 · 갱도 확장은 각 html 의 `