/* JSON 정리·압축기 전용 CSS (2026-10-22). 작업면: 예시 → 결과 모양 견본 카드 5장 → 옵션 → [입력 칸 | 결과 칸(오류면 오류 진단)] → 값 수·주의 칩. 공용 부품은 assets/v2.css */
.jfm{container:jfm / inline-size;--jfm-lh:20px;
  --jfm-ck:color-mix(in oklab, #2f6fb0 64%, var(--ink));--jfm-cs:color-mix(in oklab, #178a6a 66%, var(--ink));
  --jfm-cn:color-mix(in oklab, #a0680f 62%, var(--ink));--jfm-cl:color-mix(in oklab, #8a4fc0 62%, var(--ink));--jfm-cw:color-mix(in oklab, #b08a12 80%, var(--ink))}
.jfm [hidden]{display:none!important}

/* 예시 */
.jfm-exrow{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.jfm-ex button{font-weight:600}
.jfm-ex button[aria-pressed="true"]{background:var(--btn);border-color:var(--line);color:var(--ink)}

/* 결과 모양 견본: 카드마다 결과 첫 16줄의 모양, 크기, 줄 수, gzip, 아래 막대 = 다섯 모양 가운데 가장 큰 것 대비 크기 */
.jfm-sws{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.jfm-sw{position:relative;display:grid;grid-template-rows:auto 44px auto;gap:6px;min-width:0;margin:0;padding:10px 10px 12px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);color:var(--ink);text-align:left;cursor:pointer;overflow:hidden;transition:border-color var(--ease),box-shadow var(--ease)}
.jfm-sw:hover{border-color:var(--line)}
.jfm-sw[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.jfm-sw:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.jfm-swh,.jfm-swf{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:0 6px;min-width:0}
.jfm-swh b{font:750 13.5px/1.3 var(--sans);white-space:nowrap}
.jfm-swb{font:700 12.5px/1.3 var(--sans);font-variant-numeric:tabular-nums;white-space:nowrap}
.jfm-swf{font:11.5px/1.35 var(--sans);color:var(--muted);font-variant-numeric:tabular-nums}
.jfm-swf span{white-space:nowrap}
.jfm-swi{display:block;width:100%;height:44px;border-radius:2px;background:color-mix(in srgb, var(--wash) 70%, var(--paper))}
.jfm-swi rect{fill:color-mix(in srgb, var(--muted) 45%, var(--paper))}
.jfm-swi rect.k{fill:var(--jfm-ck)}.jfm-swi rect.s{fill:var(--jfm-cs)}.jfm-swi rect.n{fill:var(--jfm-cn)}.jfm-swi rect.l{fill:var(--jfm-cl)}
.jfm-swbar{position:absolute;left:0;right:0;bottom:0;height:3px}
.jfm-swbar i{display:block;width:0;height:100%;background:color-mix(in srgb, var(--ink) 32%, transparent)}
.jfm-sw[aria-checked="true"] .jfm-swbar i{background:var(--accent)}
.jfm.is-ready .jfm-swbar i{transition:width .42s cubic-bezier(.22,1,.36,1)}
.jfm[data-state="err"] .jfm-sw,.jfm[data-state="empty"] .jfm-sw{grid-template-rows:auto;padding-bottom:10px}
.jfm[data-state="err"] .jfm-swi,.jfm[data-state="err"] .jfm-swf,.jfm[data-state="err"] .jfm-swb,.jfm[data-state="empty"] .jfm-swi,.jfm[data-state="empty"] .jfm-swf,.jfm[data-state="empty"] .jfm-swb{display:none}

/* 옵션 */
.jfm-opts{display:flex;flex-wrap:wrap;align-items:flex-end;gap:10px 24px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.jfm-o{display:grid;gap:5px;justify-items:start;min-width:0}
.jfm-o .v2-seg{flex-wrap:nowrap}
.jfm-o .v2-seg.is-off{opacity:.5}
.jfm-o .v2-seg button:disabled{cursor:not-allowed}

/* 입력 | 결과 */
.jfm-panes{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);border-bottom:1px solid var(--soft)}
.jfm-pane{display:flex;flex-direction:column;min-width:0;padding:14px 18px}
.jfm-pane--in{border-right:1px solid var(--soft)}
.jfm-ph{display:flex;align-items:baseline;justify-content:space-between;gap:8px;min-height:20px;margin-bottom:8px}
.jfm-ph label,.jfm-ph > span{font:700 13px var(--sans);color:var(--ink)}
.jfm-ph small{font:12px var(--sans);color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
.jfm-ed{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);height:420px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overflow:hidden}
.jfm-ed--in{grid-template-columns:minmax(0,1fr)}
.jfm-ed:focus-within{border-color:var(--ink)}
.jfm-meas{position:absolute!important;left:0;top:0;visibility:hidden;height:0!important;overflow:hidden!important;pointer-events:none}
.jfm-g{margin:0;padding:10px 8px 60px 10px;min-width:2ch;text-align:right;font:12.5px/var(--jfm-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}
.jfm 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(--jfm-lh) var(--mono);white-space:pre-wrap;overflow-wrap:anywhere;overflow-x:hidden;overflow-y:auto;outline:0;tab-size:4;box-shadow:none}
.jfm textarea::placeholder{color:var(--muted);opacity:.8}
.jfm-code{position:relative;min-width:0;height:100%;overflow:auto;outline:0}
.jfm-code:focus-visible{box-shadow:inset 0 0 0 2px var(--accent)}
.jfm-code pre{box-sizing:border-box;width:max-content;min-width:100%;margin:0;padding:10px 12px;font:12.5px/var(--jfm-lh) var(--mono);color:var(--ink);white-space:pre;tab-size:4}
.jfm[data-style="min"] .jfm-code pre{width:auto;white-space:pre-wrap;word-break:break-all}
.jfm[data-style="min"] .jfm-g,.jfm[data-state="err"] .jfm-g{display:none}
.jfm[data-style="min"] .jfm-ed--out,.jfm[data-state="err"] .jfm-ed--out{grid-template-columns:minmax(0,1fr)}
.jfm-code .k{color:var(--jfm-ck);font-weight:650}
.jfm-code .s{color:var(--jfm-cs)}
.jfm-code .n{color:var(--jfm-cn)}
.jfm-code .l{color:var(--jfm-cl);font-weight:650}
.jfm-code .p{color:var(--muted)}
.jfm-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)}
.jfm-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)}
.jfm-drop span{display:inline-flex;align-items:center;gap:6px}
.jfm-drop svg{width:16px;height:16px}
.jfm-pf{display:flex;flex-wrap:wrap;align-items:center;gap:8px;min-height:32px;margin-top:10px}
.jfm-pf svg,.jfm-pf .i{width:14px;height:14px}
.jfm-priv{flex:1 1 150px;min-width:0;font:12px/1.4 var(--sans);color:var(--muted);text-align:right}
.jfm-status{flex:1 1 160px;min-width:0;margin:0 0 0 4px}

/* 오류 진단(결과 칸 자리) */
.jfm-err{min-width:0;height:100%;padding:12px 14px;overflow:auto;font-family:var(--sans)}
.jfm-ep{margin:0 0 2px;font:700 12px/1.4 var(--sans);color:var(--accent);font-variant-numeric:tabular-nums}
.jfm-eh{margin:0 0 10px;font:700 14px/1.45 var(--sans);color:var(--ink)}
.jfm-sn{display:block;margin:0 0 10px;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:color-mix(in srgb, var(--wash) 65%, var(--paper));font:12.5px/1.5 var(--mono);color:var(--ink);white-space:pre;overflow-x:auto;tab-size:2}
.jfm-sn mark{padding:0 1px;border-radius:1px;background:color-mix(in srgb, var(--accent) 20%, transparent);color:var(--ink);box-shadow:0 0 0 1px var(--accent)}
.jfm-es{margin:0 0 8px;font:13px/1.55 var(--sans);color:var(--ink)}
.jfm-cl{font:700 13px var(--mono)}
.jfm-fixh{margin-top:12px;padding-top:10px;border-top:1px solid var(--soft)}
.jfm-fk{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px;padding:0;list-style:none}
.jfm-fk li{padding:3px 8px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font:600 12px/1.45 var(--sans);color:var(--ink)}
.jfm-fk b{font-variant-numeric:tabular-nums}
.jfm-ea{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px}
.jfm-jiv{font:600 12.5px var(--sans);color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* 값 수 · 주의 칩 */
.jfm-notes{display:grid;gap:8px;padding:12px 18px 14px}
.jfm-stats{margin:0;font:600 12.5px/1.5 var(--sans);color:var(--ink);font-variant-numeric:tabular-nums}
.jfm-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none}
.jfm-chips li{display:flex;flex-wrap:wrap;align-items:center;gap:4px 8px;max-width:100%;min-width:0;padding:6px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font:12.5px/1.45 var(--sans);color:var(--ink)}
.jfm-chips li span{min-width:0;overflow-wrap:anywhere}
.jfm-chips li.is-warn{border-color:color-mix(in srgb, var(--jfm-cw) 40%, var(--soft))}
.jfm-cb{min-height:26px;padding:0 9px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font:650 12px var(--sans);color:var(--ink);white-space:nowrap;cursor:pointer}
.jfm-cb:hover{background:var(--btn-hover)}
.is-warn .jfm-cb{color:var(--jfm-cw)}

@media (prefers-reduced-motion: reduce){ .jfm.is-ready .jfm-swbar i{transition:none} }

/* 좁은 작업면: 견본 3 + 2, 칸 위아래 */
@container jfm (max-width: 759px){
  .jfm-panes{grid-template-columns:minmax(0,1fr)}
  .jfm-pane--in{border-right:0;border-bottom:1px solid var(--soft)}
}
@container jfm (max-width: 619px){
  .jfm-sws{grid-template-columns:repeat(6,minmax(0,1fr))}
  .jfm-sw{grid-column:span 2}
  .jfm-sw:nth-child(n+4){grid-column:span 3}
}
@container jfm (max-width: 520px){
  .jfm-exrow,.jfm-sws,.jfm-opts,.jfm-pane,.jfm-notes{padding-left:14px;padding-right:14px}
  .jfm-sws{gap:8px}
  .jfm-sw{grid-template-rows:auto 34px auto;padding:8px 8px 10px}
  .jfm-swi{height:34px}
  .jfm-opts{display:grid;grid-template-columns:auto minmax(0,1fr);gap:8px 12px;align-items:center}
  .jfm-o{display:contents}
  .jfm-o .v2-label{margin:0;max-width:7.5em}
  .jfm-o .v2-seg{flex-wrap:wrap}
  .jfm-o .v2-seg button{white-space:nowrap}
  .jfm-priv{flex-basis:100%;text-align:left}
}