/* 마크다운 표 CSV 변환기 '표 조판대' (2026-10-22). 접두 mtc-. 예시 띠 → 원문 → 결과 머리(형식·내보내기) → 표 → 결과 원문을 전체 폭으로 쌓는다.
   마크다운 표 줄은 길어서 좁은 두 칸으로 나누면 잘리므로 칸마다 작업면 폭을 다 쓰고, 원문·표·결과 높이는 내용 줄 수에 맞춰 빈 공간이 생기지 않게 한다. */
.mtc-work{container:mtcw / inline-size;overflow:hidden}
.mtc-work [hidden]{display:none !important}
.mtc-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.mtc-work code{font-family:var(--mono)}

/* 예시 띠 */
.mtc-ex{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 16px;border-bottom:1px solid var(--line)}
.mtc-ex .v2-label{margin:0}
.mtc-chips{display:flex;flex-wrap:wrap;gap:6px}
.mtc-chips button{display:inline-flex;align-items:baseline;gap:6px;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:650;color:var(--ink);cursor:pointer;line-height:28px;transition:background var(--ease),border-color var(--ease),color var(--ease)}
.mtc-chips button small{font-size:11px;font-weight:500;color:var(--muted)}
.mtc-chips button:hover{background:var(--btn)}
.mtc-chips button[aria-pressed="true"]{background:var(--fill);border-color:var(--fill);color:var(--on-fill)}
.mtc-chips button[aria-pressed="true"] small{color:inherit;opacity:.78}

/* 원문 */
.mtc-src{position:relative;padding:12px 16px 12px;border-bottom:1px solid var(--line)}
.mtc-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;margin-bottom:8px}
.mtc-bar > .v2-label{margin:0}
.mtc-read button small{margin-left:5px;font-size:11px;font-weight:600;opacity:.8}
.mtc-read button small:empty{display:none}
.mtc-meta{margin-left:auto;font-family:var(--sans);font-size:12px;font-weight:600;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.mtc-ta{display:block;width:100%;height:calc(var(--rows, 6) * 20.15px + 22px);min-height:102px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.55;tab-size:4;resize:vertical;white-space:pre;overflow:auto;outline:0;transition:border-color var(--ease),box-shadow var(--ease)}
.mtc-ta:focus{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.mtc-ta::placeholder{color:var(--muted);opacity:.8}
.mtc-work[data-state="error"] .mtc-ta{border-color:var(--accent)}
.mtc-drop{position:absolute;inset:8px;display:grid;place-items:center;border:2px dashed var(--ink);border-radius:var(--radius);background:color-mix(in srgb,var(--paper) 88%,transparent);font-family:var(--sans);font-size:14px;font-weight:700;color:var(--ink);pointer-events:none;z-index:2}
.mtc-drop span{display:inline-flex;align-items:center;gap:8px}
.mtc-drop svg{width:18px;height:18px}
.mtc-sfoot{display:flex;align-items:center;gap:8px 16px;flex-wrap:wrap;margin-top:10px}
.mtc-sfoot .v2-switch small{margin-left:2px;font-size:11.5px}
.mtc-acts{display:flex;flex-wrap:wrap;gap:6px;margin-left:auto}
.mtc-acts .v2-btn svg{width:14px;height:14px;flex:0 0 auto}
.mtc-acts .v2-btn small{font-size:11px;font-weight:600;opacity:.75}
.mtc-acts .v2-btn small:empty{display:none}

/* 결과 머리 */
.mtc-rhead{display:grid;grid-template-columns:auto minmax(0,1fr);align-items:end;gap:8px 12px;padding:12px 16px 10px;border-bottom:1px solid var(--soft)}
.mtc-fmtw{display:flex;flex-direction:column;gap:6px;min-width:0}
.mtc-fmtw .v2-label{margin:0}
.mtc-fmt button{height:32px;font-size:13px}
.mtc-rhead .mtc-acts{justify-content:flex-end}
.mtc-stline{grid-column:1 / -1;display:flex;align-items:center;gap:6px 10px;flex-wrap:wrap;min-height:18px}
.mtc-status{margin:0;font-size:12.5px;line-height:1.5}
.mtc-status:empty,.mtc-status span:empty{display:none}
.mtc-status.is-warn{color:var(--ink);font-weight:600}
.mtc-fix{height:28px;font-size:12px}

/* 찾은 표 · 크기 */
.mtc-tbar{display:flex;align-items:center;gap:8px 12px;flex-wrap:wrap;padding:10px 16px 8px}
.mtc-tabs{display:flex;flex-wrap:wrap;gap:6px;min-width:0}
.mtc-tabs button{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 10px 0 4px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:12.5px;font-weight:650;color:var(--ink);cursor:pointer;white-space:nowrap;transition:background var(--ease),border-color var(--ease)}
.mtc-tabs button b{display:inline-grid;place-items:center;min-width:20px;height:20px;padding:0 4px;border-radius:2px;background:var(--btn);font-family:var(--mono);font-size:11px;font-weight:700}
.mtc-tabs button small{font-family:var(--mono);font-size:11px;font-weight:500;color:var(--muted)}
.mtc-tabs button:hover{background:var(--btn)}
.mtc-tabs button[aria-pressed="true"]{border-color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)}
.mtc-tabs button[aria-pressed="true"] b{background:var(--fill);color:var(--on-fill)}
.mtc-one{font-family:var(--serif);font-size:14px;font-weight:800;letter-spacing:-.01em;color:var(--ink)}
.mtc-tbar .mtc-meta{margin-left:auto}

/* 표 */
.mtc-gridbox{margin:0 16px;max-height:428px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);overscroll-behavior:contain}
.mtc-gridbox:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mtc-grid{border-collapse:separate;border-spacing:0;min-width:100%;font-family:var(--sans);font-size:13px;line-height:1.5;color:var(--ink)}
.mtc-grid th,.mtc-grid td{padding:6px 10px;border-right:1px solid var(--soft);border-bottom:1px solid var(--soft);vertical-align:top;text-align:left;max-width:26em;overflow-wrap:break-word;word-break:keep-all;background:var(--paper)}
.mtc-grid th:last-child,.mtc-grid td:last-child{border-right:0}
.mtc-grid tr > *{transition:background var(--ease)}
.mtc-grid th > span,.mtc-grid td > span{display:inline-block;max-width:100%;transition:transform 300ms cubic-bezier(.2,.7,.2,1)}
.mtc-grid .a-l{text-align:left}
.mtc-grid .a-c{text-align:center}
.mtc-grid .a-r{text-align:right;font-variant-numeric:tabular-nums}
.mtc-lt th{position:sticky;top:0;z-index:2;padding:0;background:var(--wash);border-bottom:1px solid var(--line)}
.mtc-h th{position:sticky;top:29px;z-index:2;font-weight:700;background:color-mix(in srgb,var(--wash) 55%,var(--paper));border-bottom:1px solid var(--line)}
.mtc-h.is-syn th:not(.mtc-rn){font-style:italic;font-weight:600;color:var(--muted)}
.mtc-grid .mtc-rn{position:sticky;left:0;z-index:1;width:1%;min-width:34px;padding:6px 6px;text-align:right;font-family:var(--mono);font-size:11px;font-weight:600;color:var(--muted);background:var(--wash);border-right:1px solid var(--line)}
.mtc-lt .mtc-rn,.mtc-h .mtc-rn{z-index:3}
.mtc-al{display:flex;align-items:center;justify-content:space-between;gap:6px;width:100%;min-width:52px;height:28px;padding:0 8px 0 10px;border:0;background:none;font-family:var(--mono);font-size:11px;font-weight:700;color:var(--muted);cursor:pointer}
.mtc-al svg{width:15px;height:15px;flex:0 0 auto;opacity:.55}
.mtc-al:hover{background:var(--btn);color:var(--ink)}
.mtc-al:hover svg{opacity:1}
.mtc-al:focus-visible{outline:2px solid var(--accent);outline-offset:-2px}
.mtc-lt th.a-l .mtc-al svg,.mtc-lt th.a-c .mtc-al svg,.mtc-lt th.a-r .mtc-al svg{opacity:1;color:var(--ink)}
.mtc-grid tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--wash) 32%,var(--paper))}
.mtc-grid tbody tr:hover td{background:color-mix(in srgb,var(--wash) 70%,var(--paper))}
.mtc-grid code{padding:0 3px;border-radius:2px;background:var(--btn);font-size:12px}
.mtc-grid u{text-underline-offset:2px}
.mtc-grid .img{font-style:italic;color:var(--muted)}
.mtc-grid td.is-pad,.mtc-grid th.is-pad{background:repeating-linear-gradient(135deg,var(--wash) 0 4px,var(--paper) 4px 9px) !important}
.mtc-grid .is-st,.mtc-grid .is-pr,.mtc-grid .is-es{background-image:linear-gradient(225deg,var(--mk) 0 7px,transparent 7px) !important}
.mtc-grid .is-st{--mk:var(--muted)}
.mtc-grid .is-es{--mk:var(--muted)}
.mtc-grid .is-pr{--mk:var(--accent)}
.mtc-grid .mtc-dh{font-family:var(--sans);font-size:11.5px;font-weight:700;color:var(--accent);background:var(--accent-wash)}
.mtc-grid td.mtc-xc{color:var(--accent);font-family:var(--mono);font-size:12px;text-decoration:line-through;background:var(--accent-wash) !important}
.mtc-grid td.mtc-xc i{font-style:normal;opacity:.6}
.mtc-grid .mtc-cut td{font-family:var(--sans);font-size:12px;color:var(--muted);background:var(--wash)}
.mtc-grid .mtc-empty{padding:28px 16px;text-align:center;font-size:13px;color:var(--muted);max-width:none}
.mtc-grid .is-hit{animation:mtcHit 1.1s ease-out}
@keyframes mtcHit{0%,30%{box-shadow:inset 0 0 0 2px var(--accent)}100%{box-shadow:inset 0 0 0 2px transparent}}

/* 알림 칩 */
.mtc-notes{display:flex;flex-wrap:wrap;gap:6px;padding:8px 16px 0}
.mtc-n{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 9px;border:1px solid var(--soft);border-radius:var(--radius);background:var(--paper);font-family:var(--sans);font-size:11.5px;font-weight:600;color:var(--ink)}
button.mtc-n{cursor:pointer}
button.mtc-n:hover{background:var(--btn)}
.mtc-n::before{content:"";width:9px;height:9px;border-radius:1px;background:var(--muted)}
.mtc-n--pad::before{background:repeating-linear-gradient(135deg,var(--muted) 0 2px,transparent 2px 4px)}
.mtc-n--drop::before,.mtc-n--pr::before{background:var(--accent)}

/* 결과 원문 */
.mtc-cbar{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;padding:14px 16px 8px}
.mtc-cbar > .v2-label{margin:0}
.mtc-opts{display:flex;align-items:center;gap:8px 14px;flex-wrap:wrap;margin-left:auto}
.mtc-delim button code{margin-left:2px;font-weight:700}
.mtc-code{margin:0 16px 16px;padding:10px 12px;max-height:392px;overflow:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);color:var(--ink);font-family:var(--mono);font-size:13px;line-height:1.6;white-space:pre;tab-size:4;outline:0}
.mtc-code:focus-visible{border-color:var(--ink);box-shadow:0 0 0 2px var(--accent-wash)}
.mtc-code:empty::before{content:"—";color:var(--muted)}
.mtc-code i{font-style:normal}
.mtc-code .w{display:inline-block;width:2ch;text-align:center}
.mtc-code .p{color:var(--muted)}
.mtc-code .e{color:var(--accent);font-weight:700}
.mtc-code .b{color:var(--muted);background:var(--btn);border-radius:2px}
.mtc-code .q{color:var(--muted);font-weight:700}
.mtc-code .t{color:var(--muted);opacity:.8}
.mtc-code .p.t{opacity:1}
.mtc-code .dl{color:var(--muted)}
.mtc-code .dl.is-flash{animation:mtcFlash 1.2s ease-out}
@keyframes mtcFlash{0%,25%{background:var(--accent-wash);color:var(--accent)}100%{background:transparent}}
.mtc-more{margin:-8px 16px 14px;font-family:var(--sans);font-size:12px;color:var(--muted)}

/* 본문 예시 코드 */
.v2-article pre.mtc-acode{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(--mono);font-size:13px;line-height:1.6;color:var(--ink)}
.v2-article pre.mtc-acode code{font-size:inherit;font-weight:500;overflow-wrap:normal;white-space:pre}

@media (prefers-reduced-motion: reduce){
  .mtc-grid th > span,.mtc-grid td > span{transition:none}
  .mtc-code .dl.is-flash,.mtc-grid .is-hit{animation:none}
}

/* 좁은 작업면 */
@container mtcw (max-width:620px){
  .mtc-rhead{grid-template-columns:minmax(0,1fr)}
  .mtc-rhead .mtc-acts{justify-content:flex-start;margin-left:0}
  .mtc-opts{margin-left:0}
}
@container mtcw (max-width:430px){
  .mtc-ex,.mtc-src,.mtc-rhead,.mtc-tbar,.mtc-cbar{padding-left:12px;padding-right:12px}
  .mtc-gridbox,.mtc-code{margin-left:12px;margin-right:12px}
  .mtc-notes{padding-left:12px;padding-right:12px}
  .mtc-acts .v2-btn{padding:0 10px}
  .mtc-grid th,.mtc-grid td{max-width:16em}
}