/* Extracted from the approved baseline; rule order is intentionally preserved. */
:root {
      font-size: 100%;
      --page: #F1F1F1;
      --surface: #FFFFFF;
      --surface-soft: #F8F8F8;
      --brown: #8B634A;
      --brown-dark: #684832;
      --brown-soft: #F3ECE7;
      --ink: #292929;
      --muted: #858585;
      --line: #E6E6E6;
      --green: #3F8060;
      --green-soft: #EAF4EE;
      --red: #B65B50;
      --red-soft: #F9ECEA;
      --blue: #557B9B;
      --shadow: 0 0.3125rem 1.25rem rgba(30, 30, 30, .045);
      font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
      color: var(--ink);
      background: var(--page);
    }

    * {
      box-sizing: border-box;
    }

    html {
      min-width: 20rem;
      background: var(--page);
    }

    body {
      margin: 0;
      padding: 1.5rem;
      background: var(--page);
      color: var(--ink);
      font-size: 0.875rem;
      line-height: 1.5;
    }

    button,
    input,
    select,
    textarea {
      font: inherit;
    }

    button {
      cursor: pointer;
      border: 1px solid transparent;
      border-radius: 0.625rem;
      padding: 0.625rem 0.9375rem;
      background: #F4F4F4;
      color: #444;
      font-weight: 600;
      transition: background .18s, color .18s, border-color .18s, transform .18s, box-shadow .18s;
    }

    button:hover {
      background: #EAEAEA;
    }

    button:active {
      transform: translateY(1px);
    }

    button:focus-visible,
    input:focus-visible,
    select:focus-visible {
      outline: 0.1875rem solid rgba(139, 99, 74, .18);
      outline-offset: 1px;
    }

    button:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    button.primary {
      background: var(--brown);
      color: #fff;
      box-shadow: 0 0.1875rem 0.5rem rgba(139, 99, 74, .16);
    }

    button.primary:hover {
      background: var(--brown-dark);
    }

    button.danger {
      color: var(--red);
      background: var(--red-soft);
    }

    button.danger:hover {
      background: #F3DEDA;
    }

    select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 2.625rem !important;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238B634A' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 0.875rem center;
      background-size: 1rem;
    }

    input,
    select,
    textarea {
      width: 100%;
      min-width: 0;
      max-width: 100%;
      padding: 0.6875rem 0.8125rem;
      border: 1px solid #DEDEDE;
      border-radius: 0.5625rem;
      background: #fff;
      color: var(--ink);
      transition: border-color .18s, box-shadow .18s;
    }

    input:focus,
    select:focus,
    textarea:focus {
      outline: none;
      border-color: var(--brown);
      box-shadow: 0 0 0 0.1875rem rgba(139, 99, 74, .10);
    }

    label {
      display: block;
      margin-bottom: 0.4375rem;
      color: #686868;
      font-size: 0.75rem;
      font-weight: 650;
    }

    h1,
    h2,
    h3,
    p {
      margin-top: 0;
    }

    h1 {
      margin-bottom: 0.1875rem;
      font-size: 1.4375rem;
      line-height: 1.3;
      letter-spacing: -.6px;
    }

    h2 {
      margin-bottom: 0;
      font-size: 1.1875rem;
      letter-spacing: -.4px;
    }

    h3 {
      margin-bottom: 0;
      font-size: 0.9375rem;
      letter-spacing: -.2px;
    }

    .wrap {
      max-width: 93.75rem;
      margin: 0 auto;
    }

    .header {
      min-height: 4.25rem;
      display: flex;
      align-items: center;
      gap: 1rem;
      margin: 0 0 1.25rem;
      padding: 0 0.125rem;
    }

    .brand {
      display: flex;
      align-items: center;
      gap: 0.8125rem;
    }

    /* Brand mark: fixed viewport, enlarged artwork clipped inside */
    .brand-icon {
      position: relative;
      width: 2.875rem;
      height: 2.875rem;
      flex: 0 0 3.7rem;
      display: block;
      overflow: hidden;
      isolation: isolate;
      border-radius: 0.875rem;
      background: transparent;
      box-shadow: none;
      overflow: hidden;
    }

    .brand-icon > img {
      position: absolute;
      left: 50%;
      top: 50%;
      display: block;
      width: 100px;
      height: 63px;
      max-width: none;
      object-fit: contain;
      border-radius: 0;
      transform: translate(-50%, -50%);
      pointer-events: none;
    }

    .subtitle {
      margin-top: 0.25rem;
      color: var(--muted);
      font-size: 0.75rem;
    }

    .app-layout {
      display: grid;
      grid-template-columns: 13.625rem minmax(0, 1fr);
      gap: 1.375rem;
      align-items: start;
    }

    .tabs {
      position: sticky;
      top: 1.25rem;
      display: flex;
      flex-direction: column;
      gap: 0.375rem;
      padding: 0.75rem;
      background: var(--surface);
      border: 1px solid #EAEAEA;
      border-radius: 1rem;
      box-shadow: var(--shadow);
    }

    .tab {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      min-height: 2.875rem;
      padding: 0 0.875rem;
      border-radius: 0.625rem;
      background: transparent;
      color: #6C6C6C;
      text-align: left;
      font-size: 0.8125rem;
      font-weight: 650;
    }

    .tab:hover {
      background: linear-gradient(135deg,
          #FAF6F2 0%,
          #F3EAE3 100%);
      color: var(--brown-dark);
    }

    .tab.active {
      background: linear-gradient(135deg, #FBF6F1 0%, #F0E4DA 100%);
      color: var(--brown-dark);
      border: 1px solid #E8D8CB;
      box-shadow:
        0 3px 8px rgba(139, 99, 74, .10),
        inset 0 1px 0 rgba(255, 255, 255, .9);
    }

    .main-content {
      min-width: 0;
    }

    .section {
      display: none;
      min-width: 0;
    }

    .section.active {
      display: block;
      animation: sectionIn .2s ease-out;
    }

    @keyframes sectionIn {
      from {
        opacity: .65;
        transform: translateY(0.25rem);
      }

      to {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .card {
      min-width: 0;
      margin-bottom: 1.125rem;
      padding: 1.375rem;
      background: var(--surface);
      border: 1px solid #E8E8E8;
      border-radius: 0.9375rem;
      box-shadow: var(--shadow);
    }

    .section-title {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 1.125rem;
    }

    .section-title h2,
    .section-title h3 {
      margin: 0;
    }

    .grid {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.9375rem;
    }

    .stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 0.875rem;
      margin-bottom: 1.125rem;
    }

    .stat {
      min-width: 0;
      padding: 1.1875rem 1.25rem;
      background: var(--surface);
      border: 1px solid #E8E8E8;
      border-radius: 0.875rem;
      box-shadow: var(--shadow);
    }

    .stat-label {
      color: #777;
      font-size: 0.75rem;
      font-weight: 600;
    }

    .stat-value {
      margin-top: 0.625rem;
      color: var(--brown-dark);
      font-size: clamp(1.25rem, 2vw, 1.625rem);
      font-weight: 750;
      letter-spacing: -.7px;
      overflow-wrap: anywhere;
    }

    .stat-unit {
      margin-left: 0.1875rem;
      color: #777;
      font-size: 0.75rem;
      font-weight: 500;
    }

    .actions {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      flex-wrap: wrap;
      margin-top: 1.125rem;
    }

    .save-status {
      display: inline-flex;
      align-items: center;
      gap: 0.4375rem;
      min-height: 1.375rem;
      font-size: 0.75rem;
    }

    .save-status.loading {
      color: #806D5D;
    }

    .save-status.success {
      color: var(--green);
    }

    .save-status.error {
      color: #B42318;
    }

    .spinner {
      display: none;
      width: 0.9375rem;
      height: 0.9375rem;
      border: 0.125rem solid #E5E5E5;
      border-top-color: var(--brown);
      border-radius: 50%;
      animation: spin .7s linear infinite;
    }

    .loading .spinner {
      display: inline-block;
    }

    @keyframes spin {
      to {
        transform: rotate(360deg);
      }
    }

    .muted {
      color: var(--muted);
      font-size: 0.75rem;
    }

    .small {
      font-size: 0.6875rem;
    }

    .field {
      min-width: 0;
    }

    .scroll {
      max-width: 100%;
      overflow-x: auto;
      -webkit-overflow-scrolling: touch;
    }

    table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      font-size: 0.75rem;
    }

    th,
    td {
      padding: 0.75rem 0.6875rem;
      border-bottom: 1px solid #EEEEEE;
      text-align: left;
      white-space: nowrap;
    }

    th {
      color: #777;
      background: #F8F8F8;
      font-weight: 700;
    }

    th:first-child {
      border-radius: 0.5rem 0 0 0;
    }

    th:last-child {
      border-radius: 0 0.5rem 0 0;
    }

    tbody tr:hover td {
      background: #FAFAFA;
    }

    .hidden {
      display: none !important;
    }

    .dashboard-intro {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 1.125rem;
      min-height: 7rem;
      padding: 1.5rem 1.625rem;
      background: linear-gradient(115deg, #FFFFFF 0%, #F8F5F2 100%);
      border: 1px solid #E9E3DE;
      border-radius: 1rem;
      box-shadow: var(--shadow);
      margin-bottom: 1rem;
    }


    .dashboard-intro h2 {
      font-size: 1.3125rem;
    }

    .dashboard-panels {
      display: grid;
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
      gap: 1.125rem;
      align-items: start;
    }

    .dashboard-panels .card {
      height: 100%;
    }

    .record-filters {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 0.75rem;
      margin-bottom: 1.125rem;
    }

    .record-groups {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 0.875rem;
    }

    .record-day-card {
      min-width: 0;
      padding: 0.9375rem;
      border: 1px solid #EAEAEA;
      border-radius: 0.75rem;
      background: #fff;
    }

    .record-day-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.625rem;
      margin-bottom: 0.6875rem;
      padding-bottom: 0.625rem;
      border-bottom: 1px solid #EEEEEE;
    }

    .record-day-title {
      font-size: 0.8125rem;
      font-weight: 750;
    }

    .record-day-total {
      color: var(--muted);
      font-size: 0.6875rem;
    }

    .record-item {
      padding: 0.6875rem 0;
      border-bottom: 1px solid #F1F1F1;
    }

    .record-item:last-child {
      border-bottom: 0;
      padding-bottom: 0;
    }

    .record-row-main {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.625rem;
    }

    .record-employee {
      display: flex;
      align-items: center;
      gap: 0.5rem;
      min-width: 0;
      font-weight: 700;
    }

    .record-color-dot {
      width: 0.5625rem;
      height: 0.5625rem;
      flex: 0 0 0.5625rem;
      border-radius: 50%;
    }

    .record-hours {
      color: var(--brown-dark);
      font-size: 0.8125rem;
      font-weight: 750;
      white-space: nowrap;
    }

    .record-row-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.3125rem;
      margin-top: 0.5rem;
    }

    .record-tag,
    .status-chip {
      display: inline-flex;
      align-items: center;
      padding: 0.25rem 0.5rem;
      border-radius: 1.25rem;
      background: #F2F2F2;
      color: #666;
      font-size: 0.625rem;
      font-weight: 650;
    }

    .record-memo {
      margin-top: 0.4375rem;
      color: var(--muted);
      font-size: 0.6875rem;
    }

    .record-actions {
      display: flex;
      justify-content: flex-end;
      gap: 0.375rem;
      margin-top: 0.5625rem;
    }

    .record-actions button {
      padding: 0.375rem 0.625rem;
      font-size: 0.6875rem;
    }

    .record-delete {
      color: var(--red);
      background: var(--red-soft);
    }

    .record-empty,
    .empty {
      padding: 2rem 0.75rem;
      color: var(--muted);
      text-align: center;
      font-size: 0.75rem;
    }

    .calendar-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.75rem;
      flex-wrap: wrap;
      margin-bottom: 1rem;
    }

    .calendar-month {
      color: var(--brown-dark);
      font-size: 1.375rem;
      font-weight: 750;
      letter-spacing: -.5px;
    }

    .calendar-nav {
      display: flex;
      align-items: center;
      gap: 0.4375rem;
    }

    .calendar-nav button {
      padding: 0.5625rem 0.75rem;
    }

    .calendar-nav input {
      width: 9.0625rem;
    }

    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, minmax(0, 1fr));
      overflow: hidden;
      border: 1px solid #E8E8E8;
      border-radius: 0.6875rem;
    }

    .weekday {
      padding: 0.6875rem 0.25rem;
      background: #F7F7F7;
      border-right: 1px solid #EAEAEA;
      border-bottom: 1px solid #EAEAEA;
      color: #777;
      text-align: center;
      font-size: 0.6875rem;
      font-weight: 750;
    }

    .weekday:first-child {
      color: #B65B50;
    }

    .weekday:last-child {
      color: var(--blue);
    }

    .day-cell {
      min-width: 0;
      min-height: 7rem;
      padding: 0.4375rem;
      background: #fff;
      border-right: 1px solid #EEEEEE;
      border-bottom: 1px solid #EEEEEE;
      cursor: pointer;
    }

    .day-cell:hover {
      background: #FAF8F6;
    }

    .day-cell.other-month {
      background: #FAFAFA;
    }

    .day-cell.other-month .day-number {
      color: #C8C8C8;
    }

    .day-number {
      margin-bottom: 0.4375rem;
      font-size: 0.75rem;
      font-weight: 750;
    }

    .day-cell.today {
      background: #F8F3EF;
    }

    .day-cell.today .day-number {
      display: inline-grid;
      place-items: center;
      width: 1.4375rem;
      height: 1.4375rem;
      border-radius: 50%;
      background: var(--brown);
      color: #fff;
    }

    .day-cell.selected {
      box-shadow: inset 0 0 0 0.125rem var(--brown);
    }

    .calendar-event {
      display: block;
      margin-bottom: 0.25rem;
      padding: 0.25rem 0.3125rem;
      overflow: hidden;
      border-radius: 0.3125rem;
      font-size: 0.625rem;
      line-height: 1.35;
      text-overflow: ellipsis;
      white-space: nowrap;
    }

    .more-events {
      padding: 0.125rem;
      color: var(--muted);
      font-size: 0.625rem;
    }

    .legend {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 0.8125rem;
      margin-top: 0.875rem;
    }

    .legend-item {
      display: inline-flex;
      align-items: center;
      gap: 0.3125rem;
      color: #777;
      font-size: 0.6875rem;
    }

    .legend-color {
      width: 0.625rem;
      height: 0.625rem;
      border-radius: 0.25rem;
    }

    .calendar-detail {
      margin-top: 0.9375rem;
      padding: 0.875rem 1rem;
      border: 1px solid #EAEAEA;
      border-radius: 0.6875rem;
      background: #FAFAFA;
    }

    .detail-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.625rem;
      padding: 0.5625rem 0;
      border-bottom: 1px solid #EAEAEA;
      font-size: 0.75rem;
    }

    .detail-item:last-child {
      border-bottom: 0;
    }

    .employee-chip {
      display: inline-block;
      padding: 0.25rem 0.5rem;
      border-radius: 0.375rem;
      font-size: 0.6875rem;
      font-weight: 700;
    }

    .today-list {
      display: flex;
      flex-direction: column;
      gap: 0.5rem;
    }

    .today-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 0.625rem;
      padding: 0.75rem;
      border: 1px solid #EEEEEE;
      border-radius: 0.625rem;
      background: #fff;
    }

    .today-item-main {
      display: flex;
      align-items: center;
      gap: 0.5625rem;
      min-width: 0;
    }

    .today-dot {
      width: 0.5625rem;
      height: 0.5625rem;
      flex-shrink: 0;
      border-radius: 50%;
    }

    .today-name {
      font-size: 0.75rem;
      font-weight: 700;
    }

    .today-info {
      margin-top: 0.1875rem;
      color: var(--muted);
      font-size: 0.625rem;
    }

    .empty-dashboard {
      padding: 1.25rem;
      border: 1px dashed #DDDDDD;
      border-radius: 0.625rem;
      background: #FAFAFA;
      color: var(--muted);
      text-align: center;
      font-size: 0.75rem;
    }

    .month-link {
      padding: 0.3125rem;
      background: transparent;
      color: var(--brown);
      font-size: 0.6875rem;
      font-weight: 700;
    }

    .month-link:hover {
      background: var(--brown-soft);
    }

    .calendar-card {
      margin-bottom: 0;
    }

    .record-form-card {
      margin-bottom: 0;
    }

    .records-top-grid {
      display: grid;
      grid-template-columns: minmax(0, 1.55fr) minmax(18.75rem, .85fr);
      gap: 1.125rem;
      align-items: start;
      margin-bottom: 1.125rem;
    }

    .records-top-grid .card {
      height: 100%;
    }

    .employee-layout {
      display: grid;
      grid-template-columns: minmax(18.75rem, .9fr) minmax(0, 1.4fr);
      gap: 1.125rem;
      align-items: start;
    }

    .employee-layout .card {
      height: 100%;
    }

    .employee-layout .grid {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .stats .stat:nth-child(3) .stat-value {
      color: var(--brown);
    }

    #payrollContent .stats {
      grid-template-columns: repeat(4, minmax(0, 1fr));
    }

    #payrollContent .card {
      box-shadow: none;
      background: #FCFCFC;
    }

    #payrollContent .card+.card {
      margin-top: 0.875rem;
    }

    #payrollContent table {
      min-width: 45rem;
    }

    #employeesBody button {
      padding: 0.375rem 0.5625rem;
      font-size: 0.6875rem;
    }

    #hourlyWage {
      max-width: 18.75rem;
    }

    .field input[type="color"] {
      height: 2.75rem;
      padding: 0.25rem;
    }

    @media (max-width: 68.75rem) {
      body {
        padding: 1.125rem;
      }

      .app-layout {
        grid-template-columns: 11.875rem minmax(0, 1fr);
        gap: 1rem;
      }

      .card {
        padding: 1.125rem;
      }

      .records-top-grid {
        grid-template-columns: minmax(0, 1.25fr) minmax(16.875rem, .85fr);
      }

      .record-groups {
        grid-template-columns: 1fr;
      }

      .day-cell {
        min-height: 5.75rem;
      }
    }

    @media (max-width: 820px) {
      body {
        padding: 1rem;
      }

      .app-layout {
        grid-template-columns: 1fr;
        gap: 0.875rem;
      }

      .tabs {
        position: static;
        flex-direction: row;
        gap: 0.3125rem;
        padding: 0.4375rem;
        overflow-x: auto;
      }

      .tab {
        width: auto;
        min-width: max-content;
        min-height: 2.625rem;
        justify-content: center;
        padding: 0 0.8125rem;
      }

      .tab.active {
        background: linear-gradient(135deg, #FBF6F1 0%, #F0E4DA 100%);
        color: var(--brown-dark);
        border: 1px solid #E8D8CB;
        box-shadow:
          0 3px 8px rgba(139, 99, 74, .10),
          inset 0 1px 0 rgba(255, 255, 255, .9);
      }

      .dashboard-panels {
        grid-template-columns: 1fr;
        gap: 1rem;
      }

      .records-top-grid,
      .employee-layout {
        grid-template-columns: 1fr;
      }

      .records-top-grid .card,
      .employee-layout .card {
        height: auto;
      }

      .stats,
      #payrollContent .stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      .grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }
    }

    @media (max-width: 35rem) {
      body {
        padding: 0.625rem;
      }

      .header {
        min-height: 3.375rem;
        margin-bottom: 0.75rem;
      }

      .brand {
        gap: 0.5625rem;
      }


      h1 {
        font-size: 1.1875rem;
      }

      .subtitle {
        font-size: 0.6875rem;
      }

      .header>button {
        padding: 0.5rem 0.625rem;
        font-size: 0.6875rem;
      }

      .tabs {
        margin: 0 -1px 0.8125rem;
        border-radius: 0.75rem;
      }

      .tab {
        min-height: 2.5rem;
        padding: 0 0.6875rem;
        font-size: 0.6875rem;
      }

      .card {
        margin-bottom: 0.75rem;
        padding: 0.9375rem;
        border-radius: 0.8125rem;
      }

      .section-title {
        align-items: flex-start;
        margin-bottom: 0.875rem;
      }

      h2 {
        font-size: 1.0625rem;
      }

      h3 {
        font-size: 0.875rem;
      }

      .dashboard-intro {
        align-items: flex-start;
        flex-direction: column;
        gap: 0.8125rem;
        min-height: 0;
        padding: 1.125rem;
        margin-bottom: 1rem
      }

      .dashboard-intro h2 {
        font-size: 1.125rem;
      }

      .dashboard-intro .primary {
        width: 100%;
      }

      .stats,
      #payrollContent .stats {
        gap: 0.5625rem;
        margin-bottom: 0.75rem;
      }

      .stat {
        padding: 0.8125rem;
        border-radius: 0.6875rem;
      }

      .stat-label {
        font-size: 0.625rem;
      }

      .stat-value {
        margin-top: 0.4375rem;
        font-size: 1.1875rem;
      }

      .grid,
      .employee-layout .grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0.75rem;
      }

      .grid>*,
      .field,
      .grid input,
      .grid select,
      .grid textarea {
        width: 100%;
        min-width: 0;
        max-width: 100%;
      }

      .record-filters {
        grid-template-columns: 1fr;
        gap: 0.625rem;
      }

      .record-groups {
        grid-template-columns: 1fr;
        gap: 0.625rem;
      }

      .calendar-toolbar {
        align-items: flex-start;
        flex-direction: column;
      }

      .calendar-month {
        font-size: 1.25rem;
      }

      .calendar-nav {
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        width: 100%;
      }

      .calendar-nav button {
        padding: 0.5rem 0.4375rem;
        font-size: 0.6875rem;
      }

      .calendar-nav input {
        width: 100%;
        min-width: 0;
      }

      .calendar-grid {
        border-radius: 0.5rem;
      }

      .weekday {
        padding: 0.5rem 1px;
        font-size: 0.625rem;
      }

      .day-cell {
        min-height: 4.125rem;
        padding: 0.25rem 0.1875rem;
      }

      .day-number {
        margin-bottom: 0.25rem;
        font-size: 0.625rem;
      }

      .day-cell.today .day-number {
        width: 1.25rem;
        height: 1.25rem;
      }

      .calendar-event {
        margin-bottom: 0.125rem;
        padding: 0.125rem;
        border-radius: 0.1875rem;
        font-size: 0.5rem;
      }

      .more-events {
        font-size: 0.5rem;
      }

      .legend {
        gap: 0.4375rem 0.625rem;
      }

      .legend-item {
        font-size: 0.625rem;
      }

      .calendar-detail {
        padding: 0.6875rem;
      }

      .detail-item {
        align-items: flex-start;
        font-size: 0.6875rem;
      }

      .actions {
        gap: 0.4375rem;
      }

      .actions button {
        min-height: 2.6875rem;
        flex: 1 1 auto;
      }

      .save-status {
        flex-basis: 100%;
      }

      .record-day-card {
        padding: 0.75rem;
      }

      .record-item {
        padding: 0.625rem 0;
      }

      .record-actions button {
        min-height: 2.125rem;
        flex: 0 0 auto;
      }

      .scroll {
        margin-right: -2px;
      }

      #employeesBody button {
        min-height: 2.125rem;
      }

      #payrollContent .card {
        padding: 0.8125rem;
      }

      #payrollContent .section-title {
        align-items: center;
      }

      #payMonth {
        max-width: 100% !important;
      }

      #hourlyWage {
        max-width: 100%;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      *,
      *::before,
      *::after {
        animation-duration: .01ms !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
      }
    }

    .day-override-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin:8px 0 10px}.day-override-row{display:grid;grid-template-columns:58px 1fr 1fr;gap:7px;align-items:center;padding:9px;border:1px solid #E8E9EF;border-radius:10px;background:#fff}.day-override-row label{margin:0;font-size:12px}.day-override-row input[type=checkbox]{width:auto}.day-override-row input[type=time]{padding:7px 5px;font-size:12px}.day-override-row .day-toggle{display:flex;align-items:center;gap:5px}.day-override-row input:disabled{background:#F5F5F7;color:#A0A0A8}
    @media(max-width:520px){.day-override-grid{grid-template-columns:1fr}.day-override-row{grid-template-columns:54px 1fr 1fr}}
    /* Premium lavender analytics redesign */
    :root{--page:#F4F4F4;--surface:#FFFFFF;--surface-soft:#F4F4F4;--brown:#C1B8FF;--brown-dark:#6556B5;--brown-soft:#EEEAFE;--ink:#0D0C15;--muted:#7B7D89;--line:#E6E7ED;--green:#4C9B82;--green-soft:#E7F5EF;--red:#D66C72;--red-soft:#FCEEEF;--blue:#8D83D8;--shadow:0 10px 34px rgba(36,39,58,.055)}
    body{padding:0;background:var(--page);color:var(--ink);font-family:"Pretendard",Inter,-apple-system,BlinkMacSystemFont,"Noto Sans KR",sans-serif;font-weight:300;letter-spacing:-.035em}
    .wrap{max-width:none;margin:0;min-height:100vh}.app-layout{grid-template-columns:234px minmax(0,1fr);gap:0;min-height:100vh}
    .sidebar{position:sticky;top:0;height:100vh;background:rgba(255,255,255,.76);border-right:1px solid #E1E3EA;display:flex;flex-direction:column;padding:24px 16px}
    .sidebar-brand{display:flex;align-items:center;gap:12px;padding:0 8px 24px;border-bottom:1px solid #E7E8ED}
    .sidebar-brand strong{display:block;font-size:17px;letter-spacing:-.5px}.sidebar-brand small{display:block;color:#858793;font-size:11px;margin-top:2px;white-space:nowrap}
    .tabs{position:static;margin-top:22px;padding:0;background:transparent;border:0;border-radius:0;box-shadow:none;gap:7px}.tab{min-height:48px;padding:0 14px;border-radius:13px;color:#646777;font-size:13px;font-weight:550;gap:12px}.nav-icon{width:22px;text-align:center;font-size:19px;color:#727589}.tab:hover{background:#F0EEFA;color:#51439D}.tab.active{background:linear-gradient(110deg,#F0EDFF,#E9E5FC);color:#4B3C9B;border:1px solid transparent;box-shadow:none}.tab.active .nav-icon{color:#5546B0}.sidebar-foot{margin-top:auto;padding:16px 8px 0;border-top:1px solid #E7E8ED;color:#A0A2AD;font-size:9px;letter-spacing:1.5px}
    .main-content{padding:26px clamp(20px,3vw,48px) 42px;min-width:0}.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:28px}.eyebrow{font-size:10px;letter-spacing:1.4px;color:#9699A8}.topbar-title{font-size:25px;font-weight:700;letter-spacing:-1px}.topbar-actions{display:flex;align-items:center;gap:12px}.topbar-search{height:42px;width:240px;background:#F7F8FA;border:1px solid #E2E4EB;border-radius:24px;display:flex;align-items:center;gap:8px;padding:0 14px;color:#737789}.topbar-search input{border:0!important;background:transparent!important;box-shadow:none!important;padding:0!important;font-size:12px}.icon-button,.circle-link{width:40px;height:40px;border-radius:50%;background:#F7F7FA;border:1px solid #E4E5EC;color:#555A70;font-size:19px;padding:0}
    .dashboard-intro{margin:0 0 22px;display:flex;align-items:end;justify-content:space-between}.dashboard-intro h2{font-size:22px;font-weight:700}.dashboard-intro .subtitle{font-size:12px}.primary{background:#0D0C15!important;color:#fff!important;border-radius:12px;box-shadow:none!important}.primary:hover{background:#292735!important}
    .card,.today-hero{background:rgba(255,255,255,.88);border:1px solid rgba(255,255,255,.9);border-radius:18px;box-shadow:var(--shadow);padding:22px}.today-hero{padding:24px 26px;margin-bottom:22px}.hero-heading{display:flex;align-items:center;justify-content:space-between}.hero-heading h2{font-size:19px}.hero-date{display:inline-block;margin-top:4px;color:#9698A5;font-size:11px}.circle-link{width:34px;height:34px;background:#fff}.hero-overview{display:grid;grid-template-columns:repeat(3,minmax(110px,1fr)) minmax(190px,1.2fr);gap:14px;align-items:center;padding:22px 0 20px;border-bottom:1px solid #ECECF1}.ring-stat{display:flex;justify-content:center}.ring{width:124px;height:124px;border-radius:50%;border:8px solid #EEEFF3;display:flex;flex-direction:column;align-items:center;justify-content:center;position:relative}.ring:before{content:"";position:absolute;inset:-8px;border-radius:50%;background:conic-gradient(var(--ring-color,#C1B8FF) calc(var(--ring-pct,0)*1%),#EEEFF3 0);mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));-webkit-mask:radial-gradient(farthest-side,transparent calc(100% - 8px),#000 calc(100% - 7px));transform:rotate(-90deg)}.ring-stat.yellow .ring:before{--ring-color:#FED97B}.ring-stat.gray .ring:before{--ring-color:#DDE0E8}.ring strong{font-size:24px;letter-spacing:-.8px}.ring span{font-size:11px;color:#777B8C;margin-top:2px}.hero-hours{border-left:1px solid #E1E2E9;padding-left:28px;min-height:100px;display:flex;flex-direction:column;justify-content:center;position:relative;overflow:hidden}.hero-hours span{font-size:12px;color:#74788A}.hero-hours strong{font-size:29px;margin-top:5px;letter-spacing:-1px}.mini-wave{height:34px;display:flex;align-items:end;gap:5px;margin-top:4px;opacity:.8}.mini-wave i{display:block;flex:1;border-radius:10px 10px 0 0;background:linear-gradient(180deg,#C1B8FF,#F0EEFF)}.mini-wave i:nth-child(1){height:25%}.mini-wave i:nth-child(2){height:40%}.mini-wave i:nth-child(3){height:55%}.mini-wave i:nth-child(4){height:42%}.mini-wave i:nth-child(5){height:75%}.mini-wave i:nth-child(6){height:58%}.mini-wave i:nth-child(7){height:95%}
    .hero-list-head{display:flex;align-items:center;gap:12px;padding:17px 0 12px}.hero-list-head strong{font-size:14px}.hero-list-head span{background:#F0EDFF;color:#6254AE;padding:3px 10px;border-radius:20px;font-size:11px}.today-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.today-person{display:flex;align-items:center;gap:10px;padding:14px;border:1px solid #E9EAF0;border-radius:13px;min-width:0}.person-dot{width:9px;height:9px;border-radius:50%;flex:none}.person-info{flex:1;min-width:0}.person-info strong,.person-info span{display:block}.person-info strong{font-size:12px}.person-info span{font-size:11px;color:#858898;margin-top:3px}.today-person>b{font-size:11px;white-space:nowrap}.status-pill{font-size:10px;padding:4px 9px;border-radius:20px;white-space:nowrap}.status-done{background:#EEEAFE;color:#6655B4}.status-planned{background:#FFF4D9;color:#9B711B}.status-off{background:#EFF0F3;color:#777B88}
    .metric-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:22px}.metric-card{background:rgba(255,255,255,.9);border-radius:17px;padding:19px 20px;min-height:150px;position:relative;overflow:hidden;box-shadow:var(--shadow)}.metric-card>span{display:block;color:#7D8090;font-size:11px;margin:8px 0 4px}.metric-card>strong{display:block;font-size:23px;letter-spacing:-.8px}.metric-card small{display:block;color:#9698A5;font-size:10px;margin-top:5px}.metric-icon{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-size:17px}.lavender-icon,.purple-icon{background:#F0EDFF;color:#6252B4}.neutral-icon{background:#F1F2F5;color:#656A7A}.alert-icon{background:#FFF0EF;color:#D65F65}.metric-accent{position:absolute;bottom:0;left:0;right:0;height:3px;opacity:.75}.yellow-accent{background:linear-gradient(90deg,#FED97B,transparent)}.purple-accent{background:linear-gradient(90deg,#C1B8FF,transparent)}.metric-link{position:absolute;right:14px;bottom:14px;background:transparent;padding:3px;color:#6557AF;font-size:10px}.dashboard-bottom-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:16px}.dashboard-bottom-grid .card{min-height:210px}.section-title{margin-bottom:14px}.upcoming-row{display:grid;grid-template-columns:70px 1fr 45px;gap:12px;align-items:center;padding:13px 4px;border-bottom:1px solid #EFF0F3;font-size:12px}.upcoming-row time{color:#7D8090}.upcoming-row span{text-align:right;color:#858898}.hours-row{display:grid;grid-template-columns:66px 1fr 48px;gap:10px;align-items:center;margin:14px 0;font-size:11px}.hours-row>span{color:#666A7A}.hours-row>b{text-align:right;font-weight:550}.hours-track{height:13px;background:#F0F1F5;border-radius:20px;overflow:hidden}.hours-track i{display:block;height:100%;border-radius:20px}.empty-dashboard{padding:22px;text-align:center;color:#999;font-size:12px}
    .topbar-title,.dashboard-intro h2,.hero-heading h2,.section-title h2,.section-title h3{font-weight:400;letter-spacing:-.045em}.metric-card>strong,.ring strong,.hero-hours strong{font-weight:500;letter-spacing:-.045em}
    /* retain legacy forms and tables while harmonizing them */
    .main-content .card{border-color:#E8E9EF}.main-content input:focus,.main-content select:focus,.main-content textarea:focus{border-color:#B9AEF4;box-shadow:0 0 0 3px rgba(193,184,255,.18)}.main-content select{appearance:none!important;-webkit-appearance:none!important;background-color:#fff!important;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23776BC0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E")!important;background-repeat:no-repeat!important;background-position:right 12px center!important;background-size:16px 16px!important;padding-right:38px!important}
    @media(max-width:1000px){.metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.hero-overview{grid-template-columns:repeat(3,1fr)}.hero-hours{grid-column:1/-1;border-left:0;border-top:1px solid #E8E9EF;padding:16px 0 0}.dashboard-bottom-grid{grid-template-columns:1fr}}
    @media(max-width:820px){.app-layout{grid-template-columns:1fr}.sidebar{position:static;height:auto;padding:12px 14px 8px;border-right:0;border-bottom:1px solid #E1E3EA}.sidebar-brand{padding:0 4px 10px;border:0}.sidebar-brand .brand-icon{width:40px;height:40px;flex-basis:40px}.sidebar-brand .brand-icon > img{width:142%;height:142%}.tabs{margin-top:8px;flex-direction:row;overflow-x:auto;gap:5px}.tab{min-width:max-content;min-height:40px;padding:0 11px}.sidebar-foot{display:none}.main-content{padding:18px 14px 30px}.topbar{margin-bottom:18px}.topbar-search{width:160px}.today-cards{grid-template-columns:1fr}.hero-overview{gap:5px}.ring{width:94px;height:94px;border-width:6px}.ring:before{inset:-6px;border-width:6px}.ring strong{font-size:19px}.ring span{font-size:10px}}
    @media(max-width:520px){.topbar-title{font-size:21px}.topbar-search{width:42px;padding:0 11px}.topbar-search input{display:none}.dashboard-intro{align-items:start;gap:10px}.dashboard-intro .primary{font-size:11px;padding:9px}.today-hero{padding:17px 14px}.hero-overview{grid-template-columns:repeat(3,minmax(0,1fr))}.ring{width:82px;height:82px}.ring strong{font-size:17px}.ring span{font-size:9px}.metric-grid{gap:9px}.metric-card{padding:14px;min-height:132px}.metric-card>strong{font-size:19px}.dashboard-bottom-grid .card{padding:16px}.hours-row{grid-template-columns:55px 1fr 42px;gap:7px}}


/* Mobile-first operational navigation and resilient form layout */
.mobile-bottom-nav { display: none; }
.detail-edit-button { margin-top: .45rem; min-height: 2.25rem; padding: .35rem .75rem; border: 1px solid #D9DCE5; border-radius: .65rem; background: #fff; color: #0D0C15; font: inherit; font-weight: 650; cursor: pointer; }
.detail-item { gap: .75rem; }
.detail-item > div:last-child { min-width: 4.75rem; }

@media (max-width: 820px) {
  body { padding-bottom: calc(5.25rem + env(safe-area-inset-bottom)); }
  .app-layout { display: block; min-height: 100vh; }
  .sidebar { display: block; position: sticky; top: 0; z-index: 30; background: rgba(255,255,255,.96); backdrop-filter: blur(14px); padding: .55rem .85rem .4rem; }
  .sidebar-brand { padding: 0; }
  .sidebar-brand strong { font-size: 1rem; }
  .sidebar-brand small { font-size: .7rem; }
  .sidebar .tabs { display: none; }
  .main-content { min-width: 0; padding: 1rem .85rem 1.5rem; }
  .topbar { min-width: 0; }
  .records-top-grid, .employee-layout, .dashboard-bottom-grid { grid-template-columns: minmax(0,1fr); }
  .records-top-grid > *, .employee-layout > *, .dashboard-bottom-grid > * { min-width: 0; }
  .record-form-card { order: -1; }
  .calendar-card { order: 0; }
  .calendar-detail { scroll-margin-bottom: 6rem; }
  .calendar-grid { grid-template-columns: repeat(7,minmax(0,1fr)); }
  .day-cell { min-width: 0; }
  .calendar-event { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .grid, .employee-layout .grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .field { min-width: 0; }
  input, select, textarea, .actions button, .calendar-nav button { min-height: 2.75rem; }
  .mobile-bottom-nav { position: fixed; display: grid; grid-template-columns: repeat(4,1fr); left: 0; right: 0; bottom: 0; z-index: 100; padding: .45rem .35rem calc(.45rem + env(safe-area-inset-bottom)); background: rgba(255,255,255,.96); border-top: 1px solid #E5E6EC; box-shadow: 0 -6px 24px rgba(13,12,21,.07); backdrop-filter: blur(16px); }
  .mobile-nav-item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .18rem; min-height: 3.25rem; border: 0; border-radius: .75rem; background: transparent; color: #777987; font: inherit; cursor: pointer; }
  .mobile-nav-item span { font-size: 1.25rem; line-height: 1.2; }
  .mobile-nav-item small { font-size: .68rem; font-weight: 650; }
  .mobile-nav-item.active { color: #0D0C15; background: #F1EFFD; }
}
@media (max-width: 520px) {
  .main-content { padding: .85rem .7rem 1.25rem; }
  .topbar { gap: .5rem; }
  .topbar-title { font-size: 1.15rem; }
  .dashboard-intro { flex-direction: column; align-items: stretch; }
  .dashboard-intro .primary { width: 100%; min-height: 2.8rem; }
  .today-hero, .card { min-width: 0; }
  .hero-overview { grid-template-columns: repeat(3,minmax(0,1fr)); }
  .ring { width: clamp(3.7rem, 18vw, 4.6rem); height: clamp(3.7rem, 18vw, 4.6rem); }
  .ring strong { font-size: clamp(.85rem, 4vw, 1.05rem); }
  .metric-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .metric-card { min-width: 0; }
  .metric-card > strong { overflow-wrap: anywhere; }
  .grid, .employee-layout .grid { grid-template-columns: minmax(0,1fr); }
  .calendar-toolbar { gap: .65rem; }
  .calendar-nav { grid-template-columns: auto minmax(0,1fr) auto; }
  .calendar-nav button { min-width: 0; padding-inline: .35rem; font-size: .72rem; }
  .day-cell { min-height: 3.6rem; padding: .22rem .12rem; }
  .calendar-event { font-size: .55rem; line-height: 1.25; }
  .record-filters { grid-template-columns: minmax(0,1fr); }
  .detail-item { align-items: center; }
  .detail-edit-button { min-height: 2.5rem; }
  .record-actions button { min-height: 2.6rem; }
}

/* Compact weekday selector and accessible responsive controls */
.weekday-picker{display:flex;flex-wrap:nowrap;gap:.4rem;width:100%;}
.weekday-choice{flex:1;min-width:2.25rem;min-height:2.75rem;border:1px solid #E2E1EA;border-radius:.7rem;background:#fff;color:#4D4B59;font:inherit;font-weight:650;cursor:pointer;}
.weekday-choice.active{background:#F1EFFD;border-color:#C1B8FF;color:#0D0C15;box-shadow:inset 0 0 0 1px #C1B8FF;}
.day-override-row input[type=time]{min-width:0;width:100%;font-size:1rem;}
@media(max-width:520px){.weekday-picker{gap:.25rem}.weekday-choice{min-width:0;padding:.35rem .1rem;min-height:2.8rem}.employee-layout .grid{grid-template-columns:minmax(0,1fr)!important}.employee-layout .field{grid-column:1/-1!important}}

.time-wheel-backdrop{position:fixed;inset:0;z-index:300;display:grid;place-items:center;padding:1rem;background:rgba(13,12,21,.36);}
.time-wheel-backdrop[hidden]{display:none;}
.time-wheel-panel{width:min(100%,22rem);padding:1.25rem;border-radius:1.1rem;background:#fff;box-shadow:0 18px 60px rgba(13,12,21,.2);}
.time-wheel-frame{position:relative;margin:1rem 0 .4rem;}
.time-wheel-frame::before{content:"";position:absolute;left:0;right:0;top:88px;height:44px;border-radius:.7rem;background:#F1EFFD;box-shadow:inset 0 0 0 1px #C1B8FF;pointer-events:none;}
.time-wheel-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(#fff,rgba(255,255,255,0) 38%,rgba(255,255,255,0) 62%,#fff);}
.time-wheel{position:relative;height:220px;overflow-y:auto;scroll-snap-type:y mandatory;padding:88px 0;box-sizing:border-box;overscroll-behavior:contain;scrollbar-width:none;outline:none;-webkit-overflow-scrolling:touch;}
.time-wheel::-webkit-scrollbar{display:none;}
.time-wheel:focus-visible{box-shadow:0 0 0 2px #C1B8FF;border-radius:.7rem;}
.time-wheel-item{height:44px;line-height:44px;text-align:center;scroll-snap-align:center;font-size:1.15rem;font-weight:600;color:#9A9CA8;cursor:pointer;font-variant-numeric:tabular-nums;user-select:none;}
.time-wheel-item.selected{color:#0D0C15;font-size:1.3rem;font-weight:750;}
.time-wheel-hint{text-align:center;margin:0 0 .4rem;}
.time-wheel-panel .actions{justify-content:flex-end;}
input.time-field{cursor:pointer;caret-color:transparent;font-variant-numeric:tabular-nums;}
input.time-field:disabled{cursor:not-allowed;}
.record-actions .record-confirm,.detail-confirm-button{background:#F1EFFD;border-color:#C1B8FF;color:#0D0C15;font-weight:700;}
.detail-confirm-button{margin-right:.35rem;}
.stale-list{display:grid;gap:.4rem;margin-top:.75rem;max-height:22rem;overflow-y:auto;}
.stale-item{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;padding:.55rem .7rem;border:1px solid #E8E9EF;border-radius:.7rem;background:#fff;font-size:.9rem;margin:0;}
.stale-item input{width:auto;min-height:0;}
.stale-all{background:#F8F8FA;font-weight:650;}
@media (max-width: 820px){.mobile-bottom-nav{grid-template-columns:repeat(5,1fr);}.mobile-nav-item small{font-size:.64rem;}}
.day-override-panel{border:1px solid #E8E9EF;border-radius:.75rem;background:#fff;}
.day-override-panel>summary{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.25rem .75rem;padding:.7rem .9rem;cursor:pointer;list-style:none;font-weight:650;font-size:.85rem;}
.day-override-panel>summary::-webkit-details-marker{display:none;}
.day-override-panel>summary>span:first-child::before{content:"▸";display:inline-block;margin-right:.45rem;color:#7B7D89;transition:transform .15s;}
.day-override-panel[open]>summary>span:first-child::before{transform:rotate(90deg);}
.day-override-panel>.day-override-grid,.day-override-panel>.muted{margin-left:.9rem;margin-right:.9rem;}
.day-override-panel>.muted{display:block;margin-bottom:.8rem;}
.records-side{display:grid;gap:1.125rem;align-content:start;min-width:0;}
.records-top-grid .records-side .card{height:auto;}
.calendar-detail-card .calendar-detail{margin-top:0;padding:0;border:0;background:transparent;}
.calendar-detail-card .section-title h3{font-size:1rem;}
.record-week-nav{display:flex;align-items:center;gap:.5rem;margin:.25rem 0 1rem;}
.record-week-label{flex:1;text-align:center;font-weight:700;font-size:.95rem;}
.record-week-nav button{min-height:2.5rem;}
.record-day-card.is-empty{padding-top:.7rem;padding-bottom:.7rem;background:#FAFAFB;}
.record-day-card.is-empty .record-day-head{margin-bottom:0;padding-bottom:0;border-bottom:0;}
.record-day-card.is-empty .record-day-total{color:#A0A2AD;}
.record-day-card.is-today .record-day-title::after{content:"오늘";margin-left:.4rem;padding:.1rem .45rem;border-radius:999px;background:#FFF4D6;color:#80631F;font-size:.7rem;font-weight:700;vertical-align:middle;}
.record-day-card.is-selected{border-color:#C1B8FF;box-shadow:inset 0 0 0 1px #C1B8FF;}
@media (max-width: 520px){.record-week-nav{flex-wrap:wrap;}.record-week-label{order:-1;flex-basis:100%;}.record-week-nav button{flex:1;font-size:.8rem;}}
.record-sheet-head,.record-sheet-backdrop{display:none;}
@media (max-width: 820px){
  .records-side{display:none;}
  body.record-sheet-open{overflow:hidden;}
  body.record-sheet-open .records-side{display:grid;gap:.75rem;position:fixed;left:0;right:0;bottom:0;z-index:260;max-height:88vh;overflow-y:auto;overscroll-behavior:contain;padding:0 .75rem calc(1rem + env(safe-area-inset-bottom));background:var(--page);border-radius:1.25rem 1.25rem 0 0;box-shadow:0 -12px 40px rgba(13,12,21,.18);animation:recordSheetUp .22s ease-out;}
  body.record-sheet-open .record-sheet-backdrop{display:block;position:fixed;inset:0;z-index:250;background:rgba(13,12,21,.36);}
  .record-sheet-backdrop[hidden]{display:none!important;}
  .records-side .record-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;margin:0 -.75rem;padding:.9rem 1rem .7rem;background:var(--page);border-bottom:1px solid #E6E7ED;}
  .records-side .record-sheet-head::before{content:"";position:absolute;top:.4rem;left:50%;width:2.5rem;height:.25rem;margin-left:-1.25rem;border-radius:999px;background:#D5D6DE;}
  .record-sheet-head strong{font-size:1.05rem;}
  .record-sheet-close{width:2.5rem;height:2.5rem;min-height:0;padding:0;border:0;border-radius:50%;background:#fff;font-size:1rem;cursor:pointer;}
  .records-side .calendar-detail-card{order:-1;}
  .records-side .record-form-card{order:0;}
  .records-side .record-sheet-head{order:-2;}
  .records-side .card{margin:0;padding:1rem;}
  .records-side .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@keyframes recordSheetUp{from{transform:translateY(100%);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){body.record-sheet-open .records-side{animation:none;}}
.detail-actions{display:flex;flex-wrap:nowrap;justify-content:flex-end;align-items:center;gap:.4rem;margin-top:.45rem;}
.detail-actions .detail-edit-button{margin:0;white-space:nowrap;}
/* Compact calendar header and month picker */
.calendar-toolbar{position:relative;display:flex;align-items:center;justify-content:flex-start;flex-wrap:nowrap;gap:.2rem;margin-bottom:.75rem;}
.calendar-arrow{display:inline-grid;place-items:center;width:2.25rem;height:2.25rem;min-height:0!important;padding:0;border:0;border-radius:50%;background:transparent;color:#4D4B59;font:inherit;font-size:1.35rem;line-height:1;cursor:pointer;}
.calendar-arrow:hover{background:#F1EFFD;}
.calendar-month{padding:.3rem .55rem;border:0;border-radius:.6rem;background:transparent;color:var(--brown-dark);font:inherit;font-size:1.2rem;font-weight:750;letter-spacing:-.3px;cursor:pointer;white-space:nowrap;}
.calendar-month::after{content:"▾";margin-left:.3rem;font-size:.7rem;color:#9A9CA8;vertical-align:middle;}
.calendar-month:hover{background:#F6F5FB;}
.calendar-today{margin-left:auto;min-height:0!important;padding:.35rem .85rem;border:1px solid #E2E1EA;border-radius:999px;background:#fff;color:#4D4B59;font:inherit;font-size:.78rem;font-weight:650;cursor:pointer;white-space:nowrap;}
.calendar-today:hover{border-color:#C1B8FF;}
.month-picker{position:absolute;top:calc(100% + .35rem);left:1.5rem;z-index:40;width:15.5rem;padding:.7rem;border:1px solid #E8E9EF;border-radius:.9rem;background:#fff;box-shadow:0 12px 32px rgba(13,12,21,.12);}
.month-picker[hidden]{display:none;}
.month-picker-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:.45rem;}
.month-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.3rem;}
.month-picker-grid button{min-height:2.2rem!important;padding:0;border:0;border-radius:.6rem;background:#F7F7FA;color:#2F2E3A;font:inherit;font-size:.82rem;cursor:pointer;}
.month-picker-grid button:hover{background:#F1EFFD;}
.month-picker-grid button.current{box-shadow:inset 0 0 0 1px #C1B8FF;}
.month-picker-grid button.active{background:#C1B8FF;color:#0D0C15;font-weight:750;}
@media (min-width: 521px){
  .weekday{padding:.4rem .25rem;}
  .day-cell{min-height:5.25rem;padding:.3rem .35rem;}
  .day-number{margin-bottom:.2rem;font-size:.72rem;}
  .day-cell.today .day-number{width:1.3rem;height:1.3rem;}
  .calendar-event{margin-bottom:.15rem;padding:.12rem .3rem;font-size:.62rem;line-height:1.3;}
  .legend{margin-top:.6rem;}
}
.calendar-card .calendar-toolbar{flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:nowrap;}
.calendar-card .calendar-month{font-size:1.15rem;}
/* Record panel: right slide-in drawer on PC (mobile keeps the bottom sheet above) */
.records-side .record-sheet-head{order:-2;}
.records-side .calendar-detail-card{order:-1;}
.records-side .record-form-card{order:0;}
@media (min-width: 821px){
  .records-top-grid{grid-template-columns:minmax(0,1fr);}
  .records-side{display:none;}
  body.record-sheet-open .records-side{display:grid;gap:1rem;align-content:start;position:fixed;top:0;right:0;bottom:0;z-index:260;width:min(27rem,100vw);overflow-y:auto;overscroll-behavior:contain;padding:0 1.1rem 1.5rem;background:var(--page);border-left:1px solid #E6E7ED;box-shadow:-16px 0 40px rgba(13,12,21,.10);animation:recordDrawerIn .22s ease-out;}
  .records-side .record-sheet-head{display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:2;margin:0 -1.1rem;padding:1.1rem 1.25rem .9rem;background:var(--page);border-bottom:1px solid #E6E7ED;}
  .record-sheet-head strong{font-size:1.05rem;}
  .record-sheet-close{width:2.25rem;height:2.25rem;min-height:0;padding:0;border:1px solid #E4E5EC;border-radius:50%;background:#fff;font-size:.95rem;cursor:pointer;}
  .records-side .card{margin:0;padding:1.1rem;}
  .records-side .grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .record-sheet-backdrop{display:none!important;}
}
/* 넓은 화면에서는 패널만큼 본문을 밀어 달력이 가려지지 않게 합니다. */
@media (min-width: 1180px){
  body.record-sheet-open .main-content{padding-right:calc(27rem + 1.5rem);transition:padding-right .2s ease-out;}
}
@keyframes recordDrawerIn{from{transform:translateX(100%);}to{transform:none;}}
@media (prefers-reduced-motion: reduce){body.record-sheet-open .records-side{animation:none!important;}}