/* CSS 정리·압축기 전용 CSS (2026-10-22). 작업대: [모드 | 옵션] → 예시 → [입력 칸 | 결과 칸] → 용량 지도(원본·결과 띠 + gzip) → [바꾼 것 | 찾은 것]. 공용 부품은 assets/v2.css */
.csf{container:csf / inline-size;--csf-h:420px;--csf-lh:20px}
.csf [hidden]{display:none!important}

/* 모드 + 옵션 */
.csf-top{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;padding:16px 18px;border-bottom:1px solid var(--soft)}
.csf-mode{flex-wrap:nowrap}
.csf-mode button{display:block;height:var(--v2-ctl);padding:0 16px;font-size:13.5px;line-height:calc(var(--v2-ctl) - 2px);white-space:nowrap;text-align:center}
.csf-mode button b{font-weight:750}
.csf-mode button small{margin-left:7px;font-size:11.5px;font-weight:500;opacity:.78}
.csf-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 18px}
.csf[data-mode="fmt"] .csf-opts[data-for="min"],.csf[data-mode="min"] .csf-opts[data-for="fmt"]{display:none}
.csf-o{display:grid;gap:5px;justify-items:start}
.csf-o .v2-switch{min-height:30px}
.csf-o .v2-seg{flex-wrap:nowrap}

/* 예시 */
.csf-exrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:10px 18px;border-bottom:1px solid var(--soft)}
.csf-ex button{font-weight:600}
.csf-ex button[aria-pressed="true"]{background:var(--btn);border-color:var(--line);color:var(--ink)}
.csf-priv{flex:1 1 150px;min-width:0;text-align:right;font:12px/1.4 var(--sans);color:var(--muted)}

/* 입력 | 결과 */
.csf-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.csf-pane{display:flex;flex-direction:column;min-width:0;padding:14px 18px 14px}
.csf-pane--in{border-right:1px solid var(--soft)}
.csf-ph{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:20px;margin-bottom:8px}
.csf-ph label,.csf-ph > span{font:700 13px var(--sans);color:var(--ink)}
.csf-ph small{font:12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.csf-ed{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);height:var(--csf-h);border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.csf-ed--in{grid-template-columns:minmax(0,1fr)}
.csf-ed:focus-within{border-color:var(--ink)}
.csf-meas{position:absolute!important;left:0;top:0;visibility:hidden;height:0!important;overflow:hidden!important;pointer-events:none}
.csf-g{margin:0;padding:10px 8px 60px 10px;min-width:2ch;text-align:right;font:12.5px/var(--csf-lh) var(--mono);color:var(--muted);background:color-mix(in srgb, var(--wash) 65%, var(--paper));border-right:1px solid var(--soft);overflow:hidden;user-select:none;white-space:pre;font-variant-numeric:tabular-nums}
.csf textarea{display:block;box-sizing:border-box;width:100%;height:100%;min-height:0;margin:0;padding:10px 12px;border:0;border-radius:0;resize:none;background:none;color:var(--ink);font:12.5px/var(--csf-lh) var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto;outline:0;tab-size:4;box-shadow:none}
.csf textarea::placeholder{color:var(--muted);opacity:.8}
.csf-code{position:relative;min-width:0;height:100%;overflow:auto;outline:0}
.csf-code:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.csf-code pre{margin:0;padding:10px 12px;font:12.5px/var(--csf-lh) var(--mono);color:var(--ink);white-space:pre;tab-size:4;width:max-content;min-width:100%;box-sizing:border-box}
.csf[data-mode="min"] .csf-code pre{white-space:pre-wrap;word-break:break-all;width:auto}
.csf[data-mode="min"] #csfGout{display:none}
.csf-empty{position:absolute;inset:0;display:grid;place-items:center;margin:0;padding:20px;text-align:center;font:13px/1.5 var(--sans);color:var(--muted)}
.csf-drop{position:absolute;inset:0;z-index:2;display:grid;place-items:center;background:color-mix(in srgb, var(--paper) 88%, transparent);border:2px dashed var(--ink);font:700 13px var(--sans);color:var(--ink)}
.csf-drop span{display:inline-flex;align-items:center;gap:6px}
.csf-drop svg{width:16px;height:16px}
.csf-pf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px;min-height:32px}
.csf-pf svg,.csf-pf .i{width:14px;height:14px}
.csf-status{flex:1 1 160px;min-width:0;margin:0 0 0 4px}

/* 색 입힌 코드(라이트·다크 모두 --ink·--paper와 섞어 대비 유지) */
.csf-code .sl{color:var(--ink);font-weight:700}
.csf-code .pr{color:color-mix(in oklab, #2f6fb0 64%, var(--ink))}
.csf-code .pc{color:color-mix(in oklab, #8a4fc0 62%, var(--ink))}
.csf-code .at{color:color-mix(in oklab, #8a4fc0 70%, var(--ink));font-weight:700}
.csf-code .st{color:color-mix(in oklab, #178a6a 66%, var(--ink))}
.csf-code .fn{color:color-mix(in oklab, #a0680f 62%, var(--ink))}
.csf-code .cm{color:var(--muted);font-style:italic}
.csf-code .pn{color:var(--muted)}
.csf-code .im{color:var(--accent);font-weight:700}
.csf-code .hx::before{content:"";display:inline-block;width:.78em;height:.78em;margin-right:.32em;vertical-align:-.06em;background:var(--c);box-shadow:0 0 0 1px color-mix(in srgb, var(--ink) 38%, transparent)}
.csf-r.is-sel{background:color-mix(in srgb, var(--accent) 13%, transparent);box-shadow:0 0 0 1px color-mix(in srgb, var(--accent) 35%, transparent);-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* 용량 지도 */
.csf-map{padding:14px 18px 16px;border-bottom:1px solid var(--soft)}
.csf-mh{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:10px}
.csf-mt,.csf-lt{font:700 13px var(--sans);color:var(--ink)}
#csfCap{font:12px/1.45 var(--sans);color:var(--muted)}
.csf-strips{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:8px 12px;border-radius:var(--radius);outline-offset:4px}
.csf-strips:focus-visible{outline:2px solid var(--accent)}
.csf-gzrow{display:contents}
.csf-rl{font:600 12px var(--sans);color:var(--muted);white-space:nowrap}
.csf-track{position:relative;height:24px;background:color-mix(in srgb, var(--soft) 45%, transparent)}
.csf-strip{display:flex;height:100%;overflow:hidden}
.csf-strip i{flex:0 0 0;min-width:0;height:100%;background:color-mix(in oklab, var(--h) 52%, var(--paper));cursor:pointer}
.csf-strip i + i:not(.is-zero){box-shadow:inset 1px 0 0 color-mix(in srgb, var(--paper) 70%, transparent)}
.csf-strip i:hover{background:color-mix(in oklab, var(--h) 70%, var(--paper))}
.csf-strip i.is-sel{background:color-mix(in oklab, var(--h) 78%, var(--ink));box-shadow:inset 0 0 0 2px var(--ink)}
.csf-rb{min-width:0;font:700 12.5px var(--sans);color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap;text-align:right}
.csf-rb em{margin-left:6px;font-style:normal;color:var(--accent)}
small.csf-rb{font-weight:600;font-size:12px;color:var(--muted)}
.csf-gzt{height:16px;background:none}
.csf-gzt i{position:absolute;left:0;height:6px;background:color-mix(in srgb, var(--ink) 30%, var(--paper))}
.csf-gzt i:first-child{top:1px}
.csf-gzt i:last-child{top:9px;background:color-mix(in srgb, var(--ink) 72%, var(--paper))}
.csf-legend{display:flex;flex-wrap:wrap;gap:6px 18px;margin:12px 0 0;padding:0;list-style:none}
.csf-legend li{display:flex;align-items:center;gap:6px;font:12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.csf-legend i{flex:0 0 auto;width:10px;height:10px;background:color-mix(in oklab, var(--h) 52%, var(--paper));box-shadow:0 0 0 1px color-mix(in oklab, var(--h) 70%, var(--ink))}
.csf-legend b{color:var(--ink);font-weight:650}
.k-rule{--h:#2f6fb0}.k-cond{--h:#8a4fc0}.k-kf{--h:#178a6a}.k-font{--h:#b08a12}.k-etc{--h:#a0522d}.k-com{--h:#8c8474}
.csf.is-ready .csf-strip,.csf.is-ready .csf-gzt i{transition:width .42s cubic-bezier(.22,1,.36,1)}
.csf.is-ready .csf-strip i{transition:flex-basis .42s cubic-bezier(.22,1,.36,1),background 120ms ease}

/* 바꾼 것 · 찾은 것: 한 열 안에서 격자로(두 칸 나란히면 한쪽이 비어서) */
.csf-log{display:grid;gap:16px;padding:14px 18px 16px}
.csf-lc{min-width:0}
.csf-lt{display:block;margin-bottom:6px}
.csf-did{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:28px;margin:0}
.csf-did li{padding:7px 0}
.csf-did li.sum{grid-column:1 / -1}
.csf-did li b{white-space:nowrap}
.csf-keep{margin:8px 0 0;font:12px/1.5 var(--sans);color:var(--muted)}
.csf-lc--find{padding-top:14px;border-top:1px solid var(--soft)}
.csf-stats{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:8px;margin:2px 0 12px;padding:0;list-style:none}
.csf-stats li{display:grid;align-content:start;gap:2px;min-width:0;padding:8px 10px;border:1px solid var(--soft);background:var(--paper)}
.csf-stats b{font:800 20px/1.15 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.csf-stats span{font:600 11.5px/1.3 var(--sans);color:var(--muted)}
.csf-stats small{font:11px/1.3 var(--mono);color:var(--muted);overflow-wrap:anywhere}
.csf-find{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.csf-find li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:start;gap:8px;font:12.5px/1.5 var(--sans);color:var(--ink)}
.csf-find li i{width:8px;height:8px;margin-top:6px;border-radius:50%;background:var(--line)}
.csf-find li.err i{background:var(--accent)}
.csf-find li.warn i{background:color-mix(in oklab, #b08a12 80%, var(--ink))}
.csf-find li.ok,.csf-find li.more{display:block;color:var(--muted)}
.csf-go{min-height:24px;padding:0 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font:600 11.5px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer}
.csf-go:hover{background:var(--btn)}
.csf.has-err .csf-lc--find .csf-lt{color:var(--accent)}

@media (prefers-reduced-motion: reduce){ .csf.is-ready .csf-strip,.csf.is-ready .csf-gzt i,.csf.is-ready .csf-strip i{transition:none} }

/* 좁은 작업면: 칸을 위아래로, 지도·기록 한 열 */
@container csf (max-width: 759px){
  .csf-mode{width:100%}
  .csf-mode button{flex:1 1 0}
  .csf-panes{grid-template-columns:minmax(0,1fr)}
  .csf-pane--in{border-right:0;border-bottom:1px solid var(--soft)}
  .csf-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@container csf (max-width: 520px){
  .csf-top,.csf-exrow,.csf-pane,.csf-map,.csf-log{padding-left:14px;padding-right:14px}
  .csf-mode button{padding:0 10px}
  .csf-mode button small{display:none}
  .csf-priv{flex-basis:100%;text-align:left}
  .csf-did{grid-template-columns:minmax(0,1fr)}
  .csf-strips{grid-template-columns:auto minmax(0,1fr)}
  .csf-rb{grid-column:2;margin-top:-4px;text-align:left}
}