/* CSV ↔ JSON 변환기 전용 CSS (2026-10-20). 방향 세그먼트 · [입력 칸 | ⇄ | 결과 칸](칸마다 머리 · 옵션 줄 · 글 · 버튼 줄, 두 칸 높이 같음) · 상태 줄
   · 표로 보기(열 머리에 값 종류 막대, 행 번호 버튼, 머리·행 번호 고정) + 행 풀이(움직임: 행을 고르면 줄이 차례로 들어옴, 데이터를 바꾸면 막대가 그려짐 — reduced-motion 정지).
   행 풀이는 표 아래 전체 폭 칸 격자(표와 높이가 달라 옆에 두면 빈 공간이 생김). 작업면 720px 미만(1181~1366px 화면·태블릿·휴대폰)은 두 칸을 위아래로. 공용 부품은 assets/v2.css */
.cj-work{container:cj / inline-size}
.cj-vh{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cj-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 16px;padding:12px 16px;border-bottom:1px solid var(--soft)}
.cj-mode button{height:34px;padding:0 14px;font-size:13.5px;font-weight:700}
.cj-privacy{margin:0;font-family:var(--sans);font-size:12px;line-height:1.5;color:var(--muted)}

/* ---------- 두 칸 ---------- */
.cj-panes{display:grid;grid-template-columns:minmax(0,1fr) 40px minmax(0,1fr);padding:14px 16px 0}
.cj-pane{display:flex;flex-direction:column;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.cj-ph{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:9px 12px 8px;border-bottom:1px solid var(--soft)}
.cj-ph label{flex:0 0 auto;font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--ink)}
.cj-ph .cj-meta{min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis} /* 두 칸 머리 높이를 같게(옆 칸 옵션 줄 위치가 어긋나지 않게) */
.cj-meta{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.cj-optw{padding:10px 12px 11px;border-bottom:1px solid var(--soft);background:var(--card)}
.cj-opts{display:grid;gap:10px}
#cjOptsIn{grid-template-columns:minmax(0,1fr) minmax(0,1.25fr)}
#cjOptsOut{grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.cj-work[data-mode="j2c"] #cjOptsIn{grid-template-columns:minmax(0,1fr)}
.cj-work[data-mode="j2c"] #cjOptsOut{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr)}
.cj-bomf > .v2-label{display:block}
.cj-bomf .v2-switch{display:flex;height:var(--v2-ctl,42px);white-space:nowrap}
.cj-work[data-mode="c2j"] [data-for="j2c"],.cj-work[data-mode="j2c"] [data-for="c2j"]{display:none}
.cj-work[data-mode="j2c"] .cj-pane--in .cj-optw:has(#cjTargetF[hidden]){display:none}
.cj-ctl{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;box-sizing:border-box;min-width:0;text-overflow:ellipsis}
.cj-ctl:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cj-ta{position:relative;flex:1 1 auto;min-height:clamp(180px,max(var(--cj-hi,440px),var(--cj-ho,440px)),clamp(240px,40vh,440px))} /* 나란히: 두 칸 중 긴 내용에 맞춤(--cj-hi·--cj-ho 는 tool.js fit) */
.cj-text{position:absolute;inset:0;display:block;box-sizing:border-box;width:100%;height:100%;margin:0;padding:12px 14px;border:0;background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre;overflow:auto;resize:none;tab-size:4}
.cj-text::placeholder{font-family:var(--sans);color:var(--muted);opacity:.85;white-space:pre-wrap}
.cj-text:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.cj-text[aria-invalid="true"]{box-shadow:inset 3px 0 0 var(--accent)}
.cj-drop{position:absolute;inset:8px;display:flex;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 82%,var(--accent));pointer-events:none;z-index:2}
.cj-drop[hidden]{display:none}
.cj-drop span{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-size:14.5px;font-weight:800;color:var(--ink)}
.cj-drop svg{width:20px;height:20px;color:var(--accent)}
.cj-pf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;border-top:1px solid var(--soft)}
.cj-pf .v2-btn{flex:0 1 auto;white-space:nowrap}
.cj-pf svg{width:15px;height:15px}
.cj-fn{display:inline-block;max-width:18ch;overflow:hidden;text-overflow:ellipsis;vertical-align:bottom;font-weight:inherit}
.cj-pf .v2-btn:disabled,.cj-swap:disabled{opacity:.45;cursor:default}
.cj-mid{display:flex;align-items:center;justify-content:center}
.cj-swap{position:relative;display:grid;place-items:center;width:34px;height:34px;padding:0;border:0;border-radius:50%;background:none;color:var(--ink);cursor:pointer;transition:background var(--ease),transform .3s cubic-bezier(.22,1,.36,1)}
.cj-swap:hover:not(:disabled){background:var(--btn)}
.cj-swap:active:not(:disabled){transform:rotate(180deg)}
.cj-swap:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cj-swap svg{width:20px;height:20px}
.cj-swapt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* 오류 카드: 결과 글 자리를 덮는다(높이 그대로) */
.cj-err{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;align-items:flex-start;gap:10px;padding:14px 16px;overflow:auto;background:var(--paper);box-shadow:inset 3px 0 0 var(--accent)}
.cj-err[hidden]{display:none}
.cj-err b{font-family:var(--sans);font-size:14px;line-height:1.6;font-weight:700;color:var(--ink)}
.cj-errline{display:block;align-self:stretch;padding:8px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash);font-family:var(--mono);font-size:12.5px;line-height:1.6;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cj-errline[hidden]{display:none}
.cj-errline mark{padding:0 2px;border-radius:2px;background:var(--accent);color:var(--paper)}
.cj-errbtns{display:flex;flex-wrap:wrap;gap:6px}
.cj-errbtns [hidden]{display:none}
.cj-status{margin:10px 16px 0;text-align:left}
.cj-status:empty{display:none}

/* ---------- 표로 보기 + 행 풀이 ---------- */
.cj-view{margin-top:14px;padding:12px 16px 16px;border-top:1px solid var(--soft)}
.cj-vhd{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 12px;margin-bottom:8px}
.cj-vt{font-family:var(--sans);font-size:13.5px;font-weight:800;color:var(--ink)}
.cj-legend{list-style:none;display:flex;flex-wrap:wrap;gap:4px 12px;margin:0 0 0 auto;padding:0;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
.cj-legend li{white-space:nowrap}
.cj-legend li::before{content:"";display:inline-block;width:10px;height:10px;margin-right:5px;border-radius:2px;vertical-align:-1px;background:var(--c)}
.t-n{--c:var(--fill)}
.t-s{--c:var(--muted)}
.t-b{--c:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px)}
.t-e{--c:transparent}
.cj-legend .t-e::before,.cj-rv.t-e::before{box-shadow:inset 0 0 0 1px var(--line)}
.cj-vb{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.cj-grid{max-height:340px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper)}
.cj-grid:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.cj-empty{margin:0;padding:22px 14px;font-family:var(--sans);font-size:13px;color:var(--muted);text-align:center}
.cj-tbl{width:max-content;min-width:100%;border-collapse:separate;border-spacing:0;font-family:var(--sans);font-size:13px;color:var(--ink)}
.cj-tbl th,.cj-tbl td{max-width:240px;padding:6px 10px;border-bottom:1px solid var(--soft);text-align:left;vertical-align:top;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cj-tbl thead th{position:sticky;top:0;z-index:2;padding-top:8px;background:var(--wash);border-bottom-color:var(--line);min-width:56px}
.cj-tbl thead .cj-rn{z-index:3;min-width:0}
.cj-tbl tbody tr:last-child > *{border-bottom:0}
.cj-hn{display:block;font-weight:800;overflow:hidden;text-overflow:ellipsis}
.cj-bar{display:flex;height:5px;margin-top:6px;border-radius:2px;overflow:hidden;background:var(--paper);box-shadow:inset 0 0 0 1px var(--line)}
.cj-bar i{display:block;flex:0 0 auto;width:var(--w);height:100%;background:var(--c)}
.cj-grid.is-draw .cj-bar i{animation:cj-grow .55s cubic-bezier(.22,1,.36,1) both}
@keyframes cj-grow{from{width:0}}
.cj-rn{position:sticky;left:0;z-index:1;width:1%;padding:4px 6px !important;background:var(--wash)}
.cj-rb{min-width:30px;height:24px;padding:0 6px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums;cursor:pointer}
.cj-rb:hover{color:var(--ink);border-color:var(--line)}
.cj-rb:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.cj-rb[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.cj-tbl tr.is-sel td{background:var(--accent-wash)}
.cj-tbl td.t-n{text-align:right;font-variant-numeric:tabular-nums}
.cj-tbl td.t-b{color:var(--muted);font-style:italic}
.cj-nl{margin:0 2px;color:var(--muted);font-size:11px}
.cj-rec{padding:10px 12px 12px;border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);background:var(--paper)}
.cj-rect{display:block;margin-bottom:8px;font-family:var(--sans);font-size:13px;font-weight:800;color:var(--ink)}
.cj-recl{list-style:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,170px),1fr));gap:6px;margin:0;padding:0}
.cj-recl li{display:flex;flex-direction:column;gap:2px;min-width:0;padding:6px 9px 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);line-height:1.45}
.cj-recl .cj-rnone{grid-column:1 / -1;border:0;padding:2px 0;background:none;font-family:var(--sans);font-size:12.5px;color:var(--muted)}
.cj-rk{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--muted);overflow-wrap:anywhere}
.cj-rv{font-family:var(--mono);font-size:12.5px;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere;max-height:6em;overflow:hidden}
.cj-rv::before{content:"";display:inline-block;width:8px;height:8px;margin-right:6px;border-radius:2px;vertical-align:0;background:var(--c)}
.cj-recl.is-in li{animation:cj-in .38s cubic-bezier(.22,1,.36,1) both;animation-delay:calc(var(--i,0) * 22ms)}
@keyframes cj-in{from{opacity:0;transform:translateY(6px)}}
.cj-snip{display:block;max-height:7em;margin-top:8px;padding:7px 9px;overflow:auto;border:1px solid var(--soft);border-radius:var(--radius);background:var(--wash);font-family:var(--mono);font-size:12px;line-height:1.55;color:var(--ink);white-space:pre-wrap;overflow-wrap:anywhere}
.cj-snip[hidden]{display:none}

@container cj (max-width:719px){
  .cj-grid{max-height:300px}
  .cj-top{padding:10px 12px}
  .cj-panes{grid-template-columns:minmax(0,1fr);padding:12px 12px 0}
  .cj-pane--in .cj-ta{min-height:clamp(150px,var(--cj-hi,200px),320px)}
  .cj-pane--out .cj-ta{min-height:clamp(120px,var(--cj-ho,200px),360px)}
  .cj-mid{padding:6px 0}
  .cj-swap{display:inline-flex;gap:6px;width:auto;height:32px;padding:0 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--btn);font-family:var(--sans);font-size:12.5px;font-weight:650}
  .cj-swap:active:not(:disabled){transform:none}
  .cj-swap svg{width:16px;height:16px;transform:rotate(90deg)}
  .cj-swapt{position:static;width:auto;height:auto;overflow:visible;clip:auto}
  .cj-status{margin:10px 12px 0}
  .cj-view{padding:12px}
}
@container cj (max-width:380px){ .cj-pf{gap:4px} .cj-pf .v2-btn{padding:0 9px} }
@container v2in (max-width:300px){ .cj-opts{grid-template-columns:minmax(0,1fr) !important} }
@media (prefers-reduced-motion:reduce){ .cj-grid.is-draw .cj-bar i,.cj-recl.is-in li{animation:none} .cj-swap{transition:none} .cj-swap:active:not(:disabled){transform:none} }