/* =====================================================================
유학생 입학지원 시스템 — 프로덕션 디자인 시스템
⚠ 2026‑08‑14: 머리 문구에서 학교 이름을 뺐다. **구독이라 여러 학교가 한 서버를 쓴다**
(`QUR-007` · `COR-006` · `BUR-012`). ⛔ 한 학교 이름을 이름표로 달지 않는다.
static/css/app.css
원칙
- 팔레트·레이아웃 언어는 design/wireframes/*.dc.html 25종을 계승 (톤 1a + 주 버튼 블루)
- self-contained: 외부 CDN·웹폰트 없음 (시스템 폰트 스택, ko/vi/en 커버)
- CSS 변수 기반. 화면별 추가는 "부분 클래스"만 (§13 이후)
- 상태 표기는 항상 색+아이콘+텍스트 삼중 (색 단독 금지)
- 데이터 값(번호·날짜·금액·건수)은 .mono
- "합격" 라벨은 offered/offer_revoked 상태에만. 그 전 단계는 "통과"(중립/그린)
목차
1 토큰(:root) 2 리셋·베이스 3 레이아웃(헤더·메인·푸터·컨테이너)
4 타이포 유틸 5 폼 6 버튼
7 배지·상태 8 카드 9 표·목록
10 진행률·단계 네비 11 알림·토스트 12 액션바·kbd·페이지네이션
13 부분: 대시보드(A1) 14 부분: 지원서(S3) 15 부분: 검수 콘솔(R1)
16 부분: 인증(로그인·가입) 17 반응형 공통 18 접근성·모션
===================================================================== */
/* ============ 1. 토큰 ============ */
:root {
/* 배경 (크림/웜 오프화이트) */
--bg: #f7f6f3;
--bg-soft: #faf9f6;
--bg-mute: #f3f2ee;
--bg-deep: #f0eee9;
--surface: #ffffff;
--surface-raise: #fbfaf8;
--surface-soft: var(--surface-raise);
/* 경계선 */
--border: #e6e3dd;
--border-strong: #cfccc6;
--line-strong: var(--border-strong);
--border-soft: #f0eee9;
--border-input: #d4d0c8;
/* 잉크 (웜 차콜 스케일) */
--ink: #232320;
--ink-2: #3a3833;
--ink-3: #55524c;
--ink-mute: #6f6b64;
--ink-faint: #747068;
--ink-ghost: #a9a49b;
/* 브랜드 차콜 (로고·헤딩 강조) */
--brand: #2c2a26;
--brand-deep: #0f0e0d;
--brand-hover: #3a3833;
/* 액센트 블루 = 주 액션·링크·포커스·선택 */
--blue: #3a6ea5;
--blue-deep: #3a5a80;
--blue-hover: #33628f;
--blue-bg: #eef2f7;
--blue-bg-soft: #f4f7fb;
--blue-border: #d4dee8;
/* 성공/완료 그린 */
--green: #2e7d5b;
--green-deep: #1f6045;
--green-hover: #28684d;
/* 대비 4.48 → 4.62 (WCAG 4.5). 2026-08-16 `qualitycheck/색대비검사.py` 실측 */
--green-bg: #eff8f3;
--green-border: #bfe0cf;
/* 보완/경고 앰버 */
--amber: #b07a1e;
--amber-deep: #8a6413;
--amber-bg: #faf1df;
--amber-bg-soft: #fdf6ea;
--amber-border: #ecdcb8;
/* 실패/불일치 레드 */
--red: #b8452f;
--red-hover: #a03c28;
--red-deep: #82352e;
--red-bg: #f9ece8;
--red-border: #eccfc6;
/* 면접·검토 대기 퍼플 */
--purple: #6b5aa5;
--purple-deep: #4d3f73;
--purple-bg: #f1eef8;
--purple-border: #dcd4ec;
/* 타이포 — 시스템 스택 (오프라인/CSP 안전, ko/vi/en) */
--font-sans: system-ui, -apple-system, 'Segoe UI', 'Apple SD Gothic Neo',
'Malgun Gothic', 'Noto Sans KR', 'Helvetica Neue', Arial, sans-serif;
--font-mono: ui-monospace, 'SF Mono', 'Cascadia Mono', Consolas, Menlo, monospace;
--fs-xs: 11.5px; /* 캡션·메타 (최소 크기) */
--fs-sm: 12.5px; /* 보조 텍스트·라벨 */
--fs-body: 14px; /* 본문 기본 (직원 화면 하한) */
--fs-body-lg: 15px;/* 모바일 입력·본문 */
--fs-h3: 15.5px;
--fs-h2: 18px;
--fs-lg: var(--fs-h2);
--fs-h1: 22px;
/* 간격 (4/8px 그리드) */
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
/* radius · 그림자 */
--r-sm: 6px; --r-md: 9px; --r-lg: 12px; --r-pill: 999px;
--shadow-sm: 0 1px 3px rgba(44, 42, 38, .07);
--shadow-md: 0 4px 14px rgba(44, 42, 38, .10);
--shadow-lg: 0 20px 60px rgba(30, 28, 25, .30);
/* focus outline 색과 box-shadow ring은 서로 다른 계약이다. */
--focus-color: var(--blue);
--focus-ring: 0 0 0 3px rgba(58, 110, 165, .18);
/* 의미형 alias: 기존 palette/token을 보존하면서 역할 이름으로 이관한다. */
--color-text-primary: var(--ink);
--color-text-body: var(--ink-2);
--color-text-muted: var(--ink-mute);
--color-action-primary: var(--blue);
--color-action-primary-hover: var(--blue-hover);
--color-status-neutral: var(--ink-mute);
--color-status-neutral-bg: var(--bg-mute);
--color-status-neutral-border: var(--border);
--color-status-info: var(--blue-deep);
--color-status-info-bg: var(--blue-bg);
--color-status-info-border: var(--blue-border);
--color-status-success: var(--green-deep);
--color-status-success-bg: var(--green-bg);
--color-status-success-border: var(--green-border);
--color-status-warning: var(--amber-deep);
--color-status-warning-bg: var(--amber-bg);
--color-status-warning-border: var(--amber-border);
--color-status-error: var(--red);
--color-status-error-bg: var(--red-bg);
--color-status-error-border: var(--red-border);
--space-internal-xs: var(--sp-1);
--space-internal-sm: var(--sp-2);
--space-internal-md: var(--sp-3);
--space-internal-lg: var(--sp-4);
--space-section-sm: var(--sp-6);
--space-section-md: var(--sp-8);
--space-section-lg: var(--sp-10);
--surface-page: var(--bg);
--surface-object: var(--surface);
--surface-raised: var(--surface-raise);
--button-primary-bg: var(--color-action-primary);
--button-primary-hover: var(--color-action-primary-hover);
--button-primary-text: #ffffff;
--button-secondary-bg: var(--surface-object);
--button-secondary-border: var(--border-strong);
--button-secondary-text: var(--ink-3);
--header-h: 58px;
--container: 1160px;
--container-narrow: 460px;
--container-wide: 1400px;
}
[hidden] { display: none !important; }
[x-cloak] { display: none !important; }
/* ============ 2. 리셋·베이스 ============ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; max-width: 100%; overflow-x: clip; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--fs-body);
line-height: 1.55;
color: var(--ink-2);
background: var(--bg);
-webkit-font-smoothing: antialiased;
max-width: 100%; overflow-x: clip;
}
h1, h2, h3, h4, p { margin: 0 0 var(--sp-3); }
h1 { font-size: var(--fs-h1); color: var(--ink); line-height: 1.3; }
h2 { font-size: var(--fs-h2); color: var(--ink); line-height: 1.35; }
h3 { font-size: var(--fs-h3); color: var(--ink); line-height: 1.4; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-deep); text-decoration: underline; }
img, svg { max-width: 100%; vertical-align: middle; }
input, select, textarea, button { font: inherit; color: inherit; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb {
background: #c9c6c0; border-radius: 6px;
border: 2px solid transparent; background-clip: content-box;
}
:focus-visible {
outline: 2px solid var(--focus-color);
outline-offset: 2px;
}
/* ============ 3. 레이아웃 ============ */
.skip-link {
position: absolute; left: -9999px; top: 0; z-index: 100;
padding: 10px 16px; background: var(--brand); color: #fff; border-radius: 0 0 var(--r-md) 0;
}
.skip-link:focus { left: 0; color: #fff; text-decoration: none; }
/* --- 상단 헤더 (모든 화면 공유) --- */
.app-header {
display: flex; align-items: center; gap: var(--sp-3);
min-height: var(--header-h); padding: 8px var(--sp-6);
background: var(--surface); border-bottom: 1px solid var(--border);
}
.app-header__brand {
display: flex; align-items: center; gap: 11px;
color: inherit; text-decoration: none; min-width: 0;
}
.app-header__brand:hover { text-decoration: none; color: inherit; }
.app-header__mark {
flex: none; width: 30px; height: 30px; border-radius: 8px;
background: var(--brand); color: var(--bg);
display: inline-flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.app-header__titles { display: flex; flex-direction: column; min-width: 0; }
.app-header__title { font-size: 14.5px; font-weight: 700; color: var(--ink); line-height: 1.25; white-space: nowrap; }
.app-header__title-short { display: none; }
.app-header__sub {
font-family: var(--font-mono); font-size: 10px; letter-spacing: .4px;
color: var(--ink-ghost); line-height: 1.25; white-space: nowrap;
}
.app-header__actions { display: flex; align-items: center; gap: var(--sp-3); margin-left: auto; }
.app-header__user { font-size: var(--fs-sm); color: var(--ink-3); white-space: nowrap; }
.app-header__account-menu { display: none; position: relative; }
.app-header__account-menu summary {
width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
border: 1px solid var(--border-input); border-radius: var(--r-md); background: var(--surface);
cursor: pointer; font-size: 22px; line-height: 1; list-style: none;
}
.app-header__account-menu summary::-webkit-details-marker { display: none; }
.app-header__account-popover {
position: absolute; z-index: 80; top: calc(100% + 6px); right: 0; width: min(280px, calc(100vw - 32px));
display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-2);
padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); box-shadow: var(--shadow-md);
}
.app-header__account-email { font-size: var(--fs-xs); overflow-wrap: anywhere; }
.app-nav {
padding: var(--sp-2) var(--sp-6);
background: var(--bg-soft);
border-bottom: 1px solid var(--border);
}
.app-nav .btn.is-active {
color: var(--blue-deep);
background: var(--blue-bg-soft);
border-color: var(--blue-border);
}
.app-nav__manage { position: relative; }
.app-nav__manage > summary { list-style: none; cursor: pointer; }
.app-nav__manage > summary::-webkit-details-marker { display: none; }
.app-nav__manage-menu {
position: absolute; z-index: 70; top: calc(100% + 6px); right: 0;
display: flex; flex-direction: column; align-items: stretch; gap: var(--sp-1);
min-width: 210px; padding: var(--sp-2);
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); box-shadow: var(--shadow-md);
}
.app-nav__manage-menu .btn { justify-content: flex-start; width: 100%; }
.app-sidebar-toggle { position: fixed; opacity: 0; pointer-events: none; }
.app-sidebar-toggle-button {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; flex: none;
border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); color: var(--ink); cursor: pointer;
}
.app-shell { min-width: 0; }
.app-shell:has(> .app-sidebar) {
display: grid; grid-template-columns: 232px minmax(0, 1fr);
align-items: stretch; min-height: calc(100vh - var(--header-h));
}
.app-shell__content { min-width: 0; display: flex; flex-direction: column; }
.app-shell__content > .app-main { flex: 1; width: 100%; }
.app-sidebar {
position: sticky; top: 0; align-self: start;
display: flex; flex-direction: column; gap: var(--sp-4);
width: 232px; max-height: 100vh; overflow-y: auto;
padding: var(--sp-3);
border-right: 1px solid var(--border); background: var(--bg-soft);
}
.app-sidebar__head { display: flex; align-items: center; gap: var(--sp-2); }
.app-sidebar__home,
.app-sidebar__item {
display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; gap: var(--sp-2);
min-height: 44px; padding: 7px 9px;
border: 1px solid transparent; border-radius: var(--r-md);
color: var(--ink-3); text-decoration: none;
}
.app-sidebar__home { flex: 1; font-weight: 800; }
.app-sidebar__home:hover,
.app-sidebar__item:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.app-sidebar__home.is-active,
.app-sidebar__item.is-active {
color: var(--blue-deep); background: var(--blue-bg-soft);
border-color: var(--blue-border); box-shadow: inset 3px 0 0 var(--blue);
}
.app-sidebar__icon {
display: inline-flex; align-items: center; justify-content: center;
width: 28px; height: 28px; font-size: 16px; font-weight: 800;
}
.app-sidebar__label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-sidebar__close {
display: none; align-items: center; justify-content: center;
width: 44px; height: 44px; border: 0; background: transparent;
color: inherit; cursor: pointer; font-size: 24px;
}
.app-sidebar__group { display: grid; gap: 2px; }
.app-sidebar__group > h2 {
margin: 0; padding: 4px 9px;
color: var(--ink-faint); font-size: var(--fs-xs); letter-spacing: .08em;
}
.app-sidebar__group--management {
padding-top: var(--sp-3); border-top: 1px solid var(--border);
}
.app-sidebar-backdrop { display: none; border: 0; padding: 0; }
.delegated-context {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
min-height: 42px; padding: 7px var(--sp-6);
background: var(--blue-bg-soft); border-bottom: 1px solid var(--blue-border);
color: var(--blue-deep); font-size: var(--fs-sm);
}
.delegated-context__label { color: var(--ink-mute); }
/* 언어 스위처 */
.lang-switch { display: inline-flex; }
.lang-switch select {
padding: 8px 10px; min-height: 36px;
border: 1px solid var(--border-input); border-radius: 8px;
background: var(--bg-soft); font-size: var(--fs-sm); color: var(--ink-2);
cursor: pointer;
}
/* --- 메인·푸터 --- */
.app-main { min-height: calc(100vh - var(--header-h) - 52px); padding: var(--sp-6); }
.app-main--flush { padding: 0; } /* 검수 콘솔 등 풀블리드 화면 */
.app-main--center { /* 로그인·가입 등 중앙 정렬 화면 */
display: flex; align-items: flex-start; justify-content: center;
padding-top: clamp(24px, 8vh, 72px);
}
.app-footer {
display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap;
padding: var(--sp-4) var(--sp-6);
border-top: 1px solid var(--border);
font-size: var(--fs-xs); color: var(--ink-faint);
}
.app-footer a { color: var(--ink-faint); }
.container { width: 100%; max-width: var(--container); margin: 0 auto; }
.container--narrow { max-width: var(--container-narrow); }
.container--wide { max-width: var(--container-wide); }
/* 공용 행/스택 (형제 간격은 항상 gap으로) */
.row { display: flex; align-items: center; gap: var(--sp-3); }
.row--wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.stack--xs { gap: var(--space-internal-xs); }
.spacer { flex: 1; }
/* ============ 4. 타이포 유틸 ============ */
.mono { font-family: var(--font-mono); }
.muted { color: var(--ink-faint); }
.text-sm { font-size: var(--fs-sm); }
.text-xs { font-size: var(--fs-xs); }
.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;
}
.page-title { font-size: var(--fs-h1); font-weight: 700; color: var(--ink); margin: 0; }
.section-title { font-size: var(--fs-h3); font-weight: 700; color: var(--ink-2); margin: 0; }
.page-sub { font-size: var(--fs-sm); color: var(--ink-mute); font-family: var(--font-mono); margin: 2px 0 0; }
/* 역할별 밀도. 화면은 body class를 통해서만 밀도를 선택한다. */
body.ui-density--comfortable {
--type-page-size: 28px;
--type-page-line: 36px;
--type-section-size: 22px;
--type-section-line: 30px;
--type-component-size: 18px;
--type-component-line: 26px;
--type-body-size: 16px;
--type-body-line: 24px;
--type-meta-size: 14px;
--type-meta-line: 20px;
--fs-xs: 13px;
--fs-sm: var(--type-meta-size);
--fs-body: var(--type-body-size);
--fs-body-lg: 16px;
--fs-h3: var(--type-component-size);
--fs-h2: var(--type-section-size);
--fs-h1: var(--type-page-size);
}
body.ui-density--compact {
--type-page-size: 24px;
--type-page-line: 32px;
--type-section-size: 20px;
--type-section-line: 28px;
--type-component-size: 16px;
--type-component-line: 24px;
--type-body-size: 14px;
--type-body-line: 21px;
--type-meta-size: 13px;
--type-meta-line: 18px;
--fs-xs: 12px;
--fs-sm: var(--type-meta-size);
--fs-body: var(--type-body-size);
--fs-body-lg: 16px;
--fs-h3: var(--type-component-size);
--fs-h2: var(--type-section-size);
--fs-h1: var(--type-page-size);
}
body.ui-density--comfortable,
body.ui-density--compact { font-size: var(--type-body-size); line-height: var(--type-body-line); }
.ui-density--comfortable .page-title,
.ui-density--compact .page-title { font-size: var(--type-page-size); line-height: var(--type-page-line); }
.ui-density--comfortable .section-title,
.ui-density--compact .section-title { font-size: var(--type-section-size); line-height: var(--type-section-line); }
.ui-density--comfortable .card__title,
.ui-density--compact .card__title { font-size: var(--type-component-size); line-height: var(--type-component-line); }
.ui-density--comfortable .page-sub,
.ui-density--compact .page-sub { font-size: var(--type-meta-size); line-height: var(--type-meta-line); }
.ui-density--comfortable .btn,
.ui-density--compact .btn { font-size: var(--type-meta-size); }
.ui-density--comfortable .btn.btn--lg,
.ui-density--compact .btn.btn--lg { font-size: var(--fs-body-lg); }
/* ============ 5. 폼 ============ */
/* 라벨 위 + 입력 아래 세로 스택. 다국어 라벨은 줄바꿈 허용(잘림 금지) */
.form-group { margin-bottom: var(--sp-4); min-width: 0; }
.form-label {
display: block; margin-bottom: 5px;
font-size: var(--fs-sm); font-weight: 600; color: var(--ink-2);
line-height: 1.45; overflow-wrap: break-word;
}
.req { color: var(--red); font-weight: 700; } /* 필수 * */
.form-help { margin-top: 5px; font-size: var(--fs-xs); color: var(--ink-faint); line-height: 1.5; }
.form-hint {
display: block; margin-top: var(--space-internal-xs);
color: var(--color-text-muted); font-size: var(--type-meta-size, var(--fs-sm)); line-height: var(--type-meta-line, 1.5);
}
.input {
display: block; width: 100%; min-height: 44px;
padding: 11px 12px;
border: 1px solid var(--border-input); border-radius: var(--r-md);
background: var(--surface); color: var(--ink);
font-size: var(--fs-body);
}
.input::placeholder { color: var(--ink-faint); }
.input:focus { outline: none; border-color: var(--blue); box-shadow: var(--focus-ring); }
.input:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.input:disabled, .input[readonly] { background: var(--bg-mute); color: var(--ink-mute); cursor: not-allowed; }
.file-picker { display: flex; align-items: center; gap: var(--sp-3); min-width: 0; }
.file-picker__name { min-width: 0; color: var(--ink-mute); font-size: var(--fs-sm); overflow-wrap: anywhere; }
textarea.input { min-height: 96px; resize: vertical; line-height: 1.55; }
select.input {
appearance: none; padding-right: 34px; cursor: pointer;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%236f6b64' stroke-width='1.8'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center;
}
.input--mono { font-family: var(--font-mono); } /* 여권번호·계좌·날짜 등 데이터 값 */
/* 에러 상태: 테두리 + 배경 + role="alert" 메시지 */
.input--error, .input[aria-invalid="true"] {
border-color: var(--red); border-width: 1.5px; background: #fdf6f4;
}
.form-error {
display: block; margin-top: var(--space-internal-xs);
color: var(--color-status-error); font-size: var(--type-meta-size, var(--fs-sm)); line-height: var(--type-meta-line, 1.5);
}
/* 체크박스·라디오 행 (터치 44px) */
.check-row {
display: flex; align-items: flex-start; gap: 9px;
padding: 6px 0; min-height: 36px;
font-size: var(--fs-body); color: var(--ink-2); cursor: pointer;
line-height: 1.5;
}
.check-row input[type="checkbox"], .check-row input[type="radio"] {
flex: none; width: 17px; height: 17px; margin: 2px 0 0;
accent-color: var(--blue); cursor: pointer;
}
/* 2열 폼 그리드 (모바일 1열) */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.form-grid .form-group { margin-bottom: 0; }
.form-grid__full { grid-column: 1 / -1; }
/* 연/월/일 분리 드롭다운 */
.date-parts { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: var(--sp-2); }
/* 폼 하단 액션 */
.form-actions {
display: flex; justify-content: flex-end; gap: var(--sp-2); flex-wrap: wrap;
padding-top: var(--sp-4); margin-top: var(--sp-2);
border-top: 1px solid var(--border-soft);
}
.form-actions .btn--primary { margin-left: auto; }
/* 자동저장 표시 */
.autosave { display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-xs); color: var(--green); white-space: nowrap; }
/* ============ 6. 버튼 ============ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 7px;
min-height: 44px; padding: 10px 18px;
border: 1px solid transparent; border-radius: var(--r-md);
font-size: 13.5px; font-weight: 600; line-height: 1.3;
cursor: pointer; text-decoration: none; white-space: nowrap;
background: none;
}
.btn:hover { text-decoration: none; }
.btn:disabled, .btn[aria-disabled="true"] {
background: var(--border-strong); border-color: var(--border-strong);
color: #7a766e; cursor: not-allowed;
}
/* 주 버튼 = 블루 (화면당 1개 원칙) */
.btn--primary { background: var(--button-primary-bg); border-color: var(--button-primary-bg); color: var(--button-primary-text); font-weight: 700; }
.btn--primary:hover { background: var(--button-primary-hover); border-color: var(--button-primary-hover); color: var(--button-primary-text); }
/* 보조 버튼 = 흰 배경 아웃라인 */
.btn--secondary { background: var(--button-secondary-bg); border-color: var(--button-secondary-border); color: var(--button-secondary-text); }
.btn--secondary:hover { background: var(--bg-mute); color: var(--ink); }
/* 성공 = 제출·승인 계열 (검수 [승인], 활성화된 [제출하기]) */
.btn--success { background: var(--green); border-color: var(--green); color: #fff; font-weight: 700; }
.btn--success:hover { background: var(--green-hover); border-color: var(--green-hover); color: #fff; }
/* 소프트 변형: 검수 2버튼([승인]/[보완])처럼 넓은 면적에서 눈 피로 줄일 때 */
.btn--success-soft { background: var(--green-bg); border: 1.5px solid var(--green); color: var(--green-deep); font-weight: 700; }
.btn--success-soft:hover { background: #ddeee6; color: var(--green-deep); }
.btn--warn-soft { background: var(--amber-bg); border: 1.5px solid var(--amber); color: var(--amber-deep); font-weight: 700; }
/* 대비 4.34 → 4.59 (WCAG 4.5). 2026-08-16 `qualitycheck/색대비검사.py` 실측 */
.btn--warn-soft:hover { background: #f7ecd8; color: var(--amber-deep); }
/* 위험 */
.btn--danger { background: var(--red); border-color: var(--red); color: #fff; font-weight: 700; }
.btn--danger:hover { background: var(--red-hover); border-color: var(--red-hover); color: #fff; }
.btn--danger-ghost { background: var(--surface); border-color: var(--red-border); color: var(--red); }
.btn--danger-ghost:hover { background: var(--red-bg); color: var(--red); }
/* 고스트(텍스트형) */
.btn--ghost { background: transparent; border-color: transparent; color: var(--blue); }
.btn--ghost:hover { background: var(--blue-bg); color: var(--blue-deep); }
/* 크기 */
.btn--sm { min-height: 36px; padding: 6px 12px; font-size: var(--fs-sm); border-radius: 7px; }
.btn--lg { min-height: 48px; padding: 13px 24px; font-size: var(--fs-body-lg); }
.btn--block { display: flex; width: 100%; }
/* ============ 7. 배지·상태 ============ */
/* 항상 아이콘 글리프 + 텍스트를 함께 넣는다: ✓ 승인 */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: var(--r-pill);
border: 1px solid var(--color-status-neutral-border); background: var(--color-status-neutral-bg);
font-size: var(--fs-xs); font-weight: 600; color: var(--color-status-neutral);
white-space: nowrap;
}
.badge--ok { background: var(--color-status-success-bg); border-color: var(--color-status-success-border); color: var(--color-status-success); }
.badge--warn { background: var(--color-status-warning-bg); border-color: var(--color-status-warning-border); color: var(--color-status-warning); }
.badge--error { background: var(--color-status-error-bg); border-color: var(--color-status-error-border); color: var(--color-status-error); }
.badge--info { background: var(--color-status-info-bg); border-color: var(--color-status-info-border); color: var(--color-status-info); }
.badge--muted { background: var(--color-status-neutral-bg); border-color: var(--color-status-neutral-border); color: var(--color-status-neutral); }
.badge--interview{ background: var(--color-status-info-bg); border-color: var(--color-status-info-border); color: var(--color-status-info); }
.badge--final { background: var(--green-deep); border-color: var(--green-deep); color: #fff; }
/* 상태명 → 클래스 매핑 (상태 사전과 연동)
승인/완료/통과/접수 통과 .badge--ok "✓ …"
보완요청/보완 .badge--warn "⚠ …"
불일치/거절/실패 .badge--error "✕ …"
재업로드/제출됨/정보 .badge--info "↻ …" / "○ 제출됨"
면접(명단·정규)/검토대기 .badge--interview "◐ …"
작성중/검토중/대기 .badge--muted "○ …"
최종합격(offered 이후만) .badge--final "★ 최종합격" */
/* 상태 점 (색+글리프를 텍스트 옆에 붙일 때) */
.dot { display: inline-block; width: 20px; text-align: center; font-weight: 700; }
.dot--done { color: var(--green); }
.dot--todo { color: var(--amber); }
.dot--opt { color: var(--ink-ghost); }
.dot--err { color: var(--red); }
/* ============ 8. 카드 ============ */
.card {
background: var(--surface);
border: 1px solid var(--border); border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.card__header {
display: flex; align-items: center; gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--border);
}
.card__title { font-size: var(--fs-h2); font-weight: 700; color: var(--ink); margin: 0; }
.card__meta {
margin: 2px 0 0; color: var(--color-text-muted);
font-size: var(--type-meta-size, var(--fs-sm)); line-height: var(--type-meta-line, 1.5); overflow-wrap: anywhere;
}
.card__body { padding: var(--sp-5); }
.card__footer {
display: flex; align-items: center; gap: var(--sp-2); justify-content: flex-end; flex-wrap: wrap;
padding: var(--sp-3) var(--sp-5);
border-top: 1px solid var(--border); background: var(--surface-raise);
border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.card--flat { box-shadow: none; }
/* 평면 섹션과 비어 있는 결과의 공통 계약 */
.settings-band {
display: grid; gap: var(--space-internal-lg);
padding-block: var(--space-internal-lg);
}
.empty-state {
display: grid; place-items: center; min-height: 120px;
padding: var(--space-section-md) var(--space-internal-lg);
color: var(--color-text-muted); text-align: center;
}
.empty-state[hidden] { display: none; }
.empty-state > :last-child { margin-bottom: 0; }
.ui-density--compact .empty-state { padding-block: var(--space-section-sm); }
/* ============ 9. 표·목록 ============ */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-body); }
.table th {
padding: 9px var(--sp-4); text-align: left;
background: var(--surface-raise); border-bottom: 1px solid var(--border);
font-size: 11px; font-weight: 700; color: var(--ink-faint); white-space: nowrap;
}
.table td {
padding: 11px var(--sp-4);
border-bottom: 1px solid var(--border-soft);
color: var(--ink-2); vertical-align: middle;
}
.table tbody tr:hover { background: var(--bg); }
.table tbody tr.is-selected { background: var(--blue-bg); box-shadow: inset 3px 0 0 var(--blue); }
.table .cell-main { font-weight: 600; color: var(--ink); }
.table .cell-sub { font-size: var(--fs-xs); color: var(--ink-faint); font-family: var(--font-mono); margin-top: 1px; }
.table .cell-mono { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
/* 모바일 카드 변환: | 필요 (유학원 목록 등) */
@media (max-width: 720px) {
.table--cards thead { display: none; }
.table--cards, .table--cards tbody, .table--cards tr, .table--cards td { display: block; width: 100%; }
.table--cards tr {
margin-bottom: var(--sp-2); padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.table--cards tr.is-selected { box-shadow: inset 0 0 0 1.5px var(--blue); }
.table--cards td {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: 7px 2px; border-bottom: none; text-align: right;
}
.table--cards td::before {
content: attr(data-label);
font-size: var(--fs-xs); font-weight: 600; color: var(--ink-faint); text-align: left;
}
.table--cards td[data-label=""]::before { content: none; }
}
/* Data-driven demo guide. Fixed layers avoid moving the underlying work UI. */
.demo-guide { position: fixed; inset: 0; z-index: 1203; pointer-events: none; }
.demo-guide__highlight {
position: fixed;
z-index: 1201;
border: 3px solid var(--blue);
border-radius: var(--r-lg);
background: color-mix(in srgb, var(--blue-bg) 28%, transparent);
box-shadow: 0 0 0 9999px rgba(15, 23, 42, .58), 0 0 0 6px rgba(37, 99, 235, .22);
pointer-events: none;
transition: left .16s ease, top .16s ease, width .16s ease, height .16s ease;
}
.demo-guide__bubble {
position: fixed;
z-index: 1204;
display: grid;
gap: var(--sp-3);
max-width: calc(100vw - 32px);
padding: var(--sp-4);
border: 1px solid var(--blue-border);
border-radius: var(--r-lg);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-lg);
pointer-events: auto;
}
.demo-guide__head,
.demo-guide__actions { display: flex; align-items: center; gap: var(--sp-2); }
.demo-guide__head strong { font-size: var(--fs-h3); }
.demo-guide__head .btn { margin-left: auto; }
.demo-guide__body { margin: 0; line-height: 1.65; }
.demo-guide__counter { color: var(--ink-mute); font-variant-numeric: tabular-nums; }
.demo-guide__bundle {
margin-block: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border);
border-radius: var(--r-md); background: var(--surface-raise);
}
.demo-guide__bundle p { margin: var(--sp-1) 0 var(--sp-3); color: var(--ink-mute); font-size: var(--fs-sm); }
.demo-guide__bundle-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; }
.is-demo-guide-target { position: relative; z-index: 1202; }
.theme-dark .demo-guide__highlight {
background: rgba(80, 145, 255, .14);
box-shadow: 0 0 0 9999px rgba(2, 6, 12, .72), 0 0 0 6px rgba(80, 145, 255, .26);
}
@media (max-width: 640px) {
.demo-guide__bubble { padding: var(--sp-3); }
.demo-guide__actions .btn { min-height: 44px; }
}
/* ============ 10. 진행률·단계 네비 ============ */
.progress { height: 7px; border-radius: 4px; background: var(--border); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 4px; background: var(--blue); }
.progress__bar--done { background: var(--green); } /* 필수 100% 등 완료 시 */
.progress-meta {
display: flex; justify-content: space-between; gap: var(--sp-2);
margin-bottom: 4px; font-size: var(--fs-xs); font-family: var(--font-mono);
}
.progress-meta b { color: var(--ink); }
.progress-meta span { color: var(--ink-faint); }
/* 단계 네비게이터 (S1~S5 상단) */
.steps { display: flex; align-items: flex-start; gap: 0; }
.steps__item {
flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative; min-width: 0; text-align: center;
font-size: var(--fs-xs); color: var(--ink-faint);
}
.steps__num {
width: 28px; height: 28px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--surface); border: 1.5px solid var(--border-strong);
font-weight: 700; font-size: 12.5px; color: var(--ink-mute); z-index: 1;
}
.steps__item::before { /* 연결선 */
content: ""; position: absolute; top: 14px; left: -50%; right: 50%;
height: 2px; background: var(--border);
}
.steps__item:first-child::before { display: none; }
.steps__item.is-done .steps__num { background: var(--green-bg); border-color: var(--green); color: var(--green-deep); }
.steps__item.is-done::before { background: var(--green-border); }
.steps__item.is-current { color: var(--ink); font-weight: 700; }
.steps__item.is-current .steps__num { background: var(--blue); border-color: var(--blue); color: #fff; }
.application-gates { margin: var(--sp-5) 0; padding: 0; list-style: none; }
.application-gates .badge { white-space: normal; justify-content: center; }
.progress-next {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
padding: var(--sp-3); border: 1px solid var(--blue-border); border-radius: var(--r-md); background: var(--blue-bg-soft);
}
.progress-next__label { color: var(--blue-deep); font-size: var(--fs-xs); font-weight: 700; }
.progress-next__time { color: var(--ink-faint); font-size: var(--fs-xs); }
.student-next-action { border-color: var(--blue-border); }
.student-next-action--warning { border-color: var(--amber-border); }
.student-next-action--success { border-color: var(--green-border); }
.student-next-action--muted { border-color: var(--border-strong); }
.student-next-action__lookup {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-3);
margin: 0;
}
.student-next-action__lookup > div {
min-width: 0;
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-soft);
}
.student-next-action__lookup dt { color: var(--ink-faint); font-size: var(--fs-xs); font-weight: 800; }
.student-next-action__lookup dd { margin: 4px 0 0; overflow-wrap: anywhere; font-weight: 800; }
.document-summary { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.document-summary > div:first-child { display: flex; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-2); }
.document-summary span { color: var(--ink-faint); font-family: var(--font-mono); font-size: var(--fs-xs); }
.document-group { padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.document-group__header { display: flex; align-items: center; gap: var(--sp-3); justify-content: space-between; margin-bottom: var(--sp-3); }
.document-group__header h2 { font-size: var(--fs-h3); margin: 0; }
.document-group__header p { margin: 2px 0 0; color: var(--ink-faint); font-size: var(--fs-xs); }
.document-list { display: grid; gap: var(--sp-3); }
.document-upload { border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); overflow: hidden; }
/* ============ 11. 알림·토스트 ============ */
.alert {
display: flex; gap: 9px; align-items: flex-start;
padding: 11px 13px; border-radius: var(--r-md);
border: 1px solid var(--blue-border); background: var(--blue-bg);
font-size: var(--fs-sm); color: var(--blue-deep); line-height: 1.55;
}
.alert__icon { flex: none; }
.alert--warn { background: var(--amber-bg-soft); border-color: var(--amber-border); color: var(--amber-deep); }
.alert--success { background: var(--green-bg); border-color: var(--green-border); color: var(--green-deep); }
.alert--error { background: var(--red-bg); border-color: var(--red-border); color: var(--red); }
.alert--info { background: var(--blue-bg-soft); border-color: var(--blue-border); color: var(--blue-deep); }
.error-summary {
padding: var(--space-internal-lg); border: 2px solid var(--color-status-error); border-radius: var(--r-md);
background: var(--color-status-error-bg); color: var(--color-status-error); scroll-margin-top: var(--space-internal-lg);
}
.error-summary:focus { outline: 2px solid var(--focus-color); outline-offset: 3px; }
.error-summary__title { margin: 0 0 var(--space-internal-sm); color: inherit; font-size: var(--fs-h3); }
.error-summary__list { margin: 0; padding-left: var(--sp-5); }
.error-summary__list li + li { margin-top: var(--space-internal-xs); }
.error-summary__list a { color: inherit; font-weight: 600; }
.error-summary__list a:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.toast {
position: fixed; bottom: 78px; left: 50%; transform: translateX(-50%);
padding: 11px 18px; border-radius: var(--r-md);
background: var(--ink-2); color: #fff;
font-size: 13px; box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
z-index: 60; animation: toast-in .2s ease;
}
@keyframes toast-in { from { opacity: 0; transform: translate(-50%, 8px); } to { opacity: 1; transform: translate(-50%, 0); } }
/* ============ 12. 액션바·kbd·페이지네이션 ============ */
/* 고정 하단 액션바 (검수·지원서 제출) — 본문 마지막에 두고 body에 여백 확보 */
.action-bar {
position: sticky; bottom: 0; z-index: 30;
display: flex; align-items: center; gap: var(--sp-4);
min-height: 60px; padding: 10px var(--sp-6);
background: var(--surface); border-top: 1px solid var(--border);
}
.action-bar--fixed { position: fixed; left: 0; right: 0; bottom: 0; }
.kbd {
display: inline-flex; align-items: center; padding: 1px 6px;
border: 1px solid var(--border-strong); border-bottom-width: 2px; border-radius: 4px;
background: var(--surface);
font-family: var(--font-mono); font-size: 11px; font-weight: 600; color: var(--ink-3);
}
.kbd-hints { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-xs); color: var(--ink-faint); }
.pagination { display: flex; gap: 5px; }
.pagination a, .pagination button, .pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 32px; height: 32px; padding: 0 6px;
border: 1px solid var(--border-input); border-radius: 7px;
background: var(--surface); color: var(--ink-3);
font-size: 13px; cursor: pointer; text-decoration: none;
}
.pagination .is-current { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.pagination a:hover { background: var(--bg-mute); text-decoration: none; }
/* ============ 13. 부분: 대시보드 (A1·S1·직원 허브) ============ */
/* 상태 카드 = 필터 버튼 */
.stat-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 9px; }
.stat-card {
display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
padding: 12px 13px; text-align: left; cursor: pointer;
background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
}
.stat-card:hover { border-color: var(--border-strong); }
.stat-card.is-active { border: 1.5px solid var(--blue); box-shadow: var(--focus-ring); }
.stat-card__count { font-family: var(--font-mono); font-weight: 700; font-size: 20px; line-height: 1.1; }
.stat-card__label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--fs-xs); color: var(--ink-3); }
/* "지금 할 일" 박스 — 대시보드 최상단 */
.todo-box {
border: 1.5px solid #e0b566; background: var(--amber-bg-soft);
border-radius: 11px; padding: 13px 15px;
}
.todo-box__title { font-size: var(--fs-sm); font-weight: 700; color: var(--amber-deep); margin: 0 0 8px; }
.todo-box__item {
display: flex; align-items: center; gap: 9px;
min-height: 44px; padding: 8px 9px; border-radius: 7px;
color: var(--ink-2); font-size: var(--fs-sm); text-decoration: none;
}
.todo-box__item:hover { background: var(--surface); text-decoration: none; color: var(--ink); }
.todo-box__count {
display: inline-flex; align-items: center; justify-content: center;
min-width: 24px; height: 22px; padding: 0 6px;
border-radius: 6px; background: var(--surface); border: 1px solid var(--amber-border);
font-family: var(--font-mono); font-weight: 700; font-size: 13px;
}
.todo-box__item .spacer + span { color: var(--ink-faint); }
.todo-box__sources { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.todo-box__item > span:nth-child(2) { display: grid; gap: 2px; }
.todo-box__empty, .todo-box__more { margin: 8px 9px 0; }
.school-dashboard__queues { grid-auto-columns: minmax(150px, 1fr); }
.school-dashboard__queues .stat-card { min-height: 112px; }
.school-dashboard__columns {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--sp-5); align-items: start;
}
.school-dashboard__columns .card { overflow: hidden; }
/* 필터 행 */
.filter-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.search-box {
display: flex; align-items: center; gap: 6px;
padding: 0 11px; min-height: 40px; width: 220px;
border: 1px solid var(--border-input); border-radius: 8px; background: var(--surface);
}
/* ⛔ 2026-08-16 — `outline: none` 만 있고 **대신 준 것이 없었다.** 키보드로 쓰면 어디 있는지 안 보인다.
⇒ ★ 안쪽 칸의 테두리를 지우는 대신 **바깥 상자**를 밝힌다 (`정본/13` A5 · KWCAG 6.4.1). */
.search-box input { border: none; outline: none; background: transparent; width: 100%; font-size: 13px; min-height: 38px; }
.search-box:focus-within { outline: 2px solid var(--focus-color); outline-offset: 2px; }
.filter-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px; min-height: 36px;
border: 1px solid var(--blue-border); border-radius: 8px;
background: var(--blue-bg); color: var(--blue-deep);
font-size: var(--fs-sm); cursor: pointer;
}
/* 공통 업무 큐: 제목/건수 → 필터 → 적용 chip → 결과 → 범위/페이지 */
.queue-shell { display: grid; gap: var(--space-internal-lg); }
.queue-toolbar {
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap;
}
.queue-toolbar__heading { min-width: min(100%, 280px); }
.queue-toolbar__heading .section-title { margin-bottom: 2px; }
.queue-toolbar__count {
display: inline-flex; align-items: center; min-height: 32px; padding: 4px 10px;
border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-raise);
color: var(--ink-3); font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700;
}
.filter-chips { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; min-width: 0; }
.filter-chips .filter-chip { min-width: 0; max-width: 100%; min-height: 32px; padding: 5px 9px; text-decoration: none; white-space: normal; }
.filter-chips .filter-chip > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.filter-chips .filter-chip:hover { border-color: var(--blue); background: var(--blue-bg-soft); text-decoration: none; }
.queue-pagination {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap;
}
.agency-queue-card > .queue-toolbar { padding: var(--sp-4) var(--sp-5) 0; }
.agency-queue-card > .queue-pagination { padding: 0 var(--sp-5) var(--sp-4); }
.queue-range { margin: 0; color: var(--ink-mute); font-size: var(--fs-xs); font-family: var(--font-mono); }
.queue-meta { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.queue-meta__item { color: var(--ink-mute); font-size: var(--fs-xs); }
.queue-meta__item + .queue-meta__item::before { content: "·"; margin-right: var(--sp-2); color: var(--border-strong); }
.queue-next-action { color: var(--ink-2); font-size: var(--fs-sm); font-weight: 600; }
.queue-priority { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 700; }
.queue-priority--urgent { color: var(--color-status-warning); }
.queue-row--urgent { box-shadow: inset 3px 0 var(--color-status-warning); }
.work-list {
position: relative;
overflow: hidden;
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
}
.work-list__header,
.work-list__footer {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--surface-raise);
}
.work-list__header { border-bottom: 1px solid var(--border); }
.work-list__footer { border-top: 1px solid var(--border); }
.work-list__header > div:first-child { min-width: min(100%, 260px); }
.work-list__count {
flex: none;
margin-left: auto;
padding: 3px 9px;
color: var(--ink-mute);
font-family: var(--font-mono);
font-size: var(--fs-xs);
border: 1px solid var(--border);
border-radius: var(--r-pill);
}
.work-list__view { display: inline-flex; gap: 2px; }
.work-list__view .btn {
min-height: 44px;
border-radius: var(--r-pill);
}
.work-list__view .btn[aria-pressed="true"] {
color: var(--blue-deep);
background: var(--blue-bg);
border-color: var(--blue-border);
}
.work-list__body { min-height: 96px; }
.work-list__filters { margin: 0; border-bottom: 1px solid var(--border); }
.work-list__table {
/* F38: 표가 내용만큼 옆으로 자라 가로 스크롤을 만들던 것을 화면 폭 고정으로.
긴 값은 말줄임 처리하고, 넓게 보고 싶으면 열 너비 핸들로 조절한다. */
width: 100%;
min-width: 0;
table-layout: fixed;
}
/* UX 잔기술: 긴 목록에서도 열 제목 유지 + 행이 클릭 대상임을 커서로 표시 + 금액 열 정렬 */
.work-list__table thead th {
position: sticky;
top: 0;
z-index: 1;
}
.work-list__table tbody tr[data-work-list-row] { cursor: pointer; }
.work-list__table td.cell-amount {
text-align: right;
font-variant-numeric: tabular-nums;
}
.work-list__table th,
.work-list__table td {
overflow: hidden;
text-overflow: ellipsis;
}
.work-list__table .work-list-cell-inline {
display: flex;
min-width: 0;
}
.work-list__table .work-list-cell-inline > * {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.work-list__table th {
position: relative;
padding-right: calc(var(--sp-4) + 12px);
}
.work-list__table.is-resizing-columns {
cursor: col-resize;
user-select: none;
}
.work-list__column-resizer {
position: absolute;
z-index: 2;
top: 0;
right: -8px;
display: grid;
width: 16px;
height: 100%;
min-height: 44px;
place-items: center;
cursor: col-resize;
touch-action: none;
}
.work-list__column-resizer::after {
width: 2px;
height: 20px;
border-radius: var(--r-pill);
background: var(--border-strong);
content: "";
}
.work-list__column-resizer:hover::after,
.work-list__column-resizer:focus-visible::after {
width: 3px;
background: var(--blue);
}
.work-list__column-resizer:focus-visible {
outline: 3px solid var(--focus-color);
outline-offset: -4px;
}
.worker-table { table-layout: auto; }
.offer-candidate-table { width: 100%; min-width: 0; table-layout: fixed; font-size: var(--fs-sm); }
.offer-candidate-table th:nth-child(1) { width: 5%; }
.offer-candidate-table th:nth-child(2) { width: 23%; }
.offer-candidate-table th:nth-child(3) { width: 29%; }
.offer-candidate-table th:nth-child(4) { width: 15%; }
.offer-candidate-table th:nth-child(5) { width: 14%; }
.offer-candidate-table th:nth-child(6) { width: 14%; }
.offer-candidate-table th,
.offer-candidate-table td { vertical-align: middle; }
.offer-candidate-table .badge { font-size: 10.5px; }
.offer-candidate__summary { display: flex; min-width: 0; flex-wrap: wrap; gap: 5px; }
.offer-candidate__fallback { margin-top: var(--sp-2); }
.offer-candidate__fallback summary { color: var(--ink-mute); font-size: var(--fs-xs); cursor: pointer; }
.offer-candidate__fallback form { width: min(280px, 70vw); padding-top: var(--sp-2); }
.work-list__table tr.is-current td {
background: var(--blue-bg);
box-shadow: inset 0 1px var(--blue-border), inset 0 -1px var(--blue-border);
}
.work-list__table tr.is-current td:first-child { box-shadow: inset 3px 0 var(--blue); }
.work-list__table tr.is-selected td { background: var(--blue-bg-soft); }
.work-list__select-cell { width: 44px; padding: 0 !important; text-align: center !important; }
.work-list__check {
display: inline-grid;
width: 44px;
min-height: 44px;
place-items: center;
cursor: pointer;
}
.work-list__check input { width: 18px; height: 18px; accent-color: var(--blue); }
.work-list__selection { color: var(--ink-mute); font-size: var(--fs-sm); }
.work-list__selection b { color: var(--blue-deep); font-family: var(--font-mono); }
.work-list__hints { display: flex; gap: var(--sp-3); color: var(--ink-mute); font-size: var(--fs-xs); }
.work-list__hints kbd {
padding: 2px 6px;
font-family: var(--font-mono);
border: 1px solid var(--border-strong);
border-radius: 4px;
background: var(--surface);
}
.work-list__peek {
position: absolute;
z-index: 12;
top: 64px;
right: var(--sp-4);
display: grid;
width: min(280px, calc(100% - 32px));
gap: var(--sp-1);
padding: var(--sp-3);
color: var(--ink-2);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
background: var(--surface);
box-shadow: var(--shadow-md);
pointer-events: none;
}
.work-list__peek span { color: var(--blue-deep); font-size: var(--fs-sm); }
.work-list__peek small { color: var(--ink-mute); }
.work-list[data-view="card"] .table-wrap { overflow: visible; padding: var(--sp-3); }
.work-list[data-view="card"] .work-list__table,
.work-list[data-view="card"] .work-list__table tbody {
display: grid;
min-width: 0;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-3);
}
.work-list[data-view="card"] .work-list__table thead { display: none; }
.work-list[data-view="card"] .work-list__table tr {
position: relative;
display: grid;
min-width: 0;
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-raise);
}
.work-list[data-view="card"] .work-list__table td {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: var(--sp-2);
padding: 5px 0;
border: 0;
white-space: normal;
}
.work-list[data-view="card"] .work-list__table td:first-child {
position: absolute;
justify-self: end;
}
.work-list[data-view="card"] .offer-candidate { margin: var(--sp-3); }
@media (max-width: 720px) {
.queue-toolbar, .queue-pagination { align-items: stretch; flex-direction: column; }
.queue-toolbar__count { align-self: flex-start; }
.queue-pagination .pagination { width: 100%; justify-content: space-between; }
.agency-queue-card > .queue-toolbar { padding-inline: var(--sp-4); }
.agency-queue-card > .queue-pagination { padding-inline: var(--sp-4); }
}
/* 유학원 대시보드 */
.prog-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.prog-row {
display: flex; align-items: center; gap: var(--sp-4); flex-wrap: wrap;
padding: 11px var(--sp-4); border: 1px solid var(--border); border-left: 4px solid var(--blue);
border-radius: var(--r-md); background: var(--surface-raise);
}
.prog-row.t-deg { border-left-color: var(--green); }
.prog-row.t-visa { border-left-color: #7a5ea8; }
.prog-row__main { flex: 1; min-width: 230px; }
.prog-row__title { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.prog-row__title b { font-size: var(--fs-body); }
.prog-row__meta { margin-top: 3px; color: var(--ink-mute); font-size: var(--fs-xs); }
.prog-row__actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.stat-line { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 10px; overflow-x: auto; padding-bottom: 2px; }
.stat-line .stat-card { min-width: 110px; }
.statistics-stage-line .stat-card { min-width: 156px; cursor: default; }
.statistics-stage-line .badge { white-space: nowrap; }
.statistics-stage-line--wrap {
grid-auto-flow: row;
grid-template-columns: repeat(3, minmax(0, 1fr));
overflow: visible;
}
@media (max-width: 760px) {
.statistics-stage-line--wrap { grid-template-columns: 1fr; }
}
.inbox-list { display: flex; flex-direction: column; }
.inbox-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border-bottom: 1px solid var(--border); }
.inbox-row:last-child { border-bottom: 0; }
.inbox-row.is-unread { background: var(--blue-bg); }
.inbox-ic {
display: grid; place-items: center; flex: none; width: 26px; height: 26px;
border-radius: 7px; background: var(--bg-mute); font-size: var(--fs-body);
}
.inbox-row__body { flex: 1; min-width: 0; }
.inbox-row__title { font-size: var(--fs-body); }
.inbox-row__meta, .inbox-when { color: var(--ink-mute); font-size: var(--fs-xs); }
.inbox-when { color: var(--ink-faint); white-space: nowrap; }
.attn-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--sp-3); }
.attn-card { padding: 14px var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); }
.attn-card .n { font-size: var(--fs-h1); font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; }
.attn-card .lb { color: var(--ink-mute); font-size: var(--fs-sm); }
.attn-card .desc { margin: 6px 0 10px; color: var(--ink-mute); font-size: var(--fs-xs); }
.subbar { display: flex; gap: var(--sp-2); flex-wrap: wrap; }
.subbar .pill { padding: 6px 13px; border: 1px solid var(--border); border-radius: var(--r-pill); background: var(--surface-raise); font-size: var(--fs-sm); }
.subbar b { font-variant-numeric: tabular-nums; }
/* ============ 14. 부분: 지원서 작성 (S3) ============ */
/* 좌측 섹션 네비 */
.side-nav { background: var(--surface-raise); border-right: 1px solid var(--border); overflow: auto; }
.side-nav__group {
padding: 10px 14px 5px;
font-size: 11px; font-weight: 700; color: var(--ink-faint); letter-spacing: .4px;
}
.side-nav__item {
display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
padding: 8px 14px; border: none; border-left: 3px solid transparent;
background: transparent; cursor: pointer;
font-size: var(--fs-sm); color: var(--ink-2); text-decoration: none;
}
.side-nav__item:hover { background: var(--bg-mute); text-decoration: none; color: var(--ink); }
.side-nav__item.is-active { background: var(--blue-bg); border-left-color: var(--blue); }
.side-nav__opt { margin-left: auto; font-size: 10px; color: var(--ink-faint); }
.application-mobile-nav {
position: sticky; top: 0; z-index: 20; padding: var(--sp-3);
border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.application-mobile-nav .form-group { margin: var(--sp-3) 0 0; }
.section-nav-links { display: none; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.application-editor .console__content { padding-bottom: 96px; }
.application-editor .application-domain { display: none; }
.application-editor .application-domain.is-mobile-active { display: flex; }
.application-domain {
display: flex; flex-direction: column; gap: var(--sp-3); scroll-margin-top: var(--sp-4);
padding: var(--sp-5); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface);
}
.application-domain__head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3); }
.application-domain:focus, .acc:focus, .check-answers:focus {
outline: 2px solid var(--focus-color);
outline-offset: 3px;
}
[data-signature-canvas]:focus-visible {
outline: 3px solid var(--focus-color);
outline-offset: 2px;
}
.application-domain__head h2 { margin: 2px 0 0; }
.check-answers { scroll-margin-top: var(--space-internal-lg); }
.check-answers__list { display: grid; gap: 0; }
.check-answers__row {
display: flex; align-items: center; gap: var(--space-internal-sm); flex-wrap: wrap;
padding: var(--space-internal-md) 0; border-bottom: 1px solid var(--border-soft);
}
.check-answers__row:first-child { padding-top: 0; }
.check-answers__row:last-child { padding-bottom: 0; border-bottom: 0; }
.check-answers__row > strong { flex: 1 1 180px; min-width: 0; overflow-wrap: anywhere; }
.check-answers__summary {
display: block;
margin-top: var(--sp-1);
font-size: var(--fs-sm);
font-weight: 400;
line-height: 1.5;
}
.check-answers__row > .btn { margin-left: auto; }
.repeater, .fixed-row-list { display: grid; gap: var(--sp-3); }
.repeater-row, .fixed-row { padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-raise); }
.repeater-row__delete { margin-top: var(--sp-2); color: var(--red); }
.fixed-row { min-width: 0; }
.fixed-row legend { padding: 0 var(--sp-2); color: var(--ink); font-size: var(--fs-sm); font-weight: 700; }
.edu-row { display: flex; flex-direction: column; gap: var(--sp-4); margin-bottom: var(--sp-3); }
.edu-block { margin: 0; padding: var(--sp-4) 0 0; border: 0; border-top: 1px solid var(--border-soft); }
.edu-block > legend { padding: 0 var(--sp-2) 0 0; color: var(--ink-2); font-size: var(--fs-sm); font-weight: 700; }
.edu-stack { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 360px; }
.edu-stack .form-group { margin: 0; }
/* 아코디언 섹션 */
.acc { background: var(--surface); border: 1px solid #e2ded6; border-radius: 10px; overflow: hidden; }
.acc + .acc { margin-top: 10px; }
.acc__head {
display: flex; align-items: center; gap: 10px; width: 100%;
padding: 13px 16px; border: none; background: var(--surface);
cursor: pointer; text-align: left; font-size: var(--fs-body); font-weight: 600; color: var(--ink);
}
.acc.is-open > .acc__head { background: var(--bg-soft); }
.acc__title { flex: 1; min-width: 0; }
.acc__status { font-size: 11px; font-weight: 700; white-space: nowrap; }
.acc__status--done { color: var(--green); }
.acc__status--todo { color: var(--amber); }
.acc__status--opt { color: var(--ink-faint); }
.acc__body { padding: 8px 18px 18px; }
/* 본문 패인 (사이드냐비 오른쪽 영역) */
.console__content { flex: 1; min-width: 0; overflow: auto; padding: var(--sp-5) var(--sp-6); }
/* 읽기 전용 요약 카드 (과정·전형) */
.locked-row {
display: flex; align-items: center; gap: var(--sp-3);
padding: 13px 15px; background: var(--surface);
border: 1px solid #e2ded6; border-radius: 10px;
}
.locked-row__label { font-size: 11px; color: var(--ink-faint); margin-bottom: 2px; }
.locked-row__value { font-size: 13.5px; font-weight: 700; color: var(--brand); }
.locked-row .badge { flex: none; }
/* ============ 15. 부분: 검수 콘솔 (R1·R2) ============ */
.console { display: flex; flex-direction: column; height: calc(100vh - var(--header-h)); min-height: 0; background: var(--bg-mute); }
.console__top {
flex: none; display: flex; align-items: center; gap: var(--sp-4);
min-height: 62px; padding: 8px var(--sp-5);
background: var(--surface); border-bottom: 1px solid var(--border);
}
.console-exit {
display: inline-flex; align-items: center; min-height: 44px; padding: 7px 10px;
border-radius: var(--r-sm); color: var(--ink-2); font-weight: 800; text-decoration: none;
}
.console-exit:hover { color: var(--blue); background: var(--blue-bg); text-decoration: none; }
.console-autosave {
min-height: 30px; padding: 5px 9px; border: 1px solid var(--green-border);
border-radius: 999px; background: var(--green-bg); transition: box-shadow .18s ease, transform .18s ease;
}
.console-autosave.is-saved { box-shadow: 0 0 0 3px var(--green-bg); transform: translateY(-1px); }
.console-step-nav {
flex: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
min-height: 58px; padding: 0 var(--sp-5); border-bottom: 1px solid var(--border);
background: var(--surface);
}
.console-step-nav__item {
position: relative; display: grid; grid-template-columns: 30px minmax(0, 1fr) auto;
align-items: center; gap: var(--sp-2); min-height: 52px; padding: 6px var(--sp-4);
border: 0; border-bottom: 3px solid transparent; background: transparent;
color: var(--ink-2); cursor: pointer; text-align: left;
}
.console-step-nav__item > span {
display: inline-grid; place-items: center; width: 26px; height: 26px;
border: 1px solid var(--border-strong); border-radius: 999px; font-weight: 800;
}
.console-step-nav__item small { color: var(--ink-mute); text-align: right; }
.console-step-nav__item.is-active { border-bottom-color: var(--blue); color: var(--blue-deep); background: var(--blue-bg); }
.console-step-nav__item.is-active > span { border-color: var(--blue); background: var(--blue); color: #fff; }
.console-step-nav__item.is-locked { color: var(--ink-faint); cursor: not-allowed; }
.console-step-nav__item.is-locked strong::after { content: " 🔒"; }
.console__body { flex: 1; display: flex; min-height: 0; }
.console__side { width: 252px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--surface-raise); border-right: 1px solid var(--border); }
.console__viewer { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #e9e7e2; }
.console__panel { width: 460px; flex: none; display: flex; flex-direction: column; min-height: 0; background: var(--surface); border-left: 1px solid var(--border); }
.console__bottom {
flex: none; display: flex; align-items: center; gap: var(--sp-4);
min-height: 60px; padding: 8px var(--sp-5);
background: var(--surface); border-top: 1px solid var(--border);
}
.console-completion-progress { flex: none; }
.console__bottom .kbd-hints { min-width: 0; }
.console[data-current-step="fields"] [data-conflict-board] { display: none; }
.console[data-current-step="conflicts"] [data-triage-decision-form],
.console[data-current-step="conflicts"] .active-occurrence,
.console[data-current-step="conflicts"] .crop-strip,
.console[data-current-step="conflicts"] .console-side__head,
.console[data-current-step="conflicts"] .triage-queue { display: none; }
.console[data-current-step="conflicts"] .console-source-index {
flex: 1 1 auto; min-height: 0; border-top: 0;
}
.console[data-current-step="conflicts"] .console-panel__scroll > :not(.field-matrix-list),
.console[data-current-step="conflicts"] .field-matrix-list > :not([data-conflict-board]) { display: none; }
.console[data-current-step="conflicts"] [data-conflict-board] { min-height: 100%; align-content: start; }
.console-mobile-notice { display: none; }
.console-side__head,
.console-panel__head {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
padding: 13px 15px; border-bottom: 1px solid var(--border); background: var(--surface);
}
.console-side__head span { font-size: var(--fs-xs); color: var(--ink-mute); }
.console-side__scroll,
.console-panel__scroll { min-height: 0; overflow: auto; }
.console-panel__scroll { flex: 1; padding: var(--sp-3); }
.console-panel__head { align-items: flex-start; }
.comparison-summary { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 4px; }
/* 문서 그룹 tab은 page tree를 대체하지 않는 2차 탐색이다. */
.document-tabs {
flex: none; display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto;
padding: var(--sp-2); border-bottom: 1px solid var(--border); background: var(--surface);
}
.document-tab {
flex: 0 0 auto; min-width: 88px; max-width: 170px; padding: 6px 9px;
border: 1px solid var(--border); border-radius: var(--r-pill);
background: var(--surface); color: var(--ink-2); cursor: pointer;
font-size: var(--fs-xs); font-weight: 700; text-align: left;
}
.document-tab:hover { background: var(--bg-mute); border-color: var(--border-strong); }
.document-tab.is-active { background: var(--color-status-info-bg); border-color: var(--color-status-info-border); color: var(--color-status-info); }
.document-tab:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 2px; box-shadow: var(--focus-ring); }
.document-tab:disabled { cursor: not-allowed; opacity: .6; }
.document-tab__label { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.document-tabs__empty { margin: 0; padding: 4px; color: var(--ink-mute); font-size: var(--fs-xs); }
/* 큐 위치 표시 */
.queue-chip {
display: inline-flex; align-items: center; gap: 8px;
padding: 7px 13px; border: 1px solid var(--border-input); border-radius: 22px;
background: var(--surface-raise); font-size: 12px; color: var(--ink-mute);
}
.queue-chip b { font-family: var(--font-mono); font-size: 15px; color: var(--ink); }
.queue-chip .muted { font-weight: 400; }
/* 서류 사이드탭 (그룹 접기) */
.doc-group__head {
display: flex; align-items: center; gap: 8px; width: 100%;
padding: 9px 13px; border: none; border-top: 1px solid var(--border);
background: #f1efe9; text-align: left;
font-size: 12px; font-weight: 700; color: var(--ink-3);
}
.doc-group__count { margin-left: auto; font-family: var(--font-mono); font-size: 10px; font-weight: 700; color: var(--ink-faint); }
.doc-item {
display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
padding: 8px 12px 8px 15px; border: none; border-left: 3px solid transparent;
border-bottom: 1px solid var(--border-soft);
background: transparent; cursor: pointer; font-size: var(--fs-sm); color: var(--ink-2);
}
.doc-item:hover { background: var(--bg-mute); }
.doc-item.is-active { background: var(--blue-bg); border-left-color: var(--blue); }
.doc-item--empty { cursor: default; color: var(--ink-faint); }
.doc-item--sub { padding-left: 32px; } /* 하위 서류 들여쓰기 */
.doc-item__name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.doc-item__status { font-size: 11px; font-weight: 700; white-space: nowrap; }
/* 뷰어 */
.viewer-toolbar {
flex: none; display: flex; align-items: center; gap: var(--sp-4);
min-height: 44px; padding: 0 18px;
background: #efede8; border-bottom: 1px solid #dad7d1;
font-size: 13px; color: var(--ink-2);
}
.viewer-scroll { flex: 1; overflow: auto; padding: 26px; display: flex; justify-content: center; align-items: flex-start; min-height: 0; }
.viewer-page {
position: relative; width: 640px; max-width: 100%; flex: none; min-height: 0;
background: var(--surface); border: 1px solid #ddd; box-shadow: 0 3px 16px rgba(0, 0, 0, .12);
}
.viewer-page--text { min-height: 700px; }
.viewer-page img { display: block; width: 100%; height: auto; }
.viewer-text-fallback { margin: 0; min-height: 700px; padding: var(--sp-5); border: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.viewer-bbox {
position: absolute; z-index: 2; min-width: 2%; min-height: 2%; padding: 0;
border: 3px solid var(--amber); background: rgba(229, 164, 45, .24);
box-shadow: 0 0 0 2px rgba(255, 255, 255, .8); cursor: pointer;
}
.viewer-toast { flex: none; min-height: 30px; margin: 0; padding: 6px 18px; border-top: 1px solid #dad7d1; background: #efede8; color: var(--ink-2); font-size: var(--fs-xs); }
/* 보호 crop strip과 A/B viewer. A의 legacy ID는 그대로 두고 B는 별도 scope를 사용한다. */
.viewer-split { flex: 1; display: flex; min-width: 0; min-height: 0; }
.viewer-split > .viewer-scroll { min-width: 0; }
.viewer-comparison {
flex: 0 0 min(46%, 360px); min-width: 220px; display: flex; flex-direction: column; min-height: 0;
border-left: 1px solid #dad7d1; background: var(--surface-raise);
}
.viewer-comparison[hidden] { display: none; }
.viewer-comparison__toolbar {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
min-height: 44px; padding: 6px var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface);
}
.viewer-comparison__toolbar small,
.viewer-comparison__toolbar strong { display: block; }
.viewer-comparison__toolbar small { color: var(--ink-mute); font-size: var(--fs-xs); }
.viewer-comparison__toolbar strong { max-width: 230px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.viewer-comparison__scroll { flex: 1; min-height: 0; overflow: auto; display: grid; place-items: center; padding: var(--sp-3); }
.viewer-comparison__scroll img { display: block; max-width: 100%; max-height: 100%; object-fit: contain; border: 1px solid var(--border); background: var(--surface); }
.viewer-comparison__empty { margin: 0; padding: var(--sp-4); color: var(--ink-mute); text-align: center; }
.viewer-comparison__status { flex: none; min-height: 28px; margin: 0; padding: 5px var(--sp-3); border-top: 1px solid var(--border); color: var(--ink-2); font-size: var(--fs-xs); }
.crop-strip { flex: none; min-width: 0; border-top: 1px solid #dad7d1; background: var(--surface); }
.crop-strip__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 34px; padding: 5px var(--sp-3); border-bottom: 1px solid var(--border-soft);
}
.crop-strip__head span { color: var(--ink-mute); font-size: var(--fs-xs); text-align: right; }
.crop-strip__group[hidden] { display: none; }
.crop-strip__track { display: flex; gap: var(--sp-2); min-width: 0; overflow-x: auto; padding: var(--sp-2) var(--sp-3); }
.crop-card {
flex: 0 0 188px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: stretch;
overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); box-shadow: var(--shadow-sm);
}
.crop-card:has(.crop-card__pin.is-pinned) { border-color: var(--blue); box-shadow: 0 0 0 2px var(--blue-bg); }
.crop-card__source {
min-width: 0; padding: 0; border: 0; background: transparent; color: var(--ink); cursor: pointer; text-align: left;
}
.crop-card__source:hover:not(:disabled) { background: var(--blue-bg); }
.crop-card__source:focus-visible,
.crop-card__pin:focus-visible,
.viewer-comparison [data-comparison-close]:focus-visible { position: relative; z-index: 1; outline: 3px solid var(--focus-color); outline-offset: -3px; }
.crop-card__source:disabled { cursor: not-allowed; opacity: 1; }
.crop-card__preview {
display: grid; place-items: center; height: 74px; overflow: hidden; border-bottom: 1px solid var(--border-soft); background: var(--bg-mute);
}
.crop-card__preview img { display: block; width: 100%; height: 100%; object-fit: contain; }
.crop-card__empty { padding: var(--sp-2); color: var(--color-status-neutral); font-size: var(--fs-xs); text-align: center; }
.crop-card__meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; padding: 6px 8px; font-size: var(--fs-xs); }
.crop-card__source-label { overflow: hidden; color: var(--ink-2); font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.crop-card__pin {
min-width: 48px; padding: 5px; border: 0; border-left: 1px solid var(--border-soft); background: var(--surface-raise);
color: var(--ink-2); cursor: pointer; font-size: var(--fs-xs); font-weight: 700; writing-mode: vertical-rl;
}
.crop-card__pin:hover:not(:disabled) { background: var(--blue-bg); color: var(--blue-deep); }
.crop-card__pin.is-pinned { background: var(--blue); color: #fff; }
.crop-card__pin:disabled { cursor: not-allowed; color: var(--ink-faint); }
.crop-strip__empty { flex: 1 0 100%; min-height: 96px; }
/* 입력값 ↔ OCR 대조 행. 상태는 2색만: 일치 🟢 그린 / 불일치·실패 🔴 레드 */
.cmp-row {
padding: 8px 10px; border-radius: 7px; cursor: pointer;
border: 1px solid transparent;
}
.cmp-row:hover { background: var(--bg-soft); }
.cmp-row.is-active { background: var(--amber-bg-soft); border-color: var(--amber-border); }
.cmp-row:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 1px; }
.cmp-row__head { display: flex; align-items: center; gap: 8px; }
.cmp-row__name { flex: 1; font-size: var(--fs-sm); font-weight: 500; color: var(--ink-2); }
.cmp-row__value { margin: 4px 0 0 21px; font-family: var(--font-mono); font-size: 13px; color: var(--ink-3); overflow-wrap: anywhere; }
.cmp-dot { flex: none; width: 13px; height: 13px; border-radius: 50%; }
.cmp-dot--ok { background: var(--green); }
.cmp-dot--bad { background: var(--red); }
.cmp-dot--muted { background: var(--color-status-neutral); }
.cmp-tag { font-size: 10.5px; font-weight: 700; padding: 2px 8px; border-radius: 11px; background: var(--blue-bg); color: var(--blue-deep); white-space: nowrap; }
.cmp-values { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 7px; margin: 7px 0 0 21px; }
.cmp-values div { min-width: 0; padding: 7px; border: 1px solid var(--border-soft); background: var(--surface-raise); }
.cmp-values small { display: block; margin-bottom: 2px; color: var(--ink-mute); }
.cmp-values span { display: block; overflow-wrap: anywhere; }
/* field-first OCR dossier: 한 field 안의 모든 물리 파일 evidence를 동시에 유지한다. */
.field-matrix-list { display: flex; flex-direction: column; gap: var(--sp-3); }
.field-matrix-group {
overflow: hidden; border: 1px solid var(--border); border-radius: var(--r-md);
background: var(--surface); box-shadow: var(--shadow-sm);
}
.field-matrix-group__head {
display: flex; align-items: center; gap: var(--sp-2); justify-content: space-between;
padding: 10px 12px; border-bottom: 1px solid var(--border-soft); background: var(--surface-raise);
}
.field-matrix-group__title { min-width: 0; margin: 0; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.field-current-claim { padding: 10px 12px; border-bottom: 1px solid var(--border-soft); }
.field-current-claim small { display: block; color: var(--ink-mute); }
.field-current-claim strong { display: block; margin-top: 2px; color: var(--ink); overflow-wrap: anywhere; }
.field-normalization { margin: 4px 0 0; color: var(--ink-mute); font-size: var(--fs-xs); }
.field-stale-warning,
.cmp-row__stale {
margin: 7px 0 0; padding: 6px 8px; border-left: 3px solid var(--color-status-warning);
background: var(--color-status-warning-bg); color: var(--color-status-warning); font-size: var(--fs-xs);
}
.field-evidence-counts {
display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1px; border-bottom: 1px solid var(--border); background: var(--border-soft);
}
.field-evidence-count {
display: flex; align-items: center; justify-content: space-between; gap: 4px;
min-width: 0; padding: 6px 8px; background: var(--surface); font-size: var(--fs-xs); font-weight: 700;
}
.field-evidence-count--supporting { color: var(--color-status-success); }
.field-evidence-count--conflict { color: var(--color-status-error); }
.field-evidence-count--not-found { color: var(--color-status-neutral); }
.field-evidence-list { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); background: var(--bg-soft); }
.field-evidence-list .cmp-row { border-color: var(--border-soft); background: var(--surface); }
.field-evidence-list .cmp-row:hover { border-color: var(--border-strong); }
.field-evidence-list .cmp-row.is-active { border-color: var(--amber-border); background: var(--amber-bg-soft); }
.cmp-row__source {
flex: 1; min-width: 0; color: var(--ink-2); font-size: var(--fs-xs); font-weight: 700;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmp-row__location {
margin: 6px 0 0 21px; color: var(--color-status-info); font-size: var(--fs-xs);
}
.cmp-row__location--empty { color: var(--color-status-neutral); }
.cmp-row__stale { margin-left: 21px; }
.field-evidence-empty { min-height: 96px; }
.document-action-panel,
.draft-batch { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--border); }
.compact-list { margin: 0; padding-left: 18px; color: var(--ink-2); }
/* 검수 콘솔 심화: STEP0 레지스트리 + occurrence 트리아지 + 고정 액션 문법. */
.registry-viewer__scroll { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-4); }
.registry-people .console-side__scroll { flex: 1; }
.registry-person {
display: grid; gap: 6px; width: 100%; min-height: 72px; padding: 10px 12px;
border: 0; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent;
background: transparent; color: var(--ink); cursor: pointer; text-align: left;
}
.registry-person:hover { background: var(--bg-soft); }
.registry-person.is-active { border-left-color: var(--blue); background: var(--blue-bg); }
.registry-person:focus-visible { outline: 3px solid var(--focus-color); outline-offset: -3px; }
.registry-person__role { display: flex; align-items: center; justify-content: space-between; font-weight: 800; }
.registry-person__values { display: grid; gap: 2px; color: var(--ink-mute); }
.registry-person__values small { overflow-wrap: anywhere; }
.registry-matrix { min-width: 760px; }
.registry-matrix th { position: sticky; top: 0; z-index: 1; background: var(--surface-raise); }
.registry-matrix tbody th { left: 0; z-index: 0; }
.registry-matrix tr.is-active > * { background: var(--blue-bg); }
.registry-cell { min-width: 180px; border-left: 3px solid transparent; }
.registry-cell--supporting { border-left-color: var(--green); background: var(--green-bg); }
.registry-cell--conflict { border-left-color: var(--red); background: var(--red-bg); }
.registry-cell--missing { border-left-color: var(--border-strong); background: var(--bg-soft); }
.registry-cell__state { display: block; margin-bottom: 5px; font-weight: 800; }
.registry-cell small { display: block; color: var(--ink-2); overflow-wrap: anywhere; }
.unassigned-bucket,
.authenticity-board { margin-top: var(--sp-4); border: 1px solid var(--border); background: var(--surface); }
.unassigned-bucket > p,
.unassigned-bucket > ul { margin: var(--sp-3); }
.authenticity-list { display: grid; gap: var(--sp-2); padding: var(--sp-3); }
.authenticity-card {
display: grid; gap: var(--sp-2); min-height: 44px; padding: var(--sp-3);
border: 1px solid var(--border); border-left: 4px solid var(--amber);
border-radius: var(--r-sm); background: var(--surface-raise);
}
.authenticity-card > div:first-child { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-3); }
.authenticity-card small { color: var(--ink-mute); }
.mrz-chip-list { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.registry-action-stack { flex: 1; min-height: 0; overflow: auto; padding: var(--sp-3); }
.triage-queue { flex: 1; min-height: 160px; overflow: auto; }
/* state | field and document | what was read | verdict | evidence shape.
The reading column is allowed to shrink before the field name does: a
reviewer who cannot read the field name cannot use the row at all, while a
truncated value still says which of two same-named documents this is. */
.triage-queue__item {
display: grid;
grid-template-columns: 22px minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
align-items: center;
gap: 8px; width: 100%; min-height: 52px; padding: 7px 10px;
border: 0; border-bottom: 1px solid var(--border-soft); border-left: 3px solid transparent;
background: transparent; color: var(--ink); cursor: pointer; text-align: left;
}
.triage-queue__item:hover { background: var(--bg-soft); }
.triage-queue__item.is-cursor { border-left-color: var(--blue); background: var(--blue-bg); box-shadow: inset 3px 0 0 var(--blue); }
.triage-queue__item.is-decided { color: var(--ink-mute); }
.triage-queue__item.is-discrepancy { background: var(--red-bg); color: var(--red); }
.triage-queue__item:focus-visible { outline: 3px solid var(--focus-color); outline-offset: -3px; }
.triage-queue__state { font-size: 17px; font-weight: 900; text-align: center; }
.triage-queue__label { display: grid; min-width: 0; gap: 2px; }
.triage-queue__label strong,
.triage-queue__label small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.triage-queue__label small { color: var(--ink-mute); }
.triage-queue__reading {
min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
color: var(--ink-mute); font-size: var(--fs-xs); text-align: right;
}
.console-source-index { flex: 0 0 min(38%, 280px); min-height: 120px; overflow: hidden; border-top: 1px solid var(--border-strong); }
.console-source-index__title { display: block; padding: 7px 11px; color: var(--ink-mute); font-size: var(--fs-xs); }
.console-source-index .console-side__scroll { height: calc(100% - 82px); overflow: auto; }
.active-occurrence {
flex: none; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 68px; padding: 9px 12px; border-bottom: 1px solid var(--border); background: var(--surface-raise);
}
.active-occurrence > div { display: grid; min-width: 0; gap: 2px; }
.active-occurrence small,
.active-occurrence span:not(.badge) { color: var(--ink-mute); font-size: var(--fs-xs); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.review-action-slots { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-bottom: 1px solid var(--border); background: var(--surface); }
.review-action {
display: grid; gap: 2px; width: 100%; min-height: 52px; padding: 8px 11px;
border: 1.5px solid var(--border); border-radius: var(--r-sm);
background: var(--surface); color: var(--ink); cursor: pointer; text-align: left;
}
.review-action > span { display: flex; align-items: center; gap: 7px; font-weight: 800; }
.review-action small { color: var(--ink-mute); }
.review-action--positive { border-color: var(--green); background: var(--green-bg); color: var(--green-deep); }
.review-action--middle { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-deep); }
.review-action--negative { margin-top: var(--sp-2); border-color: var(--red); background: var(--red-bg); color: var(--red); }
.review-action:hover:not(.is-static) { filter: brightness(.97); box-shadow: var(--shadow-sm); }
.review-action:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.review-action.is-static { cursor: default; }
.viewer-zoom { display: flex; align-items: center; gap: 6px; color: var(--ink-mute); font-size: var(--fs-xs); }
.viewer-zoom input { width: 104px; }
.viewer-zoom output { min-width: 38px; font-family: var(--font-mono); }
.confidence-bucket {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2);
margin: 7px 0 0 21px; padding: 6px 8px; border: 1px solid var(--border);
background: var(--surface-raise); font-size: var(--fs-xs);
}
.confidence-bucket--high { border-color: var(--green-border); color: var(--green-deep); }
.confidence-bucket--medium { border-color: var(--amber-border); color: var(--amber-deep); }
.confidence-bucket--low { border-color: var(--red-border); color: var(--red); }
.confidence-bucket small { color: var(--ink-mute); }
.adjustment-board { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--red-border); background: var(--red-bg); }
.adjustment-card { display: grid; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.inline-diff { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-2); }
.inline-diff > div { min-width: 0; padding: var(--sp-2); border: 1px solid var(--border); background: var(--surface-raise); }
.inline-diff small { display: block; margin-bottom: 4px; color: var(--ink-mute); }
.inline-diff mark { padding: 1px; color: var(--red); background: var(--red-bg); }
.inline-diff mark.is-same { color: var(--green-deep); background: var(--green-bg); }
.adjustment-evidence { display: grid; gap: var(--sp-2); }
.adjustment-evidence > div { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; }
.adjustment-evidence small { min-width: 82px; color: var(--ink-mute); }
.ai-advisory { padding: var(--sp-2); border: 1px solid var(--purple-border); background: var(--purple-bg); }
.ai-advisory summary { min-height: 44px; display: flex; align-items: center; color: var(--purple); cursor: pointer; font-weight: 800; }
.ai-advisory p { color: var(--ink-2); }
.adjustment-actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.review-undo-toast { display: flex; align-items: center; gap: var(--sp-3); }
.review-undo-toast[hidden] { display: none; }
.command-palette,
.shortcut-help,
.full-document-dialog {
padding: 0; color: var(--ink); border: 1px solid var(--border-strong);
border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-lg);
}
.command-palette::backdrop,
.shortcut-help::backdrop,
.full-document-dialog::backdrop { background: rgb(16 24 40 / .55); }
.command-palette { width: min(620px, 92vw); }
.command-palette__shell { display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.command-palette header,
.shortcut-help header,
.full-document-dialog header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); }
.command-palette h2,
.shortcut-help h2,
.full-document-dialog h2 { margin: 0; }
.command-palette header p { margin: 3px 0 0; color: var(--ink-mute); }
.command-palette__list { display: grid; gap: 2px; }
.command-palette__list button {
display: flex; align-items: center; justify-content: space-between; min-height: 44px;
padding: 8px 10px; border: 0; border-radius: var(--r-sm); background: transparent; color: var(--ink); cursor: pointer; text-align: left;
}
.command-palette__list button[aria-selected="true"] { background: var(--blue-bg); box-shadow: inset 3px 0 0 var(--blue); }
.shortcut-help { width: min(520px, 92vw); padding: var(--sp-4); }
.shortcut-help dl { display: grid; gap: var(--sp-2); }
.shortcut-help dl div { display: grid; grid-template-columns: 120px 1fr; min-height: 44px; align-items: center; border-bottom: 1px solid var(--border-soft); }
.shortcut-help dt { font-family: var(--font-mono); font-weight: 800; }
.shortcut-help dd { margin: 0; color: var(--ink-2); }
.full-document-dialog { width: min(1100px, 94vw); max-width: none; height: min(900px, 92vh); }
.full-document-dialog__shell { display: grid; grid-template-rows: auto minmax(0, 1fr); height: 100%; }
.full-document-dialog header { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border); }
.full-document-dialog__scroll { min-height: 0; overflow: auto; padding: var(--sp-4); background: #dedbd4; }
.full-document-dialog__scroll img,
.full-document-dialog__scroll pre { display: block; width: min(900px, 100%); margin: 0 auto; background: #fff; color: #232320; }
.console--review .document-tab,
.console--review .doc-item,
.console--review .crop-card__pin,
.console--review [data-comparison-close],
.console--review [data-theme-toggle],
.console--review [data-command-open] { min-height: 44px; }
.ui-density--compact .console--review .review-action,
.ui-density--compact .console--review .triage-queue__item,
.ui-density--compact .console--review .registry-person { min-height: 44px; }
/* 사정·면접 업무 편집기 */
.criteria-toolbar {
display: grid; grid-template-columns: minmax(240px, 1fr) minmax(240px, 1fr) auto;
gap: var(--sp-3); align-items: end; padding: var(--sp-4); border: 1px solid var(--border); background: var(--surface);
}
.criteria-version-note { margin: 0; }
.criteria-form { padding-top: var(--sp-3); border-top: 2px solid var(--border); }
.editor-table { min-width: 680px; }
.editor-table th:nth-last-child(-n+3), .editor-table td:nth-last-child(-n+3) { width: 112px; }
.editor-table th:last-child, .editor-table td:last-child { width: 56px; }
.criteria-total { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: var(--sp-3); font-weight: 700; }
.criteria-diff { display: block; padding: var(--sp-3) var(--sp-4); border-left: 4px solid var(--amber); background: var(--amber-bg-soft); color: var(--ink-2); }
.criteria-pass-score { max-width: 320px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 3; padding: var(--sp-3); border-top: 1px solid var(--border); background: var(--surface); }
.text-danger { color: var(--red); }
.screening-reference-overview { display: flex; flex-direction: column; gap: var(--sp-3); }
.screening-summary-band,
.applicant-summary-card {
display: grid; gap: 1px;
border: 1px solid var(--border); background: var(--border); overflow: hidden;
}
.screening-summary-band { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.applicant-summary-card { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.screening-summary-band > div,
.applicant-summary-card > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; padding: var(--sp-3); background: var(--surface); }
.screening-summary-band small,
.applicant-summary-card small { color: var(--ink-mute); }
.screening-summary-band strong,
.applicant-summary-card strong { overflow-wrap: anywhere; }
.screening-cutline {
display: flex; align-items: center; gap: var(--sp-4); justify-content: space-between;
padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface);
}
.screening-cutline > div { display: flex; flex-direction: column; }
.screening-cutline small { color: var(--ink-mute); }
.screening-cutline strong { color: var(--ink); font-size: var(--fs-h2); }
.major-change > summary { cursor: pointer; }
.change-preview { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); gap: var(--sp-3); align-items: center; }
.change-preview > div { display: flex; flex-direction: column; padding: var(--sp-3); border: 1px solid var(--border-soft); background: var(--surface-raise); }
.screening-workbench__grid { display: grid; grid-template-columns: minmax(320px, .85fr) minmax(440px, 1.15fr); gap: var(--sp-4); align-items: start; }
.evidence-stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.evidence-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.evidence-list article { display: flex; flex-direction: column; gap: 2px; padding-bottom: var(--sp-2); border-bottom: 1px solid var(--border-soft); }
.evidence-list article:last-child { padding-bottom: 0; border-bottom: 0; }
/* School screening decision dashboard. Read-only evidence stays visually
separate from the fixed decision bar so advisory signals cannot look final. */
.screening-dashboard { display: flex; flex-direction: column; gap: var(--sp-4); padding-bottom: 92px; }
.screening-dashboard__header { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-4); }
.screening-dashboard__body { display: flex; flex-direction: column; gap: var(--sp-4); }
.screening-section-heading { align-items: start; }
.screening-section-heading p { margin: 4px 0 0; color: var(--ink-mute); font-size: var(--fs-sm); }
.screening-gates__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--sp-3); }
.screening-gate {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: var(--sp-2);
min-height: 126px;
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
}
.screening-gate.is-pass { border-color: var(--green-border); background: var(--green-bg); }
.screening-gate.is-fail { border-color: var(--red-border); background: var(--red-bg); }
.screening-gate.is-unknown { border-color: var(--amber-border); background: var(--amber-bg); }
.screening-gate__glyph {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border: 1px solid currentColor;
border-radius: 50%;
font-weight: 900;
}
.screening-gate.is-pass .screening-gate__glyph { color: var(--green-deep); }
.screening-gate.is-fail .screening-gate__glyph { color: var(--red-deep); }
.screening-gate.is-unknown .screening-gate__glyph { color: var(--amber-deep); }
.screening-gate > div { display: flex; flex-direction: column; min-width: 0; gap: 3px; }
.screening-gate > div strong { color: var(--ink); line-height: 1.35; }
.screening-gate > div span { color: var(--ink-2); font-family: var(--font-mono); font-size: var(--fs-xs); overflow-wrap: anywhere; }
.screening-gate > div small { color: var(--ink-mute); }
.screening-gate > .screening-evidence-chip { grid-column: 2; justify-self: start; margin-top: auto; }
.screening-assessment__rows { padding: 0; }
.screening-assessment__row {
display: grid;
grid-template-columns: 118px minmax(0, 1fr);
border-top: 1px solid var(--border-soft);
}
.screening-assessment__row:first-child { border-top: 0; }
.screening-assessment__row > h3 { margin: 0; padding: var(--sp-4); background: var(--bg-soft); color: var(--ink-2); font-size: var(--fs-sm); }
.screening-assessment__values { display: flex; flex-wrap: wrap; gap: var(--sp-2) var(--sp-4); padding: var(--sp-3) var(--sp-4); }
.screening-metric {
position: relative;
display: grid;
grid-template-columns: auto auto;
align-items: center;
gap: 2px var(--sp-2);
min-width: min(250px, 100%);
min-height: 58px;
padding: var(--sp-2) var(--sp-3);
border: 1px solid transparent;
border-radius: var(--r-sm);
}
.screening-metric.is-warn { border-color: var(--amber-border); background: var(--amber-bg); }
.screening-metric > span:first-child { color: var(--ink-mute); font-size: var(--fs-xs); }
.screening-metric > strong { color: var(--ink); font-family: var(--font-mono); }
.screening-metric > small { grid-column: 1 / -1; color: var(--ink-mute); }
.screening-metric > .badge { justify-self: start; }
.screening-freshness { color: var(--amber-deep) !important; }
.screening-evidence-chip {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 44px;
padding: 4px 9px;
border: 1px solid var(--blue-border);
border-radius: 999px;
background: var(--blue-bg);
color: var(--blue-deep);
cursor: pointer;
font-size: var(--fs-xs);
font-weight: 800;
}
.screening-evidence-chip.is-warn {
border-color: var(--amber-border);
background: var(--amber-bg);
color: var(--amber-deep);
}
.screening-evidence-chip:hover { border-color: var(--blue); }
.screening-evidence-chip:focus-visible { outline: 3px solid var(--focus-color); outline-offset: 2px; }
.screening-explanations { border-top: 1px solid var(--border); }
.screening-explanations__header {
display: flex;
align-items: baseline;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--bg-soft);
}
.screening-explanations__header h3 { margin: 0; color: var(--ink); font-size: var(--fs-body); }
.screening-explanations__header span { color: var(--ink-mute); font-size: var(--fs-xs); }
.screening-explanation {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--sp-2);
min-height: 56px;
padding: var(--sp-2) var(--sp-4);
border-top: 1px solid var(--border-soft);
}
.screening-explanation.is-missing { background: var(--red-bg); }
.screening-explanation > div { display: flex; align-items: center; flex: 1 1 280px; gap: var(--sp-2); }
.screening-explanation strong { color: var(--ink); }
.screening-explanations__empty { margin: 0; padding: var(--sp-4); color: var(--green-deep); }
.screening-advisory {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--purple-border);
background: var(--purple-bg);
color: var(--ink-2);
}
.screening-advisory strong { color: var(--purple-deep); }
.screening-advisory p { margin: 0; }
.screening-advanced > summary { min-height: 44px; cursor: pointer; }
.screening-decision-form { display: contents; }
.screening-decision-bar {
position: fixed;
z-index: 42;
right: 0;
bottom: 0;
left: 0;
display: flex;
align-items: center;
gap: var(--sp-2);
min-height: 68px;
padding: var(--sp-2) max(var(--sp-4), calc((100vw - 1280px) / 2));
border-top: 1px solid var(--border-strong);
background: color-mix(in srgb, var(--surface-raise) 94%, transparent);
box-shadow: 0 -8px 24px rgb(16 24 40 / .09);
backdrop-filter: blur(8px);
}
.screening-decision-bar__hint { color: var(--ink-mute); font-size: var(--fs-xs); }
.screening-evidence-dialog,
.screening-decision-dialog {
width: min(900px, 94vw);
max-height: min(820px, 92vh);
padding: 0;
overflow: hidden;
border: 1px solid var(--border-strong);
border-radius: var(--r-lg);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-lg);
}
.screening-decision-dialog { width: min(500px, 94vw); }
.screening-evidence-dialog::backdrop,
.screening-decision-dialog::backdrop { background: rgb(16 24 40 / .58); }
.screening-evidence-dialog > header,
.screening-decision-dialog > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
min-height: 56px;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border);
background: var(--surface-raise);
}
.screening-evidence-dialog > header > div:first-child { display: flex; flex-direction: column; }
.screening-evidence-dialog > header span { color: var(--ink-mute); font-size: var(--fs-xs); }
.screening-evidence-dialog__controls { position: sticky; right: 0; display: flex; align-items: center; gap: 6px; }
.screening-evidence-dialog__body {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--sp-3);
min-height: 360px;
max-height: 66vh;
padding: var(--sp-4);
overflow: auto;
background: #e8e6e1;
}
.screening-evidence-dialog__body.is-side-by-side { grid-auto-flow: column; grid-auto-columns: minmax(320px, 1fr); }
.screening-evidence-dialog figure {
display: flex;
flex-direction: column;
gap: var(--sp-2);
min-width: 0;
margin: 0;
padding: var(--sp-3);
border: 1px solid #d1cec7;
border-radius: var(--r-md);
background: #fff;
color: #232320;
}
.screening-evidence-dialog figcaption { font-weight: 800; }
.screening-evidence-dialog figure img { display: block; width: 100%; max-height: 520px; object-fit: contain; background: #fff; }
.screening-evidence-dialog figure small { overflow-wrap: anywhere; color: #514f49; font-family: var(--font-mono); }
.screening-evidence-dialog__empty { display: grid; place-items: center; min-height: 260px; margin: 0; color: #6b6860; text-align: center; }
.screening-evidence-dialog__summary {
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--purple-border);
background: var(--purple-bg);
color: var(--purple-deep);
}
.screening-evidence-dialog > footer { padding: var(--sp-2) var(--sp-4); color: var(--ink-mute); font-size: var(--fs-xs); }
.screening-decision-dialog__body { padding: var(--sp-4); }
.screening-decision-dialog__body > p { margin-top: 0; color: var(--ink-mute); }
.screening-decision-dialog fieldset { display: grid; gap: var(--sp-2); padding: 0; border: 0; }
.screening-decision-dialog fieldset label { display: flex; align-items: center; gap: var(--sp-2); min-height: 44px; padding: var(--sp-2); border: 1px solid var(--border); border-radius: var(--r-sm); cursor: pointer; }
.screening-decision-dialog fieldset label:has(input:checked) { border-color: var(--blue-border); background: var(--blue-bg); }
.screening-decision-dialog > footer { display: flex; justify-content: flex-end; gap: var(--sp-2); padding: 0 var(--sp-4) var(--sp-4); }
.screening-decision-dialog .form-error { margin: var(--sp-2) 0 0; color: var(--red-deep); }
/* OCR field-layer review is an additive, read-only projection in the console. */
.field-layer-panel {
display: grid;
gap: var(--sp-4);
margin-top: var(--sp-4);
padding-top: var(--sp-4);
border-top: 2px solid var(--border-strong);
}
.field-layer-panel__head,
.field-layer-zone__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-3);
}
.field-layer-panel__head h2,
.field-layer-zone__head h3 { margin: 0; }
.field-layer-panel__head p {
margin: 3px 0 0;
color: var(--ink-mute);
font-size: var(--fs-xs);
}
.field-layer-zone {
display: grid;
gap: var(--sp-2);
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-raise);
}
.field-layer-zone__rows { display: grid; gap: var(--sp-2); }
.field-layer-row {
display: grid;
grid-template-columns: minmax(120px, 1fr) auto;
gap: var(--sp-2);
padding: var(--sp-3);
border: 1px solid var(--border);
border-left-width: 4px;
border-radius: var(--r-sm);
background: var(--surface);
}
.field-layer-row--verified { border-left-color: var(--green); }
.field-layer-row--mismatch { border-left-color: var(--red); }
.field-layer-row--human_pending { border-left-color: var(--amber); }
.field-layer-row > div:first-child { display: grid; gap: 2px; }
.field-layer-row small { color: var(--ink-mute); }
.field-layer-row__rules,
.field-layer-row__evidence {
grid-column: 1 / -1;
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
}
.field-layer-row__rules code {
overflow-wrap: anywhere;
color: var(--purple-deep);
font-size: var(--fs-xs);
}
.field-layer-transcript { display: grid; gap: var(--sp-2); }
.field-layer-transcript .table { min-width: 720px; }
.score-input-list { display: flex; flex-direction: column; gap: var(--sp-2); }
.score-input-row { display: grid; grid-template-columns: minmax(0, 1fr) 112px; gap: var(--sp-3); align-items: center; padding: var(--sp-2) 0; border-bottom: 1px solid var(--border-soft); }
.score-input-row span { display: flex; flex-direction: column; }
.score-input-row small { color: var(--ink-mute); }
.ops-create-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--sp-4); }
.ops-create-grid > details > summary { cursor: pointer; }
.workbench-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(280px, .75fr); gap: var(--sp-5); align-items: start; }
.invoice-preview { position: sticky; top: calc(var(--header-h) + var(--sp-4)); }
.invoice-preview__lines { display: grid; gap: var(--sp-2); padding-block: var(--sp-3); border-block: 1px solid var(--border-soft); }
.input-affix { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: var(--sp-2); }
.input-affix > span { color: var(--ink-mute); font-size: 13px; }
.agency-supervision-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(300px, .75fr); gap: var(--sp-5); padding-bottom: var(--sp-5); border-bottom: 1px solid var(--border-soft); }
.agency-supervision-row:last-child { border-bottom: 0; padding-bottom: 0; }
.agency-supervision-row__summary, .agency-supervision-row__actions { display: grid; gap: var(--sp-3); align-content: start; }
.meta-list { display: flex; gap: var(--sp-5); margin: 0; }
.meta-list div { min-width: 0; }
.meta-list dt { color: var(--ink-mute); font-size: 11px; }
.meta-list dd { margin: 2px 0 0; font-weight: 700; }
.danger-disclosure > summary { list-style: none; cursor: pointer; }
.danger-disclosure > summary::-webkit-details-marker { display: none; }
.danger-disclosure__body { margin-top: var(--sp-3); min-width: 320px; }
.permission-user-picker { flex: 1 1 420px; margin: 0; }
.permission-grid { display: grid; grid-template-columns: minmax(300px, .75fr) minmax(460px, 1.25fr); gap: var(--sp-5); align-items: start; }
.preset-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.permission-diff { margin-top: var(--sp-2); }
.settings-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--sp-5); align-items: start; }
.settings-nav { position: sticky; top: calc(var(--header-h) + var(--sp-4)); max-height: calc(100vh - var(--header-h) - 40px); border: 1px solid var(--border); }
.settings-content { min-width: 0; }
.school-asset-preview {
display: block;
width: min(180px, 100%);
height: 96px;
margin-bottom: var(--sp-2);
object-fit: contain;
border: 1px solid var(--border);
border-radius: var(--r-md);
background: #fff;
}
.setting-technical-key { display: block; margin-top: 3px; color: var(--ink-mute); font-size: 11px; }
.bulk-edit-table { min-width: 760px; }
.bulk-edit-table td { vertical-align: top; }
.bulk-edit-table--documents, .bulk-edit-table--messages { min-width: 1040px; }
.message-editor { display: grid; grid-template-columns: 180px minmax(220px, .65fr) minmax(320px, 1.35fr); gap: var(--sp-3); align-items: start; padding-bottom: var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.message-editor:last-child { padding-bottom: 0; border-bottom: 0; }
.segmented { display: inline-flex; border: 1px solid var(--border); background: var(--surface-raise); }
.segmented a { padding: 7px 12px; color: var(--ink-mute); text-decoration: none; }
.segmented a.is-active { background: var(--blue); color: #fff; }
.create-disclosure { position: relative; }
.create-disclosure > summary { list-style: none; cursor: pointer; }
.create-disclosure > summary::-webkit-details-marker { display: none; }
.create-disclosure__panel { position: absolute; right: 0; z-index: 6; width: min(760px, calc(100vw - 48px)); margin-top: var(--sp-2); box-shadow: var(--shadow-lg); }
.period-summary-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1px; border: 1px solid var(--border); background: var(--border); }
.period-summary-grid > div { display: flex; flex-direction: column; gap: 3px; padding: var(--sp-3); background: var(--surface-raise); }
.admission-period-list .table { table-layout: fixed; }
.admission-period-list th:last-child,
.admission-period-list td:last-child { width: 112px; text-align: right; }
.period-settings-dialog { width: min(760px, calc(100vw - 32px)); max-height: 92vh; padding: 0; overflow: auto; color: var(--ink); border: 1px solid var(--border-strong); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-lg); }
.period-settings-dialog--wide { width: min(1120px, calc(100vw - 32px)); }
.period-settings-dialog::backdrop { background: rgb(16 24 40 / .55); }
.period-settings-dialog > .card { margin: 0; border: 0; }
.period-settings-dialog > .settings-layout { min-height: min(760px, 86vh); padding: var(--sp-4); }
.period-settings-dialog .settings-nav { top: 0; }
.period-settings-dialog [id^="period-settings-"] { scroll-margin-top: var(--sp-4); }
.management-disclosure { border: 1px solid var(--border); background: var(--surface); }
.management-disclosure > summary { display: flex; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3) var(--sp-4); cursor: pointer; background: var(--surface-raise); }
.management-disclosure > summary span { color: var(--ink-mute); }
.management-disclosure__body { padding: var(--sp-4); border-top: 1px solid var(--border); }
.requirement-version-list { display: grid; gap: var(--sp-2); }
.matrix-fieldset { min-width: 0; margin: 0; padding: var(--sp-4); border: 1px solid var(--border); }
.matrix-fieldset > legend, .matrix-fieldset > summary { padding-inline: var(--sp-2); cursor: pointer; }
.requirement-matrix { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); }
.requirement-matrix .check-row { align-items: flex-start; padding: var(--sp-2); border: 1px solid var(--border-soft); background: var(--surface-raise); }
.requirement-matrix .check-row span { display: flex; flex-direction: column; min-width: 0; }
.requirement-matrix .check-row small { color: var(--ink-mute); overflow-wrap: anywhere; }
.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-2); }
.session-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.session-card { display: flex; flex-direction: column; gap: 5px; padding: var(--sp-3); border: 1px solid var(--border); background: var(--surface); }
.interview-board { display: grid; grid-template-columns: repeat(5, minmax(230px, 1fr)); gap: var(--sp-3); overflow-x: auto; align-items: start; }
.interview-column { min-width: 230px; border: 1px solid var(--border); background: var(--surface-raise); }
.interview-column > header { display: flex; justify-content: space-between; align-items: center; padding: var(--sp-3); border-bottom: 1px solid var(--border); }
.interview-column > header h2 { margin: 0; font-size: var(--fs-body); }
.interview-column__body { display: flex; flex-direction: column; gap: var(--sp-2); padding: var(--sp-2); }
.interview-card { display: flex; flex-direction: column; gap: 6px; padding: var(--sp-3); border: 1px solid var(--border); background: var(--surface); }
.interview-card__manage { margin-top: var(--sp-2); padding-top: var(--sp-2); border-top: 1px solid var(--border-soft); }
.interview-card__manage summary { cursor: pointer; font-weight: 700; }
.interview-card__manage form { margin-top: var(--sp-3); }
.inline-reason-action { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-2); }
.session-queue { display: flex; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-2); }
.session-queue__item { display: grid; grid-template-columns: 28px minmax(150px, 1fr); min-width: 220px; gap: 2px 8px; padding: var(--sp-3); border: 1px solid var(--border); background: var(--surface); color: var(--ink-2); text-decoration: none; }
.session-queue__item > span { grid-row: 1 / 3; align-self: center; font-family: var(--font-mono); font-weight: 700; }
.session-queue__item small { color: var(--ink-mute); }
.session-queue__item.is-current { border-color: var(--blue); box-shadow: inset 3px 0 var(--blue); }
.applicant-summary-card > .btn { align-self: center; margin: var(--sp-3); }
.interview-evaluation { max-width: min(1680px, calc(100vw - var(--sp-6) * 2)); }
.interview-evaluation__grid { display: grid; grid-template-columns: minmax(720px, 1fr); gap: var(--sp-4); align-items: start; }
.interview-evaluation__grid > * { min-width: 0; }
.question-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); }
.question-card { padding: var(--sp-4); border: 1px solid var(--border); background: var(--surface); }
.question-card > span { color: var(--blue-deep); font-size: var(--fs-xs); font-weight: 700; }
.question-card p { margin: var(--sp-2) 0 0; }
/* Worker hub: queue backbone and non-shifting applicant detail overlay. */
.worker-hub__header { display: flex; justify-content: space-between; gap: var(--sp-4); align-items: start; }
.eyebrow { margin: 0 0 4px; color: var(--blue-deep); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; }
.worker-hub__rail { display: flex; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--border); }
.worker-hub__rail a { flex: none; padding: 11px 14px; color: var(--ink-mute); font-size: var(--fs-sm); font-weight: 700; text-decoration: none; border-bottom: 3px solid transparent; }
.worker-hub__rail a:hover, .worker-hub__rail a:focus-visible, .worker-hub__rail a.is-active { color: var(--blue-deep); border-bottom-color: var(--blue); }
.worker-summary { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--border); background: var(--border); gap: 1px; }
.worker-summary div { display: grid; gap: 3px; padding: var(--sp-3); background: var(--surface-raise); }
.worker-summary small { color: var(--ink-mute); }.worker-summary strong { font-size: var(--fs-h2); }
[data-worker-row] { cursor: pointer; }[data-worker-row]:hover td, [data-worker-row]:focus td { background: var(--blue-bg); }[data-worker-row]:focus { outline: 3px solid var(--focus-color); outline-offset: -3px; }
.worker-table td { vertical-align: middle; }.worker-table .cell-sub { display: block; color: var(--ink-mute); }
/* Shared 9-node applicant railway. Parallel lanes keep interview/docs and payment/original honest. */
.application-railway { min-width: 0; padding: var(--sp-3) var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); }
.application-railway__header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); margin-bottom: var(--sp-3); color: var(--ink); }
.application-railway__counter { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-sm); font-weight: 700; }
.application-railway__track { align-items: center; min-width: 0; overflow: hidden; padding: 18px var(--sp-3) 38px; }
.application-railway__track--wide { display: flex; }
.application-railway__track--narrow { display: none; }
.application-railway__phase { display: contents; }
.application-railway__phase-body { display: contents; }
.application-railway__item { display: flex; align-items: center; min-width: 0; flex: 1 1 0; }
.application-railway__item.is-step { flex: 1 1 0; }
.application-railway__item.is-parallel { flex: 1.65 1 0; }
.application-railway__node { position: relative; display: flex; align-items: center; justify-content: center; width: 34px; min-width: 34px; color: var(--ink-mute); text-align: center; }
.application-railway__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; aspect-ratio: 1; border: 2px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--ink-mute); font-weight: 800; }
.application-railway__label { position: absolute; top: 35px; left: 50%; width: max-content; max-width: 78px; transform: translateX(-50%); font-size: 11px; font-weight: 700; line-height: 1.25; white-space: normal; }
.application-railway__node.is-done { color: var(--green-deep); }
.application-railway__node.is-done .application-railway__dot { border-color: var(--green); background: var(--green); color: #fff; }
.application-railway__node.is-current { color: var(--blue-deep); }
.application-railway__node.is-current .application-railway__dot { border-color: var(--blue); background: var(--blue); color: #fff; box-shadow: 0 0 0 3px var(--blue-bg); animation: application-railway-pulse 1.8s ease-in-out infinite; }
.application-railway__node.is-warn { color: var(--amber-deep); }
.application-railway__node.is-warn .application-railway__dot { border-color: var(--amber); background: var(--amber-bg); color: var(--amber-deep); }
.application-railway__pip { width: 7px; height: 7px; border-radius: 50%; background: var(--border-strong); }
.application-railway__connector { flex: 1 1 auto; min-width: 10px; height: 3px; margin: 0 2px; background: repeating-linear-gradient(90deg, var(--border-strong) 0 5px, transparent 5px 10px); border-radius: 2px; opacity: .7; }
.application-railway__connector.is-done { border-top-style: solid; border-top-color: var(--green); }
.application-railway__connector.is-done { background: var(--green); opacity: 1; }
.application-railway__parallel { position: relative; display: flex; flex: 1 1 auto; flex-direction: column; gap: 8px; min-width: 0; padding: 9px 10px 9px 12px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-raise); }
.application-railway__parallel.is-done { border-color: var(--green-border); background: var(--green-bg); }
.application-railway__parallel-label { position: absolute; top: -8px; left: 14px; padding: 0 6px; background: var(--surface-raise); color: var(--ink-mute); border: 1px solid var(--border); border-radius: 99px; font-size: 9px; font-weight: 800; }
.application-railway__parallel.is-done .application-railway__parallel-label { border-color: var(--green-border); background: var(--green-bg); color: var(--green-deep); }
.application-railway__lane { min-width: 0; }
.application-railway__lane .application-railway__node { justify-content: flex-start; width: auto; min-width: 0; gap: 8px; }
.application-railway__lane .application-railway__dot { width: 26px; height: 26px; flex: 0 0 26px; font-size: 12px; }
.application-railway__lane .application-railway__label { position: static; width: auto; max-width: 100px; transform: none; font-size: 11.5px; white-space: normal; }
.application-railway--compact { display: inline-flex; align-items: center; width: 100%; min-height: 44px; gap: var(--sp-2); padding: var(--sp-2) var(--sp-3); }
.application-railway__compact-phase { color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 800; white-space: nowrap; }
.application-railway__compact-items { display: inline-flex; min-width: 0; gap: 5px; }
.application-railway__compact-chip { display: inline-flex; align-items: center; min-height: 28px; gap: 4px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 700; white-space: nowrap; }
.application-railway__compact-chip.is-done { border-color: var(--green-border); background: var(--green-bg); color: var(--green-deep); }
.application-railway__compact-chip.is-current { border-color: var(--blue-border); background: var(--blue-bg); color: var(--blue-deep); }
.application-railway__compact-chip.is-warn { border-color: var(--amber-border); background: var(--amber-bg); color: var(--amber-deep); }
.application-railway--compact .application-railway__counter { margin-left: auto; }
@keyframes application-railway-pulse {
50% { box-shadow: 0 0 0 6px var(--blue-bg); }
}
/* Student hub: fixed outer frame, compact status rail, and section-only content swaps. */
.application-hub-overlay { width: min(1480px, 96vw); max-width: none; height: min(900px, 94vh); max-height: none; padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); overflow: hidden; }
.application-hub-overlay::backdrop { background: rgb(16 24 40 / .62); }
.application-hub-overlay__content, .application-hub { height: 100%; min-height: 0; }
.application-hub { display: grid; grid-template-rows: auto auto minmax(0, 1fr); background: var(--surface); }
.application-hub__top { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-4); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--surface-raise); }
.application-hub__identity { min-width: 0; }
.application-hub__identity h1 { margin: 0; }
.application-hub__identity .row { align-items: baseline; }
.application-hub__alerts { margin-top: var(--sp-2); }
.application-hub__close { flex: none; min-width: 44px; min-height: 44px; }
.application-hub .btn--sm { min-height: 44px; }
.application-hub__progress { display: grid; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-bottom: 1px solid var(--border); background: var(--bg-soft); }
.application-hub__now { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; padding: 6px var(--sp-2); }
.application-hub__body { display: grid; grid-template-columns: 190px minmax(0, 1fr); min-height: 0; transition: grid-template-columns .18s ease; }
.application-hub__body.is-rail-collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.application-status-rail { min-width: 0; padding: var(--sp-2); overflow: auto; border-right: 1px solid var(--border); background: var(--surface-raise); }
.application-status-rail__header { display: flex; align-items: center; min-height: 44px; gap: var(--sp-2); padding: 0 4px 6px; }
.application-status-rail__title { flex: 1; color: var(--ink); font-weight: 800; }
.application-status-rail__toggle { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border: 0; border-radius: var(--r-md); background: transparent; color: var(--ink-mute); cursor: pointer; }
.application-status-rail__toggle:hover { background: var(--blue-bg); color: var(--blue-deep); }
.application-status-rail__items { display: grid; gap: 3px; }
.application-status-rail__item { position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; min-height: 44px; gap: var(--sp-2); width: 100%; padding: 5px 7px; border: 0; border-left: 3px solid transparent; border-radius: 0 var(--r-md) var(--r-md) 0; background: transparent; color: var(--ink-mute); text-align: left; cursor: pointer; }
.application-status-rail__item:hover { background: var(--bg-mute); color: var(--ink); }
.application-status-rail__item.is-active { border-left-color: var(--blue); background: var(--blue-bg); color: var(--blue-deep); font-weight: 800; }
.application-status-rail__icon { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--r-md); background: var(--surface); border: 1px solid var(--border); }
.application-status-rail__corner { position: absolute; right: -5px; top: -6px; min-width: 16px; height: 16px; padding: 0 3px; border-radius: var(--r-pill); background: var(--surface); color: var(--ink-mute); font-size: 9px; line-height: 14px; text-align: center; border: 1px solid var(--border); }
.application-status-rail__corner.is-ok, .application-status-rail__status.is-ok { color: var(--green-deep); }
.application-status-rail__corner.is-warn, .application-status-rail__status.is-warn { color: var(--amber-deep); }
.application-status-rail__corner.is-bad, .application-status-rail__status.is-bad { color: var(--red-deep); }
.application-status-rail__status { font-family: var(--font-mono); font-size: var(--fs-xs); font-weight: 800; }
.application-status-rail__separator { display: block; height: 1px; margin: var(--sp-2) 6px; background: var(--border); }
.application-status-rail.is-collapsed .application-status-rail__title,
.application-status-rail.is-collapsed .application-status-rail__label,
.application-status-rail.is-collapsed .application-status-rail__status { display: none; }
.application-status-rail.is-collapsed .application-status-rail__header { justify-content: center; padding-inline: 0; }
.application-status-rail.is-collapsed .application-status-rail__item { grid-template-columns: 32px; justify-content: center; padding-inline: 3px; }
.application-hub__content { min-width: 0; overflow: auto; padding: var(--sp-5); background: var(--surface); }
.application-hub__section:focus { outline: none; }
.application-hub__section:focus-visible { outline: 2px solid var(--focus-color); outline-offset: 4px; }
.application-hub__section-header { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-4); padding-bottom: var(--sp-3); border-bottom: 1px solid var(--border); }
.application-hub__section-header h2 { margin: 0; }
.application-hub__metrics { display: grid; grid-template-columns: repeat(5, minmax(100px, 1fr)); gap: 1px; margin: var(--sp-4) 0; border: 1px solid var(--border); background: var(--border); }
.application-hub__metrics > div { display: grid; gap: 2px; padding: var(--sp-3); background: var(--surface-raise); }
.application-hub__metrics strong { color: var(--ink); font-family: var(--font-mono); font-size: var(--fs-h2); }
.application-hub__metrics span { color: var(--ink-mute); font-size: var(--fs-sm); }
.application-hub__metrics .is-problem strong { color: var(--red-deep); }
.application-hub__metrics .is-warning strong { color: var(--amber-deep); }
.application-hub__callout { display: flex; gap: var(--sp-5); padding: var(--sp-4); border: 1px solid var(--blue-border); border-radius: var(--r-md); background: var(--blue-bg); color: var(--blue-deep); }
.application-hub__issue-list { display: grid; gap: var(--sp-2); margin-top: var(--sp-4); }
.application-hub__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1px; margin: var(--sp-4) 0; border: 1px solid var(--border); background: var(--border); }
.application-hub__facts > div { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: var(--sp-2); padding: var(--sp-3); background: var(--surface); }
.application-hub__facts dt { color: var(--ink-mute); font-size: var(--fs-sm); font-weight: 700; }
.application-hub__facts dd { margin: 0; overflow-wrap: anywhere; }
.application-hub__subgrid, .application-hub__bundle-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-3); }
.application-hub__subgrid > article, .application-hub__bundle { padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); }
.application-hub__list, .application-hub__history { display: grid; gap: var(--sp-2); margin: var(--sp-4) 0 0; padding: 0; list-style: none; }
.application-hub__list-row { display: grid; grid-template-columns: minmax(180px, 1fr) auto auto auto; align-items: center; gap: var(--sp-3); min-height: 52px; padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); }
.application-hub__revision { display: flex; align-items: start; justify-content: space-between; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.revision-summary__line { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); align-items: start; gap: var(--sp-2); margin: 0; }
.revision-summary__line > :last-child { min-width: 0; overflow-wrap: anywhere; padding-block: 2px; }
.journey-revision-list { display: grid; gap: var(--sp-3); margin-block-end: var(--sp-4); }
.journey-revision-list > h2 { margin: 0; font-size: var(--fs-lg); }
.journey-revision-row { display: grid; gap: var(--sp-3); padding: var(--sp-4); border: 1px solid var(--amber-border); border-radius: var(--r-md); background: var(--amber-bg-soft); }
/* 부모가 세로 flex(.stack)라 justify-self 는 먹지 않는다 — 링크가 가로로
늘어나고 .btn 의 가운데 정렬 때문에 화면 중앙에 뜬다. 정본: 「이전으로」는
전 화면 상단 좌측. */
.agency-journey-shell__back { justify-self: start; align-self: flex-start; }
.application-hub__bundle { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.application-hub__bundle > div { display: grid; gap: 2px; }
.application-hub__evidence-dialog { width: min(680px, 92vw); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); }
.application-hub__evidence-dialog::backdrop { background: rgb(16 24 40 / .5); }
.application-hub__history li { display: grid; grid-template-columns: minmax(150px, auto) minmax(180px, 1fr) minmax(120px, auto); gap: var(--sp-3); padding: var(--sp-3); border-left: 3px solid var(--border-strong); background: var(--surface-raise); }
.application-hub__history time { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-xs); }
.application-hub-page { padding: 0; }
.application-hub-page__frame { min-height: calc(100vh - var(--header-h)); }
.application-hub-page__frame .application-hub { min-height: calc(100vh - var(--header-h)); }
.theme-dark {
--bg: #0f151c;
--bg-soft: #141c25;
--bg-mute: #111922;
--bg-deep: #0b1118;
--surface: #18202a;
--surface-raise: #202a36;
--ink: #f5f7fa;
--ink-2: #d9e1ea;
--ink-3: #c6d0dc;
--ink-mute: #aebdcc;
--ink-faint: #91a2b5;
--ink-ghost: #718195;
--border: #3c4856;
--border-strong: #566579;
--border-soft: #303b47;
--border-input: #566579;
--blue: #70b7ef;
--blue-bg: #173b57;
--blue-bg-soft: #142f45;
--blue-border: #356784;
--blue-deep: #b8defe;
--green: #6fd3a5;
--green-deep: #9ae6c1;
--green-hover: #7cddb2;
--green-bg: #12382c;
--green-border: #2f7258;
--amber: #efbd62;
--amber-deep: #f6d494;
--amber-bg: #3d2d13;
--amber-bg-soft: #332611;
--amber-border: #7a5a25;
--red: #ff9b86;
--red-hover: #ffad9c;
--red-deep: #ffb7ae;
--red-bg: #451f1b;
--red-border: #873e34;
--purple: #c9b7ff;
--purple-deep: #dfd7ff;
--purple-bg: #302849;
--purple-border: #66588e;
--focus-color: #93c5fd;
color-scheme: dark;
}
.theme-dark .app-header,
.theme-dark .app-footer { background: #111820; }
.theme-dark .btn--ghost { color: var(--ink); }
.theme-dark .viewer-page,
.theme-dark .viewer-text-fallback,
.theme-dark .viewer-page img { background: #fff; color: #232320; }
.theme-dark .console__viewer { background: #0d131a; }
.theme-dark .viewer-toolbar,
.theme-dark .viewer-toast { background: #202a36; border-color: var(--border); }
.theme-dark .doc-group__head { background: #202a36; color: var(--ink-2); }
.offer-candidate:has([data-offer-select]:checked) { border-color: var(--blue); box-shadow: inset 4px 0 0 var(--blue); }.offer-wizard { width: min(620px, 94vw); padding: 0; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); }.offer-wizard::backdrop { background: rgb(16 24 40 / .55); }.offer-wizard .card { margin: 0; border: 0; }
.offer-wizard--two-step { width: min(760px, 94vw); max-height: 92vh; }
.offer-wizard--two-step .card { max-height: 90vh; overflow: auto; }
.offer-wizard__candidates { display: grid; max-height: 56vh; gap: var(--sp-3); overflow: auto; }
.offer-wizard__candidate {
margin: 0;
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-raise);
}
.offer-wizard__candidate legend { padding-inline: var(--sp-2); font-weight: 800; }
.offer-wizard__invoice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); margin-top: var(--sp-3); }
.input--readonly { display: flex; align-items: center; min-height: 40px; background: var(--bg); }
.offer-wizard__progress { margin-right: auto; color: var(--blue-deep); letter-spacing: 4px; }
/* ============ 16. 부분: 인증 (로그인·가입) ============ */
.auth-card { width: 100%; max-width: var(--container-narrow); }
.auth-split {
display: flex; width: 100%; max-width: 940px; min-height: 560px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--r-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.auth-split__brand {
flex: 1; display: flex; flex-direction: column; justify-content: center;
padding: 0 48px;
background: repeating-linear-gradient(135deg, #e9e7e2, #e9e7e2 14px, #e4e1db 14px, #e4e1db 28px);
}
.auth-split__form {
flex: 0 0 400px; display: flex; flex-direction: column; justify-content: center;
padding: 40px 44px; border-left: 1px solid var(--border);
}
.auth-divider {
display: flex; align-items: center; gap: 10px;
margin: var(--sp-4) 0; color: #c2beb6; font-size: var(--fs-xs);
}
.auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* 개발용 씨앗 계정 안내 (DEBUG 에서만 렌더된다 — apps/common/context_processors.py).
⛔ 아이디·비밀번호는 **그대로 옮겨 적는 값**이라 꺾이면 안 된다 (2026‑08‑13 눈으로 확인). */
.auth-seed td { padding: 7px var(--sp-2); }
.auth-seed th { padding: 7px var(--sp-2); }
.auth-seed-head { flex-wrap: wrap; gap: var(--sp-2); }
.auth-seed-head .card__title { white-space: nowrap; }
.auth-seed__id { white-space: nowrap; -webkit-user-select: all; user-select: all; }
/* 「없음」 체크는 값 칸에 **딸린 것**임이 눈에 보여야 한다 (발주자 2026‑08‑13 「2안」).
⚠ 떨어져 보이면 무엇의 「없음」인지 못 잇는다 (총‑54 — 칸 순서). */
.form-group--sub {
margin-top: calc(var(--sp-2) * -1);
margin-left: var(--sp-4);
padding-left: var(--sp-3);
border-left: 2px solid var(--border);
}
.form-group--sub .form-label { font-weight: 500; color: var(--ink-2); }
/* 발주자 판정판 — 검사 3층 (정본/25 §0.0). ⛔ DEBUG 에서만 렌더된다.
★ 두 안을 **나란히** 놓는 것이 이 화면의 요점이다 — 글로 견주면 안 보인다. */
.judge-options {
display: grid; gap: var(--sp-4);
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
align-items: start;
}
.judge-option { margin: 0; }
.judge-option ul { margin: 0 0 var(--sp-3); padding-left: 1.15em; }
.judge-option li { margin-bottom: 3px; }
/* ============ 16.25 학생 소비자 여정 ============ */
.student-journey { background: #f6f3ec; }
.theme-dark.student-journey { background: var(--bg); }
.student-journey .app-header { background: rgba(255,255,255,.94); border-bottom: 1px solid #e1e6f0; }
.student-journey .app-header__mark { background: #2849a8; }
.student-journey .card { border-radius: 8px; box-shadow: none; }
.student-main { padding: 18px; }
.student-shell { width: min(100%, 1180px); margin: 0 auto; }
.student-shell--wide { width: min(100%, 1180px); }
.app-shell:has(> .student-global-sidebar) { grid-template-columns: 200px minmax(0, 1fr); }
.student-global-sidebar { top: var(--header-h); width: 200px; height: calc(100vh - var(--header-h)); max-height: calc(100vh - var(--header-h)); gap: 10px; background: var(--surface); }
.student-global-sidebar__head { display: flex; align-items: center; gap: var(--sp-2); }
.student-global-sidebar__collapse { display: grid; grid-template-columns: 28px minmax(0, 1fr); align-items: center; flex: 1; min-height: 40px; gap: var(--sp-2); padding: 5px 9px; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface-raise); color: var(--ink-2); cursor: pointer; font-size: var(--fs-xs); font-weight: 800; }
.student-global-sidebar__collapse > span:first-child { display: inline-grid; place-items: center; font-size: 16px; }
.student-global-sidebar__nav { display: grid; gap: 2px; }
.student-global-sidebar .is-disabled { opacity: .48; }
.student-welcome-card__body { display: flex; align-items: center; min-width: 0; gap: var(--sp-4); }
.student-welcome-card__body > div { min-width: 0; }
.student-welcome-card__body h1 { margin: 0; font-size: clamp(22px, 3vw, 34px); overflow-wrap: anywhere; }
.student-welcome-card__body p { margin: var(--sp-1) 0 0; color: var(--ink-mute); }
.student-welcome-card__avatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 64px; width: 64px; height: 64px; border-radius: var(--r-md); background: var(--blue-bg); font-size: 32px; }
.student-welcome-card__language { margin-left: auto; white-space: normal; }
.student-section-heading h1,
.student-section-heading h2,
.student-section-heading p { margin: 0; }
.student-section-heading p { margin-top: var(--sp-1); color: var(--ink-mute); }
.student-application-row { display: flex; align-items: center; min-width: 0; gap: var(--sp-4); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); }
.student-application-row > div:first-child { min-width: 0; }
.student-application-row strong { font-size: var(--fs-body-lg); overflow-wrap: anywhere; }
.student-application-row p { margin: var(--sp-1) 0 0; color: var(--ink-mute); }
.student-application-row__actions { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-left: auto; }
.student-application-row__secondary { padding-inline: var(--sp-3); }
.student-home-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4); }
.student-home-actions h2,
.student-home-actions p { margin: 0; }
.student-home-actions p { color: var(--ink-mute); }
.procedure-steps { display: grid; gap: 0; }
.procedure-steps article { display: flex; align-items: flex-start; gap: var(--sp-4); padding: var(--sp-3) var(--sp-1); border-bottom: 1px dashed var(--border-strong); }
.procedure-steps article:last-child { border-bottom: 0; }
.procedure-steps article > span { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 34px; width: 34px; height: 34px; border-radius: 50%; background: var(--blue-bg); color: var(--blue-deep); font-weight: 900; }
.procedure-steps article.is-parallel { border: 1px solid var(--blue-border); border-radius: var(--r-md); background: var(--blue-bg-soft); }
.procedure-steps h2 { margin: 0; font-size: var(--fs-body-lg); }
.procedure-steps p { margin: var(--sp-1) 0 0; color: var(--ink-mute); }
.procedure-guide__actions { justify-content: flex-end; }
.program-choice-list { display: grid; gap: var(--sp-3); }
.program-choice-row { display: grid; grid-template-columns: minmax(250px, 1.4fr) minmax(190px, .8fr) auto; align-items: center; min-width: 0; gap: var(--sp-4); padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface-raise); transition: border-color .15s ease, box-shadow .15s ease; }
.program-choice-row:hover { border-color: var(--blue-border); box-shadow: var(--shadow-sm); }
.program-choice-row__identity,
.program-choice-row__major { min-width: 0; }
.program-choice-row h2 { margin: var(--sp-2) 0; font-size: var(--fs-h3); overflow-wrap: anywhere; }
.program-choice-row ul { margin: 0; padding-left: var(--sp-5); color: var(--ink-mute); font-size: var(--fs-sm); }
.program-choice-row .form-group { margin: 0; }
.program-choice-row--agency { grid-template-columns: minmax(220px, 1.1fr) minmax(160px, .7fr) minmax(280px, 1fr) auto; }
.program-choice-row__contact { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; gap: var(--sp-3); }
.program-choice-row__language { grid-column: 1 / -1; }
.journey-confirmation-grid__full { grid-column: 1 / -1; }
.student-hero { display: grid; gap: var(--sp-3); padding: clamp(28px, 6vw, 64px); color: #fff; background: linear-gradient(135deg, #172d6c, #4166d5); border-radius: var(--r-lg); box-shadow: var(--shadow-md); }
.student-hero h1, .student-page-heading h1 { max-width: 690px; margin: 0; font-size: clamp(28px, 4vw, 48px); line-height: 1.15; }
.student-hero p { max-width: 580px; margin: 0; color: #e2e9ff; font-size: var(--fs-body-lg); }
.eyebrow { margin: 0; color: var(--blue-deep); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .08em; text-transform: uppercase; }
.student-hero .eyebrow { color: #b9c8ff; }
.student-page-heading { display: grid; gap: var(--sp-2); padding: var(--sp-4) 0; }
.student-page-heading p:last-child { max-width: 660px; margin: 0; color: var(--ink-mute); font-size: var(--fs-body-lg); }
.student-application-card { border-left: 5px solid #4166d5; }
.program-choice-card { transition: transform .15s ease, box-shadow .15s ease; }
.program-choice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.student-application-editor .console__top { background: #fff; border-bottom-color: #e1e6f0; }
.student-application-editor .console__side { background: #f9faff; }
.student-application-editor .side-nav__item.is-active { border-left-color: #4166d5; background: #eaf0ff; }
.student-application-editor .acc__head { background: #f9faff; }
.student-footer { display: flex; gap: var(--sp-3); justify-content: center; padding: var(--sp-6) var(--sp-4); color: var(--ink-mute); font-size: var(--fs-sm); }
.student-footer a { color: var(--blue-deep); font-weight: 700; }
.student-auth .auth-split__brand { color: #fff; background: linear-gradient(135deg, #172d6c, #4166d5); }
.student-auth .auth-split__brand .eyebrow { color: #b9c8ff; }
.student-auth .auth-split__brand p:not(.eyebrow) { color: #e2e9ff; }
.journey-header-progress { display: grid; min-width: 9rem; gap: 2px; color: var(--ink-mute); font-size: var(--fs-xs); text-align: center; }
.journey-header-progress strong { color: var(--blue-deep); font-size: var(--fs-sm); }
.journey-layout { display: grid; grid-template-columns: 240px minmax(0, 1fr); width: min(100%, 1280px); min-width: 0; margin: 0 auto; gap: 20px; }
.journey-navigation { position: sticky; top: calc(var(--header-h) + var(--sp-3)); align-self: start; display: grid; max-height: calc(100vh - var(--header-h) - var(--sp-6)); overflow: auto; padding: var(--sp-2); border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.journey-navigation h2 { margin: 0; padding: 6px 9px; color: var(--ink-mute); font-size: var(--fs-xs); letter-spacing: .04em; }
.journey-navigation__group,
.journey-navigation__child { display: block; min-width: 0; border-radius: var(--r-sm); color: var(--ink-2); text-decoration: none; }
.journey-navigation__group { min-height: 36px; padding: 7px 9px; font-size: var(--fs-sm); font-weight: 800; line-height: 22px; }
.journey-navigation__optional { color: var(--ink-faint); font-size: 11px; font-weight: 500; }
.journey-navigation__child { min-height: 28px; margin-left: 20px; padding: 4px 9px; font-size: var(--fs-xs); line-height: 20px; }
.journey-navigation__group:hover,
.journey-navigation__child:hover { background: var(--surface-raise); text-decoration: none; }
.journey-navigation__group.is-current,
.journey-navigation__child.is-active { background: var(--blue-bg); color: var(--blue-deep); }
.journey-navigation__children { display: grid; }
.journey-main { display: grid; min-width: 0; align-content: start; gap: var(--sp-4); padding-bottom: var(--sp-6); }
.journey-page-heading { display: flex; align-items: flex-start; min-width: 0; gap: 12px; padding: 19px 20px; }
.journey-page-heading > div { min-width: 0; }
.journey-page-heading h1 { margin: 0; font-size: 20px; line-height: 1.3; }
.journey-page-heading p:last-child { margin: 4px 0 0; color: var(--ink-mute); font-size: 13.5px; line-height: 1.5; }
.journey-page-heading > .badge { margin-left: auto; white-space: nowrap; }
.journey-card { min-width: 0; overflow: hidden; }
.journey-page-card { border-radius: 8px; box-shadow: none; }
.journey-page-body { display: grid; min-width: 0; gap: 16px; padding: 18px 20px 20px; }
.journey-page-body > * { min-width: 0; }
.journey-file-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.journey-file-list li { display: flex; min-width: 0; gap: var(--sp-3); justify-content: space-between; padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-sm); }
.journey-file-list li span:first-child { min-width: 0; overflow-wrap: anywhere; }
.journey-upload-zone { position: relative; display: flex; align-self: start; align-items: center; width: 100%; height: auto; min-height: 66px; gap: 12px; padding: 11px 14px; border: 2px dashed var(--border-strong); border-radius: 8px; background: var(--surface-raise); font-size: 13px; line-height: 1.4; cursor: pointer; }
.journey-upload-zone__copy { display: grid; min-width: 0; gap: 2px; }
.journey-upload-zone small { color: var(--ink-mute); }
.journey-upload-zone__icon { flex: 0 0 auto; font-size: 22px; }
.journey-upload-zone__input { position: absolute; z-index: 1; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.journey-upload-zone--large { flex-direction: column; justify-content: center; min-height: 368px; padding: 28px; text-align: center; }
.journey-upload-zone--large .journey-upload-zone__icon { font-size: 56px; }
.journey-upload-zone--large .journey-upload-zone__copy { justify-items: center; gap: 6px; }
.journey-upload-zone--dark { border-color: #66717e; background: #303b48; color: #fff; }
.journey-upload-zone--dark small { color: #c8d0d8; }
.journey-classification-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .5fr) auto; align-items: end; min-width: 0; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); }
.journey-classification-row > div { display: flex; flex-wrap: wrap; min-width: 0; gap: var(--sp-2); }
.journey-classification-row strong { overflow-wrap: anywhere; }
/* 유형을 고르기 전에 서류를 본다. 가로로 늘어놓고 넘겨 보게 한다 — 쪽이 여럿인
묶음 파일이 흔하고, 첫 쪽만 보면 종류를 잘못 고른다(정본 §72). */
.journey-classification-preview { display: flex; flex-basis: 100%; gap: var(--sp-2); overflow-x: auto; padding-bottom: var(--sp-1); }
.journey-classification-preview img { height: 150px; width: auto; border: 1px solid var(--border); border-radius: var(--r-sm); background: var(--surface); }
.journey-document-contract { min-width: 0; }
.journey-document-contract + .journey-document-contract { padding-top: 16px; border-top: 1px solid var(--border); }
.journey-document-contract__title { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.journey-document-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: start; gap: 18px; min-width: 0; }
.journey-document-values { display: grid; min-width: 0; gap: 14px; }
.journey-document-viewer { display: flex; align-self: start; flex-direction: column; min-width: 0; height: max-content; gap: 10px; overflow: hidden; padding: 12px; border: 1px solid var(--border); border-radius: 8px; background: #20242b; color: #fff; }
.journey-document-viewer__bar { display: flex; align-items: center; min-height: 26px; gap: 8px; padding: 0; background: transparent; color: #cfd6df; font-size: 12px; }
.journey-document-viewer__bar > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.journey-document-viewer__bar button { flex: 0 0 auto; min-height: 0; padding: 4px 10px; border: 1px solid #596674; border-radius: 5px; background: #2b313a; color: #dfe5ec; font-size: 12px; line-height: 16px; cursor: pointer; }
/* 확대하면 왼쪽이 잘려서 못 보고, 스테이지가 세로로 한없이 길어졌다
(발주자 실측). 원인 둘:
- `place-items:center` 는 넘치는 자식의 **시작 쪽(왼쪽·위)을 스크롤로
닿을 수 없게** 만든다. flex + 자식 `margin:auto` 는 가운데 정렬을
유지하면서 양쪽 다 스크롤된다.
- 높이 상한이 없어 `height:auto` 인 이미지가 커질수록 화면이 밀렸다.
상한을 두면 늘어나는 대신 **스크롤**된다. */
.journey-document-viewer__stage { position: relative; display: flex; min-height: 340px; max-height: 72vh; overflow: auto; background: #151b22; }
.journey-document-viewer__stage > img,
.journey-document-viewer__stage > iframe { margin: auto; }
.journey-document-viewer__stage img { display: block; width: 100%; height: auto; -webkit-user-drag: none; user-select: none; }
.journey-document-viewer__stage iframe { width: 100%; min-height: 588px; border: 0; background: #fff; }
/* 줌은 연속이다 — 고정 단계 금지(UX 정본 §1.1 「연속 확대+팬」).
Ctrl+휠로 배율을 바꾸고, 확대되면 끌어서 이동한다. */
.journey-document-viewer { --viewer-zoom: 1; }
/* 판독 전에는 preview 쪽이 없어 원본을 iframe 으로 보여준다. 줌 규칙이
`img` 에만 걸려 있어 **판독 중에는 확대가 안 됐다**(발주자 지적). */
.journey-document-viewer__stage img,
.journey-document-viewer__stage iframe { width: calc(100% * var(--viewer-zoom)); max-width: none; }
.journey-document-viewer__stage.is-pannable { cursor: grab; }
.journey-document-viewer__stage.is-panning { cursor: grabbing; }
.journey-document-viewer__highlight { position: absolute; z-index: 2; border: 3px solid #ef5350; background: rgb(239 83 80 / .18); box-shadow: 0 0 0 9999px rgb(0 0 0 / .12); pointer-events: none; }
.journey-document-viewer__note { margin: 0; padding: 0; color: #aab3bf; font-size: 12px; }
.journey-document-viewer .journey-upload-zone { margin: 0; }
.journey-document-viewer.is-dragging-file { outline: 4px solid var(--blue); outline-offset: -4px; }
.journey-confirmation-form { display: grid; min-width: 0; gap: 14px; }
.journey-confirmation-form .form-group { margin-bottom: 0; }
.journey-confirmation-form .form-label { display: flex; align-items: baseline; min-height: 21px; gap: 6px; margin-bottom: 5px; overflow: hidden; font-size: 13.5px; font-weight: 700; line-height: 21px; white-space: nowrap; }
/* 여정 화면은 밝은 화면만 보고 만들어져 배경을 #fbfaf7 로 박아 두었다. 다크
모드에서는 글자만 밝아져 **흰 배경에 흰 글자**가 됐다 — 확정 폼의 값이 통째로
안 보였다(DOC116 실주행, 발주자 지적). 색은 토큰으로만 쓴다. */
.journey-confirmation-form .input { min-height: 40px; padding: 8px 11px; border-color: var(--border-input); border-radius: 5px; background: var(--surface); color: var(--ink); font-size: 14.5px; line-height: 22px; }
.journey-confirmation-form__head { display: flex; align-items: flex-start; gap: var(--sp-3); }
.journey-confirmation-form__head > div { min-width: 0; }
.journey-confirmation-form__head h3 { margin: 0; }
.journey-confirmation-form__head p { margin: var(--sp-1) 0 0; color: var(--ink-mute); }
.journey-confirmation-form__head .badge { margin-left: auto; white-space: nowrap; }
.journey-confirmation-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.journey-source { color: var(--green); font-size: 11px; font-weight: 700; }
.journey-source--warn { color: var(--amber-deep); }
.journey-source--muted { color: var(--ink-mute); }
.journey-confirmation-actions { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; margin-top: 2px; }
.journey-confirmation-actions .btn { min-height: 40px; padding: 8px 16px; border-radius: 6px; font-size: 14px; }
.journey-page-body > .notice { padding: 10px 12px; border-left: 4px solid var(--blue); background: var(--blue-bg); font-size: 14px; line-height: 20px; }
.journey-consent-form { display: grid; gap: 8px; }
.journey-basic-fields .input,
.journey-purpose-row .input { min-height: 40px; padding: 8px 11px; border-radius: 5px; font-size: 14.5px; line-height: 22px; }
.journey-agreement { display: flex; align-items: center; min-height: 45px; gap: 9px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); font-size: 14px; line-height: 21px; cursor: pointer; }
.journey-agreement input { margin-top: 0; }
.journey-agreement a { margin-left: 2px; font-size: 12px; white-space: nowrap; }
.journey-separator { width: 100%; margin: 0; border: 0; border-top: 1px solid var(--border); }
.journey-photo-column,
.journey-basic-fields { display: grid; align-content: start; min-width: 0; }
.journey-photo-column { gap: 5px; }
.journey-photo-column > .form-label { margin-bottom: 0; line-height: 21px; }
.journey-basic-fields { gap: 0; }
.journey-basic-fields .form-group { margin-bottom: 0; }
.journey-basic-fields .hint { margin-top: 4px; font-size: 12px; line-height: 18px; }
.journey-major-change { margin-top: var(--sp-5); box-shadow: none; }
.journey-major-change > summary { cursor: pointer; }
.journey-major-change[open] > summary { border-radius: var(--r-lg) var(--r-lg) 0 0; }
.journey-photo-drop { position: relative; display: grid; min-width: 0; min-height: 368px; place-items: center; overflow: hidden; border-radius: 8px; background: var(--bg-mute); }
.journey-photo-preview { display: block; width: 200px; height: 300px; object-fit: cover; border: 1px solid var(--border); border-radius: 6px; }
.journey-photo-placeholder { color: var(--ink-faint); font-size: 64px; }
.journey-photo-drop .journey-upload-zone { position: absolute; inset: 0; align-items: flex-end; justify-content: center; min-height: 365px; padding: 16px; background: transparent; text-align: center; }
.journey-photo-drop .journey-upload-zone__icon,
.journey-photo-drop .journey-upload-zone small { display: none; }
.journey-photo-drop .journey-upload-zone__copy { align-self: end; padding: 4px 8px; border-radius: 4px; background: rgb(251 250 247 / .9); color: var(--ink-2); }
.journey-condition { padding: 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raise); }
.journey-family-rows { display: grid; gap: 8px; }
.journey-type-proposal { display: grid; gap: 8px; margin-bottom: 12px; }
.journey-type-proposal form { display: inline; }
.journey-family-heading { display: flex; align-items: baseline; gap: 8px; margin-bottom: 6px; }
/* 양해는 「일치」와 같은 얼굴을 하지 않는다 — 색+아이콘+텍스트 삼중 표기. */
.journey-page-body > .notice--warning { border-left-color: var(--color-status-warning-border); background: var(--color-status-warning-bg); color: var(--color-status-warning); }
.journey-mother-waiver h2 { margin: 0 0 4px; font-size: 14px; }
.journey-mother-waiver .meta { color: var(--ink-mute); font-size: 12px; }
.journey-family-row__sources { color: var(--ink-mute); }
.journey-family-applicant { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-left: 4px solid var(--blue); background: var(--blue-bg); font-size: 13px; line-height: 20px; }
.journey-family-row { display: grid; grid-template-columns: minmax(0, 1fr) 130px auto; align-items: center; min-width: 0; gap: 8px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--ink); }
.journey-family-row__person { min-width: 0; }
.journey-family-row__person .meta { margin-top: 3px; color: var(--ink-mute); font-size: 11px; overflow-wrap: anywhere; }
.input--bare { padding-inline: 0; border-color: transparent; background: transparent; font-weight: 800; }
.journey-confirmation-form .input--bare { min-height: 26px; padding: 0; border-color: transparent; background: transparent; font-size: 16px; font-weight: 800; }
.journey-family-add { border: 1px dashed var(--border-strong); border-radius: 6px; }
.journey-family-add summary { padding: 10px 12px; color: var(--blue-deep); font-weight: 800; cursor: pointer; list-style: none; }
.journey-family-add__fields { display: grid; grid-template-columns: minmax(0, 1fr) 150px auto; align-items: end; gap: 10px; padding: 0 12px 12px; }
.journey-person-fields { min-width: 0; margin: 0; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.journey-person-fields legend { padding: 0 6px; font-weight: 900; }
.journey-grade-table { width: 100%; table-layout: fixed; border-collapse: collapse; font-size: 12px; }
.journey-grade-table th:first-child { width: 24%; }
.journey-grade-table th:last-child { width: 22%; }
.journey-grade-table th:not(:first-child):not(:last-child) { width: 18%; }
.journey-grade-table td:first-child { white-space: nowrap; }
.journey-grade-table th,
.journey-grade-table td { padding: 7px 5px; border: 1px solid var(--border); text-align: center; }
.journey-grade-table input { width: 100%; min-width: 48px; padding: 4px; border: 1px solid transparent; background: transparent; color: var(--ink); text-align: center; }
.journey-grade-table input:focus { border-color: var(--blue-border); background: var(--surface); outline: 2px solid var(--focus-color); }
.journey-grade-table__sum { background: var(--surface-raise); font-weight: 800; }
.journey-purpose-row { display: grid; min-width: 0; gap: 8px; padding: 12px; border: 1px solid var(--border); border-radius: 6px; }
.journey-purpose-row form { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 8px; }
.journey-not-applicable { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface-raise); }
.journey-essay-form { display: grid; gap: 16px; }
.journey-essay-form textarea { min-height: 88px; height: 88px; }
.journey-review-groups { display: grid; }
.journey-review-row { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: 12px; padding: 13px 4px; border-bottom: 1px solid var(--border); }
.journey-review-row > div { display: grid; gap: 3px; }
.journey-review-row > div span { color: var(--ink-mute); font-size: 12px; }
.journey-review-list { display: grid; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.journey-review-list > li,
.journey-file-row { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); flex-wrap: wrap; }
.journey-purpose-form { display: grid; grid-template-columns: minmax(16rem, 1fr) auto; align-items: end; gap: var(--sp-2); width: min(100%, 42rem); }
.journey-purpose-form textarea { min-height: 5.5rem; }
.journey-actions { position: static; display: flex; align-items: center; min-width: 0; gap: var(--sp-3); padding: var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); box-shadow: var(--shadow-sm); }
.student-journey img,
.student-journey iframe,
.student-journey object,
.student-journey embed { max-width: 100%; }
/* 상태 아이콘 원 (메일 발송·완료 등 안내 화면) */
.status-circle {
width: 72px; height: 72px; border-radius: 50%;
display: inline-flex; align-items: center; justify-content: center;
background: var(--blue-bg); font-size: 32px;
}
.status-circle--success { background: var(--green-bg); color: var(--green); }
.status-circle--warn { background: var(--amber-bg); color: var(--amber-deep); }
.status-circle--error { background: var(--red-bg); color: var(--red); }
/* ============ 16.5 관리자 CRUD shell ============ */
.crud-change-summary {
display: grid; gap: var(--space-internal-lg); margin-top: var(--space-internal-lg);
padding: var(--space-internal-lg); border: 1px solid var(--border-strong);
border-radius: var(--r-md); background: var(--surface-raise);
}
.crud-change-summary.is-dirty { border-color: var(--amber-border); box-shadow: inset 4px 0 0 var(--amber); }
.crud-change-summary__help > summary { min-height: 44px; display: flex; align-items: center; color: var(--ink-2); cursor: pointer; font-weight: 700; }
.crud-change-summary__facts {
display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-internal-md); margin: 0;
}
.crud-change-summary__facts div { min-width: 0; }
.crud-change-summary__facts dt {
margin-bottom: var(--space-internal-xs); color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 700;
}
.crud-change-summary__facts dd { margin: 0; color: var(--ink-2); font-size: var(--fs-sm); overflow-wrap: anywhere; }
.crud-change-summary__diff {
display: grid; gap: var(--space-internal-sm); padding-top: var(--space-internal-md); border-top: 1px solid var(--border);
}
.crud-change-summary__diff .row { align-items: center; }
.crud-change-summary__diff li {
display: grid; grid-template-columns: minmax(10rem, .45fr) minmax(0, 1fr); gap: var(--space-internal-md);
color: var(--ink-mute); font-size: var(--fs-xs);
}
.crud-change-summary__diff li strong { color: var(--ink-2); overflow-wrap: anywhere; }
.crud-change-summary__diff li span { font-family: var(--font-mono); overflow-wrap: anywhere; }
.crud-change-summary__confirm { padding-top: var(--space-internal-md); border-top: 1px solid var(--border); }
.crud-error-summary { margin-bottom: var(--space-internal-md); }
.requirement-group + .requirement-group { margin-top: var(--sp-4); }
.requirement-group h4 { margin: 0 0 var(--sp-2); color: var(--ink-2); }
.offer-candidate-table { width: 100%; min-width: 0; table-layout: auto; }
.offer-template-missing { display: inline-block; max-width: 26rem; }
.modal-shell__head {
position: sticky; top: 0; z-index: 4;
display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
background: var(--surface);
}
.modal-shell__head h2, .modal-shell__head p { margin-top: 0; }
.modal-shell__close { flex: 0 0 auto; min-width: 44px; min-height: 44px; margin-left: auto; font-size: 1.35rem; }
@media (max-width: 1024px) {
.crud-change-summary__facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.program-choice-row--agency { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 720px) {
.student-welcome-card__body { align-items: flex-start; flex-wrap: wrap; }
.student-welcome-card__avatar { flex-basis: 48px; width: 48px; height: 48px; font-size: 24px; }
.student-welcome-card__language { width: 100%; margin-left: 0; }
.student-application-row { align-items: stretch; flex-direction: column; }
.student-application-row__actions { display: grid; grid-template-columns: minmax(0, 1fr); width: 100%; margin-left: 0; }
.student-home-actions { grid-template-columns: minmax(0, 1fr); }
.program-choice-row { grid-template-columns: minmax(0, 1fr); }
.program-choice-row__contact { grid-template-columns: minmax(0, 1fr); }
.program-choice-row__language { grid-column: auto; }
.program-choice-row > .btn { width: 100%; white-space: normal; }
.journey-header-progress { display: none; }
.journey-layout { grid-template-columns: minmax(0, 1fr); }
.journey-page-heading { flex-direction: column; }
.journey-page-heading > .badge { margin-left: 0; white-space: normal; }
.journey-classification-row { grid-template-columns: minmax(0, 1fr); }
.journey-confirmation-form__head { flex-direction: column; }
.journey-confirmation-form__head .badge { margin-left: 0; white-space: normal; }
.journey-confirmation-grid { grid-template-columns: minmax(0, 1fr); }
.journey-document-split { grid-template-columns: minmax(0, 1fr); }
.journey-document-viewer__stage { min-height: 260px; }
.journey-upload-zone--large { min-height: 260px; }
.journey-family-row { grid-template-columns: minmax(0, 1fr); }
.journey-family-row__relation { width: 100%; }
.journey-family-add__fields { grid-template-columns: minmax(0, 1fr); }
.journey-purpose-row form { grid-template-columns: minmax(0, 1fr); }
.journey-review-row { grid-template-columns: minmax(0, 1fr) auto; }
.journey-review-row .btn { grid-column: 1 / -1; width: 100%; }
.journey-purpose-form { grid-template-columns: minmax(0, 1fr); }
.journey-actions { position: static; flex-wrap: wrap; }
.journey-actions .btn { flex: 1 1 100%; white-space: normal; }
.journey-main { padding-bottom: calc(var(--sp-6) + env(safe-area-inset-bottom)); }
.journey-card .card__body,
.journey-card .card__header,
.journey-card .card__footer { min-width: 0; padding-inline: var(--sp-3); }
.journey-file-list li { align-items: stretch; flex-direction: column; }
.work-list__column-resizer { display: none; }
.interview-evaluation { max-width: 100%; }
.crud-change-summary__facts { grid-template-columns: 1fr; }
.crud-change-summary__diff li { grid-template-columns: 1fr; gap: var(--space-internal-xs); }
}
/* ============ 17. 반응형 공통 ============ */
@media (max-width: 1024px) {
.stat-grid { grid-template-columns: repeat(3, 1fr); }
.console__side { width: 220px; }
.console__panel { width: 340px; }
.screening-summary-band, .applicant-summary-card { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screening-workbench__grid, .ops-create-grid, .interview-evaluation__grid { grid-template-columns: 1fr; }
.session-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.application-hub__metrics { grid-template-columns: repeat(3, minmax(100px, 1fr)); }
.application-hub__subgrid, .application-hub__bundle-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.screening-gates__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 901px) and (max-width: 1279px) {
.console--review .viewer-split.is-comparing { flex-direction: column; }
.console--review .viewer-comparison {
flex: 0 0 min(42%, 280px); min-width: 0;
border-top: 1px solid #dad7d1; border-left: 0;
}
}
@media (max-width: 900px) {
.console--review .console__body,
.console--review .console__bottom,
.console--review .console-desktop-action { display: none; }
.console--review .console-mobile-notice {
display: block; margin: var(--sp-4); padding: var(--sp-5);
border: 1px solid var(--amber-border); background: var(--amber-bg-soft);
}
.console--review .console-mobile-notice p { color: var(--ink-2); }
}
@media (min-width: 721px) and (max-width: 1120px) {
.app-shell:has(> .app-sidebar) { grid-template-columns: 64px minmax(0, 1fr); }
.app-sidebar { width: 64px; padding-inline: 6px; }
.app-sidebar__home,
.app-sidebar__item { grid-template-columns: 1fr; justify-items: center; padding-inline: 4px; }
.app-sidebar__label,
.app-sidebar__group > h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 720px) {
.app-header { gap: 6px; padding: 7px var(--sp-4); min-width: 0; }
.app-sidebar-toggle-button { display: inline-flex; }
.app-header__brand { flex: 1 1 auto; gap: 8px; overflow: hidden; }
.app-header__mark { width: 30px; height: 30px; }
.app-header__titles { overflow: hidden; }
.app-header__title-full { display: none; }
.app-header__title-short { display: inline; }
.app-header__title { overflow: hidden; text-overflow: ellipsis; }
.app-header__sub { display: none; }
.app-header__actions { flex: none; gap: 6px; min-width: 0; }
.app-header__desktop-account { display: none !important; }
.app-header__account-menu { display: block; }
.lang-switch select { width: 104px; min-height: 44px; padding: 8px; }
.delegated-context { padding: 8px var(--sp-4); }
.app-nav { padding-inline: var(--sp-4); }
.app-nav__manage { width: 100%; }
.app-nav__manage-menu { position: static; width: 100%; margin-top: var(--sp-2); box-shadow: none; }
.app-main { padding: var(--sp-4); }
.app-shell:has(> .app-sidebar) { display: block; min-height: 0; }
.app-sidebar {
position: fixed; z-index: 96; inset: 0 auto 0 0;
width: min(294px, calc(100vw - 48px)); max-height: none;
transform: translateX(-105%); transition: transform .18s ease;
box-shadow: var(--shadow-lg);
}
.app-sidebar__close { display: inline-flex; }
.app-sidebar-backdrop {
position: fixed; z-index: 95; inset: 0;
background: rgb(15 21 28 / .48); cursor: pointer;
}
.app-sidebar-toggle:checked + .app-shell > .app-sidebar { transform: translateX(0); }
.app-sidebar-toggle:checked + .app-shell > .app-sidebar-backdrop { display: block; }
.btn { min-height: 46px; } /* 터치 타깃 여유 */
.form-grid { grid-template-columns: 1fr; }
.input { font-size: var(--fs-body-lg); } /* iOS 확대 방지 + 저시력 배려 */
.file-picker { align-items: stretch; flex-direction: column; }
.file-picker .btn { width: 100%; }
.stat-grid { grid-template-columns: repeat(2, 1fr); }
.school-dashboard__columns { grid-template-columns: 1fr; }
.criteria-toolbar, .session-strip, .question-grid, .choice-grid { grid-template-columns: 1fr; }
.screening-summary-band, .applicant-summary-card { grid-template-columns: 1fr; }
.change-preview { grid-template-columns: 1fr; }
.change-preview > span { transform: rotate(90deg); justify-self: center; }
.workbench-grid, .agency-supervision-row { grid-template-columns: 1fr; }
.permission-grid, .settings-layout { grid-template-columns: 1fr; }
.settings-nav { position: static; max-height: none; display: flex; overflow-x: auto; }
.settings-nav .side-nav__group { display: none; }
.settings-nav .side-nav__item { flex: none; border-left: 0; border-bottom: 3px solid transparent; }
.settings-nav .side-nav__item.is-active { border-bottom-color: var(--blue); }
.preset-grid, .period-summary-grid, .requirement-matrix { grid-template-columns: 1fr; }
.message-editor { grid-template-columns: 1fr; }
.create-disclosure__panel { position: fixed; inset: 72px 12px auto; width: auto; max-height: calc(100vh - 90px); overflow: auto; }
.invoice-preview { position: static; }
.meta-list { flex-wrap: wrap; }
.interview-board { grid-template-columns: repeat(5, 280px); }
.worker-hub__header { flex-direction: column; }
.worker-summary { grid-template-columns: 1fr; }
.application-hub-overlay { width: 100vw; height: 100vh; max-height: none; border: 0; border-radius: 0; }
.application-hub__top { padding: var(--sp-3) var(--sp-4); }
.application-hub__identity .row > span:not(.badge) { display: none; }
.application-hub__progress { padding-inline: var(--sp-3); }
.application-hub__now { flex-wrap: wrap; }
.application-hub__now .spacer { display: none; }
.application-hub__now .btn { width: 100%; }
.application-hub__body,
.application-hub__body.is-rail-collapsed { grid-template-columns: 56px minmax(0, 1fr); }
.application-status-rail { padding-inline: 4px; }
.application-status-rail__title,
.application-status-rail__label,
.application-status-rail__status { display: none; }
.application-status-rail__header { justify-content: center; padding-inline: 0; }
.application-status-rail__item { grid-template-columns: 32px; justify-content: center; padding-inline: 3px; }
.application-status-rail__toggle { visibility: hidden; }
.application-hub__content { padding: var(--sp-4); }
.application-hub__metrics, .application-hub__facts, .application-hub__subgrid, .application-hub__bundle-grid { grid-template-columns: 1fr; }
.application-hub__facts > div { grid-template-columns: 100px minmax(0, 1fr); }
.application-hub__list-row, .application-hub__history li { grid-template-columns: 1fr; }
.application-hub__revision, .application-hub__bundle, .application-hub__callout { align-items: stretch; flex-direction: column; }
.revision-summary__line { grid-template-columns: 1fr; }
.screening-dashboard__header { flex-direction: column; }
.screening-dashboard__header > .btn { width: 100%; }
.screening-gates__grid { grid-template-columns: 1fr; }
.screening-assessment__row { grid-template-columns: 1fr; }
.screening-assessment__row > h3 { padding-block: var(--sp-2); }
.screening-assessment__values { padding: var(--sp-3); }
.screening-metric { width: 100%; }
.screening-explanations__header { align-items: flex-start; flex-direction: column; }
.screening-advisory { grid-template-columns: 1fr; }
.screening-decision-bar { left: 0; overflow-x: auto; padding: var(--sp-2) var(--sp-3); }
.screening-decision-bar__hint { display: none; }
.screening-decision-bar .spacer { display: none; }
.screening-decision-bar .btn { flex: 1 0 auto; min-width: 96px; }
.screening-evidence-dialog__body.is-side-by-side { grid-auto-columns: minmax(270px, 86vw); }
.screening-evidence-dialog__controls { flex-wrap: wrap; justify-content: flex-end; }
.application-railway { padding-inline: var(--sp-3); }
.application-railway__track { gap: var(--sp-2); }
.application-railway__track--wide { display: none; }
.application-railway__track--narrow { display: grid; }
.application-railway__phase { display: block; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--surface); }
.application-railway__phase > summary { display: flex; align-items: center; justify-content: space-between; min-height: 44px; padding: var(--sp-2) var(--sp-3); color: var(--ink); cursor: pointer; font-weight: 800; }
.application-railway__phase:not([open]) .application-railway__phase-body { display: none; }
.application-railway__phase-body { display: grid; gap: var(--sp-2); padding: var(--sp-3); border-top: 1px solid var(--border); }
.application-railway__item { display: grid; grid-template-columns: 1fr; }
.application-railway__node { justify-content: flex-start; width: 100%; min-width: 0; min-height: 44px; gap: var(--sp-2); text-align: left; }
.application-railway__label { position: static; max-width: none; transform: none; }
.application-railway__connector { display: none; }
.application-railway__parallel { min-width: 0; }
.application-railway--compact { display: inline-flex; padding-inline: var(--sp-2); }
.application-gates { align-items: stretch; flex-direction: column; gap: var(--sp-2); }
.application-gates .steps__item { display: grid; grid-template-columns: 32px minmax(0, 1fr) auto; align-items: center; text-align: left; }
.application-gates .steps__item::before { display: none; }
.progress-next { grid-template-columns: 1fr; }
.student-next-action__lookup { grid-template-columns: 1fr; }
.table--agency-cards tr {
display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 10px;
padding: var(--sp-3);
}
.table--agency-cards td { display: block; min-width: 0; padding: 0; text-align: left; }
.table--agency-cards td::before { content: none; }
.table--agency-cards .agency-card__identity { grid-column: 1; grid-row: 1; }
.table--agency-cards .agency-card__identity .cell-main,
.table--agency-cards .agency-card__identity .cell-sub { display: block; overflow-wrap: anywhere; }
.table--agency-cards .agency-card__status { grid-column: 2; grid-row: 1; align-self: start; }
.table--agency-cards .agency-card__links,
.table--agency-cards .agency-card__actions { grid-column: 1 / -1; }
.table--agency-cards .agency-card__links .row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.table--agency-cards .agency-card__links .btn,
.table--agency-cards .agency-card__actions .btn { width: 100%; }
.action-bar { padding: 10px var(--sp-4); padding-bottom: calc(10px + env(safe-area-inset-bottom)); flex-wrap: wrap; }
.console { height: auto; min-height: calc(100vh - var(--header-h)); }
.application-editor .console__body { display: flex; }
.section-nav-links { display: flex; }
.console__content { overflow: visible; padding: var(--sp-4); padding-bottom: 90px; }
.console__top { flex-wrap: wrap; }
.auth-split { flex-direction: column; min-height: 0; }
.auth-split__brand { padding: 28px 24px; }
.auth-split__form { flex: none; border-left: none; border-top: 1px solid var(--border); padding: 28px 24px; }
.app-footer { padding: var(--sp-4); overflow-wrap: anywhere; }
.hide-mobile { display: none !important; }
}
@media (min-width: 1121px) {
.app-sidebar-toggle:checked + .app-shell:has(> .student-global-sidebar) { grid-template-columns: 52px minmax(0, 1fr); }
.app-sidebar-toggle:checked + .app-shell > .student-global-sidebar { width: 52px; padding-inline: 5px; }
.app-sidebar-toggle:checked + .app-shell > .student-global-sidebar .app-sidebar__item,
.app-sidebar-toggle:checked + .app-shell > .student-global-sidebar .student-global-sidebar__collapse { grid-template-columns: 1fr; justify-items: center; padding-inline: 4px; }
.app-sidebar-toggle:checked + .app-shell > .student-global-sidebar .app-sidebar__label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
}
@media (max-width: 900px) {
.journey-layout { grid-template-columns: minmax(0, 1fr); }
.journey-navigation { display: none; }
}
@media (max-width: 420px) {
.app-header { flex-wrap: wrap; padding-inline: 10px; }
.app-header__brand { flex: 1 1 calc(100% - 132px); }
.app-header__actions { margin-left: auto; }
.app-header__theme-toggle [data-theme-label] { display: none; }
.lang-switch select { width: 94px; }
.app-main { min-width: 0; padding: var(--sp-3); }
.journey-layout { padding-inline: 0; }
.student-footer { align-items: center; flex-direction: column; text-align: center; }
}
@media (min-width: 721px) {
.hide-desktop { display: none !important; }
}
/* ============ 18. 접근성·모션 ============ */
.visually-hidden {
position: absolute !important; width: 1px; height: 1px;
margin: -1px; padding: 0; border: 0;
clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* ============ 26. 부분: 합격 이후 작업(backhalf) ============ */
.backhalf-main { max-width: none; }
.backhalf-shell { display: grid; gap: var(--sp-4); width: min(100%, var(--container-wide)); margin-inline: auto; }
.backhalf-topbar {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center;
gap: var(--sp-3); min-height: 64px; padding: var(--sp-3) var(--sp-4);
border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
box-shadow: var(--shadow-sm);
}
.backhalf-topbar h1, .backhalf-topbar p { margin: 0; }
.backhalf-topbar .eyebrow { color: var(--ink-mute); font-size: var(--fs-xs); font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.backhalf-back { min-height: 44px; }
.backhalf-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-3); }
.backhalf-stat {
display: grid; gap: var(--sp-1); min-height: 92px; padding: var(--sp-4);
border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface);
color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.backhalf-stat strong { color: var(--blue-deep); font-family: var(--font-mono); font-size: 26px; line-height: 1; }
.backhalf-stat span { color: var(--ink-mute); font-weight: 800; }
.backhalf-card { min-width: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--shadow-sm); }
.backhalf-card__head {
display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
min-height: 64px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border);
}
.backhalf-card__head h2, .backhalf-card__head p { margin: 0; }
.backhalf-card__head p { margin-top: var(--sp-1); color: var(--ink-mute); font-size: var(--fs-sm); }
.backhalf-table td strong, .backhalf-table td small { display: block; }
.backhalf-table td small { margin-top: 2px; color: var(--ink-mute); }
.backhalf-list { display: grid; }
.backhalf-list-toolbar {
display: flex;
justify-content: flex-end;
margin-bottom: var(--sp-3);
}
.backhalf-work-list-filters {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: var(--sp-3);
background: var(--surface-soft);
}
.backhalf-work-list-filters .backhalf-state-filter {
border: 0;
}
.backhalf-sort-form {
display: flex;
align-items: end;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
}
.backhalf-sort-form .form-group { min-width: 150px; }
.backhalf-sort-form .btn { min-height: 44px; }
.backhalf-work-list-table th,
.backhalf-work-list-table td,
.interview-work-list-table th,
.interview-work-list-table td {
vertical-align: middle;
white-space: nowrap;
}
.backhalf-work-list-table .application-railway--compact,
.interview-work-list-table .application-railway--compact {
min-width: 310px;
}
.work-list-cell-inline {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
}
.work-list-cell-inline strong { color: var(--ink); }
.work-list-cell-inline > span:not(.mono) + span { color: var(--ink-mute); }
.work-list-row-actions {
display: flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
}
.backhalf-parallel-actions {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
white-space: nowrap;
}
.work-list-ellipsis {
display: block;
max-width: 280px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.shipment-waybill-preview {
display: block;
width: 100%;
max-height: min(58vh, 620px);
object-fit: contain;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: #fff;
}
.shipment-manifest {
display: grid;
gap: var(--sp-2);
margin: 0;
padding: 0;
list-style: none;
}
.shipment-manifest li {
display: flex;
align-items: center;
gap: var(--sp-3);
min-height: 44px;
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.shipment-manifest li span { margin-left: auto; color: var(--ink-mute); }
.modal-summary {
padding: var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface-soft);
}
.modal-summary p { margin-bottom: 0; color: var(--ink-mute); }
.arrival-guidance-bar {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: end;
gap: var(--sp-3);
padding: var(--sp-4);
border-bottom: 1px solid var(--border);
background: var(--surface-soft);
}
.arrival-guidance-bar label { display: grid; gap: var(--sp-2); color: var(--ink-mute); font-size: var(--fs-sm); font-weight: 800; }
.arrival-guidance-bar textarea { width: 100%; min-height: 88px; resize: vertical; }
.arrival-guidance-bar .btn { min-height: 44px; }
.visa-grantee-row { border-left: 4px solid var(--green-deep); }
.visa-grantee-row + .backhalf-task-dialog { margin: 0; }
.backhalf-state-filter {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2);
padding: var(--sp-3) var(--sp-4);
border-top: 1px solid var(--border-soft);
border-bottom: 1px solid var(--border-soft);
background: var(--surface-soft);
}
.backhalf-state-filter .filter-chip {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
}
.backhalf-state-filter .filter-chip span {
min-width: 24px;
padding: 1px 7px;
border-radius: 999px;
background: var(--surface);
color: var(--ink-mute);
font-family: var(--font-mono);
text-align: center;
}
.backhalf-state-filter .filter-chip.is-active {
border-color: var(--blue);
background: var(--blue-bg);
color: var(--blue-deep);
}
.backhalf-row { display: grid; gap: var(--sp-3); padding: var(--sp-4); border-bottom: 1px solid var(--border-soft); }
.coe-row { border-left: 4px solid var(--line-strong); }
.coe-row--applied { border-left-color: var(--amber-deep); }
.coe-row--issued { border-left-color: var(--blue); }
.coe-row--sent { border-left-color: var(--green-deep); }
.coe-package { margin: 0; color: var(--ink-mute); font-size: var(--fs-sm); }
.coe-select {
min-height: 44px;
display: inline-flex;
align-items: center;
gap: var(--sp-2);
color: var(--ink-mute);
font-size: var(--fs-sm);
font-weight: 700;
cursor: pointer;
}
.coe-select input { width: 20px; height: 20px; accent-color: var(--blue); }
.coe-select span {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.visa-lookup-grid,
.visa-row-facts {
display: flex;
flex-wrap: wrap;
gap: var(--sp-2) var(--sp-5);
margin: 0;
color: var(--ink-mute);
}
.visa-lookup-grid > div { min-width: 160px; }
.visa-lookup-grid dt {
margin-bottom: 2px;
color: var(--ink-faint);
font-size: var(--fs-xs);
font-weight: 800;
}
.visa-lookup-grid dd { margin: 0; color: var(--ink); font-weight: 800; }
.backhalf-task-dialog {
width: min(680px, calc(100vw - 32px));
max-height: calc(100vh - 32px);
padding: var(--sp-5);
overflow: auto;
border: 1px solid var(--line-strong);
border-radius: var(--r-lg);
background: var(--surface);
color: var(--ink);
box-shadow: var(--shadow-lg);
}
.backhalf-task-dialog--wide { width: min(940px, calc(100vw - 32px)); }
.backhalf-task-dialog::backdrop { background: rgb(15 23 42 / 56%); backdrop-filter: blur(2px); }
.backhalf-task-dialog h2 { margin-top: 0; }
.backhalf-task-dialog form,
.backhalf-task-dialog > div { display: grid; gap: var(--sp-4); }
.evidence-peek {
width: 100%;
min-height: 360px;
border: 1px solid var(--line-strong);
border-radius: var(--r-md);
background: #fff;
}
.backhalf-row:last-child { border-bottom: 0; }
.backhalf-row__main, .backhalf-actions {
display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-2);
}
.backhalf-actions { justify-content: flex-end; }
.backhalf-actions .btn--primary { margin-left: auto; }
.backhalf-row__main strong { color: var(--ink); font-size: var(--fs-h3); }
.backhalf-row__main > :last-child:not(:first-child) { margin-left: auto; }
.backhalf-data { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-2); margin: 0; }
.backhalf-data > div { padding: var(--sp-2) var(--sp-3); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-soft); }
.backhalf-data dt { color: var(--ink-mute); font-size: var(--fs-xs); }
.backhalf-data dd { margin: 2px 0 0; color: var(--ink); font-weight: 800; }
.backhalf-actions .spacer, .backhalf-completion-bar .spacer { flex: 1 1 auto; }
.backhalf-actions .input { width: auto; min-width: 180px; }
.backhalf-form-grid { display: grid; grid-template-columns: repeat(4, minmax(130px, 1fr)) auto; align-items: end; gap: var(--sp-3); }
.backhalf-form-grid label, .backhalf-action-card label { display: grid; gap: var(--sp-1); color: var(--ink-mute); font-size: var(--fs-sm); font-weight: 700; }
.backhalf-form-grid .btn { min-height: 44px; }
.checkline { display: inline-flex !important; align-items: center; gap: var(--sp-2); min-height: 44px; color: var(--ink-2) !important; }
.backhalf-split { display: grid; grid-template-columns: minmax(0, 1fr) 320px; align-items: start; gap: var(--sp-4); }
.backhalf-action-card { position: sticky; top: calc(var(--header-h) + var(--sp-4)); display: grid; gap: var(--sp-3); padding: var(--sp-4); }
.backhalf-checklist { display: grid; }
.backhalf-checklist label {
display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: var(--sp-3);
min-height: 56px; padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--border-soft); cursor: pointer;
}
.backhalf-checklist label:last-child { border-bottom: 0; }
.backhalf-checklist label span { display: grid; }
.backhalf-checklist small { color: var(--ink-mute); }
.backhalf-console { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: var(--sp-4); min-height: 620px; }
.backhalf-console__queue { align-self: stretch; padding: var(--sp-3); }
.backhalf-console__queue h2 { padding: var(--sp-2); }
.backhalf-console__queue a { display: grid; gap: 2px; min-height: 52px; padding: var(--sp-3); border-left: 3px solid transparent; border-radius: var(--r-sm); color: var(--ink-2); }
.backhalf-console__queue a span { color: var(--ink-mute); font-family: var(--font-mono); font-size: var(--fs-xs); }
.backhalf-console__queue a.is-active { border-left-color: var(--blue); background: var(--blue-bg); }
.backhalf-console__viewer { display: grid; grid-template-rows: auto 1fr auto; min-width: 0; }
.auth-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-3); align-content: start; padding: var(--sp-4); background: var(--bg-deep); }
.auth-docs article { min-height: 150px; padding: var(--sp-4); border: 1px solid var(--border); border-radius: var(--r-md); background: #fff; color: #232320; }
.auth-scan-upload,
.auth-review-summary,
.auth-comparison,
.auth-field-form,
.auth-field-results {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
}
.auth-scan-upload {
display: flex;
align-items: end;
gap: var(--sp-3);
padding: var(--sp-4);
margin: 0 var(--sp-4) var(--sp-4);
}
.auth-scan-upload label { flex: 1; display: grid; gap: var(--sp-1); }
.auth-scan-upload label span,
.auth-review-summary small { color: var(--ink-mute); font-size: var(--fs-sm); }
.auth-review-summary {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
margin: 0 var(--sp-4) var(--sp-4);
}
.auth-comparisons { display: grid; gap: var(--sp-4); padding: 0 var(--sp-4) var(--sp-4); }
.auth-comparison { padding: var(--sp-4); }
.auth-comparison > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
margin-bottom: var(--sp-3);
}
.auth-comparison > header > div { display: grid; gap: 2px; }
.auth-comparison > header span:not(.badge) { color: var(--ink-mute); font-size: var(--fs-sm); }
.auth-copy-pair {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
gap: var(--sp-3);
}
.auth-copy-pair section {
min-width: 0;
border: 1px solid var(--border);
border-radius: var(--r-md);
overflow: hidden;
background: #fff;
}
.auth-copy-pair h3 {
margin: 0;
padding: var(--sp-2) var(--sp-3);
border-bottom: 1px solid var(--border);
color: #232320;
font-size: var(--fs-sm);
}
.auth-copy-pair iframe {
display: block;
width: 100%;
min-height: 420px;
border: 0;
background: #fff;
}
.auth-field-form,
.auth-field-results { margin-top: var(--sp-3); padding: var(--sp-3); }
.auth-field-form > label { display: grid; gap: var(--sp-1); margin-bottom: var(--sp-3); }
.auth-field-list { display: grid; gap: var(--sp-2); }
.auth-field-check {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(150px, 220px);
align-items: center;
gap: var(--sp-3);
padding: var(--sp-2) var(--sp-3);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.auth-field-check > span:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-2); }
.auth-field-check small { flex-basis: 100%; color: var(--ink-mute); }
.auth-field-check--mismatch,
.auth-field-check--not_visible { border-color: var(--red-border); background: var(--red-bg); }
.auth-field-check--matched { border-color: var(--green-border); background: var(--green-bg); }
.auth-field-results summary { cursor: pointer; font-weight: 700; margin-bottom: var(--sp-3); }
.callout--danger { border-color: var(--red-border); background: var(--red-bg); color: var(--red-deep); }
.backhalf-completion-bar { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-4); border-top: 1px solid var(--border); background: var(--surface); }
.backhalf-completion-bar .btn--primary { margin-left: auto; }
.backhalf-completion-bar .input { width: min(420px, 45vw); }
.backhalf-adapters { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-4); align-items: start; }
.backhalf-confirm { width: min(440px, calc(100vw - 32px)); padding: 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--surface); color: var(--ink-2); box-shadow: var(--shadow-lg); }
.backhalf-confirm::backdrop { background: rgba(15, 14, 13, .56); }
.backhalf-confirm form { padding: var(--sp-5); }
.backhalf-confirm h2 { margin-bottom: var(--sp-2); }
.backhalf-confirm p { min-height: 42px; color: var(--ink-mute); }
.badge--success { background: var(--green-bg); border-color: var(--green-border); color: var(--green-deep); }
.badge--warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-deep); }
.badge--danger { background: var(--red-bg); border-color: var(--red-border); color: var(--red-deep); }
.badge--blue { background: var(--blue-bg); border-color: var(--blue-border); color: var(--blue-deep); }
.btn--warning { background: var(--amber-bg); border-color: var(--amber-border); color: var(--amber-deep); font-weight: 700; }
.btn--warning:hover { background: var(--amber-bg-soft); color: var(--amber-deep); }
.backhalf-shell--student {
width: min(100% - 32px, 860px);
margin-inline: auto;
}
.backhalf-shell--student .backhalf-topbar { align-items: flex-start; }
.backhalf-shell--student .backhalf-list { gap: 18px; }
.backhalf-shell--student .backhalf-row {
padding: 22px;
border-radius: 18px;
}
.backhalf-shell--student .backhalf-form-grid {
grid-template-columns: minmax(0, 1fr);
max-width: 620px;
}
.backhalf-shell--student .input,
.backhalf-shell--student .btn { min-height: 48px; }
.backhalf-shell--student .btn--primary {
width: 100%;
justify-content: center;
}
.student-flow-intro {
display: grid;
gap: 4px;
padding: 18px 20px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
}
.student-flow-intro span { color: var(--ink-mute); }
@media (max-width: 1000px) {
.backhalf-summary { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.backhalf-form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.backhalf-adapters { grid-template-columns: 1fr; }
}
@media (max-width: 720px) {
.backhalf-topbar { grid-template-columns: 1fr auto; }
.backhalf-topbar .backhalf-back { grid-column: 1 / -1; width: 100%; }
.backhalf-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.backhalf-card__head { align-items: flex-start; flex-direction: column; }
.backhalf-data, .backhalf-form-grid, .backhalf-split, .backhalf-console, .auth-docs { grid-template-columns: 1fr; }
.arrival-guidance-bar { grid-template-columns: 1fr; }
.backhalf-action-card { position: static; }
.backhalf-console__queue { max-height: 220px; overflow-y: auto; }
.backhalf-actions .input, .backhalf-completion-bar .input { width: 100%; min-width: 0; }
.backhalf-work-list-filters { grid-template-columns: 1fr; }
.backhalf-sort-form { padding-top: 0; }
.backhalf-sort-form .form-group { min-width: 0; flex: 1; }
.backhalf-completion-bar { align-items: stretch; flex-wrap: wrap; }
.backhalf-completion-bar .spacer { display: none; }
.backhalf-completion-bar .btn { flex: 1 1 140px; min-height: 44px; }
.auth-copy-pair { grid-template-columns: 1fr; }
.auth-copy-pair iframe { min-height: 320px; }
.auth-field-check { grid-template-columns: 1fr; }
.auth-scan-upload,
.auth-review-summary { align-items: stretch; flex-direction: column; }
}
/* ===== 화면 전환·모달 모션 (2026-08-04, 고품격 잔기술) =====
원칙: 200ms 이하 · 기능적 의미가 있는 모션만 · 모션 감소 설정 존중.
View Transitions는 지원 브라우저(Chromium)에서만 작동하는 점진적 향상. */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 160ms; }
dialog.backhalf-task-dialog[open] {
animation: dialog-rise 180ms cubic-bezier(0.2, 0.8, 0.3, 1);
}
dialog.backhalf-task-dialog::backdrop {
background: rgba(20, 18, 14, 0.42);
animation: backdrop-fade 180ms ease-out;
}
@keyframes dialog-rise {
from { opacity: 0; transform: translateY(8px) scale(0.985); }
to { opacity: 1; transform: none; }
}
@keyframes backdrop-fade {
from { opacity: 0; }
to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) { animation: none; }
dialog.backhalf-task-dialog[open],
dialog.backhalf-task-dialog::backdrop { animation: none; }
}
/* 서류 업로드 — 기타 서류 범주 접기 (F44) */
.document-subgroup {
border: 1px solid var(--border, #e2e2e2);
border-radius: 10px;
background: var(--surface, #fff);
}
.document-subgroup__summary {
display: flex;
align-items: center;
gap: 0.5rem;
padding: 0.75rem 1rem;
cursor: pointer;
font-weight: 600;
list-style: none;
}
.document-subgroup__summary::before {
content: "▸";
transition: transform 0.15s ease;
}
.document-subgroup[open] > .document-subgroup__summary::before {
transform: rotate(90deg);
}
.document-subgroup__summary::-webkit-details-marker { display: none; }
.document-subgroup__list {
padding: 0 0.75rem 0.75rem;
}
/* 서류 판독값 입력 제안 패널 (FIX-B5) */
.suggestion-panel {
border: 1px dashed var(--primary, #2f5fa8);
border-radius: 10px;
padding: 0.75rem 1rem;
background: color-mix(in srgb, var(--primary, #2f5fa8) 6%, transparent);
display: grid;
gap: 0.4rem;
}
/* 판독 중 배지 — 도는 동그라미(발주자 지시 2026-08-04). */
.ocr-badge { display: inline-flex; align-items: center; gap: 0.35em; }
.ocr-spinner {
display: inline-block;
width: 0.85em;
height: 0.85em;
border: 2px solid currentColor;
border-right-color: transparent;
border-radius: 50%;
animation: ocr-spin 0.8s linear infinite;
}
@keyframes ocr-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.ocr-spinner { animation-duration: 2.4s; }
}
/* ============ 인라인 첨부 업로드 모달 (지원서 정보 헤더) ============ */
.upload-dialog { border: 1px solid var(--border); border-radius: 12px; padding: 0; width: min(560px, 92vw); background: var(--surface); color: var(--ink); }
.upload-dialog::backdrop { background: rgb(16 24 40 / .55); }
.upload-dialog__body { padding: var(--sp-4, 20px); display: grid; gap: 14px; }
.upload-dialog__head { display: flex; align-items: center; gap: 10px; }
.upload-dropzone { border: 2px dashed var(--border); border-radius: 10px; padding: 40px 16px; text-align: center; color: var(--ink-faint); cursor: pointer; transition: border-color .15s, background .15s; }
.upload-dropzone.is-over { border-color: var(--blue); background: var(--bg-soft); color: var(--ink); }
.upload-dropzone strong { display: block; color: var(--ink); margin-bottom: 4px; }
.action-bar--inline { position: static; z-index: auto; border-top: 0; padding: 0; min-height: 0; }
/* 행 삭제 — 체크박스 대신 즉시 버튼(발주자 2026-08-05). 체크박스는 JS 값 전달용으로만 남긴다. */
.repeater-row__delete input[type="checkbox"] { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.repeater-row__delete { cursor: pointer; }
.repeater-row.is-pending-delete { display: none; }
.repeater-row-undo { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--border); border-radius: var(--r-md); color: var(--ink-faint); }
/* 다크 모드 — 학생 저니의 밝은 고정색 재정의(발주자 실측 2026-08-05:
흰 헤더 위에 다크 글자색이 얹혀 헤더·타이틀이 안 보였다). */
.theme-dark .student-journey { background: var(--bg); }
.theme-dark .student-journey .app-header { background: #111820; border-bottom-color: var(--border); }
.theme-dark .student-application-editor .console__top { background: var(--surface); border-bottom-color: var(--border); }
.theme-dark .student-application-editor .console__side { background: var(--bg-soft); }
.theme-dark .student-application-editor .side-nav__item.is-active { border-left-color: var(--blue); background: var(--blue-bg); }
.theme-dark .student-application-editor .acc__head { background: var(--bg-soft); }
/* 「이 값으로 입력할까요?」 확인 모달 (프로토 student_doc_journey_v1.html:614).
무엇이 들어가는지 보여주고 되돌릴 기회를 준다 — 비가역은 아니지만
사람이 값을 확인하는 자리다(자동확정 금지 정본). */
.journey-confirm-dialog { max-width: 520px; padding: 20px; border: 1px solid var(--border); border-radius: 10px; }
.journey-confirm-dialog::backdrop { background: rgb(0 0 0 / .35); }
.journey-confirm-dialog h2 { margin: 0 0 12px; font-size: 18px; }
.journey-confirm-kv { display: grid; grid-template-columns: minmax(90px, 38%) 1fr; gap: 6px 14px; margin-bottom: 12px; max-height: 46vh; overflow: auto; }
.journey-confirm-kv__row { display: contents; }
.journey-confirm-kv__row b { color: var(--ink-faint); font-weight: 600; }
.journey-confirm-kv__row span { word-break: break-word; }
.journey-confirm-dialog__actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
/* ═══════════════════════════════════════════════════════════════════════
어두운 테마 — 글자 대비 덮개 (2026-08-16 · qualitycheck/색대비검사.py 실측)
⛔ 무엇이 문제였나
어두운 테마에서 --blue·--green·--red 가 **밝아진다**(#70b7ef · #6fd3a5 · #ff9b86).
그런데 그 위의 글자는 여전히 #fff 였다.
⇒ 대비 1.8~2.2 — **어두운 테마를 쓰는 사람은 이 자리를 못 읽었다.**
★ 고친 법 — 밝은 배경 위에는 **어두운 글자**를 쓴다(--bg = #0f151c).
실측 대비: blue 8.48 · green 10.08 · green-hover 11.22 · green-deep 12.64
ink-2 13.90 · amber-deep 12.90 ⇒ 전부 4.5 를 넉넉히 넘는다
⚠ 되돌리는 법 — 이 블록만 지운다. ⛔ 그러면 대비 미달 17 곳이 돌아온다
(2026-08-16 에 실제로 지워 보고 확인했다).
═══════════════════════════════════════════════════════════════════════ */
/* ① 파랑 위 — 지금 자리·고른 것 */
.theme-dark .pagination .is-current,
.theme-dark .segmented a.is-active,
.theme-dark .steps__item.is-current .steps__num,
.theme-dark .console-step-nav__item.is-active > span,
.theme-dark .crop-card__pin.is-pinned,
.theme-dark .application-railway__node.is-current .application-railway__dot { color: var(--bg); }
/* ② 초록 위 — 됐다·끝났다 */
.theme-dark .btn--success,
.theme-dark .btn--success:hover,
.theme-dark .application-railway__node.is-done .application-railway__dot,
.theme-dark .badge--final { color: var(--bg); }
/* ③ 빨강 위 — 지운다·되돌린다 */
.theme-dark .btn--danger,
.theme-dark .btn--danger:hover { color: var(--bg); }
/* ④ 옅은 단추의 hover — 배경이 밝게 굳어 있어 글자를 어둡게 */
.theme-dark .btn--success-soft:hover,
.theme-dark .btn--warn-soft:hover { color: var(--bg); }
/* ⑤ 밝은 판 위의 글자 — 알림·올리기 안내 */
.theme-dark .toast,
.theme-dark .journey-photo-drop .journey-upload-zone__copy { color: var(--bg); }
/* ⑥ 머리의 상표 자리 — --bg 글자에 --brand 배경이라 둘 다 어두웠다 */
.theme-dark .app-header__mark { color: var(--ink); }
|