:root{
  color-scheme:light;
  --scene:#d6e3ec;
  --halo:#e9e3f4;
  --floor:#c4d3c6;
  --floor-line:#a9bcac;
  --floor-shadow:#44524a;
  --nametag-bg:#24222c;
  --nametag-text:#ffffff;
  --panel-rgb:255 255 255;
  --panel-alpha:.35;
  --panel-edge:#ffffffb3;
  --surface:#ffffff;
  --surface-2:#f1f4f7;
  --line:#d3dbe3;
  --line-strong:#8e9fae;
  --text:#121a22;
  --muted:#36414c;
  --accent:#5b3ea6;
  --accent-ink:#ffffff;
  --accent-text:#432a85;
  --accent-soft:#ebe5f8;
  --focus:#5b3ea6;
  --track:#dbe2e9;
  --bar:#5b3ea6;
  --warn:#d08a2c;
  --warn-text:#7a4200;
  --warn-soft:#fcf0dd;
  --warn-line:#e4b36f;
  --neg-text:#a3253a;
  --arcane:#3f5fc4;
  --authentic:#a0701a;
  --buy-soft:#e2edfb;
  --buy-text:#194f8a;
  --sell-soft:#dcf2e8;
  --sell-text:#145b49;
  --shadow:rgba(28,38,56,.18);
  --shadow-strong:rgba(28,38,56,.34);
  --toast-bg:#1f1b29;
  --toast-text:#ffffff;
  --portrait-bg:#2a2438;
  --d-ink:#ffffff;
  --d-easy:#6b7079;
  --d-normal:#2b6bc4;
  --d-hard:#c42f3c;
  --d-dark:#121216;
  --d-chaos-text:#ffd23c;
  --d-extreme-text:#ff5a64;
  --eq-bg:#232a35;
  --eq-bar:#1a2029;
  --eq-slot:#303946;
  --eq-line:#4c5768;
  --eq-text:#eef2f6;
  --eq-sub:#c5cdd6;
  --legend:#6cc644;
  --legend-glow:rgba(108,198,68,.34);
  --legend-text:#9be27a;
  --star:#ffd23c;
  --hx-skill:#6a45b8;
  --hx-mastery:#b23a74;
  --hx-enhance:#1f6fb8;
  --hx-common:#1d7f68;
  --hx-ink:#ffffff;
  --gutter:clamp(16px,2vw,28px);
  --font-body:"IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic","Noto Sans KR",system-ui,sans-serif;
  --font-display:"Do Hyeon","IBM Plex Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --font-mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,Consolas,monospace;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --scene:#10151f;
    --halo:#1b2132;
    --floor:#0c1411;
    --floor-line:#1e2c26;
    --floor-shadow:#000000;
    --nametag-bg:#0b0a10;
    --nametag-text:#ffffff;
    --panel-rgb:19 24 32;
    --panel-edge:#ffffff1f;
    --surface:#1b212b;
    --surface-2:#232a35;
    --line:#333d4b;
    --line-strong:#5a6778;
    --text:#eef2f6;
    --muted:#cfd6dd;
    --accent:#b69cf0;
    --accent-ink:#17111f;
    --accent-text:#d8cafa;
    --accent-soft:#2d2544;
    --focus:#d8cafa;
    --track:#2f3845;
    --bar:#b69cf0;
    --warn:#e0a14a;
    --warn-text:#ffc98a;
    --warn-soft:#3a2b16;
    --warn-line:#8a6326;
    --neg-text:#ff9aa8;
    --arcane:#9db3f5;
    --authentic:#f0c46a;
    --buy-soft:#1a2d45;
    --buy-text:#a9cdf5;
    --sell-soft:#16372f;
    --sell-text:#9fe0c8;
    --shadow:rgba(0,0,0,.45);
    --shadow-strong:rgba(0,0,0,.65);
    --toast-bg:#efeaf9;
    --toast-text:#17111f;
    --portrait-bg:#0e0c14;
    --eq-bg:#171c24;
    --eq-bar:#10141a;
    --eq-slot:#252d38;
    --eq-line:#3f4a5a;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --scene:#10151f;
  --halo:#1b2132;
  --floor:#0c1411;
  --floor-line:#1e2c26;
  --floor-shadow:#000000;
  --nametag-bg:#0b0a10;
  --nametag-text:#ffffff;
  --panel-rgb:19 24 32;
  --panel-edge:#ffffff1f;
  --surface:#1b212b;
  --surface-2:#232a35;
  --line:#333d4b;
  --line-strong:#5a6778;
  --text:#eef2f6;
  --muted:#cfd6dd;
  --accent:#b69cf0;
  --accent-ink:#17111f;
  --accent-text:#d8cafa;
  --accent-soft:#2d2544;
  --focus:#d8cafa;
  --track:#2f3845;
  --bar:#b69cf0;
  --warn:#e0a14a;
  --warn-text:#ffc98a;
  --warn-soft:#3a2b16;
  --warn-line:#8a6326;
  --neg-text:#ff9aa8;
  --arcane:#9db3f5;
  --authentic:#f0c46a;
  --buy-soft:#1a2d45;
  --buy-text:#a9cdf5;
  --sell-soft:#16372f;
  --sell-text:#9fe0c8;
  --shadow:rgba(0,0,0,.45);
  --shadow-strong:rgba(0,0,0,.65);
  --toast-bg:#efeaf9;
  --toast-text:#17111f;
  --portrait-bg:#0e0c14;
  --eq-bg:#171c24;
  --eq-bar:#10141a;
  --eq-slot:#252d38;
  --eq-line:#3f4a5a;
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none !important}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
/* 위에 붙은 상단 바에 가리지 않게 — 페이지 전체(scroll-padding) 대신 위젯 쪽에만.  전체에 두면 상단 바 검색 칸에 글자를 칠 때마다
   크롬이 커서를 "위 96px 아래"로 보이게 하려고 페이지를 끌어올렸다 (사용자 2026-09-29 "좌측상단에 글씨치면 페이지가 올라가") */
#grid, #grid *{scroll-margin-top:96px}
body{
  margin:0;min-height:100vh;
  background:var(--scene);color:var(--text);
  font-family:var(--font-body);font-size:15px;line-height:1.5;
  padding-inline:var(--gutter);padding-block:0 40px;
  overflow-x:clip;-webkit-font-smoothing:antialiased;
}
img{max-width:100%}
button,input,select{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3,p,dl,dd{margin:0}
.sr{position:absolute !important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.num{font-family:var(--font-mono);font-variant-numeric:tabular-nums;letter-spacing:-.01em}
.ic{width:20px;height:20px;flex:none;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
:focus-visible{outline:3px solid var(--focus);outline-offset:2px}

/* ---------- scene: the character is the background ---------- */
.scene{
  position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:var(--scene);
  --hero-h:72vh;--hero-x:48%;--feet:8vh;
  --s:calc(var(--hero-h) / 64);
}
.halo{
  position:absolute;border-radius:50%;background:var(--halo);
  width:calc(var(--hero-h) * .95);height:calc(var(--hero-h) * .95);
  left:calc(var(--hero-x) + 4 * var(--s));
  bottom:calc(var(--feet) + 32 * var(--s) - var(--hero-h) * .475);
  transform:translateX(-50%);
}
.floor{position:absolute;left:0;right:0;bottom:0;height:calc(var(--feet) + 3 * var(--s));background:var(--floor);border-top:2px solid var(--floor-line)}
.hero-shadow{
  position:absolute;border-radius:50%;background:var(--floor-shadow);opacity:.28;
  left:calc(var(--hero-x) + 11 * var(--s));bottom:calc(var(--feet) - 3 * var(--s));
  width:calc(60 * var(--s));height:calc(6 * var(--s));
  filter:blur(calc(1.2 * var(--s)));transform:translateX(-50%);
}
.hero{
  position:absolute;overflow:hidden;
  left:calc(var(--hero-x) - 36 * var(--s));bottom:calc(var(--feet) - 4 * var(--s));
  width:calc(84 * var(--s));height:calc(72 * var(--s));
}
.hero img{
  position:absolute;max-width:none;
  left:calc(-111 * var(--s));top:calc(-132 * var(--s));
  width:calc(300 * var(--s));height:calc(300 * var(--s));
  image-rendering:crisp-edges;image-rendering:pixelated;
}
.nametag{
  position:absolute;left:var(--hero-x);bottom:calc(var(--feet) - 3.5 * var(--s));
  transform:translate(-50%,100%);
  background:var(--nametag-bg);color:var(--nametag-text);
  font:700 clamp(13px,.6vw + 9px,18px)/1 var(--font-body);
  padding:6px 12px 7px;border-radius:6px;white-space:nowrap;
}

/* ---------- shell ---------- */
.app{position:relative;z-index:1}
.panel{
  background:rgb(var(--panel-rgb) / var(--panel-alpha));
  -webkit-backdrop-filter:blur(18px) saturate(1.2);backdrop-filter:blur(18px) saturate(1.2);
  border:1px solid var(--panel-edge);border-radius:22px;
  box-shadow:0 14px 34px -14px var(--shadow);
}
.topbar{
  position:sticky;top:0;z-index:30;
  display:flex;align-items:center;flex-wrap:wrap;gap:10px 16px;
  margin-inline:calc(var(--gutter) * -1);
  padding-block:10px;padding-inline:var(--gutter);
  background:rgb(var(--panel-rgb) / .9);
  -webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
  border-bottom:1px solid var(--panel-edge);
}
.brand{display:inline-flex;align-items:center;gap:10px;color:var(--text);text-decoration:none;min-height:44px;border-radius:12px;padding-right:4px}
.brand-mark{width:38px;height:38px;border-radius:11px;background:var(--accent);color:var(--accent-ink);display:grid;place-items:center}
.brand-mark .ic{width:22px;height:22px}
.brand-word{font:400 28px/1 var(--font-display);letter-spacing:.01em}
.search{
  flex:0 1 440px;display:flex;align-items:center;gap:8px;min-height:48px;
  padding:2px 2px 2px 14px;border-radius:14px;background:var(--surface);border:1px solid var(--line);color:var(--muted);
}
.search input{flex:1;min-width:0;border:0;background:transparent;color:var(--text);font-weight:600;font-size:15px;min-height:44px;padding:0}
.search input:focus-visible{outline:none}
.search:focus-within{outline:3px solid var(--focus);outline-offset:2px}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:8px}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;padding:0 16px;
  border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-weight:600;font-size:14px;line-height:1.2;white-space:nowrap;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.btn:hover{border-color:var(--line-strong)}
.btn.primary,.btn[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.full{width:100%}
.icon-btn{width:44px;height:44px;display:inline-grid;place-items:center;padding:0;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);flex:none}
.icon-btn:hover{border-color:var(--line-strong)}
.pill-btn{min-height:44px;display:inline-flex;align-items:center;gap:6px;padding:0 14px;border-radius:999px;border:1px dashed var(--line-strong);background:transparent;color:var(--muted);font-size:13px;font-weight:600;white-space:nowrap}
.pill-btn .ic{width:17px;height:17px}
#themeBtn .t-sun{display:none}
#themeBtn[data-mode="dark"] .t-sun{display:block}
#themeBtn[data-mode="dark"] .t-moon{display:none}

.seg{display:inline-flex;gap:4px;padding:4px;border-radius:14px;background:var(--surface-2);border:1px solid var(--line)}
.seg button{
  min-height:44px;min-width:44px;padding:0 14px;border:0;border-radius:10px;background:transparent;
  color:var(--muted);font-weight:600;font-size:14px;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap;
  transition:background-color .15s ease,color .15s ease;
}
.seg button:hover{color:var(--text)}
.seg button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.seg .cnt{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:500}
.seg-sm button{padding:0 10px;font-size:13px}

/* ---------- edit bar ---------- */
.editbar{max-width:1560px;margin:16px auto 0;padding:18px 20px;display:grid;gap:16px;scroll-margin-top:96px}
.eb-top{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.eb-top h2{font:400 22px/1.2 var(--font-display)}
.eb-top .btn{margin-left:auto}
.eb-body{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) minmax(0,1.2fr);gap:16px}
.eb-block{background:var(--surface);border-radius:16px;padding:14px 16px;display:grid;gap:10px;align-content:start}
.eb-h{font-size:14px;font-weight:700;color:var(--text)}
.eb-h:focus{outline:none}
.eb-h:focus-visible{outline:3px solid var(--focus);outline-offset:2px;border-radius:4px}
.hint{font-size:13px;color:var(--muted);line-height:1.5}
.add-list{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.add-item{
  min-height:44px;display:inline-flex;align-items:center;gap:8px;padding:0 12px;border-radius:12px;
  border:1px solid var(--line);background:var(--surface);color:var(--text);font-weight:600;font-size:14px;
}
.add-item .state{font-size:12.5px;font-weight:600;color:var(--accent-text)}
.add-item:not(:disabled):hover{border-color:var(--accent)}
.add-item:disabled{cursor:default;background:var(--surface-2)}
.add-item:disabled .state{color:var(--muted);font-weight:500}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input{flex:1;min-width:0;min-height:44px;accent-color:var(--accent)}
.range-row output{font:600 18px/1 var(--font-mono);font-variant-numeric:tabular-nums;min-width:3.2em;text-align:right}
.btn-row{display:flex;flex-wrap:wrap;gap:8px}

/* ---------- grid ---------- */
.grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-flow:row dense;
  gap:20px;align-items:start;max-width:1560px;margin-inline:auto;padding-top:20px;
}
.stage{grid-column:2;grid-row:1;min-height:clamp(400px,calc(100vh - 330px),760px);pointer-events:none}
.widget{min-width:0;padding:20px;scroll-margin-top:96px}
.widget[data-span="2"]{grid-column:span 2}
.widget[data-span="3"]{grid-column:1 / -1}
.widget[data-id="boss"][data-span="2"]{grid-row:span 2}

.edit-row{display:none;align-items:center;gap:8px;margin:-6px -6px 14px;padding:6px;border-radius:14px;background:var(--surface-2)}
.editing .edit-row{display:flex}
.editing .widget{outline:2px dashed var(--accent);outline-offset:4px}
.grip{width:44px;height:44px;display:grid;place-items:center;color:var(--muted);cursor:grab;border-radius:10px;flex:none}
.edit-row .rm{margin-left:auto}

.w-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.w-icon{flex:none;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text)}
.w-icon .ic{width:22px;height:22px}
.w-head h2{font:400 23px/1.2 var(--font-display);letter-spacing:.01em}
.w-titles{display:grid;gap:2px;min-width:0}
.w-titlerow{display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px}
.w-sub{font-size:13px;color:var(--muted)}
.w-pill{
  margin-left:auto;display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:0 12px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600;
}
.pill{display:inline-flex;align-items:center;gap:5px;min-height:28px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:12.5px;font-weight:600;color:var(--text)}
.pill.warn{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-text)}
.pill b{font-family:var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- profile ---------- */
.prof-name{font:400 46px/1 var(--font-display);letter-spacing:.01em}
.prof-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.tag{display:inline-flex;align-items:center;gap:2px;min-height:30px;padding:0 12px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:14px;font-weight:600}
.tag.job{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.power{margin-top:18px;padding:16px 18px;border-radius:16px;background:var(--surface);display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.power-label{font-weight:600;color:var(--muted);font-size:14px}
.power-val .num{font-size:40px;font-weight:600;line-height:1}
.power-val small,.stat-val small{font-size:15px;font-weight:600;margin-left:3px;font-family:var(--font-body)}
.stat-grid{list-style:none;margin:10px 0 14px;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.stat{padding:12px 14px;border-radius:14px;background:var(--surface);display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:10px;align-items:center}
.stat .ic{grid-row:span 2;width:26px;height:26px}
.stat.wide{grid-column:1 / -1}
.stat-label{font-size:12.5px;font-weight:600;color:var(--muted)}
.stat-val{font:600 21px/1.2 var(--font-mono);font-variant-numeric:tabular-nums}
.c-accent{color:var(--accent-text)}
.c-arcane{color:var(--arcane)}
.c-auth{color:var(--authentic)}

/* ---------- doping ---------- */
.chips{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:8px}
.chip{
  width:100%;min-height:48px;display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:14px;
  border:1.5px solid var(--line);background:var(--surface);color:var(--muted);font-weight:600;font-size:14px;line-height:1.25;text-align:left;
  transition:background-color .15s ease,border-color .15s ease,color .15s ease;
}
.chip span{flex:1;min-width:0}
.chip .ic{width:18px;height:18px}
.chip .ck{opacity:0}
.chip:hover{border-color:var(--line-strong)}
.chip[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.chip[aria-pressed="true"] .ck{opacity:1}
.foot-line{margin-top:14px;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px 14px;border-radius:14px;background:var(--surface);font-size:14px;font-weight:600}
.foot-line b{color:var(--muted);font-weight:600}

/* ---------- boss ---------- */
.boss .w-head{margin-bottom:18px}
.boss-controls{margin-left:auto;display:flex;flex-wrap:wrap;gap:8px}
.party{margin-bottom:16px;padding:14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);display:grid;gap:12px}
.party-slots{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px}
.pslot{min-height:64px;width:100%;border-radius:14px;display:flex;align-items:center;gap:10px;padding:8px 12px;border:0;font-weight:600;font-size:14px;text-align:left}
.pslot.me{background:var(--accent-soft);color:var(--accent-text)}
.pslot.me small{display:block;font-size:12.5px;font-weight:500}
.pslot.add{border:2px dashed var(--line-strong);background:transparent;color:var(--muted);justify-content:center}
.pslot.add:hover{color:var(--text);border-color:var(--accent)}
.mini{width:48px;height:48px;border-radius:12px;background:var(--scene);overflow:hidden;position:relative;flex:none}
.mini img{position:absolute;max-width:none;width:240px;height:240px;left:-94px;top:-106px;image-rendering:crisp-edges;image-rendering:pixelated}
.party-time{display:flex;justify-content:space-between;align-items:center;gap:12px;font-weight:700;font-size:15px}
.party-time b{color:var(--muted);font-weight:600}
.is-party .boss-sum{display:none}

.tiles{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:14px}
.tile{
  position:relative;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:6px;
  transform-origin:50% 60%;transition:transform .16s ease,box-shadow .16s ease;
}
.pt{position:relative;aspect-ratio:422 / 500;border-radius:11px;overflow:hidden;background:var(--portrait-bg)}
.pt img{display:block;width:100%;height:100%;object-fit:cover}
.rb{position:absolute;left:0;right:0;bottom:0;height:26px;display:grid;place-items:center;font-weight:700;font-size:13px;letter-spacing:.04em}
.d-easy{background:var(--d-easy);color:var(--d-ink)}
.d-normal{background:var(--d-normal);color:var(--d-ink)}
.d-hard{background:var(--d-hard);color:var(--d-ink)}
.d-chaos{background:var(--d-dark);color:var(--d-chaos-text)}
.d-extreme{background:var(--d-dark);color:var(--d-extreme-text)}
.tb{padding:8px 4px 4px}
.bn{font-weight:700;font-size:14px;line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bt{margin:2px 0 7px;font-size:23px;font-weight:600;line-height:1.15}
.party-t{display:none}
.lim{height:5px;border-radius:3px;background:var(--track);overflow:hidden}
.lim i{display:block;height:100%;width:calc(var(--p) * 100%);min-width:4px;border-radius:inherit;background:var(--bar)}
.hp{margin-top:7px;font-size:12.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.ot{
  position:absolute;top:6px;right:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;
  background:var(--warn-soft);color:var(--warn-text);border:1px solid var(--warn-line);font-size:11.5px;font-weight:700;
}
.ot .ic{width:13px;height:13px;stroke-width:2.2}
.tile.over{background:var(--warn-soft);border-color:var(--warn-line)}
.tile.over .pt img{filter:saturate(.55)}
.tile.over .bt{color:var(--warn-text)}
.tile.over .lim i{width:100%;background:var(--warn)}
.is-party .solo-t,.is-party .lim,.is-party .ot{display:none}
.is-party .party-t{display:inline;font-size:13px;font-weight:600;color:var(--muted);font-family:var(--font-body)}
.is-party .tile.over{background:var(--surface);border-color:var(--line)}
.is-party .tile.over .pt img{filter:none}
@media (hover:hover){
  .tile:hover{transform:scale(1.05);box-shadow:0 16px 30px -12px var(--shadow-strong);z-index:2;animation:rattle 180ms linear 1}
}
@keyframes rattle{
  0%{transform:scale(1.05) rotate(0deg)}
  33%{transform:scale(1.05) rotate(1deg)}
  66%{transform:scale(1.05) rotate(-1deg)}
  100%{transform:scale(1.05) rotate(0deg)}
}

/* ---------- hexa ---------- */
.hx-group + .hx-group{margin-top:14px}
.hx-group h3{display:flex;align-items:center;gap:8px;margin-bottom:8px;font-size:13px;font-weight:700;color:var(--muted)}
.hx-group h3 i{width:10px;height:10px;border-radius:2px;background:var(--hx);transform:rotate(45deg)}
.hx-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:8px}
.hx{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;border-radius:12px;background:var(--surface);min-height:52px}
.hx-badge{position:relative;width:36px;height:40px;flex:none}
.hx-badge svg{width:100%;height:100%;fill:var(--hx);stroke:var(--hx);stroke-width:2.5;stroke-linejoin:round}
.hx-badge b{position:absolute;inset:0;display:grid;place-items:center;font:600 14px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--hx-ink)}
.hx.lv29 .hx-badge svg{fill:var(--surface)}
.hx.lv29 .hx-badge b{color:var(--text)}
.hx-name{font-size:13px;line-height:1.3;font-weight:500;min-width:0}
.hx-next{margin-top:14px;display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;background:var(--accent-soft);color:var(--accent-text);font-weight:600;font-size:14px}
.hx-next b{margin-left:auto;font-weight:600}

/* ---------- items: in-game equipment window ---------- */
.eqwin{background:var(--eq-bg);border:1px solid var(--eq-line);border-radius:14px;color:var(--eq-text);overflow:hidden}
.eq-title{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:9px 12px;background:var(--eq-bar);font-weight:700;font-size:13px;letter-spacing:.06em}
.eq-title span:last-child{font-weight:500;color:var(--eq-sub);letter-spacing:0}
.eq-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px 6px;padding:12px}
.slot{display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;padding:0;border:0;background:none;color:inherit;border-radius:10px}
.slot .box{position:relative;width:100%;max-width:60px;aspect-ratio:1;border-radius:8px;background:var(--eq-slot);border:2px solid var(--eq-line);display:grid;place-items:center}
.slot .box .ic{width:52%;height:52%;color:var(--eq-text);stroke-width:1.6}
.slot.leg .box{border-color:var(--legend);box-shadow:0 0 0 2px var(--legend-glow)}
.slot .st{position:absolute;top:2px;right:3px;font:600 11px/1 var(--font-mono);font-variant-numeric:tabular-nums;color:var(--star)}
.slot .cap{max-width:100%;font-size:11px;line-height:1.25;letter-spacing:-.02em;color:var(--eq-sub);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slot.leg .cap{color:var(--eq-text);font-weight:600}
.slot.empty .box{background:transparent;border-style:dashed}
.slot.blank{visibility:hidden}
button.slot:hover .box{background:var(--eq-line)}
.slot[aria-pressed="true"] .box{outline:2px solid var(--star);outline-offset:2px}
.eq-detail{display:flex;align-items:center;gap:12px;padding:12px;background:var(--eq-bar);border-top:1px solid var(--eq-line)}
.eq-dbox{width:52px;height:52px;flex:none;border-radius:10px;background:var(--eq-slot);border:2px solid var(--legend);box-shadow:0 0 0 2px var(--legend-glow);display:grid;place-items:center}
.eq-dbox .ic{width:28px;height:28px;color:var(--eq-text);stroke-width:1.6}
.eq-dname{font-weight:700;font-size:15px;line-height:1.3}
.eq-dmeta{margin-top:2px;font-size:13px;color:var(--eq-sub);display:flex;flex-wrap:wrap;gap:4px 8px}
.eq-dmeta .st{color:var(--star);font-family:var(--font-mono);font-weight:600}
.eq-dmeta .lg{color:var(--legend-text);font-weight:600}
.eq-note{padding:0 12px 12px;background:var(--eq-bar);font-size:12px;color:var(--eq-sub)}

/* ---------- hunting ---------- */
.hunt{display:flex;align-items:center;gap:16px}
.lv-ring{
  width:108px;height:108px;flex:none;border-radius:50%;display:grid;place-content:center;text-align:center;
  background:var(--surface);border:6px solid var(--accent);
}
.lv-ring span{font-size:13px;font-weight:700;color:var(--muted);line-height:1}
.lv-ring b{font:600 34px/1.05 var(--font-mono);font-variant-numeric:tabular-nums}
.hunt-fields{flex:1;min-width:0;display:grid;gap:10px}
.field label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:4px}
.field input,.field select,.led-row input{
  width:100%;min-height:44px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--text);
  font-weight:500;font-size:15px;padding:0 12px;
}
.field input{font-family:var(--font-mono);font-variant-numeric:tabular-nums}
.select-wrap{position:relative;display:block}
.select-wrap select{-webkit-appearance:none;appearance:none;padding-right:40px}
.select-wrap .ic{position:absolute;right:12px;top:50%;transform:translateY(-50%);pointer-events:none;color:var(--muted)}
.hunt-out{margin-top:16px;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;background:var(--surface);font-weight:600}
.hunt-out span{display:inline-flex;align-items:center;gap:8px}
.hunt-out b{color:var(--muted);font-weight:600}

/* ---------- ledger ---------- */
.led-label{display:block;font-size:13px;font-weight:600;color:var(--muted);margin-bottom:6px}
.led-row{display:flex;gap:8px}
.led-row input{flex:1;min-width:0}
.parsed{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px}
.pc{display:inline-flex;align-items:center;gap:5px;min-height:30px;padding:0 10px;border-radius:999px;background:var(--surface);border:1px solid var(--line);font-size:13px;font-weight:600}
.pc .ic{width:15px;height:15px}
.pc.meso .ic{color:var(--authentic)}
.pc.cash .ic,.pc.date .ic,.pc.item .ic{color:var(--muted)}
.pc.buy{background:var(--buy-soft);border-color:transparent;color:var(--buy-text)}
.pc.sell{background:var(--sell-soft);border-color:transparent;color:var(--sell-text)}
.parsed.sm{margin-top:6px}
.led-list{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.led-list > li{padding:10px 12px;border-radius:12px;background:var(--surface)}
.led-raw{font-size:14px;line-height:1.4}
.led-sum{margin-top:14px;padding:14px;border-radius:14px;background:var(--surface-2)}
.sum-h{font-size:13px;font-weight:700;color:var(--muted);margin-bottom:8px}
.sum-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.sum-row div{background:var(--surface);border-radius:12px;padding:10px 12px}
.sum-row dt{font-size:12.5px;font-weight:600;color:var(--muted)}
.sum-row dd{font:600 20px/1.2 var(--font-mono);font-variant-numeric:tabular-nums}
.sum-row dd.neg{color:var(--neg-text)}
.sum-cash{margin-top:10px;display:flex;justify-content:space-between;align-items:baseline;font-size:14px;font-weight:600}
.sum-cash b{font:600 18px/1 var(--font-mono);font-variant-numeric:tabular-nums}

/* ---------- add tile, footer, toast, solo view ---------- */
.add-tile{
  min-height:180px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  border:2px dashed var(--line-strong);border-radius:22px;background:rgb(var(--panel-rgb) / .82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  color:var(--text);font-weight:600;font-size:15px;
}
.add-tile .ic{width:28px;height:28px}
.add-tile:hover{border-color:var(--accent)}
.foot{max-width:1560px;margin:24px auto 0;display:flex;justify-content:center}
.foot p{display:inline-block;padding:8px 14px;border-radius:999px;background:rgb(var(--panel-rgb) / .9);font-size:12.5px;color:var(--muted)}
.toast{
  position:fixed;left:50%;bottom:24px;z-index:60;max-width:calc(100vw - 32px);
  padding:12px 18px;border-radius:14px;background:var(--toast-bg);color:var(--toast-text);font-weight:600;font-size:14px;
  box-shadow:0 12px 30px -10px var(--shadow-strong);
  opacity:0;transform:translate(-50%,16px);pointer-events:none;transition:opacity .2s ease,transform .2s ease;
}
.toast.show{opacity:1;transform:translate(-50%,0)}
.solo-view .app{visibility:hidden}
.solo-back{position:fixed;left:50%;top:20px;transform:translateX(-50%);z-index:50;box-shadow:0 12px 30px -10px var(--shadow-strong)}

/* ---------- responsive ---------- */
@media (max-width:1099px){
  .scene{--hero-h:62vh;--hero-x:70%}
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .widget[data-span="2"],.widget[data-span="3"]{grid-column:1 / -1}
  .widget[data-id="boss"][data-span="2"]{grid-row:auto}
  .stage{grid-column:2;grid-row:1;min-height:clamp(380px,calc(100vh - 340px),640px)}
  .boss-controls{margin-left:0}
}
@media (max-width:959px){
  .eb-body{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:719px){
  .scene{--hero-h:min(46vh,88vw);--hero-x:44%;--feet:28vh}
  .grid{grid-template-columns:minmax(0,1fr);gap:16px}
  .widget[data-span]{grid-column:auto}
  .stage{grid-column:auto;grid-row:auto;order:-1;min-height:calc(78vh - 150px)}
  .widget{padding:16px}
  .size-seg{display:none}
  .search{order:3;flex:1 1 100%}
  .tb-actions .btn{padding:0;width:44px}
  .btn-label{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .prof-name{font-size:40px}
  .power-val .num{font-size:34px}
  .tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr));gap:10px}
  .bt{font-size:20px}
  .seg button{padding:0 10px}
  .hunt{flex-direction:column;align-items:stretch}
  .lv-ring{align-self:center}
  .sum-row dd{font-size:17px}
}
@media (max-width:559px){
  .pill-btn{display:none}
  .brand-word{font-size:25px}
}
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;scroll-behavior:auto !important}
  .tile:hover{animation:none !important}
}

/* ================= v3: 휴대폰식 위젯 칸 · 자유 설정 · 상세 패널 ================= */
.panel{-webkit-backdrop-filter:blur(var(--glass,14px)) saturate(1.25);backdrop-filter:blur(var(--glass,14px)) saturate(1.25)}

/* ---------- 인사 줄 ---------- */
.dash-head{max-width:1560px;margin:18px auto 0;display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.dash-hello{padding:12px 18px}
.dash-hello h1{font:400 28px/1.15 var(--font-display);letter-spacing:.01em}
.dash-hello p{font-size:14px;color:var(--muted);margin-top:3px}
.dash-tools{margin-left:auto;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.moving-note{display:none;align-items:center;gap:8px;min-height:44px;padding:0 14px;border-radius:12px;background:var(--accent-soft);color:var(--accent-text);font-weight:600;font-size:14px}
.moving .moving-note{display:inline-flex}

/* ---------- 위젯 칸 (2×2 · 4×2 · 4×4 · 8×2 · 8×4) ---------- */
.grid{
  --cols:12;--row:132px;
  grid-template-columns:repeat(var(--cols),minmax(0,1fr));grid-auto-rows:var(--row);grid-auto-flow:row dense;
  gap:16px;padding-top:18px;align-items:stretch;
}
.widget{grid-column:span var(--cw,6);grid-row:span var(--rh,2);display:flex;flex-direction:column;min-height:0;padding:16px 18px;overflow:hidden}
.widget[data-size="2x2"]{--cw:3;--rh:2}
.widget[data-size="4x2"]{--cw:6;--rh:2}
.widget[data-size="4x4"]{--cw:6;--rh:4}
.widget[data-size="8x2"]{--cw:12;--rh:2}
.widget[data-size="8x4"]{--cw:12;--rh:4}
.widget .w-head{margin-bottom:12px;flex:none}
.w-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin}
.widget.space{background:transparent;border:2px dashed transparent;box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.moving .widget.space{border-color:var(--line-strong)}
.space-label{margin:auto;font-size:13px;font-weight:600;color:var(--muted);opacity:0}
.moving .space-label{opacity:1}
.w-head .w-open{margin-left:auto}
.w-open{min-height:36px;padding:0 12px;font-size:13px;border-radius:10px}
.size-chip{font:600 11px/1 var(--font-mono);color:var(--muted);border:1px solid var(--line);border-radius:6px;padding:4px 6px}

/* 옮기기 모드 */
.moving .widget{outline:2px dashed var(--accent);outline-offset:3px}
.edit-row{display:none;flex:none;align-items:center;gap:6px;margin:-4px -6px 10px;padding:4px;border-radius:12px;background:var(--surface-2)}
.moving .edit-row{display:flex}
.edit-row .grip{width:36px;height:36px}
.edit-row .seg button{min-height:32px;min-width:0;padding:0 8px;font:600 12px/1 var(--font-mono)}
.edit-row .rm{margin-left:auto;width:36px;height:36px}
.widget.dragging{opacity:.4}
.widget.drop-before{box-shadow:-5px 0 0 0 var(--accent)}
.widget.drop-after{box-shadow:5px 0 0 0 var(--accent)}

/* ---------- 설정 서랍 (왼쪽) ---------- */
.wdrawer{
  position:fixed;top:0;left:0;bottom:0;z-index:48;width:min(390px,100vw);
  background:rgb(var(--panel-rgb) / .92);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border-right:1px solid var(--panel-edge);box-shadow:18px 0 40px -18px var(--shadow-strong);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  animation:slideL .2s ease-out;
}
@keyframes slideL{from{transform:translateX(-24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideR{from{transform:translateX(24px);opacity:0}to{transform:none;opacity:1}}
@keyframes slideU{from{transform:translateY(24px);opacity:0}to{transform:none;opacity:1}}
.wd-head,.dp-head{display:flex;align-items:center;gap:10px;padding:14px 16px;border-bottom:1px solid var(--line)}
.wd-head h2,.dp-head h2{font:400 23px/1.2 var(--font-display)}
.wd-head .icon-btn,.dp-head .icon-btn{margin-left:auto}
.wd-body,.dp-body{flex:1;overflow-y:auto;padding:14px 16px 22px;display:grid;gap:18px;align-content:start}
.wd-sec{display:grid;gap:8px}
.wd-sec > h3,.dp-sec > h3{font-size:12.5px;font-weight:700;letter-spacing:.05em;color:var(--muted)}
.wd-note{font-size:12.5px;color:var(--muted);line-height:1.5}
.wlist{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.wrow{border:1px solid var(--line);border-radius:14px;background:var(--surface)}
.wrow.drop-before{box-shadow:0 -3px 0 0 var(--accent)}
.wrow.drop-after{box-shadow:0 3px 0 0 var(--accent)}
.wrow-top{display:flex;align-items:center;gap:6px;padding:4px 6px}
.wgrip{width:32px;height:44px;display:grid;place-items:center;color:var(--muted);cursor:grab;flex:none}
.wname{flex:1;min-width:0;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:600}
.wname .ic{width:18px;height:18px;color:var(--muted)}
.wname small{display:block;font-size:11.5px;font-weight:500;color:var(--muted)}
.wmore,.wrm{width:36px;height:36px;border-radius:10px;border:0;background:transparent;color:var(--muted);display:grid;place-items:center;flex:none}
.wmore .ic{transition:transform .15s ease}
.wmore[aria-expanded="true"] .ic{transform:rotate(180deg)}
.wopts{padding:6px 12px 12px;display:grid;gap:10px;border-top:1px dashed var(--line)}
.wopt{display:grid;gap:6px}
.wopt > span{font-size:12.5px;font-weight:600;color:var(--muted)}
.wopt .seg{justify-self:start;flex-wrap:wrap}
.wopt .seg button{min-height:34px;padding:0 10px;font-size:13px}
.wchk{display:flex;align-items:center;gap:8px;font-size:13.5px;font-weight:500;min-height:30px}
.wchk input{width:17px;height:17px;accent-color:var(--accent)}
.wrange{display:flex;align-items:center;gap:10px}
.wrange input{flex:1;min-width:0;min-height:36px;accent-color:var(--accent)}
.wrange output{font:600 13px/1 var(--font-mono);font-variant-numeric:tabular-nums;min-width:3.4em;text-align:right}
.gallery{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.gitem{border:1.5px dashed var(--line-strong);border-radius:14px;background:transparent;padding:10px;display:grid;gap:6px;text-align:left}
.gitem:hover{border-color:var(--accent);border-style:solid}
.gitem b{display:flex;align-items:center;gap:6px;font-size:14px}
.gitem b .ic{width:17px;height:17px;color:var(--accent-text)}
.gitem small{font-size:12px;color:var(--muted)}
.gitem .sizes{display:flex;flex-wrap:wrap;gap:4px}
.gitem .sizes span{font:600 11px/1 var(--font-mono);border:1px solid var(--line);border-radius:6px;padding:4px 6px;color:var(--muted)}
.wd-empty{font-size:13px;color:var(--muted);padding:10px 12px;border-radius:12px;background:var(--surface)}
.wd-foot{border-top:1px solid var(--line);padding:10px 14px;display:flex;gap:8px;flex-wrap:wrap}
.wd-foot .btn{flex:1 1 auto}
.scrim{position:fixed;inset:0;z-index:45;background:rgb(0 0 0 / .16)}

/* ---------- 상세 패널 (오른쪽) ---------- */
.dpanel{
  position:fixed;top:0;right:0;bottom:0;z-index:47;width:min(440px,100vw);
  background:rgb(var(--panel-rgb) / .9);-webkit-backdrop-filter:blur(22px) saturate(1.2);backdrop-filter:blur(22px) saturate(1.2);
  border-left:1px solid var(--panel-edge);box-shadow:-18px 0 40px -18px var(--shadow-strong);
  display:flex;flex-direction:column;padding-top:env(safe-area-inset-top,0px);padding-bottom:env(safe-area-inset-bottom,0px);
  animation:slideR .2s ease-out;
}
.dp-sec{display:grid;gap:8px}
.dl2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:0}
.dl2 div{background:var(--surface);border-radius:12px;padding:9px 12px}
.dl2 dt{font-size:12px;font-weight:600;color:var(--muted)}
.dl2 dd{margin:0;font:600 17px/1.3 var(--font-mono);font-variant-numeric:tabular-nums}
.todo{font-size:13px;color:var(--muted);border:1px dashed var(--line-strong);border-radius:12px;padding:10px 12px;line-height:1.5}
.todo b{color:var(--text)}
.dtabs{display:flex;flex-wrap:wrap;gap:6px}
.dtabs button{min-height:36px;padding:0 12px;border-radius:10px;border:1.5px solid transparent;font-weight:700;font-size:13px}
.dtabs button[aria-pressed="true"]{outline:2px solid var(--text);outline-offset:2px}
.dp-hero{display:flex;gap:14px;align-items:center}
.dp-hero .pt{width:104px;flex:none}
.dp-hero .big{font:400 30px/1.1 var(--font-display)}
.dp-hero .t{font:600 30px/1.1 var(--font-mono);font-variant-numeric:tabular-nums;margin-top:4px}
.phases{display:grid;gap:6px}
.phase{display:grid;grid-template-columns:minmax(0,1fr) 72px;gap:8px;align-items:center;font-size:13px}
.phase .bar{grid-column:1 / -1;height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.phase .bar i{display:block;height:100%;background:var(--bar)}
.phase b{text-align:right;font:600 13px/1 var(--font-mono)}
.chipline{display:flex;flex-wrap:wrap;gap:6px}
.srows{display:grid;gap:6px}
.srow2{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:10px;align-items:center;padding:8px 12px;border-radius:12px;background:var(--surface);font-size:13.5px}
.srow2 b{font:600 14px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.srow2 em{font-style:normal;color:var(--muted);font-size:12px}

/* ---------- 주요 지표 ---------- */
.kpi-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;height:100%}
[data-size="8x2"] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}
.kpi{padding:12px 14px;border-radius:16px;background:var(--surface);display:flex;flex-direction:column;justify-content:space-between;gap:4px;min-height:0}
.kpi-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.kpi-l{font-size:12px;font-weight:700;letter-spacing:.04em;color:var(--muted)}
.kpi-ic{width:30px;height:30px;border-radius:10px;display:grid;place-items:center;background:var(--accent-soft);color:var(--accent-text);flex:none}
.kpi-ic .ic{width:17px;height:17px}
.kpi-v{display:flex;align-items:baseline;gap:3px}
.kpi-v .num{font-size:27px;font-weight:600;line-height:1}
.kpi-v small{font-size:13px;font-weight:700;color:var(--muted)}
.kpi-s{font-size:12px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kpi.hl{box-shadow:inset 0 0 0 2px var(--accent)}

/* ---------- 캐릭터 ---------- */
.pf{display:grid;gap:10px}
.pf-top{display:flex;align-items:center;gap:12px}
.pf-av{width:64px;height:64px;border-radius:16px;background:var(--scene);overflow:hidden;position:relative;flex:none}
.pf-av img{position:absolute;max-width:none;width:300px;height:300px;left:-118px;top:-122px;image-rendering:pixelated}
.pf .prof-name{font-size:34px}
.pf .prof-tags{margin-top:6px}
[data-size="2x2"] .pf .stat-grid,[data-size="2x2"] .pf .open-row{display:none}
[data-size="2x2"] .pf .prof-name{font-size:28px}
.pf .power{margin-top:0}
.pf .stat-grid{margin:0}

/* ---------- 도핑: 연습모드 버프 설정처럼 줄로 ---------- */
.dp-top{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:10px}
.dp-top .seg button{min-height:36px;padding:0 12px;font-size:13px}
.prac{display:grid;gap:8px}
.prow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:start}
.prow h3{font-size:12.5px;font-weight:700;color:var(--muted);padding-top:15px;line-height:1.2}
.picons{display:flex;flex-wrap:wrap;gap:6px}
.pic{position:relative;width:48px;height:48px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;padding:0;transition:border-color .15s ease,background-color .15s ease}
.pic img{width:32px;height:32px;object-fit:contain;image-rendering:pixelated;opacity:.38;filter:grayscale(.8);transition:opacity .15s ease,filter .15s ease}
.pic:hover{border-color:var(--line-strong)}
.pic[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-soft)}
.pic[aria-pressed="true"] img{opacity:1;filter:none}
.pic[aria-pressed="true"]::after{content:"";position:absolute;right:-4px;top:-4px;width:13px;height:13px;border-radius:50%;background:var(--accent);border:2px solid var(--surface)}
.pic:disabled{opacity:.3;cursor:not-allowed}
.pic .sub{position:absolute;left:2px;bottom:1px;font:700 9px/1 var(--font-body);color:var(--muted)}
.dsum{margin-top:10px;display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mtip{position:fixed;z-index:72;pointer-events:none;max-width:240px;padding:8px 10px;border-radius:10px;background:var(--toast-bg);color:var(--toast-text);font-size:12.5px;font-weight:600;line-height:1.4;box-shadow:0 10px 24px -10px var(--shadow-strong)}
.mtip small{display:block;font-weight:500;opacity:.8}

/* ---------- 보스: 카드 / 목록 ---------- */
.boss-bar{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:12px}
.boss-bar .seg button{min-height:36px;padding:0 12px;font-size:13px}
.boss-sum{display:inline-flex;flex-wrap:wrap;gap:6px}
.pill.lock{background:var(--surface-2);color:var(--muted)}
.tiles{grid-template-columns:repeat(auto-fill,minmax(116px,1fr));gap:12px}
.tile{cursor:pointer}
.tile.locked .pt img{filter:grayscale(1) brightness(.75)}
.tile.locked .bt{color:var(--muted);font-size:16px}
.lk{position:absolute;top:6px;left:6px;display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:999px;background:var(--surface);color:var(--muted);border:1px solid var(--line);font-size:11px;font-weight:700}
.pt .noimg{position:absolute;inset:0;display:grid;place-items:center;font:400 34px/1 var(--font-display);color:var(--muted);background:var(--surface-2)}
.btable-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:16px;background:var(--surface)}
.btable{width:100%;min-width:560px;border-collapse:collapse;font-size:14px}
.btable th{position:sticky;top:0;background:var(--surface);text-align:left;font-size:12.5px;font-weight:600;color:var(--muted);padding:10px 12px;border-bottom:1px solid var(--line);white-space:nowrap;z-index:1}
.btable td{padding:7px 12px;border-bottom:1px solid var(--line);vertical-align:middle}
.btable tbody tr{cursor:pointer}
.btable tbody tr:hover td{background:var(--surface-2)}
.btable .bw{display:flex;align-items:center;gap:10px;font-weight:700}
.btable .th{width:32px;height:38px;border-radius:8px;object-fit:cover;background:var(--portrait-bg);flex:none;display:block}
.btable .th.ic{height:auto;aspect-ratio:66 / 67;object-fit:contain;object-position:50% 50%}   /* 목록형은 WZ 보스 목록 아이콘(UIBoss BossList/<번호>/0.png, 66x67) */
.dbadge{display:inline-block;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:700;line-height:1;white-space:nowrap}
.btable .t{font:600 16px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.btable .lim{width:100px}
.btable tr.over .t{color:var(--warn-text)}
.btable tr.over .lim i{width:100%;background:var(--warn)}
.btable tr.locked td{color:var(--muted)}
.st-pill{display:inline-block;padding:3px 9px;border-radius:999px;font-size:12px;font-weight:700;white-space:nowrap;border:1px solid var(--line);background:var(--surface-2)}
.st-pill.over{background:var(--warn-soft);border-color:var(--warn-line);color:var(--warn-text)}
.st-pill.ok{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.boss-more{margin-top:12px;display:flex;justify-content:center}

/* ---------- HEXA 매트릭스: 인게임 보드 ---------- */
.hxb-fit{width:calc(506px * var(--hs,1));height:calc(507px * var(--hs,1));margin-inline:auto}
.hxb{position:relative;width:506px;height:507px;transform:scale(var(--hs,1));transform-origin:0 0;border-radius:14px;background:url("images/ui/hexaSkill_backgrnd.png") 0 0 / 506px 507px no-repeat}
.hxb-board{position:absolute;left:30px;top:22px;width:446px;height:462px;background:url("images/ui/hexaSkill_layer_slot.png") 0 0 / 100% 100% no-repeat}
.hs{position:absolute;width:68px;height:78px;padding:0;border:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--hx);transition:filter .15s ease,transform .12s ease}
.hs::before{content:"";position:absolute;inset:3px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:linear-gradient(180deg,#1c1830,#0d0b18)}
.hs.empty{background:rgb(120 110 170 / .35);cursor:default}
.hs.empty::before{background:rgb(20 16 36 / .45)}
.hs.max{background:linear-gradient(180deg,#ffe08a,var(--hx) 72%)}
button.hs:hover{filter:brightness(1.12);transform:translateY(-1px)}
.hs img{position:absolute;left:50%;top:50%;width:38px;height:38px;transform:translate(-50%,-44%);filter:drop-shadow(0 2px 3px rgb(0 0 0 / .8))}
.hs b{position:absolute;top:7px;left:50%;transform:translateX(-50%);min-width:18px;height:14px;padding:0 5px;border-radius:4px;background:#fff;color:#1a1530;font:700 10px/14px var(--font-mono);text-align:center;z-index:1}
.hs.max b{background:var(--star);color:#1a1405}
.hx-legend{margin-top:8px;display:flex;flex-wrap:wrap;gap:6px 12px;font-size:12.5px;color:var(--muted);justify-content:center}
.hx-legend span{display:inline-flex;align-items:center;gap:6px}
.hx-legend i{width:10px;height:10px;border-radius:2px;background:var(--hx);transform:rotate(45deg)}
.hx-mini{display:grid;gap:8px}
.hx-mini .hx{cursor:pointer;border:0;width:100%;text-align:left;color:inherit}

/* ---------- 장비: 인게임 장비창 ---------- */
.eq7{display:grid;grid-template-columns:repeat(7,minmax(0,44px));grid-auto-rows:44px;gap:5px;padding:12px;justify-content:center}
.es{position:relative;border-radius:7px;background:var(--eq-slot);border:2px solid var(--eq-line);display:grid;place-items:center;padding:0;color:inherit}
.es img{width:30px;height:30px;object-fit:contain;image-rendering:pixelated}
.es.leg{border-color:var(--legend);box-shadow:0 0 0 2px var(--legend-glow)}
.es.uni{border-color:#e8b93a}.es.epi{border-color:#a970e8}.es.rar{border-color:#4aa9e8}
.es .st{position:absolute;left:2px;bottom:1px;font:600 10px/1 var(--font-mono);color:var(--star);text-shadow:0 1px 1px #000}
.es.empty{background:transparent;border-style:dashed;cursor:default}
.es.empty span{font-size:9px;line-height:1.1;color:var(--eq-sub);text-align:center;padding:1px}
button.es:hover{background:var(--eq-line)}
.eq-char{grid-column:3 / 6;grid-row:1 / 5;border-radius:10px;border:1px dashed var(--eq-line);position:relative;overflow:hidden;background:radial-gradient(60% 60% at 50% 60%,rgb(255 255 255 / .06),transparent 70%)}
.eq-char img{position:absolute;left:50%;top:52%;width:300px;max-width:none;transform:translate(-50%,-50%);image-rendering:pixelated}
.eq-mini{display:grid;gap:8px}
.eq-mini .row{display:flex;flex-wrap:wrap;gap:5px}
.eq-mini .es{width:40px;height:40px}

/* 인게임 툴팁 (마우스 올림 · 상세 패널 공용) */
.tip{position:fixed;z-index:72;width:288px;max-width:calc(100vw - 16px);pointer-events:none;box-shadow:0 18px 40px -12px var(--shadow-strong)}
.igt{background:var(--eq-bg);color:var(--eq-text);border:1px solid var(--eq-line);border-radius:12px;padding:12px 14px;font-size:12.5px}
.igt .stars{text-align:center;color:var(--star);font-size:11px;letter-spacing:.5px;line-height:1.3}
.igt .stars .off{opacity:.25}
.igt .tn{text-align:center;font-weight:700;font-size:15px;margin:6px 0 10px}
.igt .tn.leg{color:var(--legend-text)}
.igt hr{border:0;border-top:1px dashed var(--eq-line);margin:9px 0}
.igt .th{display:flex;gap:12px;align-items:center}
.igt .ti{width:56px;height:56px;border-radius:8px;background:var(--eq-slot);border:2px solid var(--eq-line);display:grid;place-items:center;flex:none}
.igt .ti.leg{border-color:var(--legend);box-shadow:0 0 0 2px var(--legend-glow)}
.igt .ti img{width:38px;height:38px;object-fit:contain;image-rendering:pixelated}
.igt .tm{color:var(--eq-sub);font-size:12px;line-height:1.6}
.igt .tr{display:grid;grid-template-columns:78px 62px minmax(0,1fr);gap:4px;line-height:1.75}
.igt .tr .v{font:600 12px/1.75 var(--font-mono)}
.igt .tr .br{font:500 11px/1.75 var(--font-mono);color:var(--eq-sub)}
.igt .br .a{color:#7cc4ff}.igt .br .s{color:#c9a7ff}.igt .br .f{color:var(--star)}
.igt .pt-t{font-weight:700;margin-bottom:2px}
.igt .pt-t.leg{color:var(--legend-text)}
.igt .pl{padding-left:12px;line-height:1.7}
.igt .sc{text-align:center;color:var(--eq-sub);font-size:11.5px;margin-top:4px}

/* ---------- 사냥 ---------- */
.hunt2{display:grid;gap:8px}
.hrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:2px 10px;padding:9px 12px;border-radius:12px;background:var(--surface)}
.hrow .a{font-weight:700;font-size:14px}
.hrow .b{grid-column:1;font-size:12px;color:var(--muted)}
.hrow .c{grid-row:1 / 3;grid-column:2;align-self:center;text-align:right;font:600 16px/1.2 var(--font-mono)}
.hrow .c small{display:block;font:500 11px/1.2 var(--font-body);color:var(--muted)}
[data-size="2x2"] .hunt2 .hrow:nth-child(n+2){display:none}

/* ---------- 반응형: 태블릿 8칸 · 휴대폰 4칸 ---------- */
@media (max-width:1099px){
  .grid{--cols:8}
  .widget[data-size="2x2"]{--cw:4}
  .widget[data-size="4x2"],.widget[data-size="4x4"],.widget[data-size="8x2"],.widget[data-size="8x4"]{--cw:8}
}
@media (max-width:719px){
  .grid{--cols:4;--row:calc((100vw - 2 * var(--gutter) - 36px) / 4);gap:12px}
  .widget{padding:12px}
  .widget[data-size="2x2"]{--cw:2}
  .widget[data-size="4x2"],.widget[data-size="4x4"],.widget[data-size="8x2"],.widget[data-size="8x4"]{--cw:4}
  .widget[data-size="8x2"]{--rh:3}
  .dash-hello h1{font-size:22px}
  .dash-tools{margin-left:0}
  .w-head h2{font-size:19px}
  .w-icon{width:32px;height:32px}
  .prow{grid-template-columns:minmax(0,1fr)}
  .prow h3{padding-top:0}
  .pic{width:42px;height:42px}
  .pic img{width:28px;height:28px}
  .kpi-v .num{font-size:22px}
  .eq7{grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:auto;padding:8px;gap:4px}
  .es{aspect-ratio:1}
  .es img{width:70%;height:70%}
  .dpanel{top:auto;left:0;width:auto;height:82vh;border-left:0;border-top:1px solid var(--panel-edge);border-radius:22px 22px 0 0;animation:slideU .2s ease-out}
  .wdrawer{width:100vw}
}


/* ================= v4: 로고 메뉴 · 자유 배치 · 스택 · 스크롤 없는 위젯 ================= */
.scene{--hero-x:var(--hx-user,74%);--hero-h:calc(64px * var(--hero-s,10))}
.search{max-width:100%;min-width:0}
.search .btn{flex:none}

/* 장비창도 라이트/다크를 따른다 */
:root{--eq-bg:#f4f6f9;--eq-bar:#e9edf2;--eq-slot:#ffffff;--eq-line:#c9d2dc;--eq-text:#121a22;--eq-sub:#4b5663;--star:#b98100;--legend:#3f9d22;--legend-glow:rgba(63,157,34,.22);--legend-text:#2c7d12;--unique:#c99700;--unique-glow:rgba(201,151,0,.24);--unique-text:#8a6700;--epic:#7a3fd1;--epic-glow:rgba(122,63,209,.22);--epic-text:#5f2bb0;--rare:#1f9bd1;--rare-glow:rgba(31,155,209,.22);--rare-text:#11729c}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){--eq-bg:#171c24;--eq-bar:#10141a;--eq-slot:#252d38;--eq-line:#3f4a5a;--eq-text:#eef2f6;--eq-sub:#c5cdd6;--star:#ffd23c;--legend:#6cc644;--legend-glow:rgba(108,198,68,.34);--legend-text:#9be27a;--unique:#ffcc1a;--unique-glow:rgba(255,204,26,.3);--unique-text:#ffd84d;--epic:#b37bff;--epic-glow:rgba(179,123,255,.32);--epic-text:#c9a1ff;--rare:#4ec3ff;--rare-glow:rgba(78,195,255,.3);--rare-text:#86d6ff}
}
:root[data-theme="dark"]{--eq-bg:#171c24;--eq-bar:#10141a;--eq-slot:#252d38;--eq-line:#3f4a5a;--eq-text:#eef2f6;--eq-sub:#c5cdd6;--star:#ffd23c;--legend:#6cc644;--legend-glow:rgba(108,198,68,.34);--legend-text:#9be27a;--unique:#ffcc1a;--unique-glow:rgba(255,204,26,.3);--unique-text:#ffd84d;--epic:#b37bff;--epic-glow:rgba(179,123,255,.32);--epic-text:#c9a1ff;--rare:#4ec3ff;--rare-glow:rgba(78,195,255,.3);--rare-text:#86d6ff}

/* 로고 = 메뉴 열기 */
.brand{border:0;background:transparent;cursor:pointer;font:inherit;color:inherit}
.brand .chev{width:16px;height:16px;color:var(--muted);transition:transform .15s ease}
.brand[aria-expanded="true"] .chev{transform:rotate(180deg)}
.wd-head .brand-mark{width:34px;height:34px;border-radius:10px}
.mtabs{display:flex;gap:2px;padding:0 10px;border-bottom:1px solid var(--line);flex:none}
.mtabs button{flex:1;min-height:46px;border:0;background:transparent;border-bottom:3px solid transparent;font-weight:700;font-size:14px;color:var(--muted)}
.mtabs button:hover{color:var(--text)}
.mtabs button[aria-selected="true"]{color:var(--text);border-bottom-color:var(--accent)}
.nav-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.nav-list button{width:100%;min-height:50px;display:flex;align-items:center;gap:12px;padding:0 14px;border-radius:14px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:15px;text-align:left}
.nav-list button:hover{border-color:var(--line-strong)}
.nav-list button[aria-current="page"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.nav-list small{margin-left:auto;font-size:12px;color:var(--muted);font-weight:500}
.wrow .kids{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 10px}
.kid{display:inline-flex;align-items:center;gap:6px;min-height:32px;padding:0 6px 0 10px;border-radius:999px;background:var(--surface-2);font-size:13px;font-weight:600}
.kid button{width:26px;height:26px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--muted)}

/* 위젯 안에는 스크롤 없음 — 넘치면 아래를 흐리게 하고 "더 보기" */
.widget{position:relative}
.w-body{overflow:hidden;overscroll-behavior:auto;padding:6px;margin:-6px}
.w-body.clip{-webkit-mask-image:linear-gradient(#000 calc(100% - 64px),transparent);mask-image:linear-gradient(#000 calc(100% - 64px),transparent)}
.more-btn{position:absolute;left:50%;bottom:12px;transform:translateX(-50%);z-index:3;min-height:36px;padding:0 14px;font-size:13px;box-shadow:0 8px 20px -8px var(--shadow-strong)}

/* 자유 배치 (넓은 화면) */
@media (min-width:1100px){
  .grid.free .widget,.grid.free .ph{grid-column:calc(var(--gx) + 1) / span var(--cw);grid-row:calc(var(--gy) + 1) / span var(--rh)}
}
.ph{grid-column:span var(--cw);grid-row:span var(--rh);border:2px dashed var(--accent);border-radius:22px;background:color-mix(in srgb,var(--accent) 10%,transparent);pointer-events:none}
.moving .widget{cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.moving .widget:not(.lift){animation:jiggle .32s ease-in-out infinite alternate}
.moving .widget:nth-child(2n):not(.lift){animation-delay:-.16s}
@keyframes jiggle{from{rotate:-.25deg}to{rotate:.25deg}}
.widget.lift{z-index:30;cursor:grabbing;box-shadow:0 34px 60px -22px var(--shadow-strong);scale:1.02}
.widget.stack-target{outline:3px solid var(--accent) !important;outline-offset:4px;scale:.97;transition:scale .15s ease}
.stack-hint{position:absolute;inset:0;display:none;place-items:center;z-index:4;font-weight:700;font-size:15px;color:var(--accent-text);background:color-mix(in srgb,var(--accent-soft) 70%,transparent);border-radius:inherit}
.widget.stack-target .stack-hint{display:grid}

/* 스마트 스택 */
.stack-nav{display:inline-flex;align-items:center;gap:2px;padding:2px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line)}
.stack-nav button{width:30px;height:30px;border-radius:50%;border:0;background:transparent;display:grid;place-items:center;color:var(--muted)}
.stack-nav button:hover{color:var(--text);background:var(--surface)}
.stack-nav .ic{width:16px;height:16px}
.stack-dots{display:flex;gap:5px;padding:0 4px}
.stack-dots i{width:7px;height:7px;border-radius:50%;background:var(--line-strong)}
.stack-dots i.on{background:var(--accent);width:16px;border-radius:4px}
.w-body.swap{animation:swapIn .22s ease-out}
@keyframes swapIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* 주요 지표 · 심볼 */
.kpi-v .num{font-size:24px}
.kpi-sym{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.kpi-sym span{display:inline-flex;align-items:center;gap:4px;font:600 20px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.kpi-sym img{width:24px;height:24px;image-rendering:pixelated}
.syms{display:grid;gap:8px;padding:10px 12px;border-radius:14px;background:var(--surface)}
.sym-row{display:flex;align-items:center;gap:6px;flex-wrap:wrap}
.sym-row .lab{font-size:12px;font-weight:700;color:var(--muted);min-width:40px}
.sym-row .tot{margin-left:auto;font:600 15px/1 var(--font-mono);font-variant-numeric:tabular-nums}
.sym{position:relative;width:32px;height:32px;border-radius:9px;background:var(--surface-2);display:grid;place-items:center}
.sym img{width:26px;height:26px;image-rendering:pixelated}
.sym b{position:absolute;right:-4px;bottom:-5px;min-width:16px;text-align:center;font:700 9px/1 var(--font-mono);background:var(--surface);border:1px solid var(--line);border-radius:4px;padding:2px 2px}
.sym.mx b{background:var(--accent);color:var(--accent-ink);border-color:var(--accent)}

/* 장비: 제목 한 번 · 칸은 위젯 크기에 맞춤 · 넓으면 옆에 요약 */
.w-body.eqbox{container-type:size}
.eqwrap{height:100%;display:flex;gap:14px;align-items:center;justify-content:center}
.eq7{
  --s:min(calc((100cqh - 49px) / 6), calc((100cqw - 54px) / 7));
  grid-template-columns:repeat(7,var(--s));grid-auto-rows:var(--s);gap:5px;padding:12px;justify-content:center;flex:none;
  border-radius:18px;background:var(--eq-bg);border:1px solid var(--eq-line);
}
.es img{width:68%;height:68%}
.es .st{text-shadow:none;font-size:clamp(8px, calc(var(--s) * .2), 11px)}
.eq-char img{width:calc(var(--s) * 6.4)}
.eq-side{display:none;flex:1;min-width:0;align-self:stretch;flex-direction:column;justify-content:center;gap:10px}
.eq-side .dl2 dd{font-size:18px}
.eq-grades{display:flex;flex-wrap:wrap;gap:6px}
@container (min-aspect-ratio: 13/10){
  .eq7{--s:min(calc((100cqh - 49px) / 6), calc((56cqw - 54px) / 7))}
  .eq-side{display:flex}
}

@media (max-width:719px){
  .scene{--hero-x:50%}
  .search .btn{padding:0 12px}
  .kpi{padding:8px 10px;gap:2px}
  .kpi-ic,.kpi-s{display:none}
  .kpi-v .num,.kpi-sym span{font-size:17px}
  .kpi-sym img{width:18px;height:18px}
  .kpi-l{font-size:11px}
  .pf .prof-name,[data-size="2x2"] .pf .prof-name{font-size:21px}
  .pf-av{width:48px;height:48px}
  .pf-av img{width:225px;height:225px;left:-88px;top:-91px}
  .hrow .a{font-size:13px}
  .eq7{grid-template-columns:repeat(7,var(--s));grid-auto-rows:var(--s);padding:8px;gap:4px}
  .es{aspect-ratio:auto}
  .sym{width:28px;height:28px}
  .sym img{width:22px;height:22px}
}
@media (prefers-reduced-motion: reduce){
  .moving .widget:not(.lift){animation:none}
}

/* 크기 손잡이 · 스택 화살표 · 휴대폰 */
.rz{display:none;position:absolute;right:8px;bottom:8px;width:24px;height:24px;cursor:nwse-resize;z-index:6;border-right:3px solid var(--accent);border-bottom:3px solid var(--accent);border-radius:0 0 9px 0;touch-action:none}
.moving .rz{display:block}
.is-phone .rz,.is-phone #moveBtn,.is-phone #wdMove{display:none !important}
.ic.rot90{transform:rotate(90deg)}
.ic.rotm90{transform:rotate(-90deg)}
.sw-t{position:relative;width:40px;height:24px;border-radius:999px;background:var(--surface-2);border:1px solid var(--line-strong);padding:0;flex:none;margin-left:auto}
.sw-t::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:50%;background:var(--muted);transition:transform .15s ease}
.sw-t[aria-checked="true"]{background:var(--accent);border-color:var(--accent)}
.sw-t[aria-checked="true"]::after{transform:translateX(16px);background:var(--accent-ink)}
[data-sz="s"] .hrow{grid-template-columns:minmax(0,1fr)}
[data-sz="s"] .hrow .c{grid-row:auto;grid-column:1;text-align:left}
[data-sz="l"] .kpi-grid{grid-template-columns:repeat(4,minmax(0,1fr))}

/* ================= v5 ================= */
/* 옮기기: 흔들림 없음 */
.moving .widget:not(.lift){animation:none}
.moving-note{display:none}
.moving .moving-note{display:inline-flex;min-height:36px;font-size:13px}
.tb-actions{flex-wrap:wrap}
.grid{padding-top:20px}

/* 위젯 안 탭 (HEXA·5차 / 장비·메이커 / 기록 부위별·월별) */
.wtabs button{min-height:34px;padding:0 12px;font-size:13px}
.w-head .wtabs{margin-left:4px}

/* 보스: 부족한 것 · 올리면 정보 */
.why{display:flex;flex-wrap:wrap;gap:4px;margin-top:6px}
.why span{font-size:11px;font-weight:700;line-height:1;padding:4px 6px;border-radius:6px;white-space:nowrap}
.why .bad{background:var(--warn-soft);color:var(--neg-text);border:1px solid var(--warn-line)}
.why .warn{background:var(--surface-2);color:var(--warn-text);border:1px solid var(--line)}
.btable .why{margin-top:0}
.binfo{position:fixed;z-index:72;width:250px;pointer-events:none;padding:12px 14px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 18px 40px -14px var(--shadow-strong);display:grid;gap:6px;font-size:13px}
.bi-h{display:flex;align-items:center;gap:8px}
.bi-h b{font-size:15px}
.bi-t{font:600 24px/1.1 var(--font-mono);font-variant-numeric:tabular-nums}
.bi-t small{display:block;font:500 12px/1.4 var(--font-body);color:var(--muted)}
.bi-dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0}
.bi-dl dt{color:var(--muted);font-weight:600}
.bi-dl dd{margin:0;font-weight:600}
.btable tbody tr:hover td{background:var(--accent-soft)}

/* 도핑: 줄마다 넘기기 */
.pstrip{display:flex;align-items:center;gap:4px;min-width:0}
.pstrip .picons{flex:1;min-width:0;flex-wrap:nowrap;overflow:hidden}
.pnav{display:none;width:28px;height:48px;border-radius:10px;border:1px solid var(--line);background:var(--surface);flex:none;place-items:center;color:var(--muted)}
.pnav:disabled{opacity:.3;cursor:default}
.pnav .ic{width:16px;height:16px}
.pstrip.paged .pnav{display:grid}
.pcount{display:none;font:600 11px/1 var(--font-mono);color:var(--muted);min-width:26px;text-align:center}
.pstrip.paged .pcount{display:inline}
[data-sz="s"] .prow{grid-template-columns:minmax(0,1fr);gap:4px}
[data-sz="s"] .prow h3{padding-top:0}
[data-sz="s"] .dp-top .seg button{min-height:32px;padding:0 9px}

/* 5차 스킬 */
.vgroups{display:grid;gap:10px}
.vgroup h3{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.vcores{display:flex;flex-wrap:wrap;gap:6px}
.vc{position:relative;display:inline-flex;align-items:center;gap:6px;padding:4px 10px 4px 4px;border-radius:12px;background:var(--surface);font-size:12.5px;font-weight:600;max-width:100%}
.vc img{width:28px;height:28px;border-radius:7px}
.vc b{position:absolute;left:22px;top:-4px;font:700 9px/1 var(--font-mono);background:var(--accent);color:var(--accent-ink);border-radius:4px;padding:2px 3px}
.vc span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* 아이템 메이커 */
.mk{display:grid;gap:10px}
.mk-top{display:flex;align-items:center;gap:12px}
.mk-top .es img{width:36px;height:36px}
.mk-name{flex:1;min-width:0;display:grid;gap:4px}
.mk-sel{width:100%;min-height:40px;border-radius:10px;border:1px solid var(--line);background:var(--surface);padding:0 10px;font-weight:600}
.mk-stars{font-size:15px;letter-spacing:1px;color:var(--line-strong);line-height:1.2;word-break:break-all}
.mk-stars .on{color:var(--star)}
.mk-stars .goal{color:var(--accent)}
.mk-row{display:flex;align-items:center;gap:10px;padding:8px 12px;border-radius:12px;background:var(--surface)}
.mk-row b{font:600 16px/1 var(--font-mono);margin-right:auto}
.mk-row .seg button{min-height:32px;min-width:36px;padding:0}
.mk-pot{display:flex;flex-wrap:wrap;gap:6px;align-items:center}
.mk-pot .pt-t{font-weight:700;color:var(--legend-text);margin-right:4px}

/* 내 템 기록 그래프 */
.lslots{display:grid;gap:8px}
.lslot{display:grid;grid-template-columns:32px minmax(0,110px) minmax(0,1fr) auto;gap:10px;align-items:center;font-size:13px}
.lic{width:32px;height:32px;border-radius:9px;background:var(--surface);display:grid;place-items:center}
.lic img{width:24px;height:24px;image-rendering:pixelated}
.lic .ic{width:18px;height:18px;color:var(--muted)}
.lname{font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lname small{margin-left:4px;font-weight:500;color:var(--muted)}
.ltrack{display:grid;gap:3px}
.ltrack i{display:block;height:9px;border-radius:5px}
.ltrack i.b,.lleg i.b,.lbars i.b{background:var(--accent)}
.ltrack i.s,.lleg i.s,.lbars i.s{background:var(--legend)}
.lslot b{font:600 13px/1.2 var(--font-mono);text-align:right;white-space:nowrap}
.lslot b em{display:block;font-style:normal;color:var(--legend-text);font-size:11.5px}
.lleg{display:flex;flex-wrap:wrap;gap:12px;margin-top:10px;font-size:12px;color:var(--muted)}
.lleg span{display:inline-flex;align-items:center;gap:5px}
.lleg i{width:10px;height:10px;border-radius:3px;display:inline-block}
.lchart{display:flex;align-items:flex-end;gap:14px;height:calc(100% - 34px);min-height:140px}
.lcol{flex:1;min-width:0;height:100%;display:grid;grid-template-rows:1fr auto auto;gap:4px;text-align:center}
.lbars{display:flex;align-items:flex-end;justify-content:center;gap:4px;min-height:60px}
.lbars i{width:22px;border-radius:6px 6px 2px 2px;min-height:3px}
.lcol b{font:600 13px/1 var(--font-mono)}
.lcol span{font-size:11.5px;color:var(--muted)}
.kid-x{width:24px;height:24px;margin-left:6px;border-radius:50%;border:0;background:transparent;color:var(--muted);display:inline-grid;place-items:center;vertical-align:middle}
.kid-x .ic{width:13px;height:13px}
.kpi-v .num{font-size:22px}
.kpi{padding:10px 12px;gap:2px}
.kpi-sym span{font-size:18px}
@media (max-width:719px){
  .tb-actions .btn{padding:0;width:44px}
  .lslot{grid-template-columns:28px minmax(0,80px) minmax(0,1fr) auto;gap:8px}
}

/* 보스 카드: 세로가 모자라면 초상을 낮춘다 */
.tiles.fit .pt{aspect-ratio:auto;height:var(--pt-h)}
.tiles.fit .pt img{object-position:50% 22%}

/* 도핑 프리셋은 제목 줄 오른쪽 */
.dp-presets{margin-left:auto;display:inline-flex;align-items:center;gap:6px}
.dp-presets .seg button{min-height:34px;padding:0 11px;font-size:13px}
[data-sz="s"] .dp-presets .seg button{min-height:30px;padding:0 8px;font-size:12px}

/* 장비 위젯은 장비창만 — 요약은 상세에서 */
.eq-side{display:none !important}
.eq-side.open{display:flex !important}
@container (min-aspect-ratio: 13/10){ .eq7{--s:min(calc((100cqh - 49px) / 6), calc((100cqw - 54px) / 7))} }
button.srow2.eqrow{width:100%;border:0;text-align:left;cursor:pointer;font:inherit;color:inherit}
button.srow2.eqrow:hover{background:var(--surface-2)}

/* 보스: 보기·범위 버튼은 제목 줄 오른쪽 */
.boss-ctl{margin-left:auto;display:inline-flex;align-items:center;gap:6px;flex-wrap:wrap}
.boss-ctl .seg button{min-height:34px;padding:0 10px;font-size:13px}
.boss-ctl + .w-open{margin-left:0}
.boss-sum .pill{min-height:26px;font-size:12px}
/* 보스 목록: 짧은 칸은 내용 폭만, 남는 자리는 "부족한 것" */
.btable{min-width:0}
.btable th,.btable td{white-space:nowrap;padding:7px 10px}
.btable th:last-child,.btable td:last-child{width:100%;white-space:normal}
.btable .lim{width:90px}

/* 실제 사이트: 불러오는 중 · 슬라이더 */
.grid.busy{opacity:.55;pointer-events:none;transition:opacity .15s ease}
.grid.stale .widget[data-id="boss"] .w-body{opacity:.5;transition:opacity .15s ease .12s}
.sliders{display:grid;gap:6px}
.sl{display:grid;grid-template-columns:32px minmax(0,1fr) minmax(90px,1.2fr) 34px;gap:10px;align-items:center;padding:6px 10px;border-radius:12px;background:var(--surface)}
.sl.chg{box-shadow:inset 3px 0 0 var(--accent)}
.sl-ic{width:32px;height:32px;border-radius:8px;background:var(--surface-2);display:grid;place-items:center;overflow:hidden}
.sl-ic img{width:28px;height:28px}
.sl-n{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-n small{display:block;font-size:11px;font-weight:500;color:var(--muted)}
.sl input{width:100%;accent-color:var(--accent)}
.sl output{font:600 14px/1 var(--font-mono);text-align:right}
button.vc{border:0;cursor:pointer;color:inherit;font:inherit}
button.vc:hover{background:var(--surface-2)}
.vc.chg b,.hs.chg b{outline:2px solid var(--accent)}
/* 보스 이름 옆 배지 */
.bn{display:flex;align-items:center;gap:4px;flex-wrap:wrap;white-space:normal}
.bnn{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.nb{display:inline-flex;align-items:center;gap:2px;font:700 10.5px/1 var(--font-mono);padding:3px 5px;border-radius:5px;white-space:nowrap}
.nb.lv{background:var(--warn-soft);color:var(--warn-text);border:1px solid var(--warn-line)}
.nb.sym{background:var(--surface-2);color:var(--warn-text);border:1px solid var(--line)}
.nb.sym.max{background:var(--accent-soft);color:var(--accent-text);border-color:transparent}
.nb img{width:14px;height:14px;image-rendering:pixelated}
.btable .bw{flex-wrap:wrap}
/* 보스 카드: 짧고 높이 일정 — 이름 한 줄 · 클탐 + 배지 한 줄 · 막대 */
.tiles{grid-template-columns:repeat(auto-fill,minmax(112px,1fr));gap:10px;align-items:start}
.tile{padding:5px}
.tile .pt{aspect-ratio:211 / 176}
.tile .pt img{object-position:50% 12%}
.tile .tb{padding:6px 2px 2px}
.tile .bn{display:block;margin:0;font-size:13px;line-height:1.3}
.tile .bnn{display:block}
.bt2{display:flex;align-items:center;justify-content:space-between;gap:4px;margin:2px 0 6px;min-width:0}
.bt2 .num{font-size:18px;font-weight:600;line-height:1.1;white-space:nowrap}
.tile.over .bt2 .num{color:var(--warn-text)}
.tile.locked .bt2 .num{color:var(--muted)}
.nbs{display:flex;gap:3px;flex:none;overflow:hidden}
.tile .nb{padding:2px 4px;font-size:10px}
.tile .nb img{width:12px;height:12px}
.tile .ot,.tile .lk{font-size:10.5px;padding:2px 6px}
/* 배지 더 작게: 심볼 만렙은 아이콘 + 테두리만 */
.tile .nb{padding:1px 3px;font-size:9.5px;border-radius:4px}
.tile .nb.sym.max{padding:1px;box-shadow:0 0 0 1.5px var(--accent)}
.tile .bt2 .num{font-size:17px}
.tiles{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
/* 5차: 인게임 V 매트릭스 코어 틀 · 종류별 칸 맞춤 */
.vgroups{display:grid;gap:12px}
.vgroup h3{font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:6px}
.vgroup h3 small{font:600 11px/1 var(--font-mono);margin-left:4px}
.vgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(72px,1fr));gap:8px 6px}
.vt{display:grid;justify-items:center;gap:4px;padding:4px 2px;border:0;border-radius:12px;background:transparent;color:inherit;cursor:pointer;min-width:0}
.vt:hover{background:var(--surface)}
.vf{position:relative;width:58px;height:68px;background:center / 58px 68px no-repeat;display:grid;place-items:center}
.vf img{width:34px;height:34px;margin-top:-4px;border-radius:6px}
.vf b{position:absolute;bottom:3px;left:50%;transform:translateX(-50%);min-width:22px;padding:1px 4px;border-radius:5px;background:rgb(10 14 24 / .82);color:#fff;font:700 10px/1.3 var(--font-mono);text-align:center}
.vf b.mx{background:var(--star);color:#1a1405}
.vt.chg .vf b{outline:2px solid var(--accent)}
.vn{max-width:100%;font-size:11.5px;font-weight:600;line-height:1.25;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vn small{margin-left:2px;color:var(--muted);font:600 10px/1 var(--font-mono)}
/* 보스 카드 v2: 그림 전체 + 아래에 클탐·배지 겹침, 난이도는 오른쪽 위 */
.tile{padding:0;overflow:hidden;border-radius:12px}
.tile .pt{aspect-ratio:211 / 250;border-radius:0}
.tile .pt img{object-position:50% 50%}
.dtag{position:absolute;top:5px;right:5px;z-index:2;padding:3px 6px;border-radius:5px;font-size:10.5px;font-weight:800;line-height:1;border:1px solid transparent}
.tile .ov{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 6px 5px;background:linear-gradient(transparent,rgb(6 8 14 / .82) 55%);color:#fff}
.ovn{font-size:12.5px;font-weight:700;margin:0 0 1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tile .bt2{margin:0 0 4px}
.tile .bt2 .num{color:#fff;font-size:17px;text-shadow:0 1px 2px rgb(0 0 0 / .6)}
.tile.over .bt2 .num{color:#ffb35c}
.tile.locked .bt2 .num{color:#d0d0d8;font-size:13px}
.tile .lim{height:4px;background:rgb(255 255 255 / .22)}
.tile .nb{background:rgb(0 0 0 / .45);color:#ffd9a8;border-color:rgb(255 255 255 / .18)}
.tile .nb.sym.max{background:rgb(0 0 0 / .45);color:#fff;box-shadow:0 0 0 1.5px var(--star)}
.tile.over{box-shadow:inset 0 0 0 2px var(--warn-line)}
.tile.over .pt img{filter:none}
.tile .ot,.tile .lk,.tile .rb{display:none}
/* 배경 캐릭터: 넥슨 이미지는 300x300 · 발 (150,200) 고정 — 자르지 않고 통째로 */
.hero{overflow:visible;width:calc(300 * var(--s));height:calc(300 * var(--s));left:calc(var(--hero-x) - 150 * var(--s));bottom:calc(var(--feet) - 100 * var(--s))}
.hero img{left:0;top:0}
/* 작은 얼굴 사진은 예전 위치(머리~몸통) 그대로 */
/* 캐릭터 끌기 모드 */
/* 위젯은 반투명으로 남겨 두고(캐릭터를 어디 둘지 보이게), 누르기는 뒤의 배경이 받는다 — 화면 아무 곳이나 끌면 캐릭터가 따라온다 */
.hero-edit .app{opacity:.3;pointer-events:none;transition:opacity .2s ease}
.hero-edit .scene{pointer-events:auto;cursor:grab;touch-action:none}
.hero-edit.hero-drag .scene{cursor:grabbing}
.hero-edit .hero{pointer-events:none}
/* 캐릭터 모양 그대로 테두리 (넥슨 그림은 300x300 투명 캔버스라 상자 대신 알파 윤곽) */
.hero-edit .hero img{filter:drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 10px var(--accent))}
/* 머리 위 안내 (머리 위치는 대략 발 위 74칸 · 화면 밖으로 안 나가게) */
.hero-hint{display:none;position:absolute;left:clamp(90px,var(--hero-x),calc(100% - 90px));bottom:min(calc(var(--feet) + 74 * var(--s)),calc(100% - 52px));transform:translateX(-50%);white-space:nowrap;padding:8px 12px;border-radius:999px;background:var(--accent);color:var(--accent-ink);font:700 14px/1 var(--font-body);box-shadow:0 8px 20px -8px var(--shadow-strong);pointer-events:none}
.hero-edit .hero-hint{display:block}
.hero-edit.hero-drag .hero-hint{opacity:.35}
.hero-bar{position:fixed;left:50%;bottom:calc(20px + env(safe-area-inset-bottom,0px));transform:translateX(-50%);z-index:60;display:flex;align-items:center;gap:8px;flex-wrap:wrap;justify-content:center;padding:10px 12px;border-radius:16px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 34px -12px var(--shadow-strong);font-weight:600;font-size:14px;max-width:calc(100vw - 32px)}
/* 로고: 글자만 · 캐릭터 + 지표 한 위젯(이름표 없음) */
.brand-word{font:400 28px/1 var(--font-display);letter-spacing:.02em}
.widget.bare{padding-top:14px}
.me{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.me-av{width:60px;height:60px}
.me-id{min-width:0;flex:1}
.me-name{font:400 28px/1.1 var(--font-display);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.me .prof-tags{margin-top:5px}
.me-btns{display:flex;gap:6px;align-items:center;align-self:flex-start}
.me-btns .icon-btn{width:36px;height:36px}
.widget.bare .kpi-grid{height:auto}
/* 캐릭터 + 지표: 넓으면 카드 4개 한 줄 */
.widget.bare .kpi-grid{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.widget.bare .kpi{min-height:92px}
/* 지표 카드 세로 채우기 (넓은 화면): 큰 카드(상세 내역 · 스탯 효율)는 두 줄 높이, 숫자 카드는 한 줄씩 위아래로 — 카드 4개가 위젯 높이(h=2) 안에
   (예전엔 4번째 카드가 아래로 밀려 잘렸다) */
@media (min-width:720px){
  .widget.bare .kpi-grid{grid-template-columns:none;grid-template-rows:repeat(2,minmax(0,1fr));grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);grid-auto-rows:auto;min-height:0}
  .widget.bare .kpi{min-height:0}
  .widget.bare .kpi.kpi-detail,.widget.bare .kpi.kpi-eqv{grid-row:span 2}
  .widget.bare button.kpi{justify-content:center;gap:2px;padding:7px 12px;overflow:hidden}
  .widget.bare button.kpi .kpi-ic{display:none}
}
/* 배경 캐릭터 옮기기: 위젯은 완전히 뒤로(숨김), 캐릭터에 "끌어서 옮기기" */
.hero-edit-btn{display:none}
.moving .hero-edit-btn{display:inline-flex}
.is-phone .hero-edit-btn{display:none !important}
/* 보스 위젯: 제목 "보스"(아이콘 없음) · 한 줄 머리 · 목록은 한 줄씩 */
.widget[data-id="boss"] .w-head{gap:8px}
.widget[data-id="boss"] .w-head h2{margin-right:2px}
.widget[data-id="boss"] .boss-sum{gap:4px}
.widget[data-id="boss"] .boss-sum .pill,.widget[data-id="boss"] .w-head > .pill{min-height:24px;padding:0 8px;font-size:11.5px}
.widget[data-id="boss"] .boss-ctl{gap:4px}
.widget[data-id="boss"] .boss-ctl .seg button{min-height:32px;padding:0 9px}
.widget[data-id="boss"] .w-open{min-height:32px;padding:0 11px}
.btable th:last-child,.btable td:last-child{width:100%;white-space:nowrap}
.btable th,.btable td{padding:5px 7px}
.btable .bpc{width:1%;padding-right:2px}
.btable .bpc .th{max-width:none}
.btable .reqs{min-width:max-content}
.btable .th{width:28px;height:28px;border-radius:7px;object-position:50% 20%}
.btable .th.ic{height:auto;object-position:50% 50%}
.btable .bnm{white-space:nowrap;font-weight:700}
.btable .reqs{display:flex;gap:4px;flex-wrap:nowrap}
.btable .tr{text-align:right}
.btable .t{font-size:15px}
.btable td.num{font-size:12.5px;color:var(--muted)}
.btable .lim{width:64px}
.nb.bad{background:var(--warn-soft);color:var(--neg-text);border:1px solid var(--warn-line)}
/* 카드 15칸 넘으면 마지막 칸 = 전체 보기 */
.tile.more{display:flex;background:transparent;border:1px dashed var(--line-strong);box-shadow:none}
.tile.more button{flex:1;aspect-ratio:211 / 250;display:grid;place-content:center;gap:4px;border:0;background:transparent;color:var(--muted);font-size:12.5px;font-weight:700;cursor:pointer}
.tile.more b{font-size:20px;color:var(--text)}
.tile.more:hover{background:var(--surface)}
/* 보스 카드 v3: 그림 아래 칸에 클탐 · 제한 막대 · 요구사항 (위젯 빈 곳 없이 줄 수 맞춤) */
.tile .tb2{padding:6px 7px 7px;display:grid;gap:5px}
.tile .tb2 .bt2{margin:0;line-height:1}
.tile .tb2 .num{color:var(--text);font:700 17px/1 var(--font-mono);text-shadow:none}
.tile.over .tb2 .num{color:var(--warn-text)}
.tile.locked .tb2 .num{color:var(--muted);font-size:13px}
.tile .tb2 .lim{height:4px;background:var(--track)}
.tile .tb2 .bt2{display:flex;align-items:center;gap:4px;min-width:0}
.tile .tb2 .solo-t{flex:none}
.tile .tb2 .nbs{flex:1;min-width:0;display:flex;justify-content:flex-end;gap:3px;overflow:hidden}
.tile .tb2 .nb{background:var(--surface-2);color:var(--warn-text);border:1px solid var(--line);font-size:9.5px;padding:2px 4px}
.tile .tb2 .nb.lv{background:var(--warn-soft);border-color:var(--warn-line)}
.tile .tb2 .nb.bad{background:var(--warn-soft);color:var(--neg-text);border-color:var(--warn-line)}
.tile .tb2 .nb.sym.max{background:var(--accent-soft);color:var(--accent-text);border-color:transparent;box-shadow:none;padding:1px 3px}
.tile .pt .ovn{position:absolute;left:7px;bottom:6px;right:7px;color:var(--text);margin:0}
.tile .pt .noimg{position:absolute;inset:0;display:grid;place-items:center;font:400 30px/1 var(--font-display);color:var(--muted)}
.tile.more{align-self:stretch}
.tile.more button{aspect-ratio:auto;height:100%;min-height:120px}
/* 캐릭터 지표 카드: 남는 높이만큼 늘려서 빈 곳 없이 */
.widget.bare .w-body{display:flex;flex-direction:column}
.widget.bare .kpi-grid{flex:1;grid-auto-rows:1fr}
/* 도핑: 촘촘하게 (위젯만 · 상세 창은 그대로) + 아래 링크 스킬 줄 */
.widget[data-id="doping"] .prac{gap:5px}
.widget[data-id="doping"] .prow{grid-template-columns:78px minmax(0,1fr);align-items:center;gap:6px}
.widget[data-id="doping"] .prow h3{padding-top:0;font-size:12px}
.widget[data-id="doping"] .pic{width:40px;height:40px;border-radius:11px}
.widget[data-id="doping"] .pic img{width:27px;height:27px}
.widget[data-id="doping"] .pnav{height:40px;width:24px}
.widget[data-id="doping"] .dsum{margin-top:6px}
.widget[data-id="doping"] .dsum .pill{min-height:24px;font-size:11.5px;padding:0 8px}
.widget[data-id="link"] .w-head{flex-wrap:nowrap;margin-bottom:0}
.widget[data-id="link"] .w-head h2{flex:none}
.lk-strip{flex:1;min-width:0}
.widget[data-id="link"] .pic{width:40px;height:40px;border-radius:11px;flex:none}
.widget[data-id="link"] .pic img{width:27px;height:27px}
.widget[data-id="link"] .pnav{height:40px;width:24px}
.widget[data-id="link"] .w-body{display:none}
.pic.lk{border-color:var(--line-strong)}
.pic.lk img{opacity:1;filter:none}
.pic.lk::after{display:none}
.pic .lkv{position:absolute;right:2px;bottom:1px;font:700 9.5px/1 var(--font-mono);color:var(--muted)}
/* 하이퍼 · 유니온 · 링크 위젯 */
.hy{display:grid;gap:8px}
.hy-sum{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap}
.hy-gain{font:700 24px/1 var(--font-mono);color:var(--accent-text)}
.hy-t{width:100%;border-collapse:collapse;font-size:13px}
.hy-t th{font-size:11.5px;font-weight:600;color:var(--muted);text-align:left;padding:3px 4px;border-bottom:1px solid var(--line)}
.hy-t td{padding:4px;border-bottom:1px solid var(--line);white-space:nowrap}
.hy-t .tr{text-align:right}
.hy-t small{color:var(--muted);font-size:11px}
.hy-t td.chg{color:var(--accent-text);font-weight:700}
.hy-t tr.me-row td{background:var(--accent-soft);color:var(--accent-text);font-weight:700}
.hy-sum b{color:var(--accent-text)}
.hy-notes{margin:0;padding-left:18px;display:grid;gap:4px;font-size:13px}
.un{display:grid;gap:10px}
.un h3,.lk-list h3{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:5px}
.un-lv b{font:700 20px/1 var(--font-mono)}
.un-pills{display:flex;flex-wrap:wrap;gap:4px}
.un-pills .pill{min-height:24px;font-size:11.5px;padding:0 8px}
.lk-list{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.lk-row{display:grid;grid-template-columns:32px minmax(0,1fr);gap:8px;align-items:center}
.lk-ic{width:32px;height:32px;border-radius:8px;background:var(--surface);display:grid;place-items:center}
.lk-ic img{width:28px;height:28px;image-rendering:pixelated}
.lk-n{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-n small{color:var(--muted);font-weight:600}
.lk-e{font-size:11.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#dpanel .lk-e{white-space:pre-line}
/* 보스 목록: 위젯 안에서 스크롤 · 머리줄 고정 · 끌어서 내리기 */
.widget .w-body.bscroll{display:flex;flex-direction:column}
.widget .bscroll .btable-wrap{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;cursor:grab}
.widget .bscroll .btable-wrap.dragging{cursor:grabbing;user-select:none}
/* 5차: 제목 없이 · 직업 코어 | 특수 코어 한 줄 · 끌어서 스크롤 */
.vgrid.v6{grid-template-columns:repeat(6,minmax(0,1fr));gap:8px 4px}
.vgroups > .vgroup + .vgroup{padding-top:10px;border-top:1px dashed var(--line)}
.widget .w-body.dscroll{overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;cursor:grab}
.widget .w-body.dscroll.dragging{cursor:grabbing;user-select:none}
/* 링크 최적화 */
.lk-opt{flex:none;min-height:34px;padding:0 11px;font-size:13px}
.lk-opt b{color:var(--accent-text)}
.pic.lk.out{border-color:var(--warn-line);box-shadow:inset 0 0 0 1px var(--warn-line)}
.pic.lk.out img{opacity:.45}
.lko{display:grid;gap:12px}
.lko h3{font-size:12px;font-weight:700;color:var(--muted);margin-bottom:6px}
.lko-swap{display:flex;flex-wrap:wrap;gap:5px}
.pill.out{background:var(--warn-soft);border-color:var(--warn-line);color:var(--neg-text)}
.pill.in{background:var(--accent-soft);border-color:transparent;color:var(--accent-text)}
.lk-row.out .lk-n{color:var(--neg-text)}
.lk-row.in .lk-n{color:var(--accent-text)}
.lk-k{font-size:10.5px;font-weight:700;color:var(--muted);border:1px solid var(--line);border-radius:5px;padding:1px 4px;margin-left:2px}
.lk-c{float:right;font-size:12.5px;font-weight:700}
#dpanel .lk-n{white-space:normal}
.widget[data-id="link"]{padding:12px 16px}
.widget[data-id="link"] .w-head{margin-bottom:6px;min-height:0}
.widget[data-id="link"] .w-body{display:block}
.lk-sum{flex:1;min-width:0;font-size:12.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lk-sum b{color:var(--accent-text)}
.lk-arrow{flex:none;align-self:center;font-weight:800;color:var(--muted);padding:0 2px}
.pic.lk.in{border-color:var(--accent);background:var(--accent-soft)}
.lk-row.dim{opacity:.6}
.lk-sel{margin-left:4px;font-size:12px;padding:1px 4px;border-radius:6px;border:1px solid var(--line);background:var(--surface);color:var(--text)}
.tag.in{background:var(--accent-soft);color:var(--accent-text)}
/* 보스: 실제 시간 보정 */
.pill.cal{background:var(--accent-soft);border-color:transparent;color:var(--accent-text);gap:4px;padding-right:4px}
.cal-x{width:20px;height:20px;border:0;border-radius:50%;background:transparent;color:inherit;display:grid;place-items:center;padding:0}
.cal-x .ic{width:12px;height:12px}
.calib{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:6px}
.calib input{width:120px;min-height:38px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 15px/1 var(--font-mono)}
/* 잠재 등급 색: 레전드리 초록 · 유니크 노랑 · 에픽 보라 · 레어 하늘 (칸 테두리 · 툴팁 제목 · 요약) */
.es.uni,.igt .ti.uni,.slot.uni .box{border-color:var(--unique);box-shadow:0 0 0 2px var(--unique-glow)}
.es.epi,.igt .ti.epi,.slot.epi .box{border-color:var(--epic);box-shadow:0 0 0 2px var(--epic-glow)}
.es.rar,.igt .ti.rar,.slot.rar .box{border-color:var(--rare);box-shadow:0 0 0 2px var(--rare-glow)}
.igt .tn.uni,.igt .pt-t.uni{color:var(--unique-text)}
.igt .tn.epi,.igt .pt-t.epi{color:var(--epic-text)}
.igt .tn.rar,.igt .pt-t.rar{color:var(--rare-text)}
.pill.g-leg{box-shadow:inset 3px 0 0 var(--legend)}
.pill.g-uni{box-shadow:inset 3px 0 0 var(--unique)}
.pill.g-epi{box-shadow:inset 3px 0 0 var(--epic)}
.pill.g-rar{box-shadow:inset 3px 0 0 var(--rare)}
/* 지표 카드: 누르면 상세 · 고르기 */
button.kpi{border:0;text-align:left;color:inherit;font:inherit;cursor:pointer}
button.kpi:hover{box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.kpi-pick{display:flex;flex-wrap:wrap;gap:5px}
.kpi-pick .chip{min-height:30px;padding:0 10px;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-size:12.5px;font-weight:600}
.kpi-pick .chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--accent-ink)}
/* 링크: 지금 → 최적화 (2줄 x 6) */
.lk2{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;height:100%;min-width:0;align-content:flex-start}
.lk2-t{flex:none;font:400 17px/1.2 var(--font-display);margin:0}
.widget[data-id="link"] .w-body{container-type:inline-size}
.lk2{--lkc:clamp(20px,calc((100cqw - 150px) / 18),32px)}   /* 격자 세 개(6x2)가 한 줄에 들어가게 칸 크기를 위젯 폭에 맞춤 */
.lk2-grid{display:grid;grid-template-columns:repeat(6,var(--lkc));grid-auto-rows:var(--lkc);gap:3px;flex:none}
.lk2-c{position:relative;padding:0;border-radius:8px;border:1.5px solid var(--line);background:var(--surface);display:grid;place-items:center;cursor:pointer}
.lk2-c img{width:calc(var(--lkc) - 7px);height:calc(var(--lkc) - 7px);image-rendering:pixelated}
.lk2-c b{position:absolute;right:1px;bottom:0;font-size:10px;line-height:1;padding:1px 2px;border-radius:4px;background:rgb(0 0 0 / .55);color:#fff}
.lk2-c.out{border-color:var(--warn-line);background:var(--warn-soft)}
.lk2-c.out img{opacity:.5}
.lk2-c.new{border-color:var(--accent);background:var(--accent-soft)}
.lk2-arr{flex:none;font-weight:800;font-size:18px;color:var(--muted)}
.lk2-g{flex:none;font-weight:700;color:var(--accent-text)}
.widget[data-id="link"] .w-body{overflow:hidden}
/* HEXA 하단 솔 에르다 · HEXA 스탯 */
.hx-erda{margin-top:8px;display:flex;flex-wrap:wrap;justify-content:center;gap:6px 16px;font-size:13px;color:var(--muted)}
.hx-erda span{display:inline-flex;align-items:center;gap:5px}
.hx-erda img{width:24px;height:24px;image-rendering:pixelated}
.hx-erda b{color:var(--text);font-size:15px}
.hxs{display:grid;gap:10px}
.hxs-c{padding:10px 12px;border-radius:12px;background:var(--surface)}
.hxs-c h3{font-size:13px;font-weight:700;margin-bottom:6px;display:flex;justify-content:space-between}
.hxs-c h3 small{color:var(--muted);font-weight:600}
.hxs-c ul{list-style:none;margin:0;padding:0;display:grid;gap:4px}
.hxs-c li{display:flex;justify-content:space-between;font-size:13px;color:var(--muted)}
.hxs-c li.main{color:var(--text);font-weight:700}
.hy-def{margin-bottom:2px}
.hy-def button{min-height:30px;padding:0 9px;font-size:12px}
.symw .sliders{margin-top:8px}
/* 보스 제목 줄: 추정 → 실제 시간 입력칸 */
.est-wrap{position:relative;display:inline-flex}
.pill.est{cursor:pointer;font:inherit;font-size:11.5px;font-weight:600}
.pill.est[aria-expanded="true"]{background:var(--accent-soft);color:var(--accent-text);border-color:transparent}
.est-pop{position:absolute;top:calc(100% + 6px);left:0;z-index:30;width:min(340px,80vw);padding:10px;border-radius:14px;background:var(--surface);border:1px solid var(--line);box-shadow:0 14px 30px -12px var(--shadow-strong)}
.est-pop select{flex:1;min-width:0;min-height:38px;border-radius:10px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 8px;font-size:13px}
.est-pop input{width:80px}
.est-pop .w-sub{flex-basis:100%;margin:2px 0 0;font-size:11.5px}
/* 넥슨 프리셋 (보스용 · 사냥용) — 보스 제목 줄 "프리셋" */
.pre-pop{width:min(460px,86vw);display:grid;gap:10px}
.pre-row{display:grid;gap:6px}
.pre-row h4{margin:0;font-size:12.5px;display:flex;gap:6px;align-items:center;justify-content:space-between;white-space:nowrap}
.pre-row h4 .w-sub{font-weight:500}
.pre-parts{display:grid;grid-template-columns:repeat(auto-fill,minmax(128px,1fr));gap:6px}
.pre-part{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.pre-part b{min-width:38px;font-weight:600;color:var(--text)}
.pre-part button{min-width:26px;height:26px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font:600 12px/1 var(--font-mono);cursor:pointer;position:relative}
.pre-part button[aria-pressed="true"]{background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}
.pre-part button.now::after{content:"";position:absolute;right:2px;top:2px;width:5px;height:5px;border-radius:50%;background:var(--accent-text)}
.pre-sum{margin:0;font-size:11.5px;color:var(--muted);line-height:1.45}
.hunt-pre{font-size:12px;color:var(--muted);margin:0 0 6px}
.linklike{background:none;border:0;padding:0;color:var(--accent-text);cursor:pointer;font:inherit;text-decoration:underline}
/* 상단 보기 탭 (보스 · 사냥 · 직접 만든 화면) — 탭마다 위젯 배치 · 데이터 프리셋 */
.views{display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow-x:auto;max-width:44vw;scrollbar-width:none}
.views::-webkit-scrollbar{display:none}
.views button{min-height:34px;padding:0 12px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 13px/1 inherit;cursor:pointer;white-space:nowrap}
.views button[aria-selected="true"]{background:var(--accent);color:var(--on-accent,#fff);border-color:transparent}
.views .v-add{padding:0 10px;color:var(--muted)}
.views .v-edit{display:inline-flex;gap:4px;align-items:center}
.views .v-edit input{width:96px;min-height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);padding:0 6px;font-size:12.5px}
.views .v-edit select{min-height:30px;border-radius:8px;border:1px solid var(--line);background:var(--surface-2);color:var(--text);font-size:12px}
/* 상세 내역 (전투력 카드) */
.kpi.kpi-detail{grid-row:span 2;justify-content:flex-start;overflow:hidden}
.kpi-detail .kpi-l b{font-size:13px;margin-left:4px}
/* 카드 안 쪽 넘기기 (상세 내역 · 스탯 효율) */
.kpi-head{display:flex;align-items:center;justify-content:space-between;gap:6px;min-width:0}
.kpi-head .kpi-open{background:none;border:0;padding:0;color:inherit;font:inherit;text-align:left;cursor:pointer;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* 칸 몸통 = 누르면 다음 쪽 (사용자 2026-09-27 "<> 없어도 그냥 누르면 넘어가게 … 하단 누르면 넘어가는거고 스탯효율 누르면 상세") — 쪽 점은 아래 여백에 */
.kpi.kpi-detail,.kpi.kpi-eqv{position:relative}
.kpi-body{display:block;width:100%;margin:0;padding:0;border:0;border-radius:6px;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer}
.kpi-body:hover{background:var(--surface-2)}
.kpi-body:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.kpi-dots{position:absolute;left:50%;bottom:4px;transform:translateX(-50%);display:flex;gap:4px;pointer-events:none}
.kpi-dots i{width:5px;height:5px;border-radius:50%;background:var(--line-strong)}
.kpi-dots i.on{background:var(--accent)}
.kd-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px 7px;margin:2px 0 0;font-size:11px}
.kd-i{display:flex;justify-content:space-between;gap:4px;border-bottom:1px dashed var(--line);padding:1px 0;min-width:0;line-height:1.35}
.kd-l{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.kd-i b{font-weight:600;white-space:nowrap}
.kd-grid .full{grid-column:1/-1}
/* 버프 on / off (사용자 2026-09-27 "눈모양 왼쪽에 버프 on off … 기본 on") */
.buff-tg{height:36px;padding:0 10px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--muted);font:600 12px/1 inherit;cursor:pointer;white-space:nowrap}
.buff-tg b{margin-left:3px;color:var(--text)}
.buff-tg[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-text)}
.buff-tg[aria-pressed="true"] b{color:var(--accent-text)}
.kpi.kpi-eqv{justify-content:flex-start}
.kpi-eq{border-top:1px solid var(--line);padding-top:3px;gap:1px}
/* 어빌리티 비교 */
.abil-now{margin:0 0 8px;font-size:12.5px;display:grid;gap:3px}
.abil-now li{list-style:none;display:flex;gap:6px}
.abil-now .g{min-width:52px;color:var(--muted)}
.abil-tbl{width:100%;border-collapse:collapse;font-size:12.5px}
.abil-tbl td{padding:4px 6px;border-bottom:1px solid var(--line);vertical-align:top}
.abil-tbl td.r{text-align:right;white-space:nowrap}
.abil-h{margin:10px 0 4px;font-size:12.5px}
.lab-head{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin:0 0 8px}
.lab-head select{max-width:100%}
.tbl-wrap{overflow-x:auto;max-width:100%}
.lab-tbl th{padding:4px 6px;text-align:left;font-weight:600;color:var(--muted);border-bottom:1px solid var(--line);white-space:nowrap}
.lab-tbl tr.me td{background:rgb(var(--panel-rgb) / .5);font-weight:600}
.lab-cols{display:grid;grid-template-columns:1fr 1fr;gap:12px;align-items:start}
@media (max-width:720px){.lab-cols{grid-template-columns:1fr}}
.lab-job{all:unset;cursor:pointer;border-bottom:1px dotted var(--muted)}
.lab-job[aria-pressed="true"]{font-weight:700;border-bottom-style:solid}
.lab-job:focus-visible{outline:2px solid var(--accent, currentColor);outline-offset:2px}
.lab-build{margin-top:10px;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px;line-height:1.6}
.lab-build dl{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:6px 0 0}
.lab-build dt{color:var(--muted);white-space:nowrap}
.lab-build dd{margin:0;overflow-wrap:anywhere}
/* 스탯 효율 카드 */
.kpi-eqv .kpi-l small{font-weight:600;color:var(--muted);margin-left:2px}
.kpi-eq{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:2px;font-size:12px}
.kpi-eq{display:grid}
.kpi-eq .eq-r{display:flex;justify-content:space-between;gap:6px;white-space:nowrap;line-height:1.35}
.kpi-eq .eq-r>span{color:var(--muted)}
.kpi-eq .eq-r b{font-size:12.5px}
.kpi-eq .eq-2{display:grid;grid-template-columns:1fr auto auto;column-gap:0;align-items:baseline}
.kpi-eq .eq-2 .eq-m{min-width:44px;text-align:right;padding-right:7px}
.kpi-eq .eq-2 .eq-a{min-width:40px;text-align:right;padding-left:7px;border-left:1px solid var(--line)}
.kpi-eq .eq-h small{color:var(--muted);font-size:10.5px;font-weight:600}
.hy-t td.eq-a,.hy-t th.eq-a{border-left:1px solid var(--line)}
.kpi-eq .eq-r b small{font-size:10.5px;font-weight:600;color:var(--muted);margin-right:3px}
/* 도핑: 이벤트 스킬 줄 (네 줄이 2칸에 들어가게 아이콘 36px) */
.ev-row{position:relative}
.pic.ev .evx{font:700 11px/1 var(--font-body);color:var(--muted)}
.pic.ev img{opacity:1;filter:none}
.ev-full{flex-wrap:wrap}
.ev-full .w-sub{flex-basis:100%;margin:2px 0 0;font-size:11.5px}
/* 링크 위젯: 제목 아래 [링크 | 이벤트] */
.lk2-h{display:flex;align-items:center;gap:8px;flex-basis:100%}
.lk2-tabs button{min-height:26px;padding:0 9px;font-size:12px}
.ev-none{flex:1;min-width:0}
.lk2-c .evx{font:700 11px/1 var(--font-body);color:var(--muted)}
.ev-order{margin:0;padding-left:20px;display:grid;gap:4px;font-size:13px}
/* 링크: 오른쪽 "올릴 순서" 12칸 */
.lk2-sep{flex:none;width:1px;align-self:stretch;background:var(--line);margin:0 2px}
.lk2-upw{position:relative;flex:none}
.lk2-cap{position:absolute;top:-17px;left:0;font-size:11px;font-weight:700;color:var(--muted);white-space:nowrap}
.lk2-c.up i{position:absolute;left:1px;top:0;font-size:9.5px;font-style:normal;font-weight:800;line-height:1;padding:1px 2px;border-radius:3px;background:var(--accent);color:var(--accent-ink)}
.lk2-c.empty{border-style:dashed;background:transparent;cursor:default}
/* 이벤트 탭: 스킬 효과 바로 */
.ev-cards{display:flex;gap:8px;flex:1;min-width:0;overflow:hidden}
.ev-card{display:flex;gap:8px;align-items:center;padding:4px 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);text-align:left;color:inherit;font:inherit;min-width:0;flex:1;cursor:pointer}
.ev-ic{flex:none;width:32px;height:32px;display:grid;place-items:center}
.ev-ic img{width:32px;height:32px;image-rendering:pixelated}
.ev-tx{display:grid;gap:0;min-width:0;font-size:11.5px;line-height:1.35}
.ev-tx b{font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-tx b small{color:var(--muted);font-weight:600}
.ev-eff{color:var(--accent-text);font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-info{color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ev-ord{flex-basis:100%;margin:0}
  .sb-t{width:100%;border-collapse:collapse;font-size:12px}
  .sb-t th,.sb-t td{padding:3px 6px;border-bottom:1px solid var(--line, rgba(255,255,255,.08));text-align:right;white-space:nowrap}
  .sb-t th:first-child{text-align:left}
  .sb-t thead th{opacity:.7;font-weight:500}
  .sb-t .sb-sub td{text-align:left;white-space:normal;opacity:.75;font-size:11px;padding-top:0}
  .sb-ok{color:#5fd18a;font-weight:600}
  .sb-bad{color:#ff7a6b;font-weight:600}

/* 내 템 기록: 메소 시세(1억 = 원) · 현금 환산 (2026-10-04) */
.lrate{display:flex;align-items:center;flex-wrap:wrap;gap:6px;margin-top:10px;font-size:12.5px;color:var(--muted)}
.lrate b{color:var(--text)}
.lrate input{width:88px;min-height:32px;padding:0 8px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:600 13px/1 var(--font-mono)}
.lrate small{flex-basis:100%;font-size:11.5px}
.lwon{margin-top:8px;font-size:13px;color:var(--muted)}
.lwon b{color:var(--text);font-family:var(--font-mono)}

/* 스탯 효율: 이름 · [주스탯 공마] · [주스탯% 공마%] — 숫자는 오른쪽에 모으고 칸 사이 살짝, 두 묶음 사이는 조금 더 (2026-10-04
   "주스탯 공마 / 주스탯% 공마% 살짝만 띄우라고").  줄마다 따로 칸을 잡으면 머리말과 숫자 칸이 어긋나서, 카드 전체를 한 표처럼
   (줄은 display:contents) — 칸 폭 = 그 칸에서 가장 긴 글자 */
.kpi.kpi-eqv{overflow:hidden}
.kpi-eq{grid-template-columns:minmax(0,1fr) auto auto auto auto;column-gap:5px;row-gap:2px;align-items:baseline}
.kpi-eq>.eq-r:not(.eq-2){grid-column:1/-1}
.kpi-eq .eq-r.eq-2{display:contents}
.kpi-eq .eq-2>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:11.5px;color:var(--muted)}
.kpi-eq .eq-2 .eq-m,.kpi-eq .eq-2 .eq-a,.kpi-eq .eq-2 .eq-mp,.kpi-eq .eq-2 .eq-ap{min-width:0;padding:0;border:0;text-align:right;white-space:nowrap}
.kpi-eq .eq-2 .eq-mp{margin-left:5px}
.kpi-eq .eq-h small{font-size:9px;letter-spacing:-.02em}
.kpi-eq .eq-r b{font-size:11px}

/* 첫 방문 안내 (옛 메시뮬 안내 문구) — 2026-10-04 */
.notice-modal{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgb(0 0 0 / .45)}
.notice-box{width:min(520px,100%);padding:22px 22px 18px;border-radius:20px;background:rgb(var(--panel-rgb) / .96)}
.notice-box h2{font:400 24px/1.2 var(--font-display);margin:0 0 12px}
.notice-box p{font-size:14px;line-height:1.65;color:var(--text);margin:0 0 10px}
.notice-box strong{color:var(--accent-text)}
.notice-btn-row{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:14px}

/* 로컬 전용 설명 글 — 공개 사이트는 숨김 (index.html LOCAL, 사용자 2026-10-04) */
html:not(.local) .dev-only{display:none !important}

/* 파티 (보스 위젯 솔플 · 파티, 사용자 2026-10-04) */
.party-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:0 0 8px}
.party-form{display:flex;gap:6px;flex:1 1 240px;min-width:0}
.party-form input{flex:1;min-width:0;height:34px;padding:0 10px;border-radius:10px;border:1px solid var(--line);background:var(--surface);color:var(--text);font:inherit;font-size:13px}
.party-form .btn{min-height:34px;padding:0 12px}
.pp{display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.pp .btn{min-height:30px;padding:0 10px;font-size:12px}
.pp-chip{display:inline-flex;align-items:stretch;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface)}
.pp-chip button{border:0;background:transparent;color:var(--text);font:inherit;font-size:12px;padding:5px 9px;cursor:pointer}
.pp-chip button[aria-pressed="true"]{background:var(--accent);color:var(--accent-ink)}
.pp-chip .pp-x{padding:5px 8px 5px 4px;color:var(--muted)}
.pm-row{display:flex;flex-wrap:wrap;gap:4px;align-items:center;width:100%}
.pm-row:empty{display:none}
.pm{display:inline-flex;align-items:baseline;gap:5px;padding:3px 9px;border-radius:999px;background:var(--surface-2);font-size:12px}
.pm small{color:var(--muted)}
.pm.bad{background:var(--warn-soft);color:var(--warn-text)}
.pm.bad small{color:var(--warn-text)}
/* 배경: 파티원은 내 캐릭터의 절반 크기 — 자리 = 내 발(--hero-x · --feet)에서 --dxp · --dyp px (index.html partyHeroes: 빈 칸 위젯 안) */
.party-heroes{position:absolute;inset:0;pointer-events:none}
.party-hero{position:absolute;--ps:calc(var(--s) * .5);width:calc(300 * var(--ps));height:calc(300 * var(--ps));
  left:calc(var(--hero-x) + var(--dxp) * 1px - 150 * var(--ps));bottom:calc(var(--feet) + var(--dyp) * 1px - 100 * var(--ps))}
.party-hero img{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;image-rendering:crisp-edges;image-rendering:pixelated}
.party-hero .pname{position:absolute;left:50%;top:calc(200 * var(--ps) + 3px);transform:translateX(-50%);background:var(--nametag-bg);color:var(--nametag-text);font:700 11px/1 var(--font-body);padding:3px 7px 4px;border-radius:5px;white-space:nowrap}
.is-phone .party-hero{display:none}
/* 배경 캐릭터 옮기기: 파티원 몸(300x300 그림 중 캐릭터 자리)만 눌림 — 그 밖을 끌면 내 캐릭터 */
.party-hero .ph-hit{position:absolute;left:calc(116 * var(--ps));top:calc(118 * var(--ps));width:calc(68 * var(--ps));height:calc(88 * var(--ps));pointer-events:none}
.hero-edit .party-hero .ph-hit{pointer-events:auto;cursor:grab}
.hero-edit.hero-drag .party-hero .ph-hit{cursor:grabbing}
.hero-edit .party-hero img{filter:drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 1px var(--accent)) drop-shadow(0 0 8px var(--accent))}