/* THE BORDER r007 · 야전 태블릿 실전 스타일 (B 배치: 버튼을 접어 지도를 넓게) */ :root{--tx:#e3e1d8;--mu:#9a9b8e;--fr:#6fa8dc;--ho:#e05a4e;--ne:#d8c26a;--al:#5fbf8a;--bgp:#1a1d18f2;--bgi:#242821;--ln:#3a3f36;--font:"IBM Plex Sans KR",system-ui,sans-serif;--mono:"IBM Plex Mono",ui-monospace,monospace;--bar:50px;--strip:34px} *{box-sizing:border-box}html,body{margin:0;height:100%;background:#0a0c0e;color:var(--tx);font:13px/1.45 var(--font);overflow:hidden;-webkit-text-size-adjust:100%} #fw,.layout{position:fixed;inset:0} #map{position:absolute;inset:0}#map .mapboxgl-canvas{filter:saturate(.55) contrast(1.1) brightness(.92)} .mapboxgl-ctrl-logo{opacity:.35}.mapboxgl-ctrl-bottom-left{bottom:calc(var(--bar) + 18px)} #fx,#symbols{position:absolute;inset:0;pointer-events:none} .sym{position:absolute;transform:translate(-50%,-50%);pointer-events:none;font:600 9px var(--mono);text-align:center;white-space:nowrap} .sym .fl{display:block;width:30px;height:20px;margin:0 auto;border:1.5px solid #fffffff0;border-radius:2px;box-shadow:0 0 0 1px #000c,0 2px 5px #000c;background:#fff;object-fit:cover;image-rendering:auto} /* 국기 크게·흰 테두리(2026-10-21 대표: 더 뚜렷하게) */ .sym.en .fl{border-color:#ff8a80}.sym.ar .fl{border-color:#9cc3ff} .sym .t{margin-top:2px;color:var(--tx);text-shadow:0 0 3px #000,0 0 3px #000}.sym.en .t{color:#ffb3b3}.sym.ar .t{color:#cfe2ff} .sym .b{width:22px;height:14px;border:1.5px solid var(--fr);background:#6fa8dc33;margin:0 auto;position:relative}.sym.en .b{border-color:var(--ho);background:#e05a4e33;transform:rotate(45deg);width:13px;height:13px} .sym .b::before,.sym .b::after{content:"";position:absolute;inset:0;background:linear-gradient(to top right,#0000 46%,var(--fr) 46% 54%,#0000 54%),linear-gradient(to top left,#0000 46%,var(--fr) 46% 54%,#0000 54%)}.sym.en .b::before,.sym.en .b::after{display:none} .route{position:absolute;height:0;border-top:2px dashed #6fa8dccc;transform-origin:left;pointer-events:none}.route b{position:absolute;right:-4px;top:-5px;border:5px solid #0000;border-left:9px solid var(--fr)} .ring{position:absolute;transform:translate(-50%,-50%);border:1px dashed #e05a4e88;border-radius:50%;pointer-events:none} /* 상단 띠 · 보급 바 · 측면 레일 · 좌표 · 하단 바 */ #strip{position:absolute;left:0;right:0;top:0;height:var(--strip);background:var(--bgp);border-bottom:1px solid var(--ln);display:flex;align-items:center;justify-content:space-between;padding:0 10px;font:600 11px var(--mono);letter-spacing:.02em;z-index:5} #strip .r{display:flex;gap:10px;align-items:center}#strip .dtg{color:var(--mu)}#strip .blue{color:var(--fr)}#strip .fl{width:20px;height:14px;border:1px solid #0008} #logi{position:absolute;left:0;right:0;top:var(--strip);height:24px;background:#1a1d18d8;border-bottom:1px solid var(--ln);display:flex;align-items:center;gap:10px;padding:0 10px;font:500 10.5px var(--mono);color:var(--mu);white-space:nowrap;overflow:auto;z-index:5;scrollbar-width:none}#logi::-webkit-scrollbar{display:none} #logi b{color:var(--tx);font-weight:500}#logi .g{color:var(--ne)}#logi .inc{color:var(--al)} #rail{position:absolute;right:0;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 38px);display:flex;flex-direction:column;z-index:4}#rail button{width:40px;height:38px;background:var(--bgp);border:1px solid var(--ln);border-right:0;color:var(--mu);font:600 9px var(--mono);margin-top:-1px;cursor:pointer;letter-spacing:.04em}#rail button.on{color:var(--tx);background:var(--bgi)} #coord{position:absolute;left:0;right:0;bottom:var(--bar);height:20px;background:#1a1d18e0;border-top:1px solid var(--ln);display:flex;justify-content:space-between;align-items:center;padding:0 10px;font:500 10px var(--mono);color:var(--mu);z-index:4} #bar{position:absolute;left:0;right:0;bottom:0;height:var(--bar);background:var(--bgp);border-top:1px solid var(--ln);display:flex;z-index:6;padding-bottom:env(safe-area-inset-bottom)} #bar button{flex:1;background:none;border:0;border-right:1px solid #ffffff0a;color:var(--mu);font:500 10px var(--mono);letter-spacing:.08em;cursor:pointer}#bar button.on{color:var(--tx);background:var(--bgi)}#bar button small{display:block;font:400 9px var(--font);letter-spacing:0;color:inherit;opacity:.8} /* 카드 · 시트 · 공통 */ .btn{display:inline-block;padding:7px 11px;background:var(--bgi);border:1px solid var(--ln);color:var(--tx);font:500 11px var(--font);border-radius:2px;cursor:pointer;letter-spacing:.02em}.btn:disabled{opacity:.4;cursor:default} .btn.pri{background:#263a4c;border-color:var(--fr);color:#dcebf7}.btn.hot{background:#3a1a16;border-color:var(--ho);color:#ffd0d0} .h{font:600 9.5px var(--mono);color:var(--mu);letter-spacing:.12em;margin:0 0 6px;text-transform:uppercase} .kv{display:flex;justify-content:space-between;gap:8px;padding:4px 0;border-bottom:1px solid #ffffff0f;color:var(--mu);font-size:11.5px}.kv b{color:var(--tx);font-family:var(--mono);font-weight:500;text-align:right} .seg{display:flex;border:1px solid var(--ln);border-radius:2px;overflow:hidden;margin:6px 0}.seg span{flex:1;text-align:center;padding:6px;font:500 10px var(--mono);color:var(--mu);cursor:pointer}.seg .on{background:#263a4c;color:#dcebf7} #card{position:absolute;left:0;right:0;bottom:calc(var(--bar) + 20px);max-height:58vh;overflow:auto;padding:10px 12px;background:var(--bgp);border-top:1px solid var(--ln);z-index:5} #card .acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:8px}#card .why{margin-top:6px;color:#ffb3b3;font-size:11px} #sheet{position:absolute;left:0;right:0;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 30px);bottom:var(--bar);background:var(--bgp);border-top:1px solid var(--ln);z-index:7;overflow:auto;padding:12px} #sheet .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}#sheet .top .btn{padding:4px 9px} .tbl{width:100%;border-collapse:collapse;font:500 11px var(--mono)}.tbl td,.tbl th{padding:5px 4px;border-bottom:1px solid #ffffff0f;text-align:left;vertical-align:middle}.tbl th{color:var(--mu);font-weight:500;font-size:10px}.tbl td b{color:var(--tx);font-weight:500} input[type=range]{width:100%;accent-color:var(--fr)}input[type=text],input[type=password],select,input[type=number]{background:var(--bgi);border:1px solid var(--ln);color:var(--tx);padding:7px 8px;font:12px var(--font);border-radius:2px;width:100%} #toast{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 30px);max-width:92vw;padding:7px 12px;background:#0c0f12f0;border:1px solid var(--ln);border-left:3px solid var(--fr);color:var(--tx);font:500 11px var(--mono);opacity:0;transition:opacity .25s;z-index:9;pointer-events:none}#toast.on{opacity:1}#toast.bad{border-left-color:var(--ho)} .msg{padding:5px 0;border-bottom:1px solid #ffffff0a;font-size:11.5px}.msg .f{font:500 9.5px var(--mono);color:var(--mu)}.msg .c{display:block;margin-top:3px;padding:6px 8px;background:var(--bgi);border-left:2px solid var(--fr)} /* 전투 연출 HUD */ #bhud{position:absolute;left:0;right:0;bottom:calc(var(--bar) + 20px);padding:10px 12px;background:var(--bgp);border-top:1px solid var(--ln);z-index:6} #bhud .pw{display:flex;justify-content:space-between;font:600 11px var(--mono)}#bhud .pw .a{color:var(--fr)}#bhud .pw .d{color:#ffb3b3} #bhud .pb{height:3px;background:#ffffff1a;margin:6px 0}#bhud .pb i{display:block;height:100%;background:var(--fr)} #bhud .log{max-height:84px;overflow:auto;font:500 10.5px var(--mono);color:var(--mu)}#bhud .log div{padding:2px 0}#bhud .log b{color:var(--tx);font-weight:500;margin-right:6px} #bhud .res{font:600 14px var(--mono);letter-spacing:.12em;margin:4px 0}#bhud .res.win{color:var(--al)}#bhud .res.lose{color:var(--ho)} #btag{position:absolute;left:10px;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 38px);padding:4px 8px;background:var(--bgp);border:1px solid var(--ln);font:500 10px var(--mono);z-index:5} /* 인증 */ [hidden]{display:none!important} #auth{position:absolute;inset:0;background:#0a0c0e;z-index:20;overflow:hidden} #auth-map{position:absolute;inset:0}#auth-map .mapboxgl-canvas{filter:saturate(.45) contrast(1.1) brightness(.62)} #auth .vig{position:absolute;inset:0;box-shadow:inset 0 0 160px #000e;pointer-events:none} #auth .cross{position:absolute;left:50%;top:40%;width:140px;height:140px;transform:translate(-50%,-50%);border:1px solid #ffffff22;border-radius:50%;pointer-events:none}#auth .cross::before{content:"";position:absolute;left:-50px;right:-50px;top:50%;border-top:1px solid #ffffff22}#auth .cross::after{content:"";position:absolute;top:-50px;bottom:-50px;left:50%;border-left:1px solid #ffffff22} #auth .a-strip{position:absolute;left:0;right:0;top:0;height:var(--strip);background:var(--bgp);border-bottom:1px solid var(--ln);display:flex;align-items:center;justify-content:space-between;padding:0 12px;font:600 11px var(--mono);letter-spacing:.06em}#auth .a-strip .dtg{color:var(--mu)} #auth .a-logo{position:absolute;left:0;right:0;text-align:center;padding-left:.22em;top:calc(var(--strip) + 24px);font:600 24px var(--mono);letter-spacing:.22em;color:var(--tx);text-shadow:0 1px 4px #000}#auth .a-logo small{display:block;font:500 9px var(--mono);letter-spacing:.2em;color:var(--mu);margin-top:5px} #auth .cross{display:none} /* 가운데 창에 십자선이 삐져나와 숨김 */ #auth form{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(400px,calc(100% - 24px));max-height:calc(100% - 140px);overflow:auto;background:var(--bgp);border:1px solid var(--ln);padding:14px;display:grid;gap:8px;margin:0} /* 로그인·등록 창은 화면 가운데(2026-11-02) */ #auth form .h{margin:0 0 2px}#auth .err{color:#ffb3b3;font:500 10.5px var(--mono);min-height:14px}#auth .note{font:500 9.5px var(--mono);color:var(--mu);text-align:center;line-height:1.4} #auth .a-tick{position:absolute;left:0;right:0;bottom:0;height:22px;background:#0c0f12e6;border-top:1px solid var(--ln);font:500 9.5px var(--mono);color:var(--mu);display:flex;align-items:center;padding:0 12px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} @media (min-width:900px){#auth form{width:380px}} @media (min-width:900px){#card{left:auto;right:0;width:380px;bottom:var(--bar);top:auto;max-height:calc(100vh - var(--strip) - var(--logx,0px) - var(--warnx,0px) - var(--bar) - 40px);border-left:1px solid var(--ln);border-top:0}#sheet{left:auto;width:460px;border-left:1px solid var(--ln)}#bhud{left:auto;right:0;width:380px}} /* 본거지 모듈이 열리면 지도용 띠·레일·좌표는 숨긴다(본거지는 자기 HUD를 가짐) */ #fw.base-open #rail,#fw.base-open #coord,#fw.base-open #card,#fw.base-open #symbols,#fw.base-open #map,#fw.base-open #fx{display:none!important} #h4-lines{background-image:linear-gradient(#ffffff30 1px,transparent 1px),linear-gradient(90deg,#ffffff30 1px,transparent 1px)!important} #chatline{position:absolute;left:8px;right:48px;bottom:calc(var(--bar) + 26px);padding:5px 9px;background:#1a1d18e6;border:1px solid var(--ln);border-left:3px solid var(--al);font:500 10.5px var(--mono);color:var(--mu);z-index:4;cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#chatline b{color:var(--tx);font-weight:500}#chatline span{color:var(--fr)} #fw.base-open #chatline{display:none!important} /* ===== 본거지 모듈(r006 공용) 재스킨 · 야전 태블릿 팔레트 ===== */ #hq4{font-family:var(--font)!important;color:var(--tx)} #hq4 .h4-top,#hq4 .h4-stat,#hq4 .h4-tools,#hq4 .h4-confirm,#hq4 #h4-msg,#hq4 .h4-apop,#hq4 .h4-satbox,#hq4 .h4-mcard,#hq4 .mk2-card,#hq4 .mk2-book,#hq4 .h4-chip,#hq4 .h4-hud{background:var(--bgp)!important;border:1px solid var(--ln)!important;border-radius:2px!important;box-shadow:none!important;color:var(--tx)!important} #hq4 .h4-top{border-radius:0!important;border-left:0!important;border-right:0!important;border-top:0!important} #hq4 .h4-top h2{font:600 12px var(--mono)!important;letter-spacing:.06em;color:var(--tx)!important;text-transform:uppercase} #hq4 .h4-res .h4-chip,#hq4 .h4-chip{font-family:var(--mono)!important;font-size:10.5px!important;color:var(--mu)!important;border-color:var(--ln)!important} #hq4 .h4-chip b,#hq4 .h4-chip em{color:var(--tx)!important;font-style:normal} #hq4 .h4-act button,#hq4 .h4-tools button,#hq4 .h4-confirm button,#hq4 .h4-mcard button,#hq4 .bk,#hq4 .mk-form button{background:var(--bgi)!important;border:1px solid var(--ln)!important;color:var(--tx)!important;border-radius:2px!important;font:500 11px var(--font)!important;box-shadow:none!important;text-shadow:none!important} #hq4 .h4-act button.primary,#hq4 .h4-tools button.on,#hq4 .h4-confirm button.primary,#hq4 button.primary{background:#263a4c!important;border-color:var(--fr)!important;color:#dcebf7!important} #hq4 .h4-act select,#hq4 .mk-form input,#hq4 .mk-form select,#hq4 input,#hq4 select{background:var(--bgi)!important;border:1px solid var(--ln)!important;color:var(--tx)!important;border-radius:2px!important} #hq4 .h4-stat{font:500 10.5px var(--mono)!important;color:var(--mu)!important} #hq4 .h4-b{border:1px solid #6fa8dc88!important;background:#0a0c0e55!important;border-radius:0!important;box-shadow:none!important} #hq4 .h4-b.sel{border-color:#ffffff!important;box-shadow:0 0 0 1px var(--fr)!important} #hq4 .h4-b .h4-tag{background:#0c0f12e0!important;border:0!important;font:500 9px var(--mono)!important;color:var(--tx)!important;border-radius:0!important} #hq4 .h4-b .h4-lv{background:var(--fr)!important;color:#061018!important;font:600 9px var(--mono)!important;border-radius:0!important} #hq4 .h4-b .h4-foot{border-color:#6fa8dc55!important;background:#6fa8dc14!important} #hq4 .h4-b.damaged{border-color:var(--ho)!important}#hq4 .h4-b.building{border-color:var(--ne)!important} #hq4 .h4-tbox{border:1px solid #6fa8dc33!important;background:#6fa8dc12!important} #hq4 .h4-annex .mk{background:var(--bgp)!important;border:1px solid var(--fr)!important;color:#dcebf7!important;font:600 10px var(--mono)!important;border-radius:2px!important} #hq4 #h4-ghost{border:1px dashed var(--fr)!important;background:#6fa8dc22!important;color:#dcebf7!important;font:500 9px var(--mono)!important}#hq4 #h4-ghost.bad{border-color:var(--ho)!important;background:#e05a4e22!important;color:#ffd0d0!important} #hq4 .h4-mcard header h3,#hq4 h3,#hq4 h4{font:600 11px var(--mono)!important;letter-spacing:.08em;color:var(--mu)!important;text-transform:uppercase} #hq4 .eyebrow,#hq4 .h4-mcard .eyebrow{color:var(--mu)!important;font-family:var(--mono)!important} #hq4 a,#hq4 .gold,#hq4 .gd{color:var(--ne)!important} #hq4 .mk2-row.on{background:#263a4c!important} #hq4 .h4-tools{left:0!important;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 60px)!important;border-left:0!important} #hq4 #h4-msg{font:500 10.5px var(--mono)!important;border-left:3px solid var(--fr)!important} /* ===== 기지 장면(A안) ===== */ #hq5{position:absolute;left:0;right:0;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 30px);bottom:var(--bar);background:#0a0c0e;z-index:4;display:flex;flex-direction:column} #hq5 .b5-top{flex:none;padding:6px 10px;background:var(--bgp);border-bottom:1px solid var(--ln)} #hq5 .b5-title{font:600 11px var(--mono);letter-spacing:.06em} #hq5 .b5-stat{display:flex;gap:10px;flex-wrap:wrap;margin-top:3px;font:500 9.5px var(--mono);color:var(--mu)}#hq5 .b5-stat .ok{color:var(--al)}#hq5 .b5-stat .bad{color:#ffb3b3} #hq5 .b5-scene{flex:1;position:relative;overflow:hidden;min-height:0} #hq5 #b5-cv{position:absolute;inset:0}#hq5 #b5-slots{position:absolute;inset:0} #hq5 .b5-b{position:absolute;display:flex;align-items:flex-end;justify-content:center;cursor:pointer} #hq5 .b5-b img{display:block;filter:drop-shadow(0 4px 4px #000a);pointer-events:none;transform:translateY(8%)} #hq5 .b5-b .pad{position:absolute;left:4%;right:4%;bottom:-2px;height:28%;border-radius:50%;background:#0006} #hq5 .b5-b .lv{position:absolute;right:-4px;top:-4px;background:var(--fr);color:#061018;font:600 9px var(--mono);padding:1px 4px} #hq5 .b5-b .nm{position:absolute;left:50%;bottom:-15px;transform:translateX(-50%);font:500 8.5px var(--mono);color:var(--tx);text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap} #hq5 .b5-b .tag{position:absolute;left:0;top:0;background:var(--ho);color:#fff;font:600 8px var(--mono);padding:1px 4px} #hq5 .b5-b .pg{position:absolute;left:8%;right:8%;top:-6px;height:3px;background:#0009}#hq5 .b5-b .pg b{display:block;height:100%;background:var(--ne)} #hq5 .b5-b.sel{outline:2px solid #fff;outline-offset:3px}#hq5 .b5-b.dmg img{filter:drop-shadow(0 4px 4px #000a) saturate(.4) brightness(.8)}#hq5 .b5-b.busy img{opacity:.75} #hq5 .b5-s{position:absolute;display:flex;flex-direction:column;align-items:center;justify-content:center;border:1.5px dashed #6fa8dc99;background:#6fa8dc14;border-radius:4px;color:#9cc4ff;font:600 9.5px var(--mono);cursor:pointer} #hq5 .b5-s small{font:500 8px var(--mono);color:var(--mu)}#hq5 .b5-s.lock{border-color:#ffffff30;background:#00000033;color:var(--mu);cursor:default} #hq5 .b5-tools{flex:none;display:flex;gap:4px;padding:5px 6px;background:var(--bgp);border-top:1px solid var(--ln);overflow-x:auto;scrollbar-width:none}#hq5 .b5-tools::-webkit-scrollbar{display:none} #hq5 .b5-tools button{flex:none;background:var(--bgi);border:1px solid var(--ln);color:var(--tx);padding:7px 10px;font:500 10.5px var(--font);border-radius:2px;cursor:pointer} .b5-hero{height:90px;display:flex;align-items:center;justify-content:center;background:var(--bgi);border:1px solid var(--ln);margin-bottom:8px}.b5-hero img{height:80px;filter:drop-shadow(0 3px 3px #000a)} .b5-tbl td{vertical-align:middle}.b5-tbl .th{width:36px;height:28px;object-fit:contain}.b5-tbl tr.off{opacity:.55}.mu{color:var(--mu)}.ok{color:var(--al)}.bad{color:#ffb3b3} @media (min-width:900px){#hq5{left:0;right:0}} .rsym{position:absolute;transform:translate(-50%,-50%);pointer-events:none;display:flex;align-items:center;gap:1px;background:#0c0f12cc;border:1px solid #ffffff22;border-radius:3px;padding:1px 3px 1px 2px}.rsym img{width:14px;height:14px;display:block}.rsym b{font:700 9px var(--mono);color:var(--tx)}.rsym .gS{color:#ffb347}.rsym .gA{color:#ffd166}.rsym .gB{color:#cfe2ff} .bsym{position:absolute;transform:translate(-50%,-100%);pointer-events:none;display:flex;align-items:center;gap:3px;background:#3a1212e6;border:1px solid var(--ho);border-radius:3px;padding:1px 5px;font:600 9px var(--mono);color:#ffd0d0;animation:bpulse 1.2s ease-in-out infinite}.bsym img{width:12px;height:12px}.bsym.done{animation:none;background:#1a1d18e6;border-color:var(--ln);color:var(--mu)} @keyframes bpulse{50%{opacity:.55}} .ico{vertical-align:-3px;margin-right:2px}#logi .ico{margin-right:3px} #bar button .ico{display:block;margin:0 auto 1px} .b5-org{display:grid;grid-template-columns:1fr 1fr;gap:5px}.b5-org .btn{text-align:left}.b5-org small{display:block;color:var(--mu);font:500 9px var(--mono)} /* 야전군 표시(대표 결정 2026-10-14): X 기호 대신 국기 파란 테두리 + 병력 숫자 탭 */ .sym.army{z-index:3}.sym .fw{position:relative;display:inline-block;padding:3px;border:3px solid var(--fr);background:#0a0c0e;box-shadow:0 0 0 1px #000,0 0 10px #6fa8dcaa} .sym .fw .fl{margin:0;border:0;box-shadow:none} .sym .fw .n{position:absolute;left:100%;top:-3px;bottom:-3px;display:flex;align-items:center;padding:0 5px;background:var(--fr);color:#08131d;font:800 12px var(--mono);border:1px solid #000;border-left:0;text-shadow:none} .sym .fw.mv{border-style:dashed;animation:armyPulse 1.2s infinite}.sym .fw .arr{display:block;width:26px;height:19px;position:relative} .sym .fw .arr::before{content:"";position:absolute;left:7px;top:3px;border-left:13px solid #cfe2ff;border-top:6.5px solid #0000;border-bottom:6.5px solid #0000} .sym.army .t{color:#cfe2ff} @keyframes armyPulse{50%{box-shadow:0 0 0 1px #000,0 0 18px #6fa8dc}} .b5-org .orgimg{display:block;width:100%;height:64px;object-fit:cover;margin:-2px 0 4px;border:1px solid #2a2e27;background:#111} #net-body .btn,#net-body .seg span{white-space:nowrap} #pw-leg{position:absolute;left:12px;top:96px;z-index:6;background:#0a0c0ee6;border:1px solid var(--ln);padding:6px 8px;font:600 10px var(--mono);min-width:120px}#pw-leg div{display:flex;align-items:center;gap:5px;margin-top:3px}#pw-leg i{width:10px;height:10px;display:inline-block;border:1px solid #000}#pw-leg span{margin-left:auto;color:var(--mu)} #rail button{position:relative}.mbadge{position:absolute;right:-4px;top:-4px;background:var(--ho);color:#fff;font:800 9px var(--mono);padding:0 3px;min-width:12px;text-align:center} /* 멀티플레이 경보(r059): 내 영토로 오는 적 행군·적 집결. 적 경로는 빨간 점선. */ .route.en{border-top-color:#e05a4ecc}.route.en b{border-left-color:var(--ho)} #threat{position:absolute;left:50%;transform:translateX(-50%);top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 36px);z-index:6;background:#2a1412ee;border:1px solid var(--ho);color:#ffd2cc;font:600 11px var(--mono);padding:5px 10px;display:flex;gap:10px;align-items:center;cursor:pointer;max-width:calc(100vw - 32px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} #threat b{color:#fff}#threat .k{border:1px solid var(--ho);padding:0 5px;font-size:10px;letter-spacing:.08em} .on-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:#55605a;margin-right:5px;vertical-align:middle}.on-dot.on{background:var(--al)} /* 지휘관 교리 C안(r064): 분포 도형 + 경로 */ .dq-head{display:flex;align-items:center;gap:10px;margin:8px 0}.dq-pts{margin-left:auto;text-align:right;font:600 20px var(--mono);color:var(--ne)}.dq-pts small{display:block;font:500 9.5px var(--mono);color:var(--mu)} .dq-tag{font:600 9.5px var(--mono);border:1px solid var(--fr);color:var(--fr);padding:0 4px} .dq-grid{display:grid;grid-template-columns:minmax(220px,300px) 1fr;gap:8px}@media(max-width:720px){.dq-grid{grid-template-columns:1fr}} .dq-box{background:var(--bgi);border:1px solid var(--ln);padding:8px;margin-bottom:8px} .dq-path{position:relative;padding-left:16px;margin-top:8px}.dq-path:before{content:'';position:absolute;left:5px;top:6px;bottom:6px;border-left:2px dashed var(--ln)} .dq-pt{position:relative;margin-bottom:7px}.dq-pt:before{content:'';position:absolute;left:-15px;top:14px;width:9px;height:9px;border:2px solid var(--ln);background:#0a0c0e}.dq-pt.on:before{border-color:var(--fr);background:var(--fr)} .dq-pt .two{display:grid;grid-template-columns:1fr 1fr;gap:5px} .dq-nd{position:relative;background:#1a1d18;border:1px solid var(--ln);padding:7px 8px;cursor:pointer;user-select:none;min-height:58px}.dq-nd .t{font-weight:600;font-size:12px;padding-right:26px}.dq-nd .d{font-size:10.5px;color:var(--mu);margin-top:2px}.dq-nd .r{position:absolute;right:6px;top:5px;font:600 10px var(--mono);color:var(--mu)} .dq-nd.on{border-color:var(--fr);background:#6fa8dc14}.dq-nd.on .r{color:var(--fr)}.dq-nd.lock{opacity:.4}.dq-nd.cut{opacity:.3;text-decoration:line-through}.dq-nd.ult{border-style:double;border-width:3px} .dq-nd .pips{display:flex;gap:2px;margin-top:5px}.dq-nd .pips i{width:12px;height:3px;background:#ffffff1a}.dq-nd .pips i.f{background:var(--fr)} .dq-fx{font:500 11px var(--mono);display:flex;flex-wrap:wrap;gap:3px 10px}.dq-fx span{color:var(--al)} #sheet.wide{width:min(900px,100vw)} /* 교리 화면은 넓게 */ /* 자리 고정(v10): 짓기 전 자리는 그 건물의 건설 전 부지 그림 */ #hq5 .b5-s{border:0;background:none;justify-content:flex-end} #hq5 .b5-s .plot{position:absolute;left:50%;bottom:0;transform:translate(-50%,8%);filter:drop-shadow(0 3px 3px #0009);pointer-events:none} #hq5 .b5-s.lock .plot{filter:grayscale(.7) brightness(.45)} #hq5 .b5-s .nm{position:relative;margin-bottom:-15px;font:500 8.5px var(--mono);color:var(--tx);text-shadow:0 0 3px #000,0 0 3px #000;white-space:nowrap} #hq5 .b5-s small{position:absolute;top:2px;left:50%;transform:translateX(-50%);background:#0a0c0ecc;padding:0 4px;white-space:nowrap} #hq5 .b5-s.open small{color:#9cc4ff;border:1px solid #6fa8dc88} /* r070: 오른쪽 레일 한국어 이름, 상점·시장 드롭다운, 기록 화면 */ #rail button{width:48px;font:600 10px var(--font);letter-spacing:0} #dd-shop{position:relative} #dd-btn{background:#242821;border:1px solid var(--ne);color:var(--ne);font:600 11px var(--font);padding:3px 9px;cursor:pointer;display:flex;align-items:center;gap:4px} #dd-m{position:absolute;right:0;top:calc(100% + 4px);background:var(--bgp);border:1px solid var(--ln);min-width:180px;box-shadow:0 6px 18px #000a} #dd-m button{display:block;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid var(--ln);color:var(--tx);font:600 12px var(--font);padding:9px 10px;cursor:pointer}#dd-m button:last-child{border-bottom:0}#dd-m button:hover{background:#ffffff0c} #dd-m small{display:block;font:500 10px var(--font);color:var(--mu);margin-top:1px} .lgrow{display:flex;gap:8px;padding:5px 0;border-bottom:1px solid #ffffff10;font-size:12px;align-items:flex-start}.lgrow i{font:500 10px var(--mono);color:var(--mu);width:70px;flex:none;font-style:normal;padding-top:1px}.lgrow b{font:600 9.5px var(--font);border:1px solid var(--ln);padding:0 4px;flex:none} /* r071: 오른쪽 위 도구 줄(상점·시장 왼쪽, 아이콘+이름). 좁은 화면은 '메뉴' 서랍. 열린 창(#sheet, z7)보다 아래(z6)라 창 위로 올라오지 않는다 */ #topr{position:absolute;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 36px);right:8px;z-index:6;display:flex;gap:6px;align-items:flex-start} #topr.raised{z-index:9} #fw.base-open #topr{display:none} #tools{display:flex;align-items:flex-start;gap:4px} #tools .tl-menu{display:none} #tl-list{display:flex;gap:3px} #tools button{position:relative;display:flex;align-items:center;gap:4px;background:#1a1d18e8;border:1px solid var(--ln);color:var(--tx);font:500 11px var(--font);padding:4px 8px;cursor:pointer;white-space:nowrap} #tools button:hover{border-color:#6fa8dc88}#tools button.on{border-color:var(--fr);color:#cfe2ff} #tools .ti{flex:none;color:#b8c4b0} #tools .mbadge{right:-5px;top:-6px} #dd-btn{height:27px} @media(max-width:900px){ #tools .tl-menu{display:flex} #tl-list{display:none;position:absolute;right:0;top:calc(100% + 4px);flex-direction:column;background:var(--bgp);border:1px solid var(--ln);min-width:150px;box-shadow:0 6px 18px #000a;padding:4px} #tools.open #tl-list{display:flex} #tl-list button{border:0;border-bottom:1px solid #ffffff10;padding:9px 8px;font-size:12.5px} #tools{position:relative} } .rtag{font:600 9.5px var(--font);padding:0 5px;border:1px solid}.rtag.atk{color:var(--fr);border-color:#6fa8dc88}.rtag.def{color:#ffb3a8;border-color:#e05a4e88} #fw.sheet-open #topr{right:476px} /* PC: 오른쪽 창이 열리면 도구 줄을 창 왼쪽으로 비킨다 */ @media(max-width:900px){#fw.sheet-open #topr{display:none}} /* 휴대폰: 창이 열리면 숨김 */ /* 영토 카드(PC 오른쪽 380px 패널)가 열리면 도구 줄을 카드 왼쪽으로 비킨다 */ @media(min-width:900px){#fw.card-open #topr{right:396px}#fw.sheet-open #topr{right:476px}#fw.sheet-wide #topr{display:none}} /* JS가 붙이는 상태 클래스(:has는 지도 갱신마다 전체 재계산을 부른다) */ /* r049 조립식 기지 장면: 3840×2160 무대를 축소·이동해 보여 준다 */ #b5-stage{position:absolute;left:0;top:0;width:3840px;height:2160px;transform-origin:0 0;will-change:transform;touch-action:none} #b5-scene{touch-action:none;cursor:grab;background:#1d2a1a} #b5-bg,#b5-fg{position:absolute;inset:0}#b5-bg img{pointer-events:none;user-select:none} #b5-fg .m5-b img,#b5-fg .m5-s img{pointer-events:auto;cursor:pointer;filter:drop-shadow(0 6px 6px #0007)} #b5-fg .m5-s.lock img{filter:grayscale(1) brightness(1.15) sepia(.35) hue-rotate(170deg) saturate(1.4);opacity:.5} #b5-fg .m5-b.sel img{filter:drop-shadow(0 0 10px #6fa8dc) drop-shadow(0 0 4px #6fa8dc)} #b5-fg .m5-b.dmg img{filter:sepia(.5) saturate(1.6) hue-rotate(-20deg) drop-shadow(0 6px 6px #0007)} #b5-fg .m5-l{position:absolute;transform:translate(-50%,6px) scale(var(--inv,1));transform-origin:50% 0;white-space:nowrap;font:600 11px var(--font);color:#f1efe6;text-shadow:0 0 3px #000,0 0 3px #000,0 0 2px #000;pointer-events:none} #b5-fg .m5-l b{background:var(--fr);color:#061018;padding:0 4px;margin-right:4px;font:700 10px var(--mono)} #b5-fg .m5-l i{font-style:normal;color:#9cc4ff;font-size:10px}#b5-fg .m5-s.lock .m5-l i{color:var(--mu)}#b5-fg .m5-l i.d{color:#ffb3a8} #b5-fg .m5-l em{display:block;height:3px;background:#0008;margin-top:2px}#b5-fg .m5-l em u{display:block;height:100%;background:var(--ne)} /* 알림·확인창: 화면 가운데에 크게(대표 지시 2026-10-16) */ #toast{top:50%;bottom:auto;left:50%;transform:translate(-50%,-50%) scale(.96);min-width:min(420px,88vw);max-width:min(640px,92vw);padding:18px 26px;font:600 16px/1.5 var(--mono);text-align:center;border:1px solid var(--ln);border-left:4px solid var(--fr);box-shadow:0 12px 40px #000a;pointer-events:none;z-index:9000;transition:opacity .2s,transform .2s} #toast.on{transform:translate(-50%,-50%) scale(1)} #askbox{position:fixed;inset:0;z-index:9500;background:#0009;display:flex;align-items:center;justify-content:center;padding:16px} #askbox .ask{width:min(520px,100%);background:#0c0f12;border:1px solid var(--ln);border-left:4px solid var(--fr);box-shadow:0 16px 48px #000c;padding:24px 26px} #askbox .msg{font:500 16px/1.6 var(--mono);color:var(--tx);white-space:pre-wrap;padding:0;border:0} #askbox .row{display:flex;gap:10px;justify-content:flex-end;margin-top:20px} #askbox .btn{font-size:15px;padding:10px 20px;min-width:96px} /* 상단 자원: 아이콘 + 이름 + 수량(대표 지시 2026-10-16) */ #logi .rn{font-style:normal;color:var(--mu);font-size:11px;margin:0 3px 0 2px} #logi .ico{vertical-align:-3px} #logi{overflow-x:auto;white-space:nowrap;scrollbar-width:none}#logi::-webkit-scrollbar{display:none}#logi>span{flex:0 0 auto} /* 전용 창(병력 등): 화면 가운데 큰 창(B안 '큰 화면은 가운데 모달, 최대 1100px, 2열/모바일 1열', 대표 지시 2026-10-16) */ #winbg{position:fixed;inset:0;background:#000a;z-index:59} #sheet.win{position:fixed;left:50%;top:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);width:min(1100px,96vw);max-height:86vh;border:1px solid var(--ln);border-top:3px solid var(--fr);box-shadow:0 20px 60px #000c;z-index:60;padding:16px 20px} #sheet.win .top{position:sticky;top:-16px;background:var(--bgp);padding:6px 0 10px;z-index:1;border-bottom:1px solid var(--ln);margin-bottom:12px} #sheet.win .top .h{font-size:16px} @media(min-width:900px){#sheet.win .wb{column-count:2;column-gap:28px}#sheet.win .wb>*{break-inside:avoid}#sheet.win .wb table{break-inside:avoid}} #fw.sheet-win #topr{display:none} .udesc{margin:4px 0 2px;font-size:12px;line-height:1.5}.udesc b{color:var(--mu);font-weight:500;margin-right:4px} #hq5 .b5-scene,#hq5 .b5-scene *{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none} /* 기지 끌기 때 이름표 글자가 선택(파랗게 깜빡)되던 문제 */ /* 기지 아래 버튼: 아이콘 + 이름 + 한 줄 설명 */ #hq5 .b5-tools button{display:flex;align-items:center;gap:7px;text-align:left;padding:6px 12px 6px 9px;max-width:230px} #hq5 .b5-tools button span{display:flex;flex-direction:column;min-width:0} #hq5 .b5-tools button b{font:600 12px var(--font);white-space:nowrap} #hq5 .b5-tools button small{font:400 10px/1.3 var(--font);color:var(--mu);white-space:normal} #hq5 .b5-tools button.on{border-color:var(--fr);background:#263a4c} @media(max-width:600px){#hq5 .b5-tools button small{display:none}} #hq5 .b5-tools{overflow-x:visible;flex-wrap:wrap}#hq5 .b5-tools button{flex:1 1 150px;max-width:none;min-width:0} @media(max-width:600px){#hq5 .b5-tools button{flex:1 1 30%;padding:6px 6px}#hq5 .b5-tools button b{font-size:11px;white-space:normal}} /* 상단 정리(대표 지시 2026-10-16): 자원 줄을 크고 또렷하게, 이름·전투력은 한국어로, BLUE·시각(DTG) 제거 */ #logi{height:30px;font:500 13px var(--font);gap:16px;color:var(--tx)}#logi b{font:600 13.5px var(--mono)}#logi .rn{font-size:12.5px;color:#c9cbbd}#logi .ico{width:18px;height:18px;vertical-align:-4px} #strip{font:600 12px var(--font)}#strip .pw b{color:var(--ne)} /* 작전 명령 C안(전술 카드) */ .so-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 8px}.so-card{background:var(--bgi);border:1px solid var(--ln);padding:8px;cursor:pointer;border-radius:3px}.so-card.on{border-color:var(--fr);background:#263a4c}.so-card b{display:block;font-size:13.5px;margin-bottom:3px}.so-card small{color:var(--mu);font-size:11px;line-height:1.4;display:block} .so-quick{display:flex;gap:6px;margin:6px 0} .so-u{display:flex;align-items:center;gap:9px;padding:6px 0;border-bottom:1px solid #ffffff10}.so-u .nm{flex:1;min-width:0;font-size:13px}.so-u .nm small{display:block;color:var(--mu);font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.so-u input[type=range]{width:34%}.so-u b{min-width:58px;text-align:right;font:600 12.5px var(--mono)} .so-odds{margin:10px 0 6px}.so-odds .lb{display:flex;justify-content:space-between;font-size:12.5px;color:var(--mu)}.so-odds .lb b{color:var(--tx)}.so-odds .bar{display:flex;height:14px;border:1px solid var(--ln);margin-top:3px}.so-odds .a{background:var(--fr)}.so-odds .e{background:var(--ho)} .so-odds .verdict{font-weight:700;font-size:14px;margin-top:5px}.so-odds .verdict.good{color:var(--al)}.so-odds .verdict.mid{color:var(--ne)}.so-odds .verdict.bad{color:var(--ho)} .so-chk>div{display:flex;gap:8px;align-items:flex-start;padding:3px 0;font-size:13px}.so-chk .o{color:var(--al)}.so-chk .x{color:var(--ho)}.so-chk .w{color:var(--ne)}.so-chk small{display:block;color:var(--mu);font-size:11px} #so-adv summary{cursor:pointer;color:var(--tx);font-size:13px}#so-adv{border:1px solid var(--ln);padding:8px 10px} /* 영토 카드 A안 */ #card .tb-hd{display:flex;gap:10px;align-items:center;margin-bottom:8px}#card .tb-hd .ic{width:44px;height:44px;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;background:#ffffff08;flex:none} #card .tb-hd .t{flex:1;min-width:0}#card .tb-hd .t b{display:block;font-size:15.5px}#card .tb-x{padding:4px 9px;align-self:flex-start} .tb-b{display:inline-block;padding:1px 7px;margin:2px 4px 0 0;border-radius:2px;font-size:11.5px;font-weight:600}.tb-b.en{background:#e05a4e33;color:#ffb3a8;border:1px solid #e05a4e88}.tb-b.me{background:#6fa8dc33;color:#cfe3f7;border:1px solid #6fa8dc88}.tb-b.al{background:#5fbf8a33;color:#bfe8cf;border:1px solid #5fbf8a88}.tb-b.no{background:#ffffff14;color:var(--mu);border:1px solid var(--ln)}.tb-b.w{background:#d8c26a26;color:var(--ne);border:1px solid #d8c26a77} #card .tb-st{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:6px 0 8px}#card .tb-st div{background:var(--bgi);border:1px solid var(--ln);padding:6px 8px;min-width:0}#card .tb-st small{display:block;color:var(--mu);font-size:11px}#card .tb-st b{font:600 14px var(--mono);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block} #card .tb-warn{color:var(--ne);font-size:12.5px;margin:4px 0 8px} #card .tb-pri{width:100%;background:#263a4c;border-color:var(--fr);font-weight:700;font-size:15px;padding:11px;margin-bottom:6px} #card .tb-sec{display:grid;grid-template-columns:1fr 1fr;gap:6px;align-items:stretch}#card .tb-sec .btn{width:100%;min-height:44px;padding:8px 6px;font-size:12.5px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;line-height:1.25;overflow:visible;white-space:normal}#card .tb-sec .btn:last-child:nth-child(odd){grid-column:1/-1} #card .tb-more{margin-top:8px;border-top:1px solid var(--ln);padding-top:6px}#card .tb-more summary{color:var(--mu);cursor:pointer;font-size:12.5px;margin-bottom:4px} /* 기지 움직임 층 */ #b5-amb,#b5-sky{position:absolute;inset:0;pointer-events:none} #b5-amb .amb,#b5-sky .amb{position:absolute;left:0;top:0;background-repeat:no-repeat;will-change:transform,background-position;filter:drop-shadow(0 4px 3px #0007)} #b5-amb .amb-sh,#b5-sky .amb-sh{position:absolute;left:0;top:0;width:60px;height:14px;border-radius:50%;background:#000;filter:blur(4px);opacity:.3} #b5-amb .amb-smoke{position:absolute;width:26px;height:26px;border-radius:50%;background:radial-gradient(circle,#d8d8d0aa,#9a9a9000 70%);animation:ambsmoke 4s linear infinite;opacity:0} @keyframes ambsmoke{0%{transform:translate(0,0) scale(.6);opacity:0}15%{opacity:.7}100%{transform:translate(30px,-90px) scale(2.4);opacity:0}} /* 신병 교육 카드(A안) */ #tut{position:absolute;left:10px;bottom:calc(var(--bar) + 10px);width:min(300px,calc(100vw - 20px));background:var(--bgp);border:1px solid var(--ln);border-top:3px solid var(--ne);padding:10px 12px;z-index:6;font-size:13px} #tut.fold{width:auto;padding:0;border:0;background:none} #tut .tut-chip{background:var(--bgp);border:1px solid var(--ne);color:var(--tx);padding:7px 12px;font:600 12.5px var(--font);cursor:pointer} #tut .tut-hd{display:flex;justify-content:space-between;align-items:center}#tut .tut-x{background:none;border:0;color:var(--mu);font-size:15px;cursor:pointer} #tut .tut-pg{height:5px;background:#ffffff14;margin:6px 0 8px}#tut .tut-pg i{display:block;height:100%;background:var(--ne)} #tut .tut-now{font-weight:700;font-size:14px}#tut .tut-d{color:#c9cbbd;font-size:12.5px;line-height:1.5;margin:3px 0 4px}#tut .tut-rw{color:var(--al);font-size:12px} #tut .tut-go{width:100%;margin-top:8px;padding:9px} #tut .tut-list{display:flex;flex-wrap:wrap;gap:2px 10px;margin-top:8px;font-size:11px;color:var(--mu)}#tut .tut-list .d{text-decoration:line-through}#tut .tut-list .n{color:var(--tx);font-weight:600} #tut .tut-skip{background:none;border:0;color:var(--mu);font-size:11px;margin-top:6px;cursor:pointer;padding:0;text-decoration:underline} #fw.sheet-win #tut{display:none} /* 신병 교육 스토리·교관 대화 */ #tut-pro{position:fixed;inset:0;z-index:9800;background:radial-gradient(ellipse at center,#1b2018 0%,#070807 75%);display:flex;align-items:center;justify-content:center;padding:24px} #tut-pro .in{max-width:640px;text-align:center}#tut-pro .t{font:500 22px/1.7 var(--font);color:#e9e6d8;margin-bottom:28px;animation:tutfade .8s ease} #tut-pro .btn{min-width:140px;font-size:15px;padding:11px 18px} @keyframes tutfade{from{opacity:.55;transform:translateY(6px)}to{opacity:1;transform:none}} #tut-dlg{position:absolute;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 14px);width:min(720px,calc(100vw - 20px));display:flex;gap:14px;background:#11140fF2;border:1px solid var(--ln);border-left:4px solid var(--ne);padding:14px 16px;z-index:70;box-shadow:0 12px 40px #000c;animation:tutop .35s ease} #tut-dlg .face{flex:none;width:84px;height:84px;border:1px solid var(--ln);overflow:hidden}#tut-dlg .body{flex:1;min-width:0}#tut-dlg b{color:var(--ne);font-size:13px} #tut-dlg .txt{font:500 15.5px/1.6 var(--font);margin:4px 0 6px;color:var(--tx)}#tut-dlg .row{display:flex;justify-content:space-between;align-items:center}#tut-dlg .btn{min-width:110px;padding:9px 14px;font-size:14px} #tut-dlg .tut-rw{color:var(--al);font-size:12.5px;margin-bottom:6px} #fw.tut-talk #tut{display:none} #tut-pro{background-size:cover;background-position:center} #tut-dlg b.en{color:#ffb3a8} #fw:has(#tut-dlg) #tut{display:none} /* 대화 중에는 퀘스트 패널을 띄우지 않음(겹침 방지) */ #fw.base-open #tut{bottom:calc(var(--bar) + 64px)} /* 기지 화면: 아래 도구 줄 위로 */ /* 튜토리얼 컷신·설명 그림 */ #tut-cut{position:absolute;left:50%;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 40px);transform:translateX(-50%);width:min(820px,calc(100vw - 20px));z-index:69;animation:tutop .4s ease} #tut-cut.cut .pic{aspect-ratio:16/9;max-height:calc(100vh - 330px);width:100%;background-size:cover;background-position:center;border:1px solid var(--ln);box-shadow:0 14px 40px #000c;display:flex;align-items:flex-end} #tut-cut.cut .pic span{display:block;width:100%;padding:14px 18px;font:500 16px/1.6 var(--font);color:#f0ede0;text-shadow:0 1px 3px #000} #tut-cut.tip{display:flex;gap:14px;background:#11140fF2;border:1px solid var(--ln);border-top:3px solid var(--fr);padding:14px;box-shadow:0 14px 40px #000c} #tut-cut.tip .pic{flex:none;width:min(300px,40%);aspect-ratio:4/3;background-size:cover;background-position:center;border:1px solid var(--ln)} #tut-cut.tip .tx b{display:block;font-size:16px;color:#cfe3f7;margin-bottom:6px}#tut-cut.tip .tx div{font-size:14px;line-height:1.65;color:var(--tx)} @media(max-width:600px){#tut-cut.tip{flex-direction:column}#tut-cut.tip .pic{width:100%}} @keyframes tutop{from{opacity:.4}to{opacity:1}} /* 가운데 정렬(translateX)을 덮어쓰지 않도록 투명도만 */ /* 튜토리얼: 눌러야 할 곳 강조 */ .tut-hl{outline:3px solid var(--ne)!important;outline-offset:2px;animation:tuthl 1.1s ease-in-out infinite;position:relative;z-index:2} #b5-fg img.tut-hl{outline:none!important;filter:drop-shadow(0 0 6px #ffd84a) drop-shadow(0 0 12px #ffd84a)!important} @keyframes tuthl{50%{outline-color:#fff}} /* 튜토리얼 중 지금 못 쓰는 도구는 흐리게 */ body.tut-lock #rail,body.tut-lock #topr,body.tut-lock #b5-tools,body.tut-lock .tl-menu{filter:grayscale(1) brightness(.4)} /* 투명하게 하면 뒤의 지도 아이콘이 비쳐 겹쳐 보여서 어둡게만(2026-10-17) */ body.tut-lock #bar button:not(.tut-hl):not(.on){opacity:.35} /* 튜토리얼: 지금 못 쓰는 창 안 기능(보이되 누를 수 없음) */ #sheet .tut-off{opacity:.38;cursor:not-allowed;filter:grayscale(1)} #tut-cut .tut-sup{margin:8px 0;padding:8px 10px;border:1px solid var(--ln);background:#0006;font-size:14px} /* 편제 양성: 접어 둔 묶음 + 작은 줄 목록 */ .b5-orgs{margin-top:10px;border:1px solid var(--ln);padding:6px 10px} .b5-orgs>summary{cursor:pointer;font-weight:600} .b5-orgl{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-top:6px} .b5-orgl .btn{display:grid;grid-template-columns:18px 1fr;column-gap:6px;text-align:left;padding:5px 7px;font-size:12px;align-items:center} .b5-orgl .btn .mu,.b5-orgl .btn small{grid-column:2;font-size:10.5px} @media(max-width:600px){.b5-orgl{grid-template-columns:1fr}} /* 작전 명령: 전술 카드 설명(방식·이럴 때·대가), 한 줄에 하나 */ .so-cards{grid-template-columns:1fr!important} .so-card small{display:block;margin-top:3px;line-height:1.45} .so-card small i{font-style:normal;color:var(--mu);margin-right:4px} .so-card small.w{color:#a8d0a0}.so-card small.c{color:#e6b8a8} /* 컷신·설명 그림 안의 다음 버튼 */ #tut-cut .row{display:flex;justify-content:space-between;align-items:center;margin-top:10px} #tut-cut.cut .row{background:#11140fF2;border:1px solid var(--ln);border-top:none;padding:8px 12px;margin-top:0} #tut-cut .row .btn{min-width:110px;padding:9px 14px;font-size:14px} #tut-cut.tip .tx{flex:1;display:flex;flex-direction:column}#tut-cut.tip .tx .row{margin-top:auto;padding-top:10px} /* 건물 창 상태 진행 막대 */ .b5-spg{display:block;height:4px;background:#0008;margin-top:4px;min-width:120px}.b5-spg u{display:block;height:100%;background:var(--ne);text-decoration:none;transition:width .5s linear} /* 짓기 전 자리: 완성 건물 청사진(반투명, 깜빡이듯 천천히) */ #b5-fg .m5-s.open img.ghost{opacity:.38;filter:grayscale(1) brightness(1.25) sepia(.3) hue-rotate(170deg) saturate(1.6) drop-shadow(0 0 4px #7fb2ff88);animation:b5ghost 2.4s ease-in-out infinite} @keyframes b5ghost{50%{opacity:.55}} /* 기지 건물 효과(r058 굴뚝 연기·용접) — 스프라이트 시트를 단계별로 넘김 */ #b5-fg .b5-fxl{pointer-events:none} #b5-fg .b5-fx{position:absolute;display:block;background-repeat:no-repeat;animation-name:b5fx;animation-iteration-count:infinite;pointer-events:none} #b5-fg .b5-fx.smoke{opacity:.85}#b5-fg .b5-fx.welding{mix-blend-mode:screen} @keyframes b5fx{to{background-position:var(--x) 0}} /* 건설·업그레이드 중: 크레인(움직이는 그림) + 건물이 아주 살짝 숨 쉬듯 */ #b5-fg .b5-ambi{position:absolute;left:0;top:0;pointer-events:none} #b5-fg .b5-crane{pointer-events:none;filter:drop-shadow(0 4px 4px #0007)} #b5-fg .m5-b.building>img:first-child{animation:b5build 2.2s ease-in-out infinite} @keyframes b5build{50%{filter:brightness(1.08) drop-shadow(0 0 6px #ffd84a66)}} /* 기지 이름표 아래 진행 막대: 어두운 테두리로 바닥과 구분 + 남은 시간 */ #b5-fg .m5-l em{height:5px!important;background:#000b!important;outline:1px solid #000;border-radius:2px;overflow:hidden;margin-top:3px!important} #b5-fg .m5-l em u{transition:width .5s linear,background .5s} #b5-fg .m5-l s.lt{display:block;text-decoration:none;font:600 10px var(--mono);color:#fff;text-shadow:0 1px 2px #000,0 0 3px #000;margin-top:1px} /* 전투 다시 보기 · 전술 지도형(2026-10-17, 시안 r063 merged) */ #bmhud{position:absolute;inset:0;pointer-events:none;z-index:7;font-family:var(--mono)} #bmhud>*{pointer-events:auto} #bmhud .bm-top{position:absolute;left:12px;right:12px;top:calc(var(--strip,34px) + 6px);background:#0b0f0ae6;border:1px solid var(--ln);padding:6px 10px} #bmhud .bm-hd{display:flex;justify-content:space-between;align-items:center;font:600 12px var(--mono)}#bmhud .bm-hd .a{color:#9cc0ff}#bmhud .bm-hd .d{color:#ff9d93}#bmhud .bm-hd b{color:#fff;font-size:14px} #bmhud .bm-bars{display:grid;grid-template-columns:1fr 1fr;gap:12px;font:11px var(--mono);color:var(--mu);margin-top:4px}#bmhud .bm-bars .r{text-align:right} #bmhud .bm-bars i{display:block;height:6px;background:#000;margin-top:2px;position:relative;overflow:hidden}#bmhud .bm-bars u{position:absolute;top:0;bottom:0;left:0;background:#4c8dff;text-decoration:none;transition:width .5s}#bmhud .bm-bars .r u{left:auto;right:0;background:#e0483e} #bmhud .bm-banner{position:absolute;left:50%;top:calc(var(--strip,34px) + 74px);transform:translateX(-50%);max-width:80%;background:#000c;border-left:4px solid var(--ne,#f2d23c);padding:6px 14px;font:700 15px var(--mono);color:#fff;text-align:center;transition:opacity .3s;opacity:0;pointer-events:none} #bmhud .bm-call{position:absolute;width:230px;background:#0d110bf2;border:1px solid var(--ne,#f2d23c);box-shadow:0 8px 24px #000c;transition:opacity .25s;opacity:0;pointer-events:none} #bmhud .bm-call .pics{display:flex;justify-content:space-between;align-items:flex-end;height:74px;background:linear-gradient(#2d3646,#1c2418 60%,#2b2a1b);position:relative} #bmhud .bm-call img{width:92px;height:68px;object-fit:contain;filter:drop-shadow(0 3px 3px #000)}#bmhud .bm-call img.d{transform:scaleX(-1)} #bmhud .bm-call span{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);font:700 18px var(--mono);color:var(--ne,#f2d23c)}#bmhud .bm-call .tx{padding:5px 8px;font:600 12px/1.4 var(--mono);color:#fff} #bmhud .bm-feed{position:absolute;right:12px;top:calc(var(--strip,34px) + 70px);bottom:calc(var(--bar) + 64px);width:290px;overflow:auto;background:#0b0f0ad9;border:1px solid var(--ln);font:12px/1.55 var(--mono);padding:6px 10px;color:var(--tx)} #bmhud .bm-feed div{padding:3px 0;border-bottom:1px dashed #222}#bmhud .bm-feed .t{color:var(--mu);margin-right:6px}#bmhud .bm-feed .k{color:var(--ne,#f2d23c)}#bmhud .bm-feed .b{color:#9cc0ff}#bmhud .bm-feed .r{color:#ff9d93} #bmhud .bm-why{display:none;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:min(440px,92vw);background:#0b0f0af2;border:1px solid var(--ne,#f2d23c);padding:12px 14px;color:var(--tx);font-size:13px} #bmhud .bm-why.on{display:block}#bmhud .bm-why h3{margin:0 0 6px;font:700 15px var(--mono);color:var(--ne,#f2d23c)}#bmhud .bm-why ol{margin:0;padding-left:18px}#bmhud .bm-why .mu{color:var(--mu);font-size:12px;margin-top:6px} #bmhud .bm-tl{position:absolute;left:12px;right:12px;bottom:calc(var(--bar) + 12px);display:flex;align-items:center;gap:8px;background:#0b0f0ae6;border:1px solid var(--ln);padding:8px 10px} #bmhud .bm-tl button{background:#1b2117;border:1px solid var(--ln);color:var(--tx);font:12px var(--mono);padding:5px 10px;cursor:pointer}#bmhud .bm-tl button.on{border-color:var(--ne,#f2d23c);color:var(--ne,#f2d23c)}#bmhud .bm-tl button.pri{border-color:var(--fr,#4c8dff)} #bmhud .bm-track{flex:1;height:8px;background:#000;position:relative;cursor:pointer}#bmhud .bm-track i{position:absolute;left:0;top:0;bottom:0;background:var(--ne,#f2d23c)}#bmhud .bm-track b{position:absolute;top:-5px;width:4px;height:18px;background:#fff;opacity:.85} @media(max-width:820px){#bmhud .bm-feed{left:12px;right:12px;width:auto;top:auto;bottom:calc(var(--bar) + 64px);height:92px}#bmhud .bm-call{width:180px}#bmhud .bm-call .pics{height:58px}#bmhud .bm-call img{width:70px;height:52px}#bmhud .bm-banner{font-size:13px}} body:has(#bmhud) #tut{display:none} /* 전투 다시 보기 중에는 임무 카드 숨김 */ /* 임무 카드 한 줄 접기(2026-10-17) */ #tut{width:auto;max-width:min(320px,calc(100vw - 20px));padding:6px 8px;display:grid;grid-template-columns:1fr auto;gap:4px 8px;align-items:center} #tut .tut-hd{cursor:pointer;display:flex;align-items:center;gap:6px;min-width:0}#tut .tut-n{font:600 11px var(--mono);color:var(--ne)}#tut .tut-hd .tut-now{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}#tut .tut-tg{color:var(--mu);font-size:11px} #tut .tut-pg{grid-column:1/-1;grid-row:2;margin:0;height:3px} #tut .tut-go{grid-column:2;grid-row:1;padding:4px 10px;font-size:12px;margin:0;width:auto} #tut .tut-more{display:none;grid-column:1/-1}#tut.open .tut-more{display:block}#tut.open{width:min(300px,calc(100vw - 20px))} #bmhud #bm-ok{display:block;width:100%;margin-top:10px;padding:10px;font:700 14px var(--mono)} #bmhud .bm-tl button#bm-x{font-weight:700;padding:6px 16px}#bmhud .bm-tl button#bm-x.end{background:var(--fr,#4c8dff);color:#fff;border-color:#fff;animation:tuthl 1.1s ease-in-out infinite} #bmhud .bm-x2{margin-left:12px;background:var(--fr,#4c8dff);color:#fff;border:1px solid #fff;font:700 13px var(--mono);padding:5px 14px;cursor:pointer} /* 무한 퀘스트(반복 임무, 2026-10-17) — 임무 카드 아래 */ #tut .rq{border-top:1px solid var(--ln);margin-top:6px;padding-top:4px} #tut .rq-hd{display:flex;gap:6px;align-items:baseline;cursor:pointer;font-size:12px}#tut .rq-hd b{color:#9fd3b4}#tut .rq-hd span{color:var(--mu);font-size:10.5px;flex:1} #tut .rq-it{display:flex;gap:6px;align-items:center;padding:4px 0;border-bottom:1px solid #ffffff10}#tut .rq-it>div{flex:1;min-width:0}#tut .rq-it b{font-size:12px}#tut .rq-it small{display:block;color:var(--mu);font-size:10.5px} #tut .rq-it u{display:block;height:3px;background:#ffffff14;margin-top:2px}#tut .rq-it u i{display:block;height:100%;background:#5fbf8a} #tut .rq-it .btn{padding:3px 7px;font-size:11px}#tut .rq-n{color:var(--mu);font-size:10px;margin-top:3px} #tut .rq-d{font-style:normal;font-size:10px;padding:0 5px;border:1px solid;margin-right:3px}#tut .rq-d.hard{color:#d8c26a;border-color:#d8c26a88}#tut .rq-d.vhard{color:#f0a060;border-color:#f0a06088}#tut .rq-d.extreme{color:#ff8a7a;border-color:#e05a4e;background:#e05a4e22} /* 자원 바닥 경고 띠(2026-10-18 제안 2 B) — 자원 줄 바로 아래, 띠가 있으면 아래 요소들이 띠 높이만큼 내려간다 */ body.supwarn{--warnx:26px} #supwarn{position:absolute;left:0;right:0;top:calc(var(--strip) + var(--logx,0px) + 30px);height:26px;background:#5a1d18;color:#ffd7d0;display:none;align-items:center;justify-content:space-between;padding:0 10px;font:600 12px var(--font);z-index:6;border-bottom:1px solid #e05a4e} body.supwarn #supwarn{display:flex}#supwarn .btn{padding:2px 10px;font-size:11.5px} /* 휴대폰(2026-10-18 제안 3 B): 자원 줄 2줄로 전부 보이기, 임무 카드는 작은 버튼 */ @media (max-width:600px){ body{--logx:26px} #logi{height:56px!important;flex-wrap:wrap;row-gap:2px;align-content:center;overflow:visible!important;white-space:normal!important;gap:4px 12px!important;font-size:12px!important} #logi .rn{display:none}#logi .inc{display:none} #tut:not(.open):not(.mob-open){width:auto!important;max-width:none!important;padding:0!important} #tut.mob-min .tut-hd,#tut.mob-min .tut-pg,#tut.mob-min .tut-go,#tut.mob-min .rq,#tut.mob-min .tut-more{display:none!important} #tut.mob-min{background:transparent!important;border:none!important;box-shadow:none!important} #fw.base-open #tut.mob-min{bottom:auto;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 90px);left:auto;right:8px} /* 기지 화면: 아래 도구 버튼을 가리지 않게 오른쪽 위로 */ #tut .tut-mob{display:none}#tut.mob-min .tut-mob{display:flex;width:52px;height:52px;flex-direction:column;align-items:center;justify-content:center;font:600 11px var(--font);border:1px solid var(--ne);background:#15180ff2;cursor:pointer} } #tut .tut-mob{display:none} /* PC에서는 휴대폰용 '임무' 칸을 숨김(2026-10-20 렌더링 전수조사: 기지 화면 임무 카드 위에 겹쳐 보임) */ @media (max-width:600px){#tut.mob-min .tut-mob{display:flex}} /* 모바일 누르기 쉬운 크기(2026-10-18): 버튼 높이 36px 이상·글자 키움 */ @media (max-width:600px){ .btn{min-height:36px;padding:8px 12px;font-size:12.5px} #sheet .top .btn{min-height:40px;padding:8px 16px;font-size:13px} .tbl .btn{min-height:32px;padding:6px 10px} #hq5 .b5-tools button{min-height:40px} } .tt-why{display:block;font-size:10px;line-height:1.3;color:var(--mu);margin-top:2px;white-space:normal;font-weight:400} /* 터치 기기에서 버튼 설명·비활성 사유(2026-10-18) */ #fw{top:env(safe-area-inset-top,0px)} /* 아이폰 노치·상태 표시줄 아래로(앱 화면 전체 사용 시). 웹 브라우저는 0이라 변화 없음(2026-10-18) */ #tut .rq{grid-column:1/-1} /* 오늘의 임무·반복 임무는 카드 가로 전체(두 칸 격자에서 나란히 찌그러지던 문제, 2026-10-18) */ @media(max-width:600px){#fw.sheet-open #tut{display:none!important}} /* 휴대폰: 창이 열리면 임무 카드를 숨겨 출격·확인 버튼을 가리지 않게(2026-10-18 점검) */ /* ---- 시설 창 B안(2026-10-19 대표 선택): 왼쪽 품목 목록(그림) + 오른쪽 큰 미리보기 ---- */ .fx-hd{display:flex;gap:12px;align-items:center;padding:4px 0 8px;border-bottom:1px solid var(--ln)}.fx-hd img{width:96px;height:64px;object-fit:contain}.fx-hd b{font-size:15px}.fx-st{font-size:12px} .fx-tabs{display:flex;gap:2px;border-bottom:1px solid var(--ln);margin:6px 0 8px;overflow-x:auto}.fx-tab{background:none;border:0;border-bottom:2px solid transparent;color:var(--mu);padding:8px 14px;font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}.fx-tab.on{color:var(--tx);border-bottom-color:var(--fr,#4c8dff)} .fx-split{display:grid;grid-template-columns:minmax(220px,280px) 1fr;gap:10px;min-height:360px} .fx-list{max-height:min(56vh,520px);overflow:auto;border:1px solid var(--ln);background:#ffffff05} .fx-row{display:flex;gap:8px;align-items:center;width:100%;text-align:left;background:none;border:0;border-bottom:1px solid #ffffff0d;border-left:3px solid transparent;color:var(--tx);padding:5px 8px;cursor:pointer;font:inherit}.fx-row:hover{background:#ffffff08}.fx-row.on{background:#1b2636;border-left-color:var(--fr,#4c8dff)} .fx-row img{width:58px;height:38px;object-fit:contain;flex:none}.fx-row b{display:block;font-size:12.5px;line-height:1.25}.fx-row small{display:block;color:var(--mu);font-size:10.5px}.fx-row.lk img,.fx-big img.lk{filter:grayscale(1) brightness(.55)}.fx-row.lk b{color:var(--mu)} .fx-prev{min-width:0}.fx-big{background:radial-gradient(#26301f,#12160f 72%);border:1px solid var(--ln);height:190px;display:flex;align-items:center;justify-content:center}.fx-big img{width:min(88%,380px);max-height:182px;object-fit:contain;image-rendering:auto} .fx-nm{margin:8px 0 4px;font-size:16px}.fx-lk{color:#ffb3b3;font-size:12px;font-weight:400} .fx-bars{display:grid;grid-template-columns:56px 1fr auto;gap:4px 8px;align-items:center;font-size:12px;margin:4px 0 8px}.fx-bars span{color:var(--mu)}.fx-bars b{font-family:var(--mono,monospace);font-size:11.5px} .fx-bar{display:block;height:6px;background:#ffffff14;position:relative}.fx-bar u{display:block;height:100%;background:var(--fr,#4c8dff)} .fx-kv{display:grid;grid-template-columns:auto 1fr;gap:3px 10px;font-size:12px;margin-bottom:8px}.fx-kv span{color:var(--mu)}.fx-kv b{font-weight:500} .fx-qty{display:flex;gap:6px;align-items:center;flex-wrap:wrap;margin:6px 0}.fx-qty input{width:88px}.fx-qty .btn{min-width:34px} .fx-cost{display:flex;gap:4px;flex-wrap:wrap;margin:4px 0 8px}.fx-chip{display:inline-flex;align-items:center;gap:3px;background:#ffffff0a;border:1px solid var(--ln);padding:1px 6px;font-size:11.5px} .fx-go{width:100%;padding:9px;font-size:14px} .fx-job{display:grid;grid-template-columns:44px minmax(0,1.2fr) 1fr auto auto;gap:8px;align-items:center;padding:4px 0;border-top:1px solid #ffffff0d;font-size:12px}.fx-job img{width:44px;height:30px;object-fit:contain} @media(max-width:720px){.fx-split{grid-template-columns:1fr}.fx-list{max-height:30vh}.fx-big{height:150px}.fx-job{grid-template-columns:36px 1fr auto auto}.fx-job .fx-bar{grid-column:1/-1}} .fx{grid-column:1/-1;min-width:0}#sheet.win .wb>.fx{display:block;column-span:all}#sheet.win .wb:has(>.fx){column-count:1} .fx-big img.ic{width:110px;height:110px} @media(max-width:720px){.fx-big img{max-height:136px;width:auto;max-width:90%}} /* 운용병 임시 그림: 소총병 + 운용 장비 표식(2026-10-19, 운용병 초상 납품 전) */ .fx-op{position:relative;display:inline-flex;align-items:center;justify-content:center;flex:none} .fx-row .fx-op{width:58px;height:38px}.fx-row .fx-op img{width:100%;height:100%;object-fit:contain} .fx-job .fx-op{width:44px;height:30px}.fx-job .fx-op img{width:100%;height:100%;object-fit:contain} .fx-big .fx-op{width:min(88%,380px);height:182px}.fx-big .fx-op img{width:100%;height:100%;object-fit:contain} .fx-op img.vb{position:absolute;right:-4%;bottom:-2%;width:52%!important;height:52%!important;background:#0d110bcc;border:1px solid var(--ln);border-radius:3px;padding:1px} .fx-big .fx-op.lk img{filter:grayscale(1) brightness(.55)} #tut .rq-sum{display:flex;flex-wrap:wrap;gap:3px 10px;font-size:10.5px;color:#c9d0bd;padding:2px 0 3px}#tut .rq-sum span.ok{color:#5fbf8a} /* 오늘·이번 주 임무 접힌 상태에도 무엇인지 보이게(2026-10-19) */ /* 시설 창 큰 미리보기: 움직이는 유닛 그림(캔버스), 시트 없는 그림은 원본의 1.5배까지만(2026-10-19 깨짐 수정) */ .fx-big{position:relative;overflow:hidden}.fx-big canvas.fx-anim{display:block} .fx-big>img:not(.ic){width:auto!important;max-width:min(88%,200px)!important;max-height:170px} .fx-row.lk~* .fx-big canvas,.fx-big:has(+.fx-nm .fx-lk) canvas{filter:grayscale(1) brightness(.55)} .fx-big img.fx-vb{position:absolute;right:10px;bottom:8px;width:auto!important;max-width:150px!important;max-height:84px!important;background:#0d110bcc;border:1px solid var(--ln);padding:2px} /* 임무 모달(2026-10-19) */ .mi-tabs{display:flex;gap:4px;border-bottom:1px solid var(--ln);margin-bottom:10px}.mi-tabs button{background:none;border:none;border-bottom:2px solid transparent;color:var(--mu);padding:8px 14px;font:inherit;font-size:13px;cursor:pointer}.mi-tabs button.on{color:var(--tx);border-bottom-color:#5d9bd5} .mi-hd{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline;margin-bottom:6px}.mi-hd b{font-size:14px}.mi-hd span{color:var(--mu);font-size:12px} .mi-bar{display:block;height:5px;background:#ffffff14;margin:4px 0 2px}.mi-bar i{display:block;height:100%;background:#5fbf8a} .mi-it{padding:9px 0;border-bottom:1px solid #ffffff10}.mi-it.ok .mi-t b{color:#9fd3b4}.mi-t{display:flex;justify-content:space-between;gap:10px;font-size:13px}.mi-t span{color:var(--mu);font-size:12px;white-space:nowrap} .mi-x{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-size:12px;color:var(--mu)}.mi-x b{color:#9fd3b4} .mi-cur{border:1px solid var(--ln);background:#ffffff06;padding:10px 12px;margin:10px 0}.mi-cur p{margin:6px 0;color:#c9d0bd;font-size:12.5px;line-height:1.55}.mi-rw{font-size:12px;color:var(--mu);margin:3px 0}.mi-cur .btn{margin-top:6px} .mi-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:4px 12px;font-size:12.5px}.mi-steps div{display:flex;gap:8px;color:var(--mu);padding:3px 0}.mi-steps i{font-style:normal;width:18px;text-align:center}.mi-steps .d{color:#9fd3b4}.mi-steps .n{color:var(--tx);font-weight:600} #tut .tut-all{margin-left:4px} #sheet .wb>.mi{grid-column:1/-1;width:100%} #sheet.win .wb:has(>.mi){column-count:1} .mi .rq-d{font-style:normal;font-size:10.5px;padding:0 5px;border:1px solid;margin-right:4px}.mi .rq-d.hard{color:#d8c26a;border-color:#d8c26a88}.mi .rq-d.vhard{color:#f0a060;border-color:#f0a06088}.mi .rq-d.extreme{color:#ff8a7a;border-color:#e05a4e;background:#e05a4e22} .fx-big>img.hi{width:auto!important;max-width:min(88%,300px)!important;max-height:182px!important} /* 512px 큰 카드·운용병 초상(r099) */ #strip .cdr-pt{width:24px;height:24px;border:1px solid var(--ln);margin-right:4px;object-fit:cover;vertical-align:middle} /* 전투 다시 보기 중에는 다시 보기를 닫아 버리는 다른 버튼(지도 도구·상점·하단 메뉴·임무 카드·경보·좌표)을 숨긴다(2026-10-20 대표 지적) — 닫기는 다시 보기의 닫기 버튼으로만 */ #fw.bm-play #topr,#fw.bm-play #tools,#fw.bm-play #dd-shop,#fw.bm-play #bar,#fw.bm-play #rail,#fw.bm-play #tut,#fw.bm-play #threat,#fw.bm-play #coord,#fw.bm-play #card,#fw.bm-play #supwarn{display:none!important} #dd-btn{white-space:nowrap;flex-shrink:0}#dd-shop{flex-shrink:0} /* 2026-10-20: 영토 카드가 열린 좁은 화면에서 48px로 찌그러져 글자가 세로로 쌓이던 것 */ #sheet.win .wb>.pool{break-inside:avoid} /* 상단 소리 버튼·소리 설정(2026-10-20 대표 "사운드 설정도 가능해야") */ .snd-btn{display:inline-flex;align-items:center;gap:4px;background:transparent;border:1px solid var(--ln);color:var(--tx);font:600 11px var(--font);padding:2px 7px;height:24px;cursor:pointer;border-radius:3px;margin-left:4px} .snd-btn:hover{border-color:var(--fr);color:var(--fr)} .snd-row b{display:flex;align-items:center;gap:8px}.snd-row input[type=range]{width:150px}.snd-row em{font:500 11px var(--mono);font-style:normal;color:var(--mu);min-width:36px;text-align:right} @media(max-width:600px){.snd-btn span{display:none}.snd-row input[type=range]{width:110px}} /* 휴대폰: 영토 카드가 열려 있으면 임무 카드를 숨김(2026-10-20 점검: 영토 카드 아래쪽 버튼을 가렸음) */ @media(max-width:600px){#fw:has(#card:not([hidden])) #tut{display:none!important}} #tut .tut-need,.mi-cur .tut-need{color:#e8c45a;font-size:11.5px;margin:4px 0 2px} /* 퀘스트 선행 조건(2026-10-20) */ /* 다시 보기 중에는 새 버전 알림 띠 숨김(2026-10-20) */ body:has(#fw.bm-play) #newver{display:none!important} body:has(#bmhud) #sheet{z-index:9} /* 다시 보기 중에 연 창(소리 설정 등)이 다시 보기 화면 밑에 깔리던 것(2026-10-21) */ .flg{display:inline-block;width:1.45em;height:1.05em;vertical-align:-.18em;object-fit:cover;border:1px solid #0007;border-radius:1px;box-shadow:0 0 0 .5px #fff3}.flg.big{width:42px;height:31px;vertical-align:middle} /* 국기 그림(flag-icons) */ #map.e2 .mapboxgl-canvas{filter:none} /* Earth2형: 위성 지도 원색 */ #symbols.e2 .sym:not(.army) .fl{display:none} /* Earth2형: 국기는 지도 칸 채우기로 그림 */ #symbols.bm-hide{display:none} /* 다시 보기 중 지도 국기·자원 아이콘 숨김 */ .armybox{position:absolute;border:3px solid #4c8dff;box-shadow:0 0 0 1px #000a,0 0 10px #4c8dffaa,inset 0 0 0 1px #000a;pointer-events:none;z-index:3} /* 야전군 위치(국기 채우기 방식) */ /* ===== 전쟁 게임 고급형 화면 틀(2026-10-21, UI 키트 r107 v1) ===== */ :root{--ui:'/assets/sprites/ui/'} body.h2 #topr{display:none} /* 옛 지도 도구 줄은 숨기고(버튼은 기능 연결용으로 남음) 새 아이콘 줄·세로 버튼으로 */ #h2-row{position:absolute;left:8px;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 32px);z-index:6;display:flex;gap:2px} #h2-row button{position:relative;width:62px;background:none;border:0;padding:0;cursor:pointer;color:#ece6cf;font:700 11px var(--font);text-shadow:0 1px 2px #000,0 0 3px #000} #h2-row .fr{display:flex;align-items:center;justify-content:center;width:48px;height:48px;margin:0 auto 1px;background:url(/assets/sprites/ui/frame_icon-v1.webp) center/contain no-repeat} #h2-row .fr img{width:30px;height:30px;filter:drop-shadow(0 1px 1px #000)} #h2-row button:hover .fr{filter:brightness(1.2)} .h2b{position:absolute;top:-2px;right:4px;min-width:18px;height:18px;padding:0 4px;background:url(/assets/sprites/ui/badge-v1.webp) center/100% 100% no-repeat;color:#fff;font:800 10.5px/18px var(--font);text-align:center;text-shadow:0 1px 1px #000} #h2-side{position:absolute;left:8px;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 108px);z-index:6;display:flex;flex-direction:column;gap:5px} #h2-side button{position:relative;display:flex;align-items:center;gap:7px;width:126px;height:38px;padding:0 10px;border-style:solid;border-width:14px 12px;border-image:url(/assets/sprites/ui/btn_side_default-v1.webp) 34 28 34 28 fill/14px 12px stretch;background:none;color:#ece6cf;font:800 12.5px var(--font);cursor:pointer;text-shadow:0 1px 2px #000} #h2-side button:active{border-image-source:url(/assets/sprites/ui/btn_side_pressed-v1.webp)} #h2-side img{width:24px;height:24px;margin:-10px 0} #h2-side span{margin:-10px 0;white-space:nowrap} #h2-side .h2b{top:-12px;right:-8px} #h2-army{position:absolute;right:8px;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 34px);z-index:5;width:262px} #h2-army .h2a-hd{display:flex;align-items:center;gap:4px} #h2-army .h2a-hd span{flex:1;height:30px;line-height:30px;text-align:center;border-image:url(/assets/sprites/ui/tab_selected-v1.webp) 20 24 20 24 fill/6px 10px stretch;border-style:solid;border-width:6px 10px;color:#f0d79a;font:800 13px var(--font);text-shadow:0 1px 2px #000;box-sizing:border-box;line-height:16px} #h2-army .h2a-tg{width:28px;height:28px;background:#0d100ee8;border:1px solid #a8854f;color:#ece6cf;border-radius:4px;cursor:pointer} #h2-army.fold .h2a{display:none}#h2-army.fold .h2a-tg{transform:rotate(180deg)} #h2-army .h2a{display:flex;align-items:center;gap:6px;margin-top:3px;min-height:34px;padding:2px 8px 2px 6px;border-style:solid;border-width:8px 8px 9px 22px;border-image:url(/assets/sprites/ui/army_list-v1.webp) 36 28 42 104 fill/8px 8px 9px 22px stretch;color:#ece6cf;font:700 11.5px var(--font);cursor:pointer;box-sizing:border-box} #h2-army .tg{flex:0 0 auto;width:52px;height:20px;line-height:20px;text-align:center;font:800 10.5px var(--font);color:#fff;background:center/100% 100% no-repeat;text-shadow:0 1px 1px #000} #h2-army .tg.occupation{background-image:url(/assets/sprites/ui/tag_status_occupation-v1.webp)}#h2-army .tg.reinforcement{background-image:url(/assets/sprites/ui/tag_status_reinforcement-v1.webp)}#h2-army .tg.standby{background-image:url(/assets/sprites/ui/tag_status_standby-v1.webp)}#h2-army .tg.return{background-image:url(/assets/sprites/ui/tag_status_return-v1.webp)}#h2-army .tg.engagement{background-image:url(/assets/sprites/ui/tag_status_engagement-v1.webp)} #h2-army .tx{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} #h2-army .tm{font:700 11.5px var(--mono);color:#e2b65c} #h2-big .rb{position:absolute;bottom:calc(var(--bar) + 8px);z-index:6;width:86px;height:86px;border:0;padding:0;background:center/100% 100% no-repeat;cursor:pointer;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;font:900 15px var(--font);text-shadow:0 2px 2px #000} #h2-big .rb img{width:34px;height:34px;filter:drop-shadow(0 2px 2px #000)} #h2-big .rb.l{left:8px;background-image:url(/assets/sprites/ui/btn_round_big_mission_default-v1.webp)}#h2-big .rb.l:active{background-image:url(/assets/sprites/ui/btn_round_big_mission_pressed-v1.webp)} #h2-big .rb.r{right:8px;background-image:url(/assets/sprites/ui/btn_round_big_sortie_default-v1.webp)}#h2-big .rb.r:active{background-image:url(/assets/sprites/ui/btn_round_big_sortie_pressed-v1.webp)} #h2-chat{position:absolute;left:104px;right:104px;bottom:calc(var(--bar) + 12px);z-index:5;height:30px;display:flex;align-items:center;gap:6px;padding:0 10px;border-style:solid;border-width:8px 8px 8px 20px;border-image:url(/assets/sprites/ui/chat_bar-v1.webp) 20 28 20 80 fill/8px 8px 8px 20px stretch;color:#ece6cf;font:12px var(--font);white-space:nowrap;overflow:hidden;cursor:pointer;box-sizing:border-box} #h2-chat .sc{color:#e2b65c;font-weight:800} body.h2 #tut{left:104px;bottom:calc(var(--bar) + 50px)} /* 화면별로 숨김: 기지·다시 보기·큰 창 */ #fw.base-open #h2-row,#fw.base-open #h2-side,#fw.base-open #h2-army,#fw.base-open #h2-chat,#fw.base-open #h2-big,#fw.bm-play #h2-row,#fw.bm-play #h2-side,#fw.bm-play #h2-army,#fw.bm-play #h2-chat,#fw.bm-play #h2-big,#fw.sheet-win #h2-row,#fw.sheet-win #h2-side,#fw.sheet-win #h2-army{display:none} #fw.sheet-open #h2-army,#fw.card-open #h2-army{display:none} /* 창·버튼·탭 재질 */ body.h2 #sheet{border-style:solid;border-width:20px;border-image:url(/assets/sprites/ui/panel_main-v1.webp) 48 fill/20px stretch;background:#1a1f1c;padding:6px 8px} body.h2 #sheet .top{margin:-6px -6px 8px;padding:6px 14px;border-style:solid;border-width:8px 30px;border-image:url(/assets/sprites/ui/panel_title-v1.webp) 20 72 20 72 fill/8px 30px stretch;color:#f0d79a} body.h2 #sheet .top .h{color:#f0d79a;font-weight:800;letter-spacing:.04em;text-shadow:0 1px 2px #000} body.h2 .btn{border-style:solid;border-width:9px 10px;border-image:url(/assets/sprites/ui/btn_secondary_default-v1.webp) 28 34 28 34 fill/9px 10px stretch;background:none;padding:2px 6px;color:#ece6cf;font-weight:700;text-shadow:0 1px 1px #000;border-radius:0} body.h2 .btn:active{border-image-source:url(/assets/sprites/ui/btn_secondary_pressed-v1.webp)} body.h2 .btn:disabled,body.h2 .btn.off{border-image-source:url(/assets/sprites/ui/btn_secondary_disabled-v1.webp);opacity:.75} body.h2 .btn.pri{border-image-source:url(/assets/sprites/ui/btn_primary_default-v1.webp);color:#f3edd2} body.h2 .btn.pri:active{border-image-source:url(/assets/sprites/ui/btn_primary_pressed-v1.webp)} body.h2 .btn.pri:disabled{border-image-source:url(/assets/sprites/ui/btn_primary_disabled-v1.webp)} body.h2 #bar button{border-style:solid;border-width:8px 10px;border-image:url(/assets/sprites/ui/btn_secondary_default-v1.webp) 28 34 28 34 fill/8px 10px stretch;background:none;margin:3px 2px} body.h2 #bar button.on{border-image-source:url(/assets/sprites/ui/btn_primary_default-v1.webp);color:#f3edd2} body.h2 .seg{border:0;gap:3px;overflow:visible} body.h2 .seg span{border-style:solid;border-width:6px 10px;border-image:url(/assets/sprites/ui/tab_unselected-v1.webp) 20 24 20 24 fill/6px 10px stretch;background:none!important;color:#a9a890} body.h2 .seg span.on{border-image-source:url(/assets/sprites/ui/tab_selected-v1.webp);color:#f0d79a} body.h2 #logi>span{border-style:solid;border-width:4px 6px 4px 14px;border-image:url(/assets/sprites/ui/chip_res-v1.webp) 18 22 18 64 fill/4px 6px 4px 14px stretch;padding:0 4px;margin-right:2px} @media(max-width:600px){ #h2-row{left:4px;right:4px;overflow-x:auto;scrollbar-width:none}#h2-row::-webkit-scrollbar{display:none} #h2-row button{flex:0 0 52px;width:52px;font-size:10px}#h2-row .fr{width:40px;height:40px}#h2-row .fr img{width:24px;height:24px} #h2-side{top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 94px)} #h2-side button{width:44px;padding:0;justify-content:center}#h2-side span{display:none} #h2-army{width:190px;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 94px)} #h2-big .rb{width:66px;height:66px;font-size:12px}#h2-big .rb img{width:26px;height:26px} #h2-chat{left:80px;right:80px;font-size:11px} body.h2 #tut{left:8px} } /* 장 임무 창: 장 그림 배너·보상 카드(UI 키트 r107) */ .mi-ban{position:relative;height:150px;margin:0 0 8px;background:center/cover no-repeat;border-radius:4px;overflow:hidden} body.h2 .mi-ban::after{content:"";position:absolute;inset:0;background:url(/assets/sprites/ui/banner_chapter_frame-v1.webp) center/100% 100% no-repeat;pointer-events:none} .mi-ban .cn{position:absolute;left:16px;bottom:14px;z-index:1;color:#fff;text-shadow:0 2px 4px #000,0 0 8px #000} .mi-ban .cn b{display:block;font:900 24px var(--font);color:#f0d79a}.mi-ban .cn span{font:700 14px var(--font)} .rcards{display:flex;gap:6px;flex-wrap:wrap;margin:4px 0 8px} body.h2 .rcard{position:relative;display:flex;align-items:center;justify-content:center;width:56px;height:56px;background:url(/assets/sprites/ui/card_reward_common-v1.webp) center/100% 100% no-repeat} .rcard.advanced{background-image:url(/assets/sprites/ui/card_reward_advanced-v1.webp)}.rcard.rare{background-image:url(/assets/sprites/ui/card_reward_rare-v1.webp)}.rcard.legendary{background-image:url(/assets/sprites/ui/card_reward_legendary-v1.webp)} .rcard img,.rcard svg{width:30px;height:30px} .rcard b{position:absolute;right:5px;bottom:3px;font:800 11px var(--font);color:#fff;text-shadow:0 1px 2px #000,0 0 2px #000} /* 우편 탭·목록(UI 키트 r107) */ .mtabs{display:flex;gap:3px;margin-top:8px} body.h2 .mtabs button{position:relative;flex:1;height:34px;border-style:solid;border-width:6px 10px;border-image:url(/assets/sprites/ui/tab_unselected-v1.webp) 20 24 20 24 fill/6px 10px stretch;background:none;color:#a9a890;font:800 12.5px var(--font);cursor:pointer} body.h2 .mtabs button.on{border-image-source:url(/assets/sprites/ui/tab_selected-v1.webp);color:#f0d79a} .mtabs .h2b{top:-10px;right:-8px} body.h2 .mrow{display:flex;gap:8px;align-items:flex-start;border-style:solid;border-width:10px 12px 10px 18px;border-image:url(/assets/sprites/ui/list_item-v1.webp) 28 32 28 48 fill/10px 12px 10px 18px stretch;background:none;margin:4px 0;padding:0} body.h2 .mrow.unread{border-image-source:url(/assets/sprites/ui/list_item_unread-v1.webp)} .mrow .mic{width:34px;height:34px;flex:0 0 auto;margin-top:2px} .mrow .mtx{flex:1;min-width:0} /* 건물 창 필요 조건 체크(UI 키트 r107) */ body.h2 .reqs{margin:4px 0;border-style:solid;border-width:8px;border-image:url(/assets/sprites/ui/panel_sub-v1.webp) 56 28 28 28 fill/14px 8px 8px 8px stretch;padding:2px 4px} .req2{display:flex;align-items:center;gap:8px;padding:4px 2px;border-bottom:1px dashed #6b543066;font-size:12.5px} .req2:last-child{border-bottom:0} .req2 img:last-child{margin-left:auto;width:20px;height:20px} body.h2 #b5-up{display:block;width:100%;min-height:44px;font-size:15px;margin-top:8px} /* 휴대폰 화면 정리(2026-10-21 UI 키트 적용 후 점검): 자원 칩 5칸×2줄, 부대 목록 접힘, 임무 칩은 둥근 버튼 위로 */ @media(max-width:600px){ body.h2 #logi{display:grid!important;grid-template-columns:repeat(5,1fr);gap:2px 3px!important;padding:2px 4px!important;align-content:center} body.h2 #logi>span{margin:0;border-width:3px 4px 3px 10px;padding:0 2px;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11px;line-height:20px} body.h2 #logi .ico{width:15px;height:15px} #h2-army{width:150px} body.h2 #tut{bottom:calc(var(--bar) + 84px)} } /* 창·영토 카드가 열리면 새 화면 틀을 비킨다(2026-10-21 휴대폰 점검: 창 제목·버튼 위에 아이콘 줄·둥근 버튼·채팅이 겹침) */ #fw.sheet-open #h2-big,#fw.sheet-open #h2-chat,#fw.card-open #h2-big,#fw.card-open #h2-chat{display:none} #fw.sheet-win #h2-row,#fw.sheet-win #h2-side{display:none} @media(max-width:900px){#fw.sheet-open #h2-row,#fw.sheet-open #h2-side,#fw.sheet-open #h2-army{display:none}} @media(max-width:600px){ #h2-row{background:linear-gradient(#0b0d0cf0,#0b0d0cc0);border-bottom:1px solid #a8854f55;padding:2px 0;left:0!important;right:0!important;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 30px)} #fw.card-open #h2-side,#fw.card-open #h2-army{display:none} } /* UI 키트 화면 틀을 끈 기본 화면(2026-10-21 대표 "만화풍"): 같은 구조를 야전 태블릿 재질로 */ body:not(.h2) .mtabs button{flex:1;height:32px;background:var(--bgp);border:1px solid var(--ln);color:var(--mu);font:600 12px var(--font);cursor:pointer;position:relative} body:not(.h2) .mtabs button.on{color:var(--tx);border-color:var(--ne);background:var(--bgi)} body:not(.h2) .mrow .mic{display:none} body:not(.h2) .reqs{border:1px solid var(--ln);background:#0e110f;padding:2px 8px;margin:4px 0} body:not(.h2) .req2 img:last-child{filter:saturate(.5) brightness(.9);width:16px;height:16px} body:not(.h2) .rcard{position:relative;display:flex;align-items:center;justify-content:center;width:52px;height:52px;border:1px solid var(--ln);background:#0e110f} body:not(.h2) .mi-ban{border:1px solid var(--ln);border-radius:0} body:not(.h2) .h2b{background:#8a2a22;border-radius:2px;font:600 10px/16px var(--mono);height:16px;min-width:16px;top:-8px;right:-4px;text-shadow:none} /* ===== 전체 UI 3안 실제 화면 미리보기(2026-10-21, 시안 /decide-ui-real/) — body.ui-A / ui-B / ui-C ===== */ #uiprev{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--bar) + 6px);z-index:80;display:flex;gap:3px;align-items:center;background:#000d;border:1px solid #ffffff30;padding:3px 4px 3px 10px;font:600 11px var(--font);color:#ccc} #uiprev button{background:#ffffff10;border:1px solid #ffffff25;color:#ddd;font:600 11px var(--font);padding:4px 8px;cursor:pointer}#uiprev button.on{background:#f0c247;color:#111;border-color:#f0c247} @media(max-width:600px){#uiprev{bottom:calc(var(--bar) + 2px);padding:2px 3px 2px 6px}#uiprev span{display:none}#uiprev button{padding:4px 6px;font-size:10.5px}} /* A 지휘소 상황판: 반투명 유리·1px 선·네 모서리 표식·앰버 하나 */ body.ui-A{--bgp:rgba(10,14,13,.74);--bgi:rgba(255,255,255,.05);--ln:rgba(190,205,195,.2);--ne:#e3b04b;--fr:#5aa0ff;--tx:#e6e9e4;--mu:#8f978f} body.ui-A #strip,body.ui-A #logi,body.ui-A #bar,body.ui-A #card,body.ui-A #sheet,body.ui-A #tut,body.ui-A #tools button,body.ui-A #dd-btn,body.ui-A #hq5 .b5-tools{backdrop-filter:blur(10px) saturate(1.1);-webkit-backdrop-filter:blur(10px)} body.ui-A #sheet,body.ui-A #card,body.ui-A #tut{box-shadow:inset 0 0 0 1px var(--ln)} body.ui-A #sheet::before,body.ui-A #card::before{content:"";position:sticky;display:block;top:-12px;left:0;height:0;margin:-12px -12px 12px;border-top:1px solid var(--ne);width:24px} body.ui-A .btn{background:rgba(255,255,255,.05);border:1px solid var(--ln);border-radius:0;font-weight:600} body.ui-A .btn.pri{background:var(--ne);border-color:var(--ne);color:#14120c;font-weight:700} body.ui-A .btn.hot{background:#3a1512cc;border-color:#e2574a;color:#ffd4ce} body.ui-A .seg{border:0;border-bottom:1px solid var(--ln);border-radius:0}body.ui-A .seg span{font:600 12px var(--font)}body.ui-A .seg .on{background:none;color:var(--tx);box-shadow:inset 0 -2px 0 var(--ne)} body.ui-A #bar button.on{color:var(--ne);box-shadow:inset 0 2px 0 var(--ne)} body.ui-A #sheet .top .h{font:600 11px var(--mono);letter-spacing:.14em;color:var(--mu)} body.ui-A #dd-btn{border-color:var(--ne);color:var(--ne);background:rgba(10,14,13,.74)} body.ui-A .h2b,body.ui-A .mbadge{background:#e2574a;border-radius:0} /* B 러기드 군용 장비: 무광 올리브 폴리머 질감·깎인 모서리·물리 버튼 */ body.ui-B{--bgp:#2b2c23f5;--bgi:#3a3b30;--ln:#4c4c3b;--ne:#c9b27a;--fr:#7ea6cf;--tx:#e6e2d2;--mu:#a19c84} body.ui-B #strip,body.ui-B #logi,body.ui-B #bar,body.ui-B #card,body.ui-B #sheet,body.ui-B #tut,body.ui-B #hq5 .b5-tools{background:url("data:image/svg+xml;utf8,"),linear-gradient(180deg,#34352b,#25261e)!important;box-shadow:inset 0 1px 0 #ffffff14,inset 0 -1px 0 #0007} body.ui-B #card,body.ui-B #tut{clip-path:polygon(10px 0,calc(100% - 10px) 0,100% 10px,100% calc(100% - 10px),calc(100% - 10px) 100%,10px 100%,0 calc(100% - 10px),0 10px)} body.ui-B .btn{background:linear-gradient(180deg,#47483b,#35362c);border:1px solid #16160f;border-radius:2px;box-shadow:inset 0 1px 0 #ffffff1e,0 1px 0 #0009;font-weight:600} body.ui-B .btn:active{background:linear-gradient(0deg,#47483b,#35362c);box-shadow:inset 0 1px 3px #000a} body.ui-B .btn.pri{background:linear-gradient(180deg,#6d6c40,#55552f);color:#f6f1da;border-color:#222210} body.ui-B .btn.hot{background:linear-gradient(180deg,#6e2c22,#541f18);color:#ffe0d8} body.ui-B .seg{border:0;gap:2px}body.ui-B .seg span{background:#1c1d17;border:1px solid #111;font:600 12px var(--font)}body.ui-B .seg .on{background:#4b4b33;color:#f2ecd4} body.ui-B #bar button.on{background:#44442f;color:#f2e9c8} body.ui-B #sheet .top .h{font:700 13px 'Barlow Condensed',var(--font);letter-spacing:.18em;color:var(--ne)} body.ui-B #tools button,body.ui-B #dd-btn{background:linear-gradient(180deg,#3d3e33,#2d2e25);border:1px solid #14140e;box-shadow:inset 0 1px 0 #ffffff18} body.ui-B #map .mapboxgl-canvas{filter:saturate(.62) sepia(.14) brightness(.9)} /* C 시네마틱 대작형: 상자 대신 검은 그라데이션·큰 응축 제목·흰 주 버튼·노란 강조 하나 */ body.ui-C{--bgp:#0b0b0bf0;--bgi:rgba(255,255,255,.06);--ln:rgba(255,255,255,.13);--ne:#f0c247;--fr:#7fb2ff;--tx:#f4f3ef;--mu:#a4a39c} body.ui-C #strip{background:linear-gradient(180deg,#000e,#0008);border-bottom:0} body.ui-C #logi{background:linear-gradient(180deg,#0008,#0000);border-bottom:0} body.ui-C #bar{background:linear-gradient(0deg,#000,#000e);border-top:1px solid #ffffff14}body.ui-C #bar button:not(.on){color:#c9d0d6}body.ui-C #bar button small{color:#c9d0d6;font-size:11px} /* 2026-10-26 대표 지적: 하단 메뉴가 너무 투명해 지도가 비치고 글자가 안 보임 → 거의 불투명 + 밝은 글자 */ body.ui-C #bar button{position:relative}body.ui-C #bar button.on{color:#fff;background:none}body.ui-C #bar button.on::after{content:"";position:absolute;left:32%;right:32%;bottom:5px;height:2px;background:var(--ne)} body.ui-C #sheet,body.ui-C #card{background:linear-gradient(90deg,#0a0a0af5,#111111ee);border-color:transparent;border-left:1px solid var(--ln)} body.ui-C #tut{background:linear-gradient(90deg,#000d,#0009);border:0;border-left:2px solid var(--ne)} body.ui-C #sheet .top .h{font:800 26px/1 'Barlow Condensed',var(--font);letter-spacing:.02em;color:#fff} body.ui-C .btn{background:rgba(255,255,255,.06);border:1px solid var(--ln);border-radius:0;font-weight:700} body.ui-C .btn.pri{background:#f4f3ef;border-color:#f4f3ef;color:#0b0b0b} body.ui-C .btn.hot{background:transparent;border-color:#e04a3a;color:#ff9c8f} body.ui-C .seg{border:0;border-radius:0;gap:14px}body.ui-C .seg span{flex:0 0 auto;padding:6px 0;font:700 13px var(--font)}body.ui-C .seg .on{background:none;color:#fff;box-shadow:inset 0 -2px 0 var(--ne)} body.ui-C #tools button,body.ui-C #dd-btn{background:#000a;border:1px solid transparent;border-bottom:1px solid var(--ln)} body.ui-C #dd-btn{color:var(--ne)} body.ui-C .h2b,body.ui-C .mbadge{background:var(--ne);color:#111;border-radius:0} body.ui-C #map .mapboxgl-canvas{filter:saturate(.85) contrast(1.08) brightness(.88)} body.ui-C #fw::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:4;background:linear-gradient(90deg,#0007 0,#0000 18%,#0000 82%,#0007 100%)} /* C 기본 확정(2026-10-21 대표 "추천대로"): 지도 위 작은 표시는 A안처럼 얇은 반투명 상자, 위쪽 자원 줄은 지도 위에서도 읽히게 진하게 */ body.ui-C #logi{background:linear-gradient(180deg,#000c,#0007)} body.ui-C .sym .t{background:rgba(10,14,13,.72);border:1px solid rgba(190,205,195,.2);padding:0 4px;text-shadow:none;font:500 10px var(--mono)} body.ui-C #coord,body.ui-C .coord,body.ui-C #threat{background:rgba(10,14,13,.78);border:1px solid rgba(190,205,195,.2);backdrop-filter:blur(8px)} body.ui-C #tools button{background:rgba(10,14,13,.72);border:1px solid rgba(190,205,195,.18);backdrop-filter:blur(8px)} /* C안 다듬기(2026-10-21 휴대폰 점검): 우편 탭은 밑줄 탭, 임무 칩·작은 칸은 검은 반투명 + 노란 선 */ body.ui-C .mtabs{gap:14px;border-bottom:1px solid var(--ln)} body.ui-C .mtabs button{flex:0 0 auto;background:none;border:0;padding:6px 0;height:auto;color:var(--mu);font:700 13px var(--font)} body.ui-C .mtabs button.on{color:#fff;box-shadow:inset 0 -2px 0 var(--ne)} body.ui-C .mtabs .h2b{position:static;display:inline-block;margin-left:4px;vertical-align:1px} body.ui-C #tut .tut-mob,body.ui-C #tut.mob-min .tut-mob{background:#000c;border:0;border-left:2px solid var(--ne);color:#fff} body.ui-C .msg{border-color:var(--ln)} body.ui-C .kv{border-color:var(--ln)} /* 임무 카드(2026-10-21 대표 지적: PC 왼쪽 아래 겹침): 좌표 줄 위로 올리고, 뒤 지도 표시가 비치지 않게 불투명 바탕, 제목 줄이 잘리지 않게 */ #fw:not(.base-open) #tut{bottom:calc(var(--bar) + 28px)} body.ui-C #tut{background:#0b0b0bf5} #tut .tut-hd{flex-wrap:wrap;row-gap:2px}#tut .tut-hd *{white-space:normal} #tut{max-width:min(360px,calc(100vw - 20px))} /* 스크롤바·창 머리(2026-10-21 대표 "스크롤 칸이 마음에 안 든다"): 얇은 어두운 스크롤바, 창 제목 줄은 불투명(스크롤한 내용이 비치지 않게) */ *{scrollbar-width:thin;scrollbar-color:#ffffff38 transparent} ::-webkit-scrollbar{width:8px;height:8px}::-webkit-scrollbar-track{background:transparent} ::-webkit-scrollbar-thumb{background:#ffffff30;border-radius:4px;border:2px solid transparent;background-clip:padding-box}::-webkit-scrollbar-thumb:hover{background:#ffffff55;background-clip:padding-box} #sheet.win .top{background:#0d0d0d} body.ui-C #sheet.win{border-top:0;border:1px solid var(--ln);background:#0c0c0cfa} /* 병력 창 C안 전면 개편(2026-10-21) */ #sheet.win .wb:has(>.fu-top){column-count:1} .fu-top{display:grid;grid-template-columns:1.6fr repeat(4,1fr);gap:8px;margin-bottom:14px} .fu-s{background:#ffffff08;border:1px solid var(--ln);padding:10px 12px;display:flex;flex-direction:column;gap:4px;min-width:0} .fu-s em{font:600 11px var(--font);color:var(--mu);font-style:normal;letter-spacing:.04em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .fu-s b{font:700 24px/1.1 'Barlow Condensed',var(--mono);color:var(--tx)}.fu-s b small{font:500 13px var(--mono);color:var(--mu)}.fu-s b.bad{color:#ff9c8f} .fu-s .btn{align-self:flex-start;padding:4px 10px;font-size:11.5px;margin-top:2px} .fu-w{font-size:10.5px;color:#e8c45a} .fu-bar{height:4px;background:#ffffff14}.fu-bar i{display:block;height:100%;background:var(--ne)} .fu-body{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(0,1fr);gap:22px;align-items:start} .fu-tabs{display:flex;gap:18px;border-bottom:1px solid var(--ln);margin-bottom:10px} .fu-tabs button{background:none;border:0;color:var(--mu);font:700 14px var(--font);padding:8px 0;cursor:pointer;display:flex;gap:6px;align-items:baseline} .fu-tabs button span{font:500 12px var(--mono);color:var(--mu)} .fu-tabs button.on{color:#fff;box-shadow:inset 0 -2px 0 var(--ne)} .fu-gh{display:flex;justify-content:space-between;font:700 12px var(--font);color:var(--mu);letter-spacing:.06em;margin:12px 0 6px}.fu-gh span{font:500 12px var(--mono)} .fu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px} .fu-c{position:relative;background:linear-gradient(180deg,#ffffff0c,#ffffff04);border:1px solid var(--ln);padding:6px 6px 8px;display:flex;flex-direction:column;align-items:center;min-width:0} .fu-c img,.fu-c i{width:100%;height:64px;object-fit:contain;display:block} .fu-c b{position:absolute;right:6px;top:4px;font:700 17px 'Barlow Condensed',var(--mono);color:#fff;text-shadow:0 1px 3px #000} .fu-c span{font:600 12px var(--font);color:var(--tx);text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;margin-top:4px} .fu-empty{color:var(--mu);font-size:12.5px;padding:10px 0} .fu-gar{border:1px solid var(--ln);padding:8px 10px;margin-bottom:10px}.fu-gt{display:flex;align-items:center;gap:8px}.fu-gt b{font-size:14px}.fu-gt span{font:500 11px var(--mono);color:var(--mu)}.fu-gt em{margin-left:auto;font:700 16px 'Barlow Condensed',var(--mono);font-style:normal}.fu-gt .btn{padding:3px 9px} .fu-sec{border-top:1px solid var(--ln);padding:10px 0 12px}.fu-sec:first-child{border-top:0;padding-top:0} .fu-h{font:700 12px var(--font);color:var(--mu);letter-spacing:.08em;margin-bottom:8px;display:flex;justify-content:space-between}.fu-h span{font:500 12px var(--mono)} .fu-cmd{display:flex;gap:12px;align-items:flex-start}.fu-cmd img,.fu-cmd>i{width:76px;height:76px;object-fit:cover;border:1px solid var(--ln);flex:0 0 auto} .fu-ci{display:flex;flex-direction:column;gap:2px;min-width:0}.fu-ci b{font:800 20px 'Barlow Condensed',var(--font);color:#fff}.fu-ci span{font-size:12px}.fu-ci .mu{font-size:11px;color:var(--mu)} .fu-cb{display:flex;gap:6px;margin-top:6px;flex-wrap:wrap}.fu-cb .btn{padding:4px 10px;font-size:12px} .fu-row{display:flex;align-items:center;gap:8px;padding:6px 0;border-bottom:1px solid #ffffff0d;font-size:12.5px}.fu-row:last-of-type{border-bottom:0} .fu-row span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.fu-row b{font-weight:600}.fu-row .tm{font:600 12px var(--mono);color:var(--ne)}.fu-row .btn{padding:3px 9px;font-size:11.5px} .fu-row select{width:auto;background:#000;border:1px solid var(--ln);color:var(--tx);padding:4px 6px} .fu-ji{width:34px;height:24px;object-fit:contain} .fu-note{font-size:11px;color:var(--mu);margin:-2px 0 4px} .fu-go{width:100%;margin-top:10px;min-height:40px;font-size:13.5px} @media(max-width:900px){.fu-top{grid-template-columns:repeat(2,1fr)}.fu-s.wide{grid-column:1/-1}.fu-body{grid-template-columns:1fr}.fu-grid{grid-template-columns:repeat(auto-fill,minmax(96px,1fr))}.fu-c img,.fu-c i{height:52px}} .fu-cmd>i{display:flex;align-items:center;justify-content:center;text-align:center;font:600 11px var(--font);color:var(--mu);font-style:normal;cursor:pointer;background:#ffffff08} .fu-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}.fu-chip{display:flex;align-items:center;gap:6px;background:#ffffff08;border:1px solid var(--ln);padding:3px 8px 3px 4px;font-size:12px}.fu-chip img{width:34px;height:24px;object-fit:contain}.fu-chip b{font:700 14px "Barlow Condensed",var(--mono);margin-left:2px}.fu-gar{padding:8px 10px 10px} /* 시장 창 C안 개편(2026-10-21) */ #sheet.win .wb:has(.mk-tabs){column-count:1} .mk-sum{display:grid;grid-template-columns:auto auto 1fr;gap:10px;align-items:stretch;margin:8px 0 12px} .mk-sum>div{background:#ffffff08;border:1px solid var(--ln);padding:8px 14px;display:flex;flex-direction:column} .mk-sum em{font:600 11px var(--font);color:var(--mu);font-style:normal}.mk-sum b{font:700 24px/1.15 'Barlow Condensed',var(--mono);color:#fff}.mk-sum small{font-size:10.5px;color:var(--mu)} .mk-sum p{margin:0;align-self:center;font-size:12px;color:var(--mu)} .mk2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:18px;align-items:start} .mk-hd,.mk-it{display:grid;grid-template-columns:minmax(0,1.6fr) 74px 74px 62px 60px;gap:6px;align-items:center} .mk-hd{font:600 11px var(--font);color:var(--mu);padding:0 8px 6px;border-bottom:1px solid var(--ln)}.mk-hd span:nth-child(n+2){text-align:right} .mk-g{font:700 11.5px var(--font);color:var(--mu);letter-spacing:.06em;margin:10px 0 4px 8px} .mk-it{width:100%;background:none;border:0;border-bottom:1px solid #ffffff0d;color:var(--tx);padding:7px 8px;cursor:pointer;text-align:left;font:inherit} .mk-it:hover{background:#ffffff08}.mk-it.on{background:#ffffff10;box-shadow:inset 2px 0 0 var(--ne)} .mk-n{display:flex;align-items:center;gap:8px;min-width:0}.mk-n b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mk-n small{font:500 10.5px var(--mono);color:var(--mu);white-space:nowrap;margin-left:auto} .mk-p{text-align:right;font:600 12.5px var(--mono)}.mk-p.sell{color:#7fb2ff}.mk-p.buy{color:#ff9c8f}.mk-ch{text-align:right;font:500 11.5px var(--mono)} .mk-sp{width:60px;height:18px;color:#ffffff66;display:block} .mk-det{position:sticky;top:44px;background:#ffffff06;border:1px solid var(--ln);padding:14px} .mk-dt{display:flex;gap:10px;align-items:center}.mk-dt .ico,.mk-dt img,.mk-dt svg{width:34px!important;height:34px!important}.mk-dt b{display:block;font:800 22px/1.1 'Barlow Condensed',var(--font);color:#fff}.mk-dt small{font-size:11px;color:var(--mu)} .mk-px{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0 10px}.mk-px>div{border:1px solid var(--ln);padding:8px 10px}.mk-px em{font:600 11px var(--font);color:var(--mu);font-style:normal;display:block}.mk-px b{font:700 22px 'Barlow Condensed',var(--mono)}.mk-px .sell b{color:#7fb2ff}.mk-px .buy b{color:#ff9c8f} .mk-chart{width:100%;height:110px;display:block;background:#00000040;border:1px solid var(--ln)}.mk-none{display:flex;align-items:center;justify-content:center;color:var(--mu);font-size:12px}.mk-cl{display:flex;justify-content:space-between;font:500 10.5px var(--mono);color:var(--mu);margin-top:3px} .mk-q{display:flex;gap:6px;align-items:center;margin-top:12px}.mk-q span{font-size:12px;color:var(--mu)}.mk-q input{width:110px;background:#000;border:1px solid var(--ln);color:#fff;padding:6px 8px;font:600 13px var(--mono)}.mk-q .btn{padding:6px 9px} .mk-es{display:flex;justify-content:space-between;font-size:12px;color:var(--mu);margin:10px 0}.mk-es b{color:#fff;font-family:var(--mono)} .mk-bt{display:grid;grid-template-columns:1fr 1fr;gap:8px}.mk-bt .btn{min-height:42px;font-size:13.5px;white-space:nowrap} .mk-note{font-size:10.5px;color:var(--mu);margin-top:8px} #sheet .tbl .btn{white-space:nowrap} @media(max-width:900px){.mk2{grid-template-columns:1fr}.mk-det{position:static;order:-1}.mk-sum{grid-template-columns:1fr 1fr}.mk-sum p{grid-column:1/-1}.mk-hd,.mk-it{grid-template-columns:minmax(0,1fr) 64px 64px 52px}.mk-sp,.mk-hd span:last-child{display:none}.mk-n small{display:none}} /* 거래소·경매장(2026-10-21) */ .mk-tick{overflow:hidden;border-top:1px solid var(--ln);border-bottom:1px solid var(--ln);margin:6px 0 10px;white-space:nowrap;mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)} .mk-tick>div{display:inline-flex;gap:22px;padding:6px 0;animation:mktick 60s linear infinite}.mk-tick:hover>div{animation-play-state:paused} .mk-tick span{font-size:12px;color:var(--mu);cursor:pointer}.mk-tick b{font:600 12px var(--mono);color:#fff} @keyframes mktick{from{transform:translateX(0)}to{transform:translateX(-50%)}} .mk-win{display:flex;gap:4px;margin:0 0 6px}.mk-win button{background:none;border:1px solid var(--ln);color:var(--mu);font:600 11px var(--font);padding:3px 9px;cursor:pointer}.mk-win button.on{color:#111;background:var(--ne);border-color:var(--ne)} .mk-rt{margin-top:12px;border-top:1px solid var(--ln);padding-top:10px} .mk-tr{display:grid;grid-template-columns:42px 1fr 40px 54px 64px;gap:6px;font:500 11.5px var(--mono);padding:3px 0;color:var(--tx)}.mk-tr span:nth-child(n+4){text-align:right}.mk-tr .s{color:#7fb2ff}.mk-tr .b{color:#ff9c8f} .au-closed{border:1px solid #f0c24766;background:#f0c2470d;color:#f0d27a;padding:8px 12px;font-size:12.5px;margin:6px 0 10px} .au-bar{display:flex;justify-content:space-between;align-items:center;gap:10px}.au-bar .fu-tabs{flex:1;margin-bottom:0}.au-bar select{background:#000;border:1px solid var(--ln);color:var(--tx);padding:5px 8px} .au-c{display:grid;grid-template-columns:56px minmax(0,1fr) 120px auto;gap:12px;align-items:center;border-bottom:1px solid var(--ln);padding:10px 4px} .au-c.lead{box-shadow:inset 2px 0 0 #7fb2ff}.au-c.mine{box-shadow:inset 2px 0 0 var(--ne)} .au-p{width:56px;height:42px;display:flex;align-items:center;justify-content:center;background:#ffffff08;border:1px solid var(--ln)}.au-p img{width:100%;height:100%;object-fit:contain}.au-p svg,.au-p .ico{width:26px!important;height:26px!important} .au-i b{display:block;font-size:14px;color:#fff}.au-i b span{font:600 12px var(--mono);color:var(--mu)}.au-i small{font-size:11.5px;color:var(--mu)}.au-i em{font-style:normal;color:var(--ne);font-family:var(--mono)}.au-i i{font-style:normal;color:#7fb2ff} .au-v{text-align:right}.au-v em{display:block;font:600 10.5px var(--font);color:var(--mu);font-style:normal}.au-v b{font:700 20px 'Barlow Condensed',var(--mono);color:#fff}.au-v small{display:block;font-size:10.5px;color:var(--mu)} .au-a{display:flex;gap:6px;align-items:center}.au-a input{width:80px;background:#000;border:1px solid var(--ln);color:#fff;padding:6px;font:600 12.5px var(--mono)}.au-a .btn{padding:6px 10px;white-space:nowrap} .au-form{border:1px solid var(--ln);background:#ffffff06;padding:12px}.au-fr{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:8px}.au-fr select,.au-fr input{background:#000;border:1px solid var(--ln);color:var(--tx);padding:6px 8px}.au-fr label{display:flex;flex-direction:column;gap:3px;font-size:11px;color:var(--mu)}.au-fr label input{width:120px} @media(max-width:700px){.au-c{grid-template-columns:44px minmax(0,1fr) auto}.au-a{grid-column:1/-1}.au-p{width:44px;height:34px}.mk-tr{grid-template-columns:40px 1fr 36px 46px 58px}} .au-bar select{width:auto;flex:0 0 auto}.fu-tabs button{white-space:nowrap} /* ===== 위쪽 표시 H1(2026-10-21 대표 선택): 왼쪽 위 지휘관 카드 + 오른쪽 위 자원 칩 ===== */ body{--strip:72px;--logx:0px} #fw #strip{left:0;right:0;top:0;height:var(--strip);background:none!important;border:0;padding:8px 10px;display:flex;align-items:flex-start;justify-content:flex-start;gap:6px;pointer-events:none;font:inherit;z-index:6} #fw #strip>*{pointer-events:auto} .hc{display:flex;gap:8px;align-items:center;background:#000c;border:1px solid var(--ln);padding:5px 10px 5px 5px;cursor:pointer;max-width:260px} .hc:hover{border-color:#ffffff40} .hc-pt{width:50px;height:50px;object-fit:cover;border:1px solid #ffffff38;flex:0 0 auto;display:flex;align-items:center;justify-content:center;font:600 10.5px var(--font);color:var(--mu);font-style:normal;background:linear-gradient(180deg,#2c302a,#151815)} .hc-i{display:flex;flex-direction:column;gap:0;min-width:0} .hc-n{display:flex;align-items:center;gap:6px;white-space:nowrap}.hc-n .fl{width:18px;height:12px;border:1px solid #0008}.hc-n b{font:700 14px var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis}.hc-n span{font:600 10.5px var(--mono);color:var(--mu)} .hc-p{font:700 17px/1.15 'Barlow Condensed',var(--font);color:var(--ne)}.hc-p b{font:inherit} .hc-s{font:600 11px var(--font);color:#7fb2ff;white-space:nowrap}.hc-s b{font-weight:700} #fw #strip .snd-btn{background:#000c;border:1px solid var(--ln);height:28px} #fw #logi{position:absolute;left:auto!important;right:10px;top:8px!important;height:auto!important;max-width:calc(100% - 330px);display:flex!important;flex-wrap:wrap;justify-content:flex-end;align-content:flex-start;gap:4px!important;background:none!important;border:0!important;padding:0!important;overflow:visible!important;white-space:normal!important;z-index:6} #logi .rc{display:flex;align-items:center;gap:5px;background:#000c;border:1px solid var(--ln);padding:3px 8px;font:600 12.5px var(--mono);color:#fff;cursor:pointer;white-space:nowrap} #logi .rc:hover{border-color:#ffffff40}#logi .rc b{font:inherit;color:inherit} #logi .rc small{font:500 10px var(--mono);color:#9fd89a}#logi .rc small.neg{color:#e8a09a} #logi .rc.cash{border-color:#f0c24788}#logi .rc.dia{border-color:#7fb2ff88}#logi .rc.dia b{color:#bfe6ff} #logi .rc em{font:800 11px var(--font);font-style:normal;color:#111;background:var(--ne);padding:0 5px;margin-left:2px} .rs-r{display:grid;grid-template-columns:24px 1fr auto;column-gap:10px;align-items:center;padding:8px 0;border-bottom:1px solid var(--ln)}.rs-r span{font-size:13.5px}.rs-r b{font:700 18px 'Barlow Condensed',var(--mono);color:#fff}.rs-r small{grid-column:2/-1;font-size:11px;color:var(--mu)} @media(max-width:600px){ body{--strip:66px;--logx:0px} .hc{padding:4px 8px 4px 4px;max-width:180px}.hc-pt{width:42px;height:42px}.hc-n b{font-size:12.5px}.hc-p{font-size:15px}.hc-s{font-size:10px} #fw #strip .snd-btn{display:none} #fw #logi{max-width:calc(100% - 200px);right:6px;top:6px!important} #logi .rc{padding:2px 6px;font-size:11.5px}#logi .rc.x,#logi .rc small{display:none} } /* 메뉴 A "제자리로"(2026-10-21 대표 선택): 도구 줄 숨김(기능 연결용 버튼만 남김), 지도 모서리 단추, 수신함, 지휘관 정보 */ #topr{display:none!important} #mapctl{position:absolute;right:10px;top:calc(var(--strip) + var(--warnx,0px) + 8px);z-index:5;display:flex;flex-direction:column;gap:6px} #mapctl button{width:38px;height:38px;display:flex;align-items:center;justify-content:center;background:rgba(10,14,13,.78);border:1px solid rgba(190,205,195,.22);color:#e8e8e2;cursor:pointer;backdrop-filter:blur(6px)} #mapctl button:hover{border-color:#ffffff55}#mapctl button.on{border-color:var(--ne);color:var(--ne)}#mapctl .ti{width:18px;height:18px} #fw.base-open #mapctl,#fw.bm-play #mapctl,#fw.sheet-win #mapctl{display:none} @media(min-width:900px){#fw.card-open #mapctl{right:392px}#fw.sheet-open #mapctl{right:472px}} @media(max-width:900px){#fw.sheet-open #mapctl,#fw.card-open #mapctl{display:none}} #logi .rc em.mkt{background:none;color:var(--ne);border:1px solid #f0c24788;padding:0 4px;font-weight:700} #logi .rc.inbox{position:relative;padding:3px 9px}#logi .rc.inbox .ti{width:16px;height:16px} #logi .ib-n{position:absolute;top:-7px;right:-7px;background:var(--ne);color:#111;font:700 10px/16px var(--mono);min-width:16px;height:16px;padding:0 3px;text-align:center;font-style:normal} .hb-hd{display:flex;gap:12px;align-items:center;margin:4px 0 12px}.hb-hd img,.hb-hd>i{width:72px;height:72px;object-fit:cover;border:1px solid var(--ln);flex:0 0 auto;display:flex;align-items:center;justify-content:center;text-align:center;font:600 11px var(--font);color:var(--mu);font-style:normal;cursor:pointer;background:#ffffff08} .hb-hd .hc-p{font-size:22px} .hb-act{display:flex;gap:8px;margin-bottom:14px}.hb-act .btn{min-height:38px} #sheet.win .wb:has(>.hb-grid){column-count:1} .hb-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px} .hb-grid button{display:flex;flex-direction:column;align-items:flex-start;gap:4px;background:#ffffff08;border:1px solid var(--ln);color:var(--tx);padding:12px;cursor:pointer;text-align:left} .hb-grid button:hover{border-color:#ffffff44;background:#ffffff10}.hb-grid .ti{width:22px;height:22px;color:var(--ne)}.hb-grid b{font:700 15px var(--font)}.hb-grid small{font-size:11px;color:var(--mu)} @media(max-width:600px){.hb-grid{grid-template-columns:repeat(2,1fr)}#mapctl{right:6px}#mapctl button{width:36px;height:36px}} /* 랜드마크 표시(2026-10-21) */ .lmk{position:absolute;transform:translate(-50%,-100%);display:flex;flex-direction:column;align-items:center;pointer-events:none;white-space:nowrap;z-index:2} .lmk>i,.lmk>b{display:inline-flex} .lmk{flex-direction:row;flex-wrap:wrap;justify-content:center;gap:0 4px;background:rgba(10,12,11,.82);border:1px solid #f0c24799;padding:1px 6px;max-width:180px} .lmk i{font-style:normal;color:var(--ne);font-size:11px}.lmk b{font:600 11px var(--font);color:#fff;overflow:hidden;text-overflow:ellipsis;max-width:140px}.lmk small{flex-basis:100%;text-align:center;font:500 9.5px var(--font);color:var(--mu)} .lmk.n{border-color:var(--ne);background:rgba(40,30,8,.86)}.lmk.n b{color:#ffe7a8} .lmk.mine{border-color:#7fb2ff}.lmk.mine i{color:#7fb2ff}.lmk.own{border-color:#e0645a99} .tb-lm{border:1px solid #f0c24766;background:#f0c2470c;padding:6px 10px;margin:6px 0}.tb-lm b{display:block;color:#ffe7a8;font-size:13px}.tb-lm span{font-size:11.5px;color:var(--mu)}.tb-lm i{font-style:normal;color:#7fb2ff} /* 2026-10-22 옆 창 대신 가운데 창(한 단) */ #sheet.win.one{width:min(820px,96vw)}#sheet.win.one .wb{column-count:1!important} /* 2026-10-22 기지 옆 창(건물)이 아래 기지 도구 줄 오른쪽 버튼을 가리던 것 */ @media (min-width:900px){#fw.sheet-open:not(.sheet-win) #hq5 .b5-tools{margin-right:460px}} /* 2026-10-22 다시 보기 중엔 하단 메뉴가 숨으므로 타임라인·사건 기록을 화면 아래에 붙임(메뉴 높이만큼 떠 있던 것) */ #fw.bm-play #bmhud .bm-tl{bottom:12px}#fw.bm-play #bmhud .bm-feed{bottom:64px} /* 2026-10-22 휴대폰 점검: 작은 임무 버튼 옆에 '임무 전체'가 따로 떠 있던 것, 지도 단추가 자원 칩(시장)을 덮던 것 */ #tut.mob-min .tut-all{display:none!important} @media(max-width:600px){#mapctl{top:auto;bottom:calc(var(--bar) + 34px)}} /* 2026-10-22 C안: 영토 카드 큰 버튼(공격하기 등)이 옛 짙은 파랑+회색 글자라 꺼진 버튼처럼 보이던 것 → 흰 주 버튼 */ body.ui-C #card .tb-pri{background:linear-gradient(#c4562a,#8c3314 55%,#6b250e);border-color:#e08a5a;border-bottom-color:#3a1408;color:#fff}body.ui-C #card .tb-pri:hover{background:linear-gradient(#d36236,#9c3a18 55%,#7a2c11)} /* 2026-10-22 우편: 안 읽은 우편이 눈에 띄지 않던 것 */ #sheet .unread{border-left:3px solid var(--ne,#f2d23c)!important;background:#f2d23c10!important;padding-left:8px}#sheet .unread b,#sheet .unread strong{color:#fff} .fx .lk{color:var(--mu);border:1px solid var(--ln);padding:0 4px;font-size:10px} /* 2026-10-22 휴대폰 다시 보기: 타임라인 버튼이 줄바꿈되고 진행 막대가 거의 0폭이던 것, 위 자원 칩과 다시 보기 머리줄이 겹치던 것 */ @media(max-width:600px){ #fw.bm-play #logi{display:none!important} #bmhud .bm-tl{flex-wrap:wrap;gap:6px;padding:6px 8px} #bmhud .bm-track{flex:1 1 100%;order:-1;height:10px} #bmhud .bm-tl button{padding:5px 8px;font-size:11px;white-space:nowrap} #fw.bm-play #bmhud .bm-feed{bottom:96px} } /* 설정 창 막대·체크 상자를 C안 강조색으로(브라우저 기본 파랑이던 것) */ input[type=range],input[type=checkbox],input[type=radio]{accent-color:var(--ne,#f2d23c)} /* 2026-10-22 대표 지적: 다시 보기 중 타임라인이 화면 아래에서 떠 있고, 위에 자원·아이디가 보이던 것 → 전투 화면은 위·아래 끝까지 다시 보기 막대만(소리 버튼은 타임라인 안으로) */ #fw.bm-play #strip,#fw.bm-play #logi,#fw.bm-play #snd-btn{display:none!important} #fw.bm-play #bmhud .bm-tl{left:0;right:0;bottom:0;border-left:0;border-right:0;border-bottom:0} #fw.bm-play #bmhud .bm-top{left:0;right:0;top:0;border-left:0;border-right:0;border-top:0} #fw.bm-play #bmhud .bm-banner{top:80px} #fw.bm-play #bmhud .bm-feed{top:76px;right:0;bottom:52px} @media(max-width:600px){#fw.bm-play #bmhud .bm-feed{bottom:88px;top:auto}} /* ===== 전투 다시 보기 개선(감사 시안 M04, 2026-10-23 대표 "개선 시안대로") ===== */ #bmhud .bm-tl{flex-direction:column;align-items:stretch;gap:6px} #bmhud .bm-ctl{display:flex;align-items:center;gap:8px;flex-wrap:wrap} #bmhud .bm-ctl select{background:#1b2117;border:1px solid var(--ln);color:var(--tx);font:12px var(--mono);padding:5px 6px} #bmhud .bm-ctl #bm-play{min-width:104px;font-weight:700} #bmhud .bm-st{color:var(--ne,#f2d23c);font:700 13px var(--mono);margin-left:6px}#bmhud .bm-tm{font:12px var(--mono);color:var(--tx)}#bmhud .bm-kb{font:11px var(--mono);color:var(--mu)}#bmhud .bm-sp2{flex:1} #bmhud .bm-trow{display:flex;align-items:center;gap:10px}#bmhud .bm-trow .mu{font-size:11px;color:var(--mu);white-space:nowrap} #bmhud .bm-steps{display:flex;gap:6px}#bmhud .bm-steps button{flex:1;display:flex;justify-content:space-between;background:#12160f;border:1px solid var(--ln);color:var(--tx);font:12px var(--mono);padding:6px 10px;cursor:pointer} #bmhud .bm-steps button span{color:var(--mu)}#bmhud .bm-steps button.on{border-color:var(--ne,#f2d23c);background:#2a250f}#bmhud .bm-steps button.on b{color:var(--ne,#f2d23c)} #bmhud .bm-cam{position:absolute;left:12px;top:calc(var(--strip,34px) + 74px);display:flex;border:1px solid var(--ln);background:#0b0f0ae6} #fw.bm-play #bmhud .bm-cam{left:10px;top:80px} #bmhud .bm-cam button{background:transparent;border:0;color:var(--tx);font:12px var(--mono);padding:6px 12px;cursor:pointer}#bmhud .bm-cam button.on{outline:1px solid var(--ne,#f2d23c);outline-offset:-1px;color:var(--ne,#f2d23c);background:#2a250f} #bmhud .bm-side{position:absolute;right:0;top:76px;bottom:132px;width:300px;display:flex;flex-direction:column;background:#0b0f0ad9;border-left:1px solid var(--ln)} #fw.bm-play #bmhud .bm-side .bm-feed,#bmhud .bm-side .bm-feed{position:static;flex:1;width:auto;border:0;border-top:1px solid var(--ln);background:transparent;inset:auto;height:auto} #bmhud .bm-acts{padding:8px 10px;font:12px/1.45 var(--mono)}#bmhud .bm-acts .hd{display:flex;justify-content:space-between;margin-bottom:6px}#bmhud .bm-acts .hd span{color:var(--mu)} #bmhud .bm-acts button{display:grid;grid-template-columns:12px auto 1fr;grid-template-areas:"i tm tm" "i k k" "i d d";column-gap:8px;width:100%;text-align:left;background:transparent;border:0;border-left:1px solid #333;margin-left:5px;padding:2px 0 6px 0;color:var(--tx);cursor:pointer} #bmhud .bm-acts button i{grid-area:i;width:8px;height:8px;border-radius:50%;background:#555;margin:4px 0 0 -5px}#bmhud .bm-acts button .tm{grid-area:tm;color:var(--mu)}#bmhud .bm-acts button b{grid-area:k}#bmhud .bm-acts button .dd{grid-area:d;color:var(--mu)} #bmhud .bm-acts button.on i{background:var(--ne,#f2d23c)}#bmhud .bm-acts button.on .tm,#bmhud .bm-acts button.on b{color:var(--ne,#f2d23c)}#bmhud .bm-acts .ft{color:var(--mu);font-size:11px;margin-top:4px} #bmhud .bm-banner{display:flex;flex-direction:column;align-items:flex-start;text-align:left;gap:2px;min-width:260px;max-width:min(520px,60vw);padding:8px 14px}#bmhud .bm-banner small{font:11px var(--mono);color:var(--mu)}#bmhud .bm-banner b{font:700 16px var(--mono);color:#fff}#bmhud .bm-banner span{font:12px var(--mono);color:#d8d8d0} #bmhud .bm-err{display:none;position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);width:min(380px,90vw);background:#0b0f0af5;border:1px solid #c63b2b;padding:14px 16px;text-align:center;color:var(--tx)}#bmhud .bm-err.on{display:block} #bmhud .bm-err b{display:inline-block;width:28px;height:28px;border-radius:50%;background:#c63b2b;color:#fff;line-height:28px;font-weight:700}#bmhud .bm-err h3{margin:8px 0 4px;font:700 15px var(--mono)}#bmhud .bm-err p{margin:0 0 10px;color:var(--mu);font-size:12.5px} @media(max-width:820px){#bmhud .bm-side{left:0;right:0;width:auto;top:auto;bottom:150px;height:110px;border-left:0;border-top:1px solid var(--ln)}#bmhud .bm-acts{display:none}#bmhud .bm-kb{display:none}#bmhud .bm-steps button{padding:5px 6px;font-size:11px}} @media(max-width:600px){#bmhud .bm-ctl{gap:5px}#bmhud .bm-ctl .bm-tm{order:5}#bmhud .bm-st{font-size:12px}#bmhud .bm-banner{max-width:92vw;min-width:0}#fw.bm-play #bmhud .bm-cam{top:auto;bottom:268px}} /* 확인창 상세형(감사 시안 M01·M03): 작은 머리말·제목·항목 표·안내문 */ #askbox .ak{font:11px var(--mono);color:var(--mu);margin-bottom:4px}#askbox .at{font:700 18px var(--mono);color:#fff;margin-bottom:10px} #askbox .ar{border-top:1px solid var(--ln);margin:6px 0}#askbox .ar div{display:flex;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--ln);font:13px var(--mono)}#askbox .ar span{color:var(--mu)}#askbox .ar b{color:#fff} #askbox .an{font:12px/1.55 var(--mono);color:var(--mu);margin-top:8px} #askbox .row .btn{flex:1} /* 연결 상태(감사 시안 M02) */ #netwarn{position:fixed;left:0;right:0;top:var(--strip,72px);z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;background:#2b2210f2;border-top:1px solid #e2b65c88;border-bottom:1px solid #e2b65c88;padding:8px 16px;color:#f3e2b8;font:12.5px var(--mono)} #netwarn b{display:block;color:#ffd27a;font-size:13.5px}#netwarn .btn{flex:none;padding:7px 16px} body.stale #logi::after{content:'이전 자료';align-self:center;margin-left:6px;padding:2px 6px;border:1px solid #e2b65c;color:#e2b65c;font:11px var(--mono)} body.stale #logi .rc b{opacity:.6} body.stale #card::after{content:'연결이 돌아오면 현재 상태를 다시 확인합니다. 표시 중인 값으로 명령을 보내지 않습니다.';display:block;margin:8px 0 0;padding:8px 10px;border-left:3px solid #e2b65c;background:#2b2210cc;color:#f3e2b8;font:12px/1.5 var(--mono)} body.stale #card button[data-a]:not([data-a="close"]){opacity:.4;pointer-events:none} .chat-st{font:12px var(--mono);color:var(--mu);margin:4px 0}.chat-st.bad{color:#e2b65c} /* 시장(감사 시안 M01) */ .mk-qv{font:12px var(--mono);color:#e2b65c;margin:4px 0 2px}.mk-qv.bad{color:#ff9d93}.mk-note{font:11.5px/1.5 var(--mono);color:var(--mu);margin-top:6px}.mk-dt .mk-at{margin-left:auto;font:11px var(--mono);color:var(--mu);font-style:normal;white-space:nowrap} /* 시설 대기열(감사 시안 M03) */ .fx-q .fq-hd{display:flex;align-items:baseline;gap:8px;margin:10px 0 6px}.fx-q .fq-hd b{font-size:13px}.fx-q .fq-hd span{color:var(--ne,#e2b65c);font-size:12px} .fx-q .fq-now{border:1px solid var(--ln);padding:8px 10px;margin-bottom:6px;font-size:12px}.fx-q .fq-now b{color:#fff}.fx-q .fq-now small{display:block;color:var(--mu);margin-top:3px;line-height:1.5} .fx-q .fx-job{grid-template-columns:44px minmax(0,1fr) auto auto;grid-template-areas:"img n t x" "bar bar bar p";border:1px solid var(--ln);border-top:1px solid var(--ln);padding:8px 10px;margin-bottom:6px;row-gap:6px} .fx-q .fx-job.run{border-left:3px solid var(--ne,#e2b65c)} .fx-q .fx-job>img,.fx-q .fx-job>.fx-op{grid-area:img}.fx-q .fj-n{grid-area:n;min-width:0}.fx-q .fj-n b{display:block;color:#fff}.fx-q .fj-n small,.fx-q .fj-t small{display:block;color:var(--mu);font-size:11px} .fx-q .fj-t{grid-area:t;text-align:right}.fx-q .fj-t b{white-space:nowrap}.fx-q .fj-x{grid-area:x}.fx-q .fx-bar{grid-area:bar}.fx-q .fj-p{grid-area:p;color:var(--mu);font-size:11px;text-align:right} .fx-q .fq-ft{color:var(--mu);font-size:11px;margin-top:2px} @media(max-width:720px){.fx-q .fx-job{grid-template-columns:36px minmax(0,1fr) auto;grid-template-areas:"img n x" "img t t" "bar bar p"}.fx-q .fj-t{text-align:left}} /* 튜토리얼 임무 복구(감사 시안 M05) */ #tut-rec{position:fixed;left:50%;top:calc(var(--strip,72px) + 24px);transform:translateX(-50%);z-index:12;width:min(860px,calc(100vw - 24px));max-height:calc(100vh - var(--strip,72px) - var(--bar,56px) - 48px);overflow:auto;background:#0b0f0af2;border:1px solid var(--ln);box-shadow:0 16px 48px #000c;color:var(--tx);font-family:var(--mono)} #tut-rec .rh{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--ln)}#tut-rec .rh b{font-size:14px;color:#fff}#tut-rec .rh span{color:var(--ne,#e2b65c);font-size:12px;margin-left:auto} #tut-rec .rs{display:grid;grid-template-columns:repeat(3,1fr);margin:0;padding:0;list-style:none;border-bottom:1px solid var(--ln)} #tut-rec .rs li{display:grid;grid-template-columns:24px 1fr;column-gap:10px;padding:10px 16px;border-bottom:2px solid transparent;color:var(--mu)}#tut-rec .rs li i{grid-row:span 2;width:22px;height:22px;border:1px solid var(--mu);display:flex;align-items:center;justify-content:center;font-style:normal;font-size:12px} #tut-rec .rs li b{font-size:13px}#tut-rec .rs li small{font-size:11px}#tut-rec .rs li.on{border-bottom-color:var(--ne,#e2b65c);color:#fff}#tut-rec .rs li.on i{border-color:var(--ne,#e2b65c);color:var(--ne,#e2b65c)}#tut-rec .rs li.ok{color:#9fd3b4} #tut-rec .rg{display:grid;grid-template-columns:240px 1fr;gap:16px;padding:16px} #tut-rec .rl{border:1px solid var(--ln);border-top:2px solid var(--ne,#e2b65c);padding:12px}#tut-rec .rl h3{margin:4px 0 6px;font-size:17px;color:#fff}#tut-rec .rl p{font-size:12px;color:var(--mu);margin:0 0 8px} #tut-rec dl{display:grid;grid-template-columns:auto 1fr;margin:0;font-size:12px}#tut-rec dt,#tut-rec dd{padding:7px 0;border-top:1px solid var(--ln);margin:0}#tut-rec dt{color:var(--mu)}#tut-rec dd{text-align:right;color:#fff;font-weight:700}#tut-rec .rl small{display:block;color:var(--mu);font-size:11px;margin-top:8px} #tut-rec .rk{font-size:11px;color:var(--ne,#e2b65c)}#tut-rec .rm h2{margin:6px 0 8px;font-size:21px;line-height:1.35;color:#fff}#tut-rec .rm p{font-size:13px;color:#d8d8d0;margin:0 0 10px} #tut-rec .rb,#tut-rec .rw{border-left:3px solid var(--ne,#e2b65c);background:#2b2210aa;padding:9px 12px;font-size:12px;line-height:1.55;margin-bottom:12px}#tut-rec .rb b,#tut-rec .rw b{display:block;color:#fff} #tut-rec .rj{display:flex;justify-content:space-between;border:1px solid var(--ln);padding:8px 10px;margin-bottom:8px;font-size:12.5px}#tut-rec .rj span{color:var(--mu)} #tut-rec .rbt{display:flex;gap:8px}#tut-rec .rbt .btn.pri{flex:1;padding:11px}#tut-rec .rf{display:block;color:var(--mu);font-size:11px;margin-top:8px} @media(max-width:700px){#tut-rec .rg{grid-template-columns:1fr}#tut-rec .rl{display:none}#tut-rec .rs li small{display:none}#tut-rec .rm h2{font-size:17px}} #bmhud .bm-ctl select{width:auto!important;flex:none!important;min-width:0;max-width:110px;height:auto;margin:0} .fx-q .fj-x img{width:14px!important;height:14px!important}.fx-q .fj-x{display:flex;align-items:center;gap:4px;white-space:nowrap} /* ===== 스토리 연출(2026-10-25, story-fx.js) ===== */ .sfx-stage{position:absolute;inset:0;overflow:hidden;opacity:0;transition:opacity .8s ease;pointer-events:none;background:#050605}.sfx-stage.on{opacity:1} .sfx-bg,.sfx-vid{position:absolute;inset:-2%;background-size:cover;background-position:center;width:104%;height:104%;object-fit:cover;will-change:transform} .sfx-vid{opacity:0;transition:opacity 1.2s ease}.sfx-vid.on{opacity:1} .kb-in{animation:kbIn 18s ease-out forwards}.kb-out{animation:kbOut 18s ease-out forwards}.kb-pan{animation:kbPan 20s ease-in-out forwards} @keyframes kbIn{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-1.5%,-1%)}} @keyframes kbOut{from{transform:scale(1.14) translate(1%,1%)}to{transform:scale(1.03) translate(0,0)}} @keyframes kbPan{from{transform:scale(1.10) translate(2.5%,0)}to{transform:scale(1.10) translate(-2.5%,-.5%)}} .sfx-cv{position:absolute;inset:0;width:100%;height:100%} .sfx-vig{position:absolute;inset:0;background:radial-gradient(ellipse at center,transparent 55%,#000a 100%),linear-gradient(#000 0,#0000 9%,#0000 91%,#000 100%)} .sfx-grain{position:absolute;inset:-50%;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1.2s steps(6) infinite} @keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-1%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}} .sfx-fog{position:absolute;left:-30%;right:-30%;top:30%;height:60%;background:radial-gradient(ellipse at 30% 50%,#c8d0d822,transparent 60%),radial-gradient(ellipse at 75% 60%,#c8d0d81a,transparent 55%);filter:blur(6px);animation:fog 38s linear infinite alternate}.sfx-fog.b{top:50%;animation-duration:52s;animation-direction:alternate-reverse;opacity:.8} @keyframes fog{from{transform:translateX(-8%)}to{transform:translateX(8%)}} .sfx-flick{position:absolute;width:22%;aspect-ratio:1;transform:translate(-50%,-50%);background:radial-gradient(circle,color-mix(in srgb,var(--c) 45%,transparent) 0,transparent 60%);mix-blend-mode:screen;animation:flick 3.4s infinite} @keyframes flick{0%,100%{opacity:.75}8%{opacity:.45}10%{opacity:.85}38%{opacity:.6}40%{opacity:.9}70%{opacity:.7}72%{opacity:.35}74%{opacity:.8}} .sfx-scr{position:absolute;left:30%;top:30%;width:40%;height:40%;background:radial-gradient(ellipse,#7dffb022,transparent 65%);mix-blend-mode:screen;animation:flick 1.6s infinite} .sfx-heli{position:absolute;top:18%;left:-30%;width:22%;height:12%;background:radial-gradient(ellipse,#000d 0,#0008 35%,transparent 68%);filter:blur(5px);animation:heli 9s ease-in-out 1.2s forwards} @keyframes heli{from{transform:translate(0,0)}to{transform:translate(560%,140%)}} .sfx-jolt{animation:jolt .45s ease}.sfx-jolt::after{content:'';position:absolute;inset:0;background:#fff;opacity:0;animation:flash .45s ease;pointer-events:none} @keyframes jolt{0%,100%{transform:translate(0,0)}20%{transform:translate(-6px,3px)}40%{transform:translate(5px,-4px)}60%{transform:translate(-3px,2px)}80%{transform:translate(2px,-1px)}} @keyframes flash{0%{opacity:.35}100%{opacity:0}} .sfx-caret{display:inline-block;width:.5em;border-bottom:2px solid currentColor;margin-left:2px;animation:caret .8s steps(2) infinite}@keyframes caret{50%{opacity:0}} #tut-pro{background:#050605!important}#tut-pro .in{position:relative;z-index:2}#tut-pro .in .t{text-shadow:0 2px 12px #000,0 0 2px #000;min-height:4.8em} #tut-cut .pic{position:relative;overflow:hidden}#tut-cut .pic>span{position:relative;z-index:2} @media (prefers-reduced-motion:reduce){.sfx-grain,.sfx-fog,.sfx-flick,.sfx-heli,.sfx-scr{display:none}} #tut-dlg .face.in{animation:faceIn .4s ease}@keyframes faceIn{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}} /* 스토리 넘김 버튼 = 글자 버튼(2026-10-25 대표 "버튼도 신경써", "차라리 텍스트 버튼") — 상자 없이 글자·화살표·밑줄, Enter·Space로도 넘김 */ .sfx-nx{background:none!important;border:0!important;box-shadow:none!important;padding:8px 4px;min-height:38px;display:inline-flex;align-items:center;gap:9px;position:relative;cursor:pointer;color:#f4f3ef;font:600 15px/1 'Barlow Condensed',var(--font);letter-spacing:.16em;text-shadow:0 1px 6px #000} .sfx-nx span{position:relative} .sfx-nx span::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:var(--ne,#f0c247);transform:scaleX(.3);transform-origin:left;transition:transform .25s ease} .sfx-nx:hover span::after,.sfx-nx:focus-visible span::after{transform:scaleX(1)} .sfx-nx i{font:400 22px/1 var(--font);color:var(--ne,#f0c247);font-style:normal;margin-top:-2px;animation:nxGo 1.3s ease-in-out infinite} .sfx-nx:hover i{animation-duration:.7s} .sfx-nx kbd{font:500 10px/1 var(--font);letter-spacing:0;color:#9d9b92;border:1px solid #ffffff2e;padding:3px 5px;margin-left:2px} .sfx-nx:focus{outline:none}.sfx-nx:focus-visible{outline:1px solid #ffffff55;outline-offset:2px} .sfx-nx:active{transform:translateY(1px)} @keyframes nxGo{0%,100%{transform:translateX(0);opacity:.75}50%{transform:translateX(4px);opacity:1}} #tut-pro .sfx-nx{font-size:17px}#tut-pro .sfx-nx i{font-size:26px} @media(hover:none){.sfx-nx kbd{display:none}} @media(prefers-reduced-motion:reduce){.sfx-nx i{animation:none}} /* 전략 미사일(2026-10-29): 효과 캔버스·화면 흔들림·번쩍임·결과 배너 */ #mslcv{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:6} #msl-flash{position:absolute;inset:0;pointer-events:none;z-index:8;opacity:0}#msl-flash.on{animation:mslflash .9s ease-out} @keyframes mslflash{0%{opacity:1}100%{opacity:0}} #fw.msl-shake{animation:mslshake .9s cubic-bezier(.36,.07,.19,.97)} @keyframes mslshake{10%,90%{transform:translate(-2px,1px)}20%,80%{transform:translate(5px,-3px)}30%,50%,70%{transform:translate(-9px,4px)}40%,60%{transform:translate(9px,-5px)}} #msl-ban{position:absolute;left:50%;top:18%;transform:translate(-50%,0);max-width:80%;padding:12px 22px;background:linear-gradient(180deg,#000d,#000a);border:1px solid #ffffff22;border-left:3px solid currentColor;font:700 17px/1.4 var(--font);letter-spacing:.02em;z-index:9;pointer-events:none;opacity:0;text-align:center;text-shadow:0 0 12px currentColor} #msl-ban.on{animation:mslban 6.5s ease-out} @keyframes mslban{0%{opacity:0;transform:translate(-50%,-14px) scale(1.12)}6%{opacity:1;transform:translate(-50%,0) scale(1)}85%{opacity:1}100%{opacity:0}} /* 미사일 경보·발사 연출(2026-10-30 대표 지적) */ #fw.msl-red::after{content:"";position:absolute;inset:0;z-index:8;pointer-events:none;box-shadow:inset 0 0 120px 30px rgba(255,30,20,.55);animation:mslred 1s ease-in-out infinite} @keyframes mslred{0%,100%{opacity:.25}50%{opacity:1}} #msl-alert{position:absolute;left:50%;top:9%;transform:translateX(-50%);z-index:9;pointer-events:none;text-align:center;padding:14px 34px 12px;background:linear-gradient(180deg,rgba(60,0,0,.88),rgba(20,0,0,.78));border:1px solid rgba(255,80,70,.7);border-top:3px solid #ff3b30;color:#ffd9d6;min-width:300px;max-width:92%;animation:mslalpulse 1s steps(2,end) infinite} #msl-alert .a1{font:800 30px/1.1 "Barlow Condensed",var(--font);letter-spacing:.14em;color:#ff5a4f;text-shadow:0 0 16px #ff1f10} #msl-alert .a2{font:600 14px/1.4 var(--font);margin-top:4px} #msl-alert .a3{font:800 44px/1.1 "Barlow Condensed",var(--font);letter-spacing:.06em;margin:4px 0 2px;color:#fff} #msl-alert .a4{font:500 11.5px/1.3 var(--font);opacity:.75} #msl-alert.nuke{background:linear-gradient(180deg,rgba(80,40,0,.92),rgba(30,10,0,.85));border-color:#ffd24a;border-top-color:#ffd24a} #msl-alert.nuke .a1{color:#ffd24a;text-shadow:0 0 18px #ff9a00} @keyframes mslalpulse{0%{box-shadow:0 0 0 rgba(255,60,50,0)}50%{box-shadow:0 0 32px rgba(255,60,50,.8)}} #msl-seq{position:absolute;left:50%;top:82%;transform:translate(-50%,-50%);z-index:9;pointer-events:none;text-align:center} #msl-seq .s1{font:800 40px/1 "Barlow Condensed",var(--font);letter-spacing:.16em;color:#fff;text-shadow:0 0 20px #ffb04a;animation:mslseq .65s ease-out} #msl-seq .s1.go{color:#ff6a4a;font-size:52px;text-shadow:0 0 28px #ff2a10} #msl-seq .s2{font:600 14px var(--font);color:#ffe2b8;margin-top:6px;letter-spacing:.1em} @keyframes mslseq{0%{opacity:0;transform:scale(1.5)}30%{opacity:1}100%{opacity:1;transform:scale(1)}} #msl-chip{position:absolute;right:14px;top:252px;z-index:9;background:rgba(10,10,10,.78);border:1px solid rgba(255,176,74,.75);color:#ffd88a;font:700 12.5px/1.2 sans-serif;padding:9px 12px;border-radius:6px;cursor:pointer;pointer-events:auto;max-width:210px;text-align:left} #msl-chip:hover{background:rgba(40,28,10,.9)} #fw.bm-play #msl-chip{display:none} /* 3D 기지 시안(r113, 2026-10-31): 건물 그림은 누르지 않고 부지 마름모(.hit3)로 누른다. 2D 전용 움직임·하늘 층은 숨김 */ #b5-stage.v3d #b5-amb,#b5-stage.v3d #b5-sky{display:none} #b5-fg .b3>img{pointer-events:none!important;filter:none} #b5-fg .b3 .hit3{position:absolute;pointer-events:auto;cursor:pointer;background:transparent} #b5-fg .b3.sel>img{filter:drop-shadow(0 0 8px #6fa8dc) drop-shadow(0 0 3px #6fa8dc)!important} #b5-fg .b3.dmg>img{filter:sepia(.5) saturate(1.5) hue-rotate(-20deg) brightness(.8)!important} #b5-fg .b3.cons>img{opacity:.55} #b5-fg .m5-s.b3.open>img{opacity:.42;filter:grayscale(1) brightness(1.25) sepia(.3) hue-rotate(170deg) saturate(1.6)!important;animation:b5ghost 2.4s ease-in-out infinite} #b5-fg .m5-s.b3.lock>img{opacity:.22;filter:grayscale(1) brightness(1.1)!important} #b5-fg .b3 .hit3:hover{background:#6fa8dc22} #b5-veh3{position:absolute;inset:0;pointer-events:none}#b5-stage:not(.v3d) #b5-veh3{display:none} #b5-veh3 .v3{position:absolute;left:0;top:0;pointer-events:none;will-change:transform;transition:opacity .4s} #b5-veh3 .v3sh{position:absolute;border-radius:50%;background:radial-gradient(#0006,#0000 70%);pointer-events:none} /* 3D 기지: 배경(숲·들판)은 한 톤 낮추고 가장자리를 어둡게, 건물은 또렷하게(2026-11-01 대표 지적 "배경이 더 강조돼 있다") */ #b5-stage.v3d #b5-bg img{filter:brightness(.78) saturate(.8) contrast(.94)} #b5-stage.v3d #b5-bg::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 46% 50% at 50% 52%,rgba(0,0,0,0) 52%,rgba(0,0,0,.55) 100%)} #b5-fg .b3:not(.open):not(.lock)>img{filter:saturate(1.18) contrast(1.08) brightness(1.06)} /* ===== UI C안 확정(2026-11-01 대표 선택, 시안 /decide-ui-pack/): 금속 틀 + 어두운 본문 + 녹슨 주황 주 버튼 — 구매한 MilitaryUI ===== */ body.ui-C{--metal:#7a665b;--metal-d:#3a2f2a;--ne:#e3a24a} body.ui-C #logi .rc{background:#0b0b0cdd;border:1px solid var(--metal);border-bottom-color:var(--metal-d);border-radius:0} body.ui-C #sheet,body.ui-C #card{background:linear-gradient(#0b0b0cf0,#111112f5),url(/assets/sprites/ui2/metal-v1.jpg) center/512px;border:2px solid var(--metal);outline:1px solid #000;box-shadow:0 8px 24px #000a} body.ui-C #sheet .top{background:linear-gradient(#2a2523,#16120f);border-bottom:1px solid var(--metal);padding:8px 12px;margin:0 0 10px} body.ui-C #sheet .top .h{color:#f3d9b5;font:800 24px/1 'Barlow Condensed',var(--font)} /* 버튼 그림을 늘려 붙이면 크기마다 찌그러진다(2026-11-01 대표 지적) → 그림 없이 CSS 금속 질감 */ body.ui-C .btn{background:linear-gradient(#5d5651,#3b3633 55%,#2b2724);border:1px solid #7a665b;border-bottom-color:#1c1816;border-radius:2px;color:#eee;text-shadow:0 1px 2px #000;font-weight:700;box-shadow:inset 0 1px 0 #ffffff22,0 1px 0 #000} body.ui-C .btn:hover{background:linear-gradient(#6a625c,#443e3a 55%,#322d29)} body.ui-C .btn:active{transform:translateY(1px);box-shadow:inset 0 2px 4px #000a} body.ui-C .btn.pri{background:linear-gradient(#c4562a,#8c3314 55%,#6b250e);border-color:#e08a5a;border-bottom-color:#3a1408;color:#fff} body.ui-C .btn.pri:hover{background:linear-gradient(#d36236,#9c3a18 55%,#7a2c11)} body.ui-C .btn.hot{background:#2a0f0c;border:1px solid #c0392b;color:#ffb3a8} body.ui-C .btn:disabled,body.ui-C .btn[disabled]{opacity:.45;filter:grayscale(.6)} body.ui-C #bar{background:linear-gradient(#0b0b0cee,#0b0b0cf6),url(/assets/sprites/ui2/metal-v1.jpg) center/512px;border-top:2px solid var(--metal)} body.ui-C #bar button.on::after{background:var(--ne)} body.ui-C .seg .on{box-shadow:inset 0 -2px 0 var(--ne)} /* 상점·경매장 카드 개편(2026-11-01 대표 지시) */ .sh-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:10px} .sh-c{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-areas:"ic i" "b b";gap:10px 12px;border:1px solid var(--ln);background:linear-gradient(#ffffff0a,#ffffff04);padding:12px} .sh-ic{grid-area:ic;width:48px;height:48px;border:1px solid var(--ln);display:flex;align-items:center;justify-content:center;color:var(--ne);background:#00000040} .sh-i{grid-area:i;min-width:0}.sh-i b{display:block;font:700 16px var(--font);color:#fff;margin-bottom:3px}.sh-i span{display:block;font-size:12px;color:var(--mu);line-height:1.45}.sh-i input{width:100%;margin-top:8px}.sh-i small{display:block;margin-top:6px;font-size:11px} .sh-b{grid-area:b;display:flex;align-items:center;justify-content:space-between;gap:10px;border-top:1px solid var(--ln);padding-top:10px} .sh-pr{display:flex;align-items:center;gap:6px}.sh-pr b{font:700 22px 'Barlow Condensed',var(--mono);color:#fff} .sh-b .btn{min-width:110px;min-height:38px} .sh-lg{display:grid;grid-template-columns:110px 1fr auto;gap:8px;font-size:12px;padding:6px 0;border-bottom:1px solid #ffffff0d;color:var(--mu)}.sh-lg b{color:var(--tx);font-weight:600}.sh-lg em{font-style:normal;color:#fff;display:flex;align-items:center;gap:4px} .sh-pk{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px} .sh-p{border:1px solid var(--ln);background:linear-gradient(#ffffff0a,#ffffff04);padding:16px 12px;display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center} .sh-p em{font:700 12px var(--font);font-style:normal;letter-spacing:.1em;color:var(--mu)}.sh-p b{display:flex;align-items:center;gap:6px;font:700 30px 'Barlow Condensed',var(--mono);color:#fff}.sh-p span{font-size:11.5px;color:var(--mu)}.sh-p .btn{width:100%;min-height:40px;margin-top:4px} .sh-p.동{box-shadow:inset 0 3px 0 #b87333}.sh-p.은{box-shadow:inset 0 3px 0 #c0c6cc}.sh-p.금{box-shadow:inset 0 3px 0 #e3b341} .au-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:0 0 10px}.au-sum>div{border:1px solid var(--ln);background:#ffffff08;padding:8px 12px}.au-sum em{display:block;font:600 11px var(--font);font-style:normal;color:var(--mu)}.au-sum b{display:flex;align-items:center;gap:6px;font:700 22px 'Barlow Condensed',var(--mono);color:#fff}.au-sum small{font-size:12px;color:var(--mu)} .au-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px;margin-top:10px} .au-grid .au-c{display:flex;flex-direction:column;gap:8px;border:1px solid var(--ln);background:linear-gradient(#ffffff0a,#ffffff04);padding:0 0 10px;box-shadow:none} .au-grid .au-c.lead{border-color:#7fb2ff99}.au-grid .au-c.mine{border-color:#e3a24a99} .au-grid .au-p{position:relative;width:100%;height:108px;border:0;border-bottom:1px solid var(--ln);background:#00000040}.au-grid .au-p img{height:100%}.au-grid .au-p svg{width:44px;height:44px} .au-t{position:absolute;right:6px;top:6px;font:600 11.5px var(--mono);background:#000a;border:1px solid var(--ln);padding:2px 7px;color:var(--tx)}.au-t.soon{color:#ffd27a;border-color:#ffd27a88}.au-t.urgent{color:#ff9c8f;border-color:#ff9c8f99} .au-tag{position:absolute;left:6px;top:6px;font:700 11px var(--font);padding:2px 7px;background:#000a;border:1px solid}.au-tag.lead{color:#7fb2ff}.au-tag.mine{color:#e3a24a} .au-grid .au-i,.au-grid .au-v,.au-grid .au-a{padding:0 12px}.au-grid .au-i b{font-size:15px} .au-grid .au-v{display:flex;gap:18px;text-align:left}.au-grid .au-v b{display:flex;align-items:center;gap:5px} .au-grid .au-a{display:flex;flex-direction:column;align-items:stretch;gap:6px;margin-top:auto}.au-bi{display:grid;grid-template-columns:minmax(0,1fr) 84px;gap:6px}.au-bi input{width:100%;min-width:0}.au-grid .au-a .btn{min-height:36px;width:100%}.au-a small{font-size:11px} @media(max-width:700px){.sh-pk{grid-template-columns:1fr}.au-sum{grid-template-columns:repeat(2,minmax(0,1fr))}.sh-lg{grid-template-columns:1fr auto}.sh-lg span{display:none}} /* 창 공통 정리(2026-11-01 전수조사): 닫기·작은 버튼 높이, 탭 전환 때 창 높이가 널뛰지 않게 */ #sheet.win .top .btn,#sheet .top .btn{min-height:34px;padding:6px 16px} #sheet.win.one .wb{min-height:320px} .fu-s .btn,.fu-cb .btn,.fu-gt .btn{min-height:34px} .mk-win button{min-height:30px;padding:4px 12px} #sheet.win.one .wb:has(.sh-grid),#sheet.win.one .wb:has(.sh-pk){min-height:430px} /* 행동력(2026-11-01 대표 지시) */ #logi .rc.ap{color:#f0c247;cursor:pointer}#logi .rc.ap .apic{color:#f0c247;flex:none}#logi .rc.ap small{color:var(--mu)}#logi .rc.ap em{font-style:normal;font-size:10.5px;border:1px solid #f0c24788;padding:0 5px;margin-left:4px;color:#f0c247} #logi .rc.ap em{background:none;font-weight:700} /* 주황 바탕 위에 주황 글자라 '충전'이 안 보이던 것(2026-11-02 대표 지적) */ #logi .rc.ap small{color:#d6d8c8} #logi .rc.ap.zero,#logi .rc.ap.zero b{color:#ff9c8f}#logi .rc.ap.zero .apic{color:#ff9c8f} .ap-note{margin-top:10px;padding:8px 12px;border:1px solid var(--ln);background:#ffffff08;font-size:12.5px;color:var(--mu)}.ap-note b{color:#f0c247}.ap-note.zero{border-color:#ff9c8f88;color:#ff9c8f}.ap-note a{color:#f0c247;text-decoration:underline;cursor:pointer} /* 2026-11-02 휴대폰 화면 점검: 기지 위쪽 줄이 행동력·다이아 칩과 겹침, 임무 버튼이 기지 도구를 가림, 시장 수량 줄 글자가 세로로 쪼개짐 */ .mk-q span,.mk-q .btn{white-space:nowrap;flex:none} .mk-q input{width:auto;flex:1 1 70px;min-width:0;max-width:110px} @media (max-width:600px){ #hq5 .b5-title,#hq5 .b5-stat{max-width:calc(100% - 235px);overflow:hidden} #hq5 .b5-title,#hq5 .b5-stat{white-space:normal;overflow:visible} /* 잘라내지 않고 줄바꿈: '지휘관센터 Lv.4' 가 안 보이던 것(2026-11-02) */ #hq5 .b5-stat{flex-wrap:wrap} .mk-n b{white-space:normal;overflow:visible;text-overflow:clip;line-height:1.25} /* 시장 품목 이름 줄바꿈(5.56mm 소… 로 잘리던 것) */ #logi .rc em.mkt{display:inline-flex;align-items:center;min-height:26px;padding:0 9px} /* 시장 칩 누르는 면적 */ #fw.base-open #tut.fold{bottom:auto;top:calc(var(--strip) + var(--logx,0px) + var(--warnx,0px) + 90px);left:auto;right:8px} /* 접힌 '임무 ▸' 칩도 기지 화면에서는 아래 도구 버튼을 가리지 않게 오른쪽 위로(2026-11-02 점검) */ } /* 출격 창: 행동력 안내·출격 버튼을 창 아래에 고정 */ .so-foot{position:sticky;bottom:0;z-index:2;margin:10px -2px 0;padding:2px 2px 8px;background:linear-gradient(180deg,#0000,#0b0d0acc 18%,#0b0d0a)} .so-foot .ap-note{margin-top:4px} /* 영토 카드 작은 버튼: 아이콘과 글자가 칸으로 갈라져 세 줄이 되던 것 → 한 줄 */ .tb-sec .btn{display:block;text-align:center;line-height:1.3;min-height:44px} .tb-sec .btn .ico{display:inline-block;vertical-align:-2px;margin:0 3px} .tb-sec .btn{display:block!important} /* 가입 약관 동의 · 약관 보기 (2026-11-02) */ #auth .agree{display:grid;gap:5px;padding:8px 10px;border:1px solid var(--ln);background:#0c0f12;font:500 12px var(--font);color:var(--tx)} #auth .agree label{display:flex;align-items:center;gap:7px;cursor:pointer;line-height:1.4}#auth .agree input{width:16px;height:16px;margin:0;accent-color:var(--ne,#e3a24a);flex:none} #auth .agree .ag-all{padding-bottom:6px;margin-bottom:2px;border-bottom:1px solid var(--ln)}#auth .agree em{font-style:normal;color:var(--ne,#e3a24a);font-weight:600} #auth .tl{background:none;border:0;padding:0 2px;color:var(--mu);font:inherit;text-decoration:underline;cursor:pointer;margin-left:auto}#auth .agree .tl{margin-left:auto} #auth .tl-row{display:flex;justify-content:center;gap:6px;align-items:center}#auth .tl-row .tl{margin:0;color:var(--mu)} .terms-pop{position:absolute;inset:0;z-index:40;background:#000b;display:flex;align-items:center;justify-content:center;padding:12px} .terms-pop .tp-box{width:min(640px,100%);max-height:100%;display:flex;flex-direction:column;background:var(--bgp);border:1px solid var(--ln)} .terms-pop .tp-h{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--ln)}.terms-pop .tp-h b{font:700 16px var(--font);flex:1}.terms-pop .tp-v{font:500 11px var(--mono);color:var(--mu)} .terms-pop .tp-b{padding:12px 16px 18px;overflow:auto;font:400 13px/1.7 var(--font);color:var(--tx)}.terms-pop .tp-b h4{margin:14px 0 4px;font:700 13.5px var(--font)}.terms-pop .tp-b p,.terms-pop .tp-b ol{margin:4px 0}.terms-pop .tp-b ol{padding-left:20px}.terms-pop .tp-b li{margin:2px 0}