/* 마일 킬로미터 변환기 전용 CSS (2026-10-20). 운전석 계기판: 등식 띠 [mi] = [km] | 두 눈금 계기판 → 머릿속 어림 → 자주 찾는 값.
   폭(작업면 컨테이너 mkm): 760 이상 [등식 | 계기판 300] / 어림 / 값, 480~759 등식 / [계기판 | 어림] / 값, 480 미만 한 열.
   움직임(R45): 계기판 바늘 회전·진행 호, 어림 막대 폭. 동작 줄이기면 바로. 공용 부품 assets/v2.css */
.mkm-work{container:mkm / inline-size}
.mkm-work .v2-status:empty{display:none}
.mkm-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"eq" "dial" "mm" "qk"}
.mkm-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.mkm-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 등식 띠: 두 칸 중 친 칸이 정본(진한 테두리), 가운데 = / ≈ */
.mkm-eq{grid-area:eq;min-width:0;padding:14px 18px 14px;border-bottom:1px solid var(--soft)}
.mkm-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 12px}
.mkm-dec{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.mkm-pair{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);align-items:end;gap:0 8px}
.mkm-sign{display:grid;place-items:center;min-width:20px;height:var(--v2-ctl,42px);font-family:var(--sans);font-size:22px;font-weight:700;line-height:1;color:var(--muted)}
.mkm-cell .v2-input input{font-size:18px;font-weight:750}
.mkm-cell.is-src .v2-input{border-color:var(--ink)}
.mkm-cell .v2-input b{min-width:0;padding:0 9px;white-space:nowrap}
.mkm-sent{margin:12px 0 0;font-family:var(--sans);font-size:14px;font-weight:650;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere;transition:opacity var(--ease)}
.mkm-sent.is-error{color:var(--accent)}
.mkm-rows{margin:8px 0 0;transition:opacity var(--ease)}
.mkm-rows li{flex-wrap:wrap;gap:2px 12px;padding:6px 0;font-size:13px}
.mkm-rows li[hidden]{display:none}
.mkm-rows li b{min-width:0;margin-left:auto;text-align:right;white-space:normal;overflow-wrap:anywhere}
.mkm-eq.is-pend .mkm-sent,.mkm-eq.is-pend .mkm-rows{opacity:.45}
.mkm-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:10px}
.mkm-foot .v2-formula{margin:0;min-width:0;white-space:normal;overflow-wrap:anywhere}
.mkm-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 두 눈금 계기판: 반원, 바깥 mi·안쪽 km, 바늘 accent */
.mkm-dial{grid-area:dial;display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.mkm-dialbox{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1 1 auto}
.mkm-dialbox svg{display:block;width:100%;max-width:340px;height:auto;overflow:visible}
.mkm-track{fill:none;stroke:var(--soft);stroke-width:7;stroke-linecap:round}
.mkm-prog{fill:none;stroke:color-mix(in srgb, var(--ink) 55%, var(--card));stroke-width:7;stroke-linecap:round;transition:stroke-dashoffset .7s cubic-bezier(.2,.75,.25,1)}
.mkm-itrack{fill:none;stroke:var(--line);stroke-width:1}
.mkm-o{stroke:var(--muted);stroke-width:1}
.mkm-o.is-major{stroke:var(--ink);stroke-width:1.6}
.mkm-i{stroke:var(--line);stroke-width:1}
.mkm-i.is-major{stroke:var(--muted);stroke-width:1.3}
.mkm-ol{font-family:var(--sans);font-size:12.5px;font-weight:750;fill:var(--ink);font-variant-numeric:tabular-nums}
.mkm-il{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.mkm-needle{transform-origin:150px 150px;transition:transform .7s cubic-bezier(.2,.75,.25,1)}
.mkm-needle line{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round}
.mkm-needle circle{fill:var(--accent);stroke:var(--card);stroke-width:2.5}
.mkm-read{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:0 6px;max-width:100%;margin:6px 0 0;text-align:center;font-variant-numeric:tabular-nums lining-nums}
.mkm-read b{font-family:var(--sans);font-size:clamp(17px, calc(100cqi / (var(--mkm-len, 8) * .68)), 26px);font-weight:800;line-height:1.15;letter-spacing:-.02em;color:var(--ink);overflow-wrap:anywhere} /* 칸 폭 ÷ 글자 수로 줄여 숫자 중간 줄바꿈을 막는다(1181px '42.16481 / 3', 독립 검토 R1) */
.mkm-read small{font-family:var(--serif);font-size:15px;font-weight:700;color:var(--muted)}
.mkm-read span{flex:1 0 100%;font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.mkm-side{display:flex;flex-direction:column;align-items:center;gap:8px;width:100%;min-width:0;container:mkms / inline-size}
.mkm-leg{display:flex;flex-wrap:wrap;justify-content:center;gap:2px 14px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mkm-leg li{display:flex;align-items:center;gap:6px;min-width:0}
.mkm-leg i{flex:0 0 auto;width:16px;height:0;border-top:2px solid var(--ink)}
.mkm-leg li[data-k="i"] i{border-top:1px solid var(--muted)}

/* 머릿속 어림: 카드 두 장, 막대 = 어림값 조각, 세로선 = 정확값(두 카드 같은 눈금) */
.mkm-mm{grid-area:mm;min-width:0;padding:14px 18px 14px;border-bottom:1px solid var(--soft);container:mkmmm / inline-size}
.mkm-cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.mkm-card{display:flex;flex-direction:column;gap:6px;min-width:0;padding:10px 12px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.mkm-ct{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 8px;margin:0}
.mkm-ct b{font-family:var(--sans);font-size:13.5px;font-weight:750;color:var(--ink)}
.mkm-ct small{font-family:var(--sans);font-size:11.5px;line-height:1.4;color:var(--muted)}
.mkm-cx{display:flex;flex-direction:column;flex:1 1 auto;gap:2px;margin:0;font-family:var(--sans);font-size:14px;font-weight:700;line-height:1.45;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.mkm-cx small{font-size:12px;font-weight:600;color:var(--muted)}
.mkm-card.is-off .mkm-cx{font-size:12.5px;font-weight:600;color:var(--muted)}
.mkm-seg{position:relative;display:flex;gap:2px;height:12px;margin:4px 0 0;border-radius:3px;background:var(--soft)}
.mkm-sg{flex:0 0 auto;height:100%;width:0;background:color-mix(in srgb, var(--ink) 62%, var(--card));transition:width .6s cubic-bezier(.2,.75,.25,1)}
.mkm-sg:nth-child(2n){background:color-mix(in srgb, var(--ink) 38%, var(--card))}
.mkm-sg:first-child{border-radius:3px 0 0 3px}
.mkm-ex{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--ink);transition:left .6s cubic-bezier(.2,.75,.25,1)}
.mkm-ex[hidden]{display:none}
.mkm-ce{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 10px;margin:0;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.mkm-ce b{color:var(--ink);font-weight:750}

/* 자주 찾는 값: 묶음마다 6개, 넓으면 묶음을 나란히(거리 3묶음 × 2열, 속도 2묶음 × 3열), 좁으면 묶음을 쌓고 3열(400 미만 2열) — 어느 폭에서도 빈 칸 없이 */
.mkm-quick{grid-area:qk;min-width:0;padding:14px 18px 16px;container:mkmq / inline-size}
.mkm-qgs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 14px}
.mkm-qg{min-width:0}
.mkm-qt{margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.mkm-qg ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
@container mkmq (min-width:720px){
  .mkm-qgs{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))}
  .mkm-qg ul{grid-template-columns:repeat(auto-fill,minmax(118px,1fr))}
}
@container mkmq (max-width:399px){ .mkm-qg ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
.mkm-qg button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;min-height:44px;padding:6px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;font-variant-numeric:tabular-nums lining-nums;transition:background var(--ease),border-color var(--ease)}
.mkm-qg button span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px}
.mkm-qg button b{font-size:13.5px;font-weight:750}
.mkm-qg button small{font-size:11px;font-weight:600;color:var(--muted)}
.mkm-qg button em{font-size:12px;font-style:normal;color:var(--muted);overflow-wrap:anywhere}
.mkm-qg button:hover{background:var(--wash)}
.mkm-qg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mkm-qg button[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}

@media (prefers-reduced-motion: reduce){ .mkm-prog,.mkm-needle,.mkm-sg,.mkm-ex{transition:none} }

/* 폭: 760 이상 [등식 | 계기판], 그 아래는 한 열. 계기판 칸이 480 이상이면 [반원 | 읽힘 값] 가로(1181px에서 [계기판 | 어림] 두 칸은 계기판 위아래가 80px씩 비었다) */
.mkm-dial{container:mkmd / inline-size}
@container mkm (min-width:760px){
  .mkm-grid{grid-template-columns:minmax(0,1fr) 312px;grid-template-areas:"eq dial" "mm mm" "qk qk"}
  .mkm-dial{border-left:1px solid var(--soft)}
}
@container mkmd (min-width:480px){
  .mkm-dialbox{flex-direction:row;gap:8px 22px}
  .mkm-dialbox svg{flex:0 1 320px;max-width:320px;min-width:0}
  .mkm-side{flex:1 1 0;width:auto;align-items:flex-start;gap:12px}
  .mkm-read{justify-content:flex-start;margin:0;text-align:left}
  .mkm-leg{flex-direction:column;justify-content:flex-start;gap:4px}
}
@container mkmmm (max-width:419px){ .mkm-cards{grid-template-columns:minmax(0,1fr)} }
@container v2in (max-width:419px){ /* 반쪽 칸에 큰 값(1,609,343,998)이 잘리지 않게 '라벨 | 입력' 한 줄씩, =·≈는 바로 아래 문장이 알린다 */
  .mkm-pair{grid-template-columns:minmax(0,1fr);gap:8px}
  .mkm-cell{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:center;gap:0 10px}
  .mkm-cell > label{margin:0}
  .mkm-sign{display:none}
}
@container mkm (max-width:439px){
  .mkm-eq,.mkm-dial,.mkm-mm,.mkm-quick{padding-left:14px;padding-right:14px}
  .mkm-acts .v2-btn .i{display:none} /* 버튼 네 개가 한 줄에 들어가게 */
}