/* 계산·비교 도구 4종(lesson-tools.mjs, lesson-tools/*.mjs)의 스타일. 색·간격·모서리는 styles.css 첫 줄 :root 토큰만 쓴다.
   lp-tool = 공통, lp-cost = 원가 비중 막대, lp-mass = 양산 원가, lp-types·lp-compare = 비교표(lp-tool-table).
   유형·로봇 고르기 버튼은 course.css의 .lp-variants·.lp-toggle을 그대로 쓴다. 조작 요소는 44px 이상이다. */

/* ── 공통 ─────────────────────────────────── */
.lp-tool{display:grid;gap:var(--s4);margin-top:var(--s5);min-width:0}
.lp-tool-summary{max-width:720px;margin:0;font-size:15px}
.lp-tool-hint{margin:0;font-size:13px;color:var(--muted)}
.lp-tool-status{margin:0;padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);box-shadow:inset 3px 0 0 var(--blue);font-size:15px;font-weight:700;line-height:1.6;font-variant-numeric:tabular-nums}
.lp-tool-pending{box-shadow:inset 3px 0 0 var(--metal-dark);font-weight:600;color:var(--muted)}
.lp-tool-assumption{margin:0;padding:var(--s3) var(--s4);border-radius:var(--r1);background:var(--wash);font-size:13px;line-height:1.7;color:var(--muted)}
.lp-tool-assumption strong{margin-right:var(--s2);color:var(--ink)}
.lp-tool-model{display:inline-flex;align-self:start;justify-self:start;margin:0;padding:var(--s1) var(--s3);border-radius:var(--r3);background:var(--orange-soft);color:var(--orange);font-size:13px;font-weight:700}
.lp-tool .source-link{display:inline-flex;align-items:center;min-height:44px}
.lp-tool-alt summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer}
.lp-tool-alt[open] summary{margin-bottom:var(--s2)}

/* 근거 단계 배지(공식·분해·보도·미공개, 학습용 가정). 색만으로 구분하지 않고 글자를 함께 적는다. */
.lp-basis{display:inline-flex;align-items:center;padding:1px var(--s2);border-radius:4px;font-size:11px;font-weight:700;line-height:1.7;white-space:nowrap}
.lp-basis[data-status=official]{background:var(--green-soft);color:var(--green)}
.lp-basis[data-status=teardown]{background:var(--blue-soft);color:var(--blue)}
.lp-basis[data-status=reported]{background:var(--orange-soft);color:var(--orange)}
.lp-basis[data-status=assumption],.lp-basis[data-status=undisclosed]{border:1px dashed var(--metal-dark);color:var(--muted)}

/* ── 원가 비중 막대 ────────────────────────── */
.lp-cost-list{list-style:none;margin:0;padding:0;display:grid;gap:var(--s2)}
.lp-cost-row{border:1px solid var(--line);border-radius:var(--r1);background:var(--surface);overflow:hidden}
.lp-cost-row:has([aria-expanded=true]){border-color:var(--blue);box-shadow:inset 0 0 0 1px var(--blue)}
.lp-cost-bar{display:grid;grid-template-columns:176px minmax(0,1fr) auto;align-items:center;gap:var(--s4);width:100%;min-height:44px;padding:var(--s3) var(--s4);border:0;background:transparent;color:var(--ink);text-align:left;transition:background var(--fast)}
.lp-cost-bar:hover{background:var(--wash)}
.lp-cost-name{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);font-size:14px;font-weight:700}
/* 오른쪽 칸: 위 줄은 비중 범위와 근거 배지, 아래 줄은 "환산" 표시를 단 금액(Ruling S24). */
.lp-cost-value{display:grid;justify-items:end;gap:2px;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-cost-share{display:inline-flex;align-items:center;gap:var(--s1)}
.lp-cost-usd{display:inline-flex;align-items:center;gap:var(--s1);font-size:12px;color:var(--muted)}
.lp-cost-converted{display:inline-flex;align-items:center;padding:0 var(--s1);border:1px dashed var(--metal-dark);border-radius:4px;font-size:11px;font-weight:700;line-height:1.6;color:var(--muted)}
.lp-cost-track,.lp-mass-track{display:block;width:100%;overflow:visible}
.lp-cost-track{height:14px}
.lp-cost-base,.lp-mass-base{fill:var(--wash)}
.lp-cost-range,.lp-mass-bar{fill:var(--blue)}
.lp-cost-row[data-basis=assumption] .lp-cost-range{fill:var(--blue-soft);stroke:var(--blue);stroke-width:1.5;stroke-dasharray:4 3}
.lp-cost-detail{display:grid;gap:var(--s2);justify-items:start;padding:var(--s3) var(--s4) var(--s4);border-top:1px solid var(--line);background:var(--wash);font-size:14px}
.lp-cost-detail p{margin:0}
.lp-cost-source{font-size:12px;color:var(--muted)}

/* ── 양산 원가 ─────────────────────────────── */
.lp-tool-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s6);padding:var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-tool-control{display:grid;gap:var(--s2);align-content:start}
.lp-tool-control-head{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);font-size:14px;font-weight:600}
.lp-tool-control output{font-size:16px;font-weight:700;color:var(--blue);font-variant-numeric:tabular-nums;white-space:nowrap}
.lp-tool-control input[type=range]{height:44px;min-height:44px}
.lp-tool-scale{display:flex;justify-content:space-between;gap:var(--s3);font-size:12px;color:var(--muted)}
.lp-tool-result{display:grid;gap:var(--s3);justify-items:stretch}
.lp-mass-parts{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.lp-mass-part{display:grid;grid-template-columns:176px 72px minmax(0,1fr);align-items:center;gap:var(--s1) var(--s3);font-size:14px}
.lp-mass-name{font-weight:600}
.lp-mass-cost{font-weight:700;text-align:right;font-variant-numeric:tabular-nums}
.lp-mass-track{height:12px}
/* 부위마다 기준에서 내려간 금액·한 해 지출과, 가장 많이 내려간(오른) 부위·한 해 지출이 가장 큰 부위 표시. 표시는 글자로도 구분한다. */
.lp-mass-detail{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s3);margin:0;font-size:13px;color:var(--muted);font-variant-numeric:tabular-nums}
.lp-mass-mark{display:inline-flex;align-items:center;padding:1px var(--s2);border-radius:4px;background:var(--blue-soft);color:var(--blue);font-size:11px;font-weight:700;line-height:1.7;white-space:nowrap}
.lp-mass-mark[data-mass-mark=spend]{background:var(--orange-soft);color:var(--orange)}
.lp-mass-mark[hidden]{display:none}
/* "부위별로 바꾸기": 부위마다 원가 비중과 학습률 슬라이더. 접혀 있다가 누르면 열린다. */
.lp-mass-custom{padding:0 var(--s5);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
.lp-mass-custom summary{display:flex;align-items:center;min-height:44px;font-size:14px;font-weight:600;color:var(--blue);cursor:pointer}
.lp-mass-custom[open]{padding-bottom:var(--s5)}
.lp-mass-custom>.lp-tool-hint{margin-top:var(--s2)}
.lp-mass-editors{list-style:none;margin:var(--s3) 0 0;padding:0;display:grid;gap:var(--s4)}
.lp-mass-editor{display:grid;gap:var(--s2);padding-top:var(--s4);border-top:1px solid var(--line)}
.lp-mass-editor-name{margin:0;font-size:14px;font-weight:700}
.lp-mass-editor-controls{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5)}
.lp-mass-reset{justify-self:start;margin-top:var(--s4);border:1px solid var(--line)}

/* ── 비교표(로봇 유형·로봇 나란히 비교) ───────── */
.lp-tool-table-wrap{min-width:0}
.lp-tool-table{width:100%;table-layout:fixed;border-collapse:collapse;font-size:14px;line-height:1.6}
.lp-tool-table caption{caption-side:top;text-align:left;font-size:12px;color:var(--muted);padding-bottom:var(--s3)}
.lp-tool-table th,.lp-tool-table td{padding:var(--s3);text-align:left;vertical-align:top;border-bottom:1px solid var(--line)}
.lp-tool-table thead th{font-size:12px;font-weight:600;color:var(--muted);border-bottom-color:var(--ink)}
.lp-tool-table thead th:first-child{width:132px}
.lp-tool-table tbody th{width:132px;font-weight:700}
.lp-tool-cell{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s1) var(--s2);min-width:0}
.lp-cell-value{font-weight:700;font-variant-numeric:tabular-nums}
.lp-cell-note{flex-basis:100%;font-size:12px;line-height:1.55;color:var(--muted)}
/* 어느 세대·모델의 값인지(배지 옆)와 출처 날짜. 긴 조건 메모는 접어 두고 눌러서 연다. */
.lp-cell-model{display:inline-flex;align-items:center;padding:0 var(--s1);border:1px solid var(--line);border-radius:4px;font-size:11px;font-weight:600;line-height:1.7;color:var(--ink);white-space:nowrap}
.lp-cell-date{font-size:11px;color:var(--muted);white-space:nowrap}
.lp-cell-more{flex-basis:100%}
.lp-cell-more summary{display:flex;align-items:center;min-height:44px;font-size:12px;font-weight:600;color:var(--blue);cursor:pointer}
.lp-tool-legend{display:grid;gap:var(--s2);margin:0;font-size:13px}
.lp-tool-legend div{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--s1) var(--s3)}
.lp-tool-legend dt,.lp-tool-legend dd{margin:0}
.lp-tool-legend dd{color:var(--muted)}

@media(max-width:760px){
  .lp-tool-controls,.lp-mass-editor-controls{grid-template-columns:minmax(0,1fr)}
  /* 비교표는 행마다 카드로 쌓는다. 칸 앞에 열 이름(유형·로봇 이름)을 붙인다. */
  .lp-tool-table thead{display:none}
  .lp-tool-table caption{display:block}
  .lp-tool-table,.lp-tool-table tbody,.lp-tool-table tr,.lp-tool-table th,.lp-tool-table td{display:block;width:auto}
  .lp-tool-table tr{margin-top:var(--s3);padding:var(--s4);border:1px solid var(--line);border-radius:var(--r2);background:var(--surface)}
  .lp-tool-table th,.lp-tool-table td{padding:0;border:0}
  .lp-tool-table tbody th{width:auto;margin-bottom:var(--s2);font-size:16px}
  .lp-tool-table td{display:grid;grid-template-columns:96px minmax(0,1fr);gap:var(--s3);padding:var(--s2) 0;border-top:1px solid var(--line)}
  .lp-tool-table td::before{content:attr(data-label);font-size:12px;font-weight:600;color:var(--muted)}
  /* 보도 배지는 매체 이름이 길 수 있어, 좁은 카드 안에서는 줄을 바꿔도 된다. */
  .lp-tool-table .lp-basis{white-space:normal}
}
@media(max-width:600px){
  .lp-cost-bar{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name value" "track track";gap:var(--s2) var(--s3);padding:var(--s3)}
  .lp-cost-name{grid-area:name}
  .lp-cost-value{grid-area:value}
  .lp-cost-track{grid-area:track}
  .lp-cost-detail{padding:var(--s3)}
  .lp-tool-controls{padding:var(--s4)}
  .lp-mass-part{grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"name cost" "track track" "detail detail";gap:var(--s1) var(--s3)}
  .lp-mass-name{grid-area:name}
  .lp-mass-cost{grid-area:cost}
  .lp-mass-track{grid-area:track}
  .lp-mass-detail{grid-area:detail}
  .lp-mass-custom{padding:0 var(--s4)}
  .lp-mass-custom[open]{padding-bottom:var(--s4)}
  .lp-tool-status{font-size:14px}
}