/* 미터 피트 변환기 전용 CSS (2026-10-13). 2패널 계산형(에너지 단위 변환기와 같은 골격) + 두 눈금 자 + 길이 크기 사다리 + 자주 찾는 값. 공용 부품은 assets/v2.css */
.mf-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr)}
.mf-in{padding:16px 18px 18px;min-width:0}
.mf-fields{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.mf-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.mf-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 8px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;font-weight:600;text-overflow:ellipsis}
.mf-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mf-dec{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin-top:14px}
.mf-help{margin:12px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--muted)}
.mf-acts{display:flex;gap:6px;flex-wrap:wrap;align-items:center;margin-top:14px}
.mf-out{padding:16px 18px 18px;min-width:0;border-left:1px solid var(--soft);display:flex;flex-direction:column;container:mfout / inline-size;scroll-margin-top:72px}
.mf-out > .v2-label{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mf-out .v2-big{flex-wrap:wrap}
.mf-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(20px, calc(100cqi / (var(--mf-len, 6) * .62)), 1em)}
.mf-out .v2-big.is-empty span{font-size:18px;font-weight:600;color:var(--muted)}
.mf-out .v2-sub{font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mf-out .v2-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.mf-rows{margin-top:14px}
.mf-rows li b{white-space:normal;text-align:right;overflow-wrap:anywhere}
.mf-alllabel{margin:14px 0 4px}
.mf-all{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 16px;list-style:none;margin:0 0 14px;padding:0}
.mf-all li{display:flex;justify-content:space-between;align-items:baseline;gap:8px;min-width:0;padding:5px 0;border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:12.5px}
.mf-all li span{color:var(--muted)}
.mf-all li b{font-weight:700;font-variant-numeric:tabular-nums;text-align:right;overflow-wrap:anywhere}
.mf-all li b small{font-weight:600;color:var(--muted)}
.mf-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:auto;padding-top:12px;border-top:1px solid var(--soft)}
.mf-foot .v2-status{margin-left:auto}
.mf-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.mf-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}
.mf-rulerbox,.mf-ladbox,.mf-quickbox{padding:14px 18px 18px;border-top:1px solid var(--soft);min-width:0}
/* 두 눈금 자: 위 미터법 눈금 | 막대 | 아래 야드파운드법 눈금, 표식이 두 눈금을 가로지른다 */
.mf-ruler{position:relative;margin:26px 14px 26px}
.mf-scale{position:relative;height:30px;font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mf-tk{position:absolute;top:0;bottom:0;width:0}
.mf-tk i{position:absolute;left:-.5px;width:1px;height:8px;background:var(--line)}
.mf-tk em{position:absolute;left:0;transform:translateX(-50%);font-style:normal;white-space:nowrap}
.mf-tk.is-zero em{transform:none}
.mf-scale.is-top .mf-tk i{bottom:0}
.mf-scale.is-top .mf-tk em{top:2px}
.mf-scale.is-bot .mf-tk i{top:0}
.mf-scale.is-bot .mf-tk em{bottom:2px}
.mf-bar{position:relative;height:14px;border:1px solid var(--line);border-radius:3px;background:var(--paper);overflow:hidden}
.mf-rfill{position:absolute;left:0;top:0;bottom:0;background:var(--ink);opacity:.85;transition:width .5s var(--ease,ease)}
.mf-rmark{position:absolute;top:-6px;bottom:-6px;width:2px;margin-left:-1px;background:var(--accent);transition:left .5s var(--ease,ease)}
.mf-tag{position:absolute;left:1px;transform:translateX(-50%);padding:1px 6px;border-radius:3px;background:var(--fill);color:var(--on-fill);font-family:var(--sans);font-size:11.5px;font-weight:700;white-space:nowrap;font-variant-numeric:tabular-nums}
.mf-tag.is-top{bottom:100%;margin-bottom:2px}
.mf-tag.is-bot{top:100%;margin-top:2px}
.mf-rmark.is-l .mf-tag{transform:translateX(-4px)}
.mf-rmark.is-r .mf-tag{transform:translateX(calc(-100% + 2px))}
.mf-ruler.is-off .mf-rmark,.mf-ruler.is-off .mf-rfill{opacity:0}
/* 사다리: 이름 | 로그 눈금 트랙 | 몇 배 */
.mf-ladbox{container:mflad / inline-size;--mf-name:clamp(150px, 32%, 250px);--mf-cnt:clamp(80px, 16%, 120px)}
.mf-axis{display:grid;grid-template-columns:var(--mf-name) minmax(0,1fr) var(--mf-cnt);gap:0 12px;height:18px}
.mf-axisin{grid-column:2;position:relative;font-family:var(--sans);font-size:11px;color:var(--muted);font-variant-numeric:tabular-nums}
.mf-axisin span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap}
.mf-axisin span:first-child{transform:none}
.mf-axisin span:last-child{transform:translateX(-100%)}
.mf-lad{list-style:none;margin:0;padding:0}
.mf-lad li{display:grid;grid-template-columns:var(--mf-name) minmax(0,1fr) var(--mf-cnt);gap:2px 12px;align-items:center;padding:7px 0;border-bottom:1px solid var(--soft)}
.mf-lname{min-width:0;font-family:var(--sans)}
.mf-lname b{display:block;font-size:13px;font-weight:700;color:var(--ink)}
.mf-lname small{display:block;margin-top:1px;font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.mf-track{position:relative;height:18px;background:linear-gradient(var(--soft),var(--soft)) 0 50% / 100% 2px no-repeat}
.mf-dot{position:absolute;top:50%;width:11px;height:11px;margin:-5.5px 0 0 -5.5px;border-radius:50%;background:var(--paper);border:2px solid var(--line)}
.mf-lad li.is-below .mf-dot{border-color:var(--ink);background:var(--ink)}
.mf-mark{position:absolute;top:-4px;bottom:-4px;width:2px;margin-left:-1px;background:var(--accent);transition:left .5s var(--ease,ease)}
.mf-fill{position:absolute;left:0;top:50%;height:8px;margin-top:-4px;border-radius:4px;background:var(--ink);transition:width .5s var(--ease,ease)}
.mf-lad.is-off .mf-mark,.mf-lad.is-off .mf-fill{opacity:0}
.mf-cnt{font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mf-lad li.is-now .mf-lname small{font-size:12.5px;font-weight:700;color:var(--ink)}
.mf-lad li.is-now .mf-cnt{font-weight:500;color:var(--muted);font-size:11.5px}
.mf-ladnote{margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.6;color:var(--muted)}
/* 자주 찾는 값: 묶음마다 칸 격자, 누르면 위 칸에 들어감 */
.mf-quickbox{container:mfq / inline-size}
.mf-qg + .mf-qg{margin-top:12px}
.mf-qname{margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.mf-qg ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;list-style:none;margin:0;padding:0}
.mf-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}
.mf-qg button span{font-size:12px;color:var(--muted)}
.mf-qg button b{font-size:13.5px;font-weight:700;overflow-wrap:anywhere}
.mf-qg button:hover{background:var(--wash)}
.mf-qg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mf-qg button[aria-pressed="true"]{border-color:var(--accent);background:var(--wash)}
@media (max-width:720px){
  .mf-grid{grid-template-columns:minmax(0,1fr)}
  .mf-out{order:-1;border-left:0;border-bottom:1px solid var(--soft)}
}
@media (max-width:420px){
  .mf-in,.mf-out,.mf-rulerbox,.mf-ladbox,.mf-quickbox{padding-left:12px;padding-right:12px}
}
@container v2in (max-width:330px){ .mf-pair--fi{grid-template-columns:minmax(0,1fr)} } /* 1181~1280px 화면의 반쪽 칸(74px)에서 6자리 인치 값이 잘림 → 피트·인치 한 열 */
@container mfout (max-width:330px){ .mf-all{grid-template-columns:minmax(0,1fr)} }
@container mfq (max-width:400px){ .mf-qg ul{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container mflad (max-width:560px){ /* 좁으면 이름·몇 배 한 줄, 트랙은 그 아래 전체 폭 */
  .mf-axis{grid-template-columns:minmax(0,1fr)}
  .mf-axisin{grid-column:1}
  .mf-lad li{grid-template-columns:minmax(0,1fr) auto}
  .mf-lad li .mf-track{grid-column:1 / -1;grid-row:2}
  .mf-lad li .mf-cnt{grid-column:2;grid-row:1}
}
@media (prefers-reduced-motion:reduce){ .mf-mark,.mf-fill,.mf-rmark,.mf-rfill{transition:none} }