/* ============================================================
   VERADI 듀오 스킨 v2 (SV-eddf 시안) · 덧씌우기 전용 레이어
   - 사이트 전 화면 공통 시스템. 마크업·메뉴·문구·밀도 무변경, 껍데기만.
   - 토큰 3층: ① primitive(원값) → ② semantic(역할) → ③ component(부품)
     [ui-ux-pro-max:design-system · token-architecture]
   - 모든 primitive 색은 web/static/style.css :root 기존 값 또는 그 파생.
   - 금지: 그라데이션·글로·새 통계 타일 [design-taste-frontend 9.A · minimalist-ui 2]
   ============================================================ */

/* ★SV-42bc 서체 = 프리텐다드(곧은 고딕 · OFL) — 「글씨가 너무 귀엽다」(대표 10-24) → 둥근 나눔스퀘어라운드 제거.
   pretendard@1.3.9 woff2-subset(KS X 1001) 을 fonts/ 에 로컬 보관(외부 CDN 0).
   'Pretendard' = 굵기 400/600/700 한 가족(인라인 font-weight 가 진짜 굵기로 간다) · B/EB = 기존 굵기 토큰 자리(400 고정 규칙 유지) */
@font-face { font-family: 'Pretendard'; font-weight: 400; src: url(fonts/Pretendard-Regular.subset.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Pretendard'; font-weight: 600; src: url(fonts/Pretendard-SemiBold.subset.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'Pretendard'; font-weight: 700 900; src: url(fonts/Pretendard-Bold.subset.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'PretendardB'; src: url(fonts/Pretendard-SemiBold.subset.woff2) format('woff2'); font-display: swap; }
@font-face { font-family: 'PretendardEB'; src: url(fonts/Pretendard-Bold.subset.woff2) format('woff2'); font-display: swap; }

:root {
  /* ── ① PRIMITIVE ─────────────────────────────────────────── */
  --p-paper:      #F6F4EF;  /* style.css:20 --bg */
  --p-white:      #FFFFFF;  /* style.css:21 --card */
  --p-ink-900:    #221E19;  /* style.css:24 --dark */
  --p-ink-700:    #4A443A;  /* style.css:25 --gray */
  --p-ink-600:    #5F5849;  /* style.css:26 --gray-soft */
  --p-ink-200:    #E3E2E1;  /* 파생: style.css:22 --line rgba(40,34,24,.13) 흰 바탕 합성 */
  --p-ink-300:    #C7C6C3;  /* 파생: 같은 --line α .26 합성 */
  --p-ink-100:    #F1EFEA;  /* 파생: --line-soft(style.css:23) α .07 를 --bg 위 합성 */
  --p-navy-600:   #17538F;  /* style.css:27 --primary */
  --p-navy-700:   #144A80;  /* 파생: --primary ×0.89 (hover) */
  --p-navy-800:   #113F6C;  /* style.css:28 --primary-dark */
  --p-navy-100:   #E7EEF5;  /* style.css:29 --primary-soft */
  --p-navy-300:   #B6C9DC;  /* style.css:30 --primary-line */
  --p-green-600:  #3C7D45;  /* style.css:33 --ok */
  --p-green-800:  #2D5E34;  /* 파생: --ok ×0.75 */
  --p-green-100:  #E7F0E4;  /* style.css:34 --ok-soft */
  --p-red-600:    #C0452A;  /* style.css:37 --high */
  --p-red-800:    #903420;  /* 파생: --high ×0.75 */
  --p-red-100:    #F6E6DF;  /* style.css:38 --high-soft */
  --p-amber-600:  #C67F1A;  /* style.css:35 --warn */
  --p-amber-100:  #F7EEDD;  /* style.css:36 --warn-soft */
  --p-char-800:   #1E2023;  /* dashboard.html:32 .dz-hero 중간 stop (단색화) */
  --p-char-900:   #121316;  /* dashboard.html:32 .dz-hero 첫 stop */

  --p-r-8: 8px; --p-r-12: 12px; --p-r-16: 16px;
  --p-ledge: 3px;                               /* 받침 두께 단 하나 */
  --p-ease-out: cubic-bezier(.23,1,.32,1);      /* [emil-design-eng] strong ease-out */
  --p-font-r:  'Pretendard', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;   /* ★SV-42bc */
  --p-font-b:  'PretendardB', 'Pretendard', 'Apple SD Gothic Neo', sans-serif;
  --p-font-eb: 'PretendardEB', 'PretendardB', 'Apple SD Gothic Neo', sans-serif;

  /* ── ② SEMANTIC ──────────────────────────────────────────── */
  --s-canvas:        var(--p-paper);
  --s-surface:       var(--p-white);
  --s-surface-sunk:  var(--p-ink-100);
  --s-text:          var(--p-ink-900);
  --s-text-sub:      var(--p-ink-700);
  --s-text-muted:    var(--p-ink-600);
  --s-border:        var(--p-ink-200);
  --s-border-strong: var(--p-ink-300);
  --s-accent:        var(--p-navy-600);   /* 포인트색은 이것 하나 [design-taste 4.2] */
  --s-accent-hover:  var(--p-navy-700);
  --s-accent-ledge:  var(--p-navy-800);
  --s-accent-soft:   var(--p-navy-100);
  --s-accent-line:   var(--p-navy-300);
  --s-success:       var(--p-green-600);  --s-success-soft: var(--p-green-100);
  --s-danger:        var(--p-red-600);    --s-danger-soft:  var(--p-red-100);
  --s-warn:          var(--p-amber-600);  --s-warn-soft:    var(--p-amber-100);
  --s-focus:         var(--p-navy-300);
  --s-radius-control:   var(--p-r-12);
  --s-radius-container: var(--p-r-16);
  --s-radius-tag:       var(--p-r-8);
  --s-press:  transform 120ms var(--p-ease-out), box-shadow 120ms var(--p-ease-out), background-color 150ms ease;

  /* ── ③ COMPONENT ─────────────────────────────────────────── */
  /* 규칙 1개: 누를 수 있는 것 = 높이 40 · 모서리 12 · 받침 3px.
               누를 수 없는 것 = 모서리 16 · 1px 테 · 받침 없음. */
  --btn-h: 40px; --btn-h-sm: 32px; --btn-px: 16px; --btn-r: var(--s-radius-control);
  --btn-primary-bg: var(--s-accent); --btn-primary-bg-hover: var(--s-accent-hover);
  --btn-primary-fg: var(--p-white);  --btn-primary-ledge: var(--s-accent-ledge);
  --btn-secondary-bg: var(--s-surface); --btn-secondary-bg-hover: var(--s-canvas);
  --btn-secondary-fg: var(--s-accent);  --btn-secondary-border: var(--s-border);
  --btn-secondary-ledge: var(--s-border-strong);
  --btn-disabled-bg: var(--s-border); --btn-disabled-fg: var(--s-text-muted);
  --input-h: 40px; --input-r: var(--s-radius-control); --input-border: var(--s-border);
  --input-border-hover: var(--s-border-strong); --input-border-focus: var(--s-accent);
  --input-bg: var(--s-surface); --input-bg-disabled: var(--s-surface-sunk);
  --tab-h: 32px; --tab-r: var(--s-radius-control);
  --tab-active-bg: var(--s-accent-soft); --tab-active-fg: var(--s-accent);
  --badge-h: 22px; --badge-r: var(--s-radius-tag);
  --card-r: var(--s-radius-container); --card-border: var(--s-border);
  --table-r: var(--s-radius-container); --table-head-bg: var(--s-surface-sunk); --table-row-h: 40px;
  --modal-r: var(--s-radius-container); --modal-shadow: 0 12px 32px rgba(34,30,25,.10); /* 잉크색으로 물든 그림자 [redesign: tinted shadow] */
}

/* ============================================================
   기반: 서체·바탕 (전 화면)
   ============================================================ */
body, body * { font-family: var(--p-font-r) !important; letter-spacing: 0 !important; }
body:not(#_) b, body:not(#_) strong, body:not(#_) label, body:not(#_) summary, body:not(#_) th {
  font-family: var(--p-font-b) !important; font-weight: 400 !important;
}
/* style.css:3886 body.ds3 h1{…!important} 보다 우선하도록 :not(#_) 로 특이도 상향 */
body:not(#_) h1, body:not(#_) h2, body:not(#_) h3, body:not(#_) .result-hero-title,
body:not(#_) .dz-card > div:nth-child(3), body:not(#_) .result-download-label, body:not(#_) .result-fold-label,
body:not(#_) .rsc-accuracy-num, body:not(#_) .sidebar-brand, body:not(#_) .sidebar-brand *, body:not(#_) .who-name {
  font-family: var(--p-font-eb) !important; font-weight: 400 !important; letter-spacing: -0.01em !important; /* [apple-design 15] 큰 글자 음수 자간 */
}
.rsc-accuracy-num, .slot .num, td, .num { font-variant-numeric: tabular-nums; }   /* [redesign] 숫자 표 정렬 */
/* ★SV-42bc 숫자 고정폭 — 표 머리·배지·통계·금액·날짜 알약까지 */
body:not(#_) :is(th, [class*=badge], [class*=stat], [class*=count], [class*=amount], [class*=won], [class*=kpi], .pill, .chip, .dz-chip) { font-variant-numeric: tabular-nums; }
body { background: var(--s-canvas) !important; color: var(--s-text); }
main, .app-shell, .app-shell > div, .site-footer-inner { background: var(--s-canvas) !important; }
*, *::before, *::after { text-shadow: none !important; }

/* ============================================================
   ③-1 버튼 (button · .btn · .vf-btn · .merge-btn · 다운로드 링크)
   ============================================================ */
.vf-btn, .btn, .merge-btn, .result-download, .duo-btn {
  min-height: var(--btn-h) !important; padding: 0 var(--btn-px) !important; border-radius: var(--btn-r) !important;
  font-family: var(--p-font-eb) !important; transition: var(--s-press) !important;
}
.vf-btn--primary, .btn.primary, .btn-primary, .merge-btn:not(.ghost), #dlActionsheet, .duo-btn--primary {
  background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border: 0 !important;
  box-shadow: 0 var(--p-ledge) 0 var(--btn-primary-ledge) !important;
}
.vf-btn--secondary, .btn.ghost, .btn-ghost, .btn:not(.primary):not(.btn-primary), .merge-btn.ghost, .result-download:not(#dlActionsheet), .duo-btn--secondary {
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important; box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important;
}
@media (hover: hover) {   /* [emil-design-eng] 터치 기기 hover 오작동 차단 */
  .vf-btn--primary:hover, .btn-primary:hover, .merge-btn:not(.ghost):not(:disabled):hover, #dlActionsheet:hover, .duo-btn--primary.is-hover { background: var(--btn-primary-bg-hover) !important; }
  .merge-btn.ghost:hover, .result-download:not(#dlActionsheet):hover, .btn.ghost:hover, .duo-btn--secondary.is-hover { background: var(--btn-secondary-bg-hover) !important; }
}
.duo-btn--primary.is-hover { background: var(--btn-primary-bg-hover) !important; }
.duo-btn--secondary.is-hover { background: var(--btn-secondary-bg-hover) !important; }
/* pressed: 받침만큼 내려앉음 [Duolingo r8 · apple-design 1 pointer-down 즉시] */
.vf-btn:active, .btn:active, .merge-btn:not(:disabled):active, .result-download:active, .duo-btn.is-pressed {
  transform: translateY(var(--p-ledge)) !important; box-shadow: 0 0 0 transparent !important;
}
/* disabled: 받침 없음 = 누를 수 없음이 모양으로 보인다 [apple-design 16 familiarity] */
.vf-btn:disabled, .btn:disabled, .merge-btn:disabled, .result-download[aria-disabled="true"]:not(#dlActionsheet), .result-download.disabled, .duo-btn.is-disabled {
  background: var(--btn-disabled-bg) !important; color: var(--btn-disabled-fg) !important; border-color: transparent !important;
  box-shadow: none !important; transform: none !important; opacity: 1 !important; cursor: not-allowed;
}
.vf-btn:focus-visible, .btn:focus-visible, .merge-btn:focus-visible, .result-download:focus-visible, .duo-btn.is-focus {
  outline: 3px solid var(--s-focus) !important; outline-offset: 2px;
}
.btn.small, .vf-btn--sm { min-height: var(--btn-h-sm) !important; }
.merge-mode-sub { opacity: .85; font-family: var(--p-font-r) !important; }

/* ============================================================
   ③-2 입력 (input · select · textarea)
   ============================================================ */
.vf-input, .vf-select, .vf-textarea, .merge-controls input[type=text], .duo-input {
  min-height: var(--input-h); background: var(--input-bg) !important; color: var(--s-text) !important;
  box-sizing: border-box !important;
  border: 1.5px solid var(--input-border) !important; border-radius: var(--input-r) !important; box-shadow: none !important;
  transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
.vf-input:hover, .vf-select:hover, .vf-textarea:hover, .duo-input.is-hover { border-color: var(--input-border-hover) !important; }
.vf-input:focus, .vf-select:focus, .vf-textarea:focus, .duo-input.is-focus {
  border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--s-accent-soft) !important; outline: none !important;
}
.vf-input:disabled, .vf-select:disabled, .duo-input.is-disabled { background: var(--input-bg-disabled) !important; color: var(--s-text-muted) !important; }
.vf-input::placeholder, .vf-textarea::placeholder { color: var(--s-text-muted) !important; }

.vf-input, .vf-select, .merge-controls input[type=text], .duo-input { height: var(--input-h) !important; padding-top: 0 !important; padding-bottom: 0 !important; }

/* ============================================================
   ③-3 탭 (.tabbar-item · 사이드바 메뉴도 같은 규칙)
   ============================================================ */
.tabbar-item, .sidebar-nav a, .duo-tab {
  border-radius: var(--tab-r) !important; border: 0 !important; color: var(--s-text-sub) !important;
  font-family: var(--p-font-b) !important; transition: background-color 150ms ease !important;
}
.tabbar-item:hover, .sidebar-nav a:hover, .duo-tab.is-hover { background: var(--s-surface-sunk) !important; }
.tabbar-item.active, .tabbar-item[aria-selected="true"], .sidebar-nav a.active, .duo-tab.is-active {
  background: var(--tab-active-bg) !important; color: var(--tab-active-fg) !important;
  box-shadow: inset 0 0 0 1.5px var(--s-accent-line) !important;
}
.sidebar-nav a.active::before, .sidebar-nav a.active::after { display: none !important; }
.duo-tab.is-pressed { background: var(--s-border) !important; }
.duo-tab.is-disabled { color: var(--s-border-strong) !important; background: transparent !important; }

/* ============================================================
   ③-4 뱃지 (.badge · .pill)
   ============================================================ */
.badge, .pill, .duo-badge {
  height: var(--badge-h) !important; box-sizing: border-box !important; display: inline-flex !important; align-items: center; line-height: 1 !important;
  border-radius: var(--badge-r) !important; border: 0 !important; box-shadow: none !important;
  font-family: var(--p-font-b) !important; padding: 2px 8px !important;
  background: var(--s-surface-sunk) !important; color: var(--s-text-sub) !important;
}
.badge::before { display: none !important; }    /* 장식 점 제거 [design-taste 9.F] */
.badge.done, .duo-badge--ok   { background: var(--s-success-soft) !important; color: var(--s-success) !important; }
.badge.failed, .duo-badge--danger { background: var(--s-danger-soft) !important; color: var(--s-danger) !important; }
.badge.warn, .duo-badge--warn { background: var(--s-warn-soft) !important; color: var(--s-warn) !important; }
.pill, .duo-badge--accent { background: var(--s-accent-soft) !important; color: var(--s-accent) !important; }

/* ============================================================
   ③-5 표 (table · .table · .progress-table)
   ============================================================ */
.table-scroll, .duo-table-wrap { border: 1px solid var(--card-border) !important; border-radius: var(--table-r) !important; overflow: hidden; background: var(--s-surface); }
table th, .duo-table th { background: var(--table-head-bg) !important; color: var(--s-text-sub) !important; font-family: var(--p-font-b) !important; }
table th, table td, .duo-table th, .duo-table td { height: var(--table-row-h); border-bottom: 1px solid var(--s-border) !important; }
table tr:last-child td { border-bottom: 0 !important; }

/* ============================================================
   ③-6 모달 (dialog.vd-sheet)
   ============================================================ */
dialog.vd-sheet, .duo-modal {
  border: 1px solid var(--card-border) !important; border-radius: var(--modal-r) !important; box-shadow: var(--modal-shadow) !important;
  background: var(--s-surface) !important;
}
dialog.vd-sheet::backdrop { background: rgba(34,30,25,.32); backdrop-filter: none; }

/* ============================================================
   ③-7 컨테이너 (누를 수 없는 카드) · 누를 수 있는 카드
   ============================================================ */
section.upload, .result-hero-compact, .result-summary-compact, .merge-head, .conv-guide, .duo-card {
  background: var(--s-surface) !important; border: 1px solid var(--card-border) !important;
  border-radius: var(--card-r) !important; box-shadow: none !important;
}
/* 누를 수 있는 카드 = 버튼 규칙 그대로 (받침 3px · 눌림 3px) */
.dz-card, .result-fold, .duo-card--press {
  background: var(--s-surface) !important; border: 1.5px solid var(--card-border) !important;
  border-radius: var(--card-r) !important; box-shadow: 0 var(--p-ledge) 0 var(--s-border-strong) !important;
  transition: var(--s-press) !important;
}
.dz-card:hover, .result-fold > summary:hover { background: var(--s-canvas) !important; }
.dz-card:active, .result-fold > summary:active { transform: translateY(var(--p-ledge)) !important; box-shadow: none !important; }
.result-fold > summary { border-radius: var(--card-r) !important; }

/* 드롭존 = 비어 있는 자리. 점선 1.5px · 모서리 16 (컨테이너) */
.dropzone, .merge-drop, .pool {
  border: 1.5px dashed var(--s-accent-line) !important; border-radius: var(--card-r) !important;
  background: var(--s-surface) !important; box-shadow: none !important;
}
.dropzone:hover, .merge-drop:hover { background: var(--s-accent-soft) !important; }

@media (prefers-reduced-motion: reduce) {   /* [apple-design 14] 움직임 대신 색만 */
  .vf-btn, .btn, .merge-btn, .result-download, .dz-card, .result-fold { transition: background-color 150ms ease !important; }
  .vf-btn:active, .btn:active, .merge-btn:active, .result-download:active, .dz-card:active { transform: none !important; }
}

/* ============================================================
   셸 (사이드바·벨·푸터) — 전 화면 공통
   ============================================================ */
.sidebar { background: var(--s-surface) !important; border-right: 1px solid var(--s-border) !important; box-shadow: none !important; }
.sidebar-brand .brand-mark { background: var(--s-accent) !important; border-radius: var(--p-r-8) !important; color: #fff !important; box-shadow: none !important; }
.sidebar-user { background: var(--s-surface) !important; border: 1px solid var(--s-border) !important; border-radius: var(--card-r) !important; box-shadow: none !important; }
.sidebar-user .avatar { background: var(--s-accent) !important; border-radius: var(--p-r-12) !important; box-shadow: none !important; }
.sidebar-cmd-hint { border: 1.5px solid var(--input-border) !important; border-radius: var(--input-r) !important; background: var(--s-surface) !important; box-shadow: none !important; }
.sidebar-cmd-hint .kbd { border: 1px solid var(--s-border) !important; border-radius: 6px !important; background: var(--s-canvas) !important; }
.sidebar-section-label { color: var(--s-text-muted) !important; font-family: var(--p-font-b) !important; }
.sidebar-nav a .ic { stroke-width: 2.2 !important; }
.nv-bell { background: var(--s-surface) !important; border: 1.5px solid var(--btn-secondary-border) !important; border-radius: var(--btn-r) !important; box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important; }
.site-footer { border-top: 1px solid var(--s-border) !important; background: var(--s-canvas) !important; }

/* ============================================================
   화면별 보정 (전부 위 부품 토큰만 사용)
   ============================================================ */
/* 홈 — 히어로 단색화(글로·격자 제거), 아이콘 타일 색 1개로 통일 [minimalist-ui 4 색은 희소하게] */
.dz-hero { background: var(--p-char-800) !important; border-radius: var(--card-r) !important; box-shadow: none !important; }
.dz-hero::before, .dz-hero::after { display: none !important; content: none !important; }
.dz-hero img { filter: brightness(0) invert(1) !important; }
.dz-chip, .fold-hero > summary { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(255,255,255,.16) !important; border-radius: var(--btn-r) !important; box-shadow: none !important; backdrop-filter: none !important; }
.dz h2 { font-size: 15px !important; }
.dz-bar { display: none !important; }
.dz-ic { border-radius: var(--p-r-12) !important; background: var(--s-accent-soft) !important; color: var(--s-accent) !important; }
.dz-go { color: var(--s-text-muted) !important; }

/* 업로드 */
.fold-note > summary { border: 1.5px solid var(--btn-secondary-border) !important; border-radius: var(--btn-r) !important; background: var(--s-surface) !important; color: var(--s-text-sub) !important; box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important; }
.help-tip { background: var(--s-accent-soft) !important; border: 0 !important; border-radius: var(--btn-r) !important; box-shadow: none !important; }
.help-tip > summary { color: var(--s-accent) !important; }
.dropzone .dropzone-big { color: var(--s-accent) !important; font-family: var(--p-font-eb) !important; }
.dropzone .dropzone-big::before {
  content: ""; display: inline-block; width: 16px; height: 16px; margin-right: 6px; vertical-align: -2px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2317538F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 16V4'/%3E%3Cpath d='m6 10 6-6 6 6'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E") no-repeat center/contain;
}

/* 결과 */
.progress-bar { height: 10px !important; border-radius: var(--p-r-8) !important; background: var(--s-border) !important; overflow: hidden; }
.progress-fill { background: var(--s-success) !important; background-image: none !important; border-radius: var(--p-r-8) !important; box-shadow: none !important; }
.progress-fill::after, .progress-fill::before { display: none !important; }
.rsc-accuracy-num { color: var(--s-text) !important; }
.rsc-wrong-list { color: var(--s-danger) !important; font-family: var(--p-font-b) !important; }
.result-download-icon { background: var(--s-accent-soft) !important; color: var(--s-accent) !important; border-radius: var(--p-r-8) !important; box-shadow: none !important; }
#dlActionsheet .result-download-icon { background: rgba(255,255,255,.16) !important; color: #fff !important; }
#dlActionsheet .result-download-label { color: #fff !important; }
.result-fold-chev { color: var(--s-text-muted) !important; }
#findingCount { color: var(--s-danger) !important; }

/* 합본 — 안내 상자는 색을 빼고 바탕만 한 단 낮춤 */
.conv-guide { background: var(--s-surface-sunk) !important; }
.conv-title, .pool-label { font-family: var(--p-font-b) !important; color: var(--s-text) !important; }
.merge-drop { color: var(--s-accent) !important; font-family: var(--p-font-b) !important; }
.slot-grid .slot { border: 1.5px dashed var(--s-border-strong) !important; border-radius: var(--btn-r) !important; background: var(--s-surface) !important; box-shadow: none !important; }
.slot-grid .slot .num { border-radius: var(--p-r-8) !important; font-family: var(--p-font-b) !important; font-style: normal !important; box-shadow: none !important; }
.slot-grid .slot.empty .num { background: var(--s-surface-sunk) !important; color: var(--s-text-sub) !important; }
.slot-grid .slot.filled { border-style: solid !important; border-color: var(--s-accent-line) !important; }
.slot-grid .slot.filled .num { background: var(--s-accent) !important; color: #fff !important; }
.opt-label, .opt-field > span { font-family: var(--p-font-b) !important; }

/* ============================================================
   SV-1089 사이트 전역 확장 — 시안 4화면 밖의 전 화면을 부품 시트 규칙으로 확장
   (위 SV-eddf 본문은 그대로. 아래는 같은 토큰만 쓰는 덧붙임.)
   규칙 1개 재확인: 누를 수 있는 것 = 높이 40(작게 32) · 모서리 12 · 받침 3px
                    누를 수 없는 것 = 모서리 16 · 1px 테 · 받침 없음 · 그림자 없음
   ============================================================ */

/* E-0 기존 토큰 재매핑 — style.css 의 ds3(v3)·레거시 토큰을 듀오 값으로.
   마크업을 안 바꾸고 전 화면의 치수·색·서체가 한 번에 따라온다.
   :root:root / body.ds3:not(#_) 로 특이도를 올려 style.css :root · body.ds3 선언을 이긴다. */
:root:root, body.ds3:not(#_) {
  --font-text: var(--p-font-r); --font-sans: var(--p-font-r); --font-display: var(--p-font-eb);
  /* 글자 크기 5단계: 20 / 15 / 14 / 12 (+히어로는 화면별) · 줄 높이 28 / 22 / 22 / 18 */
  --fs-page: 20px; --fs-section: 15px; --fs-body: 14px; --fs-small: 12px;
  --lh-page: 28px; --lh-section: 22px; --lh-body: 22px; --lh-small: 18px;
  --surface: var(--p-white); --surface-sunken: var(--p-ink-100);
  --line: var(--p-ink-200); --line-strong: var(--p-ink-300);
  --ink: var(--p-ink-900); --ink-2: var(--p-ink-700);
  --accent: var(--p-navy-600); --accent-hover: var(--p-navy-700); --accent-soft: var(--p-navy-100);
  --focus-ring: var(--p-navy-300);
  --danger: var(--p-red-600); --ok: var(--p-green-600); --warn: var(--p-amber-600);
  --bg: var(--p-paper);
  --radius-control: var(--p-r-12); --radius-box: var(--p-r-16);
  --control-h: var(--btn-h); --control-h-sm: var(--btn-h-sm); --row-h: var(--table-row-h);
  /* 간격: 4·8·12·16·24 (기존 --space-N 그대로) · 카드 안쪽 16 · 카드 안 간격 12 */
  --card-pad: 16px; --card-gap: 12px;
  /* 그라데이션·글로 토큰 단색화 [금지: 그라데이션·글로] */
  --grad-primary: var(--p-navy-600); --grad-success: var(--p-green-600);
  --grad-warn: var(--p-amber-600); --grad-hero-text: var(--p-ink-900);
  --shadow-glow: 0 0 0 3px var(--p-navy-300);
}
html:has(> body.ds3) { --bg: var(--p-paper) !important; }   /* style.css:3882 #f6f7f9 → 종이색 */
body:not(#_) :is(code, pre, kbd, samp) { font-family: var(--font-mono), monospace !important; }  /* 코드만 고정폭 유지 */

/* E-1 글자 — 전 기능 화면 같은 크기 단계 (자간 0 · 제목만 -0.01em, 본문 줄높이 1.6) */
body.ds3:not(#_) { font-size: var(--fs-body); line-height: 1.6; }
body.ds3:not(#_) main h1 { font-size: var(--fs-page) !important; line-height: var(--lh-page) !important; }
body.ds3:not(#_) main h2 { font-size: var(--fs-section) !important; line-height: var(--lh-section) !important; }
body.ds3:not(#_) main :is(h3, h4) { font-size: var(--fs-body) !important; line-height: var(--lh-body) !important; }
body.ds3:not(#_) main :is(small, .muted, .t-small) { font-size: var(--fs-small); line-height: var(--lh-small); }

/* E-2 버튼 — 시안 밖 버튼 이름표들도 같은 모양 (style.css:3909 ds3 목록 + 나머지) */
:is(button.primary, button.ghost, .btn-ghost, .btn-danger, .er-btn, .rv-btn, .wb-btn, .btn-issue-finding, .tk-bday-btn,
    .kakao-btn, .tm-save, .u-phone-save, [class^="submit-"], .tkd-cta, .vw-pill-btn),
body:not(#_) main button:not([class]) {
  min-height: var(--btn-h) !important; padding: 0 var(--btn-px) !important; border-radius: var(--btn-r) !important;
  font-family: var(--p-font-eb) !important; font-size: 14px !important; transition: var(--s-press) !important;
}
:is(button.primary, [class^="submit-"], .tkd-cta) {
  background: var(--btn-primary-bg) !important; color: var(--btn-primary-fg) !important; border: 0 !important;
  box-shadow: 0 var(--p-ledge) 0 var(--btn-primary-ledge) !important;
}
:is(button.ghost, .btn-ghost, .er-btn, .rv-btn, .wb-btn, .btn-issue-finding, .tk-bday-btn, .tm-save, .u-phone-save, .vw-pill-btn),
body:not(#_) main button:not([class]) {
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important; box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important;
}
/* 위험(삭제 등) = 주 버튼 모양 · 빨강 바탕 · 받침은 한 단 진한 빨강 */
body:not(#_) :is(.btn-danger, .btn.danger):not(:disabled) {
  background: var(--s-danger) !important; color: var(--p-white) !important; border: 0 !important;
  box-shadow: 0 var(--p-ledge) 0 var(--p-red-800) !important;
}
@media (hover: hover) { body:not(#_) :is(.btn-danger, .btn.danger):hover:not(:disabled) { background: color-mix(in srgb, var(--p-red-600) 89%, black) !important; } }
body:not(#_) button.warn { color: var(--s-danger) !important; }
body:not(#_) :is(.btn-danger, .btn.danger):active:not(:disabled) { transform: translateY(var(--p-ledge)) !important; box-shadow: 0 0 0 transparent !important; }
.vf-btn, .btn { font-size: 14px !important; }
@media (hover: hover) {
  :is(button.primary, .btn.primary, [class^="submit-"], .tkd-cta):hover:not(:disabled) { background: var(--btn-primary-bg-hover) !important; }
  :is(button.ghost, .btn:not(.primary):not(.btn-primary):not(.btn-danger), .er-btn, .rv-btn, .wb-btn, .btn-issue-finding, .tk-bday-btn, .tm-save, .u-phone-save, .vw-pill-btn, .vf-btn--secondary):hover:not(:disabled),
  body:not(#_) main button:not([class]):hover:not(:disabled) { background: var(--btn-secondary-bg-hover) !important; }
}
:is(button.primary, button.ghost, .btn-ghost, .btn-danger, .er-btn, .rv-btn, .wb-btn, .btn-issue-finding, .tk-bday-btn, .kakao-btn,
    .tm-save, .u-phone-save, [class^="submit-"], .tkd-cta, .vw-pill-btn, .toast-action):active:not(:disabled),
body:not(#_) main button:not([class]):active:not(:disabled),
body:not(#_) :is(.btn, .vf-btn):active:not(:disabled) {
  transform: translateY(var(--p-ledge)) !important; box-shadow: 0 0 0 transparent !important;
}
:is(button.primary, button.ghost, .btn-ghost, .btn-danger, .er-btn, .rv-btn, .wb-btn, .btn-issue-finding, .tk-bday-btn,
    .tm-save, .u-phone-save, [class^="submit-"], .tkd-cta, .vw-pill-btn, .toast-action):disabled,
body:not(#_) main button:not([class]):disabled, body:not(#_) :is(.btn, .vf-btn)[disabled] {
  background: var(--btn-disabled-bg) !important; color: var(--btn-disabled-fg) !important; border-color: transparent !important;
  box-shadow: none !important; transform: none !important; opacity: 1 !important; cursor: not-allowed;
}
body:not(#_) :is(button, .btn, .vf-btn, a.btn):focus-visible { outline: 3px solid var(--s-focus) !important; outline-offset: 2px; box-shadow: none; }
body:not(#_) :is(.btn-sm, .btn.small, .vf-btn--sm, table .btn, table button.primary, table button.ghost, .toast-action) {
  min-height: var(--btn-h-sm) !important; padding: 0 12px !important; font-size: 13px !important;
}
body:not(#_) .vf-btn--lg { min-height: var(--btn-h) !important; }
@media (prefers-reduced-motion: reduce) {
  body:not(#_) :is(button, .btn, .vf-btn):active { transform: none !important; }
}

/* E-3 입력 — 이름표 없는 input/select/textarea 196개까지 같은 칸 (40 · 모서리 12 · 1.5px 테) */
/* :where() 로 특이도를 (1,0,1)에 묶는다 — 아래 hover·focus·disabled 규칙이 이겨야 하므로 */
body:not(#_) :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=image]), select, textarea, .input) {
  background-color: var(--input-bg) !important; color: var(--s-text) !important;
  border: 1.5px solid var(--input-border) !important; border-radius: var(--input-r) !important; box-shadow: none !important;
  font-size: 14px !important; transition: border-color 150ms ease, box-shadow 150ms ease !important;
}
body:not(#_) main :where(input:not([type=checkbox]):not([type=radio]):not([type=file]):not([type=range]):not([type=color]):not([type=hidden]):not([type=submit]):not([type=button]):not([type=image]), select):not(td *) {
  min-height: var(--input-h) !important;
}
body:not(#_) main td :is(input, select) { min-height: var(--btn-h-sm) !important; }
body:not(#_) :is(input, select, textarea, .input):hover:not(:disabled):not(:focus):not([type=checkbox]):not([type=radio]) { border-color: var(--input-border-hover) !important; }
body:not(#_) :is(input, select, textarea, .input):focus:not([type=checkbox]):not([type=radio]) {
  border-color: var(--input-border-focus) !important; box-shadow: 0 0 0 3px var(--s-accent-soft) !important; outline: none !important;
}
body:not(#_) :is(input, select, textarea, .input):disabled:not([type=checkbox]):not([type=radio]) { background-color: var(--input-bg-disabled) !important; color: var(--s-text-muted) !important; }
body:not(#_) ::placeholder { color: var(--s-text-muted) !important; opacity: 1; }
body:not(#_) :is(input[type=checkbox], input[type=radio]) { accent-color: var(--s-accent); }

/* E-4 카드(누를 수 없는 그릇) — 모서리 16 · 1px 테 · 그림자 없음 · 떠오르기 없음 */
body:not(#_) :is(.card, .admin-card, .mx-card, .sm-card, .st-card, .wb-card, .tm-card, .rr-card, .exam-card, .tl-card,
    .guide-step-card, .error-card, .panel, .hitl-card, .finding-card, .tk-panel, .tkd-panel, .nv-panel, .dz-panel, .tk-card, .vw-card, .empty-state) {
  background: var(--s-surface) !important; border: 1px solid var(--card-border) !important;
  border-radius: var(--card-r) !important; box-shadow: none !important;
}
body:not(#_) :is(.card, .exam-card, .tk-card, .vw-card):hover { transform: none !important; box-shadow: none !important; }
body:not(#_) .card::after, body:not(#_) .card::before { background-image: none !important; box-shadow: none !important; }
body:not(#_) :is(.card-icon, .error-icon, .result-hitl-icon, .vw-card-icon, .empty-state-icon) {
  border-radius: var(--p-r-12) !important; box-shadow: none !important; background-image: none !important;
}
body.ds3:not(#_) .page-head { margin-bottom: 16px; }

/* E-5 뱃지·칩(작은 이름표) — 높이 22 · 모서리 8 · 12px 굵게 */
body:not(#_) :is(.badge, .pill, .er-chip, .tk-chip, .tm-chip, .rv-chip, .wb-chip, .chip, .tag, .wb-tag, .st-badge, .sn-badge,
    .verify-badge, .tk-note-badge, .flow-pill, .dz-pill, .tk-due-pill) {
  min-height: var(--badge-h); box-sizing: border-box; display: inline-flex; align-items: center; line-height: 1 !important;
  border-radius: var(--badge-r) !important; box-shadow: none !important; padding: 2px 8px !important;
  font-family: var(--p-font-b) !important; font-size: 12px !important; background-image: none !important;
}
body:not(#_) .badge:is(.solving, .auditing, .explaining, .preparing), body:not(#_) .badge-accent { background: var(--s-accent-soft) !important; color: var(--s-accent) !important; }
body:not(#_) .badge:is(.conf-high_ok, .ok), body:not(#_) .badge-ok { background: var(--s-success-soft) !important; color: var(--s-success) !important; }
body:not(#_) .badge:is(.sev-high, .conf-low_ok), body:not(#_) .badge-danger { background: var(--s-danger-soft) !important; color: var(--s-danger) !important; }
body:not(#_) .badge:is(.waiting_hitl, .sev-med, .sev-medium, .conf-med_ok), body:not(#_) .badge-warn { background: var(--s-warn-soft) !important; color: var(--s-warn) !important; }
body:not(#_) :is(.badge, .badge-ok, .badge-warn, .badge-danger, .badge-accent)::before,
body:not(#_) .badge:is(.solving, .auditing, .explaining, .preparing)::after { display: none !important; }   /* 반짝임 덮개 제거 */

/* E-6 탭 — role=tab · 안내 영상 탭 · 높이 32 · 모서리 12 · 선택 = 연한 남색 + 1.5px 안쪽 테 */
body:not(#_) :is([role="tab"], .guide-tabs > button, .guide-tabs > a) {
  min-height: var(--tab-h); border-radius: var(--tab-r) !important; border: 0 !important; box-shadow: none;
  font-family: var(--p-font-b) !important; color: var(--s-text-sub) !important; background: transparent;
  transition: background-color 150ms ease !important;
}
body:not(#_) :is([role="tab"], .guide-tabs > button, .guide-tabs > a):hover { background: var(--s-surface-sunk) !important; }
body:not(#_) :is([role="tab"][aria-selected="true"], .guide-tabs > .active, .guide-tabs > .on, .guide-tabs > [aria-selected="true"]) {
  background: var(--tab-active-bg) !important; color: var(--tab-active-fg) !important; box-shadow: inset 0 0 0 1.5px var(--s-accent-line) !important;
}
body:not(#_) .sidebar-nav a { font-size: 14px !important; }
body:not(#_) .sidebar-nav a .ic { width: 18px !important; height: 18px !important; }

/* E-7 표 — 머리행 12px 굵게 · 본문 14px · 행 40 · 1px 줄 · 그릇은 모서리 16(가로 스크롤 유지) */
body:not(#_) :is(.table-wrap, .st-tablewrap) { border: 1px solid var(--card-border) !important; border-radius: var(--table-r) !important; background: var(--s-surface); }
body:not(#_) table th { font-size: 12px !important; }
body:not(#_) table td { font-size: 14px; }

/* E-8 모달 — 모서리 16 · 1px 테 · 잉크 물든 그림자 · 딤 32% */
body:not(#_) :is(.modal, .er-modal-box, .rv-modal-box) {
  border: 1px solid var(--card-border) !important; border-radius: var(--modal-r) !important; box-shadow: var(--modal-shadow) !important;
  background: var(--s-surface) !important;
}
.modal::backdrop { background: rgba(34,30,25,.32) !important; backdrop-filter: none; }
body:not(#_) :is(.modal-head h2, .er-modal-h, .rv-modal-h) { font-family: var(--p-font-eb) !important; font-size: var(--fs-section) !important; }

/* E-9 토스트 — 그릇(모서리 16 · 1px 테 · 그림자 1단) · 상태는 연한 바탕색으로 · 장식 점 제거 */
.toast-region { width: min(360px, calc(100vw - 32px)); }
body:not(#_) :is(.toast, .bb-toast) {
  min-height: 48px !important; padding: 8px 8px 8px 16px !important; border-radius: var(--s-radius-container) !important;
  background: var(--s-surface) !important; color: var(--s-text) !important; border: 1px solid var(--s-border) !important;
  box-shadow: var(--modal-shadow) !important; font-family: var(--p-font-b) !important; font-size: 14px !important;
}
body:not(#_) :is(.toast-ok, .bb-toast-success) { background: var(--s-success-soft) !important; color: var(--p-green-800) !important; border-color: transparent !important; }
body:not(#_) :is(.toast-warn, .bb-toast-warn) { background: var(--s-warn-soft) !important; color: var(--s-text) !important; border-color: transparent !important; }
body:not(#_) :is(.toast-danger, .bb-toast-error) { background: var(--s-danger-soft) !important; color: var(--p-red-800) !important; border-color: transparent !important; }
body:not(#_) :is(.toast, .bb-toast)::before { display: none !important; }
body:not(#_) .toast-action {
  font-family: var(--p-font-eb) !important; border-radius: var(--btn-r) !important; background: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-fg) !important; border: 1.5px solid var(--btn-secondary-border) !important;
  box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important; transition: var(--s-press) !important;
}

/* E-10 아이콘 — 선 2.2 통일 · 버튼 안 16 · 메뉴 18 */
body:not(#_) svg.ic { stroke-width: 2.2; }
body:not(#_) :is(button, .btn, .vf-btn) svg { width: 16px; height: 16px; flex: none; }

/* E-11 그라데이션·글로 제거 (시안 밖 화면) */
.dz-meterbar > div { background: var(--s-accent) !important; }
.progress-fill.is-failed { background: var(--s-danger) !important; background-image: none !important; }
.hero-title .gradient-text { background: none !important; -webkit-text-fill-color: currentColor !important; color: var(--s-text) !important; }
.grid-overlay, .mesh-orb { display: none !important; }
/* 로그인 쇼케이스: 방사·선형 그라데이션 → 단색 + 단색 덮개(글자 대비 유지) */
.showcase { background: var(--p-char-900) !important; }
.showcase > div[style*="gradient"] { background: rgba(13,22,32,.55) !important; }

/* ============================================================
   SV-1089 AMEND #2·#3 — 레이아웃(골격·화면 배치) · 컴팩트 원칙
   요소 추가 0. 있는 요소의 자리·묶음·밀도만 다듬는다. 기능·라우트·문구 무변경.
   ============================================================ */

/* L-1 셸 골격 (PC ≥961px — 폰은 기존 드로어·탭바 그대로) */
@media (min-width: 961px) {
  :root:root { --sidebar-w: 232px; }
  /* 사이드바: 로고(+벨) → 빠른 검색 → 메뉴 → 내 계정(맨 아래). 계정 카드가 메뉴 위를 막던 것을 아래로. */
  .sidebar { padding: 0 12px 12px !important; gap: 4px !important; background: var(--s-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; }
  .sidebar-brand { order: 0; position: sticky; top: 0; z-index: 2; background: var(--s-surface); min-height: 64px; box-sizing: border-box; padding: 0 8px !important; margin: 0 !important; font-size: 18px !important; }
  .sidebar-cmd-hint { order: 1; min-height: 40px; box-sizing: border-box; margin-bottom: 4px; }
  .sidebar-section { order: 2; margin-top: 12px !important; }
  .sidebar-section-label { padding: 0 12px 4px !important; font-size: 11px !important; text-transform: none !important; }
  .sidebar-nav { display: grid; gap: 2px; }
  body:not(#_) .sidebar-nav a { min-height: 36px; box-sizing: border-box; padding: 0 12px !important; display: flex; align-items: center; gap: 10px; }
  /* ★SV-0f4e(게이트 F1): sticky 하단 고정은 짧은 창에서 메뉴를 덮었다(관리자 1440x900 「버그 제보 관리」 안 보임).
     고정을 빼고 메뉴 뒤에 흐르게 한다 — 메뉴가 짧으면 margin-top:auto 로 바닥에 붙고, 길면 메뉴 다음에 이어져 스크롤로 닿는다(겹침 0). */
  .sidebar-user { order: 3; margin: auto 0 0 !important; padding: 8px !important; gap: 10px !important; }
  .sidebar-bottom { order: 4; background: var(--s-surface); min-height: 44px; box-sizing: border-box; justify-content: center; padding-top: 4px !important; margin-top: 4px !important; border-top: 0 !important; }   /* 계정 카드 바로 밑 = 모드 전환·로그아웃 */
  .sidebar-user .avatar { width: 32px !important; height: 32px !important; font-size: 14px !important; }
  /* 알림 벨: 본문 우상단에 떠서 화면마다 액션을 덮던 것 → 사이드바 로고 줄 오른쪽 끝(고정 자리) */
  .nv-bell-wrap { top: 12px !important; left: calc(var(--sidebar-w) - 13px - 40px) !important; right: auto !important; }   /* ★SV-42bc 사이드바 오른쪽 테 1px 감안 → 벨 오른끝 = 빠른 검색 오른끝 */
  .nv-panel { left: 0 !important; right: auto !important; }
  /* 본문: 벨 자리 비우던 상단 56px 회수 · 읽기 폭 1120 가운데 정렬 */
  body:not(#_) .app-shell main { max-width: 1120px; margin: 0 auto; padding: 32px 40px 40px !important; box-sizing: border-box; }
  /* 푸터: 큰 빈 띠 → 본문 폭 한 줄 */
  body:not(#_) .site-footer { margin-top: 0 !important; padding: 12px 40px 16px !important; }
  body:not(#_) .site-footer-inner { max-width: 1040px; justify-content: flex-start; font-size: 12px; }
}

/* L-2 화면 머리 패턴: 제목 → 설명 → 본문 간격 고정(4 / 16) */
body.ds3:not(#_) main h1 { margin-top: 0; margin-bottom: 4px; }
body.ds3:not(#_) main h1 + p.muted, body.ds3:not(#_) main h1 + p { margin-top: 0; margin-bottom: 16px; }
body.ds3:not(#_) main > .card + .card, body.ds3:not(#_) main > section + section { margin-top: 16px; }

/* L-3 홈(대시보드) — 차콜 띠 낮게(날짜·인사 한 줄), 바로가기 카드 가로형(아이콘·제목·설명·화살표 한 줄) */
.dz-hero { padding: 20px 24px !important; }
.dz-hero > div[style] { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dz-hero .fold-hero[open] { flex-basis: 100%; }
.dz-hero img { top: 50% !important; transform: translateY(-50%); }
body:not(#_) .dz-card { display: grid !important; grid-template-columns: auto minmax(0,1fr) auto; align-items: center; column-gap: 12px; padding: 14px 16px !important; }
body:not(#_) .dz-card > div:first-of-type + div { display: contents !important; }
body:not(#_) .dz-card .dz-ic { width: 40px; height: 40px; grid-column: 1; grid-row: 1 / span 2; }
body:not(#_) .dz-card .dz-go { grid-column: 3; grid-row: 1 / span 2; }
body:not(#_) .dz-card > div:nth-of-type(3) { grid-column: 2; grid-row: 1; margin-top: 0 !important; }
body:not(#_) .dz-card > div:nth-of-type(4) { grid-column: 2; grid-row: 2; margin-top: 2px !important; }
.dz-cards, .dz-cards-ai { gap: 12px !important; }
/* ★SV-42bc 높이 맞춤 — 날짜 알약 = 「인사 · 오늘 현황 보기」 = 32(작은 버튼 높이) · 같은 중심선.
   바로가기 설명이 2줄로 접혀 카드가 75 vs 70 으로 갈리던 것 → 제목·설명 1줄 말줄임(카드 전부 같은 높이) */
@media (min-width: 961px) {
  .dz-hero .fold-hero { margin: 0 !important; }
  body:not(#_) .dz-hero :is(.dz-chip, .fold-hero > summary) { box-sizing: border-box; height: var(--btn-h-sm); min-height: 0; padding-top: 0; padding-bottom: 0; line-height: 1; }
}
body:not(#_) .dz-card > div:nth-of-type(3), body:not(#_) .dz-card > div:nth-of-type(4) { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* ★SV-42bc 관리 — 한 줄에 선 컨트롤 높이 통일: 40 입력칸 옆 작은 버튼 32 → 40 · 관리자/검토팀 체크 칩 38 → 옆 셀렉트와 같은 32 */
body:not(#_) :is(.au-search > .btn, #tmAdd) { min-height: var(--btn-h) !important; }
body:not(#_) label.chip.admin-chip { height: var(--btn-h-sm); padding-top: 0 !important; padding-bottom: 0 !important; }
body:not(#_) label.chip.admin-chip > input { margin-top: 0; margin-bottom: 0; }

/* L-4 모의고사 자동검토 업로드·해설 업로드 — 드롭존 높이 절반(설명 2줄은 유지), 필드 간격 12 */
section.upload .dropzone { min-height: 0 !important; padding: 16px !important; }
section.upload .dropzone p { margin: 2px 0 !important; }
section.upload form.form { row-gap: 12px !important; }

/* L-5 검토 결과·해설 결과 — 내려받기 4개: 오른쪽 세로 목록 → 요약 아래 한 줄 가로(주 행동을 한눈에) */
@media (min-width: 961px) {
  body:not(#_) .result-summary-compact { grid-template-columns: minmax(200px, 260px) minmax(0, 1fr) !important; row-gap: 16px !important; }
  body:not(#_) .result-summary-compact .rsc-downloads { grid-column: 1 / -1; display: grid !important; grid-template-columns: none; grid-auto-columns: minmax(0, 1fr); grid-auto-flow: column; gap: 8px; padding-top: 16px; border-top: 1px solid var(--s-border); }
  body:not(#_) .result-summary-compact .result-download { justify-content: center; }
}

/* L-6 자동 합본 — 슬롯 25칸 5열 → 10열(세로 절반), 문항 수·모의고사명·회차 한 줄, 버튼 4개 한 줄 */
@media (min-width: 961px) {
  main:has(> .merge-head) { display: grid !important; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 12px; align-content: start; }
  main:has(> .merge-head) > * { grid-column: 1 / -1; }
  main:has(> .merge-head) > .merge-controls:has(#qcount) { grid-column: 1 / span 4; align-self: end; }
  main:has(> .merge-head) > .merge-controls:has(#opt_exam_name) { grid-column: 5 / -1; }
  main:has(> .merge-head) > .merge-controls:has(#qcount) .opt-field { min-height: 40px; }
  .slot-grid { grid-template-columns: repeat(10, minmax(0, 1fr)) !important; gap: 6px !important; }
  .slot-grid .slot { min-height: 0 !important; padding: 6px !important; }
  .merge-actions { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto auto !important; }
  .merge-actions .merge-btn.ghost { width: auto !important; }
}
.merge-head { margin-bottom: 12px !important; padding: 16px 20px !important; }
.conv-guide { padding: 12px 16px !important; }

/* L-7 개별문항 검사 — 파일 칸과 [검사] 한 줄, 이력·피드백 링크 한 줄 */
section.upload > form[action="/item-check"] { display: flex; align-items: flex-end; gap: 12px; }
section.upload > form[action="/item-check"] > input[type=file], section.upload > form[action="/item-check"] > :first-child { flex: 1 1 auto; min-width: 0; }
section.upload > form[action="/item-check"] > button { margin-top: 0 !important; flex: none; }
section.upload:has(> form[action="/item-check"]) > p.muted.mt-2 { display: inline-block; margin: 12px 16px 0 0 !important; }

/* L-8 도해 변환 — 행 간격 정리, 선택·버튼 줄 가운데 정렬 */
#ptisForm { row-gap: 12px !important; }
#ptisForm .row, section.upload .row { align-items: center; gap: 8px; }

/* L-9 회의실·티켓(ERP) — 상단 회의실/티켓 보드 링크를 탭(32px·선택=연한 남색)으로 */
.erp > nav.row { display: flex; gap: 4px; padding: 4px; margin-bottom: 16px; background: var(--s-surface-sunk); border-radius: var(--s-radius-control); width: max-content; border: 0 !important; }
.erp > nav.row > a { min-height: 32px; display: inline-flex; align-items: center; padding: 0 14px !important; border-radius: 10px; border: 0 !important; color: var(--s-text-sub) !important; text-decoration: none; font-family: var(--p-font-b) !important; }
.erp > nav.row > a[aria-current="page"] { background: var(--s-surface) !important; color: var(--s-accent) !important; box-shadow: 0 0 0 1.5px var(--s-accent-line) !important; }

/* L-10 로그인 — 쇼케이스 폭 줄이고(1.25 → 1) 입력 폼을 테 있는 그릇으로 */
@media (min-width: 961px) {
  .showcase { flex: 1 1 0 !important; }
  .login-form { background: var(--s-surface); border: 1px solid var(--s-border); border-radius: var(--s-radius-container); padding: 32px !important; box-sizing: border-box; }
}

/* SV-e183 — 모바일 er-btn 터치 높이 44 복구(SV-7013 게이트 O1). E-2 가 mobile.css:162 를 !important 로 40 에 덮었다 */
@media (max-width: 640px) {
  body:not(#_) .er-btn { min-height: 44px !important; padding-left: 10px !important; padding-right: 10px !important; }
}

/* SV-28a9 — 화면 상단 탭(partials/page_tabs.html · 메뉴에서 뺀 짝 화면 잇기). 모양은 .duo-tab 그대로 */
.page-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin: 0 0 12px; }
.page-tabs .duo-tab { display: inline-flex; align-items: center; min-height: 32px; padding: 0 14px; font-size: 14px; text-decoration: none; }

/* ============================================================
   SV-8bb2 UI/UX 통일 + 컴팩트 — 토큰 1벌 (대표 1563910391)
   규칙 문서: output/SV_UIUX_통일/토큰규칙.md. 마크업·기능 무변경, 자리·밀도만.
   · 간격 = 4/8/12/16/24 (--space-N) · 화면 머리→본문 12 · 그릇 사이 12 · 그릇 안쪽 16
   · 글자 = 20(제목)/15(구획)/14(본문)/12(이름표·안내) — E-1 그대로
   · 버튼 2종 = 주(채움 남색, 화면당 제출 1개) / 보조(흰 바탕+테) — 높이 40 · 작은 것 32
   · 그릇 = 모서리 16 · 1px 테 · 안쪽 16 · 그릇 안에 그릇 금지(안쪽은 테 없이)
   · 표 = 머리 12 굵게 · 행 40 (E-7 그대로)
   ============================================================ */
:root:root { --u-gap: var(--space-3, 12px); --u-pad: var(--space-4, 16px); --u-head-gap: var(--space-3, 12px); }

/* U-1 화면 머리 자리 하나 — 모든 기능 화면 제목이 본문 왼쪽 위 같은 점(main 안쪽 32/40)에서 시작.
   AI 툴 화면을 통째로 감싸던 흰 그릇(section.upload)·합본 머리 그릇을 걷어 제목이 바탕 위에 선다(그릇 안 그릇 해소). */
body.ds3:not(#_) main > section.upload, body.ds3:not(#_) main > .merge-head {
  background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; box-shadow: none !important;
}
body.ds3:not(#_) main > .erp { margin: 0 auto !important; padding: 0 !important; }
body.ds3:not(#_) main > .erp h1 { margin-top: 0 !important; }

/* U-2 제목 → 안내 → 본문 = 4 / 12 · 안내는 이름표 색 */
body.ds3:not(#_) main :is(h1 + p.muted, h1 + p, .merge-head > h1 + p) { margin-top: 0 !important; margin-bottom: var(--u-head-gap) !important; color: var(--s-text-sub); font-size: var(--fs-body) !important; }
body.ds3:not(#_) main > .card + .card, body.ds3:not(#_) main > section + section { margin-top: var(--u-gap); }
.merge-head { margin-bottom: var(--u-head-gap) !important; }

/* U-3 그릇 안 그릇 금지 — 마이페이지 정산 요약은 바깥 그릇의 한 구획으로 */
body:not(#_) .tk-panel > .tk-settlement { border: 0 !important; padding: 0 !important; background: transparent !important; border-radius: 0 !important; }
/* 그릇 끝의 여백 겹침 제거(회의실 빈 팀 그릇이 아래로 늘어나던 것) */
.erp .card > :last-child, .erp .card > :last-child > :last-child { margin-bottom: 0; }

/* U-4 조회 줄 한 줄 — [이름표+칸] [조회] 를 세로 3단 → 가로 1줄(내 정산·월별 정산·정산 담당) */
.erp form[method="get"] { display: flex !important; align-items: flex-end; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--u-gap); }
.erp form[method="get"] > label { margin: 0 !important; }
/* 짧은 칸 여러 개 폼도 가로로(월별 정산 실제 지급 결과 · 정산 담당 명세서 설정) */
.erp form[action="/erp/settlement/payment"] { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); column-gap: var(--u-gap); align-items: end; }
.erp form[action="/erp/settlement/payment"] > label:has(textarea) { grid-column: 1 / -1; justify-items: stretch; }
.erp form[action="/erp/settlement/payment"] > :is(button, p) { grid-column: 1 / -1; justify-self: start; }
#prSet { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--u-gap); }
#prSet > label { margin: 0 !important; }

/* U-5 버튼 2종 — 도움말 열기(정산 기준 보기)는 보조 버튼. 주 버튼은 화면의 제출 1개에만 */
body:not(#_) .erp .button.rg-open {
  background: var(--btn-secondary-bg) !important; color: var(--btn-secondary-fg) !important;
  border: 1.5px solid var(--btn-secondary-border) !important; box-shadow: 0 var(--p-ledge) 0 var(--btn-secondary-ledge) !important;
}

/* U-6 접이식 안내 상자 1벌 — 회의실·정산 화면의 「사용법」 상자도 AI 툴 도움말(.help-tip)과 같은 모양 */
body:not(#_) .erp > details.card { background: var(--s-accent-soft) !important; border: 0 !important; }
body:not(#_) .erp > details.card > summary { color: var(--s-accent) !important; font-family: var(--p-font-b) !important; }

/* U-7 보조 이동(← 마이페이지)은 제목 줄 오른쪽 작은 버튼 — 마이페이지 「내 문항 티켓」 자리와 같게 */
@media (min-width: 961px) {   /* 폰은 기존 세로 배치 그대로 */
  .tk-page > .tk-backrow:first-child { float: right; margin: 0 !important; }
  .tk-page > .tk-backrow:first-child ~ .tk-panel { clear: both; }
}
/* U-8 제목 위 탭 높이 통일 — 회의실·티켓(ERP) 탭 띠와 AI 툴 탭(.page-tabs)이 제목을 같은 높이(44 아래)에 둔다 */
body.ds3:not(#_) .erp > nav.row { margin-bottom: 4px !important; }
/* 내 정산 「정산 기준 보기」도 같은 자리(제목 줄 오른쪽 · 보조 버튼) — PC 만, 폰은 제목 아래 그대로 */
@media (min-width: 961px) {
  body.ds3:not(#_) main > .erp:has(> h1 ~ .rg-open, .rg-open) { position: relative; }
  body.ds3:not(#_) main > .erp .rg-open { position: absolute; top: 0; right: 0; min-height: var(--btn-h-sm) !important; }
  body.ds3:not(#_) main > .erp:has(.rg-open) > h1 { padding-right: 160px; }   /* 긴 이름 제목이 버튼 밑으로 들어가지 않게 */
}
/* 회의실 빈 팀 그릇 — 「회차 없음」 안내가 격자 한 칸에 갇혀 접히고 아래 여백이 겹치던 것 */
.erp .room-bucket > .room-folders:last-child { margin-bottom: 0; }
.erp .room-folders > p.muted:only-child { grid-column: 1 / -1; margin: 0; }
body.ds3:not(#_) main > .erp > h1:not(:has(+ p)) { margin-bottom: var(--u-head-gap) !important; }