/* 원주율 계산기 전용 CSS (2026-10-21). 원 펼침판: [네 칸 + 단위 | 원주율 고르기] → 단추 → 그림(둘레 펼치기·넓이 펼치기) → 풀이 → 원주율은 어떻게 구할까(정다각형 + 직접 재기).
   폭(작업면 컨테이너 pic): 700 이상 [칸 | 원주율] 두 열, 그 아래는 한 열(DOM 순서 그대로). 정다각형 칸은 560 이상 [그림 | 값].
   accent 는 원주(그림의 테두리·굴러간 길이, 다각형 바깥 틈) 한 가지. 움직임(R45): 원 굴리기·조각 붙이기는 tool.js(동작 줄이기면 마지막 장면만). 공용 부품 assets/v2.css */
.pic-work{container:pic / inline-size}
.pic-work [hidden]{display:none !important}
.pic-work .v2-status:empty{display:none}

/* 위판: 칸 | 원주율 */
.pic-top{display:grid;grid-template-columns:minmax(0,1fr)}
.pic-in{min-width:0;padding:14px 18px 12px}
.pic-form{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;margin:0}
.pic-f,.pic-uf{display:grid;grid-template-columns:minmax(92px,34%) minmax(0,1fr);align-items:center;column-gap:12px}
.pic-work .pic-f > label,.pic-work .pic-uf > label{margin:0;line-height:1.35}
.pic-f .v2-input input{font-size:18px;font-weight:750}
.pic-f.is-out .v2-input{background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.pic-f.is-src .v2-input{border-color:var(--ink)}
.pic-sym{font-family:var(--serif);font-style:italic;font-weight:700;color:var(--ink);margin-left:1px}
.pic-tag{margin-left:6px;font-weight:700;color:var(--ink);white-space:nowrap}
.pic-tag:empty{display:none}
.pic-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.pic-sel{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}
.pic-sel:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.pic-hint{margin:2px 0 0;line-height:1.45}
.pic-note{margin:8px 0 0;line-height:1.5}
.pic-note:empty{display:none}
.pic-note.is-error{color:var(--accent)}

.pic-pis{min-width:0;padding:10px 18px 12px;border-top:1px solid var(--soft)}
.pic-pil{display:grid;grid-template-columns:16px minmax(min-content,1fr) auto auto;column-gap:12px} /* 이름 칸은 낱말 폭 아래로 줄지 않고, 아주 긴 값은 값 칸에서 줄바꿈 */
.pic-pih,.pic-pi{grid-column:1 / -1;display:grid;grid-template-columns:subgrid;align-items:center}
.pic-pih{padding:4px 10px 6px}
.pic-pih .v2-label{grid-column:1 / 3}
.pic-col{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);text-align:right;white-space:nowrap}
.pic-pi{min-height:44px;padding:5px 10px;border:0;border-top:1px solid var(--soft);border-radius:0;background:none;color:var(--ink);text-align:left;cursor:pointer;transition:background var(--ease)}
.pic-pi:hover{background:color-mix(in srgb, var(--wash) 55%, var(--paper))}
.pic-pi[aria-checked="true"]{background:color-mix(in srgb, var(--wash) 85%, var(--paper))}
.pic-pi:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.pic-dot{width:14px;height:14px;border:1.5px solid var(--muted);border-radius:50%;background:var(--paper);box-sizing:border-box}
.pic-pi[aria-checked="true"] .pic-dot{border:4px solid var(--fill)}
.pic-pv{min-width:0}
.pic-pv b{display:block;font-family:var(--sans);font-size:15px;font-weight:800;font-variant-numeric:tabular-nums lining-nums}
.pic-pv small{display:block;margin-top:1px;font-family:var(--sans);font-size:11.5px;color:var(--muted);line-height:1.3}
.pic-diff{font-style:normal;font-variant-numeric:tabular-nums}
.pic-diff:not(:empty)::before{content:" · "}
.pic-pil.is-tight .pic-pv small{display:none}
.pic-v{font-family:var(--sans);font-size:var(--picv,14px);line-height:1.35;font-weight:700;text-align:right;font-variant-numeric:tabular-nums lining-nums;overflow-wrap:anywhere}
.pic-pi[aria-checked="true"] .pic-v{font-weight:800}
@container pic (min-width:700px){
  .pic-top{grid-template-columns:minmax(0,1fr) minmax(0,1.15fr)}
  .pic-pis{border-top:0;border-left:1px solid var(--soft)}
}
@container pic (max-width:420px){ .pic-pil{column-gap:8px} .pic-pih,.pic-pi{padding-left:6px;padding-right:6px} }

.pic-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 18px;border-top:1px solid var(--soft)}

/* 그림 */
.pic-fig{padding:12px 18px 12px;border-top:1px solid var(--soft)}
.pic-fhead{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.pic-play{margin-left:auto;height:30px}
.pic-pcs{align-items:center}
.pic-pcs button{min-width:34px;padding:0 8px}
.pic-pcl{margin-right:2px;font-family:var(--sans);font-size:12px;color:var(--muted)}
.pic-fbox{min-width:0;margin-top:10px}
.pic-svg{display:block;max-width:100%;height:auto;overflow:visible}
.pic-cap{margin:6px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pic-gh{stroke:var(--line);stroke-width:1.5;stroke-dasharray:4 4}
.pic-tk{stroke:var(--muted);stroke-width:1.4}
.pic-tk--end{stroke:var(--accent);stroke-width:2}
.pic-tl{fill:var(--muted);font-family:var(--sans);font-size:12px;font-weight:700;font-variant-numeric:tabular-nums}
.pic-tl--end{fill:var(--accent)}
.pic-gd{stroke:var(--accent);stroke-width:3.5;stroke-linecap:round}
.pic-disc{fill:var(--paper);stroke:var(--soft);stroke-width:1}
.pic-rim{fill:none;stroke:var(--accent);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.pic-used{fill:none;stroke:var(--muted);stroke-width:1.4;stroke-dasharray:3 4}
.pic-dia{stroke:var(--ink);stroke-width:1.6}
.pic-pt{fill:var(--ink)}
.pic-dl{fill:var(--ink);font-family:var(--sans);font-size:12px;font-weight:700;paint-order:stroke;stroke:var(--paper);stroke-width:4px;stroke-linejoin:round;font-variant-numeric:tabular-nums}
.pic-tot{fill:var(--ink);font-family:var(--sans);font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}
.pic-bl{fill:var(--muted);font-family:var(--sans);font-size:12px;font-weight:700}
.pic-bv{fill:var(--ink);font-family:var(--sans);font-weight:800;letter-spacing:-.02em;font-variant-numeric:tabular-nums lining-nums}
.pic-ghost{fill:none;stroke:var(--line);stroke-width:1.4;stroke-dasharray:4 4}
.pic-sa{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1;stroke-linejoin:round}
.pic-sb{fill:color-mix(in srgb, var(--wash) 80%, var(--paper));stroke:var(--line);stroke-width:1;stroke-linejoin:round}
.pic-br{stroke:var(--muted);stroke-width:1.4}
.pic-svg.is-empty{opacity:.55}

/* 풀이 */
.pic-stepw{padding:12px 18px 14px;border-top:1px solid var(--soft)}
.pic-steps{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,420px),1fr));gap:6px 18px;margin:8px 0 0;padding:0;list-style:none;counter-reset:pst}
.pic-steps:empty{display:none}
.pic-steps li{counter-increment:pst;display:flex;align-items:baseline;gap:8px;font-family:var(--sans);font-size:13.5px;line-height:1.55;font-variant-numeric:tabular-nums lining-nums}
.pic-steps li::before{content:counter(pst);flex:0 0 auto;display:grid;place-items:center;width:18px;height:18px;border-radius:50%;background:var(--wash);font-size:11px;font-weight:700;color:var(--muted);transform:translateY(-1px)}
.pic-piform{margin:8px 0 0;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink);font-variant-numeric:tabular-nums}
.pic-piform:empty{display:none}

/* 원주율은 어떻게 구할까 */
.pic-arch{padding:14px 18px 16px;border-top:1px solid var(--soft)}
.pic-ahead{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px}
.pic-ahead .v2-hint{line-height:1.45}
.pic-abody{display:grid;grid-template-columns:minmax(0,1fr);gap:10px 20px;margin-top:10px}
.pic-asvg{display:block;width:min(100%,220px);height:auto;margin:0 auto}
.pic-aout{fill:var(--accent-wash);stroke:var(--accent);stroke-width:1.2;stroke-linejoin:round}
.pic-acir{fill:var(--paper);stroke:var(--ink);stroke-width:1.6}
.pic-ain{fill:var(--wash);stroke:var(--muted);stroke-width:1.2;stroke-linejoin:round}
.pic-adia{stroke:var(--muted);stroke-width:1.2;stroke-dasharray:3 3}
.pic-alab{fill:var(--muted);font-family:var(--sans);font-size:12px;font-weight:700}
.pic-ainfo{min-width:0}
.pic-astep{display:flex;align-items:center;justify-content:center;gap:10px}
.pic-anb{justify-content:center;width:34px;padding:0;font-size:17px}
.pic-an{min-width:9ch;font-family:var(--serif);font-size:22px;font-weight:900;letter-spacing:-.02em;text-align:center;font-variant-numeric:tabular-nums}
.pic-arows{margin-top:10px}
.pic-arows li b{font-family:var(--mono);font-size:13.5px;font-weight:500;color:var(--muted)}
.pic-arows li b b{font-weight:700;color:var(--ink)}
.pic-k{display:inline-block;width:11px;height:11px;margin:0 7px -1px 0;border-radius:2px}
.pic-k--in{border:1px solid var(--muted);background:var(--wash)}
.pic-k--out{border:1px solid var(--accent);background:var(--accent-wash)}
.pic-asame{margin:8px 0 0;font-family:var(--sans);font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.pic-anote{margin:4px 0 0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--muted)}
.pic-meas{display:grid;grid-template-columns:minmax(0,1fr);gap:6px 20px;margin-top:14px;padding-top:12px;border-top:1px dashed var(--soft)}
.pic-mform{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0}
.pic-mform .v2-input input{font-size:15.5px}
@container v2in (max-width:380px){ .pic-mform{grid-template-columns:minmax(0,1fr)} }
.pic-mres{margin:0;font-family:var(--sans);font-size:13.5px;line-height:1.55;font-variant-numeric:tabular-nums}
.pic-mres b{font-weight:800}
.pic-mres span{color:var(--muted)}
.pic-mres.is-error{color:var(--accent)}
@container pic (min-width:560px){
  .pic-abody{grid-template-columns:220px minmax(0,1fr);align-items:center}
  .pic-astep{justify-content:flex-start}
  .pic-meas{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:end}
  .pic-ml{grid-column:1 / -1;margin:0}
  .pic-mres{padding-bottom:4px}
}