/* 각도 단위 변환기 전용 CSS (2026-10-20). 입력 막대 → 결과 | 각도기 → 같은 각, 모든 단위.
   넓은 작업면: 왼쪽 위 결과·왼쪽 아래 모든 단위, 오른쪽 두 줄 각도기. 620px 아래는 결과 → 각도기 → 모든 단위(DOM 순서 그대로). 폭 판단은 작업면 컨테이너 au. 공용 부품 assets/v2.css */
.au-work{container:au / inline-size}
.au-work .v2-status:empty{display:none}
.au-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px;margin:0 0 6px}
.au-headhint{font-family:var(--sans);font-size:12px;color:var(--muted);overflow-wrap:anywhere}

/* 입력 막대 */
.au-bar{padding:14px 18px 12px;border-bottom:1px solid var(--soft)}
.au-form{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,10.5em) var(--v2-ctl,42px) minmax(0,10.5em);align-items:end;gap:10px 8px}
.au-val .v2-input input{font-size:18px;font-weight:700}
.au-pi{flex:0 0 auto;min-width:40px;padding:0 10px;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(--serif);font-size:18px;font-weight:700;cursor:pointer}
.au-pi:hover{background:var(--btn)}
.au-pi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.au-pi[hidden]{display:none}
.au-select{display:block;width:100%;max-width:100%;height:var(--v2-ctl,42px);padding:0 6px;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}
.au-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.au-swap{justify-content:center;width:100%;padding:0}
.au-swap svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.au-swapf .v2-label{display:block}
.au-tools{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px;margin-top:12px}
.au-help{flex:1 1 240px;align-self:center;margin:0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.au-ctl{display:grid;gap:5px;min-width:0}
.au-acts{display:flex;flex-wrap:wrap;gap:6px}

/* 결과 | 각도기 / 모든 단위 */
.au-main{display:grid;grid-template-columns:minmax(0,1fr) minmax(270px,.85fr);grid-template-areas:"out vis" "all vis";grid-template-rows:auto 1fr}
.au-out{grid-area:out;display:flex;flex-direction:column;min-width:0;padding:16px 18px;container:auout / inline-size}
.au-rlabel{display:block;margin-bottom:6px;font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.au-out .v2-big{flex-wrap:wrap;transition:opacity var(--ease)}
.au-out .v2-big:not(.is-empty) span{white-space:nowrap;font-size:clamp(15px, calc(100cqi / (var(--au-len, 6) * .62)), 1em)}
.au-out .v2-big.is-empty span{font-size:16px;font-weight:600;line-height:1.4;color:var(--muted);white-space:normal}
.au-dec{margin:8px 0 0;font-family:var(--sans);font-size:16px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere;transition:opacity var(--ease)}
.au-dec:empty{display:none}
.au-out .v2-sub{transition:opacity var(--ease)}
.au-out.is-pend .v2-big,.au-out.is-pend .au-dec,.au-out.is-pend .v2-sub{opacity:.45}
.au-out .v2-formula{margin:10px 0 0;white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.au-foot{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:auto;padding-top:14px}
.au-foot .v2-status{margin-left:auto}

.au-vis{grid-area:vis;display:flex;flex-direction:column;min-width:0;padding:16px 18px;border-left:1px solid var(--soft)}
.au-dial{position:relative;width:100%;max-width:330px;aspect-ratio:1;margin:2px auto 0;cursor:pointer;touch-action:manipulation;-webkit-user-select:none;user-select:none}
.au-dial svg{position:absolute;inset:0;display:block;width:100%;height:100%;overflow:visible}
.au-face{fill:var(--paper);stroke:var(--line);stroke-width:1.2}
.au-sec{fill:var(--accent-wash)}
.au-tk{stroke:var(--line);stroke-width:1}
.au-tk2{stroke:var(--muted);stroke-width:1.4}
.au-lab{font-family:var(--sans)}
.au-ld{font-size:12.5px;font-weight:700;fill:var(--ink)}
.au-lp{font-family:var(--serif);font-size:11.5px;font-weight:600;fill:var(--muted)}
.au-ref{stroke:var(--muted);stroke-width:1;stroke-dasharray:3 3}
.au-arc{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round}
.au-term{stroke:var(--accent);stroke-width:1.6}
.au-rt line{stroke:var(--ink);stroke-width:1.6}
.au-rt text{font-family:var(--sans);font-size:11px;font-weight:800;fill:var(--accent)}
.au-hub{fill:var(--ink)}
.au-c1{font-family:var(--sans);font-size:21px;font-weight:800;fill:var(--ink);font-variant-numeric:tabular-nums}
.au-c2{font-family:var(--sans);font-size:11.5px;font-weight:700;fill:var(--accent)}
.au-knob{position:absolute;left:100%;top:50%;width:22px;height:22px;margin:-11px 0 0 -11px;border:3px solid var(--paper);border-radius:50%;background:var(--accent);box-shadow:0 0 0 1px var(--accent),0 2px 6px rgba(0,0,0,.2);cursor:grab;touch-action:none}
.au-knob::before{content:"";position:absolute;inset:-14px;border-radius:50%}
.au-knob:active{cursor:grabbing}
.au-knob:focus-visible{outline:2px solid var(--ink);outline-offset:3px}
.au-leg{display:flex;gap:8px;align-items:flex-start;margin:10px 0 0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.au-leg i{flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;border:1.5px solid var(--ink);border-radius:50%;font-style:normal;font-size:10.5px;font-weight:800;color:var(--accent)}
.au-norm{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin:12px 0 0}
.au-norm div{min-width:0;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.au-norm dt{font-family:var(--sans);font-size:11.5px;color:var(--muted);overflow-wrap:anywhere}
.au-norm dd{margin:3px 0 0;font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.au-chipw{display:grid;gap:6px;margin-top:12px}
.au-chips button{min-width:46px;font-variant-numeric:tabular-nums}

.au-allw{grid-area:all;min-width:0;padding:14px 18px 16px;border-top:1px solid var(--soft)}
.au-all{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));gap:0 14px;list-style:none;margin:0;padding:0}
.au-all button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:0 10px;width:100%;min-height:34px;padding:6px 8px;border:0;border-top:1px solid var(--soft);border-left:2px solid transparent;background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer;transition:background var(--ease)}
.au-all button:hover{background:var(--btn)}
.au-all button:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.au-all button[aria-pressed="true"]{border-left-color:var(--accent);background:var(--accent-wash)}
.au-all button span{grid-row:1 / span 2;align-self:center;min-width:0;font-family:var(--sans);font-size:13px;color:var(--muted);overflow-wrap:anywhere}
.au-all button span i{display:none;margin-left:6px;font-family:var(--mono);font-size:10.5px;font-style:normal;color:var(--muted)}
.au-all button.is-from span i{display:inline}
.au-all button.is-from span i::before{content:"← "}
.au-all button b{font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap}
.au-all button em{font-family:var(--serif);font-size:12px;font-style:normal;font-weight:600;color:var(--accent);text-align:right}
.au-all button em:empty{display:none}

@container au (max-width:620px){
  .au-main{grid-template-columns:minmax(0,1fr);grid-template-areas:"out" "vis" "all";grid-template-rows:auto}
  .au-vis{border-left:0;border-top:1px solid var(--soft)}
  .au-dial{max-width:300px}
}
@container au (min-width:461px) and (max-width:620px){
  .au-vis{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);column-gap:18px;align-items:start}
  .au-vis > .au-head{grid-column:1 / -1}
  .au-dial{margin:0}
  .au-side .au-leg{margin-top:0}
  .au-norm{grid-template-columns:minmax(0,1fr);gap:6px}
  .au-norm div{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:6px 10px}
  .au-norm dd{margin:0;text-align:right}
}
@container au (max-width:560px){
  .au-form{grid-template-columns:minmax(0,1fr) var(--v2-ctl,42px) minmax(0,1fr)}
  .au-val{grid-column:1 / -1}
}
@container au (max-width:340px){
  .au-form{grid-template-columns:minmax(0,1fr) var(--v2-ctl,42px)}
  .au-to{grid-column:1}
  .au-all button{grid-template-columns:minmax(0,1fr)}
  .au-all button span{grid-row:auto}
  .au-all button b,.au-all button em{text-align:left;white-space:normal;overflow-wrap:anywhere}
}
@container au (max-width:360px){
  .au-norm{grid-template-columns:minmax(0,1fr)}
  .au-norm div{display:flex;justify-content:space-between;gap:10px;align-items:baseline}
  .au-norm dd{margin:0;text-align:right}
}