/* 블랙라인 컨트랙트 — 클라이언트 스타일 */
*{box-sizing:border-box}
html{color-scheme:dark}
img{max-width:100%}
[hidden]{display:none!important}

/* ── D «작전 카드» ─────────────────────────────────────────
   층을 «선»이 아니라 «면»으로 만든다. 예전에는 모든 칸이
   같은 1px 테두리에 같은 밝기여서, 눈이 어디에 먼저 앉아야
   할지 알 수 없었다. 이제 바탕 → 칸 → 칸 안의 칸이 각각
   다른 밝기를 갖고, 테두리는 꼭 필요한 데만 남는다.
   중성색은 순회색이 아니라 청색 쪽으로 살짝 기울여 둔다. */
:root{
  --bg:#0E1113; --bg2:#0E1113;
  --panel:#171B1E; --panel2:#1F2529; --panel3:#282F35;
  --line:#272E33; --line2:#39434A;
  --ink:#E6EAEC; --ink2:#9BA5AB; --ink3:#6D777D;
  --amber:#E0A63C; --amber2:#8A6828; --amber-glow:rgba(224,166,60,.14);
  --red:#D4584A; --red2:#7A322A;
  --grn:#54A87A; --blu:#5B90B8;
  /* «읽는 색» — 배경이 아니라 글씨에 쓰는 톤. 같은 값이 17군데에
     하드코딩돼 있어서, 팔레트를 바꿔도 거기만 옛 색으로 남았다. */
  --red-ink:#C9695F; --red-ink2:#D8796D; --red-bg:#160E0D;
  --blu-ink:#7FA3B8; --blu-line:#3C5266;
  --grn-ink:#A9BFA9; --grn-line:#3E5A46;
  --amber-dk:#8E6620; --amber-lt:#D19B34;
  --red-dk:#BE4237;  --blu-dk:#4C7A90;
  /* 면을 얹는 규칙 — 그림자는 «떠 있는 것»에만 쓴다 */
  --r:6px; --r-sm:4px;
  --lift:0 1px 0 rgba(255,255,255,.028);
  --lift2:0 6px 18px rgba(0,0,0,.34);
  --f-ui:"IBM Plex Sans KR",-apple-system,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --f-mono:"IBM Plex Mono","IBM Plex Sans KR",ui-monospace,monospace;
  --f-disp:"Black Han Sans","IBM Plex Sans KR",sans-serif;
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--f-ui); font-size:14.5px; line-height:1.55;
  font-weight:400; -webkit-font-smoothing:antialiased;
}
button{font-family:inherit;color:inherit}
h1,h2,h3,h4{margin:0;text-wrap:balance;font-weight:600;letter-spacing:-.01em}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}
.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- shell ---------- */
#app{max-width:1320px;margin:0 auto;padding-block:0 28px;padding-left:14px;padding-right:14px}

.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap;
  padding:10px 14px;margin:0 -14px 14px;
  background:linear-gradient(180deg,var(--panel) 0%,rgba(7,10,8,.94) 100%);
  border-bottom:1px solid var(--line);
  backdrop-filter:blur(6px);
}
.brand{display:flex;align-items:baseline;gap:9px;margin-right:auto}
.brand .mark{
  font-family:var(--f-disp);font-size:19.5px;letter-spacing:.02em;
  color:var(--ink);line-height:1;
}
.brand .mark em{font-style:normal;color:var(--amber)}
.brand .sub{font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);letter-spacing:.18em}

.stat-strip{display:flex;gap:7px;align-items:stretch;flex-wrap:wrap}
/* 칸막이 선 대신 각자 면을 준다 — 값 하나하나가 읽을 거리가 된다 */
.sfield{
  padding:4px 12px; border:0; border-radius:var(--r-sm); background:var(--panel2);
  display:flex;flex-direction:column;justify-content:center;min-width:76px;
}
.sfield .k{font-family:var(--f-ui);font-size:10px;letter-spacing:.08em;color:var(--ink3);text-transform:uppercase}
.sfield .v{font-family:var(--f-mono);font-size:15px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;line-height:1.25}
.sfield .v.cr{color:var(--amber)}

.iconbtn{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--panel2);border:0;color:var(--ink2);
  font-family:var(--f-ui);font-size:12px;letter-spacing:.01em;
  padding:7px 11px;cursor:pointer;border-radius:var(--r-sm);white-space:nowrap;
  transition:background .13s,color .13s;
}
.iconbtn i{font-style:normal}
.iconbtn svg{
  width:15px;height:15px;flex:none;fill:none;stroke:currentColor;
  stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;
}
.iconbtn:hover{background:var(--panel3);color:var(--ink)}
/* 켜져 있는 것(통신 펼침)은 아이콘만 물들인다 — 글자까지 물들이면 셋 다 눈에 띄어 우선순위가 사라진다 */
.iconbtn.on svg{color:var(--amber)}
.iconbtn.warn svg{color:var(--red)}
.iconbtn.busy{background:rgba(212,88,74,.16);color:#E6897B;cursor:default}
.topbtns{display:flex;gap:6px}

/* ---------- generic panel ---------- */
.panel{
  background:var(--panel); border:0; border-radius:var(--r); min-width:0;
  box-shadow:var(--lift);
}
.panel-h{
  display:flex;align-items:center;gap:8px;
  padding:11px 15px 9px; border-bottom:1px solid var(--line); background:transparent;
}
.panel-h h3{font-family:var(--f-ui);font-size:13px;letter-spacing:0;color:var(--ink);text-transform:none;font-weight:600}
.panel-h .tag{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.panel-b{padding:15px}

.layout{display:grid;grid-template-columns:312px minmax(0,1fr) 334px;gap:12px;align-items:start}
.col{display:flex;flex-direction:column;gap:12px;min-width:0}

/* ---------- operator card ---------- */
.op-id{display:flex;flex-direction:column;gap:2px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.op-id .call{font-family:var(--f-disp);font-size:23px;letter-spacing:.01em;line-height:1.15}
.op-id .role{font-family:var(--f-ui);font-size:11.5px;letter-spacing:.04em;color:var(--ink3)}

.bar{height:6px;background:var(--panel3);border:0;position:relative;overflow:hidden;border-radius:var(--r-sm)}
.bar > i{display:block;height:100%;background:var(--grn);border-radius:var(--r-sm);transition:width .25s ease}
.bar.hp > i{background:linear-gradient(90deg,#3E6B4C,#6BA37C)}
.bar.hp.warn > i{background:linear-gradient(90deg,#8A6620,var(--amber-lt))}
.bar.hp.crit > i{background:linear-gradient(90deg,#6E2620,var(--red-dk))}
.bar.xp > i{background:linear-gradient(90deg,#33505C,var(--blu-dk))}
.bar.arm > i{background:linear-gradient(90deg,#3A4A3E,#7C8C7F)}
.barrow{display:flex;flex-direction:column;gap:4px;margin-top:10px}
.barrow .lbl{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink3)}
.barrow .lbl b{color:var(--ink);font-weight:500}

.body-map{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin-top:12px}
.bp{
  border:0;background:var(--panel2);padding:6px 4px;text-align:center;border-radius:var(--r-sm);
}
.bp .n{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.08em;color:var(--ink3)}
.bp .s{font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--grn)}
.bp.hurt{box-shadow:inset 0 0 0 1px var(--amber2)} .bp.hurt .s{color:var(--amber)}
.bp.bad{box-shadow:inset 0 0 0 1px var(--red2);background:#241A18} .bp.bad .s{color:var(--red)}

.statlist{display:flex;flex-direction:column;gap:3px;margin-top:12px}
.statrow{display:flex;align-items:center;gap:9px;padding:7px 10px;background:var(--panel2);border-radius:var(--r-sm)}
.statrow .sn{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink2);width:78px}
.statrow .sv{font-family:var(--f-mono);font-size:15px;font-weight:600;width:24px;text-align:right}
.statrow .sd{font-size:11px;color:var(--ink3);margin-left:auto;text-align:right;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:46%}
.statrow .plus{
  border:0;background:var(--panel3);color:var(--amber);
  width:21px;height:21px;line-height:1;cursor:pointer;border-radius:var(--r-sm);font-size:13.5px;padding:0
}
.statrow .plus:hover{background:var(--amber-glow)}

/* ---------- tabs ---------- */
/* 탭은 넘치면 가로로 숨지 않고 다음 줄로 내려간다.
   숨은 탭은 있는 줄도 모르게 되는 게 제일 나쁘다. */
.tabs{
  display:flex;flex-wrap:wrap;gap:0 2px;
  border-bottom:1px solid var(--line);margin-bottom:0;min-width:0;
  position:sticky;top:var(--topbar-h,52px);z-index:30;
  background:linear-gradient(180deg,var(--panel) 0%, var(--panel) 70%, rgba(18,23,20,.96) 100%);
  backdrop-filter:blur(4px);
}
.tab{
  background:transparent;border:0;border-bottom:2px solid transparent;
  padding:9px 13px;cursor:pointer;white-space:nowrap;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase;
  transition:color .12s,background .12s;
}
.tab:hover{color:var(--ink2);background:rgba(255,255,255,.03)}
.tab.on{color:var(--amber);border-bottom-color:var(--amber)}
/* 운영 탭은 성격이 달라 한눈에 구분되게 둔다 */
.tab.adm{color:#9A7BB0}
.tab.adm.on{color:#C5A3D8;border-bottom-color:#9A7BB0}


/* ---------- contract cards ---------- */
.clist{display:flex;flex-direction:column;gap:10px}
.contract{
  border:0;background:var(--panel2);border-radius:var(--r-sm);
  display:grid;grid-template-columns:5px 1fr;overflow:hidden;
}
.contract .stripe{background:var(--line2)}
.contract.t1 .stripe{background:#3F5A48}
.contract.t2 .stripe{background:var(--blu-dk)}
.contract.t3 .stripe{background:var(--amber-dk)}
.contract.t4 .stripe{background:#B06A2C}
.contract.t5 .stripe{background:var(--red-dk)}
.contract.locked{opacity:.45}
.contract .body{padding:11px 13px;display:flex;flex-direction:column;gap:8px}
.contract .top{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.contract .code{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.08em;color:var(--ink3)}
.contract .title{font-size:15.5px;font-weight:600;letter-spacing:-.01em}
.contract .meta{display:flex;gap:8px 16px;flex-wrap:wrap;font-family:var(--f-mono);font-size:12px;color:var(--ink3);letter-spacing:0}
.contract .meta b{color:var(--ink2);font-weight:500}
.contract .brief{font-size:13.5px;color:var(--ink2);line-height:1.6;max-width:68ch}
.contract .pay{display:flex;gap:16px;align-items:center;flex-wrap:wrap;margin-top:2px}
.contract .pay .p{font-family:var(--f-mono);font-size:12.5px}
.contract .pay .p span{color:var(--ink3);font-size:11px;letter-spacing:.04em}
.contract .pay .p b{color:var(--amber);font-weight:600}

.btn{
  font-family:var(--f-ui);font-size:12.5px;letter-spacing:.01em;text-transform:none;font-weight:500;
  padding:8px 15px;border-radius:var(--r-sm);cursor:pointer;
  background:var(--panel2);border:0;color:var(--ink2);
  transition:background .13s,color .13s;
}
.btn:hover:not(:disabled){background:var(--panel3);color:var(--ink)}
.btn:disabled{opacity:.35;cursor:not-allowed}
.btn.primary{background:var(--amber);color:#1A1205;font-weight:600}
.btn.primary:hover:not(:disabled){background:#EDB75C}
.btn.danger{background:rgba(212,88,74,.16);color:#E6897B}
.btn.danger:hover:not(:disabled){background:rgba(212,88,74,.26);color:#F0A093}
.btn.sm{padding:5px 11px;font-size:11.5px}
.btn.wide{width:100%;text-align:center}

/* ---------- shop / inventory tables ---------- */
.tablewrap{overflow-x:auto}
table.grid{width:100%;border-collapse:collapse;font-size:13px}
table.grid th{
  text-align:left;font-family:var(--f-ui);font-size:11px;letter-spacing:.04em;color:var(--ink3);
  text-transform:none;font-weight:500;padding:8px 11px;border-bottom:1px solid var(--line);white-space:nowrap
}
table.grid td{padding:10px 11px;border-bottom:0;vertical-align:middle}
table.grid tbody tr:nth-child(even) td{background:rgba(255,255,255,.018)}
table.grid tr:hover td{background:var(--panel2)}
table.grid tbody tr td:first-child{border-radius:var(--r-sm) 0 0 var(--r-sm)}
table.grid tbody tr td:last-child{border-radius:0 var(--r-sm) var(--r-sm) 0}
table.grid td.n{font-family:var(--f-mono);font-variant-numeric:tabular-nums;white-space:nowrap}
table.grid td.name b{font-weight:600}
table.grid td.name .sub{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);letter-spacing:.05em}
.equipped{color:var(--amber);font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em}

.subhead{
  font-family:var(--f-ui);font-size:12px;letter-spacing:.02em;color:var(--ink2);font-weight:600;
  text-transform:none;margin:18px 0 9px;padding-bottom:0;border-bottom:0
}
.subhead:first-child{margin-top:0}

/* ---------- log ---------- */
.log{
  font-family:var(--f-mono);font-size:12px;line-height:1.65;
  display:flex;flex-direction:column-reverse;gap:2px;
  max-height:520px;overflow-y:auto;padding:10px 12px
}
.log .e{color:var(--ink2);word-break:break-word}
.log .e .t{color:var(--ink3);margin-right:7px}
.log .e.hit{color:var(--grn-ink)}
.log .e.crit{color:var(--red)}
.log .e.miss{color:var(--ink3)}
.log .e.good{color:var(--grn)}
.log .e.warn{color:var(--amber)}
.log .e.sys{color:var(--blu)}
.log .e.head{color:var(--ink);border-top:1px solid var(--line);margin-top:8px;padding-top:8px;letter-spacing:.06em}
.log .e.hit{color:#B7C9BC}

/* ---------- combat ---------- */
.engage-bar{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  padding:11px 15px;border:0;background:var(--panel);border-radius:var(--r);box-shadow:var(--lift)
}
.engage-bar .f{display:flex;flex-direction:column}
.engage-bar .f .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.16em;color:var(--ink3);text-transform:uppercase}
.engage-bar .f .v{font-family:var(--f-mono);font-size:15.5px;font-weight:600;color:var(--ink)}
.engage-bar .f .v.amber{color:var(--amber)}

.dist-track{flex:1;min-width:200px;height:34px;position:relative;border:0;background:var(--panel2);border-radius:var(--r-sm);overflow:hidden}
.dist-track .eff{position:absolute;top:0;bottom:0;background:rgba(94,148,112,.16);border-left:1px solid rgba(94,148,112,.5);border-right:1px solid rgba(94,148,112,.5)}
.dist-track .tick{position:absolute;top:0;bottom:0;width:1px;background:#18201A}
.dist-track .marker{position:absolute;top:0;bottom:0;width:2px;background:var(--amber);box-shadow:0 0 10px rgba(209,155,52,.8)}
.dist-track .cap{position:absolute;left:8px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:11.5px;font-weight:600;color:var(--ink);letter-spacing:.06em;text-shadow:0 0 6px var(--bg),0 0 6px var(--bg)}
.dist-track .cap2{position:absolute;right:8px;top:50%;transform:translateY(-50%);font-family:var(--f-mono);font-size:10px;color:var(--ink3);letter-spacing:.1em;text-shadow:0 0 6px var(--bg)}

.hostiles{display:flex;flex-direction:column;gap:7px}
.hostile{
  display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;
  border:0;background:var(--panel2);padding:11px 13px;border-radius:var(--r-sm);cursor:pointer;
  transition:background .15s, box-shadow .15s
}
.hostile:hover{background:var(--panel3)}
.hostile.sel{background:var(--panel3);box-shadow:inset 0 0 0 1px var(--amber)}
.hostile.dead{opacity:.32;cursor:default;box-shadow:none}
.hostile .hn{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.hostile .hn b{font-size:14px;font-weight:600}
.hostile .hn .w{font-family:var(--f-mono);font-size:11px;color:var(--ink3)}
.hostile .hbar{margin-top:5px}
.hostile .chips{display:flex;gap:5px;flex-wrap:wrap;margin-top:6px}
.chip{
  font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;
  padding:2px 6px;border:1px solid var(--line2);color:var(--ink3);border-radius:var(--r-sm)
}
.chip.cover{border-color:var(--blu-line);color:var(--blu-ink)}
.chip.armor{border-color:#4A4433;color:#A8946B}
.chip.bleed{border-color:var(--red2);color:var(--red-ink)}
.chip.supp{border-color:var(--amber2);color:var(--amber)}
.hostile .odds{text-align:right;font-family:var(--f-mono)}
.hostile .odds .big{font-size:19.5px;font-weight:600;color:var(--amber);line-height:1.1}
.hostile .odds .sm{font-size:10px;color:var(--ink3);letter-spacing:.12em}

/* 부위 조준 — 사격 전에 고르는 세 칸 */
.parts{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:0 0 10px}
.parts .part{
  background:var(--panel2);border:0;border-radius:var(--r-sm);
  padding:7px 6px;cursor:pointer;text-align:center;
  box-shadow:inset 0 0 0 1px transparent;transition:background .15s,box-shadow .15s
}
.parts .part:hover{background:var(--panel3)}
.parts .part.on{background:var(--panel3);box-shadow:inset 0 0 0 1px var(--amber)}
.parts .part .pn{display:block;font-size:13px;font-weight:500;line-height:1.3}
.parts .part .pc{display:block;font-family:var(--f-mono);font-size:11px;color:var(--ink3);margin-top:2px}
.parts .part.on .pc{color:var(--amber)}
.odds .sm.warn{color:var(--amber)}
.acts{display:grid;grid-template-columns:1fr;gap:6px}
.act{
  display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;text-align:left;
  background:var(--panel2);border:0;border-radius:var(--r-sm);
  padding:8px 11px;cursor:pointer;transition:border-color .15s,background .15s
}
.act:hover:not(:disabled){background:var(--panel3)}
.act:disabled{opacity:.32;cursor:not-allowed}
.act .an{font-size:14px;font-weight:500;line-height:1.35}
.act .ad{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);letter-spacing:0;display:block;margin-top:2px;line-height:1.45}
.act .ap{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--amber);white-space:nowrap}

.ap-pips{display:flex;gap:4px}
.ap-pips i{width:16px;height:16px;border:1px solid var(--amber2);border-radius:var(--r-sm);display:block}
.ap-pips i.on{background:var(--amber);box-shadow:0 0 7px var(--amber-glow)}

/* ---------- modal / title ---------- */
.overlay{
  position:fixed;inset:0;z-index:100;background:rgba(5,7,6,.86);
  display:flex;align-items:center;justify-content:center;padding:20px;overflow-y:auto
}
.modal{
  width:100%;max-width:620px;background:var(--panel);border:1px solid var(--line2);border-radius:4px;
  box-shadow:0 30px 90px rgba(0,0,0,.7)
}
.modal .m-h{padding:14px 18px;border-bottom:1px solid var(--line);background:var(--panel2)}
.modal .m-h h2{font-size:17.5px}
.modal .m-h p{margin:3px 0 0;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.modal .m-b{padding:18px}
.modal .m-f{padding:14px 18px;border-top:1px solid var(--line);display:flex;gap:8px;justify-content:flex-end;flex-wrap:wrap}

/* ---- 입력 요소 한 벌 ----
   select 을 손대지 않고 두면 브라우저가 제 화살표와 제 배경을 그린다.
   어두운 화면에 밝은 회색 칸이 섞여서, 다른 곳을 아무리 맞춰도 거기서 깨진다.
   appearance 를 끄고 화살표까지 직접 그려야 한 벌로 보인다. */
input[type=text],input[type=password],input[type=number],input[type=search],
textarea,select{
  width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--f-mono);letter-spacing:.06em;padding:9px 11px;border-radius:var(--r-sm);
  font-size:14px;line-height:1.4;
  -webkit-appearance:none;-moz-appearance:none;appearance:none;
}
input[type=text]{font-size:15.5px;letter-spacing:.1em;padding:10px 12px}
/* 화살표는 그라디언트 두 장을 겹쳐 그린다.
   SVG 데이터 URI 로도 되지만 색을 팔레트 변수로 못 쓴다 —
   토큰을 바꿨을 때 여기만 옛 색으로 남는 자리가 된다. */
select{
  padding-right:24px;cursor:pointer;
  background-image:
    linear-gradient(45deg,transparent 50%,var(--ink3) 50%),
    linear-gradient(135deg,var(--ink3) 50%,transparent 50%);
  background-position:right 13px center, right 9px center;
  background-size:5px 5px, 5px 5px;
  background-repeat:no-repeat;
}
select:hover{background-image:
    linear-gradient(45deg,transparent 50%,var(--ink2) 50%),
    linear-gradient(135deg,var(--ink2) 50%,transparent 50%)}
select:hover{border-color:var(--line2);color:var(--ink)}
select option{background:var(--panel2);color:var(--ink)}
input::placeholder,textarea::placeholder{color:var(--ink3)}
input:disabled,select:disabled,textarea:disabled{opacity:.45;cursor:default}
input[type=text]:focus,input[type=password]:focus,input[type=number]:focus,
input[type=search]:focus,textarea:focus,select:focus{
  outline:none;border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-glow)}
label.fl{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.18em;color:var(--ink3);text-transform:uppercase;margin-bottom:6px}

.bgpick{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:8px;margin-top:6px}
.bgcard{
  text-align:left;background:var(--panel2);border:0;border-radius:var(--r-sm);
  padding:11px 12px;cursor:pointer
}
.bgcard:hover{box-shadow:inset 0 0 0 1px var(--line2)}
.bgcard.on{box-shadow:inset 0 0 0 1px var(--amber);background:rgba(209,155,52,.07)}
.bgcard .bn{font-size:14.5px;font-weight:600}
.bgcard .bt{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--amber);text-transform:uppercase}
.bgcard .bd{font-size:12px;color:var(--ink3);margin-top:5px;line-height:1.45}

.title-screen{text-align:center;max-width:560px}
.title-screen .lg{font-family:var(--f-disp);font-size:clamp(38px,9vw,62px);line-height:1;letter-spacing:.01em}
.title-screen .lg em{font-style:normal;color:var(--amber)}
.title-screen .tl{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.4em;color:var(--ink3);margin-top:12px;text-transform:uppercase}
.title-screen .bl{font-size:13.5px;color:var(--ink2);margin:22px auto 0;max-width:44ch;line-height:1.7}

.notice{
  font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);letter-spacing:.04em;
  border-left:2px solid var(--line2);padding:6px 0 6px 10px;margin-top:12px;line-height:1.6
}
.kv{display:grid;grid-template-columns:auto 1fr;gap:5px 14px;font-family:var(--f-mono);font-size:12.5px}
.kv dt{color:var(--ink3);letter-spacing:.1em;font-size:10.5px;text-transform:uppercase;align-self:center}
.kv dd{margin:0;color:var(--ink)}

.empty{padding:26px 12px;text-align:center;font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink3)}




@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ================= 온라인 전용 추가 스타일 ================= */
.boot{padding:60px 20px;text-align:center;font-family:var(--f-mono);font-size:12.5px;letter-spacing:.2em;color:var(--ink3)}

.auth-wrap{min-height:100dvh;display:flex;align-items:center;justify-content:center;padding:24px 16px}
.auth-card{width:100%;max-width:420px}
.auth-card .lg{font-family:var(--f-disp);font-size:clamp(34px,8vw,50px);line-height:1.02;letter-spacing:.01em;text-align:center}
.auth-card .lg em{font-style:normal;color:var(--amber)}
.auth-card .tl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.34em;color:var(--ink3);text-transform:uppercase;text-align:center;margin-top:10px}
.auth-card form{margin-top:26px;display:flex;flex-direction:column;gap:12px}
.auth-tabs{display:flex;gap:0;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;margin-bottom:4px}
.auth-tabs button{flex:1;background:transparent;border:0;padding:9px;cursor:pointer;
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;color:var(--ink3)}
.auth-tabs button.on{background:rgba(209,155,52,.1);color:var(--amber)}
.err{border-left:2px solid var(--red);padding:7px 0 7px 10px;font-size:13px;color:var(--red-ink);font-family:var(--f-mono)}
.ok-msg{border-left:2px solid var(--grn);padding:7px 0 7px 10px;font-size:13px;color:var(--grn);font-family:var(--f-mono)}
input[type=password],input[type=number]{font-size:14.5px;padding:10px 12px}

.online-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--grn);
  box-shadow:0 0 7px var(--grn);margin-right:6px;vertical-align:middle}

.squad-row{display:flex;flex-direction:column;gap:6px}
.sq{border:0;background:var(--panel2);padding:8px 10px;border-radius:var(--r-sm)}
.sq.active{box-shadow:inset 0 0 0 1px var(--amber);background:rgba(209,155,52,.07)}
.sq.down{opacity:.45;border-style:dashed}
.sq .top{display:flex;align-items:baseline;gap:8px}
.sq .top b{font-size:13.5px}
.sq .top .tagme{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;color:var(--amber)}
.sq .top .ap{margin-left:auto;font-family:var(--f-mono);font-size:10.5px;color:var(--ink3)}

.turnbar{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--panel2);font-family:var(--f-mono);font-size:12px;letter-spacing:.06em}
.turnbar.mine{border-color:var(--amber);background:rgba(209,155,52,.09);color:var(--amber)}
.turnbar.wait{color:var(--ink3)}

.feed-item{display:flex;gap:8px;font-family:var(--f-mono);font-size:12px;line-height:1.6;padding:3px 0}
.feed-item .k{flex:none;width:38px;font-size:9.5px;letter-spacing:.1em;color:var(--ink3);padding-top:3px;text-transform:uppercase}
.feed-item.f-kia .t{color:var(--red-ink)}
.feed-item.f-contract .t{color:var(--grn-ink)}
.feed-item.f-market .t{color:var(--amber)}
.feed-item.f-pvp .t{color:#B08CC0}
.feed-item.f-company .t{color:var(--blu-ink)}
.feed-item.f-chat .t{color:var(--ink2)}

.chatbar{display:flex;gap:6px;margin-top:10px}
.chatbar input{flex:1;font-size:12.5px;padding:7px 9px}

.rowform{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:8px}
.rowform input{width:auto;flex:1;min-width:90px;font-size:12.5px;padding:6px 8px}

.medal{font-family:var(--f-mono);font-size:11.5px;color:var(--amber);width:26px;display:inline-block}
.dim{color:var(--ink3)}
.right{text-align:right}
.nowrap{white-space:nowrap}
.spread{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.spread .grow{margin-left:auto}
.hint{font-family:var(--f-mono);font-size:11px;color:var(--ink3);letter-spacing:.04em;line-height:1.6}

.toast-wrap{position:fixed;right:14px;bottom:14px;z-index:200;display:flex;flex-direction:column;gap:7px;max-width:min(380px,90vw)}
.toast{background:var(--panel);border:1px solid var(--line2);border-left-width:3px;border-radius:var(--r-sm);
  padding:9px 12px;font-size:13px;box-shadow:0 10px 30px rgba(0,0,0,.6);animation:tin .18s ease}
.toast.good{border-left-color:var(--grn)} .toast.bad{border-left-color:var(--red)} .toast.info{border-left-color:var(--amber)}
@keyframes tin{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}



/* ================= 확장 시스템 ================= */
.injlist{display:flex;flex-direction:column;gap:4px;margin-top:4px}
.inj{border:1px solid var(--red2);background:var(--red-bg);border-radius:var(--r-sm);padding:6px 9px}
.inj b{font-size:13px;color:var(--red-ink)}
.inj .sub{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);letter-spacing:.04em}

.perkgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.perkline{border:0;border-radius:var(--r-sm);background:var(--panel2);overflow:hidden}
.plh{padding:10px 12px;border-bottom:1px solid var(--line);background:var(--panel)}
.plh .plt{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--amber)}
.plh b{font-size:15.5px}
.plh .pld{display:block;font-size:12px;color:var(--ink3);margin-top:2px;line-height:1.5}
.perk{padding:9px 12px;border-top:1px solid var(--panel2);display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center}
.perk.on{background:rgba(94,148,112,.08)}
.perk.lock{opacity:.42}
.perk .pn{display:flex;align-items:baseline;gap:7px}
.perk .pn b{font-size:13.5px}
.perk .pr{font-family:var(--f-mono);font-size:10px;color:var(--ink3);border:1px solid var(--line2);border-radius:var(--r-sm);padding:0 4px}
.perk .pd{grid-column:1/-1;font-size:12px;color:var(--ink3);line-height:1.55}
.perk .pa{white-space:nowrap}

.modbox{border:0;border-radius:var(--r-sm);background:var(--panel2);margin-bottom:10px;overflow:hidden}
.modbox .mbh{padding:9px 12px;border-bottom:1px solid var(--line);background:var(--panel);display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
.modbox .mbh b{font-size:14px}
.slots{display:flex;flex-direction:column}
.slot{display:grid;grid-template-columns:76px 1fr auto;gap:10px;align-items:center;padding:7px 12px;border-top:1px solid var(--panel2)}
.slot .sl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.slot .sv2{font-size:13px}
.slot .sact{display:flex;gap:6px;align-items:center}
/* «재장전»이 두 줄로 접혀서 칸을 두 배로 쓰고 있었다. 줄바꿈을 막는다. */
.slot .sact .btn{white-space:nowrap}
/* 표 안의 버튼은 칸이 좁으면 «재장 / 전»으로 접힌다. 줄바꿈을 막는다. */
table .btn,td .btn,th .btn{white-space:nowrap}
/* 탄약·부착물 고르는 칸. 예전에는 style= 로 색을 직접 박아 놨는데,
   인라인 스타일은 어떤 규칙보다도 세서 팔레트를 바꿔도 여기만 옛 색으로 남는다. */
.ammosel,.modsel{font-size:11.5px;padding:4px 21px 4px 7px;max-width:200px;
  background-position:right 11px center, right 7px center}
.slot select{font-size:11.5px;padding:4px 21px 4px 7px;max-width:180px;
  background-position:right 11px center, right 7px center}

.seasonbar{display:flex;gap:14px;align-items:center;flex-wrap:wrap;padding:10px 13px;margin-bottom:12px;
  border:1px solid var(--amber2);background:rgba(209,155,52,.07);border-radius:var(--r-sm)}
.seasonbar .sl2{display:block;font-family:var(--f-mono);font-size:10px;letter-spacing:.2em;color:var(--amber);text-transform:uppercase}
.seasonbar b{font-family:var(--f-mono);font-size:14.5px}

.standrow{display:flex;gap:7px;flex-wrap:wrap;align-items:center;margin-bottom:10px;padding-bottom:8px;border-bottom:1px solid var(--line)}
.standrow .linkbtn{margin-left:auto}
.stand .fv.hot{color:var(--red-ink)}
.stand{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;padding:3px 8px;border-radius:var(--r-sm);border:1px solid var(--line2);color:var(--ink2)}
.stand.hot{border-color:var(--red2);color:var(--red-ink)}
.stand.cool{border-color:var(--blu-line);color:var(--blu-ink)}

.contract.raid .stripe{background:linear-gradient(180deg,var(--red-dk),var(--amber-dk))}
.chip.raidchip{border-color:var(--red);color:var(--red-ink)}
.chip.cochip{border-color:var(--blu-line);color:var(--blu-ink)}
.multchip{font-family:var(--f-mono);font-size:10.5px;color:var(--amber);border:1px solid var(--amber2);border-radius:var(--r-sm);padding:1px 5px;margin-left:4px}

/* ================= 무전(채팅) ================= */
.chatp .panel-h{gap:6px}
.chatp .panel-h .iconbtn{padding:4px 8px;font-size:10px}
.chatp .panel-h .iconbtn.on{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}

.chtabs{display:flex;gap:0;overflow-x:auto;border-bottom:1px solid var(--line);min-width:0;scrollbar-width:thin}
.chtab{
  position:relative;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:7px 11px;cursor:pointer;white-space:nowrap;
  font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink3);
}
.chtab:hover{color:var(--ink2)}
.chtab.on{color:var(--amber);border-bottom-color:var(--amber)}
.chtab .unread{
  display:inline-block;margin-left:5px;background:var(--red);color:var(--bg);border-radius:8px;
  font-style:normal;font-size:9.5px;font-weight:600;padding:0 5px;line-height:14px;min-width:14px;text-align:center
}

.chatlog{
  display:flex;flex-direction:column;gap:1px;
  height:300px;overflow-y:auto;overflow-x:hidden;padding:8px 0;scrollbar-width:thin
}
.chatp.compact .chatlog{height:200px}
.cm{
  display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;align-items:baseline;
  padding:3px 12px;font-size:13px;line-height:1.55;word-break:break-word
}
.cm:hover{background:var(--panel2)}
.cm .ct{font-family:var(--f-mono);font-size:10px;color:var(--ink3);flex:none}
.cm .cn{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2);flex:none;max-width:110px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cm .cn[data-a]{cursor:pointer}
.cm .cn[data-a]:hover{color:var(--amber);text-decoration:underline}
.cm .cn .ctag{font-style:normal;color:var(--blu);margin-right:2px}
.cm.me .cn{color:var(--amber)}
.cm .cx{color:var(--ink);min-width:0}
.cm.del .cx{color:var(--ink3);font-style:italic}
.cm .cdel{background:transparent;border:0;color:var(--ink3);cursor:pointer;font-size:11.5px;padding:0 2px;opacity:0}
.cm:hover .cdel{opacity:1}
.cm .cdel:hover{color:var(--red)}

.chatp .chatbar{display:flex;gap:6px;padding:10px 12px;border-top:1px solid var(--line);margin:0}
.chatp .chatbar input{flex:1;min-width:0;font-size:13px;padding:7px 9px}

.orow{display:grid;grid-template-columns:1fr auto;gap:8px;align-items:center;padding:7px 12px;border-bottom:1px solid var(--panel2)}
.orow .oi{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap;min-width:0}
.orow .oi b{font-size:13.5px}
.orow .oi .ctag{font-style:normal;font-family:var(--f-mono);font-size:10.5px;color:var(--blu)}
.orow .om{grid-column:1;font-size:10.5px;color:var(--ink3);letter-spacing:.05em}
.orow .oa{grid-row:1/3;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ================= 채팅 ================= */
.chatp .panel-h{gap:6px}
.chatp .iconbtn.on{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}
.chtabs{display:flex;gap:0;border-bottom:1px solid var(--line);overflow-x:auto;min-width:0;scrollbar-width:thin}
.chtab{background:transparent;border:0;border-bottom:2px solid transparent;padding:7px 11px;cursor:pointer;
  white-space:nowrap;font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;color:var(--ink3);
  display:flex;align-items:center;gap:5px}
.chtab:hover{color:var(--ink2)}
.chtab.on{color:var(--amber);border-bottom-color:var(--amber)}
.chtab .unread{font-style:normal;background:var(--red);color:#fff;border-radius:8px;
  font-size:9.5px;padding:0 5px;min-width:15px;text-align:center;line-height:14px}

.chatlog{display:flex;flex-direction:column;gap:1px;max-height:340px;overflow-y:auto;padding:9px 11px}
.chatp.compact .chatlog{max-height:220px}
.cm{display:grid;grid-template-columns:auto auto 1fr auto;gap:7px;align-items:baseline;
  font-size:13px;line-height:1.6;padding:2px 0;word-break:break-word}
.cm .ct{font-family:var(--f-mono);font-size:10px;color:#4A554C}
.cm .cn{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2);white-space:nowrap}
.cm .cn[data-a]{cursor:pointer}
.cm .cn[data-a]:hover{color:var(--amber);text-decoration:underline}
.cm .ctag{font-style:normal;color:var(--blu);font-size:10.5px;margin-right:3px}
.cm .cx{color:var(--ink);min-width:0}
.cm.me .cn{color:var(--amber)}
.cm.del .cx{color:var(--ink3);font-style:italic}
.cm .cdel{background:transparent;border:0;color:#4A554C;cursor:pointer;font-size:10.5px;padding:0 2px;line-height:1}
.cm .cdel:hover{color:var(--red)}

.chatp .chatbar{display:flex;gap:6px;padding:9px 11px;border-top:1px solid var(--line)}
.chatp .chatbar input{flex:1;min-width:0;font-size:13px;padding:7px 9px}
.chatp .chatbar input:disabled{opacity:.5}

.orow{display:grid;grid-template-columns:1fr auto;gap:6px 10px;align-items:center;padding:7px 2px;border-bottom:1px solid var(--panel2)}
.orow:last-child{border-bottom:0}
.orow .oi{display:flex;align-items:baseline;gap:6px;flex-wrap:wrap}
.orow .oi b{font-size:13px}
.orow .om{grid-column:1;font-size:10.5px;color:var(--ink3);letter-spacing:.04em}
.orow .oa{grid-row:1/3;grid-column:2;display:flex;gap:5px;align-items:center;flex-wrap:wrap;justify-content:flex-end}

/* ================= 자원 ================= */
.resbar{display:grid;grid-template-columns:repeat(auto-fit,minmax(128px,1fr));gap:6px}
.rc{border:0;background:var(--panel2);border-radius:var(--r-sm);padding:7px 9px;display:flex;flex-direction:column;gap:3px}
.rc.full{box-shadow:inset 0 0 0 1px var(--amber2)}
.rc .rn{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.rc .rv{font-family:var(--f-mono);font-size:15.5px;font-weight:600;font-variant-numeric:tabular-nums}
.rc.full .rv{color:var(--amber)}
.rc .rv i{font-style:normal;font-size:10.5px;color:var(--ink3);font-weight:400}
.rc .rb{height:4px;background:var(--bg);border-radius:1px;overflow:hidden}
.rc .rb i{display:block;height:100%;background:linear-gradient(90deg,#3A4A3E,#7C8C7F)}
.rc.full .rb i{background:linear-gradient(90deg,var(--amber-dk),var(--amber-lt))}
/* 왼쪽 칸 전용 — 한 줄에 이름·수치·막대를 다 넣는다.
   같은 정보를 3분의 1 높이로 보여주면 «다음 할 일»이 화면 안으로 들어온다. */
.resbar.tight{grid-template-columns:1fr;gap:1px;background:var(--panel2);
  border-radius:var(--r-sm);overflow:hidden}
.resbar.tight .rc{flex-direction:row;align-items:center;gap:8px;padding:5px 9px;
  background:transparent;box-shadow:none;border-radius:0}
.resbar.tight .rc + .rc{box-shadow:inset 0 1px 0 var(--line)}
.resbar.tight .rc.full{box-shadow:inset 0 0 0 1px var(--amber2)}
.resbar.tight .rn{flex:0 0 64px;font-size:9.5px;letter-spacing:.1em}
.resbar.tight .rv{font-size:12.5px;margin-left:auto;order:3}
.resbar.tight .rb{flex:1 1 auto;order:2;height:3px;min-width:28px}
.rowform select{font-size:12.5px;padding:6px 21px 6px 8px;
  background-position:right 11px center, right 7px center}

/* ================= 접근법 · 연속 출격 · 무전 ================= */
.aprgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:7px}
.aprgrid .consopt .cp.bad{color:var(--red-ink)}
.aprgrid .consopt .cp.dim{color:var(--ink3)}

.chainbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;
  padding:9px 12px;background:var(--panel2);border-radius:var(--r-sm);
  font-size:12.5px;line-height:1.55;color:var(--ink2)}
.chainbar.on{box-shadow:inset 0 0 0 1px var(--amber2);background:var(--panel3)}
.chainbar span{flex:1 1 320px}
.chainbar b.amber,.chainbar .amber{color:var(--amber)}
.chainbar .btn{flex:0 0 auto}

.chainbox{margin-top:12px;padding:11px 13px;background:var(--panel2);
  border-radius:var(--r-sm);box-shadow:inset 0 0 0 1px var(--amber2)}
.chainbox .ch{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.chainbox .ch .grow{flex:1}
.chainbox p{margin:3px 0;font-size:12.5px;line-height:1.6;color:var(--ink2)}
.chainbox p.dim{color:var(--ink3)}

/* 무전 지원 — 행동력이 아니라 «물자»를 쓰는 행동이라 배지 색을 달리한다 */
.act.sup .ap{color:var(--blu-ink);box-shadow:inset 0 0 0 1px var(--blu-line)}
.act.sup .ap.bad{color:var(--red-ink);box-shadow:inset 0 0 0 1px var(--red2)}
.act.sup .ad i.dim{font-style:normal;color:var(--ink3)}

.dailycard{background:var(--panel2);border-radius:var(--r-sm);padding:13px 15px;
  box-shadow:inset 3px 0 0 var(--amber2)}
.dailycard .dh{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.dailycard .dh b{font-size:16px}
.dailycard .dh .grow{flex:1}
.dailycard .dh .cc{font-family:var(--f-mono);font-size:11px;color:var(--ink3)}
.dailycard .dh .pay{font-family:var(--f-mono);font-size:19px;color:var(--amber);
  font-variant-numeric:tabular-nums}
.dailycard .dm{margin-top:6px;font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.dailycard .db{margin:9px 0 0;font-size:13px;line-height:1.65;color:var(--ink2)}
.dailycard .df{margin-top:12px}

/* ================= NPC 그림 ================= */
/* 담당관 — «다음 할 일» 칸의 화자 */
.handler{display:flex;align-items:flex-end;gap:12px;margin:-4px -14px 10px -14px;
  padding:0 14px 0 0;overflow:hidden;background:var(--panel2);
  box-shadow:inset 3px 0 0 var(--amber2), inset 0 -1px 0 var(--line)}
.handler img{width:32%;max-width:134px;min-width:78px;height:auto;flex:0 0 auto;
  display:block;margin-bottom:-3px;
  background:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  user-select:none;-webkit-user-drag:none}
.handler .hbody{flex:1 1 auto;min-width:0;padding:12px 0;align-self:center}
.handler .hn{display:block;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink3);text-transform:uppercase}


/* 담당관 한 마디 — 결과 보고·안내에서 같은 모양으로.
   상인 칸과 같은 짜임이다: 그림은 자르지 않고 통째로, 바닥에 붙여 세운다.
   얼굴만 동그랗게 도려내면 공들여 그린 장비가 전부 사라진다. */
.hsay{display:flex;gap:14px;align-items:flex-end;margin-top:16px;overflow:hidden;
  padding:0 14px 0 0;background:var(--panel2);border-radius:var(--r-sm);
  box-shadow:inset 3px 0 0 var(--amber2)}
.hsay.bad{box-shadow:inset 3px 0 0 var(--red2)}
.hsay img{width:150px;height:auto;flex:0 0 auto;display:block;margin-bottom:-4px;
  border-radius:0;background:transparent;
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  user-select:none;-webkit-user-drag:none}
.hsay .hs-b{flex:1 1 auto;min-width:0;padding:13px 0;align-self:center}
.hsay .hs-n{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;
  color:var(--ink3);text-transform:uppercase}
.hsay p{margin:4px 0 0;font-size:14px;line-height:1.65;color:var(--ink2)}
.modal.tour .hsay{margin:0 0 14px}


/* 상단바 — 늘 보이는 자리에 작게 */
.topnpc{display:inline-flex;align-items:center;gap:6px;padding:0 9px 0 4px;
  height:32px;border-radius:var(--r-sm);background:var(--panel2);
  font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;color:var(--ink3);
  white-space:nowrap;cursor:default}
.topnpc img{width:24px;height:24px;border-radius:50%;object-fit:cover;object-position:50% 14%;
  background:var(--bg);}


/* 세력 문양 — 누구랑 싸우는지가 한눈에 들어와야 한다.
   18px 로 두었더니 공들여 그린 문양이 그냥 얼룩으로 뭉갰다. 세부가 꽤 많은
   그림이라 최소 24px 은 줘야 «무엇인지»가 읽힌다.
   어두운 갈색 그림이라 어두운 판 위에서 더 묻히므로, 뒤에 옅은 판을 깔고
   밝기를 올려 띄운다. */
.facn{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.facsym{width:24px;height:24px;object-fit:contain;
  vertical-align:middle;flex:0 0 auto;padding:2px;border-radius:50%;
  background:radial-gradient(circle at 50% 45%, rgba(209,155,52,.13), rgba(255,255,255,.04) 70%, transparent 72%);
  filter:brightness(1.7) contrast(1.15) saturate(1.1) drop-shadow(0 1px 2px rgba(0,0,0,.7))}
/* 큰 자리 — 전투 머리글·결과 보고처럼 «지금 상대»를 각인시켜야 하는 곳 */
.facsym.lg{width:40px;height:40px;padding:3px}
.facsym.sm{width:19px;height:19px;padding:1px}

/* 지휘관 — 이름표만 있으면 «또 저 사람»이 안 된다 */
.bosschip{width:26px;height:26px;border-radius:var(--r-sm);object-fit:cover;object-position:50% 18%;
  background:var(--bg);vertical-align:middle;
  box-shadow:inset 0 0 0 1px var(--red2)}
.hostile.isboss{position:relative;overflow:hidden}
.hostile .bossface{
  position:absolute;right:-4px;top:-6px;width:104px;height:auto;
  pointer-events:none;opacity:.30;
  -webkit-mask-image:linear-gradient(105deg,transparent 0%,#000 55%);
          mask-image:linear-gradient(105deg,transparent 0%,#000 55%);
}
.hostile.isboss > *:not(.bossface){position:relative;z-index:1}
.hostile.dead .bossface{opacity:.12;filter:grayscale(1)}
.nembox{display:flex;gap:11px;align-items:flex-start}
.nemface{width:62px;height:62px;border-radius:var(--r-sm);object-fit:cover;object-position:50% 16%;
  background:var(--bg);flex:0 0 auto}

/* 정보원 — 매수할 때 «누굴 심나»가 보여야 한다 */
.inface{width:52px;height:52px;border-radius:var(--r-sm);object-fit:cover;object-position:50% 12%;
  background:var(--bg);flex:0 0 auto;
  box-shadow:inset 0 0 0 1px var(--line)}
.infkind .it{display:flex;flex-direction:column;gap:2px;min-width:0}
.infcard{position:relative}
.infcard .inface.sm{position:absolute;right:10px;top:10px;width:40px;height:40px;opacity:.75}
.infcard .ih{padding-right:52px}

/* ================= 조달 상인 ================= */
.merch{display:flex;gap:14px;align-items:flex-end;margin-bottom:12px;
  background:var(--panel2);border-radius:var(--r-sm);padding:0 14px 0 0;overflow:hidden;
  box-shadow:inset 3px 0 0 var(--line2)}
.merch .mportrait{
  width:168px;height:auto;flex:0 0 auto;display:block;margin-bottom:-4px;
  /* 화면 크기의 2배로 줄여 둔 그림 — 브라우저가 부드럽게 줄인다 */
  filter:drop-shadow(0 2px 6px rgba(0,0,0,.45));
  user-select:none;-webkit-user-drag:none;
}
.merch .mbody{flex:1 1 auto;min-width:0;padding:13px 0 13px 0;align-self:center}
.merch .mh{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.merch .mh b{font-size:17px;letter-spacing:.02em}
.merch .mh .mt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;
  color:var(--ink3);text-transform:uppercase}
.merch .msub{margin-top:3px;font-size:12px;color:var(--ink3);line-height:1.5}
.merch .mline{
  display:block;width:100%;text-align:left;margin-top:9px;
  background:transparent;border:0;cursor:pointer;
  font-family:inherit;font-size:13px;line-height:1.65;color:var(--ink2);
  padding:7px 10px;border-radius:var(--r-sm);
  box-shadow:inset 0 0 0 1px var(--line);
}
.merch .mline:hover{box-shadow:inset 0 0 0 1px var(--line2);color:var(--ink)}
.merch .mline .q{color:var(--amber);font-family:var(--f-mono)}



/* ================= 고용소 ================= */
.hiregrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(360px,1fr));gap:10px;margin-top:8px}
/* 얼굴은 «옆 칸»으로 둔다. 배경으로 깔았더니 글이 그 위를 지나가서
   둘 다 읽기 힘들어졌다 — 정보 카드에서는 그림이 글을 피해야 한다. */
.hirecard{background:var(--panel2);border-radius:var(--r-sm);
  display:grid;grid-template-columns:104px minmax(0,1fr);gap:0;
  overflow:hidden;align-items:stretch}
.hirecard .hface{
  grid-row:1 / -1;grid-column:1;
  width:104px;height:100%;object-fit:cover;object-position:50% 12%;
  align-self:stretch;
  pointer-events:none;user-select:none;
  background:var(--bg);
  box-shadow:inset -1px 0 0 var(--line);
}
.hirecard .hbody{grid-column:2;padding:11px 13px;display:flex;flex-direction:column;gap:7px;min-width:0}

.hirecard.on{box-shadow:inset 0 0 0 1px var(--amber2);background:var(--panel3)}
.hirecard + .hirecard{margin-top:8px}
.hirecard > .btn{margin:0}
.hirecard .hh{display:flex;align-items:center;gap:7px;flex-wrap:wrap}
.hirecard .hh b{font-size:15px;letter-spacing:.02em}
.hirecard .tag{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;color:var(--ink3);
  box-shadow:inset 0 0 0 1px var(--line2);border-radius:2px;padding:1px 5px}
.hirecard .tag.g2{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber2)}
.hirecard .tag.g0{color:var(--ink3)}
.hirecard .grow{flex:1}
.hirecard .pay{font-family:var(--f-mono);font-size:14px;font-weight:600;color:var(--amber);
  font-variant-numeric:tabular-nums}
.hirecard .hstats{display:flex;gap:10px;flex-wrap:wrap;font-family:var(--f-mono);font-size:11px;
  color:var(--ink3);padding:5px 0;box-shadow:inset 0 -1px 0 var(--line)}
.hirecard .hstats b{color:var(--ink);font-size:12.5px}
.hirecard .hrow{display:flex;gap:9px;font-size:12px;line-height:1.5}
.hirecard .hrow .k{flex:0 0 46px;font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;
  color:var(--ink3);text-transform:uppercase;padding-top:2px}
.hirecard .hrow .bad{color:var(--red-ink)}
.hirecard .hnote{font-size:11.5px;color:var(--ink3);line-height:1.5}
.hirecard .hbody > .btn{margin-top:2px}
/* 전투 화면에서 «내가 아닌 사람»과 «빌린 사람»을 구분해 준다 */
.sq.npc .cs::after{content:'고용';font-family:var(--f-mono);font-size:9px;letter-spacing:.1em;
  color:var(--ink3);box-shadow:inset 0 0 0 1px var(--line2);border-radius:2px;
  padding:0 4px;margin-left:6px;vertical-align:middle}

/* ================= 운영자 ================= */
.tab.adm{color:var(--red-ink)}
.tab.adm.on{color:var(--red);border-bottom-color:var(--red)}
.atiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.atile{border:0;background:var(--panel2);border-radius:var(--r-sm);padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.atile .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.atile .v{font-family:var(--f-mono);font-size:19.5px;font-weight:600;font-variant-numeric:tabular-nums}
.atile .s{font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);line-height:1.5}
.admacts{display:flex;gap:6px;flex-wrap:wrap}
.admgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px;margin-top:4px}
.admgrid label{display:flex;flex-direction:column;gap:3px}
.admgrid label span{font-family:var(--f-mono);font-size:10px;letter-spacing:.12em;color:var(--ink3);text-transform:uppercase}
.admgrid input[type=number]{font-size:13.5px;padding:6px 8px}
.admgrid .admrow{grid-column:1/-1;display:flex;gap:12px;align-items:center;flex-wrap:wrap;margin-top:4px}
.admgrid .chk{flex-direction:row;align-items:center;gap:6px;font-size:13px;color:var(--ink2)}
.admgrid .chk input{accent-color:var(--amber)}
#noticeText{width:100%;background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--f-ui);font-size:13.5px;padding:9px 11px;border-radius:var(--r-sm);resize:vertical}
#noticeText:focus{outline:none;border-color:var(--amber);box-shadow:0 0 0 2px var(--amber-glow)}
.noticeitem{border-left:2px solid var(--amber2);padding:7px 0 7px 11px;margin-top:8px}
.noticeitem .nt{display:block;font-size:13.5px}
.noticeitem .nb{display:block;font-size:10.5px;color:var(--ink3);margin-top:2px}

/* ---------- 하위 탭 ---------- */
.subtabs{display:flex;flex-wrap:wrap;gap:4px;margin-bottom:10px}
.stab{
  background:var(--panel2);border:0;color:var(--ink3);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;
  padding:6px 12px;cursor:pointer;border-radius:var(--r-sm);
}
.stab:hover{color:var(--ink2);box-shadow:inset 0 0 0 1px var(--line2)}
.stab.on{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber2);background:var(--amber-glow)}

/* ---------- 은신처 ---------- */
.hidegrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}
.hidecard{
  border:0;background:var(--panel2);border-radius:var(--r-sm);
  padding:11px 12px;display:flex;flex-direction:column;gap:7px;min-width:0;
}
.hidecard.on{box-shadow:inset 0 0 0 1px var(--line2)}
.hidecard .hh{display:flex;align-items:center;gap:7px}
.hidecard .hh .ic{color:var(--amber);font-size:15.5px;line-height:1}
.hidecard .hh b{font-size:14.5px}
.hidecard .hh .lv{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.hidecard .eff{font-size:12.5px;color:var(--ink2);line-height:1.5;min-height:2.4em}
.hidecard .eff i{color:var(--ink3);font-style:normal}
.hidecard .nx{font-size:12px;color:var(--ink3);line-height:1.45;border-top:1px dashed var(--line);padding-top:7px}
.hidecard .nx.done{color:var(--amber);border-top-color:var(--amber2)}
.hidecard .nc{font-family:var(--f-mono);font-size:11.5px;color:var(--amber)}

/* ---------- 시즌 패스 ---------- */
.passgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(62px,1fr));gap:5px;margin-top:12px}
.pstep{
  background:var(--panel2);border:0;border-radius:var(--r-sm);
  padding:7px 4px;display:flex;flex-direction:column;align-items:center;gap:2px;
  cursor:default;color:var(--ink3);
}
.pstep b{font-family:var(--f-mono);font-size:14.5px;color:var(--ink2)}
.pstep span{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.04em}
.pstep.rdy{box-shadow:inset 0 0 0 1px var(--amber);background:var(--amber-glow);cursor:pointer}
.pstep.rdy b,.pstep.rdy span{color:var(--amber)}
.pstep.got{box-shadow:inset 0 0 0 1px var(--line2);opacity:.5}
.pstep.got b{color:var(--grn)}

/* ---------- 공통 보조 ---------- */
.orow.dim{opacity:.45}
.chip.ok{border-color:var(--grn);color:var(--grn)}
.big{font-family:var(--f-mono);font-size:27px;font-weight:600;color:var(--amber);line-height:1.1}

/* ---------- 분류 묶음 ---------- */
.grp{border:0;border-radius:var(--r-sm);margin-bottom:8px;overflow:hidden;background:var(--panel)}
.grp.open{box-shadow:inset 0 0 0 1px var(--line2)}
.grph{
  width:100%;display:flex;align-items:center;gap:9px;
  background:var(--panel2);border:0;border-bottom:1px solid transparent;
  padding:9px 12px;cursor:pointer;text-align:left;
}
.grp.open .grph{border-bottom-color:var(--line)}
.grph:hover{background:var(--panel3)}
.grph .gc{font-family:var(--f-mono);color:var(--amber);font-size:11.5px;width:10px}
.grph b{font-size:14px;font-weight:500;letter-spacing:-.01em}
.grph .gn{margin-left:auto;font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.grp .tablewrap{border:0;border-radius:0}

/* ---------- 검색줄 ---------- */
.srow{display:flex;align-items:center;gap:9px;margin-bottom:10px;flex-wrap:wrap}
.search{
  flex:1 1 200px;min-width:0;
  background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--f-ui);font-size:13.5px;padding:7px 11px;border-radius:var(--r-sm);
}
.search:focus{outline:0;border-color:var(--amber2)}
.search::placeholder{color:var(--ink3)}
.scount{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3);white-space:nowrap}

/* ---------- 표 보조 ---------- */
tr.lock{opacity:.42}
.pen{color:var(--amber);letter-spacing:-1px}
.brand .build{color:var(--line2);font-size:9.5px;letter-spacing:.1em}

/* ---------- 슬라이더 ---------- */
.slider{
  flex:1;min-width:0;height:4px;appearance:none;-webkit-appearance:none;
  background:var(--line2);border-radius:var(--r-sm);outline:0;cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;width:15px;height:15px;border-radius:50%;
  background:var(--amber);border:0;cursor:pointer;box-shadow:0 0 6px var(--amber-glow);
}
.slider::-moz-range-thumb{
  width:15px;height:15px;border-radius:50%;background:var(--amber);border:0;cursor:pointer;
}
.btn.on{box-shadow:inset 0 0 0 1px var(--amber);color:var(--amber);background:var(--amber-glow)}
.warnmark{
  font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;
  color:var(--amber);border:1px solid var(--amber2);border-radius:var(--r-sm);padding:1px 5px;margin-left:7px;
}
.warnmark.bad{color:var(--red);border-color:var(--red2)}

/* ---------- 전투 화면 ---------- */
/* 가운데 칸을 화면 높이에 맞추고, 교전 기록이 남는 공간을 전부 가져간다.
   전에는 기록이 4줄만 보이고 아래가 텅 비어 있었다.
   중첩된 flex 안에서 스크롤이 제대로 생기려면 min-height:0 이 반드시 필요하다. */
.layout.combat{ align-items:stretch }
.layout.combat.live .col.main{ height:calc(100vh - 92px); overflow:hidden }
.layout.combat .col.main > .col{ flex:none }
.logpanel{ flex:1; display:flex; flex-direction:column; min-height:180px }
.logpanel .log{ flex:1; min-height:0; max-height:none }

/* 장비 요약 */
.gearw{display:flex;align-items:baseline;gap:10px}
.gearw b{font-size:15.5px;letter-spacing:-.01em}
.gearw .mag{margin-left:auto;font-family:var(--f-mono);font-size:17.5px;font-weight:600;color:var(--amber)}
.gearw .mag i{font-style:normal;font-size:11.5px;color:var(--ink3)}

.chip.ok{border-color:var(--grn);color:var(--grn)}
.chip.bad{border-color:var(--red2);color:var(--red)}





/* ---------- 운영: 아이템 지급 ---------- */
.cntbox{
  width:88px;background:var(--bg);border:1px solid var(--line2);color:var(--ink);
  font-family:var(--f-mono);font-size:13.5px;padding:7px 9px;border-radius:var(--r-sm);text-align:right;
}
.cntbox:disabled{opacity:.35}
.givelist{max-height:420px;overflow-y:auto;border:0;border-radius:var(--r-sm);background:var(--panel2)}
.gsec + .gsec{border-top:1px solid var(--line)}
.gsech{
  position:sticky;top:0;z-index:1;
  padding:6px 12px;background:var(--panel3);
  font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink2);
}
.gsech i{font-style:normal;color:var(--ink3);margin-left:6px}
.grow{display:flex;align-items:center;gap:10px;padding:7px 12px;border-top:1px solid var(--panel2)}
.grow:first-of-type{border-top:0}
.grow .gi{min-width:0;flex:1}
.grow .gi b{font-size:13.5px}
.grow .gid{font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);margin-left:7px}
.ownchips{margin-top:6px}
.chip.own{cursor:pointer;border-color:var(--line2)}
.chip.own:hover{border-color:var(--red2);color:var(--red)}
.chip.own i{font-style:normal;color:var(--amber);margin-left:3px}

/* 남은 차례 시간 */
.turnbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.turnbar > span:first-child{flex:1;min-width:0}
.tleft{
  font-family:var(--f-mono);font-size:13.5px;font-weight:600;color:var(--ink2);
  border:1px solid var(--line2);border-radius:var(--r-sm);padding:2px 8px;white-space:nowrap;
}
.tleft.low{color:var(--red);border-color:var(--red2);animation:pulse 1s ease-in-out infinite}
@keyframes pulse{50%{opacity:.5}}

/* ── 복구 코드 ─────────────────────────────────────────── */
/* 사람이 손으로 받아적는 코드다. 글자를 크게, 자간을 넓게,
   고정폭으로 둬서 O/0 같은 걸 헷갈리지 않게 한다. */
.rc-box{
  margin:18px 0 4px; padding:16px 12px; text-align:center;
  font-family:ui-monospace,'SFMono-Regular',Menlo,Consolas,monospace;
  font-size:27px; font-weight:700; letter-spacing:3px;
  color:var(--amber); background:var(--panel2);
  border:1px solid var(--amber2); border-radius:4px;
  user-select:all; word-break:break-all;
}
.rc-warn{
  margin:12px 0 0; font-size:13px; line-height:1.75; color:var(--ink2);
  border-left:2px solid var(--red2); padding-left:10px;
}
.rc-warn b{ color:var(--ink); }


/* ── 신규 계약자 안내 ──────────────────────────────────── */
.modal.tour .tour-dots{ display:flex; gap:5px; margin:2px 0 14px; }
.modal.tour .tour-dots span{
  height:3px; flex:1; background:var(--line2); border-radius:var(--r-sm);
  transition:background .18s;
}
.modal.tour .tour-dots span.done{ background:var(--amber2); }
.modal.tour .tour-dots span.on{ background:var(--amber); }
.tour-t{
  margin:0 0 10px; font-family:var(--f-disp); font-size:18.5px;
  font-weight:400; color:var(--ink); letter-spacing:.01em;
}
.tour-b{ font-size:14px; line-height:1.85; color:var(--ink2); }
.tour-b b{ color:var(--amber); font-weight:600; }
.modal.tour .tour-dots span{ cursor:pointer; }

/* «지금 누를 것» 목록 — 처음 하는 사람이 막히는 건 개념이 아니라 순서다.
   설명 문단처럼 보이면 또 읽고 흘려버리니, 눈에 띄는 차례표로 세운다. */
.tour-do{
  margin:12px 0 4px; padding:12px 14px 12px 34px;
  background:var(--panel2); border:0; border-left:2px solid var(--amber2);
  border-radius:var(--r-sm); counter-reset:td;
  list-style:none; font-size:13.5px; line-height:1.75;
}
.tour-do li{ position:relative; margin:0 0 9px; counter-increment:td; }
.tour-do li:last-child{ margin-bottom:0; }
.tour-do li::before{
  content:counter(td); position:absolute; left:-24px; top:2px;
  width:17px; height:17px; border-radius:50%;
  background:var(--amber-glow); border:1px solid var(--amber2); color:var(--amber);
  font-family:var(--f-mono); font-size:10.5px; line-height:15px; text-align:center;
}

/* 아래 줄 — «다시 보지 않기»가 왼쪽 끝에 늘 보여야 한다.
   묻어두면 못 찾고, 못 찾으면 매번 뜨는 창이 성가신 것이 된다. */
.tour-f{ display:flex; align-items:center; gap:8px; margin-top:16px; }
.tour-skip{
  display:inline-flex; align-items:center; gap:7px; cursor:pointer;
  color:var(--ink3); font-size:12.5px; user-select:none;
}
.tour-skip:hover{ color:var(--ink2); }
.tour-skip input{ width:14px; height:14px; accent-color:var(--amber); cursor:pointer; }

/* ── 다음 할 일 ────────────────────────────────────────────
   안내 창은 닫으면 사라진다. 닫고 나서도 «그래서 뭘 눌러?»가
   남지 않도록, 지금 할 일 하나를 옆에 계속 세워 둔다. */
.panel.nextstep{ box-shadow:var(--lift), inset 0 0 0 1px var(--amber2); }
.panel.nextstep .panel-h{ background:transparent; border-bottom-color:var(--amber2); }
.panel.nextstep .panel-h h3{ color:var(--amber); }
.panel.nextstep .panel-h .btn.xs{ margin-left:auto; padding:1px 6px; color:var(--ink3); }
.ns-t{
  font-family:var(--f-disp); font-size:15px; color:var(--ink);
  margin:4px 0 6px; line-height:1.4;
}
.ns-b{ font-size:12.5px; line-height:1.7; color:var(--ink2); }
.ns-b b{ color:var(--amber); font-variant-numeric:tabular-nums; }

/* ── 레이드 요약 줄 ──
   «지금 들어갈 수 있는 게 몇 개인지»가 먼저 보여야 한다.
   못 들어가는 것만 잔뜩 보면 탭을 닫고 만다. */
.raidsum{
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  padding:9px 14px; margin-bottom:12px;
  background:var(--panel2); border:0; border-radius:var(--r-sm);
  font-family:var(--f-mono); font-size:11.5px; color:var(--ink3);
}
.raidsum b{ color:var(--ink); font-size:13.5px; margin-left:5px; }
.raidsum b.carryon{ color:var(--grn); }

/* ── 시간대·날씨 ───────────────────────────────────────── */
.contract .meta .cond{
  display:inline-flex; align-items:center; gap:4px;
  padding:1px 7px; border-radius:var(--r-sm);
  border:1px solid var(--line2); color:var(--ink2);
}
.contract .meta .cond b{ color:var(--ink); }
.contract .meta .cond.dark1{ border-color:var(--amber2); color:var(--amber); }
.contract .meta .cond.dark1 b{ color:var(--amber); }
.contract .meta .cond.dark2{ border-color:var(--red2); color:var(--red-ink); background:var(--red-bg); }
.contract .meta .cond.dark2 b{ color:var(--red-ink2); }

/* 왜 못 누르는지 단추 밑에 적는다 */
.hidecard .lack{ margin-top:5px; font-size:11.5px; color:var(--red-ink); line-height:1.5; }

/* ── 출격 준비 (창고 ↔ 휴대) ───────────────────────────── */
.rigpanel.warn{ border-color:var(--red2); }
.rigpanel.warn .panel-h .tag{ border-color:var(--red2); color:var(--red-ink); }
.rigrow{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }

.rigrow .rg .spread{ margin-bottom:4px; }
.rigok{ margin-top:12px; font-size:13px; color:var(--ink2); line-height:1.7; }
.rigok b{ color:var(--grn); }
.rigbad{
  margin-top:12px; font-size:13px; line-height:1.7; color:var(--red-ink);
  border-left:2px solid var(--red2); padding-left:10px;
}
.rigbad b{ color:var(--red-ink2); }
.carryon{ color:var(--amber); font-weight:600; }
.btn.xs{
  padding:2px 7px; font-size:11.5px; min-width:0; line-height:1.5;
  font-family:var(--f-mono);
}

/* 현장에 두고 온 것 */
.lostlist{ display:flex; flex-direction:column; gap:4px; }
.lostlist .li{
  display:flex; gap:10px; align-items:baseline;
  padding:5px 9px; border:1px solid var(--line); border-radius:var(--r-sm);
  background:#120E0D; font-size:13px; color:var(--ink2);
}
.lostlist .li .t{
  font-family:var(--f-mono); font-size:10.5px; letter-spacing:.08em;
  color:var(--ink3); min-width:42px; text-transform:uppercase;
}
.lostlist .li.hard{ border-color:var(--red2); color:var(--red-ink2); }

/* ── 계약 제약 ─────────────────────────────────────────── */
.conspanel{
  margin-top:10px; padding:12px; border-radius:var(--r-sm);
  border:1px solid var(--line2); background:var(--bg);
}
.consgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px; }
.consopt{
  display:flex; flex-direction:column; gap:3px; text-align:left;
  padding:9px 11px; border:0; border-radius:var(--r-sm);
  background:var(--panel2); color:var(--ink2); cursor:pointer;
  font-family:var(--f-ui); transition:border-color .15s, background .15s;
}
.consopt:hover:not(:disabled){ box-shadow:inset 0 0 0 1px var(--line2); }
.consopt.on{ box-shadow:inset 0 0 0 1px var(--amber2); background:#171208; }
.consopt:disabled{ opacity:.35; cursor:not-allowed; }
.consopt .cn{ font-size:13.5px; font-weight:600; color:var(--ink); }
.consopt.on .cn{ color:var(--amber); }
.consopt .cp{ font-family:var(--f-mono); font-size:11.5px; color:var(--amber); }
.consopt .cd{ font-size:12px; line-height:1.6; }
.consopt .cr{ font-family:var(--f-mono); font-size:10.5px; color:var(--ink3); }
.mono.bad{ color:var(--red); }

/* 전투 중 제약 표시 */
.consbar{
  margin:0 0 10px; padding:6px 11px; border-radius:var(--r-sm);
  border:1px solid var(--red2); background:var(--red-bg);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.04em; color:var(--red-ink);
}

/* 계약 난이도 표시 — 앞쪽 단계는 «편하게 해도 된다»가 보여야 한다 */
.chip.tier.teasy{ border-color:var(--grn-line); color:var(--grn); }
.chip.tier.tmid { border-color:var(--amber2); color:var(--amber); }
.chip.tier.thard{ border-color:var(--red2); color:var(--red-ink); background:var(--red-bg); }

/* ============================================================
   휴대폰 (≤ 640px)
   ============================================================
   데스크톱은 모니터를 앞에 두고 보는 화면이라 10px 글씨도 읽힌다.
   폰은 아니다. 손에 들고, 흔들리고, 손가락으로 누른다.

   그래서 데스크톱 디자인은 그대로 두고 여기서만 크기를 올린다.
   두 가지 기준을 지킨다.
     · 글씨는 11.5px 이상 (그 아래는 안 읽힌다)
     · 누르는 것은 높이 38px 이상 (그 아래는 안 눌린다)
   ============================================================ */


/* ── 퀘스트 ────────────────────────────────────────────── */
.gatebox{ border-color:var(--amber2); }
.gatetxt{ font-size:13.5px; line-height:1.8; color:var(--ink2); }
.gatetxt b{ color:var(--amber); }
.qgrid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:7px; }
.qi{
  display:flex; justify-content:space-between; gap:8px; align-items:baseline;
  padding:7px 10px; border:0; border-radius:var(--r-sm);
  background:var(--panel2); font-size:13px; color:var(--ink2);
}
.qi b{ color:var(--ink); font-weight:600; }
.qi span{ font-family:var(--f-mono); color:var(--amber); }
.qi.r2{ border-color:var(--grn-line); } .qi.r3{ box-shadow:inset 0 0 0 1px var(--amber2); }
.qi.r4{ box-shadow:inset 0 0 0 1px var(--red2); background:var(--red-bg); }
.qi.r4 b{ color:var(--red-ink2); }

.quest{
  border:0; border-radius:var(--r); background:var(--panel2);
  padding:14px 16px; margin-bottom:10px;
}
.quest.taken{ box-shadow:inset 0 0 0 1px var(--line2); }
.quest.ready{ box-shadow:inset 0 0 0 1px var(--amber); background:var(--panel3); }
.quest .qh{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.quest .qh b{ font-size:15px; color:var(--ink); }
.quest .qb{ margin:8px 0 0; font-size:13px; line-height:1.75; color:var(--ink2); }
.qneeds{ display:flex; flex-direction:column; gap:6px; margin-top:11px; }
.qn{ display:flex; align-items:center; gap:10px; font-size:13px; color:var(--ink2); }
.qn .t{ flex:1; min-width:0; }
.qn .c{ font-family:var(--f-mono); font-size:12px; color:var(--ink3); min-width:56px; text-align:right; }
.qn.ok .t{ color:var(--grn); }
.qn.ok .c{ color:var(--grn); }
.rb.sm{ width:80px; flex:none; }
.qf{ display:flex; align-items:center; gap:14px; margin-top:12px; flex-wrap:wrap; }
.qf .p{ font-size:12.5px; color:var(--ink2); }
.qf .p span{ color:var(--ink3); font-size:12px; }
.qf .p b{ color:var(--amber); font-family:var(--f-mono); }


/* ── 채팅 바닥 고정 ─────────────────────────────────────
   새 메시지는 따라 내려간다. 다만 지난 대화를 읽는 중에 끌어내리면
   읽을 수가 없으므로, 올려둔 동안에는 알약만 띄운다. */
.chatwrap{ position:relative; }
.chatnew{
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  padding:6px 14px; border-radius:14px; cursor:pointer;
  border:1px solid var(--amber2); background:#1A1408; color:var(--amber);
  font-family:var(--f-mono); font-size:11.5px; letter-spacing:.08em;
  box-shadow:0 2px 10px rgba(0,0,0,.5);
}
.chatnew:hover{ background:#241C0B; }

/* ── 쿠폰 ─────────────────────────────────────────────── */
.cpform{ display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:10px; }
.cpform label.fl{ display:flex; flex-direction:column; gap:5px; margin:0; }
.cpform input{ width:100%; }
.cchips{ display:flex; flex-wrap:wrap; gap:6px; }
.cchip{
  display:inline-flex; align-items:center; gap:6px;
  padding:4px 8px; border-radius:var(--r-sm); font-size:12.5px;
  border:1px solid var(--amber2); background:#171208; color:var(--amber);
}
.cchip button{
  border:0; background:transparent; color:var(--ink3); cursor:pointer;
  font-size:13.5px; line-height:1; padding:0 2px;
}
.cchip button:hover{ color:var(--red); }
.chip.ok{ border-color:var(--grn-line); color:var(--grn); }

/* 단독 레이드는 분대 레이드와 구분해서 보여준다 */
.chip.raidchip.solo{ border-color:var(--blu); color:var(--blu); }

/* ============================================================
   개편 A — 좌측 아이콘 레일 · 한 줄 계약 · 전투 재배치
   ============================================================
   측정된 문제 다섯 가지를 하나씩 없앤다.
     1. 탭 14개가 두 줄로 접힘        → 세로 아이콘 레일
     2. 계약 카드 226px, 한 화면 2.5건 → 한 줄 92px, 펼쳐야 브리핑
     3. 교전 기록 상자 70%가 빔        → 위에서부터 채운다
     4. 행동 11개가 한 줄로 쌓임       → 2열 격자 + 턴 종료 고정
     5. 위계가 한 단계뿐               → 난이도 블록 / 제목 / 부연 세 단계
   ============================================================ */

#app{max-width:1560px}

/* ── 1. 좌측 아이콘 레일 ── */
.layout.hubA{
  display:grid; gap:12px; align-items:start;
  grid-template-columns:86px 300px minmax(0,1fr) 334px;
  grid-template-areas:"rail side main chat";
}
/* 통신 칸을 접으면 그 너비를 본 칸이 가져간다.
   혼자 할 때 340px이 늘 비어 있는데 정작 볼 것은 좁았다. */
.layout.hubA.nocomms{
  grid-template-columns:86px 300px minmax(0,1fr);
  grid-template-areas:"rail side main";
}
.layout.hubA > .rail{grid-area:rail}
.layout.hubA > .col.side{grid-area:side}
.layout.hubA > .col.main{grid-area:main}
.layout.hubA > .col.chat{grid-area:chat; display:flex; flex-direction:column; gap:12px; min-width:0}

.rail{
  position:sticky; top:66px; align-self:start;
  display:flex; flex-direction:column; gap:1px;
  background:var(--panel); border:0; border-radius:var(--r-sm); padding:6px 5px;
}
.railb{
  position:relative; display:flex; flex-direction:column; align-items:center; gap:3px;
  /* 탭이 20칸을 넘으면서 레일이 화면 높이에 딱 닿았다. 그러면 페이지를
     맨 아래까지 내릴 때 레일이 같이 밀려 올라간다 (붙어 있을 자리가
     부모 끝에서 모자라기 때문). 칸을 조금 줄여 여유를 남긴다. */
  background:transparent; border:0; border-radius:var(--r-sm); padding:7px 2px; cursor:pointer;
  color:var(--ink3); font-family:var(--f-ui); font-size:11px; line-height:1; letter-spacing:.01em;
  transition:color .12s, background .12s;
}
.railb svg{width:18px;height:18px}
.railb:hover{color:var(--ink2); background:var(--panel2)}
.railb.on{color:var(--ink); background:var(--panel2)}
.railb.on svg{color:var(--amber)}
.railb.adm{color:#A98BC0}
.railb.adm.on{color:#CBAEDC; background:var(--panel2)}
.raildiv{display:block; height:1px; background:var(--line); margin:4px 7px}
.railb .dot{
  position:absolute; top:6px; right:10px; width:6px; height:6px;
  border-radius:50%; background:var(--amber); box-shadow:0 0 6px var(--amber-glow);
}

.mainhead .btn.xs{margin-left:6px}
.mainhead h3{font-size:13.5px; letter-spacing:.02em; text-transform:none; color:var(--ink)}

/* ── 2. 계약 — 한 줄, 누르면 펼쳐진다 ── */
.clist{display:flex; flex-direction:column; gap:8px}
/* 왼쪽 5px 띠가 등급을 «형태»로도 말한다 — 색만 쓰면 색을 못 가리는 사람에게는 없는 정보다 */
.crow{
  display:grid; grid-template-columns:5px 74px minmax(0,1fr) 196px;
  background:var(--panel); border:0; border-radius:var(--r);
  overflow:hidden; cursor:pointer; box-shadow:var(--lift);
  transition:background .14s, box-shadow .14s;
}
.crow::before{ content:""; background:var(--line2); }
.crow:hover{background:var(--panel2)}
.crow.open{background:var(--panel2); cursor:default; box-shadow:var(--lift2)}
.crow.locked{opacity:.52}

.cdif{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px;
  padding:12px 4px; border:0; background:transparent; text-align:center;
}
.cdif .k{font-family:var(--f-ui); font-size:10px; letter-spacing:.08em; color:var(--ink3)}
.cdif b{font-family:var(--f-mono); font-weight:600; font-size:22px; line-height:1; color:var(--ink2)}
.cdif .s{font-size:11px; line-height:1.3; color:var(--ink3)}
.crow.open .cdif b{font-size:26px}
/* T1~4는 배우는 구간이라 초록, 그 위부터 색이 올라간다 */
.crow.d1::before{background:var(--grn)}   .crow.d1 .cdif b{color:var(--grn)}
.crow.d2::before{background:var(--amber)} .crow.d2 .cdif b{color:var(--amber)}
.crow.d3::before{background:#C2762F}      .crow.d3 .cdif b{color:#C2762F}
.crow.d4::before{background:var(--red)}   .crow.d4 .cdif b{color:var(--red)}
.crow.raid::before{background:var(--blu)} .crow.raid .cdif b{color:var(--blu)}

.cmid{display:flex; flex-direction:column; justify-content:center; gap:4px; padding:12px 16px; min-width:0}
.ct{display:flex; align-items:center; gap:7px; flex-wrap:wrap}
.ct .tt{font-size:15px; font-weight:600; letter-spacing:-.01em}
/* 펼친 줄에서는 제목이 한 단계 커진다 — 지금 보고 있는 것이 무엇인지 */
.crow.open .ct .tt{font-size:17px}
.ct .cc{font-family:var(--f-mono); font-size:11px; color:var(--ink3); margin-left:auto}
.cchip{
  font-family:var(--f-ui); font-size:11px; padding:2px 8px; border-radius:11px;
  border:0; background:var(--panel3); color:var(--ink2); white-space:nowrap;
}
.cchip.raid,.cchip.co{background:rgba(91,144,184,.17); color:var(--blu)}
.cchip.th{background:rgba(224,166,60,.15); color:var(--amber)}
/* 잠긴 이유는 줄에서 바로 읽혀야 한다 — 흐려진 줄 위에서도 눈에 남게 둔다 */
.cchip.lk{background:rgba(212,88,74,.18); color:var(--red); opacity:1}
.crow.locked .cchip.lk{opacity:1}
/* 작전 목표 — «다 죽이기»가 아닌 계약임을 수주 전에 알린다 */
.cchip.ob{background:rgba(84,168,122,.17); color:var(--grn)}
/* 목표 진행도 — 언제 끝나는지가 숫자로 보여야 한다 */
.f .pg{font-style:normal; font-size:10.5px; color:var(--ink3); margin-left:3px}
.f .pg.bad{color:var(--red)}

/* 적 역할 — 무엇부터 잡아야 하는지 한눈에.
   의무병이 제일 급하니 제일 눈에 띄게 둔다. */
.rbadge{
  display:inline-block; margin-left:7px; padding:2px 8px; border-radius:11px;
  font-family:var(--f-ui); font-size:10.5px; letter-spacing:.02em;
  border:0; background:var(--panel3); color:var(--ink2); white-space:nowrap;
}
.rbadge.r-medic  {background:rgba(212,88,74,.22);  color:#E68477}
.rbadge.r-sniper {background:rgba(194,118,47,.20); color:#D08B48}
.rbadge.r-assault{background:rgba(224,166,60,.18); color:var(--amber)}
.rbadge.r-mg     {background:rgba(91,144,184,.20); color:var(--blu)}
.ct .cond{
  display:inline-flex; align-items:center; gap:4px; padding:2px 9px; border-radius:11px;
  font-family:var(--f-ui); font-size:11px; border:0; background:var(--panel3); color:var(--ink2);
}
.ct .cond b{color:var(--ink); font-weight:500}
.ct .cond.dark1{background:rgba(224,166,60,.15); color:var(--amber)} .ct .cond.dark1 b{color:var(--amber)}
.ct .cond.dark2{background:rgba(212,88,74,.18); color:#E08476} .ct .cond.dark2 b{color:#E8988B}

.cm{
  display:flex; flex-wrap:wrap; align-items:center; gap:0 7px;
  font-family:var(--f-mono); font-size:12px; color:var(--ink3);
}
.cm .sep{color:var(--line)}
.cm .dl{color:var(--amber2)}
.cb{margin:4px 0 0; font-size:13px; line-height:1.7; color:var(--ink2); max-width:72ch; text-wrap:pretty}
.cact{display:flex; gap:6px; flex-wrap:wrap; margin-top:4px}

.cpay{
  display:flex; flex-direction:column; justify-content:center; gap:4px;
  padding:12px 16px; border-left:0; text-align:right; align-items:flex-end;
}
.cpay b{font-family:var(--f-mono); font-size:19px; font-weight:600; color:var(--amber); line-height:1.15}
.cpay .sub{font-family:var(--f-mono); font-size:11px; color:var(--ink3)}
.crow.locked .cpay b{color:var(--ink3)}
.clist .conspanel{margin-top:-3px}

/* ── 3. 교전 기록은 위에서부터 채운다 ── */
/* 새 줄이 배열 맨 앞에 들어온다. 정방향으로 그리면 최신이 맨 위고,
   줄이 적을 때 상자가 위에서부터 찬다 — 전에는 아래에 붙어 위가 비었다. */
.log{flex-direction:column; justify-content:flex-start}

/* ── 4. 전투 재배치 ── */
.chead{display:flex; flex-direction:column; gap:8px; margin-bottom:12px}
.chead .engage-bar{gap:8px 18px}
.chead .engage-bar .grow{margin-left:auto}
.chead .dist-track{flex:none; width:100%; min-width:0; height:40px}
.chead .turnbar{margin:0}
.chead .consbar{margin:0}

.layout.combat{grid-template-columns:300px minmax(0,1fr) 410px}
.layout.combat.live .col.main{height:calc(100vh - 218px); min-height:340px}
/* 결과 보고는 내용 길이가 제각각이다 — 높이를 묶으면 «본부로 복귀»가 잘려 나간다 */
.layout.combat.over .col.main{height:auto; overflow:visible}

.acts{grid-template-columns:repeat(auto-fit,minmax(176px,1fr))}
.act{grid-template-columns:1fr auto; gap:3px 8px; align-items:baseline; padding:11px 13px}
.act .an{grid-column:1; grid-row:1}
.act .ap{grid-column:2; grid-row:1; justify-self:end}
.act .ad{grid-column:1/-1; grid-row:2; margin-top:0}
/* 턴 종료는 행동이 몇 개든 항상 보여야 한다 — 전에는 화면 밖으로 밀렸다 */
.actfoot{
  position:sticky; bottom:0; z-index:5; margin-top:14px; padding:12px 0 2px;
  background:linear-gradient(180deg,rgba(18,23,20,0) 0%,var(--panel) 34%);
}

/* ── 좁은 화면 ── */
@media (max-width:1340px){
  .layout.hubA{
    grid-template-columns:86px 290px minmax(0,1fr);
    grid-template-areas:"rail side main" "rail side chat";
  }
  .layout.hubA.nocomms{ grid-template-areas:"rail side main"; }
}






/* 난이도 블록의 «난이도/레이드» 글씨는 색을 타지 않는다 — 어두운 등급에서 안 읽혔다 */
.cdif .k,
.crow.d1 .cdif .k, .crow.d2 .cdif .k, .crow.d3 .cdif .k,
.crow.d4 .cdif .k, .crow.raid .cdif .k{ color:var(--ink3); }
.crow.locked{ opacity:.62; }
/* 마감은 줄 끝에 붙인다 — 줄바꿈될 때 구분점만 덜렁 남던 것을 없앤다 */
.cm .dl{ margin-left:auto; padding-left:10px; }

/* 좁은 화면에서는 전투도 한 칸이다.
   .layout.combat 쪽 지정이 더 구체적이어서 기존 980px 규칙을 눌러버리고 있었다. */


/* ── 나올 수 있는 수집품 (계약 펼쳤을 때) ──────────────────
   나가기 전에 «여기서 뭐가 나오나»를 알 수 있어야 퀘스트를 끌고 갈 수 있다. */
.drops{
  margin-top:9px; padding:9px 11px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--bg);
}
.drops .dh{display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; margin-bottom:7px}
.drops .dh .k{font-family:var(--f-mono); font-size:10.5px; letter-spacing:.16em; color:var(--ink3); text-transform:uppercase}
.drops .dh .sub{font-family:var(--f-mono); font-size:11px; color:var(--line2)}
.dgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(164px,1fr)); gap:5px}
.dq{
  display:grid; grid-template-columns:1fr auto; gap:0 8px; align-items:baseline;
  padding:6px 9px; border:0; border-radius:var(--r-sm); background:var(--panel2);
}
.dq .dn{font-size:13px; color:var(--ink2); min-width:0}
.dq .dp{font-family:var(--f-mono); font-size:13px; font-weight:600; color:var(--ink2)}
.dq .ds{grid-column:1/-1; font-family:var(--f-mono); font-size:11px; color:var(--ink3); margin-top:1px}
.dq.r2{border-color:var(--grn-line)} .dq.r2 .dp{color:var(--grn)}
.dq.r3{box-shadow:inset 0 0 0 1px var(--amber2)} .dq.r3 .dp{color:var(--amber)} .dq.r3 .dn{color:var(--ink)}
.dq.r4{box-shadow:inset 0 0 0 1px var(--red2); background:var(--red-bg)} .dq.r4 .dp{color:var(--red-ink2)} .dq.r4 .dn{color:var(--red-ink2)}
/* 퀘스트에 지금 모자란 것은 한눈에 */
.dq.need{box-shadow:inset 0 0 0 1px var(--amber); background:#171208}
.dq.need .dn{color:var(--amber)}
.dq .mk{
  font-style:normal; font-family:var(--f-mono); font-size:10px; letter-spacing:.08em;
  color:var(--amber); border:1px solid var(--amber2); border-radius:var(--r-sm); padding:0 4px; margin-left:5px;
}

/* ── 완료 가능 퀘스트 알림 ── */
.railb .dot.n{
  width:auto; min-width:15px; height:15px; border-radius:8px; padding:0 4px;
  font-style:normal; font-family:var(--f-mono); font-size:10.5px; font-weight:600;
  line-height:15px; text-align:center; color:var(--bg); box-shadow:0 0 8px var(--amber-glow);
}
.railb .dot.n{top:4px; right:6px}



/* 펼친 줄은 키가 크다 — 난이도와 보수를 가운데 띄우지 말고 위에 붙인다 */
.crow.open .cdif, .crow.open .cpay{ justify-content:flex-start; padding-top:15px; }
/* 결과 보고 화면에서는 교전 기록이 무한정 늘어나지 않게 잡아둔다 */
.layout.combat.over .logpanel{ flex:none }
.layout.combat.over .logpanel .log{ flex:none; max-height:420px }
/* 계통 퀘스트가 아직 요구하는 수집품 — 반복·일일에 제출하면 모자라진다 */
.qi.need{ box-shadow:inset 0 0 0 1px var(--amber); background:#171208; }
.qi.need b{ color:var(--amber); }
.qi .mk{
  font-style:normal; font-family:var(--f-mono); font-size:9.5px; letter-spacing:.08em;
  color:var(--amber); border:1px solid var(--amber2); border-radius:var(--r-sm); padding:0 5px; margin-left:6px;
}
/* 막대는 span이라 flex 밖에서는 inline으로 눌린다 — 어디에 놓든 가로로 펴지게 둔다 */
.bar{ display:block; width:100% }
/* 상한에 닿은 능력치 — 왜 «+»가 없는지 보이게 자리를 남긴다 */
.statrow .plus.max{
  border-color:var(--line2); color:var(--amber2); background:transparent;
  cursor:default; display:inline-flex; align-items:center; justify-content:center;
}

/* ── 좌측 레일이 혼자 스크롤되게 ──────────────────────────
   sticky 로만 두면 레일이 화면보다 길 때 «페이지를 끝까지 내려야»
   아래 항목이 보인다. 레일 안에서 스크롤되게 해서 항상 전부 닿게 한다. */
.rail{
  /* 78px 이던 것을 늘렸다. 탭이 20칸이 되면서 레일이 이 상한에 딱 닿았는데,
     그러면 페이지를 맨 아래까지 내릴 때 레일이 같이 75px 밀려 올라간다 —
     sticky 는 «부모 끝»을 넘어서 붙어 있을 수 없기 때문이다.
     레일은 어차피 제 안에서 굴러가므로, 여유를 남기는 쪽이 낫다. */
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  overscroll-behavior: contain;   /* 레일 끝에서 페이지가 같이 밀리지 않게 */
  scrollbar-width: thin;
}
.rail::-webkit-scrollbar{ width:4px }
.rail::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:var(--r-sm) }
/* 작전원·무전 칸도 같은 이유로 화면보다 길면 혼자 스크롤되게 둔다 */

  .layout.hubA > .col.side{
    position:sticky; top:66px; align-self:start;
    max-height:calc(100vh - 78px); overflow-y:auto; overscroll-behavior:contain;
    scrollbar-width:thin;
  }
  .layout.hubA > .col.side::-webkit-scrollbar{ width:4px }
  .layout.hubA > .col.side::-webkit-scrollbar-thumb{ background:var(--line2); border-radius:var(--r-sm) }


/* ── 정보원 ────────────────────────────────────────────────
   방치형이라 «숫자만 오르는 장치»가 되기 쉽다. 그래서 화면에서
   모인 것만큼이나 «유지비·발각 위험»이 먼저 보이게 둔다. */
.infsum{
  display:flex; gap:20px; flex-wrap:wrap; align-items:center;
  padding:11px 15px; margin-bottom:12px;
  background:var(--panel2); border-radius:var(--r);
  font-size:12.5px; color:var(--ink3);
}
.infsum b{ color:var(--ink); font-family:var(--f-mono); font-size:14px; margin-left:6px; }
.infsum b.carryon{ color:var(--grn); }
.infsum b.bad{ color:var(--red); }

.inflist{ display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:10px; }
.infcard{
  background:var(--panel2); border-radius:var(--r); padding:13px 15px;
  display:flex; flex-direction:column; gap:7px;
  border-left:4px solid var(--line2);
}
.infcard.k-money { border-left-color:var(--amber); }
.infcard.k-supply{ border-left-color:var(--grn); }
.infcard.k-intel { border-left-color:var(--blu); }
.infcard .ih{ display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.infcard .ih b{ font-size:14.5px; }
.infcard .irow{ display:flex; gap:10px; align-items:baseline; font-size:12.5px; }
.infcard .ik{ width:66px; flex:none; color:var(--ink3); }
.infcard .iv{ flex:1; min-width:0; color:var(--ink); }
.infcard .iv.warn{ color:var(--amber); }
.infcard .iv.bad{ color:var(--red); }
.infcard .idim{ font-style:normal; color:var(--ink3); font-size:11.5px; margin-left:6px; }
.infcard .iacts{ display:flex; align-items:center; gap:8px; margin-top:4px; }

.infkinds{ display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:8px; margin-bottom:12px; }
/* 얼굴을 넣으면서 세로 쌓기에서 «얼굴 | 글» 가로 배치로 바꿨다.
   세로로 두면 그림이 제목을 밀어내려서 고르는 칸이 두 배로 길어진다. */
.infkind{
  text-align:left; background:var(--panel2); border:0; border-radius:var(--r-sm);
  padding:10px 12px; cursor:pointer; color:var(--ink2);
  display:flex; flex-direction:row; align-items:center; gap:10px;
}
.infkind b{ color:var(--ink); font-size:13.5px; }
.infkind span{ font-size:11.5px; color:var(--ink3); line-height:1.5; }
.infkind:hover{ background:var(--panel3); }
.infkind.on{ background:var(--panel3); box-shadow:inset 0 0 0 1px var(--amber); }
.infkind.on b{ color:var(--amber); }

.infregions{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:7px; }
.infreg{
  text-align:left; background:var(--panel2); border:0; border-radius:var(--r-sm);
  padding:10px 12px; cursor:pointer; color:var(--ink2);
  display:flex; flex-direction:column; gap:3px;
}
.infreg b{ color:var(--ink); font-size:13px; }
.infreg:hover:not(:disabled){ background:var(--panel3); }
.infreg:disabled{ opacity:.4; cursor:not-allowed; }

/* ── 화기 기록 ────────────────────────────────────────────
   숙련은 «기종» 단위라 총 한 정이 특별해질 이유가 없었다.
   이 총으로 몇을 잡았는지가 남아야 «내 총»이 생긴다. */
.wrecs{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:9px; }
.wrec{
  background:var(--panel2); border-radius:var(--r); padding:12px 14px;
  display:flex; flex-direction:column; gap:9px;
}
.wrec.blooded{ box-shadow:inset 0 0 0 1px var(--amber2); }
.wrec .wh{ display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; }
.wrec .wn{ font-size:15px; }
.wrec.blooded .wn{ color:var(--amber); }
.wrec .wn.dim{ color:var(--ink2); font-weight:500; }
.wrec .wd{ font-size:11.5px; color:var(--ink3); }
.wrec .wstats{ display:flex; gap:18px; flex-wrap:wrap; }
.wrec .wstats span{ display:flex; flex-direction:column; gap:2px; }
.wrec .wstats i{ font-style:normal; font-size:10.5px; color:var(--ink3); }
.wrec .wstats b{ font-family:var(--f-mono); font-size:14px; font-variant-numeric:tabular-nums; }

/* ── 유품 ── */
.cachebox{
  margin-top:10px; padding:11px 14px; border-radius:var(--r);
  background:rgba(224,166,60,.10); box-shadow:inset 0 0 0 1px var(--amber2);
  font-size:13px; line-height:1.7; color:var(--ink2);
}
.cachebox b{ color:var(--amber); }
.cachebox.got{ background:rgba(84,168,122,.12); box-shadow:inset 0 0 0 1px #2E6B48; }
.cachebox.got b{ color:var(--grn); }
.cchip.cache{ background:rgba(224,166,60,.18); color:var(--amber); }

/* ── 회사 전쟁 ────────────────────────────────────────────
   점수 둘을 나란히 놓고 그 사이를 막대로 잇는다.
   숫자만 두면 «이기고 있는지»가 한눈에 안 들어온다. */
.panel.warbox.win  { box-shadow:var(--lift), inset 0 0 0 1px #2E6B48; }
.panel.warbox.lose { box-shadow:var(--lift), inset 0 0 0 1px var(--red2); }
.panel.warbox.draw { box-shadow:var(--lift), inset 0 0 0 1px var(--amber2); }

.warscore{ display:flex; align-items:center; gap:14px; }
.warscore .ws{ display:flex; flex-direction:column; gap:2px; min-width:76px; }
.warscore .ws.foe{ text-align:right; align-items:flex-end; }
.warscore .ws .k{ font-size:11px; color:var(--ink3); }
.warscore .ws b{ font-family:var(--f-mono); font-size:26px; line-height:1; }
.warscore .ws.mine b{ color:var(--grn); }
.warscore .ws.foe b{ color:var(--red); }
.warscore .wbar{
  flex:1; height:8px; border-radius:4px; overflow:hidden;
  background:rgba(212,88,74,.45);
}
.warscore .wbar i{ display:block; height:100%; background:var(--grn); border-radius:4px;
  transition:width .3s ease; }

.warlog{ display:flex; flex-direction:column; gap:3px; max-height:260px; overflow-y:auto; }
.warlog .wl{
  display:flex; align-items:baseline; gap:9px; padding:6px 10px;
  border-radius:var(--r-sm); background:var(--panel2); font-size:12.5px;
}
.warlog .wl.foe{ opacity:.68; }
.warlog .wp{ font-family:var(--f-mono); font-weight:600; min-width:32px; }
.warlog .wl.mine .wp{ color:var(--grn); }
.warlog .wl.foe  .wp{ color:var(--red); }
.warlog .wk{ color:var(--ink); white-space:nowrap; }
.warlog .wd{ color:var(--ink3); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

.wartargets{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:7px; }
.wartarget{
  text-align:left; background:var(--panel2); border:0; border-radius:var(--r-sm);
  padding:10px 12px; cursor:pointer; color:var(--ink2);
  display:flex; flex-direction:column; gap:3px;
}
.wartarget b{ color:var(--ink); font-size:13px; }
.wartarget:hover:not(:disabled){ background:rgba(212,88,74,.16); }
.wartarget:disabled{ opacity:.4; cursor:not-allowed; }

/* 음원 출처 — CC-BY 조건상 표기가 필요하다. 접어두되 숨기지는 않는다. */
.credits{margin-top:14px;font-size:11.5px;color:var(--ink3);
  background:var(--panel2);border-radius:var(--r-sm);padding:8px 11px}
.credits summary{cursor:pointer;font-family:var(--f-mono);font-size:10px;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);outline:none}
.credits summary::-webkit-details-marker{color:var(--ink3)}
.credits p{margin:7px 0 0;line-height:1.6}
.credits i{font-style:normal;color:var(--ink2)}
.credits b{color:var(--ink2);font-weight:600}
.credits a{color:var(--amber);text-decoration:none}
.credits a:hover{text-decoration:underline}

/* ================= 복귀 보고 ================= */
.modal.brief .hsay{margin-top:0}
.briefs{display:flex;flex-direction:column;gap:7px;margin-top:14px}
.briefl{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  background:var(--panel2);border:0;cursor:pointer;color:var(--ink2);
  font-family:inherit;font-size:13px;line-height:1.5;
  padding:10px 12px;border-radius:var(--r-sm);
  box-shadow:inset 2px 0 0 var(--line2)}
.briefl:hover{color:var(--ink);box-shadow:inset 2px 0 0 var(--amber2)}
.briefl svg{width:17px;height:17px;flex:0 0 auto;color:var(--ink3)}
.briefl span{min-width:0}
.briefl.warn{box-shadow:inset 2px 0 0 var(--red2);color:var(--red-ink2)}
.briefl.warn svg{color:var(--red-ink)}
.briefl.warn:hover{box-shadow:inset 2px 0 0 var(--red)}

/* ================= 공개 프로필 ================= */
.csname{background:transparent;border:0;padding:0;cursor:pointer;
  font-family:inherit;font-size:inherit;font-weight:600;color:var(--ink);
  border-bottom:1px dashed transparent}
.csname:hover{color:var(--amber);border-bottom-color:var(--amber2)}
.profhead{padding-bottom:12px;box-shadow:inset 0 -1px 0 var(--line)}
.pfline{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.pfline b{font-size:19px}
.profgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;
  margin-top:12px;background:var(--line);border-radius:var(--r-sm);overflow:hidden}
.profgrid > div{background:var(--panel2);padding:9px 11px;display:flex;
  flex-direction:column;gap:2px}
.profgrid span{font-size:10.5px;letter-spacing:.1em;color:var(--ink3);
  font-family:var(--f-mono);text-transform:uppercase}
.profgrid b{font-size:16px;font-variant-numeric:tabular-nums}
.profrec{display:flex;flex-direction:column;gap:1px;background:var(--line);
  border-radius:var(--r-sm);overflow:hidden}
.profrec > div{background:var(--panel2);padding:9px 12px;display:flex;
  align-items:baseline;gap:9px}
.profrec span{flex:0 0 84px;font-size:11px;color:var(--ink3)}
.profrec b{font-size:15px;font-variant-numeric:tabular-nums}
.profrec i{margin-left:auto;font-style:normal;font-size:11.5px;color:var(--ink3)}
/* 남이 내 기록을 넘었으면 표시한다 — 다음 판의 목표가 된다 */
.profrec.beat > div:first-child{box-shadow:inset 2px 0 0 var(--amber2)}
.profrec.beat > div:first-child b{color:var(--amber)}

/* 상황판 — 나와 우리 회사 것을 눈에 띄게 */
.feed-item.me{box-shadow:inset 2px 0 0 var(--amber2)}
.feed-item.co{box-shadow:inset 2px 0 0 var(--blu-line)}
.feed-item .csname{font-size:inherit;font-weight:600}
.panel-h .btn.xs.on{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber2)}
.panel-h .btn.xs b{color:var(--amber);font-variant-numeric:tabular-nums}

/* ================= 이번 주의 표적 ================= */
.focusbar{display:flex;align-items:center;gap:10px;margin-bottom:10px;
  padding:9px 13px;background:var(--panel2);border-radius:var(--r-sm);
  box-shadow:inset 3px 0 0 var(--amber2);font-size:12.5px;color:var(--ink2);
  flex-wrap:wrap}
.focusbar .facsym{width:22px;height:22px;flex:0 0 auto}
.focusbar .fb-b b{color:var(--amber)}
.focusbar .fb-m{font-family:var(--f-mono);font-size:11px;color:var(--amber);
  letter-spacing:.04em}
.focusbar .fb-n{font-size:11.5px;color:var(--ink3)}
.focusbar .fb-n b{color:var(--ink2)}
.cchip.focus{border-color:var(--amber2);color:var(--amber)}
.facn.focus{color:var(--amber)}


/* 반복 피로도 */
.fatbar{display:flex;align-items:center;gap:11px;margin:0 0 10px;
  padding:9px 13px;background:var(--panel2);border-radius:var(--r-sm);
  box-shadow:inset 3px 0 0 var(--grn-line);font-size:12px;color:var(--ink3);
  flex-wrap:wrap}
.fatbar.low{box-shadow:inset 3px 0 0 var(--red2)}
.fatbar .fb-t{color:var(--ink2)}
.fatbar .fb-t b{color:var(--grn-ink);font-variant-numeric:tabular-nums}
.fatbar.low .fb-t b{color:var(--red-ink2)}
.fatbar .fb-g{flex:1 1 120px;min-width:90px;height:5px;border-radius:3px;
  background:var(--line);overflow:hidden;display:block}
.fatbar .fb-g i{display:block;height:100%;background:var(--amber-dk)}
.fatbar.low .fb-g i{background:var(--red-dk)}
.fatbar .fb-s{font-size:11.5px}

/* 펼친 계약의 세력 칸 — 문양을 제대로 볼 수 있는 유일한 자리 */
.facbig{display:flex;align-items:center;gap:11px;margin:8px 0 10px;
  padding:8px 11px;background:var(--panel2);border-radius:var(--r-sm);
  box-shadow:inset 2px 0 0 var(--line2)}
.facbig b{font-size:14px;display:block}
.facbig .sub{font-size:11.5px;color:var(--ink3)}

/* ================= 현장 판단 ================= */
.panel.fcall{box-shadow:var(--lift), inset 0 0 0 1px var(--amber2)}
.panel.fcall .panel-h{background:transparent;border-bottom-color:var(--amber2)}
.panel.fcall .panel-h h3{color:var(--amber)}
.panel.fcall.done{box-shadow:var(--lift), inset 0 0 0 1px var(--line2)}
.panel.fcall.done .panel-h{border-bottom-color:var(--line)}
.panel.fcall.done .panel-h h3{color:var(--ink2)}
.fc-t{font-family:var(--f-disp);font-size:16px;color:var(--ink);margin-bottom:6px}
.fc-b{margin:0 0 13px;font-size:13.5px;line-height:1.7;color:var(--ink2)}
.fc-opts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.fc-o{display:flex;flex-direction:column;gap:4px;text-align:left;cursor:pointer;
  background:var(--panel2);border:0;border-radius:var(--r-sm);padding:11px 13px;
  font-family:inherit;color:var(--ink2);
  box-shadow:inset 0 0 0 1px var(--line)}
.fc-o:hover{color:var(--ink);box-shadow:inset 0 0 0 1px var(--amber2)}
.fc-o b{font-size:14px;color:var(--ink)}
.fc-o span{font-size:11.5px;line-height:1.55;color:var(--ink3)}
.fc-o:hover span{color:var(--ink2)}
.fc-picked{font-size:13px;color:var(--amber);padding:9px 12px;
  background:var(--panel2);border-radius:var(--r-sm);
  box-shadow:inset 2px 0 0 var(--amber2)}


/* ================= 손님 시작 · 초대 ================= */
.btn.big{padding:13px 18px;font-size:15px}
.invited{margin-top:18px;padding:10px 13px;background:var(--panel2);
  border-radius:var(--r-sm);box-shadow:inset 3px 0 0 var(--amber2);
  font-size:12.5px;color:var(--ink2);text-align:center}
.invited b{color:var(--amber)}
.pulse{margin-top:12px;text-align:center;font-size:12px;color:var(--ink3)}
.pulse b{color:var(--ink2);font-variant-numeric:tabular-nums}
.pulse .sub{color:var(--ink3)}
.authsep{display:flex;align-items:center;gap:10px;margin:22px 0 12px;color:var(--ink3);
  font-size:11px}
.authsep::before,.authsep::after{content:"";flex:1;height:1px;background:var(--line)}
.iconbtn.warn{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber2)}
.sharecard{width:100%;height:auto;border-radius:var(--r-sm);display:block;
  box-shadow:inset 0 0 0 1px var(--line)}

/* 세력 우호 단계 표시 */
.stand .fv{font-style:normal;font-size:10px;margin-left:5px;padding:1px 5px;
  border-radius:8px;background:rgba(169,191,169,.14);color:var(--grn-ink)}

/* 방호 층 — 깨진 층은 눈에 띄어야 한다 */
.barrow.broke .lbl{color:var(--red-ink)}
.barrow.broke .bar.arm i{background:var(--red2)}
.chip.armor.soft{opacity:.75}

/* ---------------- 전선 ---------------- */
.fsteps{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}
.fstep{background:var(--panel2);border-radius:var(--r-sm);padding:9px 11px;
  box-shadow:inset 0 0 0 1px var(--line)}
.fstep .at{font-family:var(--f-mono);font-size:11px;color:var(--amber);
  display:inline-block;min-width:26px}
.fstep b{font-size:13.5px}
.fstep .d{display:block;font-size:11.5px;color:var(--ink3);margin-top:3px;line-height:1.5}

.fgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

.fcard{background:var(--panel);border-radius:var(--r-sm);padding:12px;
  box-shadow:inset 0 0 0 1px var(--line)}
.fcard.hot{box-shadow:inset 0 0 0 1px var(--red2)}
.fcard.broken{box-shadow:inset 0 0 0 1px var(--grn2, var(--line));opacity:.9}

.fh{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;margin-bottom:9px}
.ffac{width:38px;height:38px;object-fit:contain;filter:drop-shadow(0 1px 2px #0008)}
.fh .ft b{font-size:14.5px;display:block}
.fh .ft .sub{font-family:var(--f-mono);font-size:11px;color:var(--ink3)}
.frec{font-family:var(--f-mono);font-size:11px;color:var(--amber);white-space:nowrap}

.fbar{position:relative;height:16px;background:var(--panel3);border-radius:3px;overflow:hidden}
.fbar i{display:block;height:100%;background:linear-gradient(90deg,var(--red2),var(--red))}
.fbar .fnum{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--f-mono);font-size:10.5px;letter-spacing:.04em;text-shadow:0 1px 2px #000a}
.fnext{font-family:var(--f-mono);font-size:11px;color:var(--ink3);margin-top:4px}
.fnext b{color:var(--amber)}
.fnext.done{color:var(--amber)}

.feff{display:flex;flex-wrap:wrap;gap:4px;margin-top:8px}
.feff span{font-family:var(--f-mono);font-size:10.5px;padding:2px 7px;border-radius:3px;
  background:var(--panel3);color:var(--ink2)}

.fnem,.fcache{margin-top:8px;display:grid;gap:4px}
.nrow{display:grid;grid-template-columns:auto auto 1fr;gap:7px;align-items:baseline;
  background:var(--panel2);border-radius:3px;padding:5px 8px}
.nrow .k{font-family:var(--f-mono);font-size:10px;color:var(--red-ink);white-space:nowrap}
.nrow .k.warn{color:var(--amber)}
.nrow b{font-size:12.5px}
.nrow .sub{font-size:11px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.fhq{margin-top:10px;background:var(--panel2);border-radius:var(--r-sm);padding:10px;
  box-shadow:inset 0 0 0 1px var(--amber-line, var(--line))}
.fhq .hqn b{font-size:13.5px}
.fhq .hqn .sub{display:block;font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);margin-top:2px}
.fhq .hqb{font-size:12px;color:var(--ink2);line-height:1.6;margin:7px 0 9px}
.fhq .hqwhy{font-family:var(--f-mono);font-size:11px;color:var(--ink3);text-align:center;padding:5px 0}

.frg{display:flex;flex-wrap:wrap;gap:4px;margin-top:9px}
.frg span{font-size:10.5px;color:var(--ink3);background:var(--panel2);padding:2px 6px;border-radius:3px}
.friv{font-size:11px;color:var(--ink3);margin-top:6px;line-height:1.5}
.friv b{color:var(--ink2)}

.chainbag{margin-bottom:12px}
.chainbag .bagrow{display:grid;grid-template-columns:1fr auto auto;gap:10px;align-items:baseline}
.chainbag .bagrow .lbl{font-size:13px;color:var(--ink2)}
.chainbag .bagrow .big{font-family:var(--f-mono);font-size:19px;color:var(--amber)}
.chainbag .bagrow .sub{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.cachelist{display:grid;gap:4px;margin-bottom:14px}
.cachelist .nrow .sub{white-space:normal}

/* 세력 토벌전 — 구간 막대 */
.campbar{position:relative;height:14px;background:var(--panel3);border-radius:3px;margin:22px 0 4px}
.campbar > i{display:block;height:100%;border-radius:3px;background:linear-gradient(90deg,var(--amber2),var(--amber))}
.campbar .tk{position:absolute;top:-20px;transform:translateX(-50%);font-family:var(--f-mono);font-size:10.5px;
  color:var(--ink3);white-space:nowrap;text-align:center}
.campbar .tk b{color:var(--ink2);margin-right:3px}
.campbar .tk.on b{color:var(--amber)}
.campbar .tk::after{content:'';position:absolute;left:50%;top:18px;width:1px;height:16px;background:var(--line2)}
.campby{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.campby span{font-size:11.5px;background:var(--panel2);padding:3px 8px;border-radius:3px;color:var(--ink3)}
.campby b{color:var(--ink2)}

/* 기록판 */
.recgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-bottom:14px}

.rec{background:var(--panel2);border-radius:var(--r-sm);padding:10px 12px;display:grid;gap:3px;
  box-shadow:inset 0 0 0 1px var(--line)}
.rec.mine{box-shadow:inset 0 0 0 1px var(--amber)}
.rec .rn{font-size:11.5px;color:var(--ink3)}
.rec .rb{font-family:var(--f-mono);font-size:19px;color:var(--amber)}
.rec .rh{font-size:12px;color:var(--ink2)}
.rec .rm{font-family:var(--f-mono);font-size:10.5px;color:var(--ink3);margin-top:3px}

/* 넘어온 것들 — 특성 칩 */
.chip.kin{background:rgba(120,200,160,.12);color:#9fd8bb;box-shadow:inset 0 0 0 1px rgba(120,200,160,.35)}
.chip.kin.ok{background:rgba(120,200,160,.2);color:#b8f0d2}
.chip.kin.bad{background:rgba(212,88,74,.14);color:var(--red-ink);box-shadow:inset 0 0 0 1px var(--red2)}
.cchip.kin{background:rgba(120,200,160,.15);color:#9fd8bb}

/* ---------- 유물 · 봉인 ---------- */
.relicwrap{display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.reliclist{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:8px}
.relic{border:1px solid var(--line2);background:rgba(255,255,255,.015);padding:9px 11px;font-size:12.5px}
.relic.on{border-color:#6E7FA8;background:rgba(110,127,168,.08)}
.relic.empty{color:var(--ink3);border-style:dashed}
.relic .rh{display:flex;align-items:center;gap:8px;margin-bottom:5px}
.relic .rh .grow{flex:1}
.relic .rg{color:var(--grn)}
.relic .rb{color:var(--red)}
.relic .rn{color:var(--ink3);font-size:11.5px;margin-top:4px}
.subhead.seal{color:#9BA8C9}
.notice.seal{border-color:#6E7FA8}
.notice.relicgot{border-color:#6E7FA8}
.notice.relicgot .good{color:var(--grn)} .notice.relicgot .bad{color:var(--red)}
.sealrow{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-bottom:10px}
.sealrow .lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;color:var(--ink3);margin-right:4px}
.chip.sealed{border-color:#6E7FA8;color:#9BA8C9}
.chip.open{border-color:var(--red2);color:#C98A80}

/* ---------- 세계 침식 ---------- */
.eropanel{margin-bottom:12px}
.erow{display:grid;grid-template-columns:150px 1fr 76px auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;padding:6px 0;border-top:1px solid var(--line)}
.erow:first-of-type{border-top:0}
.erow .rn{font-size:13px}
.erow .ebar{height:7px;background:rgba(255,255,255,.05);border:1px solid var(--line2);position:relative}
.erow .ebar i{position:absolute;left:0;top:0;bottom:0;background:#6E7FA8}
.erow.creep .ebar i{background:#9A86B8}
.erow.thick .ebar i{background:#B86E9A}
.erow.fallen .ebar i{background:var(--grn)}
.erow .ev{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2);text-align:right}
.erow .esub{grid-column:2 / 5;font-size:11.5px;color:var(--ink3)}
.erow.fallen .rn{color:var(--red)}
.erow.fallen .chip.est{border-color:var(--red2);color:#C98A80}
.erow.thick .chip.est{border-color:#7A4A66;color:#C99AB8}
.subhead.retake{color:#C98A80}
.notice.ero{border-color:#9A86B8}
.chip.elem{border-color:#6E7FA8;color:#9BA8C9}

/* ---------- 강화 · 각인 · 옵션 줄 ---------- */
.enh{display:inline-block;font-family:var(--f-mono);font-size:11px;color:var(--amber);border:1px solid var(--amber2);padding:0 4px;margin-left:4px;vertical-align:1px}
.ewrap{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}
.ecard{border:1px solid var(--line2);background:rgba(255,255,255,.012)}
.ecard.on{border-color:var(--amber2)}
.ecard.ok{box-shadow:0 0 0 1px var(--grn) inset}
.ecard.fail{box-shadow:0 0 0 1px var(--red2) inset}
.ecard .eh{display:flex;align-items:center;gap:8px;width:100%;padding:7px 10px;background:none;border:0;color:var(--ink);text-align:left;cursor:pointer;font:inherit}
.ecard .eh .grow{flex:1}
.ecard .eb{padding:4px 10px 10px;border-top:1px solid var(--line)}
.ecard .erow{display:flex;align-items:center;gap:12px;margin:6px 0}
.ecard .erow .big{font-family:var(--f-disp);font-size:26px;color:var(--amber);min-width:62px}
.ecard .erow .sub{font-size:12px;color:var(--ink2);line-height:1.5}
.ecard .erow .grow{flex:1}
.sockets{display:flex;flex-wrap:wrap;align-items:center;gap:6px;margin-top:6px}
.sock{font-size:11.5px;border:1px dashed var(--line2);color:var(--ink3);padding:2px 8px}
.sock.full{border-style:solid;border-color:#6E7FA8;color:#9BA8C9}
.sock .x{background:none;border:0;color:var(--ink3);cursor:pointer;margin-left:4px;padding:0}
.xfer{margin-top:8px;font-size:12px;color:var(--ink2);display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.ownsuits{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;font-size:12px;color:var(--ink3);align-items:center}
.rar{font-family:var(--f-mono);font-size:10.5px;padding:0 5px;border:1px solid var(--line2);color:var(--ink2)}
.rar.r1{border-color:#4E7A5E;color:#7FB895}
.rar.r2{border-color:#4E6A8F;color:#8FB1DA}
.rar.r3{border-color:var(--amber2);color:var(--amber)}
.slot .lines,.roll .lines{display:block;font-size:11px;color:var(--ink2);margin-top:2px}
.rollbox{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:8px;margin-bottom:12px}
.roll{border:1px solid var(--line2);padding:8px 10px;font-size:12.5px}
.roll.r3{border-color:var(--amber2)}
.roll .rh{display:flex;align-items:center;gap:6px;margin-bottom:4px}
.roll .lines div{display:flex;align-items:center;gap:8px;justify-content:space-between;margin:2px 0}
.roll .ra{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px;align-items:center}
.chip.bad{border-color:var(--red2);color:#C98A80}

/* ---------- 도트 그림 ---------- */
.ico{width:34px;height:34px;object-fit:contain;flex:0 0 auto;vertical-align:middle;margin-right:8px}
.ico.sm{width:22px;height:22px;margin-right:5px}
.ico.xs{width:16px;height:16px;margin-right:4px}
.ico.lg{width:48px;height:48px}
.withico{white-space:normal}
td.withico > .ico{float:left;margin-top:1px}
div.withico{display:flex;align-items:center}
.uiico{width:22px;height:22px;object-fit:contain;display:block;opacity:.72;transition:opacity .12s}
.railb:hover .uiico,.railb.on .uiico{opacity:1}
.railb.on .uiico{filter:drop-shadow(0 0 4px var(--amber-glow))}
.qi .ico{width:30px;height:30px;margin:0 0 4px}
.relic .rh .ico{width:30px;height:30px}
.roll .rh .ico{width:28px;height:28px;margin-right:4px}
.ecard .eh .ico{width:30px;height:30px;margin-right:2px}
.gearw .ico{width:34px;height:34px}
.rc .rn .ico{vertical-align:-5px}
.notice.relicgot .ico{float:left;margin:-4px 10px 0 0}
.ico.gun{width:54px;height:34px}
.ico.gun.sm{width:36px;height:22px}
.ecard .eh .ico.gun{width:46px;height:30px}
.ecard select,.xfer select,.rollbox select{width:auto;max-width:280px}

/* =====================================================================
   UI 2판 — 로비형 셸
   위: 작전원 · 자원 · 크레딧 / 아래: 독 / 가운데: 넓게 / 무전은 서랍.
   아이콘은 밝은 슬롯 위에 크게. 등급은 색띠로.
   ===================================================================== */
:root{--t1:#8B959B;--t2:#5FB883;--t3:#5B9BD8;--t4:#A77FE0;--t5:#E7AC42;--dockH:96px;--hudH:64px}
body{background:radial-gradient(ellipse at 30% 0%,#1B2226 0%,var(--bg) 55%) fixed}
#app{max-width:1560px;padding-bottom:calc(var(--dockH) + 24px)}

/* ---- 위 ---- */
.topbar.hud{height:var(--hudH);flex-wrap:nowrap;gap:12px;padding:0 18px;margin:0 -14px 16px;
  background:linear-gradient(180deg,#0B0E10 0%,rgba(11,14,16,.92) 100%)}
.hudop{display:flex;align-items:center;gap:10px;background:none;border:0;cursor:pointer;padding:0;text-align:left;min-width:0}
.hudop img{width:46px;height:46px;border-radius:50%;object-fit:cover;object-position:50% 10%;
  border:2px solid var(--amber);background:var(--panel2);flex:none}
.hudop .ht{display:flex;flex-direction:column;min-width:0}
.hudop b{font-size:15.5px;color:var(--ink);white-space:nowrap}
.hudop .hs{font-size:11.5px;color:var(--ink3);white-space:nowrap}
.hudop .bar.xp{width:130px;height:4px;margin-top:4px}
.topbar.hud .brand{margin-right:auto;margin-left:10px;opacity:.75}
.topbar.hud .brand .mark{font-size:15px}
.topbar.hud .stat-strip{flex-wrap:nowrap;gap:6px}
.topbar.hud .sfield{min-width:0;padding:4px 10px;border:1px solid var(--line);border-radius:8px}
.topbar.hud .sfield.res{flex-direction:row;align-items:center;gap:6px;padding:4px 10px 4px 5px}
.topbar.hud .sfield.res img{width:28px;height:28px}
.topbar.hud .sfield.cr .v{font-size:17px}
.topbar.hud .topbtns{gap:4px}
.topbar.hud .iconbtn{padding:7px 9px}
@media (max-width:1480px){ .topbar.hud .iconbtn i{display:none} .topbar.hud .brand{display:none} .topbar.hud .stat-strip{margin-left:auto} }

/* ---- 가운데 ---- */
.layout.hubB{display:block}
.layout.hubB .mainpanel{background:rgba(23,27,30,.72);border:1px solid var(--line);border-radius:14px}
.layout.hubB .mainhead{padding:14px 18px 12px}
.layout.hubB .mainhead h3{font-size:18px}
.layout.hubB .mainhead .uiico,.layout.hubB .mainhead svg{width:30px;height:30px;opacity:1;display:block}
.layout.hubB > .col.main > .panel > .panel-b{padding:18px}

/* ---- 아래 독 ---- */
.rail.dock{position:fixed;left:0;right:0;bottom:0;top:auto;height:var(--dockH);z-index:45;
  display:flex;flex-direction:row;justify-content:center;align-items:center;gap:4px;
  max-height:none;overflow:visible;padding:0 12px;border:0;border-top:1px solid var(--line);border-radius:0;
  background:linear-gradient(180deg,rgba(11,14,16,.82),#0B0E10);backdrop-filter:blur(6px)}
.dock .dk{position:relative;width:80px;height:80px;flex:none;border-radius:14px;border:0;background:transparent;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:0;
  color:var(--ink2);cursor:pointer;font-size:12.5px;transition:background .12s,color .12s}
.dock .dk .rl{font-style:normal;font-size:12.5px;letter-spacing:0;white-space:nowrap}
.dock .dk .uiico{width:42px;height:42px;opacity:.95}
.dock .dk svg{width:30px;height:30px}
.dock .dk[data-v="home"] svg{width:38px;height:38px;stroke-width:1.5}
.dock .dk:hover{background:var(--panel2);color:var(--ink)}
.dock .dk.on{background:#241D10;color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.dock .dk.on .uiico{filter:drop-shadow(0 0 6px rgba(231,172,66,.35))}
.dock .dk.go{width:140px;margin:0 10px;background:var(--amber);color:#1A1307;font-weight:800}
.dock .dk.go .rl{font-size:16px;font-weight:900}
.dock .dk.go .uiico{filter:brightness(.25)}
.dock .dk.go:hover{background:#F2BA55}
.dock .dk.more .dots{font-size:28px;line-height:40px;color:var(--ink2)}
.dock .dk .dot{position:absolute;top:6px;right:14px;left:auto}
.dock .dk .dot.n{top:4px;right:10px}
.dockmore{display:none;position:absolute;bottom:calc(100% + 8px);right:max(12px, calc(50% - 620px));
  grid-template-columns:repeat(5,80px);gap:6px;padding:10px;border-radius:14px;
  background:#15191C;border:1px solid var(--line2);box-shadow:0 12px 34px rgba(0,0,0,.55)}
.dockmore.open{display:grid}
body:has(.layout.combat) .rail.dock{display:none}

/* ---- 무전 서랍 ---- */
.col.chat.drawer{position:fixed;right:0;top:var(--hudH);bottom:var(--dockH);width:400px;z-index:44;
  overflow-y:auto;padding:14px;gap:12px;background:#111518;border-left:1px solid var(--line2);
  box-shadow:-14px 0 34px rgba(0,0,0,.5)}
.drawx{position:absolute;top:10px;right:12px;z-index:2;background:var(--panel2);border:0;color:var(--ink2);
  width:28px;height:28px;border-radius:6px;cursor:pointer}

/* ---- 사람이 서는 칸 ---- */
.split{display:grid;grid-template-columns:300px minmax(0,1fr);gap:22px;align-items:start}
.npccol{position:sticky;top:calc(var(--hudH) + 16px);display:flex;flex-direction:column;gap:12px}
.npccol .cap{font-size:12px;color:var(--ink3);letter-spacing:.06em}
.npccol .npcart{width:100%;display:block;margin:-6px 0 -18px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.6))}
.say,.npccol .panel{background:var(--panel2);border:1px solid var(--line2);border-radius:12px}
.say{padding:14px 16px;font-size:13.5px;line-height:1.65;color:var(--ink2)}
.say b{color:var(--ink);font-size:15px}
.npccol .nextstep .hn{font-size:11px;color:var(--ink3);letter-spacing:.08em}
.npccol .nextstep .ns-t{font-size:16px;font-weight:700;color:var(--ink);margin:2px 0 4px}
.npccol .nextstep .ns-b{font-size:13.5px;line-height:1.65;color:var(--ink2)}


/* ---- 아이콘 슬롯 공통 ---- */
.ico.big{width:100%;height:100%;object-fit:contain;margin:0}

/* ---- 장비 맨 위 ---- */
.gtop{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:18px;margin-bottom:18px;align-items:start}
.gdoll{position:relative;min-height:470px;border-radius:14px;border:1px solid var(--line);
  background:radial-gradient(ellipse at 50% 40%,#252D32 0%,#15191C 70%)}
.gdoll .gart{position:absolute;left:50%;top:40px;transform:translateX(-50%);width:min(430px,48%);
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.7));pointer-events:none}
.gl-l,.gl-r{position:absolute;top:18px;display:flex;flex-direction:column;gap:14px;width:200px}
.gl-l{left:18px}.gl-r{right:18px}
.gslot{position:relative;background:rgba(20,24,27,.9);border:1px solid var(--line2);border-radius:12px;padding:10px 12px 12px}
.gslot:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 12px 12px;background:var(--tc,var(--line2))}
.gslot.empty:after{background:var(--line2)}
.gslot .gl{font-size:11.5px;color:var(--ink3);display:flex;justify-content:space-between}
.gslot .gl .enh{font-style:normal;color:var(--amber);font-weight:800}
.gslot .gi{height:96px;margin:6px 0;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px 10px;
  background:radial-gradient(circle at 50% 45%,#3A444B 0%,#232A2F 62%,#1B2024 100%)}
.gslot b{font-size:14px;display:block}
.gslot .gs{font-size:11.5px;color:var(--ink3)}
.gslot .socks{display:flex;gap:6px;margin-top:8px}
.gslot .sk{width:32px;height:32px;border-radius:50%;border:1px dashed var(--line2);display:flex;align-items:center;justify-content:center}
.gslot .sk.full{border:1px solid #6B8FB0;background:#16232E}
.gslot .sk .ico{width:24px;height:24px;margin:0}
.gside > .panel{background:var(--panel2);border:1px solid var(--line2);border-radius:12px}


/* ---- 전투 2판 ---- */
.chead{margin-bottom:12px;border-radius:14px;background:rgba(23,27,30,.9);border:1px solid var(--line);padding:10px 16px 12px}
.chead .engage-bar{gap:20px;align-items:center;background:none;border:0;padding:0 0 8px}
.chead .f.mt b{font-size:17px;color:var(--ink)}
.chead .f.mt .k{letter-spacing:.02em;text-transform:none;font-family:var(--f-ui);font-size:12px}
.wpips{display:flex;gap:4px;margin-top:4px}.wpips i{width:24px;height:7px;border-radius:3px;background:var(--panel3)}
.wpips i.d{background:var(--grn)}.wpips i.c{background:var(--amber)}
.ap-pips i{width:18px;height:8px;border-radius:3px}
.ap-pips.sm i{width:12px;height:5px}
.chead .dist-track{height:54px;background:transparent;overflow:visible;margin:4px 8px 6px}
.chead .dist-track .ln{position:absolute;left:0;right:0;top:30px;height:4px;border-radius:2px;background:#2A3237}
.chead .dist-track .eff{top:27px;bottom:auto;height:10px;border-radius:5px;background:rgba(95,184,131,.28);border:1px solid var(--grn)}
.chead .dist-track .tick{top:22px;bottom:auto;height:20px;width:1px;background:transparent}
.chead .dist-track .tick span{position:absolute;top:-22px;left:0;transform:translateX(-50%);font-family:var(--f-mono);font-size:10.5px;color:var(--ink3)}
.chead .dist-track .marker{top:24px;bottom:auto;height:16px;width:2px}
.chead .dist-track .pin{position:absolute;top:19px;width:26px;height:26px;border-radius:50%;transform:translateX(-50%);
  display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:900;background:#101315;border:2px solid;z-index:2}
.chead .dist-track .pin.me{border-color:var(--amber);color:var(--amber);transform:none}
.chead .dist-track .pin.foe{border-color:var(--red);color:var(--red)}
.chead .dist-track .cap{top:auto;bottom:-8px;left:auto;right:0;transform:none;font-size:12px;color:var(--ink)}
.chead .dist-track .cap2{top:auto;bottom:-8px;right:auto;left:40px;transform:none;font-size:11px}
.chead .dist-track .cap2.ok{color:var(--grn)}.chead .dist-track .cap2.bad{color:var(--red)}
.chead .turnbar{border-radius:8px;margin-top:10px}

.layout.combat.v2{grid-template-columns:250px minmax(0,1fr) 330px;gap:14px}
.layout.combat.v2 .panel{border-radius:14px;background:rgba(23,27,30,.9);border:1px solid var(--line)}
.layout.combat.v2.live .col.main{height:auto;overflow:visible}
/* 분대 */
.sqpanel .squad-row{display:flex;flex-direction:column;gap:10px}
.sqpanel .sq{display:grid;grid-template-columns:54px minmax(0,1fr);gap:6px 10px;align-items:center;padding:10px;
  border-radius:12px;background:var(--panel2);border:1px solid var(--line2)}
.sqpanel .sq.me{box-shadow:0 0 0 1px var(--amber) inset}
.sqpanel .sq.active{border-color:var(--amber)}
.sqpanel .sq.down{opacity:.5;filter:grayscale(.8)}
.sqpanel .sqf{width:54px;height:54px;border-radius:10px;object-fit:cover;object-position:50% 10%;background:var(--panel3)}
.sqpanel .sqb{min-width:0}
.sqpanel .top{display:flex;align-items:center;gap:6px}.sqpanel .top b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sqpanel .tagme.hire{background:#1E3A52;color:#9CC6E8}
.sqpanel .bar{height:6px;margin-top:4px}
.sqpanel .bar.arm i{background:var(--blu)}
.sqpanel .sqn{display:flex;justify-content:space-between;align-items:center;margin-top:4px;font-family:var(--f-mono);font-size:11px;color:var(--ink3)}
.sqpanel .chips{grid-column:1/-1;margin:0}
.sqpanel .chips:empty{display:none}
/* 적 */
.layout.combat.v2 .hostiles{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.layout.combat.v2 .hostile{display:grid;grid-template-columns:60px minmax(0,1fr) 78px;gap:12px;align-items:center;
  padding:12px 14px;border-radius:12px;background:var(--panel2);border:1px solid var(--line2);position:relative;overflow:hidden;cursor:pointer}
.layout.combat.v2 .hostile:hover{border-color:#56626A}
.layout.combat.v2 .hostile.sel{border-color:var(--red);box-shadow:0 0 0 1px var(--red),0 0 22px rgba(224,96,79,.22)}
.layout.combat.v2 .hostile.sel:after{content:'표적';position:absolute;top:0;right:0;background:var(--red);color:#fff;font-size:11px;font-weight:800;padding:2px 9px;border-radius:0 0 0 8px}
.layout.combat.v2 .hostile.dead{opacity:.35;filter:grayscale(1);cursor:default}
.layout.combat.v2 .hostile.isboss{border-color:#6B2C25}
.hic{position:relative;width:60px;height:60px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#3A444B,#1E2428)}
.hic img{width:44px;height:44px;object-fit:contain;filter:brightness(1.7) contrast(1.1)}
.hic .hrole{position:absolute;right:-6px;bottom:-6px;width:28px;height:28px;border-radius:50%;background:#0E1113;border:2px solid var(--ink3);
  display:flex;align-items:center;justify-content:center}
.hic .hrole svg{width:15px;height:15px;fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linecap:round}
.hic.r-sniper .hrole{border-color:#5B9BD8}.hic.r-assault .hrole{border-color:#E0604F}
.hic.r-medic .hrole{border-color:#5FB883}.hic.r-mg .hrole{border-color:#E7AC42}.hic.r-kin .hrole{border-color:#A77FE0}
.layout.combat.v2 .hostile .hmain{min-width:0}
.layout.combat.v2 .hostile .hn b{font-size:15px}
.layout.combat.v2 .hostile .hbar{height:9px;margin-top:6px}
.layout.combat.v2 .hostile .hbar i{background:var(--red)}
.layout.combat.v2 .hostile .odds{text-align:center}
.layout.combat.v2 .hostile .odds .big{font-size:28px;font-weight:800;line-height:1;font-family:var(--f-ui)}
.layout.combat.v2 .hostile .odds.hi .big{color:var(--grn)}
.layout.combat.v2 .hostile .odds.mid .big{color:var(--amber)}
.layout.combat.v2 .hostile .odds.lo .big{color:var(--red)}
.layout.combat.v2 .hostile .odds .sm{letter-spacing:0;margin-top:3px}
.layout.combat.v2 .hostile > *{position:relative;z-index:1}
.layout.combat.v2 .hostile .bossface{z-index:0;right:70px;width:120px;opacity:.28}
/* 행동 */
.actpanel.v2{padding:12px}
.actpanel.v2 .notice.wait{margin:0 0 10px}
.adock{display:grid;grid-template-columns:230px 118px minmax(0,1fr);gap:12px;align-items:stretch}
.wbox{border-radius:12px;background:var(--panel2);border:1px solid var(--line2);padding:10px 12px;display:flex;flex-direction:column;gap:6px;position:relative}
.wbox:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 12px 12px;background:var(--tc)}
.wbox .wh{display:flex;flex-direction:column}.wbox .wh b{font-size:14px}.wbox .wh span{font-size:11.5px;color:var(--ink3)}
.wbox .enh{font-style:normal;color:var(--amber)}
.wbox .wimg{height:92px;border-radius:8px;display:flex;align-items:center;justify-content:center;padding:6px 12px;
  background:radial-gradient(circle at 50% 45%,#3A444B 0%,#232A2F 62%,#1B2024 100%)}
.magpips{display:flex;flex-wrap:wrap;gap:2px}.magpips i{width:5px;height:13px;border-radius:1px;background:#3A3322}.magpips i.on{background:var(--amber)}
.wbox .wf{display:flex;justify-content:space-between;font-size:11.5px;color:var(--ink2);gap:8px}
.wbox .wf.dim{color:var(--ink3)}
.aimbody{border-radius:12px;background:var(--panel2);border:1px solid var(--line2);padding:8px;display:flex;flex-direction:column;align-items:center}
.aimbody .cap{font-size:11.5px;color:var(--ink3)}.aimbody .cap.sm{font-size:10.5px;margin-top:auto}
.aimbody .parts{position:relative;display:block;width:90px;height:170px;margin:6px 0}
.aimbody .part{position:absolute;padding:0;display:flex;flex-direction:column;align-items:center;justify-content:center;
  border:2px solid #4A555C;background:#2A3237;color:var(--ink2);cursor:pointer;border-radius:12px}
.aimbody .part .pn{font-size:12px;font-weight:700}.aimbody .part .pc{font-size:10px;color:var(--ink3);margin:0}
.aimbody .part.p-head{left:25px;top:0;width:40px;height:40px;border-radius:50%}
.aimbody .part.p-head .pn{font-size:10.5px}
.aimbody .part.p-tors{left:12px;top:44px;width:66px;height:66px}
.aimbody .part.p-leg{left:17px;top:114px;width:56px;height:54px;border-radius:10px 10px 14px 14px}
.aimbody .part:hover{border-color:#6A767E}
.aimbody .part.on{border-color:var(--red);background:#5A2A23;color:#fff}
.aimbody .part.on .pc{color:#FFB4A6}
.agrid{display:flex;flex-direction:column;gap:8px;min-width:0}
.actpanel.v2 .acts{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:7px}
.actpanel.v2 .act{position:relative;height:66px;padding:6px 4px 5px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center}
.actpanel.v2 .act svg{width:24px;height:24px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.actpanel.v2 .act .an{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap}
.actpanel.v2 .act .ad{display:none}
.actpanel.v2 .act .apc{position:absolute;top:5px;right:6px;display:flex;gap:2px}
.actpanel.v2 .act .apc i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.actpanel.v2 .act .apc.r{font-size:9.5px;color:var(--ink3);font-family:var(--f-mono);top:3px}
.actpanel.v2 .act .apc.r.bad{color:var(--red)}
.actpanel.v2 .act .cnt{position:absolute;top:3px;left:6px;font-size:10.5px;color:var(--ink2);font-family:var(--f-mono)}
.actpanel.v2 .act .aimg,.actpanel.v2 .act .ico.aimg{width:28px;height:28px;margin:0;object-fit:contain}
.actpanel.v2 .act.fire{background:#3A1E19;border-color:#8A3A30;color:#FFD5CC}
.actpanel.v2 .act.fire svg{stroke:#FFB4A6}
.actpanel.v2 .act.sup{background:#16232E;border-color:#3C5266}
.actpanel.v2 .act.on{border-color:var(--amber)}
.actpanel.v2 .act:not([disabled]):hover{filter:brightness(1.18)}
.actpanel.v2 .act[disabled]{opacity:.38}
.actpanel.v2 .endturn{height:44px;font-size:15px;font-weight:800;border-radius:10px}
/* 기록 */
.layout.combat.v2 .col.ops .logpanel{min-height:0}
.layout.combat.v2 .logpanel .log{font-family:var(--f-ui);font-size:13px;line-height:1.55;padding:6px 14px 12px}
.layout.combat.v2 .logpanel .log .e{padding:5px 0;border-bottom:1px solid var(--line)}
.layout.combat.v2 .logpanel .log .e.crit{color:#FF8E7E}
.layout.combat.v2 .logpanel .log .e.good{color:#8FDCAE}
@media (max-width:1300px){ .layout.combat.v2{grid-template-columns:220px minmax(0,1fr) 290px} .actpanel.v2 .acts{grid-template-columns:repeat(4,minmax(0,1fr))} .adock{grid-template-columns:200px 110px minmax(0,1fr)} }
.actpanel.v2 .act .an{max-width:100%;overflow:hidden;text-overflow:ellipsis}

/* ---- 정산 ---- */
.layout.combat.v2.over{grid-template-columns:250px minmax(0,1fr) 330px}
.dban{display:flex;align-items:center;gap:18px;padding:18px 22px;border-radius:14px;margin-bottom:14px;border:1px solid}
.dban.win{border-color:#3E5A46;background:linear-gradient(90deg,rgba(35,62,46,.9),rgba(23,27,30,.6))}
.dban.lose{border-color:#6B2C25;background:linear-gradient(90deg,rgba(70,26,22,.9),rgba(23,27,30,.6))}
.dban .facsym.lg{width:58px;height:58px}
.dban .dt{font-family:var(--f-disp);font-size:30px;line-height:1.1}
.dban.win .dt{color:#BFF0CF}.dban.lose .dt{color:#FFB4A6}
.dban .ds{font-size:13.5px;color:var(--ink2);margin-top:3px}
.dban .dpay{margin-left:auto;text-align:right;display:flex;flex-direction:column}
.dban .dpay b{font-size:32px;color:var(--amber);font-family:var(--f-mono)}
.dban .dpay span{font-size:12px;color:var(--ink3)}
.dkpi{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}
.dkpi div{background:var(--panel2);border:1px solid var(--line2);border-radius:12px;padding:12px 14px}
.dkpi span{display:block;font-size:12px;color:var(--ink3)}.dkpi b{font-size:22px}.dkpi i{font-style:normal;font-size:11.5px;color:var(--ink3);margin-left:6px}
.lootgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:10px}
.lootgrid .lt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:3px}
.lootgrid .lslot{width:100%;height:96px;border-radius:10px;border:1px solid var(--line2);display:flex;align-items:center;justify-content:center;padding:10px;
  background:radial-gradient(circle at 50% 45%,#3A444B 0%,#232A2F 62%,#1B2024 100%)}
.lootgrid b{font-size:12.5px;font-weight:600}.lootgrid span{font-size:11px;color:var(--ink3)}
.qgrid .qi .ico{width:44px;height:44px}

/* ---- 계약 줄 2판 — 세력 문양을 크게 ---- */
.crow{grid-template-columns:5px 104px minmax(0,1fr) 200px;border-radius:12px;border:1px solid var(--line);background:rgba(23,27,30,.92);position:relative}
.crow.bs{border-color:#5E2A24;background:linear-gradient(90deg,rgba(23,27,30,.96) 40%,rgba(64,24,20,.7))}
.crow.rift{border-color:#34506A;background:linear-gradient(90deg,rgba(23,27,30,.96) 40%,rgba(24,46,68,.7))}
.crow:hover{border-color:#4A565E}
.cdif.cemb{padding:12px 6px;gap:4px}
.cemb .cfac{width:62px;height:62px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle,#3A444B,#1E2428)}
.cemb .cfac img{width:48px;height:48px;object-fit:contain;filter:brightness(1.7) contrast(1.12)}
.cemb b{font-size:15px!important;padding:1px 8px;border-radius:5px;background:var(--panel3)}
.crow .cboss{position:absolute;right:200px;top:-10px;width:130px;opacity:.26;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 60%);mask-image:linear-gradient(90deg,transparent,#000 60%)}
.crow > *{position:relative}
.crow .ct .tt{font-size:16px}
.crow .cpay b{font-size:22px}
.crow.open .cpay .btn{padding:10px 12px;font-size:14px}

/* ---- 조달 2판 ---- */
.split.shop .npccol .merch.say{display:block;padding:14px 16px;margin:0;box-shadow:none;overflow:visible}
.split.shop .npccol .mportrait{width:100%;margin:-6px 0 -18px}
.cattabs{display:flex;gap:10px;margin:0 0 14px;position:static;border:0;background:none;padding:0}
.cattabs .tab{display:flex;flex-direction:column;align-items:center;gap:4px;width:104px;padding:10px 0 8px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line2);color:var(--ink2);font-size:13px}
.cattabs .tab .ico{width:60px;height:44px;object-fit:contain;margin:0}
.cattabs .tab.on{border-color:var(--amber);color:var(--amber);background:#241D10}
.cattabs .tab.on::after{display:none}
.featrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin:6px 0 16px}
.fcardw{position:relative;padding:12px;border-radius:14px;background:var(--panel2);border:1px solid var(--line2)}
.fcardw .rib{position:absolute;top:18px;left:18px;z-index:1;font-size:12px;font-weight:900;padding:1px 8px;border-radius:4px;background:var(--tc);color:#111}
.fcardw .fimg{height:128px;border-radius:10px;display:flex;align-items:center;justify-content:center;padding:12px 18px;position:relative;
  background:radial-gradient(circle at 50% 45%,#3A444B 0%,#232A2F 62%,#1B2024 100%)}
.fcardw .fimg:after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:0 0 10px 10px;background:var(--tc)}
.fcardw > b{display:block;font-size:16px;margin-top:10px}
.fcardw .fm{display:flex;gap:12px;font-size:12.5px;color:var(--ink2);margin:4px 0 10px}.fcardw .fm b{color:var(--ink)}
/* 표 속 아이콘도 슬롯 위에 크게 */
.layout.hubB .grid td.name.withico{display:table-cell}
.layout.hubB .grid td.withico > .ico{float:left;width:56px;height:56px;margin:0 12px 0 0;padding:6px;border-radius:10px;
  background:radial-gradient(circle at 50% 45%,#3A444B 0%,#232A2F 62%,#1B2024 100%);border:1px solid var(--line2)}
.layout.hubB .grid td.withico > .ico.gun{width:96px;height:56px;padding:6px 8px}
.layout.hubB .grid td.withico b{display:block;padding-top:6px}
.layout.hubB .grid tbody tr td{vertical-align:middle}
.layout.hubB .grph{padding:10px 14px;border-radius:10px}
.layout.hubB .grph b{font-size:14.5px}

/* ---- 강화 · 각인 ---- */
.ewrap{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin-bottom:16px}
.ecard{border-radius:12px;background:var(--panel2);border:1px solid var(--line2);overflow:hidden}
.ecard.on{grid-column:1/-1;border-color:var(--amber);background:linear-gradient(180deg,#221C12,var(--panel2) 60%)}
.ecard .eh{display:flex;align-items:center;gap:10px;width:100%;padding:10px 12px;background:none;border:0;cursor:pointer;text-align:left;color:var(--ink)}
.ecard .eh .ico{width:48px;height:40px;margin:0;padding:4px;border-radius:8px;background:radial-gradient(circle,#3A444B,#1E2428)}
.ecard .eh .ico.gun{width:72px}
.ecard .eh b{font-size:14px}.ecard .eh .enh{color:var(--amber);font-weight:800}
.ecard .eh .mono{font-size:11.5px}
.ecard .eb{padding:4px 16px 16px}
.ecard .anvil{position:relative;height:190px;border-radius:12px;display:flex;align-items:center;justify-content:center;padding:18px 60px;margin-bottom:12px;
  background:radial-gradient(circle at 50% 45%,#3E484F 0%,#232A2F 62%,#1B2024 100%);border:1px solid var(--line2)}
.ecard .anvil .alv{position:absolute;right:16px;bottom:10px;font-size:30px;font-weight:900;font-family:var(--f-mono)}
.ecard .anvil .alv span{color:var(--ink3)}.ecard .anvil .alv b{color:var(--amber)}
.ecard .pity{margin:0 0 10px}.ecard .pity span{font-size:12px;color:var(--ink3)}
.ecard .pity .bar{height:9px;margin-top:4px}.ecard .pity .bar i{background:linear-gradient(90deg,var(--t3),var(--t4))}
.ecard .eb .erow{display:flex;align-items:center;gap:16px;border:0;padding:4px 0}
.ecard .eb .erow .big{font-size:40px;font-weight:900;color:var(--grn);font-family:var(--f-ui)}
.ecard .eb .erow .sub{font-size:12.5px;color:var(--ink2);line-height:1.6}
.ecard .eb .erow .btn.primary{padding:14px 34px;font-size:16px;font-weight:800}
.ecard.ok .anvil{box-shadow:0 0 0 2px var(--grn),0 0 30px rgba(95,184,131,.35)}
.ecard.fail .anvil{box-shadow:0 0 0 2px var(--red)}
.ecard .sockets{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-top:10px}
.ecard .sock{display:inline-flex;align-items:center;gap:6px;padding:5px 10px;border-radius:999px;border:1px dashed var(--line2);font-size:12px;color:var(--ink3)}
.ecard .sock.full{border:1px solid #6B8FB0;background:#16232E;color:#CFE3F5}
.ecard .sock .ico{width:22px;height:22px;margin:0}
.ecard .sock .x{background:none;border:0;color:var(--ink3);cursor:pointer}
.ecard .xfer{margin-top:10px;font-size:12.5px;color:var(--ink2)}

/* ---- 고용 2판 — 세로 카드 ---- */
.hiregrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.hiregrid .hirecard{display:flex;flex-direction:column;border-radius:14px;border:1px solid var(--line2);overflow:hidden;background:var(--panel2)}
.hiregrid .hirecard + .hirecard{margin-top:0}
.hiregrid .hirecard .hface{width:100%;height:250px;object-fit:cover;object-position:50% 8%;box-shadow:none;
  background:radial-gradient(ellipse at 50% 35%,#2E373D,#171B1E 72%)}
.hiregrid .hirecard .hbody{padding:12px 14px 14px}
.hirecard.on{display:grid;grid-template-columns:150px minmax(0,1fr);border-radius:14px;border:1px solid var(--amber2);overflow:hidden}
.hirecard.on .hface{width:150px;height:100%;min-height:200px;object-fit:cover;object-position:50% 8%}
.hirecard .hstats{display:grid;grid-template-columns:repeat(5,1fr);gap:4px;text-align:center}
.hirecard .hstats span{background:var(--panel3);border-radius:6px;padding:4px 0;display:flex;flex-direction:column;font-size:10.5px}
.hirecard .hstats b{font-size:14px}
.hirecard .hrow.hgun{align-items:center}
.hirecard .hrow.hgun .ico{width:64px;height:30px;margin:0;object-fit:contain}
.hirecard .btn.primary{margin-top:6px;padding:10px;font-size:14px}
.cdif.cemb{padding:8px 6px;gap:3px}
.cemb .cfac{width:54px;height:54px}.cemb .cfac img{width:42px;height:42px}
.cemb b{font-size:13px!important}
.cemb .s{font-size:10.5px}
/* 행동 칸은 화면 아래에 붙인다 — 적이 많아도 턴 종료를 찾으러 내려갈 일이 없게 */
.layout.combat.v2.live .actpanel.v2{position:sticky;bottom:8px;z-index:6;background:rgba(20,24,27,.97);box-shadow:0 -10px 30px rgba(0,0,0,.45)}
.lootgrid .lslot .cash{font-size:44px;font-weight:900;color:var(--amber);font-family:var(--f-mono);text-shadow:0 2px 8px rgba(0,0,0,.6)}

/* ---- 점검 후 손본 것 ---- */
:root{--topbar-h:var(--hudH)}
/* 알림은 독 위에 띄운다 — 독 단추를 가리고 눌림을 가로챘다 */
.toast-wrap{bottom:calc(var(--dockH) + 12px);pointer-events:none}
.toast-wrap .toast{pointer-events:auto}
.iconbtn .cbadge{min-width:17px;height:17px;padding:0 5px;border-radius:9px;background:var(--red);color:#fff;
  font-size:10.5px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;margin-left:2px}
.iconbtn .cbadge[hidden]{display:none}
@media (max-width:1480px){ .topbar.hud .iconbtn .cbadge{margin-left:-4px} }
.hudop .bar.hp{width:130px;height:4px;margin-top:4px}
.hudop .bar + .bar{margin-top:2px}
.hudop .hs em{font-style:normal;color:var(--amber)}.hudop .hs em.bad{color:var(--red)}
/* 무전 서랍이 열려 있으면 그만큼 가운데를 비켜 준다 — 수주 단추를 덮었다 */
 .layout.hubB.drawopen{margin-right:396px} 
/* 전투 중 알림은 오른쪽 위에 — 아래쪽은 분대 무전 송신 칸이다 */
body:has(.layout.combat) .toast-wrap{bottom:auto;top:calc(var(--hudH) + 10px)}
.online-n{font-weight:inherit}

/* ---- 외형 ---- */
.gdoll .gart{width:min(384px,44%)}

.skinmodal{max-width:880px;width:calc(100vw - 40px)}
.skgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.skcard{display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;padding:10px;border-radius:12px;
  background:var(--panel2);border:1px solid var(--line2)}
.skcard.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.skcard .skimg{width:100%;aspect-ratio:1/1;border-radius:10px;display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  background:radial-gradient(ellipse at 50% 35%,#2E373D,#171B1E 72%)}
.skcard .skimg img{width:100%;height:100%;object-fit:contain}
.skcard.lock .skimg img{filter:grayscale(.85) brightness(.55)}
.skcard b{font-size:14px}
.skcard .sks{font-size:12px;color:var(--ink2);line-height:1.5}
.skcard .sks.on{color:var(--amber);font-weight:700}
.skcard .sks.dim{color:var(--ink3)}
.skcard .bar{width:100%;height:5px}
.skcard .btn{width:100%}
.profface{float:right;width:96px;height:96px;margin:0 0 8px 12px;border-radius:12px;object-fit:cover;object-position:50% 10%;
  background:radial-gradient(ellipse at 50% 35%,#2E373D,#171B1E 72%)}
.notice.skingot{border-color:var(--amber2)}
.skinmodal{max-height:calc(100vh - 40px);overflow-y:auto} .skinmodal .panel-h{position:sticky;top:0;z-index:2;background:var(--panel)}

/* ---- 칭호 ---- */

.gdoll .skinbtns{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:2;display:flex;gap:8px}
.gdoll .skinbtns .btn{padding:8px 14px;font-weight:700;white-space:nowrap}
.sqpanel .sqttl{font-size:10.5px;color:var(--amber);font-weight:700;margin-top:1px}
.pfttl{color:var(--amber);font-weight:700;font-size:13px;margin-bottom:4px}
.ttlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(360px,1fr));gap:8px;margin-bottom:14px}
.ttrow{display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:10px;background:var(--panel2);border:1px solid var(--line2)}
.ttrow.on{border-color:var(--amber);box-shadow:0 0 0 1px var(--amber)}
.ttrow.lock{opacity:.72}
.ttrow .tti{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.ttrow .tti b{font-size:14.5px}
.ttrow .tte{font-size:12.5px;color:var(--grn)}
.ttrow .ttc{font-size:11.5px;color:var(--ink3)}
.ttrow .bar{height:4px;margin-top:3px}

/* ---- 칭호 — 이름표 (개편) ----
   모든 크기는 em — 글자 크기만 바꾸면 HUD·목록·큰 미리보기가 같은 모양으로 커진다.
   바탕 모양: 왼쪽 위·오른쪽 아래를 비스듬히 잘라 낸 군용 명찰.
   등급: 평범(움직임 없음) → 오래 걸림(느린 빛 한 줄) → 드묾(저마다의 움직임) → 운영자. */
.ttl{--tc:#C9B98A;--tb:#4A4232;--tbg:#1A1813;--cut:.45em;
  position:relative;display:inline-flex;align-items:center;gap:.42em;padding:.12em .75em;
  font-style:normal;font-weight:700;font-size:12px;line-height:1.55;white-space:nowrap;vertical-align:1px;
  color:var(--tc);background:var(--tbg);box-shadow:inset 0 0 0 1px var(--tb);isolation:isolate;overflow:hidden;overflow:clip;
  clip-path:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut))}
.ttl .tgl{font-style:normal;font-size:.9em;letter-spacing:-.02em;position:relative;z-index:2;display:inline-block}
.ttl span{position:relative;z-index:2}

/* 느린 빛 한 줄 — 오래 걸리는 칭호 */
.tt-t_hundred::after,.tt-t_veteran::after,.tt-t_pillar::after,.tt-t_reborn::after,
.tt-t_col_uniq::after,.tt-t_col_boss::after,.tt-t_col_gun::after,.tt-t_col_pet::after{
  content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.2) 50%,transparent 65%) 130% 0/300% 100% no-repeat;
  animation:ttSheen 7s ease-in-out infinite}
@keyframes ttSheen{0%,72%{background-position:130% 0}100%{background-position:-130% 0}}

/* ===== 경력 — 계급과 훈장 ===== */
/* 신참 — 막 받은 국방색 천 명찰 */
.tt-t_first{--tc:#B9C0A6;--tb:#4B5241;--tbg:#1A1D16;
  background:repeating-linear-gradient(45deg,#1A1D16 0 .18em,#1D2019 .18em .36em)}
/* 백 번의 계약 — 구리 명판 */
.tt-t_hundred{--tc:#E4AA70;--tb:#7A5230;background:linear-gradient(#3A2917,#20160D)}
/* 역전의 용사 — 금 명판에 새긴 글자 */
.tt-t_veteran{--tc:#2A1E08;--tb:#7A5E22;
  background:linear-gradient(160deg,#F5DE92,#B8913A 48%,#E9C872 60%,#A88232);
  text-shadow:0 1px 0 rgba(255,255,255,.45)}
.tt-t_veteran::after{background-image:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.55) 50%,transparent 65%)}
/* 명사수 — 조준선이 가로로 훑는다 */
.tt-t_marks{--tc:#A8CFEA;--tb:#35536A;--tbg:#0E1820}
.tt-t_marks::before{content:'';position:absolute;top:0;bottom:0;width:.12em;left:-5%;z-index:1;
  background:#A8CFEA;box-shadow:0 0 .5em #A8CFEA;opacity:.8;animation:ttScan 3.2s linear infinite}
.tt-t_marks::after{content:'';position:absolute;left:0;right:0;top:50%;height:1px;z-index:0;background:rgba(168,207,234,.18)}
@keyframes ttScan{0%{left:-5%;opacity:0}10%,85%{opacity:.8}100%{left:105%;opacity:0}}
/* 대장장이의 손님 — 불티가 올라간다 */
.tt-t_smith{--tc:#FFB26A;--tb:#7A4520;background:linear-gradient(0deg,#3E1C08,#1E1109 70%)}
.tt-t_smith .tgl{text-shadow:0 0 .5em rgba(255,140,50,.8)}
.tt-t_smith::before,.tt-t_smith::after{content:'';position:absolute;bottom:-.1em;width:.16em;height:.16em;border-radius:50%;z-index:1;
  background:#FFC27A;box-shadow:.9em .2em 0 -.02em #FF9A3C,2.6em -.1em 0 #FFD08A,4.1em .25em 0 -.03em #FF9A3C;animation:ttEmber 2.2s ease-out infinite}
.tt-t_smith::before{left:.6em}
.tt-t_smith::after{left:1.4em;animation-delay:1.1s;box-shadow:1.8em .1em 0 #FF9A3C,3.4em .2em 0 -.02em #FFD08A}
@keyframes ttEmber{0%{transform:translateY(0);opacity:0}15%{opacity:1}100%{transform:translate(.4em,-1.8em);opacity:0}}
/* 지휘관 사냥꾼 — 빨간 표식, 새긴 격살 눈금, 심장처럼 뛰는 해골 */
.tt-t_boss{--tc:#F08A7E;--tb:#8A2E24;
  background:repeating-linear-gradient(100deg,transparent 0 .55em,rgba(240,138,126,.12) .55em .65em) right/5em 100% no-repeat,#1E0D0B}
.tt-t_boss .tgl{animation:ttBeat 1.6s ease-in-out infinite}
@keyframes ttBeat{0%,40%,100%{transform:scale(1)}20%{transform:scale(1.28)}30%{transform:scale(.95)}}
/* 문지기 — 마름모 격자 무늬, 표식이 숨 쉬듯 빛난다 */
.tt-t_sealer{--tc:#C3B0F0;--tb:#4E3F78;
  background:repeating-linear-gradient(45deg,transparent 0 .4em,rgba(195,176,240,.08) .4em .48em),
             repeating-linear-gradient(-45deg,transparent 0 .4em,rgba(195,176,240,.08) .4em .48em),#16121F}
.tt-t_sealer .tgl{animation:ttGlow 3s ease-in-out infinite;--gc:#C3B0F0}
@keyframes ttGlow{0%,100%{text-shadow:0 0 0 transparent}50%{text-shadow:0 0 .5em var(--gc),0 0 1em var(--gc)}}
/* 탈환의 영웅 — 깃발이 나부낀다 */
.tt-t_retake{--tc:#9AD694;--tb:#3A6337;--tbg:#111A10}
.tt-t_retake .tgl{transform-origin:10% 90%;animation:ttFlag 1.4s ease-in-out infinite}
@keyframes ttFlag{0%,100%{transform:skewY(0) scaleX(1)}50%{transform:skewY(-8deg) scaleX(.85)}}
/* 다시 선 자 — 아래에서 빛이 차오른다 */
.tt-t_reborn{--tc:#F5ECCB;--tb:#8A7E58;--tbg:#1C1A12}
.tt-t_reborn::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 60% 90% at 50% 130%,rgba(245,225,160,.45),transparent 70%);animation:ttRise 3.4s ease-in-out infinite}
.tt-t_reborn .tgl{animation:ttSpin 6s linear infinite}
@keyframes ttRise{0%,100%{opacity:.35;transform:translateY(20%)}50%{opacity:1;transform:translateY(0)}}
@keyframes ttSpin{to{transform:rotate(-1turn)}}
/* 시즌의 기둥 — 왼쪽에 금·검정 약장, 별이 반짝 */
.tt-t_pillar{--tc:#F6D675;--tb:#9A7A26;--tbg:#1F190A;padding-left:1.55em}
.tt-t_pillar::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1em;z-index:1;
  background:linear-gradient(90deg,#1A1406 0 25%,#E9C25A 25% 40%,#1A1406 40% 60%,#E9C25A 60% 75%,#1A1406 75%)}
.tt-t_pillar .tgl{animation:ttTwinkle 2.4s ease-in-out infinite}
@keyframes ttTwinkle{0%,100%{transform:scale(1);text-shadow:none}50%{transform:scale(1.25);text-shadow:0 0 .5em #FFE9A0}}

/* ===== 지역 — 그 땅의 결 ===== */
/* 북극 — 얼음판, 결정이 반짝 */
.tt-t_arctic{--tc:#12324A;--tb:#E3F4FF;background:linear-gradient(#E6F4FC,#A6CCE4);text-shadow:0 1px 0 rgba(255,255,255,.7)}
.tt-t_arctic::before{content:'';position:absolute;inset:0;z-index:1;
  background:radial-gradient(circle at 18% 28%,#fff 0 .06em,transparent .12em),radial-gradient(circle at 58% 72%,#fff 0 .06em,transparent .12em),
             radial-gradient(circle at 88% 22%,#fff 0 .06em,transparent .12em);animation:ttBlink 2.4s steps(2) infinite}
@keyframes ttBlink{50%{opacity:.15}}
/* 우림 — 얼룩무늬 */
.tt-t_jungle{--tc:#D6F2C8;--tb:#2F5E36;text-shadow:0 1px 1px #000;
  background:radial-gradient(ellipse .9em .5em at 12% 30%,#2D5A2E 95%,transparent),radial-gradient(ellipse 1.1em .6em at 45% 80%,#1E3D20 95%,transparent),
             radial-gradient(ellipse .8em .5em at 75% 20%,#3A6A2F 95%,transparent),radial-gradient(ellipse 1em .55em at 95% 75%,#24472A 95%,transparent),#172A18}
/* 사헬 — 모래 물결이 천천히 흐른다 */
.tt-t_sahel{--tc:#F3D69C;--tb:#7A6236;
  background:repeating-linear-gradient(172deg,#382C17 0 .3em,#2B2213 .3em .62em) 0 0/6em 100%;animation:ttDrift 12s linear infinite}
@keyframes ttDrift{to{background-position:6em 0}}
/* 동유럽 접경 — 위아래 철조망 */
.tt-t_east{--tc:#C3CCD5;--tb:#4B5560;--tbg:#15181B}
.tt-t_east::before{content:'';position:absolute;inset:0;z-index:0;
  background:repeating-linear-gradient(90deg,#7F8A96 0 .14em,transparent .14em .55em) 0 .12em/100% 1px no-repeat,
             repeating-linear-gradient(90deg,#7F8A96 0 .14em,transparent .14em .55em) 0 calc(100% - .12em)/100% 1px no-repeat}
/* 발칸 — 녹슨 철판 */
.tt-t_balkan{--tc:#F2B791;--tb:#6B4332;
  background:radial-gradient(circle at 20% 70%,rgba(160,80,40,.55) 0 .35em,transparent .6em),radial-gradient(circle at 70% 25%,rgba(140,70,35,.5) 0 .3em,transparent .55em),
             radial-gradient(circle at 90% 80%,rgba(120,60,30,.45) 0 .25em,transparent .5em),linear-gradient(#2A1A12,#1A110C)}
/* 중미 고지 — 등고선 */
.tt-t_andes{--tc:#DCC49E;--tb:#665640;
  background:repeating-radial-gradient(ellipse at 25% 140%,transparent 0 .35em,rgba(220,196,158,.16) .35em .42em),#1B1711}
/* 홍해 — 물결이 흐른다 */
.tt-t_redsea{--tc:#8FDDD3;--tb:#2E6460;--tbg:#0D1A19}
.tt-t_redsea::before{content:'';position:absolute;left:0;right:0;bottom:0;height:45%;z-index:0;
  background:radial-gradient(circle at 50% 100%,rgba(143,221,211,.28) 0 .32em,transparent .34em) 0 100%/.8em .5em repeat-x;animation:ttWave 3s linear infinite}
@keyframes ttWave{to{background-position:.8em 100%}}

/* ===== 세력 — 표적 표식: 세력 색 띠 + 격살 눈금 ===== */
.tt-t_militia,.tt-t_pirate,.tt-t_cartel,.tt-t_insurg,.tt-t_pmc,.tt-t_spec,.tt-t_rift{padding-left:1em}
.tt-t_militia,.tt-t_pirate,.tt-t_cartel,.tt-t_insurg,.tt-t_pmc,.tt-t_spec{padding-right:2.1em}
.tt-t_militia::before,.tt-t_pirate::before,.tt-t_cartel::before,.tt-t_insurg::before,.tt-t_pmc::before,.tt-t_spec::before,.tt-t_rift::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:.3em;background:var(--tc);z-index:1}
.tt-t_militia::after,.tt-t_pirate::after,.tt-t_cartel::after,.tt-t_insurg::after,.tt-t_pmc::after,.tt-t_spec::after{
  content:'';position:absolute;right:.45em;top:.3em;bottom:.3em;width:1.3em;z-index:0;opacity:.22;
  background:repeating-linear-gradient(90deg,var(--tc) 0 .1em,transparent .1em .28em),linear-gradient(20deg,transparent 45%,var(--tc) 45% 55%,transparent 55%)}
.tt-t_militia{--tc:#D2C68E;--tb:#5F5838;--tbg:#1A1811}
.tt-t_pirate {--tc:#94CDD8;--tb:#355A62;--tbg:#10181A}
.tt-t_cartel {--tc:#EC93A6;--tb:#6E3040;--tbg:#1E1015}
.tt-t_insurg {--tc:#F2B06C;--tb:#704A26;--tbg:#1E150C}
.tt-t_pmc    {--tc:#B0C0E0;--tb:#44506B;--tbg:#13161D}
.tt-t_spec   {--tc:#A6B0B4;--tb:#3B4246;--tbg:#121516}
.tt-t_spec span{letter-spacing:.06em;animation:ttGhost 5s ease-in-out infinite}
@keyframes ttGhost{0%,60%,100%{opacity:1;filter:none}75%{opacity:.45;filter:blur(.04em)}}
/* 안개를 걷는 자 — 안개가 옆으로 흘러간다 */
.tt-t_rift{--tc:#D3C2F8;--tb:#5A4A86;--tbg:#141120}
.tt-t_rift::after{content:'';position:absolute;inset:-20% -40%;z-index:0;
  background:radial-gradient(ellipse 30% 60% at 30% 50%,rgba(200,180,255,.28),transparent),radial-gradient(ellipse 25% 55% at 70% 40%,rgba(170,150,240,.22),transparent);
  animation:ttMist 7s ease-in-out infinite alternate}
@keyframes ttMist{from{transform:translateX(-15%)}to{transform:translateX(15%)}}

/* ===== 도감 — 보관 서류철: 누런 종이, 타자 글자, 붉은 인장 ===== */
.tt-t_col_uniq,.tt-t_col_boss,.tt-t_col_gun,.tt-t_col_pet{--tc:#2B2416;--tb:#8C7B52;padding-right:1.9em;
  font-family:"IBM Plex Mono","IBM Plex Sans KR",monospace;font-weight:600;
  background:repeating-linear-gradient(0deg,transparent 0 .5em,rgba(90,70,30,.12) .5em calc(.5em + 1px)),linear-gradient(#DDD0AA,#C9B98C)}
.tt-t_col_uniq span,.tt-t_col_boss span,.tt-t_col_gun span,.tt-t_col_pet span{letter-spacing:-.01em}
.tt-t_col_uniq .tgl,.tt-t_col_boss .tgl,.tt-t_col_gun .tgl,.tt-t_col_pet .tgl{color:var(--ac)}
.tt-t_col_uniq span::after,.tt-t_col_boss span::after,.tt-t_col_gun span::after,.tt-t_col_pet span::after{
  content:'완';position:absolute;right:-1.55em;top:50%;width:1.2em;height:1.2em;margin-top:-.6em;border:.08em solid var(--ac);border-radius:50%;
  color:var(--ac);font-size:.78em;line-height:1.1em;text-align:center;transform:rotate(-14deg);opacity:.85}
.tt-t_col_uniq{--ac:#9A6A10}
.tt-t_col_boss{--ac:#A42A22}
.tt-t_col_gun {--ac:#3A4A58}
.tt-t_col_pet {--ac:#5A3E96}

/* ===== 이벤트 · 이야기 — 한 번뿐인 것들 ===== */
/* 월식 — 검은 해 둘레에 주황 광환 */
.tt-t_eclipse{--tc:#F2C79A;--tb:#5A3418;--tbg:#0D0A08}
.tt-t_eclipse .tgl{color:#0D0A08;animation:ttCorona 3s ease-in-out infinite}
@keyframes ttCorona{0%,100%{text-shadow:0 0 .15em #FF9A3C,0 0 .3em #FF9A3C}50%{text-shadow:0 0 .3em #FFB860,0 0 .8em #FF7A1C,0 0 1.2em #FF7A1C}}
/* 현상금 사냥꾼 — 수배지 종이에 붉은 도장 */
.tt-t_bounty{--tc:#3A1E10;--tb:#7A5A34;padding-right:2.5em;
  background:radial-gradient(circle at 10% 20%,rgba(120,80,30,.25),transparent 40%),linear-gradient(#D4BC90,#BFA273)}
.tt-t_bounty::after{content:'현상';position:absolute;right:.35em;top:50%;z-index:1;padding:0 .25em;margin-top:-.62em;font-size:.72em;line-height:1.5;
  color:#B3261E;border:.1em solid #B3261E;border-radius:.2em;transform:rotate(-10deg);opacity:.85;animation:ttStamp 4s ease-in-out infinite}
@keyframes ttStamp{0%,80%,100%{transform:rotate(-10deg) scale(1)}86%{transform:rotate(-10deg) scale(1.35);opacity:.4}92%{transform:rotate(-10deg) scale(.95);opacity:.9}}
/* 대항전 우승 — 약장 리본 + 별 */
.tt-t_league1{--tc:#F5E4AA;--tb:#6E5A22;--tbg:#1B1A12;padding-left:1.7em}
.tt-t_league1::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1.15em;z-index:1;
  background:linear-gradient(90deg,#1F3F8A 0 28%,#F2F2F2 28% 38%,#B3262E 38% 62%,#F2F2F2 62% 72%,#1F3F8A 72%)}
.tt-t_league1 .tgl{color:#FFD76A;animation:ttTwinkle 2.2s ease-in-out infinite}
/* 이름을 준 자 — 연보라 안개가 감싼다 */
.tt-t_story_take{--tc:#EADFFF;--tb:#6A5A9A;--tbg:#171327}
.tt-t_story_take::before{content:'';position:absolute;inset:-30%;z-index:0;
  background:radial-gradient(circle at 30% 50%,rgba(220,200,255,.35),transparent 45%),radial-gradient(circle at 75% 55%,rgba(255,210,240,.22),transparent 40%);
  animation:ttMist 5s ease-in-out infinite alternate}
.tt-t_story_take span{animation:ttGlow 4s ease-in-out infinite;--gc:rgba(220,200,255,.7)}
/* 봉인한 자 — 테두리를 따라 빛이 돈다 */
.tt-t_story_seal,.tt-t_beyond_break{--tb:transparent}
.tt-t_story_seal{--tc:#CFEFF5;--tbg:#0C1418}
.tt-t_story_seal::before{content:'';position:absolute;inset:-150% -20%;z-index:0;
  background:conic-gradient(from 0deg,transparent 0 65%,#7FE3F0 78%,transparent 90%);animation:ttSpin 3s linear infinite reverse}
.tt-t_story_seal::after{content:'';position:absolute;inset:max(1px,.09em);z-index:1;background:var(--tbg);
  clip-path:polygon(calc(var(--cut) - .05em) 0,100% 0,100% calc(100% - var(--cut) + .05em),calc(100% - var(--cut) + .05em) 100%,0 100%,0 calc(var(--cut) - .05em))}
/* 거래한 자 — 붉은 바탕에 금빛이 흐르는 글자 */
.tt-t_beyond_sell{--tc:#F2CF6A;--tb:#7A3A1E;background:linear-gradient(#2A120C,#170A07)}
.tt-t_beyond_sell span{background:linear-gradient(100deg,#B8862E 0%,#FFE7A0 20%,#B8862E 40%,#B8862E 100%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ttGold 4s linear infinite}
@keyframes ttGold{from{background-position:120% 0}to{background-position:-130% 0}}
/* 문을 닫은 자 — 가운데 빛 틈이 좁아졌다가 닫힌다 */
.tt-t_beyond_break{--tc:#E8E0FF;--tbg:#0C0A14;box-shadow:inset 0 0 0 1px #4A3E70}
.tt-t_beyond_break::before{content:'';position:absolute;top:0;bottom:0;left:50%;width:3em;margin-left:-1.5em;z-index:0;
  background:radial-gradient(ellipse 50% 70% at 50% 50%,rgba(200,180,255,.55),transparent 70%);animation:ttShut 3.6s ease-in-out infinite}
.tt-t_beyond_break::after{content:'';position:absolute;top:.2em;bottom:.2em;left:50%;width:1px;z-index:1;background:#fff;box-shadow:0 0 .4em #C8B4FF;animation:ttShutL 3.6s ease-in-out infinite}
@keyframes ttShut{0%,100%{transform:scaleX(1);opacity:1}60%{transform:scaleX(.08);opacity:.9}70%,85%{transform:scaleX(0);opacity:0}}
@keyframes ttShutL{0%,55%,100%{opacity:.9}70%,85%{opacity:0}}
/* 약속을 지킨 자 — 촛불처럼 따뜻한 빛 */
.tt-t_beyond_give{--tc:#FFE2B0;--tb:#7A5424;--tbg:#1C140A}
.tt-t_beyond_give::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(ellipse 45% 110% at 20% 60%,rgba(255,180,80,.35),transparent 70%);animation:ttCandle 2.8s ease-in-out infinite}
.tt-t_beyond_give .tgl{color:#FFC45A;animation:ttFlicker 2.8s ease-in-out infinite}
@keyframes ttCandle{0%,100%{opacity:.6}30%{opacity:1}45%{opacity:.75}70%{opacity:.95}}
@keyframes ttFlicker{0%,100%{transform:scaleY(1)}30%{transform:scaleY(1.12) skewX(-4deg)}60%{transform:scaleY(.94) skewX(3deg)}}
/* 대목의 일꾼 — 보급 상자 스텐실 + 경고 띠 */
.tt-t_harvest{--tc:#F2C230;--tb:#5E4A20;padding-left:1.6em;letter-spacing:.04em;
  background:repeating-linear-gradient(90deg,transparent 0 1.2em,rgba(0,0,0,.18) 1.2em calc(1.2em + 1px)),linear-gradient(#3A2E18,#281F10)}
.tt-t_harvest::before{content:'';position:absolute;left:0;top:0;bottom:0;width:1em;z-index:1;
  background:repeating-linear-gradient(-45deg,#F2C230 0 .25em,#141414 .25em .5em) 0 0/.707em .707em;animation:ttHaz 1.4s linear infinite}
@keyframes ttHaz{to{background-position:0 .707em}}

/* ===== 실시간 콘텐츠 · 3장 ===== */
/* 긴급 출동 — 빨강·흰 경광등이 번갈아 */
.tt-t_urgent{--tc:#FFE3DE;--tb:#9A2A22;--tbg:#2A0C0A}
.tt-t_urgent::before{content:'';position:absolute;inset:0;z-index:0;
  background:linear-gradient(90deg,rgba(255,60,50,.45),transparent 35%,transparent 65%,rgba(80,150,255,.4));animation:ttSiren 1.1s steps(2) infinite}
.tt-t_urgent .tgl{color:#fff;background:#D8342B;border-radius:50%;width:1.15em;height:1.15em;line-height:1.15em;text-align:center;font-size:.8em}
@keyframes ttSiren{50%{transform:scaleX(-1)}}
/* 망루를 무너뜨린 자 — 회색 철판에 금이 간다 */
.tt-t_watch{--tc:#E4E8EC;--tb:#5E666E;background:linear-gradient(160deg,#3A4148,#22272C)}
.tt-t_watch::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(115deg,transparent 46%,rgba(255,110,90,.85) 47%,transparent 49%),linear-gradient(60deg,transparent 58%,rgba(255,110,90,.6) 59%,transparent 60.5%);
  animation:ttCrack 3.2s ease-in-out infinite}
@keyframes ttCrack{0%,40%{opacity:0}55%,85%{opacity:1}100%{opacity:0}}
/* 낙찰의 망치 — 마호가니 판에 금 망치가 탕 */
.tt-t_auction{--tc:#F6DDA0;--tb:#7A4A20;background:linear-gradient(#4A2412,#2A140A)}
.tt-t_auction .tgl{color:#FFD76A;transform-origin:80% 80%;animation:ttGavel 2.6s ease-in-out infinite}
@keyframes ttGavel{0%,60%,100%{transform:rotate(0)}70%{transform:rotate(-35deg)}78%{transform:rotate(8deg)}84%{transform:rotate(0)}}
/* 거상 사냥꾼 — 잿빛 바위에 불씨가 번진다 */
.tt-t_wboss{--tc:#FFD7B0;--tb:#5E4A3E;
  background:radial-gradient(circle at 20% 70%,rgba(255,120,40,.35) 0 .25em,transparent .6em),radial-gradient(circle at 75% 30%,rgba(255,120,40,.3) 0 .2em,transparent .55em),linear-gradient(#3A3330,#221E1C)}
.tt-t_wboss .tgl{color:#FF8A3C;animation:ttGlow 2.4s ease-in-out infinite;--gc:#FF8A3C}
/* 시즌 챔피언 — 보라 비단에 금 왕관 */
.tt-t_lg_season{--tc:#FFE9A8;--tb:#B8912E;background:linear-gradient(135deg,#3A1A55,#22103A)}
.tt-t_lg_season::after{background-image:linear-gradient(110deg,transparent 35%,rgba(255,230,160,.4) 50%,transparent 65%)}
.tt-t_lg_season .tgl{color:#FFD76A;animation:ttTwinkle 2.4s ease-in-out infinite}
/* 등불을 끈 자 — 불빛이 서서히 꺼졌다 켜진다 */
.tt-t_tower_dark{--tc:#B8C6DA;--tb:#34405A;--tbg:#0B0F1A}
.tt-t_tower_dark .tgl{color:#8FD8FF;animation:ttDim 4s ease-in-out infinite}
@keyframes ttDim{0%,100%{text-shadow:0 0 .5em #8FD8FF;opacity:1}50%,70%{text-shadow:none;opacity:.2}}
/* 등불지기 — 등대 불빛이 가로질러 훑는다 */
.tt-t_tower_keep{--tc:#FFF1C8;--tb:#6A5A30;--tbg:#141820}
.tt-t_tower_keep::before{content:'';position:absolute;top:-50%;bottom:-50%;width:2.4em;left:-30%;z-index:0;
  background:linear-gradient(90deg,transparent,rgba(255,236,170,.45),transparent);transform:skewX(-18deg);animation:ttBeam 3.4s ease-in-out infinite}
@keyframes ttBeam{0%{left:-30%}60%,100%{left:120%}}
.tt-t_tower_keep .tgl{color:#FFE08A}
/* 세린의 벗 — 푸른 보랏빛에 꽃잎이 흩날린다 */
.tt-t_tower_serin{--tc:#EEE8FF;--tb:#7A7AB8;background:linear-gradient(135deg,#2A2A52,#1C2440)}
.tt-t_tower_serin .tgl{color:#FFC8E8;animation:ttSpin 7s linear infinite}
.tt-t_tower_serin::after{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;
  background:radial-gradient(circle at 30% 30%,rgba(255,200,232,.7) 0 .05em,transparent .1em),radial-gradient(circle at 70% 70%,rgba(200,220,255,.7) 0 .05em,transparent .1em);
  animation:ttBlink 2.8s steps(2) infinite}

/* 4장 — 안개를 묻은 자: 흙빛 갱도 판, 먼지가 가라앉는다 */
.tt-t_origin_bury{--tc:#E8D8B8;--tb:#6A5638;background:linear-gradient(#3A2E20,#1E1810)}
.tt-t_origin_bury::before{content:'';position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 20% 20%,rgba(232,216,184,.35) 0 .05em,transparent .1em) 0 0/1.4em 1em;animation:ttSettle 4s linear infinite}
@keyframes ttSettle{from{background-position:0 -1em}to{background-position:0 1em}}
/* 씨앗을 든 자 — 검은 판에 차가운 씨앗이 맥박친다 */
.tt-t_origin_carry{--tc:#D8F0FF;--tb:#3A5A7A;--tbg:#0A1018}
.tt-t_origin_carry .tgl{color:#9FE0FF;animation:ttBeat 2.2s ease-in-out infinite;text-shadow:0 0 .5em #6FC8FF}
/* 첫 안개의 끝 — 새벽빛이 안개를 밀어낸다 */
.tt-t_origin_free{--tc:#2A2440;--tb:#E8D8FF;background:linear-gradient(90deg,#FFE6C8,#E8D8FF 50%,#C8E8FF) 0 0/200% 100%;animation:ttDrift 8s linear infinite;text-shadow:0 1px 0 rgba(255,255,255,.6)}
.tt-t_origin_free .tgl{color:#FF9AC8}

/* ===== 운영자 — 검은 철판, 은빛 글자, 붉은 잡음 ===== */
.ttl.ttl-admin{--tb:#3A3F43;--cut:.6em;letter-spacing:.04em;padding:.12em .95em;
  background:linear-gradient(#17191B,#0B0D0E);box-shadow:inset 0 0 0 1px #3A3F43,inset 0 .12em 0 rgba(210,50,59,.5);
  clip-path:polygon(var(--cut) 0,calc(100% - var(--cut)) 0,100% 50%,calc(100% - var(--cut)) 100%,var(--cut) 100%,0 50%)}
.ttl-admin span{background:linear-gradient(#F4F1E8 0%,#D8D4C8 45%,#7E7C77 55%,#A8A59C 100%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ttl-admin span::after{content:attr(data-t);position:absolute;inset:0;color:#E2323C;-webkit-text-fill-color:#E2323C;background:none;animation:ttGlitch 3.6s steps(1) infinite}
.ttl-admin::before{content:'';position:absolute;bottom:.12em;width:.45em;height:.14em;background:#E23A44;box-shadow:0 0 .35em #E23A44;z-index:3;animation:ttDot 3.2s linear infinite}
@keyframes ttGlitch{0%,86%,100%{clip-path:inset(0 0 100% 0);transform:none}
  87%{clip-path:inset(15% 0 60% 0);transform:translateX(-.12em)}89%{clip-path:inset(55% 0 20% 0);transform:translateX(.14em)}
  91%{clip-path:inset(35% 0 45% 0);transform:translateX(-.06em)}93%{clip-path:inset(0 0 100% 0)}}
@keyframes ttDot{0%{left:10%;opacity:0}8%,90%{opacity:1}100%{left:88%;opacity:0}}

@media (prefers-reduced-motion:reduce){.ttl,.ttl *,.ttl::before,.ttl::after,.ttl *::after{animation:none!important}}
/* 자리별 크기 — 모양은 전부 em 이라 글자 크기만 바꾸면 된다 */
.hudop .ttl{font-size:11.5px;margin-left:4px}
.sqpanel .sqttl .ttl{font-size:10.5px}
.pfttl .ttl{font-size:13px}
.ttrow .tti b .ttl{font-size:13.5px}
.cxi .ttl{font-size:11px}

/* ---- 실시간 ---- */
/* 굴러가는 숫자 — 오르면 초록, 내리면 빨강으로 잠깐 */
.lv{font-variant-numeric:tabular-nums;border-radius:3px;transition:color .5s,background-color .5s,text-shadow .5s}
.lv.up{color:var(--grn,#6FD08C)!important;text-shadow:0 0 8px rgba(111,208,140,.55);background-color:rgba(111,208,140,.1)}
.lv.dn{color:var(--red,#E5675E)!important;text-shadow:0 0 8px rgba(229,103,94,.5);background-color:rgba(229,103,94,.1)}
/* 흘러가는 남은 시간 — 한 시간 안이면 호박색, 끝나면 흐리게 */
.cd{font-variant-numeric:tabular-nums;white-space:nowrap}
.cd.near{color:var(--amber,#E0A63C)}
.cd.over{opacity:.55}
/* 연결 표시 — 살아 있으면 초록 점이 숨 쉬고, 끊기면 회색 */
.livedot{display:inline-block;width:6px;height:6px;border-radius:50%;margin-left:4px;vertical-align:1px;background:#6FD08C;
  box-shadow:0 0 0 0 rgba(111,208,140,.6);animation:liveBeat 2.4s ease-out infinite}
.livedot.off{background:#6D777D;animation:none;box-shadow:none}
@keyframes liveBeat{0%{box-shadow:0 0 0 0 rgba(111,208,140,.55)}70%,100%{box-shadow:0 0 0 6px rgba(111,208,140,0)}}
@media (prefers-reduced-motion:reduce){.livedot{animation:none}}
/* 디스코드 */
a.iconbtn{text-decoration:none}
.iconbtn.discord{background:#2B2F63;color:#DDE0FF}
.iconbtn.discord:hover{background:#3B41A0;color:#fff}
.discordbtn{display:block;text-align:center;text-decoration:none;background:#3B41A0;color:#fff;border:0;font-weight:700}
.discordbtn:hover{background:#4A51C4}

/* 채팅 — 운영자 표시 [관리자] */
.cadm{display:inline-flex;align-items:center;margin-right:5px;padding:0 6px;border:1px solid #C9A24A;border-radius:3px;
  background:#000;font-style:normal;font-size:.86em;line-height:1.5;vertical-align:1px}
.cadm b{color:#D9B25A;font-weight:700;letter-spacing:.03em}

/* 위쪽 줄 — 칭호가 길어도 겹치지 않게 */
.topbar.hud .hudop{flex:none}
.topbar.hud .hudop b{display:flex;align-items:center;gap:4px;white-space:nowrap}
.topbar.hud .sfield{white-space:nowrap}
.topbar.hud .sfield .k{white-space:nowrap}
@media (max-width:1860px){ .topbar.hud .brand{display:none} .topbar.hud .stat-strip{margin-left:auto} }
.cm .cn{max-width:none;overflow:visible} .cm .cn:has(.cadm){display:inline-flex;align-items:center}
.mshort{cursor:help}

/* 작전원 칸 머리 — 칭호 */
.panel-h .opttl{margin-left:auto;display:inline-flex;align-items:center;min-width:0;white-space:nowrap}
.panel-h .opttl .ttl{font-size:11.5px}
.panel-h .opttl + .tag{margin-left:12px}

/* 공개 프로필 — 장착 장비·능력치 */
.profmodal{max-height:calc(100vh - 60px);overflow-y:auto}
.pgear{display:flex;flex-direction:column;gap:6px}
.pgw,.pga{display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;min-width:0}
.pgi{flex:none;width:64px;height:40px;display:flex;align-items:center;justify-content:center}
.pgi .ico{max-width:64px;max-height:40px;width:auto;height:auto}
.pga .pgi{width:40px}
.pga .pgi .ico{max-width:40px}
.pgb{display:flex;flex-direction:column;min-width:0}
.pgb b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pgl{font-size:10.5px;color:var(--ink3);letter-spacing:.04em}
.pgs{font-size:11.5px;color:var(--ink3)}
.pgrow{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pstats{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:6px}
.pst{display:flex;flex-direction:column;align-items:center;gap:2px;padding:8px 4px;background:var(--panel2);border:1px solid var(--line);border-radius:6px;text-align:center}
.pst span{font-size:11px;color:var(--ink3)}
.pst b{font-size:17px}
.pst b i{font-style:normal;font-size:10px;color:var(--amber);margin-left:3px;vertical-align:3px}
.pst em{font-style:normal;font-size:10.5px;color:var(--ink3);line-height:1.3}

/* 외형 — 상점 것은 잠겨 있어도 색을 보여준다 (사기 전에 보고 고르게) */
.skcard.sk-shop.lock .skimg img{filter:brightness(.85)}
.skcard.sk-admin{border-color:#C9A24A;background:#000}
.skcard.sk-admin b{color:#D9B25A}

/* 은신처 — 전경과 시설 그림 */
.hidepano{position:relative;margin-bottom:12px;border-radius:var(--r-sm);overflow:hidden;background:#000;line-height:0}
.hidepano img{width:100%;height:auto;display:block;image-rendering:auto}
.hidepano .hroom{position:absolute;top:38%;bottom:7.5%;display:flex;align-items:flex-end;justify-content:center;line-height:1.2;transition:background .2s}
.hidepano .hroom.off{background:rgba(4,6,8,.78);backdrop-filter:grayscale(1)}
.hidepano .hroom span{margin-bottom:6px;padding:2px 7px;border-radius:4px;background:rgba(0,0,0,.72);font-size:11.5px;color:var(--ink2);white-space:nowrap;display:flex;gap:6px}
.hidepano .hroom span b{font-family:var(--f-mono);font-weight:600;color:var(--ink3)}
.hidepano .hroom.on span b{color:var(--amber)}
.hidepano .hroom.max span{box-shadow:inset 0 0 0 1px var(--amber2)}
.hidecard .himg{margin:-11px -12px 2px;aspect-ratio:4/3;overflow:hidden;border-radius:var(--r-sm) var(--r-sm) 0 0;background:#000}
.hidecard .himg img{width:100%;height:100%;object-fit:cover;display:block}
.hidecard .himg.off img{filter:grayscale(1) brightness(.35)}
.hidecard .himg.noart{display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 60%,#2a2418,#0b0a08)}
.hidecard .himg.noart span{font-size:44px;color:var(--amber);opacity:.8}
.hidecard .himg.noart.off span{opacity:.25;filter:grayscale(1)}
.hidex{display:grid;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));gap:12px;margin-bottom:12px}
.hidex .panel{margin:0}
.hidex .orow .sub{line-height:1.45}
.ptrophy{display:flex;flex-wrap:wrap;gap:6px}
.roll .lines div.locked{color:var(--amber);font-weight:600}
.roll .lockbtn.on{color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber2)}
.turnbar .rhint{color:var(--amber);font-weight:600;margin-left:4px}
.bgcard{position:relative;padding-right:74px!important;min-height:92px}
.bgcard .bgface{position:absolute;right:6px;bottom:0;width:66px;height:66px;object-fit:cover;object-position:50% 10%;border-radius:8px;opacity:.9}
.bgcard.on .bgface{opacity:1}
.weeklybar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px;padding:8px 12px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(209,155,52,.14),rgba(209,155,52,.03));box-shadow:inset 0 0 0 1px var(--amber2)}
.weeklybar .wk{font-size:11px;font-family:var(--f-mono);color:var(--amber);letter-spacing:.08em}
.weeklybar b{color:var(--amber);font-size:14px}
.weeklybar .wd{font-size:12.5px;color:var(--ink2)}
.weeklybar .wl{margin-left:auto;font-size:11.5px;color:var(--ink3);font-family:var(--f-mono)}
.multchip.wkchip{background:rgba(209,155,52,.18);color:var(--amber)}
.multchip.wkchip.down{background:rgba(200,80,70,.18);color:var(--red-ink,#e88)}

/* 화기 계열 · 명품 · 방호 세트 */
.famchip{display:inline-block;padding:0 6px;border-radius:4px;font-size:10.5px;font-weight:700;color:#BFD4E8;background:#1E2A36;box-shadow:inset 0 0 0 1px #34506A;white-space:nowrap}
.gs.gfam{font-size:11px;line-height:1.4;color:var(--ink3)}
.uqline{display:block;font-size:11.5px;color:#E8C46A;margin-top:2px}
.uqname{color:#E8C46A}
.ico.uniq{filter:drop-shadow(0 0 3px rgba(232,196,106,.9)) drop-shadow(0 0 1px #E8C46A)}
.setrow{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px;font-size:12px}
.setbadge{padding:2px 8px;border-radius:5px;font-size:11.5px;font-weight:600}
.setbadge.s-light{background:#16242A;color:#9FD3DE;box-shadow:inset 0 0 0 1px #2F5963}
.setbadge.s-heavy{background:#2A1D16;color:#E0A27A;box-shadow:inset 0 0 0 1px #6A4330}
.setbadge.s-tac{background:#1D2416;color:#B5D28A;box-shadow:inset 0 0 0 1px #4B6334}
.lootgrid .lt.uq{box-shadow:inset 0 0 0 1px #C9A24A,0 0 12px rgba(232,196,106,.25)}
.lootgrid .lt.uq b{color:#E8C46A}
.setbadge.on{font-weight:800;box-shadow:inset 0 0 0 1px currentColor}

/* 이계 동료 */
.petslot{cursor:pointer}
.petslot:hover{box-shadow:inset 0 0 0 1px var(--amber2)}
.petcard .pett{font-size:12px;color:var(--ink2);min-height:3em}
.skcard.petcard .skimg{background:radial-gradient(circle at 50% 70%,#1d2a2a,#0c1012)}
.sq{position:relative}
.sqpet{position:absolute;left:34px;top:34px;width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 2px #000)}
.ppet{display:flex;gap:10px;align-items:center;padding:8px 10px;background:var(--panel2);border:1px solid var(--line);border-radius:6px}
.ppet img{width:56px;height:56px;object-fit:contain}
.ppet div{display:flex;flex-direction:column}

/* 게시판 위 한 줄 */
.boardbar{display:flex;align-items:center;gap:10px;flex-wrap:nowrap;margin-bottom:10px;padding:7px 12px;border-radius:var(--r-sm);
  background:linear-gradient(90deg,rgba(209,155,52,.12),rgba(209,155,52,.02));box-shadow:inset 0 0 0 1px var(--line2);min-width:0;overflow:hidden}
.boardbar .bb-i{display:inline-flex;align-items:center;gap:7px;min-width:0;white-space:nowrap}
.boardbar .bb-k{font-size:10.5px;font-family:var(--f-mono);color:var(--ink3);letter-spacing:.06em}
.boardbar b{color:var(--amber);font-size:13px}
.boardbar .bb-s{font-size:12px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.boardbar .facsym{width:20px;height:20px}
.boardbar .bb-sep{width:1px;align-self:stretch;background:var(--line2)}
.boardbar .bb-chain{flex:none}
.boardbar .bb-chain.on b{color:var(--amber)}
.boardbar .grow{flex:1}
@media (max-width:1500px){ .boardbar .bb-i:first-child .bb-s{max-width:260px} }

/* 위쪽 — 내 정보만 */
.topbar.hud .hudop{flex:0 1 auto}
.hudop img{width:52px;height:52px}
.hudop .hs .lv{font-style:normal;color:var(--amber);font-weight:700}
.hudop .hbars{display:flex;gap:14px;margin-top:5px}
.hudop .hb{display:flex;align-items:center;gap:6px}
.hudop .hb .bar{width:120px;height:6px;margin:0}
.hudop .hb .bar.xp{width:90px;height:6px;margin:0}
.hudop .hn{font-size:11.5px;color:var(--ink2);font-family:var(--f-mono);white-space:nowrap}
.hudop .hn.bad{color:var(--red-ink,#e88)}
.topbar.hud .stat-strip{margin-left:auto}
/* 더 보기 — 메뉴 + 설정 */
.dockmore.open{display:flex;flex-direction:column;gap:10px}
.dockmore .dmtabs{display:grid;grid-template-columns:repeat(5,80px);gap:6px}
.dockmore .dmsys{border-top:1px solid var(--line2);padding-top:10px;display:flex;flex-direction:column;gap:8px}
.dockmore .dmhead{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--ink3)}
.dockmore .dmhead .mark{font-size:13px;color:var(--ink2)}
.dockmore .dmhead .mark em{color:var(--amber);font-style:normal}
.dockmore .dmhead .build{margin-left:auto;font-family:var(--f-mono)}
.dockmore .dmbtns{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dockmore .dmbtns .iconbtn{justify-content:flex-start;gap:6px;padding:8px 10px;width:100%}
.dockmore .dmbtns .iconbtn i{display:inline!important;font-style:normal;font-size:12px}
.topbar.hud .topbtns .iconbtn i{display:inline!important}
.hudop b{font-size:16.5px}
.bondlv{font-size:11px;padding:1px 6px;border-radius:4px;background:#1E2A36;color:#9FD3DE;margin-left:4px;vertical-align:2px}
.bondbar{width:100%;display:flex;flex-direction:column;gap:3px}
.sks.awake{font-size:11.5px;color:var(--ink3)}
.sks.awake.on{color:#E8C46A;font-weight:600}

/* 수집 도감 */
.cxtabs{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin-bottom:12px}
.cxtab{display:flex;flex-direction:column;gap:3px;padding:9px 10px;border-radius:8px;background:var(--panel2);border:0;cursor:pointer;text-align:left;color:var(--ink2)}
.cxtab.on{box-shadow:inset 0 0 0 1px var(--amber);color:var(--ink)}
.cxtab b{font-size:13px}.cxtab span{font-size:11.5px;font-family:var(--f-mono);color:var(--ink3)}
.cxtab .bar{height:4px}
.cxsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:12px}
.cxstep{display:flex;align-items:center;gap:8px;padding:8px 10px;border-radius:6px;background:var(--panel2);font-size:12.5px}
.cxstep b{color:var(--ink2)}.cxstep span{flex:1;color:var(--amber);font-family:var(--f-mono)}
.cxstep.ready{box-shadow:inset 0 0 0 1px var(--amber2)}.cxstep.done{opacity:.55}.cxstep i{font-style:normal;color:var(--grn)}
.cxgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:8px}
.cxgrid.title{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.cxcell{display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 6px;border-radius:8px;background:var(--panel2);text-align:center;min-width:0}
.cxcell .cxi{height:64px;display:flex;align-items:center;justify-content:center;width:100%}
.cxcell .cxi img{max-height:64px;max-width:100%;object-fit:contain}
.cxcell .cxi .ico{width:88px;height:48px;margin:0}
.cxcell span{font-size:11.5px;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.cxcell:not(.own) .cxi{filter:grayscale(1) brightness(.18)}
.cxcell:not(.own) span{color:var(--ink3)}
.cxcell.own{box-shadow:inset 0 0 0 1px var(--line2)}
/* 기간 한정 작전 */
.boardbar .bb-ev{background:rgba(200,80,70,.14);border:0;border-radius:6px;padding:3px 8px;cursor:pointer;color:inherit}
.boardbar .bb-ev b{color:#F08A6E}
.evd{margin:0 0 8px;color:var(--ink2);line-height:1.6}
.evrule{font-size:12px;color:var(--ink3);margin-bottom:10px}
.evpts{font-size:14px;color:var(--ink2);margin-bottom:10px}.evpts b{font-size:26px;color:var(--amber);font-family:var(--f-mono)}
.evsteps{display:flex;flex-direction:column;gap:6px}
.evstep{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:6px;background:var(--panel2)}
.evstep .at{width:70px;font-family:var(--f-mono);color:var(--ink2)}.evstep .rw{flex:1;color:var(--amber)}
.evstep.ready{box-shadow:inset 0 0 0 1px var(--amber2)}.evstep.done{opacity:.55}.evstep i{font-style:normal;color:var(--grn)}
.evtop{display:flex;flex-direction:column;gap:4px}.evtop div{display:flex;gap:10px;font-size:12.5px}
.evtop span{width:18px;color:var(--ink3)}.evtop em{margin-left:auto;font-style:normal;font-family:var(--f-mono);color:var(--amber)}

/* 장비 맨 위 — 칸이 늘어도(방호 계열·이계 동료) 틀 밖으로 삐져나오지 않게.
   양옆 칸을 절대 위치로 띄우던 것을 격자로 바꿨다. 틀이 내용만큼 늘어난다. */
.gdoll{display:grid;grid-template-columns:200px minmax(0,1fr) 200px;grid-template-rows:1fr auto;gap:12px 14px;padding:18px;min-height:0;align-items:start}
.gdoll .gl-l,.gdoll .gl-r{position:static;width:auto;grid-row:1 / span 2}
.gdoll .gl-l{grid-column:1}.gdoll .gl-r{grid-column:3}
.gdoll .gart{position:static;transform:none;grid-column:2;grid-row:1;width:100%;max-width:430px;justify-self:center;align-self:end}
.gdoll .skinbtns{position:static;transform:none;grid-column:2;grid-row:2;justify-self:center;align-self:start}
.gdoll{grid-template-rows:auto 1fr}
.gdoll .gart{align-self:start;margin-top:10px}
.gdoll .skinbtns{align-self:start}
.hudop .hrest{font-size:11px;font-weight:700;padding:1px 8px;border-radius:4px;background:#1E3325;color:#8FDBA0;box-shadow:inset 0 0 0 1px #3F6E4A;cursor:pointer;white-space:nowrap}
.hudop .hrest:hover{background:#27452F}
.qfilter{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px}
.qfb{border:0;background:var(--panel2);color:var(--ink2);padding:5px 11px;border-radius:999px;font-size:12px;cursor:pointer}
.qfb b{font-family:var(--f-mono);color:var(--ink3);margin-left:3px}
.qfb.on{box-shadow:inset 0 0 0 1px var(--amber);color:var(--amber)}
.qfb.hot b{color:var(--grn)}

/* ── 우편함 ── */
.mailbtn{position:relative}
.mailbtn img{width:16px;height:16px;object-fit:contain}
.mailbtn .cbadge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;
  background:var(--red);color:#fff;font:700 10px/17px var(--f-ui);text-align:center}
.mailmodal .panel-b{max-height:64vh;overflow:auto}
.mails{display:flex;flex-direction:column;gap:8px}
.mail{background:var(--panel2);border-left:3px solid transparent;border-radius:var(--r-sm);padding:9px 12px}
.mail.new{border-left-color:var(--ink2)}
.mail.gift{border-left-color:var(--amber)}
.mail .mh{display:flex;gap:8px;align-items:baseline}
.mail .mh b{flex:1;color:var(--ink)}
.mail .mk{font-size:10px;padding:1px 6px;border-radius:3px;background:var(--panel3);color:var(--ink2);white-space:nowrap}
.mail .ma{font-size:11px;color:var(--ink3);white-space:nowrap}
.mail p{margin:5px 0 0;font-size:12.5px;color:var(--ink2);line-height:1.55}
.mail .mf{display:flex;justify-content:space-between;align-items:center;margin-top:7px;gap:8px}
.mail .matt{color:var(--amber);font-size:12px;font-weight:600}

/* ── 이야기 작전 ── */
.scene{display:grid;grid-template-columns:220px 1fr;gap:20px;align-items:start}
.scene .snpc{width:220px;height:220px;object-fit:cover;border-radius:var(--r-sm);border:1px solid var(--panel3);background:var(--panel2)}
.scene .sname{display:inline-block;color:var(--amber);font-weight:700;font-size:15px;margin-bottom:8px}
.scene .sbody p{margin:0 0 9px;line-height:1.75;font-size:14px;color:var(--ink)}
.scene .sact{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px}
.scene .schoice{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:16px}
.scene .schoice .btn{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 14px;height:auto;text-align:left;white-space:normal}
.scene .schoice .btn span{font-size:11.5px;color:var(--ink3);font-weight:400}

/* ── 현상 수배 ── */
.bform{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:8px}
.bcard{display:grid;grid-template-columns:52px 1fr auto;gap:10px;align-items:center;background:var(--panel2);border-radius:var(--r-sm);padding:8px 10px;border:1px solid transparent}
.bcard img{width:52px;height:52px;object-fit:cover;border-radius:4px}
.bcard .bb{display:flex;flex-direction:column;gap:2px;min-width:0}
.bcard .br{display:flex;flex-direction:column;align-items:flex-end;gap:6px}
.bcard .bamt{color:var(--amber);font-weight:700;font-family:var(--f-mono,monospace)}
.bcard.taken{border-color:rgba(120,190,120,.35)}
.bcard.mine{border-color:rgba(214,166,72,.35)}

/* ── 회사 대항전 ── */
.lrew{display:flex;flex-wrap:wrap;gap:8px}
.lrew>div{background:var(--panel2);border-radius:var(--r-sm);padding:8px 12px;display:flex;gap:10px;align-items:baseline}
.lrew b{color:var(--amber)}
.lrew span{font-size:12.5px;color:var(--ink2)}
table.grid tr.me td{background:var(--amber-glow)}
.bform select,.bform input{width:auto;min-width:0;flex:none}
.bform select{min-width:180px}
table.grid tr.me td{color:var(--amber);font-weight:600}

/* 일반 적 얼굴 — 세력마다 병사 한 명. 문양 칸을 얼굴로 채운다 */
.hic.hface{overflow:visible;background:#1A1F22}
.hic.hface img{width:60px;height:60px;object-fit:cover;object-position:50% 12%;filter:none;border-radius:12px;background:radial-gradient(circle at 50% 35%,#343D43,#15191B)}
.hostile.dead .hic.hface img{filter:grayscale(1) brightness(.55)}

/* 기간 한정 작전 배너 */
.evmodal{overflow:hidden}
.evbanner{position:relative;height:190px;background:#111 center/cover no-repeat;display:flex;align-items:flex-end;padding:14px 18px}
.evbanner::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(10,12,13,.92))}
.evbanner b{position:relative;z-index:1;font-size:24px;letter-spacing:.04em;color:#fff;text-shadow:0 2px 8px #000}
.chatp .panel-h h3{white-space:nowrap;flex:none}
.chatp .panel-h{flex-wrap:wrap;row-gap:6px}
.chatp.compact .panel-h .iconbtn{padding:3px 6px}

/* ── 지역 풍경 — 계약 카드·전투 머리띠 배경 ── */
.crow.hasrg{background:linear-gradient(90deg,rgba(23,27,30,.97) 0%,rgba(23,27,30,.93) 45%,rgba(23,27,30,.72) 100%),var(--rg) center 60%/cover no-repeat}
.crow.hasrg:hover{background:linear-gradient(90deg,rgba(27,32,35,.95) 0%,rgba(27,32,35,.88) 45%,rgba(27,32,35,.62) 100%),var(--rg) center 60%/cover no-repeat}
.chead.hasrg{background:linear-gradient(180deg,rgba(15,18,20,.72),rgba(15,18,20,.9)),var(--rg) center 55%/cover no-repeat}

/* ── 로그인 배경 ── */
body:has(.authbg){background:linear-gradient(90deg,rgba(10,12,13,.35) 0%,rgba(10,12,13,.55) 40%,rgba(10,12,13,.88) 70%),url('/img/bg/login.jpg') center/cover no-repeat fixed}
.auth-wrap.authbg{justify-content:flex-end;padding-right:max(24px,8vw)}
.auth-wrap.authbg .auth-card{background:rgba(14,17,19,.86);border:1px solid var(--line);border-radius:14px;padding:28px 26px;backdrop-filter:blur(3px)}

/* ── 회사 문장 ── */
.coemb{width:40px;height:40px;object-fit:contain;vertical-align:middle;flex:none}
.coemb.sm{width:26px;height:26px}
.coemb.lg{width:84px;height:84px}
td.withico .coemb{margin-right:8px}
.cohead{display:flex;gap:14px;align-items:center;margin-bottom:10px}
.embs{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.emb{background:var(--panel2);border:2px solid transparent;border-radius:10px;padding:5px;cursor:pointer;line-height:0}
.emb:hover{border-color:var(--line)}
.emb.on{border-color:var(--amber);background:var(--amber-glow)}
.embpick{margin:0 0 12px}
.embpick summary{cursor:pointer;font-size:12.5px;color:var(--ink2);margin-bottom:8px}

/* ── 본부 ── */
.hqban{position:relative;height:250px;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(90deg,rgba(10,12,13,.82) 0%,rgba(10,12,13,.15) 32%,rgba(10,12,13,.15) 68%,rgba(10,12,13,.82) 100%),var(--hb) center/cover no-repeat;
  display:flex;justify-content:space-between;align-items:flex-end;padding:0 26px 22px}
.hqsay{display:flex;align-items:flex-end;gap:10px;max-width:52%}
.hqnpc{height:215px;width:auto;margin-bottom:-22px;filter:drop-shadow(0 6px 14px rgba(0,0,0,.6))}
.hqbub{background:rgba(14,17,19,.9);border:1px solid var(--line);border-left:3px solid var(--amber);border-radius:10px;padding:10px 14px;margin-bottom:26px}
.hqbub .hn{font-size:11px;color:var(--amber);letter-spacing:.06em}
.hqbub p{margin:4px 0 0;font-size:14px;line-height:1.6;color:var(--ink)}
.hqgo{display:flex;flex-direction:column;gap:8px;align-items:stretch;min-width:230px}
.hqgo .btn.big{font-size:17px;padding:14px 20px}
.hqgrid{display:grid;grid-template-columns:280px minmax(0,1fr) 340px;gap:14px;margin-top:14px;align-items:start}
.hqme{overflow:hidden}
.hqfig{position:relative;height:230px;background:radial-gradient(ellipse at 50% 70%,#2A3237,#15191B)}
.hqskin{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:225px;width:auto}
.hqpet{position:absolute;right:8px;bottom:6px;width:86px;height:86px;object-fit:contain;filter:drop-shadow(0 3px 8px rgba(0,0,0,.7))}
.hqcs{display:block;font-size:18px}
.hqco{display:flex;gap:8px;align-items:center;margin-top:8px;font-size:13px;color:var(--ink2)}
.hqhp{display:flex;justify-content:space-between;align-items:center;margin-top:6px;font-size:12px;color:var(--ink2)}
.hqmid{display:flex;flex-direction:column;gap:12px}
.htiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.htile{position:relative;display:grid;grid-template-columns:44px 1fr;grid-template-rows:auto auto auto;column-gap:10px;align-items:center;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px;cursor:pointer;color:var(--ink);min-height:92px;overflow:hidden}
.htile:hover{border-color:var(--ink3);background:var(--panel2)}
.htile.hot{border-color:rgba(214,166,72,.55)}
.htile.hot::after{content:'';position:absolute;top:10px;right:10px;width:8px;height:8px;border-radius:50%;background:var(--amber);box-shadow:0 0 8px var(--amber)}
.htile .ti{grid-row:1/4;width:44px;height:44px;object-fit:contain}
.htile .ti.face{object-fit:cover;border-radius:8px}
.htile .tt{font-size:11.5px;color:var(--ink3)}
.htile .tv{font-size:18px;color:var(--amber);line-height:1.25}
.htile .ts{font-size:11.5px;color:var(--ink2);line-height:1.4;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.htile.hasbg{grid-column:span 2;grid-template-columns:1fr;background:linear-gradient(90deg,rgba(14,17,19,.95) 0%,rgba(14,17,19,.55) 60%,rgba(14,17,19,.2)),var(--tb) center/cover no-repeat}

.crow.hasraid{min-height:120px;background:linear-gradient(90deg,rgba(23,27,30,.96) 0%,rgba(23,27,30,.82) 40%,rgba(23,27,30,.35) 100%),var(--rg) center 45%/cover no-repeat}
.crow.hasraid:hover{background:linear-gradient(90deg,rgba(27,32,35,.93) 0%,rgba(27,32,35,.75) 40%,rgba(27,32,35,.25) 100%),var(--rg) center 45%/cover no-repeat}

/* ── 거래소 ── */
.mkhead{display:flex;align-items:center;gap:16px;margin-bottom:12px;flex-wrap:wrap}
.mktabs{display:flex;gap:4px}
.mktab{background:none;border:0;padding:8px 16px;border-radius:8px;color:var(--ink2);font-size:14px;cursor:pointer}
.mktab:hover{background:var(--panel2)}
.mktab.on{background:var(--amber-glow);color:var(--amber);box-shadow:inset 0 0 0 1px rgba(224,166,60,.45)}
.mktab i{font-style:normal;background:var(--panel3);color:var(--ink);border-radius:9px;padding:0 6px;font-size:10.5px;margin-left:6px}
.mktab i.hot{background:var(--red);color:#fff}
.mktick{margin-left:auto;font-size:12px;color:var(--ink3);font-family:var(--f-mono)}
.mktick b{color:var(--ink2)} .mktick em{font-style:normal} .mktick .up{color:var(--grn)} .mktick .dn{color:var(--red-ink)}
.mkbody{display:grid;grid-template-columns:180px minmax(0,1fr) 360px;background:var(--panel);border:1px solid var(--line);border-radius:12px;min-height:640px}
.mkbody.sell{grid-template-columns:minmax(0,1fr) 380px}
.mkcats{border-right:1px solid var(--line);padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.mkcat{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border-radius:8px;color:var(--ink2);font-size:13.5px;background:none;border:0;cursor:pointer;text-align:left}
.mkcat:hover{background:var(--panel2)} .mkcat.on{background:var(--panel3);color:var(--ink)}
.mkcat span{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.mklbl{font-size:11px;color:var(--ink3);padding:14px 10px 6px;letter-spacing:.06em;border-top:1px solid var(--line);margin-top:10px}
.mkchk{display:flex;gap:8px;align-items:center;padding:6px 10px;font-size:12.5px;color:var(--ink2);background:none;border:0;cursor:pointer;text-align:left}
.mkchk i{width:14px;height:14px;border-radius:3px;border:1px solid var(--line2);flex:none}
.mkchk.on{color:var(--ink)} .mkchk.on i{background:var(--amber);border-color:var(--amber)}
.mklist{padding:12px 14px;min-width:0}
.mkbar{display:flex;gap:8px;margin-bottom:12px} .mkbar .searchbox{flex:1;margin:0} .mkbar select{width:auto;min-width:170px}
.mkgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:10px}
.mkcard{position:relative;display:block;text-align:left;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 12px;cursor:pointer;color:var(--ink)}
.mkcard:hover{border-color:var(--line2)} .mkcard.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.mktop{display:flex;gap:10px;align-items:center}
.mkic{width:64px;height:52px;flex:none;border-radius:6px;background:radial-gradient(circle,#343D43,#1A1F22);display:flex;align-items:center;justify-content:center}
.mkic.gun{width:88px}
.mkic img{max-width:90%;max-height:44px;object-fit:contain}
.mkt{min-width:0} .mkt b{font-size:13.5px;line-height:1.3;display:block}
.mkt .sub{font-size:11px;display:block;margin-top:2px} .mkt .chip{font-size:10px;padding:0 5px;margin-right:4px}
.enh{color:var(--amber);font-family:var(--f-mono);font-size:.88em;margin-left:4px}
.mklines{margin-top:7px;font-size:11.5px;line-height:1.5}
.mklines div::before{content:'◆ ';font-size:8px}
.mklines .r1{color:var(--grn-ink)} .mklines .r2{color:#7FB2DE} .mklines .r3{color:#B895EA} .mklines .r4{color:#E7AC42}
.mkft{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8px;border-top:1px solid var(--line);padding-top:7px}
.mkp{font-family:var(--f-mono);font-size:16px;color:var(--amber);font-weight:600}
.mkvs{font-size:10.5px;font-family:var(--f-mono);color:var(--ink3)}
.lo{color:var(--grn)!important} .hi{color:var(--red-ink)!important}
.mks{font-size:11px;color:var(--ink3)}
.mktag{position:absolute;top:8px;right:8px;font-size:10px;padding:1px 6px;border-radius:4px}
.mktag.new{background:rgba(84,168,122,.18);color:var(--grn)} .mktag.co{background:var(--amber-glow);color:var(--amber)}
.mkdet{border-left:1px solid var(--line);padding:16px;min-width:0}
.mkbig{height:140px;border-radius:10px;background:radial-gradient(circle,#343D43,#15191B);display:flex;align-items:center;justify-content:center}
.mkbig img{max-width:70%;max-height:110px;object-fit:contain} .mkbig.gun img{max-width:92%}
.mkh{margin:12px 0 2px;font-size:18px} .mkdet .sub{font-size:12px}
.mkst{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:10px}
.mkst div{background:var(--panel2);border-radius:6px;padding:6px 8px} .mkst span{display:block;font-size:10.5px;color:var(--ink3)}
.mkst b{font-family:var(--f-mono);font-size:13.5px} .mkst .up{color:var(--grn)} .mkst .dn{color:var(--red-ink)}
.mksec{font-size:11.5px;color:var(--ink3);margin:12px 0 5px;letter-spacing:.04em}
.mkrunes{display:flex;gap:6px} .mkrunes img{width:26px;height:26px}
.mkspark{background:var(--panel2);border-radius:8px;padding:8px 10px}
.mkspark svg{width:100%;height:46px;display:block}
.mkspark polyline{fill:none;stroke:var(--amber);stroke-width:2} .mkspark circle{fill:var(--amber)}
.mkspark line.mk{stroke:var(--red);stroke-dasharray:4 4;stroke-width:1.2}
.mkspark.empty{font-size:12px;color:var(--ink3)}
.mksr{display:flex;justify-content:space-between;font-size:11px;color:var(--ink2);font-family:var(--f-mono);margin-top:4px}
.mkbuy{margin-top:12px;background:var(--panel2);border:1px solid var(--line2);border-radius:10px;padding:10px 12px}
.mkbuy .row{display:flex;justify-content:space-between;font-size:12.5px;color:var(--ink2);margin:3px 0}
.mkbuy .row b{font-family:var(--f-mono);color:var(--ink)}
.mkbuy .btn.wide{margin-top:10px}
.mkwatch{display:flex;gap:6px;margin-top:8px} .mkwatch input{flex:1;min-width:0;width:auto}
.mkbuy .hint{margin-top:6px;font-size:11px}
.mkinp{width:100%;background:var(--bg);border:1px solid var(--amber);border-radius:8px;padding:9px 12px;font-family:var(--f-mono);font-size:19px;color:var(--ink)}
.mkinp.sm{font-size:14px;padding:6px 10px;width:120px} .mkinp.xs{font-size:12.5px;padding:4px 8px;width:110px;border-color:var(--line2)}
.mkqk{display:flex;gap:6px;margin-top:6px} .mkqk .btn{flex:1} .mkqk .btn.on{color:var(--amber);border-color:var(--amber2)}
.mkinv{display:grid;grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:8px}
.mkslot{position:relative;background:var(--panel2);border:1px solid var(--line);border-radius:8px;height:100px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;font-size:11px;color:var(--ink2);cursor:pointer;padding:6px}
.mkslot:hover{border-color:var(--line2)} .mkslot.on{border-color:var(--amber);background:var(--amber-glow)}
.mkslot img{max-width:84%;max-height:46px;object-fit:contain}
.mkslot .n{text-align:center;line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%}
.mkslot .q{position:absolute;right:6px;top:4px;font-family:var(--f-mono);color:var(--ink)}
.mkslot .e{position:absolute;left:6px;top:4px;font-family:var(--f-mono);color:var(--amber)}
.mkslot .w{font-size:9.5px;color:var(--ink3)} .mkslot .w.r3{color:#B895EA} .mkslot .w.r2{color:#7FB2DE}
.mkslot.eq{opacity:.45}
.mkhist{width:100%;border-collapse:collapse;font-size:12px} .mkhist td{padding:5px 4px;border-bottom:1px solid var(--line);color:var(--ink2);font-family:var(--f-mono)}
.mkpad{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:14px 16px;min-height:400px}
.mkrow{display:flex;gap:12px;align-items:center;background:var(--panel2);border-radius:8px;padding:8px 12px;margin-bottom:6px}
.mkrow img{width:44px;height:36px;object-fit:contain} .mkrow img.gun{width:70px}
.mkrow .t{flex:1;min-width:0} .mkrow .t b{display:block;font-size:13.5px} .mkrow .t .sub{font-size:11.5px}
.mkcols{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:10px}
.mkh2{display:flex;gap:10px;align-items:baseline;padding:6px 2px;border-bottom:1px solid var(--line);font-size:12.5px}
.mkh2 span:first-child{flex:1} .mkh2 b{font-family:var(--f-mono)}

.mktag.me{background:rgba(91,144,184,.2);color:#8FC0E6}
.mkcard.mine{border-style:dashed}
.mkmine{margin-top:10px;font-size:12px;color:#8FC0E6;background:rgba(91,144,184,.12);border-radius:6px;padding:7px 10px}
/* 지휘관은 얼굴 칸에도 지휘관 얼굴 — 일반 병사 얼굴로 나와서 누가 지휘관인지 안 보였다 */
.hic.hboss{box-shadow:0 0 0 2px var(--red),0 0 10px rgba(212,88,74,.45);border-radius:12px}
.hic.hboss img{object-position:50% 18%}
/* 본부 — 1440×900 한 화면에 들어오게 (도크 96px 을 빼면 본문이 740px 남짓) */
.hqban{height:196px;padding-bottom:16px}
.hqnpc{height:178px;margin-bottom:-16px}
.hqbub{margin-bottom:14px}
.hqgo .btn.big{padding:11px 18px;font-size:16px}
.hqgo{gap:6px}
.hqgrid{margin-top:12px;gap:12px}
.hqfig{height:176px}
.hqskin{height:172px}
.hqpet{width:70px;height:70px}
.hqme .panel-b{padding:10px 14px}
.hqme .kv{margin-top:6px!important}
.hqme .btn.wide{margin-top:8px!important}
.hqmid{gap:10px}
.hqmid .nextstep .panel-h{padding-block:6px}
.hqmid .nextstep .panel-b{padding-block:8px 10px}
.hqmid .nextstep .ns-b{font-size:12.5px}
.htiles{gap:8px}
.htile{min-height:78px;padding:9px 12px}
.htile .ti{width:38px;height:38px}
.htile .tv{font-size:16px}
.hqside .log{max-height:420px!important}
.htiles{grid-template-columns:repeat(4,minmax(0,1fr))}
.htile{grid-template-columns:34px 1fr;column-gap:8px;padding:8px 10px;min-height:74px}
.htile .ti{width:34px;height:34px}
.htile .ts{font-size:11px;-webkit-line-clamp:1}
.htile.hasbg{grid-column:span 2}
.hqmid .nextstep .ns-t{font-size:14px}
.hqmid .nextstep .hn{display:none}

.htiles{grid-auto-flow:row dense}
.stchs{display:flex;gap:6px;margin-bottom:10px;flex-wrap:wrap}
.stch{background:var(--panel2);border:1px solid var(--line);border-radius:8px;padding:6px 12px;color:var(--ink2);font-size:13px;cursor:pointer}
.stch.on{border-color:var(--amber);color:var(--amber);background:var(--amber-glow)}
.stch.done{color:var(--grn-ink)}
.stch:disabled{opacity:.45;cursor:default}
/* 운영 — 오류 · 거래 감시 */
.errs{display:flex;flex-direction:column;gap:6px}
.err{background:var(--panel2);border:1px solid var(--line);border-left:3px solid var(--red);border-radius:8px}
.err.ok{border-left-color:var(--line2);opacity:.7}
.err summary{display:flex;gap:10px;align-items:center;padding:8px 12px;cursor:pointer;list-style:none;flex-wrap:wrap}
.err summary::-webkit-details-marker{display:none}
.err .et{font-family:var(--f-mono);font-size:11.5px;color:var(--red-ink)}
.err .er{font-family:var(--f-mono);font-size:11.5px;color:var(--ink3)}
.err summary b{flex:1;min-width:200px;font-weight:500;font-size:13px}
.err .ec{font-family:var(--f-mono);color:var(--amber)} .err .ea{font-size:11.5px;color:var(--ink3)}
.err .eb{padding:0 12px 10px}
.err pre{margin:6px 0 0;font-size:11px;line-height:1.5;background:var(--bg);border-radius:6px;padding:8px;overflow-x:auto;color:var(--ink2);white-space:pre}
.atiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
table.grid tr.flag td{background:rgba(212,88,74,.07)}
.chip.warn{border-color:#7A5A22;color:var(--amber)}
.chip.bad{border-color:var(--red2);color:var(--red-ink)}
.err summary b{font-family:var(--f-ui);color:var(--ink)}
.admmkic{width:26px;height:26px;object-fit:contain;vertical-align:middle;margin-right:6px}

/* ============================================================
   실시간 띠 — 긴급 의뢰 · 전역 지휘관 · 소식
   ============================================================ */
.livestrip{display:flex;align-items:stretch;gap:8px;margin-bottom:10px;min-height:34px}
.livestrip > button{display:flex;align-items:center;gap:8px;padding:5px 12px;border-radius:var(--r);cursor:pointer;
  font:inherit;font-size:12.5px;color:var(--ink);white-space:nowrap;flex:none}
.ls-urg{background:linear-gradient(90deg,#3A0E0B,#241012);border:1px solid #9A2A22;animation:urgPulse 1.8s ease-in-out infinite}
.ls-urg b{background:#D8342B;color:#fff;border-radius:3px;padding:0 6px;font-size:11.5px;letter-spacing:.05em}
@keyframes urgPulse{0%,100%{box-shadow:0 0 0 0 rgba(216,52,43,.0)}50%{box-shadow:0 0 0 3px rgba(216,52,43,.28)}}
.ls-wb{background:linear-gradient(90deg,#2A1E18,#1A1614);border:1px solid #6A4A30}
.ls-wb img{width:24px;height:24px;border-radius:50%;object-fit:cover;border:1px solid #FF8A3C}
.ls-wb b{color:#FFB678}
.wbbar{display:inline-block;width:90px;height:7px;border-radius:4px;background:#3A2A22;overflow:hidden}
.wbbar i{display:block;height:100%;background:linear-gradient(90deg,#FF5A2C,#FFB04A);transition:width .8s ease}
.wbn{font-family:var(--f-mono);font-size:12px;color:var(--ink2)}
.cdw{font-family:var(--f-mono);font-size:12px;color:var(--ink2)}
.ticker{flex:1;min-width:0;overflow:hidden;position:relative;border-radius:var(--r);background:var(--panel);border:1px solid var(--line);
  display:flex;align-items:center;mask-image:linear-gradient(90deg,transparent,#000 24px,#000 calc(100% - 24px),transparent)}
.tk-track{display:flex;gap:34px;white-space:nowrap;padding-left:14px;animation:tkRoll var(--dur,40s) linear infinite}
.ticker:hover .tk-track{animation-play-state:paused}
@keyframes tkRoll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.tk{font-size:12.5px;color:var(--ink2);display:inline-flex;align-items:center;gap:6px}
.tk i{font-style:normal;color:var(--amber);font-size:11px}
.tk em{font-style:normal;color:var(--ink3);font-size:11px}
.tk.k-urgent i{color:#FF6A5A} .tk.k-wboss i{color:#FF8A3C} .tk.k-auction i{color:#FFD76A} .tk.k-enh i{color:#FFB26A}
.tk.k-boss i{color:#E57A6E} .tk.k-record i{color:#9CC3E0} .tk.k-story i{color:#C9B6F0} .tk.k-league i{color:#F2CF6A}
.tk.new{color:var(--ink);font-weight:700}
.tk-empty{font-size:12px;color:var(--ink3);padding:0 12px}
@media (prefers-reduced-motion:reduce){.tk-track{animation:none;padding-left:12px}.ls-urg{animation:none}}

/* 단추 달린 알림 */
.toast.act{display:flex;align-items:center;gap:10px}
.toast.act span{flex:1}
.toast.warn{border-left-color:#D8342B}

/* 계약 카드 — 긴급 · 전역 지휘관 · 역할 */
.crow.urgent{box-shadow:inset 3px 0 0 #D8342B, 0 0 0 1px rgba(216,52,43,.45)}
.crow.wboss{box-shadow:inset 3px 0 0 #FF8A3C, 0 0 0 1px rgba(255,138,60,.4)}
.cchip.urg{background:rgba(216,52,43,.22);color:#FF8A7E}
.cchip.wbc{background:rgba(255,138,60,.2);color:#FFB678}
.cchip.role{background:rgba(84,168,122,.18);color:#8FD8A8}

/* 전역 지휘관 판 */
.wbpanel{overflow:hidden}
.wbhead{position:relative;display:flex;gap:16px;align-items:center;padding:16px;
  background:linear-gradient(90deg,rgba(14,17,19,.94) 30%,rgba(14,17,19,.6)),var(--rg) center/cover}
.wbface{width:104px;height:104px;border-radius:50%;object-fit:cover;border:2px solid #FF8A3C;box-shadow:0 0 22px rgba(255,120,40,.35);flex:none}
.wbt{flex:1;min-width:0;display:flex;flex-direction:column;gap:4px}
.wbt .k{font-size:11.5px;color:#FFB678;letter-spacing:.06em}
.wbt b{font-family:var(--f-disp);font-weight:400;font-size:26px;line-height:1.1}
.wbhp{position:relative;height:22px;border-radius:5px;background:#2A201C;border:1px solid #5A3A28;overflow:hidden;margin-top:6px}
.wbhp i{position:absolute;left:0;top:0;bottom:0;background:linear-gradient(90deg,#C8321E,#FF7A2C,#FFB04A);transition:width .9s ease}
.wbhp span{position:relative;display:block;text-align:center;font-family:var(--f-mono);font-size:12.5px;line-height:22px;text-shadow:0 1px 2px #000}
.wbmeta{display:flex;gap:14px;flex-wrap:wrap;font-size:12.5px;color:var(--ink2)}
.wbgo{display:flex;flex-direction:column;gap:6px;align-items:stretch;width:190px;flex:none}
.wbtop{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:6px}
.wbtop > div{display:flex;gap:8px;align-items:center;padding:6px 10px;background:var(--panel2);border-radius:var(--r-sm);font-size:13px}
.wbtop > div.me{box-shadow:inset 0 0 0 1px var(--amber)}
.wbtop .rk{font-family:var(--f-mono);color:var(--amber);width:18px}
.wbtop .dm{margin-left:auto;font-family:var(--f-mono)} .wbtop .fg{color:var(--ink3);font-size:11.5px}
.wbpanel.ended .panel-b{opacity:.85}
.wbgot{display:flex;align-items:center;gap:8px}
.wbgot img{width:34px;height:34px;border-radius:50%;object-fit:cover}

/* 경매 */
.mkcard.auc{box-shadow:inset 0 0 0 1px rgba(255,215,106,.25)}
.mkcard.auc.lead{box-shadow:inset 0 0 0 1px var(--grn)}
.mktag.lead{background:rgba(84,168,122,.25);color:#8FD8A8}
.aucleft{font-family:var(--f-mono);font-size:12px;color:var(--ink2)}

/* 대항전 시즌 · 우승 문장 */
.coembw{position:relative;display:inline-flex;flex:none}
.coembw.crown img{border-radius:50%;box-shadow:0 0 0 2px #E0B84A,0 0 10px rgba(224,184,74,.45)}
.coembw i{position:absolute;right:-6px;bottom:-4px;font-style:normal;font-size:10px;line-height:1;padding:1px 3px;border-radius:6px;
  background:#E0B84A;color:#2A1E08;font-weight:700}
.lseason .grid td.amber{color:var(--amber)}

/* 작전 기록 · 다시 보기 */
.rplist{display:flex;flex-direction:column;gap:5px}
.rprow{display:grid;grid-template-columns:52px 1fr auto;grid-template-rows:auto auto;column-gap:10px;align-items:center;text-align:left;
  padding:7px 10px;border-radius:var(--r-sm);background:var(--panel2);border:1px solid var(--line);color:var(--ink);font:inherit;cursor:pointer}
.rprow:hover{border-color:var(--line2)}
.rprow .rpres{grid-row:1 / span 2;font-size:12px;font-weight:700;text-align:center;border-radius:3px;padding:2px 0}
.rprow.win .rpres{background:rgba(84,168,122,.2);color:#8FD8A8} .rprow.lose .rpres{background:rgba(212,88,74,.2);color:#E59A90}
.rprow .sub{font-size:11.5px;color:var(--ink3)}
.rpmodal{max-width:980px;width:96vw}
.rpctl{display:flex;align-items:center;gap:6px;padding:10px 14px;border-bottom:1px solid var(--line)}
.rpctl input[type=range]{flex:1;min-width:120px}
.rplbl{font-family:var(--f-mono);font-size:13px}
.rpbody{display:grid;grid-template-columns:300px 1fr;gap:12px;padding:12px 14px;max-height:62vh}
.rpside{overflow:auto;display:flex;flex-direction:column;gap:5px}
.rpu{display:grid;grid-template-columns:1fr 90px 64px;gap:6px;align-items:center;font-size:12.5px}
.rpu b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.rpu span:last-child{font-family:var(--f-mono);font-size:11.5px;color:var(--ink2);text-align:right}
.rpu .bar{height:6px}
.rpu .bar.en i{background:var(--red)}
.rpu.down,.rpu.dead{opacity:.45}
.rpu.boss b{color:#FFB678}
.rplog{overflow:auto;background:var(--panel2);border-radius:var(--r-sm);padding:8px 10px;font-size:13px;display:flex;flex-direction:column;gap:3px}
.rplog .ln.good{color:#9FD2A8} .rplog .ln.bad,.rplog .ln.crit{color:#E59A90} .rplog .ln.warn{color:#E8C27A}
.rplog .ln.head{color:var(--amber);font-weight:700;margin-top:4px} .rplog .ln.sys{color:var(--ink2)}
.rpfoot{display:flex;gap:14px;flex-wrap:wrap;padding:10px 14px;border-top:1px solid var(--line);font-size:12.5px;color:var(--ink2)}
.rpfoot .grow{flex:1}


/* 운영 도구 */
.opsgrid{display:grid;grid-template-columns:minmax(380px,1fr) minmax(420px,1.2fr);gap:12px;align-items:start}
.tunelist{display:flex;flex-direction:column;gap:4px}
.tunerow{display:grid;grid-template-columns:1fr 110px 90px 64px;gap:8px;align-items:center;font-size:13px;padding:4px 6px;border-radius:var(--r-sm)}
.tunerow.chg{background:rgba(224,166,60,.08);box-shadow:inset 2px 0 0 var(--amber)}
.tunerow .tn em{display:block;font-style:normal;font-size:11px;color:var(--ink3)}
.tunerow input{width:100%}
.tunerow .td{font-size:11.5px;color:var(--ink3);font-family:var(--f-mono)}
.statgrid td,.statgrid th{padding:4px 6px;font-size:12px}
.statgrid tr.dim td{opacity:.45}
.dbbig,.dbrows{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:12.5px;color:var(--ink2)}
.dbbig{margin-bottom:6px} .dbbig b{color:var(--amber)} .dbrows b{color:var(--ink)}
.bklist{display:flex;flex-direction:column;gap:2px;font-size:12px;max-height:160px;overflow:auto}
.bklist > div{display:grid;grid-template-columns:1fr 70px 80px;gap:8px}
.notirow{display:flex;gap:10px;align-items:flex-start;padding:8px 4px;border-bottom:1px solid var(--line);cursor:pointer}
.notirow input{margin-top:4px}
.notirow b{display:block;font-size:14px} .notirow em{font-style:normal;font-size:12px;color:var(--ink3)}
.livestrip .grow{flex:1}

.wbt .wbtip{color:#FFD7A8}
.champ{font-style:normal;color:#F2CF6A;margin-right:4px;text-shadow:0 0 6px rgba(242,207,106,.6)}
.champtag{margin-left:8px;font-size:11.5px;color:#2A1E08;background:linear-gradient(#F5DE92,#C9A24A);border-radius:3px;padding:0 6px;font-weight:700}

/* ── 동시 명령 ── */
.planbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:8px 10px;margin-bottom:8px;
  border:1px dashed var(--amber2);border-radius:var(--r-sm);background:rgba(224,166,60,.05)}
.planbox.ready{border-style:solid;border-color:var(--line2);background:transparent;opacity:.85}
.planbox .pk{font-size:12px;color:var(--ink3);letter-spacing:.04em}
.planbox .pl{display:flex;gap:6px;flex-wrap:wrap;min-width:0}
.planbox .po{font-style:normal;font-size:13px;padding:3px 8px;border:1px solid var(--line2);border-radius:999px;color:var(--ink)}
.planbox .po em{font-style:normal;margin-left:6px;color:var(--amber);font-size:11px}
.planbox .pe{font-style:normal;font-size:13px;color:var(--ink3)}
.planbox .grow{flex:1}
.sqplan{font-size:12px;color:var(--ink3);margin:4px 0 2px;display:flex;gap:6px;align-items:baseline;min-width:0}
.sqplan b{font-weight:600;color:var(--amber);flex:none}
.sqplan.ok b{color:var(--ok-ink, #7FB77E)}
.sqplan span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip.intent{border-color:var(--red2);color:var(--red)}
.chip.intent.me{background:rgba(212,88,74,.14);font-weight:600}
.chip.intent.rl{border-color:var(--line2);color:var(--ink3)}
.turnbar.plan.mine{border-style:dashed}

/* ── 레이드 개편 ── */
.cchip.elite{border-color:var(--red2);color:var(--red);font-weight:600}
.cchip.wk1{border-color:var(--amber2);color:var(--amber)}
.cchip.done{border-color:var(--line2);color:var(--ink3)}
.rstages{margin:8px 0 6px;padding:0;list-style:none;display:grid;gap:4px}
.rstages li{display:flex;gap:10px;align-items:baseline;font-size:13px;padding:5px 8px;border-left:2px solid var(--line2);background:rgba(255,255,255,.015)}
.rstages li b{flex:none;font-weight:600;color:var(--ink)}
.rstages li span{color:var(--ink2)}
.rstages li:last-child{border-left-color:var(--red2)}
.telebar{display:flex;flex-direction:column;gap:3px;padding:8px 11px;margin-bottom:8px;border:1px solid var(--red2);
  border-radius:var(--r-sm);background:rgba(212,88,74,.08)}
.telebar b{color:var(--red);font-size:14px}
.telebar span{color:var(--ink2);font-size:13px}
.telebar.me{background:rgba(212,88,74,.16);border-color:var(--red)}
.rolel{font-size:12px;color:var(--ink3);margin:-2px 0 8px}
.chip.intent.tele{border-color:var(--red);color:var(--red);font-weight:600}
.chip.intent.sig{border-color:var(--amber2);color:var(--amber)}
.act.obj{border-color:var(--amber2)}
.dpay .wk1{color:var(--amber);font-size:12.5px}

/* ── 작전 안내서 · 새 소식 · 더 보기 묶음 ── */
.manual .mgrid{display:grid;grid-template-columns:200px 1fr;gap:18px}
.manual .mnav{display:flex;flex-direction:column;gap:4px}
.manual .mnav button{text-align:left;padding:8px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:transparent;color:var(--ink2);font:inherit;font-size:14px;cursor:pointer}
.manual .mnav button.on{border-color:var(--amber2);color:var(--amber);background:rgba(224,166,60,.06)}
.manual .mbody h4{margin:0 0 10px;font-size:17px;color:var(--ink)}
.manual .mbody p,.manual .mbody li{font-size:14px;line-height:1.7;color:var(--ink2)}
.manual .mbody b{color:var(--ink)}
.manual .mbody ul{padding-left:18px;margin:6px 0 12px}
.intro .tour-f{display:flex;gap:8px;align-items:center;margin-top:14px}
.intro .tour-f .grow{flex:1}
.dockmore .dmg{margin-bottom:8px}
.dockmore .dmgl{display:block;font-size:11px;letter-spacing:.08em;color:var(--ink3);margin:2px 0 4px 2px}
/* 전투 아래쪽 칸이 너무 높아져 적 목록을 가렸다 — 예고 띠·명령 칸을 한 줄로 */
.telebar{flex-direction:row;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:6px 10px;margin-bottom:6px}
.telebar b{font-size:13.5px}
.telebar span{font-size:12.5px}
.rolel{margin:-1px 0 6px;font-size:11.5px}
.planbox{padding:5px 8px;margin-bottom:6px}
.sqplan span{white-space:normal;overflow:visible}

/* ── 전투 행동 칸 접기 ── */
.actpanel.v2{position:relative}
.actpanel.v2 .dockmin{position:absolute;top:-13px;right:14px;z-index:3;padding:2px 10px;font-size:11.5px;background:var(--panel2);border:1px solid var(--line2)}
.actpanel.v2.min{padding:10px 12px}
.aquick{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.aquick .qmag{font-size:12px;color:var(--ink2);margin-right:4px;white-space:nowrap}
.aquick .grow{flex:1}
.aquick .act.mini{height:38px;padding:4px 10px;display:inline-flex;align-items:center;gap:6px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font:inherit;font-size:13px;cursor:pointer}
.aquick .act.mini .apc{position:static}
.aquick .act.mini[disabled]{opacity:.4;cursor:default}
.aquick .act.mini.fire{border-color:var(--red2)}
.aquick .act.mini.on{border-color:var(--blu-line, #3d6a8a)}
.aquick .act.mini.obj{border-color:var(--amber2)}
.aquick .endturn{width:auto;min-width:220px;margin:0}

/* ── 묶음 탭 ── */
.subtabs{display:flex;gap:4px;padding:0 16px;border-bottom:1px solid var(--line);background:rgba(255,255,255,.012)}
.subtabs .stab{position:relative;padding:10px 14px;border:0;border-bottom:2px solid transparent;background:transparent;color:var(--ink2);font:inherit;font-size:14px;cursor:pointer}
.subtabs .stab:hover{color:var(--ink)}
.subtabs .stab.on{color:var(--amber);border-bottom-color:var(--amber)}
.subtabs .stab .dot{position:static;display:inline-block;margin-left:6px;vertical-align:middle}

/* ── 출격 전 점검 · 받을 것 ── */
.prepbar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:9px 12px;margin-bottom:12px;border:1px solid var(--amber2);border-radius:var(--r-sm);background:rgba(224,166,60,.06)}
.prepbar.bad{border-color:var(--red2);background:rgba(212,88,74,.07)}
.prepbar > b{color:var(--amber);font-size:13.5px}
.prepbar.bad > b{color:var(--red)}
.prepbar .pi{display:flex;gap:6px;flex-wrap:wrap}
.prepbar .pi i{font-style:normal;font-size:12.5px;color:var(--ink2);padding:2px 8px;border:1px solid var(--line2);border-radius:999px}
.prepbar .pi i.bad{color:var(--red);border-color:var(--red2)}
.prepbar .grow{flex:1}
.todo .todol{list-style:none;margin:6px 0 10px;padding:0;display:grid;gap:5px}
.todo .todol li{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);font-size:14px;color:var(--ink)}
.todo .todol li em{font-style:normal;color:var(--ink3);font-size:12.5px}

/* ── 단축키 · 교전 기록 거르기 · 게시판 거르기 · 다시 출격 ── */
.act .akey{position:absolute;top:4px;left:5px;font:600 10px var(--f-mono);color:var(--ink3);background:none;border:0;padding:0}
.aquick .act.mini .akey{position:static;font:600 10px var(--f-mono);color:var(--ink3);margin-left:4px}
.hostile{position:relative}
.hostile .hkey{position:absolute;top:6px;left:8px;z-index:2;min-width:18px;height:18px;line-height:18px;text-align:center;
  font:700 11px var(--f-mono);color:var(--ink);background:rgba(0,0,0,.55);border:1px solid var(--line2);border-radius:4px}
.hostile.sel .hkey{border-color:var(--red);color:var(--red)}
.logf{display:flex;gap:4px;padding:6px 10px;border-bottom:1px solid var(--line)}
.logf button{padding:3px 9px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink2);font:inherit;font-size:12px;cursor:pointer}
.logf button.on{border-color:var(--amber2);color:var(--amber)}
.bfbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:0 0 10px;padding:7px 10px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.015)}
.bfbar select{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:6px;padding:4px 8px;font:inherit;font-size:13px}
.bfbar .bfchk{font-size:13px;color:var(--ink2);display:flex;align-items:center;gap:5px}
.bfbar .grow{flex:1}
.bfbar .dim{font-size:12.5px}
.againrow{display:flex;gap:10px;margin-top:18px}
.againrow .btn{flex:1}

/* ── 설정 한 창 · 표시 · 모집 방 ── */
.setmodal .panel-h{gap:10px}
.settabs{display:flex;gap:4px;margin-left:12px}
.settabs button{padding:4px 12px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink2);font:inherit;font-size:13px;cursor:pointer}
.settabs button.on{border-color:var(--amber2);color:var(--amber)}
.fsbtns{display:flex;gap:4px}
html[data-fs="1"] body{zoom:1.08}
html[data-fs="2"] body{zoom:1.16}
html.dense-log .logpanel .log .e{padding-top:1px;padding-bottom:1px;line-height:1.35;font-size:12.5px}
.lobbyg td .sub{font-size:11.5px;color:var(--ink3)}
.lobbyg .cchip.role{font-size:11px;padding:1px 6px}
.lobbyg .ok{color:var(--ok-ink, #7FB77E);font-weight:600}
.lobbyg td.bad{color:var(--red)}
.bfbar.inhead{margin:0 0 0 auto;padding:0;border:0;background:none;gap:6px;flex-wrap:nowrap}
.bfbar.inhead select{padding:3px 6px;font-size:12.5px}
.bfbar.inhead .bfchk{font-size:12.5px;white-space:nowrap}
.bfbar.inhead .dim{white-space:nowrap}

/* ── 명중률 풀어 보기 · 라운드 요약 · 위험 경고 ── */
.hostile .odds{position:relative}
.hostile .odds .why{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:20;width:270px;padding:9px 11px;
  background:var(--panel);border:1px solid var(--line2);border-radius:var(--r-sm);box-shadow:0 8px 24px rgba(0,0,0,.5);text-align:left}
.hostile:hover .odds .why{display:block}
.hostile .odds .why b{display:block;font-size:12px;color:var(--ink2);margin-bottom:5px;font-weight:600}
.hostile .odds .why .wl{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink2);padding:1px 0}
.hostile .odds .why .wl em{font-style:normal;font-family:var(--f-mono);color:var(--ink)}
.hostile .odds .why .wl em.neg{color:var(--red)}
.hostile .odds .why .wl em.pos{color:var(--grn, #7FB77E)}
.hostile .odds .why .wl.tot{border-top:1px solid var(--line);margin-top:4px;padding-top:4px;color:var(--ink)}
.log .e.sum{color:var(--amber);border-left:2px solid var(--amber2);padding-left:6px;margin:3px 0;font-weight:600}
.sq.danger{animation:sqdanger 1.2s ease-in-out infinite;border-color:var(--red)!important}
@keyframes sqdanger{0%,100%{box-shadow:0 0 0 0 rgba(212,88,74,.0)}50%{box-shadow:0 0 0 3px rgba(212,88,74,.35)}}

/* ── 장비 세트 · 창고 정리 · 강화 목표 ── */
.lolist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;margin-bottom:12px}
.lolist .loset{padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);background:rgba(255,255,255,.015);display:flex;flex-direction:column;gap:6px}
.lolist .loset.on{border-color:var(--amber2)}
.lolist .loset.blank{border-style:dashed;opacity:.85}
.lolist .lh{display:flex;align-items:center;gap:8px}
.lolist .sub{font-size:12.5px;color:var(--ink2);line-height:1.5}
.lolist .la{display:flex;gap:6px;margin-top:auto}
.wbar{display:flex;align-items:center;gap:8px;margin:0 0 8px}
.wbar input{background:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:6px;padding:5px 9px;font:inherit;font-size:13px;width:200px}
.wbar select{background-color:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:6px;padding:4px 24px 4px 8px;font:inherit;font-size:13px}
.wbar .grow{flex:1}
tr.picked td{background:rgba(212,88,74,.07)}
.lockbtn{margin-left:6px;padding:0 7px;height:18px;border:1px solid var(--line2);border-radius:999px;background:transparent;color:var(--ink3);font:inherit;font-size:11px;cursor:pointer;vertical-align:middle}
.lockbtn.on{border-color:var(--amber2);color:var(--amber)}
.enhto{display:flex;align-items:center;gap:8px;margin-top:8px;padding-top:8px;border-top:1px dashed var(--line)}
.enhto select{background-color:var(--panel2);color:var(--ink);border:1px solid var(--line2);border-radius:6px;padding:3px 24px 3px 6px;font:inherit;font-size:13px}
.enhto .sub{font-size:12.5px;color:var(--ink2)}
.enhto .grow{flex:1}
.cmpd{display:block;font-size:11.5px;margin-top:2px}
.cmpd .up{color:var(--grn, #7FB77E)} .cmpd .dn{color:var(--red)}
.cchip.help{border-color:#3f6e4e;color:#8fcf9e}
.cchip.help.h-bounty{border-color:var(--amber2);color:var(--amber)}
.qpin .qp{padding:6px 0;border-bottom:1px dashed var(--line)}
.qpin .qp:last-child{border-bottom:0}
.qpin .qp b{font-size:13.5px}
.qpin .qpl{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;color:var(--ink2);margin-top:3px}
.qpin .qpl.ok{color:var(--grn, #7FB77E)}
.qpin .qpl em{font-style:normal;font-family:var(--f-mono)}
.qpin.mini{margin-top:10px}

/* ── 무전 공유 · 멘션 · 즐겨찾기 · 초대 · 검색 · 돈 기록 ── */
.cshare{display:inline-block;margin:0 3px;padding:1px 8px;border:1px solid var(--amber2);border-radius:999px;background:rgba(224,166,60,.08);color:var(--amber);font:inherit;font-size:12px;cursor:pointer}
.cshare.gone{border-color:var(--line2);color:var(--ink3)}
.cmen{color:#9ec3e6;font-weight:600}
.cmen.me{color:var(--amber)}
.cm.tome{background:rgba(224,166,60,.07);border-left:2px solid var(--amber2)}
.favlist{display:grid;gap:4px;margin-bottom:12px}
.fav{display:flex;align-items:center;gap:8px;padding:6px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.fav .od{width:8px;height:8px;border-radius:50%;background:var(--ink3);flex:none}
.fav.on .od{background:#6fcf7f;box-shadow:0 0 6px #6fcf7f}
.fav .sub{font-size:12px;color:var(--ink3)}
.fav .grow{flex:1}
.invcard{position:fixed;right:18px;bottom:110px;z-index:60;width:280px;padding:12px 14px;border:1px solid var(--amber2);border-radius:var(--r-sm);
  background:var(--panel);box-shadow:0 10px 28px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:5px}
.invcard b{color:var(--amber);font-size:14px}
.invcard span{font-size:12.5px;color:var(--ink2)}
.invcard .ia{display:flex;gap:6px;margin-top:4px}
.gsearch{padding:12px}
.gsearch input{width:100%;box-sizing:border-box;padding:10px 12px;font:inherit;font-size:15px;background:var(--panel2);color:var(--ink);border:1px solid var(--amber2);border-radius:var(--r-sm)}
.gsearch .gsl{margin-top:8px;display:grid;gap:3px;max-height:60vh;overflow:auto}
.gsearch .gsr{display:flex;align-items:baseline;gap:10px;text-align:left;padding:7px 10px;border:1px solid transparent;border-radius:6px;background:transparent;color:var(--ink);font:inherit;cursor:pointer}
.gsearch .gsr.on,.gsearch .gsr:hover{border-color:var(--amber2);background:rgba(224,166,60,.06)}
.gsearch .gt{flex:none;width:92px;font-size:11.5px;color:var(--ink3)}
.gsearch .gs{font-size:12px;color:var(--ink3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ledsum{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:12px}
.ledsum div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:4px}
.ledsum span{font-size:12px;color:var(--ink3)}
.ledsum b{font-size:18px;font-family:var(--f-mono)}
.ledg .up{color:#7FB77E}.ledg .dn{color:var(--red)}

/* ── 화기 특성 ── */
:root{--tal:#6FC6C1;--tal2:rgba(111,198,193,.35)}
.talc{display:inline-flex;align-items:center;gap:3px;font-size:11.5px;padding:1px 7px;border:1px solid var(--tal2);border-radius:10px;color:var(--tal);background:rgba(111,198,193,.07);white-space:nowrap;margin:2px 4px 0 0}
.talc.off{opacity:.45;border-style:dashed}
.talc.g-risk{color:#E0A96D;border-color:rgba(224,169,109,.4);background:rgba(224,169,109,.07)}
.talrow{display:flex;flex-wrap:wrap;margin-top:3px}
.talent .talhead{display:flex;gap:16px;align-items:stretch;margin-bottom:12px}
.talent .talhead>div:first-child{flex:1;display:flex;flex-direction:column;gap:5px;padding:12px 14px;border:1px solid var(--line);border-radius:var(--r-sm)}
.talent .talhead>div:first-child b{font-size:15px;color:var(--tal)}
.talent .talhead>div:first-child span{font-size:12.5px;color:var(--ink2);line-height:1.55}
.talent .shards{min-width:130px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:4px;border:1px solid var(--tal2);border-radius:var(--r-sm)}
.talent .shards span{font-size:12px;color:var(--ink3)}
.talent .shards b{font-size:24px;font-family:var(--f-mono);color:var(--tal)}
.talent .note{padding:10px 12px;border:1px dashed var(--tal2);border-radius:var(--r-sm);color:var(--ink2);font-size:13px;margin-bottom:10px}
.talw{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:8px;margin-bottom:6px}
.talw .tw{padding:9px 11px;border:1px solid var(--line2);border-radius:var(--r-sm);cursor:pointer;display:flex;flex-direction:column;gap:5px;background:rgba(255,255,255,.015)}
.talw .tw:hover{border-color:var(--tal2)}
.talw .tw.on{border-color:var(--tal);box-shadow:0 0 0 1px var(--tal2) inset}
.talw .twh{display:flex;align-items:center;gap:7px;font-size:13px}
.talw .twh .ico{width:48px;height:28px}
.talw .twh .tag{margin-left:auto}
.tslot{display:flex;align-items:center;gap:7px;font-size:12px;min-height:22px}
.tslot .sl{color:var(--ink3);font-family:var(--f-mono);font-size:11px;min-width:40px}
.tslot.shut{opacity:.6}
.tslot .linkbtn{margin-left:auto;font-size:11.5px}
.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(270px,1fr));gap:8px;margin-bottom:6px}
.tcard{padding:10px 12px;border:1px solid var(--line2);border-radius:var(--r-sm);display:flex;flex-direction:column;gap:6px;background:rgba(111,198,193,.025)}
.tcard.none{opacity:.5;background:transparent}
.tcard.on{border-color:var(--tal)}
.tcard .th{display:flex;align-items:center;gap:7px}
.tcard .th b{font-size:14px;color:var(--tal)}
.tcard.g-risk .th b{color:#E0A96D}
.tcard .tlv{font-family:var(--f-mono);font-size:12px;color:var(--tal);border:1px solid var(--tal2);border-radius:4px;padding:0 5px}
.tcard .tt{font-size:13px;color:var(--ink);line-height:1.5}
.tcard .tn{font-size:11.5px;color:var(--ink3);line-height:1.45}
.tcard .ta{display:flex;flex-wrap:wrap;gap:5px;margin-top:auto;align-items:center}
.tstrip{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.tstate{font-size:11.5px;padding:1px 7px;border:1px solid var(--line2);border-radius:10px;color:var(--ink3);white-space:nowrap}
.tstate.lit{color:var(--tal);border-color:var(--tal);background:rgba(111,198,193,.1)}
.tstate .tp{font-style:normal;letter-spacing:-1px;margin-left:3px;font-size:9px}
.tsum{font-size:11.5px;color:var(--tal);font-family:var(--f-mono);margin-left:auto}
.log .e.tal{color:var(--tal)}
.lt.tl{border-color:var(--tal2)}
.lt .talico{font-size:30px;color:var(--tal)}

/* ── 인연 ── */
.bond{display:grid;grid-template-columns:300px 1fr;gap:14px;align-items:start}
.blist{display:flex;flex-direction:column;gap:8px}
.bcard{position:relative;display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--line2);border-radius:var(--r-sm);cursor:pointer;background:rgba(255,255,255,.015)}
.bcard:hover{border-color:var(--hc)}
.bcard.on{border-color:var(--hc);box-shadow:0 0 0 1px var(--hc) inset}
.bcard .bface{width:58px;height:58px;border-radius:8px;overflow:hidden;flex:none;background:#1a1d22}
.bcard .bface img{width:100%;height:auto;transform:scale(1.9);transform-origin:50% 12%;image-rendering:auto}
.bcard.locked .bface img{filter:brightness(0) opacity(.55)}
.bcard .binfo{display:flex;flex-direction:column;gap:3px;min-width:0;flex:1}
.bcard .binfo b{font-size:14px;color:var(--hc)}
.bcard.locked .binfo b{color:var(--ink3)}
.bcard .binfo .dim{font-size:12px}
.bcard .bst{font-size:12px;color:var(--ink2)}
.bcard .dot{position:absolute;top:8px;right:8px}
.bbar{position:relative;height:6px;border-radius:3px;background:rgba(255,255,255,.07);overflow:visible;margin-top:2px}
.bbar i{position:absolute;left:0;top:0;bottom:0;border-radius:3px}
.bbar u{position:absolute;top:-1px;bottom:-1px;width:1px;background:rgba(255,255,255,.18)}
.bbar em{position:absolute;top:-3px;bottom:-3px;width:2px;background:var(--ink);opacity:.8}
.bmain{min-width:0}
.bstage{position:relative;display:grid;grid-template-columns:minmax(260px,380px) 1fr;gap:18px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);
  background:radial-gradient(ellipse at 20% 100%, color-mix(in srgb, var(--hc) 18%, transparent), transparent 60%), rgba(255,255,255,.015);min-height:420px}
.bstage .bsp{width:100%;align-self:end;image-rendering:auto;filter:drop-shadow(0 8px 18px rgba(0,0,0,.55))}
.bstage.locked .bsp{filter:brightness(0) opacity(.4)}
.bstage .bgreet{position:absolute;left:18px;top:14px;max-width:320px;padding:8px 12px;border-radius:10px;background:rgba(10,12,15,.82);border:1px solid var(--hc);font-size:13px;color:var(--ink)}
.bside{display:flex;flex-direction:column;gap:10px;min-width:0}
.bside h3{margin:0;font-size:22px;color:var(--hc)}
.bside .bsub{margin:0;color:var(--ink2);font-size:13.5px;line-height:1.6}
.baff{display:flex;align-items:baseline;gap:8px}
.baff b{font-size:24px;font-family:var(--f-mono);color:var(--hc)}
.baff span:first-child{font-size:13px;color:var(--ink)}
.bnext{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px dashed var(--line2);border-radius:var(--r-sm)}
.bnext.ready{border-style:solid;border-color:var(--hc)}
.bnext span:first-child{font-weight:600}
.bnext .btn{margin-left:auto}
.bnext .dim{margin-left:auto;font-size:12.5px}
.bacts{display:flex;flex-wrap:wrap;gap:6px}
.intimacy-panel{margin:12px 0;padding:12px;border:1px solid var(--line2);border-radius:var(--r-sm)}
.intimacy-panel p{margin:8px 0;font-size:13px;line-height:1.6}
.intimacy-panel .bacts{margin:10px 0}
.intimacy-panel .btn{white-space:normal}
.btitles,.beps{display:flex;flex-wrap:wrap;gap:6px;align-items:center;font-size:12.5px}
.btitle{padding:2px 8px;border:1px solid var(--line2);border-radius:10px;color:var(--ink3)}
.btitle.own{color:var(--hc);border-color:var(--hc)}
.bgift{margin-top:10px;border:1px solid var(--line);border-radius:var(--r-sm);padding:0 12px 12px}
.bgift .panel-h{display:flex;align-items:center;gap:10px}
.bginv{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px}
.bgi{position:relative;display:flex;align-items:center;gap:6px;padding:6px 8px;border:1px solid var(--line2);border-radius:6px;background:transparent;color:var(--ink);font:inherit;font-size:12.5px;cursor:pointer;text-align:left}
.bgi:hover{border-color:var(--amber2)}
.bgi.like{border-color:#D07A8C}
.bgi .ico{width:30px;height:30px}
.bgi i{margin-left:auto;font-style:normal;color:var(--ink3);font-family:var(--f-mono);font-size:11px}
.bgi em{position:absolute;top:2px;right:5px;font-style:normal;color:#E08A9C;font-size:11px}
/* 대화창 */
.vn{position:fixed;inset:0;z-index:120;background:#07080a;cursor:pointer;user-select:none}
.vn .vnbg{position:absolute;inset:0;background-size:cover;background-position:center;filter:brightness(.55) saturate(.9)}
.vn .vnbg + .vnsp{position:absolute}
.vn .vnsp{position:absolute;left:50%;bottom:0;transform:translateX(-50%);height:min(82vh,760px);width:auto;image-rendering:auto;filter:drop-shadow(0 10px 30px rgba(0,0,0,.7))}
.vn .vnsp.pop{animation:vnIn .25s ease-out}
@keyframes vnIn{from{opacity:.4;transform:translateX(-50%) translateY(8px)}to{opacity:1;transform:translateX(-50%)}}
.vn .vntop{position:absolute;left:0;right:0;top:0;display:flex;justify-content:space-between;align-items:center;padding:12px 18px;background:linear-gradient(rgba(0,0,0,.6),transparent)}
.vn .vnt{font-size:13px;color:var(--ink2);letter-spacing:.04em}
.vn .vnbox{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);width:min(980px,92vw);min-height:150px;padding:18px 24px 16px;
  background:rgba(10,12,16,.9);border:1px solid color-mix(in srgb, var(--hc) 60%, transparent);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.6);cursor:pointer}
.vn .vnbox.nar{border-color:var(--line2)}
.vn .vnbox.nar p{color:var(--ink2);font-style:italic}
.vn .vnname{position:absolute;top:-15px;left:20px;padding:3px 14px;border-radius:8px;background:var(--hc);color:#0b0d10;font-weight:700;font-size:14px}
.vn .vnbox p{margin:6px 0 0;font-size:17px;line-height:1.75;color:var(--ink);white-space:pre-wrap}
.vn .vnhint{position:absolute;right:18px;bottom:10px;font-size:11.5px;color:var(--ink3);animation:vnBlink 1.4s infinite}
@keyframes vnBlink{50%{opacity:.35}}
.vn .vnch{display:flex;flex-direction:column;gap:7px;margin-top:12px;cursor:default}
.vn .vnch .btn{text-align:left;justify-content:flex-start;font-size:14.5px;padding:9px 14px;border-color:color-mix(in srgb, var(--hc) 45%, transparent)}
.vn .vnch .btn:hover{border-color:var(--hc);background:color-mix(in srgb, var(--hc) 12%, transparent)}
.vn .vnend{display:flex;flex-direction:column;gap:6px;align-items:flex-start;cursor:default}
.vn .vnend b{font-size:16px;color:var(--hc)}
.vn .vnend .vnrw{color:var(--amber)}
.vn .vnend .btn{margin-top:6px}
.hsay.partner img{object-fit:cover;object-position:50% 8%}
.hqnpc.partner{object-fit:cover;object-position:50% 6%}
.bstage .bgreet.react{border-color:var(--amber)}
.newt{font-style:normal;font-size:10.5px;margin-left:5px;padding:0 5px;border-radius:6px;background:var(--amber);color:#111}

/* ---- 인연 칭호 — 히로인마다 컨셉, 단계가 오를수록 화려해진다 ----
   3단계: 색과 표식만 · 4단계: 컨셉 움직임 · 5단계: 빛 · 8단계(평생의 사람): 분홍 하트 맥박 + 테두리 빛 */
[class*="tt-t_b_"]{--hc:#E98FB0}
[class*="tt-t_b_raven"]{--tc:#8FE3D3;--tb:#2E6B63;--tbg:#0C1A19}
[class*="tt-t_b_serin"]{--tc:#DCE8F5;--tb:#56708A;--tbg:#121A22}
[class*="tt-t_b_ren"]{--tc:#F2B66A;--tb:#7A5226;--tbg:#1E150B}
[class*="tt-t_b_sirin"]{--tc:#CDB6F2;--tb:#5B4685;--tbg:#16111F}
[class*="tt-t_b_poppy"]{--tc:#FF9C9C;--tb:#8A3A3A;--tbg:#1F1111}
[class*="tt-t_b_har"]{--tc:#D9D3B8;--tb:#6B6550;--tbg:#18170F}
[class*="tt-t_b_era"]{--tc:#9DF2C9;--tb:#2F7457;--tbg:#0D1A14}
[class*="tt-t_b_noa"]{--tc:#FF8A7A;--tb:#7E2F28;--tbg:#1A0F0E}
[class*="tt-t_b_mira"]{--tc:#F2CF7E;--tb:#7A2E44;--tbg:#1E0F15}
[class*="tt-t_b_kasha"]{--tc:#D9C08A;--tb:#6E5A2E;--tbg:#17140C}

/* 레이븐 — 신호 */
.tt-t_b_raven4 .tgl,.tt-t_b_raven5 .tgl,.tt-t_b_raven8 .tgl{animation:ttBlink 1.4s steps(2) infinite}
.tt-t_b_raven5::after,.tt-t_b_raven8::after{content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(90deg,transparent 0 .9em,rgba(143,227,211,.18) .9em 1em);animation:ttDrift 3s linear infinite}
/* 세린 — 12초마다 도는 등대 불빛 */
.tt-t_b_serin4::after,.tt-t_b_serin5::after,.tt-t_b_serin8::after{content:'';position:absolute;top:0;bottom:0;width:30%;z-index:1;
  background:linear-gradient(90deg,transparent,rgba(240,248,255,.4),transparent);animation:ttBeam 12s ease-in-out infinite}
.tt-t_b_serin5,.tt-t_b_serin8{background:linear-gradient(90deg,#121A22,#1D2836 50%,#121A22)}
/* 렌 — 톱니 */
.tt-t_b_ren4 .tgl,.tt-t_b_ren5 .tgl,.tt-t_b_ren8 .tgl{animation:ttSpin 4s linear infinite}
.tt-t_b_ren5,.tt-t_b_ren8{background:linear-gradient(0deg,#3A2410,#1E150B 70%)}
/* 시린 — 촛불 */
.tt-t_b_sirin4 .tgl,.tt-t_b_sirin5 .tgl,.tt-t_b_sirin8 .tgl{animation:ttCandle 2.2s ease-in-out infinite}
.tt-t_b_sirin5 span,.tt-t_b_sirin8 span{text-shadow:0 0 .45em rgba(255,200,120,.45)}
/* 포피 — 심박 · 노을 */
.tt-t_b_poppy4 .tgl,.tt-t_b_poppy5 .tgl{animation:ttBeat 1.4s ease-in-out infinite}
.tt-t_b_poppy5,.tt-t_b_poppy8{background:linear-gradient(90deg,#2A1414,#3A1D18 60%,#4A2A1A)}
/* 하르 — 램프 · 붕대 */
.tt-t_b_har4 .tgl,.tt-t_b_har5 .tgl,.tt-t_b_har8 .tgl{animation:ttCandle 3s ease-in-out infinite}
.tt-t_b_har5::after,.tt-t_b_har8::after{content:'';position:absolute;inset:0;z-index:1;
  background:repeating-linear-gradient(-45deg,transparent 0 .35em,rgba(217,211,184,.07) .35em .7em)}
/* 에라 — 빛나는 문양 */
.tt-t_b_era4 .tgl,.tt-t_b_era5 .tgl,.tt-t_b_era8 .tgl{--gc:#6FF0B4;animation:ttGlow 2.4s ease-in-out infinite}
.tt-t_b_era5 span,.tt-t_b_era8 span{--gc:rgba(111,240,180,.6);animation:ttGlow 3.6s ease-in-out infinite}
/* 노아 — 조준선을 지나는 점 */
.tt-t_b_noa4::after,.tt-t_b_noa5::after,.tt-t_b_noa8::after{content:'';position:absolute;top:50%;width:.22em;height:.22em;margin-top:-.11em;border-radius:50%;z-index:1;
  background:#FF5A4A;box-shadow:0 0 .4em #FF5A4A;animation:ttDot 2.6s ease-in-out infinite}
.tt-t_b_noa5::before,.tt-t_b_noa8::before{content:'';position:absolute;left:0;right:0;top:50%;height:1px;z-index:0;background:rgba(255,138,122,.22)}
/* 미라 — 금빛 술잔 */
.tt-t_b_mira4,.tt-t_b_mira5,.tt-t_b_mira8{background:linear-gradient(90deg,#1E0F15,#2E1420 60%,#1E0F15)}
.tt-t_b_mira5 span,.tt-t_b_mira8 span{background:linear-gradient(110deg,#F2CF7E 35%,#FFF3C9 50%,#F2CF7E 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ttGold 3.5s linear infinite}
/* 카샤 — 휴전 도장 */
.tt-t_b_kasha4 .tgl,.tt-t_b_kasha5 .tgl{animation:ttStamp 3.2s ease-in-out infinite}
.tt-t_b_kasha5,.tt-t_b_kasha8{background:linear-gradient(90deg,#17140C,#2A2414 50%,#17140C)}

/* 평생의 사람 — 공통: 하트가 뛰고 테두리에 분홍빛 */
.tt-t_b_raven8,.tt-t_b_serin8,.tt-t_b_ren8,.tt-t_b_sirin8,.tt-t_b_poppy8,.tt-t_b_har8,.tt-t_b_era8,.tt-t_b_noa8,.tt-t_b_mira8,.tt-t_b_kasha8{
  box-shadow:inset 0 0 0 1px var(--tb),inset 0 0 0 2px rgba(233,143,176,.35),inset 0 0 .8em rgba(233,143,176,.18)}
.tt-t_b_raven8 .tgl,.tt-t_b_serin8 .tgl,.tt-t_b_ren8 .tgl,.tt-t_b_sirin8 .tgl,.tt-t_b_poppy8 .tgl,.tt-t_b_har8 .tgl,.tt-t_b_era8 .tgl,.tt-t_b_noa8 .tgl,.tt-t_b_mira8 .tgl,.tt-t_b_kasha8 .tgl{
  animation:ttLove 1.5s ease-in-out infinite;text-shadow:0 0 .4em var(--hc)}
@keyframes ttLove{0%,40%,100%{transform:scale(1);filter:none}20%{transform:scale(1.18);filter:drop-shadow(0 0 .25em #E98FB0)}}

/* ---- 전투 화면 v3 — 행동 칸이 적 목록을 덮지 않는다 ----
   행동 칸은 화면 흐름 안(고정 X), 총은 왼쪽 칸, 조준 부위는 사격 줄 바로 위.
   단추는 사격 · 이동 · 아이템/지원 세 줄, 줄마다 왼쪽에 이름. */
.layout.combat.v2.live .actpanel.v3{position:relative;bottom:auto;box-shadow:none}
.actpanel.v3{padding:10px 12px;display:flex;flex-direction:column;gap:7px}
.actpanel.v3 .notice.wait{margin:0}
.actpanel.v3 .agrp{display:grid;grid-template-columns:62px minmax(0,1fr);gap:8px;align-items:center}
.actpanel.v3 .alab{font-size:11.5px;color:var(--ink3);font-weight:700;letter-spacing:.04em;line-height:1.25}
.actpanel.v3 .parts{display:flex;gap:6px;align-items:center}
.actpanel.v3 .part{display:flex;align-items:center;gap:6px;padding:5px 12px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);cursor:pointer}
.actpanel.v3 .part .pn{font-weight:700;font-size:13px}
.actpanel.v3 .part .pc{font-size:11px;color:var(--ink3);font-family:var(--f-mono)}
.actpanel.v3 .part.on{border-color:var(--red);background:#3A1E19;color:#FFD5CC}
.actpanel.v3 .part.on .pc{color:#FFB4A6}
.actpanel.v3 .pnote{font-size:11px;color:var(--ink3);margin-left:4px}
.actpanel.v3 .acts{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px}
.actpanel.v3 .act{position:relative;height:54px;padding:5px 4px 4px;border-radius:9px;background:var(--panel2);border:1px solid var(--line2);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:var(--ink);cursor:pointer}
.actpanel.v3 .act svg{width:21px;height:21px;fill:none;stroke:var(--ink);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.actpanel.v3 .act .an{font-size:12.5px;font-weight:600;line-height:1.2;white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}
.actpanel.v3 .act .ad{display:none}
.actpanel.v3 .act .ad2{font-size:10.5px;color:var(--ink3);font-family:var(--f-mono)}
.actpanel.v3 .act .apc{position:absolute;top:4px;right:5px;display:flex;gap:2px}
.actpanel.v3 .act .apc i{width:6px;height:6px;border-radius:50%;background:var(--amber)}
.actpanel.v3 .act .apc.r{font-size:9.5px;color:var(--ink3);font-family:var(--f-mono);top:3px}
.actpanel.v3 .act .apc.r.bad{color:var(--red)}
.actpanel.v3 .act .akey{position:absolute;top:3px;left:5px}
.actpanel.v3 .act .cnt{position:absolute;top:3px;left:6px;font-size:10.5px;color:var(--ink2);font-family:var(--f-mono)}
.actpanel.v3 .act .aimg,.actpanel.v3 .act .ico.aimg{width:24px;height:24px;margin:0;object-fit:contain}
.actpanel.v3 .act.fire{background:#3A1E19;border-color:#8A3A30;color:#FFD5CC}
.actpanel.v3 .act.fire svg{stroke:#FFB4A6}
.actpanel.v3 .act.sup{background:#16232E;border-color:#3C5266}
.actpanel.v3 .act.supfold{background:transparent;border-style:dashed;color:var(--ink3);font-size:12px}
.actpanel.v3 .act.on{border-color:var(--amber)}
.actpanel.v3 .act.obj{border-color:var(--amber);background:#2E2610}
.actpanel.v3 .act:not([disabled]):hover{filter:brightness(1.18)}
.actpanel.v3 .act[disabled]{opacity:.38;cursor:default}
.actpanel.v3 .endturn{height:42px;font-size:15px;font-weight:800;border-radius:10px;margin-top:2px}
@media (max-width:1300px){ .actpanel.v3 .acts{grid-template-columns:repeat(5,minmax(0,1fr))} }

/* 총 — 왼쪽 칸에 작게 */
.layout.combat.v2 .wpanel{padding:8px}
.layout.combat.v2 .wpanel .wbox{padding:8px 10px;gap:5px}
.layout.combat.v2 .wpanel .wbox .wimg{height:58px}

/* 적 카드 — 낮고 넓게 */
.layout.combat.v2 .hostpanel .panel-b{padding:10px}
.layout.combat.v2 .hostpanel .hostile{grid-template-columns:52px minmax(0,1fr) 70px;gap:10px;padding:8px 10px;min-height:0}
.layout.combat.v2 .hostpanel .hostile .hic{width:52px;height:52px}
.layout.combat.v2 .hostpanel .hostile .hn{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px}
.layout.combat.v2 .hostpanel .hostile .hn b{font-size:14px;white-space:nowrap}
.layout.combat.v2 .hostpanel .hostile .hn .w{font-size:11px;color:var(--ink3)}
.layout.combat.v2 .hostpanel .hostile .chips{margin-top:5px}
.layout.combat.v2 .hostpanel .hostile .odds .big{font-size:24px}
/* 숫자키 표식이 «.hostile > * {position:relative}»에 눌려 격자 한 칸을 차지하고 있었다 —
   그림 · 이름 · 명중률이 한 칸씩 밀려 카드가 두 줄로 부풀었다 */
.layout.combat.v2 .hostile > .hkey{position:absolute;top:6px;left:8px;z-index:3}
.layout.combat.v2 .hostile.sel:after{z-index:3}

/* 특별편 카드 */
.bond .bcard.bspecial{background:linear-gradient(90deg,#2A1420,#1E1018);border-color:#7A3A55;min-height:0;padding:10px 12px}
.bond .bcard.bspecial b{color:#FFD6E5}
.bond .bcard.bspecial.locked{opacity:.55}

/* 칭호 «블랙라인의 연인» — 10명 모두. 테두리에 색이 흐르고 하트가 뜁니다. 이름 뒤 점 장식은 제거했습니다. */
.tt-t_b_all{--tc:#FFE3EE;--tb:transparent;--tbg:#1E1018;box-shadow:none;padding:.16em .9em .16em .8em}
.tt-t_b_all::before{content:'';position:absolute;inset:0;z-index:0;padding:1.5px;
  background:linear-gradient(90deg,#8FE3D3,#DCE8F5,#F2B66A,#CDB6F2,#FF9C9C,#D9D3B8,#9DF2C9,#FF8A7A,#F2CF7E,#D9C08A,#8FE3D3) 0 0/300% 100%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;animation:ttGold 6s linear infinite}
.tt-t_b_all span{background:linear-gradient(90deg,#FFD6E5,#FFF3C9 50%,#FFD6E5) 0 0/200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ttGold 4s linear infinite}

.tt-t_b_all .tgl{color:#FF8FB8;animation:ttLove 1.5s ease-in-out infinite;text-shadow:0 0 .5em #FF5C9A}
/* 연인 옷 — 전신 그림이라 너비 대신 높이로 맞춘다 */
.bstage .bsp.skin{width:auto;max-width:100%;max-height:560px;justify-self:center;margin:0 auto}
.bacts .btn.on{border-color:#E98FB0;color:#FFD6E5}

/* ---- 게임 안 확인창 (브라우저 기본 창 대신) ---- */
.uidlg{position:fixed;inset:0;z-index:9999;background:rgba(6,8,10,.62);backdrop-filter:blur(2px);
  display:flex;align-items:center;justify-content:center;animation:uidlgIn .14s ease-out}
.uidlg-box{width:min(440px,92vw);background:linear-gradient(180deg,#1C2125,#15191C);border:1px solid var(--line2);
  border-radius:14px;box-shadow:0 18px 50px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.04);padding:20px 20px 16px;position:relative;overflow:hidden}
.uidlg-box::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--amber)}
.uidlg-box.danger::before{background:var(--red)}
.uidlg-msg{font-size:14.5px;line-height:1.65;color:var(--ink);white-space:normal;word-break:keep-all}
.uidlg-in{width:100%;margin-top:12px;padding:9px 11px;border-radius:8px;background:var(--panel2);border:1px solid var(--line2);color:var(--ink);font-size:14px}
.uidlg-in:focus{outline:none;border-color:var(--amber)}
.uidlg-btns{display:flex;justify-content:flex-end;gap:8px;margin-top:16px}
.uidlg-btns .btn{min-width:84px;height:36px;font-weight:700}
@keyframes uidlgIn{from{opacity:0}to{opacity:1}}
.uidlg .uidlg-box{animation:uidlgPop .16s ease-out}
@keyframes uidlgPop{from{transform:translateY(6px) scale(.98);opacity:.6}to{transform:none;opacity:1}}
/* 적이 많아 카드가 여러 줄이면 적 목록 안에서 스크롤 — 턴 종료 단추가 화면 밖으로 밀리지 않게 */
.layout.combat.v2.live .hostpanel .hostiles.many{max-height:max(150px, calc(100vh - 680px));overflow-y:auto;padding-right:2px}

/* 작전 실패 — 연인들의 무전 */
.cries{margin:12px 0 4px;padding:10px 12px;border-radius:10px;background:linear-gradient(180deg,#24121A,#170D12);border:1px solid #5A2A38;
  animation:cryShake .5s ease-out}
.cries-h{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;color:#E07A8F;margin-bottom:6px;animation:ttBlink 1.1s steps(2) infinite}
.cry{display:flex;gap:10px;align-items:center;padding:6px 0;border-top:1px dashed rgba(224,122,143,.18)}
.cry:first-of-type{border-top:0}
.cry img{width:44px;height:44px;object-fit:cover;object-position:top;border-radius:8px;border:1px solid var(--hc);filter:saturate(.8)}
.cry b{font-size:12.5px;color:var(--hc)}
.cry p{margin:2px 0 0;font-size:13.5px;color:#F3D6DD;line-height:1.5}
.cry.partner p{font-weight:700;color:#FFE3EA}
@keyframes cryShake{0%{transform:translateX(0)}20%{transform:translateX(-4px)}40%{transform:translateX(4px)}60%{transform:translateX(-2px)}100%{transform:none}}

/* 귀환 안내창 — 행방불명에서 돌아왔을 때 */
.uidlg-box.wel{width:min(520px,94vw)}
.uidlg-box.wel::before{background:#E98FB0}
.wel-h{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;color:#E98FB0;margin-bottom:8px}
.wel-row{display:flex;gap:12px;align-items:center;padding:8px 0;border-top:1px dashed rgba(233,143,176,.2)}
.wel-row:first-of-type{border-top:0}
.wel-row img{width:46px;height:46px;object-fit:cover;object-position:top;border-radius:9px;border:1px solid var(--hc)}
.wel-row b{font-size:12.5px;color:var(--hc)}
.wel-row p{margin:2px 0 0;font-size:13.5px;line-height:1.55;color:var(--ink)}
.wel-row.main img{width:72px;height:72px}
.wel-row.main p{font-size:15px;font-weight:600;color:#FFE3EA}

/* 새 네 명 칭호 */
[class*="tt-t_b_luka"]{--tc:#A9C3F0;--tb:#3A5482;--tbg:#0E1522}
[class*="tt-t_b_vera"]{--tc:#B9C6FF;--tb:#3E4E8E;--tbg:#0F1226}
[class*="tt-t_b_sonya"]{--tc:#F2D28A;--tb:#7A5A22;--tbg:#1C150A}
[class*="tt-t_b_ines"]{--tc:#E8B58F;--tb:#6E3A22;--tbg:#1A0F0B}
/* 루카 — 회전익: 표식이 돌고, 5단계부터 노을 활주로 */
.tt-t_b_luka4 .tgl,.tt-t_b_luka5 .tgl{animation:ttSpin 1.2s linear infinite}
.tt-t_b_luka5,.tt-t_b_luka8{background:linear-gradient(90deg,#0E1522,#2A1E28 60%,#3A2418)}
.tt-t_b_luka5::after,.tt-t_b_luka8::after{content:'';position:absolute;left:0;right:0;bottom:2px;height:1px;z-index:1;
  background:repeating-linear-gradient(90deg,rgba(255,190,120,.55) 0 .5em,transparent .5em 1em);animation:ttDrift 2s linear infinite}
/* 베라 — 균열 관측: 푸른 맥동과 지나가는 주사선 */
.tt-t_b_vera4 .tgl,.tt-t_b_vera5 .tgl,.tt-t_b_vera8 .tgl{--gc:#7F9BFF;animation:ttGlow 2s ease-in-out infinite}
.tt-t_b_vera5::before,.tt-t_b_vera8::before{content:'';position:absolute;top:0;bottom:0;width:.12em;left:-5%;z-index:1;
  background:rgba(150,170,255,.7);box-shadow:0 0 .5em #7F9BFF;animation:ttScan 3s linear infinite}
/* 소냐 — 바다: 물결이 흐르고 금빛 글자 */
.tt-t_b_sonya4,.tt-t_b_sonya5,.tt-t_b_sonya8{background:linear-gradient(180deg,#1C150A 55%,#0E2230)}
.tt-t_b_sonya4::after,.tt-t_b_sonya5::after,.tt-t_b_sonya8::after{content:'';position:absolute;left:0;right:0;bottom:0;height:.35em;z-index:1;
  background:radial-gradient(circle at 50% 100%,rgba(120,190,220,.45) 40%,transparent 42%) 0 100%/.8em .7em repeat-x;animation:ttWave 1.6s linear infinite}
.tt-t_b_sonya5 span,.tt-t_b_sonya8 span{background:linear-gradient(110deg,#F2D28A 35%,#FFF1C2 50%,#F2D28A 65%) 0 0/250% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;animation:ttGold 3.5s linear infinite}
/* 이네스 — 계약 도장 · 금빛 서명 */
.tt-t_b_ines4 .tgl,.tt-t_b_ines5 .tgl{animation:ttStamp 3.2s ease-in-out infinite}
.tt-t_b_ines5,.tt-t_b_ines8{background:linear-gradient(90deg,#1A0F0B,#2A1A12 50%,#1A0F0B);box-shadow:inset 0 0 0 1px var(--tb),inset 0 -2px 0 rgba(232,181,143,.35)}
.tt-t_b_ines8 span{background:linear-gradient(110deg,#E8B58F 35%,#FFE6CF 50%,#E8B58F 65%) 0 0/250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:ttGold 4s linear infinite}
/* 평생의 사람 — 공통 하트 */
.tt-t_b_luka8,.tt-t_b_vera8,.tt-t_b_sonya8,.tt-t_b_ines8{
  box-shadow:inset 0 0 0 1px var(--tb),inset 0 0 0 2px rgba(233,143,176,.35),inset 0 0 .8em rgba(233,143,176,.18)}
.tt-t_b_luka8 .tgl,.tt-t_b_vera8 .tgl,.tt-t_b_sonya8 .tgl,.tt-t_b_ines8 .tgl{animation:ttLove 1.5s ease-in-out infinite;text-shadow:0 0 .4em var(--hc)}
/* 블랙라인의 연인 — 열네 명의 색 */
.tt-t_b_all::before{background:linear-gradient(90deg,#8FE3D3,#DCE8F5,#F2B66A,#CDB6F2,#FF9C9C,#D9D3B8,#9DF2C9,#FF8A7A,#F2CF7E,#D9C08A,#A9C3F0,#B9C6FF,#F2D28A,#E8B58F,#8FE3D3) 0 0/300% 100%}


/* 데스크톱 전용: 작은 창에서도 화면을 접지 않습니다. */
html,body{min-width:1280px}
.bond-gallery .gallery-box{width:1000px;max-width:calc(100vw - 80px);max-height:88vh;overflow-y:auto;animation:none}
.bond-gallery .gallery-header{position:sticky;top:-20px;z-index:2;background:#1c2125;margin:-20px -20px 16px;padding:16px 20px;border-bottom:1px solid var(--line2)}
.bond-gallery .gallery-header .btn{flex-shrink:0}
.settlement-breakdown{margin-top:16px;border:1px solid var(--line2);border-radius:8px;padding:12px 16px}
.settlement-breakdown summary{cursor:pointer;color:var(--amber);font-weight:700}
.settlement-breakdown .kv{margin-top:12px}
.gallery-memories{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:18px 0}
.gallery-memory{padding:0;border:1px solid #455057;border-radius:8px;background:#171d20;color:inherit;overflow:hidden;text-align:left;cursor:pointer}
.gallery-memory img{display:block;width:100%;aspect-ratio:16/9;object-fit:contain;background:#0c1012}
.gallery-memory span{display:block;padding:10px 14px}
.gallery-search{display:flex;align-items:center;gap:12px;margin:22px 0 12px}
.gallery-search input{flex:1}
.gallery-lines details{border-top:1px solid #343c41;padding:12px 0}
.gallery-lines summary{cursor:pointer;font-weight:600}
.gallery-lines summary span{margin-left:10px;font-weight:400}
.gallery-lines ul{padding-left:22px;line-height:1.8}
.gallery-lines li{margin:8px 0;white-space:pre-wrap}
body{overflow-x:auto}
.bstage{grid-template-columns:380px minmax(0,1fr);min-height:600px}
.bstage .bsp.stable-portrait{width:380px;height:570px;max-height:none;align-self:end;justify-self:center;margin:0;aspect-ratio:2/3}
.stable-portrait{position:relative;display:block;overflow:hidden}
.stable-portrait .portrait-art{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:var(--portrait-width);height:var(--portrait-height)}
.stable-portrait .portrait-art img{position:absolute;inset:0;width:100%;height:100%;max-width:none;object-fit:fill;pointer-events:none}
.vn .vnsp.stable-portrait{width:min(54.6667vh,506.6667px);height:min(82vh,760px)}

.training-box{width:min(1080px,92vw);max-width:1080px;max-height:88vh;overflow:auto;animation:none!important}
.training-dialog{animation:none!important}
.training-box .training-header{position:sticky;top:-20px;z-index:3;background:#1c2125;margin:-20px -20px 16px;padding:14px 20px;border-bottom:1px solid var(--line2);flex-wrap:nowrap}
.training-header .btn{flex-shrink:0;min-width:82px;min-height:40px;border-color:var(--amber);color:var(--ink)}
@media(max-width:600px){.training-config,.training-enemies{grid-template-columns:minmax(0,1fr)}.training-header h2{font-size:18px}}
.training-config{display:grid;grid-template-columns:repeat(3,minmax(160px,1fr));gap:12px;margin:16px 0}
.training-config label{display:flex;flex-direction:column;gap:6px}
.training-config input,.training-config select{width:100%}
.training-status,.training-result{padding:14px;margin:12px 0;border:1px solid #52604c;background:#1b241e}
.training-enemies{display:grid;grid-template-columns:repeat(2,minmax(220px,1fr));gap:10px}
.training-enemy{padding:12px;border:1px solid #39433c}
.training-enemy.selected{border-color:#cfad58}
.training-actions{flex-wrap:wrap;margin:14px 0;gap:7px}
.training-log{max-height:230px;overflow:auto;border-top:1px solid #39433c;padding:12px;line-height:1.7;color:#c3c9c0}
.dock-toggle{position:absolute;top:-29px;right:24px;height:29px;padding:3px 14px;border:1px solid var(--line);border-bottom:0;border-radius:6px 6px 0 0;background:var(--bg,#151b1e);color:var(--text,#ccd2d4);font-size:12px;cursor:pointer}
html.nav-collapsed{--dockH:0px}
.rail.dock.is-collapsed{height:0;padding:0;border:0;overflow:visible}
.rail.dock.is-collapsed>:not(.dock-toggle){display:none!important}

/* Personal illustration: preserve the entire 16:9 composition. */
.hqban.hqban-art{height:360px;aspect-ratio:auto;background-color:#101315;background-size:100% 100%,auto 360px;background-position:center;background-repeat:no-repeat}
@media(max-width:700px){.hqban.hqban-art{height:auto;aspect-ratio:auto;padding:0;background:none;display:grid;grid-template-columns:1fr}.hqban.hqban-art::before{content:"";display:block;height:150px;background:var(--hb) center/contain no-repeat}.hqban-art .hqsay{max-width:100%;padding:12px}.hqban-art .hqgo{padding:0 12px 12px}.hqban-art .hqnpc{height:110px;margin-bottom:0}}
/* Never paint a raw chroma-key source before its load handler finishes. */
img[src*="_vow.png"]{visibility:hidden}

.vow-life{margin:14px 0;border:1px solid var(--line);border-radius:10px}.vow-life .row{flex-wrap:wrap;gap:6px;margin:8px 0}.vow-life .sub{margin:8px 0}
.vn .vn-pair .vnsp.stable-portrait{left:28%;width:min(44vw,46.6667vh,433px);height:min(66vw,70vh,650px);animation:none}
.vn .vn-pair .vnsp.stable-portrait:last-child{left:72%}
.vn .vn-pair .vnsp.speaking{filter:drop-shadow(0 8px 22px rgba(0,0,0,.7))}
@media(max-width:700px){.vn .vn-pair .vnsp.stable-portrait{left:25%;bottom:18vh}.vn .vn-pair .vnsp.stable-portrait:last-child{left:75%}}

.bstage .bsp.stable-portrait{height:auto;aspect-ratio:auto;align-self:start;margin-top:80px}.bstage .bsp.stable-portrait .portrait-art{position:relative;left:auto;bottom:auto;transform:none;width:100%;height:auto;aspect-ratio:var(--portrait-ratio,2/3)}
.bstage .bsp.stable-portrait .portrait-art{display:block}
.bstage.bstage-separated{min-height:0;padding:0;border:0;background:none;align-items:start}.bstage-separated .bvisual{display:flex;flex-direction:column;gap:12px;padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden;background:radial-gradient(ellipse at 20% 100%,color-mix(in srgb,var(--hc) 18%,transparent),transparent 60%),rgba(255,255,255,.015)}.bstage-separated .bvisual .bgreet{position:static;max-width:100%;align-self:start}.bstage-separated .bvisual .bsp.stable-portrait{width:100%;margin:0;align-self:start}.bstage-separated .bside{padding:14px;border:1px solid var(--line);border-radius:var(--r-sm);background:rgba(255,255,255,.015)}

.bond-unread{color:var(--gold,#e9ae37);font-size:11px}.gallery-tabs{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0}

/* Persistent informational dialogs: stable appearance and an always visible close control. */
.stable-dialog,.uidlg{animation:none!important}
.stable-dialog>.modal{max-height:calc(100dvh - 40px);overflow:auto;overscroll-behavior:contain}
.dialog-closebar{position:sticky;top:0;z-index:8;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 16px;background:#1c2125;border-bottom:1px solid var(--line2);color:var(--ink);font-weight:700}
.dialog-closebar .dialog-close{flex-shrink:0;min-width:86px;min-height:40px;border-color:var(--amber);color:var(--ink)}
.uidlg-box{max-height:calc(100dvh - 40px);overflow:auto}
.uidlg-box>.dialog-closebar{top:-20px;margin:-20px -20px 16px}
@media(max-width:600px){.stable-dialog{padding:12px}.stable-dialog>.modal{max-height:calc(100dvh - 24px)}.dialog-closebar{padding:10px 12px;font-size:13px}}

.keepsake-row{display:flex;align-items:center;gap:12px;padding:12px;border-bottom:1px solid var(--line)}.keepsake-row>div{flex:1}.keepsake-row img{object-fit:contain}.keepsake-row p{margin:5px 0;font-size:12px}.keepsake-row button{flex-shrink:0}

.keepsake-reaction{padding:12px;border-left:2px solid var(--amber);background:var(--panel)}@media(max-width:600px){.keepsake-row{flex-wrap:wrap}.keepsake-row>div{min-width:calc(100% - 90px)}.keepsake-row button{margin-left:0}}

.keepsake-state,.training-comparison{padding:12px;margin:10px 0;border:1px solid var(--line);border-radius:6px}.keepsake-effect{font-size:12px;color:var(--muted);margin-top:6px}.keepsake-effect.active{color:var(--amber)}.training-comparison summary{cursor:pointer;padding:8px}.training-comparison table{width:100%}

.vow-collection{border:1px solid #455053;border-radius:8px;padding:12px;margin-bottom:12px}.vow-collection summary{cursor:pointer;color:#ddb252}.vow-collection-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(205px,1fr));gap:8px}.vow-collection-grid .btn{text-align:left;white-space:normal}.vow-collection-grid span{display:block;font-size:11px;margin-top:4px}.vow-request{border:1px solid #46575b;border-radius:6px;padding:12px;margin:14px 0}.vow-request p{font-size:12px;margin:8px 0}

/* Fixed portrait anchor and safe sprite gutter. */
img[src*="_vow_"]:not(.vow-fallback){visibility:hidden}
.bstage-separated .bvisual .bgreet{box-sizing:border-box;height:82px;min-height:82px;max-height:82px;overflow:auto;flex:none}
.bstage-separated .bvisual .bsp.vow-portrait{aspect-ratio:2/3}
.bstage-separated .bvisual .bsp.vow-portrait .portrait-art{aspect-ratio:2/3}
.bstage-separated .portrait-greet-empty{visibility:hidden}
.portrait-align-pending{visibility:hidden}.vn .vnsp.stable-portrait.pop{animation:none}

/* Prebuilt portraits load directly and never wait for browser canvas processing. */
img[src*="/bond/aligned/"]{visibility:visible!important}
.stable-portrait,.stable-portrait .portrait-art,.stable-portrait .portrait-body{animation:none!important;transition:none!important}

/* Storage dashboard: inventory left, compact equipment right. */
.gear-heading{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:16px}
.gear-heading h2{margin:0 0 5px;font-size:22px}
.gear-columns{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(330px,1fr);gap:16px;align-items:start}
.gear-warehouse,.gear-current{min-width:0;border:1px solid var(--line);border-radius:12px;background:rgba(14,19,22,.45);padding:14px}
.gear-current>h3{margin:0 0 12px}.gear-tabs{display:flex;flex-wrap:wrap;gap:6px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.gear-section>.subhead:first-child{margin-top:14px}.gear-section .wbar{flex-wrap:wrap}.gear-section .wbar input{min-width:100px;flex:1}
.gear-section .grid td.right{white-space:normal}.gear-section .grid td.right .btn{margin:3px 0}
.gear-section .grid .withico{min-width:150px}.gear-section .grid .withico .ico{width:48px;height:48px;object-fit:contain}
.gear-section .rigpanel{margin-top:16px}.gear-loadouts .lolist{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}.gear-loadouts .loset{min-width:0}.gear-loadouts .la{flex-wrap:wrap}
.gear-equipped.gtop{display:block;margin:0}.gear-equipped .gdoll{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:80px auto auto;gap:10px;padding:0;border:0;background:none}
.gear-equipped .gdoll .gart{grid-column:1;grid-row:1;position:static;transform:none;object-fit:cover;object-position:top;width:76px;height:80px;margin:0;align-self:start;justify-self:start}
.gear-equipped .gdoll .skinbtns{grid-column:2;grid-row:1;position:static;transform:none;display:flex;flex-wrap:wrap;gap:5px;justify-self:end;align-self:center}
.gear-equipped .gdoll .skinbtns .btn{padding:6px 8px;font-size:11px}
.gear-equipped .gdoll .gl-l,.gear-equipped .gdoll .gl-r{grid-row:2;position:static;width:auto;display:flex;flex-direction:column;gap:10px}
.gear-equipped .gdoll .gl-l{grid-column:1}.gear-equipped .gdoll .gl-r{grid-column:2}
.gear-equipped .gslot{padding:9px;min-width:0}.gear-equipped .gslot .gi{height:62px;margin:4px 0;padding:2px}.gear-equipped .gslot .gi .ico{max-width:100%;height:58px;width:80px;object-fit:contain}
.gear-equipped .gslot b{font-size:12px}.gear-equipped .gslot .gs{display:block;font-size:11px;overflow-wrap:anywhere}.gear-equipped .gslot .sk{width:23px;height:23px}.gear-equipped .gslot .socks{flex-wrap:wrap}
.gear-equipped .setrow{order:4}.gear-equipped .gslot.empty{min-height:110px}
.gear-operator-details{margin-top:12px}.gear-operator-details summary{cursor:pointer;color:var(--ink3);padding:10px;border:1px solid var(--line);border-radius:8px}.gear-operator-details[open] summary{margin-bottom:10px}
.gear-keepsake-detail{display:flex;align-items:flex-start;gap:10px;border:1px solid var(--line);border-radius:10px;padding:12px;margin-top:12px}.gear-keepsake-detail img{object-fit:contain;flex-shrink:0}.gear-keepsake-detail p{font-size:12px;margin:6px 0}
.gear-current .keepsake-row{flex-wrap:wrap}.gear-section .keepsake-row{flex-wrap:wrap}.gear-section .keepsake-row>div{flex:1;min-width:160px}
@media(max-width:1100px){.gear-columns{grid-template-columns:minmax(0,1fr) 330px}.gear-warehouse,.gear-current{padding:10px}.gear-section .grid{font-size:12px}}
@media(max-width:800px){.gear-columns{grid-template-columns:1fr}.gear-current{grid-row:1}.gear-equipped .gdoll .gl-l,.gear-equipped .gdoll .gl-r{gap:8px}.gear-loadouts .lolist{grid-template-columns:1fr}.gear-heading{align-items:flex-start}.gear-heading .btn{flex-shrink:0}.gear-tabs .btn{flex:1;white-space:nowrap}.gear-current .gear-equipped .gslot{min-height:110px}}
.gear-section .wbar select{width:auto;max-width:100%}.gear-section .wbar .grow{flex:1}.gear-equipped .gslot.empty{letter-spacing:normal;text-align:left}.gear-equipped .gslot.empty .gs{letter-spacing:normal;text-align:left}

/* PC UI renovation. Existing illustrations and dialogue remain authoritative. */
@media(min-width:1100px){
 .pc-page{--pc-edge:#354147;--pc-panel:#192125;line-height:1.65}
 .pc-page [hidden]{display:none!important}
 .pc-page .panel{border-color:var(--pc-edge);border-radius:10px;overflow:clip;background:linear-gradient(145deg,#1b2429,#151b1f)}
 .pc-page .panel-h{min-height:48px;padding:12px 16px;border-bottom:1px solid var(--pc-edge)}
 .pc-page .panel-b{padding:16px}
 .pc-page h3{scroll-margin-top:100px}
 .pc-page .btn{min-height:34px;border-radius:5px}
 .pc-page .btn:focus-visible,.pc-section-index a:focus-visible{outline:2px solid #e4ae3d;outline-offset:3px}
 .pc-section-tabs,.pc-section-index{display:flex;flex-wrap:wrap;gap:6px;padding:10px 0;margin-bottom:12px;align-items:center}
 .pc-section-index{background:#11181c;border:1px solid var(--pc-edge);border-radius:8px;padding:10px 12px}
 .pc-section-index a{font-size:12px;color:#a9bec8;text-decoration:none;padding:4px 10px;border-right:1px solid #344147}
 .pc-section-index a:hover{color:#f0bb54}
 .pc-section{min-width:0}
 .pc-pager{display:flex;justify-content:flex-end;align-items:center;gap:8px;padding:10px 2px}
 .pc-pager .dim{margin-right:auto;font-variant-numeric:tabular-nums}
 .pc-page .tablewrap{border:1px solid var(--pc-edge);border-radius:8px;overflow:auto}
 .pc-page table.grid{margin:0;width:100%}
 .pc-page table.grid th{background:#11191e;padding:11px 10px;white-space:nowrap}
 .pc-page table.grid td{padding:10px;border-bottom:1px solid #2b373d;vertical-align:middle}
 .pc-page table.grid tbody tr:hover{background:#273239}
 .pc-page[data-pc-page=home] .hqban{height:228px;min-height:228px;background-size:cover;background-position:center 43%;border-radius:10px}
 .pc-page[data-pc-page=home] .hqban-art{background-size:auto 100%;background-repeat:no-repeat;background-position:center;background-color:#101719}
 .pc-page[data-pc-page=home] .hqgrid{grid-template-columns:270px minmax(440px,1fr) 300px;gap:16px;align-items:start}
 .pc-page[data-pc-page=home] .hqfig{height:170px;overflow:hidden}
 .pc-page[data-pc-page=home] .hqskin{height:170px;object-fit:contain}
 .pc-page[data-pc-page=home] .htiles{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
 .pc-page[data-pc-page=home] .htile{min-height:100px;padding:14px}
 .pc-page[data-pc-page=home] .hqside{max-height:650px;overflow:auto}
 .pc-page[data-pc-page=bond] .bond{grid-template-columns:270px minmax(0,1fr);gap:16px}
 .pc-page[data-pc-page=bond] .blist{max-height:760px;overflow:auto;scrollbar-gutter:stable}
 .pc-page[data-pc-page=bond] .bstage-separated{grid-template-columns:350px minmax(350px,1fr);align-items:start;gap:20px}
 .pc-page[data-pc-page=bond] .bvisual{height:640px;min-height:640px;position:sticky;top:16px}
 .pc-page[data-pc-page=bond] .bside{min-width:0;padding:16px;border:1px solid var(--pc-edge);border-radius:10px;background:#182126}
 .pc-page[data-pc-page=bond] .pc-section-tabs{border-bottom:1px solid var(--pc-edge)}
 .pc-page[data-pc-page=bond] .bacts{gap:8px;display:flex;flex-wrap:wrap}
 .pc-page[data-pc-page=gear] .gear-current{position:sticky;top:16px;align-self:start}
 .pc-page[data-pc-page=gear] .gear-columns{align-items:start}
 .pc-supply-link{padding:14px 0;border-top:1px solid var(--pc-edge);margin-top:12px}
 .pc-page[data-pc-page=hideout] .hidepano{max-height:190px;overflow:hidden}
 .pc-page[data-pc-page=hideout] .hidegrid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
 .pc-page[data-pc-page=hideout] .himg{height:140px;overflow:hidden}
 .pc-page[data-pc-page=hideout] .himg img{height:100%;width:100%;object-fit:cover}
 .pc-workspace>.pc-section-tabs{border-bottom:1px solid var(--pc-edge);position:sticky;top:0;background:#171f23;z-index:2}
 .pc-page[data-pc-page=shop] .split{grid-template-columns:220px minmax(0,1fr);gap:18px}
 .pc-page[data-pc-page=shop] .npccol{align-self:start;position:sticky;top:16px}
 .pc-page[data-pc-page=shop] .npccol img{max-height:280px;object-fit:contain}
 .pc-page[data-pc-page=shop] .shopsec{margin-bottom:18px}
 .pc-page[data-pc-page=contracts] .split{grid-template-columns:220px minmax(0,1fr);gap:18px}
 .pc-page[data-pc-page=contracts] .npccol{align-self:start;position:sticky;top:16px}
 .pc-page[data-pc-page=contracts] .npccol img{max-height:280px;object-fit:contain}
 .pc-page[data-pc-page=goals] .passgrid{display:flex;overflow-x:auto;gap:10px;padding:8px 0 14px;scrollbar-gutter:stable}
 .pc-page[data-pc-page=goals] .pstep{flex:0 0 150px}
 .pc-page[data-pc-page=quest] .quest{border-radius:8px;border:1px solid var(--pc-edge);padding:14px;margin-bottom:10px}
 .pc-page[data-pc-page=quest] .quest.ready{border-color:#b99142}
 .pc-page[data-pc-page=manual] .mgrid{grid-template-columns:240px minmax(0,1fr);gap:20px}
 .pc-page[data-pc-page=manual] article{max-width:900px;line-height:1.9}
 .pc-page[data-pc-page=talent] .tcard,.pc-page[data-pc-page=perk] .perk{border-radius:8px}
}
@media(min-width:1100px) and (max-width:1450px){
 .pc-page[data-pc-page=home] .hqgrid{grid-template-columns:240px minmax(0,1fr)}
 .pc-page[data-pc-page=home] .hqside{grid-column:1/-1;max-height:300px}
 .pc-page[data-pc-page=bond] .bond{grid-template-columns:230px minmax(0,1fr)}
 .pc-page[data-pc-page=bond] .bstage-separated{grid-template-columns:290px minmax(280px,1fr);gap:12px}
 .pc-page[data-pc-page=bond] .bvisual{height:560px;min-height:560px}
}
.pc-page{--pc-edge:#354147;--pc-panel:#192125}
.pc-section-tabs,.pc-section-index{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin:10px 0 14px}
.pc-section-index a{color:#a9bec8;text-decoration:none;font-size:12px;padding:5px 8px;background:#162025;border-radius:4px}
.pc-pager{display:flex;align-items:center;gap:8px;justify-content:flex-end;margin:10px 0}
.pc-pager .dim{margin-right:auto;font-size:12px}
.pc-section{min-width:0}
@media(max-width:1099px){
 html,body{min-width:0;width:100%}
 #app{width:100%;padding:0 8px 100px;overflow-x:clip}
 .topbar.hud{height:auto;min-height:90px;flex-wrap:wrap;margin:0 -8px 12px;padding:10px 12px;gap:8px}
 .topbar.hud .stat-strip{flex-wrap:wrap;margin-left:0;gap:4px}
 .topbar.hud .sfield{padding:3px 6px!important;font-size:11px}
 .topbar.hud .sfield.res img{width:20px;height:20px}
 .topbar.hud .sfield.cr .v{font-size:14px}
 .layout.hubB > .col.main > .panel > .panel-b{padding:10px}
 .layout.hubB .mainhead{flex-wrap:wrap;gap:8px;padding:12px}
 .pc-page .panel-b{padding:12px}
 .pc-page .btn{min-height:40px;white-space:normal}
 .pc-page input,.pc-page select{max-width:100%;min-height:40px;font-size:16px}
 .pc-page .tablewrap{overflow-x:auto;width:100%;max-width:100%;border:1px solid #354147;border-radius:6px}
 .pc-page table.grid{min-width:650px}
 .pc-page .split,.pc-page .hqgrid,.pc-page .bond,.pc-page .bstage-separated,.pc-page .mgrid{display:grid;grid-template-columns:minmax(0,1fr)!important;gap:12px}
 .pc-page .splitmain,.pc-page .bmain,.pc-page .bside,.pc-page .hqmid,.pc-page .gear-warehouse{min-width:0}
 .pc-page .npccol{display:grid;grid-template-columns:85px minmax(0,1fr);gap:8px;align-items:center}
 .pc-page .npccol .cap{grid-column:1/-1}
 .pc-page .npccol img{max-height:130px;object-fit:contain}
 .pc-page .npccol .merch{padding:8px}
 .pc-page .npccol .msub{display:none}
 .pc-page .featrow{display:grid;grid-template-columns:1fr}
 .pc-page .fcardw{display:grid;grid-template-columns:80px 1fr;gap:8px;padding:10px}
 .pc-page .fcardw .fimg{grid-row:1/4;height:75px}
 .pc-page .fcardw .rib{position:static}
 .pc-page .blist{display:flex;overflow-x:auto;max-width:100%;gap:8px;padding-bottom:8px}
 .pc-page .bcard{flex:0 0 205px}
 .pc-page .bvisual{height:410px!important;min-height:410px!important;position:relative}
 .pc-page .bstage-separated .bvisual .bsp.stable-portrait{height:350px!important;bottom:0!important}
 .pc-page .bside{padding:12px;border:1px solid #354147;border-radius:8px}
 .pc-page .bgreet{max-width:100%;font-size:13px}
 .pc-page .bacts,.pc-page .gear-tabs{display:flex;flex-wrap:wrap;gap:6px}
 .pc-page .pc-section-tabs .btn{flex:1 0 auto}
 .pc-page .gear-columns{display:flex;flex-direction:column;gap:12px}
 .pc-page .gear-current,.pc-page .gear-warehouse{width:100%}
 .pc-page .gear-current{order:-1}
 .pc-page .gear-loadouts .lolist{grid-template-columns:1fr}
 .pc-page .gear-heading{flex-wrap:wrap;gap:8px}
 .pc-page .htiles,.pc-page .hidegrid,.pc-page .cxgrid,.pc-page .tgrid{grid-template-columns:repeat(2,minmax(0,1fr))!important}
 .pc-page .hqfig{height:140px;overflow:hidden}
 .pc-page .hqskin{height:140px;object-fit:contain}
 .pc-page .hqban{height:auto;min-height:220px;padding:12px;background-size:cover;display:flex;flex-wrap:wrap}
 .pc-page .hqban-art:before{height:200px}
 .pc-page .hqgo{width:100%;display:flex;gap:6px;flex-wrap:wrap}
 .pc-page .hqsay{width:100%;max-width:100%;gap:8px}
 .pc-page .hqbub{min-width:0;width:auto}
 .pc-page .hqnpc{height:120px;max-width:85px;object-fit:contain}
 .pc-page .passgrid{display:flex;overflow-x:auto;gap:8px}
 .pc-page .pstep{flex:0 0 140px}
 .pc-page .hidegrid{grid-template-columns:1fr!important}
 .pc-page .himg{height:160px;overflow:hidden}
 .rail.dock{height:76px;justify-content:flex-start;overflow-x:auto;gap:2px;padding:0 6px;padding-bottom:env(safe-area-inset-bottom);}
 .dock .dk{width:58px;height:68px;border-radius:8px}
 .dock .dk .uiico{width:30px;height:30px}
 .dock .dk .rl{font-size:10px}
 .dock .dk.go{width:80px;margin:0 4px}
 .dock .dk.go .rl{font-size:13px}
 .dockmore{position:fixed;bottom:80px;left:8px;right:8px;max-height:70dvh;overflow:auto}
 .dockmore .dmtabs{grid-template-columns:repeat(4,minmax(0,1fr))}
 .bond-gallery .gallery-box{width:100%;max-width:calc(100vw - 20px)}
 .gallery-memories{grid-template-columns:1fr}
 .live-strip,.livestrip{max-width:100%;overflow-x:auto}
 .pc-page .cattabs,.pc-page .tabs,.subtabs{overflow-x:auto;max-width:100%;flex-wrap:nowrap}
}
@media(max-width:1099px){
 .pc-page .blist{flex-direction:row;align-items:stretch}
 .pc-page .bcard{height:auto;min-height:106px}
 .pc-page .pc-section-index{flex-wrap:nowrap;overflow:auto;white-space:nowrap}
 .pc-page .pc-section-index a{flex:none}
 .pc-page .pc-workspace>.pc-section-tabs{flex-wrap:nowrap;overflow-x:auto;white-space:nowrap}
 .pc-page .pc-workspace>.pc-section-tabs .btn{flex:none;white-space:nowrap}
}
.pc-shop-layout{display:grid;grid-template-columns:minmax(0,1fr) 260px;gap:14px;align-items:start}
.pc-shop-list{min-width:0}.pc-shop-detail{padding:16px;border:1px solid #354147;border-radius:10px;background:#182126;position:sticky;top:12px}
.pc-shop-art{height:130px;width:100%;object-fit:contain;margin:12px 0}.pc-shop-detail .dim{font-size:12px}.pc-shop-detail .kv{font-size:13px}
.pc-shop-list td.name>.btn{margin-top:8px;display:block}
@media(max-width:1099px){.pc-shop-layout{display:flex;flex-direction:column}.pc-shop-list,.pc-shop-detail{width:100%}.pc-shop-detail{position:static;order:-1}.pc-shop-art{height:80px}.pc-shop-detail .kv{display:grid;grid-template-columns:1fr 1fr}}
@media(max-width:1099px){
 .pc-page .bstage-separated .bvisual .bsp.stable-portrait{height:calc(100% - 94px)!important;flex:1;min-height:0}
 .pc-page .bstage-separated .bvisual .portrait-art{height:100%;width:100%;aspect-ratio:auto;position:absolute;left:0;bottom:0;transform:none}
 .pc-page .bstage-separated .bvisual .portrait-art img{object-fit:contain;object-position:center bottom}
}
.dock-items{display:contents}
@media(max-width:1099px){
 .rail.dock{overflow:visible;backdrop-filter:none}
 .dock-items{display:flex;align-items:center;gap:2px;overflow-x:auto;width:100%;height:76px;scrollbar-width:none}
 .dock-toggle{right:8px}
 .dockmore .dmtabs .dk{width:100%}
 .pc-page .mkbody{grid-template-columns:1fr}
 .pc-page .mklist,.pc-page .mkdet{min-width:0}
 .pc-page .mkbar{flex-wrap:wrap}
}
/* Allow intermediate desktop window widths as well as phones. */
html,body{min-width:0}
@media(min-width:1100px) and (max-width:1279px){
 .pc-page[data-pc-page=bond] .bond{grid-template-columns:210px minmax(0,1fr)}
 .pc-page[data-pc-page=bond] .bstage-separated{grid-template-columns:250px minmax(0,1fr)}
 .pc-shop-layout{grid-template-columns:minmax(0,1fr)}
 .pc-shop-detail{position:static}
 .dock .dk{width:70px}.dock .dk.go{width:100px;margin:0 5px}
}
@media(max-width:1099px){.pc-page .cxsteps{grid-template-columns:1fr}.pc-page .cxstep{min-width:0;flex-wrap:wrap}.pc-page .cxstep .btn{margin-left:auto}}
/* Mockup master/detail layouts, not just a shared skin. */
.ui-toolbar,.ui-tabs{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:12px}.ui-toolbar input{flex:1;min-width:100px}.ui-tabs .btn{white-space:nowrap}
.ui-three{display:grid;grid-template-columns:minmax(280px,1fr) minmax(390px,1.2fr) minmax(230px,.75fr);gap:14px;align-items:start}
.ui-candidate-list{display:flex;flex-direction:column;gap:10px}
.ui-candidate{display:flex;gap:14px;width:100%;text-align:left;border:1px solid #36434b;background:#172126;border-radius:10px;color:var(--ink);padding:12px;cursor:pointer}
.ui-candidate.on,.ui-list-item.on{border-color:var(--amber);box-shadow:inset 0 0 0 1px var(--amber)}
.ui-candidate>img{width:90px;height:128px;object-fit:cover;object-position:50% 10%;border-radius:6px;background:#101619}
.ui-candidate>div{min-width:0;flex:1}.ui-candidate b{font-size:17px}.ui-candidate span,.ui-candidate strong{display:block;margin-top:5px;font-size:12px}.ui-candidate strong{color:var(--amber);font-size:15px}
.ui-selected,.ui-compare,.ui-detail{border:1px solid #36434b;border-radius:10px;background:#182126;padding:16px;min-width:0}
.ui-selected h3,.ui-compare h3{margin:18px 0 9px;padding-bottom:8px;border-bottom:1px solid #354147;font-size:15px}
.ui-hero-head{display:flex;gap:14px;align-items:center}.ui-hero-head>img{width:140px;height:185px;object-fit:cover;object-position:50% 10%;border-radius:6px}.ui-hero-head h2{font-size:22px;margin:0}.ui-hero-head p{font-size:12px}
.ui-weapon{display:flex;gap:14px;align-items:center}.ui-weapon .ico{width:100px;height:70px;object-fit:contain}
.ui-stat-five{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}.ui-stat-five>div,.ui-costs>div{padding:9px 5px;border:1px solid #344149;border-radius:5px;text-align:center}.ui-stat-five span,.ui-costs span{display:block;font-size:11px;color:var(--ink2)}.ui-stat-five b{font-size:18px}
.ui-costs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.ui-costs b{font-size:13px;color:var(--amber)}
.ui-compare dl>div{display:grid;grid-template-columns:1fr 1fr 42px;gap:4px;border-bottom:1px solid #354147;padding:10px 0;font-size:13px}.ui-compare dd{margin:0;text-align:right}
.ui-master-detail{display:grid;grid-template-columns:minmax(260px,.8fr) minmax(0,1.25fr);gap:16px;align-items:start}.ui-master-list{min-width:0}.ui-card-host{grid-column:1/-1;width:100%}
.ui-list-item{display:flex;align-items:center;gap:12px;width:100%;padding:12px;margin-bottom:8px;border-radius:8px;border:1px solid #344149;background:#172126;color:var(--ink);text-align:left;cursor:pointer;min-height:80px}
.ui-list-item>img{width:64px;height:70px;object-fit:contain;flex:none}.ui-list-item>div{min-width:0;flex:1}.ui-list-item b{display:block;font-size:15px}.ui-list-item span{display:block;font-size:12px;color:var(--ink2);margin-top:5px;line-height:1.6}
.ui-detail{position:sticky;top:14px;min-height:220px}.ui-detail>[hidden]{display:none!important}.ui-detail .crow{display:block;background:none!important}.ui-detail .crow:before{display:none}.ui-detail .crow .cdif{position:static;display:flex;gap:10px;align-items:center;width:auto;padding:8px}.ui-detail .crow .cmid{padding:12px 0}.ui-detail .crow .cboss{max-height:160px;position:static;float:right}.ui-detail .crow .cbody{display:block;padding:12px 0}.ui-detail .crow .ct,.ui-detail .crow .cm{flex-wrap:wrap}.ui-detail .crow .cact{flex-wrap:wrap}
.ui-detail .perkline,.ui-detail .quest,.ui-detail .hidecard,.ui-detail .tcard{margin:0;width:100%}.ui-detail .plh{padding-bottom:14px}.ui-detail .perk{margin-top:12px}.ui-detail .hidecard .himg{height:180px}.ui-detail .cxcell{min-height:260px;display:flex;flex-direction:column;justify-content:center;align-items:center}.ui-detail .cxcell .cxi{width:180px;height:180px}
.ui-fold{padding:12px;border:1px solid #344149;border-radius:8px;margin-bottom:12px}.ui-fold summary{cursor:pointer;color:var(--amber)}
.ui-talent-layout{display:grid;grid-template-columns:250px minmax(0,1fr);gap:16px}.ui-talent-weapons{position:sticky;top:14px}.ui-talent-weapons .talw{display:flex;flex-direction:column}.ui-talent-weapons .tw{width:100%;min-width:0}.ui-talent-main{min-width:0}
.ui-inf-recruit{display:grid;grid-template-columns:240px minmax(0,1fr) 260px;gap:14px;margin:16px 0}.ui-inf-recruit .infkinds{display:flex;flex-direction:column}.ui-inf-recruit .infkind{width:100%;display:flex}.ui-inf-recruit .infregions{grid-template-columns:repeat(2,minmax(0,1fr))}
.ui-daily-layout{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;align-items:start}.ui-daily-layout>.tablewrap{margin:0}
.ui-ledger-layout{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:16px;align-items:start}.ui-ledger-bar{display:grid;grid-template-columns:1fr auto;gap:4px;padding:12px 0;font-size:12px}.ui-ledger-bar i{grid-column:1/-1;display:block;background:var(--amber);height:6px;border-radius:4px;max-width:100%}
.ui-opponent .btn{width:100%;margin-top:16px}
@media(max-width:1399px){.ui-three{grid-template-columns:minmax(260px,.8fr) minmax(0,1.2fr)}.ui-three>.ui-compare{grid-column:1/-1}.ui-three>.ui-compare dl{display:grid;grid-template-columns:repeat(5,1fr);gap:12px}.ui-three>.ui-compare dl>div{grid-template-columns:1fr}.ui-three>.ui-compare dd{text-align:left}}
@media(max-width:1099px){.ui-three,.ui-master-detail,.ui-talent-layout,.ui-inf-recruit,.ui-daily-layout,.ui-ledger-layout{grid-template-columns:minmax(0,1fr)}.ui-selected,.ui-detail,.ui-compare{padding:12px;position:static}.ui-candidate>img{width:70px;height:100px}.ui-hero-head>img{width:110px;height:140px}.ui-stat-five{gap:3px}.ui-three>.ui-compare dl{grid-template-columns:1fr}.ui-three>.ui-compare dl>div{grid-template-columns:1fr 1fr 45px}.ui-master-list{max-height:430px;overflow:auto;scrollbar-gutter:stable}.ui-talent-weapons{position:static}.ui-talent-weapons .talw{flex-direction:row;overflow:auto}.ui-talent-weapons .tw{flex:0 0 230px}.ui-inf-recruit .infkinds{flex-direction:row;overflow:auto}.ui-inf-recruit .infkind{flex:0 0 210px}.ui-costs{grid-template-columns:1fr}.ui-list-item span{font-size:12px}.ui-detail .crow{padding:10px}.ui-detail .crow .cbody{min-width:0}.ui-detail .crow .cboss{float:none}.ui-detail .crow .cdif{flex-wrap:wrap}.ui-detail .crow .cm{display:flex;white-space:normal}.ui-detail .crow .cact{display:flex}.ui-talent-main .tgrid{display:block}.ui-detail .cxcell .cxi{width:140px;height:140px}}

.ui-story-layout{display:grid;grid-template-columns:230px minmax(0,1fr);gap:16px;align-items:start}.ui-story-layout .stchs{display:flex;flex-direction:column;gap:8px}.ui-story-layout .stch{width:100%;text-align:left}.ui-summary-layout{display:grid;grid-template-columns:minmax(0,1fr) 360px;gap:16px;align-items:start}.ui-summary-side{min-width:0;display:flex;flex-direction:column;gap:12px}
@media(max-width:1099px){.ui-story-layout,.ui-summary-layout{grid-template-columns:minmax(0,1fr)}.ui-story-layout .stchs{flex-direction:row;overflow-x:auto}.ui-story-layout .stch{min-width:160px}}

[data-pc-page="manual"] .mgrid{grid-template-columns:210px minmax(0,1fr) 180px}.ui-manual-links{display:flex;flex-direction:column;gap:8px}.ui-fold summary,.ui-rules summary{cursor:pointer;padding:12px;color:var(--amber)}
@media(max-width:1099px){[data-pc-page="manual"] .mgrid{grid-template-columns:minmax(0,1fr)}.ui-manual-links{flex-direction:row;flex-wrap:wrap}.ui-manual-links h3{width:100%}.ui-manual-links .wide{width:auto}}

/* Mobile: stacked NPC cards must not remain sticky over the contract body. */
@media(max-width:1099px){
 .topbar.hud{position:relative;top:auto;height:auto;min-height:0}
 .topbar.hud .hudop{width:100%;max-width:100%;min-width:0;flex:1 1 100%;align-items:flex-start}
 .topbar.hud .hudop .hs{min-width:0;flex:1}
 .topbar.hud .hudop b{white-space:normal;flex-wrap:wrap;line-height:1.4}
 .topbar.hud .hudop .hbars{flex-wrap:wrap;gap:5px 12px}
 .topbar.hud .hudop .hb{min-width:0;max-width:100%}
 .topbar.hud .hudop .hb .bar{width:90px}
 .topbar.hud .hudop .hn{white-space:normal}
 .topbar.hud .stat-strip{width:100%;min-width:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
 .topbar.hud .sfield.res{gap:3px;padding:4px!important}
 .topbar.hud .sfield.res img{width:16px;height:16px}
 .topbar.hud .sfield .v{font-size:13px}
 .pc-page .npccol{position:static;top:auto;min-width:0;max-width:100%;align-self:auto}
 .pc-page .npccol>.panel,.pc-page .npccol>.nextstep{grid-column:1/-1;width:100%;min-width:0}
 .pc-page .npccol .kv{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
 .pc-page .npccol .kv dt,.pc-page .npccol .kv dd{white-space:normal;overflow-wrap:break-word}
 .pc-page .hidex,.pc-page .hidegrid{min-width:0;max-width:100%}
 #app{padding-bottom:calc(120px + env(safe-area-inset-bottom,0px))}
 .bottomDock{padding-bottom:env(safe-area-inset-bottom,0px)}
}

@media(max-width:700px){
 .dock-items{width:calc(100% - 64px);padding-right:4px}
 .rail.dock .dk.more{position:absolute;right:4px;bottom:0;height:76px;background:#172125;border-left:1px solid var(--line);z-index:3}
 .pc-page .tablewrap{border:0;overflow:visible}
 .pc-page table.phone-card-table{display:block;width:100%;min-width:0!important}
 .pc-page .phone-card-table thead{display:none}
 .pc-page .phone-card-table tbody{display:block;width:100%}
 .pc-page .phone-card-table tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;padding:12px;margin-bottom:10px;border:1px solid var(--line2);border-radius:10px;background:var(--panel2)}
 .pc-page .phone-card-table tbody tr[hidden]{display:none!important}
 .pc-page .phone-card-table td{display:block;min-width:0;width:auto!important;padding:0!important;border:0!important;text-align:left!important;white-space:normal!important;overflow-wrap:anywhere}
 .pc-page .phone-card-table td:before{content:attr(data-label);display:block;font-size:11px;color:var(--ink3);margin-bottom:3px}
 .pc-page .phone-card-table td[data-label=""]:before{display:none}
 .pc-page .phone-card-table td.phone-cell-wide{grid-column:1/-1}
 .pc-page .phone-card-table td .btn{max-width:100%;margin:3px 4px 3px 0}
 .pc-page .phone-card-table td.name .ico{float:left;margin-right:8px}
 .pc-page .pc-section-index{display:none}
 .pc-page .ui-master-list{max-height:none;overflow:visible}
 .pc-page .ui-list-item{padding:10px}
 .pc-page .himg .hlabel,.pc-page .hidex .hlabel{white-space:normal}
 .pc-page .pc-section-tabs{display:flex;flex-wrap:wrap;gap:6px}
}

.phone-equipped-fold>summary{cursor:pointer;padding:10px;color:var(--amber);font-weight:700}.ui-detail,.ui-selected{scroll-margin-top:12px}
@media(min-width:701px){.phone-equipped-fold>summary{display:none}}

@media(max-width:700px){.pc-page .gear-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}.pc-page .gear-tabs .btn{white-space:normal;word-break:keep-all;font-size:12px;padding:8px 4px;min-height:44px}.rail.dock .dk.more{display:flex;flex-direction:column;align-items:center;justify-content:center}}

/* Headquarters mockup: two columns and three aligned rows. */
.ui-home-dashboard{display:grid;grid-template-columns:minmax(0,2fr) minmax(330px,1fr);gap:12px;align-items:start}
.ui-home-dashboard>.hqban{grid-column:1;grid-row:1;min-width:0}
.ui-home-dashboard>.ui-home-operator{grid-column:2;grid-row:1;min-height:228px;display:grid;grid-template-columns:110px minmax(0,1fr);grid-template-rows:45px 1fr;margin:0}
.ui-home-operator>.panel-h{grid-column:1/-1}.ui-home-operator .hqfig{height:170px!important;grid-column:1;grid-row:2;align-self:center;background:none}.ui-home-operator .hqskin{width:100%;height:170px!important;object-fit:contain}.ui-home-operator .hqpet{width:38px}.ui-home-operator>.panel-b{grid-column:2;grid-row:2;padding:12px!important}.ui-home-operator .hqcs{font-size:17px}.ui-home-operator .sub{font-size:11px}.ui-home-operator .kv{display:none}.ui-home-operator .hqco{font-size:11px}.ui-home-operator .btn{margin-top:6px!important}
.ui-home-status{grid-column:1;grid-row:2}.ui-home-recommend{grid-column:2;grid-row:2}.ui-home-shortcuts{grid-column:1;grid-row:3}.ui-home-news{grid-column:2;grid-row:3;max-height:270px;overflow:auto}
.ui-home-six{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;padding:12px}.ui-home-stat{display:flex;align-items:center;gap:12px;padding:12px;min-width:0;min-height:105px;text-align:left;border:1px solid var(--line2);border-radius:8px;background:#162025;color:var(--ink);cursor:pointer}.ui-home-stat:hover{border-color:var(--amber)}.ui-home-stat>img{width:62px;height:65px;object-fit:contain;flex:none}.ui-home-stat>span{display:flex;flex-direction:column;min-width:0}.ui-home-stat strong{font-size:23px;color:var(--amber);line-height:1.5}.ui-home-stat small{font-size:11px;color:var(--ink3)}
.ui-home-recommend-list{padding:10px;display:grid;gap:8px}.pc-page[data-pc-page=home] .ui-home-recommend .htile{min-height:70px;padding:10px;display:grid;grid-template-columns:40px minmax(0,1fr);gap:2px 10px;text-align:left}.ui-home-recommend .htile .ti{width:35px;height:35px;grid-column:1;grid-row:1/4}.ui-home-recommend .htile .tt,.ui-home-recommend .htile .tv,.ui-home-recommend .htile .ts{grid-column:2;position:static}.ui-home-recommend .htile .tv{font-size:16px}.ui-home-extra{padding:0 10px 10px}.ui-home-extra>summary{cursor:pointer;color:var(--amber);font-size:12px}.ui-home-extra>.htile{width:100%;margin-top:8px}
.ui-home-shortcuts .hqgo{position:static;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;width:auto;padding:12px}.ui-home-shortcuts .hqgo .btn{min-height:70px;font-size:14px;text-align:left}.ui-home-dashboard .hqban .hqsay{max-width:100%;padding:12px}.ui-home-dashboard .hqban .hqbub{max-width:calc(100% - 85px)}.ui-home-dashboard .hqban .hqnpc{max-height:160px}
@media(max-width:1099px){.ui-home-dashboard{grid-template-columns:minmax(0,1fr)}.ui-home-dashboard>*{grid-column:1!important;grid-row:auto!important}.ui-home-dashboard>.hqban{order:0}.ui-home-operator{order:1}.ui-home-status{order:2}.ui-home-recommend{order:3}.ui-home-shortcuts{order:4}.ui-home-news{order:5}.ui-home-six{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ui-home-stat{padding:8px;gap:6px;min-height:100px}.ui-home-stat>img{width:34px;height:42px}.ui-home-stat strong{font-size:20px}.ui-home-stat b{font-size:12px}.ui-home-shortcuts .hqgo{grid-template-columns:1fr}.ui-home-shortcuts .hqgo .btn{min-height:44px}.ui-home-news{max-height:none}}

.ui-gallery-list{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));align-content:start;gap:8px;max-height:none}.ui-gallery-list>.ui-toolbar,.ui-gallery-list>.pc-pager{grid-column:1/-1}.ui-gallery-list>.ui-list-item{display:flex;flex-direction:column;text-align:center;min-height:125px;padding:10px;gap:5px}.ui-gallery-list>.ui-list-item img{width:100%;height:70px;object-fit:contain}.ui-gallery-list .ui-list-item>div{width:100%}.ui-gallery-list .ui-list-item span{font-size:10px;max-height:32px;overflow:hidden}.ui-gallery-list .ui-list-item b{font-size:12px}
[data-pc-page=perk] .ui-master-detail{grid-template-columns:210px minmax(0,1fr)}[data-pc-page=perk] .ui-detail>.perkline{display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:16px}[data-pc-page=perk] .perkline>.plh{grid-column:1/-1}.ui-perk-nodes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;align-content:start}.ui-perk-node{min-height:125px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:10px;border:1px solid var(--line2);border-radius:8px;background:#172126;color:var(--ink);cursor:pointer}.ui-perk-node.on{border-color:var(--amber);background:#2b281b}.ui-perk-node.lock{opacity:.65}.ui-perk-node b{font-size:13px}.ui-perk-node small{color:var(--ink3)}.ui-perk-detail{padding:16px;border:1px solid var(--line2);border-radius:8px}.ui-perk-detail .perk{margin:0;border:0!important;padding:0!important}.ui-perk-detail .pd{margin:15px 0}
@media(min-width:1100px){#app{max-width:1700px}.layout.hubB>.col.main>.panel>.mainhead h3{font-size:26px}.pc-page{font-size:14px}.pc-page .ui-selected h2{font-size:24px}.pc-page .panel-h h3{font-size:17px}.pc-page .pc-section-index{display:none}}
@media(max-width:1099px){.ui-gallery-list{grid-template-columns:repeat(2,minmax(0,1fr))}[data-pc-page=perk] .ui-master-detail,[data-pc-page=perk] .ui-detail>.perkline{grid-template-columns:minmax(0,1fr)}.ui-perk-nodes{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-perk-node{min-height:90px}}

.pc-page .split.ui-without-npc{grid-template-columns:minmax(0,1fr)!important}.pc-page .ui-npc-header{position:static;display:grid;grid-template-columns:80px minmax(0,1fr) auto;align-items:center;gap:12px;padding:10px 12px;margin-bottom:12px;border:1px solid var(--line2);border-radius:8px;min-width:0}.pc-page .ui-npc-header>.cap{display:none}.pc-page .ui-npc-header .npcart,.pc-page .ui-npc-header .mportrait{width:70px;height:100px;object-fit:contain;margin:0}.ui-npc-header>.say{grid-column:2;border:0;padding:6px;background:none}.ui-npc-stats>summary{cursor:pointer;color:var(--amber);padding:8px;white-space:nowrap}.ui-npc-stats[open]{grid-column:1/-1}.ui-npc-stats .panel{margin-top:8px}.ui-npc-header .kv{grid-template-columns:repeat(4,minmax(0,1fr))}.pc-page .ui-npc-header .merch.say{padding:0;margin:0;display:flex;gap:10px;align-items:center;grid-column:1/3}.ui-npc-header .merch .mtext{min-width:0}.ui-npc-header .nextstep{grid-column:2}
.ui-goals-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:16px;align-items:start}.ui-goals-layout>div,.ui-goals-layout>aside{min-width:0}.ui-goals-pass-track{margin-top:16px;padding:12px;border:1px solid var(--line2);border-radius:8px}.pc-page .ui-goals-pass-track .pstep{flex:0 0 40px;min-width:40px;font-size:10px;padding:6px 2px}.ui-goals-pass-track .pstep span{font-size:9px}.ui-goals-pass-track .passgrid{margin:0}
@media(max-width:1099px){.ui-goals-layout{grid-template-columns:1fr}.pc-page .ui-npc-header{grid-template-columns:60px minmax(0,1fr);gap:8px}.pc-page .ui-npc-header .npcart{width:55px;height:80px}.ui-npc-stats{grid-column:1/-1}.ui-npc-header .kv{grid-template-columns:1fr 1fr}}

.ui-service-six{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px;margin-bottom:20px}.ui-service-six>div{display:flex;flex-direction:column;gap:10px;padding:14px;background:#182126;border:1px solid var(--line2);border-radius:8px}.ui-service-six span{font-size:12px;color:var(--ink3)}.ui-service-six b{font-size:18px;color:var(--amber)}.ui-hideout-workspace{display:grid;grid-template-columns:minmax(0,1fr) 280px;gap:16px;align-items:start}.ui-hideout-workspace .ui-master-detail{grid-template-columns:240px minmax(0,1fr)}.ui-hideout-queues{display:flex;flex-direction:column;gap:12px}.ui-hideout-workspace>.pc-workspace{min-width:0}.ui-hideout-workspace .himg{max-height:200px}
@media(max-width:1099px){.ui-service-six{grid-template-columns:repeat(2,minmax(0,1fr))}.ui-service-six>div{padding:10px}.ui-service-six b{font-size:15px}.ui-hideout-workspace,.ui-hideout-workspace .ui-master-detail{grid-template-columns:minmax(0,1fr)}}
@media(max-width:700px){.pc-page .hidepano{max-height:none;overflow:visible;padding-bottom:8px;display:flex;flex-wrap:wrap;gap:5px}.pc-page .hidepano>img{width:100%;height:auto;display:block}.pc-page .hidepano .hroom{position:static;width:auto!important;min-height:0;display:inline-flex;padding:4px 6px;border:1px solid var(--line2);border-radius:5px;background:#192126}.pc-page .hidepano .hroom span{font-size:11px;white-space:normal}.pc-page .hidepano .hroom:before{display:none}}

[data-pc-page=ranking] .recgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}[data-pc-page=ranking] .rec{padding:16px;border:1px solid var(--line2);border-radius:8px;background:#182126}[data-pc-page=ranking] .rec .rb{font-size:24px;color:var(--amber)}[data-pc-page=ranking] .ui-summary-layout{grid-template-columns:minmax(0,1fr) 350px}.ui-region-detail h4{margin-top:18px}.ui-region-detail .kv dd{font-size:20px;color:var(--amber)}
@media(max-width:1099px){[data-pc-page=ranking] .recgrid,[data-pc-page=ranking] .ui-summary-layout{grid-template-columns:minmax(0,1fr)}}
.ui-gallery-list .missing img{filter:brightness(0);opacity:.45}.ui-detail .cxcell p{margin-top:16px}.ui-detail .cxcell{height:auto;min-height:250px;padding:18px}

.pc-page[data-pc-page=home] .ui-home-recommend-list{display:flex;flex-direction:column}.pc-page[data-pc-page=home] .ui-home-recommend .htile{grid-column:auto!important;width:100%;min-height:65px}.pc-page[data-pc-page=home] .ui-home-news{max-height:190px;overflow:auto}.pc-page[data-pc-page=home] .ui-home-news .log{max-height:140px!important}.ui-home-offer{background:rgba(10,15,18,.8);border:0;margin:0;min-width:0;max-width:100%;align-self:end;display:flex;padding:8px 12px;gap:12px;max-height:200px}.ui-home-offer>img{height:160px!important;width:90px!important;object-fit:contain}.ui-home-offer .hs-b{min-width:0}.ui-home-offer .hs-b p{font-size:13px}.ui-home-offer .btn{padding:6px 10px}.ui-home-extra .nextstep{margin-top:8px}
@media(max-width:1099px){.pc-page[data-pc-page=home] .ui-home-news{max-height:none}.ui-home-offer{max-height:none}.ui-home-offer>img{height:115px!important;width:65px!important}}

.ui-front-three{grid-template-columns:220px minmax(0,1fr) 350px!important}.ui-front-regions{min-width:0;border:1px solid var(--line2);border-radius:8px;padding:16px;background:#111d22}.ui-front-region-group{padding:10px 0;border-bottom:1px solid var(--line2)}.ui-front-region-group h4{display:flex;gap:8px;align-items:center;font-size:13px;margin:0 0 8px}.ui-front-region-group h4 img{width:22px;height:22px;object-fit:contain}.ui-front-region-group>div{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.ui-front-region{display:flex;flex-direction:column;text-align:left;gap:5px;background:#1c292f;border:1px solid var(--line2);border-radius:6px;color:var(--ink);padding:6px;cursor:pointer}.ui-front-region img{width:100%;height:55px;object-fit:cover}.ui-front-region:hover{border-color:var(--amber)}.ui-front-region span{font-size:12px}
@media(max-width:1399px){.ui-front-three{grid-template-columns:180px minmax(0,1fr)!important}.ui-front-three>.ui-detail{grid-column:1/-1}}@media(max-width:1099px){.ui-front-three{grid-template-columns:1fr!important}.ui-front-region-group>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Keep the rebuilt home rows intact above the mobile breakpoint. */
@media(min-width:1100px){.pc-page[data-pc-page=home] .ui-home-dashboard>.ui-home-news{grid-column:2;grid-row:3}.pc-page[data-pc-page=home] .ui-home-dashboard>.ui-home-shortcuts{grid-column:1;grid-row:3}}
.pc-page.shop-preview-page .split{display:block!important}.pc-page.shop-preview-page .splitmain{min-width:0}.shop-preview-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(440px,1fr);gap:14px;align-items:start}.shop-preview-left,.shop-preview-right{min-width:0}.shop-preview-left>.ui-npc-header{display:grid!important;grid-template-columns:64px minmax(0,1fr)!important;min-height:82px!important;padding:10px!important;margin:0 0 12px!important;align-items:center}.shop-preview-left>.ui-npc-header>.cap,.shop-preview-left .msub,.shop-preview-left .mt{display:none!important}.shop-preview-left>.ui-npc-header .npcart{width:58px!important;height:66px!important;object-fit:contain!important;margin:0!important;grid-column:1!important;grid-row:1!important}.shop-preview-left>.ui-npc-header .merch{grid-column:2!important;grid-row:1!important;padding:0!important}.shop-preview-left .mline{margin:0!important;padding:6px 0!important;font-size:14px!important}.shop-preview-left .cattabs{display:grid!important;grid-template-columns:repeat(6,minmax(0,1fr));gap:6px;margin-bottom:10px}.shop-preview-left .cattabs .tab{min-width:0;padding:8px 3px!important;display:flex!important;align-items:center;justify-content:center;gap:5px;font-size:12px!important}.shop-preview-left .cattabs img{width:23px!important;height:23px!important;object-fit:contain}.shop-preview-left .srow{margin:0 0 8px}.shop-preview-filters{display:flex;gap:8px;margin-bottom:10px}.shop-preview-filters select{min-width:0;flex:1}.shop-preview-products{display:grid;gap:8px}.shop-preview-product{display:grid;grid-template-columns:minmax(180px,1.2fr) minmax(130px,1fr) auto;gap:8px;align-items:center;padding:9px;border:1px solid #33454e;border-radius:8px;background:#182126;min-height:92px}.shop-preview-product.selected{border:2px solid #e7b33d;padding:8px;background:#202b2f}.shop-preview-pick{display:flex;gap:10px;align-items:center;text-align:left;border:0;background:none;color:var(--ink);padding:0;min-width:0;cursor:pointer}.shop-preview-pick b{display:block;font-size:16px}.shop-preview-pick small{display:block;color:var(--ink2);font-size:11px;line-height:1.4;margin-top:5px}.shop-preview-icon{width:86px;height:66px;flex-shrink:0;background:#202c32;border:1px solid #34474f;border-radius:5px;display:grid;place-items:center}.shop-preview-icon img{width:76px!important;height:56px!important;object-fit:contain!important;margin:0!important}.shop-preview-rowstats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px;font-size:12px}.shop-preview-rowstats span{display:block;color:var(--ink2);font-size:10px}.shop-preview-rowstats b{font-size:12px}.shop-preview-rowbuy{display:flex;flex-direction:column;gap:5px}.shop-preview-rowbuy .btn{font-size:12px;white-space:nowrap}.shop-preview-hero,.shop-preview-spec,.shop-preview-compare{border:1px solid #33454e;border-radius:8px;background:#151e23;padding:15px;margin:0 0 10px}.shop-preview-hero{display:grid;grid-template-columns:130px minmax(0,1fr) 120px;gap:12px;align-items:center;min-height:190px}.shop-preview-bigart img{width:125px!important;height:120px!important;object-fit:contain!important;margin:0!important}.shop-preview-hero h2{font-size:23px!important;margin:0 0 8px}.shop-preview-hero p{font-size:12px;line-height:1.5}.shop-preview-purchase{border-left:1px solid #34474f;padding-left:10px;display:grid;gap:8px}.shop-preview-purchase strong{color:#edb339;font-size:21px}.shop-preview-buy{display:grid;gap:6px}.shop-preview-buy select{width:100%;font-size:12px}.shop-preview-buy .btn{width:100%;min-height:40px}.shop-preview-detailstats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.shop-preview-detailstats>div{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #293c44;padding:7px;font-size:13px}.shop-preview-detailstats span{color:var(--ink2)}.shop-preview-right h3{font-size:16px;margin:0 0 12px}.shop-preview-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px}.shop-preview-comparison>div{display:grid;gap:8px;border:1px solid #34474f;padding:12px;border-radius:6px}.shop-preview-comparison img{width:100%!important;height:75px!important;object-fit:contain!important}.shop-preview-comparison span{color:var(--ink2);font-size:12px}.shop-preview-compare .kv{margin-top:12px}.shop-preview-page>.ui-npc-header{display:none!important}
@media(max-width:1100px){.shop-preview-grid{grid-template-columns:minmax(0,1fr) minmax(320px,.8fr)}.shop-preview-product{grid-template-columns:minmax(0,1fr) auto}.shop-preview-rowstats{grid-column:1/-1;grid-row:2;grid-template-columns:repeat(6,minmax(0,1fr))}.shop-preview-hero{grid-template-columns:100px 1fr}.shop-preview-purchase{grid-column:1/-1;border-left:0;border-top:1px solid #34474f;padding:8px 0 0}.shop-preview-buy{grid-template-columns:repeat(2,minmax(0,1fr))}.shop-preview-bigart img{width:95px!important}}
@media(max-width:700px){.shop-preview-grid{display:flex;flex-direction:column}.shop-preview-left,.shop-preview-right{width:100%}.shop-preview-left .cattabs{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-preview-pick b{font-size:14px}.shop-preview-icon{width:64px}.shop-preview-icon img{width:58px!important}.shop-preview-rowstats{grid-template-columns:repeat(3,minmax(0,1fr))}.shop-preview-detailstats{grid-template-columns:1fr}.shop-preview-filters{flex-wrap:wrap}.shop-preview-left .scount{font-size:11px}.shop-preview-right{scroll-margin-top:10px}.shop-preview-hero{min-height:0}.shop-preview-product{min-height:115px}.shop-preview-comparison>div{padding:8px;font-size:12px}}
/* Compact desktop procurement rows so six products remain within the first screen. */
@media(min-width:1101px){.shop-preview-product{min-height:72px;padding:6px}.shop-preview-product.selected{padding:5px}.shop-preview-icon{height:54px}.shop-preview-icon img{height:44px!important}.shop-preview-pick b{font-size:15px}.shop-preview-pick small{font-size:10px;margin-top:3px}.shop-preview-rowstats{gap:3px}.shop-preview-left>.ui-npc-header{min-height:68px!important;padding:6px!important;margin-bottom:8px!important}.shop-preview-left>.ui-npc-header .npcart{height:54px!important}.shop-preview-left .cattabs .tab{min-height:44px!important;height:44px!important;flex-direction:row!important}.shop-preview-left .cattabs{margin-bottom:8px}.shop-preview-hero{min-height:170px}.shop-preview-page .pc-pager{padding:6px}}
.shop-preview-rowbuy .btn{background:#dca833;color:#10171b;border-color:#dca833;font-weight:bold}.shop-preview-rowbuy .btn:disabled{opacity:.45}
/* Review rebuild: compact panels with full illustrations and readable phone flow. */
.review-rebuild{padding-bottom:90px}.review-rebuild .review-panel{margin:0}.review-panel .panel-b{padding:12px}.review-stat-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.review-stat-cards>div{border:1px solid var(--line);border-radius:8px;background:#121a1e;padding:14px;display:flex;flex-direction:column;gap:8px}.review-stat-cards span{color:var(--ink3);font-size:12px}.review-stat-cards b{color:var(--amber);font-size:22px}.review-filter{display:flex;gap:6px;margin-bottom:10px}.review-portrait-caption{display:flex;justify-content:space-between;gap:8px;color:var(--ink3);font-size:12px}.review-portrait-caption b{color:var(--ink)}.review-hire-compare{display:grid;grid-template-columns:1fr 1fr;gap:10px}.review-hire-compare>div{display:flex;flex-direction:column;align-items:center;background:#111a1e;border:1px solid var(--line);border-radius:8px;padding:8px}.review-hire-compare img{width:100%;height:130px;object-fit:contain}.review-hire-weapons{display:grid;grid-template-columns:1fr 1fr;gap:8px}.review-hire-weapons>div{display:flex;flex-direction:column;gap:8px;align-items:center;font-size:12px}.review-hire-weapons img{max-width:110px;max-height:60px;object-fit:contain}.review-operator-label{display:flex;flex-direction:column;gap:6px;margin-bottom:14px}.review-operator-label b{font-size:20px}.review-operator-label span{color:var(--ink3)}.review-daily-art{width:100%;height:200px;object-fit:cover;display:block;border-radius:8px;margin-bottom:14px}.review-rebuild .ui-daily-layout{grid-template-columns:minmax(0,1.3fr) minmax(300px,1fr)}.review-rebuild .ui-daily-layout>.tablewrap{grid-row:2;grid-column:1/-1}.review-daily-result{grid-column:2;grid-row:1}.review-daily-layout{display:grid;grid-template-columns:1.3fr 1fr;gap:14px}.review-rebuild .ui-home-shortcuts .hqgo .btn{display:flex;align-items:center;gap:10px}.review-rebuild .ui-home-shortcuts .hqgo img{width:48px;height:55px;object-fit:contain}.review-rebuild[data-pc-page=hideout] .ui-detail .himg{height:230px;max-height:none;aspect-ratio:auto;background:#101619;margin:0 0 14px}.review-rebuild[data-pc-page=hideout] .ui-detail .himg img{object-fit:contain}.review-fold{border:1px solid var(--line);border-radius:8px;padding:10px;margin-top:12px}.review-fold summary{cursor:pointer;color:var(--amber)}
@media(max-width:700px){.review-rebuild{padding-bottom:100px}.review-hire-compare img{height:110px}.review-stat-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.review-rebuild .ui-daily-layout,.review-daily-layout{grid-template-columns:1fr}.review-daily-result{grid-column:1;grid-row:auto}.review-rebuild .ui-daily-layout>.tablewrap{grid-row:auto}.review-rebuild[data-pc-page=hideout] .ui-detail .himg{height:210px}.review-rebuild .ui-three>.ui-compare{grid-column:1}.review-rebuild .ui-home-shortcuts .hqgo img{width:35px;height:38px}}
@media(min-width:1100px){.review-rebuild[data-pc-page=hire] .ui-three{grid-template-columns:320px minmax(420px,1fr) 340px;gap:12px}.review-rebuild[data-pc-page=hire] .ui-selected,.review-rebuild[data-pc-page=hire] .ui-compare{padding:12px}.review-rebuild[data-pc-page=hire] .ui-hero-head>img{height:115px;width:100px}.review-rebuild[data-pc-page=hire] .ui-selected h3{margin:10px 0 6px;padding-bottom:5px}.review-rebuild[data-pc-page=hire] .ui-selected .ui-weapon img{max-height:45px}.review-rebuild[data-pc-page=hire] .ui-stat-five>div{padding:8px}.review-rebuild[data-pc-page=hire] .ui-costs>div{padding:8px}.review-rebuild[data-pc-page=hire] .ui-selected p.dim{font-size:12px;line-height:1.5}.review-rebuild[data-pc-page=hire] .review-hire-compare img{height:100px}.review-rebuild[data-pc-page=hire] .ui-compare dl>div{padding:7px 0}.review-rebuild[data-pc-page=hire] .ui-candidate{min-height:110px;padding:8px}.review-rebuild[data-pc-page=hire] .ui-candidate>img{height:100px;width:70px}}
.review-column-title{margin:0 0 12px;padding-bottom:10px;border-bottom:1px solid var(--line);font-size:17px}.review-departure{margin-top:16px!important}.review-rebuild[data-pc-page=market] .mkbody{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(340px,1fr);gap:16px}.review-market-list{min-width:0}.review-market-list .mkcats{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}.review-market-list .mkcat{width:auto;min-width:95px;padding:8px}.review-market-list .mklbl{flex-basis:100%;padding:6px 0}.review-market-list .mkchk{font-size:12px;padding:4px}.review-market-list .mkgrid{display:flex;flex-direction:column;gap:6px}.review-market-row{display:grid;grid-template-columns:minmax(0,1fr) 180px;gap:12px;min-height:78px;padding:10px;border:1px solid var(--line);border-radius:7px;position:relative}.review-market-row .mktop{margin:0}.review-market-row .mkic{width:85px;height:55px}.review-market-row .mkft{border:0;margin:0;padding:0;justify-content:space-between}.review-market-row .mktag{display:none}.review-rebuild[data-pc-page=market] .mkdet{position:static;padding:14px}.review-career-grid,.review-company-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}.review-career-grid>.panel,.review-company-grid>.panel{margin:0!important}.review-record-grid{grid-template-columns:repeat(3,minmax(0,1fr))!important}.review-control-map{background:radial-gradient(ellipse at center,#1a383b,#101c21);border:1px solid #3c555a}.review-control-map .ui-front-region-group{position:relative;padding-left:16px;border-left:3px solid var(--amber);margin:15px 0}.review-control-map .ui-front-region{min-height:48px;border:1px solid #466167;background:#20343b}.review-story-scene{min-width:0}.review-rebuild .ui-master-list .ui-list-item{min-height:68px;padding:9px}.review-rebuild .ui-master-list .ui-list-item span{font-size:12px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.review-rebuild .ui-master-list .ui-list-item img{height:55px;object-fit:contain}.review-rebuild .ui-master-detail{grid-template-columns:290px minmax(0,1fr)}.review-rebuild .ui-detail{padding:14px}.review-rebuild .ui-detail>.crow:not([hidden]){display:block}.review-rebuild .ui-detail .crow .cact{display:flex;gap:8px}.review-rebuild .ui-detail .crow .cboss{max-height:160px;object-fit:contain}.review-squad-create{margin-top:14px!important}.review-rebuild .ui-talent-layout{grid-template-columns:240px minmax(0,1fr)}.review-rebuild .ui-talent-main .ui-master-detail{grid-template-columns:300px minmax(0,1fr)}.review-rebuild .ui-manual-links{border:1px solid var(--line);border-radius:8px;padding:12px}.review-rebuild .ui-manual-links .btn{margin-top:8px}
@media(min-width:1100px){.review-rebuild[data-pc-page=home] .ui-home-dashboard{gap:10px}.review-rebuild[data-pc-page=home] .ui-home-six{padding:10px;gap:8px}.review-rebuild[data-pc-page=home] .ui-home-stat{min-height:82px;padding:8px}.review-rebuild[data-pc-page=home] .ui-home-recommend-list{padding:10px;gap:7px}.review-rebuild[data-pc-page=home] .ui-home-recommend-list .htile{padding:8px;min-height:58px}.review-rebuild[data-pc-page=home] .ui-home-shortcuts .hqgo{padding:10px}.review-rebuild[data-pc-page=home] .ui-home-shortcuts .hqgo .btn{min-height:55px}.review-rebuild[data-pc-page=home] .ui-home-news{max-height:175px;overflow:auto}.review-rebuild[data-pc-page=home] .panel-h{padding:10px 14px}.review-rebuild .ui-hideout-workspace .ui-master-detail{grid-template-columns:220px minmax(0,1fr)}}
@media(max-width:1099px){.review-rebuild .ui-master-detail,.review-rebuild .ui-talent-layout,.review-rebuild .ui-talent-main .ui-master-detail,.review-rebuild[data-pc-page=market] .mkbody{grid-template-columns:minmax(0,1fr)}.review-career-grid,.review-company-grid{grid-template-columns:1fr}.review-record-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.review-market-row{grid-template-columns:minmax(0,1fr) 100px}.review-market-row .mkft{display:block}.review-market-list .mkcat{min-width:75px}.review-market-row .mkic{width:55px}}
.review-rebuild[data-pc-page=hideout] .hidepano{max-height:none!important;overflow:visible!important;max-width:100%;margin-bottom:14px}.review-rebuild[data-pc-page=hideout] .hidepano>img{width:100%;height:auto;object-fit:contain}.review-rebuild[data-pc-page=contracts]>.hsay.partner{max-width:100%;margin-bottom:10px}.review-rebuild[data-pc-page=contracts]>.hsay.partner img{width:65px;height:70px;object-fit:contain}.review-rebuild[data-pc-page=contracts] .ui-npc-header{display:flex!important;min-height:85px;gap:12px}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.npcart{width:60px!important;height:70px!important}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.hsay{flex:1;margin:0}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.hsay img{display:none}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.hsay .hs-b{padding:0}.review-rebuild[data-pc-page=contracts] .ui-npc-stats{margin-left:auto}.review-rebuild[data-pc-page=contracts] .ui-npc-stats[open]{position:absolute;z-index:5;background:#182126;right:20px;max-width:600px;border:1px solid var(--line);padding:10px}.review-rebuild .ui-hero-head>img{object-fit:contain}
@media(max-width:700px){.review-rebuild[data-pc-page=contracts] .ui-npc-header{flex-wrap:wrap}.review-rebuild[data-pc-page=contracts] .ui-npc-stats{width:100%;margin-left:0}.review-rebuild[data-pc-page=hideout] .hidepano{display:block!important;padding:0}.review-rebuild[data-pc-page=hideout] .hidepano .hroom{position:absolute;top:38%;bottom:7.5%;width:14.7%!important;border:0;padding:0;background:transparent}.review-rebuild[data-pc-page=hideout] .hidepano .hroom span{font-size:7px;padding:2px;gap:1px;white-space:nowrap}}
@media(max-width:700px){.review-rebuild[data-pc-page=hideout] .hidepano{display:flex!important;flex-wrap:wrap;gap:4px}.review-rebuild[data-pc-page=hideout] .hidepano .hroom{position:static;width:auto!important;min-height:0;padding:4px;border:1px solid var(--line);border-radius:4px}.review-rebuild[data-pc-page=hideout] .hidepano .hroom span{font-size:11px;gap:4px}}
@media(min-width:701px){.review-rebuild[data-pc-page=hideout] .hidepano{display:flex;flex-wrap:wrap;gap:6px;background:#101619;padding:8px;border:1px solid var(--line);border-radius:8px}.review-rebuild[data-pc-page=hideout] .hidepano>img{height:220px;width:100%;object-fit:contain}.review-rebuild[data-pc-page=hideout] .hidepano .hroom{position:static;width:auto!important;flex:1;min-height:0;top:auto;bottom:auto;left:auto!important;border:1px solid var(--line);border-radius:4px;padding:3px;background:#19252a}.review-rebuild[data-pc-page=hideout] .hidepano .hroom span{margin:0;background:none;font-size:11px}.review-rebuild[data-pc-page=hideout] .ui-master-list .ui-list-item{min-height:58px}.review-rebuild[data-pc-page=hideout] .ui-master-list .ui-list-item img{height:43px}}
@media(min-width:1100px) and (max-width:1399px){.review-rebuild[data-pc-page=hire] .ui-three{grid-template-columns:280px minmax(0,1fr)}.review-rebuild[data-pc-page=hire] .ui-three>.ui-compare{grid-column:1/-1}.review-rebuild[data-pc-page=hire] .ui-compare{display:grid;grid-template-columns:240px minmax(0,1fr) 240px;gap:12px}.review-rebuild[data-pc-page=hire] .ui-compare>h3{grid-column:1/-1}.review-rebuild[data-pc-page=hire] .ui-compare>p{display:none}.review-rebuild[data-pc-page=hire] .ui-compare dl{margin:0;display:block}.review-rebuild[data-pc-page=hire] .ui-compare dl>div{grid-template-columns:1fr 1fr 35px}.review-rebuild[data-pc-page=hire] .ui-compare .review-panel{padding:8px}}
.review-hire-booking{padding:10px;border:1px solid #796432;background:#202722;border-radius:7px;margin:10px 0}.review-hire-booking>h3{margin:0 0 8px!important}.review-hire-booking>.btn{margin-top:10px}.review-npc-tools>summary{cursor:pointer;padding:8px;color:var(--amber)}.review-npc-tools[open]{flex-basis:100%}.review-rebuild[data-pc-page=contracts] .ui-npc-header{flex-direction:row!important;flex-wrap:wrap}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.say{flex:1;padding:0!important;margin:0!important;min-width:150px}.review-rebuild[data-pc-page=contracts] .review-npc-tools{margin-left:auto}.review-rebuild[data-pc-page=contracts] .ui-npc-header>.nextstep{flex-basis:100%}.review-rebuild[data-pc-page=contracts] .ui-npc-header .npcart{margin:0!important}
@media(max-width:700px){.review-rebuild[data-pc-page=contracts] .review-npc-tools{width:100%;margin:0}.review-hire-booking .ui-costs{grid-template-columns:1fr 1fr}.review-hire-booking .ui-costs>div:last-child{grid-column:1/-1}}
/* Approved contract composition: full-width filters, six rows, equal-scale detail. */
body:has(.exact-contracts) .mainhead .bfbar{display:none!important}body:has(.exact-contracts) .mainhead h3{font:700 28px 'Malgun Gothic',sans-serif}body:has(.exact-contracts) .layout.hubB>.col.main>.panel{background:transparent;border:0}body:has(.exact-contracts) .mainhead{padding:10px 6px;border:0}body:has(.exact-contracts) .panel-b:has(>.exact-contracts){padding:0}.exact-contracts{font:13px 'Malgun Gothic',Arial,sans-serif;padding-bottom:105px;color:#dde4e7}.exact-contract-toolbar{display:flex;flex-wrap:wrap;gap:0;border:1px solid #34444d;border-radius:8px;background:#101b20;margin-bottom:10px}.exact-filter-group{display:flex;align-items:center;gap:3px;padding:8px;border-right:1px solid #34444d;flex-wrap:wrap}.exact-filter-group>b{margin-right:6px;white-space:nowrap}.exact-filter-group .btn{padding:6px 8px;min-height:30px;border-radius:5px;font:12px 'Malgun Gothic',sans-serif}.exact-contract-sort{display:flex;align-items:center;gap:8px;padding:8px;flex:1;min-width:320px}.exact-contract-sort input{width:180px;min-width:0;flex:1}.exact-contract-sort select{width:112px}.exact-contract-layout{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:10px;align-items:start}.exact-contract-list,.exact-contract-detail{border:1px solid #35434c;border-radius:8px;background:linear-gradient(135deg,#111c21,#10171b);padding:10px;min-width:0}.exact-contract-list>header{display:grid;grid-template-columns:23% 10% 34% 18% 15%;gap:0;align-items:center;padding:0 4px 10px;border-bottom:1px solid #33464e;margin-bottom:8px;font-size:12px}.exact-contract-list h3{font-size:15px;margin:0}.exact-contract-row{width:100%;display:grid;grid-template-columns:23% 8% minmax(0,1fr) 16% 12%;gap:9px;align-items:center;border:1px solid #33434c;border-radius:7px;margin-bottom:7px;padding:7px;background:#142027;text-align:left;color:#dde4e7;cursor:pointer;min-height:93px;font:13px 'Malgun Gothic',sans-serif}.exact-contract-row.on{border:2px solid #ddb03b;padding:6px;background:linear-gradient(110deg,#24312e,#19201d)}.exact-contract-row>img{width:100%;height:76px;object-fit:cover;border-radius:5px}.exact-tier{display:inline-grid;place-items:center;width:40px;height:44px;font-size:22px;font-weight:700;border:1px solid #678fbc;box-shadow:inset 0 0 10px #395779;background:#152534;color:#b3d4ff;border-radius:5px;flex-shrink:0}.exact-contract-description,.exact-row-reward{display:flex;flex-direction:column;gap:7px;min-width:0}.exact-contract-description>b{font-size:16px}.exact-contract-description small{font-size:11px;color:#a8b8bf;line-height:1.6}.exact-row-reward b{white-space:nowrap;color:#e8dcb1;font-size:13px}.exact-row-reward small{color:#e4b442}.exact-row-deadline{color:#d5b875;font-size:11px}.exact-contract-title{display:flex;gap:12px;align-items:center;margin:0 0 9px}.exact-contract-title>div:nth-child(2){flex:1;min-width:0}.exact-contract-title h2{font:700 22px 'Malgun Gothic',sans-serif;margin:0 0 5px}.exact-contract-title p{font-size:12px;color:#aabcc6;margin:0;line-height:1.5}.exact-contract-code{text-align:right;font-size:10px;white-space:nowrap;color:#98a9b2;line-height:2}.exact-contract-scene{width:100%;height:125px;object-fit:cover;border-radius:5px;margin-bottom:8px}.exact-condition-grid{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}.exact-condition{background:#132026;border:1px solid #33444d;padding:8px;border-radius:6px;min-width:0}.exact-condition h3{font:700 13px 'Malgun Gothic',sans-serif;margin:0 0 8px}.exact-condition p{margin:6px 0 0;font-size:11px;line-height:1.5;color:#a6b8c2}.exact-condition b{font-size:13px}.exact-condition dl{display:grid;grid-template-columns:1fr 1.2fr;font-size:11px;gap:6px;margin:0}.exact-condition dd{margin:0;text-align:right}.exact-condition dt{color:#acbac2}.exact-rewards{display:grid;grid-template-columns:1.6fr 1fr;gap:7px;margin-bottom:8px}.exact-reward-values{display:flex;justify-content:space-between;gap:7px;align-items:center;color:#e8b13a}.exact-reward-values span{font-size:11px;color:#bcc8ce}.exact-drop summary{cursor:pointer;font-weight:700;font-size:12px}.exact-drop .drops{margin-top:8px}.exact-departure{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:8px;border:1px solid #34444d;border-radius:6px;padding:8px;background:#132026}.exact-departure h3{font-size:12px;margin:0 0 7px}.exact-departure section>div{display:flex;align-items:center;gap:8px;font-size:11px;line-height:1.8}.exact-departure img{width:50px;height:60px;object-fit:contain;background:#1d2b32;border-radius:5px}.exact-take{display:flex;flex-direction:column;gap:5px;justify-content:center}.exact-take .btn{min-height:44px;font-size:15px}.exact-take>span{font-size:10px;color:#a7b4bf}.exact-contract-tools{display:flex;justify-content:space-between;flex-wrap:wrap;gap:5px;margin-top:8px}.exact-contract-tools .cact{display:flex;gap:5px}.exact-contract-tools .btn{font-size:10px;padding:5px}.exact-board-extra{margin:8px 0;border:1px solid #35454e;border-radius:6px;padding:8px}.exact-board-extra>summary{cursor:pointer;color:#a7b8c2;font-size:11px}.exact-board-extra .npccol{max-width:100%;display:flex;flex-wrap:wrap;gap:12px}.exact-board-extra .npcart{width:65px;height:90px;object-fit:contain}.exact-board-extra .say{flex:1}.exact-board-extra .panel{width:100%}.exact-contract-list .pc-pager{padding:5px 0;font-size:11px}
@media(min-width:1500px){.exact-contract-toolbar{flex-wrap:nowrap}.exact-filter-group:first-child{max-width:360px}.exact-filter-group:nth-child(2){max-width:310px}.exact-filter-group:nth-child(3){max-width:320px}.exact-contract-row{min-height:96px}.exact-contract-scene{height:135px}}
@media(max-width:1100px){.exact-contract-layout{grid-template-columns:1fr 1fr}.exact-contract-row{grid-template-columns:70px 34px minmax(0,1fr);gap:7px;min-height:100px}.exact-contract-row>img{height:65px}.exact-tier{width:32px;height:37px;font-size:18px}.exact-row-reward{grid-column:3;flex-direction:row}.exact-row-deadline{grid-column:3}.exact-contract-list>header{display:block}.exact-contract-list>header>span{display:none}.exact-contract-title{flex-wrap:wrap}.exact-contract-code{display:none}.exact-condition-grid{grid-template-columns:1fr}.exact-contract-description>b{font-size:14px}.exact-departure{grid-template-columns:1fr}}
@media(max-width:700px){.exact-contract-layout{grid-template-columns:1fr}.exact-contract-toolbar{display:block}.exact-filter-group{padding:7px;border:0;border-bottom:1px solid #34444d}.exact-contract-sort{min-width:0;flex-wrap:wrap}.exact-contract-sort input{min-width:100px}.exact-contract-row{grid-template-columns:80px 34px minmax(0,1fr);min-height:96px}.exact-row-reward,.exact-row-deadline{grid-column:3}.exact-condition-grid{grid-template-columns:1fr 1fr}.exact-contract-detail{scroll-margin-top:10px}.exact-contract-scene{height:135px}.exact-rewards{grid-template-columns:1fr}.exact-departure{grid-template-columns:1fr}.exact-departure section>div{justify-content:space-between}.exact-condition dl{grid-template-columns:1fr}.exact-condition dd{text-align:left}.exact-contract-toolbar .btn{font-size:11px}.exact-contract-description small{font-size:11px}.exact-take .btn{width:100%}.exact-contract-title h2{font-size:20px}}
body:has(.exact-contracts) .livestrip{display:none}body:has(.exact-contracts) .layout.hubB{margin-top:0;padding-top:0}body:has(.exact-contracts) .mainhead{min-height:58px;padding:8px 2px;margin-bottom:0}.exact-contract-toolbar input{border:1px solid #3b505b;background:#0c1519;color:#dde7ee;border-radius:5px;padding:9px;font:12px 'Malgun Gothic',sans-serif}.exact-contract-toolbar select{font:12px 'Malgun Gothic',sans-serif;background:#0d171d;border:1px solid #3b505b;padding:8px}.exact-contracts :is(h2,h3,b,strong){font-family:'Malgun Gothic',Arial,sans-serif}.exact-contract-sort{min-width:270px}.exact-filter-group:first-child{flex-wrap:nowrap;overflow:auto;max-width:400px!important}.exact-filter-group:nth-child(2){max-width:300px!important}.exact-filter-group .btn{flex-shrink:0}.exact-contract-row{min-height:87px}.exact-contract-row>img{height:70px}.exact-contract-description>b{font-size:15px}.exact-contract-scene{height:130px}.exact-contract-list .pc-pager{margin-top:3px}.exact-contract-detail .exact-condition-grid{font-size:12px}.exact-contract-title p{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
@media(min-width:1500px){.exact-contract-row{min-height:88px}.exact-contract-layout{grid-template-columns:minmax(0,1.35fr) minmax(0,1fr)}.exact-filter-group:first-child{max-width:370px!important}.exact-contract-scene{height:130px}.exact-contract-title h2{font-size:22px}}
@media(max-width:700px){.exact-filter-group:first-child{max-width:100%!important}.exact-filter-group:nth-child(2){max-width:100%!important}.exact-contract-sort{min-width:0}.exact-contract-row{min-height:105px}}
body:has(.exact-bond) .livestrip{display:none}body:has(.exact-bond) .mainhead{min-height:58px;padding:8px 2px}body:has(.exact-bond) .layout.hubB>.col.main>.panel{background:none;border:0}body:has(.exact-bond) .panel-b:has(>.exact-bond){padding:0}.exact-bond{font-family:'Malgun Gothic',Arial,sans-serif;padding-bottom:100px}.exact-bond .bond{display:grid;grid-template-columns:270px minmax(0,1fr);gap:12px}.exact-bond .blist{max-height:720px;overflow:auto;padding-right:4px}.exact-bond .bcard{padding:5px;min-height:45px;margin:0 0 4px;display:flex;gap:8px;align-items:center;border-radius:5px}.exact-bond .bface{width:44px;height:44px;flex-shrink:0}.exact-bond .bface img{width:44px;height:44px;object-fit:cover;object-position:50% 10%}.exact-bond .binfo{min-width:0;display:grid;grid-template-columns:1fr 1fr;gap:3px;flex:1;font-size:11px}.exact-bond .binfo b{font:700 14px 'Malgun Gothic',sans-serif}.exact-bond .binfo>.dim{font-size:10px;text-align:right}.exact-bond .binfo .bst{font-size:9px;grid-column:1}.exact-bond .binfo .bar{grid-column:1/-1;height:3px}.exact-bond .binfo .bond-unread{font-size:9px;grid-column:1/-1}.exact-bond .bspecial{display:none}.exact-bond-list-filter{display:flex;gap:5px;margin-bottom:8px;position:sticky;top:0;background:#10191e;z-index:1}.exact-bond-list-filter .btn{flex:1;font-size:13px;padding:9px 3px}.exact-bond .exact-bond-stage{display:grid;grid-template-columns:minmax(300px, .85fr) minmax(0,1.15fr);gap:12px;align-items:start}.exact-bond .exact-bond-visual{height:700px;position:relative;overflow:hidden;padding:0;border:1px solid #39474e;background:linear-gradient(0deg,#0b1418 0%,transparent 50%),url('/img/bg/hq.jpg') center/cover}.exact-bond .exact-bond-visual .bgreet{position:absolute!important;left:15px;top:20px;z-index:2;background:#10161b8f;border:0!important;max-width:85%;height:auto!important;min-height:0!important;font-size:15px;font-style:italic}.exact-bond .exact-bond-visual .bsp.stable-portrait{position:absolute;left:0;bottom:0;width:100%!important;height:100%!important;min-height:0;margin:0;aspect-ratio:auto!important}.exact-bond .exact-bond-visual .portrait-art{position:absolute;bottom:0;left:0;width:100%;height:100%;aspect-ratio:auto}.exact-bond .exact-bond-visual .portrait-art img{width:100%;height:100%;object-fit:contain;object-position:center bottom}.exact-bond-bio{position:absolute;left:0;bottom:0;width:100%;box-sizing:border-box;z-index:2;padding:14px;background:linear-gradient(transparent,#0b1418 22%)}.exact-bond-bio h3{font:700 25px 'Malgun Gothic',sans-serif;margin:8px 0}.exact-bond-bio .bsub{font-size:12px;line-height:1.7}.exact-bond-bio .baff{font-size:12px;margin-top:8px}.exact-bond .bside{padding:0;border:0;background:none;min-width:0}.exact-bond .pc-section-tabs{display:flex;flex-wrap:nowrap;margin-bottom:10px;gap:5px}.exact-bond .pc-section-tabs .btn{flex:1;font:13px 'Malgun Gothic',sans-serif;padding:10px}.exact-bond .review-panel{margin:0 0 10px;background:#121d23}.exact-bond .panel-h{padding:10px}.exact-bond .panel-h h3{font:700 17px 'Malgun Gothic',sans-serif}.exact-bond-talk .panel-b{display:flex;align-items:center;gap:10px}.exact-bond-talk .panel-b>img{width:70px;height:80px;object-fit:cover;object-position:50% 10%;border:1px solid #3a4a52;border-radius:6px}.exact-bond-talk .panel-b>div{flex:1;font-size:12px}.exact-bond-talk .panel-b>.btn{min-height:65px;padding:10px;font-size:14px}.exact-bond .bacts{display:flex;flex-wrap:wrap;gap:5px;margin-bottom:10px}.exact-bond .bacts .btn{font-size:11px;padding:7px}.exact-episode-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:5px}.exact-episode{display:flex;align-items:center;gap:6px;min-height:67px;padding:5px;background:#152329;border:1px solid #37484f;border-radius:5px;text-align:left;color:#dce9ee;font:10px 'Malgun Gothic',sans-serif;cursor:pointer;min-width:0}.exact-episode img{width:46px;height:47px;object-fit:cover;border-radius:3px}.exact-episode span{display:flex;flex-direction:column;gap:5px;min-width:0}.exact-episode b{font:700 11px 'Malgun Gothic',sans-serif}.exact-bond-time .panel-b{display:grid;grid-template-columns:100px 1fr;gap:8px}.exact-bond-time img{width:100px;height:70px;object-fit:cover;grid-row:1/3}.exact-bond-time p{margin:0;font-size:12px}.exact-bond-help{font-size:11px;color:#a6b9c0}.exact-bond>.vow-collection{display:none}
@media(max-width:1200px){.exact-bond .bond{grid-template-columns:210px 1fr}.exact-bond .exact-bond-stage{grid-template-columns:300px 1fr}.exact-bond .exact-bond-visual{height:650px}.exact-episode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:900px){.exact-bond .bond{grid-template-columns:1fr}.exact-bond .blist{display:flex;gap:6px;max-height:none;overflow:auto;padding:0 0 8px}.exact-bond .bcard{flex:0 0 160px;min-height:70px}.exact-bond-list-filter{flex:0 0 130px;flex-direction:column;position:static}.exact-bond .exact-bond-stage{grid-template-columns:1fr}.exact-bond .exact-bond-visual{height:480px}.exact-bond .pc-section-tabs{overflow:auto}.exact-bond .pc-section-tabs .btn{min-width:60px}.exact-bond .binfo{display:flex;flex-direction:column}.exact-bond .binfo>.dim{text-align:left}.exact-bond-talk .panel-b>img{width:50px;height:65px}.exact-bond-talk .panel-b>.btn{font-size:12px;min-height:50px}.exact-episode-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* Shared reference geometry for the remaining authored page components. */
body:has(.exact-reference-page) .livestrip{display:none}body:has(.exact-reference-page) .layout.hubB>.col.main>.panel{background:transparent;border:0}body:has(.exact-reference-page) .mainhead{min-height:58px;padding:8px 2px;border:0}body:has(.exact-reference-page) .mainhead h3{font:700 28px 'Malgun Gothic',sans-serif}body:has(.exact-reference-page) .panel-b:has(>.exact-reference-page){padding:0}.exact-reference-page{font:13px 'Malgun Gothic',Arial,sans-serif;padding-bottom:100px;background:none;color:#dce5eb}.exact-reference-page :is(b,strong,h2,h3,h4){font-family:'Malgun Gothic',Arial,sans-serif}.exact-reference-page .panel,.exact-reference-page .ui-detail,.exact-reference-page .ui-selected,.exact-reference-page .ui-compare{border-radius:7px;border-color:#34464f;background:linear-gradient(135deg,#142026,#10191e)}.exact-reference-page .panel-h{padding:9px 12px}.exact-reference-page .panel-b{padding:10px}.exact-reference-page .btn{border-radius:5px;font-family:'Malgun Gothic',Arial,sans-serif}.exact-reference-page .panel-h h3{font-size:16px}.exact-reference-page .ui-toolbar{gap:7px;margin-bottom:8px}.exact-reference-page .ui-master-detail{gap:10px;grid-template-columns:minmax(240px,.9fr) minmax(0,1.2fr)}.exact-reference-page .ui-master-list{border:1px solid #34464f;background:#101c22;border-radius:7px;padding:10px}.exact-reference-page .ui-list-item{border-radius:5px;min-height:68px;margin-bottom:6px}.exact-reference-page .ui-list-item img{width:85px;height:55px;object-fit:contain}.exact-reference-page .ui-list-item b{font-size:14px}.exact-reference-page .ui-detail{padding:12px}.exact-reference-page .ui-detail>h3{font-size:16px}.exact-reference-page .ui-hero-head{gap:12px}.exact-reference-page .ui-hero-head h2{font-size:22px}.exact-reference-page .ui-costs{gap:6px}.exact-reference-page .ui-costs>div{padding:8px}.exact-reference-page .ui-stat-five>div{padding:8px}.exact-reference-page .ui-selected h3{margin:10px 0 6px}.exact-reference-page .ui-selected .ui-weapon img{max-height:48px}.exact-hire-rowstats{display:flex;gap:6px;flex-wrap:wrap;margin-top:5px;font-size:9px;color:#b7c7d0}.exact-hire-rowstats b{font-size:11px!important}.exact-reference-page[data-pc-page=hire] .ui-candidate{min-height:175px;padding:10px}.exact-reference-page[data-pc-page=hire] .ui-candidate>img{width:95px;height:145px;object-fit:contain}.exact-reference-page[data-pc-page=hire] .ui-three{grid-template-columns:minmax(320px,1.1fr) minmax(400px,1.1fr) minmax(290px,.8fr)}.exact-reference-page[data-pc-page=hire] .ui-three .ui-compare{grid-column:auto}.exact-hire-hero>img{height:130px!important;width:110px!important}.exact-reference-page[data-pc-page=hire] .review-hire-booking{padding:8px}.exact-reference-page[data-pc-page=hire] .ui-selected>p.dim{font-size:11px}.exact-reference-page[data-pc-page=hire] .ui-selected>p{margin:6px 0;font-size:11px;line-height:1.5}.exact-reference-page[data-pc-page=hire] .ui-selected .review-fold{margin:7px 0;padding:6px;font-size:11px}.exact-reference-page[data-pc-page=perk] .ui-master-detail{grid-template-columns:210px minmax(0,1fr)}.exact-reference-page[data-pc-page=perk] .ui-detail>.perkline{grid-template-columns:minmax(0,1fr) 280px}.exact-reference-page[data-pc-page=perk] .ui-perk-node{min-height:170px}.exact-reference-page[data-pc-page=quest] .ui-master-detail{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr)}.exact-reference-page[data-pc-page=goals] .ui-goals-layout{grid-template-columns:minmax(0,1fr) 300px}.exact-reference-page[data-pc-page=goals] .ui-master-detail{grid-template-columns:minmax(220px,1fr) minmax(0,1fr)}.exact-reference-page[data-pc-page=goals] .ui-detail .orow{display:block}.exact-reference-page[data-pc-page=goals] .ui-detail .orow>.btn{margin-top:20px;width:100%}.exact-career-summary{grid-template-columns:repeat(4,minmax(0,1fr));margin-bottom:12px}.exact-ledger-chart{margin:12px 0!important}.exact-ledger-chart svg{display:block;width:100%;height:180px}.exact-intel-grid{grid-template-columns:250px minmax(0,1fr) 280px!important}.exact-intel-operator img{width:100%;height:230px;object-fit:contain}.exact-res-grid{grid-template-columns:230px minmax(0,1fr) minmax(300px,1fr)!important}.exact-res-transfer .rowform{display:flex;flex-direction:column;align-items:stretch}.exact-raid-scene{display:block;width:100%;height:180px;object-fit:cover;border-radius:6px;margin-bottom:14px}.exact-reference-page[data-pc-page=raid] .ui-detail .crow{background-image:none!important}.exact-reference-page[data-pc-page=raid] .ui-detail .crow .cemb{flex-direction:row;justify-content:flex-start;gap:8px}.exact-reference-page[data-pc-page=raid] .ui-detail .crow .cemb img{width:38px}.exact-reference-page[data-pc-page=story] .ui-story-layout{grid-template-columns:290px minmax(0,1fr)}.exact-reference-page[data-pc-page=story] .storyp{border:1px solid #354750;border-radius:7px;padding:12px}.exact-reference-page[data-pc-page=story] .stch{min-height:75px}.exact-reference-page[data-pc-page=codex] .ui-master-detail{grid-template-columns:minmax(0,1.5fr) minmax(300px,1fr)}.exact-reference-page[data-pc-page=codex] .ui-gallery-list{grid-template-columns:repeat(4,minmax(0,1fr))}.exact-reference-page[data-pc-page=codex] .ui-gallery-list .ui-list-item img{width:100%;height:85px}.exact-reference-page[data-pc-page=codex] .ui-gallery-list .ui-list-item b{font-size:11px}.exact-reference-page[data-pc-page=talent] .ui-talent-layout{grid-template-columns:260px minmax(0,1fr)}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-detail{grid-template-columns:300px minmax(0,1fr)}
@media(max-width:1399px){.exact-reference-page[data-pc-page=hire] .ui-three{grid-template-columns:300px minmax(0,1fr)}.exact-reference-page[data-pc-page=hire] .ui-three>.ui-compare{grid-column:1/-1;display:block}.exact-intel-grid,.exact-res-grid{grid-template-columns:230px minmax(0,1fr)!important}.exact-intel-grid>.exact-intel-operator,.exact-res-grid>.ui-detail{grid-column:1/-1}.exact-reference-page[data-pc-page=perk] .ui-detail>.perkline{grid-template-columns:1fr}.exact-reference-page[data-pc-page=goals] .ui-goals-layout{grid-template-columns:1fr}.exact-reference-page[data-pc-page=codex] .ui-gallery-list{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:900px){.exact-reference-page .ui-master-detail,.exact-reference-page[data-pc-page=hire] .ui-three,.exact-reference-page[data-pc-page=perk] .ui-master-detail,.exact-reference-page[data-pc-page=quest] .ui-master-detail,.exact-reference-page[data-pc-page=story] .ui-story-layout,.exact-reference-page[data-pc-page=codex] .ui-master-detail,.exact-reference-page[data-pc-page=talent] .ui-talent-layout,.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-detail,.exact-intel-grid,.exact-res-grid,.exact-reference-page[data-pc-page=goals] .ui-master-detail{grid-template-columns:1fr!important}.exact-intel-grid>.exact-intel-operator,.exact-res-grid>.ui-detail,.exact-reference-page[data-pc-page=hire] .ui-three>.ui-compare{grid-column:1}.exact-reference-page[data-pc-page=hire] .ui-candidate{min-height:100px}.exact-reference-page[data-pc-page=hire] .ui-candidate>img{width:70px;height:95px}.exact-reference-page[data-pc-page=perk] .ui-perk-node{min-height:100px}.exact-career-summary{grid-template-columns:repeat(2,minmax(0,1fr))}.exact-reference-page .ui-list-item img{width:65px}.exact-reference-page[data-pc-page=codex] .ui-gallery-list{grid-template-columns:repeat(2,minmax(0,1fr))}.exact-reference-page[data-pc-page=story] .stchs{flex-direction:row}.exact-reference-page .ui-master-list{max-height:420px;overflow:auto}}
.exact-bond .bond{grid-template-columns:270px minmax(0,1fr)!important}.exact-bond .exact-bond-stage{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)!important}.exact-bond .bcard{height:46px;min-height:46px;box-sizing:border-box;padding:4px}.exact-bond-list-info{display:grid;grid-template-columns:1fr 1.15fr;grid-template-rows:20px 16px;gap:1px;min-width:0;flex:1;font-size:10px}.exact-bond-list-info>*{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.exact-bond-list-info b{font:700 14px 'Malgun Gothic',sans-serif}.exact-bond-list-info>span{color:#8fa9b8;text-align:right}.exact-bond-list-info small{font-size:9px;color:#c3c5b0}.exact-bond-list-info strong{font-size:10px;color:#e38b9c;text-align:right}.exact-bond .exact-bond-visual{height:650px}.exact-bond .blist{max-height:650px}.exact-bond .bside{background:none!important;padding:0!important;border:0!important}.exact-bond .review-panel .panel-h{padding:8px 10px}.exact-bond .review-panel .panel-b{padding:10px}.exact-bond .pc-section-tabs{padding-bottom:0;border:0;margin-bottom:10px}.exact-bond .exact-bond-bio .bar{display:block;width:100%}.exact-bond>.vow-collection{display:block;margin-top:10px}.exact-bond .exact-bond-visual .bgreet{font-size:14px;line-height:1.7}.exact-bond .bside .pc-section{border:0;background:none;padding:0}.exact-bond .exact-bond-time .panel-b{grid-template-columns:90px 1fr}.exact-bond .exact-bond-time img{width:90px;height:60px}.exact-bond .exact-bond-time .btn{padding:7px}.exact-bond .exact-bond-time p{font-size:11px}
@media(max-width:900px){.exact-bond .bond,.exact-bond .exact-bond-stage{grid-template-columns:1fr!important}.exact-bond .blist{max-height:none}.exact-bond .bcard{height:74px;min-height:74px}.exact-bond-list-info{grid-template-columns:1fr;grid-template-rows:auto}.exact-bond-list-info>span,.exact-bond-list-info strong{text-align:left}.exact-bond .exact-bond-visual{height:480px}}
@media(max-width:900px){.exact-reference-page .ui-talent-layout,.exact-reference-page .ui-talent-main .ui-master-detail,.exact-reference-page .ui-master-detail,.exact-intel-grid,.exact-res-grid{grid-template-columns:minmax(0,1fr)!important}.exact-reference-page .ui-talent-layout>*{min-width:0;max-width:100%}.exact-reference-page .ui-toolbar input{min-width:0}.exact-reference-page .talhead{flex-wrap:wrap}}
body:has(.exact-front) .livestrip{display:none}body:has(.exact-front) .layout.hubB>.col.main>.panel{border:0;background:none}body:has(.exact-front) .mainhead{padding:8px 2px;min-height:58px}body:has(.exact-front) .panel-b:has(>.exact-front){padding:0}.exact-front{padding-bottom:100px;font-family:'Malgun Gothic',sans-serif}.exact-front :is(h3,b){font-family:'Malgun Gothic',sans-serif}.exact-front .pc-section{padding:0;background:none;border:0}.exact-front-grid{display:grid;grid-template-columns:250px minmax(0,1fr) 330px;gap:10px}.exact-front-regions,.exact-world-map,.exact-front-detail{min-width:0;border:1px solid #354852;border-radius:7px;background:#121e24;padding:12px}.exact-front h3{font-size:16px;margin:0 0 14px}.exact-front-regions{max-height:660px;overflow:auto}.exact-erosion-row{width:100%;display:grid;grid-template-columns:1fr auto;gap:7px;border:1px solid #36464f;border-radius:5px;background:#15252e;color:#dde6ed;padding:10px;text-align:left;margin-bottom:6px;cursor:pointer;font-size:11px}.exact-erosion-row.on{border-color:#e1ad36;background:#293027}.exact-erosion-row b{font-size:12px}.exact-erosion-row .bar{width:100%;display:block;height:5px;grid-column:1/-1}.exact-erosion-row .bar i{background:#a69056}.exact-erosion-row small{grid-column:1/-1;color:#a4becb}.exact-world-map-art{position:relative;border:1px solid #38505c;border-radius:6px;overflow:hidden}.exact-world-map-art>img{width:100%;height:500px;object-fit:fill;display:block}.exact-map-pin{position:absolute;transform:translate(-50%,-50%);z-index:1;background:none;border:0;padding:3px;color:#d1dce0;cursor:pointer;font:9px 'Malgun Gothic',sans-serif}.exact-map-pin i{display:block;margin:auto;width:8px;height:8px;border-radius:50%;background:#d5ae4b;border:2px solid #f2d990;box-shadow:0 0 10px #d5ae4b80}.exact-map-pin.on i{background:#85d6cb;border-color:#b4fff3;box-shadow:0 0 12px #92eedb}.exact-map-pin.fallen i{background:#d2484c;border-color:#ff9fa2}.exact-map-pin span{display:none;background:#0e1c22d9;border-radius:3px;padding:3px;white-space:nowrap;margin-top:4px}.exact-map-pin.on span,.exact-map-pin:hover span{display:block}.exact-world-map>p{font-size:10px;color:#94acba;margin:10px 0 0}.exact-front-detail .fcard{margin:0;border:0;padding:0;background:none}.exact-faction-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.exact-faction-cards .fcard{min-width:0;margin:0}.exact-front-extra{border:1px solid #344951;border-radius:6px;padding:8px;margin-top:8px}.exact-front-extra summary{color:#d3ae57;cursor:pointer;font-size:11px}.exact-front .pc-section-tabs .btn{padding:10px 22px;font:14px 'Malgun Gothic',sans-serif}
@media(max-width:1200px){.exact-front-grid{grid-template-columns:220px minmax(0,1fr)}.exact-front-detail{grid-column:1/-1}.exact-world-map-art>img{height:450px}.exact-faction-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.exact-front-grid{grid-template-columns:minmax(0,1fr)}.exact-front-detail{grid-column:1}.exact-front-regions{max-height:300px}.exact-world-map-art>img{height:300px}.exact-faction-cards{grid-template-columns:minmax(0,1fr)}.exact-front .pc-section-tabs .btn{padding:9px 12px}}
@media(min-width:901px){.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;align-content:start;max-height:650px;overflow:auto}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-list>.ui-toolbar,.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-list>.review-column-title,.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-master-list>.pc-pager{grid-column:1/-1}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-list-item{min-height:83px;margin:0;padding:7px}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-list-item img{width:32px;height:32px}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-list-item b{font-size:12px}.exact-reference-page[data-pc-page=talent] .ui-talent-main .ui-list-item span{font-size:10px}.exact-reference-page[data-pc-page=perk] .ui-master-list .ui-list-item{min-height:48px;padding:7px}.exact-reference-page[data-pc-page=perk] .ui-list-item b{font-size:12px}.exact-reference-page[data-pc-page=perk] .ui-list-item span{font-size:10px}.exact-reference-page[data-pc-page=intel] .ui-master-list .ui-list-item{min-height:45px;padding:6px}.exact-reference-page[data-pc-page=intel] .ui-list-item b{font-size:12px}.exact-reference-page[data-pc-page=intel] .ui-list-item span{font-size:10px}}
@media(min-width:1100px){.topbar.exact-hud{display:grid;grid-template-columns:350px minmax(180px,1fr) auto auto;align-items:center;gap:14px;min-height:74px;padding:8px 4px;margin-bottom:8px;border-bottom:1px solid #33464f}.exact-hud .hudop{min-width:0;gap:12px}.exact-hud .hudop>img{width:56px;height:56px;border:2px solid #d5a52d;border-radius:50%;object-fit:cover}.exact-hud .hudop .ht>b{font:700 21px Arial,'Malgun Gothic',sans-serif}.exact-hud .hudop .hs{font:12px 'Malgun Gothic',sans-serif;line-height:1.8}.exact-hud .exact-head-vitals .hbars{display:grid;grid-template-columns:1fr 1fr;gap:12px;min-width:0;align-items:center}.exact-hud .exact-head-vitals .hb{display:flex;flex-direction:column-reverse;align-items:stretch;gap:7px;min-width:0}.exact-hud .exact-head-vitals .hn{font:12px 'Malgun Gothic',sans-serif}.exact-hud .exact-head-vitals .bar{width:100%;height:7px;display:block}.exact-hud .exact-head-vitals .hrest{grid-column:1/-1;font-size:10px}.exact-hud .stat-strip{gap:6px;flex-wrap:nowrap}.exact-hud .sfield{min-width:60px;padding:7px;border:1px solid #35464f;border-radius:6px;background:#18242b;height:48px}.exact-hud .sfield img{width:28px;height:30px;object-fit:contain}.exact-hud .sfield .v{font:700 17px 'Malgun Gothic',sans-serif}.exact-hud .sfield.cr{min-width:90px}.exact-hud .topbtns{gap:6px}.exact-hud .topbtns .iconbtn{height:44px;padding:8px 12px;border:1px solid #35464f;border-radius:6px}.exact-hud .topbtns .iconbtn i{font:12px 'Malgun Gothic',sans-serif}}
@media(min-width:1100px) and (max-width:1399px){.topbar.exact-hud{grid-template-columns:280px minmax(150px,1fr) auto auto;gap:8px}.exact-hud .hudop .ht>b{font-size:17px}.exact-hud .hudop .hs{font-size:10px}.exact-hud .sfield{min-width:48px;padding:5px}.exact-hud .sfield img{width:20px}.exact-hud .topbtns .iconbtn{padding:6px}.exact-hud .sfield .v{font-size:14px}.exact-hud .sfield.cr{min-width:80px}}
@media(max-width:1099px){.topbar.exact-hud{display:flex;flex-wrap:wrap;gap:8px}.exact-hud .hudop{flex:1;min-width:0}.exact-hud .exact-head-vitals{flex-basis:100%;order:1}.exact-hud .exact-head-vitals .hbars{display:flex;gap:10px;align-items:center;flex-wrap:wrap}.exact-hud .exact-head-vitals .hb{flex:1;min-width:120px}.exact-hud .exact-head-vitals .bar{width:70px;flex:1}.exact-hud .stat-strip{order:2;flex-basis:100%;justify-content:space-between;gap:5px}.exact-hud .topbtns{order:3}.exact-hud .sfield{min-width:0;flex:1}.exact-hud .sfield .v{font-size:14px}}
/* Reference-authored lobby and bounty columns, including empty game states. */
.exact-lobby-columns,.exact-bounty-columns{display:grid;grid-template-columns:minmax(0,1.45fr) minmax(0,1fr);gap:12px;margin-top:12px;align-items:start}
.exact-lobby-columns>.panel,.exact-bounty-columns>.panel{min-width:0;margin:0}
.exact-lobby-columns .ui-master-detail,.exact-bounty-columns .ui-master-detail{display:block!important}
.exact-lobby-list .ui-list,.exact-bounty-columns .ui-list{max-height:600px}
.exact-lobby-list .empty{min-height:330px;display:flex;flex-direction:column;justify-content:center;align-items:center;gap:12px;text-align:center}
.exact-lobby-list .empty img{width:76px;height:76px;object-fit:contain}
.exact-lobby-ready{display:grid;grid-template-columns:86px minmax(0,1fr);gap:8px 12px;align-items:center;padding:10px 0 18px}
.exact-lobby-ready .exact-lobby-operator{width:86px;height:132px;object-fit:contain;grid-row:span 3}
.exact-lobby-ready p{margin:0;line-height:1.7}
.exact-bounty-detail .bform{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.exact-bounty-detail .bform input,.exact-bounty-detail .bform select{width:100%!important;min-width:0}
.exact-bounty-detail .bform .btn{grid-column:1/-1;min-height:42px}
.exact-bounty .pc-section>.panel{max-width:900px}
@media(max-width:800px){.exact-lobby-columns,.exact-bounty-columns{grid-template-columns:minmax(0,1fr)}.exact-lobby-list .empty{min-height:200px}.exact-bounty-detail .bform{grid-template-columns:minmax(0,1fr)}}
/* Shared reference geometry: readable body text, framed panels, compact heading rhythm. */
body:has(.pc-page){--f-ui:"Malgun Gothic",Arial,sans-serif;--f-disp:"Malgun Gothic",Arial,sans-serif;--f-mono:"Malgun Gothic",Arial,sans-serif}
.pc-page{font-family:"Malgun Gothic",Arial,sans-serif;letter-spacing:0}
.pc-page :is(button,input,select,textarea){font-family:"Malgun Gothic",Arial,sans-serif}
.pc-page .panel{border:1px solid #34454e;background:linear-gradient(130deg,#142027,#101a1f);border-radius:8px}
.pc-page .panel-h{min-height:45px;padding:9px 14px;border-bottom:1px solid #34454e}
.pc-page .panel-h h3{font-family:"Malgun Gothic",Arial,sans-serif;font-size:17px;font-weight:700}
.pc-page .pc-section-tabs{padding:0;margin:0 0 12px;gap:5px}
.pc-page .pc-section-tabs>.btn{border:1px solid #344b58;min-height:42px;padding:9px 22px;font-size:15px;font-weight:600;background:#152127;color:#a7b8c1}
.pc-page .pc-section-tabs>.btn.primary{border:2px solid #e2ac32;padding:8px 21px;background:linear-gradient(100deg,#293128,#202521);color:#efbd4f}
.pc-page .pc-section{padding:0;border:0;background:none}
body:has(.pc-page) .layout.hubB .mainhead{padding:8px 2px;min-height:65px;margin:0;border:0}
body:has(.pc-page) .layout.hubB .mainhead h3{font:700 28px "Malgun Gothic",Arial,sans-serif}
body:has(.pc-page) .panel-b:has(>.pc-page){padding:0}
body:has(.pc-page) .layout.hubB{margin-top:0;padding-top:0}
.exact-lobby-columns,.exact-bounty-columns{margin-top:0}
@media(max-width:800px){.pc-page .pc-section-tabs>.btn{padding:9px 12px;font-size:13px}.pc-page .pc-section-tabs>.btn.primary{padding:8px 11px}body:has(.pc-page) .layout.hubB .mainhead h3{font-size:23px}.pc-page .panel-h h3{font-size:16px}}
body:has(.pc-page) .mainhead h3{margin:0}
.exact-perk-preview{border:1px solid #34454e;border-radius:8px;background:#132027;padding:14px}.exact-perk-preview h3{font-size:16px;margin:0 0 12px}.exact-perk-preview>div{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}.exact-perk-preview button{display:flex;flex-direction:column;align-items:center;gap:8px;padding:12px 6px;border:1px solid #34454e;border-radius:6px;background:#101a1f;color:#dae5eb;text-align:center;min-width:0;cursor:pointer}.exact-perk-preview button.on{border-color:#e0ad38;background:#262b22}.exact-perk-preview img{height:44px;width:44px;object-fit:contain}.exact-perk-preview small{font-size:11px;color:#9fb9c1}.exact-perk-preview b{font-size:12px}
@media(min-width:1400px){.exact-reference-page[data-pc-page=perk] .ui-detail>.perkline{background:none;padding:0;grid-template-columns:minmax(0,1fr) 330px;gap:12px}.exact-reference-page[data-pc-page=perk] .perkline>.plh{grid-column:1;grid-row:1;border:1px solid #34454e;border-radius:8px;background:#142027;padding:20px;min-height:98px}.exact-reference-page[data-pc-page=perk] .ui-perk-detail{grid-column:2;grid-row:1/4;align-self:stretch;min-height:480px;background:#111d23}.exact-reference-page[data-pc-page=perk] .ui-perk-nodes{grid-column:1;grid-row:2;border:1px solid #34454e;border-radius:8px;padding:14px}.exact-reference-page[data-pc-page=perk] .exact-perk-preview{grid-column:1;grid-row:3}.exact-reference-page[data-pc-page=perk] .ui-perk-detail h3{font-size:21px;border-bottom:1px solid #34454e;padding-bottom:16px}.exact-reference-page[data-pc-page=perk] .ui-perk-detail .pd{border:1px solid #34454e;border-radius:7px;padding:18px;font-size:14px;min-height:125px}.exact-reference-page[data-pc-page=perk] .ui-perk-detail .pa{margin-top:24px}.exact-reference-page[data-pc-page=perk] .ui-perk-detail .pa .btn{width:100%;height:52px;font-size:18px}}
@media(max-width:700px){.exact-perk-preview>div{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(min-width:1100px){.review-rebuild[data-pc-page=home] .ui-home-stat{min-height:126px;padding:12px}.review-rebuild[data-pc-page=home] .ui-home-status{align-self:stretch}.review-rebuild[data-pc-page=home] .ui-home-six{height:calc(100% - 45px);align-content:stretch}.review-rebuild[data-pc-page=home] .ui-home-stat>img{width:70px;height:72px}.review-rebuild[data-pc-page=home] .ui-home-stat strong{font-size:25px}}/* Combat v2 must override the earlier desktop columns at narrow widths. */
@media(max-width:1100px){
 .layout.combat.v2,.layout.combat.v2.over{grid-template-columns:minmax(0,1fr);gap:12px;align-items:start}
 .layout.combat.v2>.col{grid-column:1!important;grid-row:auto!important;width:100%;min-width:0;max-width:100%;position:static;height:auto!important;overflow:visible!important}
 .layout.combat.v2>.col.main{order:0}.layout.combat.v2>.col.side{order:1}.layout.combat.v2>.col.ops{order:2}
 .layout.combat.v2 .hostiles{grid-template-columns:minmax(0,1fr)}
 .layout.combat.v2 .adock{grid-template-columns:minmax(0,1fr)}
 .layout.combat.v2 .actpanel.v3 .acts,.layout.combat.v2 .actpanel.v2 .acts{grid-template-columns:repeat(3,minmax(0,1fr))}
 .layout.combat.v2 .actpanel.v3 .aimstrip{flex-wrap:wrap}
 .layout.combat.v2 .actpanel,.layout.combat.v2 .panel,.layout.combat.v2 .wbox{min-width:0;max-width:100%}
 .layout.combat.v2 .logpanel .log{max-height:320px;overflow:auto;overflow-wrap:anywhere}
 .layout.combat.v2 .logfilters{display:flex;flex-wrap:wrap;gap:5px}
 .layout.combat.v2 .wbox .rounds{flex-wrap:wrap}
 .layout.combat.v2 .hostile{min-width:0}
 .chead .engage-bar{flex-wrap:wrap}.chead .f.mt{width:100%;min-width:0}.chead .rangebar{max-width:100%}
}
/* Optional main illustration belongs to the relationship page only. */
.exact-bond .exact-vow-main-active>.bsp.stable-portrait{visibility:hidden!important}
.exact-bond .exact-bond-visual .exact-vow-main-art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 20%;z-index:1;display:block}
.exact-bond .exact-vow-main-picker .panel-b{display:grid;gap:10px}
.exact-bond .exact-vow-main-picker p{margin:0}
.exact-bond .exact-vow-main-options{display:flex;gap:8px;flex-wrap:wrap}
.exact-bond .exact-vow-main-options .btn{flex:1;min-width:145px}
.exact-bond .exact-vow-main-picker img{display:block;width:100%;max-height:280px;object-fit:contain;object-position:center top;border:1px solid var(--line);border-radius:6px;background:#10181c}
.exact-bond .exact-bond-visual .exact-vow-main-art,.exact-bond .exact-vow-main-picker img{visibility:visible!important}
.exact-bond .exact-bond-visual .exact-vow-main-art{object-fit:contain;object-position:center center}
@media(max-width:900px){.exact-bond .exact-bond-visual.exact-vow-main-active{height:clamp(520px,75vh,680px)!important;min-height:520px!important}}
/* Contract tiers: compact baseline-aligned numbers, progressively warmer colors. */
.exact-tier{display:inline-flex;align-items:baseline;justify-content:center;gap:2px;box-sizing:border-box;width:48px;height:38px;padding:7px 4px;font-family:Arial,sans-serif;font-size:20px;line-height:1;border:1px solid var(--tier-color,#86b2ce);color:var(--tier-color,#86b2ce);background:color-mix(in srgb,var(--tier-color,#86b2ce) 12%,#111b21);box-shadow:none;border-radius:6px;white-space:nowrap}
.exact-tier small{font-size:11px;font-weight:700;line-height:1;opacity:.85}.exact-tier b{font:700 20px/1 Arial,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-.5px}
@media(max-width:1100px){.exact-contract-row{grid-template-columns:70px 48px minmax(0,1fr)}.exact-tier{width:48px;height:36px;padding-top:7px}}
@media(max-width:700px){.exact-contract-row{grid-template-columns:80px 48px minmax(0,1fr)}}
.feature-art{margin:0 0 16px;border:1px solid var(--line,#34454b);border-radius:8px;overflow:hidden;background:#10181c;width:100%;box-sizing:border-box}
.feature-art img{display:block;width:100%;height:auto;aspect-ratio:3/1;object-fit:contain;max-height:none;max-width:none}
@media(max-width:700px){.feature-art{margin-bottom:12px}.feature-art img{aspect-ratio:3/1;height:auto}}

/* Keep grouped page navigation readable on narrow phones. */
@media(max-width:700px){
  .layout.hubB .subtabs{flex-wrap:nowrap;overflow-x:auto;overflow-y:hidden;max-width:100%;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
  .layout.hubB .subtabs>.stab{flex:0 0 auto;white-space:nowrap;word-break:keep-all}
}

/* 영원한 맹세 칭호: 각 인물의 색과 표식을 유지하고 작은 전투 카드 안에서 줄인다. */
.tt-t_b_raven9,.tt-t_b_serin9,.tt-t_b_ren9,.tt-t_b_sirin9,.tt-t_b_poppy9,.tt-t_b_har9,.tt-t_b_era9,.tt-t_b_noa9,.tt-t_b_mira9,.tt-t_b_kasha9,.tt-t_b_luka9,.tt-t_b_vera9,.tt-t_b_sonya9,.tt-t_b_ines9,.tt-t_b_all9{
  --tc:#f4ede9;--tb:var(--vow-accent);--cut:.4em;gap:.36em;padding:.14em .58em;
  box-shadow:inset 0 0 0 1px var(--vow-accent),inset 0 0 0 2px #ffffff12;
  max-width:100%;min-width:0
}
.tt-t_b_raven9 .tgl,.tt-t_b_serin9 .tgl,.tt-t_b_ren9 .tgl,.tt-t_b_sirin9 .tgl,.tt-t_b_poppy9 .tgl,.tt-t_b_har9 .tgl,.tt-t_b_era9 .tgl,.tt-t_b_noa9 .tgl,.tt-t_b_mira9 .tgl,.tt-t_b_kasha9 .tgl,.tt-t_b_luka9 .tgl,.tt-t_b_vera9 .tgl,.tt-t_b_sonya9 .tgl,.tt-t_b_ines9 .tgl,.tt-t_b_all9 .tgl{color:var(--vow-accent)}
.tt-t_b_raven9{--vow-accent:#7cdbcb;background:repeating-linear-gradient(90deg,#112725 0 13px,#183630 13px 14px)}
.tt-t_b_serin9{--vow-accent:#c1d9ef;background:radial-gradient(ellipse at 12% 50%,#385566,#182632 65%)}
.tt-t_b_ren9{--vow-accent:#e4a862;background:repeating-linear-gradient(145deg,#3a291b 0 4px,#30251c 4px 7px)}
.tt-t_b_sirin9{--vow-accent:#dfc980;background:repeating-linear-gradient(0deg,#302c20 0 6px,#615336 6px 7px)}
.tt-t_b_poppy9{--vow-accent:#ffa48d;background:linear-gradient(110deg,#3d2524,#53332a 52%,#3d2524)}
.tt-t_b_har9{--vow-accent:#a5cf98;background:linear-gradient(90deg,#202b22 0 18%,#334436 18% 20%,#202b22 20%)}
.tt-t_b_era9{--vow-accent:#cbb5ec;background:repeating-linear-gradient(120deg,#282138 0 11px,#393056 11px 12px)}
.tt-t_b_noa9{--vow-accent:#ff967c;background:linear-gradient(0deg,#282226 45%,#a34940 50%,#282226 55%)}
.tt-t_b_mira9{--vow-accent:#e0b272;background:linear-gradient(90deg,#322129,#3b2930 50%,#322129)}
.tt-t_b_kasha9{--vow-accent:#ef7b78;background:linear-gradient(135deg,#4a2528 0 27%,#231d25 27% 73%,#4a2528 73%)}
.tt-t_b_luka9{--vow-accent:#9db9e8;background:linear-gradient(0deg,#233145 0 40%,#57799e 41% 44%,#233145 45%)}
.tt-t_b_vera9{--vow-accent:#a9b2ff;background:repeating-linear-gradient(90deg,#20243b 0 15px,#3a4566 15px 16px)}
.tt-t_b_sonya9{--vow-accent:#f0cd78;background:linear-gradient(175deg,#2b3236,#243b43 50%,#483722 51%)}
.tt-t_b_ines9{--vow-accent:#d3a078;background:linear-gradient(90deg,#382922,#1e2528,#382922)}
.tt-t_b_all9{--vow-accent:#e9a9cb;--tc:#ffdeea;background:linear-gradient(90deg,#382534,#1d2933 50%,#382534);box-shadow:inset 0 0 0 1px #d08ba9,0 0 12px #cf87ae30}
.tt-t_b_all9 .tgl{color:#ffd9a0}
.layout.combat .sqpanel .sqttl{min-width:0;max-width:100%;overflow:hidden}
.layout.combat .sqpanel .sqttl .ttl{max-width:100%;min-width:0}
.layout.combat .sqpanel .sqttl .ttl span{min-width:0;overflow:hidden;text-overflow:ellipsis}

/* Keep decorative banners compact so tab controls remain visible. */
.feature-art{height:clamp(120px,11vw,200px)}
.feature-art img{height:100%;aspect-ratio:auto;object-fit:cover;object-position:center}

/* The selected vow artwork owns the whole main card background. */
.exact-bond .exact-bond-visual.exact-vow-main-active{background-image:none}
.exact-bond .exact-bond-visual .exact-vow-main-art{object-fit:cover;object-position:center 20%}

@media(min-width:1100px){
  .exact-hud .exact-head-vitals .hbars{grid-template-rows:auto auto;row-gap:4px}
  .exact-hud .exact-head-vitals .hb{grid-column:auto;grid-row:1}
  .exact-hud .exact-head-vitals .hrest{grid-column:1/-1;grid-row:2;justify-self:start}
}

@media(max-width:700px){
  .wbhead{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;padding:12px;align-items:start}
  .wbface{width:72px;height:72px}
  .wbt{min-width:0;overflow-wrap:anywhere}
  .wbgo{grid-column:1/-1;width:auto;min-width:0}
  .wbmeta{flex-wrap:wrap}
  .wbtop{grid-template-columns:minmax(0,1fr)}
  .feature-art{height:120px}
}