/* 메랜최적화 — 라이트 고정 테마 (다크 대응은 범위 밖).
 *
 * 디자인 원칙 (2026-08-24 리디자인 / 2026-08-25 원복):
 * ★ 8/25 에 크림·목재 톤으로 갈아엎었다가 사용자 지시로 되돌렸다. 사이트 전체
 *   팔레트를 바꾸지 마라 — 색을 손볼 일이 생기면 범위를 먼저 확인할 것.
 *   그때 늘어난 토큰 이름(--panel-soft, --head-bg, --accent-deep/-text,
 *   --accent-2, --on-accent, --shadow-*)은 시트 전체가 참조하므로 남겼고,
 *   값만 옛 팔레트로 돌렸다.
 *
 *  ① 흰 바탕 + 1px 테두리로 카드를 띄운다. 그림자는 쓰지 않는다(--shadow-card
 *     는 none). 예외는 화면 위에 겹치는 것(검색 드롭다운·모달)뿐이다 —
 *     겹치는 층은 테두리만으로 아래 글자와 구분이 안 되기 때문.
 *     ★ 새 색을 직접 박지 마라. 반드시 :root 토큰을 쓴다(하드코딩 hex 는
 *       배경을 갈아엎을 때마다 어긋나는 주범이었다).
 *
 *  ② 색을 아끼고 여백을 준다. 강조색은 링크·활성 탭·주요 버튼에만.
 *
 *  ③ 강조색은 파랑(--accent #3b6ef5)이다. 흰 바탕에서 3.9:1 이라
 *     **작은 글자에는 --accent-text(#2f59c9)** 를 쓴다.
 *       · --accent      → 테두리·배경칠·활성 표시 (비-텍스트)
 *       · --accent-deep → 흰 글자를 얹는 칠(주요 버튼·배지)
 *       · --accent-text → 본문 위에 앉는 글자·링크·작은 강조
 *     ★ 색만으로 정보를 전하지 않는다 — 글자·기호가 늘 같이 있어야 한다.
 *
 *  ④ 폰트는 두 벌을 섞는다. 제목·라벨·탭·큰 수치는 메이플 폰트,
 *     본문·입력칸·표(=숫자 밀도가 높은 곳)는 시스템 폰트 + tabular-nums.
 *     메이플 폰트는 획이 굵어 표에 깔면 숫자가 뭉갠다.
 *
 *  ⑤ 이 팔레트를 안 따르는 예외 구역은 둘뿐이고, 둘 다 게임 화면을 그대로
 *     흉내 내는 곳이라 일부러 남겼다 — 아래쪽 .mw-tt(아이템 정보창)와
 *     몬스터 필터의 속성색(인라인 --c). 그 밖에는 예외를 만들지 마라.
 */

/* ── 메이플 폰트 (scroll_simulator\static\css\base.css 와 같은 형식) ───────
   서브셋하지 않았다 — 아이템·몬스터 이름을 데이터에서 받아 뿌리기 때문에
   미리 자르면 목록에 없는 글자가 □ 로 깨진다. */
@font-face {
  font-family: 'Maplestory';
  src: url('/static/fonts/maplestory-light.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Maplestory';
  src: url('/static/fonts/maplestory-bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ── 팔레트 원복 (2026-08-25) ────────────────────────────────────────────
     한때 크림·목재 톤으로 갈았다가 사용자 지시로 흰 바탕 + 파랑 액센트로
     되돌렸다. 토큰 "이름" 은 그때 늘어난 것을 그대로 둔다 — 시트 전체가 이미
     이 이름들을 참조하고 있어서 이름을 지우면 색이 비는 자리가 생긴다.
     값만 옛 팔레트로 돌린다. */
  --bg: #f4f5f7;
  --panel: #ffffff;
  --panel-soft: #fafbfc;  /* 카드 안의 칸·표 머리·줄무늬·장비 슬롯 */
  --head-bg: #ffffff;     /* 상단바·푸터 */

  --line: rgba(0, 0, 0, .12);
  --line-soft: rgba(0, 0, 0, .07);

  --text: rgba(0, 0, 0, .87);
  --muted: rgba(0, 0, 0, .52);
  --faint: rgba(0, 0, 0, .38);

  /* 파랑 3형제. 이름은 남기되 값은 옛 단일 파랑 계열로 맞춘다.
     --accent-text 만 조금 짙게 둔다 — 흰 바탕에서 #3b6ef5 는 3.9:1 이라
     작은 글자에 쓰면 안 읽힌다. */
  --accent: #3b6ef5;
  --accent-deep: #3162e2;
  --accent-text: #2f59c9;
  --accent-soft: #eef3fe;
  --accent-line: rgba(59, 110, 245, .28);

  /* 보조 강조 — 옛 디자인에는 없던 자리다. 구획 제목이 튀지 않게 muted 로 맞춘다. */
  --accent-2: rgba(0, 0, 0, .52);
  --accent-2-text: rgba(0, 0, 0, .52);

  --good: #12855a;
  --good-soft: #eaf7f0;
  --bad: #d23b3b;
  --bad-soft: #fdeeee;
  --warn-bg: #fff7e6;
  --warn-line: #f0c274;
  --warn-text: #8a5a00;

  --overlay: rgba(0, 0, 0, .38);
  --on-accent: #ffffff;
  --accent-ring: rgba(59, 110, 245, .22);
  --neutral-soft: #eceef1;

  /* 옛 원칙은 "그림자를 쓰지 않는다" 였다 — 카드는 none, 겹치는 층만 흐린 그림자. */
  --shadow-card: none;
  --shadow-pop: 0 10px 24px rgba(0, 0, 0, .14);

  --radius: 10px;
  --radius-sm: 6px;

  /* 제목·라벨용 (메이플) / 본문·표용 (시스템) 두 벌 */
  --font-display: 'Maplestory', "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-ui: "Noto Sans KR", system-ui, -apple-system, "Segoe UI", Roboto, "Malgun Gothic", sans-serif;
}

* { box-sizing: border-box; }
/* display:flex/grid 지정이 [hidden] 의 UA display:none 을 이겨 버린다 — 전역으로 못 박는다 */
[hidden] { display: none !important; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  /* 푸터를 화면 바닥까지 밀어 내리는 그릇 — 내용이 짧은 안내 문서나 부팅 전
     (#app[hidden]) 상태에서 푸터가 화면 중간에 뜨고 밑이 빈 배경으로 남는 걸
     막는다. .foot 의 margin-top:auto 와 한 쌍이다. 100vh 가 아니라 100dvh 라
     모바일 주소창이 접혔다 펴져도 헛스크롤이 생기지 않는다.
     ★ 모달(.modal)·툴팁(.skill-tip)은 전부 position:fixed 라 flex 아이템이
     되지 않고, .site-head 는 sticky 인 채로 흐름에 남아 그대로 붙는다. */
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ── 상단 바 ───────────────────────────────────────────────────────────── */
/* 사이트 첫인상이다. 본문(--bg)보다 한 단 진한 목재 톤 + 아래로 떨어지는
   2px 두께선으로 층을 가른다 — sticky 라 본문이 밑으로 지나갈 때 경계가
   흐려지면 안 된다(1px 테두리만으로는 크림 위에서 거의 안 보였다). */
.site-head {
  position: sticky; top: 0; z-index: 50;
  background: var(--head-bg);
  border-bottom: 1px solid var(--line);
  box-shadow: 0 2px 0 var(--line-soft);
}
.site-head-inner {
  max-width: 1440px; margin: 0 auto;
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
}
.site-head h1 {
  margin: 0; font-family: var(--font-display);
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
}
.subtitle { margin: 0; color: var(--muted); font-size: 13px; flex: 1; }

/* 탭줄이 상단바 안으로 들어왔다 — 화면 전체가 탭 단위로 갈리므로, 스크롤을
   내려도 다른 탭으로 건너뛸 수 있어야 한다(상단바가 sticky 라 같이 붙는다). */
.main-tabs {
  max-width: 1440px; margin: 0 auto; padding: 0 16px;
  border-bottom: 0;
}
.main-tabs .tab { padding: 10px 13px; }

/* 캐릭터 요약줄 — 입력 폼이 안 보이는 탭에서 "무슨 캐릭으로 계산 중인지" 를 남긴다 */
.char-summary {
  border-top: 1px solid var(--line);
  background: var(--panel-soft); /* 상단바(--head-bg)보다 밝다 — 머리 안의 별도 띠 */
}
.char-summary-inner {
  max-width: 1440px; margin: 0 auto; padding: 7px 24px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  font-size: 12px; color: var(--muted);
}
.char-summary b {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--text);
  font-variant-numeric: tabular-nums;
}
.char-summary .sep { color: var(--faint); }
.char-summary .dim { color: var(--faint); font-variant-numeric: tabular-nums; }

.loading { padding: 80px 24px; text-align: center; color: var(--muted); font-size: 15px; }

/* ── 레이아웃 ─────────────────────────────────────────────────────────────
   .wrap 이 페이지 폭을 잡는다. 캐릭터 정보 탭은 좌(1 캐릭터 + i 상세) / 우(E·S)
   2단이고, 결과 탭들은 카드 하나를 통째로 쓴다.
   1080px 이하는 어디든 1단으로 접는다. */
.wrap { max-width: 1440px; margin: 0 auto; padding: 24px; }
.char-layout {
  display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 20px;
  align-items: start;
}
@media (max-width: 1080px) {
  .wrap { padding: 16px; }
  .char-layout { grid-template-columns: 1fr; gap: 16px; }
}
.panel { min-width: 0; } /* grid 자식이 내용 폭에 끌려 넘치지 않게 */
/* 좌측 열 = "내 캐릭터를 정하는 것들": 1 캐릭터 → K 스킬창 → i 아이템 상세.
   스킬창이 여기 있는 까닭: 게임처럼 "내 스킬 레벨"을 찍는 자리라 캐릭터 카드
   바로 옆이 맞고, N방컷 탭은 그중 하나를 고르기만 한다. */
.char-left { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.char-left > .card { margin-bottom: 0; }
.skillwin-card .card-body > .btn-ghost { margin-top: 4px; }

/* ── 저장 슬롯 줄 (캐릭터 정보 탭 맨 위) ───────────────────────────────────
   카드가 아니라 "줄" 이다 — 여기 값은 계산의 일부가 아니라 계산 재료를 통째로
   담았다 꺼내는 손잡이라, 카드로 세우면 입력 카드들과 급이 헷갈린다.
   그래서 카드와 같은 바탕·테두리·라운드를 쓰되 --shadow-card 는 얹지 않는다 —
   "떠 있는 판때기" 는 카드만이라는 규칙을 지켜 급을 눈으로 갈라 둔다. */
.build-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 10px 14px; margin: 0 0 16px;
}
.build-bar .bb-k {
  font: 700 13px/1 var(--font-display); color: var(--text);
  margin-right: 2px; white-space: nowrap;
}
.build-bar select { width: auto; min-width: 168px; margin: 0; }
.build-bar input[type="text"] { width: auto; flex: 1 1 200px; min-width: 140px; margin: 0; }
.build-bar .bb-msg {
  font-size: 12px; color: var(--muted); margin-left: auto;
  font-variant-numeric: tabular-nums;
}
.build-bar .bb-msg.ok { color: var(--good); }
.build-bar .bb-msg.bad { color: var(--bad); }
.btn.tiny { padding: 5px 12px; font-size: 12px; }
@media (max-width: 640px) {
  .build-bar .bb-msg { margin-left: 0; width: 100%; }
}

/* ── 우측: E 장비창 | S 아이템 검색 ───────────────────────────────────────
   둘만 남았다(옛 2행의 스킬·버프는 N방컷 탭으로 갔다). 같은 격자 행에 두면
   stretch 가 기본이라 **높이가 서로 자동으로 맞는다** — 사용자 요구사항이다.
   1200px 미만에서는 맞출 상대가 없으므로 한 줄로 접는다. */
.equip-col {
  display: flex; flex-direction: column; gap: 14px; align-items: stretch;
}
.equip-col > .card { margin-bottom: 0; }

@media (min-width: 1200px) {
  .equip-col {
    display: grid;
    grid-template-columns: 400px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
  }
  /* B 버프·도핑은 E·S 아래 줄을 통째로 쓴다 (2026-08-24 재배치).
     align-items:stretch 는 줄 단위로 걸리므로 E·S 의 높이 맞춤은 그대로 산다. */
  .equip-col > .buff-card { grid-column: 1 / -1; }
}

/* 넓어진 B 카드의 속. auto-fit 이라 좁은 화면에서는 저절로 한 줄로 접힌다 —
   좌측에 세로로 서 있던 예전 모습과 같아진다. */
.buff-cols {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 2px 20px; align-items: start;
}
.buff-cols .bcol { min-width: 0; }
/* 샤프아이즈 체크와 그 하위 두 칸은 한 덩어리다 — 격자가 갈라 놓으면 안 된다 */
.buff-cols .bgrp { display: block; }

/* ── 스탯 공격력 버프 (드롭다운 + 체크박스) ───────────────────────────────
   배타 그룹은 드롭다운, 제약 없는 것은 체크박스다. 개수는 데이터가 정하므로
   auto-fit 으로 폭에 맞춰 접는다 — 항목이 늘어도 CSS 를 안 고쳐도 된다. */
.buff-picks {
  margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line-soft);
  display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 2px 16px;
}
.buff-chks { display: flex; flex-wrap: wrap; gap: 0 22px; }
.buff-chks label.chk { margin: 6px 0; }

/* ── 버프 배타 안내 ───────────────────────────────────────────────────────
   "무엇이 왜 꺼졌는지" 를 알리는 줄. 잠깐 강조했다가 톤을 내린다 —
   조용히 꺼지면 사용자가 버그로 오해하기 때문(AP 클램프와 같은 방침). */
.buff-msg {
  margin: 8px 0 0; padding: 7px 10px; font-size: 12px; line-height: 1.5;
  color: var(--text); background: var(--accent-soft);
  border: 1px solid var(--accent); border-radius: var(--radius-sm);
  transition: opacity .4s ease;
}
.buff-msg.fade { opacity: .45; }

/* ── 켜진 버프 아이콘 줄 (카드 맨 아래) ───────────────────────────────────
   인게임 버프 바와 같은 모양. 카드 폭을 넘으면 wrap 으로 접힌다 —
   줄 수를 못 박지 않는다(넘치면 자연스럽게 두 줄이 되게). */
.buff-bar {
  display: flex; flex-wrap: wrap; gap: 6px;
  margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  min-height: 44px; align-items: flex-start;
}
.buff-bar .bb-empty { font-size: 12px; color: var(--faint); align-self: center; }
.buff-chip {
  position: relative; width: 34px; height: 34px; flex: none;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel); display: grid; place-items: center; cursor: default;
}
.buff-chip.lv { cursor: context-menu; }
.buff-chip img { width: 28px; height: 28px; object-fit: contain; image-rendering: pixelated; }
/* 아이콘을 못 구한 것(기상효과·버닝 등)의 대체 칩 — 아이콘 있는 것과 크기·정렬을 맞춘다.
   깨진 이미지 아이콘이 뜨는 일은 없어야 한다(onerror 가 이 모습으로 갈아 끼운다). */
.buff-chip .bc-txt {
  font-family: var(--font-display); font-size: 11px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-soft);
  width: 100%; height: 100%; display: grid; place-items: center;
  border-radius: calc(var(--radius-sm) - 1px); letter-spacing: -.03em;
}
.buff-chip .bc-lv {
  position: absolute; right: -3px; bottom: -4px;
  min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--accent-deep); color: var(--on-accent);
  font-size: 10px; font-weight: 700; line-height: 15px; text-align: center;
  font-variant-numeric: tabular-nums;
}

/* 우클릭 레벨 팝오버 — 떠 있는 층이라 카드보다 강한 --shadow-pop 을 쓴다 */
.buff-lv-pop {
  position: absolute; z-index: 60; display: flex; align-items: center; gap: 6px;
  padding: 7px 9px; background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-pop);
}
.buff-lv-pop[hidden] { display: none; }
.buff-lv-pop .blp-name { font-size: 12px; font-weight: 700; white-space: nowrap; }
.buff-lv-pop input { width: 62px; }
.buff-lv-pop .blp-note { font-size: 11px; color: var(--muted); white-space: nowrap; }

/* ══════════ N방컷 탭의 컴팩트 버프 카드 (.buff-mini) ═════════════════════
   .kill-side 는 320px 고정이라 캐릭터 정보 탭의 2~3열 격자가 그대로는 안 들어간다
   (auto-fit minmax(190px,1fr) 이 1열로 접히면서 드롭다운이 세로로 늘어진다).
   그래서 이 카드 안에서는 격자를 1열로 못 박고 글자·칸 높이를 한 단계 줄인다.
   상태는 캐릭터 탭 카드와 **같은 것**이다 — 값이 아니라 모양만 다르다. */
.buff-mini .buff-picks {
  grid-template-columns: 1fr; gap: 0; margin-top: 0; padding-top: 0; border-top: none;
}
.buff-mini .buff-picks label { margin-bottom: 8px; }
.buff-mini .buff-chks { gap: 0 14px; }
.buff-mini .buff-chks label.chk { margin: 4px 0; font-size: 12px; }
.buff-mini .buff-bar { min-height: 0; margin-top: 8px; padding-top: 8px; }
.buff-mini .jb-dope { margin: 8px 0 0; }
.buff-mini .buff-msg { margin-top: 8px; }
/* 부스터·샤프아이즈·쉐파·크리티컬 거울. 원본(B 카드)은 세 세로단으로 펴 놓지만
   여기는 320px 한 칸이라 세로로 쌓고 크리티컬 두 칸만 2열로 붙인다.
   점선은 "여기부터는 데이터가 아니라 직접 켜는 것" 이라는 경계다. */
.buff-mini .bmini-grp {
  margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--line-soft);
}
.buff-mini .bmini-grp label.chk { margin: 5px 0; font-size: 12px; }
.buff-mini .bmini-grp label.chk .dim { font-size: 11px; }
.buff-mini .bmini-grp .indent { margin-left: 20px; }
.buff-mini .bmini-grp .grid2 { gap: 0 8px; }
.buff-mini .bmini-grp .grid2 label { margin-bottom: 6px; font-size: 11px; }
.buff-mini .bmini-grp .grid2 input { padding: 6px 8px; font-size: 13px; }
.buff-mini .bmini-crit { margin-top: 6px; }
/* 구획 제목 — 카드를 셋으로 가른다(공통 / 직업 전용 / 합계) */
.jb-sec {
  margin: 14px 0 6px; padding-top: 10px; border-top: 1px solid var(--line-soft);
  font-family: var(--font-display); font-size: 12px; font-weight: 700;
  letter-spacing: -.01em; color: var(--accent-2-text);
}
.card-body > .jb-sec:first-child { margin-top: 0; padding-top: 0; border-top: none; }

/* ── 직업 전용 버프 목록 ───────────────────────────────────────────────── */
/* 설명 산문을 뺀 만큼(2026-08-25) 남은 수치·이름을 읽기 편한 크기로 키웠다. */
.jb-list { display: flex; flex-direction: column; gap: 8px; }
.jb-row {
  padding: 8px 10px; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  background: var(--panel);
}
.jb-row.on { border-color: var(--accent); background: var(--accent-soft); }
.jb-row.cov { background: transparent; }
.jb-head { display: flex; align-items: center; gap: 6px; }
.jb-tog {
  display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0;
  margin: 0; cursor: pointer; font-size: 15px; font-weight: 600; color: var(--text);
}
.jb-tog.off { cursor: default; }
.jb-tog input { width: auto; flex: none; accent-color: var(--accent-deep); }
/* 아이콘은 픽셀아트라 확대해도 뭉개지면 안 된다 — pixelated 유지 */
.jb-ic { width: 32px; height: 32px; flex: none; object-fit: contain; image-rendering: pixelated; }
.jb-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.jb-badge {
  flex: none; padding: 1px 5px; border-radius: 8px; font-size: 10px; font-weight: 700;
  color: var(--accent-text); background: var(--accent-soft);
}
.jb-badge.na { color: var(--muted); background: var(--line-soft); }
.jb-lv { flex: none; width: 84px; padding: 3px 4px; font-size: 12px; }
.jb-eff { margin: 4px 0 0; font-size: 14px; line-height: 1.45; color: var(--muted); }
.jb-row.on .jb-eff { color: var(--text); }

/* S(아이템 검색)는 E 와 같은 높이를 통째로 쓴다 — 결과 목록이 남는 높이를
   전부 먹고, 넘치면 그 안에서만 스크롤한다. 결과가 적어도 카드는 안 쪼그라든다
   (renderItemResults 가 늘 안내문이라도 채워 넣는다). */
.search-card { display: flex; flex-direction: column; }
.search-card > .card-body { flex: 1 1 auto; display: flex; flex-direction: column; min-height: 0; }
.search-card #item-results { flex: 1 1 0; min-height: 220px; max-height: none; }
@media (max-width: 1199px) {
  /* 한 줄로 접히면 맞출 상대가 없다 — 예전처럼 적당한 높이로 자른다 */
  .search-card #item-results { flex: none; min-height: 0; max-height: 380px; }
}

/* 탄약(표창·화살·불릿) 줄 — 장비창 아래. 해당 무기를 들었을 때만 칸이 뜬다.
   둘 다 hidden 이면 위 여백만 남지 않게 :has 로 통째로 접는다. */
.ammo-set { margin-top: 12px; display: grid; grid-template-columns: 1fr; gap: 0; }
.ammo-set:not(:has(label:not([hidden]))) { display: none; }
.sub-h {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 13px; font-weight: 700; letter-spacing: -.01em; color: var(--accent-2-text);
}

/* ── 카드 ─────────────────────────────────────────────────────────────── */
/* 카드가 크림 바탕 위에 놓인 목재 판때기로 보이게 하는 자리다.
   --shadow-card 는 blur 0 · 아래 2px — 흐린 그림자와 달리 크림을 탁하게
   만들지 않으면서 "두께" 만 만든다. margin-bottom 14px 은 그대로 두되,
   아래 2px 이 다음 카드에 닿지 않게 여유가 충분하다. */
.card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  margin-bottom: 14px;
}
.inputs .card:last-child { margin-bottom: 0; }

/* 카드 제목줄 = 접기 버튼. 폼이 길어서 접을 수 있어야 화면이 정리된다. */
.card-head {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 13px 16px; background: none; border: 0; cursor: pointer;
  text-align: left; color: inherit; font: inherit;
}
/* 접히지 않는 제목줄(장비창·검색·상세) — <button> 이 아니라 <div> 다 */
.card-head.static { cursor: default; padding-right: 12px; }
.btn-ghost.tiny { padding: 4px 10px; font-size: 12px; }
.card-head h2 {
  margin: 0; flex: 1;
  font-family: var(--font-display); font-size: 15px; font-weight: 700;
  letter-spacing: -.01em;
}
/* 스킬창 제목줄의 「(남은 스킬포인트: N)」. AP 예산 줄(#ap-budget)과 같은 톤이다. */
.sw-sp {
  flex: none; font-size: 11px; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.sw-sp.over { color: var(--bad); font-weight: 700; }
.chev {
  flex: none; width: 9px; height: 9px; margin-right: 2px;
  border-right: 2px solid var(--faint); border-bottom: 2px solid var(--faint);
  transform: rotate(45deg) translate(-2px, -2px);
  transition: transform .15s ease;
}
.card.collapsed .chev { transform: rotate(-45deg) translate(-1px, 1px); }
.card-head:hover .chev { border-color: var(--accent); }
.card-body { padding: 0 16px 16px; border-top: 1px solid var(--line-soft); padding-top: 14px; }
.card.collapsed .card-body { display: none; }

/* ── 폼 ───────────────────────────────────────────────────────────────── */
.grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.grid2.narrow { max-width: 420px; }
.grid2 label, .card-body > label, .ammo-set > label, .field {
  display: flex; flex-direction: column; gap: 4px;
  font-size: 12px; color: var(--muted);
}
.card-body > label, .ammo-set > label, .field { margin-bottom: 10px; }
.indent { margin-left: 26px; }

input[type="number"], input[type="search"], input[type="text"], select {
  padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-family: var(--font-ui); font-size: 14px; color: var(--text);
  background: var(--panel); width: 100%;
  font-variant-numeric: tabular-nums;
}
select { cursor: pointer; }
input:focus, select:focus {
  outline: none; border-color: var(--accent-deep);
  box-shadow: 0 0 0 3px var(--accent-soft); /* 그림자가 아니라 포커스 링이다 */
}

label.chk {
  flex-direction: row !important; align-items: center; gap: 8px;
  font-size: 13px; color: var(--text); margin: 8px 0; display: flex; cursor: pointer;
}
label.chk input { width: auto; accent-color: var(--accent-deep); }

.slider-row { margin: 10px 0 4px; }
.slider-row label { font-size: 12px; color: var(--muted); }
.slider-row label b { font-family: var(--font-display); color: var(--accent-text); font-size: 14px; }
.slider-row input[type="range"] { width: 100%; accent-color: var(--accent-deep); margin-top: 4px; }

.hint { font-size: 12px; color: var(--muted); margin: 6px 0; line-height: 1.55; }

/* ── 스탯 표: AP / 장비(자동) / 수동 / 최종 4열 ───────────────────────────
   "장비" 열은 장비창이 채우는 읽기 전용 값, "수동" 열은 사용자가 직접 넣는
   보정치다. 둘을 갈라 놓아야 장비창을 안 쓰고 총공만 넣는 기존 방식이 산다. */
.stat-grid {
  display: grid; grid-template-columns: 38px minmax(0, 1fr) 46px minmax(0, 1fr) 56px;
  gap: 5px 6px; align-items: center; margin: 4px 0 12px;
}
/* 입력칸이 우측정렬이라 머리글도 우측정렬로 맞춘다 (padding 은 input 과 동일) */
.stat-grid .col-h {
  font-size: 11px; color: var(--faint); text-align: right; padding-right: 10px;
  letter-spacing: .02em;
}
/* "장비"·"최종" 열은 input 이 아니라 텍스트라 안쪽 패딩이 없다 */
.stat-grid .col-h:nth-child(4), .stat-grid .col-h:nth-child(6) { padding-right: 2px; }
.stat-grid .stat-k {
  font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--muted);
}
.stat-grid input { text-align: right; padding-left: 4px; padding-right: 6px; }
.stat-grid .stat-a {
  text-align: right; padding-right: 2px;
  font-size: 13px; color: var(--faint);
  font-variant-numeric: tabular-nums;
}
.stat-grid .stat-a.on { color: var(--good); font-weight: 700; }
.stat-grid .stat-f {
  text-align: right; padding-right: 2px;
  font-size: 14px; font-weight: 700; color: var(--accent-text);
  font-variant-numeric: tabular-nums;
}
/* 총공·명중 칸 밑에 붙는 "장비 자동 +N" 꼬리표 */
.auto-note { font-size: 11px; color: var(--good); font-variant-numeric: tabular-nums; }
/* 레벨 칸 밑의 AP 예산 줄. 평소엔 강조색, 초과일 때만 빨강 —
   초과는 예전 빌드를 불러왔을 때만 잠깐 뜬다(입력은 그 자리에서 깎인다). */
#ap-budget { color: var(--accent-text); }
#ap-budget.over { color: var(--bad); font-weight: 700; }
/* 예산 상한에 걸려 값이 잘린 칸 — 말없이 바뀌면 오타로 오해하므로 1초 강조 */
.stat-grid input.ap-cap {
  border-color: var(--bad); background: var(--bad-soft);
  transition: background .15s ease, border-color .15s ease;
}

/* ── 알림 ─────────────────────────────────────────────────────────────── */
.notice-warn {
  background: var(--warn-bg); color: var(--warn-text);
  border: 1px solid var(--warn-line); border-radius: var(--radius-sm);
  padding: 11px 13px; margin: 0 0 14px; font-size: 13px; line-height: 1.6;
}

/* ── 버튼 ─────────────────────────────────────────────────────────────── */
.btn {
  background: var(--accent-deep); color: var(--on-accent); border: 1px solid var(--accent-deep);
  border-radius: var(--radius-sm); padding: 9px 18px;
  font-family: var(--font-display); font-size: 13px; font-weight: 700; cursor: pointer;
}
.btn:hover { background: var(--accent-text); border-color: var(--accent-text); }
.btn-ghost {
  background: var(--panel); color: var(--text); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 14px;
  font-family: var(--font-display); font-size: 13px; cursor: pointer;
}
.btn-ghost:hover { border-color: var(--accent); color: var(--accent-text); }

/* ── 검색 드롭다운 (떠 있는 층이라 --shadow-pop 으로 아래 글자와 갈라 놓는다) ── */
.search-wrap { position: relative; margin-bottom: 10px; }
.dropdown {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 30;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius-sm);
  max-height: 300px; overflow-y: auto;
  box-shadow: var(--shadow-pop);
}
.dropdown .opt {
  display: flex; align-items: center; gap: 8px; padding: 7px 11px; cursor: pointer;
  font-size: 13px;
}
.dropdown .opt:hover, .dropdown .opt.hover { background: var(--accent-soft); }
.dropdown .opt img { width: 24px; height: 24px; object-fit: contain; }
.dropdown .opt .meta {
  color: var(--muted); font-size: 11px; margin-left: auto; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.picked {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 11px; margin-bottom: 10px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm); font-size: 13px;
}
.picked b { font-family: var(--font-display); }
.picked img { width: 28px; height: 28px; object-fit: contain; }
.picked .meta { color: var(--muted); font-size: 12px; font-variant-numeric: tabular-nums; }
.picked .clear {
  margin-left: auto; cursor: pointer; color: var(--muted);
  border: 0; background: none; font-size: 15px; line-height: 1; padding: 2px 4px;
}
.picked .clear:hover { color: var(--bad); }

/* ── 결과 카드 + 탭 ───────────────────────────────────────────────────── */
/* overflow:hidden 을 쓰지 않는다 — 장비 비교 탭의 검색 드롭다운이 카드 밖으로
   내려가면 잘리기 때문. 모서리는 자식들이 알아서 안쪽에 머문다. */
.result-card { margin-bottom: 0; }
.tabs {
  display: flex; gap: 2px; padding: 0 8px;
  border-bottom: 1px solid var(--line);
  /* overflow-x 만 auto 로 두면 overflow-y 가 자동으로 auto 가 되어 1px 짜리
     세로 스크롤바가 생긴다 — 명시적으로 hidden 을 박아 막는다. */
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin;
}
.tabs .tab {
  flex: none; background: none; border: 0;
  padding: 13px 14px; cursor: pointer;
  font-family: var(--font-display); font-size: 13px; font-weight: 400;
  color: var(--muted); white-space: nowrap;
}
.tabs .tab:hover { color: var(--text); }
/* 활성 표시는 border 대신 inset 그림자 — 박스 높이를 안 늘려서 스크롤을 안 만든다.
   ★ 밑줄은 --accent 가 아니라 --accent-deep 이다. 상단 탭줄은 상단바(--head-bg)
     위에 얹히는데 #c8761f 는 그 위에서 2.87:1 이라 비-텍스트 기준 3:1 에 못 미친다.
     굵기도 2px → 3px 로 올려 크림 위에서 확실히 잡히게 했다.
   ★ 색만으로 알리지 않는다 — 글자색(--accent-text)과 굵기(700)가 함께 바뀐다. */
.tabs .tab.active {
  color: var(--accent-text); font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--accent-deep);
}

/* 데이터 전문 안쪽 하위 탭 — 알약형으로 갈라 놓아 상위 탭과 안 헷갈리게 */
.tabs.sub {
  border-bottom: 0; padding: 0; gap: 6px; margin-bottom: 12px;
}
.tabs.sub .tab {
  border: 1px solid var(--line); border-radius: 999px;
  /* 알약이 놓이는 바닥(.tab-body)이 --panel 이라 알약도 --panel 이면 테두리만
     남아 안 보인다. 한 단 어두운 --panel-soft 를 깔아 "끈 알약" 을 세운다. */
  padding: 5px 13px; margin: 0; font-size: 12px; background: var(--panel-soft);
}
.tabs.sub .tab.active {
  background: var(--accent-soft); border-color: var(--accent-line); color: var(--accent-text);
  /* 알약 안에서는 밑줄을 예전 두께(2px)로 되돌린다 — 상위 탭줄에서 3px 로 올린 게
     여기까지 물려 내려오면 작은 알약이 아래만 두껍게 눌린 것처럼 보인다. */
  box-shadow: inset 0 -2px 0 var(--accent-deep);
}

.tab-body { display: none; padding: 18px 20px 20px; }
.tab-body.active { display: block; }
@media (max-width: 560px) { .tab-body { padding: 14px; } }
/* 캐릭터 정보 탭만 카드 밖에 있다 — 자기 패딩을 쓰지 않는다 */
#tab-char { padding: 0; }

/* ══════════ 장비창 ══════════════════════════════════════════════════════
   메이플 장비 인벤토리를 흉내낸 격자. 남의 CSS 를 가져오지 않고 grid-template-
   areas 로 몸 모양 배치를 직접 그린다.
   1열 = 반지 4칸, 2열 = 액세서리(훈장·펜던트·벨트), 3~5열 = 방어구/무기.
   데이터가 아직 없는 부위(벨트 등)도 칸은 만든다 — 나중에 데이터만 채운다. */
/* 배치는 사용자가 준 목표 이미지 그대로다 —
   maeran_optimizer\장비창 디자인.jpg / data\ref_equip_window.md (5열 × 6행).
   빈 칸(.)이 많은 십자 모양이라 게임 장비창처럼 읽힌다. */
.equip-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  grid-template-areas:
    ".     hat    .       .       ."
    "medal face   .       ring2   ring3"
    ".     .      eye     earring shoulder"
    "cape  top    pendant weapon  shield"
    "glove bottom belt    ring1   ring4"
    ".     .      shoes   .       .";
  gap: 6px;
  max-width: 360px;
  /* 카드가 360px 보다 넓어도 격자만은 항상 카드 안 가운데에 둔다 (격자 한정, 글은 왼쪽 그대로) */
  margin-inline: auto;
}
.equip-slot {
  grid-area: var(--area);
  position: relative;
  aspect-ratio: 1 / 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  padding: 2px;
  background: var(--panel-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-display);
  font-size: 12px; line-height: 1.2; color: var(--muted);
  text-align: center; word-break: keep-all;
  overflow: hidden;
}
.equip-slot:hover { border-color: var(--accent); color: var(--accent-text); }
.equip-slot.filled { background: var(--accent-soft); border-color: var(--accent-line); color: var(--text); }
.equip-slot.filled:hover { border-color: var(--accent); }
.equip-slot img { width: 30px; height: 30px; object-fit: contain; }
/* 빈 칸이 유독 흐려 보이던 원인은 크기보다 색이었다 — --faint(0.38)라 획이 날아갔다.
   칸 크기는 그대로 두고 글자만 키우므로, 「어깨장식」처럼 긴 부위 이름은 두 줄로
   흘러야 한다. keep-all 이 한글 단어 안 줄바꿈을 막으므로 여기서만 풀어 준다. */
.equip-slot .slot-name {
  font-size: 11px; font-weight: 600; color: var(--muted);
  word-break: break-all; overflow-wrap: anywhere;
}
.equip-slot.filled .slot-name { color: var(--accent-text); }
/* 두손무기가 먹은 방패 칸, 한벌옷이 먹은 상·하의 칸 */
.equip-slot.blocked {
  cursor: not-allowed;
  background: repeating-linear-gradient(135deg, var(--line-soft) 0 6px, var(--line) 6px 12px);
  border-color: var(--line); color: var(--faint);
}
.equip-slot.blocked:hover { border-color: var(--line); color: var(--faint); }
.equip-slot .slot-x {
  position: absolute; top: 1px; right: 3px;
  font-size: 12px; line-height: 1; color: var(--muted);
  background: none; border: 0; padding: 1px 2px; cursor: pointer;
}
.equip-slot .slot-x:hover { color: var(--bad); }
/* 데이터가 0건인 부위 표시 (벨트 등 — 곧 채워진다) */
.equip-slot.nodata .slot-name::after { content: ' ·준비중'; color: var(--faint); }

.equip-total {
  margin-top: 10px; padding: 10px 12px;
  background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 12px; color: var(--muted); line-height: 1.8;
}
.equip-total b {
  font-family: var(--font-display); color: var(--text);
  font-variant-numeric: tabular-nums;
}
.equip-total .none { color: var(--faint); }

/* ── 아이템 검색 결과 ─────────────────────────────────────────────────── */
.filter-row.tight { margin: 10px 0; padding: 8px 10px; gap: 10px; }
.item-results { max-height: 320px; overflow-y: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.item-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 11px; cursor: pointer; font-size: 13px;
  border-bottom: 1px solid var(--line-soft);
}
.item-row:last-child { border-bottom: 0; }
.item-row:hover { background: var(--accent-soft); }
.item-row img { width: 26px; height: 26px; object-fit: contain; flex: none; }
.item-row .nm { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.item-row .meta {
  color: var(--muted); font-size: 11px; white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
.item-empty { padding: 12px; font-size: 12px; color: var(--faint); }

/* ── 스탯 공격력 (1 캐릭터 카드) ───────────────────────────────────────
   게임 스탯창과 눈으로 대조하는 줄이라 큰 수치 하나로 세운다.
   기조대로 메이플 폰트는 라벨과 이 큰 수치에만 쓴다. */
.stat-atk {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 10px;
  margin: 10px 0 12px; padding: 10px 12px;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  border-radius: var(--radius-sm);
}
.stat-atk .k {
  font: 700 12px/1.2 var(--font-display); color: var(--accent-text);
  letter-spacing: -.01em; white-space: nowrap;
}
.stat-atk .v {
  font: 700 20px/1.15 var(--font-display); color: var(--text);
  font-variant-numeric: tabular-nums; margin-left: auto;
}
.stat-atk .n { flex: 1 0 100%; font-size: 11px; color: var(--muted); }
.stat-atk .n:empty { display: none; }

/* ── 아이템 상세 ───────────────────────────────────────────────────────
   ★ 2026-08-24: 상시 카드(.detail-head/.detail-grid/.detail-actions)를 없앴다.
     아이템 상세는 팝업 하나(#item-modal)로 통일했고, 그 안은 인게임 정보창
     (.mw-tt — 이 파일 아래쪽 예외 구역)이 통째로 맡는다. 그래서 여기 있던
     "카드 안 스탯 격자" 규칙은 쓸 데가 없어져 지웠다. 팝업 껍데기 규칙은
     아래 「아이템 정보창 팝업」 절에 있다. */
.btn-danger {
  background: var(--panel); color: var(--bad); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 8px 14px;
  font-family: var(--font-display); font-size: 13px; cursor: pointer;
}
.btn-danger:hover { border-color: var(--bad); }

/* ── 통계 카드 ────────────────────────────────────────────────────────── */
.stat-row {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 10px; margin-bottom: 16px;
}
.stat-card {
  background: var(--panel-soft); border: 1px solid var(--line-soft);
  border-radius: var(--radius-sm); padding: 11px 13px;
}
.stat-card .k {
  font-size: 11px; color: var(--muted); margin-bottom: 3px;
  font-family: var(--font-display);
}
.stat-card .v {
  font-family: var(--font-display); font-size: 18px; font-weight: 700;
  line-height: 1.35; word-break: keep-all;
}
.stat-card .v small {
  font-family: var(--font-ui); font-size: 12px; font-weight: 400; color: var(--muted);
}
/* DPS·DPM 의 전제(1회 N초 · 공속 라벨)는 값 옆이 아니라 **아랫줄**이다 —
   옆에 붙으면 큰 숫자와 뒤엉켜 읽힌다. 격자는 align-items:stretch 라
   같은 줄의 여섯 칸이 가장 큰 칸에 맞춰 함께 늘어난다(들쭉날쭉해지지 않는다). */
.stat-card .v small.sub { display: block; margin-top: 2px; line-height: 1.3; }
.stat-card.warn { background: var(--warn-bg); border-color: var(--warn-line); }
.stat-card.warn .v { color: var(--warn-text); }

/* ══════════ N방컷 탭 ═════════════════════════════════════════════════════
   좌(넓은 쪽) = 결과(몬스터 칸 + 통계 카드 + 방컷표), 우 = 조건(스킬창·버프).
   가로로 갈라 두는 까닭: 조건 카드를 결과 위에 쌓으면 스킬창 높이만큼 결과가
   밀려 내려가 "결과 보려고 한참 스크롤" 하게 된다. 옆으로 세우면 결과가 늘
   화면 맨 위에 있고 조건도 같은 높이에서 바로 만질 수 있다. */
.kill-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) 320px;
  gap: 16px; align-items: start;
}
.kill-main { min-width: 0; }
.kill-side { min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.kill-side > .card { margin-bottom: 0; background: var(--panel-soft); }
.kill-side > .card > .card-body { padding-top: 12px; }
@media (max-width: 1080px) {
  /* 1단으로 접히면 순서를 다시 짠다:
       ① 몬스터 + 결과 통계 카드 (결과가 여전히 맨 위)
       ② 조건(스킬·버프) — 둘을 가로로 나란히
       ③ N방컷 확률표
     조건을 확률표 아래로 보내면 스킬 하나 바꾸려고 표 20줄을 지나야 한다.
     .kill-main 을 display:contents 로 녹여 그 안의 두 덩어리를 형제로 만든 뒤
     order 로 세운다. */
  /* align-items 를 stretch 로 되돌린다 — 위 grid 쪽 start 를 그대로 물려받으면
     세로 flex 에서는 "가로로 내용만큼만" 이 되어 통계 카드가 한 줄로 쪼그라든다. */
  .kill-layout { display: flex; flex-direction: column; gap: 14px; align-items: stretch; }
  .kill-main { display: contents; }
  .kill-top { order: 1; margin-bottom: 0; }
  .kill-side { order: 2; flex-direction: row; flex-wrap: wrap; }
  .kill-side > .card { flex: 1 1 280px; }
  #kill-table { order: 3; }
}

/* ── N방컷 탭 머리줄: 몬스터 고르는 칸 + 나머지 통계 카드 ─────────────────
   몬스터 칸은 드롭다운이 들어가 있어 넓어야 하고, 나머지는 숫자뿐이라
   좁아도 읽힌다. 그래서 균등 분배 대신 몬스터 쪽에 폭을 몰아준다. */
/* ★ 몬스터 칸 하한을 240 → 300 으로 올렸다(2026-08-25). 시안대로 카드 안이
   [84px 그림 | 이름·수치·속성] 2단이 되면서, 240px 에서는 오른쪽 칸에
   90px 밖에 안 남아 이름이 글자마다 접혔다. 300px 이면 150px 이 남아
   "후회의 수호대장" 이 한 줄, 속성 배지가 두 개씩 들어간다. */
.kill-top {
  display: grid; grid-template-columns: minmax(300px, 340px) minmax(0, 1fr);
  gap: 10px; align-items: start; margin-bottom: 16px;
}
/* 칸이 6개다 — 데미지 / 명중률 / 내명중·필요명중 / 기대방수 / DPS / DPM.
   auto-fit 에 맡기면 남는 폭에 따라 4+2 처럼 홀쭉한 꼬리줄이 생긴다(6 은
   4 로도 5 로도 안 떨어진다). 3열로 못 박아 늘 3×2 로 반듯하게 떨어뜨린다.
   한 줄 6칸은 안 쓴다 — 최대폭 1440 에서도 이 칸 폭이 700px 남짓이라
   6등분하면 110px, "1 ~ 932 ×1타" 가 세 줄로 접힌다. */
.kill-top #kill-summary {
  margin-bottom: 0;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
@media (max-width: 860px) {
  .kill-top { grid-template-columns: 1fr; }
}
/* 3열이 좁아지는 구간 둘은 2×3 으로 접는다. 3열을 고집하면 칸이 110px 까지
   쪼그라들어 "내 명중 / 필요명중(100%)" 이 석 줄로 접힌다.
   ① 1081~1220: 오른쪽 조건 사이드(320px)가 아직 붙어 있어 이 줄에 470px 도 안 남는다
      (1080 이하로 내려가면 사이드가 밑으로 빠지면서 오히려 넓어진다 — 그래서 하한이 있다).
   ② 560 이하: 폰 폭. */
@media (min-width: 1081px) and (max-width: 1220px) {
  .kill-top #kill-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .kill-top #kill-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.monster-card { display: flex; flex-direction: column; }
.monster-card .search-wrap { margin: 6px 0 8px; }
/* ── 선택된 몬스터 (시안: maeran_optimizer\몬스터 검색디자인 .jpg) ─────────
   가로 2단이다 — 왼쪽에 큰 도트 그림, 오른쪽에 이름 → 수치줄 → 속성 배지.
   "무엇을 때리는가" 가 이 카드의 전부라 그림과 이름에 무게를 몰아준다.
   수치줄은 이제 카드 안(.mob-stat)에 있다 — 아래 #monster-now 는 몹을 안 고른
   커스텀일 때만 나온다(speccalc.js syncMonsterNowVisibility).
   ✕ 는 흐름에서 빼(absolute) 좁은 오른쪽 칸의 폭을 안 먹게 하고, 오른쪽
   패딩으로 자리만 비워 둔다. */
.monster-card #monster-selected {
  position: relative;
  margin-bottom: 8px; padding: 8px 26px 8px 8px;
  align-items: center; gap: 9px;
}
.monster-card .mob-pic {
  flex: none; width: 84px; height: 84px;
  display: flex; align-items: center; justify-content: center;
}
/* 원본이 37×26 같은 작은 스프라이트라 키우면 계단이 진다 — 보간을 끄고 도트를
   그대로 살린다(시안도 그 모습이다). 아이콘 크기·비율은 몹마다 제각각이라
   박스를 못 박고 그 안에서 contain 으로 가운데 정렬한다 — 큰 몹이 카드를
   밀어내면 안 되고, 아이콘이 아예 없어(visibility:hidden 폴백) 안 그려져도
   빈 자리가 그대로 남아 오른쪽 칸이 흔들리지 않는다. */
.monster-card .mob-pic .mob-ico {
  width: auto; height: auto; max-width: 100%; max-height: 100%;
  object-fit: contain; image-rendering: pixelated;
}
.monster-card .mob-info {
  flex: 1 1 auto; min-width: 0;
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
}
.monster-card .mob-name {
  font-family: var(--font-display); font-size: 17px; font-weight: 700;
  line-height: 1.25; word-break: keep-all; overflow-wrap: anywhere;
}
/* 두 줄로 접히는 건 괜찮지만 끊기는 자리가 문제다. keep-all 이 없으면 한글은
   글자 사이 어디서나 끊겨 「회 / 피 40」 이 된다 — 낱말은 붙여 두고, 항목 안의
   빈칸은 JS 쪽에서 줄바꿈 없는 공백으로 넣는다(monsterStatLine). */
.monster-card .mob-stat {
  font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--muted);
  font-variant-numeric: tabular-nums; line-height: 1.5; word-break: keep-all;
}
.monster-card .mob-badges { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 1px; }
.monster-card .mob-badges .elem-badge { margin-right: 0; }
.monster-card #monster-selected .clear { position: absolute; top: 4px; right: 3px; margin: 0; }
.monster-card .v { font-size: 15px; }
.monster-card .v small {
  display: block; margin-top: 2px;
  font-family: var(--font-ui); font-size: 11px; font-weight: 400; color: var(--muted);
  font-variant-numeric: tabular-nums;
}
.monster-card #monster-custom { margin-top: 9px; }
.monster-card #monster-custom > summary {
  cursor: pointer; font-size: 12px; color: var(--accent-text); list-style: none;
}
.monster-card #monster-custom > summary::-webkit-details-marker { display: none; }
.monster-card #monster-custom > summary::before { content: '＋ '; }
.monster-card #monster-custom[open] > summary::before { content: '－ '; }
.monster-card #monster-custom .grid2 { margin-top: 8px; gap: 8px 8px; }
.monster-card #monster-custom .grid2 label.wide { grid-column: 1 / -1; }
.monster-card #monster-custom input { padding: 6px 8px; font-size: 13px; }

/* ── 몬스터 카드 머리줄 + 미선택 안내 (참조: 몬스터 검색 1.jpg) ─────────── */
.monster-card .mob-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.monster-card .mob-head .k { margin: 0; }
.mob-mini {
  flex: none; padding: 3px 11px; border: 1px solid var(--accent-line); border-radius: 999px;
  background: var(--panel); color: var(--accent-text); font-family: var(--font-ui); font-size: 12px; cursor: pointer;
}
.mob-mini:hover { background: var(--accent-soft); }
.mob-empty {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 10px; padding: 18px 6px 16px; text-align: center;
}
.mob-empty p { margin: 0; color: var(--faint); font-size: 13px; }

/* ══════════ 몬스터 선택 팝업 (#mob-modal) ═════════════════════════════════
   참조: maeran_optimizer\몬스터검색 2.jpg. 겹치는 층이라 .modal-box 의
   --shadow-pop 만 쓰고 더 얹지 않는다. 필터 줄은 라벨 폭을 44px 로
   맞춰 왼쪽 끝이 세로로 딱 떨어지게 한다.
   ★ 크림 톤 안에서 층이 보이도록 바탕을 세 단으로 쌓았다 —
     장막(--overlay) < 창 바탕(--panel) < 결과 격자 카드(--panel-soft).
     결과 카드만 한 단 어두워야 격자가 눈에 잡힌다(창과 같은 색이면 카드
     테두리 하나로만 갈려 목록이 아니라 벽지처럼 보인다). */
/* ★ .modal-box{max-width:480px} 가 이 파일 아래쪽에 있어 클래스 하나로는 진다 —
   둘을 겹쳐 적어 특이도로 이긴다(파일 순서에 기대지 않기 위함). */
.modal-box.mob-box {
  /* 디버프 줄(체크박스 11개)이 한 줄에 들어가는 폭이다 — 참조 화면과 같다 */
  max-width: 800px; position: relative;
  max-height: calc(100vh - 32px); display: flex; flex-direction: column;
}
.mob-box h2 { margin: 0 0 12px; font-size: 17px; }
.mob-x {
  position: absolute; top: 12px; right: 14px; width: 28px; height: 28px;
  border: 0; background: none; color: var(--faint); font-size: 15px; cursor: pointer; border-radius: 6px;
}
.mob-x:hover { background: var(--bg); color: var(--text); }

/* 검색칸은 창 바탕(--panel)보다 한 단 어둡게 파 넣는다 — 같은 색이면 호박색
   테두리 하나만 떠 있어 "칸" 이 아니라 선 하나로 보인다. */
#mob-q {
  width: 100%; margin: 0; padding: 9px 12px;
  border: 1px solid var(--accent-line); border-radius: var(--radius-sm);
  background: var(--panel-soft);
  font-family: var(--font-ui); font-size: 14px;
}
#mob-q:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 2px var(--accent-soft); }

/* 항목 간 gap 이 2px 인 건 칩(.mob-chk)이 좌우 8px padding 을 이미 품어서다 —
   예전 10px 을 그대로 두면 실제 간격이 26px 로 벌어져 한 줄이 넘친다.
   라벨(.mob-lab)은 44px 고정폭이라 칩 padding 만큼만 뒤로 밀린다(정렬 유지). */
.mob-line { display: flex; align-items: center; flex-wrap: wrap; gap: 2px; margin-bottom: 7px; }
.mob-line .mob-lab {
  flex: none; width: 44px; font-family: var(--font-display); font-size: 12px; color: var(--muted);
}
#mob-region { margin: 0; padding: 7px 10px; font-size: 13px; }

/* 검색칸 + 지역 셀렉트를 정확히 반반으로 나눈다.
   ★ min-width:0 이 핵심이다 — flex 항목의 기본 min-width 는 auto 라
   select 가 제 콘텐츠(가장 긴 지역 이름) 너비 아래로 안 줄어든다.
   그러면 검색칸만 찌부러져 반반이 깨진다.
   align-items:stretch 로 두 칸의 높이를 맞춘다(패딩이 서로 다르다). */
.mob-line.mob-search { gap: 8px; align-items: stretch; }
.mob-line.mob-search > #mob-q,
.mob-line.mob-search > #mob-region { flex: 1 1 0; min-width: 0; }
/* 좁은 화면에서 반반을 고집하면 둘 다 못 읽는다 — 세로로 쌓는다. */
@media (max-width: 560px) {
  .mob-line.mob-search > #mob-q,
  .mob-line.mob-search > #mob-region { flex: 1 1 100%; }
}
/* 레벨 칸엔 칩이 없어 padding 보정분이 없다 — 옛 간격(10px)을 그대로 되돌린다. */
.mob-line.lv { gap: 4px 10px; }
.mob-line.lv input { flex: none; width: 74px; margin: 0; padding: 6px 9px; font-size: 13px; }
.mob-line.lv .tilde { color: var(--faint); }

/* 체크박스는 네이티브를 감추고 네모를 직접 그린다 — 켠 항목이 속성색 알약
   상자로 감싸져야 하는데(디자인) accent-color 로는 그게 안 된다. 색은 인라인
   --c 로 받는다(표를 CSS 와 HTML 에 두 벌 두지 않기 위함).
   ★ 끈 상태에도 켠 상태와 똑같은 padding·1px 테두리를 준다(테두리는 투명).
   안 그러면 체크할 때마다 상자 두께만큼 항목 폭이 늘어, 한 줄에 놓인 다른
   항목들이 통째로 밀려 줄 전체가 들썩인다. */
.mob-chk {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 2px 8px; border-radius: 999px; border: 1px solid transparent; background: transparent;
  font-family: var(--font-ui); font-size: 12px; color: var(--muted); cursor: pointer; user-select: none;
  /* ★ 굵기를 끈 상태에도 미리 준다. 켤 때만 600 으로 올리면 글자 폭이 그만큼
     늘어 한 줄의 다른 항목들이 밀린다 — padding·테두리를 맞춰 놓고도 흔들리던
     원인이 이것이었다. 켠 표시는 색과 테두리가 맡는다. */
  font-weight: 600;
}
/* 켠 항목 = 속성색 알약. 배경·글자색은 새 hex 를 박지 않고 --c 에서 파생시킨다.
   글자는 65% 짙게 섞는다 — 80% 로는 번개(#fdd835)가 옅은 배경 위에서 3:1 대라
   12px 소형 글자 기준(4.5:1)에 못 미쳤다. 다른 속성색은 조금 더 짙어질 뿐이다. */
.mob-chk:has(input:checked) {
  border-color: var(--c, var(--accent));
  background: color-mix(in srgb, var(--c, var(--accent)) 12%, #fff);
  color: color-mix(in srgb, var(--c, var(--accent)) 65%, #000);
}
.mob-chk input { position: absolute; opacity: 0; width: 0; height: 0; }
.mob-chk i {
  width: 14px; height: 14px; flex: none; border-radius: 3px;
  border: 1.5px solid var(--faint); background: var(--panel);
  display: inline-flex; align-items: center; justify-content: center;
}
.mob-chk input:checked + i { background: var(--c, var(--accent-deep)); border-color: var(--c, var(--accent-deep)); }
.mob-chk input:checked + i::after {
  content: ''; width: 4px; height: 8px; margin-top: -2px;
  border: solid var(--on-accent); border-width: 0 2px 2px 0; transform: rotate(45deg);
}
/* ★ 번개(--c:#fdd835)만 배경과 명도가 거의 같아, 켠 네모는 흰 체크가 노랑 위에서
   1.4:1 로 사라진다. 속성색은 데이터가 지닌 뜻이라 색상(노랑)은 그대로 두고
   체크만 흰색 대신 진갈색(#4a3600)으로 바꾼다.
   끈 네모의 짙은 노랑(#a8850a) 테두리 보정은 지웠다 — 끈 네모가 이제 속성색이
   아니라 중립 회색(--faint)이라 명도 문제 자체가 없다.
   칩 글자색도 color-mix(80%, #000) 이라 노랑이 갈색으로 내려앉아 별도 보정이
   필요 없다. data-k="L" 은 약점/반감/면역 세 줄 모두에 붙어 규칙 하나로 다 걸린다. */
.mob-chk input[data-k="L"]:checked + i::after { border-color: #4a3600; }
/* 포커스 링은 네모가 아니라 칩 전체에 두른다 — 칩이 생긴 지금은 그쪽이 초점의
   실제 범위(라벨 전체가 클릭 대상)와 맞는다. */
.mob-chk:has(input:focus-visible) { box-shadow: 0 0 0 2px var(--accent-soft); }
.mob-chk .mob-help {
  width: 13px; height: 13px; border-radius: 50%; background: var(--bg); color: var(--muted);
  font-size: 9px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center;
}
.mob-hint { font-size: 11px; color: var(--accent-text); font-variant-numeric: tabular-nums; }

.mob-foot { display: flex; align-items: center; justify-content: space-between; margin: 10px 0 5px; }
.mob-count { font-size: 11px; color: var(--faint); font-variant-numeric: tabular-nums; }
.mob-reset { border: 0; background: none; color: var(--muted); font-size: 11px; cursor: pointer; padding: 0; }
.mob-reset:hover { color: var(--accent-text); text-decoration: underline; }

/* 결과 격자 — 2열 고정, 여기만 스크롤한다(필터 줄은 늘 보여야 한다) */
.mob-grid {
  flex: 1; min-height: 120px; max-height: 42vh; overflow-y: auto;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-content: start;
  padding: 2px; margin: 0 -2px;
}
.mob-none { grid-column: 1 / -1; margin: 22px 0; text-align: center; color: var(--faint); font-size: 13px; }
.mob-card {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--panel-soft); cursor: pointer;
}
.mob-card:hover { border-color: var(--accent); background: var(--accent-soft); }
.mob-card .mob-ico { width: 40px; height: 40px; flex: none; object-fit: contain; image-rendering: pixelated; }
.mob-card .t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.mob-card .t b { font-family: var(--font-display); font-size: 13px; overflow-wrap: anywhere; }
.mob-card .t small { font-size: 11px; color: var(--muted); font-variant-numeric: tabular-nums; }

@media (max-width: 560px) {
  .mob-grid { grid-template-columns: 1fr; }
  .mob-line .mob-lab { width: 100%; }
}

/* ══════════ 스킬창 (인게임 스킬 인벤토리 본뜸) ════════════════════════════
   참조: maeran_optimizer\스킬창디자인.jpg + data\ref_skill_window.md
   가져온 것 — 차수 탭 I~IV / 직업 배너 / [아이콘][이름·레벨] 목록 / 커스텀 스크롤바.
   뺀 것 — SKILL POINT·매크로·닫기(X). 계산과 무관하다.
   ★ 2026-08-25: 색을 원본의 연한 하늘색에서 목재 톤으로 갈아 끼웠다.
     까닭은 예전 「선택 강조만 우리 강조색으로」 와 같다 — 사이트 톤이 우선이다.
     크림 페이지 한가운데 파란 창이 서 있으면 그것만 딴 사이트에서 오려 붙인
     것처럼 뜬다. 창의 **모양**(차수 탭·배너·목록·굵은 스크롤바)이 게임 스킬창을
     흉내 내는 것이지 색이 그 일을 하는 게 아니라, 색만 바꿔도 정체는 남는다.
   글꼴은 이 구역만 Dotum 계열이다(게임 창의 작은 픽셀 느낌).
   ★ 이 창의 팔레트는 여기서 닫는다 — 바깥 토큰을 그대로 쓰면 창이 카드와
     같은 색이 되어 "창" 으로 안 보인다. 그래서 --sw-* 로 한 단씩 더 진하게 뽑되
     값 자체는 :root 의 목재 계열에서 가져왔다. */
.skillwin {
  --sw-edge: #9bb3c8;  /* 창 테두리·칸 테두리 */
  --sw-bar:  #dbe7f1;  /* 차수 탭줄·스크롤 트랙·아이콘칸 바탕 */
  --sw-face: #eef4f9;  /* 목록 바탕 — 게임 스킬창의 하늘색 */
  --sw-ink:  #2f4a63;  /* 창 안 라벨 글자 */
  --sw-bar-h: #cbdcea; /* 차수 탭 hover */
  --sw-face-h: #e2edf6;/* 목록 줄 hover */
  --sw-dim:  #9fb2c2;  /* 꺼진 것(disabled) */

  border: 1px solid var(--sw-edge); border-radius: var(--radius-sm); overflow: hidden;
  background: var(--sw-face);
  font-family: 'Dotum', '돋움', 'Apple SD Gothic Neo', var(--font-ui), sans-serif;
}

/* 차수 탭 — 스킬 id 로 1~4차를 가른다(speccalc.js skillTier). 그 차수에 스킬이
   없으면 disabled 로 죽인다. */
.sw-tiers {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--sw-bar); border-bottom: 1px solid var(--sw-edge);
}
.sw-tier {
  appearance: none; border: 0; border-right: 1px solid var(--sw-edge);
  background: transparent; cursor: pointer;
  padding: 6px 0; font: 700 12px/1.2 var(--font-display);
  letter-spacing: .06em; color: var(--sw-ink);
}
.sw-tier:last-child { border-right: 0; }
.sw-tier:hover:not(:disabled) { background: var(--sw-bar-h); }
.sw-tier.on { background: var(--accent-deep); color: var(--on-accent); }
.sw-tier:disabled { color: var(--sw-dim); cursor: default; }

/* 직업 배너 — 지금 어떤 직업의 스킬을 보고 있는지 */
.sw-banner {
  padding: 7px 10px; background: var(--accent-soft);
  border-bottom: 1px solid var(--sw-edge);
  font: 700 12px/1.35 var(--font-display); color: var(--accent-text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* 목록 — 안에서만 스크롤한다. 높이를 못 박아야 카드 높이가 직업마다 안 튄다.
   (한 직업의 한 차수에 스킬이 3개일 때도, 12개일 때도 창 크기가 같다.) */
.sw-list {
  height: 288px; overflow-y: auto; overflow-x: hidden; background: var(--sw-face);
}
.sw-list::-webkit-scrollbar { width: 14px; }
.sw-list::-webkit-scrollbar-track { background: var(--sw-bar); border-left: 1px solid var(--sw-edge); }
.sw-list::-webkit-scrollbar-thumb {
  background: var(--accent); border: 1px solid var(--accent-deep); border-radius: 2px;
}
.sw-list { scrollbar-width: thin; scrollbar-color: var(--accent) var(--sw-bar); }

/* 한 줄 = [아이콘][스킬명][레벨 입력칸 / 마스터 레벨].
   게임은 ▲ 로 1씩 올리지만 우리는 계산기라 숫자를 바로 넣는 쪽이 실용적이다. */
.sw-row {
  display: grid; grid-template-columns: 34px minmax(0, 1fr) 52px 30px 22px;
  align-items: center; gap: 8px;
  width: 100%; padding: 5px 8px; text-align: left;
  border-bottom: 1px solid var(--line-soft);
}
/* [M] = 남은 SP 안에서 마스터까지 올리는 버튼. 게임 스킬창의 ▲ 자리에 해당한다 —
   차수 탭(.sw-tier)과 같은 목재 계열로 맞춰 새 색을 만들지 않는다. */
.sw-row .sw-m {
  width: 20px; height: 20px; padding: 0; justify-self: end;
  appearance: none; cursor: pointer; border-radius: 2px;
  border: 1px solid var(--sw-edge); background: var(--sw-bar); color: var(--sw-ink);
  font: 700 11px/1 var(--font-display);
}
.sw-row .sw-m:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); color: var(--on-accent); }
.sw-row .sw-m:disabled { color: var(--sw-dim); background: var(--sw-face); cursor: default; }
.sw-row.atk { cursor: pointer; }        /* 공격 스킬 줄만 눌러서 고를 수 있다 */
.sw-row:hover { background: var(--sw-face-h); }
/* 지금 N방컷 탭에서 때리는 데 쓰는 스킬 — 어느 줄이 계산에 걸려 있는지 표시 */
.sw-row.on { background: var(--accent-soft); }
.sw-row.on .sw-name { font-weight: 700; color: var(--accent-text); }
.sw-row.learned .sw-name { color: var(--text); }
.sw-row .sw-lv-in {
  padding: 3px 5px; font-size: 12px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.sw-row .sw-max { font-size: 10px; color: var(--faint); font-family: var(--font-ui); }
/* 공격 스킬이 아닌 것(마스터리·버프)은 이름을 조금 흐리게 — 목록에서 갈라 보이게 */
.sw-row:not(.atk) .sw-name { color: var(--muted); }
.sw-row img {
  width: 32px; height: 32px; image-rendering: pixelated;
  background: var(--sw-bar); border: 1px solid var(--sw-edge); border-radius: 3px;
}
/* 아이콘이 없는 스킬(시트 전용 — 스피어 버스터·드래곤 쓰레셔 등)의 빈 칸 */
.sw-row .sw-noicon {
  width: 32px; height: 32px; border: 1px solid var(--sw-edge); border-radius: 3px;
  background: var(--sw-bar); display: grid; place-items: center;
  font-size: 14px; color: var(--faint);
}
.sw-name {
  font-size: 12px; line-height: 1.3;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sw-lv {
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
  font-size: 11px; color: var(--muted);
}
.sw-tag { font-size: 10px; color: var(--faint); }
.sw-empty { padding: 16px 10px; font-size: 12px; color: var(--muted); text-align: center; }

/* N방컷 탭의 레벨 줄 (슬라이더 + 숫자칸) */
.sw-foot {
  display: grid; grid-template-columns: auto minmax(0, 1fr) 62px;
  align-items: center; gap: 8px;
  padding: 7px 9px; background: var(--panel-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.sw-foot-k { font: 700 11px/1 var(--font-display); color: var(--muted); }
.sw-foot input[type="range"] { width: 100%; accent-color: var(--accent-deep); margin: 0; }
.sw-foot input[type="number"] { padding: 4px 6px; font-size: 13px; text-align: right; }
.skill-lv-row { margin-top: 8px; }

/* N방컷 탭의 스킬 드롭다운 — 몬스터 칸과 같은 방식 + 아이콘 */
.skill-pick { display: flex; align-items: center; gap: 8px; }
.skill-pick img {
  width: 32px; height: 32px; flex: none; image-rendering: pixelated;
  background: var(--line-soft); border: 1px solid var(--line); border-radius: 3px;
}
/* 캐릭터 설정값을 덮어썼을 때의 안내 + 되돌리기 */
#skill-level-note .ovr { color: var(--warn-text); font-weight: 700; }
#skill-level-note button {
  margin-left: 6px; padding: 1px 7px; font-size: 11px; cursor: pointer;
  background: var(--panel); border: 1px solid var(--line); border-radius: 999px;
  font-family: var(--font-ui); color: var(--text);
}
#skill-level-note button:hover { border-color: var(--accent); color: var(--accent-text); }

/* ── 표: 숫자가 빽빽하므로 시스템 폰트 + 고정폭 숫자 ───────────────────── */
.tbl-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius-sm); }
table.tbl {
  border-collapse: collapse; width: 100%; font-size: 13px;
  font-family: var(--font-ui); font-variant-numeric: tabular-nums;
}
.tbl th, .tbl td {
  border-bottom: 1px solid var(--line-soft); padding: 7px 10px;
  text-align: right; white-space: nowrap;
}
.tbl tbody tr:last-child td { border-bottom: 0; }
/* 줄무늬는 아주 옅게(--panel > --panel-soft, 명도차 한 단)만 준다. 숫자가
   빽빽한 표라 줄무늬가 진하면 칸마다 배경이 달라져 수치가 튀어 보인다.
   ★ 아래 :hover 와 .best 보다 먼저 적어야 한다 — 특이도가 같아 순서로 진다. */
.tbl tbody tr:nth-child(even) { background: var(--panel-soft); }
.tbl th {
  background: var(--panel-soft); color: var(--muted); font-weight: 600;
  position: sticky; top: 0; z-index: 1;
  border-bottom: 1px solid var(--line);
}
.tbl th:first-child, .tbl td:first-child { text-align: left; }
.tbl tbody tr:hover { background: var(--accent-soft); }
.tbl th.sortable { cursor: pointer; user-select: none; }
.tbl th.sortable:hover { color: var(--accent-text); }
.tbl td img { width: 22px; height: 22px; object-fit: contain; vertical-align: middle; margin-right: 5px; }
/* tbody 를 붙여 특이도를 줄무늬(:nth-child(even))와 같게 맞춘다 — 안 그러면
   짝수 줄이 최적해일 때 줄무늬가 이겨 초록 표시가 사라진다. */
.tbl tbody tr.best, .tbl tbody tr.best:hover { background: var(--good-soft); }
.tbl .bar {
  display: inline-block; height: 8px; background: var(--accent); border-radius: 2px;
  vertical-align: middle; margin-right: 6px; opacity: .8;
}

/* ── 스펙업 효율 표 안의 증가량 입력칸 ────────────────────────────────────────
   「올릴 항목」 칸에서 행 이름 뒤에 바로 붙어 앉는다("총공격력 +[  5]").
   ★ padding 을 표 기본 칸(7px 10px)보다 훨씬 작게 잡는 이유: 이 칸 하나 때문에
     행 높이가 튀면 입력칸 없는 행들과 줄이 어긋나 표가 들쭉날쭉해 보인다.
   ★ 색은 전부 토큰이다 — 크림/목재 팔레트라 하드코딩 색을 쓰면 혼자 뜬다. */
.tbl .mg-amt {
  width: 56px; padding: 1px 4px; margin-left: 2px;
  text-align: center; vertical-align: baseline;
  font: inherit; font-variant-numeric: tabular-nums;
  color: var(--text); background: var(--panel);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.tbl .mg-amt:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.tab-body h3 {
  font-family: var(--font-display); font-size: 14px; font-weight: 700;
  margin: 2px 0 4px;
}

.pos { color: var(--good); font-weight: 700; }
.neg { color: var(--bad); font-weight: 700; }

/* ── 배지 ─────────────────────────────────────────────────────────────── */
.elem-badge {
  display: inline-block; padding: 2px 8px; border-radius: 999px;
  font-size: 11px; margin-right: 4px;
  background: var(--line-soft); color: var(--muted);
}
/* ★ 반감/면역의 색을 맞바꿨다(2026-08-25, 시안). 때렸을 때 좋은 쪽이 초록,
   나쁜 쪽이 빨강이어야 읽힌다 — 면역은 아무리 때려도 1 이 뜨는 최악이라
   경고색, 반감은 그냥 덜 박히는 정도라 차분한 회색이다.
   (같은 클래스를 쓰는 #element-summary 의 "수동 지정"→회색 / "미검증"→빨강도
    이 뜻에 맞게 따라 바뀐다.) */
.elem-badge.weak { background: var(--good-soft); color: var(--good); }
.elem-badge.resist { background: var(--neutral-soft); color: var(--muted); }
.elem-badge.immune { background: var(--bad-soft); color: var(--bad); }
/* 보스 — 속성이 아니라 몹의 성격이라 색이 아니라 테두리로 가른다(새 색을 안 만든다) */
.elem-badge.boss { background: var(--panel); border: 1px solid var(--line); color: var(--text); font-weight: 700; }
.elem-note { font-size: 11px; color: var(--muted); }
#element-summary { margin-top: 6px; line-height: 1.9; }

.badge-warn {
  background: var(--warn-bg); color: var(--warn-text); border: 1px solid var(--warn-line);
  font-family: var(--font-ui); font-size: 11px; font-weight: 400;
  padding: 2px 9px; border-radius: 999px; vertical-align: middle;
}

/* ── 필터 줄 ──────────────────────────────────────────────────────────── */
.filter-row {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  margin-bottom: 14px; padding: 12px 14px;
  background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
}
.filter-row label { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); }
.filter-row label.chk { margin: 0; }
.filter-row select, .filter-row input { width: auto; }

/* ── 비교 2단 ─────────────────────────────────────────────────────────── */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 12px; }
@media (max-width: 700px) { .compare-grid { grid-template-columns: 1fr; } }
.compare-col { border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 12px 14px; }
.compare-col h3 { margin: 0 0 8px; }

/* ── CONFIG 모달 (겹치는 층) ──────────────────────────────────────────── */
.modal {
  position: fixed; inset: 0; background: var(--overlay); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal[hidden] { display: none; } /* display:flex 가 [hidden] UA 스타일을 이겨서 명시 필요 */
.modal-box {
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 20px 22px; max-width: 480px; width: 100%;
  box-shadow: var(--shadow-pop);
}
.modal-box h2 { margin: 0 0 6px; font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.modal-box .grid2 { margin-top: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; }

#in-data-search { margin-bottom: 10px; max-width: 320px; }
#data-table .tbl-wrap { max-height: 62vh; overflow-y: auto; }
#reverse-result, #compare-result { margin-top: 14px; }
#btn-reverse { margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════════════════
   캡처 인식(OCR) 모달
   ══════════════════════════════════════════════════════════════════════════
   창 바깥(오버레이·투입칸·버튼)은 이 파일의 기조 그대로다 — 크림 카드(--panel),
   1px 목재 테두리, 강조는 호박색 토큰. 떠 있는 층의 그림자는 .modal-box 가
   --shadow-pop 으로 이미 갖고 있고 여기서 더 얹지 않는다. */
/* 세로형 투입칸(288px)과 정보창(300px) 둘 다 가운데로 세우는 폭이다 */
.ocr-box { max-width: 470px; }
.ocr-box h2 { display: flex; align-items: center; gap: 8px; }
.badge-slot {
  background: var(--accent-soft); color: var(--accent-text); border: 1px solid var(--accent-line);
  font-family: var(--font-ui); font-size: 11px; font-weight: 400;
  padding: 2px 9px; border-radius: 999px;
}

/* 투입칸 — 손그림대로 "빈 네모 + +" 하나다. 이미지가 들어오면 네모가 미리보기로 바뀐다.
   ★ 세로형이다. 메이플 아이템 정보창이 폭보다 높이가 큰 모양이라, 가로 상자에 넣으면
     붙여넣은 캡처가 늘 위아래로 남아돌아 실제보다 작게 보인다. 3:4 로 잡았다.
   ★ 눌러도 파일 대화상자는 안 열린다. 클릭은 포커스를 잡는 일뿐이고, 그 상태를
     파란 테두리로 알린다 — "이제 Ctrl+V 를 누르면 된다" 가 눈에 보여야 한다. */
.ocr-drop {
  margin: 12px auto 0;
  width: 288px;
  height: 384px;
  max-width: 100%;
  display: flex; align-items: center; justify-content: center;
  padding: 10px;
  border: 2px dashed var(--line); border-radius: var(--radius);
  background: var(--panel-soft);
  cursor: default;
  transition: border-color .12s, background .12s, box-shadow .12s;
}
.ocr-drop:hover { border-color: var(--accent-line); }
/* 호박색 테두리 = "이제 Ctrl+V 를 누르면 된다" 는 신호.
   ★ :focus 만으로는 못 쓴다. 사용자가 캡처를 뜨러 다른 창으로 갔다 오면 브라우저
     창이 포커스를 잃어 :focus 가 풀리는데, 정작 그때가 붙여넣기 직전이다. 그래서
     상태를 JS 가 .ready 클래스로 들고 있고 :focus 는 거기에 얹기만 한다. */
.ocr-drop.ready, .ocr-drop:focus, .ocr-drop:focus-visible, .ocr-drop.dragover {
  outline: none;
  border-style: solid; border-color: var(--accent); background: var(--accent-soft);
  box-shadow: 0 0 0 3px var(--accent-ring);
}
.ocr-drop.has-img { border-style: solid; border-color: var(--line); background: var(--panel); box-shadow: none; }
.ocr-drop-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.ocr-drop-empty .plus {
  font-family: var(--font-display); font-size: 40px; line-height: 1;
  color: var(--faint); font-weight: 700; margin-bottom: 6px;
}
.ocr-drop-empty .t { font-family: var(--font-display); font-size: 14px; color: var(--muted); }
.ocr-drop-empty .s { font-size: 11px; color: var(--faint); }
/* 안내 한 줄만 포커스 여부에 따라 갈아 끼운다 */
.ocr-drop-empty .ready { display: none; color: var(--accent-text); }
.ocr-drop.ready .ocr-drop-empty .idle, .ocr-drop:focus .ocr-drop-empty .idle,
.ocr-drop.dragover .ocr-drop-empty .idle { display: none; }
.ocr-drop.ready .ocr-drop-empty .ready, .ocr-drop:focus .ocr-drop-empty .ready,
.ocr-drop.dragover .ocr-drop-empty .ready { display: block; }
.ocr-drop.ready .ocr-drop-empty .plus, .ocr-drop:focus .ocr-drop-empty .plus { color: var(--accent); }
/* 세로로 긴 캡처가 잘리거나 찌그러지지 않게 contain 으로 넣는다.
   캡처는 대개 픽셀 그림이라 늘릴 때 뭉개지 않게 pixelated 로 둔다.
   width/height 를 auto 로 둬 원래 크기보다 억지로 키우지도 않는다 — 작은 캡처를
   늘려 보여 주면 실제보다 잘 읽힐 것처럼 보인다. */
#ocr-preview {
  width: auto; height: auto;
  max-width: 100%; max-height: 100%;
  object-fit: contain; object-position: center;
  image-rendering: pixelated;
}

/* 진행 표시 — OCR 은 몇 초 걸리고 처음에는 학습데이터까지 받는다.
   막대 하나 + 지금 무슨 단계인지 한 줄. */
.ocr-progress { margin-top: 12px; }
.ocr-progress .bar { height: 6px; background: var(--line-soft); border-radius: 3px; overflow: hidden; }
.ocr-progress .bar i { display: block; height: 100%; width: 0; background: var(--accent); transition: width .2s; }
.ocr-progress .txt { margin: 6px 0 0; font-size: 12px; color: var(--muted); }

.ocr-msg {
  margin: 12px 0 0; padding: 9px 12px; border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6;
  background: var(--warn-bg); border: 1px solid var(--warn-line); color: var(--warn-text);
}
.ocr-msg.bad { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); }
.ocr-msg.ok  { background: var(--good-soft); border-color: var(--good); color: var(--good); }
.modal-actions .spacer { flex: 1; }

/* 이름 고치기 줄 — 스캔이 틀렸을 때 사람이 직접 잡는 자리다. */
.ocr-name-fix { margin: 12px 0 10px; }
.ocr-name-fix .row { display: flex; gap: 8px; align-items: center; }
.ocr-name-fix input { flex: 1; }
.ocr-name-fix .cands { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ocr-name-fix .cand {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 9px 4px 5px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--panel); font-size: 12px; cursor: pointer;
}
.ocr-name-fix .cand img { width: 20px; height: 20px; object-fit: contain; image-rendering: pixelated; }
.ocr-name-fix .cand:hover { border-color: var(--accent); color: var(--accent-text); }
.ocr-name-fix .cand.on { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-text); }
.ocr-name-fix .cand .sc { color: var(--faint); font-size: 11px; }

.ocr-raw { margin-top: 10px; }
.ocr-raw summary { font-size: 12px; color: var(--muted); cursor: pointer; }
.ocr-raw pre {
  margin: 8px 0 0; padding: 10px 12px; max-height: 180px; overflow: auto;
  background: var(--panel-soft); border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  font-size: 12px; line-height: 1.6; white-space: pre-wrap; word-break: break-all;
}
/* ★ 팔레트 예외 하나. 이 링크는 정보창(.mw-tt) 안에서 "OCR 이 읽어 채운 값" 을
   가리키는 하늘색(--tt-up #6fc8ff)과 짝이라, 호박색으로 바꾸면 무엇을 가리키는지
   알 수 없게 된다. 색상(파랑)은 유지하고 크림 배경에서 4.85:1 이 나오도록
   명도만 낮췄다(#2f80d0 → #1e6bb8). 밑줄만 정보창과 같은 하늘색이다. */
.ocr-legend {
  color: #1e6bb8; text-decoration: underline solid #6fc8ff; text-underline-offset: 3px;
}
.ocr-tt-wrap { display: flex; justify-content: center; }

/* ══════════════════════════════════════════════════════════════════════════
   아이템 정보창 팝업 (#item-modal) — 상세·수정·스캔 결과 공용
   ══════════════════════════════════════════════════════════════════════════
   껍데기는 다른 모달과 같은 기조다(크림 카드·1px 목재 테두리·--shadow-pop 하나).
   속을 채우는 정보창만 아래 .mw-tt 예외 구역이다. */
.item-box { max-width: 470px; }
.item-box h2 { display: flex; align-items: center; gap: 8px; }
.item-box > .hint { margin: 0 0 4px; }
.item-box > .hint:empty { display: none; }
/* 칸 고르기(반지처럼 칸이 여럿인 부위) — 버튼줄 안에 나란히 선다 */
.modal-actions .inline-sel {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; color: var(--muted);
}
.modal-actions .inline-sel select { width: auto; margin: 0; }
/* 버튼이 많아 좁은 창에서 넘칠 수 있다 — 접히게 둔다 */
.item-box .modal-actions { flex-wrap: wrap; }

/* ══════════════════════════════════════════════════════════════════════════
   스킬 설명 툴팁 (#skill-tip)
   ══════════════════════════════════════════════════════════════════════════
   인게임 스킬 설명창 풍. 아이템 정보창(.mw-tt)과 같은 팔레트를 쓰되 폭이 넓고
   아이콘·레벨줄 아래로 설명 문단이 흐른다. 마우스를 따라다니므로 fixed 다. */
.skill-info {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; height: 18px; flex: none; border-radius: 50%;
  background: var(--accent-soft); border: 1px solid var(--accent-line);
  color: var(--accent-text); font: 700 11px/1 var(--font-ui); cursor: help;
}
.skill-info:hover, .skill-info:focus { background: var(--accent-deep); color: var(--on-accent); outline: none; }
.skill-tip {
  position: fixed; z-index: 200; pointer-events: none;
  max-width: 340px;
}
.skill-tip .mw-tt { width: 340px; }
.mw-tt.skill-tt .tt-name-row { margin-bottom: 8px; }
.mw-tt.skill-tt .tt-req-col { font-size: 12px; }
.mw-tt.skill-tt .tt-desc {
  font-size: 12.5px; line-height: 1.65; text-align: left;
  white-space: pre-wrap; word-break: break-word;
}
/* shortDesc = 게임이 노란 글씨로 적는 "이번 레벨의 실제 수치" 줄.
   자리표(#mpCon·#damage)를 찍은 레벨의 값으로 바꿔 넣은 결과다. */
.mw-tt.skill-tt .tt-short {
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--tt-edge);
  font-size: 13px; line-height: 1.6; text-align: left;
  color: #ffe07a; word-break: break-word;
}
.mw-tt.skill-tt .tt-nodesc { font-size: 12.5px; opacity: .7; text-align: left; }

/* ══════════════════════════════════════════════════════════════════════════
   인게임 아이템 정보창 (.mw-tt)
   ══════════════════════════════════════════════════════════════════════════
   ★ 이 절만 위 기조를 따르지 않는다. 게임 창을 흉내 낸 예외 구역이라 바깥 토큰
     (--text/--panel 등)을 하나도 끌어 쓰지 않고 팔레트를 여기서 닫는다.
     사용자가 캡처와 나란히 놓고 대조하는 것이 목적이라 모양이 같아야 한다.

   출처: scroll_simulator\static\css\style.css 의 .maple-tooltip (693행~).
     같은 저장소 우리 코드라 그대로 옮겨 왔고, 클래스 충돌을 피하려 바깥
     이름만 .maple-tooltip → .mw-tt 로 바꿨다. 안쪽 tt-* 이름은 그대로 둔다.
     겉모습 수치는 maplelog.gg 정보창의 크롬 계산값(그쪽 주석 참조).

   우리만의 차이 두 가지:
     · 수치가 <input> 이다. 스캔이 틀렸을 때 이 창에서 바로 고치라는 뜻.
     · OCR 이 채운 줄만 하늘색(--tt-up) — 어디가 기계가 읽은 값인지 구분한다.  */
.mw-tt {
  --tt-ink:  #e5e7eb;   /* 글자 — 라벨과 값이 같은 색이다 */
  --tt-bg:   #1e2128;   /* 창 바탕 */
  --tt-edge: #2d3139;   /* 테두리·구분선 */
  --tt-slot: #161920;   /* 아이콘칸 바탕 */
  --tt-up:   #6fc8ff;   /* OCR 이 읽어 채운 값 (우리 표시) */
  --tt-font: Roboto, 'Pretendard', -apple-system, BlinkMacSystemFont,
             'Apple SD Gothic Neo', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif;

  background: var(--tt-bg);
  border: 1px solid var(--tt-edge);
  border-radius: 8px;
  box-shadow: none;
  box-sizing: border-box;
  width: 300px;
  max-width: 100%;
  padding: 13px 14px 12px;

  font-family: var(--tt-font);
  font-size: 13px;
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: -.15px;
  color: var(--tt-ink);
}
.mw-tt .tt-name-row {
  margin: 0 0 10px;
  font-size: 16px; font-weight: 700; line-height: 1.6;
  text-align: center; display: block; word-break: break-all;
}
/* 등급 한 줄. 이름색만으로는 "무슨 색이 무슨 뜻인지" 를 모르는 사람이 있어
   등급명을 같은 색으로 한 번 더 적는다. 증가합은 근거라서 작게 곁들인다.
   색은 인라인 style 로 들어온다(GRADES 표가 정본이다 — CSS 에 또 적지 않는다). */
.mw-tt .tt-grade {
  margin: -6px 0 10px; text-align: center;
  font-size: 12px; font-weight: 700; letter-spacing: .02em;
}
.mw-tt .tt-grade .tt-grade-sum {
  margin-left: .5em; font-weight: 400; opacity: .65; color: var(--tt-ink);
}
/* OCR 이 읽어 채운 REQ/업횟 줄도 스탯 줄과 같은 하늘색으로 맞춘다. */
.mw-tt .tt-req-row.from-ocr .tt-req-lbl,
.mw-tt .tt-req-row.from-ocr .tt-req-sep,
.mw-tt .tt-req-row.from-ocr .tt-req-val { color: var(--tt-up); }
.mw-tt .tt-body { display: flex; align-items: flex-start; gap: 12px; margin: 0 0 8px; }
.mw-tt .tt-icon-col { flex-shrink: 0; }
.mw-tt .tt-icon-box {
  width: 80px; height: 80px; background: var(--tt-slot); border-radius: 2px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.mw-tt .tt-icon-box img { width: 48px; height: 48px; object-fit: contain; image-rendering: pixelated; }
/* REQ 칸만 왼쪽 정렬이다 — 아래 능력치 칸은 가운데다. */
.mw-tt .tt-req-col { flex: 1; min-width: 0; font-size: 13px; line-height: 1.6; text-align: left; }
/* 한 줄로 흘리되 flex 로 묶는다. block 이면 JS 마크업의 줄바꿈이 공백 한 칸이 되어
   줄마다 콜론 앞뒤 간격이 제각각으로 벌어진다. flex 는 그 공백 노드를 버린다. */
.mw-tt .tt-req-row { display: flex; justify-content: flex-start; align-items: baseline; }
.mw-tt .tt-req-lbl { white-space: nowrap; word-spacing: -.25em; }
/* 구분 여백은 공백 한 칸 폭(.25em)이다. px 로 박으면 13px 칸과 15px 칸이 어긋난다. */
.mw-tt .tt-req-sep, .mw-tt .tt-sep { margin: 0 .25em; flex: none; }
.mw-tt .tt-divider { height: 0; border-top: 1px solid var(--tt-edge); margin: 0 0 8px; }
.mw-tt .tt-stats { padding: 0 0 2px; font-size: 15px; line-height: 1.7; text-align: center; }
.mw-tt .tt-type-row, .mw-tt .tt-stat-row {
  display: flex; justify-content: center; align-items: baseline; margin: 0; padding: 0;
}
.mw-tt .tt-lbl { white-space: nowrap; }
.mw-tt .tt-stat-none { opacity: .7; }
/* OCR 이 읽어 채운 줄만 하늘색. 나머지는 DB 기본값이라 본문색 그대로다. */
.mw-tt .tt-stat-row.from-ocr .tt-lbl,
.mw-tt .tt-stat-row.from-ocr .tt-sep,
.mw-tt .tt-stat-row.from-ocr .tt-sign { color: var(--tt-up); }
.mw-tt .tt-stat-row.from-ocr .tt-num-input { color: var(--tt-up); border-bottom-color: var(--tt-up); }
/* 값은 늘 입력칸이다. 글꼴·줄높이를 물려받아 고치는 동안 목록이 안 흔들린다.
   "여기 누를 수 있다" 는 표시는 점선 밑줄 하나뿐 — 버튼처럼 보이면 창 모양이 깨진다. */
.mw-tt .tt-num-input {
  font: inherit; line-height: inherit; letter-spacing: inherit;
  text-align: center; width: 4.5em;
  color: inherit;
  background: rgba(255, 255, 255, .07);
  border: 0; border-bottom: 1px dotted rgba(229, 231, 235, .5); border-radius: 0;
  padding: 0 2px; margin: 0; outline: none; vertical-align: baseline;
  -webkit-appearance: none; appearance: none;
}
.mw-tt .tt-num-input::-webkit-outer-spin-button,
.mw-tt .tt-num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.mw-tt .tt-num-input:focus { background: rgba(255, 255, 255, .16); border-bottom: 1px solid var(--tt-up); }
.mw-tt .tt-more {
  display: block; margin: 8px auto 0; padding: 3px 10px;
  background: none; border: 1px solid var(--tt-edge); border-radius: 999px;
  color: var(--tt-ink); font-family: var(--tt-font); font-size: 12px; opacity: .75; cursor: pointer;
}
.mw-tt .tt-more:hover { opacity: 1; border-color: var(--tt-up); color: var(--tt-up); }

@media (max-width: 560px) {
  .ocr-box, .item-box { max-width: 100%; }
  .modal-actions { flex-wrap: wrap; }
  /* 좁은 화면에서 툴팁이 손가락 밑에 깔리면 읽을 수가 없다 — 폭만 줄여 세운다 */
  .skill-tip, .skill-tip .mw-tt { max-width: calc(100vw - 24px); width: auto; }
}

/* ── 푸터 ──────────────────────────────────────────────────────────────────
   인라인 <style> 이 아니라 여기(speccalc.css)에 두는 이유: 안내 문서 4장
   (/about /contact /terms /privacy)도 같은 스타일시트를 링크해서 이 클래스를
   쓴다. 계산기 템플릿 안에 박아 두면 문서 쪽 푸터만 민무늬로 남거나, 고칠 때
   두 군데 중 한쪽만 고쳐져 어긋난다.
   ★ 문서 흐름 그대로 맨 아래 붙는 블록이다 — position:fixed·100vh 를 쓰지
   않는다. 그래야 sticky 인 .site-head 와 .tab-body·#result-card 의 높이·스크롤
   계산에 아무 영향도 주지 않는다. 짧은 화면에서 바닥에 붙이는 일은 body 의
   flex(min-height:100dvh)가 맡고, 여기서는 margin-top:auto 로 남는 높이를
   먹기만 한다.
   폭은 .wrap(1440px + 좌우 24px)에 맞춰 링크 줄이 본문 왼쪽 선에서 시작하게
   한다. 다만 .foot__legal 만 720px 로 따로 좁힌다 — 넥슨 무관 고지 같은 긴
   문장은 1440px 로 펴 놓으면 글줄이 길어 안 읽힌다. */
/* 상단바와 같은 --head-bg 를 깔아 페이지를 목재 톤으로 여닫는다 —
   크림 본문이 아래로 그냥 흐려지며 끝나면 문서가 안 끝난 것처럼 보인다. */
.foot {
  border-top: 1px solid var(--line);
  background: var(--head-bg);
  /* margin-top 은 한 값만 이긴다. 내용이 긴 화면에서 본문과 띄우던 48px 은
     padding-top 에 얹어(24 + 48 = 72) 같은 간격을 지킨다. */
  margin-top: auto;
  padding: 72px 0 32px;
}
.foot__in {
  max-width: 1440px; margin: 0 auto;
  padding: 0 24px;
  display: flex; flex-direction: column; gap: 12px;
}
/* .wrap 이 1080px 이하에서 좌우 16px 로 좁아진다 — 같이 따라가야 선이 맞는다 */
@media (max-width: 1080px) {
  .foot__in { padding: 0 16px; }
}
/* margin 음수로 링크의 좌우 패딩만큼 되당겨 첫 링크를 본문 왼쪽 선에 맞춘다 */
.foot__links { display: flex; flex-wrap: wrap; gap: 2px 4px; margin: 0 -10px; }
.foot__links a {
  display: inline-flex; align-items: center;
  min-height: 40px;            /* 손가락 터치 타깃 — 글자 크기와 무관하게 지킨다 */
  padding: 0 10px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  text-decoration: none; border-radius: var(--radius-sm);
}
.foot__links a:hover { color: var(--accent-text); background: var(--accent-soft); }
.foot__legal { font-size: 12px; line-height: 1.7; color: var(--faint); margin: 0; max-width: 720px; }
/* 넥슨과 무관하다는 고지는 한 줄로 떼어 놓아야 눈에 걸린다 */
.foot__legal strong { display: block; color: var(--muted); font-weight: 600; }
.foot__c { font-size: 12px; color: var(--faint); margin: 0; }