* {
      box-sizing: border-box;
    }

    body {
      margin: 0;
      font-family:
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;
      background: #f6f3f8;
      color: #29232f;
    }

    .app {
      max-width: 680px;
      margin: 0 auto;
      padding: 24px 18px 40px;
    }

    .screen {
      display: none;
    }

    .screen.active {
      display: block;
    }

    .title {
      font-size: 28px;
      font-weight: 800;
      color: #49345f;
      margin-bottom: 6px;
    }

    .subtitle {
      color: #756b7d;
      font-size: 14px;
      line-height: 1.6;
      margin-bottom: 28px;
    }

    .card {
      background: white;
      border-radius: 20px;
      padding: 22px;
      margin-bottom: 16px;
      box-shadow:
        0 4px 18px rgba(60,40,80,0.08);
    }

    .field {
      margin-bottom: 18px;
    }

    .field label {
      display: block;
      font-size: 13px;
      font-weight: 700;
      margin-bottom: 7px;
    }

    input,
    select {
      width: 100%;
      height: 50px;
      border: 1px solid #ddd6e2;
      border-radius: 12px;
      padding: 0 13px;
      background: white;
      font-size: 15px;
    }

    .status-option {
      width: 100%;
      background: white;
      border: 2px solid transparent;
      border-radius: 15px;
      padding: 17px;
      margin-bottom: 10px;
      text-align: left;
      cursor: pointer;
    }

    .status-option.selected {
      border-color: #73518f;
      background: #f1ebf5;
    }

    .status-name {
      font-weight: 700;
      font-size: 16px;
    }

    .status-desc {
      margin-top: 4px;
      font-size: 13px;
      color: #756b7d;
    }

    .primary-button {
      width: 100%;
      border: none;
      border-radius: 16px;
      padding: 16px;
      background: #65477d;
      color: white;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    .secondary-button {
      width: 100%;
      border: none;
      border-radius: 16px;
      padding: 15px;
      background: #eee7f5;
      color: #65477d;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
    }

    .delete-button {
      width: 100%;
      border: none;
      border-radius: 16px;
      padding: 15px;
      background: #fff0f0;
      color: #b54545;
      font-size: 15px;
      font-weight: 700;
      cursor: pointer;
      margin-top: 12px;
    }

    .record-button {
      width: 100%;
      border: none;
      border-radius: 17px;
      padding: 17px;
      background: #65477d;
      color: white;
      font-size: 16px;
      font-weight: 700;
      cursor: pointer;
      margin-bottom: 12px;
    }

    .back-button {
      border: none;
      background: transparent;
      color: #65477d;
      font-size: 15px;
      font-weight: 700;
      padding: 0;
      margin-bottom: 18px;
      cursor: pointer;
    }

    .header {
      margin-bottom: 24px;
    }

    .header-title {
      font-size: 28px;
      font-weight: 800;
      color: #49345f;
    }

    .header-subtitle {
      margin-top: 5px;
      color: #756b7d;
      font-size: 14px;
    }

    .profile-name {
      font-size: 24px;
      font-weight: 750;
    }

    .profile-status {
      display: inline-block;
      margin-top: 8px;
      padding: 6px 12px;
      border-radius: 20px;
      background: #eee7f5;
      color: #65477d;
      font-size: 13px;
      font-weight: 650;
    }

    .period-card {
      background: #5b416f;
      color: white;
      border-radius: 20px;
      padding: 22px;
      margin-bottom: 16px;
    }

    .period-sy {
      font-size: 23px;
      font-weight: 750;
    }

    .period-month {
      margin-top: 5px;
      opacity: 0.8;
      font-size: 14px;
    }

    .summary-title {
      color: #756b7d;
      font-size: 14px;
      margin-bottom: 5px;
    }

    .summary-time {
      font-size: 36px;
      font-weight: 800;
      color: #49345f;
    }

    .progress-track {
      width: 100%;
      height: 10px;
      background: #eee9f2;
      border-radius: 10px;
      margin-top: 14px;
      overflow: hidden;
    }

    .progress-bar {
      height: 100%;
      width: 0%;
      background: #73518f;
      border-radius: 10px;
    }

    .progress-text {
      margin-top: 8px;
      text-align: right;
      font-size: 13px;
      color: #756b7d;
    }

    .summary-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 10px;
      margin-top: 20px;
    }

    .summary-item {
      background: #f7f4f8;
      border-radius: 14px;
      padding: 14px 10px;
    }

    .summary-item-title {
      font-size: 12px;
      color: #817687;
    }

    .summary-item-value {
      margin-top: 5px;
      font-size: 15px;
      font-weight: 700;
    }

    .menu-card {
      background: white;
      border-radius: 20px;
      overflow: hidden;
      margin-top: 16px;
    }

    .menu-button {
      width: 100%;
      display: flex;
      align-items: center;
      border: none;
      background: white;
      padding: 19px;
      text-align: left;
      font-size: 15px;
      cursor: pointer;
    }

    .menu-button + .menu-button {
      border-top: 1px solid #eee9f0;
    }

    .menu-title {
      flex: 1;
      font-weight: 600;
    }

    .menu-arrow {
      color: #aaa1ae;
    }

    .time-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .participation-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
    }

    .participation-button {
      border: 2px solid #ddd6e2;
      background: white;
      color: #554c59;
      border-radius: 14px;
      padding: 16px;
      font-weight: 700;
      cursor: pointer;
    }

    .participation-button.selected {
      border-color: #73518f;
      background: #eee7f5;
      color: #65477d;
    }

    .special-row {
      background: #f7f4f8;
      border-radius: 14px;
      padding: 14px;
      margin-bottom: 10px;
    }

    .special-row-top {
      display: flex;
      justify-content: space-between;
      gap: 12px;
      align-items: center;
    }

    .special-title {
      font-weight: 700;
    }

    .special-time {
      margin-top: 5px;
      font-size: 13px;
      color: #756b7d;
    }

    .danger-button {
      border: none;
      background: transparent;
      color: #b54545;
      font-size: 14px;
      font-weight: 700;
      cursor: pointer;
    }

    .month-selector {
      display: grid;
      grid-template-columns: 44px 1fr 44px;
      gap: 10px;
      align-items: center;
      margin-bottom: 18px;
    }

    .month-arrow {
      height: 44px;
      border: none;
      border-radius: 12px;
      background: #eee7f5;
      color: #65477d;
      font-size: 25px;
      cursor: pointer;
    }

    .month-title {
      text-align: center;
      font-size: 21px;
      font-weight: 800;
      color: #49345f;
    }

    .consideration {
      margin-top: 15px;
      padding: 13px;
      background: #f7f2fa;
      border-radius: 13px;
      font-size: 13px;
      line-height: 1.5;
      color: #66596d;
    }

    .detail-title {
      font-size: 18px;
      font-weight: 800;
      margin: 26px 0 12px;
    }

    .record-card {
      background: white;
      border-radius: 16px;
      padding: 17px;
      margin-bottom: 11px;
      box-shadow:
        0 2px 10px rgba(60,40,80,0.05);
      cursor: pointer;
    }

    .record-card.monthly {
      border: 1px solid #d8cae4;
      background: #fbf9fc;
    }

@media (max-width: 600px) {

  .app {
    width: 100%;
    max-width: none;
    padding: 18px 14px 32px;
  }

  .title,
  .header-title {
    font-size: 26px;
  }

  .card {
    padding: 18px;
    border-radius: 18px;
  }

  input,
  select,
  button {
    font-size: 16px;
  }

  .summary-time {
    font-size: 32px;
  }
}

.admin-tabs,.admin-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:16px}.admin-grid{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:14px}.admin-card-head{display:flex;justify-content:space-between;gap:12px;align-items:center}.admin-card-head span,.admin-meta{font-size:12px;color:#6d6574}.admin-meta{margin:12px 0}.admin-user-card .primary-button{margin-top:8px}@media(max-width:600px){.admin-grid{grid-template-columns:1fr}.admin-card-head{align-items:flex-start;flex-direction:column}}
.admin-tab-button{border:1px solid #ded3e4;border-radius:14px;padding:13px 12px;background:#fff;color:#6d5578;font-weight:800;cursor:pointer}.admin-tab-button.active{border-color:#73518f;background:#73518f;color:#fff;box-shadow:0 6px 16px rgba(73,45,89,.14)}.admin-panel-status{margin:0 0 10px;color:#756b7d;font-size:13px;font-weight:700}

/* SY 월별 상태 */

.sy-month-card {
  position: relative;
  overflow: hidden;
}

.sy-month-card.completed {
  border-left: 5px solid #4f9b6d;
}

.sy-month-card.progressing {
  border-left: 5px solid #73518f;
}

.sy-month-card.warning {
  border-left: 5px solid #d69a45;
}

.sy-month-card.future {
  opacity: 0.55;
}

.sy-status-badge {
  display: inline-block;
  padding: 5px 9px;
  border-radius: 99px;
  font-size: 11px;
  font-weight: 700;
}

.sy-status-badge.completed {
  background: #eaf7ef;
  color: #2f7a4a;
}

.sy-status-badge.progressing {
  background: #eee7f5;
  color: #65477d;
}

.sy-status-badge.warning {
  background: #fff4e5;
  color: #9a641f;
}

.sy-status-badge.future {
  background: #f1f1f1;
  color: #888;
}

    .record-header {
      display: flex;
      align-items: flex-start;
      gap: 10px;
    }

    .record-date {
      font-weight: 800;
      flex: 1;
    }

    .record-status {
      padding: 5px 9px;
      border-radius: 99px;
      background: #eee7f5;
      color: #65477d;
      font-size: 11px;
      font-weight: 700;
    }

    .record-type {
      color: #756b7d;
      font-size: 12px;
      margin-top: 5px;
    }

    .record-line {
      display: flex;
      justify-content: space-between;
      margin-top: 11px;
      gap: 15px;
      font-size: 14px;
    }

    .record-line span:first-child {
      color: #756b7d;
    }

    .special-detail {
      margin-top: 8px;
      padding: 10px 12px;
      border-radius: 10px;
      background: #f7f4f8;
      font-size: 13px;
    }

    .empty-state {
      text-align: center;
      padding: 42px 15px;
      color: #817687;
      background: white;
      border-radius: 16px;
    }

    .loading {
      text-align: center;
      padding: 60px 20px;
      color: #756b7d;
    }

    .error {
      background: #fff0f0;
      color: #a43d3d;
      padding: 16px;
      border-radius: 14px;
      margin-bottom: 16px;
    }

    /* 새 홈 레이아웃 */

    #homeScreen {
      padding-bottom: 92px;
    }

    .cloud-sync-status {
      display: flex;
      align-items: center;
      gap: 7px;
      margin: -4px 0 14px;
      color: #746b79;
      font-size: 12px;
      font-weight: 650;
    }

    .cloud-sync-dot {
      width: 8px;
      height: 8px;
      border-radius: 50%;
      background: #a89daf;
      flex: 0 0 auto;
    }

    .cloud-sync-status[data-state="synced"] .cloud-sync-dot {
      background: #2f9e68;
    }

    .cloud-sync-status[data-state="syncing"] .cloud-sync-dot {
      background: #7b5b95;
    }

    .cloud-sync-status[data-state="offline"] .cloud-sync-dot,
    .cloud-sync-status[data-state="waiting"] .cloud-sync-dot {
      background: #d18a37;
    }

    .report-card {
      margin-top: 18px;
    }

    .report-help {
      color: #756b7d;
      font-size: 13px;
      line-height: 1.55;
      margin: 7px 0 14px;
    }

    .report-preview {
      margin: 0 0 14px;
      padding: 16px;
      border: 1px solid #e4dce8;
      border-radius: 14px;
      background: #faf8fb;
      color: #352d3a;
      font-family: inherit;
      font-size: 14px;
      line-height: 1.7;
      white-space: pre-wrap;
      overflow-wrap: anywhere;
    }

    .report-action-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      margin-bottom: 10px;
    }

    .report-submission-status {
      margin-top: 12px;
      color: #756b7d;
      font-size: 12px;
      line-height: 1.5;
    }

    .report-submission-status.submitted {
      color: #2f7a4a;
      font-weight: 700;
    }

    .report-submission-status.changed {
      color: #a46722;
      font-weight: 700;
    }

    .pwa-install-card {
      border: 1px solid #e5dce9;
    }

    .pwa-install-card[data-state="installed"] {
      border-color: #cfe8d8;
      background: #f7fcf9;
    }

    .pwa-help,
    .pwa-storage-text,
    .pwa-update-text {
      color: #756b7d;
      font-size: 13px;
      line-height: 1.55;
    }

    .pwa-help {
      margin: 8px 0 14px;
    }

    .pwa-storage-text {
      margin-top: 10px;
    }

    .pwa-update-text:not(:empty) {
      margin-top: 9px;
      color: #65477d;
      font-weight: 700;
    }

    .app {
      padding-bottom: 112px;
    }

    .home-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 18px;
      padding: 14px 2px 24px;
    }

    .home-period {
      color: #91739c;
      font-size: 16px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .home-greeting {
      color: #29232f;
      font-size: clamp(28px, 7vw, 38px);
      font-weight: 500;
      letter-spacing: -1.5px;
    }

    .home-avatar {
      width: 68px;
      height: 68px;
      flex: 0 0 68px;
      display: grid;
      place-items: center;
      border-radius: 50%;
      background: #73518f;
      color: white;
      font-size: 27px;
      font-weight: 800;
    }

    .home-hero {
      color: white;
      border-radius: 30px;
      padding: 27px 24px 25px;
      margin-bottom: 18px;
      background: linear-gradient(145deg, #513661 0%, #694779 64%, #8b68a2 100%);
      box-shadow: 0 18px 36px rgba(79, 50, 93, 0.18);
    }

    .home-hero-head {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 15px;
    }

    .home-hero-label {
      color: rgba(255,255,255,.78);
      font-size: 17px;
    }

    .home-hero .summary-time {
      color: white;
      font-size: 46px;
      margin-top: 10px;
    }

    .home-status-chip {
      padding: 9px 13px;
      border: 1px solid rgba(255,255,255,.22);
      background: rgba(255,255,255,.12);
      border-radius: 999px;
      color: white;
      font-size: 13px;
      font-weight: 750;
      white-space: nowrap;
    }

    .home-hero .progress-track {
      height: 9px;
      margin-top: 25px;
      background: rgba(255,255,255,.22);
    }

    .home-hero .progress-bar {
      background: #eadff1;
    }

    .home-progress-row {
      display: flex;
      justify-content: space-between;
      margin-top: 10px;
      color: rgba(255,255,255,.78);
      font-size: 14px;
    }

    .home-progress-row .progress-text {
      margin: 0;
      color: white;
      font-weight: 800;
    }

    .home-stat-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      border-top: 1px solid rgba(255,255,255,.18);
      margin-top: 24px;
      padding-top: 21px;
    }

    .home-stat-label {
      color: rgba(255,255,255,.72);
      font-size: 13px;
      margin-bottom: 8px;
    }

    .home-stat-value {
      color: white;
      font-size: 20px;
      font-weight: 800;
    }

    .home-primary-action {
      width: 100%;
      display: grid;
      grid-template-columns: 58px 1fr 24px;
      align-items: center;
      gap: 15px;
      border: none;
      border-radius: 25px;
      padding: 17px;
      margin-bottom: 14px;
      background: white;
      color: #29232f;
      text-align: left;
      box-shadow: 0 10px 28px rgba(60,40,80,.07);
      cursor: pointer;
    }

    .home-action-plus {
      width: 58px;
      height: 58px;
      display: grid;
      place-items: center;
      border-radius: 20px;
      background: #73518f;
      color: white;
      font-size: 34px;
      font-weight: 300;
    }

    .home-action-title {
      font-size: 19px;
      font-weight: 800;
    }

    .home-action-arrow {
      color: #aaa1ae;
      font-size: 30px;
    }

    .home-import-action {
      width: 100%;
      border: none;
      border-radius: 20px;
      padding: 16px;
      background: #eee6f3;
      color: #65477d;
      font-size: 16px;
      font-weight: 800;
      cursor: pointer;
    }

    .home-section-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin: 30px 4px 13px;
    }

    .home-section-title {
      font-size: 22px;
      font-weight: 800;
    }

    .home-section-link {
      border: none;
      background: transparent;
      color: #8c6a98;
      font-size: 14px;
      font-weight: 800;
      cursor: pointer;
    }

    .home-recent {
      min-height: 150px;
      padding: 18px;
      border-radius: 26px;
      background: white;
      box-shadow: 0 8px 25px rgba(60,40,80,.06);
    }

    .home-recent .record-card {
      padding: 14px 4px;
      margin: 0;
      border-radius: 0;
      box-shadow: none;
    }

    .home-recent .record-card + .record-card {
      border-top: 1px solid #eee9f0;
    }

    .home-report-card {
      display: grid;
      grid-template-columns: minmax(0, 1fr) auto;
      align-items: center;
      gap: 16px;
      margin: 0 0 14px;
      padding: 18px 20px;
      border: 1px solid #e7d9ee;
      border-radius: 24px;
      background: #fff;
      box-shadow: 0 8px 24px rgba(60,40,80,.05);
    }

    .home-report-period {
      color: #7b6f82;
      font-size: 13px;
      margin-bottom: 6px;
    }

    .home-report-title {
      color: #29232f;
      font-size: 18px;
      font-weight: 800;
      line-height: 1.35;
    }

    .home-report-due {
      color: #7b6f82;
      font-size: 13px;
      line-height: 1.4;
      margin-top: 7px;
    }

    .home-report-button {
      border: 0;
      border-radius: 16px;
      padding: 13px 16px;
      background: #70498b;
      color: #fff;
      font-size: 14px;
      font-weight: 800;
      white-space: nowrap;
      cursor: pointer;
    }

    .home-report-card[data-state="submitted"] {
      border-color: #cfe6d8;
      background: #f9fcfa;
    }

    .home-report-card[data-state="submitted"] .home-report-button {
      background: #47765a;
    }

    .home-report-card[data-state="overdue"] .home-report-due {
      color: #a45d31;
      font-weight: 700;
    }

    @media (max-width: 520px) {
      .home-top { padding: 8px 2px 17px; }
      .home-period { font-size: 14px; margin-bottom: 5px; }
      .home-greeting { font-size: 27px; }
      .home-avatar { width: 58px; height: 58px; flex-basis: 58px; font-size: 23px; }
      .cloud-sync-status { margin-bottom: 10px; }
      .home-hero { border-radius: 25px; padding: 22px 20px 21px; margin-bottom: 14px; }
      .home-hero-label { font-size: 15px; }
      .home-hero .summary-time { font-size: 40px; margin-top: 7px; }
      .home-hero .progress-track { margin-top: 20px; }
      .home-stat-grid { margin-top: 19px; padding-top: 17px; gap: 9px; }
      .home-stat-label { font-size: 12px; }
      .home-stat-value { font-size: 18px; }
      .home-report-card { border-radius: 21px; padding: 16px; gap: 10px; }
      .home-report-title { font-size: 16px; }
      .home-report-button { padding: 12px 13px; }
      .home-primary-action { border-radius: 22px; padding: 14px; }
      .home-action-plus { width: 52px; height: 52px; border-radius: 18px; }
      .home-action-title { font-size: 18px; }
      .home-section-head { margin-top: 24px; }
    }

    .home-empty {
      min-height: 114px;
      display: grid;
      place-items: center;
      text-align: center;
      color: #86798c;
      line-height: 1.7;
    }

    .bottom-nav {
      position: fixed;
      left: 50%;
      bottom: 0;
      z-index: 50;
      width: min(680px, 100%);
      display: none;
      grid-template-columns: repeat(4, 1fr);
      padding: 9px 8px max(9px, env(safe-area-inset-bottom));
      border-top: 1px solid #ece6ef;
      background: rgba(255,255,255,.96);
      backdrop-filter: blur(18px);
      transform: translateX(-50%);
    }

    .bottom-nav.visible {
      display: grid;
    }

    .bottom-nav button {
      border: none;
      background: transparent;
      color: #9a909e;
      padding: 4px;
      font-size: 11px;
      cursor: pointer;
    }

    .bottom-nav-icon {
      display: block;
      height: 24px;
      margin-bottom: 2px;
      font-size: 21px;
      line-height: 24px;
    }

    .bottom-nav button.active {
      color: #6d4781;
      font-weight: 800;
    }

    @media (max-width: 600px) {
      body { background: #f7f4f8; }
      .home-hero { border-radius: 28px; }
      .home-stat-grid { gap: 8px; }
      .home-stat-value { font-size: 18px; }
    }