:root {
  --bg: #eef2f6;
  --surface: #ffffff;
  --surface-2: #f2f5f8;
  --text: #15202b;
  --muted: #5d6b7a;
  --border: #dbe2e9;
  --accent: #1f5f8b;
  --accent-soft: #e2edf6;
  --warn: #9a5b00;
  --warn-soft: #fff3df;
  --hidden: #6b3fa0;
  --hidden-soft: #f1e9fa;
  --good: #0b7a43;
  --good-soft: #e3f4ea;
  --bad: #b42318;
  --bad-soft: #fde8e6;
  --gold: #c99a2e;
  --header: #0f2a3d;
  --header-text: #e8f1f8;
  --dd: #2e9d6c;
  --ca: #2b78c2;
  --bb: #c2412d;
  --cv: #7b4fc2;
  --ss: #138c9b;
  --shadow: 0 1px 2px rgba(16, 32, 48, 0.06), 0 4px 14px rgba(16, 32, 48, 0.06);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0d1318;
    --surface: #151d25;
    --surface-2: #1c2630;
    --text: #e3e9ef;
    --muted: #93a2b1;
    --border: #283441;
    --accent: #6cb4e4;
    --accent-soft: #1b3346;
    --warn: #f0b860;
    --warn-soft: #3a2c14;
    --hidden: #c7a4f0;
    --hidden-soft: #2d2140;
    --good: #4cc38a;
    --good-soft: #15321f;
    --bad: #f97066;
    --bad-soft: #3d1a17;
    --gold: #e0b44f;
    --header: #0a1a26;
    --dd: #4cc38a;
    --ca: #5aa9e6;
    --bb: #f0735f;
    --cv: #a982f0;
    --ss: #3cc4d4;
    --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  }
}

:root[data-theme="dark"] {
  --bg: #0d1318;
  --surface: #151d25;
  --surface-2: #1c2630;
  --text: #e3e9ef;
  --muted: #93a2b1;
  --border: #283441;
  --accent: #6cb4e4;
  --accent-soft: #1b3346;
  --warn: #f0b860;
  --warn-soft: #3a2c14;
  --hidden: #c7a4f0;
  --hidden-soft: #2d2140;
  --good: #4cc38a;
  --good-soft: #15321f;
  --bad: #f97066;
  --bad-soft: #3d1a17;
  --gold: #e0b44f;
  --header: #0a1a26;
  --dd: #4cc38a;
  --ca: #5aa9e6;
  --bb: #f0735f;
  --cv: #a982f0;
  --ss: #3cc4d4;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* 함종 색 */
.c-DD { --cls: var(--dd); }
.c-CA { --cls: var(--ca); }
.c-BB { --cls: var(--bb); }
.c-CV { --cls: var(--cv); }
.c-SS { --cls: var(--ss); }
.c-XX { --cls: var(--muted); }

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: 15px/1.55 system-ui, -apple-system, "Segoe UI", "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;
  -webkit-text-size-adjust: 100%;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }

.wrap { max-width: 1180px; margin: 0 auto; padding: 0 16px; }

/* ---- 상단 / 하단 메뉴 ---- */
.top { background: var(--header); color: var(--header-text); position: sticky; top: 0; z-index: 20; }
.top-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 54px; }
.brand { color: var(--header-text); font-weight: 800; font-size: 1.08rem; letter-spacing: -0.01em; }
.brand:hover { text-decoration: none; }
.nav { display: flex; gap: 4px; }
.nav a { color: var(--header-text); opacity: 0.75; padding: 8px 12px; border-radius: 8px; }
.nav a.on { opacity: 1; background: rgba(255, 255, 255, 0.12); }
.nav a:hover { text-decoration: none; opacity: 1; }

.bottom-nav { display: none; }
.menu-btn, .drawer-close {
  display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px;
  background: none; border: 0; border-radius: 8px; color: var(--header-text); cursor: pointer; flex: none;
}
.menu-btn:hover { background: rgba(255, 255, 255, 0.12); }
.menu-btn svg, .drawer-close svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.top-inner .nav { margin-left: auto; }

.drawer-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); z-index: 40; }
.drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(280px, 82vw); z-index: 50;
  background: var(--surface); box-shadow: -8px 0 24px rgba(0, 0, 0, 0.18);
  display: flex; flex-direction: column; padding: 8px 0 env(safe-area-inset-bottom);
}
.drawer[hidden], .drawer-backdrop[hidden] { display: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 8px 8px 18px; border-bottom: 1px solid var(--border); }
.drawer-title { font-weight: 800; }
.drawer-close { color: var(--text); }
.drawer a { padding: 14px 18px; color: var(--text); font-size: 1rem; border-bottom: 1px solid var(--border); }
.drawer a:hover { text-decoration: none; background: var(--surface-2); }
.drawer a.on { color: var(--accent); font-weight: 700; }
body.menu-open { overflow: hidden; }

.about-sec { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 4px 14px 10px; margin-bottom: 10px; }
.about-sec h2 { font-size: 1rem; margin: 10px 0 6px; }
.about-sec ul { margin: 0; padding-left: 18px; }
.about-sec li { margin: 4px 0; font-size: 0.92rem; }

main { padding-top: 18px; padding-bottom: 40px; min-height: 60vh; }

h1 { font-size: 1.5rem; margin: 0 0 4px; letter-spacing: -0.01em; }
h2 { font-size: 1.1rem; margin: 26px 0 10px; }
.sub { color: var(--muted); margin: 0 0 14px; }
.muted { color: var(--muted); }
.small { font-size: 0.85rem; }
.back { margin: 0 0 12px; }
.back-btn {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 8px 16px 8px 10px;
  border-radius: 999px; background: var(--surface); border: 1px solid var(--border); box-shadow: var(--shadow);
  color: var(--text); font-weight: 700; font-size: 0.92rem; text-decoration: none;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.back-btn:hover { border-color: var(--accent); background: var(--surface-2); text-decoration: none; }
.back-btn:active { transform: scale(0.97); }
.back-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.back-ic { flex: none; color: var(--accent); }
.page-head { margin-bottom: 4px; }

/* ---- 필터 ---- */
.filters { margin-bottom: 10px; }
.searchbar { display: flex; gap: 8px; }
.filters input, .filters select {
  font: inherit; color: inherit; background-color: var(--surface);
  border: 1px solid var(--border); border-radius: 10px; padding: 9px 11px; min-width: 0;
}
.filters input[type="search"] {
  flex: 1 1 auto; padding-left: 38px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238a97a5' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 12px center; background-size: 18px;
}
.filter-btn {
  display: none; flex: none; align-items: center; gap: 6px; font: inherit; font-weight: 700;
  padding: 0 14px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer;
}
.filter-btn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent); }
.badge { display: inline-block; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 0.75rem; text-align: center; }
.filter-panel { display: grid; gap: 2px; margin-top: 4px; }
/* 칩 버튼 줄 (필터·정렬): 드롭다운 대신, 가로로 넘치면 스크롤 */
.chip-row { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 6px 0 2px; scrollbar-width: none; }
.chip-row::-webkit-scrollbar { display: none; }
.cr-label { flex: none; font-size: 0.74rem; color: var(--muted); min-width: 46px; }
.cr-btn { flex: none; padding: 5px 11px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 600; cursor: pointer; white-space: nowrap; }
.cr-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--accent); font-weight: 800; }
.cr-btn.g-S, .cr-btn.g-A, .cr-btn.g-B, .cr-btn.g-C, .cr-btn.g-D { background: var(--surface); font-weight: 800; }
.cr-btn.g-S { color: #b5320c; } .cr-btn.g-A { color: #b0730f; } .cr-btn.g-B { color: #2b78c2; }
.cr-btn.g-C { color: #5d6b7a; } .cr-btn.g-D { color: #8a97a5; }
.cr-btn.g-S[aria-pressed="true"], .cr-btn.g-A[aria-pressed="true"], .cr-btn.g-B[aria-pressed="true"],
.cr-btn.g-C[aria-pressed="true"], .cr-btn.g-D[aria-pressed="true"] { background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.sort-row { margin-top: 4px; }
.dir-btn { flex: none; padding: 5px 11px; border-radius: 8px; border: 1px solid var(--accent); background: var(--accent);
  color: #fff; font: inherit; font-size: 0.8rem; font-weight: 800; cursor: pointer; white-space: nowrap; }
input:focus, select:focus, button:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.count { color: var(--muted); font-size: 0.9rem; margin: 0 0 10px; }

/* ---- 배지 / 태그 / 칩 ---- */
.tier-badge {
  display: inline-block; min-width: 32px; text-align: center; font-weight: 800; font-size: 0.8rem;
  color: #fff; background: var(--cls, var(--accent)); border-radius: 6px; padding: 3px 7px; letter-spacing: 0.02em;
}
.tier-badge.big { font-size: 0.95rem; min-width: 40px; padding: 4px 9px; }
.cls-badge {
  display: inline-block; font-size: 0.76rem; font-weight: 700; color: var(--cls, var(--accent));
  border: 1px solid var(--cls, var(--accent)); border-radius: 6px; padding: 2px 6px;
}
.sc-nat { font-size: 0.8rem; color: var(--muted); }
.tag {
  display: inline-block; font-size: 0.72rem; line-height: 1; padding: 4px 6px; border-radius: 4px;
  background: var(--surface-2); color: var(--muted); margin-left: 4px; vertical-align: middle;
}
.tag.prem { background: var(--warn-soft); color: var(--warn); }
.tag.unrel { background: transparent; color: var(--muted); border: 1px dashed var(--muted); padding: 3px 5px; }
.ship-note { margin: 6px 0 0; font-size: 0.82rem; color: var(--muted); }
.ship-note.unrel { border-left: 3px dashed var(--muted); padding-left: 8px; }
.tag.hidden { background: var(--hidden-soft); color: var(--hidden); }
.tag.conflict { background: var(--warn-soft); color: var(--warn); }
.tag.src { margin-left: 0; margin-right: 4px; }
.chips { display: flex; flex-wrap: wrap; gap: 6px; }
.chip { display: inline-block; font-size: 0.84rem; padding: 4px 10px; border-radius: 999px; background: var(--surface-2); }
.chip.good { background: var(--good-soft); color: var(--good); }
.chip.bad { background: var(--bad-soft); color: var(--bad); }

/* ---- 함선 카드 (목록) ---- */
.ship-grid {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px;
}
.scard {
  display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 12px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--cls);
  border-radius: 14px; padding: 10px 12px 10px 10px; color: var(--text); box-shadow: var(--shadow);
  transition: transform 0.12s, border-color 0.12s;
}
.scard.prem { border-top-color: var(--gold); border-right-color: var(--gold); border-bottom-color: var(--gold); }
a.scard:hover { text-decoration: none; transform: translateY(-1px); border-color: var(--cls); }
a.scard:active { transform: scale(0.99); }
.sc-left { display: flex; align-items: center; justify-content: center; }
.sc-hex { width: 100%; }
.sc-right { min-width: 0; }
.sc-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sc-name { font-weight: 800; font-size: 1.08rem; margin-top: 4px; line-height: 1.25; overflow-wrap: anywhere; }
.sc-ko { color: var(--muted); font-size: 0.88rem; }
.sc-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 10px; margin-top: 8px; }
.sc-stat { display: flex; justify-content: space-between; gap: 6px; font-size: 0.84rem; border-bottom: 1px dashed var(--border); padding-bottom: 2px; }
.sc-l { color: var(--muted); white-space: nowrap; }
.sc-v { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

.more {
  display: block; width: 100%; margin-top: 12px; padding: 14px; font: inherit; font-weight: 700;
  color: var(--accent); background: var(--surface); border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
}
.more[hidden] { display: none; }

/* ---- 육각형 ---- */
.hex-mini { display: block; width: 100%; height: auto; }
.hex-svg { display: block; width: 100%; max-width: 340px; height: auto; margin: 0 auto; }
.hex-ring { fill: none; stroke: var(--border); stroke-width: 1.2; }
.hex-outer { fill: var(--surface-2); }
.hex-axis { stroke: var(--border); stroke-width: 1; }
.hex-shape { fill: var(--cls, var(--accent)); fill-opacity: 0.3; stroke: var(--cls, var(--accent)); stroke-width: 2.5; stroke-linejoin: round; }
.hex-mini .hex-shape { stroke-width: 2; }
.hex-dot { fill: var(--cls, var(--accent)); }
.hex-label { fill: var(--text); font-size: 19px; font-weight: 700; }
.hex-score { fill: var(--cls, var(--accent)); font-size: 18px; font-weight: 800; }
.hex-score.none { fill: var(--muted); font-weight: 400; font-size: 15px; }
.hex-note { margin: 2px 0 0; text-align: center; color: var(--muted); font-size: 0.78rem; }

/* ---- 상세 카드 (왼쪽: 배 + 육각형 / 오른쪽: 스탯) ---- */
.hero {
  display: grid; grid-template-columns: minmax(0, 380px) minmax(0, 1fr); gap: 18px;
  background: var(--surface); border: 1px solid var(--border); border-top: 5px solid var(--cls);
  border-radius: 16px; padding: 16px; box-shadow: var(--shadow);
}
.hero.prem { border-color: var(--gold); border-top-color: var(--cls); }
.hero-left { min-width: 0; }
.hero-badges { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.hero-name { margin: 8px 0 0; font-size: 1.6rem; line-height: 1.2; overflow-wrap: anywhere; }
.hero-ko { margin: 2px 0 0; color: var(--muted); font-size: 1.05rem; }
.hero-tags { margin-top: 4px; }
.hero-tags .tag:first-child { margin-left: 0; }
.hero-hex { margin-top: 10px; }
.hex-legend { margin-top: 8px; }
.hl-cap { margin: 0 0 4px; color: var(--muted); font-size: 0.76rem; }
.hex-legend ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 5px; }
.hex-legend li { display: grid; grid-template-columns: 6.2em minmax(0, 1fr) 2.2em; align-items: center; gap: 6px; font-size: 0.82rem; }
.hl-k { color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hl-bar { height: 7px; border-radius: 4px; background: var(--surface-2); overflow: hidden; }
.hl-fill { display: block; height: 100%; width: 0; border-radius: 4px; background: var(--cls, var(--accent)); opacity: 0.75; }
.hl-fill.hi { opacity: 1; }
.hl-fill.lo { opacity: 0.4; }
.hl-v { text-align: right; font-variant-numeric: tabular-nums; }

.hero-right { min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 18px; align-content: start; }
.sg h3 {
  margin: 0 0 4px; font-size: 0.82rem; color: var(--cls); text-transform: none; letter-spacing: 0.02em;
  border-bottom: 2px solid var(--cls); padding-bottom: 3px;
}
.sg dl { margin: 0; }
.sr { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); }
.sr:last-child { border-bottom: 0; }
.sr dt { color: var(--muted); font-size: 0.86rem; min-width: 0; }
.sr dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; text-align: right; overflow-wrap: anywhere; }
.hid { margin-left: 4px; font-size: 0.66rem; color: var(--hidden); background: var(--hidden-soft); border-radius: 3px; padding: 1px 4px; vertical-align: middle; }

/* ---- 등급 ---- */
.grade {
  display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 5px;
  border-radius: 6px; font-weight: 900; font-size: 0.78rem; color: #fff; background: var(--muted);
}
.grade.big { min-width: 34px; height: 34px; font-size: 1.1rem; border-radius: 9px; }
.g-Sp { background: #8f1b0a; }
.g-S { background: #b5320c; }
.g-Sm { background: #c9521f; }
.g-Ap { background: #9c5a0a; }
.g-A { background: #b0730f; }
.g-Am { background: #c08a2c; }
.g-Bp { background: #1b5f9e; }
.g-B { background: #2b78c2; }
.g-Bm { background: #4b90cf; }
.g-Cp { background: #46525e; }
.g-C { background: #5d6b7a; }
.g-Cm { background: #74818f; }
.g-D { background: #8a97a5; }
.g-na { background: transparent; color: var(--muted); border: 1px dashed var(--border); font-size: 0.72rem; }
.grade.big.g-na { font-size: 0.8rem; }
.grade { white-space: nowrap; }
.feat-role { border-left: 3px solid var(--cls, var(--accent)); background: var(--accent-soft) !important; }
.sc-type { color: var(--cls, var(--muted)); font-weight: 600; }
.sc-var { margin-top: 2px; font-size: 0.76rem; color: var(--accent); font-weight: 600; }

/* ---- 상세 카드 상단 (이름·등급·유형·종합 평가) ---- */
.hero-top { grid-column: 1 / -1; }
.hero-title { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-top: 6px; }
.hero-grade { display: flex; flex-direction: column; align-items: center; gap: 3px; flex: none; text-align: center; }
.hero-type { font-size: 0.78rem; font-weight: 700; color: var(--cls); max-width: 110px; line-height: 1.25; }
.grade-cap { font-size: 0.7rem; color: var(--muted); white-space: nowrap; }
.grade-why { font-size: 0.66rem; color: var(--muted); white-space: nowrap; }
.summary {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2);
  border-left: 3px solid var(--cls); font-size: 0.95rem; line-height: 1.6;
}

/* ---- 특징 목록 (카드 전체 폭) ---- */
.hero-feat { grid-column: 1 / -1; }
.feat { list-style: none; margin: 4px 0 0; padding: 0; display: grid; gap: 5px; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
.feat li { padding: 6px 9px; border-radius: 8px; background: var(--surface-2); font-size: 0.86rem; line-height: 1.35; }
.feat .feat-t { font-weight: 700; display: block; }
.feat .feat-s { color: var(--muted); font-size: 0.8rem; }
.feat-good { border-left: 3px solid var(--good); }
.feat-bad { border-left: 3px solid var(--bad); }
.feat-info { border-left: 3px solid var(--accent); }

/* ---- 블록 (스킬 분석, 계열 비교) ---- */
.block { margin-top: 14px; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.block h2 { margin: 0 0 8px; font-size: 1.05rem; }
.skill-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 8px; }
.skill-card { background: var(--surface-2); border-radius: 10px; padding: 10px 12px; display: grid; gap: 4px; }
.sk-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.sk-name { font-size: 0.98rem; }
.sk-uses { font-weight: 700; color: var(--muted); }
.sk-grade { margin-left: auto; }
.sk-effect { margin: 0; font-size: 0.9rem; }
.sk-meta { margin: 0; font-size: 0.8rem; color: var(--muted); }
.sk-pro, .sk-con { margin: 0; font-size: 0.82rem; padding-left: 16px; position: relative; }
.sk-pro::before { content: "+"; position: absolute; left: 2px; color: var(--good); font-weight: 900; }
.sk-con::before { content: "−"; position: absolute; left: 2px; color: var(--bad); font-weight: 900; }
.verdict { margin: 0 0 8px; line-height: 1.6; }
/* ---- 평가 등급 필터 · 정렬 ---- */
.grade-bar { display: flex; align-items: center; gap: 5px; overflow-x: auto; padding: 8px 0 2px; scrollbar-width: none; }
.grade-bar::-webkit-scrollbar { display: none; }
.gb-label { flex: none; font-size: 0.74rem; color: var(--muted); margin-right: 2px; }
.gb-btn { flex: none; min-width: 38px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); font: inherit; font-size: 0.82rem; font-weight: 800; cursor: pointer; }
.gb-btn.g-S { background: var(--surface); color: #b5320c; }
.gb-btn.g-A { background: var(--surface); color: #b0730f; }
.gb-btn.g-B { background: var(--surface); color: #2b78c2; }
.gb-btn.g-C { background: var(--surface); color: #5d6b7a; }
.gb-btn.g-D { background: var(--surface); color: #8a97a5; }
.gb-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.count-row { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.count-row .count { margin: 8px 0; }
.sort-box { display: flex; align-items: center; gap: 6px; font-size: 0.8rem; color: var(--muted); }
.sort-box select { max-width: 190px; padding: 6px 8px; font-size: 0.82rem; }

/* ---- 언어 전환 ---- */
.lang-btn { flex: none; margin-left: auto; margin-right: 6px; padding: 4px 10px; border-radius: 999px; font: inherit;
  font-size: 0.78rem; font-weight: 700; cursor: pointer; border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent; color: inherit; }
#drawer .lang-btn { margin: 12px 16px; border-color: var(--border); color: var(--text); align-self: flex-start; }

/* ---- 국기 (공식 사이트의 인게임 국기) ---- */
.flag { width: 22px; height: 14px; border-radius: 2px; object-fit: cover; vertical-align: -2px; margin-right: 4px;
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18); }
.nation-bar { display: flex; gap: 6px; overflow-x: auto; padding: 8px 0 2px; margin: 0; max-width: 100%;
  scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.nation-bar::-webkit-scrollbar { display: none; }
.nat-btn { flex: none; display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 52px;
  padding: 5px 6px 4px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--muted); font: inherit; font-size: 0.7rem; line-height: 1.1; cursor: pointer; }
.nat-btn .flag { margin: 0; }
.flag-lg { width: 36px; height: 22px; border-radius: 3px; }
.nat-btn[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-soft); color: var(--text); font-weight: 700; }
.filters { min-width: 0; }
.comm-head { margin: 0 0 8px; }
.editor .traits { margin-top: 8px; gap: 5px; }
.chip.trait { background: var(--accent-soft); color: var(--accent); font-weight: 600; font-size: 0.8rem; padding: 3px 9px; }
.ed-line { margin: 6px 2px 0; font-size: 0.88rem; line-height: 1.55; }
.ed-line b { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 6px; font-size: 0.74rem;
  background: var(--surface-2); color: var(--cls, var(--accent)); vertical-align: 1px; }
details.auto-sum { margin: 8px 2px 0; }
details.auto-sum summary { cursor: pointer; font-size: 0.8rem; color: var(--muted); }
details.auto-sum p { margin: 6px 0 0; font-size: 0.86rem; line-height: 1.55; color: var(--muted); }
.hero-comm { margin: 6px 2px 0; font-size: 0.82rem; }
.hero-comm b.comm-good { color: var(--good); }
.hero-comm b.comm-bad { color: var(--bad); }
.chip.comm-good { background: var(--good-soft); color: var(--good); font-weight: 700; }
.chip.comm-bad { background: var(--bad-soft); color: var(--bad); font-weight: 700; }
.chip.comm-mid { font-weight: 700; }
.comm-list { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.comm-list li { display: grid; grid-template-columns: 70px minmax(0, 1fr); gap: 8px; align-items: baseline; font-size: 0.85rem; }
.cm-rate { font-weight: 800; font-size: 0.8rem; text-align: center; padding: 2px 2px; border-radius: 6px; background: var(--surface-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-src { min-width: 0; overflow-wrap: anywhere; }
.cm-src a { color: inherit; }
.fp-note { margin: -4px 0 8px; font-size: 0.78rem; color: var(--muted); }
.fp-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.fp-list li { display: grid; grid-template-columns: minmax(0, 1.4fr) auto minmax(50px, 0.8fr) 44px; align-items: center; gap: 8px; font-size: 0.86rem; }
.fp-l { color: var(--muted); min-width: 0; }
.fp-v { font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.fp-bar { position: relative; height: 8px; background: var(--surface-2); border-radius: 4px; overflow: hidden; }
.fp-fill { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 4px; }
.fp-fill.up { background: var(--good); }
.fp-fill.down { background: var(--bad); }
.fp-mid { position: absolute; left: 50%; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: 0.35; }
.fp-vs { font-size: 0.78rem; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.fp-vs.up { color: var(--good); }
.fp-vs.down { color: var(--bad); }
.diffs { list-style: none; margin: 8px 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.diffs li { font-size: 0.82rem; padding: 3px 8px; border-radius: 999px; }
.diffs li.up { background: var(--good-soft); color: var(--good); }
.diffs li.down { background: var(--bad-soft); color: var(--bad); }
.fam-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 4px; }
.fam-list a { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px; color: var(--text); }
.fam-list a:hover { text-decoration: none; background: var(--surface-2); }
.fam-list li.me a { background: var(--accent-soft); font-weight: 700; }
.fam-list .tag { margin-left: 0; }
.fm-score { margin-left: auto; color: var(--muted); font-size: 0.85rem; font-variant-numeric: tabular-nums; }

/* ---- 랭킹 ---- */
.cls-seg { display: flex; width: 100%; margin-bottom: 8px; }
.cls-seg button { flex: 1; padding: 9px 0; font-weight: 700; }
.rank-ctrl { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); gap: 8px; margin-bottom: 8px; }
.rank-ctrl select { font: inherit; color: inherit; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 9px 10px; min-width: 0; }
.rank-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.rank-list a {
  display: grid; grid-template-columns: 30px minmax(0, 1fr) auto 24px; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--cls); border-radius: 10px;
  padding: 8px 10px; color: var(--text);
}
.rank-list a:hover { text-decoration: none; border-color: var(--cls); }
.rk-n { font-weight: 800; color: var(--muted); text-align: center; font-variant-numeric: tabular-nums; }
.rk-n.top { color: #fff; background: var(--cls); border-radius: 6px; padding: 2px 0; }
.rk-main { min-width: 0; display: grid; gap: 4px; }
.rk-name { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rk-name .tag { margin-left: 4px; }
.rk-bar { height: 5px; background: var(--surface-2); border-radius: 3px; overflow: hidden; }
.rk-fill { display: block; height: 100%; background: var(--cls); border-radius: 3px; }
.rk-v { font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: 0.92rem; }

/* ---- 분석 (강점/약점) : 육각형 아래 ---- */
.analysis { margin-top: 12px; display: grid; gap: 8px; }
.an-row { display: flex; align-items: flex-start; gap: 8px; }
.an-k { flex: none; font-weight: 800; font-size: 0.82rem; padding-top: 4px; min-width: 30px; }
.an-row .muted { font-size: 0.82rem; padding-top: 4px; }

/* ---- 탭 ---- */
.tabs { display: flex; gap: 4px; margin: 16px 0 10px; border-bottom: 1px solid var(--border); overflow-x: auto; }
.tabs button {
  font: inherit; background: none; border: 0; color: var(--muted); padding: 10px 14px; cursor: pointer; white-space: nowrap;
  border-bottom: 2px solid transparent;
}
.tabs button[aria-selected="true"] { color: var(--text); border-bottom-color: var(--accent); font-weight: 700; }
.seg { display: inline-flex; border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.seg button { font: inherit; font-size: 0.85rem; border: 0; background: var(--surface); color: var(--muted); padding: 6px 12px; cursor: pointer; }
.seg button.on { background: var(--accent); color: #fff; }
.seg button:disabled { opacity: 0.4; cursor: default; }
.legend { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 16px; color: var(--muted); font-size: 0.85rem; margin: 4px 0 6px; }

/* ---- 출처별 상세 표 ---- */
.table-wrap { overflow-x: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; }
table { width: 100%; border-collapse: collapse; }
th, td { padding: 8px 10px; text-align: left; border-bottom: 1px solid var(--border); }
tbody tr:last-child td { border-bottom: 0; }
th { font-size: 0.8rem; color: var(--muted); font-weight: 600; background: var(--surface-2); }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
td.wrap-cell { min-width: 220px; }
.cell-sources { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.cell-sources span { font-variant-numeric: tabular-nums; }
tr.conflict td { background: var(--warn-soft); }

details.group { margin-top: 12px; }
details.group > summary {
  cursor: pointer; font-weight: 700; font-size: 1.02rem; padding: 8px 2px; list-style: none;
  display: flex; align-items: center; gap: 8px;
}
details.group > summary::-webkit-details-marker { display: none; }
details.group > summary::before { content: "▸"; color: var(--muted); transition: transform 0.15s; }
details.group[open] > summary::before { transform: rotate(90deg); }
details.group > summary .n { color: var(--muted); font-weight: 400; font-size: 0.85rem; }

/* ---- 패치 이력 / 일반 카드 ---- */
.timeline { list-style: none; margin: 0; padding: 0; }
.timeline > li { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.timeline .ver { font-weight: 800; }
.timeline ul { margin: 6px 0 0; padding-left: 18px; }
.chg-old { color: var(--bad); }
.chg-new { color: var(--good); font-weight: 700; }
.ship-block { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 8px; }
.ship-block h3 { margin: 0 0 6px; font-size: 1rem; }
.ship-block ul { margin: 0; padding-left: 18px; }

.cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.card { display: block; background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; color: var(--text); box-shadow: var(--shadow); }
a.card:hover { text-decoration: none; border-color: var(--accent); }
.card-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.card-name { font-weight: 800; font-size: 1.02rem; color: var(--text); }
a.card-name { color: var(--accent); }
.card-meta { color: var(--muted); font-size: 0.9rem; margin-top: 3px; }

.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-top: 12px; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; }
.kpi .label { color: var(--muted); font-size: 0.8rem; }
.kpi .value { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }

.about { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 14px; }
.desc { margin: 0 0 10px; }
.about-h { font-size: 0.95rem; margin: 14px 0 6px; }
.skill-list { margin: 0 0 10px; padding-left: 18px; }
.skill-list li { margin: 4px 0; }
.empty, .error { padding: 24px; text-align: center; color: var(--muted); }
.error { color: var(--bad); }


/* ---- 태블릿 ---- */
@media (max-width: 900px) {
  .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; }
  .hero-right { grid-template-columns: minmax(0, 1fr); }
}

/* ---- 휴대폰 ---- */
@media (max-width: 720px) {
  body { font-size: 16px; padding-bottom: calc(54px + env(safe-area-inset-bottom)); }
  .wrap { padding: 0 12px; }
  .top-inner { min-height: 48px; }
  .nav { display: none; }

  /* 하단 바로가기 (얇게) */
  .bottom-nav {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
    background: var(--surface); border-top: 1px solid var(--border);
    padding-bottom: env(safe-area-inset-bottom);
  }
  .bottom-nav a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
    padding: 6px 0 4px; color: var(--muted); font-size: 0.68rem; min-height: 50px;
  }
  .bottom-nav a:hover { text-decoration: none; }
  .bottom-nav a.on { color: var(--accent); font-weight: 700; }
  .bottom-nav svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
  main { padding-top: 10px; padding-bottom: 20px; }
  h1 { font-size: 1.25rem; margin-bottom: 8px; }
  .sub { font-size: 0.9rem; }

  .filter-btn { display: inline-flex; }
  .filter-panel { display: none; }
  .filter-panel.open { display: grid; }
  .filters input, .filters select { font-size: 16px; padding: 11px 10px; width: 100%; min-width: 0; }
  .filters input[type="search"] { padding-left: 38px; }

  .ship-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .scard { grid-template-columns: 92px minmax(0, 1fr); gap: 10px; padding: 9px 10px 9px 8px; }
  .sc-name { font-size: 1.04rem; }
  .sc-stat { font-size: 0.8rem; }

  /* 상세 카드(휴대폰): 위에 육각형 + 축별 점수 막대를 나란히, 아래에 스탯을 두 칸으로 → 육각형 밑 빈 공간 없음 */
  .hero { grid-template-columns: minmax(0, 1fr); gap: 10px; padding: 12px 10px; border-radius: 14px; }
  .hero-left { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; align-items: center; }
  .hero-left .hero-hex { margin-top: 0; }
  .hex-legend { margin-top: 0; }
  .hex-legend li { grid-template-columns: 4.6em minmax(0, 1fr) 1.9em; gap: 4px; font-size: 0.76rem; }
  .hl-cap { font-size: 0.68rem; }
  .hero-name { font-size: 1.18rem; }
  .hero-ko { font-size: 0.92rem; }
  .tier-badge.big { font-size: 0.82rem; min-width: 32px; padding: 3px 7px; }
  .hero-right { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; }
  .sg h3 { font-size: 0.76rem; }
  .sr { padding: 3px 0; gap: 4px; }
  .sr dt { font-size: 0.74rem; }
  .sr dd { font-size: 0.82rem; }
  .hid { display: none; }
  .hex-note { font-size: 0.68rem; }

  .an-row { flex-direction: column; gap: 4px; }
  .an-k { padding-top: 0; }
  .chip { font-size: 0.74rem; padding: 3px 8px; }
  .chips { gap: 4px; }

  /* 출처별 상세 표 → 줄 단위 */
  table.stats thead { display: none; }
  table.stats, table.stats tbody { display: block; }
  table.stats tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 12px; padding: 10px 12px; border-bottom: 1px solid var(--border); }
  table.stats tbody tr:last-child { border-bottom: 0; }
  table.stats tr.conflict { background: var(--warn-soft); }
  table.stats td { display: block; padding: 0; border: 0; background: none; }
  table.stats td.stat-val { font-weight: 700; text-align: right; }
  table.stats td.stat-src { grid-column: 1 / -1; min-width: 0; font-size: 0.8rem; color: var(--muted); }
  .tabs button { flex: 1; padding: 11px 6px; font-size: 0.92rem; }
  .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 360px) {
  .hero-right { grid-template-columns: minmax(0, 1fr); }
  .scard { grid-template-columns: 80px minmax(0, 1fr); }
}

/* ---- 평가 등급 산정 근거 ---- */
.grade-basis summary { cursor: pointer; font-weight: 700; font-size: 0.92rem; }
.grade-basis ul { margin: 8px 0 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.86rem; line-height: 1.5; }

/* ---- 스킬 아이콘 (공식 인게임 아이콘) ---- */
.sk-ic { flex: none; border-radius: 6px; background: #1d2633; object-fit: contain; }
.sk-head { align-items: center; }
.sk-head .sk-ic { margin-right: 2px; }
.sk-dt { display: flex; align-items: center; gap: 5px; }
.sk-dt .sk-ic { border-radius: 4px; }