/* 요청 A·12~15 — 남은 화면 정리 (표시만 바꾼다. 기능·data-a·서버는 그대로)
   원칙: 한 화면에 안쪽 스크롤은 많아야 1개, 나머지는 페이지가 내려간다. 확인 단추는 가려지지 않게. */

/* ── 요청 15 [C] 레이드 (PC) ─────────────────────────────
   목록·참가 조건·상세가 각자 안쪽 스크롤(3겹)이라 «부대 모집» 단추가 잘려 있었다.
   → 목록·참가 조건은 내용 높이 그대로, 오른쪽 상세 하나만 화면 높이에 맞춰 안쪽 스크롤(위에 붙어 따라옴). */
@media (min-width:901px){
 .phase1-ui #app#app .p1-main .desktop-raid-workspace{height:auto!important;min-height:0!important;grid-template-rows:auto auto!important;align-items:start!important}
 .phase1-ui #app#app .p1-main .desktop-raid-workspace>.ui-master-list,
 .phase1-ui #app#app .p1-main .desktop-raid-workspace>.review-panel{overflow:visible!important;max-height:none!important;height:auto!important}
 .phase1-ui #app#app .p1-main .desktop-raid-workspace>.ui-detail{grid-column:2;grid-row:1 / span 2;position:sticky;top:calc(var(--p1-header,64px) + 12px);max-height:calc(100dvh - var(--p1-header,64px) - 28px)!important;height:auto!important;overflow-y:auto!important;scrollbar-width:thin}
}

/* ── 요청 12 [A] 본부(PC) — 전역 상황판이 아주 길게 늘어나 옆 칸이 텅 비던 것 ──
   상황판 글 목록은 화면 높이의 40%(최대 380px)까지만, 넘치는 건 상황판 안에서 내려 본다(이 화면 유일한 안쪽 스크롤).
   상황판 판은 오른쪽 칸 폭을 다 쓴다. */
@media (min-width:901px){
 .phase1-ui #app#app .hqpc-bottom{align-items:start!important}
 .phase1-ui #app#app .hqpc-bottom>.hqpc-feed>.panel{flex:1 1 auto;width:100%;max-width:none}
 .phase1-ui #app#app .hqpc-bottom>.hqpc-feed .panel-b>.log{max-height:min(40vh,380px)!important;overflow-y:auto!important;scrollbar-width:thin}
}

/* ── 요청 13 [A][B] 시장 카드 — 수치가 «이름 / 값» 세로로 길게 늘어서 알아보기 힘들던 것 ──
   수치는 같은 순서의 작은 칸(이름 위·값 아래)으로 한 줄에 나란히, 값은 꺾이지 않게.
   «착용중» 같은 상태는 칸 대신 줄 전체 띠로. 카드 틀·단추·data-a 는 그대로. */
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats{display:flex!important;flex-wrap:wrap!important;gap:4px!important;margin:8px 0!important}
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats>div{display:flex!important;flex-direction:column!important;flex:1 1 auto;gap:1px;min-width:62px;max-width:100%;padding:5px 7px!important;border:1px solid #3b3a33;background:#161612;margin:0!important}
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats>div>span{font-size:11px!important;line-height:1.3;color:#9a927c;white-space:nowrap}
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats>div>b{font-size:14px!important;line-height:1.25;color:#e8dcb5;white-space:normal;word-break:keep-all;overflow-wrap:anywhere;font-variant-numeric:tabular-nums}
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats>div:has(>span:empty){flex-basis:100%;flex-direction:row!important;justify-content:center;border-color:#5a5440;background:rgba(232,220,181,.06)}
.phase1-ui #app#app .shop-preview-product .shop-preview-rowstats>div:has(>span:empty)>b{font-size:12.5px!important}

/* ── 요청 13 [C][D] 시장 분류 띠(각인 재설정 등 가로 띠) — «보급» 단추의 그림이 60px로 커져 글자를 덮던 것 ── */
.phase1-ui #app#app .tabs.cattabs>.tab{display:inline-flex!important;align-items:center;gap:6px}
.phase1-ui #app#app .tabs.cattabs>.tab>img.ico{width:20px!important;height:20px!important;max-height:20px!important;object-fit:contain;flex:none;margin:0!important}

/* ── 요청 14 [D] 도감 ──
   분류 단추: 높이 32px 고정이라 «0/22» 와 진행 막대가 단추 밖으로 삐져나오던 것 → 내용 높이.
   미획득 칸: «??? / ???» 만 있어 빈 칸처럼 보이던 것 → 가운데 흐린 실루엣(?) + «미획득» 글자. */
.phase1-ui #app#app .cxtabs>.cxtab{height:auto!important;min-height:44px!important;flex-direction:column!important;align-items:flex-start!important;justify-content:center;gap:2px;padding:6px 12px!important;line-height:1.25}
.phase1-ui #app#app .cxtabs>.cxtab>.bar{width:100%;margin-top:2px}
.phase1-ui #app#app .ui-gallery-list .ui-list-item.missing[data-v^="codex:"]{display:flex!important;align-items:center;justify-content:center;text-align:center}
.phase1-ui #app#app .ui-gallery-list .ui-list-item.missing[data-v^="codex:"]>div{display:flex;flex-direction:column;align-items:center;gap:4px;opacity:.85}
.phase1-ui #app#app .ui-gallery-list .ui-list-item.missing[data-v^="codex:"]>div::before{content:'?';display:grid;place-items:center;width:40px;height:40px;border:1px dashed #4a483f;color:#5f5a4c;font-size:20px;font-weight:400;font-synthesis:none}
.phase1-ui #app#app .ui-gallery-list .ui-list-item.missing[data-v^="codex:"]>div::after{content:'미획득';font-size:11px;color:#8d8670;letter-spacing:.04em}
.phase1-ui #app#app .ui-gallery-list .ui-list-item.missing[data-v^="codex:"]>div>span{display:none!important}

/* ── 요청 14 [A] 순위 — 내 줄이 옅은 배경뿐이라 잘 안 보이던 것 → 베이지 테두리 (표·폰 카드 둘 다) ── */
.phase1-ui #app#app table.grid tr[style*="209,155,52"]{outline:1px solid #e8dcb5;outline-offset:-1px}
.phase1-ui #app#app table.grid tr[style*="209,155,52"] .csname{color:#e8dcb5}

/* ── 요청 15 [A] 계약 게시판 띠(이번 주 변수 등) — 좁은 폭에서 설명이 «…» 로 잘리던 것 → 줄바꿈 ── */
@media (max-width:1100px){
 .phase1-ui #app#app .boardbar .bb-s{white-space:normal!important;text-overflow:clip!important;overflow:visible!important;max-width:none!important;word-break:keep-all}
}

/* ── 요청 12 [B] 능력치 줄 — 설명(«신뢰성 +3 / 조달 −3%»)이 칸 절반에서 «…» 로 잘리던 것 → 두 줄까지 허용 ── */
.phase1-ui #app#app .statrow{flex-wrap:wrap}
.phase1-ui #app#app .statrow .sd{white-space:normal!important;overflow:visible!important;text-overflow:clip!important;max-width:60%!important;line-height:1.3;word-break:keep-all}

/* ── 요청 12 [F] 무전 서랍(PC) — 열려 있을 때 뒤 화면과 구분이 안 돼 겹쳐 보이던 것 → 뒤를 어둡게(그림자만, 눌림·닫기 동작은 그대로) ── */
@media (min-width:901px){
 .phase1-ui #app#app aside.col.chat.drawer{box-shadow:0 0 0 100vmax rgba(0,0,0,.42),-8px 0 24px rgba(0,0,0,.5)}
}

/* ── 계약 정렬 (새 기능, 화면에서만 정렬) ──
   폰: «필터 열기» 옆 빈자리에 «정렬 · 지금 기준 ▾» 단추, 누르면 6가지 목록.
   PC: «계약 목록 (N)» 머리 줄 오른쪽에 정렬 단추 줄. 위쪽 도구 줄의 정렬 고르기 상자는 감춘다(검색 칸은 그대로). */
.phase1-ui #app#app .ecs-row{display:flex;align-items:stretch;justify-content:space-between;gap:10px;margin-bottom:8px}
.phase1-ui #app#app .ecs-row>.ec-bftoggle{margin:0!important;flex:0 0 auto}
.phase1-ui #app#app .ecs-wrap{position:relative;flex:0 1 auto;min-width:0}
.phase1-ui #app#app .ecs-btn{display:flex;align-items:center;gap:8px;height:100%;min-height:44px;padding:0 14px;background:#1b1b17;border:1px solid #3b3a33;color:#c9bfa5;font:inherit;font-size:14px;border-radius:0;cursor:pointer;white-space:nowrap}
.phase1-ui #app#app .ecs-btn small{color:#8d8574;font-size:12px}
.phase1-ui #app#app .ecs-btn b{color:#e8dcb5;font-weight:600;overflow:hidden;text-overflow:ellipsis}
.phase1-ui #app#app .ecs-btn i{font-style:normal;color:#8d8574;font-size:11px}
.phase1-ui #app#app .ecs-btn[aria-expanded="true"]{border-color:#e8dcb5}
.phase1-ui #app#app .ecs-menu{position:absolute;right:0;top:calc(100% + 4px);z-index:60;min-width:200px;background:#161612;border:1px solid #3b3a33;box-shadow:0 12px 30px rgba(0,0,0,.6)}
.phase1-ui #app#app .ecs-menu>button{display:flex;justify-content:space-between;align-items:center;width:100%;min-height:44px;padding:0 14px;background:none;border:0;border-bottom:1px solid #26251f;color:#c9bfa5;font:inherit;font-size:14px;text-align:left;border-radius:0;cursor:pointer}
.phase1-ui #app#app .ecs-menu>button:last-child{border-bottom:0}
.phase1-ui #app#app .ecs-menu>button.on{color:#e8dcb5;background:#22211b}
.phase1-ui #app#app .ecs-menu>button.on::after{content:'✓';color:#e8dcb5}
.phase1-ui #app#app .exact-contract-list>header.ecs-head{display:flex!important;align-items:center;flex-wrap:wrap;gap:8px}
.phase1-ui #app#app .exact-contract-list>header.ecs-head>span{display:none!important}
.phase1-ui #app#app .ecs-seg{display:flex;flex-wrap:wrap;align-items:center;margin-left:auto}
.phase1-ui #app#app .ecs-seg>.ecs-seg-label{color:#8d8574;font-size:12px;margin-right:10px;letter-spacing:.04em}
.phase1-ui #app#app .ecs-seg>button{min-height:34px!important;height:auto!important;padding:0 12px!important;background:#1b1b17!important;border:1px solid #3b3a33!important;margin:0 0 0 -1px!important;color:#a99f88!important;font-size:13px!important;border-radius:0!important;box-shadow:none!important;clip-path:none!important;white-space:nowrap}
.phase1-ui #app#app .ecs-seg>button.on{background:#e8dcb5!important;color:#14130f!important;border-color:#e8dcb5!important;font-weight:600;position:relative;z-index:1}
.phase1-ui #app#app .exact-contract-sort.ecs-hide-select>b,.phase1-ui #app#app .exact-contract-sort.ecs-hide-select>select{display:none!important}
/* 계약 화면(PC): 오른쪽 상세가 길어 내려가면 왼쪽 목록 자리가 텅 비던 것 → 화면 높이가 넉넉하면 목록이 위에 붙어 따라온다 */
@media (min-width:901px) and (min-height:860px){
 .phase1-ui #app#app .exact-contract-layout{align-items:start!important}
 .phase1-ui #app#app .exact-contract-layout>.exact-contract-list{position:sticky;top:calc(var(--p1-header,64px) + 12px);align-self:start}
}

/* ── 요청 15 [E] 전선(PC) — «세력 / 세계 침식 / 두고 온 것» 단추가 지도 첫 칸(지역 그림) 위에 떠서 그림을 가리던 것 → 지도 위 제 줄로 ── */
@media (min-width:901px){
 .phase1-ui #app#app .exact-front>.pc-section-tabs{position:static!important;top:auto!important;left:auto!important;width:max-content;max-width:100%;margin:0 0 10px!important}
}
/* 전선(PC) 지역 칸 — 그림만 있고 이름이 안 보이며, 고른 지역 이름표가 칸 밖(다음 줄 그림 위)으로 삐져나오던 것
   → 칸마다 그림 아래 이름 줄, 고른 칸은 베이지 테두리. 지도 판 높이는 내용만큼(잘림 없음). 범례는 지도 아래 제 줄. */
@media (min-width:901px){
 .phase1-ui #app#app .desktop-front-view{grid-template-rows:auto!important;align-items:start!important;height:auto!important}
 .phase1-ui #app#app .desktop-front-view>.exact-world-map{height:auto!important;overflow:visible!important}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid{grid-template-rows:none!important;grid-auto-rows:auto!important;height:auto!important;flex:none!important;overflow:visible!important;align-content:start}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin{position:relative!important;inset:auto!important;transform:none!important;display:flex!important;flex-direction:column!important;align-items:stretch!important;height:auto!important;min-height:0!important;padding:6px!important;gap:0!important;overflow:hidden}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin>img{width:100%!important;height:90px!important;object-fit:cover}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin>span{display:block!important;position:static!important;inset:auto!important;transform:none!important;width:auto!important;margin:6px 0 0!important;padding:0 2px!important;background:none!important;border:0!important;box-shadow:none!important;font-size:13px!important;line-height:1.3;color:#c9bfa5;text-align:left;white-space:normal;word-break:keep-all}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin>i{position:absolute!important;top:12px!important;left:12px!important;bottom:auto!important;right:auto!important;transform:none!important;width:12px!important;height:12px!important;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.65)}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin.on{outline:2px solid #e8dcb5;outline-offset:-2px}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin.on>span{color:#e8dcb5}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin>i{background:var(--v12-risk,#8b9299)!important}
 .phase1-ui.ui-v3 body #app#app#app .exact-world-map-art.uiv4-region-grid>.exact-map-pin{border-left:3px solid var(--v12-risk,#3b3a33)!important}
 .phase1-ui.ui-v3 body #app#app#app .exact-map-pin.risk-low{--v12-risk:#6fc6a1}
 .phase1-ui.ui-v3 body #app#app#app .exact-map-pin.risk-mid{--v12-risk:#d4b25a}
 .phase1-ui.ui-v3 body #app#app#app .exact-map-pin.risk-high{--v12-risk:#e99c45}
 .phase1-ui.ui-v3 body #app#app#app .exact-map-pin:is(.risk-critical,.risk-fallen){--v12-risk:#e36d63}
 .phase1-ui.ui-v3 body #app#app#app .exact-map-pin.risk-unknown{--v12-risk:#8b9299}
 .phase1-ui #app#app .desktop-front-map>.exact-map-legend{position:static!important;margin:10px 14px 14px!important}
}

/* ── 요청 12 [B] 장착 장비 칸 — 빈 칸(«비어 있음»)만 위아래 6px 밀리고 안쪽 여백이 달라 줄이 어긋나던 것,
   같은 줄 칸 높이가 제각각이던 것 → 같은 줄은 같은 높이, 여백·이름표 크기 통일, 그림 칸은 가운데. ── */
@media (min-width:901px){
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots{align-items:stretch!important}
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot{margin:0!important;padding:10px!important;min-height:0!important;height:auto!important;display:flex!important;flex-direction:column;gap:2px;box-sizing:border-box}
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot>.gl{font-size:12px!important;min-height:17px;line-height:17px!important;margin:0 0 3px!important}
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot>.gi{height:56px!important;min-height:56px;display:flex!important;align-items:center;justify-content:center;margin:0 0 3px!important}
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot>b{font-size:13px!important;line-height:17px;margin:0!important}
}
@media (min-width:901px){
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot.uiv5-supplies>span:not(.gl){display:flex!important;align-items:center;gap:8px;min-height:36px;line-height:1.3;word-break:keep-all}
 body[data-p1-screen="hub"] #app#app#app .uiv5-six-slots>.gslot.uiv5-supplies>span:not(.gl) img{flex:none;width:32px!important;height:32px!important}
}