/* 주파수 변환기 전용 CSS (2026-10-21). 주파수 수신기: [계량 판 | 오실로스코프] / 튜닝 다이얼 · 읽기 네 칸 · 자주 찾는 값.
   폭(작업면 컨테이너 frq): 760 이상 [판 | 스코프](스코프 화면은 판 높이만큼 늘어남), 그 아래 한 열.
   계량 칸(v2in): 2열(마지막 홀수 칸은 한 줄 전체), 600 이상 3열(3 × 3), 360 미만(휴대폰)은 아홉 칸 모두 '라벨 | 입력' 한 줄씩.
   움직임(R45): 값이 바뀌면 파형을 왼쪽부터 다시 그림(0.8s), 다이얼 눈금이 값 쪽으로 미끄러짐(0.55s). 동작 줄이기면 둘 다 바로. 공용 부품 assets/v2.css */
.frq-work{container:frq / inline-size}
.frq-work .v2-status:empty{display:none}
.frq-grid{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"panel" "scope" "rx"}
.frq-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 8px}
.frq-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 계량 판: 아홉 칸 중 친 칸이 정본(진한 테두리), 반올림한 칸은 라벨 끝 ≈ */
.frq-panel{grid-area:panel;min-width:0;padding:14px 18px;border-bottom:1px solid var(--soft)}
.frq-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 14px;margin:0 0 12px}
.frq-sdw{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px}
.frq-cells{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px}
.frq-cells > .frq-cell:last-child:nth-child(odd){grid-column:1/-1}
.frq-cell > label{display:flex;align-items:baseline;gap:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frq-ap{display:none;font-style:normal;font-weight:700;color:var(--muted)}
.frq-cell.is-ap .frq-ap{display:inline}
.frq-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.frq-cell.is-src .v2-input{border-color:var(--ink)}
.frq-cell .v2-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-wash)} /* 정본 칸(진한 테두리)과 초점 칸이 같아 보이지 않게(검토 R2) */
.frq-cell .v2-input b{min-width:0;padding:0 8px;white-space:nowrap}
.frq-unit{flex:0 0 auto;min-width:54px;height:auto;padding:0 4px 0 8px;border:0;border-left:1px solid var(--soft);border-radius:0 var(--radius) var(--radius) 0;background:var(--wash);color:var(--ink);font-family:var(--sans);font-size:12px;font-weight:650;cursor:pointer}
.frq-unit:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.frq-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)}
.frq-sent.is-error{color:var(--accent)}
.frq-panel.is-pend .frq-sent,.frq-panel.is-pend .v2-formula{opacity:.45}
.frq-foot{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 14px;margin-top:10px}
.frq-foot .v2-formula{margin:0;min-width:0;white-space:normal;overflow-wrap:anywhere}
.frq-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
@container v2in (min-width:600px){
  .frq-cells{grid-template-columns:repeat(3,minmax(0,1fr))}
  .frq-cells > .frq-cell:last-child:nth-child(odd){grid-column:auto}
}

/* 오실로스코프: 가로 10칸 · 세로 6칸 눈금, 색칠한 첫 한 번 = 주기 T, 위에 T 묶음선 */
.frq-scope{grid-area:scope;display:flex;flex-direction:column;min-width:0;margin:0;padding:14px 18px;border-bottom:1px solid var(--soft)}
.frq-screen{position:relative;flex:1 1 auto;min-height:190px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.frq-screen svg{position:absolute;inset:0;display:block;width:100%;height:100%}
.frq-grid-m{fill:none;stroke:var(--soft);stroke-width:1}
.frq-axis{fill:none;stroke:var(--line);stroke-width:1}
.frq-shade{fill:var(--accent-wash)}
.frq-wave{fill:none;stroke:var(--accent);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.frq-wave.is-draw{transition:stroke-dashoffset .8s cubic-bezier(.3,.1,.3,1)}
.frq-br{position:absolute;top:8px;left:0;height:12px;margin:0;border-left:1.5px solid var(--ink);border-right:1.5px solid var(--ink);box-sizing:border-box}
.frq-br::before{content:"";position:absolute;left:0;right:0;top:50%;border-top:1.5px solid var(--ink)}
.frq-br span{position:absolute;top:14px;left:4px;padding:1px 5px;border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:750;color:var(--ink);white-space:nowrap;font-variant-numeric:tabular-nums lining-nums}
.frq-scope.is-empty .frq-screen{opacity:.6}
.frq-scrd{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px 12px;margin:10px 0 0;padding:0;list-style:none}
.frq-scrd li{display:flex;flex-direction:column;gap:1px;min-width:0}
.frq-scrd li:only-child{grid-column:1/-1;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.frq-scrd span{font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.frq-scrd b{font-family:var(--sans);font-size:13.5px;font-weight:750;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}

/* 튜닝 다이얼: 가운데 바늘 아래로 로그 눈금이 미끄러짐. 줄: 눈금(0~24) · 소리(30) · 전파(56) · 빛(82) */
.frq-rx{grid-area:rx;min-width:0;padding:14px 18px 16px}
.frq-rx > .frq-head{justify-content:flex-start}
.frq-rx > .frq-head .frq-headhint{flex:1 1 220px;text-align:right}
.frq-dialv{font-family:var(--sans);font-size:15px;font-weight:800;color:var(--ink);font-variant-numeric:tabular-nums lining-nums}
.frq-dial{position:relative;height:112px;overflow:hidden;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.frq-dial.is-drag{cursor:grabbing}
.frq-dial:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.frq-dial.is-empty .frq-track{opacity:.45}
.frq-dial.is-empty .frq-needle{display:none}
.frq-track{position:absolute;top:0;bottom:0;left:50%}
.frq-dial.is-anim .frq-track{transition:transform .55s cubic-bezier(.2,.75,.25,1)}
.frq-ticks{position:absolute;left:0;right:0;top:0;height:24px;border-bottom:1px solid var(--line)}
.frq-ticks i{position:absolute;top:0;height:24px;border-left:1px solid var(--line);font-style:normal}
.frq-ticks span{position:absolute;top:5px;left:4px;font-family:var(--sans);font-size:10.5px;font-weight:650;color:var(--muted);white-space:nowrap;font-variant-numeric:tabular-nums}
.frq-lane{position:absolute;left:0;right:0;height:22px}
.frq-lane[data-k="snd"]{top:30px}
.frq-lane[data-k="rad"]{top:56px}
.frq-lane[data-k="lit"]{top:82px}
.frq-b{position:absolute;top:0;height:100%;font-style:normal;box-sizing:border-box;border:1px solid var(--soft);border-radius:3px;background:var(--wash);overflow:hidden}
.frq-b span{display:block;padding:0 6px;font-family:var(--sans);font-size:10.5px;font-weight:700;line-height:20px;color:var(--ink);white-space:nowrap}
.frq-b.is-aud{background:color-mix(in srgb, var(--ink) 14%, var(--paper));border-color:var(--line)}
.frq-b.is-mute{background:transparent;border-style:dashed;border-color:var(--line)}
.frq-b.is-fade{background:linear-gradient(90deg,var(--wash),transparent);border-color:transparent}
.frq-b.is-fade span,.frq-b.is-mute span{color:var(--muted)}
.frq-b.is-band{border-radius:0;border-color:var(--paper)}
.frq-b.is-band.is-odd{background:color-mix(in srgb, var(--ink) 9%, var(--paper))}
.frq-b.is-vis{border-color:transparent}
.frq-b.is-vis span{color:#111;text-shadow:0 0 3px rgba(255,255,255,.75)}
.frq-lane .frq-b.is-cur{background:var(--fill);border-color:var(--fill)}
.frq-lane .frq-b.is-cur span{color:var(--on-fill)}
.frq-lane .frq-b.is-vis.is-cur,.frq-lane .frq-b.is-fade.is-cur{background-color:transparent;border-color:var(--ink)}
.frq-lane .frq-b.is-fade.is-cur{background:linear-gradient(90deg,var(--fill),transparent)}
.frq-lanes{position:absolute;left:0;top:30px;display:flex;flex-direction:column;gap:4px;margin:0;pointer-events:none}
.frq-lanes span{height:22px;padding:0 14px 0 7px;font-family:var(--sans);font-size:10.5px;font-weight:750;line-height:22px;color:var(--muted);background:linear-gradient(90deg,var(--paper) 72%,transparent)}
.frq-needle{position:absolute;top:0;bottom:0;left:50%;width:2px;margin-left:-1px;background:var(--ink);pointer-events:none}
.frq-needle::before{content:"";position:absolute;top:0;left:-5px;border:6px solid transparent;border-top-color:var(--ink)}

/* 읽기 네 칸: 그 영역에 드는 칸만 진하게 */
.frq-read{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin:10px 0 0;padding:0;list-style:none}
.frq-read li{display:flex;flex-direction:column;gap:3px;min-width:0;padding:9px 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.frq-rk{display:flex;align-items:center;gap:6px;font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted)}
.frq-rk::before{content:"";width:7px;height:7px;border:1.5px solid var(--muted);border-radius:50%}
.frq-read b{font-family:var(--sans);font-size:13.5px;font-weight:750;line-height:1.4;color:var(--muted);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.frq-read small{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted);overflow-wrap:anywhere}
.frq-read small:empty{display:none}
.frq-read li.is-on{border-color:var(--line);background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.frq-read li.is-on b{color:var(--ink)}
.frq-read li.is-on .frq-rk{color:var(--ink)}
.frq-read li.is-on .frq-rk::before{border-color:var(--ink);background:var(--ink)}
.frq-sw{display:inline-block;width:12px;height:12px;margin-right:6px;border:1px solid var(--line);border-radius:2px;vertical-align:-1px}

/* 자주 찾는 값 12개: 4 · 3 · 2열(12로 나눠떨어져 빈 칸 없음) */
.frq-quick{margin-top:14px;container:frqq / inline-size}
.frq-qs{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.frq-qs button{display:flex;flex-direction:column;align-items:flex-start;gap:1px;width:100%;height: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}
.frq-qs button b{font-size:13.5px;font-weight:750}
.frq-qs button small{font-size:11px;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.frq-qs button:hover{background:var(--wash)}
.frq-qs button:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.frq-qs button[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
@container frqq (max-width:619px){ .frq-qs{grid-template-columns:repeat(3,minmax(0,1fr))} }
@container frqq (max-width:439px){ .frq-qs{grid-template-columns:repeat(2,minmax(0,1fr))} }

@media (prefers-reduced-motion: reduce){ .frq-wave.is-draw,.frq-dial.is-anim .frq-track{transition:none} }

/* 폭 */
@container frq (min-width:760px){
  .frq-grid{grid-template-columns:minmax(0,1fr) minmax(280px,40%);grid-template-areas:"panel scope" "rx rx"}
  .frq-scope{border-left:1px solid var(--soft)}
}
@container frq (max-width:759px){ .frq-read{grid-template-columns:repeat(2,minmax(0,1fr))} }
@container frq (max-width:439px){
  .frq-panel,.frq-scope,.frq-rx{padding-left:14px;padding-right:14px}
  .frq-acts .v2-btn .i{display:none} /* 버튼 네 개가 한 줄에 들어가게 */
  .frq-read{grid-template-columns:minmax(0,1fr)}
  .frq-scrd{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .frq-scrd li:last-child{grid-column:1/-1}
}
@container v2in (max-width:359px){ /* 휴대폰 폭: 칸마다 '라벨 | 입력' 한 줄씩 */
  .frq-cells{grid-template-columns:minmax(0,1fr);gap:8px}
  .frq-cells > .frq-cell:last-child:nth-child(odd){grid-column:auto}
  .frq-cell{display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,1fr);align-items:center;gap:0 10px}
  .frq-cell > label{display:block;margin:0;white-space:normal} /* 줄이 접혀도 ≈가 글 바로 뒤에 붙게 */
  .frq-cell > label .frq-ap{margin-left:4px}
}