/* font.sw4u.kr — 손글씨 → 한글 폰트
 * 시안: designer 2026-10-10 (.design/sw4u/font/spec.md)
 * 색·글꼴·간격·그림자는 모두 /assets/tokens.css 변수만 쓴다. 하드코딩 금지(1px 선·불투명도 숫자 제외).
 * 모바일 우선: 기본 = 360px 휴대폰, 640px 이상 = 태블릿, 1024px 이상 = 데스크톱(본문 최대 960px).
 * sw4u 라이트의 --color-primary(#0ea5e9)는 흰 바탕 글자 대비가 2.8:1 이라
 *   글자·테두리·채움 막대에는 --color-primary-soft-fg / --color-primary-strong 을 쓰고,
 *   --color-primary 는 포커스 외곽선·드래그 강조처럼 "글자가 아닌 장식"에만 쓴다. */

*,
*::before,
*::after { box-sizing: border-box; }

/* html 에 data-theme 가 항상 붙으므로 폼 컨트롤·스크롤바 다크 처리를 직접 건다 */
[data-theme="dark"] { color-scheme: dark; }

body {
    margin: 0;
    background: var(--color-bg);
    color: var(--color-fg);
    font-family: var(--font-sans);
    font-size: var(--fs-base);
    line-height: var(--line-base);
    word-break: keep-all;
}

a { color: var(--color-primary-soft-fg); }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.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;
}

.skip-link {
    position: absolute;
    left: var(--space-4);
    top: calc(var(--space-12) * -1);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    color: var(--color-fg);
    z-index: var(--z-toast);
}
.skip-link:focus { top: var(--space-2); }

/* container-lg(1024) - 좌우 space-8 = 본문 960px */
.container {
    width: 100%;
    max-width: var(--container-lg);
    margin: 0 auto;
    padding-left: var(--space-4);
    padding-right: var(--space-4);
}

/* ─────────────────────────── 상단 바 ─────────────────────────── */
.topbar { border-bottom: 1px solid var(--color-border); background: var(--color-surface); }
.topbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    min-height: var(--header-height-mobile);
}
.brand {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--color-fg);
    font-weight: var(--fw-bold);
    text-decoration: none;
}
.brand__mark {
    display: inline-grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border-radius: var(--radius-md);
    background: var(--color-primary-strong);
    color: var(--color-primary-fg);
    font-size: var(--fs-md);
    line-height: 1;
}
.brand__domain { color: var(--color-fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }
.theme-toggle {
    min-height: calc(var(--space-10) + var(--space-1));
    padding: var(--space-2) var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.theme-toggle:hover { background: var(--color-surface-2); }

/* ─────────────────────────── 버튼 ─────────────────────────── */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: calc(var(--space-10) + var(--space-1));   /* 44px 터치 영역 */
    padding: var(--space-2) var(--space-5);
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font: inherit;
    font-weight: var(--fw-semibold);
    line-height: var(--line-tight);
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.btn svg { flex-shrink: 0; width: var(--space-5); height: var(--space-5); }
.btn--primary { background: var(--color-primary-strong); color: var(--color-primary-fg); box-shadow: var(--shadow-sm); }
.btn--primary:hover { box-shadow: var(--shadow-md); transform: translateY(calc(var(--space-1) * -0.5)); }
.btn--secondary { background: var(--color-bg); color: var(--color-primary-soft-fg); border-color: var(--color-primary-soft-fg); }
.btn--secondary:hover { background: var(--color-primary-soft); }
.btn--ghost { background: transparent; color: var(--color-fg); border-color: var(--color-border-strong); }
.btn--ghost:hover { background: var(--color-surface-2); }
.btn--sm { min-height: var(--space-10); padding: var(--space-1) var(--space-3); font-size: var(--fs-sm); }
.btn--lg { min-height: calc(var(--space-12) + var(--space-1)); padding: var(--space-3) var(--space-8); font-size: var(--fs-md); }
.btn--block { width: 100%; }
.btn__meta { font-size: var(--fs-xs); font-weight: var(--fw-medium); opacity: .85; }
.btn:disabled,
.btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; box-shadow: none; transform: none; }

/* ─────────────────────────── 알림 상자 ─────────────────────────── */
/* soft 바탕 위 글자는 항상 --color-fg (warn/danger 에는 *-soft-fg 토큰이 없다 — spec §7 제안) */
.callout {
    margin: 0;
    padding: var(--space-3) var(--space-4);
    border-left: 4px solid var(--color-border-strong);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-fg);
    font-size: var(--fs-sm);
}
.callout strong { font-weight: var(--fw-bold); }
.callout--warn { border-left-color: var(--color-warn); background: var(--color-warn-soft); }
.callout--danger { border-left-color: var(--color-danger); background: var(--color-danger-soft); }
.callout--info { border-left-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); }
.callout--ok { border-left-color: var(--color-success); background: var(--color-success-soft); color: var(--color-success-soft-fg); }

.alert {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4);
    border: 1px solid var(--color-danger);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--color-danger-soft);
    color: var(--color-fg);
    font-size: var(--fs-sm);
}
.alert:focus { outline: none; box-shadow: var(--shadow-focus); }
.alert__title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.alert ul { margin: 0; padding-left: var(--space-5); }
.alert a { color: var(--color-fg); font-weight: var(--fw-semibold); }

/* ─────────────────────────── 진행 막대 ─────────────────────────── */
.progress {
    height: var(--space-3);
    border-radius: var(--radius-full);
    background: var(--color-surface-2);
    box-shadow: inset 0 0 0 1px var(--color-border);
    overflow: hidden;
}
.progress__bar {
    width: var(--progress, 0%);
    height: 100%;
    border-radius: inherit;
    background: var(--color-primary-strong);
    transition: width var(--duration-slow) var(--ease-out);
}

/* ─────────────────────────── 섹션 공통 ─────────────────────────── */
.section { padding: var(--space-12) 0 0; }
.section:last-of-type { padding-bottom: var(--space-12); }
.section__title { margin: 0 0 var(--space-2); font-size: var(--fs-xl); }
.section__lead { margin: 0 0 var(--space-6); color: var(--color-fg-muted); }
.panel {
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
    box-shadow: var(--shadow-xs);
}
.hint { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.eyebrow {
    margin: 0;
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    letter-spacing: var(--letter-wide);
}

/* ═══════════════════════ 화면 1 — 랜딩 + 업로드 ═══════════════════════ */

/* 히어로: primary-soft 띠. 이 위에서는 fg-muted 가 4.5:1 미만이라 본문색만 쓴다 */
.hero { padding: var(--space-10) 0; background: var(--color-primary-soft); border-bottom: 1px solid var(--color-border); }
.hero__grid { display: grid; gap: var(--space-8); align-items: center; }
.hero h1 { margin: var(--space-2) 0 var(--space-3); font-size: var(--fs-2xl); }
.hero__lead { margin: 0 0 var(--space-5); font-size: var(--fs-base); }
.hero__lead strong { color: var(--color-primary-soft-fg); }
.hero__actions { display: grid; gap: var(--space-3); }
.hero__meta { margin: var(--space-4) 0 0; font-size: var(--fs-sm); }

/* 160칸 → 2,350자 공식 */
.formula {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2);
    margin: 0 0 var(--space-6);
    padding: 0;
    list-style: none;
}
.formula__item {
    display: grid;
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    line-height: var(--line-tight);
}
.formula__num { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.formula__label { font-size: var(--fs-xs); }
.formula__op { color: var(--color-primary-soft-fg); font-weight: var(--fw-bold); }

/* 히어로 장식: 양식 칸 → 폰트 (aria-hidden, 데스크톱에서만) */
.sheet-art { display: none; }

/* 3단계 */
.steps { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
.step {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-4);
    align-items: start;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.step > :not(.step__num) { grid-column: 2; }
.step__num {
    grid-row: span 4;
    display: inline-grid;
    place-items: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-md);
    font-weight: var(--fw-bold);
}
.step__title { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-md); }
.step__body { margin: 0 0 var(--space-3); color: var(--color-fg-muted); font-size: var(--fs-sm); }
.step__action { display: grid; gap: var(--space-3); }
.tips { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--fs-sm); }
.tips li { position: relative; padding-left: var(--space-5); }
.tips li::before {
    content: "";
    position: absolute;
    left: var(--space-1);
    top: calc(var(--space-2) + var(--space-1) * 0.25);
    width: var(--space-2);
    height: var(--space-2);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft-fg);
}

/* 업로드 폼 */
.upload-form { display: grid; gap: var(--space-6); }
.field { display: grid; gap: var(--space-2); }
.field__label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-2); font-weight: var(--fw-semibold); }
.field__req { margin-left: var(--space-1); color: var(--color-primary-soft-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.field__count { color: var(--color-fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.field__count.is-over { color: var(--color-danger); font-weight: var(--fw-semibold); }
.input {
    width: 100%;
    min-height: calc(var(--space-12) - var(--space-1));
    padding: var(--space-2) var(--space-3);
    border: 1px solid var(--color-border-input);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-base);      /* 16px 미만이면 iOS 가 확대한다 */
}
.input::placeholder { color: var(--color-fg-muted); }
.input:focus-visible { outline: none; border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.field__hint { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.field__error { display: flex; gap: var(--space-1); margin: 0; color: var(--color-danger); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.field__error::before { content: "!"; display: inline-grid; place-items: center; flex-shrink: 0; width: var(--space-5); height: var(--space-5); margin-top: calc(var(--space-1) * 0.25); border-radius: var(--radius-full); background: var(--color-danger); color: var(--color-danger-fg); font-size: var(--fs-xs); }
.field__error[hidden] { display: none; }

/* 드롭 영역 — <label for="files"> 전체가 눌림 영역 */
.dropzone {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    border: 2px dashed var(--color-border-input);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    text-align: center;
    cursor: pointer;
    transition: border-color var(--duration-fast) var(--ease-out), background-color var(--duration-fast) var(--ease-out);
}
.dropzone:hover { border-color: var(--color-primary-soft-fg); }
.dropzone:focus-within { border-color: var(--color-primary); box-shadow: var(--shadow-focus); }
.dropzone.is-dragover { border-style: solid; border-color: var(--color-primary); background: var(--color-primary-soft); }
.dropzone.is-invalid { border-color: var(--color-danger); }
.dropzone__icon {
    display: grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
}
.dropzone__icon svg { width: var(--space-6); height: var(--space-6); }
.dropzone__title { margin: 0; font-weight: var(--fw-semibold); }
.dropzone__pick { color: var(--color-primary-soft-fg); text-decoration: underline; text-underline-offset: 0.2em; }
.dropzone__hint { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
/* 손가락 기기에는 "끌어오기" 문구를 숨긴다 */
@media (pointer: coarse) { .dropzone__drag { display: none; } }

/* 선택된 파일 목록 */
.file-summary { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); font-size: var(--fs-sm); }
.file-summary[hidden] { display: none; }
.file-summary__count { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.file-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.file-item {
    display: grid;
    grid-template-columns: var(--space-12) 1fr auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-2);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.file-item.is-invalid { border-color: var(--color-danger); }
.file-item__thumb {
    display: grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    overflow: hidden;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-surface-2);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    font-weight: var(--fw-bold);
}
.file-item__thumb img { width: 100%; height: 100%; object-fit: cover; }
.file-item__info { min-width: 0; }
.file-item__name { margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.file-item__meta { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.file-item__error { margin: 0; color: var(--color-danger); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.file-item__remove {
    display: grid;
    place-items: center;
    width: calc(var(--space-10) + var(--space-1));
    height: calc(var(--space-10) + var(--space-1));
    border: 0;
    border-radius: var(--radius-md);
    background: transparent;
    color: var(--color-fg-muted);
    cursor: pointer;
}
.file-item__remove:hover { background: var(--color-surface-2); color: var(--color-fg); }
.file-item__remove svg { width: var(--space-5); height: var(--space-5); }

/* 제출 */
.submit { display: grid; gap: var(--space-3); }
.submit .progress[hidden] { display: none; }
.submit.is-uploading .btn { cursor: progress; }

/* 하단 안내 3종 */
.promises { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.promise {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-surface);
}
.promise__icon {
    grid-row: span 2;
    display: grid;
    place-items: center;
    width: var(--space-10);
    height: var(--space-10);
    border-radius: var(--radius-md);
    background: var(--color-surface-2);
    color: var(--color-primary-soft-fg);
}
.promise__icon svg { width: var(--space-5); height: var(--space-5); }
.promise__title { margin: 0; font-size: var(--fs-base); }
.promise p { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }

.footer {
    padding: var(--space-8) 0;
    border-top: 1px solid var(--color-border);
    color: var(--color-fg-muted);
    font-size: var(--fs-xs);
    text-align: center;
}
.footer p { margin: 0; }

/* ═══════════════════════ 화면 2 — /job/{id} ═══════════════════════ */
/* main.container.job — 좌우 여백은 .container 몫이라 위아래만 준다 */
.job { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-12); }

.job-head { display: grid; gap: var(--space-2); }
.job-head__title { margin: 0; font-size: var(--fs-2xl); overflow-wrap: anywhere; }
.job-head__meta { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }

/* 상태 뱃지 — 색만으로 구분하지 않도록 항상 글자 동반 */
.status-badge {
    justify-self: start;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-full);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
}
.status-badge::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: currentColor; }
.status-badge.is-queued { background: var(--color-surface-2); color: var(--color-fg); }
.status-badge.is-processing { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.status-badge.is-processing::before { animation: pulse 1.6s var(--ease-in-out) infinite; }
.status-badge.is-done { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.status-badge.is-failed { background: var(--color-danger-soft); color: var(--color-fg); }
.status-badge.is-failed::before { background: var(--color-danger); }

/* 상태 카드 공통 */
.state-card {
    display: grid;
    gap: var(--space-4);
    padding: var(--space-6) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-xl);
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}
.state-card__title { margin: 0; font-size: var(--fs-xl); }
.state-card__text { margin: 0; color: var(--color-fg-muted); }
.state-card--failed { border-top: 4px solid var(--color-danger); }

/* 대기 */
.queue-pos { display: flex; align-items: baseline; gap: var(--space-2); margin: 0; }
.queue-pos__num { font-size: var(--fs-4xl); font-weight: var(--fw-bold); line-height: 1; font-variant-numeric: tabular-nums; color: var(--color-primary-soft-fg); }
.queue-pos__label { font-size: var(--fs-md); font-weight: var(--fw-semibold); }

/* 폴링 표시 */
.live-note { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-fg-muted); font-size: var(--fs-xs); }
.live-note::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-success); animation: pulse 2s var(--ease-in-out) infinite; }
.live-note.is-offline::before { background: var(--color-warn); animation: none; }

/* 처리 중 */
.progress-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin: 0 0 var(--space-2); font-size: var(--fs-sm); }
.progress-head__pct { font-size: var(--fs-lg); font-weight: var(--fw-bold); font-variant-numeric: tabular-nums; }
.stages { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; counter-reset: stage; }
.stage {
    position: relative;
    display: grid;
    grid-template-columns: var(--space-8) 1fr;
    column-gap: var(--space-3);
    padding-bottom: var(--space-4);
}
.stage:last-child { padding-bottom: 0; }
/* 단계 사이 세로 연결선 */
.stage:not(:last-child)::after {
    content: "";
    position: absolute;
    left: calc(var(--space-4) - 1px);
    top: var(--space-8);
    bottom: 0;
    width: 2px;
    background: var(--color-border-strong);
}
.stage.is-done:not(:last-child)::after { background: var(--color-success); }
.stage__icon {
    grid-row: span 2;
    position: relative;
    z-index: 1;
    display: grid;
    place-items: center;
    width: var(--space-8);
    height: var(--space-8);
    border: 2px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-surface);
    color: var(--color-fg-muted);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.stage__icon svg { width: var(--space-4); height: var(--space-4); }
.stage.is-done .stage__icon { border-color: var(--color-success); background: var(--color-success); color: var(--color-success-fg); }
[data-theme="dark"] .stage.is-done .stage__icon { color: var(--color-bg); }
.stage.is-current .stage__icon { border-color: var(--color-primary-soft); border-top-color: var(--color-primary-strong); animation: spin 0.9s linear infinite; }
.stage__name { margin: var(--space-1) 0 0; font-weight: var(--fw-semibold); }
.stage.is-todo .stage__name { color: var(--color-fg-muted); font-weight: var(--fw-regular); }
.stage__desc { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.stage__state { margin-left: var(--space-2); color: var(--color-primary-soft-fg); font-size: var(--fs-xs); font-weight: var(--fw-semibold); }

/* 실패 */
.fail-icon {
    display: grid;
    place-items: center;
    width: var(--space-12);
    height: var(--space-12);
    border-radius: var(--radius-full);
    background: var(--color-danger-soft);
    color: var(--color-danger);
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
}
.fail-reason { margin: 0; }
.fail-reason__code { display: block; margin-top: var(--space-1); color: var(--color-fg); font-family: var(--font-mono); font-size: var(--fs-xs); opacity: .8; }
.state-card__actions { display: grid; gap: var(--space-3); }

/* 링크 보관 */
.keep-link {
    display: grid;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--color-primary-soft-fg);
    border-radius: var(--radius-lg);
    background: var(--color-primary-soft);
}
.keep-link__title { margin: 0; font-size: var(--fs-base); font-weight: var(--fw-bold); }
.keep-link__text { margin: 0; font-size: var(--fs-sm); }     /* primary-soft 위라 muted 대신 fg */
.keep-link__row { display: grid; gap: var(--space-2); }
.keep-link__url { font-family: var(--font-mono); font-size: var(--fs-sm); }
.copy-btn.is-copied { background: var(--color-success-soft); color: var(--color-success-soft-fg); border-color: var(--color-success); }

/* 완료 — 미리보기 */
.result-head { display: grid; gap: var(--space-2); }
.preview { display: grid; gap: var(--space-4); }
.preview__stage {
    min-height: calc(var(--space-16) * 2);
    margin: 0;
    padding: var(--space-5) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    color: var(--color-fg);
    /* --preview-font 은 페이지가 @font-face 이름으로 지정. 폰트에 없는 글자는 시스템 글꼴로 보인다 */
    font-family: var(--preview-font, var(--font-sans));
    font-size: var(--preview-size, var(--fs-4xl));
    line-height: var(--line-tight);
    letter-spacing: var(--letter-normal);
    overflow-wrap: anywhere;
    white-space: pre-wrap;
}
.preview__stage.is-loading { color: var(--color-fg-subtle); }
.preview__sample-en { display: block; margin-top: var(--space-2); font-size: 0.6em; }
.preview__controls { display: grid; gap: var(--space-4); }
.samples { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.sample-chip {
    min-height: var(--space-10);
    padding: var(--space-1) var(--space-3);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit;
    font-size: var(--fs-sm);
    cursor: pointer;
}
.sample-chip:hover { background: var(--color-surface-2); }
.sample-chip[aria-pressed="true"] { border-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); font-weight: var(--fw-semibold); }
.range { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--space-3); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.range input[type="range"] { width: 100%; min-height: calc(var(--space-10) + var(--space-1)); accent-color: var(--color-primary-strong); }
.range output { min-width: calc(var(--space-12) + var(--space-1)); color: var(--color-fg-muted); font-weight: var(--fw-regular); text-align: right; font-variant-numeric: tabular-nums; }

/* 완료 — 내려받기 */
.downloads { display: grid; gap: var(--space-3); }
.dl-card {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: center;
    column-gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    border: 1px solid var(--color-primary-soft-fg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: box-shadow var(--duration-fast) var(--ease-out), transform var(--duration-fast) var(--ease-out);
}
.dl-card:hover { box-shadow: var(--shadow-md); transform: translateY(calc(var(--space-1) * -0.5)); }
.dl-card svg { grid-row: span 2; width: var(--space-6); height: var(--space-6); }
.dl-card__title { font-size: var(--fs-md); font-weight: var(--fw-bold); }
.dl-card__meta { font-size: var(--fs-sm); }
.dl-card--primary { background: var(--color-primary-strong); color: var(--color-primary-fg); border-color: var(--color-primary-strong); }
.dl-card--secondary { background: var(--color-bg); color: var(--color-primary-soft-fg); }
.dl-card--secondary .dl-card__meta { color: var(--color-fg-muted); }

.howto { border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); }
.howto summary { min-height: calc(var(--space-10) + var(--space-1)); display: flex; align-items: center; cursor: pointer; font-weight: var(--fw-semibold); }
.howto dl { display: grid; gap: var(--space-2); margin: 0 0 var(--space-4); font-size: var(--fs-sm); }
.howto dt { font-weight: var(--fw-semibold); }
.howto dd { margin: 0; color: var(--color-fg-muted); }
.howto code { font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }

/* 완료 — 인식 요약 */
.recog,
.recog__miss { display: grid; gap: var(--space-3); }
.recog__title { margin: 0; font-size: var(--fs-md); }
.recog-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; }
.recog-stat {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-3);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
}
.recog-stat dt { order: 2; color: var(--color-fg-muted); font-size: var(--fs-xs); }
.recog-stat dd { order: 1; margin: 0; font-size: var(--fs-xl); font-weight: var(--fw-bold); line-height: var(--line-tight); font-variant-numeric: tabular-nums; }
.recog-stat dd small { font-size: var(--fs-sm); font-weight: var(--fw-medium); }
.recog-stat.is-warn { border-color: var(--color-warn); }
.glyph-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.glyph-chip {
    display: inline-flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-1) var(--space-3);
    border-radius: var(--radius-md);
    background: var(--color-warn-soft);
    color: var(--color-fg);
}
.glyph-chip__char { font-size: var(--fs-lg); font-weight: var(--fw-semibold); line-height: var(--line-tight); }
.glyph-chip__pos { font-size: var(--fs-xs); }
.glyph-chip.is-more { background: var(--color-surface-2); font-size: var(--fs-sm); align-items: center; }

/* 애니메이션 */
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

/* ─────────────────────────── 태블릿 640px+ ─────────────────────────── */
@media (min-width: 640px) {
    .container { padding-left: var(--space-8); padding-right: var(--space-8); }
    .topbar__inner { min-height: var(--header-height); }
    .hero { padding: var(--space-12) 0; }
    .hero h1 { font-size: var(--fs-3xl); }
    .hero__lead { font-size: var(--fs-md); }
    .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-5); }
    .section__title { font-size: var(--fs-2xl); }
    .panel { padding: var(--space-8); }
    .step { padding: var(--space-6); }
    .step__action { grid-template-columns: auto; justify-items: start; }
    .promises { grid-template-columns: repeat(3, 1fr); }
    .promise { grid-template-columns: 1fr; row-gap: var(--space-2); }
    .promise__icon { grid-row: auto; }
    .state-card { padding: var(--space-8); }
    .state-card__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
    .keep-link { padding: var(--space-5); }
    .keep-link__row { grid-template-columns: 1fr auto; }
    .downloads { grid-template-columns: 1fr 1fr; }
    .preview__stage { padding: var(--space-8); }
    .preview__controls { grid-template-columns: 1fr 1fr; align-items: end; }
    .preview__controls .field { grid-column: 1 / -1; }
    .submit .btn { justify-self: start; min-width: calc(var(--space-16) * 4); }
    .job-head__title { font-size: var(--fs-3xl); }
}

/* ─────────────────────────── 데스크톱 1024px+ ─────────────────────────── */
@media (min-width: 1024px) {
    .hero { padding: var(--space-16) 0; }
    .hero__grid { grid-template-columns: 7fr 5fr; gap: var(--space-12); }
    .hero h1 { font-size: var(--fs-4xl); }
    .steps { grid-template-columns: repeat(3, 1fr); }
    .step { grid-template-columns: 1fr; row-gap: var(--space-1); }
    .step > :not(.step__num) { grid-column: 1; }
    .step__num { grid-row: auto; }

    .sheet-art {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: var(--space-2);
        padding: var(--space-5);
        border: 1px solid var(--color-border);
        border-radius: var(--radius-xl);
        background: var(--color-bg);
        box-shadow: var(--shadow-lg);
    }
    .sheet-art__cell {
        position: relative;
        display: grid;
        place-items: center;
        aspect-ratio: 1;
        border: 1px solid var(--color-border-strong);
        border-radius: var(--radius-sm);
        font-size: var(--fs-2xl);
        font-weight: var(--fw-medium);
    }
    /* 칸 안 가이드선(십자) */
    .sheet-art__cell::before,
    .sheet-art__cell::after { content: ""; position: absolute; background: var(--color-border); }
    .sheet-art__cell::before { left: 50%; top: var(--space-1); bottom: var(--space-1); width: 1px; }
    .sheet-art__cell::after { top: 50%; left: var(--space-1); right: var(--space-1); height: 1px; }
    .sheet-art__cell span { position: relative; z-index: 1; }
    .sheet-art__cell.is-empty { color: var(--color-fg-subtle); font-size: var(--fs-sm); }
    .sheet-art__caption { grid-column: 1 / -1; margin: var(--space-2) 0 0; color: var(--color-fg-muted); font-size: var(--fs-xs); text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
    .btn, .dl-card, .dropzone, .progress__bar { transition: none; }
    .btn--primary:hover, .dl-card:hover { transform: none; }
    .status-badge.is-processing::before, .live-note::before { animation: none; }
    /* 도는 테두리 대신 굵은 테두리로 "현재" 표시 */
    .stage.is-current .stage__icon { animation: none; border-color: var(--color-primary-strong); }
}

/* ══════════════════════════════════════════════════════════════
   2026-10-10 추가 — 이름 규칙·이용 범위·동의, 폰트 게시판, 문의 게시판, 약관, 운영자
   (시안 CSS 아래에 덧붙임. 토큰만 사용)
   ══════════════════════════════════════════════════════════════ */

/* 상단 메뉴 */
.topbar__inner { gap: var(--space-3); }
.nav { display: flex; gap: var(--space-1); margin-left: auto; }
.nav__link {
    display: inline-flex; align-items: center; min-height: var(--space-10); padding: 0 var(--space-3);
    border-radius: var(--radius-md); color: var(--color-fg-muted); font-size: var(--fs-sm); font-weight: var(--fw-semibold); text-decoration: none;
}
.nav__link:hover { background: var(--color-surface-2); color: var(--color-fg); }
.nav__link[aria-current="page"] { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
@media (max-width: 639px) {
    .topbar__inner { flex-wrap: wrap; }
    .nav { order: 3; width: 100%; margin-left: 0; justify-content: space-between; }
    .nav__link { flex: 1; justify-content: center; padding: 0 var(--space-2); }
}

/* 폰트 이름 — 나이스 ○○체 */
.name-wrap { display: flex; align-items: center; gap: var(--space-2); }
.name-wrap__fix { flex-shrink: 0; font-weight: var(--fw-bold); font-size: var(--fs-md); color: var(--color-primary-soft-fg); }
.name-wrap__input { flex: 1; min-width: 0; }
.name-preview { color: var(--color-fg); }
.field__opt { margin-left: var(--space-1); color: var(--color-fg-muted); font-size: var(--fs-xs); font-weight: var(--fw-regular); }

/* 이용 범위 */
.license-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.license-field legend { padding: 0; }
.license-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.license-option__label {
    display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start;
    padding: var(--space-3) var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); cursor: pointer;
}
.license-option__label:hover { border-color: var(--color-primary-soft-fg); }
.license-option__radio:checked + .license-option__label { border-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); }
.license-option__num {
    display: inline-grid; place-items: center; width: calc(var(--space-6) + var(--space-1)); height: calc(var(--space-6) + var(--space-1)); border-radius: var(--radius-full);
    border: 2px solid var(--color-border-strong); font-size: var(--fs-sm); font-weight: var(--fw-bold); color: var(--color-fg-muted);
}
.license-option__radio:checked + .license-option__label .license-option__num { border-color: var(--color-primary-strong); background: var(--color-primary-strong); color: var(--color-primary-fg); }
.license-option__text { display: grid; gap: var(--space-1); }
.license-option__title { font-weight: var(--fw-bold); }
.license-option__desc { font-size: var(--fs-sm); color: var(--color-fg-muted); }
.license-option__radio:checked + .license-option__label .license-option__desc { color: var(--color-fg); }
.license-option__radio:focus-visible + .license-option__label { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--shadow-focus); }
.license-notice { margin-top: var(--space-1); }

/* 동의 */
.agree { display: grid; grid-template-columns: auto 1fr; gap: var(--space-3); align-items: start; padding: var(--space-4); border: 2px solid var(--color-warn); border-radius: var(--radius-lg); background: var(--color-warn-soft); cursor: pointer; }
.agree__box { width: var(--space-5); height: var(--space-5); margin-top: calc(var(--space-1) * 0.5); accent-color: var(--color-primary-strong); }
.agree__text { font-size: var(--fs-sm); line-height: var(--line-loose); }

/* 뱃지·통계 */
.badge { display: inline-flex; align-items: center; padding: 0 var(--space-2); border-radius: var(--radius-full); font-size: var(--fs-xs); font-weight: var(--fw-semibold); line-height: calc(var(--space-5) + var(--space-1)); white-space: nowrap; }
.badge--ok { background: var(--color-success-soft); color: var(--color-success-soft-fg); }
.badge--info { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.badge--warn { background: var(--color-warn-soft); color: var(--color-fg); }
.badge--muted { background: var(--color-surface-2); color: var(--color-fg); }
.stat { display: inline-flex; align-items: center; gap: var(--space-1); color: var(--color-fg-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.stat svg { width: var(--space-4); height: var(--space-4); }
.admin-badge { display: inline-block; padding: 0 var(--space-2); border-radius: var(--radius-full); background: var(--color-primary-strong); color: var(--color-primary-fg); font-size: var(--fs-xs); font-weight: var(--fw-bold); }

/* 섹션 머리·소제목 */
.section__head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.section__head .section__lead { margin-bottom: 0; }
.subhead { margin: var(--space-6) 0 var(--space-3); font-size: var(--fs-md); }

/* 게시판 공통 */
.board { display: grid; gap: var(--space-5); padding-top: var(--space-8); padding-bottom: var(--space-12); }
.board__head h1 { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-2xl); }
.board__head .section__lead { margin-bottom: 0; }
.board__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.board__count { margin-top: calc(var(--space-2) * -1); }
.tabs { display: flex; flex-wrap: nowrap; overflow-x: auto; max-width: 100%; -webkit-overflow-scrolling: touch; gap: var(--space-1); padding: var(--space-1); border-radius: var(--radius-lg); background: var(--color-surface-2); }
.tab { display: inline-flex; flex-shrink: 0; white-space: nowrap; align-items: center; min-height: var(--space-10); padding: 0 var(--space-3); border-radius: var(--radius-md); color: var(--color-fg); font-size: var(--fs-sm); font-weight: var(--fw-medium); text-decoration: none; }
.tab:hover { color: var(--color-fg); }
.tab[aria-current="page"] { background: var(--color-bg); color: var(--color-primary-soft-fg); font-weight: var(--fw-bold); box-shadow: var(--shadow-sm), inset 0 0 0 1px var(--color-border-strong); }
.search { display: flex; gap: var(--space-2); flex: 1; min-width: 240px; max-width: 420px; }
.search .input { flex: 1; min-width: 0; }
.pager { display: flex; align-items: center; justify-content: center; gap: var(--space-3); }
.pager__pos { font-size: var(--fs-sm); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }

/* 폰트 카드 */
.font-grid { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; grid-template-columns: repeat(2, 1fr); }
@media (min-width: 640px) { .font-grid { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); } }
@media (max-width: 639px) { .font-card__preview { height: 88px; } .font-card__body { padding: var(--space-2) var(--space-3); } }
.font-card { min-width: 0; }
.font-card.is-hidden { opacity: .6; }
.font-card__link { display: grid; height: 100%; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; text-decoration: none; overflow: hidden; transition: box-shadow .15s var(--ease-out), transform .15s var(--ease-out); }
.font-card__link:hover { box-shadow: var(--shadow-md); transform: translateY(calc(var(--space-1) * -0.5)); border-color: var(--color-primary-soft-fg); }
.font-card__preview { display: grid; place-items: center; height: 120px; padding: var(--space-3); background: #fff; } /* preview.png 는 흰 종이 바탕 — 다크에서도 종이처럼 보이게 고정 */
.font-card__preview img { max-width: 100%; max-height: 100%; object-fit: contain; }
.font-card__body { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border-top: 1px solid var(--color-border); }
.font-card__name { font-weight: var(--fw-bold); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.font-card__meta { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.font-card__stats { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-top: var(--space-1); }

/* 폰트 상세 */
.like-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.like-btn {
    display: inline-flex; align-items: center; gap: var(--space-2); min-height: calc(var(--space-10) + var(--space-1)); padding: 0 var(--space-5);
    border: 2px solid var(--color-border-strong); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-fg); font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
}
.like-btn svg { width: var(--space-5); height: var(--space-5); color: var(--color-fg-muted); transition: transform .15s var(--ease-out); }
.like-btn:hover { border-color: var(--color-danger); }
.like-btn:hover svg { transform: scale(1.15); }
.like-btn.is-on { border-color: var(--color-danger); background: var(--color-danger-soft); }
.like-btn.is-on svg { color: var(--color-danger); }
.like-btn__count { font-variant-numeric: tabular-nums; }
.downloads--3 { grid-template-columns: 1fr; }
@media (min-width: 640px) { .downloads--3 { grid-template-columns: repeat(2, 1fr); } .downloads--3 .dl-card--primary { grid-column: 1 / -1; } }
@media (min-width: 1024px) { .downloads--3 { grid-template-columns: repeat(3, 1fr); } .downloads--3 .dl-card--primary { grid-column: auto; } }
.license-box { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-lg); background: var(--color-surface-2); font-size: var(--fs-sm); }
.license-box__title { margin: 0; font-size: var(--fs-base); }
.license-box p { margin: 0; }
.license-box .hint { color: var(--color-fg); } /* surface-2 위 muted 는 대비 4.37:1 — fg 로 */
.report-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

/* 문의 게시판 */
.post-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.post-item__link { display: grid; gap: var(--space-1); padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); color: inherit; text-decoration: none; }
.post-item__link:hover { border-color: var(--color-primary-soft-fg); }
.post-item__top { display: flex; gap: var(--space-2); }
.post-item__title { font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.post-item__comments { color: var(--color-primary-soft-fg); font-size: var(--fs-sm); }
.post-item__meta { color: var(--color-fg-muted); font-size: var(--fs-xs); }
.post__title { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-xl); overflow-wrap: anywhere; }
.post__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }
.post { display: grid; gap: var(--space-4); }
.post__body, .comment__body { line-height: var(--line-loose); overflow-wrap: anywhere; }
.chips { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.chip span { display: inline-flex; align-items: center; min-height: var(--space-10); padding: 0 var(--space-4); border: 2px solid var(--color-border); border-radius: var(--radius-full); background: var(--color-bg); font-size: var(--fs-sm); font-weight: var(--fw-semibold); cursor: pointer; }
.chip input:checked + span { border-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.chip input:focus-visible + span { outline: 2px solid var(--color-primary); outline-offset: 2px; box-shadow: var(--shadow-focus); }
.textarea { min-height: 120px; resize: vertical; line-height: var(--line-loose); }
.comments { display: grid; gap: var(--space-3); }
.comments .subhead { margin-top: 0; }
.comment-list { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.comment { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.comment.is-admin { border-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); }
.comment__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin: 0 0 var(--space-2); font-size: var(--fs-sm); color: var(--color-fg-muted); }
.comment.is-admin .comment__meta { color: var(--color-fg); }
.comment-form .submit { justify-items: start; }

/* 운영자 */
.admin-row, .admin-inline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-inline .input { min-height: var(--space-10); padding: 0 var(--space-3); width: auto; }

/* 약관 */
.doc { display: grid; gap: var(--space-6); padding-top: var(--space-8); padding-bottom: var(--space-12); max-width: var(--container-md); }
.doc__head h1 { margin: var(--space-1) 0 var(--space-2); font-size: var(--fs-2xl); }
.doc__section { display: grid; gap: var(--space-3); }
.doc__section h2 { margin: 0; font-size: var(--fs-lg); }
.doc__section p { margin: 0; line-height: var(--line-loose); }
.license-doc { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; counter-reset: lic; }
.license-doc li { display: grid; gap: var(--space-2); padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); counter-increment: lic; }
.license-doc h3 { margin: 0; font-size: var(--fs-base); }
.license-doc h3::before { content: counter(lic) ". "; color: var(--color-primary-soft-fg); }

/* ══════════════════════════════════════════════════════════════
   2026-10-10 운영자 화면 (.design/sw4u/font/spec-admin.md)
   ══════════════════════════════════════════════════════════════ */

/* 7.0 운영자 페이지만 넓게 + 포커스 외곽선을 진한 색으로
   (sw4u 라이트 --color-primary #0ea5e9 는 흰 바탕 2.77:1 — 표 안 작은 컨트롤에서 안 보인다.
    공개 화면 규칙은 그대로 두고 .admin 안에서만 바꾼다) */
.container--wide { max-width: var(--container-xl); }
.admin :focus-visible { outline-color: var(--color-primary-soft-fg); }

/* 7.1 운영자 띠 */
.admin-bar { background: var(--color-primary-strong); color: var(--color-primary-fg); font-size: var(--fs-sm); }
.admin-bar__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1) var(--space-4); min-height: calc(var(--space-10) + var(--space-1)); padding-top: var(--space-1); padding-bottom: var(--space-1); }
.admin-bar__label { display: inline-flex; align-items: center; gap: var(--space-2); margin: 0; font-weight: var(--fw-bold); letter-spacing: var(--letter-wide); }
.admin-bar__label svg { width: var(--space-4); height: var(--space-4); }
.admin-bar__nav { display: flex; gap: var(--space-1); overflow-x: auto; }
.admin-bar__link {
    display: inline-flex; align-items: center; gap: var(--space-2); flex-shrink: 0;
    min-height: var(--space-10); padding: 0 var(--space-3); border-radius: var(--radius-md);
    color: var(--color-primary-fg); font-weight: var(--fw-semibold); text-decoration: none;
}
.admin-bar__link:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.admin-bar__link[aria-current="page"] { background: var(--color-primary-fg); color: var(--color-primary-strong); }
.admin-bar__count {
    display: inline-grid; place-items: center; min-width: var(--space-5); padding: 0 var(--space-1);
    border-radius: var(--radius-full); background: var(--color-primary-fg); color: var(--color-primary-strong);
    font-size: var(--fs-xs); font-weight: var(--fw-bold); line-height: var(--space-5); font-variant-numeric: tabular-nums;
}
.admin-bar__link[aria-current="page"] .admin-bar__count { background: var(--color-primary-strong); color: var(--color-primary-fg); }
.admin-bar__logout { margin-left: auto; }
.admin-bar__btn {
    min-height: var(--space-10); padding: 0 var(--space-3); border: 1px solid var(--color-primary-fg); border-radius: var(--radius-md);
    background: transparent; color: var(--color-primary-fg); font: inherit; font-weight: var(--fw-semibold); cursor: pointer;
}
.admin-bar__btn:hover { background: var(--color-primary-fg); color: var(--color-primary-strong); }
.admin-bar :focus-visible { outline: 2px solid var(--color-primary-fg); outline-offset: 2px; }
@media (max-width: 639px) {
    .admin-bar__nav { order: 3; width: 100%; }
}

/* 7.2 페이지 머리 — .board 재사용, 운영자 화면은 제목만 한 단계 작게 */
.admin .board__head h1 { font-size: var(--fs-xl); }
.admin .board__head .hint { margin-top: var(--space-1); }

/* 7.3 숫자 카드 */
.kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.kpi__link {
    display: grid; gap: var(--space-1); height: 100%;
    padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-left-width: 4px; border-left-color: var(--color-border);
    border-radius: var(--radius-lg); background: var(--color-surface); color: var(--color-fg); text-decoration: none;
}
.kpi__link:hover { border-color: var(--color-primary-soft-fg); }
.kpi__num { font-size: var(--fs-2xl); font-weight: var(--fw-bold); line-height: var(--line-tight); font-variant-numeric: tabular-nums; }
.kpi__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.kpi__sub { color: var(--color-fg-muted); font-size: var(--fs-xs); font-variant-numeric: tabular-nums; }
.kpi.is-alert .kpi__link { border-left-color: var(--color-warn); }
.kpi.is-danger .kpi__link { border-left-color: var(--color-danger); }
.kpi.is-alert .kpi__sub,
.kpi.is-danger .kpi__sub { color: var(--color-fg); font-weight: var(--fw-semibold); }

/* 7.4 섹션 카드·목록 */
.admin-grid { display: grid; gap: var(--space-4); }
.admin-card { display: grid; gap: var(--space-3); align-content: start; min-width: 0; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface); }
.admin-card__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); }
.admin-card__title { margin: 0; font-size: var(--fs-md); }
.admin-card__count { color: var(--color-fg-muted); font-weight: var(--fw-regular); font-variant-numeric: tabular-nums; }
.admin-card__more { font-size: var(--fs-sm); font-weight: var(--fw-semibold); white-space: nowrap; }
.admin-card .admin-table-wrap { border-radius: var(--radius-md); }

.admin-list { display: grid; margin: 0; padding: 0; list-style: none; }
.admin-list__item { display: grid; gap: var(--space-1); padding: var(--space-2) 0; border-top: 1px solid var(--color-border); }
.admin-list__item:first-child { border-top: 0; padding-top: 0; }
.admin-list__main { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-2); margin: 0; font-weight: var(--fw-semibold); overflow-wrap: anywhere; }
.admin-list__meta { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-xs); }

/* 테두리형 뱃지 (종류·보관 계열) — 글자 fg, 색은 앞 점으로만 */
.badge--outline { background: transparent; color: var(--color-fg); box-shadow: inset 0 0 0 1px var(--color-border-strong); }
.badge--outline.is-alert { gap: var(--space-1); }
.badge--outline.is-alert::before { content: ""; width: var(--space-2); height: var(--space-2); border-radius: var(--radius-full); background: var(--color-danger); }

/* 7.5 필터 */
.admin-filters { display: grid; gap: var(--space-3); }
.admin-filters__row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--space-3); }
.admin-filters__field { display: grid; gap: var(--space-1); }
.admin-filters__field label { font-size: var(--fs-xs); font-weight: var(--fw-semibold); }
.admin-filters__field .input { width: auto; min-width: calc(var(--space-16) * 2); }
.admin-filters__search { max-width: none; }
.admin-filters__reset { align-self: center; font-size: var(--fs-sm); }
.admin-result { margin: 0; }

/* 7.6 표 */
.admin-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-bg); }
.admin-table-wrap:focus-visible { outline-offset: 0; }
.admin-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); line-height: var(--line-tight); }
.admin-table th {
    padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border-strong);
    background: var(--color-surface-2); color: var(--color-fg);
    font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-align: left; white-space: nowrap;
}
.admin-table td { padding: var(--space-2) var(--space-3); border-top: 1px solid var(--color-border); vertical-align: middle; }
.admin-table tbody tr:first-child td { border-top: 0; }
.admin-table tbody tr:hover { background: var(--color-surface); }     /* surface-2 는 muted 글자 4.42:1 이라 쓰지 않는다 */
.admin-table tbody tr:focus-within > td:first-child,
.admin-table tbody tr:target > td:first-child { box-shadow: inset 3px 0 0 var(--color-primary-soft-fg); }
.admin-table tbody tr { scroll-margin-top: var(--space-16); }
.admin-table__num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.admin-table__mono { font-family: var(--font-mono); font-size: var(--fs-xs); }
.admin-table__sub { display: block; margin-top: var(--space-1); color: var(--color-fg-muted); font-size: var(--fs-xs); }
a.admin-table__sub { color: var(--color-primary-soft-fg); }
.admin-table__name { font-weight: var(--fw-semibold); min-width: calc(var(--space-16) * 2); }
.admin-table__thumb { width: calc(96px + var(--space-6)); }
.admin-table__thumb img { display: block; width: 96px; height: 40px; object-fit: contain; border: 1px solid var(--color-border); border-radius: var(--radius-sm); }
.admin-table__title { min-width: calc(var(--space-16) * 3); }
.admin-table__title a { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.admin-table tr.is-muted td,
.admin-table tr.is-muted a { color: var(--color-fg-muted); }
.admin-table .status-badge { padding: 0 var(--space-2); font-size: var(--fs-xs); white-space: nowrap; }
.admin-table .stat { margin-left: var(--space-2); }
.admin-table .stat:first-child { margin-left: 0; }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.admin-actions form { margin: 0; }
.admin-actions .input { min-height: var(--space-10); width: auto; padding: 0 var(--space-2); }

/* 7.7 휴대폰: 표 → 카드 */
@media (max-width: 639px) {
    .admin-table-wrap { overflow: visible; border: 0; background: none; }
    .admin-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
    .admin-table,
    .admin-table tbody,
    .admin-table td { display: block; }
    .admin-table tbody { display: grid; gap: var(--space-2); }
    .admin-table tr {
        display: grid; grid-template-columns: 1fr; gap: var(--space-1);
        padding: var(--space-3); border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-surface);
    }
    .admin-table--fonts tr { grid-template-columns: 96px 1fr; column-gap: var(--space-3); }
    .admin-table td { padding: 0; border: 0; grid-column: 1 / -1; }
    .admin-table--fonts td { grid-column: 2; }
    .admin-table--fonts td.admin-table__thumb { grid-column: 1; grid-row: 1 / span 4; align-self: start; width: auto; }
    .admin-table--fonts td.admin-table__wide { grid-column: 1 / -1; }
    .admin-table td { min-width: 0; overflow-wrap: anywhere; }
    .admin-table td[data-label]::before { content: attr(data-label); margin-right: var(--space-2); color: var(--color-fg-muted); font-size: var(--fs-xs); }
    .admin-table td.admin-table__actions { grid-column: 1 / -1; margin-top: var(--space-2); padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
    .admin-table__actions .admin-actions > * { flex: 1 1 0; }
    .admin-table__actions .admin-actions > form:not(.admin-inline) .btn { width: 100%; }
    .admin-table__actions .admin-inline { flex-basis: 100%; }
    .admin-table__actions .admin-inline .input { flex: 1; min-width: 0; }
    .admin-table__num { text-align: left; }
    .admin-table tbody tr:hover { background: var(--color-surface); }
    .admin-table tbody tr:focus-within,
    .admin-table tbody tr:target { border-color: var(--color-primary-soft-fg); }
    .admin-table tbody tr:focus-within > td:first-child,
    .admin-table tbody tr:target > td:first-child { box-shadow: none; }
}

/* 7.8 업로드 폼 — 확인 상자 두 줄 */
.agree-group { margin: 0; padding: 0; border: 0; min-width: 0; }
.agree-group legend { padding: 0; margin-bottom: var(--space-2); }
.agree-group__box { display: grid; border: 2px solid var(--color-warn); border-radius: var(--radius-lg); background: var(--color-warn-soft); overflow: hidden; }
.agree-group__box .agree { border: 0; border-radius: 0; background: transparent; }
.agree-group__box .agree + .agree { border-top: 1px solid var(--color-warn); }
.agree-group__box.is-invalid { border-color: var(--color-danger); }
.agree-group .field__error + .field__error { margin-top: calc(var(--space-1) * -1); }

.agree__box:focus-visible { outline-color: var(--color-primary-soft-fg); } /* 노란 바탕 위 기본 외곽선은 2.5:1 */

/* 7.9 넓은 화면 */
@media (min-width: 640px) {
    .kpis { grid-template-columns: repeat(3, 1fr); }
    .admin-card { padding: var(--space-5); }
}
@media (min-width: 1024px) {
    .kpis { grid-template-columns: repeat(6, 1fr); }
    .admin-grid { grid-template-columns: 1fr 1fr; }
    .admin-grid__full { grid-column: 1 / -1; }
}

/* ═════════════ 2026-10-11 홈 리디자인 (.design/sw4u/font/spec-2026-10-11-home.md) ═════════════ */

/* D10 — hidden 속성이 컴포넌트 display 에 지지 않게 (빈 오류 요약 상자 버그) */
[hidden] { display: none !important; }

/* 접기 공통 (세 단계 요령·휴대폰 저장 방식·선택 칸) */
.more { border-top: 1px solid var(--color-border); }
.more > summary {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: calc(var(--space-10) + var(--space-1));   /* 44px */
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    list-style: none;
    cursor: pointer;
}
.more > summary::-webkit-details-marker { display: none; }
.more > summary::before {
    content: "";
    flex-shrink: 0;
    width: var(--space-2);
    height: var(--space-2);
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(-45deg);
    transition: transform var(--duration-fast) var(--ease-out);
}
.more[open] > summary::before { transform: rotate(45deg); }
.more > summary:hover { text-decoration: underline; text-underline-offset: 0.2em; }
.more__body { margin: 0; padding-bottom: var(--space-3); font-size: var(--fs-sm); color: var(--color-fg); }
.more__list { display: grid; gap: var(--space-2); margin: 0; padding: 0 0 var(--space-3) var(--space-5); font-size: var(--fs-sm); }
.more--inline { border-top: 0; }
.more--inline > summary { min-height: var(--space-10); }
.more--fields { border: 1px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: 0 var(--space-4); }
.more--fields > summary { color: var(--color-fg); font-size: var(--fs-base); }
.more__body--fields { display: grid; gap: var(--space-5); padding: var(--space-2) 0 var(--space-5); font-size: var(--fs-base); }

/* ③ 업로드 폼 */
.upload-wrap { max-width: calc(var(--container-md) + var(--space-8)); }   /* 폼 본문 약 768 */
.upload-form { display: grid; gap: 0; }
.upload-form > .alert { margin-bottom: var(--space-6); }
.form-block { display: grid; gap: var(--space-5); padding: var(--space-6) 0; border-top: 1px solid var(--color-border); }
.upload-form > .alert + .form-block,
.upload-form > input[type="hidden"] + .form-block { padding-top: 0; border-top: 0; }   /* 첫 블록 (오류 상자 숨김/표시 둘 다) */
.form-block__head { display: flex; align-items: center; gap: var(--space-3); }
.form-block__num {
    display: inline-grid;
    place-items: center;
    flex-shrink: 0;
    width: var(--space-8);
    height: var(--space-8);
    border: 2px solid var(--color-primary-soft-fg);
    border-radius: var(--radius-full);
    color: var(--color-primary-soft-fg);
    font-size: var(--fs-sm);
    font-weight: var(--fw-bold);
}
.form-block__title { margin: 0; font-size: var(--fs-lg); }
.name-result { margin: 0; font-size: var(--fs-sm); color: var(--color-fg-muted); }
.name-result .name-preview { margin-left: var(--space-2); color: var(--color-fg); font-size: var(--fs-md); }
.callout--compact { padding: var(--space-2) var(--space-3); }

/* D7 — 동의 상자 중립색 (오류 때만 빨강: 기존 .is-invalid 규칙 유지) */
.agree-group__box { border: 1px solid var(--color-border-strong); background: var(--color-surface); }
.agree-group__box .agree + .agree { border-top: 1px solid var(--color-border); }
.agree-group__box.is-invalid { border: 2px solid var(--color-danger); }
.agree__box:focus-visible { outline-color: var(--color-primary); }
.submit { display: grid; gap: var(--space-3); padding-top: var(--space-6); border-top: 1px solid var(--color-border); }

   /* 좁은 화면: 한 줄 전체 (auto / -1 은 마지막 한 칸에만 놓여 고침) */

@media (max-width: 639px) {
    .dropzone__drag { display: none; }
}

@media (min-width: 640px) {
    
    
    
    .license-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .license-option__label { height: 100%; }
    
}

@media (min-width: 1024px) {
    
       /* 글 칼럼을 넓혀 버튼 두 개가 한 줄에 (designer 검토) */
    
    
    
    
    .upload-wrap { margin-left: auto; margin-right: auto; }
    
       /* 남은 칸 수 = 4 − 카드 수 (home.php 가 넘김) */
}

@media (prefers-reduced-motion: reduce) {
    .more > summary::before { transition: none; }
}

/* ═════════════ 2026-10-11 단순화 (.design/sw4u/font/spec-2026-10-11-simple.md) ═════════════ */

/* 홈 */
.home-hero { padding: var(--space-8) 0 var(--space-12); }
.home-hero .container { display: grid; gap: var(--space-4); }
.home-hero__title { margin: 0; font-size: var(--fs-2xl); line-height: var(--line-tight); letter-spacing: var(--letter-tight); }
.home-hero__sub { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-md); }
.home-hero__cta { width: 100%; }
.home-hero__cta svg { transition: transform var(--duration-fast) var(--ease-out); }
.home-hero__cta:hover svg { transform: translateX(var(--space-1)); }

.home-flow { display: grid; gap: var(--space-4); justify-items: center; margin-top: var(--space-6); }
.home-flow__art {
    margin: 0;
    width: 100%;
    max-width: var(--container-sm);
    aspect-ratio: 6 / 5;
    border-radius: var(--radius-xl);
    background: var(--color-primary-soft);
    color: var(--color-fg);
    overflow: hidden;
}
.home-flow__art > svg { display: block; width: 100%; height: 100%; }
.home-flow__arrow { display: block; width: var(--space-12); color: var(--color-primary-soft-fg); transform: rotate(90deg); }
.home-flow__arrow svg { display: block; width: 100%; }
.home-flow__fonts { display: grid; gap: var(--space-5); width: 100%; max-width: var(--container-sm); margin: 0; padding: 0; list-style: none; }

.sample-card {
    display: grid;
    gap: var(--space-1);
    padding: var(--space-4) var(--space-4) var(--space-4);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    background: var(--color-bg);
    box-shadow: var(--shadow-md);
    color: var(--color-fg);
    text-decoration: none;
    transform: rotate(-1.5deg);
    transition: transform var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.home-flow__fonts li:nth-child(2) .sample-card { transform: rotate(1.5deg); }
.sample-card:hover,
.home-flow__fonts li:nth-child(2) .sample-card:hover { transform: rotate(0) translateY(calc(var(--space-1) * -1)); box-shadow: var(--shadow-lg); border-color: var(--color-primary-soft-fg); }
/* woff2 가 무거워(장당 1MB+) preview.png 의 왼쪽 위 글씨 부분만 크게 (§2-4). PNG 는 흰 종이 바탕이라 다크에서도 흰 바탕 유지 */
.sample-card__img { display: block; margin-bottom: var(--space-2); border-radius: var(--radius-md); background: #fff; overflow: hidden; }
.sample-card__img img { display: block; width: 100%; aspect-ratio: 2 / 1; object-fit: cover; object-position: left top; }
.sample-card__name { font-size: var(--fs-sm); font-weight: var(--fw-bold); }
.sample-card__by { color: var(--color-fg-muted); font-size: var(--fs-xs); }

/* 만들기 */
.make { max-width: calc(var(--container-md) + var(--space-8)); padding-top: var(--space-8); padding-bottom: var(--space-12); }
.make-head { display: grid; gap: var(--space-6); margin-bottom: var(--space-10); }
.make-head__title { margin: 0; font-size: var(--fs-2xl); }
.make-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-2); margin: 0; padding: 0; list-style: none; counter-reset: mk; }
.make-step { position: relative; display: grid; justify-items: center; gap: var(--space-2); text-align: center; counter-increment: mk; }
.make-step__icon {
    display: grid;
    place-items: center;
    width: calc(var(--space-16) + var(--space-2));
    height: calc(var(--space-16) + var(--space-2));
    border-radius: var(--radius-full);
    background: var(--color-primary-soft);
    color: var(--color-primary-soft-fg);
}
.make-step__icon svg { width: var(--space-8); height: var(--space-8); }
.make-step__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.make-step__label::before { content: counter(mk) ". "; color: var(--color-primary-soft-fg); }
.make-step + .make-step::before {               /* 단계 사이 점선 연결 (장식) */
    content: "";
    position: absolute;
    top: calc(var(--space-8) + var(--space-1));
    right: calc(50% + var(--space-10));
    width: calc(100% - var(--space-16) - var(--space-4));
    border-top: 2px dashed var(--color-border-strong);
}
.make-head__actions { display: grid; gap: var(--space-2); justify-items: start; }
.make-head__warn { margin: 0; font-size: var(--fs-sm); color: var(--color-fg); }
.make-head__warn::before { content: "! "; color: var(--color-warn); font-weight: var(--fw-bold); }
.make-head__tips { border-bottom: 1px solid var(--color-border); }

/* 게시판 — 내 폰트 토글 */
.board__switch { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.mine-toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: calc(var(--space-10) + var(--space-1));
    padding: 0 var(--space-4);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-full);
    color: var(--color-fg);
    font-size: var(--fs-sm); font-weight: var(--fw-semibold);
    text-decoration: none;
}
.mine-toggle svg { width: var(--space-4); height: var(--space-4); }
.mine-toggle:hover { background: var(--color-surface-2); }
.mine-toggle[aria-current="page"] { border-color: var(--color-primary-strong); background: var(--color-primary-strong); color: var(--color-primary-fg); }

.owner-login { display: grid; gap: var(--space-4); max-width: var(--container-sm); padding: var(--space-8) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.owner-login__title { margin: 0; font-size: var(--fs-lg); }
.owner-login__form { display: grid; gap: var(--space-3); }
.owner-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); }
.owner-bar__who { margin: 0; font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.font-card__preview--locked { background: var(--color-surface-2); color: var(--color-fg-muted); }
.font-card__preview--locked svg { width: var(--space-8); height: var(--space-8); }

/* 상세 — ZIP 한 장·이용 범위 한 줄·개선하기 상자 */
.downloads--one { grid-template-columns: 1fr; }
.license-line { margin: 0; font-size: var(--fs-sm); color: var(--color-fg); }
.improve-box {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-3) var(--space-4);
    align-items: center;
    margin-top: var(--space-6);
    padding: var(--space-5);
    border: 1px dashed var(--color-primary-soft-fg);
    border-radius: var(--radius-xl);
    background: var(--color-primary-soft);
}
.improve-box__icon { display: grid; place-items: center; width: var(--space-12); height: var(--space-12); border-radius: var(--radius-full); background: var(--color-bg); color: var(--color-primary-soft-fg); }
.improve-box__icon svg { width: var(--space-6); height: var(--space-6); }
.improve-box__title { margin: 0; font-size: var(--fs-md); }
.improve-box__text p { margin: 0; font-size: var(--fs-sm); color: var(--color-fg); }   /* soft 바탕 위 muted 금지 */
.improve-box .btn { grid-column: 1 / -1; justify-self: start; }

/* 개선 화면 */
.improve { display: grid; gap: var(--space-6); max-width: calc(var(--container-md) + var(--space-8)); padding-top: var(--space-8); padding-bottom: var(--space-12); }
.improve-head h1 { margin: var(--space-1) 0; font-size: var(--fs-2xl); }
.improve-head__font { margin: 0; color: var(--color-fg-muted); }
.improve-step { display: grid; gap: var(--space-4); padding: var(--space-6) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-xl); background: var(--color-surface); }
.improve-step form { display: grid; gap: var(--space-3); justify-items: start; }
.improve-step .field { width: 100%; margin: 0; border: 0; padding: 0; }
.improve-step__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.improve-step__form .dropzone { width: 100%; }
.improve-step--danger { border-color: var(--color-danger); background: var(--color-bg); }
.improve-step--danger .form-block__num { border-color: var(--color-danger); color: var(--color-danger); }
.dropzone--sm { padding: var(--space-5); }
.choice-list { display: grid; gap: var(--space-2); }
.choice { display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--space-10) + var(--space-1)); padding: 0 var(--space-4); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); cursor: pointer; }
.choice input { width: var(--space-5); height: var(--space-5); accent-color: var(--color-primary-strong); }
.choice:has(input:checked) { border-color: var(--color-primary-soft-fg); background: var(--color-primary-soft); }
.choice--sub { margin-top: var(--space-2); border-style: dashed; font-size: var(--fs-sm); }
.btn--danger-ghost { background: var(--color-bg); color: var(--color-danger); border-color: var(--color-danger); }
.btn--danger-ghost:hover { background: var(--color-danger-soft); }

@media (min-width: 640px) {
    .home-hero__cta { width: auto; justify-self: start; }
    .home-flow__fonts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .improve-box { grid-template-columns: auto 1fr auto; }
    .improve-box .btn { grid-column: auto; }
    .improve-step { padding: var(--space-6); }
    .owner-login { padding: var(--space-8); }
    .owner-login__form { grid-template-columns: 1fr auto; align-items: start; }
    .owner-login__form > .alert { grid-column: 1 / -1; }
}

@media (min-width: 1024px) {
    .home-hero { padding: var(--space-12) 0 var(--space-16); }
    .home-hero .container { justify-items: center; text-align: center; }
    .home-hero__title { font-size: var(--fs-4xl); }
    .home-hero__cta { justify-self: center; }
    .home-flow { grid-template-columns: minmax(0, 6fr) auto minmax(0, 4fr); align-items: center; gap: var(--space-8); margin-top: var(--space-10); }
    .home-flow--solo { grid-template-columns: minmax(0, 1fr); }
    .home-flow__art { max-width: none; }
    .home-flow--solo .home-flow__art { max-width: var(--container-sm); }
    .home-flow__arrow { transform: none; }
    .home-flow__fonts { grid-template-columns: 1fr; text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
    .sample-card, .home-hero__cta svg { transition: none; }
    .sample-card:hover,
    .home-flow__fonts li:nth-child(2) .sample-card:hover { transform: none; }
}

/* 게시판 카드도 홈 카드처럼 preview.png 의 왼쪽 위 글씨만 크게 (designer 검토 필수 1) */
.font-card__preview { padding: 0; }
.font-card__preview img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; object-position: left top; }

/* 올린 파일 보기 (_uploaded.php) + 고른 파일 이름 (스캔 더 넣기·개선) */
.uploaded { display: grid; gap: var(--space-3); margin: var(--space-4) 0; }
.uploaded__title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.uploaded__list { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.uploaded__item { display: grid; gap: var(--space-1); justify-items: center; font-size: var(--fs-xs); color: var(--color-fg-muted); font-variant-numeric: tabular-nums; }
.uploaded__thumb { display: grid; place-items: center; width: 100%; aspect-ratio: 3 / 4; border: 1px solid var(--color-border); border-radius: var(--radius-md); background: #fff; overflow: hidden; font-weight: var(--fw-bold); color: var(--color-fg); }
.uploaded__thumb img { width: 100%; height: 100%; object-fit: cover; }
.uploaded__item.is-new .uploaded__thumb { border: 2px solid var(--color-primary-strong); }
.uploaded__item.is-new::after { content: "방금 올림"; color: var(--color-primary-soft-fg); font-weight: var(--fw-semibold); }
.file-item--plain { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-3); }
.file-list:empty { display: none; }


/* ═════════════ 2026-10-11 글자 고치기 (.design/sw4u/font/spec-2026-10-11-glyph.md) ═════════════ */

/* 개선 화면 ② */
.glyph-pick { display: flex; gap: var(--space-2); align-items: stretch; }
.glyph-pick__input {
    width: calc(var(--space-16) + var(--space-4));       /* 80px — 한 글자 칸 */
    font-size: var(--fs-xl);
    font-weight: var(--fw-bold);
    text-align: center;
}
.glyph-done { display: grid; gap: var(--space-2); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.glyph-done__title { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.glyph-done__count { color: var(--color-fg-muted); font-weight: var(--fw-regular); }
.glyph-chips { display: flex; flex-wrap: wrap; gap: var(--space-2); margin: 0; padding: 0; list-style: none; }
.glyph-chip { display: inline-flex; align-items: stretch; border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--color-bg); overflow: hidden; }
.glyph-chip form { display: contents; }
.glyph-chip__ch {
    display: grid; place-items: center;
    min-width: calc(var(--space-10) + var(--space-1)); min-height: calc(var(--space-10) + var(--space-1));
    padding: 0 var(--space-2);
    color: var(--color-fg); font-family: var(--glyph-font, var(--font-sans)); font-size: var(--fs-lg);
    text-decoration: none;
}
.glyph-chip__ch:hover { background: var(--color-primary-soft); color: var(--color-primary-soft-fg); }
.glyph-chip__x {
    display: grid; place-items: center;
    width: calc(var(--space-10) + var(--space-1));
    border: 0; border-left: 1px solid var(--color-border);
    background: transparent; color: var(--color-fg-muted); cursor: pointer;
}
.glyph-chip__x svg { width: var(--space-4); height: var(--space-4); }
.glyph-chip__x:hover { background: var(--color-danger-soft); color: var(--color-danger); }

/* 편집 화면 */
.glyph { display: grid; gap: var(--space-5); max-width: calc(var(--container-md) + var(--space-8)); padding-top: var(--space-8); padding-bottom: var(--space-12); }
.glyph-head__title { display: flex; align-items: center; gap: var(--space-3); margin: var(--space-1) 0 0; font-size: var(--fs-2xl); }
.glyph-head__ch {
    display: inline-grid; place-items: center;
    width: var(--space-12); height: var(--space-12);
    border-radius: var(--radius-md);
    background: var(--color-primary-soft); color: var(--color-primary-soft-fg);
}
.glyph-head__font { margin: 0; color: var(--color-fg-muted); font-size: var(--fs-sm); }

.glyph-editor { display: grid; gap: var(--space-4); }
.glyph-stage {
    position: relative;
    width: 100%;
    max-width: calc(var(--space-16) * 7.5);              /* 480px */
    aspect-ratio: 1;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;                                     /* G2: 저장 데이터와 같은 흰 종이 — 테마 무관(게시판 미리보기와 같은 예외) */
    box-shadow: var(--shadow-sm);
}
.glyph-canvas { display: block; width: 100%; height: 100%; touch-action: none; cursor: crosshair; }
.glyph-stage.is-eraser .glyph-canvas { cursor: cell; }
.glyph-stage.is-loading::after {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(90deg, transparent, var(--color-primary-soft), transparent);
    opacity: .6; animation: glyph-shimmer 1.2s linear infinite;
}
@keyframes glyph-shimmer { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.glyph-stage:focus-within { box-shadow: var(--shadow-focus); }
.glyph-guide { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.glyph-guide__box { fill: none; stroke: var(--color-primary); stroke-width: 2; stroke-dasharray: 8 6; opacity: .7; }
.glyph-guide__mid { fill: none; stroke: var(--color-primary); stroke-width: 1; opacity: .3; }
.glyph-guide__base { fill: none; stroke: var(--color-primary); stroke-width: 2; opacity: .8; }
.glyph-guide__cap { fill: none; stroke: var(--color-primary); stroke-width: 1; stroke-dasharray: 8 6; opacity: .6; }
.glyph-stage__nojs { position: absolute; inset: auto var(--space-3) var(--space-3); margin: 0; padding: var(--space-2) var(--space-3); border-radius: var(--radius-md); background: var(--color-warn-soft); color: var(--gray-900); font-size: var(--fs-sm); }

.glyph-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: var(--space-1); }
.glyph-tool {
    display: grid; justify-items: center; gap: var(--space-1);
    min-height: calc(var(--space-16) - var(--space-1));   /* 60px */
    padding: var(--space-2) var(--space-1);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-bg);
    color: var(--color-fg);
    font: inherit; font-size: var(--fs-xs); font-weight: var(--fw-semibold);
    cursor: pointer;
}
.glyph-tool svg { width: var(--space-6); height: var(--space-6); }
.glyph-tool:hover { background: var(--color-surface-2); }
.glyph-tool[aria-pressed="true"] { border-color: var(--color-primary-strong); background: var(--color-primary-strong); color: var(--color-primary-fg); }
.glyph-tool:disabled { opacity: .45; cursor: not-allowed; }
.glyph-size { grid-column: 1 / -1; display: flex; align-items: center; gap: var(--space-3); min-height: calc(var(--space-10) + var(--space-1)); font-size: var(--fs-sm); font-weight: var(--fw-semibold); }
.glyph-size input[type="range"] { flex: 1; accent-color: var(--color-primary-strong); }
.glyph-size__dot {
    flex-shrink: 0;
    width: var(--dot, 14px); height: var(--dot, 14px);     /* JS 가 굵기 × 표시 배율로 --dot 을 넣는다 */
    max-width: var(--space-10); max-height: var(--space-10);
    border-radius: var(--radius-full); background: var(--color-fg);
}

.glyph-fit { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); padding: var(--space-3); border: 1px dashed var(--color-primary-soft-fg); border-radius: var(--radius-md); background: var(--color-primary-soft); }
.glyph-fit .glyph-size { grid-column: 1 / -1; color: var(--color-fg); }

.glyph-actions { display: grid; grid-template-columns: 1fr 2fr; gap: var(--space-2); }
.glyph-photo { grid-column: 1 / -1; }
.glyph-save { width: 100%; }

@media (min-width: 640px) {
    .glyph-editor { grid-template-columns: minmax(0, calc(var(--space-16) * 7.5)) minmax(0, 1fr); align-items: start; column-gap: var(--space-5); }
    .glyph-editor > .alert,
    .glyph-actions,
    .glyph-editor > .more { grid-column: 1 / -1; }
    .glyph-editor > .alert { grid-row: 1; }
    .glyph-stage { grid-column: 1; grid-row: 2; }
    .glyph-tools, .glyph-fit { grid-column: 2; grid-row: 2; grid-template-columns: 1fr; }
    .glyph-tool { grid-template-columns: auto 1fr; justify-items: start; align-items: center; min-height: calc(var(--space-10) + var(--space-1)); padding: var(--space-2) var(--space-3); font-size: var(--fs-sm); }
    .glyph-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; }
    .glyph-photo { margin-right: auto; }
    .glyph-save { width: auto; min-width: calc(var(--space-16) * 2); }
}

@media (prefers-reduced-motion: reduce) {
    .glyph-stage.is-loading::after { animation: none; }
}

/* designer 검토 반영: 맞추기 중엔 아래 취소·저장을 숨긴다 · ② 입력칸은 한 줄 · 맞추기 라벨 폭 */
.glyph-editor.is-fitting .glyph-actions,
.glyph-editor.is-fitting > .more { display: none; }
.improve-step form.glyph-pick { display: flex; }
.glyph-fit .glyph-size label { min-width: calc(var(--space-12) + var(--space-1)); }
@media (min-width: 640px) {
    .glyph-actions { grid-row: 3; }           /* 오류 상자가 숨어도 행이 밀리지 않게 */
    .glyph-editor > .more { grid-row: 4; }
}

/* 2026-10-12 neis.me 이전 — 상단 메뉴의 회원 이름(→ 내 폰트): 사람 아이콘 + 긴 이름은 말줄임 (designer 검토) */
.nav__link--me { display: inline-flex; align-items: center; gap: var(--space-1); max-width: 10em; }
.nav__link--me svg { flex: none; width: var(--space-4); height: var(--space-4); }
.nav__link--me span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav__link { white-space: nowrap; }
@media (max-width: 480px) { .nav__link--me { max-width: 6em; } }

/* ══════════════════════════════════════════════════════════════
   2026-10-12 neis.me 공통 머리 아래 서브메뉴
   맨 위는 neis.me 머리(_includes/site_header.php, site-chrome.css), 옛 상단 바는 손글씨 폰트 서브메뉴가 된다.
   로그인·테마 토글은 neis.me 머리 것을 쓴다.
   ══════════════════════════════════════════════════════════════ */
.nm-chrome { display: contents; }   /* 감싸기만 하고 상자는 없앤다 → neis.me 머리의 sticky 가 페이지 기준으로 동작 */
.subnav { background: var(--color-surface-2); }
.subnav .topbar__inner { min-height: var(--space-12); }
.subnav .brand { font-size: var(--fs-sm); }
.subnav .brand__mark { width: var(--space-6); height: var(--space-6); font-size: var(--fs-sm); }

/* ── 2026-10-12 만들기 관문 — 로그인·휴대폰 번호가 없으면 폼 대신 보인다 ── */
.make-gate { display: grid; justify-items: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); text-align: center; }
.make-gate__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--color-fg); }
.make-gate__hint { margin: calc(var(--space-2) * -1) 0 0; font-size: var(--fs-sm); color: var(--color-fg-muted); }