/* 텍스트 비교기 — '차이 대조판'. 작업면 폭 컨테이너 txdw. 추가 = 초록, 삭제 = 붉은색(+ 줄 안 삭제는 취소선: 색만으로 구분하지 않는다), 수정 = 두 색 반반 */
.txd-work{container:txdw/inline-size;overflow:hidden;
  --txd-add:#2f7a3a;--txd-del:#b3261e;--txd-mono:ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace}
html[data-theme="dark"] .txd-work{--txd-add:#8cc977;--txd-del:#f08a7e}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .txd-work{--txd-add:#8cc977;--txd-del:#f08a7e}}
.txd-work [hidden]{display:none !important}
.txd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;user-select:none}

/* 예시 줄 */
.txd-top{display:flex;align-items:center;gap:10px 14px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.txd-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;flex:1 1 auto;min-width:0}
.txd-exl{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--muted);margin-right:2px}
.txd-exb{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:5px 10px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);text-align:left;transition:border-color var(--ease),background var(--ease)}
.txd-exb b{font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink)}
.txd-exb small{font-family:var(--sans);font-size:11px;color:var(--muted)}
.txd-exb:hover{background:var(--btn)}
.txd-exb[aria-pressed="true"]{border-color:var(--fill);box-shadow:inset 0 0 0 1px var(--fill)}
.txd-act{display:flex;gap:6px;flex:0 0 auto}
@container txdw (max-width:560px){
  .txd-top{padding:10px 14px;gap:8px;align-items:stretch}
  .txd-ex{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
  .txd-exl,.txd-act .v2-btn span{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .txd-exb{min-width:0;padding:6px 8px;justify-content:center}
  .txd-exb b{font-size:12px;line-height:1.3}
  .txd-exb small{display:none}
  .txd-act .v2-btn{height:auto;padding:0 10px}
}

/* A | ⇄ | B */
.txd-io{display:grid;grid-template-columns:minmax(0,1fr);position:relative;border-bottom:1px solid var(--soft)}
.txd-pane{display:flex;flex-direction:column;gap:8px;padding:12px 18px 14px;min-width:0}
.txd-pane.is-drop .txd-ta{border-color:var(--ink);border-style:dashed;background:var(--wash)}
.txd-ph{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;align-items:center;gap:8px;min-height:32px}
.txd-k{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;background:var(--ink);color:var(--paper);font-family:var(--mono);font-size:12px;font-weight:700}
.txd-pb .txd-k{background:var(--paper);color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.txd-pt{font-family:var(--sans);font-size:14px;font-weight:750;color:var(--ink);white-space:nowrap}
.txd-meta{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-family:var(--sans);font-size:11.5px;color:var(--muted);font-variant-numeric:tabular-nums}
.txd-open{height:30px;padding:0 10px}
.txd-ta{display:block;width:100%;height:176px;min-height:96px;resize:vertical;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:14px;line-height:1.6;tab-size:4}
.txd-ta:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.txd-ta::placeholder{color:var(--muted);opacity:.8}
.txd-swap{position:relative;z-index:1;display:grid;place-items:center;justify-self:center;width:34px;height:34px;margin:-17px 0;border:1px solid var(--line);border-radius:50%;background:var(--card);color:var(--ink);transition:background var(--ease),transform .2s ease}
.txd-swap svg{width:16px;height:16px;transform:rotate(90deg)}
.txd-swap:hover{background:var(--btn)}
.txd-swap:active{transform:scale(.94)}
@container txdw (min-width:600px){
  .txd-io{grid-template-columns:minmax(0,1fr) 0 minmax(0,1fr)}
  .txd-pb{border-left:1px solid var(--soft)}
  .txd-swap{align-self:center;margin:24px -17px 0}
  .txd-swap svg{transform:none}
}
@container txdw (max-width:599px){
  .txd-pane{padding:10px 14px 12px}
  .txd-pa{padding-bottom:20px}
  .txd-pb{padding-top:20px;border-top:1px solid var(--soft)}
  .txd-swap{grid-row:2}
  .txd-ta{height:132px}
}

/* 비교 기준 */
.txd-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;padding:10px 18px;border-bottom:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 55%,var(--card))}
.txd-ol{font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted)}
.txd-fh{margin-left:auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
@container txdw (max-width:599px){ .txd-opts{padding:9px 14px} .txd-fh{margin-left:0;flex-basis:100%} }

/* 요약: 유사도 고리 | 줄 수 + 구성 막대 + 글자 증감 */
.txd-sum{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:12px 20px;padding:14px 18px;border-bottom:1px solid var(--soft)}
.txd-ring{position:relative;width:96px;height:96px}
.txd-ring svg{width:100%;height:100%;transform:rotate(-90deg)}
.txd-ring circle{fill:none;stroke-width:9}
.txd-ring .bg{stroke:var(--soft)}
.txd-ring .fg{stroke:var(--accent);stroke-linecap:butt;transition:stroke-dasharray .5s cubic-bezier(.2,.7,.2,1)}
.txd-ring p{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;margin:0;text-align:center}
.txd-ring b{font-family:var(--sans);font-size:19px;font-weight:800;line-height:1.1;color:var(--ink);font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.txd-ring small{font-family:var(--sans);font-size:11px;color:var(--muted)}
.txd-sx{display:flex;flex-direction:column;gap:9px;min-width:0}
.txd-cnt{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;margin:0;padding:0;list-style:none}
.txd-cnt li{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;column-gap:7px;align-items:center;min-width:0;padding:7px 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper)}
.txd-cnt .g{grid-row:span 2;display:grid;place-items:center;width:20px;height:20px;border-radius:50%;font-family:var(--mono);font-size:13px;font-weight:700;color:var(--paper)}
.txd-cnt b{font-family:var(--sans);font-size:18px;font-weight:800;line-height:1.15;color:var(--ink);font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis}
.txd-cnt small{font-family:var(--sans);font-size:11.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txd-cnt .is-add .g{background:var(--txd-add)}
.txd-cnt .is-del .g{background:var(--txd-del)}
.txd-cnt .is-mod .g{background:linear-gradient(90deg,var(--txd-del) 50%,var(--txd-add) 50%)}
.txd-cnt .is-eq .g{background:var(--soft);color:var(--muted)}
.txd-bar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--soft)}
.txd-bar i{flex:0 0 0;min-width:0;transition:flex-grow .45s cubic-bezier(.2,.7,.2,1)}
.txd-bar i+i{box-shadow:inset 1px 0 var(--card)}
.txd-bar .eq{background:color-mix(in srgb,var(--ink) 16%,var(--soft))}
.txd-bar .mod{background:repeating-linear-gradient(135deg,var(--txd-del) 0 4px,var(--txd-add) 4px 8px)}
.txd-bar .del{background:var(--txd-del)}
.txd-bar .add{background:var(--txd-add)}
.txd-chg{margin:0;font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.txd-chg:empty{display:none}
.txd-work[data-state="empty"] .txd-sum,.txd-work[data-state="error"] .txd-sum{opacity:.55}
@container txdw (max-width:520px){
  .txd-sum{gap:10px 12px;padding:12px 14px;align-items:start}
  .txd-ring{width:76px;height:76px}
  .txd-ring b{font-size:16px}
  .txd-cnt{grid-template-columns:repeat(2,minmax(0,1fr))}
  .txd-cnt li{padding:5px 8px}
  .txd-cnt b{font-size:16px}
}

/* 결과 도구 줄 */
.txd-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding:10px 18px;border-bottom:1px solid var(--soft)}
.txd-tl,.txd-tr{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.txd-tr{gap:6px;margin-left:auto}
.txd-nav{display:inline-flex;align-items:center;gap:4px}
.txd-nav .v2-btn{width:32px;padding:0;justify-content:center}
.txd-pos{min-width:46px;font-family:var(--sans);font-size:12.5px;font-weight:650;text-align:center;color:var(--ink);font-variant-numeric:tabular-nums}
@container txdw (max-width:599px){
  .txd-tools{padding:9px 14px}
  .txd-tr{width:100%}
  .txd-tr .v2-btn--primary{margin-left:auto}
}

/* 결과판 + 변경 지도 */
.txd-view{display:grid;grid-template-columns:minmax(0,1fr) 14px}
.txd-scroll{--nw:2;position:relative;max-height:clamp(320px,70vh,780px);overflow:auto;overscroll-behavior:contain;background:var(--paper)}
.txd-scroll:focus-visible{outline:2px solid var(--ink);outline-offset:-2px}
.txd-head{position:sticky;top:0;z-index:2;display:grid;align-items:center;min-height:30px;background:var(--card);border-bottom:1px solid var(--soft);font-family:var(--sans);font-size:12px;color:var(--muted)}
.txd-head b{display:flex;align-items:center;gap:6px;min-width:0;padding:5px 10px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.txd-head i{display:grid;place-items:center;flex:0 0 auto;width:17px;height:17px;border-radius:50%;font-family:var(--mono);font-size:10.5px;font-style:normal;font-weight:700}
.txd-head .ka{background:var(--ink);color:var(--paper)}
.txd-head .kb{box-shadow:inset 0 0 0 1.5px var(--ink);color:var(--ink)}
.txd-head .g{width:auto;height:auto;font-size:13px;color:var(--ink)}
.txd-rows{font-family:var(--sans);font-size:13.5px;line-height:1.6;color:var(--ink)}
.txd-r{display:grid;align-items:stretch;border-bottom:1px solid color-mix(in srgb,var(--soft) 55%,transparent)}
.is-split .txd-head,.is-split .txd-r{grid-template-columns:calc(var(--nw) * 1ch + 16px) minmax(0,1fr) calc(var(--nw) * 1ch + 16px) minmax(0,1fr)}
.is-unified .txd-r{grid-template-columns:calc(var(--nw) * 1ch + 14px) calc(var(--nw) * 1ch + 14px) 18px minmax(0,1fr)}
.is-unified .txd-head{grid-template-columns:repeat(2,minmax(0,auto));justify-content:start;gap:4px}
.txd-n{padding:3px 6px 3px 0;font-family:var(--txd-mono);font-size:11.5px;line-height:21.6px;text-align:right;color:var(--muted);background:color-mix(in srgb,var(--wash) 70%,var(--paper));user-select:none;font-variant-numeric:tabular-nums}
.txd-c{min-width:0;padding:3px 10px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;tab-size:4}
.is-split .txd-c.ca{border-right:1px solid var(--soft)}
.txd-g{padding:3px 0;font-family:var(--txd-mono);font-size:13px;line-height:21.6px;text-align:center;font-weight:700;user-select:none}
.txd-c.is-void{background:repeating-linear-gradient(135deg,transparent 0 6px,color-mix(in srgb,var(--soft) 55%,transparent) 6px 7px)}
/* 행 색: 삭제 쪽 붉은 엷은 바탕, 추가 쪽 초록 엷은 바탕, 줄 안 바뀐 부분은 진하게 */
.t-del .ca,.t-mod .ca,.u-a .txd-c{background:color-mix(in srgb,var(--txd-del) 8%,var(--paper))}
.t-add .cb,.t-mod .cb,.u-b .txd-c{background:color-mix(in srgb,var(--txd-add) 9%,var(--paper))}
.is-split .t-del .txd-n:first-child,.is-split .t-mod .txd-n:first-child,.u-a .txd-n,.u-a .txd-g{background:color-mix(in srgb,var(--txd-del) 15%,var(--paper));color:var(--txd-del)}
.is-split .t-add .txd-n:nth-child(3),.is-split .t-mod .txd-n:nth-child(3),.u-b .txd-n,.u-b .txd-g{background:color-mix(in srgb,var(--txd-add) 17%,var(--paper));color:var(--txd-add)}
.txd-c del{background:color-mix(in srgb,var(--txd-del) 26%,transparent);color:inherit;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--txd-del) 75%,transparent);text-decoration-thickness:1.5px;border-radius:2px}
.txd-c ins{background:color-mix(in srgb,var(--txd-add) 30%,transparent);color:inherit;text-decoration:none;border-radius:2px}
.txd-w{color:var(--muted);letter-spacing:.06em}
.txd-x{display:inline-block;margin:0 1px;padding:0 3px;border:1px solid currentColor;border-radius:3px;font-family:var(--txd-mono);font-size:9.5px;line-height:1.35;vertical-align:1px;color:var(--muted)}
.txd-e{font-size:12px;color:var(--muted);font-style:italic}
.txd-r.is-near .txd-n:first-child::before{content:'≈';float:left;margin-left:3px;color:var(--muted)}
.txd-r.is-cur .txd-n:first-child{box-shadow:inset 3px 0 var(--ink)}
.txd-fold{display:block;width:100%;min-height:30px;padding:5px 12px;border:0;border-bottom:1px solid var(--soft);background:repeating-linear-gradient(180deg,var(--wash) 0 2px,var(--card) 2px 4px);font-family:var(--sans);font-size:12px;font-weight:650;color:var(--muted);text-align:center;cursor:pointer}
.txd-fold:hover{color:var(--ink);background:var(--btn)}
.txd-more{background:var(--card);color:var(--ink)}
.txd-empty,.txd-same{margin:0;padding:16px 18px;font-family:var(--sans);font-size:13px;color:var(--muted)}
.txd-same{padding:9px 14px;border-bottom:1px solid var(--soft);background:var(--wash);color:var(--ink);font-weight:650}
.txd-empty.is-error{color:var(--accent);font-weight:650}
.txd-map{position:relative;border-left:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 70%,var(--card));cursor:pointer;touch-action:none}
.txd-mk{position:absolute;left:2px;right:2px;min-height:3px;border-radius:1px}
.txd-mk.a{background:var(--txd-add)}
.txd-mk.d{background:var(--txd-del)}
.txd-mk.m{background:linear-gradient(90deg,var(--txd-del) 50%,var(--txd-add) 50%)}
.txd-thumb{position:absolute;left:0;right:0;min-height:12px;border:1px solid var(--ink);border-radius:2px;background:color-mix(in srgb,var(--ink) 9%,transparent);pointer-events:none}
.txd-work[data-state="empty"] .txd-map,.txd-work[data-state="error"] .txd-map{background:var(--card)}

/* 상태 줄 */
.txd-foot{display:flex;flex-wrap:wrap;align-items:center;gap:4px 14px;padding:9px 18px;border-top:1px solid var(--soft);background:color-mix(in srgb,var(--wash) 60%,var(--card))}
.txd-msg{margin:0}
.txd-msg:empty{display:none}
.txd-privacy{margin:0 0 0 auto;font-family:var(--sans);font-size:11.5px;color:var(--muted)}
@container txdw (max-width:599px){ .txd-foot{padding:9px 14px} .txd-privacy{margin-left:0} }

/* 전체 화면: 결과판이 남은 높이를 채운다 */
.txd-work:fullscreen,.txd-work.is-full{display:flex;flex-direction:column;overflow:auto;background:var(--card)}
.txd-work.is-full{position:fixed;inset:0;z-index:1000;margin:0;border-radius:0}
.txd-work:fullscreen .txd-view,.txd-work.is-full .txd-view{flex:1 1 auto;min-height:260px;grid-template-rows:minmax(0,1fr)}
.txd-work:fullscreen .txd-scroll,.txd-work.is-full .txd-scroll{max-height:none;min-height:0}
.txd-work:fullscreen .txd-ta,.txd-work.is-full .txd-ta{height:120px}
html.txd-noscroll{overflow:hidden}

.txd-work.is-boot *{transition:none !important}
@media (prefers-reduced-motion:reduce){ .txd-ring .fg,.txd-bar i,.txd-swap{transition:none} }

/* 본문 diff 예시 */
.v2-article pre.txd-code{margin:10px 0 16px;padding:12px 14px;overflow-x:auto;border:1px solid var(--soft);border-radius:var(--radius);background:var(--card);font-family:var(--txd-mono, ui-monospace, Menlo, Consolas, monospace);font-size:12.5px;line-height:1.65;color:var(--ink)}
.v2-article pre.txd-code code{font-size:inherit;font-weight:500;overflow-wrap:normal;white-space:pre;font-family:inherit}
.v2-article pre.txd-code .d{color:#b3261e}
.v2-article pre.txd-code .a{color:#2f7a3a}
.v2-article pre.txd-code .h{color:var(--muted)}
.v2-article pre.txd-code .f{font-weight:700}
html[data-theme="dark"] .v2-article pre.txd-code .d{color:#f08a7e}
html[data-theme="dark"] .v2-article pre.txd-code .a{color:#8cc977}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .v2-article pre.txd-code .d{color:#f08a7e} html:not([data-theme="light"]) .v2-article pre.txd-code .a{color:#8cc977}}