/* 텍스트 역순 변환기 '거울 작업대' (2026-10-22). 작업면 안쪽 여백 0 → 구역마다 padding + soft 구분선.
   넓으면(작업면 600px 이상) [C 단위 레일 | P 원문 → 순서 지도 → 결과] / [F 회문 · 단추], 좁으면 C(단위 한 줄) → P → F */
.trv-work{padding:0;container:trvw / inline-size}
.trv-work [hidden]{display:none !important}
.trv-ex{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:12px 18px;border-bottom:1px solid var(--soft)}
.trv-ex .v2-label{margin-right:4px}
.trv-ex button{height:28px;padding:0 9px;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)}
.trv-ex button:hover{background:var(--btn);border-color:var(--line)}

.trv-body{display:grid;grid-template-columns:minmax(0,1fr);grid-template-areas:"c" "p" "f"}
.trv-ctl{grid-area:c;display:flex;flex-direction:column;gap:12px;min-width:0;padding:14px 18px;border-bottom:1px solid var(--soft)}
.trv-pipe{grid-area:p;display:flex;flex-direction:column;min-width:0}
.trv-foot{grid-area:f;display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;padding:12px 18px;border-top:1px solid var(--soft)}

/* C: 뒤집는 단위 · 범위 · 빈칸 */
.trv-unit-box{display:flex;flex-direction:column;gap:6px}
.trv-units{display:flex;flex-wrap:wrap;gap:4px}
.trv-units button{flex:1 1 auto;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:34px;padding:4px 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;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.trv-units button:hover{background:var(--btn);border-color:var(--line)}
.trv-units b{font-size:13.5px;font-weight:700;line-height:1.25}
.trv-units small{display:none;max-width:100%;font-size:11.5px;font-weight:500;line-height:1.35;color:var(--muted);overflow-wrap:anywhere}
.trv-units button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.trv-units button[aria-pressed="true"] small{color:inherit;opacity:.8}
.trv-opt{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:6px 12px}
.trv-ctl .v2-seg{display:flex;flex-wrap:wrap;gap:3px;width:100%}
.trv-ctl .v2-seg button{flex:1 1 auto;padding:0 7px;white-space:nowrap;font-size:12px}
.trv-ctl .v2-seg button[aria-disabled="true"]{opacity:.38;cursor:not-allowed}
.trv-ctl .v2-seg button[aria-disabled="true"]:hover{background:var(--paper);color:var(--muted)}
@container trvw (min-width:600px){
  .trv-body{grid-template-columns:minmax(182px,232px) minmax(0,1fr);grid-template-areas:"c p" "f f"}
  .trv-ctl{gap:14px;padding:14px;border-bottom:0;border-right:1px solid var(--soft)}
  .trv-units{flex-direction:column;gap:5px}
  .trv-units button{flex:none;width:100%;align-items:flex-start;min-height:46px;padding:6px 11px}
  .trv-units small{display:block}
  .trv-opt{grid-template-columns:minmax(0,1fr);gap:6px}
}

/* P: 원문 → 순서 지도 → 결과 */
.trv-in,.trv-out{display:flex;flex-direction:column;gap:6px;padding:12px 18px;min-width:0}
.trv-out{flex:1 1 auto;padding-bottom:14px}
.trv-lh{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;margin:0;min-width:0}
.trv-meta{font-family:var(--sans);font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.trv-mode{font-family:var(--sans);font-size:12px;font-weight:600;color:var(--ink)}
.trv-out .trv-meta{margin-left:auto}
.trv-clr{margin-left:auto;padding:0;border:0;background:none;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:3px;cursor:pointer}
.trv-clr:hover{color:var(--ink)}
.trv-ta,.trv-view{display:block;width:100%;margin:0;padding:9px 11px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:15px;font-weight:500;line-height:24px;color:var(--ink)}
.trv-ta{min-height:96px;max-height:218px;resize:none}
.trv-ta::placeholder{color:var(--ink);opacity:.35}
.trv-view{flex:1 1 auto;min-height:96px;max-height:342px;overflow:auto;white-space:pre-wrap;word-break:keep-all;overflow-wrap:anywhere}
.trv-view.is-ph::before{content:attr(data-ph);color:var(--ink);opacity:.35}
.trv-ta:focus,.trv-view:focus{outline:0;border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.trv-note{margin:0;font-family:var(--sans);font-size:12.5px;line-height:1.55;color:var(--accent)}

/* 순서 지도: 위 줄 = 원문 순서, 아래 줄 = 결과 순서, 같은 단위를 선으로 잇는다. 첫 단위는 accent */
.trv-map{display:flex;flex-direction:column;min-width:0;padding:8px 18px 10px;background:var(--wash);border-top:1px solid var(--soft);border-bottom:1px solid var(--soft)}
.trv-mh{display:flex;justify-content:space-between;gap:8px;margin:0 0 6px;font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--muted)}
.trv-mh em{flex:none;font-style:normal;font-variant-numeric:tabular-nums;white-space:nowrap}
.trv-row{display:flex;align-items:center;gap:8px;height:30px;overflow:hidden;white-space:nowrap}
.trv-g{display:flex;align-items:center;gap:4px;flex:none}
.trv-g.is-grp{padding:1px 3px;border:1px dashed var(--line);border-radius:3px}
.trv-chip{flex:none;display:inline-block;min-width:26px;max-width:10em;height:26px;padding:0 7px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:14px;font-weight:600;line-height:24px;color:var(--ink);text-align:center;white-space:pre;overflow:hidden;text-overflow:ellipsis}
.trv-chip.is-ws{color:var(--muted);font-weight:500}
.trv-chip.is-first{border-color:var(--accent);color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.trv-chip.is-gap{min-width:0;padding:0 2px;border-color:transparent;background:none;font-size:12.5px;color:var(--muted)}
.trv-wires{display:block;width:100%;height:38px;overflow:visible}
.trv-wires path{fill:none;stroke:var(--line);stroke-width:1.3}
.trv-wires path.is-first{stroke:var(--accent);stroke-width:2}
.trv-mempty{display:none;margin:0;padding:4px 0 2px;font-family:var(--sans);font-size:12.5px;line-height:1.5;color:var(--muted)}
.trv-map.is-empty .trv-row,.trv-map.is-empty .trv-wires{display:none}
.trv-map.is-empty .trv-mempty{display:block}
.trv-map.is-anim .trv-wires path{stroke-dasharray:1;stroke-dashoffset:1;animation:trv-draw .42s cubic-bezier(.2,.7,.2,1) forwards}
.trv-map.is-anim #trvBot .trv-chip[data-k]{opacity:0;animation:trv-in .26s ease-out forwards}
@keyframes trv-draw{to{stroke-dashoffset:0}}
@keyframes trv-in{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}

/* F: 회문 판정 · 단추 */
.trv-pal{display:flex;align-items:baseline;flex-wrap:wrap;gap:2px 8px;flex:1 1 220px;min-width:0;margin:0}
.trv-pal b{display:inline-block;font-family:var(--sans);font-size:13px;font-weight:700;color:var(--muted)}
.trv-pal.is-yes b{color:var(--accent)}
.trv-pal span{font-family:var(--sans);font-size:12px;color:var(--muted)}
.trv-pal.is-pop b{animation:trv-pop .5s ease-out}
@keyframes trv-pop{40%{transform:scale(1.12)}}
.trv-cmd{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
#trvBack .i{transform:rotate(-45deg)}
@container trvw (max-width:599px){
  .trv-in .trv-meta{order:3;flex-basis:100%}
  .trv-cmd{width:100%}
  .trv-cmd .v2-btn{flex:1 1 auto;justify-content:center}
}
.trv-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){
  .trv-map.is-anim .trv-wires path,.trv-map.is-anim #trvBot .trv-chip[data-k],.trv-pal.is-pop b{animation:none;opacity:1;stroke-dashoffset:0}
}
.v2-article .trv-tbl th:lang(ko){word-break:keep-all}