/* ══════════════════════════════════════════════════════════════════
   ui.css — 동영상 자막 추출 (고객용)
   ------------------------------------------------------------------
   **구조는 자막 번역기(sub-tr-1m)의 `assets/style.css` 를 이어받았다.**
   같은 곳에서 서비스되는 도구들이 한 식구로 보여야 하므로
   토큰 **이름**(:root 변수)과 컴포넌트 클래스 이름은 **그대로** 썼다.

     토큰      --background · --primary · --accent · --success · --warning
               --destructive · --border · --input · --ring · --radius
               --shadow · --max-width · --sans
     컴포넌트  .site-header .masthead .brand-mark .page-shell .workspace
               .flow-rail .panel .section-heading .section-number
               .badge .state .notice .drop-zone .drop-mark .button
               .metrics-grid .field .action-row .support-table .site-footer

   **클래스 이름과 토큰 이름을 바꾸지 마라** — 그 순간 두 도구가 갈라진다.

   ── ⚠ 색(토큰 값)은 2026-08-05 결정과 달리 자막 번역기를 따르지 않는다 (2026-08-10 개정)
   처음에는 색까지 자막 번역기와 맞춰 "한 식구" 로 보이게 했다. 지금은 반대로
   **한눈에 다른 서비스임을 알 수 있도록 일부러 다른 색조(보라 계열)를 쓴다.**
   대신 무엇이 같아야 하는지는 그대로다 — 토큰 이름 · 클래스 이름 · 화면 형식(제호 →
   단계 표시 → 패널 → 통계 표 → 확인된 범위 표)은 여전히 자막 번역기와 같다.
   자막 번역기 쪽 디자인이 바뀌어도 이 색은 따라가지 않는다. 근거는 02_설계결정.md §8.

   ── 이 파일에만 있는 것 (자막 번역기에는 없는 화면)
     .queue-*   여러 동영상을 올렸을 때의 목록
     .track-*   찾은 자막 한 줄과 미리보기
     .attach-*  컨테이너에 첨부된 자막
   전부 위 토큰만 쓰고 새 색을 만들지 않는다.
   ══════════════════════════════════════════════════════════════════ */

:root {
    /* 보라 계열 — 자막 번역기(남색+주황)와 한눈에 구분되도록 일부러 다른 색조를 썼다 */
    --background: #f8f6fb;
    --foreground: #201a2b;
    --card: #ffffff;
    --card-foreground: #201a2b;
    --primary: #5b3fa0;
    --primary-foreground: #ffffff;
    --secondary: #efeaf7;
    --secondary-foreground: #3a2d52;
    --muted: #f2eff8;
    --muted-foreground: #6f647f;
    --accent: #d9822b;
    --success: #28785e;
    --success-soft: #e8f5ef;
    --warning: #956200;
    --warning-soft: #fff5d9;
    --destructive: #b43b45;
    --destructive-soft: #fff0f1;
    --border: #e2dcee;
    --input: #d2c7e3;
    --ring: #7c52c4;
    --radius: 14px;
    --shadow: 0 1px 2px rgba(45, 30, 70, .05), 0 12px 36px rgba(45, 30, 70, .08);
    /* 허브(Proxutil 메인)의 이 도구 아이콘과 같은 배경색. 허브 쪽 값이 바뀌어도
       이 값은 따로 관리한다(브랜드마크가 여기 있는 것과 같은 이유 — 02_설계결정.md §8) */
    --brand-icon-bg: #ccfbf1;
    --max-width: 820px;
    --sans: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
    --mono: ui-monospace, SFMono-Regular, Consolas, monospace;
}

@media (prefers-color-scheme: dark) {
    :root {
        --background: #16121f;
        --foreground: #ece7f5;
        --card: #1e1830;
        --card-foreground: #ece7f5;
        --primary: #b79ce8;
        --primary-foreground: #1f1233;
        --secondary: #2a2140;
        --secondary-foreground: #ece7f5;
        --muted: #241c38;
        --muted-foreground: #ac9fc4;
        --accent: #f0a94e;
        --success: #7bc2a5;
        --success-soft: #1b342b;
        --warning: #efc46c;
        --warning-soft: #392f1a;
        --destructive: #f08b92;
        --destructive-soft: #402327;
        --border: #3a2f52;
        --input: #4a3d68;
        --ring: #c9b3ef;
        --shadow: 0 14px 36px rgba(0, 0, 0, .35);
        --brand-icon-bg: #134e4a;
    }
}

/* ⚠ 자막 번역기는 화면을 감출 때 `.is-hidden` 클래스를 쓰지만
   이 앱은 **hidden 속성**을 쓴다(view.js 가 `el.hidden = true` 로 한다).
   hidden 은 브라우저 **기본** 스타일시트의 `[hidden]{display:none}` 으로 동작해
   우선순위가 가장 낮고, `.panel{...}` 처럼 우리가 적은 선언에 밀린다.
   실제로 그것 때문에 "비우기를 눌러도 파일 줄이 남는" 버그가 있었다.
   그래서 여기서 한 번 못 박는다. (test/t_ui.js §1 이 이 한 줄을 검사한다.) */
[hidden] { display: none !important; }

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
    margin: 0;
    color: var(--foreground);
    background: var(--background);
    font-family: var(--sans);
    font-size: 15px;
    line-height: 1.55;
    -webkit-font-smoothing: antialiased;
}
button, input, select { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
a { color: inherit; text-underline-offset: .18em; }
code { font-family: var(--mono); font-size: .9em; }
h1, h2, h3, p { overflow-wrap: anywhere; }

.skip-link {
    position: fixed; left: 16px; top: -100px; z-index: 10;
    padding: 10px 14px; border-radius: 8px;
    background: var(--foreground); color: var(--background);
}
.skip-link:focus { top: 16px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 3px; }

/* ────────────────────────────────────────────── 제호 */

.site-header { background: var(--card); border-bottom: 1px solid var(--border); }
.masthead {
    max-width: var(--max-width); margin: 0 auto; padding: 20px 22px;
    display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.brand-lockup { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-mark-link { flex: 0 0 auto; line-height: 0; transition: transform .15s ease; }
.brand-mark-link:hover { transform: scale(1.05); }
.brand-mark {
    flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: 12px; background: var(--brand-icon-bg); color: var(--foreground);
    font-size: 1.25rem; font-weight: 800;
}
h1 { margin: 0; font-size: 1.1rem; line-height: 1.25; letter-spacing: -.02em; }
h2 { margin: 0; font-size: clamp(1.2rem, 3vw, 1.55rem); line-height: 1.3; letter-spacing: -.025em; }
.subtitle { margin: 2px 0 0; color: var(--muted-foreground); font-size: .82rem; }

/* 메인(Proxutil 허브)으로 돌아가는 단추. huyangrim 의 상단 구성을 참고했으나
   이 앱의 site-header 는 밝은 카드 배경이라 반투명 유리 버튼 대신 테두리 알약을 쓴다. */
.header-actions { flex: 0 0 auto; }
.btn-home {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 9px 18px; border-radius: 999px;
    border: 1px solid var(--border); background: var(--secondary); color: var(--secondary-foreground);
    font-size: .84rem; font-weight: 700; text-decoration: none; white-space: nowrap;
    transition: border-color .15s ease, color .15s ease, background-color .15s ease, transform .15s ease;
}
.btn-home:hover { border-color: var(--primary); color: var(--primary); background: var(--card); transform: translateY(-1px); }

.page-shell { max-width: var(--max-width); margin: 0 auto; padding: 34px 22px 64px; }
.workspace { display: flex; flex-direction: column; gap: 18px; }

/* ────────────────────────────────────────────── 단계 */

.flow-rail {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    margin: 0 0 4px; padding: 0; list-style: none; color: var(--muted-foreground);
    font-size: .78rem; font-weight: 650;
}
.flow-rail li { position: relative; display: flex; align-items: center; justify-content: center; gap: 7px; min-width: 0; }
/* 번호+글자를 칸 가운데에 두려고 양옆에 똑같이 늘어나는 선을 둔다.
   맨 앞/맨 뒤는 짝이 되는 선이 없으므로 투명하게 남겨 균형을 맞춘다. */
.flow-rail li::before,
.flow-rail li::after {
    content: ""; height: 1px; flex: 1; min-width: 12px; background: var(--border);
}
.flow-rail li::before { margin-right: 8px; }
.flow-rail li::after { margin-left: 8px; }
.flow-rail li:first-child::before { background: transparent; }
.flow-rail li:last-child::after { background: transparent; }
.flow-rail span {
    display: grid; place-items: center; width: 24px; height: 24px; flex: 0 0 auto;
    border: 1px solid var(--border); border-radius: 999px; background: var(--card);
    font-variant-numeric: tabular-nums;
}
.flow-rail .is-current { color: var(--foreground); }
.flow-rail .is-current span { border-color: var(--primary); background: var(--primary); color: var(--primary-foreground); }
/* 지나온 단계. 되돌아갈 수 있다는 것을 색으로만 알린다 */
.flow-rail .is-done span { border-color: var(--primary); color: var(--primary); }

/* ────────────────────────────────────────────── 패널 */

.panel {
    min-width: 0; padding: clamp(20px, 4vw, 28px);
    border: 1px solid var(--border); border-radius: var(--radius);
    background: var(--card); color: var(--card-foreground); box-shadow: var(--shadow);
}
.section-heading { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; }
.section-number {
    margin: 0 0 4px; color: var(--muted-foreground); font-size: .72rem;
    font-weight: 750; letter-spacing: .08em; text-transform: uppercase;
}
.badge, .state {
    display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
    padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px;
    background: var(--secondary); color: var(--secondary-foreground);
    font-size: .72rem; font-weight: 650; line-height: 1.3; white-space: nowrap;
}
/* 추정·표본처럼 "아직 확실하지 않다" 는 표시는 전부 이 색이다.
   자막 번역기의 .badge.estimate 와 같은 뜻으로 쓴다. */
.badge.estimate { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.badge.muted { color: var(--muted-foreground); }
.badge.good { color: var(--success); background: var(--success-soft); border-color: transparent; }
.badge.bad { color: var(--destructive); background: var(--destructive-soft); border-color: transparent; }

/* ────────────────────────────────────────────── 알림 */

#notes:empty { display: none; }
#notes { display: flex; flex-direction: column; gap: 12px; }
.notice {
    display: flex; flex-direction: column; gap: 3px; padding: 14px 16px;
    border: 1px solid var(--border); border-radius: 10px; background: var(--card);
}
.notice span { color: var(--muted-foreground); }
.notice-warning { color: var(--warning); background: var(--warning-soft); }
.notice-error { color: var(--destructive); background: var(--destructive-soft); }
.notice-ok { color: var(--success); background: var(--success-soft); }
.notice ul { margin: 3px 0 0; padding-left: 18px; }
/* 조치 방법. 원인만 적고 끝내면 사용자는 할 일이 없다 */
.notice .notice-action { color: inherit; opacity: .82; }

/* ────────────────────────────────────────────── 파일 받는 곳 */

.drop-zone {
    min-height: 190px; padding: 28px 20px;
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
    border: 1.5px dashed var(--input); border-radius: 12px; background: var(--muted);
    text-align: center; cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, transform .15s ease;
}
.drop-zone:hover, .drop-zone.is-dragging, .drop-zone:focus-visible, .drop-zone:focus-within {
    border-color: var(--primary); background: var(--secondary); transform: translateY(-1px);
}
.drop-zone.is-disabled { opacity: .55; cursor: not-allowed; transform: none; }
.drop-zone span { color: var(--muted-foreground); font-size: .85rem; }
.drop-mark {
    display: grid; place-items: center; width: 54px; height: 54px; margin-bottom: 4px;
    border-radius: 14px; background: var(--card); color: var(--primary); border: 1px solid var(--border);
    font-size: .78rem; font-weight: 800; letter-spacing: .04em;
}
.native-file-input {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.file-picker-button { display: inline-flex; pointer-events: none; }
.file-picker-help { margin: 10px 0 0; color: var(--muted-foreground); font-size: .78rem; text-align: center; }

/* ────────────────────────────────────────────── 단추 */

.button {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    min-height: 40px; padding: 0 16px; border: 1px solid transparent; border-radius: 9px;
    background: var(--secondary); color: var(--secondary-foreground);
    font-weight: 700; cursor: pointer;
    transition: background-color .15s ease, transform .15s ease, opacity .15s ease;
}
.button:hover:not(:disabled) { transform: translateY(-1px); }
.button:disabled { opacity: .45; cursor: not-allowed; }
.button.primary { background: var(--primary); color: var(--primary-foreground); }
.button.primary:hover:not(:disabled) { filter: brightness(.94); }
.button.secondary { border-color: var(--border); background: var(--card); color: var(--foreground); }
.button.large { min-height: 48px; padding-inline: 24px; }
.button.small { min-height: 32px; padding: 0 11px; font-size: .82rem; }
.text-button {
    border: 0; padding: 4px 0; background: transparent; color: var(--primary);
    font-size: .84rem; font-weight: 650; cursor: pointer;
}
.text-button:hover:not(:disabled) { text-decoration: underline; }
.text-button:disabled { opacity: .45; cursor: not-allowed; }

/* ────────────────────────────────────────────── 파일 요약 */

.file-summary { margin-top: 18px; }
.file-name-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 12px; }
.file-name-row strong { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-nav { display: flex; align-items: center; gap: 12px; white-space: nowrap; }
.metrics-grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px;
    margin: 0; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; background: var(--border);
}
.metrics-grid > div { min-width: 0; padding: 12px 13px; background: var(--card); }
.metrics-grid dt { color: var(--muted-foreground); font-size: .75rem; font-weight: 600; }
.metrics-grid dd {
    min-width: 0; margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    font-weight: 750; font-variant-numeric: tabular-nums;
}

/* ────────────────────────────────────────────── 올린 파일 목록 */

.queue-list { margin-top: 14px; overflow: hidden; border: 1px solid var(--border); border-radius: 10px; }
.queue-head {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 9px 13px; background: var(--muted); border-bottom: 1px solid var(--border);
    color: var(--muted-foreground); font-size: .78rem; font-weight: 650;
}
.queue-row {
    /* 번호 · 이름(줄어드는 칸) · 크기 · 상태 · 빼기
       이름 칸에 minmax(0,1fr) 이 없으면 긴 파일 이름이 칸을 밀어내 단추가 잘린다 */
    display: grid; grid-template-columns: 1.4rem minmax(0, 1fr) auto auto 1.8rem;
    align-items: center; gap: 10px;
    padding: 9px 13px; border-top: 1px solid var(--border);
    background: var(--card); font-size: .85rem;
}
.queue-row:first-of-type { border-top: 0; }
.queue-row.is-current { background: var(--secondary); }
.queue-row__pick {
    display: contents; border: 0; padding: 0; margin: 0;
    background: none; font: inherit; color: inherit; text-align: left; cursor: pointer;
}
.queue-row__no { color: var(--muted-foreground); font-variant-numeric: tabular-nums; }
.queue-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.queue-row__size {
    color: var(--muted-foreground); font-size: .78rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.queue-row__del {
    display: grid; place-items: center; width: 1.8rem; height: 1.8rem;
    border: 0; border-radius: 7px; background: none; cursor: pointer;
    color: var(--muted-foreground); font-size: .82rem; line-height: 1;
}
.queue-row__del:hover { background: var(--destructive-soft); color: var(--destructive); }

/* ────────────────────────────────────────────── 진행 */

.progress-percent { font-size: 1.55rem; font-weight: 750; font-variant-numeric: tabular-nums; }
.progress-track { height: 9px; overflow: hidden; border-radius: 999px; background: var(--border); }
.progress-track span { display: block; width: 0; height: 100%; background: var(--accent); transition: width .18s ease; }
.progress-status { margin: 11px 0 0; font-weight: 700; }
.progress-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-top: 10px; color: var(--muted-foreground); font-size: .8rem;
    font-variant-numeric: tabular-nums;
}
/* 얼마나 걸릴지 아직 모르는 구간. 자막 번역기의 조사 진행 표시와 같은 움직임을 쓴다. */
.progress-panel.is-indeterminate .progress-track span {
    width: 36%; animation: progress-sweep 1.25s ease-in-out infinite;
}
@keyframes progress-sweep {
    0% { transform: translateX(-120%); } 55% { transform: translateX(120%); } 100% { transform: translateX(300%); }
}

/* ────────────────────────────────────────────── 찾은 자막

   폭 계산 — 이 화면에서 가장 빠듯한 곳
   지면 820px − 좌우 22×2 = 776, 패널 안쪽 28×2 = 720px 이 실제 폭.
     체크 1.15rem(18) + 12 + 언어(1fr) + 줄수 auto + 단추 auto
   줄 수는 tabular-nums 로 자리를 고정하고 언어 칸에만 minmax(0,1fr) 을 준다.
   그러지 않으면 "일본어 · 추정 · SDH" 같은 긴 조합이 저장 단추를 밖으로 밀어낸다. */

.track {
    display: grid; grid-template-columns: 1.15rem minmax(0, 1fr) auto auto;
    align-items: center; gap: 12px;
    padding: 14px 0; border-top: 1px solid var(--border);
}
.track:first-child { border-top: 0; padding-top: 0; }
.track.is-unusable { opacity: .75; }
.track__check { width: 1.15rem; height: 1.15rem; accent-color: var(--primary); cursor: pointer; }
.track__check:disabled { cursor: not-allowed; }
.track__lang { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; min-width: 0; }
.track__name { font-weight: 750; }
.track__count {
    color: var(--muted-foreground); font-size: .82rem;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.track__files { display: flex; flex-wrap: wrap; gap: 6px; justify-content: flex-end; }
.track__extra { grid-column: 1 / -1; }
.track__warn {
    margin-top: 8px; padding: 9px 12px; border-radius: 8px;
    background: var(--warning-soft); color: var(--warning); font-size: .82rem;
}
.track__prev > summary { cursor: pointer; color: var(--muted-foreground); font-size: .82rem; padding: 5px 0 0; }
.track__prev > summary:hover { color: var(--foreground); }
.track__prev pre {
    max-height: 15rem; margin: 8px 0 0; padding: 12px 14px; overflow: auto;
    border-radius: 8px; background: var(--muted);
    font-family: var(--mono); font-size: .78rem; line-height: 1.75;
    white-space: pre-wrap; overflow-wrap: anywhere;
}
.track__prev pre .t { color: var(--muted-foreground); }

.attach-row {
    display: grid; grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center; gap: 10px;
    padding: 11px 0; border-top: 1px solid var(--border); font-size: .88rem;
}
.attach-row:first-child { border-top: 0; padding-top: 0; }
.attach-row__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.attach-row__size { color: var(--muted-foreground); font-size: .78rem; font-variant-numeric: tabular-nums; }

/* ────────────────────────────────────────────── 접히는 설정 · 표 */

.option-settings { margin-top: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--card); }
.option-settings summary, .support-table > summary {
    padding: 13px 15px; cursor: pointer; font-weight: 700; list-style-position: inside;
}
.option-settings summary span { float: right; color: var(--muted-foreground); font-size: .78rem; font-weight: 550; }
.option-settings__content { padding: 4px 15px 16px; }

.form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px; }
.field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.field > label { font-size: .8rem; font-weight: 700; }
.field input, .field select {
    min-width: 0; width: 100%; min-height: 42px; padding: 10px 11px;
    border: 1px solid var(--input); border-radius: 8px;
    background: var(--card); color: var(--foreground);
}
.field input { font-variant-numeric: tabular-nums; }
.field-help, .fine-print { color: var(--muted-foreground); font-size: .79rem; }
.full-field { grid-column: 1 / -1; }

.action-row { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; margin-top: 20px; }
.action-row .fine-print { margin-right: auto; }
.action-row .fine-print b { color: var(--foreground); font-variant-numeric: tabular-nums; }

.support-table { margin-top: 18px; padding: 0; box-shadow: none; background: transparent; }
.support-table > summary { color: var(--muted-foreground); font-size: .82rem; }
.support-table__content { padding: 8px 22px 22px; }
.table-wrap { overflow-x: auto; }
table { width: 100%; min-width: 650px; border-collapse: collapse; }
th, td { padding: 11px 9px; border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
th { color: var(--muted-foreground); font-size: .78rem; font-weight: 650; }
.state.supported { color: var(--success); background: var(--success-soft); border-color: transparent; }
.state.unverified { color: var(--warning); background: var(--warning-soft); border-color: transparent; }
.state.unsupported { color: var(--muted-foreground); }

.site-footer { padding: 24px 22px 38px; color: var(--muted-foreground); text-align: center; font-size: .8rem; }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

@media (max-width: 720px) {
    .masthead {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        gap: 10px;
    }
    .brand-lockup {
        display: flex;
        align-items: center;
        gap: 10px;
        flex: 1 1 auto;
        min-width: 0;
    }
    .brand-mark {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 1.15rem;
    }
    h1 {
        font-size: 1.05rem;
        line-height: 1.2;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
    }
    .subtitle {
        display: none !important;
    }
    .btn-home {
        padding: 6px 12px;
        font-size: 0.82rem;
        gap: 4px;
        min-height: 32px;
        flex-shrink: 0;
    }
    .page-shell { padding: 24px 13px 48px; }
    .panel { padding: 19px 15px; border-radius: 12px; }
    .flow-rail { font-size: .7rem; }
    .flow-rail li::before, .flow-rail li::after { min-width: 5px; }
    .section-heading { display: grid; gap: 9px; }
    .form-grid, .metrics-grid { grid-template-columns: 1fr; }
    .drop-zone { min-height: 170px; padding-inline: 14px; }
    .file-name-row { align-items: flex-start; }
    .action-row { align-items: stretch; flex-direction: column; }
    .action-row .button { width: 100%; }
    .action-row .fine-print { margin-right: 0; }
    /* 좁은 화면에서는 저장 단추를 아랫줄로 내린다.
       한 줄에 다 넣으면 언어 이름이 두세 글자로 잘려 무엇인지 알 수 없게 된다. */
    .track { grid-template-columns: 1.15rem minmax(0, 1fr) auto; }
    .track__files { grid-column: 2 / -1; justify-content: flex-start; margin-top: 4px; }
}

@media (max-width: 380px) {
    h1 { font-size: 0.95rem; }
    .btn-home { padding: 5px 10px; font-size: .78rem; }
}


@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after { transition: none !important; }
    .progress-panel.is-indeterminate .progress-track span { animation: none !important; width: 100%; opacity: .55; }
}