/* CSS clamp() 생성기 전용 CSS (2026-10-21). 크기 경사로: 예시 띠 → 결과 띠 → 경사로 그래프 + 화면 폭별 값 → [입력·계산 | 실제 화면 미리 보기] → 확대 점검 → 타입 스케일.
   작업면 640px 미만이면 한 열. accent는 그래프의 '지금 보는 화면 폭' 커서 한 곳(확대 기준 미달 표시는 오류 색). 공용 부품은 assets/v2.css */
.clp{container:clpwork / inline-size}
.clp-head{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;margin:0 0 10px}
.clp-hint{font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}
.clp-note{margin:8px 0 0;font-family:var(--sans);font-size:12px;line-height:1.55;color:var(--muted)}
.clp-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}
.clp-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 예시 띠 */
.clp-pre{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.clp-pre .v2-seg button{height:auto;min-height:30px;padding:4px 10px;white-space:nowrap}

/* 결과 띠 */
.clp-out{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0}
.clp-opts{display:flex;flex-wrap:wrap;gap:8px 20px;margin:0 0 12px}
.clp-opt{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-width:0}
.clp-opt .v2-seg button{white-space:nowrap}
#clpProp button{font-family:var(--mono);font-weight:700}
.clp-code{margin:0;padding:12px 14px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:16px;line-height:1.55;color:var(--muted);overflow-wrap:anywhere}
.clp-code code{font-family:inherit}
.clp-code b{font-weight:700;color:var(--ink)}
.clp-code .p{color:var(--ink)}
.clp-sum{margin-top:10px}
.clp-foot{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:12px}
.clp-foot .v2-status{margin-left:auto}

/* 경사로 그래프 */
.clp-chart{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0;container:clpchart / inline-size}
.clp-play{margin-left:auto}
.clp-play span:first-child{font-size:10px}
.clp-plot{position:relative;min-height:236px}
.clp-svg{display:block;width:100%;overflow:visible;font-family:var(--sans);user-select:none;-webkit-user-select:none}
.clp-svg text{font-size:11px;fill:var(--muted)}
.clp-svg .gy line,.clp-svg .gx line{stroke:var(--soft);stroke-width:1}
.clp-svg .zn{fill:var(--wash)}
.clp-svg .ext{fill:none;stroke:var(--line);stroke-width:1.2;stroke-dasharray:4 4}
.clp-svg .ln{fill:none;stroke:var(--ink);stroke-width:2.6;stroke-linejoin:round}
.clp-svg .ic{fill:var(--paper);stroke:var(--muted);stroke-width:1.4}
.clp-svg .lb text{font-weight:600}
.clp-svg .ti{font-weight:500}
.clp-svg .hit{fill:transparent;cursor:crosshair}
.clp-svg .cur{outline:none;cursor:ew-resize}
.clp-svg .cur line{stroke:var(--accent);stroke-width:1.6}
.clp-svg .bub rect{fill:var(--paper);stroke:var(--accent);stroke-width:1.2}
.clp-svg .bub text{font-size:11.5px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums}
.clp-svg .hdl .hz{fill:transparent}
.clp-svg .hdl .hv{fill:var(--accent);stroke:var(--paper);stroke-width:1.5}
.clp-svg .hdl .ha{fill:none;stroke:var(--paper);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.clp-svg .hdl,.clp-svg .bub,.clp-svg .knot{touch-action:none}
.clp-svg .cur:focus-visible .hv{stroke:var(--ink);stroke-width:2.5}
.clp-svg .knot{cursor:grab;outline:none}
.clp-svg .knot .kh{fill:transparent}
.clp-svg .knot .kd{fill:var(--paper);stroke:var(--ink);stroke-width:2.4;transition:r var(--ease)}
.clp-svg .knot:hover .kd,.clp-svg .knot:focus-visible .kd{r:8.5}
.clp-svg .knot:focus-visible .kd{stroke:var(--accent);stroke-width:3}
.clp-svg .knot .kt{font-size:11px;font-weight:700;fill:var(--ink);font-variant-numeric:tabular-nums;paint-order:stroke;stroke:var(--card);stroke-width:3px;stroke-linejoin:round}
.clp.is-drag .clp-svg .knot{cursor:grabbing}
.clp-keys{margin:4px 0 0;font-family:var(--sans);font-size:11.5px;line-height:1.5;color:var(--muted)}
/* 화면 폭별 값: 넓으면 8칸 한 줄, 좁으면 4칸 두 줄 */
.clp-dev{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin-top:10px}
@container clpchart (min-width:700px){ .clp-dev{grid-template-columns:repeat(8,minmax(0,1fr))} }
.clp-dev button{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:baseline;gap:1px 6px;min-width:0;padding:7px 8px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);text-align:left;cursor:pointer;transition:border-color var(--ease),background var(--ease)}
.clp-dev button:hover{background:var(--wash)}
.clp-dev button[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash)}
.clp-dev b{font-size:12.5px;font-weight:800;font-variant-numeric:tabular-nums}
.clp-dev em{font-style:normal;font-size:10.5px;color:var(--muted);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.clp-dev span{grid-column:1 / -1;font-size:13px;font-weight:700;font-variant-numeric:tabular-nums}
.clp-dev i{grid-column:1 / -1;display:block;height:4px;margin-top:4px;border-radius:2px;background:var(--soft);overflow:hidden}
.clp-dev s{display:block;height:100%;width:0;background:var(--muted);border-radius:2px;transition:width .3s var(--ease,ease)}
.clp-dev .z-b s{background:var(--ink)}
@container clpchart (max-width:420px){ .clp-dev{gap:4px} .clp-dev button{padding:6px 6px 7px;grid-template-columns:minmax(0,1fr)} .clp-dev em{text-align:left} }

/* 입력 | 미리 보기 */
.clp-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.clp-in{padding:14px 18px 16px;min-width:0;display:flex;flex-direction:column}
.clp-form{display:grid;grid-template-columns:minmax(0,1fr);gap:12px}
.clp-set{margin:0;padding:0;border:0;min-width:0}
.clp-set legend{float:left;width:100%;margin:0 0 6px;padding:0;color:var(--ink);font-weight:700}
.clp-set legend + *{clear:both}
.clp-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.clp-rthint{display:block;margin-top:6px}
.clp-rows{margin-top:14px}
.clp-rows li b{white-space:normal;text-align:right;overflow-wrap:anywhere}
.clp-formula{white-space:normal;overflow-wrap:anywhere;line-height:1.6}
.clp-acts{display:flex;gap:6px;flex-wrap:wrap;margin-top:auto;padding-top:12px}
.clp-view{padding:14px 18px 16px;border-left:1px solid var(--soft);display:flex;flex-direction:column;min-width:0}
.clp-view .clp-head{margin-bottom:8px}
.clp-frame{position:relative;flex:none;height:150px;overflow:hidden;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.clp-frame iframe{position:absolute;left:0;top:0;display:block;border:0;transform-origin:0 0;background:var(--paper);pointer-events:none}
.clp-fz{position:absolute;right:6px;bottom:6px;padding:2px 6px;border-radius:var(--radius);background:var(--ink);color:var(--paper);font-family:var(--sans);font-size:10.5px;font-weight:700;font-variant-numeric:tabular-nums;opacity:.85}
/* 실제 크기 견본: 남는 높이를 채우고 넘치면 아래를 흐리게 자름 */
.clp-spec{position:relative;flex:1 1 0;min-height:170px;margin-top:8px;padding:28px 14px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);overflow:hidden;-webkit-mask-image:linear-gradient(#000 calc(100% - 28px),transparent);mask-image:linear-gradient(#000 calc(100% - 28px),transparent);font-family:var(--sans);color:var(--ink)}
.clp-spec::before{content:attr(data-l);position:absolute;left:14px;top:8px;font-size:11px;font-weight:700;color:var(--muted)}
.clp-spec .k{margin:0 0 6px;font-size:12px;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.clp-spec .h{margin:0 0 10px;font-weight:800;line-height:1.15;letter-spacing:-.02em;overflow-wrap:break-word}
.clp-spec:lang(ko) .h{word-break:keep-all}
.clp-spec .b{margin:0 0 8px;font-size:16px;line-height:1.6;color:var(--muted)}
.clp-spec .g{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.clp-spec .g i{display:grid;place-items:center;height:52px;border:1px solid var(--line);background:var(--wash);font-style:normal;font-size:13px;font-weight:700;color:var(--muted)}
.clp-spec .p{margin-bottom:10px;background:var(--wash);outline:1px dashed var(--line);outline-offset:-1px}
.clp-spec .p > div{background:var(--paper);border:1px solid var(--line);padding:10px 12px}
.clp-spec .p b{display:block;font-size:15px;margin-bottom:4px}
.clp-spec .p p{margin:0;font-size:13.5px;line-height:1.55;color:var(--muted)}
.clp-spec .wr{overflow:hidden}
.clp-spec .w{box-sizing:border-box;height:44px;padding:0;outline:2px solid var(--ink);outline-offset:-2px;background:var(--wash);font-size:13px;font-weight:700;line-height:44px;text-indent:10px;white-space:nowrap;font-variant-numeric:tabular-nums}
.clp-spec .w + .b,.clp-spec .wr + .b{margin-top:10px;font-size:13.5px}

/* 확대 점검 */
.clp-zoom{padding:14px 18px 16px;border-bottom:1px solid var(--soft);min-width:0;container:clpzoom / inline-size}
.clp-zgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.35fr);gap:12px 18px;align-items:stretch}
.clp-tiles{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.clp-tiles li{display:grid;gap:2px;padding:9px 12px 10px;border:1px solid var(--soft);border-left:3px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.clp-tiles li.is-ok{border-left-color:var(--ink)}
.clp-tiles li.is-bad{border-left-color:var(--accent)}
.clp-tiles b{font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.25;font-variant-numeric:tabular-nums;color:var(--ink)}
.clp-tiles li.is-bad b{color:var(--accent)}
.clp-tiles small{font-family:var(--sans);font-size:12px;line-height:1.45;color:var(--muted)}
.clp-zbox{display:flex;flex-direction:column;min-width:0}
.clp-zplot{flex:1 1 auto;min-height:168px}
.clp-zsvg{display:block;width:100%;font-family:var(--sans)}
.clp-zsvg text{font-size:10.5px;fill:var(--muted)}
.clp-zsvg .gl{stroke:var(--soft);stroke-width:1}
.clp-zsvg .wm{stroke:var(--line);stroke-width:1;stroke-dasharray:2 3}
.clp-zsvg .bad{fill:var(--accent-wash)}
.clp-zsvg .two{stroke:var(--accent);stroke-width:1.4}
.clp-zsvg .qm{fill:none;stroke:var(--ink);stroke-width:2.2;stroke-linejoin:round}
.clp-zsvg .q2{fill:none;stroke:var(--muted);stroke-width:1.6;stroke-dasharray:5 4}
.clp-zkeys{display:flex;flex-wrap:wrap;gap:4px 14px;margin:6px 0 0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.clp-zkeys span::before{content:"";display:inline-block;width:16px;height:0;margin-right:5px;vertical-align:middle;border-top:2px solid var(--ink)}
.clp-zkeys .k-q2::before{border-top:2px dashed var(--muted)}
.clp-zkeys .k-two::before{border-top-color:var(--accent);border-top-width:1.5px}
.clp-zkeys .k-bad::before{height:10px;border:0;background:var(--accent-wash);outline:1px solid var(--soft)}
.clp-zrule{margin:12px 0 0;font-family:var(--sans);font-size:13px;line-height:1.6;color:var(--ink)}

/* 타입 스케일 */
.clp-scale{padding:14px 18px 18px;min-width:0}
.clp-sform{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.clp-steps{list-style:none;margin:14px 0 0;padding:0}
.clp-steps li{display:grid;grid-template-columns:96px 124px 52px 20px minmax(0,1fr);align-items:center;gap:10px;padding:6px 0;border-top:1px solid var(--soft);min-width:0}
.clp-steps li.is-base{background:var(--wash)}
.clp-steps code{font-family:var(--mono);font-size:12.5px;font-weight:700;color:var(--ink)}
.clp-steps .r,.clp-steps .cv{font-family:var(--sans);font-size:12.5px;font-variant-numeric:tabular-nums;color:var(--muted);white-space:nowrap}
.clp-steps .cv{text-align:right;color:var(--ink);font-weight:700}
.clp-steps .zm{font-family:var(--sans);font-size:12px;font-weight:800;text-align:center}
.clp-steps .zm.is-ok{color:var(--muted)}
.clp-steps .zm.is-bad{color:var(--accent)}
.clp-steps .sp{min-width:0;font-family:var(--sans);font-weight:800;line-height:1.15;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:font-size .2s var(--ease,ease)}
.clp.is-drag .clp-steps .sp{transition:none}
.clp-scode{margin:12px 0 0;padding:12px 14px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--mono);font-size:12.5px;line-height:1.65;color:var(--ink);white-space:pre;overflow-x:auto}

/* 입력 오류: 결과·그림을 흐리게(자리는 그대로) */
.clp.is-stale .clp-code,.clp.is-stale .clp-sum,.clp.is-stale .clp-chart,.clp.is-stale .clp-view,.clp.is-stale .clp-zoom,.clp.is-stale .clp-steps,.clp.is-stale .clp-scode,.clp.is-stale .clp-rows,.clp.is-stale .clp-formula{opacity:.42}

/* 좁은 작업면: 한 열 */
@container clpwork (max-width:639px){
  .clp-grid{grid-template-columns:minmax(0,1fr)}
  .clp-view{border-left:0;border-top:1px solid var(--soft)}
  .clp-spec{flex:none;height:220px}
  .clp-zgrid{grid-template-columns:minmax(0,1fr)}
  .clp-sform{grid-template-columns:repeat(2,minmax(0,1fr))}
  .clp-steps li{grid-template-columns:auto minmax(0,1fr) auto 18px;gap:2px 10px}
  .clp-steps .sp{grid-column:1 / -1}
  .clp-code{font-size:14.5px}
}
@container clpwork (max-width:420px){
  .clp-pre,.clp-out,.clp-chart,.clp-in,.clp-view,.clp-zoom,.clp-scale{padding-left:14px;padding-right:14px}
  .clp-play span:last-child{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .clp-play{width:32px;justify-content:center;padding:0}
}
@media (prefers-reduced-motion: reduce){ .clp-dev s,.clp-steps .sp,.clp-svg .knot .kd{transition:none} }