/* 섭씨 화씨 온도 변환기 전용 CSS (2026-10-20). 이중 눈금 온도계: 등식 띠 [°C] = [°F] · 머릿속 어림 | 세로 온도계 → 자주 찾는 값.
   폭(작업면 컨테이너 cfc): 760 이상 [등식 / 어림 / 그래프 | 온도계 248], 520~759 등식 / [어림 / 그래프 | 온도계 232], 520 미만 등식 / [어림 | 온도계 150] / 그래프.
   온도계 칸에 기준 이름 자리가 없으면(520 미만) 이름·값은 온도계 아래 범례로(독립 검토 R1).
   움직임(R45): 온도계 기둥이 차오르고 표시선이 따라 움직인다. 동작 줄이기면 바로. 공용 부품 assets/v2.css */
.cfc-work{container:cfc / inline-size}
.cfc-work .v2-status:empty{display:none}
.cfc-grid{display:grid;grid-template-columns:minmax(0,1fr) 150px;grid-template-areas:"eq eq" "mm th" "ch ch" "qk qk"}
.cfc-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.cfc-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);word-break:keep-all;overflow-wrap:anywhere}

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

/* 이중 눈금 온도계: 상자 크기(px) 그대로 그린 SVG + 관 위의 조작 손잡이(role=slider) */
.cfc-th{grid-area:th;display:flex;flex-direction:column;min-width:0;margin:0;padding:12px 10px 10px;border-left:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.cfc-th .cfc-head{padding:0 4px}
.cfc-thbox{position:relative;flex:1 1 auto;min-height:330px}
.cfc-thbox svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.cfc-grip{position:absolute;border-radius:14px;cursor:ns-resize;touch-action:pan-y} /* 터치로 쓸면 페이지가 스크롤되고, 끌기는 표시선 손잡이에서(독립 검토 B2) */
.cfc-knob{position:absolute;top:0;width:44px;height:36px;border-radius:12px;cursor:ns-resize;touch-action:none;transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.cfc-thbox.is-drag .cfc-liq,.cfc-thbox.is-drag .cfc-mark,.cfc-thbox.is-drag .cfc-knob{transition-duration:.12s}
.cfc-lmleg{display:flex;flex-direction:column;gap:5px;margin:8px 0 0;padding:0 4px;list-style:none;font-family:var(--sans)}
.cfc-lmleg[hidden]{display:none}
.cfc-lmleg li{position:relative;display:flex;flex-direction:column;min-width:0;padding-left:15px}
.cfc-lmleg li::before{content:"";position:absolute;left:0;top:8px;width:10px;border-top:1px dashed var(--muted)}
.cfc-lmleg b{font-size:11.5px;font-weight:750;color:var(--ink);overflow-wrap:break-word}
.cfc-lmleg span{font-size:10.5px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums}
.cfc-grip:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cfc-tube{fill:var(--paper);stroke:var(--line);stroke-width:1.2}
.cfc-bulb{fill:var(--accent);stroke:var(--line);stroke-width:1.2}
.cfc-liq{fill:var(--accent);transform-box:fill-box;transform-origin:50% 100%;transition:transform .8s cubic-bezier(.2,.75,.25,1)}
.cfc-tk{stroke:var(--line);stroke-width:1}
.cfc-tk.is-major{stroke:var(--muted);stroke-width:1.3}
.cfc-cn text,.cfc-fn text{font-family:var(--sans);font-size:11px;font-weight:650;fill:var(--ink);font-variant-numeric:tabular-nums}
.cfc-hd{font-family:var(--sans);font-size:11px;font-weight:800;fill:var(--muted)}
.cfc-lm{stroke:var(--muted);stroke-width:1;stroke-dasharray:2 3}
.cfc-lmn{font-family:var(--sans);font-size:11px;font-weight:750;fill:var(--ink)}
.cfc-lmv{font-family:var(--sans);font-size:10px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.cfc-mark{transition:transform .8s cubic-bezier(.2,.75,.25,1),opacity var(--ease)}
.cfc-mark line{stroke:var(--ink);stroke-width:1.6}
.cfc-mark path{fill:var(--ink)}
.cfc-mark.is-off{opacity:0}

/* 머릿속 어림: 단계 사슬(마지막 값이 결과) + 빠른 어림의 오차 그래프(0선 = 정확값, 오차는 10 °C = 50 °F에서 0) */
.cfc-mm{grid-area:mm;min-width:0;padding:14px 18px 12px;container:cfcmm / inline-size}
.cfc-chains{display:grid;grid-template-columns:minmax(0,1fr);gap:10px;min-width:0}
.cfc-chain{min-width:0;padding:10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.cfc-ct{margin:0 0 8px;font-family:var(--sans);font-size:12.5px;font-weight:750;color:var(--ink)}
.cfc-steps{display:flex;flex-wrap:wrap;align-items:center;gap:6px 4px;margin:0;padding:0;list-style:none;font-family:var(--sans);font-variant-numeric:tabular-nums lining-nums}
.cfc-steps li{display:flex;flex-wrap:wrap;align-items:center;gap:4px;min-width:0}
.cfc-steps i{font-style:normal;font-size:11.5px;font-weight:650;color:var(--muted);white-space:nowrap}
.cfc-steps i::before{content:"→ "}
.cfc-steps b{padding:3px 8px;border-radius:var(--radius);background:var(--wash);font-size:13.5px;font-weight:750;color:var(--ink);overflow-wrap:break-word} /* anywhere면 칸이 38px까지 줄어 숫자 중간이 끊겼다(독립 검토 B1) */
.cfc-steps li:last-child b{background:var(--fill);color:var(--on-fill)}
.cfc-ce{margin:8px 0 0;font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);font-variant-numeric:tabular-nums}
.cfc-ce.is-ok{color:var(--ink)}
.cfc-chain.is-off .cfc-steps{display:none}
.cfc-chain.is-off .cfc-ce{margin:0}
.cfc-chart{grid-area:ch;display:flex;flex-direction:column;min-width:0;padding:0 18px 14px;border-bottom:1px solid var(--soft)}
.cfc-leg{display:flex;flex-wrap:wrap;gap:2px 14px;margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.cfc-leg span{display:inline-flex;align-items:center;gap:6px}
.cfc-leg i{display:inline-block;width:18px;height:0;border-top:2px solid var(--ink)}
.cfc-leg i.is-q{border-top:2px dashed var(--muted)}
.cfc-chbox{position:relative;flex:1 1 auto;min-height:132px}
.cfc-chbox svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.cfc-ax{stroke:var(--line);stroke-width:1}
.cfc-ex{stroke:var(--ink);stroke-width:2}
.cfc-qk{stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4}
.cfc-axl{font-family:var(--sans);font-size:10.5px;font-weight:600;fill:var(--muted);font-variant-numeric:tabular-nums}
.cfc-axl.is-ink{fill:var(--ink);font-weight:700}
.cfc-same{fill:var(--card);stroke:var(--ink);stroke-width:1.6}
.cfc-gap{stroke:var(--ink);stroke-width:2.5}
.cfc-area{fill:color-mix(in srgb, var(--muted) 14%, transparent)}
.cfc-pq{fill:var(--card);stroke:var(--ink);stroke-width:2}
@container cfcmm (min-width:600px){ .cfc-chains{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} }

/* 자주 찾는 값: 묶음 4개 × 6개, 넓으면 4열·가운데 2열(2 × 2)·좁으면 쌓고 값 2열 — 어느 폭에서도 빈 칸 없이 */
.cfc-quick{grid-area:qk;min-width:0;padding:14px 18px 16px;container:cfcq / inline-size}
.cfc-qgs{display:grid;grid-template-columns:minmax(0,1fr);gap:12px 14px}
.cfc-qg{min-width:0}
.cfc-qt{margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.cfc-qg ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:5px;margin:0;padding:0;list-style:none}
.cfc-qg button{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:1px 8px;width:100%;min-height:40px;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)}
.cfc-qg button span{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 6px;min-width:0}
.cfc-qg button b{font-size:13.5px;font-weight:750;white-space:nowrap}
.cfc-qg button small{font-size:11px;font-weight:600;color:var(--muted)}
.cfc-qg button em{margin-left:auto;font-size:12px;font-style:normal;color:var(--muted);white-space:nowrap}
.cfc-qg button:hover{background:var(--wash)}
.cfc-qg button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cfc-qg button[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
@container cfcq (min-width:400px){ .cfc-qgs{grid-template-columns:repeat(2,minmax(0,1fr))} .cfc-qg ul{grid-template-columns:minmax(0,1fr)} }
@container cfcq (min-width:760px){ .cfc-qgs{grid-template-columns:repeat(4,minmax(0,1fr))} }

@media (prefers-reduced-motion: reduce){ .cfc-liq,.cfc-mark,.cfc-knob{transition:none} }

@container cfc (min-width:520px){ .cfc-grid{grid-template-columns:minmax(0,1fr) 232px;grid-template-areas:"eq eq" "mm th" "ch th" "qk qk"} }
@container cfc (min-width:760px){ .cfc-grid{grid-template-columns:minmax(0,1fr) 248px;grid-template-areas:"eq th" "mm th" "ch th" "qk qk"} }
@container v2in (max-width:419px){ /* 반쪽 칸에 큰 값(555,555,537.8)이 잘리지 않게 '라벨 | 입력' 한 줄씩, =·≈는 바로 아래 문장이 알린다 */
  .cfc-pair{grid-template-columns:minmax(0,1fr);gap:8px}
  .cfc-cell{display:grid;grid-template-columns:minmax(0,.36fr) minmax(0,1fr);align-items:center;gap:0 10px}
  .cfc-cell > label{margin:0}
  .cfc-sign{display:none}
}
@container cfc (max-width:519px){
  .cfc-eq,.cfc-mm,.cfc-chart,.cfc-quick{padding-left:14px;padding-right:14px}
  .cfc-mm{padding-right:12px;padding-bottom:14px;border-bottom:1px solid var(--soft)}
  .cfc-chart{padding-top:12px}
  .cfc-th{padding:12px 4px 10px}
  .cfc-acts .v2-btn .i{display:none} /* 버튼 네 개가 한 줄에 들어가게 */
}