/* 질량 변환 계산기 전용 CSS (2026-10-21). 자주 찾는 값 → 저울 작업대(로버발 저울 그림 / [왼쪽 접시 | 맞바꾸기 | 오른쪽 접시] / 문장·다른 표기·식) → 버튼 줄
   → 이름은 같고 무게가 다른 단위(탭 + 막대, subgrid) → 체계별 모든 단위(CSS 단 나눔으로 빈 칸 없이). 접시 칸은 작업면 520px부터 나란히, 좁으면 위아래.
   움직임(R45): 저울대 기울기(JS 감쇠 진동)·분동 내려앉기·막대 자라기, 동작 줄이기면 없음. 강조색은 저울 바늘 한 곳. 공용 부품 assets/v2.css */
.mcv-work{container:mcv / inline-size}
.mcv-work [hidden]{display:none !important}
.mcv-work .v2-status:empty{display:none}
.mcv-work button:focus-visible,.mcv-select:focus-visible,.mcv-find input:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.mcv-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}

/* 자주 찾는 값 */
.mcv-top{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.mcv-quick button{height:28px;padding:0 9px}

/* 저울 작업대 */
.mcv-bench{padding:4px 18px 16px;border-bottom:1px solid var(--soft)}
.mcv-scale{height:140px}
.mcv-scale svg{display:block;width:100%;height:100%;overflow:visible}
.mcv-scale .sb{fill:color-mix(in srgb, var(--ink) 10%, var(--card));stroke:color-mix(in srgb, var(--ink) 45%, transparent);stroke-width:1}
.mcv-scale .sp{fill:color-mix(in srgb, var(--ink) 55%, var(--card))}
.mcv-scale .sa line{stroke:color-mix(in srgb, var(--ink) 40%, transparent);stroke-width:1.2;stroke-linecap:round}
.mcv-scale .sa line.c{stroke:var(--ink);stroke-width:1.6}
.mcv-scale .bm{fill:var(--ink)}
.mcv-scale .nd{stroke:var(--accent);stroke-width:2;stroke-linecap:round}
.mcv-scale .pv{fill:var(--card);stroke:var(--ink);stroke-width:2}
.mcv-scale .po{stroke:var(--ink);stroke-width:2.2}
.mcv-scale .pl{fill:var(--ink)}
.mcv-scale .wb,.mcv-scale .wk{fill:color-mix(in srgb, var(--ink) 14%, var(--card));stroke:color-mix(in srgb, var(--ink) 62%, transparent);stroke-width:1.1}
.mcv-scale .is-rest .wb{fill:color-mix(in srgb, var(--ink) 30%, var(--card));stroke:none}
.mcv-scale .wl{font-family:var(--sans);font-size:10.5px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.mcv-scale .pu{font-family:var(--sans);font-size:11.5px;font-weight:650;fill:var(--muted)}
.mcv-scale .ws.is-pop .w{transform-box:fill-box;animation:mcv-drop .5s cubic-bezier(.2,.8,.3,1.15) both}
.mcv-scale .ws.is-pop .w:nth-child(2){animation-delay:.05s}
.mcv-scale .ws.is-pop .w:nth-child(3){animation-delay:.1s}
.mcv-scale .ws.is-pop .w:nth-child(n+4){animation-delay:.15s}
@keyframes mcv-drop{from{transform:translateY(-16px);opacity:0}}

.mcv-pans{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.mcv-pan{display:grid;gap:8px;align-content:start;min-width:0;padding:12px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 55%, var(--paper));transition:border-color var(--ease)}
.mcv-pan.is-src{border-color:var(--line)}
.mcv-vals{display:grid;grid-template-columns:minmax(0,1fr);gap:8px}
.mcv-pan.is-two .mcv-vals{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.mcv-vals .v2-input input{font-size:22px;font-weight:750;padding:0 8px}
.mcv-vals .v2-input b{min-width:0;max-width:46%;padding:0 8px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mcv-pans.is-pend .mcv-pan:not(.is-src) input{opacity:.45}
.mcv-def{margin:-2px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mcv-mid{display:flex;justify-content:center}
.mcv-mid .v2-label{display:none}
.mcv-swap{width:var(--v2-ctl,42px);padding:0;justify-content:center}
.mcv-swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.mcv-swap .mcv-sw-h{display:none}
/* 위아래 배치인데 작업면이 넉넉하면(480px 이상) 한 칸 접시는 [값 | 단위]를 한 줄에(1181~1270px 화면의 빈 폭을 줄임). 두 칸 접시는 값 두 칸이 좁아져 그대로 둔다 */
@container mcv (min-width:480px) and (max-width:639px){
  .mcv-pan:not(.is-two){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .mcv-pan:not(.is-two) .mcv-def{grid-column:1 / -1}
}
@container mcv (min-width:640px) and (max-width:759px){
  .mcv-pans:has(.is-two) .mcv-pan:not(.is-two){grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);align-items:start}
  .mcv-pans:has(.is-two) .mcv-pan:not(.is-two) .mcv-def{grid-column:1 / -1}
}
/* 두 접시 나란히: 한 칸 접시는 작업면 640px(1280px 화면)부터, 두 칸(lb + oz·st + lb) 접시가 있으면 760px부터.
   1181~1270px 화면(작업면 549~638px)은 나란히 두면 선택 칸 197px·반쪽 칸 130px라 긴 단위 이름과 큰 값이 잘린다(독립 검토 R2·R3) */
@container mcv (min-width:640px){
  .mcv-pans:not(:has(.is-two)){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px}
  .mcv-pans:not(:has(.is-two)) .mcv-mid{flex-direction:column;justify-content:flex-start;padding-top:13px} /* 접시 칸 테두리 1 + 안쪽 여백 12 */
  .mcv-pans:not(:has(.is-two)) .mcv-mid .v2-label{display:block;margin:0 0 5px}
  .mcv-pans:not(:has(.is-two)) .mcv-swap .mcv-sw-h{display:block}
  .mcv-pans:not(:has(.is-two)) .mcv-swap .mcv-sw-v{display:none}
}
@container mcv (min-width:760px){
  .mcv-pans:has(.is-two){grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:10px}
  .mcv-pans:has(.is-two) .mcv-mid{flex-direction:column;justify-content:flex-start;padding-top:13px}
  .mcv-pans:has(.is-two) .mcv-mid .v2-label{display:block;margin:0 0 5px}
  .mcv-pans:has(.is-two) .mcv-swap .mcv-sw-h{display:block}
  .mcv-pans:has(.is-two) .mcv-swap .mcv-sw-v{display:none}
}
.mcv-line{margin:12px 0 0;font-family:var(--sans);font-size:13.5px;line-height:1.55;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mcv-line:empty{display:none}
.mcv-line.is-error{color:var(--accent)}
.mcv-alt{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.mcv-bench .v2-formula{margin-top:6px;white-space:normal;overflow:visible;overflow-wrap:anywhere;line-height:1.55} /* 좁은 화면에서 잘려 보이지 않게 줄바꿈 */

/* 버튼 줄 */
.mcv-acts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:8px 10px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.mcv-sdw{display:grid;gap:5px;margin-right:auto}

/* 이름은 같고 무게가 다른 단위 */
.mcv-fam{padding:14px 18px;border-bottom:1px solid var(--soft)}
.mcv-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:0 0 10px}
.mcv-head b{font-family:var(--sans);font-size:13.5px;font-weight:750;color:var(--ink)}
.mcv-head > span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.mcv-famtabs button{height:28px;padding:0 10px}
.mcv-famnote{margin:10px 0 6px;font-family:var(--sans);font-size:12.5px;line-height:1.6;color:var(--ink)}
.mcv-bars{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:fit-content(46%) minmax(48px,1fr) max-content;row-gap:2px}
.mcv-bars li{display:grid;grid-column:1 / -1;grid-template-columns:subgrid}
.mcv-bars button{display:grid;grid-column:1 / -1;grid-template-columns:subgrid;align-items:center;column-gap:12px;min-height:32px;padding:4px 8px;border:1px solid transparent;border-radius:var(--radius);background:none;text-align:left;font-family:var(--sans);color:var(--ink);cursor:pointer}
.mcv-bars button:hover{background:var(--btn)}
.mcv-bars button[aria-pressed="true"]{border-color:var(--line);background:var(--paper)}
.mcv-bn{min-width:0;font-size:13px;font-weight:650}
.mcv-bn small{font-size:11px;font-weight:600;color:var(--muted)}
.mcv-bb{display:block;height:12px;border-radius:2px;background:color-mix(in srgb, var(--ink) 20%, transparent);transform-origin:left center;transform:scaleX(var(--w,0));animation:mcv-grow .6s cubic-bezier(.2,.75,.25,1) both}
.mcv-bars button[aria-pressed="true"] .mcv-bb,.mcv-bars button.is-src .mcv-bb{background:color-mix(in srgb, var(--ink) 70%, transparent)}
.mcv-bv{font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}
@keyframes mcv-grow{from{transform:scaleX(0)}}
@container mcv (max-width:479px){
  .mcv-bars{grid-template-columns:minmax(0,1fr) max-content}
  .mcv-bars button{row-gap:4px}
  .mcv-bn{white-space:normal}
  .mcv-bb{grid-column:1 / -1;grid-row:2}
}

/* 모든 단위 */
.mcv-allw{padding:14px 18px 16px}
.mcv-allhead{align-items:flex-end}
.mcv-find{display:grid;gap:5px;margin-left:auto}
.mcv-find input{width:min(240px, 100%);height:var(--v2-ctl,42px);padding:0 10px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;color:var(--ink)}
.mcv-all{columns:236px auto;column-gap:20px}
.mcv-grp{break-inside:avoid;margin:0 0 12px}
.mcv-gh{display:grid;gap:1px;padding:2px 0 5px;cursor:pointer;list-style:none}
.mcv-gh::-webkit-details-marker{display:none}
.mcv-gh b::before{content:'';display:inline-block;width:0;height:0;margin:0 7px 1px 1px;border:4px solid transparent;border-left:5px solid var(--muted);border-right-width:0;transition:transform var(--ease)}
.mcv-grp[open] > .mcv-gh b::before{transform:rotate(90deg)}
.mcv-gh b small{margin-left:4px;font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted)}
.mcv-gh b{font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink)}
.mcv-gh span{font-family:var(--sans);font-size:11.5px;line-height:1.45;color:var(--muted)}
.mcv-grp ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--soft)}
.mcv-grp li button{display:flex;align-items:baseline;justify-content:space-between;gap:8px;width:100%;min-height:30px;padding:5px 6px;border:0;border-bottom:1px solid color-mix(in srgb, var(--line) 45%, transparent);background:none;text-align:left;font-family:var(--sans);color:var(--ink);cursor:pointer}
.mcv-grp li button:hover{background:var(--btn)}
.mcv-grp li button.is-src{background:var(--wash)}
.mcv-grp li button[aria-pressed="true"]{background:var(--fill);color:var(--on-fill)}
.mcv-grp li button[aria-pressed="true"] small{color:inherit;opacity:.75}
.mcv-un{flex:1 1 auto;min-width:0}
.mcv-un b{font-size:12.5px;font-weight:600}
.mcv-un small{margin-left:5px;font-size:11px;color:var(--muted)}
.mcv-uv{flex:0 0 auto;font-size:12.5px;font-weight:700;font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap} /* 값은 한 줄(숫자 중간에서 끊기지 않게, 독립 검토 R1), 긴 이름이 줄바꿈 */
.mcv-none{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;color:var(--muted)}

@container mcv (max-width:439px){
  .mcv-top,.mcv-acts,.mcv-fam,.mcv-allw{padding-left:14px;padding-right:14px}
  .mcv-bench{padding:2px 14px 14px}
  .mcv-scale{height:126px}
  .mcv-find{margin-left:0;width:100%}
  .mcv-find input{width:100%}
}
@media (prefers-reduced-motion: reduce){
  .mcv-scale .ws.is-pop .w,.mcv-bb{animation:none}
}