/* 텍스트 정리기 — '정리 교정지': 예시 → 요약 띠(줄어든 글자 수·원문 → 결과·구성 막대) → 원문 | 교정지(바뀐 곳 · 결과 글)
   → 정리 항목판(빈칸 · 보이지 않는 글자 · 줄 세 묶음 × 세 칸). 막대, 항목 칸 왼쪽 띠, 교정지 표시가 같은 다섯 색
   (빈칸 · 보이지 않는 글자 · 줄 잇기 · 빈 줄 · 중복 줄, 라이트·다크 따로)을 쓴다. 강조색(accent)은 줄어든 글자 수 한 곳.
   컨테이너 tcl 기준 600 미만이면 두 칸과 세 묶음을 한 줄씩 쌓는다. */
.tcl-work{container:tcl / inline-size;font-family:var(--sans);
  --tcl-space:#245890;--tcl-inv:#76399c;--tcl-join:#156a73;--tcl-blank:#7a5006;--tcl-dup:#9a3226;--tcl-keep:var(--line);--tcl-warn:#8a5a08}
html[data-theme="dark"] .tcl-work{--tcl-space:#7fb0e6;--tcl-inv:#c49be6;--tcl-join:#6fcbd3;--tcl-blank:#e0b45e;--tcl-dup:#ec8a7e;--tcl-warn:#e0b45e}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .tcl-work{--tcl-space:#7fb0e6;--tcl-inv:#c49be6;--tcl-join:#6fcbd3;--tcl-blank:#e0b45e;--tcl-dup:#ec8a7e;--tcl-warn:#e0b45e}}
.tcl-work [data-b="keep"]{--bc:var(--tcl-keep)}
.tcl-work [data-b="space"],.tcl-work .b-space{--bc:var(--tcl-space)}
.tcl-work [data-b="inv"],.tcl-work .b-inv{--bc:var(--tcl-inv)}
.tcl-work [data-b="join"],.tcl-work .b-join{--bc:var(--tcl-join)}
.tcl-work [data-b="blank"],.tcl-work .b-blank{--bc:var(--tcl-blank)}
.tcl-work [data-b="dup"],.tcl-work .b-dup{--bc:var(--tcl-dup)}

/* 예시 줄 */
.tcl-head{padding:10px 18px;border-bottom:1px solid var(--soft)}
.tcl-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.tcl-ex .v2-label{margin-right:4px}
.tcl-ex button{height:30px;padding:0 11px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:600;color:var(--ink);white-space:nowrap;transition:background var(--ease),border-color var(--ease)}
.tcl-ex button:hover{background:var(--btn);border-color:var(--line)}
.tcl-ex button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--ink)}

/* 요약 띠 */
.tcl-sum{display:grid;grid-template-columns:minmax(170px,auto) minmax(0,1fr);gap:6px 26px;padding:13px 18px 10px;border-bottom:1px solid var(--soft)}
.tcl-big p,.tcl-barw p{margin:0}
.tcl-bn{display:flex;align-items:baseline;gap:3px;margin-top:2px!important;white-space:nowrap}
.tcl-bn b{font-size:34px;font-weight:800;line-height:1.1;letter-spacing:-.01em;color:var(--accent);font-variant-numeric:tabular-nums}
.tcl-bn small{font-size:14px;font-weight:700;color:var(--ink)}
.tcl-pct{margin-left:8px;font-size:13px;font-weight:700;color:var(--muted);font-variant-numeric:tabular-nums}
.tcl-flow{margin-top:3px!important;font-size:12px;line-height:1.45;color:var(--muted);font-variant-numeric:tabular-nums}
.tcl-barw{min-width:0;align-self:center}
.tcl-bh{margin-bottom:6px!important}
.tcl-bar{display:flex;height:18px;overflow:hidden;border-radius:var(--radius);background:var(--soft)}
.tcl-bar i{display:block;flex:0 0 auto;height:100%;background:var(--bc);transition:width .4s cubic-bezier(.2,.7,.2,1)}
.tcl-bar i + i{border-left:1px solid var(--card)}
.tcl-bar i[data-z="1"]{border-left:0}
.tcl-bar i[data-z="0"]:not([data-b="keep"]){min-width:4px}
.tcl-leg{display:flex;flex-wrap:wrap;gap:3px 14px;margin:8px 0 0;padding:0;list-style:none;font-size:12px;color:var(--ink)}
.tcl-leg li{display:inline-flex;align-items:center;gap:5px;white-space:nowrap}
.tcl-leg li[data-z="1"]{color:var(--muted)}
.tcl-leg li[data-z="1"] i{opacity:.4}
.tcl-leg i{width:9px;height:9px;border-radius:1px;background:var(--bc)}
.tcl-leg b{font-weight:700;font-variant-numeric:tabular-nums}
.tcl-st{grid-column:1/-1;min-height:18px;margin:2px 0 0}
.tcl-st .v2-status.is-warn{color:var(--tcl-warn)}
.tcl-go{margin-left:8px;padding:0;border:0;background:none;font:inherit;font-weight:700;color:var(--ink);text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* 원문 | 교정지 — 머리 줄·상자·꼬리 줄을 subgrid로 맞춤 */
.tcl-panes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));grid-template-rows:auto auto auto;border-bottom:1px solid var(--soft)}
.tcl-pane{display:grid;grid-row:span 3;grid-template-rows:subgrid;min-width:0;padding:12px 18px 10px}
.tcl-pane + .tcl-pane{border-left:1px solid var(--soft)}
.tcl-ph{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;min-height:32px;margin:0 0 8px}
.tcl-pb{display:flex;gap:6px;margin-left:auto}
.tcl-pb .v2-btn .i{margin:0}
.tcl-box{position:relative;min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),box-shadow var(--ease)}
.tcl-box:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.tcl-box.is-drop{border-style:dashed;border-color:var(--accent);background:var(--accent-wash)}
.tcl-ta,.tcl-proof{display:block;width:100%;height:200px;margin:0;border:0;background:none;outline:0;resize:none;overflow:auto;overscroll-behavior:contain;font-family:var(--sans);font-size:14px;line-height:1.65;color:var(--ink);tab-size:4;white-space:pre-wrap;overflow-wrap:anywhere}
.tcl-ta[hidden],.tcl-proof[hidden]{display:none}
.tcl-ta{padding:9px 12px}
.tcl-ta::placeholder{color:var(--muted);opacity:.85}
.tcl-ta[readonly]{cursor:text}
.tcl-proof{padding:9px 12px 9px 0}
.tcl-proof:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.tcl-pf{display:flex;flex-wrap:wrap;align-items:center;gap:3px 12px;min-height:18px;margin:6px 0 0;font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 교정지 줄 */
.tcl-r{display:grid;grid-template-columns:36px minmax(0,1fr);gap:0 8px;align-items:baseline}
.tcl-no{font-family:var(--sans);font-size:11px;line-height:1;color:var(--muted);text-align:right;font-variant-numeric:tabular-nums;user-select:none;opacity:.8}
.tcl-c{min-width:0;white-space:pre-wrap;overflow-wrap:anywhere}
.tcl-r.is-dup .tcl-no{color:var(--tcl-dup);font-weight:700;opacity:1}
.tcl-r.is-blank .tcl-no{color:var(--tcl-blank);opacity:1}
.tcl-empty,.tcl-capn{margin:0;padding:2px 0 2px 12px;font-size:12.5px;color:var(--muted)}
.tcl-capn{padding-left:44px;font-style:italic}
.tcl-work .m{text-decoration:none;color:inherit}
.tcl-work .m-sp{padding:0 1px;border-radius:2px;background:color-mix(in srgb,var(--bc) 15%,transparent);font-weight:800;letter-spacing:1px;color:var(--bc)}
.tcl-work .m-sp small{margin-left:1px;font-size:10px;font-weight:800;letter-spacing:0}
.tcl-work .m-pill{display:inline-block;margin:0 1px;padding:0 3px;border:1px solid color-mix(in srgb,var(--bc) 65%,transparent);border-radius:3px;background:color-mix(in srgb,var(--bc) 12%,transparent);font-family:var(--sans);font-size:10px;font-weight:800;line-height:1.4;letter-spacing:.02em;color:var(--bc);vertical-align:1px;white-space:nowrap}
.tcl-work del.m-pill{border-style:dashed}
.tcl-work .m-nfc{background:color-mix(in srgb,var(--bc) 12%,transparent);text-decoration:underline dotted var(--bc);text-decoration-thickness:2px;text-underline-offset:4px}
.tcl-work del.b-dup{color:var(--muted);background:color-mix(in srgb,var(--bc) 8%,transparent);text-decoration:line-through;text-decoration-color:var(--bc);text-decoration-thickness:1.5px}
.tcl-work .m-bl{font-size:11px;font-style:italic;color:var(--bc)}
.tcl-work .m-tab{background:linear-gradient(var(--line),var(--line)) 1px 60%/calc(100% - 4px) 1px no-repeat}
.tcl-proof[data-hl] .m{opacity:.22;transition:opacity var(--ease)}
.tcl-proof[data-hl="space"] .b-space,.tcl-proof[data-hl="inv"] .b-inv,.tcl-proof[data-hl="join"] .b-join,.tcl-proof[data-hl="blank"] .b-blank,.tcl-proof[data-hl="dup"] .b-dup{opacity:1;outline:1.5px solid var(--bc);outline-offset:1px}
.tcl-proof[data-fl="space"] .b-space,.tcl-proof[data-fl="inv"] .b-inv,.tcl-proof[data-fl="join"] .b-join,.tcl-proof[data-fl="blank"] .b-blank,.tcl-proof[data-fl="dup"] .b-dup{animation:tclFl .9s ease-out}
@keyframes tclFl{0%{box-shadow:0 0 0 4px color-mix(in srgb,var(--bc) 45%,transparent)}100%{box-shadow:0 0 0 0 transparent}}
.tcl-key{display:inline-flex;flex-wrap:wrap;align-items:center;gap:2px 10px;margin-left:auto}
.tcl-key > span{display:inline-flex;align-items:center;gap:4px;white-space:nowrap}

/* 정리 항목판 */
.tcl-rcp{padding:12px 18px 16px}
.tcl-rh{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin:0 0 10px}
.tcl-pre{margin-right:auto}
.tcl-eol{display:inline-flex;align-items:center;gap:6px}
.tcl-eoll{font-size:11.5px;font-weight:600;color:var(--muted);white-space:nowrap}
.tcl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto repeat(3,auto);gap:6px 10px}
.tcl-g{display:grid;grid-row:span 4;grid-template-rows:subgrid;min-width:0}
.tcl-gh{margin:0;font-size:11.5px;font-weight:700;letter-spacing:.02em;color:var(--muted)}
.tcl-t{display:flex;flex-direction:column;justify-content:space-between;gap:6px;min-width:0;padding:8px 10px 8px 9px;border:1px solid var(--soft);border-left:3px solid var(--bc);border-radius:var(--radius);background:var(--paper);transition:background var(--ease),border-color var(--ease)}
.tcl-t:not(.is-on){border-left-color:var(--soft);background:transparent}
.tcl-t:hover,.tcl-t:focus-within{border-color:var(--line);border-left-color:var(--bc)}
.tcl-t1{display:flex;align-items:center;justify-content:space-between;gap:8px;min-height:22px;margin:0}
.tcl-t1 .v2-switch{min-width:0}
.tcl-t1 .v2-switch span{min-width:0;overflow-wrap:anywhere}
.tcl-n{flex:0 0 auto;font-size:12px;font-weight:800;color:var(--bc);font-variant-numeric:tabular-nums;white-space:nowrap}
.tcl-t:not(.is-on) .tcl-n{font-weight:600;color:var(--muted)}
.tcl-t.is-on:not(.has-n) .tcl-n{font-weight:600;color:var(--muted)}
.tcl-t2{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 8px;min-height:26px;margin:0}
.tcl-eg{min-width:0;font-size:11.5px;color:var(--muted);white-space:nowrap}
.tcl-t .v2-seg{flex-wrap:nowrap;gap:3px;margin-left:auto}
.tcl-t .v2-seg button{height:26px;padding:0 8px;font-size:12px;white-space:nowrap}
.tcl-t:not(.is-on) .v2-seg button{opacity:.75}
.tcl-ic{min-width:30px;font-family:var(--sans)}

@media (prefers-reduced-motion:reduce){
  .tcl-bar i{transition:none}
  .tcl-proof[data-fl] .m{animation:none}
  .tcl-proof[data-hl] .m{transition:none}
}
@container tcl (max-width:759px){
  .tcl-t:has(.v2-seg) .tcl-eg{display:none}
}
@container tcl (max-width:599px){
  .tcl-sum{grid-template-columns:minmax(0,1fr)}
  .tcl-panes{grid-template-columns:minmax(0,1fr);grid-template-rows:none}
  .tcl-pane{grid-row:auto;grid-template-rows:none}
  .tcl-pane + .tcl-pane{border-left:0;border-top:1px solid var(--soft)}
  .tcl-grid{grid-template-columns:minmax(0,1fr);grid-template-rows:none;gap:12px}
  .tcl-g{grid-row:auto;grid-template-rows:none;gap:6px}
  .tcl-key{margin-left:0}
  .tcl-t .tcl-eg{display:none}
  .tcl-t:not(:has(.v2-seg)) .tcl-t2{display:none}
  .tcl-t{gap:4px;padding-top:7px;padding-bottom:7px}
}
@container tcl (max-width:420px){
  .tcl-head,.tcl-sum,.tcl-pane,.tcl-rcp{padding-left:12px;padding-right:12px}
  .tcl-bn b{font-size:30px}
  .tcl-r{grid-template-columns:28px minmax(0,1fr);gap:0 6px}
  .tcl-capn{padding-left:34px}
}