/* convert.css — 포맷 변환기 전용 (색은 토큰만 · 평면) */
.cv { display: grid; gap: 16px; grid-template-columns: minmax(0, 1fr); grid-template-areas: "dz" "side" "work"; }
.cv-dz { grid-area: dz; min-width: 0; }
.cv-side { grid-area: side; min-width: 0; }
.cv-work { grid-area: work; min-width: 0; display: flex; flex-direction: column; gap: 14px; scroll-margin-top: 72px; }
.cv-work:empty { display: none; }
@media (min-width: 901px) {
  .cv { grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "dz side" "work side"; align-items: start; }
  .cv-side { position: sticky; top: 74px; }
}
.cv .dropzone { min-height: 170px; }

.cv-fmt { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; }
.cv-fmt button { padding: 9px 6px; font-size: .9rem; }
.cv-fmt button:disabled, .cv-side .seg button:disabled { opacity: .4; cursor: not-allowed; }
.cv-side .seg { width: 100%; display: flex; }
.cv-side .seg button { flex: 1 1 0; min-width: 0; }
.cv-bg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-side [data-opt="ico"] .seg { margin-top: 2px; }
.cv-side [data-opt="ico"] .hint { margin: 0 0 6px; }
.cv-side .field .hint { margin: 0; }

.cv-progress { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--surface); padding: 12px 14px; display: flex; flex-direction: column; gap: 10px; }
.cv-progress-row { display: flex; align-items: center; gap: 10px; font-size: .9rem; font-weight: 600; min-width: 0; }
.cv-progress-row span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-progress .spinner { width: 18px; height: 18px; border-width: 2px; flex: none; }

.cv-meta { border: 1px solid var(--line); border-radius: var(--r-l); background: var(--surface); padding: 16px; }
.cv-meta-title { margin: 0 0 4px; font-size: .95rem; font-weight: 800; }
.cv-meta > .hint { margin: 0 0 10px; }
.cv-meta-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.cv-meta-list li { display: flex; flex-direction: column; gap: 6px; padding: 10px 0; border-top: 1px solid var(--line); }
.cv-meta-list li:first-child { border-top: 0; padding-top: 2px; }
.cv-meta-name { font-weight: 700; font-size: .88rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cv-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.cv-tag { display: inline-flex; gap: 5px; align-items: baseline; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--ink-2); font-size: .8rem; max-width: 100%; overflow-wrap: anywhere; }
.cv-tag b { color: var(--ink); font-weight: 700; }
.cv-tag-warn { background: transparent; box-shadow: inset 0 0 0 1px var(--danger); color: var(--danger); }
.cv-tag-warn b { color: var(--danger); }