/* 텍스트 도구 5종(텍스트 비교·정리·JSON·정규식·Base64) 전용 스타일 */
/* 공통: 고정폭 입력 칸, 두 패널 칸이 긴 글에 밀려 화면 밖으로 넘치지 않게 min-width:0 */
.tx-body>*{min-width:0}
.tx-ta{width:100%;box-sizing:border-box;min-height:150px;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,'D2Coding',monospace;
  font-size:13.5px;line-height:1.6;padding:10px 12px;border:1px solid var(--line);border-radius:12px;background:var(--card);color:var(--ink);tab-size:4}
.tx-ta:focus{outline:none;border-color:var(--ink2)}
.tx-ta[readonly]{background:var(--soft)}
.tx-ta.bad{border-color:var(--red)}
/* 서버로 보내지 않는다는 안내. 회색 힌트가 아니라 눈에 띄는 15px 상자(라이트·다크 모두 본문색 글자) */
.tx-safe{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:15px;line-height:1.55;color:var(--ink);
  background:color-mix(in srgb,var(--mint) 13%,transparent);border-left:4px solid var(--mint)}
/* 오류 상자 */
.tx-err{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:15px;line-height:1.55;color:var(--ink);
  background:color-mix(in srgb,var(--red) 12%,transparent);border-left:4px solid var(--red);overflow-wrap:anywhere}
.tx-err b{display:block;margin-bottom:2px}
.tx-ok{margin-top:12px;padding:11px 14px;border-radius:12px;font-size:15px;color:var(--ink);background:color-mix(in srgb,var(--mint) 13%,transparent);border-left:4px solid var(--mint)}
.tx-chks{display:flex;flex-wrap:wrap;gap:4px 16px}
.tx-chks .chk{margin-top:10px}
.tx-chks input{width:auto}
.tx-btns{display:flex;flex-wrap:wrap;gap:6px}
.tx-btns .btn{padding:7px 11px;font-size:13.5px}
.tx-grp{margin-top:12px}
.tx-grp>small{display:block;font-size:12.5px;font-weight:700;color:var(--muted);margin-bottom:5px}
.tx-err pre{font-size:13.5px;background:var(--card);border-radius:8px;padding:6px 8px}
.tx-mark{background:color-mix(in srgb,var(--red) 45%,transparent);color:var(--ink);border-radius:3px;outline:2px solid var(--red);padding:0 1px}
.tx-code{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;overflow-wrap:anywhere;word-break:break-all}

/* .btn 의 display 가 hidden 속성을 이기지 않게 */
.tx-body [hidden]{display:none!important}
/* --- Base64: 파일 넣는 칸과 미리 보기 --- */
.tx-drop{display:flex;flex-direction:column;align-items:center;text-align:center;gap:2px;padding:18px 14px;margin-top:14px;cursor:pointer;
  border:2px dashed var(--line);border-radius:14px;background:color-mix(in srgb,var(--soft) 50%,transparent)}
.tx-drop:hover,.tx-drop.over{border-color:var(--coral);background:color-mix(in srgb,var(--coral) 10%,transparent)}
.tx-drop.has{border-style:solid;border-color:var(--mint)}
.tx-drop b{font-size:14.5px;overflow-wrap:anywhere}
.tx-drop input[type=file]{width:100%;max-width:280px;font-size:12.5px;padding:6px;margin-top:4px}
.tx-prev{margin-top:12px;display:flex;flex-direction:column;align-items:center;gap:4px}
.tx-prev img{max-width:100%;max-height:320px;border-radius:10px;border:1px solid var(--line);
  background:repeating-conic-gradient(var(--soft) 0 25%,var(--card) 0 50%) 0 0/16px 16px}
.tx-prev p{overflow-wrap:anywhere;text-align:center}
/* 주의 상자: app.css .warn 위에 크기·왼쪽 띠만 더한다 */
.tx-warn{font-size:15px;line-height:1.6;border-left:4px solid var(--yellow);color:var(--ink)}
input.tx-code.bad{border-color:var(--red)}

/* --- 정규식: /패턴/플래그 줄과 일치 강조 --- */
.tx-rx{display:flex;align-items:center;gap:4px}
.tx-rx>span,.tx-rx>b{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:18px;color:var(--muted)}
.tx-rx>b{font-size:14px;min-width:1.5em;color:var(--ink2)}
.tx-rx input{flex:1;min-width:0}
.tx-m0,.tx-m1{color:var(--ink);border-radius:3px;padding:0 1px}
.tx-m0{background:color-mix(in srgb,var(--yellow) 55%,transparent)}
.tx-m1{background:color-mix(in srgb,var(--sky) 35%,transparent)}
.tx-zero{display:inline-block;width:2px;height:1.1em;vertical-align:-2px;background:var(--coral);padding:0}

/* --- 텍스트 비교: 나란히 보기 --- */
.tx-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:13px;color:var(--ink2);margin-top:12px}
.tx-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;vertical-align:-1px;margin-right:4px}
.tx-diff{margin-top:10px;border:1px solid var(--line);border-radius:12px;overflow:hidden;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13px;line-height:1.55}
.tx-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.tx-row+.tx-row{border-top:1px solid color-mix(in srgb,var(--line) 70%,transparent)}
.tx-head{font-family:Pretendard,sans-serif;font-weight:700;font-size:13px;color:var(--muted);background:var(--soft)}
.tx-head div{padding:6px 10px}
.tx-c{display:grid;grid-template-columns:44px minmax(0,1fr);min-width:0}
.tx-c.r{border-left:1px solid var(--line)}
.tx-n{padding:2px 6px;text-align:right;color:var(--muted);font-size:12px;user-select:none;white-space:nowrap}
.tx-t{padding:2px 8px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;min-height:1.55em}
.tx-c.del{background:color-mix(in srgb,var(--red) 13%,transparent)}
.tx-c.add{background:color-mix(in srgb,var(--mint) 15%,transparent)}
.tx-c.none{background:repeating-linear-gradient(135deg,var(--soft) 0 6px,transparent 6px 12px)}
.tx-t del,.tx-inline del{text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--red) 70%,var(--ink));background:color-mix(in srgb,var(--red) 32%,transparent);border-radius:3px;color:var(--ink)}
.tx-t ins,.tx-inline ins{text-decoration:none;background:color-mix(in srgb,var(--mint) 36%,transparent);border-radius:3px;color:var(--ink);font-weight:700}
.tx-legend .d{background:color-mix(in srgb,var(--red) 32%,transparent)}
.tx-legend .a{background:color-mix(in srgb,var(--mint) 36%,transparent)}
.tx-inline{margin-top:10px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-all;
  font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:13.5px;line-height:1.7;max-height:560px;overflow-y:auto}
.tx-scroll{max-height:620px;overflow-y:auto}
/* 좁은 화면: 한 줄 짝을 위(원본)·아래(비교본)로 쌓는다. 같은 줄은 한 번만 보이고 빈 칸은 감춘다 */
@media(max-width:560px){
  .tx-row{grid-template-columns:minmax(0,1fr)}
  .tx-head{display:none}
  .tx-c.r{border-left:0}
  .tx-row.eq .tx-c.r,.tx-c.none{display:none}
  .tx-c{grid-template-columns:40px minmax(0,1fr)}
}