/* GUI: 블루아카이브의 화이트·스카이블루·옐로 테마. 전장 재질 토큰은 별도 유지한다. */
:root {
  --gunfire-hot: #fff7d9;
  --gunfire-flame: #ffc16b;
  --gunfire-tracer: #ffe6a1;
  --gunfire-smoke: #aaa698;
  --gunfire-brass: #b99b60;
  --rope-color: #b6ab91;
  --bulwark-body: #43515b;
  --tactical-metal: #e1ca8d;
  --tactical-danger: #e5a077;
  --tactical-smoke: #7c8278;
  --tactical-label: #eee5c9;
  --transport-body: #657164;
  --district-earth: #a9a08a;
  --district-earth-wear: #77715f;
  --district-road: #676c68;
  --district-road-wear: #555951;
  --district-sidewalk: #b0ae9e;
  --district-curb: #c5c1ae;
  --district-paint: #d4cab1;
  --district-structure: #eee6d4;
  --urban-pavement: #a4aea8;
  --urban-metal: #7599a6;
  --urban-wood: #9d907a;
  --urban-concrete: #87999e;
  --urban-rift: #9c80bd;
  /*
   * 색 채널 — 알파를 달고 쓰는 색은 여기 공백 구분 RGB 하나만 정본으로 둔다.
   * 규칙 본문은 `rgb(var(--c-deep) / 0.949)`로 파생해 쓴다(hex 재기입 금지).
   */
  --c-deep: 238 246 252;
  --c-scrim: 232 242 250;
  --c-panel: 255 255 255;
  --c-panel-soft: 225 242 253;
  --c-panel-mid: 203 229 246;
  --c-slot: 244 248 252;
  --c-gold: 20 99 155;
  --c-gold-bright: 13 74 119;
  --c-gold-warm: 217 235 248;
  --c-info: 0 103 170;
  --c-owned: 20 117 94;
  --c-epic: 129 70 175;
  --c-legendary: 156 98 9;
  --c-overlay: 18 43 68;
  --accent: #ffe564;
  --accent-hover: #fff09b;
  --star-gold: #a97800;
  --brand-navy: #234c76;
  --on-brand: #ffffff;
  --c-black: 0 0 0;
  --c-white: 255 255 255;

  /* 바탕 */
  --bg-deep: rgb(var(--c-deep));
  --bg-void: rgb(var(--c-scrim));
  --bg-panel: rgb(var(--c-panel));
  --bg-panel-soft: rgb(var(--c-panel-soft));
  --bg-panel-mid: rgb(var(--c-panel-mid));
  --bg-slot: rgb(var(--c-slot));
  --bg-slot-raised: #e9f3fa;
  --bg-scrim: rgb(var(--c-overlay) / .56);
  --bg-chip: #daeaf6;
  --bg-blackout: #050606;
  --bg-gold-deep: #e6f2fc;

  /* 강조 텍스트와 경계는 파랑. 실행 버튼과 성장 별은 전용 노랑 토큰을 쓴다. */
  --gold: rgb(var(--c-gold));
  --gold-bright: rgb(var(--c-gold-bright));
  --gold-deep: #164977;
  --gold-line: rgb(var(--c-gold) / 0.349);
  --gold-line-strong: rgb(var(--c-gold) / 0.702);
  --gold-glow: rgb(var(--c-owned) / 0.18);

  /* 텍스트 */
  --ink: #203d58;
  --ink-soft: #425e77;
  --ink-dim: #536b81;
  --ink-on-gold: #243c56;

  /* 상태색 — 제한적으로만 사용한다. */
  --ok: #14704f;
  --ok-deep: #0e603e;
  --info: rgb(var(--c-info));
  --info-deep: #005a94;
  --danger: #b52e40;
  --danger-line: #dc8994;
  --danger-bg: #ffedf0;
  --danger-bg-deep: #fbdbe1;
  --danger-ink: #8e2035;
  --owned: rgb(var(--c-owned));

  /* 등급색 */
  --grade-common: #586d7e;
  --grade-uncommon: #287442;
  --grade-rare: #096d9d;
  --grade-epic: rgb(var(--c-epic));
  --grade-legendary: rgb(var(--c-legendary));

  /* 장비 등급 5단계 — 노멀·레어·에픽·유니크·레전드 */
  --grade-normal: var(--grade-common);
  --grade-unique: var(--owned);
  --grade-legend: var(--grade-legendary);

  /* 에픽 배너 — 승급 연출이 쓰는 보라 계열 파생색 */
  --epic-bg: #eadff7;
  --epic-bg-deep: #f4edfa;
  --epic-ink: #704199;

  /* 패널·보더 */
  --line-card: #c6dbe9;
  --line-quiet: #d8e6f0;
  --line-mid: #a9c6dd;
  --line-bright: #75a5ca;
  --line-info: #8dc5e9;
  --radius-panel: 0.9rem;
  --radius-card: 0.6rem;
  --radius-slot: 0.4rem;
  --border-panel: 1px solid var(--gold-line);
  --border-card: 1px solid var(--line-card);
  --border-soft: 1px solid var(--line-quiet);
  --shadow-panel: 0 0.7rem 2rem rgb(var(--c-black) / 0.5);
  --shadow-card: 0 2px 0 rgb(var(--c-black) / 0.3);

  /* 버튼 */
  --btn-gold: linear-gradient(180deg, var(--gold-bright), var(--gold));
  --btn-navy: linear-gradient(180deg, var(--bg-panel-soft), var(--bg-panel));
  --btn-disabled-bg: #dae4eb;
  --btn-disabled-ink: #5f7384;
  --line-disabled: var(--line-mid);
  --tap-min: 2.75rem;

  /*
   * 가독성 — 제목·본문·보조 문구와 핵심 수치에 서로 다른 크기를 준다.
   * 본문은 14px, 보조 문구는 12px 이상으로 유지하고 패널 여백은 hud-unit에서 파생한다.
   * 터치 표면은 --tap-min이 별도로 지킨다.
   */
  --panel-space: clamp(0.875rem, calc(var(--hud-unit) * 0.9), 1.25rem);
  --pad-panel: var(--panel-space);
  --pad-body: var(--panel-space);
  --gap-panel: 1rem;
  --gap-card: 0.625rem;
  --gap-row: 0.25rem;

  /* 텍스트 5단계와 전투력 표시 크기. */
  --fs-display: clamp(2.25rem, calc(var(--hud-unit) * 2.9), 2.75rem);
  --fs-title: 1.375rem;
  --fs-section: 1rem;
  --fs-body: 0.875rem;
  --fs-meta: 0.75rem;
  --fs-micro: 0.6875rem;

  /*
   * 오버레이 크기 — 표면과 같은 --hud-unit 스케일에서 파생하는 5단계 폭·2단계 높이.
   * 값은 "뷰포트 비례 상한", "절대 상한", "여백·노치를 뺀 실측" 셋 중 가장 작은 쪽이라
   * 어떤 화면에서도 패널이 밖으로 나가지 않고, 좁고 짧은 뷰포트에서는 저절로 전체 화면에
   * 가까워진다. 높이는 100dvh 기준이라 모바일 주소창이 펴져도 헤더·푸터가 잘리지 않는다.
   *
   * 절대 상한(rem)이 따로 있는 이유 — 오버레이 안쪽 정보 밀도(--fs-*·--pad-*)는 표면
   * 스케일과 분리돼 고정이다. 표면이 커진다고 패널까지 같이 부풀면 글자 크기는 그대로인 채
   * 여백만 늘어 화면 점유만 커진다. 표면은 자라고 오버레이는 오늘 크기에서 멈춘다.
   */
  --overlay-pad: clamp(0.4rem, 2.2vmin, 1.1rem);
  --overlay-gutter-x: calc(var(--overlay-pad) * 2 + env(safe-area-inset-left, 0px) + env(safe-area-inset-right, 0px));
  --overlay-gutter-y: calc(var(--overlay-pad) * 2 + env(safe-area-inset-top, 0px) + env(safe-area-inset-bottom, 0px));
  --overlay-w-xl: min(calc(var(--hud-unit) * 56), 58rem, calc(100vw - var(--overlay-gutter-x)));
  --overlay-w-lg: min(calc(var(--hud-unit) * 45), 46rem, calc(100vw - var(--overlay-gutter-x)));
  --overlay-w-md: min(calc(var(--hud-unit) * 35), 36rem, calc(100vw - var(--overlay-gutter-x)));
  --overlay-w-sm: min(calc(var(--hud-unit) * 29), 30rem, calc(100vw - var(--overlay-gutter-x)));
  --overlay-w-xs: min(calc(var(--hud-unit) * 24), 24.5rem, calc(100vw - var(--overlay-gutter-x)));
  --popover-w: min(calc(var(--hud-unit) * 20), 20.5rem, calc(100vw - var(--overlay-gutter-x)));
  --overlay-h: min(calc(var(--hud-unit) * 42), 43rem, calc(100dvh - var(--overlay-gutter-y)));
  --overlay-h-sm: min(calc(var(--hud-unit) * 35), 36rem, calc(100dvh - var(--overlay-gutter-y)));
  /* 오버레이 안쪽 목록의 높이 상한 — 짧은 화면(가로 모드)에서는 dvh 쪽이 이긴다. */
  --overlay-list-h: min(24rem, 46dvh);
  --overlay-list-h-lg: min(26rem, 50dvh);

  /*
   * 표면(HUD) 유동 스케일 — 고정 브레이크포인트 패치 대신 뷰포트에 비례해 자란다.
   * 기준을 vmin으로 잡아 세로·가로 어느 쪽이 짧아도 같은 비율로 줄어든다(가로 모드 안전).
   * 터치 표면(--tap-min)만은 이 스케일과 무관하게 44px를 지킨다.
   *
   * 기울기 1.41vmin은 "손가락/시야 거리에 맞는 크기"에서 역산한 값이다 —
   * 최소변 390px에서 12.86px(모바일 현행 유지), 900px에서 20.05px, 1080px에서 22.59px,
   * 1440px에서 27.66px. 옛 상한 1.02rem은 최소변 1024px에서 이미 걸려 768×1024·1440×900·
   * 1920×1080이 전부 같은 크기였다(큰 화면일수록 표면이 상대적으로 더 작아 보였다).
   * 새 상한 1.75rem은 최소변 1468px부터만 걸리는 폭주 방지선이라 실사용 구간을 묶지 않는다.
   */
  --hud-unit: clamp(0.74rem, 0.46rem + 1.41vmin, 1.75rem);
  --hud-gap: calc(var(--hud-unit) * 0.36);
  --hud-gap-tight: calc(var(--hud-unit) * 0.22);
  --hud-radius: calc(var(--hud-unit) * 0.42);
  --forge-control: max(var(--tap-min), calc(var(--hud-unit) * 2.4));
  --forge-rows: 3;
  --forge-dock-height: calc(var(--forge-control) * var(--forge-rows) + var(--hud-unit) * 3.2);
  --forge-dock-width: min(38rem, calc(100% - var(--hud-edge-left) - var(--hud-edge-right)));

  /* 가장자리 여백 — 노치·홈 인디케이터(safe-area)를 그대로 더한다. */
  --hud-edge: calc(var(--hud-unit) * 0.62);
  --hud-edge-left: calc(var(--hud-edge) + env(safe-area-inset-left, 0px));
  --hud-edge-right: calc(var(--hud-edge) + env(safe-area-inset-right, 0px));
  --hud-edge-top: calc(var(--hud-edge) + env(safe-area-inset-top, 0px));
  --hud-edge-bottom: calc(var(--hud-edge) + env(safe-area-inset-bottom, 0px));
  --hud-center-x: calc((100% + var(--hud-edge-left) - var(--hud-edge-right)) / 2);

  /* 표면 글자·아이콘 — 오버레이 밀도(--fs-*)와 분리해 따로 자란다. */
  --hud-fs: var(--hud-unit);
  --hud-fs-sm: max(0.75rem, calc(var(--hud-unit) * 0.86));
  --hud-fs-xs: max(0.6875rem, calc(var(--hud-unit) * 0.76));
  --hud-icon: clamp(1rem, calc(var(--hud-unit) * 1.55), 2.75rem);
  --hud-portrait: clamp(2.3rem, calc(var(--hud-unit) * 2.65), 4.75rem);
  /* 미니맵은 배수를 따로 키운다 — 데스크톱에서 "작아서 안 보인다"가 나오던 자리다. */
  --hud-minimap: clamp(2.2rem, calc(var(--hud-unit) * 4), 7.5rem);

  /* 크림 단색 아이콘은 검은 1px 그림자로 밝은 전장 위에서도 구별한다. */
  --hud-icon-lift: drop-shadow(0 1px 0 var(--bg-deep));
  --hud-icon-lift-strong: brightness(1.1) drop-shadow(0 1px 0 var(--bg-deep));
  --hud-icon-lift-flare: brightness(1.2) drop-shadow(0 1px 0 var(--bg-deep));
  /* 아이콘 뒤 경계 없는 방사형 스크림 — 각진 카드가 아니라 지형을 눌러 주는 그늘이다. */
  --hud-icon-scrim: radial-gradient(closest-side, rgb(var(--c-scrim) / 0.5), rgb(var(--c-scrim) / 0));

  /*
   * 가장자리 앵커가 비우고 지나가는 띠 — 상단바 줄과 파티 초상 줄이 실제로 먹는 높이다.
   * 우측 퀵 레일·미니 피드는 이 두 띠 사이에만 서서 어떤 뷰포트에서도 겹치지 않는다.
   * 초상이 --tap-min보다 커지는 큰 화면에서는 초상 쪽이 띠 높이를 정한다.
   */
  --hud-bottom-zone: calc(max(var(--tap-min), var(--hud-portrait)) + var(--hud-unit) * 1.6 + var(--forge-dock-height) + env(safe-area-inset-bottom, 0px));

  /*
   * 오버레이 스택 4층 — "누가 누구 위에 열리는가"의 의미 단위다.
   * 옛 계약은 백드롭이 전부 z-index 30이라 층을 DOM 선언 순서가 정했고, 편성 위에 연
   * 영웅 상세·픽커가 부모 뒤로 깔렸다(전체 화면 전환 뒤에는 통째로 가려진다).
   * 층 판단의 정본은 여기 하나이고, 배선은 계산된 z-index를 읽어 포커스 스택을 맞춘다.
   */
  --z-overlay-base: 30;     /* 진입점(퀵 레일·☰ 메뉴)에서 직접 여는 오버레이 */
  --z-overlay-popover: 31;  /* 영웅 상세 — 편성 위에 뜨고 자기 위에 픽커를 연다 */
  --z-overlay-picker: 32;   /* 부모 오버레이가 연 선택·상세 팝업 */
  --z-overlay-confirm: 33;  /* 확인 다이얼로그 — 언제나 최상위 */
}

/* 전장 / 영웅 / 장비 / 뽑기. 패널 폭으로 내부 구조를 전환한다. */
:root {
  --nav-button: clamp(3.2rem, calc(var(--hud-unit) * 3.5), 4.75rem);
  --nav-height: var(--nav-button);
  --command-height: max(3.8rem, calc(var(--hud-unit) * 3.2));
  --hud-bottom-zone: calc(var(--nav-height) + var(--hud-unit) * 5 + var(--hud-edge-bottom));
  --ui-space: clamp(.75rem, calc(var(--hud-unit) * .9), 1.3rem);
  --ui-title: clamp(1.6rem, calc(var(--hud-unit) * 2), 2.5rem);
  --ui-small: clamp(.75rem, calc(var(--hud-unit) * .67), .92rem);
  --ui-text: clamp(.875rem, calc(var(--hud-unit) * .78), 1.05rem);
  --panel-line: var(--line-card);
  --panel-wash: rgb(var(--c-panel) / .98);
  --hud-radar: clamp(72px,calc(var(--hud-unit) * 5.5),160px);
  --action-size: max(44px,calc(var(--hud-unit) * 2.8));
  --action-icon: max(30px,calc(var(--hud-unit) * 2));
  --profile-width: calc(var(--hud-unit) * 14.4);
  --hud-profile-height: clamp(60px,calc(var(--hud-unit) * 4),82px);
}
* { box-sizing: border-box; }
html, body { width:100%;height:100%;margin:0;overflow:hidden;background:var(--bg-deep);color:var(--ink);font-family:'Pretendard','Apple SD Gothic Neo',system-ui,sans-serif;font-size:16px; }
[hidden] { display:none!important; }
button, input, select { font:inherit; }
button, select { min-height:44px; }
button { border:1px solid var(--panel-line);background:var(--bg-panel);color:var(--ink);cursor:pointer;padding:.6rem 1rem;border-radius:2px;transition:background .15s,border-color .15s; }
button:hover:not(:disabled) { background:var(--bg-panel-mid);border-color:var(--gold); }
button:disabled { opacity:.46;cursor:default; }
button:focus-visible, input:focus-visible, select:focus-visible, summary:focus-visible { outline:2px solid var(--info);outline-offset:3px; }
input, select { min-width:0;padding:.55rem .7rem;color:var(--ink);background:var(--bg-slot);border:1px solid var(--panel-line);border-radius:2px; }
input[type=checkbox] { width:20px;height:20px;accent-color:var(--gold); }
a { color:var(--info); }
h1,h2,h3,p { margin:0; }
h1 { font-size:var(--ui-title);line-height:1.12;letter-spacing:-.05em; }
h2 { font-size:clamp(1.2rem,calc(var(--hud-unit) * 1.25),1.65rem);letter-spacing:-.035em; }
h3 { font-size:1rem; }
p { line-height:1.65; }
small { font-size:var(--ui-small);font-weight:500; }
progress { appearance:none;border:0;height:5px;width:100%;background:var(--bg-panel-mid);color:var(--gold); }
progress::-webkit-progress-bar { background:var(--bg-panel-mid); }
progress::-webkit-progress-value { background:var(--gold); }
details { border-top:1px solid var(--panel-line);padding-top:.8rem; }
summary { cursor:pointer;min-height:36px;font-size:var(--ui-small);color:var(--ink-soft); }
details p { font-size:var(--ui-small);margin:.6rem 0; }
.primary { background:var(--accent);border-color:var(--accent);color:var(--ink-on-gold);font-weight:800; }
.primary:hover:not(:disabled) { background:var(--accent-hover);color:var(--ink-on-gold); }
.secondary { background:var(--bg-panel-soft); }
.danger-button { color:var(--danger-ink);border-color:var(--danger);background:var(--danger-bg); }
.icon-button { width:44px;padding:8px;flex:none; }
.icon-button img { width:100%;height:100%;object-fit:contain; }
.eyebrow { display:block;color:var(--info);font-size:var(--ui-small);font-weight:700;letter-spacing:.14em;line-height:1.8; }
.muted { color:var(--ink-dim);font-size:var(--ui-small); }
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; }
#game-canvas { position:fixed;inset:0;width:100%;height:100%;touch-action:none; }
#game-shell { position:fixed;inset:0;pointer-events:none; }
#game-shell button, #game-shell input, #game-shell select, #game-shell summary { pointer-events:auto; }
.command-bar { position:absolute;z-index:8;left:var(--hud-edge-left);right:var(--hud-edge-right);top:var(--hud-edge-top);height:var(--command-height);display:flex;justify-content:space-between;align-items:start;gap:1rem;text-shadow:0 2px 8px var(--bg-void); }
.operation-mark { display:grid;grid-template-columns:auto auto;column-gap:1rem;align-items:baseline; }
.operation-mark .eyebrow { grid-column:1/-1;font-size:.65rem; }
.operation-mark strong { font-size:var(--hud-fs); }
#operation-stage { color:var(--ink-soft);font-size:var(--hud-fs-sm); }
.resources { display:flex;align-items:center;gap:var(--ui-space);padding:.2rem .4rem .35rem .8rem;background:rgb(var(--c-scrim) / .78);border-bottom:1px solid var(--panel-line); }
.resource { display:grid;gap:2px;min-width:3.2rem; }
.resource small { color:var(--ink-dim);font-size:.6rem;letter-spacing:.08em; }
.resource strong { color:var(--gold-bright);font-size:var(--hud-fs-sm);font-variant-numeric:tabular-nums; }
.resources .icon-button { background:transparent;border:0; }
.game-screen { position:absolute;inset:0; }
.field-screen { pointer-events:none; }
.field-corner { position:absolute;right:var(--hud-edge-right);top:calc(var(--hud-edge-top) + var(--command-height) + .5rem);display:grid;justify-items:end;gap:.5rem; }
#minimap-canvas { width:clamp(64px,calc(var(--hud-unit) * 6),120px);height:clamp(64px,calc(var(--hud-unit) * 6),120px);border:1px solid var(--gold-line);background:rgb(var(--c-scrim) / .7); }
.field-bottom { position:absolute;left:var(--hud-edge-left);right:var(--hud-edge-right);bottom:calc(var(--nav-height) + var(--hud-edge-bottom) + .9rem);display:flex;justify-content:space-between;align-items:end;gap:var(--ui-space); }
.party-status { display:grid;grid-template-columns:clamp(45px,calc(var(--hud-unit) * 3),66px) minmax(95px,1fr);column-gap:.8rem;align-items:center;text-align:left;padding:.45rem .75rem .45rem .2rem;background:rgb(var(--c-scrim) / .85);border-left:2px solid var(--info);max-width:300px; }
.party-status>img { grid-row:1/5;width:100%;height:90px;object-fit:cover;object-position:top;align-self:end; }
.party-status strong { font-size:var(--ui-text); }
.party-status span { font-size:var(--ui-small);color:var(--ink-soft); }
.party-status .hp-track { height:4px;background:var(--bg-panel-mid); }
.hp-track i { display:block;height:100%;width:var(--hp,100%);background:var(--ok); }
.objective { width:clamp(155px,calc(var(--hud-unit) * 14),285px);padding:.8rem;background:rgb(var(--c-scrim) / .83);border-left:2px solid var(--gold); }
.objective .eyebrow { font-size:.62rem; }
.objective p { font-size:var(--ui-small); }
.objective button { width:100%;margin-top:.65rem;font-size:var(--ui-small);padding:.5rem; }
.battle-notice { position:absolute;top:30%;left:50%;transform:translateX(-50%);width:max-content;max-width:90%;padding:.85rem 1.2rem;background:rgb(var(--c-scrim) / .85);border-top:1px solid var(--gold);border-bottom:1px solid var(--gold);text-align:center;color:var(--gold-bright); }
.field-empty { position:absolute;left:50%;top:42%;transform:translate(-50%,-50%);width:min(90%,24rem);padding:1.5rem;background:var(--bg-scrim);text-align:center; }
.field-empty p { margin:.8rem 0 1.3rem; }
.main-nav { position:absolute;z-index:12;bottom:var(--hud-edge-bottom);left:50%;transform:translateX(-50%);height:var(--nav-height);width:min(32rem,calc(100% - var(--hud-edge-left) - var(--hud-edge-right)));display:grid;grid-template-columns:repeat(4,1fr);background:rgb(var(--c-scrim) / .96);border:1px solid var(--panel-line);pointer-events:auto; }
.main-nav button { position:relative;display:flex;justify-content:center;align-items:center;gap:.65rem;border:0;border-right:1px solid var(--panel-line);background:transparent;padding:.4rem;font-size:var(--ui-small);font-weight:700; }
.main-nav button:last-child { border-right:0; }
.main-nav img { width:28px;height:28px;object-fit:contain;opacity:.65; }
.main-nav button[aria-selected=true] { color:var(--gold-bright);background:var(--bg-panel-soft);box-shadow:inset 0 2px var(--gold); }
.main-nav button[aria-selected=true] img { opacity:1; }
.nav-dot { position:absolute;top:9px;right:14px;width:5px;height:5px;border-radius:50%;background:var(--info); }
.screen-panel { z-index:5;left:max(var(--hud-edge-left),calc((100% - 1160px) / 2));right:max(var(--hud-edge-right),calc((100% - 1160px) / 2));top:calc(var(--hud-edge-top) + var(--command-height) + .5rem);bottom:calc(var(--nav-height) + var(--hud-edge-bottom) + .65rem);background:var(--panel-wash);border:1px solid var(--panel-line);display:flex;flex-direction:column;overflow:clip;pointer-events:auto;container-type:inline-size;container-name:overlay; }
.screen-heading { display:flex;flex:none;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--panel-line);padding:var(--ui-space) calc(var(--ui-space) * 1.4); }
.screen-heading .eyebrow { font-size:.6rem; }
.back-button { background:transparent;color:var(--ink-soft);border:0;font-size:var(--ui-small); }
.back-button span { margin-left:1rem; }
.screen-body { padding:calc(var(--ui-space) * 1.4);overflow:auto;min-height:0;overscroll-behavior:contain;font-size:var(--ui-text); }
.hero-layout { display:grid;grid-template-columns:minmax(200px,.9fr) minmax(280px,1.25fr);gap:calc(var(--ui-space) * 2); }
.hero-art { position:relative;min-height:320px;overflow:hidden;background:linear-gradient(145deg,var(--bg-panel-mid),var(--bg-deep));border-bottom:2px solid var(--gold-line); }
.hero-art>img { width:100%;height:100%;max-height:570px;object-fit:contain;object-position:bottom;vertical-align:bottom; }
.hero-name { position:absolute;left:1.2rem;bottom:1rem;display:flex;align-items:center;gap:.8rem;text-shadow:0 2px 8px var(--bg-void); }
.hero-name h2 { font-size:2.6rem; }
.grade-badge { display:grid;place-items:center;width:32px;height:38px;background:var(--gold);color:var(--on-brand);font-size:1.5rem;font-weight:900;transform:skew(-6deg); }
.hero-info { display:flex;flex-direction:column;gap:1.15rem; }
.hero-level { display:flex;justify-content:space-between;align-items:center;gap:.5rem;border-bottom:1px solid var(--panel-line);padding-bottom:1rem; }
.hero-level strong { font-size:1.7rem; }
.growth-section { border-bottom:1px solid var(--panel-line);padding-bottom:1rem; }
.growth-stars { display:flex;align-items:center;gap:.3rem;margin:.5rem 0;color:var(--star-gold); }
.growth-stars .star { font-size:1.6rem;line-height:1.2; }
.star-empty { color:var(--ink-dim);opacity:.45; }
.star-purple { color:var(--grade-epic); }
.growth-heading { display:flex;justify-content:space-between;align-items:center;gap:1rem; }
.growth-heading strong { font-size:1.2rem; }
.growth-section button { width:100%;margin-top:.8rem; }
.stat-list { display:grid;grid-template-columns:1fr 1fr;gap:.55rem 1.3rem; }
.stat-list div { display:flex;justify-content:space-between;gap:.5rem;padding:.4rem 0;border-bottom:1px solid var(--panel-line); }
.stat-list span { color:var(--ink-dim);font-size:var(--ui-small); }
.stat-list strong { font-size:var(--ui-text);font-variant-numeric:tabular-nums; }
.skill-description { border-left:2px solid var(--info);padding:.3rem 0 .3rem .8rem; }
.skill-description p { color:var(--ink-soft);font-size:var(--ui-small); }
.hero-owned { font-size:var(--ui-small);color:var(--ok); }
.empty-state { display:grid;place-content:center;justify-items:center;gap:1rem;padding:2rem;min-height:200px;text-align:center;color:var(--ink-soft); }
.equipment-layout { display:grid;grid-template-columns:minmax(0,1.25fr) minmax(250px,.8fr);gap:calc(var(--ui-space) * 1.5); }
.armory-main { min-width:0; }
.loadout { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem; }
.gear-slot { display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.4rem;padding:.5rem .15rem;min-height:85px;position:relative;background:var(--bg-slot);border-top:2px solid var(--grade-color,var(--panel-line)); }
.gear-slot img { width:32px;height:32px;object-fit:contain; }
.gear-slot span { font-size:.68rem; }
.gear-slot small { color:var(--gold);font-size:.63rem; }
.inventory-heading { display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:1.4rem 0 .8rem; }
.inventory-heading h2 { font-size:1.05rem; }
.inventory-heading small { color:var(--ink-dim); }
.inventory-heading select { font-size:var(--ui-small); }
.inventory-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(100px,1fr));gap:.5rem;align-content:start; }
.gear-card { display:grid;gap:.45rem;text-align:left;padding:.65rem;min-height:98px;border-top:2px solid var(--grade-color,var(--panel-line));background:var(--bg-slot); }
.gear-card.selected, .gear-slot.selected { outline:1px solid var(--gold);outline-offset:-1px;background:var(--bg-panel-mid); }
.gear-card strong { font-size:.73rem;line-height:1.35; }
.gear-card small { font-size:.64rem;color:var(--ink-dim); }
.gear-card img { width:32px;height:32px;object-fit:contain; }
.equipment-detail { min-width:0;align-self:start;border-left:1px solid var(--panel-line);padding-left:calc(var(--ui-space) * 1.5); }
.equipment-detail h2 { margin:.6rem 0;font-size:1.3rem; }
.gear-identity { display:flex;align-items:center;gap:1rem; }
.gear-identity>img { width:64px;height:64px;object-fit:contain; }
.gear-description { margin:.7rem 0;color:var(--ink-soft);font-size:var(--ui-small); }
.gear-grade { color:var(--grade-color,var(--ink-soft));font-size:var(--ui-small); }
.gear-comparison { width:100%;border-collapse:collapse;margin:1rem 0;font-size:var(--ui-small); }
.gear-comparison th { text-align:left;font-weight:500;color:var(--ink-dim); }
.gear-comparison td { text-align:right;font-variant-numeric:tabular-nums; }
.gear-comparison th,.gear-comparison td { border-bottom:1px solid var(--panel-line);padding:.55rem .2rem; }
.positive { color:var(--ok); }
.negative { color:var(--danger); }
.gear-actions { display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin-top:1rem; }
.gear-actions .primary { grid-column:1/-1; }
.pending-receipt { padding:.7rem;border-left:2px solid var(--info);background:var(--bg-panel-soft);font-size:var(--ui-small);margin-bottom:.7rem; }
.supply-station { margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--gold-line);display:grid;grid-template-columns:1fr auto;align-items:center;gap:.8rem; }
.supply-station .eyebrow { font-size:.6rem; }
.supply-station p { font-size:var(--ui-small);color:var(--ink-soft); }
.supply-station h2 { font-size:1.1rem; }
.supply-station h2 small { color:var(--gold); }
.auto-supply { display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;grid-column:1/-1;font-size:var(--ui-small); }
.auto-supply label { display:flex;align-items:center;gap:.5rem; }
.auto-supply select,.auto-supply button { font-size:var(--ui-small); }
.supply-station>p,.supply-station>details { grid-column:1/-1; }
.rate-row { display:flex;justify-content:space-between;font-size:var(--ui-small);margin:.45rem 0; }
.gacha-layout { display:grid;grid-template-columns:minmax(220px,1fr) minmax(280px,1fr);gap:calc(var(--ui-space) * 2); }
.banner-art { position:relative;min-height:360px;background:linear-gradient(135deg,var(--bg-panel-mid),var(--bg-slot));overflow:hidden;border-left:2px solid var(--info); }
.banner-art>img { width:100%;height:100%;max-height:540px;object-fit:contain;object-position:bottom;vertical-align:bottom; }
.banner-serial { position:absolute;left:1rem;top:1rem;font-size:.8rem;letter-spacing:.2em;color:var(--ink-dim); }
.banner-name { position:absolute;left:1.2rem;bottom:3.2rem;display:flex;align-items:center;gap:.7rem;text-shadow:0 2px 8px var(--bg-void); }
.banner-name h2 { font-size:3.5rem;line-height:1.1; }
.banner-name small { color:var(--gold-bright); }
.banner-caption { position:absolute;left:0;right:0;bottom:0;padding:.75rem 1rem;background:rgb(var(--c-scrim) / .85);color:var(--gold-bright);font-size:var(--ui-small); }
.gacha-console { display:flex;flex-direction:column;gap:1.2rem;justify-content:center;min-width:0; }
.gacha-console>h2 { font-size:clamp(1.65rem,3cqw,2.5rem);line-height:1.3; }
.gacha-console>p { color:var(--ink-soft);font-size:var(--ui-small); }
.pool-line { display:flex;justify-content:space-between;gap:.5rem;flex-wrap:wrap;padding:.8rem 0;border-top:1px solid var(--panel-line);border-bottom:1px solid var(--panel-line);font-size:var(--ui-small); }
.pool-line span { color:var(--info); }
.ticket-balance { display:flex;justify-content:space-between;align-items:center;color:var(--ink-soft); }
.ticket-balance strong { font-size:2rem;color:var(--gold-bright); }
.draw-actions { display:grid;grid-template-columns:1fr 1fr;gap:.7rem; }
.draw-actions button { display:grid;gap:.3rem;min-height:64px; }
.draw-actions small { font-size:.65rem;opacity:.7; }
.gacha-result { border:1px solid var(--gold-line);padding:1rem;background:var(--bg-panel); }
.gacha-result h3 { color:var(--gold-bright);margin-bottom:.6rem; }
.gacha-result p { font-size:var(--ui-small); }
.gacha-result button { width:100%;margin-top:.7rem; }
.draw-receipts { display:flex;flex-wrap:wrap;gap:.3rem;margin:.6rem 0; }
.draw-receipts span { padding:.35rem;background:var(--bg-slot);color:var(--ink-soft);font-size:.68rem;border-top:1px solid var(--gold-line); }
.modal-backdrop { position:fixed;inset:0;z-index:40;display:grid;place-items:center;padding:var(--hud-edge-top) var(--hud-edge-right) var(--hud-edge-bottom) var(--hud-edge-left);background:var(--bg-scrim); }
#confirm-modal { z-index:50; }
#update-modal { z-index:60; }
#update-modal .dialog-body { flex:1; }
#update-progress { min-height:1.5em; }
#title-version-status { font-size:var(--ui-small); }
.dialog-panel { width:min(100%,30rem);max-height:calc(100dvh - var(--hud-edge-top) - var(--hud-edge-bottom));display:flex;flex-direction:column;background:var(--bg-panel);border:1px solid var(--gold-line);overflow:clip; }
.dialog-panel>header,.dialog-panel>footer { display:flex;flex:none;justify-content:space-between;align-items:center;gap:.8rem;padding:1rem 1.2rem; }
.dialog-panel>header { border-bottom:1px solid var(--panel-line); }
.dialog-panel>footer { border-top:1px solid var(--panel-line);font-size:var(--ui-small); }
.dialog-body { padding:1.2rem;overflow:auto;min-height:0;overscroll-behavior:contain; }
.dialog-body h3 { margin:1.2rem 0 .65rem;color:var(--gold); }
.dialog-body h3:first-child { margin-top:0; }
.dialog-body p { font-size:var(--ui-small); }
.dialog-body details { margin-top:1.3rem; }
.dialog-body details label { display:grid;gap:.5rem;font-size:var(--ui-small); }
.dialog-body details button { width:100%;margin-top:.7rem; }
.setting-row { display:flex;justify-content:space-between;align-items:center;gap:1rem;margin:.65rem 0;font-size:var(--ui-text); }
#settings-google { width:100%;margin:.7rem 0; }
#save-status { color:var(--ink-dim); }
#confirm-modal .dialog-panel { min-height:220px; }
#confirm-modal .dialog-body { flex:1; }
.network-banner { position:fixed;top:var(--hud-edge-top);left:50%;transform:translateX(-50%);z-index:80;display:flex;align-items:center;gap:1rem;width:min(94%,30rem);padding:.6rem .8rem;background:var(--danger-bg);border:1px solid var(--danger);font-size:var(--ui-small); }
.network-banner span { flex:1; }
.toast { position:fixed;z-index:70;left:50%;bottom:calc(var(--nav-height) + var(--hud-edge-bottom) + 1.2rem);transform:translateX(-50%);width:max-content;max-width:90%;padding:.75rem 1.1rem;background:var(--bg-void);border-left:2px solid var(--gold);font-size:var(--ui-text);box-shadow:0 6px 24px rgb(var(--c-black) / .3); }
.boot-screen { position:fixed;inset:0;z-index:30;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;background:var(--bg-deep);padding:2rem;text-align:center; }
@container overlay (max-width: 760px) {
  .gacha-layout { grid-template-columns:minmax(130px,.75fr) minmax(210px,1fr);gap:1rem; }
  .hero-layout { grid-template-columns:minmax(140px,.7fr) minmax(220px,1fr);gap:1rem; }
  .equipment-layout { grid-template-columns:1fr; }
  .equipment-detail { border-left:0;border-top:1px solid var(--panel-line);padding:1rem 0 0; }
  .equipment-detail:has(.empty-state) { display:none; }
  .gear-comparison { margin:.5rem 0; }
}
@container overlay (max-width: 480px) {
  .gacha-layout,.hero-layout { grid-template-columns:1fr; }
  .banner-art { min-height:180px;height:210px; }
  .banner-art>img { object-position:right bottom; }
  .banner-name { bottom:3.2rem; }
  .banner-name h2 { font-size:2.7rem; }
  .gacha-console>h2 { display:none; }
  .gacha-console { gap:.9rem; }
  .hero-art { min-height:180px;height:205px; }
  .hero-art>img { object-position:right bottom; }
  .hero-name { bottom:1rem; }
  .inventory-grid { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .supply-station { grid-template-columns:1fr; }
  .supply-station>button { width:100%; }
}
@media (max-width:760px) {
  .main-nav button { flex-direction:column;gap:3px; }
  .main-nav img { width:24px;height:24px; }
  .resources { gap:.6rem; }
  .operation-mark { column-gap:.5rem; }
}
@media (max-width:560px), (max-height:560px) {
  body:not([data-screen=field]) .command-bar { display:none; }
  .screen-panel { inset:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) calc(var(--nav-height) + var(--hud-edge-bottom) + .5rem) env(safe-area-inset-left,0px);border:0; }
  .screen-heading { padding:.7rem 1rem; }
  .screen-body { padding:1rem; }
  .screen-heading h1 { font-size:1.55rem; }
  .screen-heading .eyebrow { display:none; }
  .modal-backdrop { padding:0; }
  .modal-backdrop>.dialog-panel { width:100vw;height:100dvh;max-height:100dvh;border:0;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px); }
  .dialog-body { flex:1; }
  .field-bottom { gap:.6rem; }
  .party-status { grid-template-columns:40px minmax(70px,1fr);column-gap:.4rem;padding:.35rem; }
  .party-status>img { height:75px; }
  .party-status span { font-size:.64rem; }
  .objective { width:155px;padding:.55rem; }
  .objective button { font-size:.69rem;margin-top:.4rem; }
  #operation-stage { grid-column:1/-1;font-size:.68rem; }
  .operation-mark .eyebrow { font-size:.52rem; }
  .resources { padding:.2rem .1rem .3rem .55rem; }
  .resources .icon-button { width:36px;min-height:40px; }
  .resource { min-width:2.8rem; }
}
@media (prefers-reduced-motion:reduce) { *,*::before,*::after { transition:none!important;animation:none!important;scroll-behavior:auto!important; } }
body.reduced-motion *,body.reduced-motion *::before,body.reduced-motion *::after { transition:none!important;animation:none!important; }

/* 마비노기 모바일의 모서리 HUD·원형 진입점·독립 가방 패널을 참고한 배치. */
.command-bar { height:auto;align-items:start; }
.command-profile { display:flex;flex-direction:column;gap:.35rem;max-width:calc(100% - var(--hud-radar) - 60px); }
.command-profile .resources { width:max-content;max-width:100%;padding:.25rem .5rem;border:0;border-radius:30px;background:rgb(var(--c-scrim) / .45); }
.command-profile .resource { display:flex;align-items:center;gap:.45rem;min-width:0; }
.command-profile .resource small { font-size:.6rem; }
.command-bar>#settings-open { margin-right:calc(var(--hud-radar) + .5rem);border:0;border-radius:50%;background:rgb(var(--c-scrim) / .55); }
.party-status { grid-template-columns:var(--hud-profile-height) minmax(60px,1fr);border:0;border-radius:50px 6px 6px 50px;padding:0 .55rem 0 0;min-height:var(--hud-profile-height);column-gap:.6rem;background:linear-gradient(90deg,rgb(var(--c-scrim) / .55),rgb(var(--c-scrim) / 0)); }
.party-status>img { width:var(--hud-profile-height);height:var(--hud-profile-height);border-radius:50%;border:3px solid var(--gold);object-fit:cover;object-position:50% 15%; }
.party-status .hp-track { border-radius:4px;height:5px;overflow:hidden; }
.party-status strong { text-shadow:0 1px 4px var(--bg-void); }
.field-corner { top:var(--hud-edge-top);gap:.35rem;max-width:48%; }
#minimap-canvas { width:var(--hud-radar);height:var(--hud-radar);border-radius:50%;border:2px solid var(--gold-line); }
.field-corner .operation-mark { display:flex;flex-direction:column;align-items:end;gap:2px;text-align:right;text-shadow:0 1px 4px var(--bg-void); }
.field-corner .operation-mark .eyebrow { display:none; }
.field-corner .operation-mark strong { font-size:var(--ui-small); }
.field-corner .operation-mark #operation-stage { font-size:var(--ui-small); }
.field-bottom { inset:0;pointer-events:none; }
.objective { position:absolute;right:var(--hud-edge-right);top:calc(var(--hud-edge-top) + var(--hud-radar) + 5.3rem);width:min(42vw,15rem);padding:0;border:0;background:transparent;text-align:right;text-shadow:0 1px 5px var(--bg-void); }
.objective .eyebrow { color:var(--gold-bright);font-size:var(--ui-small); }
.objective progress { height:3px; }
.main-nav { left:auto;right:var(--hud-edge-right);transform:none;width:max-content;display:flex;align-items:center;background:transparent;border:0;gap:calc(var(--hud-unit) * .4); }
.main-nav button { flex:0 0 var(--nav-button);inline-size:var(--nav-button);block-size:var(--nav-button);aspect-ratio:1;flex-direction:column;gap:.2rem;border:0;border-radius:50%;background:rgb(var(--c-scrim) / .7);font-size:var(--ui-small);padding:.35rem; }
.main-nav button[aria-selected=true] { box-shadow:inset 0 0 0 2px var(--gold);background:rgb(var(--c-panel) / .95); }
.main-nav img { width:clamp(22px,calc(var(--hud-unit) * 1.6),30px);height:clamp(22px,calc(var(--hud-unit) * 1.6),30px);image-rendering:auto; }
.nav-dot { right:12%;top:8%; }
.screen-panel { border:0;border-radius:18px;background:rgb(var(--c-deep) / .95); }
.screen-heading { border-bottom:0; }
.screen-heading .eyebrow { display:none; }
.back-button { border-radius:30px; }
.gear-card,.gear-slot { border-radius:12px;border-top:0;box-shadow:inset 0 0 0 1px var(--grade-color,var(--panel-line)); }
.gear-card.selected,.gear-slot.selected { outline:2px solid var(--gold);outline-offset:-2px; }
.inventory-grid { padding:.3rem; }
.equipment-detail { background:rgb(var(--c-panel) / .6);border:0;border-radius:18px;padding:1rem; }
.hero-art,.banner-art { border:0;border-radius:15px;background:radial-gradient(ellipse at center,var(--bg-panel-mid),var(--bg-deep)); }
.primary,.secondary { border-radius:24px; }
.dialog-panel { border-radius:20px; }
.quest-row { display:flex;align-items:center;justify-content:space-between;gap:.6rem;font-size:var(--ui-small);padding:.5rem 0;border-bottom:1px solid var(--panel-line); }
.quest-row button { font-size:var(--ui-small); }
body:not([data-screen=field]) .command-profile .party-status { display:none; }
body:not([data-screen=field]) .command-bar>#settings-open { margin-right:0; }
@media (max-width:560px), (max-height:560px) {
  .screen-panel,.modal-backdrop>.dialog-panel { border-radius:0; }
  .command-profile .resource { gap:.25rem; }
  .command-profile .resources { gap:.7rem; }
  .command-bar>#settings-open { width:36px;min-height:36px;height:36px;padding:6px; }
  .party-status strong { font-size:.8rem; }
  .party-status span { font-size:.62rem; }
  .party-status>img { border-width:2px; }
  .objective { top:calc(var(--hud-edge-top) + var(--hud-radar) + 4.2rem); }
}

.legal-links {display:flex; flex-wrap:wrap; gap:1rem; font-size:.75rem; color:var(--ink-dim)}
.legal-links a {padding:.75rem 0}

/* 보상·캐시 재화는 기존 네 화면 안에 연결한다. */
.command-profile .resources { flex-wrap:wrap;row-gap:.15rem;column-gap:.65rem; }
.command-tools { display:flex;flex-direction:column;gap:.25rem;margin-right:calc(var(--hud-radar) + .5rem); }
.command-tools .icon-button { position:relative;border:0;border-radius:50%;background:rgb(var(--c-scrim) / .55); }
.icon-badge { position:absolute;right:-2px;top:-2px;min-width:17px;height:17px;border-radius:50%;background:var(--danger);color:var(--on-brand);font-size:.6rem;display:grid;place-items:center;border:1px solid var(--gold-line); }
.ticket-shop { display:grid;gap:.6rem;border-top:1px solid var(--gold-line);padding-top:1rem; }
.ticket-shop>header { display:flex;align-items:center;justify-content:space-between;gap:.7rem;flex-wrap:wrap;font-size:var(--ui-small); }
.ticket-shop .draw-actions button { min-height:48px; }
.text-button { border:0;background:transparent;color:var(--gold-bright);text-decoration:underline;font-size:var(--ui-small);padding:.5rem; }
.mail-panel { width:min(100%,42rem); }
.mail-card { padding:1rem 0;border-bottom:1px solid var(--panel-line); }
.mail-card:first-child { padding-top:0; }
.mail-card>header { display:flex;align-items:baseline;justify-content:space-between;gap:.7rem;flex-wrap:wrap; }
.mail-card>header h3 { margin:0;color:var(--ink); }
.mail-card>header small { color:var(--ink-dim); }
.mail-message { white-space:pre-wrap;overflow-wrap:anywhere;margin:.8rem 0;color:var(--ink-soft); }
.mail-card>footer { display:flex;align-items:center;justify-content:space-between;gap:.75rem;flex-wrap:wrap;font-size:var(--ui-small); }
.mail-card>footer strong { color:var(--gold-bright);font-weight:500; }
.mail-claimed { opacity:.7; }
.mail-empty { padding:2rem 0;text-align:center;color:var(--ink-dim); }

/* 첫 메인 메뉴: 화면 높이 안에 시작·버전·소식·정책을 배치한다. */
.surface-news { position:absolute;z-index:11;left:var(--hud-edge-left);bottom:calc(var(--hud-edge-bottom) + var(--nav-height) + .5rem);display:flex;gap:.4rem; }
.surface-news button { background:rgb(var(--c-scrim) / .8);font-size:var(--ui-small);padding:.5rem .75rem; }
body:not([data-screen=field]) .surface-news { display:none; }
.news-panel { width:min(100%,42rem); }
.news-tabs { display:flex;gap:.5rem;padding:.7rem 1.2rem;border-bottom:1px solid var(--panel-line); }
.news-tabs button { flex:1; }
.news-tabs button[aria-pressed=true] { color:var(--gold);border-color:var(--gold-line); }
.news-item+ .news-item { border-top:1px solid var(--panel-line);margin-top:1.5rem;padding-top:1.5rem; }
.news-item header { display:grid;gap:.45rem; }
.news-item h3 { margin:0; }
.news-item time { font-size:var(--ui-small);color:var(--ink-dim); }
.news-item p { white-space:pre-wrap;overflow-wrap:anywhere;margin-top:.8rem; }

/* 캐릭터 중심 게임 로비: NIKKE의 모서리 정보 + 소녀전선2의 출격/메뉴 배치. */
.title-screen { position:fixed;inset:0;z-index:20;overflow:clip;background:linear-gradient(180deg,rgb(var(--c-deep) / .35),rgb(var(--c-deep) / .12) 42%,rgb(var(--c-deep) / .92)); }
.title-portrait { position:absolute;left:37%;top:calc(var(--hud-edge-top) + 38px);transform:translateX(-50%);height:calc(100% - var(--hud-edge-top) - var(--hud-edge-bottom) - var(--tap-min) - 46px);width:58%;object-fit:contain;object-position:center bottom;pointer-events:none; }
.lobby-header { position:absolute;z-index:3;top:var(--hud-edge-top);left:var(--hud-edge-left);right:var(--hud-edge-right);display:flex;align-items:flex-start;gap:1.2rem; }
#title-name { margin:0;flex:none;width:clamp(120px,15vw,200px);line-height:0; }
#title-name img { width:100%;aspect-ratio:2.25;object-fit:cover;object-position:center; }
.lobby-resources { display:flex;gap:.6rem;margin-left:auto;padding-top:.5rem; }
.lobby-resources>span { display:flex;align-items:center;gap:.7rem;min-width:6rem;padding:.45rem .75rem;background:rgb(var(--c-scrim) / .7);border-bottom:1px solid var(--panel-line); }
.lobby-resources small { font-size:.7rem;color:var(--ink-soft); }
.lobby-resources strong { margin-left:auto;font-size:var(--ui-small);font-variant-numeric:tabular-nums; }
#title-settings { margin-top:.25rem;background:rgb(var(--c-scrim) / .7); }
.lobby-profile { position:absolute;z-index:3;top:calc(var(--hud-edge-top) + clamp(66px,7vw,94px));left:calc(var(--hud-edge-left) + .5rem);display:flex;align-items:center;gap:.65rem;max-width:40%; }
.lobby-profile-mark { display:grid;place-items:center;width:34px;height:34px;flex:none;border:1px solid var(--gold-line);color:var(--gold);font-weight:800;object-fit:cover;object-position:50% 20%; }
.lobby-profile>div { display:grid;gap:.15rem;min-width:0; }
.lobby-profile strong { font-size:var(--ui-small);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.lobby-profile small { font-size:.72rem;color:var(--ink-soft); }
.title-news { position:absolute;z-index:3;top:clamp(155px,28dvh,230px);left:calc(var(--hud-edge-left) + .5rem);display:grid;gap:.8rem; }
.title-news button { width:80px;min-height:62px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.25rem;padding:.45rem;border:0;border-left:2px solid var(--panel-line);border-radius:0;background:rgb(var(--c-scrim) / .58);font-size:.72rem; }
.title-news img { width:26px;height:26px;object-fit:contain; }
.title-news button:hover { border-left-color:var(--gold); }
.lobby-character { position:absolute;z-index:2;left:18%;bottom:calc(var(--hud-edge-bottom) + 4.5rem);display:grid;gap:.15rem;pointer-events:none;text-shadow:0 2px 10px var(--bg-deep); }
.lobby-character span { font-size:.75rem;color:var(--ink-soft); }
.lobby-character strong { font-size:2rem;letter-spacing:.12em; }
.lobby-actions { position:absolute;z-index:3;right:calc(var(--hud-edge-right) + 2vw);bottom:calc(var(--hud-edge-bottom) + 4.5rem);width:clamp(280px,34vw,460px);display:grid;gap:1rem; }
.lobby-deploy { display:flex;justify-content:space-between;align-items:center;min-height:104px;width:100%;border:0;border-left:4px solid var(--gold);border-radius:0;background:linear-gradient(90deg,rgb(var(--c-deep) / .25),rgb(var(--c-deep) / .9));color:var(--ink);padding:1rem 1.5rem;text-align:left; }
.lobby-deploy>span:first-child { display:grid;gap:.45rem; }
.lobby-deploy strong { font-size:clamp(1.8rem,3.4vw,3rem);letter-spacing:-.04em;line-height:1.1; }
.lobby-deploy small { font-size:var(--ui-small);color:var(--ink-soft); }
.lobby-deploy-arrow { color:var(--gold);font-size:3.5rem;font-weight:300;line-height:1; }
.lobby-shortcuts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem; }
.lobby-shortcuts button { position:relative;display:flex;align-items:center;justify-content:center;gap:.5rem;min-height:64px;background:rgb(var(--c-scrim) / .72);border:0;border-bottom:1px solid var(--panel-line);border-radius:0; }
.lobby-shortcuts img { width:28px;height:28px;object-fit:contain; }
.lobby-shortcuts small { position:absolute;top:.1rem;right:.3rem;font-size:.62rem;color:var(--gold); }
.lobby-footer { position:absolute;z-index:3;bottom:var(--hud-edge-bottom);left:var(--hud-edge-left);right:var(--hud-edge-right);display:flex;align-items:center;justify-content:space-between;gap:1rem;min-height:var(--tap-min); }
#title-version-status { font-size:.7rem;color:var(--ink-soft);max-width:50%; }
.lobby-footer .legal-links { display:flex;flex-wrap:nowrap;gap:.8rem;font-size:.7rem; }
@media (max-width:760px) {
  .title-portrait { left:50%;top:calc(var(--hud-edge-top) + 94px);height:calc(100% - var(--hud-edge-top) - var(--hud-edge-bottom) - var(--tap-min) - 252px);width:100%; }
  .lobby-header { gap:.5rem;align-items:flex-start; }
  #title-name { width:118px; }
  .lobby-resources { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.3rem;flex:1;padding-top:.3rem; }
  .lobby-resources>span { min-width:0;flex-direction:column;gap:.1rem;padding:.3rem; }
  .lobby-resources small { font-size:.6rem; }
  .lobby-resources strong { margin:0;font-size:.7rem; }
  .lobby-profile { top:calc(var(--hud-edge-top) + 62px);max-width:65%; }
  .title-news { top:clamp(132px,22dvh,190px);gap:.5rem; }
  .title-news button { width:62px;min-height:58px;font-size:.65rem; }
  .lobby-actions { left:var(--hud-edge-left);right:var(--hud-edge-right);bottom:calc(var(--hud-edge-bottom) + var(--tap-min) + .7rem);width:auto;gap:.45rem; }
  .lobby-deploy { min-height:72px;background:rgb(var(--c-deep) / .88);padding:.7rem 1rem; }
  .lobby-deploy strong { font-size:1.65rem; }
  .lobby-deploy small { font-size:.7rem; }
  .lobby-shortcuts button { min-height:54px;font-size:.8rem; }
  .lobby-shortcuts img { width:24px;height:24px; }
  .lobby-character { left:auto;right:calc(var(--hud-edge-right) + 1rem);bottom:calc(var(--hud-edge-bottom) + var(--tap-min) + 152px);text-align:right; }
  .lobby-character strong { font-size:1.5rem; }
  .lobby-footer { gap:.5rem; }
  .lobby-footer .legal-links { gap:.5rem;font-size:.62rem; }
  #title-version-status { font-size:.62rem; }
}
@media (max-height:560px) {
  .title-portrait { left:34%;top:calc(var(--hud-edge-top) + 32px);height:calc(100% - var(--hud-edge-top) - var(--hud-edge-bottom) - var(--tap-min) - 36px);width:46%; }
  .lobby-header { gap:.7rem; }
  #title-name { width:110px; }
  .lobby-profile { top:calc(var(--hud-edge-top) + 55px); }
  .title-news { top:calc(var(--hud-edge-top) + 103px);gap:.35rem; }
  .title-news button { width:62px;min-height:49px;gap:0;padding:.25rem;font-size:.65rem; }
  .title-news img { width:21px;height:21px; }
  .lobby-actions { left:auto;right:var(--hud-edge-right);width:clamp(240px,39vw,400px);bottom:calc(var(--hud-edge-bottom) + var(--tap-min) + .4rem);gap:.4rem; }
  .lobby-deploy { min-height:64px;padding:.55rem .9rem; }
  .lobby-deploy strong { font-size:clamp(1.4rem,3.4vw,2rem); }
  .lobby-deploy small { font-size:.65rem; }
  .lobby-shortcuts button { min-height:49px;font-size:.7rem;gap:.3rem; }
  .lobby-shortcuts img { width:21px;height:21px; }
  .lobby-character { left:calc(var(--hud-edge-left) + .7rem);right:auto;bottom:calc(var(--hud-edge-bottom) + var(--tap-min) + .3rem);text-align:left; }
  .lobby-character strong { font-size:1.35rem; }
}

/* 모집 영수증의 공개 연출. 실제 결과와 소비는 서버 응답으로만 확정한다. */
.recruit-panel { container:recruit / inline-size;width:min(100%,68rem);height:min(90dvh,52rem);border-radius:0;background:linear-gradient(135deg,var(--bg-panel),var(--bg-deep)); }
.recruit-panel>header { padding:.8rem 1.2rem; }
.recruit-panel>header .eyebrow { font-size:.6rem; }
.recruit-panel>header h2 { font-size:1.25rem; }
.recruit-panel>footer { min-height:72px; }
.recruit-panel #recruit-status { color:var(--ink-dim);font-size:var(--ui-small); }
.recruit-actions { display:flex;gap:.6rem;flex:none; }
.recruit-actions button { min-height:var(--tap-min); }
.recruit-scene { flex:1;padding:0; }
.recruit-terminal { min-height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:1rem;text-align:center;padding:1.5rem; }
.recruit-terminal h3 { margin:0;font-size:clamp(1.5rem,4cqw,2.5rem);color:var(--ink); }
.recruit-terminal p { color:var(--ink-soft);max-width:32rem;line-height:1.7; }
.recruit-terminal small { color:var(--ink-dim);font-size:var(--ui-small); }
.recruit-signal { position:relative;display:grid;place-items:center;width:clamp(76px,22dvh,180px);aspect-ratio:1;flex:none; }
.recruit-signal img { width:68%;height:68%;object-fit:contain; }
.recruit-signal i { position:absolute;inset:0;border:1px solid var(--info);border-radius:50%;animation:recruit-signal-pulse 1.7s ease-out infinite; }
.recruit-signal i:nth-child(2) { inset:10%;animation-delay:.65s; }
.recruit-signal-track { width:min(70%,18rem);height:2px;overflow:hidden;background:var(--panel-line); }
.recruit-signal-track span { display:block;height:100%;width:35%;background:var(--info);animation:recruit-scan 1.3s ease-in-out infinite; }
.recruit-error .eyebrow { color:var(--danger); }
.recruit-reveal { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;min-height:100%;gap:1.25rem;padding:1rem 2rem; }
.recruit-portrait { position:relative;display:grid;place-items:center;align-self:stretch;min-height:0;overflow:hidden; }
.recruit-portrait>img { position:relative;width:100%;height:min(58dvh,37rem);object-fit:contain;object-position:center;animation:recruit-personnel-in .5s ease-out both; }
.recruit-personnel-mark { position:absolute;inset:0;display:grid;place-items:center;font-size:clamp(7rem,26cqw,19rem);font-weight:900;font-style:italic;letter-spacing:-.1em;color:var(--panel-line);opacity:.4; }
.recruit-identity { display:flex;flex-direction:column;align-items:flex-start;gap:1rem;min-width:0;padding:1rem 0; }
.recruit-acquired-label { color:var(--info);font-size:var(--ui-small);letter-spacing:.08em; }
.recruit-grade { font-size:4rem;line-height:1;color:var(--gold-bright);font-weight:800; }
.recruit-grade small { font-size:var(--ui-small);font-weight:400;margin-left:.5rem; }
.recruit-identity h3 { margin:0;color:var(--ink);font-size:clamp(2.4rem,7cqw,4.5rem);line-height:1.1; }
.recruit-identity p { line-height:1.7;color:var(--ink-soft); }
.recruit-identity .eyebrow { color:var(--gold); }
.recruit-identity>small { font-size:var(--ui-small);color:var(--ink-dim); }
.recruit-assigned { padding:.65rem .8rem;border-left:2px solid var(--ok);background:var(--bg-slot);color:var(--ok);font-size:var(--ui-small); }
.recruit-summary { padding:1.5rem;display:grid;gap:1.2rem; }
.recruit-summary-heading { text-align:center; }
.recruit-summary-heading h3 { margin:.45rem 0;font-size:clamp(1.5rem,4cqw,2.5rem);color:var(--ink); }
.recruit-summary-heading p { color:var(--gold-bright); }
.recruit-results { list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.7rem;margin:0;padding:0; }
.recruit-results:has(>li:only-child) { grid-template-columns:minmax(140px,190px);justify-content:center; }
.recruit-result-card { position:relative;display:flex;flex-direction:column;align-items:center;gap:.35rem;min-width:0;padding:.65rem .4rem;background:var(--bg-slot);border:1px solid var(--panel-line);border-top:3px solid var(--gold); }
.recruit-result-card.is-new { border-color:var(--info); }
.recruit-result-card>img { width:100%;height:90px;object-fit:contain;object-position:center top; }
.recruit-card-order { position:absolute;left:.4rem;top:.3rem;font-size:.6rem;color:var(--ink-dim); }
.recruit-card-grade { position:absolute;right:.35rem;top:.25rem;font-size:.6rem;color:var(--gold-bright); }
.recruit-result-card>strong { font-size:var(--ui-small); }
.recruit-result-card>small { color:var(--gold-bright);font-size:.7rem; }
.recruit-result-card.is-new>small { color:var(--info); }
.recruit-growth { width:100%;padding:1rem;background:var(--bg-slot);border-left:2px solid var(--gold-line); }
.recruit-growth>div { display:flex;justify-content:space-between;gap:.5rem;font-size:var(--ui-small); }
.recruit-growth>div>span { color:var(--gold-bright); }
.recruit-growth progress { width:100%;height:5px;margin:.7rem 0 .25rem;accent-color:var(--gold); }
.recruit-growth p,.recruit-result-note { color:var(--ink-soft);font-size:var(--ui-small); }
.recruit-result-note { text-align:center; }
.recruit-history { list-style:none;margin:.6rem 0 0;padding:0; }
.recruit-history li { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.6rem 0;border-top:1px solid var(--panel-line);font-size:var(--ui-small); }
.recruit-history button { width:auto;margin:0;padding:.5rem; }
@keyframes recruit-signal-pulse { from { transform:scale(.75);opacity:.8; } to { transform:scale(1.1);opacity:0; } }
@keyframes recruit-scan { from { transform:translateX(-105%); } to { transform:translateX(390%); } }
@keyframes recruit-personnel-in { from { opacity:0;transform:translateY(12px); } to { opacity:1;transform:translateY(0); } }
@container recruit (max-width:560px) {
  .recruit-panel>footer { flex-wrap:wrap;gap:.5rem;padding:.7rem 1rem; }
  .recruit-panel #recruit-status { flex:1 1 100%; }
  .recruit-actions { width:100%;justify-content:flex-end; }
  .recruit-actions .primary { flex:1; }
  .recruit-reveal { grid-template-columns:1fr;padding:1rem;gap:.25rem; }
  .recruit-portrait>img { height:min(37dvh,22rem); }
  .recruit-identity { align-items:center;text-align:center;gap:.6rem;padding:.25rem 0; }
  .recruit-grade { font-size:2rem; }
  .recruit-identity h3 { font-size:2.4rem; }
  .recruit-summary { padding:1rem;gap:.85rem; }
  .recruit-results { grid-template-columns:repeat(3,minmax(0,1fr));gap:.45rem; }
  .recruit-result-card>img { height:55px; }
  .recruit-result-card>small { font-size:.65rem; }
  .recruit-growth { padding:.75rem; }
}
@media (max-height:560px) {
  .recruit-panel>header { padding:.5rem 1rem; }
  .recruit-panel>footer { min-height:60px;padding:.5rem 1rem; }
  .recruit-terminal { gap:.6rem;padding:1rem; }
  .recruit-terminal .eyebrow { display:none; }
  .recruit-identity { gap:.5rem; }
  .recruit-grade { font-size:2.2rem; }
  .recruit-identity h3 { font-size:2.4rem; }
}
.reduced-motion .recruit-signal i,.reduced-motion .recruit-signal-track span,.reduced-motion .recruit-portrait>img { animation:none; }

/* 밝은 게임 GUI: 패널은 흰색, 선택은 파랑, 주요 실행은 노랑으로 읽는다. */
html { color-scheme:light; }
.screen-panel { background:var(--panel-wash);border:1px solid var(--line-card);border-radius:8px;box-shadow:0 8px 32px rgb(var(--c-overlay) / .16); }
.screen-heading { background:var(--bg-panel-soft);border-bottom:2px solid var(--line-info); }
.screen-heading h1 { color:var(--brand-navy);font-style:italic; }
.screen-heading .eyebrow { display:block;letter-spacing:.12em;font-size:.6rem; }
.primary,.secondary,.back-button { border-radius:5px; }
.secondary { border-color:var(--line-info); }
.dialog-panel { border-radius:8px;box-shadow:0 12px 36px rgb(var(--c-overlay) / .22); }
.dialog-panel>header { background:var(--bg-panel-soft);border-bottom:2px solid var(--line-info); }
.dialog-panel>footer { background:var(--bg-panel); }
.command-bar,.party-status strong,.field-corner .operation-mark,.objective,.hero-name,.banner-name { text-shadow:none; }
.command-profile .resources,.party-status { background:rgb(var(--c-panel) / .96);box-shadow:0 2px 8px rgb(var(--c-overlay) / .15); }
.party-status { border-radius:6px;padding-right:.7rem; }
.party-status>img { border-color:var(--line-info); }
.field-corner .operation-mark { background:rgb(var(--c-panel) / .94);padding:.25rem .45rem;border-radius:3px; }
.objective { background:rgb(var(--c-panel) / .94);padding:.5rem .65rem;border-radius:4px; }
.main-nav button { border-radius:6px;background:var(--brand-navy);color:var(--on-brand);box-shadow:0 2px 6px rgb(var(--c-overlay) / .18); }
.main-nav button[aria-selected=true] { background:var(--info);color:var(--on-brand);box-shadow:inset 0 -3px var(--accent); }
.main-nav img { opacity:1; }
.command-tools .icon-button,#title-settings,.title-news button,.lobby-shortcuts button { background:var(--brand-navy);color:var(--on-brand);border-radius:4px; }
.command-tools .icon-button:hover,#title-settings:hover,.title-news button:hover,.lobby-shortcuts button:hover { background:var(--info); }
.lobby-shortcuts small { color:var(--accent); }
#title-name img { filter:drop-shadow(0 1px 1px var(--brand-navy)); }
.lobby-resources>span { background:rgb(var(--c-panel) / .94);border-bottom:2px solid var(--line-info); }
.lobby-profile { background:rgb(var(--c-panel) / .9);padding:.3rem .5rem;border-radius:4px; }
.lobby-deploy { background:var(--accent);border-left:4px solid var(--info);color:var(--ink);box-shadow:0 4px 14px rgb(var(--c-overlay) / .12); }
.lobby-deploy:hover:not(:disabled) { background:var(--accent-hover); }
.lobby-deploy small { color:var(--ink-soft); }
.lobby-character { text-shadow:0 1px 5px var(--bg-panel); }
.field-empty,.toast,.battle-notice { background:rgb(var(--c-panel) / .97); }
.hero-art,.banner-art { background:linear-gradient(135deg,var(--bg-panel-soft),var(--bg-panel) 55%,var(--bg-panel-mid));border-radius:5px; }
.hero-art { align-self:start;height:min(62dvh,570px); }
.hero-art>img { height:100%; }
.hero-name { background:rgb(var(--c-panel) / .92);padding:.55rem .85rem;border-left:3px solid var(--info); }
.hero-info { gap:.85rem; }
.hero-level { padding:.7rem;background:var(--bg-panel-soft);border:0;border-radius:4px; }
.growth-section { padding:.8rem;background:var(--bg-slot);border:1px solid var(--line-quiet);border-radius:4px; }
.growth-section progress { display:block;margin:.5rem 0; }
.stat-list { gap:0 .8rem;padding:.45rem .7rem;background:var(--bg-panel-soft);border-radius:4px; }
.hero-reference { border:0;padding:0; }
.hero-reference summary { min-height:30px; }
.skill-description { background:var(--bg-slot);padding:.5rem .65rem;border-radius:0 4px 4px 0; }
.gear-card,.gear-slot { border-radius:4px; }
.gear-card.selected,.gear-slot.selected { outline-color:var(--info);background:var(--bg-panel-soft); }
.gear-card img,.gear-slot img,.gear-identity>img { background:var(--brand-navy);border-radius:4px;padding:3px; }
.equipment-detail { border:1px solid var(--line-card);border-radius:5px;background:var(--bg-panel); }
.gear-comparison { margin:.6rem 0; }
.gear-comparison th,.gear-comparison td { padding:.4rem .2rem; }
.supply-station { padding:.8rem;background:var(--bg-panel-soft);border:1px solid var(--line-card);border-radius:4px; }
.armory-main>.supply-station:first-child { margin:0 0 1rem; }
.gear-actions { margin:.7rem 0; }
.banner-art { align-self:start;height:min(56dvh,520px); }
.banner-art>img { height:100%; }
.banner-caption { background:rgb(var(--c-panel) / .94);color:var(--ink-soft); }
.banner-name { background:rgb(var(--c-panel) / .9);padding:.5rem .75rem;border-left:3px solid var(--info); }
.gacha-console { gap:.8rem;justify-content:flex-start; }
.gacha-console>h2 { color:var(--brand-navy); }
.pool-line { background:var(--bg-panel-soft);border:0;padding:.65rem .8rem; }
.ticket-balance { padding:0 .3rem; }
#draw-one { background:var(--bg-panel-mid);border-color:var(--line-info);color:var(--ink); }
#draw-one:hover:not(:disabled) { background:var(--bg-panel-soft); }
.draw-actions button { border-radius:5px;min-height:70px;font-weight:800; }
.draw-actions small { opacity:1;font-weight:500; }
.recruit-panel { background:linear-gradient(135deg,var(--bg-panel),var(--bg-panel-soft)); }
.recruit-signal { background:var(--brand-navy);border-radius:50%; }
.recruit-signal i { border-color:var(--line-info); }
@container overlay (max-width:480px) {
  .hero-art { height:240px;min-height:240px; }
  .hero-art>img { height:240px;object-position:75% bottom; }
  .hero-name { left:.5rem;bottom:.6rem;padding:.4rem .6rem; }
  .hero-name h2 { font-size:2rem; }
  .banner-art { height:190px;min-height:190px; }
  .banner-art>img { height:190px;object-position:85% bottom; }
  .banner-name { left:.5rem;bottom:3rem;padding:.4rem .6rem; }
  .banner-name h2 { font-size:2.3rem; }
  .gacha-console>.eyebrow { display:none; }
}
@media (max-width:560px), (max-height:560px) {
  .screen-panel,.modal-backdrop>.dialog-panel { border:0;border-radius:0; }
  .screen-heading .eyebrow { display:none; }
}

.gear-back { display:none; }
@container overlay (max-width:760px) { .gear-back { display:block;margin-bottom:.6rem; } }

/* 모든 작업은 전체 화면이다. 내용은 탭/페이지로 바꾸고 화면 자체를 스크롤하지 않는다. */
body:not([data-screen=field]) .command-bar { display:none; }
.screen-panel { inset:0;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) calc(var(--nav-height) + var(--hud-edge-bottom) + .5rem) env(safe-area-inset-left,0px);background:var(--bg-deep); }
.screen-heading { padding:.6rem 1rem;min-height:56px; }
.screen-heading h1 { font-size:1.65rem; }
.screen-heading .eyebrow { display:none; }
.section-tabs { display:flex;flex:none;gap:.25rem;padding:.3rem 1rem;border-bottom:1px solid var(--line-card);background:var(--bg-panel); }
.section-tabs button { flex:1;max-width:13rem;padding:.4rem .6rem;border:0;border-radius:3px;font-size:var(--ui-small);white-space:nowrap; }
.section-tabs button[aria-pressed=true] { background:var(--info);color:var(--on-brand);box-shadow:inset 0 -3px var(--accent); }
.screen-body { flex:1;min-height:0;overflow:hidden;padding:clamp(.6rem,1.5vmin,1.5rem); }
.view-page { min-height:0;height:100%;display:flex;flex-direction:column;gap:.65rem; }
.hero-layout { height:100%;min-height:0;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(.7rem,3vw,3rem); }
.hero-art { height:100%;min-height:0;align-self:stretch; }
.hero-art>img { height:100%;max-height:none; }
.hero-info { min-height:0;justify-content:center; }
.hero-info .view-page { height:auto;max-width:48rem;width:100%; }
.hero-level { flex:none;padding:.55rem .7rem; }
.growth-section { padding:.65rem; }
.growth-section button { margin-top:.4rem; }
.growth-stars { margin:.3rem 0; }
.hero-reference p { line-height:1.55; }
.hero-missions { display:grid;gap:.4rem; }
.equipment-pages { display:flex; }
.equipment-pages>.view-page { width:100%; }
.equipment-inventory { gap:.45rem; }
.inventory-heading { flex:none;margin:0; }
.paged-list-area { flex:1;min-height:0;display:flex;flex-direction:column; }
.inventory-grid { flex:1;min-height:0;overflow:hidden;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));grid-auto-rows:88px;gap:.45rem;padding:0; }
.gear-card { min-height:0;height:88px;padding:.4rem;gap:.15rem; }
.gear-card img { width:26px;height:26px; }
.gear-slot { min-height:90px; }
.loadout { max-width:60rem;width:100%;align-self:center; }
.equipment-detail { min-height:0;width:100%;height:100%;max-width:70rem;margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-auto-rows:min-content;column-gap:2rem;row-gap:.2rem;padding:.6rem 1rem;border:0; }
.gear-back { display:none; }
.gear-identity { grid-column:1; }
.gear-description,.equipment-detail>.skill-description { grid-column:1; }
.gear-comparison { grid-column:2;grid-row:1 / span 5;margin:0; }
.gear-actions { grid-column:1;grid-row:6;margin-top:.4rem; }
.equipment-detail>.muted,.equipment-detail>.positive { grid-column:2;font-size:.75rem; }
.gear-identity>img { width:48px;height:48px; }
.equipment-detail h2 { margin:.2rem 0; }
.supply-station { margin:0;max-width:60rem;width:100%;align-self:center; }
.forge-probabilities { grid-column:1/-1; }
.forge-probabilities h3 { margin:.3rem 0; }
.gacha-layout { height:100%;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(1rem,4vw,4rem); }
.banner-art { height:100%;min-height:0;align-self:stretch; }
.banner-art>img { height:100%;max-height:none; }
.gacha-console { height:100%;min-height:0;justify-content:center;max-width:54rem; }
.gacha-console>.view-page { justify-content:center; }
.gacha-console h2 { font-size:clamp(1.4rem,3cqw,2.8rem); }
.gacha-console .draw-actions { margin-top:auto; }
.gacha-console .view-page[data-subview-key=recruit] { height:auto;max-height:100%;gap:.8rem; }
.gacha-console .view-page[data-subview-key=history] { height:100%; }
.gacha-result { display:flex;flex-direction:column;min-height:0;height:100%;background:var(--bg-panel); }
.recruit-history { list-style:none;padding:0;margin:0;min-height:0;flex:1;overflow:hidden;display:grid;grid-auto-rows:64px;gap:.5rem; }
.recruit-history li { display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:var(--ui-small);padding:.3rem .5rem;background:var(--bg-panel-soft); }
.recruit-history button { width:auto;margin:0;flex:none; }
.recruit-rules { display:grid;gap:.8rem; }
.recruit-rules p { font-size:var(--ui-small); }
.page-controls { flex:none;display:flex;align-items:center;justify-content:center;gap:.8rem;padding:.25rem .5rem;min-height:52px; }
.page-controls button { min-width:72px;padding:.4rem .7rem; }
.page-controls span { font-size:.75rem;min-width:3.5rem;text-align:center;font-variant-numeric:tabular-nums; }
.modal-backdrop { padding:0; }
.modal-backdrop>.dialog-panel { width:100vw;height:100dvh;max-height:100dvh;border:0;border-radius:0;box-shadow:none;padding:env(safe-area-inset-top,0px) env(safe-area-inset-right,0px) env(safe-area-inset-bottom,0px) env(safe-area-inset-left,0px);background:var(--bg-deep); }
.dialog-panel>header,.dialog-panel>footer { padding:.6rem 1rem; }
.dialog-panel>header { min-height:56px; }
.dialog-panel>footer { min-height:60px; }
.dialog-body { flex:1;min-height:0;overflow:hidden;padding:1rem; }
.settings-pages>.view-page { max-width:64rem;margin:0 auto; }
.settings-pages h3 { margin:0 0 .5rem; }
.settings-pages .setting-row { margin:.4rem 0;min-height:32px; }
.account-removal { display:grid;gap:1rem; }
.account-removal label { display:grid;gap:.5rem; }
.account-removal button { justify-self:start; }
#mail-list,#news-list { display:flex;flex-direction:column; }
.mail-card,.news-item { display:flex;flex-direction:column;min-height:0;height:100%;padding:0;border:0;gap:.5rem; }
.mail-card header,.news-item header,.mail-card footer { flex:none; }
.mail-card h3,.news-item h3 { font-size:1.1rem;overflow-wrap:anywhere; }
.mail-card footer { min-height:44px; }
.reader-text { flex:1;min-height:0;overflow:hidden;white-space:pre-wrap;overflow-wrap:anywhere;margin:0!important;line-height:1.7; }
.news-item+.news-item { margin:0;padding:0;border:0; }
.recruit-panel>footer { min-height:72px; }
.recruit-reveal { height:100%;min-height:0;padding:.75rem 2rem; }
.recruit-portrait>img { height:100%;max-height:72dvh; }
.recruit-summary { height:100%;min-height:0;display:flex;flex-direction:column;justify-content:center; }
.recruit-results { min-height:0; }
@container overlay (max-width:480px) {
  .hero-layout { grid-template-columns:minmax(0,.45fr) minmax(0,1fr);gap:.5rem; }
  .hero-name { left:0;right:0;bottom:.4rem;padding:.3rem;gap:.3rem; }
  .hero-name h2 { font-size:1.35rem; }
  .hero-name small { font-size:.6rem; }
  .hero-name .grade-badge { width:20px;height:26px;font-size:1rem; }
  .hero-level { flex-wrap:wrap;gap:.3rem; }
  .hero-level strong { font-size:1.35rem; }
  .hero-level button { width:100%;font-size:.75rem;padding:.4rem; }
  .growth-heading { flex-wrap:wrap;gap:.2rem; }
  .growth-heading strong { font-size:1rem; }
  .growth-section button { font-size:.75rem;padding:.4rem; }
  .growth-stars { gap:.15rem; }
  .growth-stars .star { font-size:1.3rem; }
  .stat-list { grid-template-columns:1fr;padding:.4rem; }
  .stat-list div { padding:.3rem 0; }
  .hero-reference p { font-size:.65rem; }
  .hero-info .skill-description { padding:.4rem;font-size:.8rem; }
  .hero-info .skill-description p { font-size:.7rem; }
  .quest-row { flex-wrap:wrap;gap:.15rem;font-size:.7rem; }
  .quest-row button { min-height:36px;font-size:.7rem; }
  .equipment-detail { display:flex;flex-direction:column;gap:.3rem;padding:.4rem; }
  .equipment-detail>.muted,.equipment-detail>.positive { font-size:.68rem; }
  .gear-description { margin:0; }
  .gear-comparison th,.gear-comparison td { padding:.3rem .2rem; }
  .gear-actions { margin:.3rem 0; }
  .gacha-layout { grid-template-columns:1fr;grid-template-rows:minmax(100px,.85fr) minmax(0,1fr);gap:.6rem; }
  .gacha-console .view-page[data-subview-key=recruit] { height:100%;gap:.45rem; }
  .gacha-layout[data-active-view]:not([data-active-view=recruit]) { grid-template-rows:1fr; }
  .gacha-layout[data-active-view]:not([data-active-view=recruit]) .banner-art { display:none; }
  .banner-name h2 { font-size:1.8rem; }
  .gacha-console>.view-page>h2,.gacha-console>.view-page>.eyebrow { display:none; }
  .ticket-balance strong { font-size:1.5rem; }
  .pool-line { padding:.45rem .6rem; }
  .draw-actions button { min-height:58px; }
}
@media (max-height:560px) {
  body:not([data-screen=field]) .main-nav { --nav-button:44px;--nav-height:44px;gap:.4rem; }
  body:not([data-screen=field]) .main-nav img { width:18px;height:18px; }
  body:not([data-screen=field]) .main-nav button { font-size:.65rem; }
  .screen-panel { padding-bottom:calc(44px + var(--hud-edge-bottom) + .3rem); }
  .screen-heading { min-height:44px;padding:.25rem .6rem; }
  .screen-heading h1 { font-size:1.2rem; }
  .screen-panel>.section-tabs { position:absolute;top:env(safe-area-inset-top,0px);left:90px;right:110px;padding:0;min-height:44px;border:0;background:transparent; }
  .section-tabs button { padding:.25rem .35rem;font-size:.7rem; }
  .screen-body { padding:.5rem; }
  .hero-layout { gap:1rem; }
  .hero-info .view-page { gap:.25rem; }
  .hero-owned { display:none; }
  .hero-level { padding:.25rem .4rem; }
  .hero-level strong { font-size:1.3rem; }
  .growth-section { padding:.3rem .4rem; }
  .growth-heading strong { font-size:1rem; }
  .growth-stars { margin:.15rem 0; }
  .growth-stars .star { font-size:1.1rem; }
  .growth-section progress { margin:.2rem 0; }
  .growth-section button { margin:.2rem 0 0;min-height:40px; }
  .growth-section p { line-height:1.2;font-size:.7rem; }
  .hero-missions { gap:0; }
  .quest-row { padding:.15rem 0; }
  .quest-row button { min-height:32px; }
  .stat-list div { padding:.15rem 0; }
  .hero-reference p { font-size:.65rem; }
  .equipment-detail { column-gap:1rem;padding:.25rem .5rem; }
  .gear-identity>img { width:32px;height:32px; }
  .equipment-detail h2 { font-size:1rem; }
  .gear-description { margin:.1rem 0; }
  .gear-comparison th,.gear-comparison td { padding:.15rem; }
  .gear-actions { grid-template-columns:repeat(3,1fr);gap:.3rem; }
  .gear-actions .primary { grid-column:auto; }
  .gear-actions button { padding:.25rem;font-size:.65rem; }
  .supply-station { padding:.4rem;gap:.25rem;grid-template-columns:1fr 1fr; }
  .forge-probabilities { grid-column:2;grid-row:1 / span 4; }
  .supply-station>button { grid-column:1; }
  .supply-station>p { grid-column:1;font-size:.7rem; }
  .rate-row { margin:.2rem 0;font-size:.7rem; }
  .gacha-console .view-page[data-subview-key=recruit] { gap:.3rem; }
  .gacha-console>.view-page>h2,.gacha-console>.view-page>.eyebrow { display:none; }
  .pool-line { padding:.4rem; }
  .ticket-balance strong { font-size:1.3rem; }
  .draw-actions button { min-height:48px; }
  #gacha-help { font-size:.7rem;line-height:1.3; }
  .dialog-panel>header { min-height:44px;padding:.3rem .7rem; }
  .dialog-panel>footer { min-height:52px;padding:.25rem .7rem; }
  .dialog-body { padding:.6rem; }
  .settings-pages [data-subview-key=game] { display:grid;grid-template-columns:1fr 1fr;column-gap:2rem;align-content:start; }
  .settings-pages h3 { grid-column:1/-1;font-size:1rem; }
  .settings-pages .setting-row { margin:.1rem 0;font-size:.8rem; }
  .account-removal { grid-template-columns:1fr 1fr;gap:.5rem; }
  .account-removal label { grid-column:2;grid-row:1 / span 2; }
  .recruit-panel>footer { min-height:60px; }
  .recruit-reveal { grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:.4rem 1rem;gap:1rem; }
  .recruit-portrait>img { max-height:100%; }
  .recruit-identity { gap:.35rem;padding:0; }
  .recruit-identity h3 { font-size:2rem; }
  .recruit-grade { font-size:1.5rem; }
  .recruit-identity p,.recruit-assigned { font-size:.75rem; }
}
/* 공용 설정·우편 버튼은 전체 화면의 헤더 안에서도 같은 진입점을 쓴다. */
body:not([data-screen=field]) .command-bar { display:flex;left:auto;right:var(--hud-edge-right);top:env(safe-area-inset-top,0px);height:56px;align-items:center; }
body:not([data-screen=field]) .command-profile { display:none; }
body:not([data-screen=field]) .command-tools { margin:0;flex-direction:row;gap:.3rem; }
.screen-heading { padding-right:116px; }
@media (max-height:560px) {
  body:not([data-screen=field]) .command-bar { height:44px; }
  body:not([data-screen=field]) .command-tools .icon-button { width:40px;height:40px;min-height:40px; }
  .screen-panel>.section-tabs { left:68px;right:210px; }
}
.main-nav button:hover:not(:disabled) { background:var(--info);color:var(--on-brand); }
@container overlay (max-width:480px) {
  .hero-layout { grid-template-columns:1fr;grid-template-rows:minmax(90px,min(25dvh,200px)) minmax(0,1fr); }
  .hero-art>img { object-position:70% bottom; }
  .hero-name { right:auto;left:.5rem;bottom:.5rem;padding:.4rem .6rem; }
  .hero-name h2 { font-size:1.8rem; }
  .hero-info { justify-content:start; }
  .hero-owned { display:none; }
  .hero-level { flex-wrap:nowrap; }
  .hero-level button { width:auto; }
  .hero-info .view-page { gap:.4rem; }
  .growth-heading { flex-wrap:nowrap; }
  .growth-section { padding:.5rem .65rem; }
  .stat-list { grid-template-columns:1fr 1fr; }
}
.recruit-card-pages { flex:1;min-height:0;display:flex;flex-direction:column; }
.recruit-results { flex:1;overflow:hidden;grid-auto-rows:158px;align-content:center; }
.recruit-result-card { height:158px; }
.recruit-summary { padding:1rem;gap:.65rem; }
.recruit-summary-heading h3 { margin:.25rem 0; }
.recruit-growth { padding:.65rem; }
.recruit-growth progress { margin:.35rem 0 .15rem; }
@container recruit (max-width:560px) {
  .recruit-panel>footer { flex-wrap:nowrap;padding:.4rem .6rem;gap:.4rem; }
  .recruit-panel #recruit-status { flex:1;font-size:.65rem; }
  .recruit-actions { width:auto;gap:.4rem; }
  .recruit-actions button { padding:.5rem .65rem;font-size:.75rem; }
  .recruit-summary { padding:.6rem;gap:.4rem; }
  .recruit-summary-heading h3 { font-size:1.4rem; }
  .recruit-summary-heading p,.recruit-summary-heading .eyebrow { font-size:.7rem; }
  .recruit-results { grid-template-columns:repeat(5,minmax(0,1fr));grid-auto-rows:96px;gap:.3rem; }
  .recruit-result-card { height:96px;padding:.3rem .15rem;gap:.2rem; }
  .recruit-result-card>img { height:48px; }
  .recruit-result-card>strong { font-size:.7rem; }
  .recruit-result-card>small { font-size:.6rem;white-space:nowrap; }
  .recruit-card-grade { position:static;font-size:.55rem;line-height:1; }
  .recruit-card-order { left:.15rem;font-size:.5rem; }
  .recruit-growth { padding:.45rem; }
  .recruit-growth>div,.recruit-growth p,.recruit-result-note { font-size:.65rem; }
  .recruit-reveal { grid-template-rows:minmax(0,1fr) auto;padding:.6rem; }
  .recruit-portrait>img { height:100%;max-height:38dvh; }
  .recruit-identity { gap:.3rem;padding:0; }
  .recruit-identity h3 { font-size:2rem; }
  .recruit-identity p,.recruit-assigned { font-size:.75rem; }
  .recruit-identity>small { font-size:.65rem; }
  .recruit-reveal:has(.recruit-growth) { grid-template-columns:minmax(0,.65fr) minmax(0,1fr);grid-template-rows:1fr; }
}
@media (max-height:560px) {
  .recruit-summary { display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);grid-template-rows:auto minmax(0,1fr) auto;gap:.3rem 1rem;padding:.5rem 1rem; }
  .recruit-summary-heading { grid-column:1;grid-row:1; }
  .recruit-summary-heading h3 { font-size:1.35rem; }
  .recruit-summary-heading p,.recruit-summary-heading .eyebrow { font-size:.65rem; }
  .recruit-card-pages { grid-column:2;grid-row:1 / span 3;height:100%; }
  .recruit-results { grid-auto-rows:94px; }
  .recruit-result-card { height:94px;padding:.25rem;gap:.15rem; }
  .recruit-result-card>img { height:44px; }
  .recruit-result-card>strong,.recruit-result-card>small { font-size:.65rem; }
  .recruit-growth { grid-column:1;grid-row:2;align-self:center;padding:.35rem; }
  .recruit-growth>div,.recruit-growth p,.recruit-result-note { font-size:.65rem; }
  .recruit-result-note { grid-column:1;grid-row:3; }
}
/* 영웅 목록 → 상세. 상세의 첫 페이지는 2D 전신 프로필이다. */
.hero-roster { display:flex;flex-direction:column;gap:.65rem;height:100%;min-height:0; }
.roster-heading { flex:none; }
.roster-heading h2 { font-size:1rem; }
.hero-roster-grid { display:flex;min-height:0;flex:1;gap:1rem; }
.hero-roster-card { position:relative;display:flex;flex-direction:column;height:100%;width:min(100%,28rem);padding:0;overflow:hidden;border:1px solid var(--line-info);background:linear-gradient(135deg,var(--bg-panel-soft),var(--bg-panel)); }
.hero-roster-card>img { width:100%;height:100%;min-height:0;object-fit:contain;padding-bottom:70px; }
.roster-card-info { position:absolute;bottom:0;left:0;right:0;display:grid;grid-template-columns:1fr auto;gap:.3rem;padding:.6rem 1rem;background:rgb(var(--c-panel) / .94);border-top:2px solid var(--line-info);text-align:left;font-size:var(--ui-small); }
.roster-card-info strong { grid-column:1/-1;font-size:1.2rem; }
.roster-card-info strong small { margin-left:.5rem;color:var(--ink-soft); }
.roster-card-info b { color:var(--info); }
.hero-layout[data-active-view=profile] { grid-template-columns:1fr;grid-template-rows:1fr; }
.hero-layout[data-active-view=profile] .hero-info { display:none; }
.hero-layout[data-active-view=profile] .hero-art { width:100%;max-width:none; }
.hero-layout[data-active-view=profile] .hero-art>img { object-position:center bottom; }
.hero-layout[data-active-view=profile] .hero-name { left:clamp(.5rem,8vw,8rem);bottom:1rem; }
.hero-display-tabs { position:absolute;z-index:2;top:.5rem;right:.5rem;display:flex;gap:.3rem; }
.hero-display-tabs button { padding:.45rem .7rem;min-height:40px;background:var(--bg-panel);font-size:.75rem; }
.hero-display-tabs button[aria-pressed=true] { background:var(--info);color:var(--on-brand); }
.hero-sd { position:absolute;inset:0;min-width:0;min-height:0; }
.hero-sd canvas { display:block;position:absolute;inset:0;width:100%;height:100%;touch-action:none; }
.hero-sd>[role=status] { position:absolute;left:10%;right:10%;top:45%;text-align:center;font-size:var(--ui-small); }
.model-rotation { position:absolute;z-index:2;right:.5rem;bottom:.5rem;display:flex;gap:.3rem; }
.model-rotation button { min-width:44px;background:var(--bg-panel); }
@container overlay (max-width:480px) {
  .hero-roster-card { width:100%; }
  .hero-layout:not([data-active-view=profile]) { grid-template-columns:1fr;grid-template-rows:1fr; }
  .hero-layout:not([data-active-view=profile]) .hero-art { display:none; }
  .hero-layout[data-active-view=profile] .hero-art { display:block; }
  .hero-info { justify-content:start; }
  .hero-layout[data-active-view=profile] .hero-name { left:.5rem;bottom:.6rem; }
  .hero-layout[data-active-view=profile] .hero-name h2 { font-size:2rem; }
  .hero-layout[data-active-view=profile] .hero-name small { font-size:.75rem; }
  .hero-layout[data-active-view=profile] .hero-art>img { padding:44px 0 70px; }
  .hero-display-tabs button { min-height:40px; }
  .equipment-detail .skill-description { padding:.25rem .5rem; }
  .equipment-detail .skill-description p { font-size:.68rem;line-height:1.4; }
  .equipment-detail>.muted,.equipment-detail>.positive { line-height:1.3; }
  .gear-comparison { font-size:.68rem; }
  .gear-actions button { min-height:40px;padding:.4rem;font-size:.7rem; }
}
@media (max-height:560px) {
  #hero-screen-title { font-size:.95rem;max-width:55px;line-height:1.1; }
  .hero-roster-card { width:min(100%,30rem); }
  .hero-roster-card>img { padding:0 130px 0 0; }
  .roster-card-info { left:auto;width:160px;top:0;align-content:center;border-top:0;border-left:2px solid var(--line-info);grid-template-columns:1fr; }
  .hero-display-tabs { top:.25rem;right:.25rem; }
  .hero-layout[data-active-view=profile] .hero-name { bottom:.5rem; }
  .hero-layout[data-active-view=profile] .hero-name h2 { font-size:1.7rem; }
  .hero-layout[data-active-view=profile] .hero-art>img { padding:0; }
}
@container overlay (max-width:480px) {
  .equipment-detail .gear-actions { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .equipment-detail .gear-actions .primary { grid-column:auto; }
}
/* 공용 메뉴는 필요할 때 화면 위에 뜬다. 하단 전용 행을 예약하지 않는다. */
.screen-panel { padding-bottom:env(safe-area-inset-bottom,0px); }
.screen-heading { padding-right:64px; }
body:not([data-screen=field]) .command-bar { height:56px; }
body:not([data-screen=field]) .command-tools .icon-button { width:44px;min-height:44px;height:44px; }
.command-tools #menu-open { position:relative;background:transparent; }
.surface-news { bottom:var(--hud-edge-bottom); }
.toast { bottom:calc(var(--hud-edge-bottom) + .5rem); }
.navigation-backdrop { position:fixed;inset:0;z-index:40;background:rgb(var(--c-overlay) / .32);display:flex;align-items:flex-start;justify-content:flex-end;padding:var(--hud-edge-top) var(--hud-edge-right); }
.navigation-popup { display:flex;flex-direction:column;width:min(320px,100%);max-height:calc(100dvh - var(--hud-edge-top) - var(--hud-edge-bottom));background:var(--bg-panel);border:1px solid var(--line-info);border-radius:6px;box-shadow:0 8px 28px rgb(var(--c-overlay) / .24);overflow:clip; }
.navigation-popup>header { display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.4rem .7rem;border-bottom:1px solid var(--line-card); }
.navigation-popup>header h2 { font-size:1rem; }
.navigation-popup .main-nav { position:static;inset:auto;transform:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));width:100%;height:auto;padding:.65rem;gap:.45rem; }
.navigation-popup .main-nav button { width:100%;height:66px;inline-size:auto;block-size:66px;aspect-ratio:auto;min-height:44px;flex:none;font-size:.7rem; }
.navigation-popup .main-nav img { width:24px;height:24px; }
.navigation-popup>footer { display:flex;justify-content:flex-end;gap:.5rem;padding:.4rem .7rem;border-top:1px solid var(--line-card);background:var(--bg-panel-soft); }
.navigation-popup>footer .icon-button { position:relative;background:var(--brand-navy); }
.hero-display-tabs button { min-width:44px;min-height:44px;padding:.4rem; }
@media (max-height:560px) {
  .screen-panel { padding-bottom:env(safe-area-inset-bottom,0px); }
  body:not([data-screen=field]) .command-bar { height:44px; }
  .screen-panel>.section-tabs { right:160px; }
}
.inventory-grid,.recruit-history,.recruit-results,.reader-text { contain:size; }
/* 짧은 가로 화면에서도 제목·본문·공용 페이지 버튼이 한 화면 안에 남는다. */
.news-tabs { padding:.25rem .6rem; }
.settings-pages [data-subview-key=delete] { gap:.4rem; }
@media (max-height:560px) {
  .account-removal { gap:.3rem; }
  .account-removal p { font-size:.75rem;line-height:1.4; }
  .account-removal input { padding:.3rem .5rem; }
  .account-removal label { font-size:.75rem;gap:.2rem; }
}
.recruit-portrait>img { position:absolute;inset:0;width:100%;height:100%;max-height:100%; }
@media (max-height:560px) { .recruit-reveal { grid-template-rows:minmax(0,1fr); } }
.toast { pointer-events:none; }
@container recruit (max-width:560px) {
  .recruit-results { grid-auto-rows:108px; }
  .recruit-result-card { height:108px; }
}
/* 짧은 레이블이어도 실제 터치 영역은 줄이지 않는다. */
.hero-info .quest-row button,.hero-info .growth-section button,.equipment-detail .gear-actions button { min-height:var(--tap-min); }
.settings-pages .setting-row { min-height:var(--tap-min); }
.account-removal input { min-height:var(--tap-min); }
.inventory-grid:has(>.empty-state) { grid-template-columns:1fr;grid-auto-rows:minmax(0,1fr); }
.inventory-grid>.empty-state { grid-column:1/-1;min-height:0;padding:.5rem;gap:.6rem; }

/* 보관함 탐색 조건과 상세 복귀는 화면 안에서 유지한다. */
.inventory-heading { min-height:28px; }
.inventory-heading #inventory-reset { min-height:28px;padding:.2rem .5rem;font-size:.75rem; }
.inventory-filters { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem;max-width:40rem;flex:none; }
.inventory-filters label { min-width:0; }
.inventory-filters select { width:100%;min-width:0;min-height:44px;padding:.4rem;font-size:.75rem; }
#equipment-list-back { display:none; }
#screen-equipment:has([data-subview-panel=equipment][data-subview-key=detail]:not([hidden])) #equipment-list-back { display:block; }
#screen-equipment:has([data-subview-panel=equipment][data-subview-key=detail]:not([hidden])) #equipment-field-back { display:none; }
.hero-gold { width:100%;font-size:.75rem;color:var(--ink-soft);text-align:right; }
@container overlay (max-width:480px) {
  .hero-layout[data-active-view=growth] { grid-template-columns:1fr;grid-template-rows:minmax(120px,1fr) auto; }
  .hero-layout[data-active-view=growth] .hero-art { display:block; }
  .hero-layout[data-active-view=growth] .hero-art>img { object-position:70% bottom; }
  .hero-layout[data-active-view=growth] .hero-name { right:auto;left:.5rem; }
  .hero-layout[data-active-view=growth] .hero-info { height:auto; }
}
@media (max-height:560px) {
  .equipment-inventory { display:grid;grid-template-columns:155px minmax(0,1fr);grid-template-rows:auto minmax(0,1fr); }
  .equipment-inventory>.paged-list-area { grid-column:1 / -1;grid-row:2; }
  .inventory-heading { grid-column:1;grid-row:1;flex-direction:column;align-items:flex-start;justify-content:center;gap:0; }
  .inventory-heading h2 { font-size:.8rem; }
  .inventory-filters { grid-column:2;grid-row:1;max-width:none; }
  .hero-gold { font-size:.65rem; }
}
.hero-level { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:.2rem .75rem; }
.hero-level>strong { grid-column:1; }
.hero-level>button { grid-column:2;grid-row:1 / span 2;width:auto;white-space:nowrap; }
.hero-level>.hero-gold { grid-column:1;grid-row:2;text-align:left; }
@media (max-height:560px) {
  .inventory-grid { grid-auto-rows:68px;gap:.3rem; }
  .inventory-grid .gear-card { height:68px;display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:1fr 1fr;align-items:center;column-gap:.35rem; }
  .inventory-grid .gear-card>img { grid-column:1;grid-row:1 / span 2; }
  .inventory-grid .gear-card>strong,.inventory-grid .gear-card>small { grid-column:2;font-size:.65rem;line-height:1.3; }
  .inventory-grid .gear-card:has(.positive) { grid-template-rows:repeat(3,minmax(0,1fr)); }
  .inventory-grid .gear-card:has(.positive)>img { grid-row:1 / span 3; }
}

/* 핵심 화면은 한 장이다. 편성과 세부 작업은 문맥 버튼으로 연다. */
.hero-party { flex:none;padding:.5rem clamp(.6rem,1.5vmin,1.5rem) 0; }
.hero-party>header { display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:.4rem; }
.hero-party h2 { font-size:.95rem; }
.hero-party header button { min-height:36px;padding:.25rem .7rem; }
.party-slots { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.4rem;width:100%;max-width:48rem; }
.party-slot { position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.1rem;min-width:0;min-height:90px;padding:.3rem .15rem;background:var(--bg-panel);border:1px solid var(--line-info); }
.party-slot>img { width:100%;height:48px;object-fit:cover;object-position:center 18%;border-radius:3px; }
.party-slot strong { font-size:.75rem; }
.party-slot small { font-size:.6rem;color:var(--ink-soft); }
.party-slot .party-slot-number { position:absolute;z-index:1;left:.25rem;top:.2rem;padding:0 .2rem;background:var(--bg-panel);color:var(--info); }
.party-slot .slot-plus { font-size:1.6rem;color:var(--info); }
.party-slot.selected { outline:2px solid var(--info);outline-offset:-2px;background:var(--bg-panel-soft); }
.hero-roster-grid { display:grid;grid-template-columns:repeat(auto-fill,minmax(125px,1fr));grid-auto-rows:210px;flex:1;min-height:0;contain:size;gap:.6rem; }
.hero-roster-card { width:100%;height:210px;min-width:0; }
.hero-roster-card>img { padding:0 0 58px; }
.roster-card-info { padding:.4rem .5rem;left:0;right:0;top:auto;width:auto;grid-template-columns:1fr auto; }
.roster-card-info strong { font-size:.95rem; }
.roster-card-info strong small { font-size:.65rem; }
.roster-card-info>span,.roster-card-info>b { font-size:.65rem; }
.hero-layout.hero-overview { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);grid-template-rows:minmax(0,1fr);gap:clamp(.6rem,2vw,2rem); }
.hero-layout.hero-overview .hero-art { display:block;min-height:0;height:100%; }
.hero-layout.hero-overview .hero-art>img { height:100%;width:100%;object-fit:contain;object-position:center bottom;padding:44px 0 62px; }
.hero-layout.hero-overview .hero-name { left:.5rem;right:auto;bottom:.5rem; }
.hero-layout.hero-overview .hero-name h2 { font-size:1.6rem; }
.hero-layout.hero-overview .hero-info { display:flex;flex-direction:column;justify-content:center;gap:.65rem;height:100%;max-width:44rem; }
.hero-quick-stats { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem; }
.hero-quick-stats>div { display:flex;flex-direction:column;gap:.2rem;padding:.35rem;border-bottom:2px solid var(--line-info);min-width:0; }
.hero-quick-stats small { color:var(--ink-soft);font-size:.7rem; }
.hero-quick-stats strong { font-size:clamp(.9rem,2cqw,1.4rem); }
.hero-growth-inline { display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25rem .5rem;padding:.5rem .7rem;border-bottom:1px solid var(--line-card); }
.hero-growth-inline .growth-heading { grid-column:1 / -1; }
.hero-growth-inline .growth-stars { grid-column:1;margin:0; }
.hero-growth-inline>small { grid-column:1;font-size:.7rem; }
.hero-growth-inline>button { grid-column:2;grid-row:2 / span 2;min-height:44px;font-size:.75rem;padding:.35rem .55rem; }
.hero-shortcuts { display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.4rem; }
.hero-shortcuts button { min-height:44px;padding:.35rem;font-size:.75rem; }
.equipment-inventory { display:flex;flex-direction:column;gap:.4rem; }
.armory-toolbar { display:grid;grid-template-columns:1fr 1fr 1fr;gap:.3rem;align-items:center;flex:none; }
.armory-toolbar label { min-width:0; }
.armory-toolbar select { width:100%;min-width:0;min-height:44px;padding:.3rem;font-size:.75rem; }
.armory-toolbar button { min-height:44px;padding:.3rem .5rem;font-size:.75rem;white-space:nowrap; }
.equipment-inventory .loadout { max-width:none;flex:none;gap:.3rem; }
.equipment-inventory .gear-slot { min-height:64px;height:64px;display:grid;grid-template-columns:26px minmax(0,1fr);grid-template-rows:1fr 1fr;gap:.2rem;padding:.3rem; }
.equipment-inventory .gear-slot img { grid-row:1 / span 2;width:26px;height:26px; }
.equipment-inventory .gear-slot span { font-size:.7rem; }
.equipment-inventory .gear-slot small { font-size:.6rem; }
.equipment-inventory .inventory-heading { flex-direction:row;align-items:center;justify-content:space-between;min-height:44px;gap:.5rem; }
.inventory-heading #inventory-filter-open,.inventory-heading #equipment-auto-equip { min-height:44px;font-size:.75rem;padding:.3rem .6rem; }
#inventory-filter-summary { flex:none;margin:0;font-size:.65rem;line-height:1.3; }
.gacha-shortcuts { display:flex;justify-content:flex-end;gap:.5rem;padding:.4rem 1rem;flex:none; }
.gacha-shortcuts button { min-height:40px;padding:.3rem .7rem;font-size:.75rem; }
.navigation-popup>footer { display:grid;grid-template-columns:1fr 1.4fr 44px 44px;gap:.35rem;padding:.4rem .6rem; }
.navigation-popup>footer>.secondary { min-width:0;padding:.3rem;font-size:.75rem; }
.utility-panel { container-type:inline-size;container-name:utility; }
.utility-body { display:flex;flex:1;min-height:0;overflow:hidden; }
.tool-pane { display:flex;flex-direction:column;gap:.65rem;min-height:0;height:100%;width:100%;max-width:70rem;margin:0 auto;overflow:hidden; }
.tool-pane>h3 { margin:0; }
.tool-pane .hero-tool-content { display:flex;flex:1;min-height:0;flex-direction:column;gap:.65rem; }
.tool-pane .hero-reference { font-size:.75rem;line-height:1.5; }
.tool-pane .inventory-filters { display:grid;grid-template-columns:1fr;max-width:32rem;gap:.8rem; }
.tool-pane .inventory-filters label { display:grid;gap:.3rem;font-size:.8rem; }
.tool-pane #inventory-reset { align-self:flex-start;min-height:44px; }
.hero-skill-pages { display:grid;grid-auto-rows:140px;gap:.6rem;min-height:0;flex:1;contain:size; }
.hero-skill-pages .skill-description { padding:.8rem;overflow:hidden; }
.hero-skill-pages p { line-height:1.6; }
.help-pages { flex:1;min-height:0;display:flex;flex-direction:column; }
.help-pages>article { flex:1;min-height:0;display:flex;flex-direction:column;gap:.8rem; }
.help-pages h3,.help-pages p { margin:0; }
.support-tools { max-width:45rem; }
.support-actions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.65rem; }
.support-actions button { display:flex;justify-content:space-between;min-height:52px;align-items:center;padding:.6rem 1rem; }
#support-version { margin:0; }
#support-update-check { align-self:flex-start; }
.settings-pages { display:flex;flex-direction:column;gap:.6rem; }
.settings-pages>.view-page { height:auto;flex:1; }
.settings-shortcuts { display:flex;flex:none;gap:.6rem; }
.settings-shortcuts button { min-height:44px; }
.party-editor { display:flex;flex-direction:column;gap:.65rem;min-height:0; }
.party-editor>.party-slots { flex:none;max-width:none; }
.party-edit-controls { display:flex;align-items:center;gap:.4rem;flex:none; }
.party-edit-controls strong { margin-right:auto;font-size:.85rem; }
.party-edit-controls button { min-width:44px;min-height:44px;padding:.35rem; }
.party-candidates { display:grid;grid-auto-rows:66px;gap:.45rem;min-height:0;flex:1;contain:size; }
.party-candidate { display:flex;gap:.7rem;align-items:center;padding:.4rem;text-align:left;min-height:66px; }
.party-candidate>img { width:45px;height:52px;object-fit:cover;object-position:center top;border-radius:3px; }
.party-candidate>span { display:flex;flex-direction:column;gap:.3rem; }
.party-candidate small { font-size:.7rem; }
.party-candidate[aria-pressed=true] { background:var(--bg-panel-soft);border-color:var(--info); }
#party-save-status { font-size:.75rem; }
@container overlay (max-width:480px) {
  .hero-layout.hero-overview { grid-template-columns:1fr;grid-template-rows:minmax(110px,1fr) auto;gap:.5rem; }
  .hero-layout.hero-overview .hero-info { height:auto;gap:.4rem; }
  .hero-layout.hero-overview .hero-art>img { padding:42px 0 0;object-position:70% bottom; }
  .hero-quick-stats>div { padding:.25rem; }
  .hero-quick-stats strong { font-size:.85rem; }
  .hero-growth-inline { padding:.3rem .5rem;gap:.15rem .4rem; }
  .hero-growth-inline .growth-heading strong { font-size:.85rem; }
  .hero-growth-inline .growth-stars .star { font-size:1.1rem; }
  .hero-level { padding:.35rem .5rem; }
  .hero-level>strong { font-size:1.1rem; }
  .equipment-inventory .gear-slot { display:flex;flex-direction:column;height:68px;min-height:68px;align-items:center;justify-content:center;gap:.1rem;padding:.15rem; }
  .equipment-inventory .gear-slot img { width:21px;height:21px; }
  .armory-toolbar button { font-size:.65rem;padding:.3rem; }
  .hero-party .party-slot { min-height:82px; }
  .hero-roster-grid { grid-template-columns:repeat(auto-fill,minmax(115px,1fr));grid-auto-rows:180px; }
  .hero-roster-card { height:180px; }
}
@media (max-height:560px) {
  .hero-party { padding-top:.25rem; }
  .hero-party>header { margin-bottom:.2rem; }
  .hero-party header button { min-height:32px; }
  .hero-party .party-slot { min-height:58px;height:58px;display:grid;grid-template-columns:30px minmax(0,1fr);grid-template-rows:1fr 1fr;padding:.25rem;gap:.1rem; }
  .hero-party .party-slot>img { grid-row:1 / span 2;height:42px; }
  .hero-party .party-slot strong { font-size:.65rem; }
  .hero-party .party-slot .slot-plus { grid-row:1 / span 2;font-size:1.3rem; }
  .hero-roster-grid { grid-auto-rows:110px;grid-template-columns:repeat(auto-fill,minmax(165px,1fr)); }
  .hero-roster-card { height:110px; }
  .hero-roster-card>img { padding:0 95px 0 0; }
  .roster-card-info { top:0;bottom:0;left:auto;width:100px;grid-template-columns:1fr;align-content:center;gap:.25rem;border:0; }
  .roster-card-info strong { font-size:.8rem; }
  .roster-card-info strong small { display:block;margin:0; }
  .hero-layout.hero-overview { grid-template-columns:minmax(0,.7fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr); }
  .hero-layout.hero-overview .hero-info { gap:.3rem; }
  .hero-layout.hero-overview .hero-art>img { padding:42px 0 52px; }
  .hero-quick-stats strong { font-size:.9rem; }
  .hero-growth-inline { padding:.2rem .4rem; }
  .hero-growth-inline .growth-stars .star { font-size:1rem; }
  .hero-growth-inline .growth-heading strong { font-size:.85rem; }
  .hero-growth-inline .growth-heading small { font-size:.6rem; }
  .hero-growth-inline>button { font-size:.65rem; }
  .armory-toolbar { grid-template-columns:1fr 1fr 1fr; }
  .equipment-inventory .gear-slot { height:44px;min-height:44px; }
  .equipment-inventory .inventory-heading { min-height:32px; }
  .inventory-heading #inventory-filter-open,.inventory-heading #equipment-auto-equip { min-height:32px; }
  .armory-toolbar select,.armory-toolbar button { min-height:36px; }
  .equipment-inventory { gap:.25rem; }
  .gacha-shortcuts { position:absolute;top:env(safe-area-inset-top,0px);left:85px;right:165px;height:44px;padding:.2rem;justify-content:center;gap:.25rem; }
  .gacha-shortcuts button { min-height:40px;font-size:.65rem;padding:.25rem .5rem; }
  .utility-body .inventory-filters { grid-template-columns:repeat(3,minmax(0,1fr));max-width:none; }
  .tool-pane .hero-missions { grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem; }
  .tool-pane .quest-row { display:flex;flex-direction:column;align-items:stretch;gap:.2rem; }
  .tool-pane .quest-row button { min-height:40px; }
  .tool-pane .stat-list { padding:.3rem; }
  .tool-pane .stat-list div { padding:.2rem; }
  .tool-pane .hero-reference { font-size:.65rem;margin:0; }
  .settings-pages>.view-page { display:grid;grid-template-columns:1fr 1fr;column-gap:1rem; }
  .settings-pages>.view-page .setting-row { margin:0; }
  .settings-shortcuts button { min-height:36px;font-size:.75rem; }
  .party-editor { display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr);gap:.4rem .8rem; }
  .party-editor>.party-slots { grid-column:1;grid-row:1;gap:.2rem; }
  .party-editor .party-slot { min-height:64px;height:64px;padding:.15rem; }
  .party-editor .party-slot>img { height:30px; }
  .party-editor .party-slot strong { font-size:.6rem; }
  .party-edit-controls { grid-column:1;grid-row:2;gap:.25rem; }
  .party-edit-controls strong { font-size:.65rem; }
  .party-edit-controls button { min-height:40px;min-width:32px;font-size:.7rem; }
  .party-candidates { grid-column:2;grid-row:1 / span 3; }
  .party-editor>.page-controls { grid-column:2;grid-row:4;min-height:40px; }
  .party-panel>footer { min-height:52px; }
  #party-save-status { font-size:.65rem; }
}
@media (max-height:560px) {
  .support-tools { display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-rows:auto auto auto;align-content:start; }
  .support-actions { grid-column:1 / -1;grid-template-columns:repeat(4,minmax(0,1fr));gap:.4rem; }
  .support-actions button { min-height:44px;padding:.4rem;font-size:.75rem; }
  #support-version { grid-column:1;align-self:center;font-size:.7rem; }
  #support-update-check { grid-column:2;grid-row:2;min-height:40px;font-size:.75rem; }
  .support-tools .legal-links { grid-column:1 / -1;margin:0; }
}
.tool-pane[data-tool-panel=combine] p { margin:.3rem 0;font-size:.75rem;line-height:1.45; }
@media (max-height:560px) {
  .tool-pane[data-tool-panel=combine] .supply-station { grid-template-columns:minmax(0,1fr) minmax(0,.85fr);align-content:start;gap:.6rem; }
  .tool-pane[data-tool-panel=combine] .supply-station>div:first-child { grid-column:1;grid-row:1; }
  .tool-pane[data-tool-panel=combine] .gear-actions { grid-column:2;grid-row:1;display:flex;flex-direction:column;align-self:center;margin:0; }
  .tool-pane[data-tool-panel=combine] .gear-actions button { min-height:44px; }
}
.party-panel>footer { justify-content:flex-end; }
#party-save-status { margin-right:auto; }
.party-panel>footer { display:grid;grid-template-columns:minmax(0,1fr) auto auto; }
#party-save-status { grid-column:1;margin:0;min-width:0;overflow-wrap:anywhere; }
#party-refresh { grid-column:2; }
#party-save { grid-column:3; }


/* 독립 이미지 버튼: 상자 대신 실루엣·라벨·선택 밑줄로 구분한다. */
.lobby-shortcuts .image-action,
.command-tools .image-action,
#title-settings.image-action,
.navigation-popup .main-nav .image-action,
.navigation-popup>footer .image-action {
  background:transparent;border:0;border-radius:0;box-shadow:none;color:var(--brand-navy);
}
.lobby-shortcuts .image-action { flex-direction:column;gap:.2rem;padding:.2rem .4rem; }
.lobby-shortcuts .image-action img { width:36px;height:36px; }
.lobby-shortcuts .image-action span { font-weight:800; }
.lobby-shortcuts .image-action small { color:var(--brand-navy);font-weight:800; }
.lobby-shortcuts .image-action span,
.lobby-shortcuts .image-action small { text-shadow:0 1px 2px var(--on-brand),0 0 5px var(--on-brand); }
.navigation-popup .main-nav .image-action { gap:.2rem;padding:.25rem .1rem .5rem; }
.navigation-popup .main-nav .image-action img { width:32px;height:32px; }
.navigation-popup .image-action[aria-selected=true] { color:var(--info);font-weight:900; }
.navigation-popup .main-nav .image-action[aria-selected=true]::after { content:'';position:absolute;bottom:0;left:35%;right:35%;height:3px;background:var(--info);border-radius:2px; }
.lobby-shortcuts .image-action:hover:not(:disabled),
.command-tools .image-action:hover:not(:disabled),
#title-settings.image-action:hover:not(:disabled),
.navigation-popup .main-nav .image-action:hover:not(:disabled),
.navigation-popup>footer .image-action:hover:not(:disabled) { background:transparent;border-color:transparent;color:var(--info);box-shadow:none; }
.image-action:hover:not(:disabled)>img { filter:brightness(1.08); }
.image-action:active:not(:disabled)>img { transform:translateY(1px); }
.image-action:focus-visible { outline:2px solid var(--info);outline-offset:2px; }
@media (max-height:560px) {
  .lobby-shortcuts .image-action { flex-direction:row; }
  .lobby-shortcuts .image-action img { width:28px;height:28px; }
}

/* 전투 설정은 선택과 적용 시점을 짧게 표시한다. */
.tool-pane[data-tool-panel=tactics] { max-width:52rem; }
.tool-pane[data-tool-panel=tactics] .support-actions { grid-template-columns:repeat(2,minmax(0,1fr)); }
.tool-pane[data-tool-panel=tactics] .support-actions button { flex-direction:column;align-items:flex-start;justify-content:center;gap:.3rem;min-width:0; }
.tool-pane[data-tool-panel=tactics] .support-actions button span { font-size:.75rem; }
.tool-pane[data-tool-panel=tactics] button[aria-pressed=true] { border-bottom:3px solid var(--info);font-weight:800; }
.tool-pane[data-tool-panel=tactics] .support-actions button[aria-pressed=true] strong::after { content:' · 선택됨';font-size:.7rem; }
.tool-pane[data-tool-panel=tactics] p { margin:.6rem 0;line-height:1.5;font-size:.8rem; }

/* 맵 진행은 화면 상단의 한 바에 모은다. 좁은 화면에서는 초상 아래의 빈 폭을 쓴다. */
.operation-progress { position:absolute;left:50%;top:var(--hud-edge-top);transform:translateX(-50%);width:min(42vw,32rem);padding:.35rem .6rem;background:rgb(var(--c-panel) / .94);border-radius:3px;color:var(--brand-navy); }
.operation-progress>div { display:flex;align-items:center;justify-content:space-between;gap:.5rem;font-size:.75rem; }
.operation-progress strong { font-variant-numeric:tabular-nums; }
.operation-progress progress { display:block;width:100%;height:6px;margin-top:.35rem; }
@media (max-width:560px) {
  .operation-progress { left:var(--hud-edge-left);right:calc(var(--hud-edge-right) + min(42vw,15rem) + .5rem);top:calc(var(--hud-edge-top) + var(--hud-radar) + 3.3rem);width:auto;transform:none;padding:.35rem; }
  .operation-progress>div { font-size:.65rem;gap:.25rem; }
}

/* 전장 조작은 투명한 아이콘 한 줄로 모아 시야를 남긴다. */
.objective { background:transparent;padding:0; }
.objective>.eyebrow { display:inline-block;padding:.15rem .35rem;background:rgb(var(--c-panel) / .94);border-radius:2px;font-size:.7rem; }
.field-actions { position:absolute;right:var(--hud-edge-right);bottom:var(--hud-edge-bottom);display:flex;align-items:center;gap:.25rem;pointer-events:auto; }
.field-actions .icon-button { position:relative;width:44px;height:44px;min-height:44px;margin:0;padding:6px;background:transparent;border:0;border-radius:0;box-shadow:none; }
.field-actions .icon-button:hover:not(:disabled) { background:transparent;box-shadow:none; }
.field-actions .field-icon-state { position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0 .15rem;background:var(--bg-panel);color:var(--brand-navy);font-size:.6rem;font-weight:800;line-height:1.2; }
#auto-challenge[aria-pressed=false]>img { opacity:.55; }

/* 장비 대상은 편성 순서와 같은 다섯 초상 슬롯에서 고른다. */
.equipment-party { display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:.3rem;flex:none; }
.equipment-party .party-slot { min-height:64px;height:64px;padding:.2rem; }
.equipment-party .party-slot img { width:30px;height:30px; }
.equipment-party .party-slot strong,.equipment-party .party-slot>small { font-size:.65rem; }
.equipment-party .party-slot[aria-pressed=true] { border-bottom:3px solid var(--info);background:var(--bg-panel); }

.tool-pane[data-tool-panel=combine] .supply-station { height:100%;display:flex;flex-direction:column;gap:.5rem; }
.synthesis-group-list { flex:1;min-height:0; }
.synthesis-groups { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.35rem;align-content:start; }
.synthesis-groups>button { display:flex;justify-content:space-between;gap:.4rem;min-height:44px;padding:.35rem;font-size:.75rem; }
.synthesis-groups>button span { font-size:.65rem; }

/* 전장 정보는 프로필·진행선·사각 지도만 남기고 아이콘은 공용 스케일로 키운다. */
.command-profile { width:var(--profile-width);max-width:calc(100% - var(--hud-radar) - var(--action-size) - var(--hud-gap) * 3);gap:var(--hud-gap-tight); }
.command-profile .party-status { width:100%;display:grid;grid-template-columns:calc(var(--hud-unit) * 3.6) minmax(0,1fr);gap:calc(var(--hud-unit) * .45);min-height:calc(var(--hud-unit) * 4.6);padding:calc(var(--hud-unit) * .3);background:rgb(var(--c-panel) / .96);border:1px solid var(--line-info);border-bottom:3px solid var(--info);border-radius:4px;text-align:left; }
.command-profile .party-status>img { width:100%;height:100%;min-height:calc(var(--hud-unit) * 3.9);max-height:calc(var(--hud-unit) * 4.4);border:0;border-radius:2px;object-fit:cover;object-position:50% 17%;background:var(--bg-panel-soft); }
.party-info { display:flex;flex-direction:column;justify-content:center;min-width:0;gap:calc(var(--hud-unit) * .15); }
.party-heading,.party-health,.party-ammo { display:flex;align-items:center;justify-content:space-between;gap:.3rem;min-width:0; }
.party-heading>strong { font-size:calc(var(--hud-unit) * .85);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.party-heading>small { font-size:calc(var(--hud-unit) * .65);font-weight:700; }
.party-health>strong { font-size:calc(var(--hud-unit) * .7);font-variant-numeric:tabular-nums; }
.party-health small { font-size:calc(var(--hud-unit) * .55);font-weight:500; }
.party-status .hp-track { display:block;width:100%;height:max(4px,calc(var(--hud-unit) * .28));background:var(--bg-panel-soft);border-radius:1px; }
.party-ammo { flex-wrap:wrap;gap:0 .25rem; }
.party-ammo>small { font-size:max(8px,calc(var(--hud-unit) * .53));line-height:1.3;white-space:nowrap; }
.party-buff { color:var(--info);font-weight:700; }
.command-profile .resources { width:100%;display:flex;justify-content:space-between;gap:.35rem;padding:.2rem .4rem;background:rgb(var(--c-panel) / .94);border-radius:2px; }
.command-profile .resource { gap:.2rem; }
.command-profile .resource small { font-size:calc(var(--hud-unit) * .55); }
.command-profile .resource strong { font-size:calc(var(--hud-unit) * .65); }
#minimap-canvas { width:var(--hud-radar);height:var(--hud-radar);border-radius:3px;border:1px solid var(--line-info); }
.field-corner .operation-mark { display:flex;flex-direction:row;align-items:center;justify-content:flex-end;gap:.25rem;max-width:calc(var(--hud-radar) + var(--action-size));padding:.2rem .35rem;background:rgb(var(--c-panel) / .96);border-radius:2px;white-space:nowrap; }
.field-corner .operation-mark #operation-name { overflow:hidden;text-overflow:ellipsis;font-size:calc(var(--hud-unit) * .62); }
.field-corner .operation-mark #operation-stage { flex:none;font-size:calc(var(--hud-unit) * .62); }
.command-tools .icon-button,#title-settings,.navigation-popup>footer .icon-button,.field-actions .icon-button { width:var(--action-size);height:var(--action-size);min-height:var(--action-size);padding:calc(var(--hud-unit) * .3); }
.command-tools .icon-button>img,#title-settings>img,.navigation-popup>footer .icon-button>img,.field-actions .icon-button>img { width:var(--action-icon);height:var(--action-icon); }
.field-actions { gap:var(--hud-gap); }
.field-actions .field-icon-state { font-size:max(.6rem,calc(var(--hud-unit) * .55)); }
.navigation-popup { width:min(calc(var(--hud-unit) * 25),calc(100vw - var(--hud-edge-left) - var(--hud-edge-right))); }
.navigation-popup .main-nav .image-action img,.lobby-shortcuts .image-action img { width:var(--action-icon);height:var(--action-icon); }
.navigation-popup .main-nav .image-action { min-height:calc(var(--action-size) * 1.35);font-size:calc(var(--hud-unit) * .8); }
.operation-progress { padding:.25rem .6rem .5rem; }
.operation-progress>div:first-child { font-size:max(.65rem,calc(var(--hud-unit) * .65)); }
.operation-track { position:relative;margin-top:.35rem; }
.operation-track progress { height:max(6px,calc(var(--hud-unit) * .35));margin:0; }
.operation-markers { position:absolute;inset:0;pointer-events:none; }
.operation-marker { position:absolute;left:var(--milestone);top:50%;transform:translate(-50%,-50%); }
.operation-marker i { display:block;width:max(8px,calc(var(--hud-unit) * .5));height:max(8px,calc(var(--hud-unit) * .5));background:var(--bg-panel);border:2px solid var(--line-info);border-radius:50%; }
.operation-marker.done i { background:var(--info);border-color:var(--info); }
.operation-marker.current i { background:var(--gold);border-color:var(--brand-navy); }
.operation-marker.commander i { border-radius:1px;transform:rotate(45deg); }
@media (max-width:560px) {
 .operation-progress { left:var(--hud-edge-left);right:var(--hud-edge-right);top:calc(var(--hud-edge-top) + var(--hud-radar) + var(--hud-unit) * 2.2);width:auto;transform:none; }
}

.camera-zoom-dots { position:absolute;bottom:1px;left:50%;transform:translateX(-50%);display:flex;gap:3px;padding:2px 3px;background:rgb(var(--c-panel) / .9);border-radius:3px; }
.camera-zoom-dots i { width:max(4px,calc(var(--hud-unit) * .23));height:max(4px,calc(var(--hud-unit) * .23));border:1px solid var(--brand-navy);border-radius:50%;background:transparent; }
.camera-zoom-dots .filled { background:var(--info); }