:root { --gap: 10px; }
    * { box-sizing: border-box; }
    body { font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif; margin: 0; background:#f7f7fb; color:#222; }

    /* 초기 인증 복원 중에는 로그인 화면이 순간적으로 보이지 않도록 숨긴다. */
    body.app-booting #loginSection,
    body.app-booting #appSection {
      display: none !important;
    }
    .center { min-height: 100vh; display:flex; align-items:center; justify-content:center; padding: 24px; }
    .card { width: 100%; max-width: 980px; background: #fff; border:1px solid #e6e6ef; border-radius:16px; padding:18px 18px 22px; box-shadow: 0 1px 10px rgba(14,20,35,.04); }
    .row { display:flex; gap:var(--gap); align-items:center; flex-wrap:wrap; margin-top:var(--gap); }
    .col { display:flex; flex-direction:column; gap:6px; min-width: 220px; }
    h2, h3 { margin: 6px 0 4px; }
    label { font-size: 12px; color:#555; }
    input, select, textarea { padding:12px; border:1px solid #d8d8e2; border-radius:10px; background:#fff; outline:none; }
    input:focus, select:focus, textarea:focus { border-color:#8aa2ff; box-shadow: 0 0 0 3px rgba(138,162,255,.18); }
    button { padding:12px 16px; border:none; border-radius:10px; cursor:pointer; background:#2f6bff; color:#fff; }
    button.secondary { background:#eef1ff; color:#244; }
    button.ghost { background:#fff; color:#333; border:1px solid #dcdceb; }
    button:disabled { opacity:.5; cursor:not-allowed; }
    .ok { color:#0a7; }
    .err { color:#c00; }
    .muted { color:#777; font-size:12px; }
    .toolbar { display:flex; gap:10px; align-items:center; justify-content:flex-start; flex-wrap:wrap; }
    .grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap:12px; }
    .menu-buttons button { width: 100%; }

    /* 메인 메뉴 하단 로그아웃 버튼 */
    button.logout-menu-btn {
      background: #fff7f7;
      color: #b91c1c;
      border: 1px solid #fecaca;
    }

    button.logout-menu-btn:hover {
      background: #fee2e2;
      filter: none;
    }

    /* 관리자 전용 상단 도구 줄 */
    .admin-tool-row {
      justify-content: space-between;
      align-items: center;
      margin-bottom: 8px;
      gap: 10px;
    }

    .admin-tool-left,
    .admin-tool-right {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .admin-tool-btn {
      min-width: 160px;
      font-weight: 700;
    }

    @media (max-width: 640px) {
      .admin-tool-row {
        align-items: stretch;
        flex-direction: column;
      }
      .admin-tool-left,
      .admin-tool-right,
      .admin-tool-btn {
        width: 100%;
      }
    }

    .topbar { display:flex; flex-direction:column; gap:8px; }
    .keyline { padding: 8px 12px; border: 1px dashed #e3e3ee; border-radius: 10px; background:#fafaff; }
    .pill { display:inline-block; padding:3px 10px; border-radius:999px; background:#eef1ff; font-size:12px; }
    .hide { display:none !important; }

    /* ===== 활동표: 이미지와 같은 3행 블록(월/활동상황/답변/저장) ===== */
    #activityTable { width:100%; border-collapse: collapse; margin-top: 16px; table-layout: auto; }
    #activityTable, #activityTable td { border: 2px solid #000; }
    #activityTable td { padding: 10px; vertical-align: top; }
    /* (1) 월 셀: 텍스트 길이 + 10px -> 좌우 5px 패딩 + nowrap */
    #activityTable td.month { white-space: nowrap; padding: 10px 5px; }
    /* (1) '활동상황' 라벨 셀도 텍스트 길이 + 10px */
    #activityTable td.lbl { white-space: nowrap; padding: 10px 5px; font-weight:600; }
    /* 내용 셀은 가능한 넓게 */
    #activityTable td.content { width: 100%; }
    #activityTable textarea.fb { width: 100%; resize: vertical; min-height: 72px; }
    /* (2) 저장 버튼을 답변 입력 아래쪽(3행)에 중앙 배치 */
    #activityTable td.saveRow { text-align:center; }
    .btnSmart {
      background: linear-gradient(135deg, #10b981, #0ea5e9);
      color:#fff; border:none; border-radius:12px; padding:12px 18px;
      font-weight:700; letter-spacing:.02em; box-shadow: 0 6px 18px rgba(16,185,129,.25);
    }
    .btnSmart:active { transform: translateY(1px); }

    /* 부서 신청 확정/추첨 상태 표시용 */
    .status-badge {
      font-size: 12px;
      margin-top: 4px;
      display: inline-block;
    }
    .status-ok {
      color: #0a7;
      font-weight: 600;
    }
    .status-new {
      color: #e69100;
      font-weight: 600;
    }

    .main-title {
      text-align: center;         /* 가운데 정렬 */
      font-size: 22px;            /* 약간 더 크게 */
      font-weight: 700;
      margin: 0;
      padding-bottom: 6px;        /* 아래 여백 */
    }

    .toast {
      position: fixed;
      left: 50%;
      bottom: 24px;
      transform: translateX(-50%);
      background: rgba(34, 34, 34, 0.9);
      color: #fff;
      padding: 10px 18px;
      border-radius: 999px;
      font-size: 14px;
      box-shadow: 0 4px 12px rgba(0,0,0,.25);
      z-index: 9999;
    }

/* ===== 초기 로그인 화면 안내 영역 ===== */
#loginSection {
  flex-direction: column;
  gap: 28px;
  background:
    radial-gradient(circle at top left, rgba(255, 255, 255, 0.18), transparent 34%),
    linear-gradient(135deg, #f7f1fa 0%, #eadcf1 42%, #dcc6e9 100%);
}

/* 로그인 안내 박스 */
.loginGuide {
  width: 100%;
  max-width: 720px;
  min-height: 170px;
  padding: 28px 34px;
  border-radius: 22px;
  text-align: center;
  background: rgba(255, 255, 255, 0.42);
  border: 1px solid rgba(255, 255, 255, 0.68);
  box-shadow: 0 12px 32px rgba(88, 38, 113, 0.10);
  backdrop-filter: blur(8px);
}

/* 안내 타이틀 */
.loginGuideTitle {
  font-size: 30px;
  font-weight: 800;
  color: #4b1f5f;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* 안내 설명문 */
.loginGuideDesc {
  margin-top: 2.6em;
  font-size: 20px;
  font-weight: 500;
  color: #563067;
  line-height: 1.55;
  word-break: keep-all;
}

/* 로그인 카드 크기 */
.loginCard {
  max-width: 480px;
  box-shadow: 0 14px 36px rgba(88, 38, 113, 0.13);
}

/* ===== 특기적성교육 출결, 참여 태도 입력 ===== */
.st-att-search-box {
  border: 2px solid #ef4444;
  padding: 12px;
  margin-top: 10px;
  border-radius: 10px;
}

#stAttGridWrap {
  border: 2px solid #22c55e;
  padding: 10px;
  margin-top: 10px;
  border-radius: 10px;
}

.st-att-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.st-att-table th,
.st-att-table td {
  border: 1px solid #e5e7f3;
  padding: 8px;
  vertical-align: middle;
}

.st-att-table thead tr {
  background: #f5f6ff;
}

.st-att-table td.st-att-note-cell {
  cursor: pointer;
  color: #475569;
}

.st-att-table td.st-att-note-cell:hover {
  background: #f8fafc;
}

.st-att-empty-guide {
  color: #94a3b8;
}

.st-att-edit-panel {
  border: 2px solid #1d4ed8;
  margin-top: 12px;
  padding: 14px;
}

#stAttEditText {
  width: 100%;
  min-height: 120px;
  resize: vertical;
}