/* 툴 페이지 공통 스타일 (site.css 토큰 사용) */
:root {
  --good: #1e7a4c;
  --neg: #b3261e;
  --chip: color-mix(in srgb, var(--accent) 12%, var(--panel));
}
@media (prefers-color-scheme: dark) {
  :root {
    --good: #57c28c;
    --neg: #ff8a80;
  }
}

.content:has(.tool-page) { max-width: 1040px; }

.tool {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 16px;
  margin: 16px 0 8px;
  display: grid;
  gap: 16px;
}
.tool-controls { display: flex; flex-wrap: wrap; gap: 12px 16px; align-items: flex-end; }
.field { display: grid; gap: 4px; min-width: 0; flex: 1 1 180px; }
.field-label { font-size: 13px; font-weight: 600; color: var(--muted); }
.field-hint { font-size: 12px; color: var(--muted); }
.field-action { flex: 0 0 auto; }
.inline { display: flex; gap: 8px; flex-wrap: wrap; }
.inline > * { flex: 1 1 140px; }

input[type="number"], input[type="text"], input[type="search"], input[type="datetime-local"], select {
  font: inherit;
  font-size: 15px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--paper);
  color: var(--ink);
  width: 100%;
  min-width: 0;
}
input:focus-visible, select:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

button { font: inherit; font-size: 14px; cursor: pointer; border-radius: 6px; padding: 8px 14px; border: 1px solid var(--accent); background: var(--accent); color: #fff; }
.btn-secondary { background: transparent; color: var(--accent); }
.btn-link { border: 0; background: none; color: var(--accent); padding: 2px 4px; text-decoration: underline; font-size: 13px; }
.btn-primary { background: var(--accent); }

.stat-row { display: flex; flex-wrap: wrap; gap: 12px; }
.stat { flex: 1 1 140px; background: var(--chip); border-radius: 8px; padding: 10px 12px; display: grid; gap: 2px; }
.stat-label { font-size: 12px; color: var(--muted); }
.stat strong { font-size: 1.25rem; font-variant-numeric: tabular-nums; }

.tool-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tool h3 { font-size: 1rem; margin: 0 0 8px; }
.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.neg { color: var(--neg); }
tr.best td { background: color-mix(in srgb, var(--good) 12%, var(--panel)); }
tr.ready td { background: color-mix(in srgb, var(--good) 14%, var(--panel)); }
td input[type="number"] { max-width: 120px; text-align: right; }

.badge { display: inline-block; font-size: 12px; font-weight: 600; padding: 1px 7px; border-radius: 999px; background: var(--chip); color: var(--ink); margin-left: 6px; vertical-align: middle; }
.badge-craft { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); }
.badge-buy { background: color-mix(in srgb, #c27c0e 25%, var(--panel)); }
.badge-best, .badge-ready { background: var(--good); color: #fff; }
.badge-active { background: color-mix(in srgb, #3b6fd8 22%, var(--panel)); }
.badge-passive { background: color-mix(in srgb, #8e44ad 22%, var(--panel)); }

.notice { margin: 0; font-size: 14px; padding: 8px 12px; border-radius: 6px; background: var(--chip); }
.notice-warn { background: var(--warn-bg); color: var(--warn-ink); }
.tool-error { color: var(--neg); }
.muted { color: var(--muted); font-size: 13px; }

/* 재료 트리 */
.tree ul { list-style: none; margin: 0; padding-left: 18px; border-left: 1px dashed var(--line); }
.tree .tree-root { padding-left: 0; border-left: 0; }
.tree li { margin: 4px 0; }
.tree-line { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.tree-name { font-weight: 600; }
.tree-meta { font-size: 12px; color: var(--muted); }
.tree-cost { margin-left: auto; font-variant-numeric: tabular-nums; font-size: 14px; }
.price-editor summary { cursor: pointer; font-weight: 600; }
.price-editor[open] { display: grid; gap: 8px; }
.cost-line { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; }
.inline-link { font-size: 13px; }

/* 빌드 플래너 */
.choice-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin: 0; display: grid; gap: 8px; }
.choice-group legend { font-weight: 600; padding: 0 4px; }
.choice { display: flex; gap: 8px; align-items: flex-start; }
.choice input { margin-top: 5px; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px 14px; }
.skill-groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.skill-text { display: grid; }
.skill-name { font-weight: 600; }
.skill-desc { font-size: 13px; color: var(--muted); }
.build-summary { border-top: 1px solid var(--line); padding-top: 12px; display: grid; gap: 8px; }
.summary-list { margin: 0; }
.share-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.share-row input { flex: 1 1 260px; }
.row-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }

/* 지도 */
.map-box { height: min(70vh, 560px); border-radius: 8px; border: 1px solid var(--line); background: var(--paper); }
.map-box.map-dark { background: #141210; height: clamp(260px, 62vw, 560px); }
.map-notes { display: grid; gap: 6px; }
.map-notes:empty { display: none; }
.map-grid-bg { fill: var(--paper); }
.map-grid line { stroke: var(--line); stroke-width: 1; }
.map-grid text { fill: var(--muted); font-size: 12px; }
.swatch { width: 10px; height: 10px; border-radius: 50%; display: inline-block; margin-top: 6px; }
.coord-line { margin: 0; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.map-popup { display: grid; gap: 4px; font-size: 13px; }

/* 아이템 DB */
.item-grid { grid-template-columns: minmax(220px, 1fr) minmax(280px, 2fr); }
.item-list { list-style: none; margin: 0; padding: 0; max-height: 480px; overflow-y: auto; border: 1px solid var(--line); border-radius: 8px; }
.item-btn { width: 100%; text-align: left; display: flex; justify-content: space-between; gap: 8px; background: transparent; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); border-radius: 0; padding: 8px 12px; }
.item-btn.selected { background: var(--chip); font-weight: 600; }
.item-detail h3 { font-size: 1.2rem; margin: 0 0 6px; display: flex; gap: 8px; flex-wrap: wrap; align-items: baseline; }
.alt-name { font-weight: 400; }
.detail-section h4 { margin: 14px 0 6px; font-size: 14px; }
.detail-section ul { margin: 4px 0 8px; }
@media (max-width: 640px) { .item-grid { grid-template-columns: 1fr; } }

/* 툴 목록 */

/* 툴 본문과 오류 제보 */
.tool-body { display: grid; gap: 16px; min-width: 0; }
.report { border-top: 1px dashed var(--line); padding-top: 10px; }
.report-toggle { padding: 0; }
.report-panel { display: grid; gap: 8px; margin-top: 8px; }
.report-panel textarea { font: inherit; font-size: 15px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); width: 100%; resize: vertical; }
.btn-like { display: inline-block; font-size: 14px; border-radius: 6px; padding: 8px 14px; background: var(--accent); color: #fff; text-decoration: none; border: 1px solid var(--accent); }
.btn-like-secondary { background: transparent; color: var(--accent); }

/* 경로 표는 휴대폰에서 칸이 눌리지 않도록 가로 스크롤 */
.route-table { min-width: 680px; }
.route-table td:first-child { white-space: nowrap; }

/* 계산기가 그려지기 전에 자리를 잡아 아래 내용이 밀리는 현상(CLS)을 줄임.
   값은 샘플 데이터로 그린 높이(390·768·1280px 화면)를 재서 정함. 실제 데이터로 바꾸면 다시 재서 고치기 */
.tool-body-trade { min-height: 950px; }
:lang(en) .tool-body-trade { min-height: 880px; }
.tool-body-crafting { min-height: 790px; }
:lang(en) .tool-body-crafting { min-height: 850px; }
.tool-body-builds { min-height: 470px; }
.tool-body-farming { min-height: 450px; }
/* 지도: 2026-10-22 샘플 지도 삭제 후 첫 화면 높이 측정(360~412px 843~1043, 768px 835~912, 1024px 이상 919) */
.tool-body-map { min-height: 840px; }
:lang(en) .tool-body-map { min-height: 885px; }
.tool-body-items { min-height: 760px; }
@media (min-width: 720px) {
  .tool-body-trade, :lang(en) .tool-body-trade { min-height: 640px; }
  .tool-body-crafting, :lang(en) .tool-body-crafting { min-height: 410px; }
  .tool-body-builds { min-height: 420px; }
  .tool-body-farming { min-height: 260px; }
  .tool-body-map { min-height: 830px; }
  :lang(en) .tool-body-map { min-height: 905px; }
  .tool-body-items { min-height: 620px; }
}
@media (min-width: 1024px) {
  .tool-body-trade { min-height: 370px; }
  :lang(en) .tool-body-trade { min-height: 560px; }
  .tool-body-map, :lang(en) .tool-body-map { min-height: 915px; }
}

/* 능력치 계산기 */
/* 비활성 버튼(포인트가 없을 때의 +, 잠긴 칸의 '올리기')이 눌리는 버튼과 구분되게 */
button:disabled { opacity: 0.4; cursor: not-allowed; }
/* 입력칸 아래 설명이 있는 칸이 있어도 이름표 높이를 맞춤 */
.tool-controls-top { align-items: flex-start; }
.stat-table { width: 100%; }
.stat-table th, .stat-table td { vertical-align: middle; }
.stat-table th[scope="row"] { white-space: nowrap; }
.tool input.num-input { width: 4.5em; padding: 4px 6px; text-align: right; }
.stepper { display: inline-flex; align-items: center; gap: 4px; }
.tool .stepper input.num-input { width: 3.2em; }
/* 표 안 입력칸은 위아래 화살표(스핀 버튼)를 숨겨 숫자가 잘리지 않게 함. 키보드 화살표·−/+ 버튼으로 조절 */
.stat-table input.num-input { -moz-appearance: textfield; appearance: textfield; }
.stat-table input.num-input::-webkit-outer-spin-button, .stat-table input.num-input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.step-btn { flex: none; width: 32px; height: 32px; padding: 0; font-size: 18px; line-height: 1; }
.stat-result { font-weight: 700; }
.stat-up { color: var(--accent); }
.stat-bad { background: var(--warn-bg); color: var(--warn-ink); }
.stat-flow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.tool .stat-flow input.num-input { width: 6em; }
/* 휴대폰: 표가 가로로 넘치지 않게 칸 여백과 입력칸을 줄임 (360px 화면에서 영문 능력치 이름까지 들어가는 폭).
   입력칸 글자는 16px: 아이폰 사파리는 16px보다 작은 입력칸을 누르면 화면을 확대함 */
@media (max-width: 600px) {
  .tool input[type="number"], .tool input[type="text"], .tool select, .tool textarea { font-size: 16px; }
  .tool-controls-top .field { flex-basis: 130px; }
  .stat-table { font-size: 14px; }
  .stat-table th, .stat-table td { padding: 6px 4px; }
  .tool input.num-input { width: 3em; padding: 4px; }
  .tool .stepper input.num-input { width: 2.1em; }
  .stepper { gap: 3px; }
  .step-btn { width: 30px; height: 30px; }
}
@media (max-width: 400px) {
  .stat-table th[scope="row"] { font-size: 13px; }
  .stat-table th, .stat-table td { padding: 6px 3px; }
  .tool input.num-input { width: 2.6em; }
  .tool .stepper input.num-input { width: 1.9em; }
  .stepper { gap: 2px; }
  .step-btn { width: 28px; height: 28px; }
}
.delta { font-size: 13px; color: var(--muted); font-variant-numeric: tabular-nums; }
.delta-up { color: var(--good); font-weight: 600; }
.tool-subhead { font-size: 1.05rem; margin: 4px 0 0; }
.detail-groups { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.detail-group { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.detail-group h3 { font-size: 0.95rem; margin: 0 0 6px; }
.detail-list { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 14px; }
.detail-list dd { margin: 0; }
.stat-source { margin: 6px 0 0; font-size: 13px; }
.stat-points-note { margin: 6px 0 0; font-size: 13px; }
/* 맨 위 칸: 태블릿·PC는 무기·현재 레벨·목표 레벨·남은 포인트를 한 줄에, 휴대폰은 무기를 한 줄로 두고 나머지는 두 칸씩 */
.stat-controls .field-weapon { flex: 2 1 210px; }
@media (min-width: 601px) { .stat-controls .field { flex-basis: 140px; } .stat-controls .field-weapon { flex-basis: 210px; } }
@media (max-width: 600px) { .stat-controls .field-weapon { flex-basis: 100%; } }
/* 본문 '무기별 처음 능력치' 표 */
.weapon-start .table-group th { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); font-weight: 700; }
.weapon-start { word-break: keep-all; }
.weapon-start thead th { white-space: normal; }
.weapon-start .th-sub { display: block; font-size: 12px; font-weight: 400; color: var(--muted); white-space: nowrap; }
.weapon-start .row-total th, .weapon-start .row-total td { font-weight: 700; }
.weapon-start td.est { color: var(--muted); font-style: italic; }
.weapon-start th[scope="row"] { white-space: normal; }
.weapon-start .pct { display: block; font-size: 12px; color: var(--muted); }
@media (max-width: 600px) { .weapon-start th, .weapon-start td { padding: 6px; font-size: 13px; } }
.share-input { flex: 1 1 240px; min-width: 0; font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper); color: var(--ink); }
/* 첫 화면 높이(2026-10-22 레벨 연동 포인트 적용 후 측정: 360~412px 1673~1779, 768px 1270, 1024px 이상 1209)보다
   조금 낮게 잡아 빈칸 없이 밀림만 줄임 */
.tool-body-stats { min-height: 1670px; }
:lang(en) .tool-body-stats { min-height: 1745px; }
@media (min-width: 720px) { .tool-body-stats, :lang(en) .tool-body-stats { min-height: 1265px; } }
@media (min-width: 1024px) { .tool-body-stats, :lang(en) .tool-body-stats { min-height: 1200px; } }

/* 특성 트리 플래너: 게임 특성 화면처럼 어두운 창. 칸 간격(--cell)은 창 폭에 맞춰 스크립트가 정함 */
.trait-scroll {
  width: fit-content; max-width: 100%; margin: 0 auto; box-sizing: border-box;
  overflow-x: auto; border: 1px solid #3a3328; border-radius: 8px; padding: 8px;
  background: linear-gradient(180deg, #24211b 0%, #1b1915 55%, #0f0e0c 100%);
}
.trait-canvas { position: relative; margin: 0 auto; --cell: 58px; }
/* 게임 화면 그림: 칸 격자에 맞춰 깔고, 좌우 가장자리는 창 배경색으로 흐려져 여백이 이어져 보이게 함 */
.trait-bg {
  position: absolute; inset: 0; background-size: 100% 100%; background-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 5%, #000 95%, transparent 100%);
}
.trait-lines { position: absolute; inset: 0; width: 100%; height: 100%; }
.trait-lines line { stroke: rgba(205, 185, 140, 0.32); stroke-width: 1.5; }
.trait-lines line.is-taken { stroke: #f6d27a; stroke-width: 3; }
.has-image .trait-lines line { stroke: transparent; }
.has-image .trait-lines line.is-taken { stroke: #f6d27a; stroke-width: 3; }
.trait-node {
  position: absolute; transform: translate(-50%, -50%) rotate(45deg);
  width: max(24px, calc(var(--cell) * 0.48)); height: max(24px, calc(var(--cell) * 0.48)); padding: 0; border-radius: 5px;
  border: 2px solid rgba(205, 185, 140, 0.55); background: #2b2720; color: #f6d27a; cursor: pointer;
  display: grid; place-items: center;
}
.trait-node.is-major { width: max(30px, calc(var(--cell) * 0.62)); height: max(30px, calc(var(--cell) * 0.62)); border-color: rgba(230, 200, 130, 0.75); box-shadow: 0 0 0 3px rgba(230, 200, 130, 0.12); }
.trait-node.is-root, .trait-node.is-root:disabled {
  width: max(32px, calc(var(--cell) * 0.66)); height: max(32px, calc(var(--cell) * 0.66));
  background: #d9d2c0; border-color: #f1ead8; cursor: default; opacity: 1;
}
.trait-node:not(.is-root):not(.is-open):not(.is-taken) { opacity: 0.85; }
.trait-node.is-open { border-color: rgba(240, 200, 120, 0.95); box-shadow: 0 0 6px rgba(240, 200, 120, 0.55); opacity: 1; }
.trait-node.is-taken, .trait-node.is-full { border-color: #f6d27a; background: rgba(246, 210, 122, 0.22); box-shadow: 0 0 10px 2px rgba(246, 210, 122, 0.75); }
.trait-node.is-full { box-shadow: 0 0 14px 4px rgba(255, 215, 120, 0.9); }
.trait-node.is-selected { outline: 2px dashed #ffffff; outline-offset: 3px; }
.trait-node:hover:not(:disabled) { border-color: #ffe3a3; }
.trait-node:focus-visible { outline: 2px solid #ffffff; outline-offset: 3px; }
.trait-rank {
  position: absolute; right: -11px; bottom: -11px; transform: rotate(-45deg);
  padding: 0 4px; border-radius: 7px; border: 1px solid rgba(246, 210, 122, 0.7); background: rgba(20, 16, 10, 0.92);
  color: #f6d27a; font-size: 10px; font-weight: 700; line-height: 14px; font-variant-numeric: tabular-nums;
}
.trait-rank:empty { display: none; }
/* 그림 위에 올리는 버튼은 투명하게 두고 상태만 테두리·빛으로 표시 */
.has-image .trait-node { background: transparent; border-color: transparent; box-shadow: none; opacity: 1; }
.has-image .trait-node.is-root, .has-image .trait-node.is-root:disabled { background: transparent; border-color: transparent; }
.has-image .trait-node:not(.is-root):not(.is-open):not(.is-taken) { background: rgba(10, 8, 6, 0.5); }
.has-image .trait-node.is-open { border-color: rgba(240, 200, 120, 0.9); box-shadow: 0 0 6px rgba(240, 200, 120, 0.5); }
.has-image .trait-node.is-taken, .has-image .trait-node.is-full { border-color: #f6d27a; background: rgba(246, 210, 122, 0.16); box-shadow: 0 0 10px 2px rgba(246, 210, 122, 0.75); }
.has-image .trait-node.is-full { box-shadow: 0 0 14px 4px rgba(255, 215, 120, 0.9); }
/* 칸 정보 툴팁 (마우스를 올리거나 키보드로 고를 때) */
.trait-tip {
  position: absolute; z-index: 5; width: max-content; max-width: min(260px, 90vw); padding: 8px 10px;
  border: 1px solid #6b5a3a; border-radius: 6px; background: rgba(18, 15, 11, 0.96); color: #eadfc8;
  font-size: 13px; line-height: 1.45; pointer-events: none; transform: translate(-50%, calc(-100% - 8px));
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.5); display: grid; gap: 2px;
}
.trait-tip.below { transform: translate(-50%, 8px); }
.trait-tip[hidden] { display: none; }
.trait-tip strong { color: #f6d27a; }
.trait-tip .tip-meta { color: #b9a988; font-size: 12px; }
.trait-tip .tip-desc.is-unknown { color: #9c8f78; font-style: italic; }
.trait-panel { min-height: 120px; border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.trait-panel:empty { display: none; }
.trait-panel h3 { font-size: 1rem; margin: 0; }
.trait-panel p { margin: 4px 0; }
/* 트리 아래 '찍은 특성 효과' 목록 */
.trait-effects { border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; }
.trait-effects h3 { font-size: 1rem; margin: 0 0 4px; }
.trait-effects h4 { font-size: 0.92rem; margin: 10px 0 4px; }
.trait-effects p { margin: 4px 0; }
.trait-effects ul { margin: 0; padding-left: 18px; }
.trait-effects li { margin: 3px 0; }
.trait-effects .eff-name { font-weight: 600; }
.trait-effects .eff-rank { color: var(--muted); font-variant-numeric: tabular-nums; }
.map-credit { margin: 4px 0 0; font-size: 12px; color: var(--muted); }
.trait-note { font-size: 13px; color: var(--muted); border-left: 3px solid var(--line); padding-left: 8px; }
/* 첫 화면 높이(2026-10-22 장검 기본, 창 폭 맞춤 후 측정: 360~412px 1580~1778, 768px 1805, 1024px 이상 1783) */
.tool-body-traits { min-height: 1575px; }
:lang(en) .tool-body-traits { min-height: 1625px; }
@media (min-width: 720px) { .tool-body-traits, :lang(en) .tool-body-traits { min-height: 1775px; } }