:root{
    --bg: #FFFBF9;
    --surface: #FFFFFF;
    --line: #F1E3E6;
    --pink-050: #FDF1F4;
    --pink-100: #FBE4EA;
    --pink-300: #F3AFC1;
    --pink-500: #E8899F;
    --pink-700: #C65D74;
    --ink: #3A2C30;
    --muted: #9C8388;
    --muted-2: #C8B4B8;
    --green: #7FB69E;
    --green-bg: #E8F4EF;
    --amber: #DB9A4E;
    --amber-bg: #FBF0DF;
    --gray: #B9AEB1;
    --gray-bg: #F2EDEE;
    --radius: 16px;
    --radius-sm: 10px;
    --shadow: 0 2px 10px rgba(198,93,116,0.06), 0 1px 2px rgba(198,93,116,0.04);
    font-size: 16px;
  }
  *{ box-sizing: border-box; }
  html,body{ margin:0; padding:0; }
  body{
    background: var(--bg);
    color: var(--ink);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "PingFang TC", "Microsoft JhengHei", "Helvetica Neue", Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
  }
  #app{ max-width: 1180px; margin: 0 auto; padding: 28px 20px 64px; }

  /* ---------- topbar ---------- */
  .topbar{
    display:flex; align-items:center; justify-content:space-between;
    flex-wrap: wrap; gap: 16px;
    margin-bottom: 24px;
  }
  .brand{ display:flex; align-items:center; gap:10px; }
  .logo-dot{
    width: 34px; height: 34px; border-radius: 10px;
    background: linear-gradient(135deg, var(--pink-300), var(--pink-700));
    display:inline-flex; align-items:center; justify-content:center;
    box-shadow: var(--shadow);
  }
  .logo-dot::after{ content:"✓"; color:#fff; font-weight:700; font-size:16px; }
  .brand h1{ font-size: 21px; font-weight: 700; margin:0; letter-spacing: 0.2px; }
  .brand p{ margin:0; font-size:12.5px; color:var(--muted); }

  .month-nav{
    display:flex; align-items:center; gap:6px;
    background: var(--surface); border:1px solid var(--line);
    border-radius: 999px; padding: 4px; box-shadow: var(--shadow);
  }
  .month-nav button{
    width: 34px; height:34px; border-radius:999px; border:none;
    background: transparent; color: var(--pink-700); font-size:18px;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition: background .15s ease;
  }
  .month-nav button:hover{ background: var(--pink-050); }
  .month-nav button:focus-visible{ outline: 2px solid var(--pink-500); outline-offset:2px; }
  .month-label{ font-weight:700; font-size:14.5px; min-width:104px; text-align:center; }
  .today-btn{
    border:none; background: var(--pink-100); color: var(--pink-700);
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;
    cursor:pointer; box-shadow: var(--shadow);
  }
  .today-btn:hover{ background: var(--pink-300); color:#fff; }

  .edit-mode-btn{
    border:none; background: var(--gray-bg); color: var(--muted);
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px;
    cursor:pointer; box-shadow: var(--shadow);
  }
  .edit-mode-btn:hover{ background: var(--gray); }
  .edit-mode-btn.is-edit{ background: var(--green); color:#fff; }
  .edit-mode-btn.is-edit:hover{ opacity:.9; }

  select:disabled,
  input:disabled,
  button:disabled{ opacity:.4; cursor:not-allowed; }

  /* ---------- stat cards ---------- */
  .stats-row{
    display:grid; grid-template-columns: repeat(5, 1fr); gap:12px;
    margin-bottom: 20px;
  }
  .stat-card{
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--radius-sm); padding: 14px 16px; box-shadow: var(--shadow);
  }
  .stat-card .label{ font-size:12px; color:var(--muted); margin-bottom:6px; }
  .stat-card .value{ font-size: 22px; font-weight:700; }
  .stat-card .value small{ font-size:12.5px; font-weight:500; color:var(--muted); margin-left:2px;}
  .stat-card.accent .value{ color: var(--pink-700); }

  /* ---------- card sections ---------- */
  .card{
    background: var(--surface); border:1px solid var(--line);
    border-radius: var(--radius); box-shadow: var(--shadow);
    padding: 20px 22px; margin-bottom: 18px;
  }
  .card-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom: 14px; flex-wrap:wrap; gap:10px;}
  .card-head h2{ font-size:15.5px; font-weight:700; margin:0; }
  .card-head .sub{ font-size:12px; color:var(--muted); }

  /* ---------- balance bars ---------- */
  .balance-row{ display:flex; align-items:center; gap:12px; margin-bottom:10px; }
  .balance-row:last-child{ margin-bottom:0; }
  .balance-name{ width: 68px; font-size:13px; font-weight:600; flex-shrink:0; }
  .balance-name-input{
    width: 68px; font-size:13px; font-weight:600; flex-shrink:0;
    border:none; background:transparent; color:var(--ink); padding:2px 0; font-family:inherit;
  }
  .balance-name-input:focus-visible{ outline: 2px solid var(--pink-500); border-radius:4px; }
  .balance-track{
    flex:1; height: 14px; background: var(--gray-bg); border-radius: 999px; overflow:hidden;
    position:relative;
  }
  .balance-fill{
    height:100%; border-radius:999px; transition: width .3s ease;
    background: var(--pink-300);
  }
  .balance-fill.ok{ background: var(--green); }
  .balance-fill.warn{ background: var(--amber); }
  .balance-hours{ width: 74px; text-align:right; font-size:12.5px; font-weight:700; color:var(--muted); flex-shrink:0; }
  .balance-target{
    position:absolute; top:-3px; bottom:-3px; width:2px; background: var(--ink); opacity:.25;
  }

  /* ---------- legend ---------- */
  .legend{ display:flex; gap:10px; flex-wrap:wrap; }
  .legend-chip{ display:flex; align-items:center; gap:6px; font-size:12px; color:var(--muted); }
  .legend-swatch{ width:12px; height:12px; border-radius:4px; }
  .sw-morning{ background: var(--pink-100); border:1px solid var(--pink-300); }
  .sw-evening{ background: var(--pink-300); }
  .sw-full{ background: var(--pink-700); }
  .sw-satshort{ background: #FBEFC8; border:1px solid #E0C468; }
  .sw-off{ background: var(--gray-bg); border:1px solid var(--gray); }
  .sw-leave{ background: repeating-linear-gradient(135deg, #FBE1DE, #FBE1DE 3px, #F6CFC9 3px, #F6CFC9 6px); border:1px solid #E39A8F; }

  /* ---------- doctor reference ---------- */
  .doctor-week-wrap{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--line); }
  table.doctor-week{ border-collapse: collapse; width:100%; min-width: 680px; }
  table.doctor-week th{
    background: var(--pink-050); color: var(--pink-700); font-size:12px; font-weight:700;
    padding: 8px 6px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap;
  }
  table.doctor-week td{ padding: 6px; border-bottom:1px solid var(--line); vertical-align: top; text-align:center; }
  table.doctor-week tr:last-child td{ border-bottom:none; }
  .doctor-name-cell{ text-align:left !important; padding-left:12px !important; }
  .doctor-name-input{
    border:none; background:transparent; width:88px; font-size:13px; font-weight:700;
    color:var(--ink); padding:2px 0;
  }
  .doctor-name-input:focus-visible{ outline: 2px solid var(--pink-500); border-radius:4px; }
  .session-toggles{ display:flex; gap:2px; justify-content:center; margin-bottom:4px; }
  .session-btn{
    width:22px; height:22px; border-radius:6px; border:1px solid var(--line);
    background: var(--surface); font-size:10.5px; color:var(--muted); cursor:pointer;
    display:flex; align-items:center; justify-content:center; padding:0;
  }
  .session-btn.active{ background: var(--pink-500); border-color: var(--pink-500); color:#fff; font-weight:700; }
  .session-btn:focus-visible{ outline: 2px solid var(--pink-700); outline-offset:1px; }
  .cycle-select{
    font-size:10.5px; color:var(--muted); border:1px solid var(--line); border-radius:6px;
    background: var(--surface); padding:2px 3px; width:100%; cursor:pointer;
  }
  .cycle-select:disabled{ opacity:.35; cursor:default; }
  .doctor-note{ font-size:11.5px; color:var(--muted); margin-top:10px; line-height:1.6; }

  select.shift-select.over-limit{
    outline: 2px solid #D64545; outline-offset: 1px;
  }

  .week-check-wrap{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--line); }
  table.week-check{ border-collapse: collapse; width:100%; min-width: 560px; }
  table.week-check th{
    background: var(--pink-050); color: var(--pink-700); font-size:12px; font-weight:700;
    padding: 8px 8px; border-bottom:1px solid var(--line); text-align:center; white-space:nowrap;
  }
  table.week-check th:first-child{ text-align:left; padding-left:12px; }
  table.week-check td{ padding: 8px; border-bottom:1px solid var(--line); text-align:center; font-size:13px; }
  table.week-check tr:last-child td{ border-bottom:none; }
  table.week-check td:first-child{ text-align:left; padding-left:12px; color:var(--muted); font-size:12px; white-space:nowrap; }
  .wk-hours{ font-weight:700; }
  .wk-hours.over{ color:#D64545; }
  .wk-badge{
    display:inline-block; font-size:10.5px; font-weight:700; padding:2px 7px; border-radius:999px;
    background:#FBE1DE; color:#B4503F; margin-left:4px;
  }
    display:inline-block; font-size:10px; font-weight:700; padding:2px 6px; border-radius:999px;
    margin:1px; background: var(--pink-100); color: var(--pink-700); white-space:nowrap;
  }
  .doc-chip.d1{ background:#FBE4EA; color:#C65D74; }
  .doc-chip.d2{ background:#F3E4FB; color:#8B5DC6; }
  .doc-chip.d3{ background:#E4F0FB; color:#5D8CC6; }
  .doc-chip.d4{ background:#E4FBEE; color:#4EA36C; }

  /* ---------- table ---------- */
  .table-scroll{ overflow-x:auto; border-radius: var(--radius-sm); border:1px solid var(--line); }
  table{ border-collapse: collapse; width:100%; min-width: 760px; }
  thead th{
    position: sticky; top:0; background: var(--pink-050);
    font-size:12.5px; color:var(--pink-700); font-weight:700;
    padding: 10px 8px; text-align:center; border-bottom:1px solid var(--line);
    white-space:nowrap;
  }
  thead th:first-child, thead th:nth-child(2){ text-align:left; padding-left:14px; }
  .staff-name-input{
    border:none; background:transparent; width:100%; max-width:76px; font-size:12.5px; font-weight:700;
    color: var(--pink-700); text-align:center; padding:2px 0; font-family:inherit;
  }
  .staff-name-input:focus-visible{ outline: 2px solid var(--pink-500); border-radius:4px; }
  tbody td{
    padding: 6px 6px; text-align:center; border-bottom:1px solid var(--line);
    font-size:13px;
  }
  tbody tr:last-child td{ border-bottom:none; }
  tbody tr.weekend{ background: #FFFCF7; }
  tbody tr.holiday{ background: var(--pink-050); }
  .date-cell{ text-align:left !important; padding-left:14px !important; white-space:nowrap; }
  .date-cell .d{ font-weight:700; }
  .date-cell .w{ color:var(--muted); font-size:11.5px; margin-left:4px; }
  .holiday-toggle{
    display:flex; align-items:center; justify-content:center; gap:5px; cursor:pointer;
    font-size:11px; color:var(--muted);
  }
  .holiday-toggle input{ accent-color: var(--pink-700); width:14px; height:14px; cursor:pointer; }

  select.shift-select{
    width: 76px; border-radius: 999px; border:1px solid var(--line);
    padding: 6px 4px; font-size:12.5px; font-weight:600; text-align:center;
    text-align-last:center; cursor:pointer; color: var(--ink); background: var(--gray-bg);
    transition: background .15s ease, border-color .15s ease;
    -webkit-appearance:none; appearance:none;
  }
  select.shift-select:focus-visible{ outline: 2px solid var(--pink-500); outline-offset:1px; }
  select.shift-select.v-morning{ background: var(--pink-100); border-color: var(--pink-300); color:var(--pink-700); }
  select.shift-select.v-evening{ background: var(--pink-300); border-color: var(--pink-300); color:#fff; }
  select.shift-select.v-full{ background: var(--pink-700); border-color: var(--pink-700); color:#fff; }
  select.shift-select.v-satshort{ background: #FBEFC8; border-color: #E0C468; color: #8A6D1E; }
  select.shift-select.v-off{ background: var(--gray-bg); border-color: var(--gray); color:var(--muted); }
  select.shift-select.v-leave{
    background: repeating-linear-gradient(135deg, #FBE1DE, #FBE1DE 4px, #F6CFC9 4px, #F6CFC9 8px);
    border-color: #E39A8F; color: #B4503F; font-weight:700;
  }

  .hint{ text-align:center; font-size:12px; color: var(--muted-2); margin-top: 22px; }

  .toolbar-actions{ display:flex; gap:8px; }
  .btn-ghost{
    border:1px solid var(--line); background:var(--surface); color:var(--pink-700);
    font-size:12.5px; font-weight:600; padding:8px 14px; border-radius:999px; cursor:pointer;
  }
  .btn-ghost:hover{ background: var(--pink-050); }

  .print-header{ display:none; }

  @media print{
    body *{ visibility:hidden; }
    #scheduleCard, #scheduleCard *{ visibility:visible; }
    #scheduleCard{
      position:absolute; left:0; top:0; width:100%;
      box-shadow:none; border:none; padding:0; margin:0;
    }
    #scheduleCard .no-print{ display:none !important; }
    .print-header{ display:block; margin-bottom:14px; }
    .print-header h2{ font-size:18px; margin:0 0 4px; }
    .print-header p{ font-size:11px; color:#666; margin:0; }
    @page{ size: A4 landscape; margin: 10mm; }
    table{ min-width:0 !important; width:100%; }
    thead{ display: table-header-group; }
    tbody tr{ page-break-inside: avoid; }
    select.shift-select{
      border:1px solid #ccc !important; -webkit-print-color-adjust: exact; print-color-adjust: exact;
    }
    .doc-chip{ -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  }

  @media (max-width: 860px){
    .stats-row{ grid-template-columns: repeat(2,1fr); }
    .doctor-grid{ grid-template-columns: repeat(2,1fr); }
  }
  @media (prefers-reduced-motion: reduce){
    *{ transition: none !important; }
  }