/* HTML 태그 제거기 — '태그 투시대': 예시 → [HTML 원문(투시 색) | 정리된 글자·HTML] → 상태 → 구성 막대(원문 → 결과) → 남길 것 → [설정 | 이 문서의 태그].
   배치는 작업면 너비(컨테이너 htr) 기준: 720 이상 두 칸 나란히, 600 이상 설정·태그 두 단, 520 미만 남길 것 한 열.
   투시 색 6가지는 라이트·다크를 따로 잡고, 강조색(accent)은 '남는 글자'(구성 막대의 글자 조각·요약 수)에만 쓴다. */
.htr-work{container:htr / inline-size;font-family:var(--sans);
  --htr-text:var(--accent);--htr-hid:color-mix(in srgb,var(--accent) 32%,var(--paper));--htr-ws:#d9ccae;--htr-tag:#56698a;--htr-attr:#86642f;--htr-code:#6b5a8e;--htr-cmt:#56762a}
html[data-theme="dark"] .htr-work{--htr-ws:#4b3b29;--htr-tag:#9db2d0;--htr-attr:#d6b27a;--htr-code:#b8a7d8;--htr-cmt:#a6c779}
@media (prefers-color-scheme:dark){html:not([data-theme="light"]) .htr-work{--htr-ws:#4b3b29;--htr-tag:#9db2d0;--htr-attr:#d6b27a;--htr-code:#b8a7d8;--htr-cmt:#a6c779}}
.htr-work [hidden]{display:none!important}
html:lang(ko) .htr-work{word-break:keep-all;overflow-wrap:anywhere}
.htr-sh{display:flex;align-items:baseline;flex-wrap:wrap;gap:4px 10px;margin:0 0 10px}
.htr-hint{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}

/* 예시 띠 */
.htr-head{padding:10px 18px;border-bottom:1px solid var(--soft)}
.htr-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.htr-ex .v2-label{margin-right:4px}
.htr-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);transition:background var(--ease),border-color var(--ease),color var(--ease)}
.htr-ex button:hover{background:var(--btn);border-color:var(--line)}
.htr-ex button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}

/* 두 칸: subgrid로 머리·본문·바닥 줄을 맞춘다 */
.htr-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:auto 1fr auto;column-gap:14px;padding:16px 18px 14px}
.htr-pane{display:grid;grid-row:span 3;grid-template-rows:subgrid;grid-template-columns:minmax(0,1fr);min-width:0;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);transition:border-color var(--ease),box-shadow var(--ease)}
.htr-pane:focus-within{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.htr-ph{display:flex;align-items:center;gap:6px 10px;min-width:0;min-height:44px;margin:0;padding:6px 10px 6px 12px;border-bottom:1px solid var(--soft)}
.htr-ph .v2-label{flex:0 0 auto;color:var(--ink);font-size:12px;letter-spacing:.04em}
.htr-xsw{margin-left:auto;font-size:12px}
.htr-meta{margin-left:auto;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.htr-cnt{color:var(--ink);font-weight:600}
.htr-box{position:relative;display:flex;flex-direction:column;min-height:0}
.htr-ta,.htr-bd{box-sizing:border-box;margin:0;padding:11px 12px;font-family:var(--mono);font-size:13px;line-height:20px;tab-size:2;letter-spacing:0;white-space:pre-wrap;overflow-wrap:anywhere;word-break:normal;scrollbar-gutter:stable}
.htr-ta{display:block;flex:1 1 auto;width:100%;height:340px;min-height:340px;border:0;border-radius:0;background:transparent;color:var(--ink);resize:none;outline:0;overflow-x:hidden;overflow-y:auto}
.htr-ta::placeholder{color:var(--muted);opacity:.85;font-family:var(--sans)}
.htr-ta--out{background:color-mix(in srgb,var(--wash) 45%,var(--paper));font-family:var(--sans);font-size:14px;line-height:22px}
.htr-work[data-mode="keep"] .htr-ta--out,.htr-work[data-mode="drop"] .htr-ta--out{font-family:var(--mono);font-size:13px;line-height:20px}
/* 투시 색: 글자는 표시층(.htr-bd)이 그리고, 위의 입력 칸은 글자를 투명하게 두어 커서·선택만 보인다 */
#htrSrc{position:relative;z-index:1}
.htr-bd{position:absolute;inset:0;display:none;overflow:hidden;color:var(--ink);pointer-events:none}
.htr-box.is-x .htr-bd{display:block}
.htr-box.is-x #htrSrc{color:transparent;caret-color:var(--ink)}
.htr-box.is-x #htrSrc::selection{background:color-mix(in srgb,var(--accent) 24%,transparent);color:transparent}
.htr-bd .x-tag{color:var(--htr-tag)}
.htr-bd .x-attr{color:var(--htr-attr)}
.htr-bd .x-code{color:var(--htr-code);background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--htr-code) 12%,transparent) 5px 6px)}
.htr-bd .x-cmt{color:var(--htr-cmt)}
.htr-bd .x-rc{color:var(--muted);opacity:.7}
.htr-bd .x-keep{border-radius:2px;background:color-mix(in srgb,var(--htr-tag) 16%,transparent)}
.htr-bd .x-cut,.htr-bd .x-cut *{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--accent) 70%,transparent)}
.htr-bd .x-cut{opacity:.72}
.htr-drop{position:absolute;inset:8px;z-index:2;display:none;align-items:center;justify-content:center;border:2px dashed var(--accent);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 84%,var(--accent));color:var(--ink);font-size:13px;font-weight:650;pointer-events:none}
.htr-pane.is-drop .htr-drop{display:flex}
.htr-pf{display:flex;flex-wrap:wrap;align-items:center;gap:6px;min-width:0;min-height:48px;margin:0;padding:7px 10px;border-top:1px solid var(--soft)}

/* 상태 줄 */
.htr-st{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;min-height:44px;margin:0;padding:6px 18px;border-top:1px solid var(--soft);background:var(--card)}
.htr-st .v2-status{font-size:12.5px}
.htr-alt{height:30px}

/* 구성 막대: 같은 눈금(원문 전체 = 100%)에 원문과 결과를 놓는다. 결과 막대는 새 원문이면 원문 구성에서 걷혀 나간다 */
.htr-comp{padding:14px 18px 15px;border-top:1px solid var(--line)}
.htr-sum{margin-left:auto;font-size:13px;font-weight:750;color:var(--accent);font-variant-numeric:tabular-nums}
.htr-bars{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:7px 10px;font-size:12.5px}
.htr-bars__k{color:var(--muted);font-weight:600;white-space:nowrap}
.htr-bars__v{min-width:58px;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.htr-bar{display:flex;height:22px;border-radius:var(--radius);background:color-mix(in srgb,var(--soft) 40%,var(--paper));overflow:hidden}
.htr-bar.is-out{background:repeating-linear-gradient(135deg,transparent 0 5px,color-mix(in srgb,var(--soft) 75%,transparent) 5px 6px),var(--paper);box-shadow:inset 0 0 0 1px var(--soft)}
.htr-bar i{flex:0 0 auto;display:block;width:0;height:100%;box-shadow:inset -1px 0 0 color-mix(in srgb,var(--paper) 70%,transparent);background:var(--c);transition:width .6s cubic-bezier(.3,.7,.2,1)}
.htr-bar.is-out i[data-k="code"]{transition-delay:0ms}
.htr-bar.is-out i[data-k="cmt"]{transition-delay:110ms}
.htr-bar.is-out i[data-k="attr"]{transition-delay:220ms}
.htr-bar.is-out i[data-k="tag"]{transition-delay:330ms}
.htr-bar.is-out i[data-k="ws"]{transition-delay:440ms}
.htr-bar.is-out i[data-k="hid"]{transition-delay:500ms}
.htr-bar.is-out i[data-k="text"]{transition-delay:550ms}
[data-k="text"]{--c:var(--htr-text)}[data-k="hid"]{--c:var(--htr-hid)}[data-k="ws"]{--c:var(--htr-ws)}[data-k="tag"]{--c:var(--htr-tag)}[data-k="attr"]{--c:var(--htr-attr)}[data-k="code"]{--c:var(--htr-code)}[data-k="cmt"]{--c:var(--htr-cmt)}
.htr-bar i[data-k="code"]{background:repeating-linear-gradient(135deg,var(--htr-code) 0 5px,color-mix(in srgb,var(--htr-code) 70%,var(--paper)) 5px 7px)}
.htr-legend{display:flex;flex-wrap:wrap;gap:5px 16px;margin:11px 0 0;padding:0;list-style:none;font-size:12.5px;color:var(--ink)}
.htr-legend li{display:inline-flex;align-items:baseline;gap:5px;white-space:nowrap}
.htr-legend i{align-self:center;width:10px;height:10px;border-radius:2px;background:var(--c)}
.htr-legend b{font-variant-numeric:tabular-nums}
.htr-legend small{color:var(--muted);font-size:12px;font-variant-numeric:tabular-nums}

/* 정리 방식 */
.htr-set{border-top:1px solid var(--line)}
.htr-mode-row{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px 14px;padding:14px 18px 13px}
.htr-mode-row > .v2-label{color:var(--ink)}
.htr-mode{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.htr-mode button{display:grid;align-content:center;gap:3px;height:auto;min-height:60px;padding:9px 12px;border-color:var(--line);text-align:left;white-space:normal;color:var(--ink)}
.htr-mode button b{font-size:13.5px;font-weight:750;line-height:1.3}
.htr-mode button small{font-size:11.5px;font-weight:450;line-height:1.4;color:var(--muted)}
.htr-mode button[aria-pressed="true"] small{color:color-mix(in srgb,var(--on-fill) 80%,transparent)}
.htr-grid{display:grid;grid-template-columns:minmax(0,1fr);border-top:1px solid var(--soft)}
.htr-opts{display:flex;flex-direction:column;gap:11px;min-width:0;padding:13px 18px 15px}
.htr-o{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"l n" "c c";align-items:baseline;gap:5px 10px}
.htr-o > .v2-label{grid-area:l}
.htr-o > .htr-o__n{grid-area:n}
.htr-opt{grid-area:c;display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:4px}
.htr-opt button{height:34px;padding:0 6px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
.htr-o__n{min-width:0;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.htr-sws{display:grid;gap:3px;padding-top:11px;border-top:1px dashed var(--soft)}
.htr-sw{display:flex;align-items:center;justify-content:space-between;gap:10px;min-width:0;min-height:32px}
.htr-sw .v2-switch{min-width:0}
.htr-sw .htr-o__n{flex:0 1 auto}

/* 이 문서의 태그: 막대 목록(높이는 왼쪽 설정 칸에 맞추고 넘치면 스크롤) */
.htr-tags{display:flex;flex-direction:column;min-width:0;padding:13px 18px 15px;border-top:1px solid var(--soft)}
.htr-tags .htr-sh{margin-bottom:6px}
.htr-tags__bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;margin:0 0 9px}
.htr-tags__bar .htr-hint{flex:1 1 150px}
.htr-pre{height:28px;padding:0 9px;font-size:12px}
.htr-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,138px),1fr));grid-auto-rows:32px;align-content:start;gap:4px;max-height:300px;margin:0;padding:0 2px 2px 0;list-style:none;overflow:auto}
.htr-tg{display:grid;grid-template-columns:auto minmax(14px,1fr) auto;align-items:center;gap:8px;box-sizing:border-box;width:100%;height:100%;padding:0 9px;border:1px solid transparent;border-radius:var(--radius);background:var(--wash);font-family:var(--sans);font-size:12.5px;color:var(--ink);text-align:left}
.htr-tg code{font-family:var(--mono);font-size:13px;font-weight:700;letter-spacing:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.htr-tg__bar{height:6px;border-radius:3px;background:color-mix(in srgb,var(--soft) 60%,transparent);overflow:hidden}
.htr-tg__bar i{display:block;height:100%;border-radius:3px;background:var(--htr-tag)}
.htr-tg b{font-variant-numeric:tabular-nums;font-weight:700}
button.htr-tg{border-color:var(--soft);background:var(--paper);cursor:pointer;transition:background var(--ease),border-color var(--ease),color var(--ease)}
button.htr-tg:hover{border-color:var(--line);background:var(--btn)}
button.htr-tg:focus-visible{outline:2px solid var(--accent);outline-offset:1px}
.htr-work[data-mode="keep"] button.htr-tg[aria-pressed="true"]{border-color:var(--fill);background:var(--fill);color:var(--on-fill)}
.htr-work[data-mode="keep"] button.htr-tg[aria-pressed="true"] .htr-tg__bar{background:color-mix(in srgb,var(--on-fill) 25%,transparent)}
.htr-work[data-mode="keep"] button.htr-tg[aria-pressed="true"] .htr-tg__bar i{background:var(--on-fill)}
.htr-work[data-mode="drop"] button.htr-tg[aria-pressed="true"]{border-color:var(--accent);background:var(--accent-wash)}
.htr-work[data-mode="drop"] button.htr-tg[aria-pressed="true"] code{text-decoration:line-through;text-decoration-color:var(--accent);text-decoration-thickness:2px}
.htr-work[data-mode="drop"] button.htr-tg[aria-pressed="true"] .htr-tg__bar i{background:var(--accent)}
.htr-list-empty{margin:0;font-size:12.5px;color:var(--muted)}
.htr-nojs{margin:0;padding:12px 18px;color:var(--accent)}

@container htr (min-width:600px){
  .htr-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .htr-tags{border-top:0;border-left:1px solid var(--soft)}
  .htr-listbox{position:relative;flex:1 1 auto;min-height:230px}
  .htr-list{position:absolute;inset:0;max-height:none}
}
/* 태그 골라 남기기·지우기: 설정은 한 줄(속성 | 스위치), 태그 목록은 아래 전체 폭 */
.htr-work:not([data-mode="text"]) .htr-grid{grid-template-columns:minmax(0,1fr)}
.htr-work:not([data-mode="text"]) .htr-tags{border-left:0;border-top:1px solid var(--soft)}
.htr-work:not([data-mode="text"]) .htr-listbox{position:static;min-height:0}
.htr-work:not([data-mode="text"]) .htr-list{position:static;max-height:300px}
@container htr (min-width:600px){
  .htr-work:not([data-mode="text"]) .htr-opts{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;column-gap:28px}
  .htr-work:not([data-mode="text"]) .htr-sws{padding-top:0;border-top:0}
}
@container htr (max-width:719.98px){
  .htr-duo{column-gap:10px;padding:12px}
  .htr-ta{height:300px;min-height:300px}
  .htr-ta,.htr-bd{padding:9px 10px}
  .htr-ta--out{font-size:13.5px;line-height:21px}
  .htr-ph,.htr-pf{padding-left:9px;padding-right:9px}
  .htr-head{padding:10px 12px}
  .htr-st{padding:6px 12px}
  .htr-comp,.htr-mode-row,.htr-opts,.htr-tags{padding-left:12px;padding-right:12px}
}
@container htr (max-width:599.98px){
  .htr-duo{grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto auto auto auto auto}
  .htr-pane--out{margin-top:12px}
  .htr-ta{height:220px;min-height:220px}
}
@container htr (max-width:519.98px){
  .htr-mode-row{grid-template-columns:minmax(0,1fr)}
  .htr-mode{grid-template-columns:minmax(0,1fr)}
  .htr-mode button{min-height:0;padding:8px 11px}
  .htr-bars__v{min-width:48px}
  .htr-sum{margin-left:0;flex:0 0 100%}
}
@media (prefers-reduced-motion:reduce){
  .htr-bar i{transition:none!important}
}

/* 본문 표: 원문·결과 코드 칸이 좁은 화면에서 줄바꿈되게 */
.v2-article .htr-art-t code{white-space:normal;overflow-wrap:anywhere;word-break:normal}
.v2-article .htr-art-re small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}