* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

  :root {
    --bg-main: #C5E8DC;
    --bg-panel: #FFF8F0;
    --ink: #2A2A3E;
    --pink: #FF8FB8;
    --mint: #5FCDA0;
    --lav:  #B8A9E8;
    --yellow: #FFD86B;
    --gray: #D4D4DC;
    --cream: #FFFBF0;
    --surface: #ffffff;
    --surface-warm: #FFF0F8;
    --surface-cool: #E8F8EF;
    --led-bg: #F0F0F0;
    --eligible-grad: linear-gradient(90deg, #FFF3D0, #FFE5F0);
    --led-on-grad: linear-gradient(135deg, #FFE5F0 0%, #FFF3D0 100%);
    --dot-pattern: rgba(42,42,62,0.08);
    --footer-bg: rgba(255,255,255,0.5);
    --on-accent: #2A2A3E;
  }

  [data-theme="dark"] {
    --bg-main: #1A1F2E;
    --bg-panel: #252B3A;
    --ink: #E8E8EC;
    --pink: #FF9DC4;
    --mint: #6EE0B5;
    --lav:  #C8B9F8;
    --yellow: #FFE07B;
    --gray: #4A5066;
    --cream: #2F3548;
    --surface: #2F3548;
    --surface-warm: #3A2A38;
    --surface-cool: #2A3A38;
    --led-bg: #1F2538;
    --eligible-grad: linear-gradient(90deg, #3A3318, #3A1F2A);
    --led-on-grad: linear-gradient(135deg, #3A1F2A 0%, #3A3318 100%);
    --dot-pattern: rgba(255,255,255,0.04);
    --footer-bg: rgba(0,0,0,0.25);
    --on-accent: #1A1F2E;
  }

  [data-theme="highcontrast"] {
    --bg-main: #000000;
    --bg-panel: #ffffff;
    --ink: #000000;
    --pink: #ff0066;
    --mint: #00cc66;
    --lav:  #6600cc;
    --yellow: #ffcc00;
    --gray: #666666;
    --cream: #ffffff;
    --surface: #ffffff;
    --surface-warm: #fff8e0;
    --surface-cool: #e0fff0;
    --led-bg: #ffffff;
    --eligible-grad: linear-gradient(90deg, #ffffff, #ffffff);
    --led-on-grad: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
    --dot-pattern: rgba(0,0,0,0.15);
    --footer-bg: rgba(255,255,255,0.9);
    --on-accent: #000000;
  }
  [data-theme="highcontrast"] .pixel-box,
  [data-theme="highcontrast"] .result,
  [data-theme="highcontrast"] .progress-section {
    border-width: 3px !important;
    border-color: #000 !important;
    box-shadow: 4px 4px 0 #000 !important;
  }

  /* 결과 액션 더보기 */
  .result-actions { display: flex; flex-wrap: wrap; gap: 6px; }
  .result-actions .primary-action { flex: 1 1 30%; min-width: 90px; }
  .result-actions .more-toggle { flex: 1 1 100%; background: var(--lav) !important; color: var(--on-accent) !important; }
  .more-actions {
    flex: 1 1 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 8px;
    background: var(--surface-warm);
    border: 2px dashed var(--ink);
    margin-top: 4px;
  }
  .more-actions .action-btn { flex: 1 1 30%; min-width: 90px; }
  .more-actions[hidden] { display: none; }

  /* a11y — B-02/B-03 */
  .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;
  }
  .mode-btn:focus-visible,
  .action-btn:focus-visible,
  .theme-toggle:focus-visible,
  .reset-btn:focus-visible,
  .tour-card .tc-btn:focus-visible {
    outline: 3px solid var(--pink);
    outline-offset: 2px;
  }
  .backup-hint {
    flex: 1 1 100%;
    margin: 6px 0 0;
    font-size: 10px;
    line-height: 1.4;
    color: var(--ink);
    opacity: 0.85;
    text-align: center;
  }

  /* 설정 패널 */
  .settings-panel {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 95;
    background: var(--bg-panel);
    border-bottom: 3px solid var(--ink);
    box-shadow: 0 4px 0 var(--ink);
    padding: 10px;
  }
  .settings-panel .sp-row {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    align-items: center;
    max-width: 420px;
    margin: 0 auto;
  }
  .settings-panel .hidden-opt {
    position: static !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .hidden-opt { display: none !important; }

  /* 폰트 스케일: zoom으로 전체 UI 비례 확대/축소 (대부분 px 절대값이라 font-size만으론 효과 없음) */
  html[data-font-scale="sm"] .app { zoom: 0.88; }
  html[data-font-scale="md"] .app { zoom: 1; }
  html[data-font-scale="lg"] .app { zoom: 1.18; }
  /* Firefox fallback (zoom 미지원 옛 버전): transform 사용 시 layout 영향 있어 root font-size만 보정 */
  @supports not (zoom: 1) {
    html[data-font-scale="sm"] { font-size: 13px; }
    html[data-font-scale="md"] { font-size: 15px; }
    html[data-font-scale="lg"] { font-size: 18px; }
  }

  /* Compact mode (specificity + !important 로 .pixel-box 기본 padding 우선) */
  html[data-density="compact"] .app { padding: 8px 8px 20px !important; }
  html[data-density="compact"] .pixel-box,
  html[data-density="compact"] .result,
  html[data-density="compact"] .progress-section {
    padding: 6px 8px !important;
    margin-bottom: 6px !important;
    box-shadow: 2px 2px 0 var(--ink) !important;
  }
  html[data-density="compact"] .header { padding: 8px 6px !important; margin-bottom: 8px !important; padding-top: 32px !important; }
  html[data-density="compact"] .header h1 { font-size: 12px !important; }
  html[data-density="compact"] .header .sub { font-size: 8px !important; }
  html[data-density="compact"] .mode-toggle { margin-bottom: 8px !important; }
  html[data-density="compact"] .mode-btn { padding: 8px 6px !important; font-size: 10px !important; }
  html[data-density="compact"] .day-row { padding: 3px 6px !important; gap: 4px !important; min-height: 0 !important; }
  html[data-density="compact"] .day-name { font-size: 11px !important; }
  html[data-density="compact"] .day-hours-input { font-size: 12px !important; padding: 4px !important; }
  html[data-density="compact"] .counter-btn { width: 28px !important; height: 28px !important; font-size: 14px !important; }
  html[data-density="compact"] .label { font-size: 10px !important; margin-bottom: 2px !important; }
  html[data-density="compact"] .hint { font-size: 8.5px !important; margin-top: 2px !important; line-height: 1.4 !important; }
  html[data-density="compact"] .result-row { padding: 3px 0 !important; font-size: 11px !important; }
  html[data-density="compact"] .result-final { padding: 8px !important; }
  html[data-density="compact"] .result-final .amount { font-size: 18px !important; }
  html[data-density="compact"] .cal-cell { min-height: 34px !important; padding: 1px !important; }
  html[data-density="compact"] .cal-hours-input { font-size: 11px !important; padding: 1px !important; }
  html[data-density="compact"] .badge { padding: 2px !important; }
  html[data-density="compact"] .badge-emoji { font-size: 13px !important; }
  html[data-density="compact"] .badge-name { font-size: 7px !important; }
  html[data-density="compact"] .footer-note { font-size: 9px !important; padding: 6px !important; }
  html[data-density="compact"] .action-btn { padding: 6px 8px !important; font-size: 9px !important; }
  html[data-density="compact"] .preset-btn { padding: 5px 8px !important; font-size: 9px !important; }
  html[data-density="compact"] .reset-btn { padding: 6px 10px !important; font-size: 10px !important; }

  /* 큰 글씨 디스플레이 (읽기 전용 overlay) */
  .big-display-overlay {
    position: fixed;
    inset: 0;
    background: var(--bg-panel);
    z-index: 99;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 24px;
    text-align: center;
  }
  .big-display-overlay .bd-label {
    font-size: 18px;
    font-weight: 900;
    color: var(--ink);
    margin-bottom: 16px;
    opacity: 0.8;
  }
  .big-display-overlay .bd-amount {
    font-size: 56px;
    font-weight: 900;
    color: var(--ink);
    letter-spacing: 2px;
    line-height: 1.1;
    margin-bottom: 16px;
  }
  .big-display-overlay .bd-sub {
    font-size: 14px;
    color: var(--ink);
    opacity: 0.7;
    margin-bottom: 32px;
  }
  .big-display-overlay .bd-close {
    padding: 14px 28px;
    font-family: inherit;
    font-size: 16px;
    font-weight: 900;
    background: var(--mint);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    cursor: pointer;
  }

  /* 풀스크린 캘린더 */
  body.cal-fullscreen #monthlySection {
    position: fixed !important;
    inset: 0;
    z-index: 90;
    overflow-y: auto;
    background: var(--bg-main);
    padding: 16px;
    margin: 0;
  }
  body.cal-fullscreen .app > *:not(#monthlySection) { display: none !important; }
  body.cal-fullscreen #monthlySection .cal-cell { min-height: 70px; font-size: 14px; }
  body.cal-fullscreen #monthlySection .cal-hours-input { font-size: 18px; }

  [data-theme="gameboy"] {
    --bg-main: #9BBC0F;       /* DMG 가장 밝은 라임 */
    --bg-panel: #8BAC0F;      /* DMG 중간 녹색 */
    --ink: #0F380F;            /* DMG 가장 어두운 녹색 */
    --pink: #0F380F;
    --mint: #306230;
    --lav:  #306230;
    --yellow: #8BAC0F;
    --gray: #689070;
    --cream: #ADC272;
    --surface: #ADC272;
    --surface-warm: #9DC062;
    --surface-cool: #98C050;
    --led-bg: #689070;
    --eligible-grad: linear-gradient(90deg, #C0D068, #B8C858);
    --led-on-grad: linear-gradient(135deg, #C8D878 0%, #B8D068 100%);
    --dot-pattern: rgba(15,56,15,0.18);
    --footer-bg: rgba(15,56,15,0.08);
    --on-accent: #0F380F;
  }

  html, body {
    background: var(--bg-main);
    color: var(--ink);
    font-family: ui-monospace, "SF Mono", Menlo, Monaco, Consolas, "Courier New", monospace;
    font-weight: 700;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.4;
  }

  /* 8-bit dot pattern overlay */
  body::before {
    content: '';
    position: fixed;
    inset: 0;
    background-image:
      radial-gradient(circle at 1px 1px, var(--dot-pattern) 1px, transparent 0);
    background-size: 8px 8px;
    pointer-events: none;
    z-index: 0;
  }

  .app {
    position: relative;
    z-index: 1;
    max-width: 420px;
    margin: 0 auto;
    padding: 16px 14px 32px;
  }

  /* ===== Header ===== */
  .header {
    text-align: center;
    margin-bottom: 14px;
    padding: 14px 8px;
    background: var(--yellow);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    position: relative;
  }
  .theme-toggle {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 28px;
    height: 28px;
    background: var(--bg-panel);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 12px;
    cursor: pointer;
    padding: 0;
    line-height: 1;
    z-index: 2;
  }
  .header { padding-top: 38px !important; }
  .header h1 { padding: 0 6px; }
  .theme-toggle:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* ===== Dark mode fine-tuning ===== */
  /* 액센트 배경 텍스트 → var(--on-accent) — docs/patterns/css-on-accent-variable.md */
  [data-theme="dark"] .mode-btn.active {
    background: var(--yellow);
    color: var(--on-accent);
  }
  [data-theme="dark"] .cal-head.sat,
  [data-theme="dark"] .cal-head.sun {
    color: var(--on-accent);
  }
  /* 헤더 sub 텍스트 가독성 — opacity 올리고 색 명시 */
  [data-theme="dark"] .header .sub {
    opacity: 0.95;
    color: var(--ink);
  }
  /* footer-note 가독성 보강 */
  [data-theme="dark"] .footer-note {
    color: var(--ink);
    opacity: 0.95;
  }
  [data-theme="dark"] .hint {
    opacity: 0.85;
  }
  [data-theme="dark"] input[type="number"]:focus {
    background: #3A4055;
  }
  [data-theme="dark"] .day-hours-input:focus,
  [data-theme="dark"] .cal-hours-input:focus {
    background: #3A4055;
  }
  [data-theme="dark"] .day-row.active.weekend,
  [data-theme="dark"] .cal-cell.active.weekend {
    background: #353048;
  }
  [data-theme="dark"] .toast {
    background: var(--cream);
    color: var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
  }
  [data-theme="dark"] .footer-note {
    color: var(--ink);
  }
  [data-theme="dark"] .header {
    background: #4A3A18;
  }
  [data-theme="dark"] .result-final {
    background: var(--yellow);
  }
  [data-theme="dark"] .coin {
    background: #4A3A18;
  }

  /* ===== Game Boy theme fine-tuning ===== */
  [data-theme="gameboy"] input[type="number"]:focus,
  [data-theme="gameboy"] .day-hours-input:focus,
  [data-theme="gameboy"] .cal-hours-input:focus {
    background: #C8D878;
  }
  [data-theme="gameboy"] .day-row.active.weekend,
  [data-theme="gameboy"] .cal-cell.active.weekend {
    background: #88AA50;
  }
  [data-theme="gameboy"] .toast {
    background: var(--ink);
    color: var(--bg-main);
    box-shadow: 3px 3px 0 var(--mint);
  }
  [data-theme="gameboy"] .header,
  [data-theme="gameboy"] .result-final {
    background: var(--mint);
    color: var(--bg-main);
  }
  [data-theme="gameboy"] .header .sub {
    color: var(--bg-main);
    opacity: 0.85;
  }
  [data-theme="gameboy"] .coin {
    background: var(--bg-main);
  }
  [data-theme="gameboy"] .coin::before {
    color: var(--ink);
  }
  [data-theme="gameboy"] .auto-fill-banner {
    box-shadow: 2px 2px 0 var(--ink);
  }
  .header h1 {
    font-size: 13px;
    letter-spacing: 0.5px;
    line-height: 1.4;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .header .sub {
    font-size: 8.5px;
    margin-top: 6px;
    opacity: 0.75;
    letter-spacing: 1px;
  }

  /* Pixel coin */
  .coin {
    display: inline-block;
    width: 18px;
    height: 18px;
    background: var(--cream);
    border: 2px solid var(--ink);
    position: relative;
    flex-shrink: 0;
  }
  .coin::before {
    content: '₩';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: var(--ink);
    font-weight: 900;
  }

  /* ===== Pixel box ===== */
  .pixel-box {
    background: var(--bg-panel);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 12px;
    margin-bottom: 14px;
  }

  .label {
    font-size: 10px;
    margin-bottom: 6px;
    display: flex;
    align-items: center;
    gap: 6px;
    letter-spacing: 0.3px;
  }
  .label::before {
    content: '▶';
    color: var(--pink);
    font-size: 9px;
  }

  /* ===== Inputs ===== */
  .field { margin-bottom: 10px; }
  .field:last-child { margin-bottom: 0; }

  .field-wrap { position: relative; }

  input[type="number"] {
    width: 100%;
    padding: 11px 36px 11px 12px;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    border-radius: 0;
    outline: none;
    text-align: right;
  }
  input[type="number"]:focus { background: var(--cream); }
  input[type="number"]::-webkit-outer-spin-button,
  input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  input[type="number"] { -moz-appearance: textfield; }

  .field-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 11px;
    opacity: 0.55;
    pointer-events: none;
  }

  .preset-btn {
    margin-top: 6px;
    padding: 8px 12px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    background: var(--lav);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .preset-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  .shift-preset-row {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 4px;
  }
  .shift-btn {
    padding: 6px 2px;
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    letter-spacing: 0.2px;
  }
  .shift-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .shift-btn[data-clear="true"] { background: var(--gray); }

  /* ===== Job tabs ===== */
  .job-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
  }
  .job-tab {
    flex: 1 1 0;
    min-width: 60px;
    padding: 8px 6px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    background: var(--cream);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    text-align: center;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .job-tab.active {
    background: var(--yellow);
    color: var(--on-accent);
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .job-name-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: 6px;
    align-items: stretch;
  }
  .job-name-row input {
    padding: 8px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--ink);
  }
  .job-color-row {
    display: flex;
    gap: 6px;
    align-items: center;
  }
  .job-color-label {
    font-size: 10px;
    font-weight: 700;
    color: var(--ink);
  }
  .job-color-swatch {
    width: 22px;
    height: 22px;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    padding: 0;
  }
  .job-color-swatch.active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
    outline: 2px solid var(--ink);
    outline-offset: 2px;
  }
  .job-tab .tab-color {
    display: inline-block;
    width: 8px;
    height: 8px;
    border: 1px solid var(--ink);
    margin-right: 4px;
    vertical-align: middle;
  }
  .cal-cell .cal-job-stripe {
    position: absolute;
    left: 0;
    top: 0;
    width: 3px;
    height: 100%;
    border-right: 1px solid var(--ink);
  }
  .cal-cell .cal-job-stripes {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 3px;
    display: flex;
  }
  .cal-cell .cal-job-stripes .strip {
    flex: 1 1 0;
    border-right: 1px solid var(--ink);
  }
  .cal-cell .cal-job-stripes .strip:last-child { border-right: none; }

  .job-summary {
    margin-top: 10px;
    padding: 8px 10px;
    background: var(--surface-cool);
    border: 2px solid var(--mint);
    font-size: 11px;
    line-height: 1.6;
  }
  .job-summary .js-row { display: flex; justify-content: space-between; }
  .job-summary .js-total { margin-top: 6px; padding-top: 6px; border-top: 2px dashed var(--ink); font-weight: 900; }

  /* ===== Empty state illustration ===== */
  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 18px 12px;
    text-align: center;
    color: var(--ink);
    opacity: 0.75;
  }
  .empty-state .es-art {
    width: 64px;
    height: 64px;
    margin-bottom: 8px;
    image-rendering: pixelated;
  }
  .empty-state .es-msg {
    font-size: 10px;
    font-weight: 700;
    line-height: 1.5;
    max-width: 240px;
  }

  /* ===== Onboarding tour ===== */
  .tour-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
  }
  .tour-card {
    background: var(--bg-panel);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 16px;
    max-width: 320px;
    width: 100%;
  }
  .tour-card .tc-step {
    font-size: 10px;
    font-weight: 900;
    color: var(--pink);
    letter-spacing: 1px;
  }
  .tour-card .tc-title {
    font-size: 14px;
    font-weight: 900;
    margin: 4px 0 8px;
  }
  .tour-card .tc-text {
    font-size: 11px;
    line-height: 1.6;
    margin-bottom: 12px;
  }
  .tour-card .tc-actions {
    display: flex;
    gap: 6px;
    justify-content: space-between;
  }
  .tour-card .tc-btn {
    flex: 1;
    padding: 8px 10px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    background: var(--cream);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
  }
  .tour-card .tc-btn.primary { background: var(--mint); color: var(--on-accent); }
  .tour-card .tc-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* ===== Reorder handle ===== */
  [data-reorder] {
    position: relative;
  }
  /* 핸들 = 박스 상단에 빠져나온 픽셀 탭(북마크). 박스 보더와 자연스럽게 이어지고 내용 침범 0 */
  .reorder-handle {
    position: absolute;
    top: -19px;
    left: 8px;
    width: 26px;
    height: 19px;
    background: var(--gray);
    border: 3px solid var(--ink);
    border-bottom: none;
    font-family: inherit;
    font-size: 11px;
    font-weight: 900;
    color: var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 6;
    box-shadow: none;
    user-select: none;
    padding: 0 0 2px;
    opacity: 0.75;
    transition: opacity 0.15s, transform 0.1s, background 0.15s;
  }
  .reorder-handle:hover { opacity: 1; background: var(--yellow); }
  [data-reorder].reorder-active .reorder-handle {
    opacity: 1;
    background: var(--pink);
    color: #fff;
  }
  .reorder-handle:active {
    transform: translate(1px, 0);
  }
  /* 박스간 margin(14px) 안에 19px 탭이 안전하게 들어감. 추가 padding 불필요 */
  [data-reorder].reorder-active {
    outline: 3px dashed var(--pink);
    outline-offset: 3px;
  }
  [data-reorder].dragging {
    opacity: 0.5;
    outline: 3px solid var(--pink);
    outline-offset: 2px;
    z-index: 10;
  }
  [data-reorder].drop-target-top {
    border-top: 4px solid var(--mint) !important;
  }
  [data-reorder].drop-target-bottom {
    border-bottom: 4px solid var(--mint) !important;
  }
  .reorder-handle.dragging-handle {
    background: var(--mint) !important;
    cursor: grabbing;
  }
  [data-reorder].reorder-active .reorder-handle {
    background: var(--pink);
    color: #fff;
  }
  .reorder-actions {
    position: absolute;
    top: -10px;
    right: -10px;
    display: none;
    gap: 4px;
    z-index: 6;
  }
  [data-reorder].reorder-active .reorder-actions {
    display: flex;
  }
  .reorder-btn {
    width: 30px;
    height: 24px;
    background: var(--yellow);
    border: 2px solid var(--ink);
    font-family: inherit;
    font-size: 12px;
    font-weight: 900;
    color: var(--on-accent);
    cursor: pointer;
    box-shadow: 2px 2px 0 var(--ink);
    padding: 0;
  }
  .reorder-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .reorder-btn:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
  }
  @media print {
    .reorder-handle, .reorder-actions { display: none !important; }
    [data-reorder].reorder-active { outline: none !important; }
  }

  /* ===== Badges ===== */
  .badge-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-top: 10px;
  }
  .badge {
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    background: var(--cream);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    padding: 4px;
    text-align: center;
    transition: transform 0.15s;
  }
  .badge.locked { background: var(--gray); opacity: 0.55; filter: grayscale(0.8); }
  .badge.unlocked { background: var(--yellow); color: var(--on-accent); }
  .badge.unlocked:hover { transform: translateY(-2px); }
  .badge-emoji { font-size: 18px; line-height: 1; }
  .badge-name { font-size: 8.5px; font-weight: 900; line-height: 1.1; }

  @media (max-width: 380px) {
    .badge-grid { grid-template-columns: repeat(5, 1fr); }
    .badge-emoji { font-size: 15px; }
    .badge-name { font-size: 7.5px; }
  }

  /* ===== History chart ===== */
  .history-chart {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 6px;
    align-items: end;
    height: 130px;
    margin-top: 10px;
    padding: 8px 4px 4px;
    background: var(--led-bg);
    border: 2px solid var(--ink);
  }
  .hist-bar {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    height: 100%;
    cursor: pointer;
    background: transparent;
    border: none;
    padding: 0;
    font-family: inherit;
    color: var(--ink);
  }
  .hist-bar .bar-fill {
    width: 100%;
    background: var(--mint);
    border: 2px solid var(--ink);
    border-bottom: none;
    box-shadow: 2px 0 0 var(--ink) inset;
    min-height: 4px;
    transition: background 0.15s;
  }
  .hist-bar.current .bar-fill { background: var(--yellow); }
  .hist-bar.current .bar-amt { color: var(--on-accent); }
  .hist-bar.empty .bar-fill { background: var(--gray); opacity: 0.5; }
  .hist-bar .bar-label {
    font-size: 8px;
    margin-top: 3px;
    line-height: 1;
    font-weight: 900;
  }
  .hist-bar .bar-amt {
    position: absolute;
    top: -1px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 7px;
    font-weight: 900;
    white-space: nowrap;
    color: var(--ink);
  }
  .hist-bar:active { opacity: 0.7; }

  /* ===== Day counters ===== */
  .days {
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  .day-row {
    display: grid;
    grid-template-columns: 38px 1fr 34px 34px;
    align-items: center;
    gap: 8px;
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    padding: 6px 8px;
    transition: background 0.15s;
  }
  .day-row.weekend { background: var(--surface-warm); }
  .day-row.active { background: var(--surface-cool); }
  .day-row.active.weekend { background: var(--surface-cool); }
  .day-row.absent {
    background: repeating-linear-gradient(
      135deg,
      var(--surface-warm) 0 6px,
      transparent 6px 12px
    );
    opacity: 0.65;
    position: relative;
  }
  .day-row.absent::after {
    content: '✗';
    position: absolute;
    left: 3px;
    top: 3px;
    font-size: 10px;
    color: var(--pink);
    font-weight: 900;
    pointer-events: none;
  }

  .day-name {
    font-size: 11px;
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding: 4px 0;
  }
  .day-name.sat { color: var(--lav); }
  .day-name.sun { color: var(--pink); }
  .day-name:active { transform: scale(0.9); }

  .day-hours {
    text-align: center;
    font-size: 11px;
    padding: 4px 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
  }
  .day-hours-input {
    width: 42px;
    text-align: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 16px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(42,42,62,0.4);
    padding: 2px 2px;
    outline: none;
    border-radius: 0;
    -moz-appearance: textfield;
    cursor: text;
  }
  .day-hours-input::-webkit-outer-spin-button,
  .day-hours-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .day-hours-input:focus {
    background: var(--cream);
    border-bottom: 2px solid var(--pink);
  }
  .day-hours .unit { font-size: 9px; opacity: 0.55; margin-left: 3px; }

  .hint {
    font-size: 8.5px;
    opacity: 0.6;
    margin: -2px 0 8px;
    letter-spacing: 0.2px;
    line-height: 1.5;
  }
  .hint b { color: var(--pink); }

  .counter-btn {
    width: 32px;
    height: 32px;
    font-family: inherit;
    font-size: 18px;
    font-weight: 700;
    color: var(--on-accent);
    background: var(--mint);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    user-select: none;
    padding: 0;
  }
  .counter-btn.minus { background: var(--pink); }
  .counter-btn:active:not(:disabled) {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .counter-btn:disabled {
    background: var(--gray);
    cursor: not-allowed;
    opacity: 0.55;
  }

  .total-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 11px;
    margin-top: 10px;
    background: var(--yellow);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 11px;
  }
  .total-row .total-val { font-size: 15px; }

  /* ===== LED ===== */
  .led {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 11px;
    margin-top: 10px;
    background: var(--led-bg);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    transition: background 0.2s;
  }
  .led.on {
    background: var(--led-on-grad);
    animation: glow 1.4s ease-in-out infinite;
  }
  @keyframes glow {
    0%, 100% { box-shadow: 2px 2px 0 var(--ink); }
    50% { box-shadow: 2px 2px 0 var(--ink), 0 0 14px rgba(255,143,184,0.7); }
  }

  .led-icon {
    width: 16px;
    height: 16px;
    background: var(--gray);
    border: 2px solid var(--ink);
    flex-shrink: 0;
  }
  .led.on .led-icon {
    background: var(--pink);
    animation: blink 0.7s steps(2) infinite;
  }
  @keyframes blink {
    50% { background: var(--yellow); }
  }

  .led-text { flex: 1; }
  .led-text strong {
    display: block;
    font-size: 11px;
    margin-bottom: 3px;
  }
  .led-text small {
    font-size: 9px;
    opacity: 0.7;
    line-height: 1.3;
  }

  /* ===== Tax toggle ===== */
  .tax-toggle {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    margin-top: 6px;
  }

  .tax-btn {
    padding: 9px 4px;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    text-align: center;
    line-height: 1.3;
  }
  .tax-btn .pct {
    display: block;
    font-size: 12px;
    margin-top: 3px;
  }
  .tax-btn.active {
    background: var(--mint);
    color: var(--on-accent);
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* ===== Result ===== */
  .result {
    background: linear-gradient(180deg, var(--bg-panel) 0%, #F5EFFF 100%);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 13px 12px;
    margin-bottom: 14px;
  }

  .result-row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 6px 0;
    border-bottom: 2px dotted rgba(42,42,62,0.2);
    font-size: 10.5px;
  }
  .result-row .v {
    font-size: 12.5px;
  }

  .result-final {
    margin-top: 12px;
    padding: 13px 10px;
    background: var(--yellow);
    color: var(--on-accent);
    border: 3px solid var(--ink);
    text-align: center;
  }
  .result-final .lbl {
    font-size: 10px;
    margin-bottom: 5px;
    letter-spacing: 0.5px;
  }
  .result-final .amount {
    font-size: 24px;
    letter-spacing: -0.5px;
  }
  .result-final .amount .won {
    font-size: 14px;
    margin-left: 3px;
  }
  .result-final .monthly {
    font-size: 9.5px;
    margin-top: 6px;
    opacity: 0.75;
  }

  /* ===== Progress ===== */
  .progress-section {
    background: var(--bg-panel);
    border: 3px solid var(--ink);
    box-shadow: 4px 4px 0 var(--ink);
    padding: 13px 12px;
  }

  .progress-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 9px;
  }
  .progress-head .title { font-size: 11px; }
  .progress-head .pct {
    font-size: 20px;
    color: var(--mint);
    transition: color 0.3s;
  }
  .progress-head .pct.complete {
    color: var(--pink);
    animation: pop 0.6s ease-in-out infinite alternate;
  }
  @keyframes pop {
    from { transform: scale(1); }
    to { transform: scale(1.06); }
  }

  .progress-bar {
    height: 26px;
    background: var(--gray);
    border: 2px solid var(--ink);
    padding: 2px;
    display: flex;
    gap: 1px;
  }

  .pixel-cell {
    flex: 1;
    height: 100%;
    background: transparent;
    transition: background 0.25s ease;
  }
  .pixel-cell.filled { background: var(--mint); }
  .pixel-cell.filled.complete {
    background: var(--pink);
    animation: pulse 0.9s ease-in-out infinite alternate;
  }
  @keyframes pulse {
    from { opacity: 0.82; }
    to { opacity: 1; }
  }

  .progress-foot {
    font-size: 9.5px;
    margin-top: 7px;
    display: flex;
    justify-content: space-between;
    opacity: 0.75;
  }

  /* ===== Footer ===== */
  .footer-note {
    margin-top: 14px;
    padding: 10px;
    background: var(--footer-bg);
    border: 2px dashed var(--ink);
    font-size: 9px;
    line-height: 1.55;
    text-align: center;
    opacity: 0.8;
  }

  .heart { color: var(--pink); }

  .reset-btn {
    display: block;
    margin: 14px auto 0;
    padding: 7px 14px;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .reset-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* ===== Mode toggle ===== */
  .mode-toggle {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    margin-bottom: 14px;
  }
  .mode-btn {
    padding: 11px 6px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    background: var(--surface);
    color: var(--ink);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    cursor: pointer;
    letter-spacing: 0.3px;
  }
  .mode-btn.active {
    background: var(--ink);
    color: var(--yellow);
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--ink);
  }
  [data-theme="gameboy"] .mode-btn.active {
    background: var(--ink);
    color: var(--bg-main);
  }

  /* ===== Calendar grid (monthly mode) ===== */
  .cal-nav {
    display: grid;
    grid-template-columns: 36px 1fr 36px;
    align-items: center;
    gap: 6px;
    margin-bottom: 6px;
  }
  .cal-nav-btn {
    width: 36px;
    height: 32px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 700;
    background: var(--lav);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    padding: 0;
  }
  .cal-nav-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .cal-title {
    text-align: center;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
  }
  .cal-today-btn {
    font-family: inherit;
    font-size: 9px;
    font-weight: 700;
    background: var(--yellow);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 1px 1px 0 var(--ink);
    padding: 3px 7px;
    cursor: pointer;
  }
  .cal-today-btn:active {
    transform: translate(1px, 1px);
    box-shadow: 0 0 0 var(--ink);
  }

  .cal-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
    margin-top: 6px;
  }

  .auto-fill-banner {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 10px;
    margin-bottom: 8px;
    background: var(--led-on-grad);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--pink);
    font-size: 10px;
    font-weight: 700;
    animation: bannerPulse 1.6s ease-in-out infinite;
  }
  @keyframes bannerPulse {
    0%, 100% { box-shadow: 2px 2px 0 var(--pink); }
    50% { box-shadow: 2px 2px 0 var(--pink), 0 0 10px rgba(255,143,184,0.4); }
  }
  .afb-text { flex: 1; line-height: 1.4; }
  .afb-actions { display: flex; gap: 5px; flex-shrink: 0; }
  .afb-yes {
    padding: 6px 12px;
    font-family: inherit;
    font-size: 10px;
    font-weight: 700;
    background: var(--mint);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
  }
  .afb-yes:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
  .afb-no {
    width: 26px; height: 26px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 700;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .afb-no:active { transform: translate(2px,2px); box-shadow: 0 0 0 var(--ink); }
  .cal-head {
    text-align: center;
    font-size: 9px;
    padding: 5px 0;
    background: var(--yellow);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    font-weight: 700;
  }
  .cal-head.sat { color: var(--lav); }
  .cal-head.sun { color: var(--pink); }
  .cal-empty {
    background: transparent;
    min-height: 50px;
  }
  .cal-cell {
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 1px 1px 0 var(--ink);
    padding: 3px 2px;
    min-height: 50px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  .cal-cell.weekend { background: var(--surface-warm); }
  .cal-cell.active { background: var(--surface-cool); }
  .cal-cell.today {
    outline: 2px solid var(--pink);
    outline-offset: -2px;
  }
  .cal-cell.has-note::before {
    content: '';
    position: absolute;
    top: 2px;
    right: 2px;
    width: 6px;
    height: 6px;
    background: var(--pink);
    border: 1px solid var(--ink);
  }
  .cal-cell.holiday .cal-date { color: #E55B7C; font-weight: 900; }
  [data-theme="dark"] .cal-cell.holiday .cal-date { color: #FF9DC4; }
  [data-theme="gameboy"] .cal-cell.holiday .cal-date { color: #0F380F; text-decoration: underline; }
  .cal-holiday-dot {
    display: inline-block;
    width: 4px;
    height: 4px;
    background: var(--pink);
    border: 1px solid var(--ink);
    margin-left: 2px;
    vertical-align: middle;
  }
  .cal-cell.absent {
    background: repeating-linear-gradient(
      135deg,
      var(--surface-warm) 0 6px,
      transparent 6px 12px
    );
    opacity: 0.65;
  }
  .cal-cell.absent::after {
    content: '✗';
    position: absolute;
    bottom: 1px;
    left: 2px;
    font-size: 9px;
    color: var(--pink);
    font-weight: 900;
    line-height: 1;
  }
  .cal-cell { position: relative; }
  .cal-date {
    font-size: 9px;
    text-align: center;
    line-height: 1;
    padding-top: 1px;
    opacity: 0.7;
    cursor: pointer;
    user-select: none;
  }
  .cal-date:hover { opacity: 1; }
  .cal-hours-input {
    width: 100%;
    text-align: center;
    font-family: inherit;
    font-weight: 700;
    font-size: 12px;
    color: var(--ink);
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(42,42,62,0.3);
    padding: 1px 0;
    outline: none;
    border-radius: 0;
    -moz-appearance: textfield;
  }
  .cal-hours-input::-webkit-outer-spin-button,
  .cal-hours-input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
  }
  .cal-hours-input:focus {
    background: var(--cream);
    border-bottom: 2px solid var(--pink);
  }

  /* ===== Week summary cards (monthly mode) ===== */
  .week-summary-wrap {
    /* container is just for label spacing */
  }
  .week-summary {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .week-summary:empty::before {
    content: '입력된 시간이 없습니다';
    font-size: 9.5px;
    opacity: 0.55;
    padding: 8px;
    text-align: center;
    display: block;
  }
  .week-card {
    display: grid;
    grid-template-columns: 30px 1fr auto auto;
    align-items: center;
    gap: 8px;
    padding: 6px 22px 6px 9px;
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-size: 10px;
    cursor: pointer;
    position: relative;
    user-select: none;
  }
  .week-card::after {
    content: '▼';
    position: absolute;
    right: 8px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 8px;
    opacity: 0.4;
  }
  .week-card.expanded::after { content: '▲'; opacity: 0.75; }
  .week-card.expanded {
    border-bottom-width: 3px;
  }
  .week-card.eligible {
    background: var(--eligible-grad);
  }
  .wk-num { font-weight: 700; font-size: 10.5px; }
  .wk-range { opacity: 0.6; font-size: 9px; }
  .wk-partial { color: var(--pink); font-size: 9px; opacity: 1; }
  .wk-hours { text-align: right; font-size: 11px; font-weight: 700; }
  .wk-hours .star { color: var(--pink); }
  .wk-pay { text-align: right; font-size: 9.5px; opacity: 0.8; min-width: 60px; }

  .week-detail {
    background: var(--cream);
    border: 2px solid var(--ink);
    border-top: none;
    box-shadow: 2px 2px 0 var(--ink);
    padding: 7px 10px;
    font-size: 9.5px;
    margin-top: -4px;
  }
  .wd-note {
    font-size: 9px;
    color: var(--pink);
    padding-bottom: 5px;
    margin-bottom: 5px;
    border-bottom: 1px dashed rgba(42,42,62,0.2);
  }
  .week-detail-row {
    display: grid;
    grid-template-columns: 80px 1fr 80px;
    gap: 6px;
    padding: 2px 0;
    font-size: 10px;
  }
  .week-detail-row.zero { opacity: 0.4; }
  .wd-date { }
  .wd-hours { text-align: right; font-weight: 700; }
  .wd-pay { text-align: right; opacity: 0.75; }
  .wd-summary {
    margin-top: 6px;
    padding-top: 5px;
    border-top: 1px dashed rgba(42,42,62,0.3);
    font-size: 10px;
    text-align: right;
  }
  .wd-summary strong { color: var(--pink); font-weight: 700; }
  .wd-memo {
    font-size: 9px;
    opacity: 0.75;
    padding: 2px 0 4px 8px;
    margin-left: 4px;
    margin-bottom: 3px;
    border-left: 2px solid var(--pink);
    line-height: 1.4;
  }

  /* ===== Memo list (monthly) ===== */
  .memo-list {
    display: flex;
    flex-direction: column;
    gap: 4px;
  }
  .memo-list:empty::before {
    content: '메모 없음 · 캘린더 날짜 숫자 탭으로 추가';
    font-size: 9.5px;
    opacity: 0.55;
    text-align: center;
    padding: 8px;
    display: block;
  }
  .memo-item {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 8px;
    padding: 7px 9px;
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    align-items: start;
    user-select: none;
  }
  .memo-item:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .memo-date {
    font-size: 11px;
    font-weight: 700;
    line-height: 1.2;
  }
  .memo-date small {
    font-size: 8.5px;
    opacity: 0.6;
    display: block;
    font-weight: 700;
    margin-top: 2px;
  }
  .memo-text {
    font-size: 10px;
    line-height: 1.45;
    word-break: break-word;
  }

  /* ===== Overtime toggle (checkbox) ===== */
  .overtime-toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    padding: 4px 0;
    user-select: none;
    position: relative;
  }
  .overtime-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
  }
  .check-box {
    width: 20px;
    height: 20px;
    background: var(--surface);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    position: relative;
    flex-shrink: 0;
    transition: background 0.15s;
  }
  .overtime-toggle input:checked + .check-box {
    background: var(--mint);
  }
  .overtime-toggle input:checked + .check-box::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: var(--ink);
    font-weight: 900;
  }
  .check-label { font-size: 11px; font-weight: 700; }

  /* ===== Action buttons (copy etc.) ===== */
  .result-actions {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr;
    gap: 5px;
    margin-top: 10px;
  }
  .action-btn {
    padding: 8px 6px;
    font-family: inherit;
    font-size: 9.5px;
    font-weight: 700;
    background: var(--lav);
    color: var(--on-accent);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    letter-spacing: 0.2px;
    white-space: nowrap;
  }
  .action-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }

  /* ===== Modal (memo editor) ===== */
  .modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: flex-start;
    justify-content: center;
    z-index: 999;
    padding: 50px 14px 16px;
    animation: modalFade 0.15s ease;
  }
  @keyframes modalFade {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  .modal-box {
    width: 100%;
    max-width: 360px;
    background: var(--bg-panel);
    border: 3px solid var(--ink);
    box-shadow: 5px 5px 0 var(--ink);
    padding: 14px;
    animation: modalSlide 0.18s ease;
  }
  @keyframes modalSlide {
    from { transform: translateY(-12px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
  }
  .modal-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    font-weight: 700;
    margin-bottom: 10px;
    color: var(--ink);
  }
  .modal-close {
    width: 26px; height: 26px;
    background: var(--surface);
    color: var(--ink);
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    padding: 0;
    line-height: 1;
  }
  .modal-close:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  #memoInput {
    width: 100%;
    min-height: 90px;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: var(--ink);
    background: var(--surface);
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--ink);
    padding: 10px;
    resize: none;
    border-radius: 0;
    outline: none;
    line-height: 1.5;
  }
  #memoInput:focus { background: var(--cream); }
  .modal-meta {
    text-align: right;
    font-size: 9px;
    opacity: 0.55;
    margin-top: 4px;
  }
  .modal-foot {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
  }
  .modal-btn {
    padding: 9px 18px;
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    border: 2px solid var(--ink);
    box-shadow: 2px 2px 0 var(--ink);
    cursor: pointer;
    color: var(--ink);
    border-radius: 0;
  }
  .modal-btn:active {
    transform: translate(2px, 2px);
    box-shadow: 0 0 0 var(--ink);
  }
  .modal-delete { background: var(--gray); }
  .modal-save { background: var(--mint); color: var(--on-accent); }

  /* ===== Toast ===== */
  .toast {
    position: fixed;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%) translateY(20px);
    background: var(--ink);
    color: var(--cream);
    padding: 10px 18px;
    border: 3px solid var(--ink);
    box-shadow: 3px 3px 0 var(--pink);
    font-family: inherit;
    font-size: 11px;
    font-weight: 700;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: 1000;
    letter-spacing: 0.5px;
  }
  .toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* ===== Payslip view (사장 제출용) ===== */
  body.payslip-mode { background: var(--bg-main); }
  body.payslip-mode > .app:not(.payslip-app) { display: none !important; }
  .payslip-app { padding-bottom: 40px; }
  .payslip-header { position: relative; text-align: center; background: var(--ink); color: var(--cream); border: 3px solid var(--ink); box-shadow: 4px 4px 0 var(--ink); padding: 16px 10px; margin-bottom: 14px; }
  .payslip-header h1 { font-size: 16px; letter-spacing: 2px; margin: 2px 0; }
  .payslip-issue { font-size: 10px; opacity: 0.85; font-weight: 400; margin-top: 4px; }
  .payslip-back-btn { position: absolute; top: 8px; left: 8px; width: 32px; height: 32px; background: var(--yellow); color: var(--ink); border: 2px solid var(--cream); font-size: 16px; font-weight: 900; cursor: pointer; box-shadow: 2px 2px 0 var(--cream); }
  .payslip-back-btn:active { transform: translate(2px, 2px); box-shadow: none; }
  .pm-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-bottom: 1px dashed var(--gray); font-size: 12px; }
  .pm-row:last-child { border-bottom: 0; }
  .pm-key { color: var(--ink); opacity: 0.75; flex-shrink: 0; }
  .pm-val { font-weight: 900; text-align: right; word-break: break-all; }
  .pm-input input { flex: 1; max-width: 60%; padding: 6px 8px; border: 2px solid var(--ink); background: var(--cream); color: var(--ink); font-family: inherit; font-weight: 900; font-size: 12px; text-align: right; }
  .payslip-detail-wrap { margin-top: 6px; font-size: 11px; }
  .pd-table { width: 100%; border-collapse: collapse; }
  .pd-table th, .pd-table td { border: 1px solid var(--ink); padding: 4px 6px; text-align: center; }
  .pd-table th { background: var(--yellow); font-size: 10px; letter-spacing: 0.5px; }
  .pd-table td.pd-num { text-align: right; font-variant-numeric: tabular-nums; }
  .pd-table tfoot td { background: var(--surface-cool); font-weight: 900; }
  .pd-empty { text-align: center; padding: 14px 8px; color: var(--ink); opacity: 0.5; font-size: 11px; }
  .ps-row { display: flex; justify-content: space-between; align-items: center; padding: 7px 0; font-size: 12px; border-bottom: 1px dashed var(--gray); }
  .ps-row:last-child { border-bottom: 0; }
  .ps-row .ps-val { font-weight: 900; font-variant-numeric: tabular-nums; }
  .ps-plus { color: var(--mint); }
  .ps-minus { color: var(--pink); }
  .ps-subtotal { border-top: 2px solid var(--ink); margin-top: 4px; padding-top: 9px; font-size: 13px; }
  .ps-deduct-detail { background: var(--surface-warm); border: 2px solid var(--pink); padding: 8px 10px; font-size: 11px; line-height: 1.7; margin-bottom: 8px; }
  .ps-deduct-detail .pdd-row { display: flex; justify-content: space-between; }
  .payslip-final-box { background: var(--yellow); }
  .ps-final { text-align: center; padding: 8px 4px; }
  .psf-lbl { font-size: 12px; letter-spacing: 1px; margin-bottom: 6px; }
  .psf-amt { font-size: 26px; font-weight: 900; letter-spacing: 1px; color: var(--ink); }
  .psf-won { font-size: 14px; margin-left: 4px; }
  .psf-sub { font-size: 10px; margin-top: 6px; opacity: 0.7; font-weight: 400; }
  .payslip-sign { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 8px; }
  .sign-block { text-align: center; }
  .sign-key { font-size: 10px; opacity: 0.7; margin-bottom: 6px; }
  .sign-line { height: 36px; border-bottom: 2px solid var(--ink); }
  .payslip-actions { display: flex; gap: 8px; margin: 16px 0 8px; }
  .payslip-actions .action-btn { flex: 1; }
  .payslip-footnote { font-size: 10px; text-align: center; opacity: 0.65; padding: 8px 4px; line-height: 1.5; }
  .open-payslip-btn { display: block; width: 100%; margin: 10px 0 0; padding: 12px 10px; background: var(--lav); color: var(--on-accent); border: 3px solid var(--ink); box-shadow: 3px 3px 0 var(--ink); font-family: inherit; font-weight: 900; font-size: 13px; letter-spacing: 0.5px; cursor: pointer; }
  .open-payslip-btn:active { transform: translate(3px, 3px); box-shadow: none; }

  /* C-20 job compare */
  .job-compare { margin-top: 10px; }
  .jc-title { font-size: 11px; font-weight: 900; margin-bottom: 6px; }
  .job-compare-table { width: 100%; border-collapse: collapse; font-size: 10px; }
  .job-compare-table th,
  .job-compare-table td { border: 2px solid var(--ink); padding: 6px 4px; text-align: left; }
  .job-compare-table th { background: var(--mint); color: var(--on-accent); }
  .job-compare-table tr.jc-active td { background: var(--yellow); font-weight: 900; }
  .job-compare-table td:nth-child(2),
  .job-compare-table td:nth-child(3) { text-align: right; white-space: nowrap; }

  /* ===== Print payslip ===== */
  @media print {
    @page { margin: 12mm; size: A4 portrait; }
    body { background: #fff !important; color: #000 !important; }
    body::before { display: none !important; }
    .header .theme-toggle, .header .sub, .coin,
    .mode-toggle, #jobsBox .job-tabs, #jobsBox .job-name-row,
    #weeklySection, #monthlySection, #weeklyAbsentSection,
    .pixel-box[id="companySizeToggle"], #shiftPresets, #autoFillBanner,
    .result-actions, #historySection, #badgesSection, .progress-section, #fillPatternBtn,
    .footer-note, #resetBtn, #installBtn, .led, .auto-fill-banner,
    .toast, .modal-backdrop, .preset-btn, .cal-nav, .total-row, .week-summary,
    .memo-list, .label[id="lbl-memos"], #jobSummary,
    #overtimeToggle, .overtime-toggle, .overtime-fields,
    #taxToggle, #taxModeHint, #overtimeHint, #soundToggle {
      display: none !important;
    }
    .app { box-shadow: none !important; max-width: none; padding: 0 !important; background: #fff !important; }
    .pixel-box, .result {
      box-shadow: none !important;
      border: 1px solid #000 !important;
      background: #fff !important;
      page-break-inside: avoid;
    }
    .result-row, .result-final { background: #fff !important; }
    .amount, .pct { color: #000 !important; }
    .printing::before {
      content: attr(data-print-title);
      display: block;
      text-align: center;
      font-size: 16px;
      font-weight: 900;
      letter-spacing: 1px;
      margin-bottom: 8px;
      padding-bottom: 6px;
      border-bottom: 2px solid #000;
    }
    #deductDetail { display: block !important; background: #fff !important; border: 1px solid #000 !important; }

    /* 명세서 뷰 인쇄 모드: 메인 .app 숨기고 명세서만 출력 */
    body.payslip-mode > .app:not(.payslip-app) { display: none !important; }
    .payslip-app { padding: 0 !important; max-width: none !important; }
    .payslip-header { background: #fff !important; color: #000 !important; box-shadow: none !important; border: 2px solid #000 !important; }
    .payslip-back-btn, .payslip-actions, .payslip-footnote { display: none !important; }
    .payslip-final-box { background: #fff !important; border: 2px solid #000 !important; }
    .ps-deduct-detail { background: #fff !important; border: 1px solid #000 !important; }
    .pd-table th { background: #f5f5f5 !important; color: #000 !important; }
    .pd-table tfoot td { background: #f5f5f5 !important; }
    .sign-line { border-bottom-color: #000 !important; }
    .payslip-meta-box input { border: none !important; background: transparent !important; }
    .ps-final-amt { font-size: 18px !important; font-weight: 900 !important; }
    .payslip-pay-box, .payslip-deduct-box, .payslip-detail-box {
      page-break-inside: avoid;
    }
    * { -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  /* Smaller screens (≤340px) */
  @media (max-width: 340px) {
    .app { padding: 12px 10px 28px; }
    .header h1 { font-size: 12px; }
    .day-row { grid-template-columns: 34px 1fr 30px 30px; gap: 6px; padding: 5px 6px; }
    .counter-btn { width: 28px; height: 28px; font-size: 15px; }
    .mode-btn { font-size: 10px; padding: 9px 4px; }
    .cal-grid { gap: 2px; }
    .cal-cell { min-height: 44px; padding: 2px 1px; }
    .cal-date { font-size: 8px; }
    .cal-hours-input { font-size: 11px; }
    .cal-head { font-size: 8px; }
  }


  /* ===== PC 사이드 패널 (≥1024px) ===== */
  @media (min-width: 1024px) {
    .app {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
      max-width: 960px;
      padding: 20px;
      align-items: start;
    }
    .app > .header,
    .app > .mode-toggle,
    .app > .footer-note,
    .app > #settingsPanel,
    .app > div[style*='justify-content:center'] {
      grid-column: 1 / -1;
    }
    /* 좌측 (입력): jobsBox / wage / salary / weekly / monthly / company / overtime / weeklyAbsent / tax */
    .app > #jobsBox,
    .app > #wageBox,
    .app > #salaryBox,
    .app > #weeklySection,
    .app > #monthlySection,
    .app > #companySizeBox,
    .app > #overtimeBox,
    .app > #weeklyAbsentSection,
    .app > #taxBox,
    .app > #leaveBox,
    .app > #yearEndBox,
    .app > #severanceBox {
      grid-column: 1;
    }
    /* 우측 (결과/사이드): resultBox / bookmarks / badges / history / progress */
    .app > #resultBox,
    .app > #bookmarksBox,
    .app > #badgesSection,
    .app > #historySection,
    .app > #progressBox {
      grid-column: 2;
    }
    /* 결과 박스 상단 sticky */
    .app > #resultBox {
      position: sticky;
      top: 12px;
    }
    /* 캘린더 셀 PC에서 더 크게 */
    .cal-cell { min-height: 56px; }
    /* 헤더 h1 PC 크게 */
    .header h1 { font-size: 18px; }
  }

  /* ===== Wide PC (≥1440px) — 3 column 가능 (옵션) ===== */
  @media (min-width: 1440px) {
    .app {
      max-width: 1200px;
      grid-template-columns: 1fr 1fr 1fr;
    }
    .app > .header,
    .app > .mode-toggle,
    .app > .footer-note,
    .app > div[style*='justify-content:center'] {
      grid-column: 1 / -1;
    }
    /* 좌측 col1: jobsBox + wage/salary */
    .app > #jobsBox,
    .app > #wageBox,
    .app > #salaryBox { grid-column: 1; }
    /* 중앙 col2: 입력 (시간 / 옵션) */
    .app > #weeklySection,
    .app > #monthlySection,
    .app > #companySizeBox,
    .app > #overtimeBox,
    .app > #weeklyAbsentSection,
    .app > #taxBox,
    .app > #leaveBox,
    .app > #yearEndBox,
    .app > #severanceBox { grid-column: 2; }
    /* 우측 col3: 결과/사이드 */
    .app > #resultBox,
    .app > #bookmarksBox,
    .app > #badgesSection,
    .app > #historySection,
    .app > #progressBox { grid-column: 3; }
  }