/* ===== §20 전역 디자인 토큰 (라이트) — "맑은 낮": 새초록빛 회색 바탕 + 잉크 차콜 + 결정석 오렌지 ===== */
:root {
  --ground: #F2F5F4;
  --surface: #FFFFFF;
  --surface-2: #EEF2F1;
  --line: #E3E9E7;
  --ink: #17201F;
  --ink-2: #4F5C5A;
  --mute: #5A6663;
  --gold-text: #A14B12;   /* 강조 글자(결정석 관련 글자, 남은 보스 등) */
  --gold: #E8742A;        /* 골드 채움 — 결정석 미터·탭 밑줄 */
  --gold-track: #E7ECEA;  /* 골드 트랙 */
  --action: #17201F;      /* 주 버튼 */
  --action-ink: #FFFFFF;
  --done: #23785A;        /* 상태 전용(아이콘·글자 동반) */
  --on-done: #FFFFFF;     /* 체크 원(완료 표시) 안 글자색 */
  --warn: #B54708;
  --done-soft: #E2F1EA;
  --warn-soft: #F9ECDF;
  --todo: #CBD3D1;
  /* 기록 히트맵 — 완료율 ordinal(파랑), 0%는 surface-2 톤, 상태색 재사용 금지 */
  --heat-0: #EEF2F1; --heat-1: #8fb5e8; --heat-2: #5a92dc; --heat-3: #2f6fc4; --heat-4: #1d4f8f;
  /* 난이도 — 라이트는 점 색(태그 본문은 잉크·점만 난이도색), 배경 투명 */
  --bd-easy: #3A9A5B;    --bd-easy-bg: transparent;
  --bd-normal: #3D7FD9;  --bd-normal-bg: transparent;
  --bd-hard: #E8742A;    --bd-hard-bg: transparent;
  --bd-chaos: #8E5BD8;   --bd-chaos-bg: transparent;
  --bd-extreme: #D9483B; --bd-extreme-bg: transparent;
  --g-rare: #6CC6FF; --g-epic: #B47CFF; --g-unique: #FFCC33; --g-legendary: #A6E04A;
  /* §17 스타포스 별·옵션 분해 색 — 별은 인게임 골드, 기본/추가/강화 숫자는 서로 구분되는 색 */
  --sf-fill: #E8A400; --sf-stroke: #9A6A00; --sf-cell: #d9480f;
  --st-add: #1c6dd0; --st-enh: #d9480f;

  /* 패널(면) 토큰 — 라이트: 테두리 없는 흰 면 + 옅은 그림자, radius 16px */
  --panel-bg: var(--surface);
  --panel-flat: #FFFFFF;  /* 평면 면(단색) — sticky 표 머리·팝업·안내 띠 등 */
  --panel-edge: 0;
  --panel-shadow: 0 1px 2px rgba(23, 32, 31, .06);
  --panel-radius: 16px;
  --hero-num: var(--ink);
  --brand: var(--ink);
  --pill-ink: #FFFFFF;
  --pill-bg: #17201F;
  --pill-edge: 0;

  /* 기존 변수명 별칭 — 기존 규칙(--bg/--border/--text/--muted/--accent/--ok…)이 그대로 새 토큰을 따라가도록 매핑 */
  --bg: var(--ground);
  --border: var(--line);
  --text: var(--ink);
  --muted: var(--mute);
  --accent: var(--gold);
  --accent-soft: var(--gold-track);
  --ok: var(--done);
  --ok-soft: var(--done-soft);
}
/* 다크 — "인게임 창": 어두운 남색 바탕 + 골드 강조(면은 세로 그라데이션 패널) */
@media (prefers-color-scheme: dark) {
  :root {
    --ground: #0E121B;
    --surface: #1A2131;
    --surface-2: #232C3F;
    --line: #2A3346;
    --ink: #ECEFF5;
    --ink-2: #A9B2C4;
    --mute: #8C96AA;
    --gold-text: #FFD45A;
    --gold: #F2C14E;
    --gold-track: #2A3346;
    --action: #F2C14E;
    --action-ink: #1A1F2B;
    --done: #63D69A;
    --on-done: #0E121B;
    --warn: #F08A5D;
    --done-soft: #173226;
    --warn-soft: #38261B;
    --todo: #3A4459;
    --heat-0: #232C3F; --heat-1: #40659c; --heat-2: #557fbe; --heat-3: #7aa6e3; --heat-4: #b2d0f6;
    /* 난이도 — 다크는 테두리 태그 색, 배경 투명 */
    --bd-easy: #6BD49A;    --bd-easy-bg: transparent;
    --bd-normal: #7CB8FF;  --bd-normal-bg: transparent;
    --bd-hard: #FF9E5E;    --bd-hard-bg: transparent;
    --bd-chaos: #C89BFF;   --bd-chaos-bg: transparent;
    --bd-extreme: #FF7A7A; --bd-extreme-bg: transparent;
    --sf-fill: #ffc531; --sf-stroke: #7a5000; --sf-cell: #ffc531;
    --st-add: #74b3ff; --st-enh: #ffc531;
    /* 패널(면) 토큰 — 다크: 그라데이션 면 + 금 1px 링(테두리 대신 그림자로) */
    --panel-bg: linear-gradient(180deg, #1D2536 0%, #171E2C 100%);
    --panel-flat: #182030;
    --panel-edge: 0;
    --panel-shadow: inset 0 1px 0 rgba(255, 255, 255, .06), 0 0 0 1px rgba(242, 193, 78, .18);
    --panel-radius: 12px;
    --hero-num: #FFD45A;
    --brand: #FFD45A;
    --pill-ink: #FFD45A;
    --pill-bg: rgba(242, 193, 78, .12);
    --pill-edge: 1px solid rgba(242, 193, 78, .45);
  }
}
/* 강제 색상 모드 — 면 토큰이 0(테두리 없음)이므로 CanvasText 1px 테두리로 대체 */
@media (forced-colors: active) {
  :root { --panel-edge: 1px solid CanvasText; }
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text);
  font-family: "Pretendard Variable", Pretendard, system-ui, -apple-system, sans-serif; font-size: 14px; }
[x-cloak] { display: none !important; }
/* §18.3 장비 상세 이름 전용 서체 — 넥슨 메이플스토리 Bold(jsdelivr noonfonts woff, font-display: swap).
   §19: 적용 범위를 페이지 제목·섹션 제목·캐릭터 이름으로 확대한다. 로드에 실패하면 Pretendard로 자연 폴백. */
@font-face {
  font-family: 'MaplestoryBold';
  src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-04@2.1/MaplestoryOTFBold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
/* §19 메이플 서체 범위 — 페이지 제목·섹션 제목·캐릭터 이름(기록 히트맵 이름 열 .heat td.left, 캐릭터 표 이름 열 .cname, 검색 결과 이름 .lk-name 포함. 툴팁 장비명은 .tt-name 개별 적용) */
h1, .login-title, .hero-label, .bsec-title > span, .bk-details summary .bdt, .settings-block h2,
.char .name, .acct-name, .kc-name, .gear-name, .ewin-title, .rs-name,
.heat td.left, .cname, .lk-name {
  font-family: 'MaplestoryBold', "Pretendard Variable", Pretendard, system-ui, sans-serif;
}
/* §19 키보드 포커스 링 — 라이트: 잉크 2px · 다크: 골드 */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; }
@media (prefers-color-scheme: dark) {
  :focus-visible { outline-color: var(--gold); }
}
/* §19 reduced-motion 존중 — 사용자 동작 응답 외 움직임 제거 */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
}
button { font: inherit; cursor: pointer; }
.wrap { max-width: 1280px; margin: 0 auto; padding: 20px 16px 40px; }
/* §19 헤더 1줄 — 제목(메이플 서체, 브랜드색) | 갱신 시간, API 사용량 | [지금 갱신] | [계정 ▾] */
header { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; }
h1 { font-size: 20px; margin: 0 auto 0 0; display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--brand); }
.hstatus { display: contents; }
.meta { display: flex; align-items: baseline; gap: 4px 14px; flex-wrap: wrap; color: var(--ink-2); font-size: 13px; min-width: 0; }
.mlabel { color: var(--mute); font-size: 12px; }
.mval { overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.acct { position: relative; flex: none; }
.acct .caret { font-size: 9px; }
.acct-pop { position: absolute; right: 0; top: calc(100% + 6px); z-index: 60; min-width: 150px; display: grid; gap: 8px;
  padding: 10px 12px; background: var(--panel-flat); border: 1px solid var(--line); border-radius: 8px;
  box-shadow: 0 8px 24px rgba(10, 14, 22, .18); }
.acct-id { color: var(--mute); font-size: 12px; overflow-wrap: anywhere; }
.status { color: var(--muted); font-size: 12px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  min-width: 0; overflow-wrap: anywhere; }
.btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); padding: 7px 14px; border-radius: 8px; font-weight: 600; transition: background .15s, border-color .15s; }
.btn.primary { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.btn.small { padding: 4px 10px; font-size: 12px; }
.btn:disabled { opacity: .5; cursor: default; }
.error { margin-top: 12px; padding: 10px 14px; border-radius: 8px; background: var(--warn-soft); color: var(--warn); white-space: pre-line; font-size: 13px;
  overflow-wrap: anywhere; word-break: break-word; }
.info { margin: 0 0 12px; padding: 10px 14px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px;
  overflow-wrap: anywhere; word-break: break-word; }
/* ===== §19 hero 밴드 — 좌: 이번 주 결정석 수입(hero 숫자, 48px Pretendard 600 비례 숫자) + 90 상한 미터 + 보조 수치 3개
   우: 초기화까지 목록(일일/주간/월간). KPI 카드 5칸을 대체. ===== */
.hero { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; margin: 16px 0 0; }
.hero-main, .hero-side { background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: 18px 20px; min-width: 0; }
.hero-label { display: block; font-size: 16px; font-weight: 700; color: var(--ink); }
.hero-numrow { display: flex; align-items: baseline; gap: 6px 16px; flex-wrap: wrap; margin-top: 8px; }
.hero-num { font-size: 48px; font-weight: 600; line-height: 1.08; letter-spacing: -.01em; color: var(--hero-num); }
.hero-month { color: var(--ink-2); font-size: 14px; }
.hero-meter { display: flex; align-items: center; gap: 14px; margin-top: 12px; }
.meter { flex: 1; height: 10px; border-radius: 99px; background: var(--gold-track); overflow: hidden; min-width: 0; }
.meter i { display: block; height: 100%; background: var(--gold); border-radius: 99px; transition: width .15s; }
.meter-num { flex: none; display: inline-flex; align-items: baseline; gap: 5px; white-space: nowrap; color: var(--ink-2); font-size: 14px; font-variant-numeric: tabular-nums; }
.meter-num b { font-size: 20px; font-weight: 700; color: var(--ink); }
.meter-num .mw { color: var(--mute); font-size: 13px; margin-left: 3px; }
.meter-extra { display: inline-block; margin: 6px 14px 0 0; font-size: 12px; color: var(--mute); overflow-wrap: anywhere; }
.hero-subs { display: flex; flex-wrap: wrap; gap: 10px 32px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--line); }
.hsub { min-width: 0; }
.hsub .k { display: block; color: var(--mute); font-size: 12px; }
.hsub .v { display: block; margin-top: 2px; font-size: 16px; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; word-break: keep-all; }
.hsub .v .den { color: var(--mute); font-size: 13px; font-weight: 500; }
.hero-side { padding: 16px 18px; }
.rlist { display: grid; margin-top: 6px; }
.rrow { display: flex; align-items: baseline; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); min-width: 0; }
.rrow:last-child { border-bottom: none; }
.rk { flex: none; color: var(--mute); font-size: 13px; }
.rt { color: var(--ink); font-weight: 600; font-size: 14px; }
.rmark { flex: none; color: var(--mute); font-size: 12px; }
/* §19 탭 — 골드 2px 밑줄 */
nav { display: flex; gap: 4px; margin: 24px 0 16px; border-bottom: 1px solid var(--border); overflow-x: auto; overflow-y: hidden; scrollbar-width: none; min-width: 0; } /* §59 버튼 margin-bottom -1px 때문에 생기던 세로 스크롤바(위·아래 화살표) 제거, 가로 스크롤은 유지·막대만 숨김 */
nav button { background: none; border: none; padding: 10px 14px; color: var(--ink-2); font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
nav button.on { color: var(--text); border-bottom-color: var(--gold); }
.toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; color: var(--muted); font-size: 13px;
  overflow-wrap: anywhere; }
.toolbar > * { min-width: 0; }
.toolbar label { display: flex; gap: 6px; align-items: center; cursor: pointer; }
/* 툴바 안 두 값을 중간점 없이 간격으로 나열하는 래퍼 */
.toolbar-split { display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; min-width: 0; }
/* 툴바 오른쪽 묶음 — 텍스트 요약과 버튼들을 한 덩어리로 둔다 */
.toolbar-right { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0; }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr)); gap: 12px; align-items: start; }
.card { background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: 14px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.card.idle { opacity: .72; }
.char { display: flex; gap: 12px; align-items: center; }
.avatar { width: 56px; height: 56px; border-radius: 10px; background: var(--surface-2); flex: none; display: grid; place-items: center; overflow: hidden; font-weight: 700; color: var(--muted); }
.avatar img { width: 96px; height: 96px; object-fit: none; object-position: center 60%; }
.char .name { font-weight: 700; font-size: 15px; }
.char .sub { color: var(--muted); font-size: 12px; margin-top: 2px; }
.acct-name { font-weight: 700; font-size: 15px; }
.pill { font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.pill.ok { background: var(--ok-soft); color: var(--ok); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.row { display: flex; align-items: center; gap: 8px; }
.row .k { width: 64px; color: var(--muted); font-size: 12px; flex: none; }
.row .n { width: 48px; text-align: right; font-size: 12px; flex: none; font-variant-numeric: tabular-nums; }
.bar { flex: 1; height: 8px; border-radius: 99px; background: var(--surface-2); overflow: hidden; }
.bar i { display: block; height: 100%; background: var(--accent); border-radius: 99px; transition: width .15s; }
.bar i.full { background: var(--ok); }
details { border-top: 1px dashed var(--border); padding-top: 8px; }
summary { cursor: pointer; color: var(--muted); font-size: 12px; }
.items { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 3px; font-size: 12px; }
.items li { display: flex; gap: 6px; align-items: center; }
.items li .cnt { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.items li.done { color: var(--muted); }
.items li.h { margin: 6px 0 2px; font-size: 11px; color: var(--muted); font-weight: 600; }
.items li.locked { opacity: .45; }
.chk { width: 14px; height: 14px; border-radius: 4px; border: 1.5px solid var(--todo); flex: none; display: grid; place-items: center; font-size: 10px; color: #fff; }
.chk.on { background: var(--ok); border-color: var(--ok); color: var(--on-done); }
.chk.prog { border-color: var(--accent); }
.lock-badge { font-size: 10px; font-weight: 700; color: var(--muted); border: 1px solid var(--border); border-radius: 4px; padding: 0 4px; flex: none; line-height: 1.5; }
.note { color: var(--muted); font-size: 11px; overflow-wrap: anywhere; }
.income { font-size: 11px; color: var(--muted); display: grid; gap: 2px; }
.income .warn-text { color: var(--warn); }
.table-wrap { overflow-x: auto; background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); }
table { border-collapse: collapse; width: 100%; font-size: 13px; font-variant-numeric: tabular-nums; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: center; white-space: nowrap; }
th { font-size: 12px; color: var(--muted); font-weight: 600; background: var(--panel-flat); position: sticky; top: 0; }
td.left, th.left { text-align: left; position: sticky; left: 0; background: var(--panel-flat); z-index: 1; }
th.num, td.num { text-align: right; font-variant-numeric: tabular-nums; }
/* 추적 꺼진 행 — 투명도 대신 글자색을 ink-2로 */
tr.off-row > td { color: var(--ink-2); }
tr:last-child td { border-bottom: none; }
tfoot td { font-weight: 700; border-top: 1px solid var(--border); }
.diff { font-size: 11px; color: var(--muted); margin-left: 4px; }
.cell-done { color: var(--ok); font-weight: 700; }
.cell-todo { color: var(--todo); }
.cell-unreg { color: var(--border); }
.heat td { padding: 3px; border: none; }
.heat td.left { padding: 3px 10px 3px 0; font-size: 13px; }
/* 목요일(주간 초기화) 열 — 머리·본문 셀 왼쪽 1px 구분선 */
.heat td.thu, .heat th.thu { border-left: 1px solid var(--line); }
.heat .sq { width: 22px; height: 22px; border-radius: 4px; background: var(--heat-0); margin: auto; position: relative; }
.heat .sq.dot::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); }
.heat th { font-size: 10px; padding: 2px; font-weight: 500; }
.heat th .dday { display: block; font-size: 11px; font-weight: 600; color: var(--ink-2); }
.heat th .ddow { display: block; margin-top: 1px; font-size: 10px; font-weight: 400; color: var(--mute); }
/* 기록 탭 툴바 왼쪽 — 기간 분절 버튼 + 히트맵 범례 */
.hist-left { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; min-width: 0; }
.seg { display: inline-flex; flex: none; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); }
.seg button { border: none; background: none; color: var(--ink-2); padding: 5px 12px; font-size: 12px; font-weight: 600; }
.seg button:first-child { border-radius: 7px 0 0 7px; }
.seg button:last-child { border-radius: 0 7px 7px 0; border-left: 1px solid var(--line); }
.seg button.on { background: var(--surface-2); color: var(--ink); }
/* 히트맵 범례 — 견본 반경은 실제 셀과 같은 4px, 금색 점 견본은 셀의 점과 같은 골드 */
.heat-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; font-size: 11px; color: var(--mute); min-width: 0; }
.heat-legend .hl-t { flex: none; }
.heat-legend .hl-i { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.heat-legend .hl-i i { flex: none; width: 12px; height: 12px; border-radius: 4px; }
.heat-legend .hl-i i.hl-cell { position: relative; background: var(--heat-0); }
.heat-legend .hl-i i.hl-cell::after { content: ""; position: absolute; right: 2px; bottom: 2px; width: 4px; height: 4px; border-radius: 50%; background: var(--gold); }
.switch { position: relative; width: 36px; height: 20px; background: var(--todo); border-radius: 99px; border: none; transition: background .15s; }
.switch::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.switch.on { background: var(--ok); }
.switch.on::after { transform: translateX(16px); }
.switch:disabled { opacity: .6; cursor: default; }
.ord { display: inline-flex; gap: 4px; align-items: center; }
.obtn { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 2px 7px; font-size: 11px; line-height: 1.4; font-weight: 600; }
.obtn:disabled { opacity: .35; cursor: default; }
.settings-block { background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: 14px; margin-bottom: 12px; display: grid; gap: 8px; min-width: 0; }
.settings-block h2 { font-size: 16px; margin: 0; }
.settings-block .desc { margin: 0; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.guild-list { display: grid; gap: 6px; }
.guild-row { display: flex; gap: 8px; align-items: center; font-size: 13px; cursor: pointer; min-width: 0; overflow-wrap: anywhere; }
.guild-row input[type="checkbox"] { width: 15px; height: 15px; flex: none; }
.price-input { width: 14ch; max-width: 100%; padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 12px; }
.price-view { color: var(--muted); }
.epic-detail { border-top: none; padding-top: 2px; }
/* 에픽 던전 던전별 행 — 체크, 이름, 완료 날짜, 클리어 캐릭터 선택을 그리드 한 줄로 배치 */
.items .epic-row { display: grid; grid-template-columns: 16px 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; }
.items .epic-row .epic-name { min-width: 0; overflow-wrap: anywhere; }
.epic-date { color: var(--mute); font-variant-numeric: tabular-nums; }
.epic-date.is-done { color: var(--ink-2); }
.epic-warn { grid-column: 2 / -1; color: var(--warn); font-size: 12px; }
.epic-who { height: 28px; max-width: 140px; padding: 2px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); font: inherit; font-size: 12.5px; }
.epic-guide { margin: 6px 0 0; color: var(--mute); font-size: 11.5px; overflow-wrap: anywhere; }
/* 에픽 던전 행 모바일 — 이름과 날짜를 한 줄에 두고 캐릭터 선택은 다음 줄 전체 */
@media (max-width: 760px) {
  .items .epic-row { grid-template-columns: 16px 1fr auto; }
  .epic-who { grid-column: 2 / -1; max-width: none; }
}
.empty { text-align: center; color: var(--muted); padding: 48px 16px; background: var(--surface); border: 1px dashed var(--border); border-radius: 12px; }
/* ===== 검색 탭 — 닉네임으로 다른 캐릭터의 공개 정보(장비·유니온) 조회.
   내 계정 화면과 구분되는 신호는 결과 위 .ext-note 안내 띠 하나뿐(§19 토큰 그대로, 그림자 없음). ===== */
.ext-note { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; margin: 0 0 12px; padding: 10px 14px;
  background: var(--panel-flat); border-left: 3px solid var(--ink-2); border-radius: 8px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.ext-note b { flex: none; color: var(--ink); font-weight: 700; }
.ext-note span { color: var(--ink-2); }
.lk-form { display: flex; gap: 8px; max-width: 480px; }
.lk-form .login-input { flex: 1; min-width: 0; }
.lk-form .btn { flex: none; }
.lk-recent { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 0; min-width: 0; }
.lk-recent .lbl { flex: none; color: var(--mute); font-size: 12px; }
.lk-chip { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; }
.lk-empty { margin: 16px 0 0; max-width: 480px; color: var(--mute); font-size: 13px; line-height: 1.65; overflow-wrap: anywhere; }
.lk-profile { display: flex; align-items: center; gap: 14px; margin: 4px 0 14px; min-width: 0; }
.lk-av { position: relative; flex: none; width: 72px; height: 72px; border-radius: 12px; background: var(--surface-2); overflow: hidden; }
.lk-av img { position: absolute; left: -28px; top: -30px; width: 128px; height: 128px; }
.lk-av-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-weight: 700; }
.lk-idtxt { display: grid; gap: 4px; min-width: 0; }
.lk-name { color: var(--ink); font-size: 28px; line-height: 1.2; overflow-wrap: anywhere; }
.lk-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; color: var(--ink-2); font-size: 14px; min-width: 0; }
.lk-sub .off { color: var(--mute); }
.lk-union { display: grid; gap: 4px; max-width: 480px; margin: 0 0 12px; padding: 16px; background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); min-width: 0; }
.lk-union .lbl { color: var(--ink-2); font-size: 13px; }
.lk-union-num { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.lk-union-num b { color: var(--ink); font-size: 36px; font-weight: 600; line-height: 1.1; font-variant-numeric: tabular-nums; }
.lk-union-num span { color: var(--ink-2); font-size: 14px; }
.lk-artifact { color: var(--mute); font-size: 13px; font-variant-numeric: tabular-nums; }
.lk-effects { display: grid; gap: 6px; max-width: 480px; margin: 0 0 12px; }
.lk-effects ul { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; font-size: 13px; color: var(--ink-2); overflow-wrap: anywhere; }
.lk-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; color: var(--mute); font-size: 12px; min-width: 0; }
/* ===== 오늘 탭 (§19-D2 재구성) — 카드 격자 → 계정 공통 스트립 + 캐릭터 명부 표.
   §19 토큰만 사용, 그림자 없이 1px var(--line) 구분선, 숫자 값에만 tabular-nums, '·' 나열 대신 간격·라벨로 구분. ===== */
.acct-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; padding: 10px 14px; margin-bottom: 12px;
  background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); min-width: 0; }
/* §38: 안내 문구·기준 시각을 맨 아랫줄로 — .acct-br(전 폭 강제 줄바꿈) 뒤에 note(98)·acct-meta(99)가 온다 */
.acct-br { flex-basis: 100%; height: 0; order: 97; }
.acct-strip .note { font-size: 11.5px; order: 98; color: var(--mute); }
.rs-aunit { display: contents; }
.rs-aitem { display: flex; align-items: center; gap: 6px; min-width: 0; white-space: nowrap; }
.rs-aitem .cnt { color: var(--mute); font-variant-numeric: tabular-nums; }
/* §38: 에픽 던전 묶음을 한 줄 나열로 — 던전별(details)을 펼치면 아래 줄 전체를 차지한다 */
.rs-aepic { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; min-width: 0; }
.rs-aepic .epic-detail { padding-top: 0; }
.rs-aepic .epic-detail[open] { flex-basis: 100%; }
.rs-aepic-line { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.acct-meta { margin-left: auto; order: 99; display: inline-flex; align-items: baseline; gap: 8px; color: var(--mute); font-size: 12px; }
.roster { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel-bg); border: var(--panel-edge);
  box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); overflow: hidden; font-variant-numeric: normal; }
/* 전역 th(sticky·가운데 정렬)를 .roster 범위에서 왼쪽 정렬·static 으로 덮는다(이 표 셀은 sticky 쓰지 않음) */
.roster th { font-size: 12px; font-weight: 600; color: var(--ink-2); text-align: left; padding: 10px 14px;
  border-bottom: 1px solid var(--line); background: var(--surface); position: static; }
.roster th.num { text-align: right; }
.roster td { padding: 10px 14px; border-bottom: none; vertical-align: middle; text-align: left; }
/* 행 구분은 다음 캐릭터(다음 tbody)의 요약 행 위쪽 1px 선 — 마지막 행까지 선이 겹치지 않는다 */
.roster tr.rs-row > td { border-top: 1px solid var(--line); }
.roster tbody:first-of-type tr.rs-row > td { border-top: none; }
@media (min-width: 1001px) {
  .roster th:nth-child(2), .roster th:nth-child(3), .roster th:nth-child(4) { width: 200px; }
  .roster th:nth-child(5) { width: 130px; }
  .roster th:nth-child(6) { width: 32px; }
}
.rs-row { cursor: pointer; }
.rs-row:hover { background: var(--surface-2); }
.rs-row.rs-static { cursor: default; }
.rs-row.rs-static:hover { background: transparent; }
.rs-id { display: flex; align-items: center; gap: 10px; min-width: 0; }
.rs-av { flex: none; width: 56px; height: 56px; border-radius: 10px; background: var(--surface-2); overflow: hidden; position: relative; } /* §53-5 캐릭터가 작아 잘 안 보임 → 상자 56px·이미지 약 2배(넥슨 300×300 이미지에서 캐릭터는 가운데 아래 약 80px 영역) */
.rs-av img { width: 168px; height: 168px; position: absolute; left: -60px; top: -62px; }
.rs-av-ph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--mute); font-weight: 700; }
.rs-idtxt { display: grid; gap: 2px; min-width: 0; }
.rs-name { font-size: 15px; font-weight: 700; color: var(--ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-sub { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; color: var(--ink-2); font-size: 12px; min-width: 0; }
.rs-off { color: var(--mute); }
.rs-cell { min-width: 0; }
.rs-mlabel { display: none; color: var(--mute); font-size: 11px; margin-bottom: 3px; }
.rs-meter { display: flex; align-items: center; gap: 8px; min-width: 0; }
.rs-bar { flex: 1; display: block; height: 6px; min-width: 20px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.rs-bar i { display: block; height: 100%; background: var(--ink-2); border-radius: 3px; }
.rs-bar i.full { background: var(--done); }
.rs-frac { flex: none; display: inline-flex; align-items: baseline; justify-content: flex-end; gap: 2px; min-width: 3.2em;
  color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.rs-check { color: var(--done); font-weight: 700; }
.rs-none { color: var(--mute); }
.roster td.rs-num { text-align: right; }
.rs-meso { display: block; font-size: 14px; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
.rs-cnt { display: block; margin-top: 2px; color: var(--mute); font-size: 11.5px; font-variant-numeric: tabular-nums; }
.rs-expand { text-align: center; }
.rs-caret { color: var(--mute); font-size: 12px; }
.rs-nostate { color: var(--mute); }
.rs-detail td { background: var(--surface-2); border-top: 1px solid var(--line); padding: 12px 16px 14px 68px; white-space: normal; }
.rs-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 28px; min-width: 0; }
.rs-col { min-width: 0; }
.rs-coltitle { margin: 0; font-size: 12px; font-weight: 600; color: var(--ink-2); }
.rs-detail-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-top: 12px;
  color: var(--mute); font-size: 11.5px; }
.rs-missing { color: var(--warn); font-size: 12px; }
/* 오늘 탭 모바일(≤1000px) — 머리행 숨기고 캐릭터마다 블록: 첫 줄 캐릭터+수입, 둘째 줄 일일/주간/보스(작은 라벨).
   행 구분은 tbody 사이 1px 선, 가로 스크롤이 생기지 않게 min-width: 0.
   td가 template 형제 사이로 배치되어 nth-child 번호가 어긋나므로, 셀 배치는 td 고유 클래스 기준으로 둔다. */
@media (max-width: 1000px) {
  .roster { display: block; }
  .roster thead { display: none; }
  .roster tbody { display: block; border-bottom: 1px solid var(--line); }
  .roster tbody:last-child { border-bottom: none; }
  .roster tr.rs-row { display: grid; grid-template-columns: 1fr 1fr 1fr; align-items: center; }
  .roster tr.rs-row > td { padding: 6px 12px; border-top: none; border-bottom: none; min-width: 0; }
  .rs-row > td.rs-char { grid-column: 1 / span 2; grid-row: 1; }
  td.rs-num { grid-column: 3; grid-row: 1; }
  td.rs-c-daily { grid-column: 1; grid-row: 2; }
  td.rs-c-weekly { grid-column: 2; grid-row: 2; }
  td.rs-c-boss { grid-column: 3; grid-row: 2; }
  td.rs-expand { display: none; }
  td.rs-nostate { grid-column: 1 / -1; grid-row: 2; }
  .rs-mlabel { display: block; }
  .roster tr.rs-detail { display: block; }
  .roster tr.rs-detail > td { display: block; padding: 8px 12px 12px; border-top: none; border-bottom: none; min-width: 0; }
  .rs-detail-grid { grid-template-columns: 1fr; }
}
/* §46 폴드 펼친 화면(761~1000px) — 명부 카드 배치가 넓어지므로 펼친 상세는 2열을 유지한다 */
@media (min-width: 761px) and (max-width: 1000px) {
  .rs-detail-grid { grid-template-columns: 1fr 1fr; }
}
/* ===== 보스 탭 (§9 재설계) — 실제 처치 기준 · 카드/칩 중심 (§11: 칩 탭 → 파티 인원 지정) =====
   난이도 색 변수(--bd-*)는 :root에서 정의(장비 탭 등 다른 영역에서도 사용) */
.boss-section { }
.bsec-title { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 2px 0 10px; min-width: 0; }
.bsec-title > span { font-size: 15px; font-weight: 700; }
.bsec-title small { color: var(--muted); font-size: 12px; font-weight: 500; }
/* 섹션 머리 오른쪽 전체 펼치기/접기 탭 — 한 줄에 여유가 있으면 맨 오른쪽, 좁으면 탭만 다음 줄로 내려간다 */
.bsec-title .seg { margin-left: auto; }
.bd-legend { display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; min-width: 0; }
.bd-legend .li { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; color: var(--muted); white-space: nowrap; }
.bd-dot { width: 10px; height: 10px; border-radius: 3px; flex: none; }
.bd-dot.easy { background: var(--bd-easy); }
.bd-dot.normal { background: var(--bd-normal); }
.bd-dot.hard { background: var(--bd-hard); }
.bd-dot.chaos { background: var(--bd-chaos); }
.bd-dot.extreme { background: var(--bd-extreme); }
.kgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(310px, 100%), 1fr)); gap: 12px; align-items: start; }
.kcard { background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: 14px 16px; display: grid; gap: 10px; align-content: start; min-width: 0; }
/* 카드 전체 클릭으로 펼치기/접기 — 펼칠 내용이 있는 카드에만 포인터 커서 */
.kcard-tap { cursor: pointer; }
.kcard-tap:hover { box-shadow: var(--panel-shadow), 0 0 0 1px var(--line); }
.kc-top { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* 카드 머리 이름 영역 — 펼치기/접기는 카드 전체 클릭으로 일원화(§43), 커서는 카드(.kcard-tap)를 따른다 */
.kc-id { flex: 1; min-width: 0; display: flex; align-items: baseline; gap: 6px; cursor: pointer; }
/* 펼칠 내용이 없는 카드 — 클릭 대상이 아니므로 커서 기본 */
.kc-id.is-static { cursor: default; }
.kc-name { font-weight: 700; font-size: 15px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kc-lv { flex: none; color: var(--muted); font-size: 12px; }
.kc-count { flex: none; text-align: right; line-height: 1.1; font-variant-numeric: tabular-nums; }
.kc-count b { font-size: 20px; font-weight: 800; }
.kc-count span { color: var(--muted); font-size: 13px; }
.kc-body { display: grid; gap: 10px; min-width: 0; }
.bar.slim { height: 6px; }
.kc-income { display: flex; flex-wrap: wrap; gap: 2px 6px; align-items: baseline; font-size: 12px; color: var(--muted); min-width: 0; overflow-wrap: anywhere; }
.kc-income b { color: var(--text); font-weight: 700; }
.kc-sec { display: grid; gap: 6px; min-width: 0; }
.kc-label { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; font-size: 11px; font-weight: 700; color: var(--muted); min-width: 0; }
.kc-label b { color: var(--text); }
.kc-label small { font-weight: 500; }
.kc-label.rec span { color: var(--gold-text); }
.kc-cycles { display: grid; gap: 10px; min-width: 0; }
.kc-bundle { display: grid; gap: 5px; justify-items: start; min-width: 0; padding: 7px 8px; border-radius: 8px; }
.kc-bundle.wk { background: var(--surface-2); }
.kc-bundle.mo { border: 1px dashed var(--border); }
.kc-btag { display: inline-flex; align-items: center; width: fit-content; font-size: 10px; font-weight: 800; line-height: 1.5; padding: 0 6px; border-radius: 5px; border: 1px solid var(--border); background: var(--surface); color: var(--muted); }
.kc-btag.mo { color: var(--gold-text); border-color: currentColor; background: transparent; }
.kchips { display: flex; flex-wrap: wrap; gap: 5px; min-width: 0; }
.kchip { display: inline-flex; align-items: center; gap: 5px; max-width: 100%; min-width: 0; padding: 4px 9px; border-radius: 8px; font-size: 12px; font-weight: 700; border: 1px solid transparent; }
.kchip .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kchip .dd { flex: none; font-size: 10px; font-weight: 600; opacity: .78; }
.kchip .p { flex: none; font-size: 11px; font-weight: 600; opacity: .8; }
.kchip .mo { flex: none; font-size: 9px; font-weight: 800; line-height: 1.5; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; opacity: .85; }
.kchip .ppl { flex: none; font-size: 9px; font-weight: 800; line-height: 1.5; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; opacity: .95; }
button.kchip { cursor: pointer; }
button.kchip:active { transform: translateY(1px); }
/* 추천 보스 칩 — 라이트: 난이도색 7px 점 + 잉크-2 글자(난이도색 글자 대비 확보) / 다크: 점 없이 난이도색 글자 */
.kchip.d-easy { --bd-c: var(--bd-easy); }
.kchip.d-normal { --bd-c: var(--bd-normal); }
.kchip.d-hard { --bd-c: var(--bd-hard); }
.kchip.d-chaos { --bd-c: var(--bd-chaos); }
.kchip.d-extreme { --bd-c: var(--bd-extreme); }
.kchip.d-easy, .kchip.d-normal, .kchip.d-hard, .kchip.d-chaos, .kchip.d-extreme { background: transparent; color: var(--ink-2); }
.kchip.d-easy::before, .kchip.d-normal::before, .kchip.d-hard::before, .kchip.d-chaos::before, .kchip.d-extreme::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-c, var(--ink-2)); }
.kchip.daily { background: var(--surface-2); color: var(--muted); }
.kchip.rec { background: transparent; border-style: dashed; border-color: var(--line); }
@media (prefers-color-scheme: dark) {
  .kchip.d-easy, .kchip.d-normal, .kchip.d-hard, .kchip.d-chaos, .kchip.d-extreme { color: var(--bd-c, var(--ink-2)); }
  .kchip.d-easy::before, .kchip.d-normal::before, .kchip.d-hard::before, .kchip.d-chaos::before, .kchip.d-extreme::before { display: none; }
  .kchip.rec { border-color: currentColor; }
}
/* 남은 보스 칩 구간 표식 — 보스 티어 정렬일 때 rank 구간(24~32 금 · 15~23 은 · 8~14 동 · 1~7 납)이 바뀌는 칩 앞의 ★.
   x-for 행 래퍼(.krecrow)는 박스를 만들지 않아 칩·표식이 .kchips flex에 곧바로 놓인다(--tier-* 토큰이 없으면 괄호 안 기본값) */
.krecrow { display: contents; }
.kband { align-self: center; font-size: 12px; line-height: 1; margin: 0 2px 0 4px; }
.kband-g { color: var(--tier-gold, #D99A00); }
.kband-s { color: var(--tier-silver, #8E9AAF); }
.kband-b { color: var(--tier-bronze, #B0703A); }
.kband-l { color: var(--tier-lead, #4A505C); }
/* 카드 처치 보스 목록 — 주간·월간 칩 묶음 대신 솔로/파티 두 묶음의 행 목록.
   난이도 색은 bdifftag에만, 행 배경은 투명(hover·focus-visible에서 surface-2), 행 사이 구분선 없이 간격 2px. */
.kl-group { display: grid; gap: 4px; min-width: 0; }
.kl-head { display: flex; align-items: baseline; gap: 5px; font-size: 12px; font-weight: 600; color: var(--ink-2); min-width: 0; }
.kl-head b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.kl-rows { display: grid; gap: 2px; min-width: 0; }
.kl-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 8px; width: 100%; min-width: 0; padding: 6px 8px; border: none; border-radius: 8px; background: transparent; color: var(--ink); text-align: left; }
.kl-row:hover, .kl-row:focus-visible { background: var(--surface-2); }
.kl-name { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 13px; font-weight: 600; color: var(--ink); }
.kl-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 월간 표시 — 기존 .kchip .mo 와 같은 모양의 별도 클래스(행에는 난이도 색이 없으므로 잉크색) */
.kl-mo { flex: none; font-size: 9px; font-weight: 800; line-height: 1.5; padding: 0 4px; border: 1px solid currentColor; border-radius: 4px; opacity: .85; }
/* 파티 인원 알약 — 상태 알약(.who.is-party)과 같은 pill 토큰(라이트: 잉크 채움+흰 글자 / 다크: 금 테두리+금 글자) */
.kl-party { display: inline-flex; align-items: center; flex: none; height: 18px; padding: 0 7px; border: var(--pill-edge); border-radius: 999px; background: var(--pill-bg); color: var(--pill-ink); font-size: 11px; font-weight: 700; white-space: nowrap; }
.kl-price { display: grid; gap: 1px; justify-items: end; min-width: 0; text-align: right; font-variant-numeric: tabular-nums; }
.kl-price .kl-p { font-size: 13px; font-weight: 700; color: var(--ink); }
.kl-price .kl-div { font-size: 11px; color: var(--mute); }
.kl-guide { margin: 0; color: var(--mute); font-size: 11.5px; overflow-wrap: anywhere; }
/* 모바일(≤760px) — 행 grid는 그대로 3열(태그 | 이름 | 금액), 이름 칸 min-width 0 말줄임, 가로 스크롤 없음 */
@media (max-width: 760px) {
  .kl-row { gap: 6px; }
}
.kc-pflag { flex: none; font-size: 9px; font-weight: 800; line-height: 1.6; padding: 0 5px; border-radius: 4px; border: 1px solid currentColor; color: var(--gold-text); background: transparent; }
/* 상단 카운트 옆 완료 표시 — done 상태색 + ✓ 아이콘 글자 동반(테두리는 line 유지) */
.kc-done { flex: none; color: var(--done); font-size: 12px; font-weight: 700; }
.kc-empty { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
/* ===== 보스 탭 카드 접기 — 접힌 카드는 진행 막대·수입 아래 요약 줄을 보이고, 카드를 눌러 펼친다 ===== */
.kc-summary { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: baseline; font-size: 13px; color: var(--ink-2); min-width: 0; overflow-wrap: anywhere; }
.kc-summary b { color: var(--ink); font-weight: 700; font-variant-numeric: tabular-nums; }
.kc-summary .gold-text { color: var(--gold-text); }
.kc-summary .mute-text { color: var(--mute); }
/* 접힌 카드 요약의 일간 처치 — 작은 보스 이름 칩(카드를 열지 않아도 보인다) */
.ksum-daily { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.kmini { padding: 1px 6px; border-radius: 6px; background: var(--surface-2); font-size: 11.5px; color: var(--ink-2); }
/* 카드 머리 맨 오른쪽 접기 토글 — 텍스트 없는 작은 아이콘 버튼(▾/▴), 키보드 접근용(카드 클릭으로도 토글). 펼침·접힘 어느 상태든 같은 자리 */
.kc-fold { flex: none; width: 24px; height: 24px; padding: 0; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink-2); font-size: 12px; line-height: 1; }
.kc-fold:hover, .kc-fold:focus-visible { background: var(--surface-2); }
.kc-fold:disabled { opacity: .5; cursor: default; }
/* ===== §45-S2 보스 탭 "지난 기록" — 섹션 머리 주 선택 셀렉트 · 지난 주 스냅샷 카드(칩 안 파티 인원 알약) ===== */
.bweek-pick select { font: inherit; font-size: 12.5px; padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); }
.bw-party { margin-left: 4px; padding: 0 5px; border-radius: 6px; background: var(--surface-2); font-size: 11px; font-weight: 700; color: var(--ink-2); }
.bweek-card { cursor: default; }
/* ===== 보스 탭 파티 일괄 편집 — 편집 중 처치 목록 행 왼쪽 체크, 카드 아래 고정 저장 줄(.pbulk, 그림자 없음) ===== */
.kc-edit-btn { margin-left: auto; }
.kl-row.kl-editing { grid-template-columns: auto auto minmax(0, 1fr) auto; }
.kl-check { flex: none; width: 14px; height: 14px; border: 1.5px solid var(--todo); border-radius: 4px; display: grid; place-items: center; font-size: 10px; line-height: 1; color: #fff; }
/* 선택 상태는 완료(done)색이 아니라 주 버튼(action)색 — "완료"와 오해하지 않게 한다(글자는 action-ink) */
.kl-check.on { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.pbulk { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin: 0 -16px -14px; padding: 8px 16px; background: var(--panel-flat); border-top: 1px solid var(--line); min-width: 0; }
.pbulk-n { flex: none; color: var(--ink-2); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.psize-mini { flex: none; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; padding: 4px 9px; font-size: 12px; font-weight: 700; }
.psize-mini:disabled { opacity: .5; cursor: default; }
.pbulk-done { margin-left: auto; }
/* ===== 보스 탭 하단 "보스별 처치" 접기 — details(기본 닫힘), summary 한 줄: 제목·종 수·짧은 설명·케럿.
   전역 details(점선 border-top·padding-top)·summary(회색 12px) 상속을 덮어 제목은 잉크색·본문 크기로 ===== */
.bk-details { border-top: none; padding-top: 0; margin-top: 22px; min-width: 0; }
.bk-details > summary { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; cursor: pointer; list-style: none; min-width: 0; color: var(--ink); font-size: inherit; }
.bk-details summary::-webkit-details-marker { display: none; }
.bk-details summary .bdt { font-size: 15px; font-weight: 700; }
.bk-details summary b { color: var(--ink-2); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.bk-details summary small { color: var(--ink-2); font-size: 12px; font-weight: 500; }
.bk-details summary .bk-caret { margin-left: auto; flex: none; color: var(--mute); font-size: 12px; }
.bk-details[open] summary .bk-caret { transform: rotate(180deg); }
.bk-details .bk-list { margin-top: 12px; }
.bk-list { display: grid; gap: 16px; }
.bk-glabel { display: flex; align-items: baseline; gap: 6px; margin: 0 0 6px; font-size: 12px; font-weight: 700; color: var(--muted); }
.bk-glabel b { }
.bk-rows { display: grid; gap: 6px; }
.bk-row { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; min-width: 0; }
.bk-id { display: flex; align-items: center; gap: 7px; min-width: 0; max-width: 100%; }
/* 난이도 태그 — 라이트: 난이도색 7px 점 + 잉크 글자 / 다크: 난이도색 글자 + 1px 외곽선 태그 */
.bdifftag { flex: none; display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; color: var(--ink-2); background: transparent; padding: 0; }
.bdifftag::before { content: ""; flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--bd-c, var(--ink-2)); }
.bdifftag.easy { --bd-c: var(--bd-easy); }
.bdifftag.normal { --bd-c: var(--bd-normal); }
.bdifftag.hard { --bd-c: var(--bd-hard); }
.bdifftag.chaos { --bd-c: var(--bd-chaos); }
.bdifftag.extreme { --bd-c: var(--bd-extreme); }
@media (prefers-color-scheme: dark) {
  .bdifftag { color: var(--bd-c, var(--ink-2)); border: 1px solid currentColor; border-radius: 4px; padding: 0 6px; line-height: 1.55; background: transparent; }
  .bdifftag::before { display: none; }
}
.bk-name { font-weight: 700; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bk-price { flex: none; color: var(--muted); font-size: 12px; }
.bk-who { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-left: auto; min-width: 0; }
.who { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 999px; background: var(--ok-soft); color: var(--ok); }
/* 2인 이상 파티로 잡은 처치자 — 상태 알약(pill 토큰: 라이트 잉크 채움+흰 글자 / 다크 금 외곽+금 글자) */
.who.is-party { border: var(--pill-edge); color: var(--pill-ink); background: var(--pill-bg); }
/* ===== 장비 탭 (§11 기반 · §15 인게임풍 장비창 + 프리셋 전환 · §16 인게임 배치 7×6) ===== */
.gear-chars { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px; min-width: 0; }
.gear-chars .lbl { color: var(--muted); font-size: 12px; flex: none; }
.gchar { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12px; font-weight: 600; max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.gchar.on { background: var(--action); border-color: var(--action); color: var(--action-ink); }
.gchar.ext { border-style: dashed; }
.gear-head { background: var(--panel-bg); border: var(--panel-edge); box-shadow: var(--panel-shadow); border-radius: var(--panel-radius); padding: 14px 16px; display: grid; gap: 10px; margin-bottom: 12px; min-width: 0; }
.gear-top { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; justify-content: space-between; min-width: 0; }
.gear-id { display: flex; align-items: baseline; gap: 8px; min-width: 0; overflow-wrap: anywhere; }
.gear-name { font-size: 18px; font-weight: 700; }
.gear-lv { color: var(--muted); font-size: 12px; flex: none; }
.gear-cp { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; flex: none; }
.gear-cp .lbl { color: var(--muted); font-size: 12px; }
.gear-cp b { font-size: 20px; font-weight: 800; }
.cp-note { flex: none; font-size: 10px; font-weight: 700; line-height: 1.6; color: var(--muted); border: 1px dashed var(--border); border-radius: 8px; padding: 0 6px; }
.gear-stats { display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; min-width: 0; }
.gstat { display: inline-flex; gap: 4px; align-items: baseline; background: var(--surface-2); border: 1px solid var(--border); border-radius: 8px; padding: 2px 7px; font-size: 11px; color: var(--muted); max-width: 100%; }
.gstat b { color: var(--text); font-weight: 700; overflow-wrap: anywhere; }
/* §48 스탯 정리 — 핵심 4개 타일(.gkey) + "전체 스탯" 펼침 묶음(.gall). 기존 .gstat 칩·.gstat-more 규칙은 그대로 둔다 */
.gkey { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) auto; gap: 8px; align-items: stretch; margin-top: 6px; }
.gkey-tile { display: grid; gap: 2px; padding: 8px 10px; border-radius: 10px; background: var(--surface-2); min-width: 0; }
.gkey-l { font-size: 11.5px; color: var(--mute); }
.gkey-v { font-size: 16px; font-weight: 800; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gkey-more { align-self: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink-2); border-radius: 8px; padding: 6px 10px; font-size: 12px; font-weight: 600; white-space: nowrap; }
.gall { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 20px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.gall-t { font-size: 12px; font-weight: 700; color: var(--ink-2); margin-bottom: 4px; }
.gall-l { margin: 0; display: grid; gap: 2px; }
.gall-r { display: flex; justify-content: space-between; gap: 8px; font-size: 12.5px; }
.gall-r dt { color: var(--mute); } .gall-r dd { margin: 0; font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .gkey { grid-template-columns: repeat(2, minmax(0, 1fr)); } .gkey-more { grid-column: 1 / -1; justify-self: start; } .gkey-v { font-size: 15px; } }
.gear-meta { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; color: var(--muted); font-size: 12px; min-width: 0; }
/* §35 큐브 기록 — gear-meta 안 기록 범위 + 불러오기 버튼 묶음 */
.gear-cube { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* §15-fix: 데스크톱에서 장비창과 상세 패널을 나란히(한 덩어리로 중앙 정렬)해 좌우 여백을 줄인다 */
.gear-body { display: flex; gap: 14px; align-items: flex-start; justify-content: center; min-width: 0; }
.gear-list { flex: 0 1 auto; min-width: 0; }
/* §15 프리셋 전환 바 — 라벨(없으면 "프리셋 N") · 착용 중 표시 · 연필로 짧은 입력 → 저장 시 PUT /api/preset-label */
.preset-bar { display: flex; flex-wrap: wrap; align-items: stretch; gap: 6px; margin: 0 0 10px; min-width: 0; }
.ptab-wrap { display: flex; align-items: stretch; gap: 3px; min-width: 0; }
.ptab { display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 1px; min-width: 64px; max-width: 150px; padding: 5px 11px 4px; text-align: left; border: 1.5px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); }
.ptab.worn { border-color: var(--ok); }
.ptab.on { border-color: var(--accent); background: var(--accent-soft); color: var(--text); }
.ptab-name { max-width: 100%; font-size: 12px; font-weight: 800; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptab-sub { display: flex; align-items: center; gap: 5px; max-width: 100%; font-size: 10px; line-height: 1.4; }
.ptab-wear { flex: none; font-size: 9px; font-weight: 800; color: var(--ok); }
.ptab-cnt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ptab-pen { flex: none; align-self: center; width: 26px; padding: 6px 0; font-size: 11px; line-height: 1; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--muted); }
.ptab-pen:hover { color: var(--text); }
.ptab-edit { display: flex; align-items: center; gap: 3px; min-width: 0; }
.ptab-input { width: 116px; max-width: 42vw; min-width: 0; padding: 5px 8px; font: inherit; font-size: 12px; border: 1.5px solid var(--accent); border-radius: 8px; background: var(--surface); color: var(--text); }
.ptab-ok { flex: none; border: none; border-radius: 8px; padding: 5px 10px; font-size: 11px; font-weight: 700; background: var(--action); color: var(--action-ink); }
.ptab-ok:disabled { opacity: .5; cursor: default; }
.ptab-no { flex: none; border: 1px solid var(--border); border-radius: 8px; padding: 5px 8px; font-size: 11px; background: var(--surface); color: var(--muted); }
.preset-note { flex-basis: 100%; font-size: 11px; color: var(--muted); overflow-wrap: anywhere; }
/* §16 게임풍 장비창 프레임 — 7칸 × 6행 격자(인게임 EQUIPMENT 창 배치) · 가운데 3열×4행(3~5열·1~4행)은 캐릭터 외형
   왼쪽 2열 장신구(하늘색) · 오른쪽 2열 방어구(노란색) · 아래 가운데 무기·보조무기·엠블렘(빨간색) · 훈장/뱃지/기계 심장/안드로이드 회색 기타
   라이트: 양피지+골드 테두리, 다크: 차콜+블루 테두리. §19: 카드 그림자 제거(게임 오브젝트는 테두리·그라데이션으로만) */
.ewin {
  --slotw: 58px; --sloth: 68px; --gicon: 42px;
  --eframe-hi: #f6ecd0; --eframe-lo: #dbc692; --eframe-bd: #b3945c;
  --ebody: #faf6ea; --eslot-bg: #efe8d4; --eslot-bd: #c8b78e;
  --rg-acc-bg: #e4f0fa; --rg-acc-bd: #9fc3e0;
  --rg-armor-bg: #faf2d6; --rg-armor-bd: #d8c37e;
  --rg-wpn-bg: #fae3de; --rg-wpn-bd: #dfa094;
  --rg-etc-bg: #ebeae4; --rg-etc-bd: #c5c2b6;
  position: relative; width: fit-content; max-width: 100%; margin: 0 auto;
  padding: 7px; border: 2px solid var(--eframe-bd); border-radius: 12px;
  background: linear-gradient(180deg, var(--eframe-hi), var(--eframe-lo));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.55);
}
.ewin-in { background: var(--ebody); border: 1px solid var(--eslot-bd); border-radius: 9px; padding: 9px 10px 11px; min-width: 0; }
.ewin-tbar { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; padding: 0 2px 8px; min-width: 0; }
.ewin-title { flex: none; font-size: 13px; font-weight: 700; letter-spacing: .12em; }
.ewin-cap { min-width: 0; font-size: 11px; color: var(--muted); text-align: right; overflow-wrap: anywhere; }
/* §16: 7열 격자 · 왼쪽 2열 장신구·오른쪽 2열 방어구·5행 가운데 무보엠·회색 기타.
   24개 부위 칸 + 안드로이드 빈 장식 칸은 각자 grid-row/grid-column을 명시 배치(자동 배치 미사용)하고,
   6행 2~6열(null)은 칸을 그리지 않는 빈 공간으로 남긴다 */
.ewin-cols { display: grid; grid-template-columns: repeat(7, var(--slotw)); grid-auto-rows: var(--sloth); gap: 6px; justify-content: center; }
@media (prefers-color-scheme: dark) {
  .ewin { --eframe-hi: #3c4454; --eframe-lo: #242a36; --eframe-bd: #55627e; --ebody: #14171d; --eslot-bg: #1d222c; --eslot-bd: #3a4250;
    --rg-acc-bg: #182c40; --rg-acc-bd: #2f5878;
    --rg-armor-bg: #34301b; --rg-armor-bd: #6a5e2f;
    --rg-wpn-bg: #3c211e; --rg-wpn-bd: #7c453c;
    --rg-etc-bg: #22252b; --rg-etc-bd: #454b57; }
}
/* §16 장비 칸 — 인게임 위치대로 부위별 고정 · 칸 배경은 영역별 연한 색(라이트·다크 대비 유지).
   칸에는 아이콘·스타포스·등급만(이름은 툴팁/상세로, 겹침 제거) · 잠재 등급 테두리 · 에디셔널 등급 점 */
.gslot { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: var(--slotw); height: var(--sloth); padding: 4px 2px 3px; background: var(--eslot-bg); border: 2px solid var(--eslot-bd); border-radius: 8px; box-shadow: inset 0 2px 5px rgba(0,0,0,.12); color: inherit; }
/* §16 영역 색 — 왼쪽 2열 장신구(하늘) · 오른쪽 2열 방어구(노랑) · 무보엠(빨강) · 훈장/뱃지/기계 심장/안드로이드 기타(회색) */
.gslot.rg-acc { background: var(--rg-acc-bg); border-color: var(--rg-acc-bd); }
.gslot.rg-armor { background: var(--rg-armor-bg); border-color: var(--rg-armor-bd); }
.gslot.rg-wpn { background: var(--rg-wpn-bg); border-color: var(--rg-wpn-bd); }
.gslot.rg-etc { background: var(--rg-etc-bg); border-color: var(--rg-etc-bd); }
.gslot.empty { border-style: dashed; box-shadow: none; }
.gslot.sel { outline: 2px solid var(--accent); outline-offset: 1px; }
.gslot-icon { width: var(--gicon); height: var(--gicon); display: grid; place-items: center; }
.gslot-icon img { width: 100%; height: 100%; object-fit: contain; }
/* 빈 칸은 부위 보조 텍스트, 아이콘 없는 장비는 이름(최대 2줄) — 아이콘과 겹치지 않는다 */
.gslot-ph { max-width: 100%; font-size: 9px; line-height: 1.25; color: var(--muted); text-align: center; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: keep-all; overflow-wrap: anywhere; }
/* §17 그리드 칸 스타포스 — "★21" 표기는 유지하되 굵기 900·전용 색(--sf-cell)으로 진하게 */
.gslot-sf { flex: none; min-height: 12px; font-size: 10px; line-height: 1.3; font-weight: 900; color: var(--sf-cell); letter-spacing: .02em; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
@media (prefers-color-scheme: dark) {
  .gslot-sf { text-shadow: 0 1px 1px rgba(0,0,0,.55); }
}
.gslot-dot { position: absolute; top: 4px; right: 4px; width: 7px; height: 7px; border-radius: 50%; pointer-events: none; }
/* §16 캐릭터 외형 — 장비창 가운데 3열×4행(3~5열 · 1~4행) 블록(명시 배치) */
.echar { grid-column: 3 / span 3; grid-row: 1 / span 4; position: relative; display: grid; place-items: center; min-height: 0; overflow: hidden; border: 1px solid var(--eslot-bd); border-radius: 8px;
  background: radial-gradient(ellipse at 50% 72%, rgba(240,140,0,.14), transparent 60%), linear-gradient(180deg, rgba(0,0,0,.03), rgba(0,0,0,.10)); }
@media (prefers-color-scheme: dark) {
  .echar { background: radial-gradient(ellipse at 50% 72%, rgba(255,169,77,.12), transparent 60%), linear-gradient(180deg, rgba(255,255,255,.03), rgba(0,0,0,.28)); }
}
.echar img { max-width: 96%; max-height: 96%; object-fit: contain; }
.echar-ph { font-size: 30px; font-weight: 800; color: var(--muted); opacity: .55; }
/* §16 영역 범례 — 칸 배경색이 어떤 영역인지 짧게 안내 */
.ewin-lgd { display: flex; flex-wrap: wrap; gap: 3px 10px; align-items: center; padding: 8px 2px 0; min-width: 0; font-size: 10px; color: var(--muted); }
.ewin-lgd .li { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.rgd { flex: none; width: 9px; height: 9px; border-radius: 3px; border: 1px solid var(--eslot-bd); }
.rgd.acc { background: var(--rg-acc-bg); border-color: var(--rg-acc-bd); }
.rgd.armor { background: var(--rg-armor-bg); border-color: var(--rg-armor-bd); }
.rgd.wpn { background: var(--rg-wpn-bg); border-color: var(--rg-wpn-bd); }
.rgd.etc { background: var(--rg-etc-bg); border-color: var(--rg-etc-bd); }
/* §15 부위 칸에 못 들어간 장비(프리셋 2 '예비 특수 반지' 등) · 비어 있는 프리셋 */
.ewin-extra { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 6px; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--eslot-bd); }
.ewin-extra-t { flex: none; padding-top: 4px; font-size: 10px; font-weight: 800; color: var(--muted); }
.ewin-empty { display: grid; gap: 3px; justify-items: center; text-align: center; padding: 30px 14px; color: var(--muted); font-size: 12px; overflow-wrap: anywhere; }
.ewin-empty b { color: var(--text); font-size: 13px; }
.eslot-ph { font-size: 10px; color: var(--muted); text-align: center; max-width: 100%; overflow: hidden; }
/* 잠재 등급 테두리(§16: 영역 테두리보다 나중에 선언해 등급 있을 때만 영역 색을 덮는다) */
.gslot.g-rare { border-color: var(--g-rare); } .gslot.g-epic { border-color: var(--g-epic); }
.gslot.g-unique { border-color: var(--g-unique); } .gslot.g-legendary { border-color: var(--g-legendary); }
.ad-rare { background: var(--g-rare); } .ad-epic { background: var(--g-epic); }
.ad-unique { background: var(--g-unique); } .ad-legendary { background: var(--g-legendary); }
/* ===== §18 장비 상세 = 인게임 툴팁 오브젝트 (§18.3) — 라이트·다크 무관 어두운 판 고정. (§19 변경 금지 영역) ===== */
.gear-detail {
  --tt-ground: #1f2534; --tt-edge: #343c50; --tt-ink: #eceff5; --tt-mute: #98a1b3;
  --tt-gold: #ffcc33; --tt-star-off: #454d61; --tt-add: #b8e356; --tt-scroll: #b9a8ff;
  --tt-rare: #6cc6ff; --tt-epic: #b47cff; --tt-unique: #ffcc33; --tt-legendary: #a6e04a;
  flex: 0 1 340px; min-width: 0; align-self: flex-start;
  position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow: auto;
  display: grid; color: var(--tt-ink);
  background: var(--tt-ground);
  border: 1px solid var(--tt-edge); border-radius: 6px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, .32), inset 0 0 0 1px rgba(236, 239, 245, .045);
  animation: ttFade .15s ease-out;
}
@keyframes ttFade { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .gear-detail { animation: none; } }
.gd-in { display: grid; gap: 10px; min-width: 0; padding: 14px 16px 16px; }
.tt-close { position: absolute; top: 6px; right: 6px; z-index: 1; border: none; background: none; color: var(--tt-mute); font-size: 14px; line-height: 1; padding: 6px 8px; border-radius: 6px; }
.tt-close:hover { color: var(--tt-ink); background: rgba(236, 239, 245, .08); }
/* 상단 — 별(가운데) → 이름(넥슨 메이플스토리 서체, 17px) → 부위·Lv·N성 칩('·' 중간점 나열 대신 칩) */
.tt-hero { display: grid; gap: 6px; justify-items: center; padding-top: 2px; min-width: 0; }
.tt-name { max-width: 100%; font-family: 'MaplestoryBold', "Pretendard Variable", Pretendard, system-ui, sans-serif; font-size: 17px; font-weight: 700; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.tt-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px; }
.tt-chip { display: inline-flex; align-items: baseline; gap: 3px; max-width: 100%; padding: 2px 8px; border-radius: 999px; background: rgba(236, 239, 245, .07); color: var(--tt-mute); font-size: 11.5px; font-weight: 600; white-space: nowrap; }
.tt-chip b { color: var(--tt-ink); font-weight: 700; font-variant-numeric: tabular-nums; }
/* §18.1 별 — 한 줄 15개(5개 묶음 ×3): 행·묶음을 별도 래퍼 요소로 감싸 줄바꿈 위치를 폭과 무관하게 고정, 가운데 정렬. */
.tt-stars { display: grid; gap: 3px; justify-items: center; min-width: 0; }
.tt-srow { display: flex; justify-content: center; gap: 7px; }
.tt-sbundle { display: inline-flex; gap: 1.5px; }
.tt-star { flex: none; width: 14px; height: 14px; display: block; }
.tt-star path { fill: none; stroke: var(--tt-star-off); stroke-width: 1.4; stroke-linejoin: round; }
.tt-star.on path { fill: var(--tt-gold); stroke: var(--tt-gold); }
/* 구분 섹션 — 1px 구분선(tt-edge), 공통 왼쪽 가장자리(16px) 정렬 */
.tt-sec { border-top: 1px solid var(--tt-edge); padding-top: 10px; min-width: 0; }
.tt-itemrow { display: flex; gap: 10px; align-items: flex-start; }
/* 아이콘 64px + 등급색 테두리(잠재 등급, 없으면 에디 등급) — 행 위쪽 정렬 */
.tt-icon { flex: none; align-self: start; width: 64px; height: 64px; display: grid; place-items: center; background: rgba(236, 239, 245, .04); border: 2px solid var(--tt-edge); border-radius: 8px; overflow: hidden; }
.tt-icon img { width: 52px; height: 52px; object-fit: contain; }
.tt-icon-ph { color: var(--tt-mute); font-size: 16px; font-weight: 700; }
.tt-icon.ttg-rare { border-color: var(--tt-rare); }
.tt-icon.ttg-epic { border-color: var(--tt-epic); }
.tt-icon.ttg-unique { border-color: var(--tt-unique); }
.tt-icon.ttg-legendary { border-color: var(--tt-legendary); }
/* 아이콘 오른쪽 한 열 — 잠재 블록, 그 아래 에디 블록을 차례로 쌓아 두 블록이 같은 왼쪽 기준선을 쓴다.
   모바일(≤760px 하단 시트)에서도 같은 구조(아이콘 왼쪽·오른쪽 열)이며 min-width: 0으로 가로 넘침이 없다 */
.tt-pots { flex: 1; min-width: 0; display: grid; gap: 10px; }
/* 잠재/에디 블록 — 같은 왼쪽 정렬 기준: 라벨+등급 머리줄, 옵션 줄은 잉크색·줄별 등급 배지 */
.tt-pot { min-width: 0; display: grid; gap: 4px; align-content: start; }
/* 둘 다 있을 때만 에디 블록 위 1px 구분선 + 8px 여백 */
.tt-pot-sep { border-top: 1px solid var(--tt-edge); padding-top: 8px; }
.tt-pot-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.tt-pot-t { flex: none; font-size: 11.5px; font-weight: 700; color: var(--tt-mute); }
.tt-grade { flex: none; font-size: 11.5px; font-weight: 800; }
.tt-pot-opts { display: grid; gap: 2px; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; }
/* 줄별 등급 배지 — 옵션 문장은 잉크색 고정, 줄 등급은 왼쪽 글자 배지(R/E/U/L)로 표시.
   배지는 flex:none 고정 크기, 문장은 남은 폭에서 줄바꿈 허용 */
.tt-pot-opts { color: var(--tt-ink); }
.tt-line { display: flex; align-items: baseline; gap: 8px; min-width: 0; }
.tt-lg { flex: none; width: 16px; height: 16px; border-radius: 3px; display: inline-grid; place-items: center; font-size: 10.5px; font-weight: 800; line-height: 1; color: var(--tt-ground); align-self: center; }
.tt-lg-rare { background: var(--tt-rare); }
.tt-lg-epic { background: var(--tt-epic); }
.tt-lg-unique { background: var(--tt-unique); }
.tt-lg-legendary { background: var(--tt-legendary); }
.tt-lg-none { background: transparent; }
.tt-lg-normal { background: #8f98aa; }
.tt-lg-guess { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.tt-lg-guess.tt-lg-rare { color: var(--tt-rare); }
.tt-lg-guess.tt-lg-epic { color: var(--tt-epic); }
.tt-lg-guess.tt-lg-unique { color: var(--tt-unique); }
.tt-lg-guess.tt-lg-legendary { color: var(--tt-legendary); }
.ttg-rare { color: var(--tt-rare); }
.ttg-epic { color: var(--tt-epic); }
.ttg-unique { color: var(--tt-unique); }
.ttg-legendary { color: var(--tt-legendary); }
/* 스크린리더 전용 텍스트 — 시각적으로 숨기고 보조기술에만 읽힌다(absolute라 flex gap을 만들지 않는다) */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
/* §18-fix: 전역 th 규칙(background: var(--surface) · position: sticky · border-bottom --border)이 툴팁 안
   옵션 표에 물려 라이트 모드에서 어두운 툴팁(#1F2534) 안에 흰 띠로 보이던 문제 — .tt 범위의 th/td를
   투명 바탕·정적 배치·툴팁 토큰(--tt-edge) 테두리로 재정의(특이도 0,1,1 > 전역 0,0,1). 다크 모드 결과는 동일. */
.tt th, .tt td { background: transparent; position: static; border-bottom-color: var(--tt-edge); }
/* §18.2 옵션 표 — 열: 스탯|최종|기본|추가|주문서|스타포스(+익셉셔널). */
.tt-opt { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tt-opt th, .tt-opt td { padding: 3px 0 3px 10px; text-align: right; white-space: nowrap; font-weight: 500; }
.tt-opt th:first-child, .tt-opt td:first-child { padding-left: 0; text-align: left; white-space: normal; word-break: keep-all; }
.tt-opt thead th { font-size: 11.5px; font-weight: 700; border-bottom: 1px solid var(--tt-edge); padding-bottom: 4px; }
.tt-opt tbody td { border-bottom: 1px solid rgba(236, 239, 245, .055); }
.tt-opt tbody tr:last-child td { border-bottom: none; }
.tt-c-stat { color: var(--tt-mute); }
.tt-c-fin { color: var(--tt-ink); }
.tt-opt td.tt-c-fin { font-weight: 800; }
.tt-c-base { color: var(--tt-mute); }
.tt-c-add { color: var(--tt-add); }
.tt-c-scroll { color: var(--tt-scroll); }
.tt-c-sf, .tt-c-ex { color: var(--tt-gold); }
/* §35 큐브 추천 표 — 툴팁 안 표는 늘 어두운 인게임 창이라 --tt-* 토큰 사용 */
.tt-adv { display: grid; gap: 10px; max-width: 560px; }
.tt-adv-part { display: grid; gap: 4px; min-width: 0; }
.tt-adv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.tt-adv-goal { font-size: 12.5px; font-weight: 700; color: var(--tt-ink); }
.tt-adv-now { color: var(--tt-mute); font-weight: 600; }
.tt-adv-tbl { width: 100%; border-collapse: collapse; font-size: 12.5px; font-variant-numeric: tabular-nums; }
.tt-adv-tbl th { padding: 2px 4px; font-size: 11px; font-weight: 600; color: var(--tt-mute); text-align: right; white-space: nowrap; }
.tt-adv-tbl td { padding: 3px 4px; color: var(--tt-ink); text-align: right; white-space: nowrap; }
.tt-adv-tbl th:first-child, .tt-adv-tbl td:first-child { text-align: left; padding-left: 0; }
/* §35-S3/§42: 첫 열 줄바꿈 허용 — 긴 큐브 이름으로 표가 시트·툴팁보다 넓어지지 않게 하되 단어 중간 끊김은 막는다 */
.tt-adv-tbl td:first-child { white-space: normal; word-break: keep-all; overflow-wrap: break-word; }
.tt-adv-tbl tbody tr + tr td { border-top: 1px solid rgba(236, 239, 245, .06); }
.tt-adv-tbl tr.best td.mean { color: var(--tt-gold); font-weight: 800; }
/* §43-c 큐브·불꽃 아이템 아이콘 — 색 견본 대신 자체 호스팅 아이콘(/img/items/<아이템ID>.png),
   아이콘 없는 항목(심연의 불꽃)은 같은 폭의 빈자리 */
.tt-ico { display: inline-block; width: 20px; height: 20px; margin-right: 6px; vertical-align: middle; object-fit: contain; image-rendering: pixelated; }
.tt-ico-none { visibility: hidden; }
/* §41 추가옵션(환생의 불꽃) — 목표 달성/부족 상태 알약(툴팁 --tt-* 토큰) */
.tt-flame-st { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.tt-flame-st.low { color: #ffb4a6; background: rgba(224, 87, 63, .18); }
.tt-flame-st.ok { color: #b8e356; background: rgba(184, 227, 86, .14); }
.tt-adv-note { margin: 0; font-size: 11px; line-height: 1.45; color: var(--tt-mute); }
/* §47-S2 모드별 유효 옵션 한 줄 안내 */
.tt-adv-mode { margin-top: 2px; }
/* §49 목표 조합 안내 */
.tt-adv-hint { margin-top: 2px; color: var(--tt-ink); }
/* 구버전 캐시 폴백(분해 필드 없음) — 라벨 왼쪽·값 오른쪽 목록 */
.tt-kvs { display: grid; gap: 3px; font-size: 12.5px; }
.tt-kv { display: flex; justify-content: space-between; gap: 8px; min-width: 0; }
.tt-kv .k { flex: none; color: var(--tt-mute); }
.tt-kv .v { min-width: 0; text-align: right; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.tt-plain { display: grid; gap: 2px; font-size: 13px; overflow-wrap: anywhere; }
.tt-soulname { font-weight: 700; }
.tt-cnt { display: flex; flex-wrap: wrap; gap: 6px; }
.gear-sheet-backdrop { display: none; }
@media (min-width: 901px) { .gear-sheet-backdrop { display: none !important; } }
@media (max-width: 900px) {
  .gear-body { flex-direction: column; }
  .gear-detail {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    flex: none; max-width: none; max-height: 76vh;
    border-radius: 16px 16px 0 0; border-left: none; border-right: none; border-bottom: none;
    box-shadow: 0 -10px 34px rgba(0, 0, 0, .5);
    padding-bottom: max(16px, env(safe-area-inset-bottom));
  }
  .gear-sheet-backdrop { display: block; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .45); }
}
/* ===== 장비 탭 모바일 개선 (§13 · ≤760px 전용, >760px는 데스크톱 레이아웃 그대로) ===== */
.gstat-more { border: 1px dashed var(--border); background: none; color: var(--muted); border-radius: 8px; padding: 2px 7px; font-size: 11px; font-weight: 600; line-height: 1.5; }
.gstat-more:active { transform: translateY(1px); }
.gd-handle { display: none; }
@media (min-width: 761px) { .gstat-more { display: none !important; } }
@media (max-width: 760px) {
  body.gd-lock { overflow: hidden; }
  .gstat-more { padding: 2px 8px; font-size: 10px; }
  .gear-stats.collapsed .gstat:nth-of-type(n+7) { display: none; }
  .gear-chars { flex-wrap: nowrap; overflow-x: auto; margin-bottom: 10px; padding: 1px 0 3px; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
  .gear-chars::-webkit-scrollbar { display: none; }
  /* §13-fix: sticky "캐릭터" 라벨이 스크롤 시 첫 칩을 덮는 문제 — sticky를 해제해 일반 흐름에 두고,
     라벨 다음에 칩이 이어지도록만 간격(padding-right)을 유지한다. */
  .gear-chars .lbl { flex: none; padding-right: 4px; }
  .gchar { flex: none; max-width: 130px; padding: 7px 13px; scroll-snap-align: start; }
  .gear-head { padding: 10px 12px; gap: 8px; margin-bottom: 10px; }
  .gear-name { font-size: 16px; }
  .gear-cp b { font-size: 17px; }
  .cp-note { font-size: 9px; padding: 0 5px; }
  .gear-stats { gap: 3px 4px; }
  .gstat { padding: 2px 6px; font-size: 10px; }
  .gear-meta { font-size: 11px; gap: 4px 10px; }
  /* §16 프리셋 바 · 게임 장비창 — 7열 격자를 유지한 채 화면 폭을 꽉 채운다 */
  .preset-bar { gap: 5px; margin-bottom: 8px; }
  .ptab { min-width: 58px; max-width: 104px; padding: 4px 9px 3px; }
  .ptab-name { font-size: 11px; }
  .ptab-pen { width: 24px; padding: 5px 0; }
  .ptab-input { width: 96px; }
  .ewin { --slotw: min(56px, calc((100vw - 90px) / 7)); --sloth: calc(var(--slotw) + 10px); --gicon: calc(var(--slotw) - 15px); width: 100%; padding: 5px; border-radius: 12px; }
  .ewin-in { padding: 7px 6px 9px; }
  .ewin-cols { gap: 4px; }
  .ewin-title { font-size: 12px; }
  .ewin-lgd { gap: 2px 8px; padding-top: 6px; font-size: 9px; }
  .rgd { width: 8px; height: 8px; }
  .gslot { padding: 3px 2px; border-radius: 7px; }
  .gslot-ph { font-size: 8px; }
  .gslot-sf { font-size: 9px; min-height: 11px; }
  .gslot-dot { top: 3px; right: 3px; width: 6px; height: 6px; }
  .echar-ph { font-size: 26px; }
  /* §18 모바일 상세 시트 — 손잡이·내부 스크롤, 옵션 표는 12px·열 간격 축소 */
  .gear-detail { display: flex; flex-direction: column; max-height: 74vh; padding: 8px 16px 0; overflow: hidden; overscroll-behavior: contain; }
  .gd-handle { display: block; flex: none; width: 42px; height: 4px; margin: 0 auto 8px; border-radius: 99px; background: rgba(236, 239, 245, .22); }
  .gd-in { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 0 max(14px, env(safe-area-inset-bottom)); }
  .tt-opt { font-size: 12px; }
  .tt-opt th, .tt-opt td { padding-left: 8px; }
  .tt-opt thead th { font-size: 11px; }
  /* §35-S3 에디셔널 표 축소 — 첫 열 padding-left:0 은 기존 규칙(.tt-adv-tbl td:first-child, 0,2,1)이
     이 규칙(.tt-adv-tbl td, 0,1,1)보다 우선해 그대로 유지된다 */
  .tt-adv-tbl { font-size: 12px; }
  .tt-adv-tbl th, .tt-adv-tbl td { padding: 2px 3px; }
}
/* 파티 인원 선택 모달 (§11) — 떠 있는 시트이므로 그림자 유지 */
.modal-back { position: fixed; inset: 0; z-index: 80; background: rgba(0,0,0,.45); display: grid; place-items: center; padding: 16px; }
.party-pop { width: 100%; max-width: 360px; max-height: 86vh; overflow: auto; background: var(--panel-flat); border: 1px solid var(--border); border-radius: 12px; padding: 16px; box-shadow: 0 12px 40px rgba(0,0,0,.25); }
.party-pop h3 { margin: 0; font-size: 15px; }
.party-boss { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 6px; font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.party-boss b { font-weight: 800; }
.party-cur { color: var(--muted); font-size: 12px; }
.pgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 5px; }
.psize { display: grid; gap: 1px; justify-items: center; padding: 7px 0 5px; border: 1.5px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 8px; }
.psize b { font-size: 15px; font-weight: 800; line-height: 1.1; }
.psize small { font-size: 9px; color: var(--muted); line-height: 1.3; }
.psize.on { border-color: var(--accent); background: var(--accent-soft); }
.psize.on small { color: var(--gold-text); background: transparent; border: 1px solid currentColor; }
.psize:disabled { opacity: .6; cursor: default; }
.party-note { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.55; overflow-wrap: anywhere; }
.party-actions { display: flex; gap: 8px; justify-content: flex-end; }
footer { margin-top: 32px; color: var(--muted); font-size: 11px; text-align: center; }
/* ===== §19 로그인 화면 — 카드 속 카드 제거, 한 열 왼쪽 정렬 ===== */
.login-screen { min-height: calc(100vh - 76px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; padding: 8px 0 24px; }
.login-card { width: 100%; max-width: 420px; display: grid; gap: 12px; padding: 0 4px; }
.login-title { font-size: 24px; font-weight: 700; margin: 0; text-align: left; }
.login-sub { margin: 0; color: var(--ink-2); font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; }
.login-row { display: flex; gap: 8px; min-width: 0; flex-wrap: nowrap; }
.login-row .btn { flex: none; }
.login-input { flex: 1; min-width: 0; width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.login-guide { margin: 0; color: var(--mute); font-size: 12px; line-height: 1.6; overflow-wrap: anywhere; word-break: break-word; }
.login-guide a { color: var(--gold-text); }
.login-btn-full { width: 100%; padding: 10px; }
.login-btn-full:disabled { color: var(--mute); opacity: 1; }
.acct-line { display: flex; gap: 6px 16px; flex-wrap: wrap; color: var(--muted); font-size: 13px; min-width: 0; overflow-wrap: anywhere; }
.acct-line b { color: var(--text); margin-left: 4px; }
.acct-actions { display: flex; gap: 8px; flex-wrap: wrap; }
/* ===== 손님(둘러보기) 진입 — 로그인 카드 맨 아래, 1px 구분선 + 닉네임 한 줄 입력(그림자 없음) ===== */
.guest-entry { display: grid; gap: 10px; }
.guest-entry .login-sub { font-weight: 700; }
/* ===== 둘러보기 상태 복원 중 — 로그인 섹션·대시보드가 모두 숨겨진 동안 화면 가운데 mute 글자 ===== */
.restore-note { min-height: calc(100vh - 76px); display: flex; align-items: center; justify-content: center; color: var(--mute); }
/* 모바일 전용 라벨·시간 — 기본 숨김(≤760px에서만 노출) */
.rshort, .tshort { display: none; }
/* ===== §19 모바일 공통 (≤760px 전용 — 데스크톱 >760px 레이아웃은 그대로)
   헤더 2줄(제목/지금 갱신/계정 + 갱신·API 메타), hero는 숫자+미터를 크게,
   보조 수치와 초기화는 한 줄 가로 스크롤 칩, 탭은 가로 스크롤. ===== */
@media (max-width: 760px) {
  header { gap: 6px 8px; }
  h1 { font-size: 17px; white-space: nowrap; }
  header .btn.primary { order: 2; margin-left: auto; padding: 6px 12px; font-size: 12px; min-width: 84px; text-align: center; }
  .acct { order: 3; }
  .meta { order: 5; flex-basis: 100%; gap: 4px 12px; font-size: 12px; }
  .rlong, .tlong { display: none; }
  .rshort, .tshort { display: inline; }
  .rmark { display: none; }
  .hero { grid-template-columns: 1fr; gap: 8px; margin: 12px 0 0; }
  .hero-main { padding: 14px 16px 12px; }
  .hero-num { font-size: 36px; }
  .hero-numrow { gap: 4px 10px; }
  .hero-subs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 12px 0 0; padding: 10px 0 0; border-top: 1px solid var(--line); }
  .hsub { display: grid; gap: 2px; background: var(--surface-2); border-radius: 8px; padding: 6px 8px; min-width: 0; white-space: normal; }
  .hsub .k { display: block; font-size: 11.5px; }
  .hsub .v { display: block; margin-top: 0; font-size: 14px; word-break: keep-all; }
  .hsub .v .den { font-size: 12px; }
  .hero-side { padding: 10px 12px 12px; }
  /* §38: 초기화까지 — 가로 스크롤 알약 대신 3칸 고정 격자(월간이 잘리지 않는다) */
  .rlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-top: 8px; overflow: visible; }
  .rrow { display: grid; gap: 2px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--surface-2); white-space: normal; min-width: 0; }
  .rlist .rrow:last-child { border-bottom: 1px solid var(--line); }
  .rrow .rk { font-size: 11.5px; } .rrow .rt { font-size: 13px; line-height: 1.25; word-break: keep-all; }
  nav { margin: 12px 0 10px; gap: 2px; scrollbar-width: none; }
  nav::-webkit-scrollbar { display: none; }
  nav button { padding: 8px 11px; font-size: 13px; }
  /* §42: 계정 공통 항목 — 280px 등 좁은 화면에서 nowrap으로 인한 가로 넘침을 막는다 */
  .rs-aitem { white-space: normal; align-items: flex-start; }
}
/* ===== §19-D1 라이트 모드 ground 위 보조 글자 대비 — 패널 밖 ground(#F2F5F4) 위 mute 글자는
   ink-2(#4F5C5A)로 높인다. 안내 글 안 링크는 공통 규칙 .login-guide a(gold-text) 하나를 따른다.
   다크 모드는 기존 mute/gold 유지. ===== */
@media (prefers-color-scheme: light) {
  .login-guide, .mlabel, .status, .toolbar, .heat-legend, .bd-legend .li,
  .bsec-title small, .bk-glabel, .bk-details summary small, .gear-chars .lbl, .preset-note, footer { color: var(--ink-2); }
}
/* ===== §42 아주 좁은 화면(폴드 커버 ≤340px) — 툴팁 표·hero 숫자·탭 버튼을 더 줄여 넘침을 막는다 ===== */
@media (max-width: 340px) {
  .tt-adv-tbl { font-size: 11.5px; }
  .tt-adv-tbl th, .tt-adv-tbl td { padding: 2px 2px; }
  .hero-num { font-size: 30px; }
  nav button { padding: 8px 9px; }
}

/* §50 오류 신고·제안 — 푸터 링크 모양 버튼, 모달 폼 */
.foot-link { border: 0; background: none; padding: 0; font: inherit; color: var(--mute); cursor: pointer; }
.foot-link:hover { color: var(--ink); text-decoration: underline; }
.foot-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 4px; }
.fb-pop { max-width: 420px; }
.fb-form { display: grid; gap: 8px; margin-top: 12px; }
.fb-form .seg { justify-self: start; }
.fb-label { font-size: 12px; font-weight: 600; color: var(--ink); margin-top: 4px; }
.fb-opt { font-weight: 400; color: var(--mute); }
.fb-form textarea, .fb-form input[type="text"] { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 8px; background: var(--surface); color: var(--ink); padding: 8px 10px; font: inherit; font-size: 13px; line-height: 1.55; }
.fb-form textarea { resize: vertical; min-height: 120px; }
.fb-form textarea:focus-visible, .fb-form input[type="text"]:focus-visible { outline: 2px solid var(--gold); outline-offset: 1px; }
.fb-count { justify-self: end; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.fb-count.warn { color: var(--warn); }
.fb-note { margin: 0; font-size: 11.5px; color: var(--mute); line-height: 1.5; }
.fb-done { margin: 4px 0 8px; font-size: 14px; color: var(--ink); }

/* §52 플레이 기록 — 잔디(결정석 주황 투명도 4단계)·배지 */
.act-card { margin-bottom: 14px; }
.act-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 6px 16px; }
.act-title { margin: 0; font-size: 15px; }
.act-stats { display: flex; gap: 14px; font-size: 12.5px; color: var(--mute); }
.act-stats b { color: var(--ink); font-variant-numeric: tabular-nums; margin-left: 3px; }
.act-loading { font-size: 12.5px; color: var(--mute); }
.act-scroll { overflow-x: auto; padding-bottom: 4px; }
.act-months { display: grid; grid-auto-flow: column; grid-auto-columns: 14px; gap: 0; margin-left: 22px; font-size: 10.5px; color: var(--mute); height: 14px; white-space: nowrap; }
.act-body { display: flex; gap: 4px; }
.act-wdays { display: grid; grid-template-rows: repeat(7, 11px); row-gap: 3px; width: 18px; font-size: 9.5px; line-height: 11px; color: var(--mute); }
.act-grid { display: flex; gap: 3px; }
.act-col { display: grid; grid-template-rows: repeat(7, 11px); row-gap: 3px; }
.act-cell { display: block; width: 11px; height: 11px; border-radius: 2.5px; background: var(--gold-track); }
.act-cell.out { background: transparent; }
.act-cell.none { background: var(--gold-track); opacity: .55; }
.act-cell.lv1 { background: color-mix(in srgb, var(--gold) 28%, var(--surface)); }
.act-cell.lv2 { background: color-mix(in srgb, var(--gold) 50%, var(--surface)); }
.act-cell.lv3 { background: color-mix(in srgb, var(--gold) 75%, var(--surface)); }
.act-cell.lv4 { background: var(--gold); }
.act-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 11px; color: var(--mute); }
.act-legend .act-cell { display: inline-block; }
.act-legend-note { margin-left: 8px; }
.badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; margin-top: 4px; }
.badge-tile { display: flex; gap: 10px; align-items: flex-start; padding: 10px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); }
.badge-mark { flex: none; width: 26px; height: 26px; border-radius: 50%; border: 2px dashed var(--todo); }
.badge-tile.earned { border-color: color-mix(in srgb, var(--gold) 55%, var(--line)); }
.badge-tile.earned .badge-mark { border: 0; background: radial-gradient(circle at 35% 35%, color-mix(in srgb, var(--gold) 55%, #fff), var(--gold) 70%); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--gold-text) 40%, transparent); }
.badge-text { min-width: 0; display: grid; gap: 2px; }
.badge-name { font-size: 13px; font-weight: 700; color: var(--ink); }
.badge-tile:not(.earned) .badge-name { color: var(--mute); }
.badge-desc { font-size: 11.5px; color: var(--mute); line-height: 1.4; }
.badge-sub { font-size: 11px; color: var(--gold-text); }
.badge-prog { display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--mute); font-variant-numeric: tabular-nums; }
.badge-bar { flex: 1; height: 4px; border-radius: 2px; background: var(--gold-track); overflow: hidden; min-width: 40px; }
.badge-bar i { display: block; height: 100%; background: color-mix(in srgb, var(--gold) 70%, var(--surface)); }

/* §52 모바일 배지 2열 — 좁은 화면에서 13개 배지가 한 줄씩 길게 이어지지 않게 */
@media (max-width: 520px) {
  .badge-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
  .badge-tile { padding: 8px; gap: 7px; }
  .badge-mark { width: 20px; height: 20px; }
  .badge-name { font-size: 12.5px; }
  .badge-desc { font-size: 11px; }
  .badge-prog { flex-wrap: wrap; gap: 3px 6px; }
}

/* §53-5 모바일 캐릭터 이미지 */
@media (max-width: 640px) {
  .rs-av { width: 48px; height: 48px; }
  .rs-av img { width: 144px; height: 144px; left: -50px; top: -53px; }
}

nav::-webkit-scrollbar { display: none; } /* §59 */