/* Honing calculator: inputs on one row, the cost strip (expected / worst / first attempt with bars against the worst case),
   the material table and the per-step plan. Presentation only; honing.js renders the values and bar widths. */
#honing-form { display: grid; grid-template-columns: 140px 120px 120px auto; justify-content: start; align-items: end; gap: 12px; }
#honing-form button { min-width: 140px; }
#honing-form label { color: var(--text-dim); font-size: 12px; font-weight: 500; }
#honing-form label > select,
#honing-form label > input { display: block; width: 100%; margin-top: 6px; }
.honing-result { padding: 20px 0 4px; }
.honing-total { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 12px; background: var(--bg-soft); }
.honing-total-label { display: block; font-size: 12px; font-weight: 500; color: var(--text-dim); }
.honing-total > strong { display: block; font-size: clamp(26px, 3vw, 34px); font-weight: 700; letter-spacing: -.03em; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; color: var(--accent); }
.honing-total > .ui-bar { margin: 6px 0 8px; height: 10px; }
.honing-total .market-caption { margin-top: 0; }
.honing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--border); }
.honing-summary > div { display: grid; grid-template-columns: minmax(0, 1fr); gap: 4px; }
.honing-summary dt { font-size: 12px; color: var(--text-dim); }
.honing-summary dd { font-size: 18px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.honing-summary .ui-bar { height: 8px; }
.honing-stages { list-style: none; margin: 0; padding: 0; }
.honing-stages > li { padding: 14px 0; border-bottom: 1px solid var(--border); min-width: 0; }
.honing-stages > li:last-child { border-bottom: 0; }
.honing-stage-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px 16px; flex-wrap: wrap; }
.honing-stage-head strong { font-size: 15px; font-weight: 700; }
.honing-stage-head span { font-variant-numeric: tabular-nums; font-weight: 600; overflow-wrap: anywhere; }
.honing-advice { margin: 5px 0 3px; font-size: 13px; color: var(--text-dim); overflow-wrap: anywhere; }
.honing-note { color: var(--text-muted); }
.honing-metrics { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 16px; margin: 10px 0 0; }
.honing-metrics > div { min-width: 0; }
.honing-metrics > .wide { grid-column: 1 / -1; }
.honing-metrics dt { color: var(--text-muted); font-size: 11.5px; }
.honing-metrics dd { margin: 2px 0 0; font-size: 13px; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.honing-plan, .honing-prices { margin-top: 10px; }
.honing-plan summary, .honing-prices summary { cursor: pointer; color: var(--accent); font-size: 13px; min-height: 40px; display: flex; align-items: center; }
.honing-plan summary:focus-visible, .honing-prices summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; }
/* 상세 표(재료·회차·단가). 좁은 화면에서는 칸마다 붙인 이름(data-label)으로 한 줄씩 풀어 보여 준다. */
.honing-table { width: 100%; margin: 16px 0 6px; border-collapse: collapse; font-size: 13px; font-variant-numeric: tabular-nums; }
.honing-table caption { padding-bottom: 8px; color: var(--text); font-size: 14px; font-weight: 700; text-align: left; }
.honing-table th, .honing-table td { padding: 8px 10px; border-bottom: 1px solid var(--border); text-align: right; vertical-align: top; overflow-wrap: anywhere; }
.honing-table thead th { color: var(--text-dim); font-weight: 600; font-size: 12px; background: var(--bg-soft); }
.honing-table thead th:first-child { border-radius: 6px 0 0 6px; }
.honing-table thead th:last-child { border-radius: 0 6px 6px 0; }
.honing-table thead th:first-child, .honing-table th[scope=row] { text-align: left; }
.honing-table th[scope=row] { font-weight: 500; }
.honing-table tr.guaranteed td, .honing-table tr.guaranteed th, .honing-table tr.unused td, .honing-table tr.excluded td { color: var(--text-dim); }
.honing-plan-table td:nth-child(2), .honing-plan-table thead th:nth-child(2) { text-align: left; }
.honing-plan-table th[scope=row] { white-space: nowrap; }
.honing-price-table td:last-child { text-align: left; }
@media (max-width: 760px) {
  #honing-form { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #honing-form button { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .honing-total { padding: 14px; }
  .honing-stage-head { gap: 2px; }
  .honing-metrics, .honing-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .honing-summary { grid-template-columns: minmax(0, 1fr); }
  /* 재료·단가 표는 한 항목씩 풀어 보여 준다. 재료는 「기대 수량 · 비용」 / 「최악 수량 · 비용」 두 줄. */
  :is(.honing-materials, .honing-price-table) thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  :is(.honing-materials, .honing-price-table) tr { display: block; padding: 8px 0; border-bottom: 1px solid var(--border); }
  :is(.honing-materials, .honing-price-table) th[scope=row] { display: block; padding: 0 0 4px; border: 0; }
  :is(.honing-materials, .honing-price-table) td { padding: 2px 0; border: 0; }
  .honing-materials tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; }
  .honing-materials th[scope=row] { grid-column: 1 / -1; }
  .honing-materials td:nth-child(odd) { text-align: right; }
  .honing-materials td:nth-child(even) { text-align: left; }
  .honing-materials td:nth-child(2)::before { content: '기대 '; color: var(--text-muted); }
  .honing-materials td:nth-child(4)::before { content: '최악 '; color: var(--text-muted); }
  .honing-materials td.same-as-cost { font-size: 0; }
  .honing-materials td.same-as-cost::before { font-size: 12px; }
  .honing-price-table td { display: flex; justify-content: space-between; gap: 12px; text-align: right; }
  .honing-price-table td::before { content: attr(data-label); flex-shrink: 0; color: var(--text-muted); text-align: left; }
  /* 회차 표는 휴대폰에서도 한 회차를 한 줄로 둔다(머리글은 짧게, 뜻은 caption). */
  .honing-plan-table { display: block; max-width: 100%; overflow-x: auto; font-size: 11px; }
  .honing-plan-table th, .honing-plan-table td { padding: 4px 3px; }
  .honing-plan-table td:not(:nth-child(2)) { white-space: nowrap; }
}