@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans+KR:wght@400;500;600;700&display=swap");

:root {
  /* 이 선언이 없으면 크롬 안드로이드가 "다크 대응 안 된 사이트"로 보고
     페이지를 임의로 어둡게 뒤집는다. 그때 이미지는 반전되지 않아
     밝은 배경이 그대로 남아 하얗게 튄다. */
  color-scheme: light;

  --ink: #17211f;
  --muted: #65736f;
  --line: #c7d4cd;
  --panel: #f7faf7;
  --panel-strong: #e8f1ec;
  --accent: #0f6f63;
  --accent-strong: #084c45;
  --blue: #1f63d7;
  --gold: #c88a2c;
  --danger: #bc3d2d;
  --shadow: 0 20px 60px rgba(20, 44, 38, 0.14);
  --main-panel-min-height: 825px;
}

* {
  box-sizing: border-box;
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--ink);
  font-family: "IBM Plex Sans KR", "Noto Sans KR", sans-serif;
  background:
    linear-gradient(120deg, rgba(15, 111, 99, 0.12), transparent 34%),
    radial-gradient(circle at 80% 10%, rgba(200, 138, 44, 0.2), transparent 26%),
    repeating-linear-gradient(135deg, rgba(23, 33, 31, 0.035) 0 1px, transparent 1px 18px),
    #eef4ef;
}

/* 버튼·입력창은 그냥 두면 브라우저 기본 글꼴로 나온다.
   글꼴은 본문을 따르되 크기·굵기는 주변 UI(13px)에 맞춘다 */
button,
input,
select,
textarea {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
}

button {
  font-weight: 700;
}

button,
input,
select {
  font-family: inherit;
}

.app-shell {
  width: min(1180px, calc(100vw - 32px));
  margin: 0 auto;
  padding: 6px 0 10px;
}

.top-tabs,
.toolbar,
.result-band,
.workspace {
  border: 1px solid rgba(23, 33, 31, 0.12);
  background: rgba(247, 250, 247, 0.9);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.top-tabs {
  display: grid;
  /* 마지막 auto는 오른쪽 끝 문의 버튼 자리. 탭은 그대로 6등분한다 */
  grid-template-columns: repeat(6, 1fr) auto;
  gap: 4px;
  padding: 5px;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid rgba(23, 33, 31, 0.12);
}

.tab-button {
  min-height: 29px;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--muted);
  background: rgba(255, 255, 255, 0.62);
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.tab-button.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.toolbar {
  display: grid;
  grid-template-columns: 190px 1fr;
  gap: 16px;
  align-items: end;
  padding: 12px 16px;
  border-radius: 0;
}

.brand-block h1,
.panel-heading h2,
.item-hero h2 {
  margin: 0;
  letter-spacing: 0;
}

.brand-block h1 {
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
}

.eyebrow {
  margin: 0 0 5px;
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.control-grid {
  display: grid;
  grid-template-columns: minmax(150px, 0.8fr) minmax(150px, 0.8fr) minmax(220px, 1.4fr);
  gap: 10px;
}

.field {
  display: grid;
  gap: 4px;
}

.field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.field input,
.field select {
  width: 100%;
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.field input:focus,
.field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

.result-band {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 8px 18px;
  border-top: 0;
  border-bottom: 0;
}

.result-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: baseline;
  color: var(--muted);
}

.result-meta strong {
  color: var(--accent-strong);
  font-size: 18px;
}

.pager {
  display: flex;
  align-items: center;
  gap: 8px;
}

.icon-button {
  display: inline-grid;
  width: 34px;
  height: 34px;
  place-items: center;
  border: 1px solid var(--accent);
  border-radius: 8px;
  color: #fff;
  background: var(--accent);
  font-size: 23px;
  line-height: 1;
  cursor: pointer;
}

.icon-button:disabled {
  border-color: var(--line);
  color: #8b9995;
  background: #edf3f0;
  cursor: not-allowed;
}

.workspace {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 300px;
  gap: 16px;
  padding: 16px;
  border-radius: 0 0 8px 8px;
}

.main-panel[hidden],
.addon-content[hidden],
.coefficient-select[hidden],
.coefficient-detail[hidden] {
  display: none !important;
}

.main-panel {
  min-height: var(--main-panel-min-height);
}

#equipmentView {
  border: 1px solid rgba(23, 33, 31, 0.12);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(247, 250, 247, 0.9);
  box-shadow: var(--shadow);
}

.addon-view,
.placeholder-view {
  border: 1px solid rgba(23, 33, 31, 0.12);
  border-radius: 0 0 8px 8px;
  background: #1a1a1a;
  box-shadow: var(--shadow);
  padding: 10px;
}

.addon-titlebar {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 50px;
  border: 1px solid #58616c;
  border-radius: 8px;
  background: #151b22;
  color: #58c7ff;
}

.addon-titlebar h1 {
  margin: 0;
  font-size: 25px;
  line-height: 1;
}

.addon-window {
  margin-top: 10px;
  border: 1px solid #58616c;
  border-radius: 8px;
  background: #161b22;
  padding: 20px;
}

.addon-subtabs {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 12px;
}

.addon-tab {
  min-width: 190px;
  min-height: 46px;
  border: 1px solid transparent;
  border-radius: 7px;
  color: #fff;
  background: transparent;
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
}

.addon-tab.is-active {
  border-color: #31724c;
  background: #1e3f2f;
}

.addon-content {
  min-height: 545px;
  border: 1px solid #2e3a4a;
  border-radius: 8px;
  background: #101720;
  padding: 10px;
  color: #e6edf3;
}

.addon-content-header {
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: end;
  margin-bottom: 12px;
  color: #8b949e;
}

.addon-content-header h2,
.simulator-menu-copy h2 {
  margin: 0;
  color: #58a6ff;
  font-size: 22px;
}

.addon-content-header span,
.simulator-menu-copy p {
  color: #8b949e;
  font-size: 13px;
}

.addon-kicker {
  margin: 0 0 4px;
  color: #8b949e;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.character-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(96px, 1fr));
  gap: 14px;
  align-content: start;
  max-height: 500px;
  overflow: auto;
  padding: 16px;
  border: 1px solid #1e2b3a;
  border-radius: 8px;
  background: #151b22;
}

.character-card {
  display: grid;
  gap: 6px;
  align-content: start;
  justify-items: center;
  border: 0;
  background: transparent;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}

.character-portrait {
  display: grid;
  width: 116px;
  height: 116px;
  place-items: center;
  overflow: hidden;
  border: 1px solid #30363d;
  border-radius: 10px;
  background: #161b22;
  transition: border-color 160ms ease, background-color 160ms ease, transform 160ms ease;
}

.character-card:hover .character-portrait {
  border-color: #58a6ff;
  background: #1c2128;
  transform: translateY(-2px);
}

.character-portrait img {
  width: 114px;
  height: 114px;
  object-fit: contain;
}

.coefficient-detail {
  display: grid;
  gap: 10px;
}

.coefficient-detail-header {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto auto auto auto auto;
  gap: 8px;
  align-items: center;
  min-height: 46px;
  border: 1px solid #253247;
  border-radius: 8px;
  background: #151b22;
  padding: 8px 10px;
}

.ghost-button {
  min-height: 38px;
  padding: 0 10px;
  white-space: nowrap;
  border: 1px solid #263242;
  border-radius: 6px;
  color: #fff;
  background: #0d1117;
  cursor: pointer;
}

/* 초기화 버튼: 크기·글꼴은 "← 뒤로"(.ghost-button)와 동일하게, hover만 구분 */
.reset-button {
  white-space: nowrap;
}

.coefficient-detail-header .reset-button:hover {
  border-color: var(--danger);
  color: #fff;
  background: var(--danger);
}

.coefficient-selected {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: #58a6ff;
  font-size: 15px;
  white-space: nowrap;
}

.coefficient-selected img {
  width: 26px;
  height: 26px;
  object-fit: contain;
}

.dark-field {
  display: grid;
  gap: 4px;
}

.dark-field span {
  color: #8b949e;
  font-size: 12px;
  font-weight: 700;
}

.dark-field input,
.dark-field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid #30363d;
  border-radius: 0;
  padding: 0 10px;
  color: #fff;
  background: #0d1117;
  outline: none;
}

.coefficient-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 288px;
  gap: 10px;
}

.coefficient-table-card,
.coefficient-side,
.dark-card,
.simulator-menu-shell,
.placeholder-card {
  border: 1px solid #263242;
  border-radius: 8px;
  background: #151b22;
}

.coefficient-table-card {
  overflow: auto;
}

.coefficient-table,
.side-score-table {
  width: 100%;
  border-collapse: collapse;
  color: #fff;
  font-size: 13px;
}

.coefficient-table th,
.coefficient-table td,
.side-score-table th,
.side-score-table td {
  border-bottom: 1px solid #2d3744;
  padding: 3px 8px;
  text-align: center;
  white-space: nowrap;
}

/* 사이드 보조 계수 테이블: 5열이 288px 안에 들어오도록 고정 폭 */
.side-score-table {
  table-layout: fixed;
}

.side-score-table th,
.side-score-table td {
  padding: 3px 3px;
}

.side-score-table th:first-child,
.side-score-table td:first-child {
  width: 46px;
  padding-left: 6px;
}

.side-score-table thead th:last-child,
.side-score-table tbody td:last-child {
  width: 52px;
}

.coefficient-table thead th,
.side-score-table thead th {
  color: #b7c4cf;
  background: #0f141b;
}

.coefficient-table tbody th,
.side-score-table tbody th {
  color: #fff;
}

.coefficient-table td,
.side-score-table td:last-child {
  color: #58a6ff;
  font-weight: 800;
}

.coefficient-side {
  display: grid;
  align-content: start;
  gap: 10px;
  padding: 0 0 10px;
}

.toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  padding: 0 10px;
  color: #fff;
  font-size: 12px;
}

.toggle-row input {
  width: 46px;
  height: 24px;
  accent-color: #58a6ff;
}

/* 계수 계산기: 메인 테이블 컬럼 폭
   부위·계수는 고정, 아이템은 최장명 실측폭, 남는 공간은 숫자 입력 컬럼들이 나눠 가져 표를 꽉 채움 */
.coefficient-table {
  table-layout: fixed;
  width: 100%;
}

.coefficient-table thead th {
  white-space: normal;
  line-height: 1.25;
}

.coefficient-table tbody th,
.coefficient-table tbody td {
  white-space: nowrap;
}

.coefficient-table th:nth-child(1),
.coefficient-table td:nth-child(1) {
  width: 104px;
}

.coefficient-table th:nth-child(2),
.coefficient-table td:nth-child(2) {
  width: var(--item-col-width, 200px);
  padding-left: 10px;
  padding-right: 10px;
}

.coefficient-table th:nth-child(3),
.coefficient-table td:nth-child(3),
.coefficient-table th:nth-child(4),
.coefficient-table td:nth-child(4),
.coefficient-table th:nth-child(5),
.coefficient-table td:nth-child(5),
.coefficient-table th:nth-child(6),
.coefficient-table td:nth-child(6),
.coefficient-table th:nth-child(7),
.coefficient-table td:nth-child(7) {
  width: auto;
  min-width: 64px;
  padding-left: 4px;
  padding-right: 4px;
}

/* 강화 열은 "강화 마법방어"처럼 제목이 길어 줄바꿈이 났다.
   남는 폭은 계수 열에서 가져온다 */
.coefficient-table th:nth-child(4),
.coefficient-table td:nth-child(4),
.coefficient-table th:nth-child(6),
.coefficient-table td:nth-child(6) {
  width: 84px;
}

.coefficient-table th:nth-child(8),
.coefficient-table td:nth-child(8) {
  width: 78px;
}

/* 계수 계산기: 편집 가능한 입력 셀 (밝은 테마, 편집 가능함을 시각적으로 표시) */
.coefficient-table input,
.side-score-table input {
  width: 100%;
  min-width: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: #eef4f0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  padding: 3px 2px;
  outline: none;
  -moz-appearance: textfield;
}

.coefficient-table input::-webkit-outer-spin-button,
.coefficient-table input::-webkit-inner-spin-button,
.side-score-table input::-webkit-outer-spin-button,
.side-score-table input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.coefficient-table input:hover,
.side-score-table input:hover {
  background: #e4ede8;
}

.coefficient-table input:focus,
.side-score-table input:focus {
  background: #fff;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 111, 99, 0.16);
}

.coefficient-table select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  padding: 4px 8px;
  outline: none;
  cursor: pointer;
}

.coefficient-table select:hover {
  border-color: var(--accent);
}

.coefficient-table select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

.coefficient-table td.is-manual {
  color: var(--muted);
  font-weight: 600;
}

.coefficient-table td.coeff-cell,
.side-score-table td.coeff-cell {
  color: var(--blue);
  font-weight: 800;
  font-size: 13px;
}

/* 계수 계산기: 메인 테이블 합계 행 (카드형, 계수 강조) */
.coefficient-maintotal {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 8px;
  margin-top: 10px;
}

.coefficient-maintotal div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.coefficient-maintotal div span {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

.coefficient-maintotal div strong {
  color: var(--accent-strong);
  font-size: 15px;
}

.coefficient-maintotal div:last-child {
  border-color: rgba(15, 111, 99, 0.34);
  background: var(--panel-strong);
}

.coefficient-maintotal div:last-child strong {
  color: var(--accent);
  font-size: 16px;
}

/* 계수 계산기: 어빌리티 인라인 행 (해당 장비 바로 아래) */
/* 배경 틴트 제거 → 왼쪽 액센트 선으로 하위 행 표시, 입력창은 흰 배경+테두리로 구분 */
.coefficient-table tr.ability-inline > th {
  color: var(--muted);
  font-weight: 600;
  box-shadow: inset 3px 0 0 rgba(15, 111, 99, 0.4);
}

.coefficient-table td.ability-inline-cell {
  text-align: left;
  white-space: nowrap;
  padding-left: 12px;
}

.ability-field {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-right: 20px;
}

.ability-field > span {
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 어빌리티/시에나 입력창: 흰 배경 + 테두리로 명확히 구분 */
.coefficient-table td.ability-inline-cell input {
  width: 82px;
  min-width: 82px;
  background: #fff;
  border: 1px solid var(--line);
}

.coefficient-table td.ability-inline-cell input:hover {
  background: #fff;
  border-color: var(--accent);
}

.coefficient-table td.ability-inline-cell input:focus {
  background: #fff;
  border-color: var(--accent);
}

.damage-layout {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.dark-card {
  display: grid;
  align-content: start;
  gap: 12px;
  min-height: 260px;
  padding: 16px;
}

.dark-card h3 {
  margin: 0;
  color: #fff;
}

.result-card strong {
  color: #58a6ff;
  font-size: 26px;
}

.result-card p {
  margin: 0;
  color: #8b949e;
}

.simulator-menu-shell {
  display: grid;
  grid-template-columns: 310px 1fr;
  gap: 18px;
  min-height: 470px;
  padding: 22px;
  color: #e6edf3;
}

.simulator-menu-copy {
  align-self: start;
}

.simulator-slot-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  align-content: start;
}

.simulator-slot {
  display: grid;
  gap: 8px;
  min-height: 140px;
  border: 1px solid #30363d;
  border-radius: 10px;
  padding: 18px;
  background: #101720;
}

.simulator-slot.is-active {
  border-color: #31724c;
  background: #1e3f2f;
}

.simulator-slot strong {
  color: #fff;
  font-size: 18px;
}

.simulator-slot span {
  color: #8b949e;
  font-size: 13px;
}

.placeholder-view {
  min-height: 600px;
}

.placeholder-card {
  display: grid;
  min-height: 560px;
  place-content: center;
  justify-items: center;
  gap: 8px;
  color: #8b949e;
  background: #fff;
}

.placeholder-card h1 {
  margin: 0;
  color: var(--ink);
}

/* Addon pages reuse the equipment-search visual system. */
.addon-view,
.placeholder-view {
  border: 1px solid rgba(23, 33, 31, 0.12);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(247, 250, 247, 0.9);
  box-shadow: var(--shadow);
  padding: 0;
}

.addon-view {
  display: grid;
  align-content: start;
  grid-template-rows: auto auto;
  min-height: var(--main-panel-min-height);
}

.addon-titlebar {
  display: grid;
  grid-template-columns: minmax(190px, auto) minmax(0, 1fr);
  gap: 16px;
  align-items: end;
  justify-items: stretch;
  min-height: auto;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid rgba(23, 33, 31, 0.12);
  border-radius: 0;
  color: var(--ink);
  background: rgba(247, 250, 247, 0.9);
}

.addon-titlebar .brand-block h1 {
  color: var(--ink);
  margin: 0;
  font-size: clamp(25px, 3vw, 34px);
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.addon-window {
  margin-top: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  display: grid;
  align-content: start;
  align-items: start;
  min-height: 0;
  padding: 16px;
}

.addon-tab-field {
  display: grid;
  gap: 4px;
}

.addon-tab-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.addon-subtabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(160px, 1fr);
  gap: 8px;
  margin-bottom: 0;
}

.addon-tab {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.addon-tab.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.addon-content {
  display: block;
  min-height: 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
}

.addon-window > .addon-content:not([hidden]),
.addon-window > .simulator-menu-shell {
  width: 100%;
  height: auto;
  min-height: 0;
}

.coefficient-select {
  display: block;
  min-height: 0;
  height: auto;
}

.coefficient-select .character-grid {
  min-height: 0;
  height: auto;
  max-height: none;
  overflow: visible;
}

.coefficient-detail {
  height: auto;
  min-height: 0;
  grid-template-rows: none;
  grid-auto-rows: auto;
}

.coefficient-grid {
  min-height: 0;
}

.damage-layout {
  min-height: 0;
  height: auto;
}

.damage-layout .dark-card {
  min-height: 0;
}

.addon-content-header {
  color: var(--muted);
}

.addon-content-header h2,
.simulator-menu-copy h2 {
  color: var(--ink);
}

.addon-content-header span,
.simulator-menu-copy p,
.addon-kicker {
  color: var(--muted);
}

.addon-kicker {
  color: var(--accent);
}

.character-grid {
  border-color: var(--line);
  background:
    linear-gradient(135deg, rgba(15, 111, 99, 0.08), rgba(200, 138, 44, 0.06)),
    var(--panel);
}

.character-card {
  color: var(--ink);
}

.character-portrait {
  border-color: rgba(15, 111, 99, 0.24);
  background:
    linear-gradient(145deg, #ffffff, #dfeae4);
}

.character-card:hover .character-portrait {
  border-color: var(--accent);
  background: #fff;
}

.coefficient-detail-header {
  border-color: var(--line);
  background: var(--panel);
}

.ghost-button {
  border-color: var(--line);
  color: var(--ink);
  background: #fff;
}

.ghost-button:hover {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

/* 계수 계산기 프리셋 (캐릭터·타입별 3개) */
.preset-group {
  display: flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.preset-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.preset-button {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.preset-button:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.preset-button.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.coefficient-selected {
  color: var(--accent);
}

.dark-field span {
  color: var(--muted);
}

.dark-field input,
.dark-field select {
  border-color: var(--line);
  border-radius: 8px;
  color: var(--ink);
  background: #fff;
}

.dark-field input:focus,
.dark-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

.coefficient-table-card,
.coefficient-side,
.dark-card,
.simulator-menu-shell,
.placeholder-card {
  border-color: var(--line);
  background: #fff;
}

.coefficient-table,
.side-score-table {
  color: var(--ink);
}

.coefficient-table th,
.coefficient-table td,
.side-score-table th,
.side-score-table td {
  border-bottom-color: #e3ebe6;
}

.coefficient-table thead th,
.side-score-table thead th {
  color: var(--muted);
  background: var(--panel-strong);
}

.coefficient-table tbody th,
.side-score-table tbody th {
  color: var(--ink);
}

.coefficient-table td,
.side-score-table td:last-child {
  color: var(--blue);
}

.toggle-row {
  color: var(--ink);
}

.toggle-row input {
  accent-color: var(--accent);
}

.dark-card h3 {
  color: var(--ink);
}

.result-card strong {
  color: var(--accent);
}

.result-card p {
  color: var(--muted);
}

.simulator-menu-shell {
  min-height: 0;
  color: var(--ink);
}

.simulator-slot {
  border-color: var(--line);
  background: var(--panel);
}

.simulator-slot.is-active {
  border-color: var(--accent);
  background: var(--panel-strong);
}

.simulator-slot strong {
  color: var(--ink);
}

.simulator-slot span {
  color: var(--muted);
}

.placeholder-view {
  display: grid;
  place-content: center;
  place-items: center;
  min-height: var(--main-panel-min-height);
}

/* ── 시뮬레이터 3종 공통 스타일 (밝은 테마) ── */
.sim-panel {
  padding: 14px;
}

.sim-grid {
  display: grid;
  /* 왼쪽 폭은 행운 지표(정규분포 그래프)를 담을 수 있게 미리 확보 */
  grid-template-columns: 520px minmax(0, 1fr);
  gap: 14px;
}

.sim-controls {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.sim-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

.sim-radio,
.sim-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}

.sim-radio input,
.sim-check input {
  accent-color: var(--accent);
  cursor: pointer;
}

.sim-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sim-preset {
  flex: 1 1 auto;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.sim-preset:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sim-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

/* hidden 속성이 .field { display:grid }에 덮이지 않도록 (예: 가루 보유 시 상자 가격 숨김) */
.sim-fields .field[hidden] {
  display: none;
}

.sim-fields .field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sim-fields .field input,
.sim-fields .field select {
  width: 100%;
  min-height: 36px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 10px;
  color: var(--ink);
  background: #fff;
  outline: none;
}

.sim-fields .field input:focus,
.sim-fields .field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

.sim-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.sim-btn {
  flex: 1 1 auto;
  min-height: 40px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.sim-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.sim-btn.primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.sim-btn.primary:hover {
  background: var(--accent-strong);
  color: #fff;
}

.sim-btn.danger:hover {
  border-color: var(--danger);
  background: var(--danger);
  color: #fff;
}

.sim-status {
  display: grid;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  line-height: 1.5;
}

.sim-status .sim-status-strong {
  color: var(--accent-strong);
  font-weight: 800;
}

.sim-status .sim-graph-legend {
  display: flex;
  justify-content: space-between;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.sim-status .sim-graph {
  font-family: "Consolas", "D2Coding", monospace;
  color: var(--accent);
  letter-spacing: 0.5px;
  white-space: nowrap;
}

.sim-log {
  min-height: 300px;
  max-height: 560px;
  overflow-y: auto;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 12.5px;
  line-height: 1.6;
}

/* 한 줄이 길어 좁은 화면에서 숫자 중간이 끊겼다.
   토막(번째 / 단계 / 비용 / 기대값)을 통째로 넘긴다. */
.sim-log .log-entry {
  display: flex;
  flex-wrap: wrap;
  gap: 0 10px;
  padding: 3px 0;
  border-bottom: 1px solid #eef3f0;
}

.sim-log .log-entry > span {
  white-space: nowrap;
}

.sim-log .log-seq {
  color: var(--muted);
  font-weight: 700;
}

.sim-log .log-seq::before {
  content: "• ";
}

.sim-log .log-cumulative {
  margin-top: 8px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel);
}

/* 제목과 기대값 차이는 제 줄을 갖고, 누적 비용 둘은 넓을 때만 한 줄에 묶인다 */
.log-cumulative .cum-head,
.log-cumulative .cum-diff {
  display: block;
}

.log-cumulative .cum-cost {
  margin-right: 14px;
}

.mobile-unsupported {
  display: none;
}

.sim-pos {
  color: var(--accent);
  font-weight: 700;
}

.sim-neg {
  color: var(--danger);
  font-weight: 700;
}

.sim-summary {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
  color: var(--ink);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.6;
}

/* 시뮬레이터 재료 아이콘 */
.sim-icon {
  vertical-align: middle;
  object-fit: contain;
  image-rendering: pixelated;
}

.sim-table th .sim-th {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  justify-content: flex-end;
}

.sim-table th:first-child .sim-th {
  justify-content: flex-start;
}

.sim-summary-title {
  font-weight: 800;
  margin-bottom: 8px;
}

/* 코어 1개 / 6개 전체를 나란히. 좁아지면 세로로 접힌다.
   숫자가 붙어 있으면 어느 쪽 값인지 헷갈려서 사이를 넉넉히 벌리고 구분선을 둔다 */
.sim-summary-cols {
  display: flex;
  flex-wrap: wrap;
  gap: 14px 0;
}

.sim-summary-col {
  display: grid;
  gap: 4px;
}

.sim-summary-col + .sim-summary-col {
  margin-left: 40px;
  padding-left: 40px;
  border-left: 1px solid var(--line);
}

@media (max-width: 900px) {
  /* 세로로 접히면 왼쪽 선 대신 위쪽 선으로 나눈다 */
  .sim-summary-col + .sim-summary-col {
    margin-left: 0;
    padding: 12px 0 0;
    border-left: 0;
    border-top: 1px solid var(--line);
  }

  .sim-summary-col {
    flex: 1 0 100%;
  }
}

.sim-summary-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.sim-summary-mats {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  align-items: center;
}

.sim-summary-mats span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 700;
}

.sim-summary-note {
  margin-top: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.sim-summary:empty {
  display: none;
}

.sim-table-wrap {
  overflow-x: auto;
}

.sim-table {
  width: 100%;
  border-collapse: collapse;
  color: var(--ink);
  font-size: 13px;
}

.sim-table th,
.sim-table td {
  border-bottom: 1px solid #e3ebe6;
  padding: 7px 10px;
  text-align: right;
  white-space: nowrap;
}

.sim-table th:first-child,
.sim-table td:first-child {
  text-align: left;
}

.sim-table thead th {
  color: var(--muted);
  background: var(--panel-strong);
  font-size: 12px;
  position: sticky;
  top: 0;
}

.sim-table tbody td.sim-cost {
  color: var(--blue);
  font-weight: 700;
}

@media (max-width: 1024px) {
  .sim-grid {
    grid-template-columns: 1fr;
  }
}

/* ── 대미지 계산기 ── */
/* hidden 속성이 display:grid에 덮이지 않도록 (캐릭터 미선택 시 결과 숨김) */
.dmg-nodata[hidden],
.dmg-body[hidden] {
  display: none;
}

.dmg-nodata {
  display: grid;
  place-items: center;
  gap: 8px;
  min-height: 360px;
  padding: 40px 16px;
  color: var(--muted);
  text-align: center;
}

.dmg-nodata strong {
  color: var(--ink);
  font-size: 18px;
}

.dmg-body {
  display: grid;
  gap: 12px;
}

.dmg-head {
  display: grid;
  /* 정보 | 저장·불러오기 | 몬스터 — 한 줄에 들어가야 한다 */
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dmg-head-info {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  align-items: center;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dmg-head-info strong {
  color: var(--accent-strong);
  font-size: 15px;
  margin-left: 4px;
}

.dmg-inline-field {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.dmg-inline-field input,
.dmg-inline-field select {
  min-height: 32px;
  min-width: 86px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.dmg-inline-field input:focus,
.dmg-inline-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

/* 항상 나오는 값: 한 방 / 추가 피해량 / 총합 */
.dmg-result {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.dmg-result div b {
  color: var(--accent-strong, #2e8b57);
  font-size: 13px;
  font-weight: 800;
}

.dmg-result div {
  display: grid;
  gap: 4px;
  padding: 12px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.dmg-result span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

/* "최소 ~ 최대"라 한 줄이 길어진다. 칸 폭에 맞춰 글자를 줄인다 */
.dmg-result strong {
  color: var(--accent);
  font-size: clamp(15px, 1.5vw, 20px);
  white-space: nowrap;
}

.dmg-result em {
  color: var(--blue);
  font-size: 13px;
  font-style: normal;
  font-weight: 700;
}

/* 계산 과정: 단계마다 표를 따로 두고 좌우 2단으로 흐르게 한다 */
/* 폭이 되는 만큼 한 줄에 늘어놓는다. 5단계가 다 들어가면 한 줄이 된다 */
#dmgBreakdownBody {
  display: grid;
  width: 100%;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 4px 20px;
  align-items: start;
}

.dmg-bd-group {
  min-width: 0;
  margin-bottom: 10px;
}

.dmg-bd-group h4 {
  margin: 8px 0 4px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--line);
  font-size: 12px;
  font-weight: 800;
}

.dmg-bd-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.dmg-bd-table th,
.dmg-bd-table td {
  padding: 3px 6px;
  border-bottom: 1px solid #eef3f0;
  text-align: left;
  vertical-align: top;
}

.dmg-bd-table th {
  color: var(--muted);
  font-weight: 700;
}

.dmg-bd-table td {
  width: 40%;
  font-weight: 800;
  text-align: right;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* 그 단계의 결과 줄 */
.dmg-bd-table tr.dmg-bd-sum th,
.dmg-bd-table tr.dmg-bd-sum td {
  background: #f4f8f5;
  color: var(--ink);
  font-weight: 800;
}


.dmg-breakdown summary {
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

/* details 요소다. flex로 두면 안쪽 그리드가 최소 폭으로 줄어든다 */
.dmg-breakdown {
  display: block;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.dmg-breakdown strong {
  color: var(--ink);
  margin-left: 4px;
}

.dmg-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  align-items: start;
}

/* 페이지 하단 방문 수 배지 */
.site-footer {
  display: flex;
  justify-content: center;
  padding: 12px 0 4px;
}

.site-footer img {
  height: 20px;
}

/* 한 그리드 칸 안에 카드를 세로로 쌓는 묶음 (계열+추가 피해량, 치명타+최종+시에나) */
.dmg-stack {
  display: grid;
  gap: 12px;
  align-content: start;
}

.dmg-card {
  display: grid;
  gap: 8px;
  align-content: start;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* 세로 정렬 행: 라벨 왼쪽 · 컨트롤 오른쪽 */
.dmg-rows {
  display: grid;
  gap: 6px;
}

.dmg-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  min-height: 32px;
  margin: 0;
}

.dmg-row-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  color: var(--ink);
  font-size: 13px;
  font-weight: 600;
  /* 이름이 두 줄로 접히면 줄 높이가 들쭉날쭉해진다. 대신 오른쪽 입력칸을 줄인다 */
  white-space: nowrap;
}

.dmg-row > input[type="number"],
.dmg-row > input[type="text"],
.dmg-row > select {
  /* 이름이 길면 입력칸이 먼저 줄어든다 (92px까지) */
  flex: 0 1 110px;
  width: 110px;
  min-width: 92px;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.dmg-row > input:focus,
.dmg-row > select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(15, 111, 99, 0.16);
}

/* 토글 스위치 */
.dmg-switch {
  appearance: none;
  -webkit-appearance: none;
  flex: none;
  width: 42px;
  height: 22px;
  border-radius: 999px;
  background: var(--line);
  position: relative;
  cursor: pointer;
  transition: background 0.15s ease;
}

.dmg-switch::before {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  transition: transform 0.15s ease;
}

.dmg-switch:checked {
  background: var(--accent);
}

.dmg-switch:checked::before {
  transform: translateX(20px);
}

.dmg-sub-title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid var(--line);
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.dmg-sub-title span {
  color: var(--accent-strong);
  font-size: 12px;
}

.dmg-card h3 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  color: var(--ink);
  font-size: 15px;
}

.dmg-badge {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--panel-strong);
  color: var(--accent-strong);
  font-size: 12px;
  font-weight: 800;
}

.dmg-sub {
  display: grid;
  gap: 8px;
  padding: 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
}

.dmg-sub-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 13px;
  font-weight: 800;
}

.dmg-sub-head span {
  color: var(--accent-strong);
  font-size: 12px;
}

.dmg-checks {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 16px;
  align-items: center;
}

/* 체크박스/콤보 앞 아이콘 자리표시자 (추후 이미지 교체) */
.dmg-chk-icon {
  display: inline-block;
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 4px;
}

span.dmg-chk-icon {
  background: var(--panel-strong);
  border: 1px dashed var(--line);
}

img.dmg-chk-icon {
  object-fit: contain;
  vertical-align: middle;
}

.dmg-note {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}

.dmg-trait-checks .is-placeholder {
  opacity: 0.55;
}

.dmg-trait-list {
  display: grid;
  gap: 6px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
}

.dmg-trait-list strong {
  color: var(--ink);
}

/* 화면이 좁아지면 4열 → 2열 → 1열로 단계적 축소 */
@media (max-width: 1080px) {
  .dmg-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .dmg-result {
    grid-template-columns: 1fr;
  }

  .dmg-head {
    grid-template-columns: 1fr;
  }
}


/* 준비중 플레이스홀더 (추가 메뉴) */
/* ── 버프 아이템 (경험치 / 레어) ────────────────────── */

.buff-subtabs {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 8px;
  padding: 16px 16px 0;
}

.buff-tab {
  min-height: 38px;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: var(--muted);
  background: #fff;
  font-size: 14px;
  font-weight: 700;
}

.buff-tab.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.buff-panel[hidden] {
  display: none;
}

.buff-section-title {
  margin: 0 0 8px;
  font-size: 14px;
  font-weight: 700;
}

/* 그룹3 안의 소분류 (버프 시간 소진 여부) */
.buff-sub-title {
  margin: 14px 0 6px;
  padding-left: 10px;
  border-left: 3px solid #cfdcd4;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.buff-sub-title:first-of-type {
  margin-top: 4px;
}

.buff-base {
  margin: 16px 16px 12px;
}

.buff-base-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 버튼은 글자 길이만큼만 차지한다 (전에는 4등분이라 불필요하게 넓었다) */
.buff-base-btn {
  min-height: 34px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
}

/* 선택한 기본 경험치에 딸린 설명. 결과창의 값 옆에 작게 붙인다 */
.buff-base-note {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 500;
}

/* "기타" 선택 시에만 나타나 버튼 오른쪽에 붙는다 */
.buff-base-input {
  flex: 1 1 180px;
  max-width: 240px;
  min-height: 34px;
  padding: 0 10px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  font-size: 14px;
}

.buff-base-btn.is-active {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.buff-result {
  display: grid;
  gap: 4px;
  margin: 0 16px 16px;
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #f4f8f5;
}

.buff-result-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 12px;
  color: var(--muted);
  font-size: 13px;
}

.buff-result-row strong {
  color: var(--ink);
  font-variant-numeric: tabular-nums;
}

.buff-result-row.is-total {
  margin-top: 4px;
  padding-top: 8px;
  border-top: 1px solid #dbe7df;
  font-size: 15px;
}

.buff-result-row.is-total strong {
  color: var(--accent);
  font-size: 20px;
}

.buff-body {
  padding: 0 16px 16px;
}

/* 해피아워 / 펫 스킬은 일반 배율과 곱해지는 별도 단계라 위에 따로 나란히 둔다 */
.buff-top {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-bottom: 10px;
}

/* 그룹별 색. 버프 칸과 결과창 줄에 같은 색을 써서 어느 그룹의 배율인지 잇는다.
   그룹1 해피아워 = 주황, 그룹2 펫 스킬 = 보라, 그룹3 일반 배율 = 초록 */
.buff-cell[data-group="1"] {
  border-color: #e6c9a0;
  background: #fdf6ec;
}

.buff-cell[data-group="2"] {
  border-color: #cfc4e8;
  background: #f6f3fd;
}

.buff-cell[data-group="3"] {
  border-color: #cfdcd4;
  background: #f4f8f5;
}

.buff-result-row[data-group="1"] strong {
  color: #b5761b;
}

.buff-result-row[data-group="2"] strong {
  color: #6b4fb8;
}

.buff-result-row[data-group="3"] strong {
  color: var(--accent-strong, #2e8b57);
}

.buff-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
}

.buff-cell {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  min-width: 0;
}

.buff-item {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  gap: 7px;
  min-width: 0;
  cursor: pointer;
}

/* 칸마다 항목이 하나뿐이라 이름이 길어도 칸 높이가 들쭉날쭉하지 않게 맞춘다 */
.buff-cell {
  min-height: 42px;
}

.buff-check {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
  accent-color: var(--accent);
  cursor: pointer;
}

.buff-num {
  width: 84px;
  min-height: 30px;
  padding: 0 8px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  font-size: 13px;
}

.buff-unit {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.buff-icon {
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  flex: 0 0 26px;
  border-radius: 6px;
  overflow: hidden;
}

/* width/height 100%는 세로가 긴 아이콘(23x24, 37x39 등)에서 높이가 넘쳐 아래가 잘린다.
   grid 안에서는 퍼센트 max-height가 해석되지 않으므로 px로 고정한다.
   확대는 하지 않으므로 작은 아이콘은 원본 크기 그대로 나온다. */
.buff-icon img {
  max-width: 26px;
  max-height: 26px;
  width: auto;
  height: auto;
  object-fit: contain;
}

/* 아이콘 대신 글자를 쓰는 자리 */
.buff-icon.is-text {
  border: 1px solid #cfdcd4;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.buff-name {
  font-size: 14px;
  font-weight: 600;
  word-break: keep-all;
}

.buff-rate {
  margin-left: auto;
  padding-left: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

/* 같은 줄의 다른 항목이 선택돼 고를 수 없는 상태 */
.buff-item.is-locked {
  cursor: not-allowed;
  opacity: 0.4;
}

.buff-item.is-locked .buff-check {
  cursor: not-allowed;
}

@media (max-width: 900px) {
  .buff-grid,
  .buff-top {
    grid-template-columns: repeat(2, 1fr);
  }
}


.coming-soon {
  display: grid;
  place-items: center;
  min-height: 420px;
  padding: 40px 16px;
  color: var(--muted);
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.placeholder-card {
  min-height: 0;
  height: auto;
}

/* 세로 해상도 1080 이하: 계산기 등 addon 화면이 한 화면에 들어가도록 여백 압축 */
@media (max-height: 1010px) {
  .addon-view,
  .placeholder-view {
    padding: 6px 10px;
  }

  .addon-titlebar {
    min-height: 42px;
  }

  .addon-tab {
    min-height: 36px;
  }

  .addon-window {
    margin-top: 6px;
    padding: 12px 20px;
  }

  .addon-content {
    min-height: 0;
    padding: 8px 10px;
  }

  .coefficient-detail {
    gap: 8px;
  }

  .coefficient-detail-header {
    min-height: 40px;
    padding: 5px 10px;
  }

  .coefficient-maintotal {
    margin-top: 6px;
  }

  .coefficient-maintotal div {
    padding: 5px 6px;
  }

  .coefficient-table th,
  .coefficient-table td,
  .side-score-table th,
  .side-score-table td {
    padding-top: 2px;
    padding-bottom: 2px;
  }

  .coefficient-table input,
  .side-score-table input {
    padding-top: 1px;
    padding-bottom: 1px;
  }

  .addon-titlebar .eyebrow {
    display: none;
  }

  .addon-titlebar h1 {
    font-size: 21px;
  }

  .main-panel {
    min-height: 0;
  }
}

.equipment-card,
.compare-panel {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.equipment-card {
  min-height: 0;
  overflow: hidden;
}

.item-hero {
  display: grid;
  grid-template-columns: 82px 1fr;
  gap: 14px;
  align-items: center;
  padding: 14px 16px;
  background:
    linear-gradient(135deg, rgba(15, 111, 99, 0.14), rgba(200, 138, 44, 0.1)),
    #f7fbf8;
  border-bottom: 1px solid var(--line);
}

.item-hero > div:last-child {
  min-width: 0;
}

.item-image {
  position: relative;
  display: grid;
  width: 72px;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid rgba(15, 111, 99, 0.24);
  border-radius: 8px;
  background:
    linear-gradient(145deg, #ffffff, #dfeae4);
}

.item-image img {
  width: 54px;
  height: 54px;
  object-fit: contain;
  image-rendering: pixelated;
  z-index: 1;
}

.item-image span {
  position: absolute;
  color: rgba(15, 111, 99, 0.22);
  font-size: 23px;
  font-weight: 800;
}

.item-kind,
.item-condition {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
}

.item-hero h2 {
  margin: 4px 0 6px;
  font-size: clamp(22px, 2.6vw, 30px);
  line-height: 1.1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  word-break: keep-all;
}

.stat-table {
  width: 100%;
  border-collapse: collapse;
}

.stat-table th,
.stat-table td {
  border-bottom: 1px solid #e3ebe6;
  padding: 7px 12px;
  text-align: right;
  font-size: 13px;
}

.stat-table th:first-child,
.stat-table td:first-child {
  text-align: left;
}

.stat-table thead th {
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.08em;
}

.stat-table tbody th {
  font-weight: 700;
}

.stat-table .limit-value {
  color: var(--ink);
  font-weight: 700;
}

.stat-table .cap-value {
  color: var(--blue);
  font-weight: 700;
}

.stat-table .is-zero {
  color: #a7b0ad;
}

/* 장비 상세: 계수 (계열 선택 + MAX / MAX+주스탯 한계) */
.coef-block {
  display: grid;
  gap: 8px;
  padding: 12px 16px 0;
}

.coef-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.coef-head > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.coef-type-field select {
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: #fff;
  padding: 3px 8px;
  font: inherit;
  font-size: 12px;
  color: var(--ink);
}

.coef-type-fixed {
  border: 1px solid #d8e3dd;
  border-radius: 8px;
  background: #fff;
  padding: 3px 10px;
  font-size: 12px;
  font-weight: 700;
  color: var(--accent);
}

.coef-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 6px;
}

/* 무기·손목의 +28, 상위 방어구의 +30이 붙으면 세 칸이 된다 */
.coef-grid[data-steps="3"] {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.coef-grid[data-steps="3"] .coef-value {
  font-size: 17px;
}

.coef-item {
  display: grid;
  gap: 2px;
  border: 1px solid #d8e3dd;
  border-radius: 10px;
  padding: 8px 10px;
  background: #fbfdfc;
}

.coef-label {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.coef-value {
  color: var(--ink);
  font-size: 19px;
  font-weight: 800;
  line-height: 1.2;
}

.coef-value.is-limit {
  color: var(--blue);
}

.coef-note {
  color: var(--muted);
  font-size: 11px;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.materials {
  display: grid;
  gap: 8px;
  padding: 12px 16px 14px;
}

.materials > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.materials div {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px;
}

.material-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  border: 1px solid #d8e3dd;
  border-radius: 999px;
  padding: 4px 8px 4px 5px;
  background: var(--panel);
  font-size: 12px;
  line-height: 1.2;
  min-width: 0;
}

.material-chip span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.material-icon {
  width: 20px;
  height: 20px;
  flex: 0 0 auto;
  object-fit: contain;
  image-rendering: pixelated;
}

.material-chip.has-missing-image {
  padding-left: 8px;
}

.compare-panel {
  display: grid;
  align-content: start;
  gap: 12px;
  padding: 14px;
}

.panel-heading {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: start;
}

.panel-heading h2 {
  font-size: 22px;
}

.limit-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 3px;
  color: var(--ink);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.limit-toggle input {
  width: 14px;
  height: 14px;
  accent-color: var(--blue);
}

.compare-summary {
  display: grid;
  gap: 8px;
  border: 1px solid #dce7e1;
  border-radius: 8px;
  padding: 10px;
  background: var(--panel);
}

.diff-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.diff-row span,
.soft-note {
  color: var(--muted);
}

.compare-name {
  margin: 0;
  font-weight: 700;
}

.diff-grid {
  display: grid;
  gap: 5px;
}

/* 비교 패널의 계수 차이. 스탯 증감과 섞이지 않게 구분선을 둔다 */
.compare-coef {
  display: grid;
  gap: 5px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #d8e3dd;
}

.compare-coef-head {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.positive {
  color: var(--blue);
}

.negative {
  color: var(--danger);
}

.neutral {
  color: var(--ink);
}

/* ── 에타 순위 ─────────────────────────────────────── */

#etaView {
  border: 1px solid rgba(23, 33, 31, 0.12);
  border-top: 0;
  border-radius: 0 0 8px 8px;
  background: rgba(247, 250, 247, 0.9);
  box-shadow: var(--shadow);
}

.eta-control-grid {
  grid-template-columns: minmax(0, 1.6fr) minmax(140px, 0.6fr);
}

/* 좁은 화면 공용 규칙(.search-field 전체 폭 확장)이 에타 검색/날짜 한 줄 배치를 깨지 않게 */
#etaView .search-field {
  grid-column: auto;
}

/* ── DB 검색 서브탭 ─────────────────────────────────── */

.db-subtabs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 12px 16px;
}

.db-subtab {
  min-height: 34px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 18px;
  color: var(--muted);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.db-subtab:hover {
  background: var(--panel-strong);
}

.db-subtab.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

[data-db-panel][hidden] {
  display: none !important;
}

.ability-control-grid {
  grid-template-columns: minmax(150px, 0.7fr) minmax(220px, 1.5fr);
}

.ability-list {
  min-width: 760px;
}

.ability-list thead th {
  text-align: center;
}

.ability-list thead th.ability-effects-head {
  text-align: left;
  padding-left: 12px;
}

.ability-prob-head {
  width: 80px;
}

.ability-row td {
  padding: 8px;
  border-bottom: 1px solid #e3ebe6;
  vertical-align: middle;
}

/* 두 줄짜리 어빌리티는 tr이 2개라 nth-child로는 줄무늬가 어긋난다.
   어빌리티 단위로 번갈아 칠하도록 JS가 is-alt를 붙여준다. */
.ability-row.is-alt > td {
  background: #f4f8f5;
}

/* 기본/추가 사이는 옅은 점선으로만 나눠 한 어빌리티임을 유지한다 */
.ability-row.is-head > td:not(.equip-info-cell) {
  border-bottom: 1px dashed #e8efeb;
}

.ability-row.is-head > td.equip-info-cell,
.ability-row.is-sub > td {
  vertical-align: top;
  padding-top: 10px;
}

.ability-kind {
  display: block;
  margin-bottom: 2px;
  color: var(--accent-strong, #2e8b57);
  font-size: 11px;
  font-style: normal;
  font-weight: 800;
}

.ability-row.is-sub .ability-kind {
  color: #a08048;
}

.ability-prob {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.ability-effects {
  padding-left: 12px;
}

.ability-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

/* 기본/추가로 나뉜 어빌리티(불사·안식)의 추가 효과는 8개라
   폭에 맡기면 6+2로 갈라진다. 한 줄에 5개로 고정해 나눈다. */
.ability-row.is-sub .ability-chips {
  display: grid;
  grid-template-columns: repeat(5, max-content);
  justify-items: start;
}

.ability-thumb.is-missing::after {
  content: "✕";
  color: #a7b0ad;
  font-size: 16px;
  font-weight: 700;
}

/* ── 아바타 DB ──────────────────────────────────────── */

.avatar-control-grid {
  grid-template-columns: minmax(180px, 1.1fr) minmax(120px, 0.6fr) minmax(200px, 1.3fr);
}

.avatar-list {
  min-width: 800px;
}

.avatar-list thead th {
  text-align: center;
}

/* 아바타 열은 줄이고 획득처 열을 넓게 (획득처 2개 이상 표기 대응) */
.avatar-list thead th.equip-info-head {
  width: 30%;
}

.avatar-list thead th.avatar-slot-head {
  width: 84px;
}

.avatar-list thead th:last-child {
  width: 130px;
}

.avatar-slot {
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.avatar-source {
  text-align: center;
  font-size: 13px;
  white-space: normal;
  word-break: keep-all;
  min-width: 240px;
}

.avatar-source span,
.avatar-round span {
  display: block;
  padding: 1px 0;
}

.avatar-prob {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
}

/* 획득처가 여러 곳이면 대표 한 곳만 쓰고 나머지는 개수로 줄인다 (전체는 상세 화면에서) */
.avatar-more {
  margin-left: 4px;
  padding: 1px 6px;
  border-radius: 10px;
  background: #e8f0ea;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  white-space: nowrap;
}

.avatar-round {
  text-align: center;
  font-size: 13px;
  white-space: nowrap;
}

.avatar-source-table {
  width: 100%;
  border-collapse: collapse;
}

.avatar-source-table th,
.avatar-source-table td {
  border: 1px solid #dce7e1;
  padding: 7px 10px;
  text-align: center;
  font-size: 13px;
}

.avatar-source-table thead th {
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
}

.avatar-detail-workspace {
  display: block;
}

.avatar-detail-card {
  max-width: 720px;
  margin: 0 auto;
}

.avatar-detail-meta {
  display: grid;
  gap: 8px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--line);
}

.avatar-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
  border: 1px solid #dce7e1;
  border-radius: 8px;
  padding: 8px 12px;
  background: var(--panel);
}

.avatar-meta-row span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.avatar-meta-row strong {
  font-size: 13px;
  text-align: right;
}

.avatar-wear-section {
  display: grid;
  gap: 8px;
  padding: 12px 16px 16px;
}

.avatar-wear-section > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.avatar-wear-frame {
  display: flex;
  flex-wrap: wrap;
  /* 1개면 중앙, 2개 이상이면 좌우로 고르게 배치 */
  justify-content: space-evenly;
  align-items: center;
  gap: 12px;
  min-height: 260px;
  padding: 12px;
  border: 1px solid rgba(15, 111, 99, 0.24);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #dfeae4);
}

.avatar-wear-image {
  /* 2개 이상이면 한 줄에 좌/우로 나란히 들어가도록 폭 제한 */
  max-width: 48%;
  max-height: 420px;
  object-fit: contain;
  image-rendering: pixelated;
  /* 흰 배경 이미지도 프레임 배경에 녹아들게 (흰색 = 투명처럼 처리) */
  mix-blend-mode: multiply;
}

/* 이미지가 1개뿐이면 원래 크기 그대로 중앙 표시 */
.avatar-wear-image:only-of-type {
  max-width: 100%;
}

/* 3장이면 첫 장(개별 착용 이미지)을 윗줄에 혼자, 세트 대표 2장을 아랫줄에 */
.avatar-wear-frame[data-count="3"] {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-items: center;
}

.avatar-wear-frame[data-count="3"] .avatar-wear-image {
  max-width: 100%;
}

.avatar-wear-frame[data-count="3"] .avatar-wear-image:first-of-type,
.avatar-wear-frame[data-count="3"] .avatar-wear-missing {
  grid-column: 1 / -1;
}

.avatar-list .equip-thumb img,
.avatar-detail-thumb img {
  mix-blend-mode: multiply;
}

.avatar-wear-missing {
  color: #a7b0ad;
  font-size: 15px;
  font-weight: 700;
}

.ability-chip {
  display: inline-flex;
  align-items: center;
  border: 1px solid #d8e3dd;
  border-radius: 999px;
  padding: 3px 9px;
  background: var(--panel);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.2;
  white-space: nowrap;
}

.db-placeholder {
  display: grid;
  min-height: 480px;
  place-content: center;
  gap: 8px;
  padding: 16px;
  text-align: center;
  color: var(--muted);
}

.db-placeholder strong {
  color: var(--ink);
  font-size: 24px;
}

/* ── 모달 (렐릭 강화 확률표) ─────────────────────────── */

.modal[hidden] {
  display: none;
}

.modal {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: grid;
  place-items: center;
  padding: 20px;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 30, 25, 0.5);
}

.modal-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  max-width: min(1100px, 100%);
  max-height: min(86vh, 100%);
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.22);
}

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 8px;
}

.modal-head h2 {
  margin: 0;
  font-size: 17px;
}

.modal-close {
  width: 30px;
  height: 30px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 14px;
  cursor: pointer;
}

.modal-close:hover {
  color: #fff;
  border-color: var(--accent);
  background: var(--accent);
}

.modal-note {
  margin: 0;
  padding: 0 16px 10px;
  color: var(--muted);
  font-size: 12px;
}

.modal-body {
  overflow: auto;
  padding: 0 16px 16px;
}

/* 20x20이라 머리행·머리열을 고정해야 읽을 수 있다 */
.rr-table {
  border-collapse: separate;
  border-spacing: 0;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
}

.rr-table th,
.rr-table td {
  min-width: 34px;
  padding: 4px 6px;
  border-bottom: 1px solid #eef2ef;
  text-align: center;
  white-space: nowrap;
}

.rr-table thead th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: #f4f8f5;
  font-weight: 700;
}

.rr-table tbody th,
.rr-table .rr-corner {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #f4f8f5;
  text-align: left;
  font-weight: 700;
}

.rr-table .rr-corner {
  z-index: 3;
  color: var(--muted);
  font-weight: 600;
}

/* 확률이 높을수록 진하게 (--rr: 0~1) */
.rr-table tbody td {
  background: rgba(46, 139, 87, calc(var(--rr, 0) * 0.42));
}

.rr-table tbody td.rr-zero {
  color: #c9d3cd;
  background: #fafbfa;
}

/* 신조 1단계 / 루나 1단계 시작 지점에 구분선 */
.rr-table tbody tr.is-group th,
.rr-table tbody tr.is-group td {
  border-top: 2px solid #cfdcd4;
}

/* 지금 시도할 줄과 선택한 난이도 열을 표시 */
.rr-table tbody tr.is-next th,
.rr-table tbody tr.is-next td {
  outline: 2px solid var(--accent);
  outline-offset: -2px;
}

.rr-table thead th.is-on,
.rr-table tbody td.is-on {
  box-shadow: inset 0 0 0 2px rgba(46, 139, 87, 0.55);
}

/* 코어 표는 열이 6개뿐이라 넉넉하게 */
.rr-core th,
.rr-core td {
  min-width: 74px;
  padding: 5px 10px;
}

.rr-core tbody th {
  min-width: 84px;
}

.rr-core .rr-mat {
  color: var(--muted);
  background: none;
}

.eta-help-button {
  display: inline-grid;
  width: 26px;
  height: 26px;
  place-items: center;
  vertical-align: 4px;
  margin-left: 4px;
  border: 1px solid var(--accent);
  border-radius: 50%;
  color: var(--accent-strong);
  background: #fff;
  font-size: 15px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.eta-help-button:hover {
  color: #fff;
  background: var(--accent);
}

#etaView > .toolbar[hidden],
#etaView > .result-band[hidden] {
  display: none !important;
}

.eta-info {
  display: block;
  border-radius: 0 0 8px 8px;
}

.eta-info-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 4px;
}

.eta-info-head h2 {
  margin: 0;
  font-size: 22px;
}

.eta-info h3 {
  margin: 18px 0 8px;
  font-size: 16px;
}

.eta-info-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.eta-info-table {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
  font-size: 13px;
}

/* 부재료 칸은 재료가 여러 개라 nowrap이면 표를 혼자 밀어낸다(484px).
   이 칸만 줄바꿈을 허용해 가로 스크롤을 없앤다. */
.eta-info-table td.eta-info-sub {
  white-space: normal;
  word-break: keep-all;
  min-width: 220px;
}

.eta-info-table th,
.eta-info-table td {
  padding: 7px 10px;
  border-bottom: 1px solid #e3ebe6;
  text-align: center;
  white-space: nowrap;
}

.eta-info-table thead th {
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
}

.eta-info-table tbody th {
  font-weight: 700;
}

.eta-info-table tbody tr:nth-child(even) {
  background: #f4f8f5;
}

.eta-info-table .eta-info-sub,
.eta-info-table .eta-info-note {
  text-align: left;
  white-space: nowrap;
  min-width: 180px;
}

.eta-note-icon {
  width: 18px;
  height: 18px;
  object-fit: contain;
  image-rendering: pixelated;
  vertical-align: -4px;
  margin-right: 2px;
}

.eta-server-tabs {
  display: inline-flex;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 3px;
  margin-right: 6px;
}

.eta-server-tab {
  min-height: 28px;
  border: 1px solid transparent;
  border-radius: 6px;
  padding: 0 14px;
  color: var(--muted);
  background: transparent;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.eta-server-tab:hover {
  background: var(--panel-strong);
}

.eta-server-tab.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.eta-workspace {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 16px;
}

.eta-sidebar {
  display: grid;
  gap: 6px;
  align-content: start;
  align-self: start;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  padding: 12px 10px;
}

.eta-cat {
  min-height: 34px;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--ink);
  background: transparent;
  font-size: 13px;
  font-weight: 700;
  text-align: left;
  cursor: pointer;
}

.eta-cat:hover {
  background: var(--panel-strong);
}

.eta-cat.is-active {
  border-color: var(--accent);
  color: #fff;
  background: var(--accent);
}

.eta-divider {
  height: 1px;
  margin: 4px 2px;
  background: var(--line);
}

.eta-cat-group summary {
  min-height: 34px;
  display: flex;
  align-items: center;
  border-radius: 8px;
  padding: 0 12px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  user-select: none;
}

.eta-cat-group summary:hover {
  background: var(--panel-strong);
}

.eta-cat-group > div {
  display: grid;
  gap: 2px;
  margin-top: 4px;
}

.eta-subcat {
  font-weight: 500;
  padding-left: 20px;
}

.eta-list-wrap {
  max-height: max(400px, calc(100vh - 235px));
}

.equip-list.eta-list {
  min-width: 0;
}

.eta-list thead th {
  text-align: center;
}

.eta-list thead th.eta-rank-head {
  width: 70px;
}

.eta-row td {
  padding: 6px 8px;
  font-size: 13px;
}

.eta-rank {
  font-weight: 700;
  white-space: nowrap;
}

.eta-delta {
  display: inline-block;
  margin-left: 5px;
  font-size: 11px;
  font-weight: 800;
}

.eta-compare-field {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;
}

.eta-compare-field span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.eta-compare-field select {
  min-height: 32px;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0 8px;
  color: var(--ink);
  background: #fff;
  font-size: 13px;
  outline: none;
}

.eta-compare-field select:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(15, 111, 99, 0.14);
}

.eta-delta.up {
  color: var(--danger);
}

.eta-delta.down {
  color: var(--blue);
}

.eta-delta.same {
  color: #a7b0ad;
}

.eta-new {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 999px;
  background: var(--gold);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

.eta-userid {
  font-weight: 600;
}

.eta-level,
.eta-essence {
  white-space: nowrap;
}

.eta-char-thumb {
  display: inline-grid;
  width: 38px;
  height: 38px;
  place-items: center;
  overflow: hidden;
  border: 1px solid rgba(15, 111, 99, 0.24);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #dfeae4);
  vertical-align: middle;
}

.eta-char-thumb img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

/* 창이 좁아지면 사이드바를 세로로 쌓지 않고 폭만 줄인다
   (#etaView 접두어: 뒤에 선언된 공용 .workspace 미디어 규칙보다 우선하기 위함) */
@media (max-width: 900px) {
  #etaView .eta-workspace {
    grid-template-columns: 140px minmax(0, 1fr);
    gap: 10px;
  }

  .eta-cat {
    padding: 0 8px;
    font-size: 12px;
  }

  .eta-subcat {
    padding-left: 14px;
  }
}


/* ── 장비 목록(리스트 뷰) ───────────────────────────── */

.workspace[hidden],
.icon-button[hidden],
.back-list-button[hidden] {
  display: none !important;
}

.list-workspace {
  display: block;
}

.back-list-button {
  min-height: 34px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  padding: 0 14px;
  color: var(--accent-strong);
  background: #fff;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.back-list-button:hover {
  background: var(--panel-strong);
}

.equip-list-wrap {
  /* 화면 세로 크기에 맞춰 목록 높이 자동 조절 (한 화면에 스크롤 없이 들어가도록) */
  max-height: max(400px, calc(100vh - 296px));
  overflow: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.equip-list {
  width: 100%;
  min-width: 900px;
  border-collapse: collapse;
}

.equip-list thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  padding: 10px 8px;
  border-bottom: 1px solid var(--line);
  background: var(--panel-strong);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
  white-space: nowrap;
}

.equip-list thead th.equip-info-head {
  text-align: left;
  padding-left: 16px;
}

.equip-list td {
  padding: 8px;
  border-bottom: 1px solid #e3ebe6;
  text-align: center;
  vertical-align: middle;
}

.equip-row {
  cursor: pointer;
}

.equip-row:nth-child(even) {
  background: #f4f8f5;
}

.equip-row:hover {
  background: rgba(15, 111, 99, 0.1);
}

.equip-info-cell {
  min-width: 220px;
}

.equip-info {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-left: 8px;
  text-align: left;
}

.equip-thumb {
  display: grid;
  width: 44px;
  height: 44px;
  flex: 0 0 auto;
  place-items: center;
  border: 1px solid rgba(15, 111, 99, 0.24);
  border-radius: 8px;
  background: linear-gradient(145deg, #ffffff, #dfeae4);
}

.equip-thumb img {
  width: 36px;
  height: 36px;
  object-fit: contain;
  image-rendering: pixelated;
}

.equip-name-block {
  display: grid;
  gap: 2px;
  min-width: 0;
}

.equip-name-block strong {
  font-size: 14px;
  line-height: 1.2;
  word-break: keep-all;
}

.equip-name-block small {
  color: var(--accent);
  font-size: 11px;
  font-weight: 700;
}

.equip-stat .range {
  display: block;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
}

.equip-stat .limit {
  display: block;
  margin-top: 1px;
  color: var(--danger);
  font-size: 11px;
  font-weight: 700;
  white-space: nowrap;
}

.equip-stat.is-zero .range {
  color: #a7b0ad;
  font-weight: 400;
}

.equip-list .empty-state {
  min-height: 320px;
}

.empty-state {
  display: grid;
  min-height: 480px;
  place-content: center;
  gap: 8px;
  text-align: center;
  color: var(--muted);
}

.empty-state strong {
  color: var(--ink);
  font-size: 24px;
}

/* 데이터 로딩 중 표시: 회전 링 + 안내 문구 */
.empty-state.is-loading {
  justify-items: center;
}

.loading-spinner {
  width: 38px;
  height: 38px;
  border: 4px solid rgba(120, 140, 170, 0.25);
  border-top-color: var(--accent, #4a7dc9);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .loading-spinner {
    animation-duration: 2.4s;
  }
}

@media (max-width: 900px) {
  .toolbar {
    grid-template-columns: 1fr;
  }

  .workspace {
    grid-template-columns: minmax(0, 1fr) 220px;
    gap: 12px;
    padding: 12px;
  }

  .control-grid {
    grid-template-columns: 1fr 1fr;
  }

  .search-field {
    grid-column: 1 / -1;
  }

  .result-band {
    align-items: center;
    flex-direction: row;
  }

  .compare-panel {
    padding: 10px;
  }

  .addon-window {
    padding: 14px;
  }

  .addon-titlebar {
    grid-template-columns: minmax(170px, auto) minmax(0, 1fr);
    gap: 12px;
  }

  .addon-tab {
    min-width: 135px;
  }

  .character-grid {
    grid-template-columns: repeat(5, minmax(96px, 1fr));
    gap: 12px;
    padding: 12px;
  }

  .character-portrait {
    width: 104px;
    height: 104px;
  }

  .character-portrait img {
    width: 102px;
    height: 102px;
  }

  .coefficient-grid,
  .damage-layout,
  .simulator-menu-shell {
    grid-template-columns: 1fr;
  }

  .coefficient-detail-header {
    grid-template-columns: auto minmax(0, 1fr) auto auto auto auto;
  }

  .coefficient-detail-header .dark-field {
    grid-column: 1 / -1;
  }

  .simulator-slot-grid {
    grid-template-columns: 1fr;
  }

  .stat-table th,
  .stat-table td {
    padding: 6px 5px;
    font-size: 12px;
  }
}

/* 탭이 좁아지기 시작하면 문의 버튼을 아랫줄로 내린다.
   같은 줄에 두면 TWChatOverlay가 더 못 줄어들어 나머지 탭만 눌린다 */
@media (max-width: 900px) {
  .top-tabs {
    grid-template-columns: repeat(6, 1fr);
  }

  .board-open-button {
    grid-column: 1 / -1;
  }
}


/* ── TWChatOverlay 탭 ─────────────────────────────────────── */

.overlay-actions-field {
  justify-items: end;
}

.overlay-actions-field > span {
  justify-self: end;
}

.overlay-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: stretch;
}

.overlay-download {
  display: grid;
  gap: 1px;
  align-content: center;
  min-height: 44px;
  padding: 5px 18px;
  border: 1px solid var(--accent);
  border-radius: 8px;
  background: var(--accent);
  color: #fff;
  text-align: center;
  text-decoration: none;
}

.overlay-download:hover {
  background: var(--accent-strong);
  border-color: var(--accent-strong);
}

.overlay-download strong {
  font-size: 14px;
  font-weight: 700;
}

.overlay-download small {
  font-size: 11px;
  font-weight: 600;
  opacity: 0.82;
}

/* 베타 버전: 정식 다운로드와 구분되게 테두리만 금색으로 */
.overlay-beta {
  border-color: var(--gold);
  background: #fff;
  color: var(--gold);
}

.overlay-beta:hover {
  border-color: var(--gold);
  background: var(--gold);
  color: #fff;
}

.overlay-repo-link {
  display: grid;
  place-items: center;
  min-height: 44px;
  padding: 5px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  color: var(--muted);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}

.overlay-repo-link:hover {
  color: var(--ink);
  border-color: var(--accent);
}

/* 계산기 헤더의 "계산 타입" · "몬스터"는 라벨이 위에 쌓여 줄 높이가 들쭉날쭉했다.
   라벨을 왼쪽으로 붙여 다른 버튼들과 같은 한 줄 높이로 맞춘다 */
.coefficient-detail-header > *,
.dmg-head > * {
  min-width: 0;
}

.coefficient-detail-header .dark-field,
.dmg-head .dmg-monster {
  display: flex;
  align-items: center;
  gap: 6px;
}

.coefficient-detail-header .dark-field > span,
.dmg-head .dmg-monster > span {
  white-space: nowrap;
}

.coefficient-detail-header .dark-field select,
.dmg-head .dmg-monster select {
  width: 0;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 38px;
}

/* 넓은 화면에서만 넉넉한 최소 폭을 준다. 좁은 화면에선 폭을 밀어내기 때문 */
@media (min-width: 1025px) {
  .coefficient-detail-header .dark-field select {
    min-width: 132px;
  }

  .dmg-head .dmg-monster select {
    min-width: 220px;
  }
}

.overlay-panel {
  padding: 20px 24px 28px;
}

.overlay-loading {
  display: grid;
  gap: 10px;
  place-items: center;
  padding: 80px 0;
  color: var(--muted);
  font-size: 13px;
}

.overlay-error {
  padding: 70px 16px;
}

.overlay-error-actions {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
  margin-top: 12px;
}

.overlay-error-actions a {
  color: var(--accent);
  font-size: 13px;
  font-weight: 700;
}

/* README 본문 — GitHub이 내려준 HTML과 내장 변환기 결과 양쪽에 같은 규칙을 쓴다 */

.markdown-body {
  max-width: 860px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 14px;
  line-height: 1.75;
  overflow-wrap: anywhere;
}

.markdown-body h1,
.markdown-body h2,
.markdown-body h3,
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 {
  margin: 30px 0 10px;
  line-height: 1.35;
  letter-spacing: 0;
}

.markdown-body > :first-child {
  margin-top: 0;
}

.markdown-body h1,
.markdown-body h2 {
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

.markdown-body h1 { font-size: 26px; }
.markdown-body h2 { font-size: 21px; }
.markdown-body h3 { font-size: 17px; color: var(--accent); }
.markdown-body h4,
.markdown-body h5,
.markdown-body h6 { font-size: 15px; }

.markdown-body p {
  margin: 10px 0;
}

.markdown-body ul,
.markdown-body ol {
  margin: 8px 0;
  padding-left: 22px;
}

.markdown-body li {
  margin: 4px 0;
}

.markdown-body li > div {
  margin: 6px 0;
}

.markdown-body a {
  color: var(--blue);
  text-decoration: none;
  font-weight: 600;
}

.markdown-body a:hover {
  text-decoration: underline;
}

.markdown-body a.is-inert {
  color: inherit;
  font-weight: inherit;
  cursor: default;
}

.markdown-body a.anchor {
  display: none;
}

.markdown-body img {
  display: block;
  max-width: 100%;
  height: auto;
  margin: 10px 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.markdown-body code {
  padding: 1px 6px;
  border-radius: 5px;
  background: var(--panel-strong);
  color: var(--accent-strong);
  font-family: "Consolas", "D2Coding", monospace;
  font-size: 0.9em;
}

.markdown-body pre {
  margin: 12px 0;
  padding: 12px 14px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.markdown-body pre code {
  padding: 0;
  background: transparent;
}

.markdown-body hr {
  margin: 26px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

.markdown-body blockquote {
  margin: 12px 0;
  padding: 2px 14px;
  border-left: 3px solid var(--accent);
  color: var(--muted);
}

.markdown-body table {
  width: 100%;
  margin: 12px 0;
  border-collapse: collapse;
}

.markdown-body th,
.markdown-body td {
  padding: 7px 10px;
  border: 1px solid var(--line);
  text-align: left;
}


/* ── 문의 · 건의 게시판 ── */

/* 탭 바 맨 오른쪽. 탭이 아니라 별개 동작이라 생김새를 다르게 둔다 */
.board-open-button {
  padding: 8px 14px;
  border: 1px solid var(--accent);
  border-radius: 6px;
  background: transparent;
  color: var(--accent-strong, #2e8b57);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  white-space: nowrap;
  cursor: pointer;
}

.board-open-button:hover {
  background: var(--accent);
  color: #fff;
}

.board-modal-panel {
  width: min(760px, 94vw);
}

.board-body {
  display: grid;
  gap: 10px;
}

.board-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
}

.board-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.board-filter {
  padding: 5px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-family: inherit;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  cursor: pointer;
}

.board-filter.is-active {
  border-color: var(--accent);
  background: var(--accent);
  color: #fff;
}

.board-write-button,
.board-submit {
  padding: 7px 16px;
  border: 0;
  border-radius: 6px;
  background: var(--accent);
  color: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.board-submit[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.board-back {
  justify-self: start;
  padding: 4px 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.board-list {
  display: grid;
  gap: 6px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 제목은 남는 폭을 다 쓰고, 분류/답변/작성정보는 제 너비만 쓴다 */
.board-item {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 10px;
  align-items: center;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
}

.board-item:hover {
  border-color: var(--accent);
}

.board-item-title {
  min-width: 0;
  overflow: hidden;
  font-weight: 700;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.board-item-meta {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
}

.board-cat {
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.board-cat[data-cat="버그"] { background: #fdecec; color: #b3413f; }
.board-cat[data-cat="건의"] { background: #eef3fd; color: #43619e; }
.board-cat[data-cat="문의"] { background: #eef7f1; color: #2e8b57; }

.board-answered {
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  white-space: nowrap;
}

.board-detail {
  display: grid;
  gap: 8px;
}

.board-detail h3 {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin: 0;
  font-size: 16px;
}

.board-content {
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
  font-size: 14px;
  line-height: 1.7;
  overflow-wrap: anywhere;
}

.board-answer {
  display: grid;
  gap: 6px;
  padding-left: 12px;
  border-left: 3px solid var(--accent);
}

.board-answer-head {
  color: var(--accent-strong, #2e8b57);
  font-size: 12px;
  font-weight: 800;
}

.board-pending,
.board-empty {
  padding: 16px;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  text-align: center;
}

.board-notice,
.board-error {
  margin: 0;
  padding: 9px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 700;
}

.board-notice {
  background: #eef7f1;
  color: var(--accent-strong, #2e8b57);
}

.board-error {
  background: #fdecec;
  color: #b3413f;
}

.board-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.board-field {
  display: grid;
  gap: 4px;
  min-width: 0;
}

.board-field-wide {
  grid-column: 1 / -1;
}

.board-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.board-field > span small {
  font-weight: 600;
}

.board-field input,
.board-field select,
.board-field textarea {
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  resize: vertical;
}

/* 봇만 채우는 미끼 칸. 화면에서 완전히 감춘다 */
.board-honeypot {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

.board-form-foot {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  justify-content: space-between;
  grid-column: 1 / -1;
}

.board-hint {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
}


/* ── 에타 레벨 누적 재료 계산 ── */
.eta-calc {
  margin-bottom: 18px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel-strong);
}

.eta-calc-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-end;
}

.eta-calc-field {
  display: grid;
  gap: 4px;
}

.eta-calc-field > span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.eta-calc-field input {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: #fff;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  text-align: center;
}

.eta-calc-arrow {
  padding-bottom: 9px;
  color: var(--muted);
  font-size: 16px;
  font-weight: 800;
}

.eta-calc-hint,
.eta-calc-warn {
  margin: 12px 0 0;
  font-size: 13px;
  font-weight: 600;
}

.eta-calc-hint { color: var(--muted); }
.eta-calc-warn { color: #b3413f; }

.eta-calc-title {
  margin: 14px 0 8px;
  font-size: 14px;
  font-weight: 800;
}

.eta-calc-grid {
  display: grid;
  gap: 8px;
}

/* 경험치·Seed·정수는 항상 셋이라 한 줄에 고정한다 */
.eta-calc-grid.is-main-row {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* 부재료는 구간마다 종류가 달라서(1~6종) 칸 수를 고정하지 않고 폭에 맞춰 흐르게 둔다 */
.eta-calc-grid.is-sub-row {
  margin-top: 8px;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
}

.eta-calc-cell {
  display: grid;
  gap: 2px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

/* 경험치·Seed·정수는 구간에 상관없이 항상 드는 것이라 눈에 띄게 둔다 */
.eta-calc-cell.is-main {
  border-color: #cfe3d6;
  background: #f4f8f5;
}

.eta-calc-cell span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  overflow-wrap: anywhere;
}

.eta-calc-cell strong {
  font-size: 15px;
  font-weight: 800;
}


/* 획득처 체크박스 — 레벨 입력 오른쪽에 붙는다 */
.eta-calc-sources {
  display: grid;
  gap: 4px;
  min-width: 0;
  margin-left: 8px;
  padding-left: 16px;
  border-left: 1px solid var(--line);
}

.eta-calc-sources-label {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.eta-calc-source-list {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 14px;
}

.eta-calc-source {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.eta-calc-source input {
  width: 15px;
  height: 15px;
  flex: 0 0 15px;
  accent-color: var(--accent);
  cursor: pointer;
}

.eta-calc-days-box {
  margin-top: 14px;
  padding-top: 12px;
  border-top: 1px solid var(--line);
}

.eta-calc-days {
  color: var(--accent-strong, #2e8b57);
  font-size: 16px;
}

.eta-calc-days-list {
  display: grid;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* 재료마다 동시에 모으므로 전체 소요는 가장 오래 걸리는 재료가 정한다.
   그 재료를 굵게 표시해 어디가 발목을 잡는지 바로 보이게 한다 */
.eta-calc-days-list li {
  display: grid;
  grid-template-columns: minmax(120px, auto) 1fr auto;
  gap: 10px;
  align-items: baseline;
  padding: 6px 10px;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
}

/* 구간이 겹쳐 같이 모이는 재료는 묶여 보이게 한다 */
.eta-calc-days-list li.is-parallel {
  background: #f4f8f5;
}

.eta-calc-hidden {
  margin-left: 6px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
}

.eta-calc-days-list span { font-weight: 700; }

.eta-calc-days-list em {
  color: var(--muted);
  font-size: 12px;
  font-style: normal;
  font-weight: 600;
}

.eta-calc-days-list strong { font-weight: 800; }


/* 배타 그룹 때문에 못 켜는 버프 (클로에 작열 / 풍화) */
.dmg-row.is-locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.dmg-row.is-locked .dmg-switch {
  cursor: not-allowed;
}

/* 방어 무시는 발동해야 걸리므로 아래에 따로 둔다 */
.dmg-pierce-title {
  margin: 16px 0 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}

.dmg-pierce-title small {
  margin-left: 6px;
  font-size: 11px;
  font-weight: 700;
}

.dmg-pierce {
  display: grid;
  gap: 6px;
}

.dmg-pierce div {
  display: grid;
  grid-template-columns: minmax(150px, auto) auto 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: #fff;
}

.dmg-pierce span {
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
}

.dmg-pierce span em {
  margin-left: 5px;
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.dmg-pierce b {
  justify-self: end;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.dmg-pierce strong {
  color: var(--accent);
  font-size: 14px;
  font-weight: 800;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}


/* 계수 계산기 스탯이 비어 있을 때 */
.dmg-warn {
  margin: 0 0 10px;
  padding: 9px 12px;
  border: 1px solid #f0c9c7;
  border-radius: 8px;
  background: #fdecec;
  color: #b3413f;
  font-size: 13px;
  font-weight: 700;
}

/* 방어 관통: 지금 계수로 그 콘텐츠에 대미지가 들어가는지 */
.coefficient-pierce-title {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 14px 0 8px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 900;
}

.coefficient-pierce {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 8px;
}

.coefficient-pierce div {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 8px 6px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--panel);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-align: center;
}

.coefficient-pierce span {
  max-width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.coefficient-pierce strong {
  font-size: 14px;
}

.coefficient-pierce strong.is-ok { color: #2563c9; }
.coefficient-pierce strong.is-no { color: #c62828; }

/* 남은/모자란 계수. 판정보다 덜 중요해 작게 */
.coefficient-pierce em {
  color: var(--muted);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

@media (max-width: 900px) {
  .coefficient-pierce { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}


/* 도움말 모달 본문 문단 */
.modal-text {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.7;
}

.modal-text:last-child { margin-bottom: 0; }

/* 대미지 계산기 JSON 저장/불러오기 */
.dmg-io {
  display: flex;
  gap: 6px;
}