:root {
  --bg: #0f1115;
  --panel: #181b22;
  --panel2: #1f232c;
  --border: #2a2f3a;
  --text: #e6e8ec;
  --muted: #8b93a3;
  --accent: #5aa9ff;
  --pos: #4ade80;
  --neg: #f87171;
}

* {
  box-sizing: border-box;
}
body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  background: var(--bg);
  color: var(--text);
}

header {
  padding: 16px 24px;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
}
header h1 {
  margin: 0 0 8px 0;
  font-size: 18px;
}
.char-bar {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.char-bar select,
.char-bar input,
.char-bar button {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 13px;
}
.char-bar button {
  cursor: pointer;
}
.char-bar button:hover {
  border-color: var(--accent);
}
#status {
  color: var(--muted);
  font-size: 12px;
  margin-left: 8px;
}

main {
  padding: 16px 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.builds {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.build-col {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
}
.build-head {
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.build-head h2 {
  margin: 0;
  font-size: 14px;
}
.copy-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 10px;
  border-radius: 5px;
  font-size: 12px;
  cursor: pointer;
}
.copy-btn:hover {
  border-color: var(--accent);
}

.editor {
  padding: 12px 14px;
  max-height: 60vh;
  overflow-y: auto;
}

.section {
  margin-bottom: 16px;
}
.section-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.6px;
  margin-bottom: 6px;
}
.section-summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 0;
  margin-bottom: 4px;
  border-bottom: 1px solid var(--border);
  user-select: none;
}
.section-summary::-webkit-details-marker { display: none; }
.section-summary::before {
  content: "▸ ";
  font-size: 10px;
  color: var(--muted);
  margin-right: 4px;
}
details[open] > .section-summary::before {
  content: "▾ ";
}
.row {
  display: grid;
  grid-template-columns: 1fr 70px;
  gap: 8px;
  align-items: center;
  padding: 4px 0;
  font-size: 13px;
  border-bottom: 1px dashed transparent;
}
.row:hover {
  background: rgba(255, 255, 255, 0.02);
}
.row .label {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.row input[type="number"] {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 4px;
  width: 100%;
  font-size: 13px;
}
.diffed input[type="number"] {
  border-color: var(--accent);
}

.actions {
  display: flex;
  gap: 12px;
  align-items: center;
}
.primary {
  background: var(--accent);
  color: #0b1220;
  border: none;
  padding: 10px 18px;
  border-radius: 6px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
}
.primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
#calcStatus {
  color: var(--muted);
  font-size: 12px;
}

.results {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.summary {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  font-size: 13px;
}
.summary .item {
  background: var(--panel2);
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
}
.summary .pos {
  color: var(--pos);
}
.summary .neg {
  color: var(--neg);
}

#chart {
  max-height: 420px;
}

.delta {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  font-size: 13px;
}
.delta th,
.delta td {
  padding: 6px 10px;
  border-bottom: 1px solid var(--border);
  text-align: right;
}
.delta th:first-child,
.delta td:first-child {
  text-align: left;
}
.delta th {
  color: var(--muted);
  font-weight: 500;
  font-size: 12px;
}
.delta .pos {
  color: var(--pos);
}
.delta .neg {
  color: var(--neg);
}

/* ── comparison sheet tabs ── */
.tabs {
  display: flex;
  gap: 2px;
  margin: 16px 0 0;
  border-bottom: 1px solid var(--border);
}
.tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--muted);
  padding: 8px 16px;
  font-size: 13px;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  font-family: inherit;
}
.tab-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.tab-btn.active {
  color: var(--accent);
  border-color: var(--border);
  background: var(--panel2);
  margin-bottom: -1px;
}
.tab-panel {
  display: none;
  padding-top: 12px;
}
.tab-panel.active {
  display: block;
}

/* ── editor: section head with totals ── */
.section-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}
.section-total {
  font-size: 11px;
  color: var(--accent);
  font-weight: 600;
}
.section-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

/* ── editor: ark passive rows ── */
.ark-row {
  display: grid;
  grid-template-columns: 1fr 28px 50px 22px;
  gap: 4px;
  align-items: center;
}
.ark-name-select {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 13px;
  width: 100%;
  cursor: pointer;
}
.ark-name-select:focus {
  outline: none;
  border-color: var(--accent);
}
.ark-name-select option,
.ark-name-select optgroup {
  background: var(--panel2);
  color: var(--text);
}
.ark-tier-badge {
  font-size: 10px;
  color: var(--muted);
  text-align: center;
  white-space: nowrap;
}
.ark-row input.ark-level {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 4px;
  border-radius: 4px;
  font-size: 12px;
  text-align: center;
}
.row-del {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0;
  font-size: 11px;
  cursor: pointer;
  height: 22px;
}
.row-del:hover {
  color: var(--neg);
  border-color: var(--neg);
}
.row-add {
  margin-top: 4px;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 4px 8px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.row-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ── editor: skill card ── */
.skill-card {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 8px;
  margin-bottom: 4px;
}
.skill-top {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 4px;
  font-size: 13px;
}
.skill-name {
  flex: 1;
  font-weight: 500;
}
.skill-lv-label {
  color: var(--muted);
  font-size: 11px;
}
.skill-lv {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 2px 4px;
  border-radius: 3px;
  width: 44px;
  font-size: 12px;
  text-align: center;
}
.tripod-wrap {
  display: flex;
  gap: 6px;
}
.tripod {
  display: flex;
  align-items: center;
  gap: 3px;
  flex: 1;
}
.tripod-label {
  font-size: 11px;
  color: var(--muted);
  min-width: 18px;
}
.tripod-input {
  background: var(--bg);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 2px 4px;
  border-radius: 3px;
  width: 36px;
  font-size: 12px;
  text-align: center;
}

/* ── results: per-skill detail accordion ── */
.detail {
  margin-top: 20px;
}
.detail h3 {
  font-size: 14px;
  margin: 0 0 10px;
  color: var(--muted);
}
.skill-detail {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  margin-bottom: 6px;
  overflow: hidden;
}
.skill-detail summary {
  cursor: pointer;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.skill-detail summary:hover {
  background: rgba(255, 255, 255, 0.03);
}
.skill-detail[open] summary {
  border-bottom: 1px solid var(--border);
}
.sd-name {
  font-weight: 600;
}
.sd-numbers {
  color: var(--muted);
  font-size: 12px;
}
.motion-tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
}
.motion-tbl th {
  text-align: right;
  padding: 6px 10px;
  color: var(--muted);
  font-weight: 500;
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.motion-tbl th:first-child {
  text-align: left;
}
.motion-tbl td {
  text-align: right;
  padding: 4px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.motion-tbl td:first-child {
  text-align: left;
}
.motion-row {
  background: rgba(90, 169, 255, 0.05);
}
.case-row .case-name {
  color: var(--muted);
  padding-left: 24px;
}
.motion-tbl .pos {
  color: var(--pos);
}
.motion-tbl .neg {
  color: var(--neg);
}
.buff-list {
  padding: 8px 12px;
  font-size: 11px;
  color: var(--muted);
  background: rgba(0, 0, 0, 0.2);
  border-top: 1px solid var(--border);
}
.buff-list b {
  color: var(--text);
}

/* prob input in case rows */
.prob-input {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 2px 4px;
  border-radius: 3px;
  width: 52px;
  font-size: 12px;
  text-align: center;
}
.prob-input.prob-modified {
  border-color: var(--accent);
  color: var(--accent);
}

/* buff toggle button */
.buff-toggle {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.buff-toggle:hover,
.buff-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* expanded buff detail row */
.buff-detail-row td {
  background: rgba(0, 0, 0, 0.25);
  border-bottom: 1px solid var(--border);
}
.buff-detail-cell {
  padding: 6px 24px !important;
  text-align: left !important;
}
.buff-chip {
  display: inline-block;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 7px;
  font-size: 11px;
  color: var(--muted);
  margin: 2px 3px;
}
.buff-chip b {
  color: var(--text);
}

/* case action cell holds buff toggle + 수식 toggle side by side */
.case-actions {
  white-space: nowrap;
}
.case-actions > button + button {
  margin-left: 4px;
}
.formula-toggle {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}
.formula-toggle:hover,
.formula-toggle.active {
  border-color: var(--accent);
  color: var(--accent);
}

/* expanded formula breakdown row */
.formula-detail-row td {
  background: rgba(0, 0, 0, 0.3);
  border-bottom: 1px solid var(--border);
}
.formula-detail-cell {
  padding: 12px 24px !important;
  text-align: left !important;
}
.formula-wrap {
  font-size: 12px;
}
.formula-head {
  font-size: 13px;
  margin-bottom: 8px;
  color: var(--text);
}
.formula-head .formula-loc {
  color: var(--muted);
  font-weight: normal;
  margin-left: 6px;
  font-size: 11px;
}
.formula-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 8px;
}
.formula-tab {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.formula-tab.active {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--panel2);
}
.formula-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}
.formula-step {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  grid-template-areas:
    "label formula result"
    "label sub     result";
  column-gap: 12px;
  row-gap: 2px;
  padding: 6px 10px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
  align-items: center;
}
.formula-step.highlight {
  border-color: var(--accent);
  background: rgba(90, 169, 255, 0.08);
}
.formula-step .fs-label {
  grid-area: label;
  color: var(--muted);
  font-size: 11px;
}
.formula-step .fs-formula {
  grid-area: formula;
  color: var(--muted);
  font-size: 11px;
}
.formula-step .fs-sub {
  grid-area: sub;
  color: var(--text);
  font-size: 11px;
  word-break: break-all;
}
.formula-step .fs-result {
  grid-area: result;
  color: var(--text);
  text-align: right;
  white-space: nowrap;
}
.formula-step code {
  background: transparent;
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  font-size: 11px;
}
.formula-mismatch-note {
  color: var(--neg);
  font-size: 11px;
  padding: 4px 10px;
}

.formula-params > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: 12px;
  padding: 4px 0;
}
.formula-params > summary:hover {
  color: var(--accent);
}
.fp-field {
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 10px;
  margin: 4px 0;
  background: var(--panel);
}
.fp-head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
}
.fp-head .fp-key {
  color: var(--text);
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
  min-width: 160px;
}
.fp-head .fp-val {
  color: var(--accent);
  font-weight: 600;
}
.fp-head .fp-val.capped {
  color: var(--neg);
}
.fp-head .fp-raw {
  color: var(--muted);
  font-size: 10px;
}
.fp-head .fp-tag {
  margin-left: auto;
  color: var(--muted);
  font-size: 10px;
}
.fp-cap-note {
  color: var(--muted);
  font-size: 10px;
  padding: 2px 0;
}
.fp-cat {
  margin-top: 4px;
  padding: 4px 6px;
  background: var(--panel2);
  border-radius: 3px;
}
.fp-cat-head {
  display: flex;
  gap: 8px;
  font-size: 11px;
  align-items: center;
}
.fp-cat-name {
  color: var(--text);
}
.fp-cat-op {
  color: var(--muted);
  font-size: 10px;
}
.fp-cat-sum {
  margin-left: auto;
  color: var(--accent);
  font-size: 11px;
}
.fp-tbl {
  width: 100%;
  border-collapse: collapse;
  margin-top: 3px;
}
.fp-tbl td {
  padding: 2px 4px;
  border: none;
  font-size: 11px;
}
.fp-src {
  color: var(--muted);
  width: 70%;
}
.fp-op {
  color: var(--muted);
  width: 8%;
  text-align: center;
}
.fp-leaf-val {
  text-align: right;
  font-family: "JetBrains Mono", Menlo, Consolas, monospace;
}
.fp-leaf-val.pos {
  color: var(--pos);
}
.fp-leaf-val.neg {
  color: var(--neg);
}
.fp-leaf-disabled td {
  opacity: 0.35;
  text-decoration: line-through;
}
.fp-leaf-toggle-cell {
  width: 32px;
  text-align: right;
  padding-right: 2px;
}
.fp-leaf-toggle {
  font-size: 9px;
  padding: 1px 4px;
  border-radius: 3px;
  border: 1px solid var(--border);
  background: var(--panel2);
  color: var(--pos);
  cursor: pointer;
  line-height: 1.4;
}
.fp-leaf-toggle.active {
  background: var(--neg);
  color: #fff;
  border-color: var(--neg);
}

/* ── shared A+B buff editor ── */
.shared-buff-editor {
  border: 1px solid var(--accent);
  border-radius: 6px;
  margin-bottom: 8px;
  background: transparent;
}
.shared-buff-summary {
  cursor: pointer;
  padding: 7px 12px;
  font-size: 12px;
  font-weight: 600;
  color: var(--accent);
  user-select: none;
  list-style: none;
}
.shared-buff-summary::-webkit-details-marker { display: none; }
.shared-buff-editor[open] .shared-buff-summary { color: var(--accent); }
.shared-buff-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.shared-buff-row {
  gap: 6px;
  align-items: center;
}
.shared-buff-badge {
  display: inline-block;
  font-size: 9px;
  font-weight: 700;
  padding: 1px 5px;
  border-radius: 3px;
  min-width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.shared-buff-badge-both { background: var(--accent); color: #fff; }
.shared-buff-badge-a    { background: var(--pos); color: #fff; }
.shared-buff-badge-b    { background: #a78bfa; color: #fff; }
.shared-buff-stacks {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
  white-space: nowrap;
}
.shared-buff-add-btn {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: 4px;
  padding: 3px 10px;
  cursor: pointer;
  font-size: 11px;
  white-space: nowrap;
}
.shared-buff-add-btn:hover { filter: brightness(1.15); }

/* ── buff editor block ── */
.buff-editor {
  border-top: 1px solid var(--border);
  margin-top: 4px;
}
.buff-editor-summary {
  cursor: pointer;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--muted);
  list-style: none;
  user-select: none;
}
.buff-editor-summary::-webkit-details-marker { display: none; }
.buff-editor[open] .buff-editor-summary {
  color: var(--accent);
}
.buff-editor-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.buff-group-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-top: 6px;
  margin-bottom: 2px;
}
.buff-edit-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  padding: 4px 0;
  font-size: 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.buff-edit-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.buff-edit-controls {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}
.buff-edit-row.removed .buff-edit-name,
.buff-edit-row.removed .buff-edit-stack {
  opacity: 0.35;
  text-decoration: line-through;
}
.buff-edit-name {
  color: var(--text);
  font-weight: 500;
}
.buff-edit-comment {
  color: var(--muted);
  font-size: 11px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.buff-edit-stack {
  color: var(--muted);
  min-width: 36px;
}
.buff-edit-row.added .buff-edit-name {
  color: var(--pos);
}
.buff-add-hint {
  font-size: 11px;
  color: var(--accent);
  margin-top: 2px;
  min-height: 14px;
  display: block;
}
.buff-toggle-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
}
.buff-toggle-btn:hover {
  border-color: var(--neg);
  color: var(--neg);
}
.buff-edit-row.removed .buff-toggle-btn {
  border-color: var(--neg);
  color: var(--neg);
}
.buff-add-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px dashed var(--border);
}
.buff-name-inp {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 6px;
  border-radius: 4px;
  font-size: 12px;
}
.buff-stack-inp {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 3px 4px;
  border-radius: 4px;
  width: 52px;
  font-size: 12px;
  text-align: center;
}
.buff-add-confirm {
  background: var(--panel2);
  border: 1px dashed var(--border);
  color: var(--muted);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
}
.buff-add-confirm:hover {
  border-color: var(--pos);
  color: var(--pos);
}
.buff-stack-inp {
  width: 48px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 3px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: center;
}
.buff-del-btn {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 2px 6px;
  font-size: 11px;
  cursor: pointer;
}
.buff-del-btn:hover {
  color: var(--neg);
  border-color: var(--neg);
}
.buff-apply-note {
  font-size: 11px;
  color: var(--neg);
  margin-top: 6px;
  opacity: 0.8;
}

/* ── per-buff sub-effect accordion ── */
.buff-subgroup {
  border: 1px solid var(--border);
  border-radius: 4px;
  margin-bottom: 4px;
  background: var(--bg);
}
.buff-subgroup-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  cursor: pointer;
  font-size: 12px;
  list-style: none;
  user-select: none;
}
.buff-subgroup-summary::-webkit-details-marker { display: none; }
.buff-subgroup-summary.removed .buff-edit-name {
  opacity: 0.35;
  text-decoration: line-through;
}
.buff-whole-toggle {
  margin-left: auto;
  flex-shrink: 0;
}
.buff-subeffect-row {
  display: flex;
  align-items: center;
  padding: 3px 8px 3px 20px;
  border-top: 1px solid var(--border);
  gap: 6px;
}
.buff-subeffect-row .buff-edit-info {
  flex: 1;
  min-width: 0;
}
.buff-sub-rawlog {
  font-size: 11px;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.buff-subeffect-row.removed .buff-sub-rawlog {
  opacity: 0.35;
  text-decoration: line-through;
}
.buff-sub-toggle {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 2px 7px;
  border-radius: 4px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}
.buff-sub-toggle:hover:not(:disabled) {
  border-color: var(--neg);
  color: var(--neg);
}
.buff-subeffect-row.removed .buff-sub-toggle {
  border-color: var(--neg);
  color: var(--neg);
}
.buff-sub-toggle:disabled {
  opacity: 0.3;
  cursor: default;
}

/* ── damage coefficient breakdown ── */
.coeff-block {
  margin-top: 6px;
  border-color: #3a4055;
}
.coeff-field {
  border-bottom: 1px solid var(--border);
  font-size: 12px;
}
.coeff-field:last-child {
  border-bottom: none;
}
.coeff-field-summary {
  cursor: pointer;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 10px;
  user-select: none;
  list-style: none;
}
.coeff-field-summary:hover {
  background: rgba(255,255,255,0.03);
}
.coeff-label {
  color: var(--muted);
  font-size: 12px;
}
.coeff-value {
  font-weight: 600;
  color: var(--accent);
  font-family: monospace;
  font-size: 13px;
}
.coeff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
  padding: 0 8px 6px;
}
.coeff-table tr:hover td {
  background: rgba(255,255,255,0.02);
}
.coeff-cat {
  color: var(--muted);
  padding: 2px 6px 2px 18px;
  white-space: nowrap;
  width: 80px;
}
.coeff-src {
  color: var(--text);
  padding: 2px 6px;
  flex: 1;
}
.coeff-val {
  font-family: monospace;
  text-align: right;
  padding: 2px 10px 2px 6px;
  white-space: nowrap;
}
.coeff-val.pos { color: var(--pos, #6ad59a); }
.coeff-val.neg { color: var(--neg, #e07b7b); }
.coeff-op {
  color: var(--muted);
  font-family: monospace;
  font-size: 11px;
  text-align: center;
  padding: 2px 6px;
  width: 40px;
}
.coeff-raw {
  color: var(--muted);
  text-decoration: line-through;
  font-weight: normal;
  margin-right: 4px;
}
.coeff-raw-paren {
  color: var(--muted);
  font-weight: normal;
  font-size: 11px;
  margin-left: 4px;
}
.coeff-capped {
  color: var(--accent);
  font-weight: 600;
}
.coeff-cap-note {
  color: #d6a04a;
  font-size: 11px;
  padding: 4px 12px;
  background: rgba(214, 160, 74, 0.08);
  border-left: 2px solid #d6a04a;
  margin: 2px 8px;
}
.coeff-agg-hint {
  color: var(--muted);
  font-family: monospace;
  font-size: 11px;
  padding: 3px 12px 6px;
  white-space: nowrap;
  overflow-x: auto;
}
.coeff-cat-block {
  margin: 4px 8px 6px;
  border: 1px solid var(--border);
  border-radius: 3px;
  background: rgba(255,255,255,0.015);
}
.coeff-cat-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 3px 8px;
  background: rgba(255,255,255,0.03);
  border-bottom: 1px solid var(--border);
  font-size: 11px;
}
.coeff-cat-name {
  color: var(--text);
  font-weight: 500;
  flex: 1;
}
.coeff-cat-op {
  color: var(--muted);
  font-size: 10px;
  font-style: italic;
  margin: 0 8px;
}
.coeff-cat-sum {
  color: var(--accent);
  font-family: monospace;
  font-weight: 600;
}

/* ── A/B side-by-side detail layout ── */
.detail-sides {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  align-items: start;
}
.detail-sides-global {
  margin-bottom: 12px;
}
.detail-side {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.detail-side-a {
  border-top: 2px solid rgba(90, 169, 255, 0.65);
}
.detail-side-b {
  border-top: 2px solid rgba(74, 222, 128, 0.65);
}
.detail-side-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 5px 10px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  letter-spacing: 0.5px;
  text-transform: uppercase;
}
.detail-side-a .detail-side-head {
  color: rgba(90, 169, 255, 0.95);
}
.detail-side-b .detail-side-head {
  color: rgba(74, 222, 128, 0.95);
}
.detail-side .motion-tbl {
  flex: 1;
}

/* ── per-side global buff editor ── */
.global-buff-editor {
  border: none;
  background: transparent;
  margin: 0;
}
.global-buff-summary {
  cursor: pointer;
  padding: 7px 12px;
  font-size: 12px;
  color: var(--muted);
  list-style: none;
  user-select: none;
  background: rgba(255,255,255,0.015);
  border-bottom: 1px solid var(--border);
}
.global-buff-summary::-webkit-details-marker { display: none; }
.global-buff-editor[open] .global-buff-summary {
  color: var(--accent);
}
.global-buff-body {
  padding: 8px 12px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.buff-global-empty {
  font-size: 11px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 0;
}

/* ── 전체 스킬 일괄 적용 row ── */
.buff-bulk-row {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 4px;
}
.buff-bulk-add,
.buff-bulk-remove {
  border: 1px dashed var(--border);
  padding: 3px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  white-space: nowrap;
  background: var(--panel2);
}
.buff-bulk-add {
  color: var(--muted);
}
.buff-bulk-add:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.buff-bulk-remove {
  color: rgba(248, 113, 113, 0.85);
  border-color: rgba(248, 113, 113, 0.45);
  border-style: solid;
}
.buff-bulk-remove:hover {
  background: rgba(248, 113, 113, 0.12);
  border-color: var(--neg);
  color: var(--neg);
}

/* ── outer tabs (스킬 데미지 비교 / 스킬 로테이션 시뮬레이터) ── */
.outer-tabs {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.outer-tab-bar {
  display: flex;
  gap: 2px;
  border-bottom: 2px solid var(--border);
}
.outer-tab-btn {
  background: transparent;
  border: 1px solid transparent;
  border-bottom: none;
  color: var(--muted);
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  font-family: inherit;
  margin-bottom: -2px;
}
.outer-tab-btn:hover {
  color: var(--text);
  background: rgba(255,255,255,0.03);
}
.outer-tab-btn.active {
  color: var(--accent);
  border-color: var(--border);
  border-bottom-color: var(--panel);
  background: var(--panel);
}
.outer-tab-panel {
  display: none;
}
.outer-tab-panel.active {
  display: block;
}

/* ── rotation simulator ── */
.rot-sim {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 16px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 8px 8px;
}
.rot-editors {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.rot-side {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.rot-side-a {
  border-top: 2px solid rgba(90, 169, 255, 0.65);
}
.rot-side-b {
  border-top: 2px solid rgba(74, 222, 128, 0.65);
}
.rot-side-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  padding: 6px 12px;
  background: rgba(255,255,255,0.02);
  border-bottom: 1px solid var(--border);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.rot-side-a .rot-side-head { color: rgba(90, 169, 255, 0.95); }
.rot-side-b .rot-side-head { color: rgba(74, 222, 128, 0.95); }

.rot-slots-list {
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 40px;
}
.rot-empty {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
  padding: 4px 2px;
}
.rot-slot-item {
  border: 1px solid var(--border);
  border-radius: 4px;
  background: var(--panel);
  margin-bottom: 4px;
}
.rot-slot-row {
  display: grid;
  grid-template-columns: 18px 26px 1fr 80px 24px 24px 22px;
  gap: 6px;
  align-items: center;
  font-size: 13px;
  padding: 4px 6px;
}
.rot-slot-drag-handle {
  cursor: grab;
  color: var(--muted);
  font-size: 14px;
  text-align: center;
  user-select: none;
  line-height: 1;
}
.rot-slot-drag-handle:active {
  cursor: grabbing;
  color: var(--accent);
}
.rot-slot-item.rot-slot-dragging {
  opacity: 0.5;
}
.rot-slot-item.rot-slot-dragover {
  outline: 2px dashed var(--accent);
  outline-offset: -2px;
}
.row-dup {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0;
  font-size: 13px;
  cursor: pointer;
  height: 22px;
  width: 24px;
  line-height: 1;
}
.row-dup:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.rot-slot-expand-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--muted);
  border-radius: 4px;
  padding: 0;
  font-size: 12px;
  cursor: pointer;
  height: 22px;
  width: 24px;
}
.rot-slot-expand-btn:hover,
.rot-slot-expand-btn.active {
  border-color: var(--accent);
  color: var(--accent);
}
.rot-slot-detail {
  padding: 8px 10px 10px;
  border-top: 1px dashed var(--border);
  background: var(--bg);
}
.rot-slot-section {
  margin-bottom: 10px;
}
.rot-slot-section-label {
  font-size: 11px;
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 4px;
}
.rot-motion-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}
.rot-motion-dmg-label {
  font-size: 11px;
  color: var(--accent);
  font-family: monospace;
  font-weight: 700;
}
.motion-buff-editor {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
}
.rot-slot-idx {
  font-size: 11px;
  color: var(--muted);
  text-align: center;
  font-family: monospace;
}
.rot-skill-select {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 4px 6px;
  border-radius: 4px;
  font-size: 12px;
  width: 100%;
  cursor: pointer;
}
.rot-skill-select:focus {
  outline: none;
  border-color: var(--accent);
}
.rot-skill-select option {
  background: var(--panel2);
  color: var(--text);
}
.rot-slot-dmg {
  font-size: 11px;
  color: var(--muted);
  text-align: right;
  font-family: monospace;
  white-space: nowrap;
}
.rot-side .row-add {
  margin: 4px 10px 10px;
  display: block;
}

/* rotation charts */
.rot-charts {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.rot-chart-block {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 16px;
}
.rot-chart-title {
  font-size: 12px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}
.rot-chart-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 10px;
}
.rot-chart-title-row .rot-chart-title {
  margin-bottom: 0;
}
.rot-chart-mode {
  display: flex;
  gap: 12px;
  font-size: 12px;
  color: var(--muted);
}
.rot-chart-mode label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
}
.rot-chart-mode input[type="radio"] {
  margin: 0;
}

/* ─── header docs button ───────────────────────────────────── */
.header-top {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 8px;
}
.header-top h1 {
  margin: 0;
}
.docs-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.docs-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

/* ─── docs modal ────────────────────────────────────────────── */
.modal-root {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: stretch;
  justify-content: center;
}
.modal-root[hidden] {
  display: none;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
}
.modal-window {
  position: relative;
  margin: 32px;
  width: min(1100px, 100%);
  max-height: calc(100vh - 64px);
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.6);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.modal-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.modal-tab {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.modal-tab.active {
  background: var(--panel);
  color: var(--text);
  border-color: var(--accent);
}
.modal-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 10px;
  border-radius: 6px;
}
.modal-close:hover {
  background: var(--panel);
  color: var(--text);
}
.modal-body {
  overflow: auto;
  padding: 20px 28px 32px;
}
.modal-loading {
  color: var(--muted);
  padding: 40px 0;
  text-align: center;
}

/* markdown content */
.md-content {
  font-size: 14px;
  line-height: 1.65;
  color: var(--text);
  max-width: 920px;
  margin: 0 auto;
}
.md-content h1,
.md-content h2,
.md-content h3,
.md-content h4 {
  margin: 1.6em 0 0.6em;
  line-height: 1.3;
  color: var(--text);
}
.md-content h1 {
  font-size: 22px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 8px;
}
.md-content h2 {
  font-size: 18px;
  color: var(--accent);
}
.md-content h3 {
  font-size: 15px;
}
.md-content h4 {
  font-size: 14px;
  color: var(--muted);
}
.md-content p,
.md-content ul,
.md-content ol,
.md-content blockquote,
.md-content pre,
.md-content table {
  margin: 0.8em 0;
}
.md-content ul,
.md-content ol {
  padding-left: 1.4em;
}
.md-content li {
  margin: 0.2em 0;
}
.md-content code {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 12.5px;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.md-content pre {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  overflow-x: auto;
}
.md-content pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: 12.5px;
  white-space: pre;
}
.md-content blockquote {
  border-left: 3px solid var(--accent);
  background: var(--panel2);
  padding: 10px 14px;
  color: var(--muted);
  border-radius: 0 6px 6px 0;
}
.md-content blockquote p {
  margin: 0.3em 0;
}
.md-content table {
  border-collapse: collapse;
  width: 100%;
  font-size: 13px;
}
.md-content th,
.md-content td {
  border: 1px solid var(--border);
  padding: 6px 10px;
  text-align: left;
}
.md-content th {
  background: var(--panel2);
  font-weight: 600;
}
.md-content tr:nth-child(even) td {
  background: rgba(255, 255, 255, 0.015);
}
.md-content hr {
  border: none;
  border-top: 1px solid var(--border);
  margin: 1.8em 0;
}
.md-content a {
  color: var(--accent);
}


/* ─── rotation page (multi-build) ─────────────────────────────────── */
.header-nav {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 10px;
}
.nav-link {
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  border: 1px solid var(--border);
  padding: 4px 10px;
  border-radius: 6px;
  background: var(--panel2);
}
.nav-link:hover {
  border-color: var(--accent);
  background: var(--panel);
}

button.secondary {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
}
button.secondary:hover {
  background: var(--panel);
}

.mbuild-tab-bar {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  margin-bottom: 12px;
}
.mbuild-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 6px 6px 0 0;
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  font-size: 13px;
}
.mbuild-tab:hover {
  color: var(--text);
}
.mbuild-tab.active {
  background: var(--panel);
  color: var(--text);
  border-bottom-color: var(--accent);
}
.mbuild-tab-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
}
.mbuild-add-btn {
  margin-left: auto;
  background: var(--panel2);
  color: var(--text);
  border: 1px dashed var(--border);
  border-radius: 6px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
}
.mbuild-add-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.mbuild-panels {
  margin-bottom: 24px;
}
.mbuild-panel {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.mbuild-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mbuild-name-inp {
  flex: 0 1 240px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 14px;
}

.mbuild-section {
  margin-top: 12px;
  padding: 8px 12px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
}
.mbuild-section > summary {
  cursor: pointer;
  font-weight: 600;
  font-size: 13px;
  color: var(--text);
  list-style: none;
  padding: 4px 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.mbuild-preset-toolbar {
  display: inline-flex;
  gap: 6px;
  font-weight: 400;
}
.mbuild-preset-toolbar button {
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 10px;
  font-size: 12px;
  cursor: pointer;
  line-height: 1.4;
}
.mbuild-preset-toolbar button:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mbuild-section > summary::-webkit-details-marker {
  display: none;
}
.mbuild-section[open] > summary {
  margin-bottom: 8px;
  border-bottom: 1px solid var(--border);
  padding-bottom: 6px;
}

.mbuild-editor {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 10px;
}
.mbuild-fieldgroup {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
}
.mbuild-fieldgroup > summary {
  cursor: pointer;
  font-size: 12px;
  color: var(--muted);
  padding: 2px 0;
}
.mbuild-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 4px 0;
}
.mbuild-row label {
  flex: 1;
  font-size: 12px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.mbuild-row input {
  flex: 0 0 80px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
}

.mbuild-buff-editor {
  font-size: 13px;
}

.mbuild-result-table table {
  width: 100%;
}

.mcomp-section {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 16px;
}
.mcomp-title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 12px;
}
.mcomp-skill-table {
  margin-top: 16px;
  overflow-x: auto;
}
.mcomp-skill-table table {
  width: 100%;
}

/* tripod editor (rotation page) */
.mbuild-tripod-card {
  margin-top: 6px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.mbuild-tripod-title {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
}
.mbuild-tripod-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
.mbuild-tripod {
  display: flex;
  align-items: center;
  gap: 4px;
}
.mbuild-tripod-label {
  font-size: 11px;
  color: var(--muted);
  min-width: 24px;
}
.mbuild-tripod-input {
  width: 42px;
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 4px;
  font-size: 11px;
  text-align: center;
}

/* per-skill buff editor expansion in result table */
.mbuild-skill-tbl {
  width: 100%;
}
.mbuild-skill-tbl th:first-child {
  width: 36px;
}
.mbuild-skill-expand {
  background: var(--panel2);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 2px 8px;
  cursor: pointer;
  font-size: 12px;
}
.mbuild-skill-expand:hover {
  border-color: var(--accent);
}
.mbuild-skill-expand.active {
  background: var(--accent);
  color: var(--bg);
  border-color: var(--accent);
}
.mbuild-skill-edit-row td {
  background: var(--panel2);
  padding: 10px;
}
.mbuild-perskill-buff {
  font-size: 13px;
}

/* motion buff edit badge: shows +N added-buff count next to "타수 버프 편집" */
.motion-buff-added-badge {
  display: none;
  margin-right: 6px;
  color: var(--pos);
  font-weight: 600;
  font-size: 12px;
}
.motion-buff-added-badge.visible {
  display: inline;
}

/* rotation page: per-skill expansion → motion table + per-skill buff editor */
.mbuild-perskill-expand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.mbuild-motion-tbl-wrap {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  overflow-x: auto;
}

/* slot detail body — slot-driven buff editing layout */
.rot-slot-detail-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 6px 4px;
}
.rot-slot-skillbuff {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 6px 10px;
  font-size: 13px;
}
.rot-slot-skillbuff > summary {
  cursor: pointer;
  font-weight: 600;
  color: var(--text);
  padding: 4px 0;
  list-style: none;
}
.rot-slot-skillbuff > summary::-webkit-details-marker { display: none; }
.rot-slot-skillbuff > summary::before {
  content: "▸ ";
  font-size: 10px;
  color: var(--muted);
  margin-right: 4px;
}
.rot-slot-skillbuff[open] > summary::before { content: "▾ "; }

/* ─── patch notes button + modal ────────────────────────────────── */
.patch-notes-btn {
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
}
.patch-notes-btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.modal-root {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
}
.modal-window {
  position: relative;
  z-index: 1;
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 10px;
  width: min(720px, 92vw);
  max-height: 86vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45);
}
.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--panel2);
}
.modal-title {
  font-weight: 600;
  font-size: 14px;
}
.modal-close {
  background: transparent;
  border: 1px solid var(--border);
  color: var(--muted);
  width: 28px;
  height: 28px;
  border-radius: 4px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.modal-close:hover {
  color: var(--text);
  border-color: var(--accent);
}
.modal-body {
  padding: 14px 16px;
  overflow-y: auto;
}

.patch-card {
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 12px;
  background: var(--panel2);
}
.patch-card.patch-status-planned {
  border-left: 3px solid var(--muted);
  opacity: 0.85;
}
.patch-card.patch-status-released {
  border-left: 3px solid var(--accent);
}
.patch-card-head {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.patch-version {
  font-weight: 700;
  color: var(--accent);
  font-size: 14px;
}
.patch-status-planned .patch-version {
  color: var(--muted);
}
.patch-title {
  font-size: 13px;
  color: var(--text);
}
.patch-meta {
  font-size: 11px;
  color: var(--muted);
  margin-left: auto;
}
.patch-body {
  font-family: -apple-system, BlinkMacSystemFont, "Pretendard", "Apple SD Gothic Neo", sans-serif;
  font-size: 13px;
  color: var(--text);
  white-space: pre-wrap;
  margin: 4px 0 0;
  line-height: 1.5;
}

/* default buff stack input — modified state */
.default-stack-inp {
  width: 56px;
  margin-right: 6px;
}
.default-stack-inp.modified {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}

/* ─── node parameter row (1.1) ──────────────────────────────────── */
.node-params-row {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 6px;
  padding: 8px 12px;
  margin: 6px 0;
}
.node-params-head {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}
.node-param-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 0;
  font-size: 13px;
}
.node-param-label {
  flex: 1;
  color: var(--text);
}
.node-param-input {
  width: 64px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  text-align: center;
}
.node-param-input.modified {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.node-param-effective {
  color: var(--muted);
  font-size: 12px;
  min-width: 64px;
}

/* ─── ark grid editor (1.2) ────────────────────────────────────── */
.arkgrid-editor {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 13px;
}
.arkgrid-branch {
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 12px;
}
.arkgrid-branch-chaos {
  border-left: 3px solid var(--accent);
}
.arkgrid-branch-order {
  border-left: 3px solid #f97316;
}
.arkgrid-branch-head {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.arkgrid-order-sub {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed var(--border);
}
.arkgrid-order-sub-head {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 6px;
}
.arkgrid-type-group {
  margin-bottom: 8px;
}
.arkgrid-type-head {
  font-size: 11px;
  color: var(--muted);
  margin-bottom: 4px;
  letter-spacing: 0.4px;
}
.arkgrid-core-card {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 6px 10px;
  margin-bottom: 4px;
}
.arkgrid-core-card.active {
  border-color: var(--accent);
}
.arkgrid-core-card.muted {
  opacity: 0.5;
}
.arkgrid-core-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arkgrid-core-name {
  flex: 1;
  font-size: 13px;
  color: var(--text);
}
.arkgrid-core-muted {
  font-size: 10px;
  color: var(--muted);
  background: rgba(255,255,255,0.04);
  padding: 1px 5px;
  border-radius: 3px;
}
.arkgrid-core-input {
  width: 56px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  text-align: center;
}
.arkgrid-core-card.active .arkgrid-core-input {
  border-color: var(--accent);
  color: var(--accent);
  font-weight: 600;
}
.arkgrid-tier-row {
  display: flex;
  gap: 4px;
  margin-top: 4px;
}
.arkgrid-tier {
  font-size: 10px;
  padding: 1px 6px;
  border-radius: 3px;
  background: rgba(255,255,255,0.03);
  color: var(--muted);
  border: 1px solid var(--border);
}
.arkgrid-tier.reached {
  background: rgba(90,169,255,0.15);
  color: var(--accent);
  border-color: var(--accent);
}
.arkgrid-destiny-row {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 6px;
}
.arkgrid-destiny-btn {
  font-size: 11px;
  padding: 3px 8px;
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.arkgrid-destiny-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.arkgrid-destiny-btn.active {
  background: rgba(74, 222, 128, 0.15);
  color: var(--pos);
  border-color: var(--pos);
}

.mbuild-arkgrid-host {
  padding: 6px 4px;
}

/* ─── extra skills toggle (1.3) ────────────────────────────────── */
.mbuild-extra-skills {
  padding: 6px 8px;
  margin: 4px 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
}

.mbuild-coeff-sticky {
  position: sticky;
  top: 0;
  z-index: 20;
  background: var(--panel);
  border-bottom: 1px solid var(--border);
  margin: 0 -8px 4px;
  padding: 4px 8px;
}
.mbuild-coeff-sticky:empty {
  display: none;
}
.mbuild-coeff-sticky .coeff-block {
  margin: 0;
}
.mbuild-scheme-block {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  margin: 4px 0;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
}
.mbuild-scheme-input {
  flex: 0 0 220px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 4px 8px;
  font-size: 13px;
}
.mbuild-scheme-apply {
  background: var(--panel);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
}
.mbuild-scheme-apply:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.mbuild-scheme-msg {
  font-size: 12px;
  color: var(--muted);
}
.mbuild-scheme-msg.ok { color: var(--pos); }
.mbuild-scheme-msg.err { color: var(--neg, #f87171); }

.mbuild-toolbar-spacer {
  flex: 1;
}
.mbuild-toolbar-btn {
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 4px 12px;
  font-size: 12px;
  cursor: pointer;
  margin-left: 4px;
}
.mbuild-toolbar-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}

.rot-cycle-dps {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--panel2);
  border: 1px solid var(--border);
  border-radius: 4px;
  font-size: 12px;
}
.cycle-windcount-inp {
  width: 60px;
  background: var(--panel);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  text-align: center;
}
.rot-cycle-dps-out {
  color: var(--accent);
  font-weight: 600;
}

/* 빌드 탭 드래그 reorder (1.4) */
.mbuild-tab[draggable="true"] {
  cursor: grab;
}
.mbuild-tab.dragging {
  opacity: 0.5;
  cursor: grabbing;
}
.mbuild-tab.drag-target {
  outline: 2px dashed var(--accent);
  outline-offset: 2px;
}
.extra-skills-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--muted);
  cursor: pointer;
  user-select: none;
}
.extra-skills-toggle input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}

/* ─── ark grid 6-slot layout (1.2) ─────────────────────────────── */
.arkgrid-slot-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
}
.arkgrid-slot {
  background: var(--panel);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 8px 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arkgrid-slot-order {
  border-left: 3px solid #f97316;
}
.arkgrid-slot-chaos {
  border-left: 3px solid var(--accent);
}
.arkgrid-slot-head {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.4px;
  color: var(--muted);
}
.arkgrid-slot-ctl {
  display: flex;
  gap: 6px;
  align-items: center;
}
.arkgrid-slot-select {
  flex: 1;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 12px;
  min-width: 0;
}
.arkgrid-slot-input {
  width: 56px;
  background: var(--panel2);
  border: 1px solid var(--border);
  color: var(--text);
  border-radius: 4px;
  padding: 3px 6px;
  font-size: 13px;
  text-align: center;
}
.arkgrid-slot-input:disabled {
  opacity: 0.45;
}

.arkgrid-effects-list {
  margin-top: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 4px 6px;
  background: rgba(255,255,255,0.02);
  border-radius: 4px;
  font-size: 11px;
}
.arkgrid-effect-row {
  display: flex;
  align-items: center;
  gap: 6px;
  color: var(--text);
}
.arkgrid-effect-row.disabled {
  color: var(--muted);
  text-decoration: line-through;
  opacity: 0.6;
}
.arkgrid-effect-row input[type="checkbox"] {
  margin: 0;
  cursor: pointer;
}
.arkgrid-effect-label {
  font-family: ui-monospace, SFMono-Regular, monospace;
  font-size: 11px;
}
.arkgrid-effects-empty {
  color: var(--muted);
  font-size: 11px;
  font-style: italic;
}
.arkgrid-effect-row.destiny-note {
  color: var(--accent);
  font-size: 11px;
  font-style: italic;
  padding-left: 16px;
}
.arkgrid-effect-row.destiny-note.inactive {
  color: var(--muted);
}
.arkgrid-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.arkgrid-toolbar-btn {
  font-size: 11px;
  padding: 4px 10px;
  background: var(--panel2);
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
}
.arkgrid-toolbar-btn:hover {
  color: var(--text);
  border-color: var(--accent);
}
.arkgrid-toolbar-btn-chaos {
  color: var(--accent);
  border-color: rgba(90, 169, 255, 0.5);
  background: rgba(90, 169, 255, 0.08);
}
.arkgrid-toolbar-btn-chaos:hover {
  color: var(--accent);
  border-color: var(--accent);
  background: rgba(90, 169, 255, 0.18);
}
.arkgrid-toolbar-btn-order {
  color: #f97316;
  border-color: rgba(249, 115, 22, 0.5);
  background: rgba(249, 115, 22, 0.08);
}
.arkgrid-toolbar-btn-order:hover {
  color: #f97316;
  border-color: #f97316;
  background: rgba(249, 115, 22, 0.18);
}