/* 표·글자 뽑아내기 도구 화면. 색·간격은 KAMU 토큰만 쓴다. */
.x-main{padding-top:var(--kamu-space-6);display:grid;gap:var(--kamu-space-4);min-width:0}
.x-main>*{min-width:0}
.x-drop{border:2px dashed var(--kamu-color-control-border);border-radius:var(--kamu-radius-lg);background:var(--kamu-color-surface);padding:var(--kamu-space-6) var(--kamu-space-5);text-align:center;transition:background var(--kamu-duration),border-color var(--kamu-duration)}
.x-drop.drag{border-color:var(--kamu-color-text);background:var(--kamu-color-subtle)}
.x-drop b{display:block;font-size:var(--kamu-text-lg);margin-bottom:var(--kamu-space-1)}
.x-drop p{margin:0 0 var(--kamu-space-4)}
.x-center{justify-content:center}
.x-file{margin:var(--kamu-space-3) 0 0!important;font-weight:700;word-break:break-all}
.x-file:empty{display:none}
.x-msg{margin:0}
.x-stats{display:flex;gap:var(--kamu-space-2);flex-wrap:wrap;margin-bottom:var(--kamu-space-4)}

.x-panel{display:grid;gap:var(--kamu-space-3);margin-bottom:var(--kamu-space-4);min-width:0}
.x-panel-head{display:flex;gap:var(--kamu-space-3);justify-content:space-between;align-items:flex-start;flex-wrap:wrap}
.x-panel h2{font-size:var(--kamu-text-lg);font-weight:800}
.x-panel-head p{font-size:var(--kamu-text-sm);margin-top:2px}
.x-list-wrap{max-height:420px;overflow:auto;border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md)}
.x-list{width:100%;border-collapse:collapse;font-size:var(--kamu-text-sm)}
.x-list th,.x-list td{padding:var(--kamu-space-2) var(--kamu-space-3);border-bottom:1px solid var(--kamu-color-border);text-align:left;vertical-align:middle}
.x-list thead th{position:sticky;top:0;background:var(--kamu-color-subtle);font-size:var(--kamu-text-xs);color:var(--kamu-color-muted);font-weight:700;white-space:nowrap}
.x-list tbody tr{cursor:pointer}
.x-list tbody tr:hover{background:var(--kamu-color-canvas)}
.x-list tbody tr.on{background:var(--kamu-color-info-soft)}
.x-list tbody th{white-space:nowrap;font-weight:700}
.x-list tbody th small{display:block;font-weight:400;color:var(--kamu-color-muted);font-size:var(--kamu-text-xs)}
.x-list td.num{white-space:nowrap;font-variant-numeric:tabular-nums}
.x-list td.first{color:var(--kamu-color-muted);max-width:0;width:60%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.x-list input{width:18px;height:18px;accent-color:var(--kamu-color-text)}
.x-link{border:0;background:none;padding:0;font:inherit;font-weight:700;color:inherit;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.x-empty{margin:0}

.x-opts{display:flex;gap:var(--kamu-space-3) var(--kamu-space-6);flex-wrap:wrap;align-items:flex-start}
.x-opts .kamu-checkbox{flex:1 1 280px}
.x-radio{border:0;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--kamu-space-1);font-size:var(--kamu-text-sm)}
.x-radio legend{font-weight:700;margin-bottom:var(--kamu-space-1);padding:0}
.x-radio label{display:flex;gap:var(--kamu-space-2);align-items:center;cursor:pointer}
.x-radio input{accent-color:var(--kamu-color-text)}
.x-actions{gap:var(--kamu-space-2)}
.x-sel{font-size:var(--kamu-text-sm)}

.x-preview{border-top:1px solid var(--kamu-color-border);padding-top:var(--kamu-space-3);min-width:0}
.x-preview h3{font-size:var(--kamu-text-sm);font-weight:700;margin-bottom:var(--kamu-space-2)}
.x-pv-scroll{overflow:auto;max-height:420px;border:1px solid var(--kamu-color-border);border-radius:var(--kamu-radius-md);background:var(--kamu-color-surface)}
.x-pv-scroll table{border-collapse:collapse;font-size:var(--kamu-text-xs);min-width:100%}
.x-pv-scroll td{border:1px solid var(--kamu-color-border);padding:var(--kamu-space-1) var(--kamu-space-2);vertical-align:top;min-width:48px;max-width:320px;white-space:pre-wrap;word-break:break-word}
.x-pv-scroll td.m{background:var(--kamu-color-warning-soft)}

.x-md{width:100%;box-sizing:border-box;min-height:280px;height:auto;resize:vertical;font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;font-size:var(--kamu-text-xs);line-height:1.6;padding:var(--kamu-space-3);white-space:pre;overflow:auto}
.x-note{margin-top:var(--kamu-space-2)}

@media (max-width:620px){
  .x-drop{padding:var(--kamu-space-5) var(--kamu-space-4)}
  .x-list th,.x-list td{padding:var(--kamu-space-2)}
  .x-list td.first{width:auto}
}