*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

    :root {
      --bg: #F6F7F9;
      --card: #FFFFFF;
      --primary: #10B981;            /* mint green (Family accent) */
      --primary-dark: #059669;
      --primary-light: #ECFDF5;
      --accent: #3B82F6;              /* electric blue */
      --success: #10B981;
      --success-light: #ECFDF5;
      --danger: #EF4444;
      --text: #0F1115;
      --text-secondary: #6B7280;
      --text-muted: #9CA3AF;
      --border: #EEF0F3;              /* softer border */
      --sidebar-bg: #0F1115;          /* near-black */
      --sidebar-text: rgba(255,255,255,0.55);
      --sidebar-active: rgba(255,255,255,0.08);
      --radius: 18px;                 /* bigger, softer */
      --radius-sm: 10px;
      --radius-pill: 999px;
      --shadow: 0 1px 2px rgba(15,17,21,0.04), 0 4px 16px rgba(15,17,21,0.04);
      --shadow-md: 0 2px 6px rgba(15,17,21,0.06), 0 10px 32px rgba(15,17,21,0.06);
    }

    body {
      font-family: 'Pretendard', -apple-system, sans-serif;
      background: var(--bg);
      color: var(--text);
      height: 100vh;
      overflow: hidden;
    }

    #app-view {
      display: none;
      flex-direction: row;
      height: 100vh;
      width: 100%;
    }

    #app-view.visible {
      display: flex;
    }

    /* ── Sidebar ───────────────────────────────────────── */
    .sidebar {
      width: 220px;
      min-width: 220px;
      background: var(--sidebar-bg);
      display: flex;
      flex-direction: column;
      padding: 0;
    }

    .sidebar-logo {
      padding: 24px 20px 20px;
      border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .sidebar-logo-text {
      font-size: 13px;
      font-weight: 700;
      color: white;
      letter-spacing: 0.05em;
      text-transform: uppercase;
    }

    .sidebar-logo-sub {
      font-size: 11px;
      color: var(--sidebar-text);
      margin-top: 2px;
    }

    .sidebar-nav {
      flex: 1;
      padding: 12px 0;
    }

    .nav-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 20px;
      font-size: 14px;
      font-weight: 500;
      color: var(--sidebar-text);
      cursor: pointer;
      transition: all 0.15s;
      border-left: 3px solid transparent;
    }

    .nav-item:hover { background: var(--sidebar-active); color: white; }
    .nav-item.active {
      background: var(--sidebar-active);
      color: white;
      border-left-color: var(--primary);
    }

    .nav-icon { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; flex-shrink: 0; }
    .nav-icon svg { width: 18px; height: 18px; }

    .sidebar-teacher {
      padding: 16px 20px;
      border-top: 1px solid rgba(255,255,255,0.08);
    }

    .teacher-name {
      font-size: 13px;
      font-weight: 600;
      color: white;
    }

    .teacher-school {
      font-size: 11px;
      color: var(--sidebar-text);
      margin-top: 2px;
    }

    /* ── Main ──────────────────────────────────────────── */
    .main {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow: hidden;
    }

    .topbar {
      height: 60px;
      background: var(--card);
      border-bottom: 1px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 0 28px;
    }

    .topbar-title {
      font-size: 16px;
      font-weight: 700;
    }

    .content {
      flex: 1;
      overflow-y: auto;
      padding: 28px;
    }

    /* ── Screens ───────────────────────────────────────── */
    .screen { display: none; }
    .screen.active { display: block; }

    /* ── Registration ──────────────────────────────────── */
    .reg-wrap {
      min-height: 100vh;
      display: flex;
      align-items: center;
      justify-content: center;
      background: var(--bg);
      padding: 24px;
    }

    .reg-card {
      background: var(--card);
      border-radius: 20px;
      padding: 48px 40px;
      width: 100%;
      max-width: 440px;
      box-shadow: var(--shadow-md);
    }

    .reg-logo {
      font-size: 32px;
      margin-bottom: 8px;
    }

    .reg-title {
      font-size: 24px;
      font-weight: 800;
      margin-bottom: 6px;
    }

    .reg-subtitle {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 32px;
      line-height: 1.6;
    }

    .form-label {
      display: block;
      font-size: 13px;
      font-weight: 600;
      margin-bottom: 6px;
      color: var(--text);
    }

    .form-input {
      width: 100%;
      padding: 11px 14px;
      border: 1.5px solid var(--border);
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-family: inherit;
      color: var(--text);
      outline: none;
      transition: border-color 0.15s;
      margin-bottom: 16px;
    }

    .form-input:focus { border-color: var(--primary); }

    .form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 12px 20px;
      border: none;
      border-radius: var(--radius-sm);
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s;
    }

    .btn-primary {
      background: var(--primary);
      color: white;
      border-radius: var(--radius-pill);
      font-weight: 700;
      box-shadow: 0 1px 2px rgba(16,185,129,0.3);
    }

    .btn-primary:hover { background: var(--primary-dark); transform: translateY(-1px); }

    .btn-secondary {
      background: white;
      color: var(--text);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: var(--radius-pill);
      font-weight: 600;
    }

    .btn-secondary:hover { background: #F9FAFB; }

    .btn-sm {
      padding: 7px 14px;
      font-size: 13px;
    }

    .btn-accent {
      background: var(--accent);
      color: white;
    }

    .btn-accent:hover { background: #e55a28; }

    /* ── URL Modal ─────────────────────────────────────── */
    .modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.5);
      z-index: 1000;
      align-items: center;
      justify-content: center;
    }

    .modal-overlay.active { display: flex; }

    .modal {
      background: var(--card);
      border-radius: 22px;
      padding: 32px;
      width: 90%;
      max-width: 460px;
      box-shadow: 0 10px 40px rgba(15,17,21,0.12), 0 4px 12px rgba(15,17,21,0.08);
      animation: modalIn 0.2s ease-out;
      border: 1px solid rgba(0,0,0,0.04);
    }

    @keyframes modalIn {
      from { opacity: 0; transform: scale(0.96); }
      to { opacity: 1; transform: scale(1); }
    }

    .modal-icon { display: none; }
    .modal-title { font-size: 22px; font-weight: 800; margin-bottom: 8px; color: var(--text); letter-spacing: -0.01em; }
    .modal-desc { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 24px; }

    .url-box {
      background: var(--primary-light);
      border: 1.5px solid var(--primary);
      border-radius: var(--radius-sm);
      padding: 12px 16px;
      font-size: 13px;
      font-weight: 600;
      color: var(--primary);
      word-break: break-all;
      margin-bottom: 12px;
    }

    /* ── Cards ─────────────────────────────────────────── */
    .card {
      background: var(--card);
      border-radius: var(--radius);
      padding: 20px;
      box-shadow: var(--shadow);
    }

    /* ── Dashboard ─────────────────────────────────────── */
    .page-title {
      font-size: 22px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .page-subtitle {
      font-size: 14px;
      color: var(--text-secondary);
      margin-bottom: 24px;
    }

    .class-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
      gap: 16px;
      margin-bottom: 24px;
    }

    .class-card {
      background: var(--card);
      border-radius: var(--radius);
      padding: 22px;
      box-shadow: var(--shadow);
      cursor: pointer;
      transition: transform 0.15s, box-shadow 0.2s;
      border: 1px solid rgba(0,0,0,0.04);
    }

    .class-card:hover {
      transform: translateY(-3px);
      box-shadow: var(--shadow-md);
    }

    .class-card-grade {
      display: inline-block;
      background: var(--primary-light);
      color: var(--primary);
      font-size: 11px;
      font-weight: 700;
      padding: 3px 8px;
      border-radius: 20px;
      margin-bottom: 10px;
    }

    .class-card-name {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 8px;
    }

    .class-progress-bar {
      height: 6px;
      background: var(--border);
      border-radius: 3px;
      margin-bottom: 8px;
      overflow: hidden;
    }

    .class-progress-fill {
      height: 100%;
      background: var(--primary);
      border-radius: 3px;
      transition: width 0.4s;
    }

    .class-progress-text {
      font-size: 12px;
      color: var(--text-secondary);
    }

    .class-card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 14px;
    }

    .add-class-card {
      background: transparent;
      border-radius: var(--radius);
      padding: 22px;
      cursor: pointer;
      border: 2px dashed #D1D5DB;
      color: var(--text-muted);
      transition: border-color 0.15s, background 0.15s, color 0.15s;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 8px;
      min-height: 140px;
      transition: all 0.15s;
      color: var(--text-secondary);
    }

    .add-class-card:hover {
      border-color: #9CA3AF;
      background: #F9FAFB;
      color: var(--text-secondary);
    }

    .add-class-icon { display: inline-flex; align-items: center; justify-content: center; color: inherit; }
    .add-class-icon svg { width: 22px; height: 22px; }
    .add-class-text { font-size: 14px; font-weight: 600; }

    /* ── Icon Buttons ─────────────────────────── */
    .icon-btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 36px;
      height: 36px;
      background: white;
      color: var(--text-secondary);
      border: 1px solid rgba(0,0,0,0.06);
      border-radius: 10px;
      cursor: pointer;
      font-family: inherit;
      padding: 0;
      transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
    }
    .icon-btn:hover {
      background: #F9FAFB;
      color: var(--text);
      border-color: rgba(0,0,0,0.1);
    }
    .icon-btn:active { transform: scale(0.96); }
    .icon-btn-primary {
      background: var(--primary);
      color: white;
      border-color: transparent;
    }
    .icon-btn-primary:hover { background: var(--primary-dark); color: white; }

    /* ── Class Detail ───────────────────────────────────── */
    .back-btn {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      margin-bottom: 20px;
      transition: color 0.15s;
    }

    .back-btn:hover { color: var(--primary); }

    .recommend-banner {
      background: linear-gradient(135deg, var(--primary) 0%, #4F78F0 100%);
      border-radius: var(--radius);
      padding: 20px 24px;
      color: white;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 24px;
    }

    .recommend-label {
      font-size: 11px;
      font-weight: 700;
      opacity: 0.7;
      text-transform: uppercase;
      letter-spacing: 0.08em;
      margin-bottom: 4px;
    }

    .recommend-title {
      font-size: 18px;
      font-weight: 800;
      margin-bottom: 4px;
    }

    .recommend-meta {
      font-size: 13px;
      opacity: 0.75;
    }

    .lesson-list { display: flex; flex-direction: column; gap: 1px; }

    .lesson-item {
      display: flex;
      align-items: center;
      gap: 14px;
      padding: 14px 16px;
      background: var(--card);
      transition: background 0.1s;
      cursor: pointer;
    }

    .lesson-item:first-child { border-radius: var(--radius) var(--radius) 0 0; }
    .lesson-item:last-child { border-radius: 0 0 var(--radius) var(--radius); }
    .lesson-item:hover { background: #F8F9FF; }

    /* 구버전 원형 체크 (legacy) — A안에서는 lesson-complete-toggle 사용 */
    .lesson-check {
      width: 22px;
      height: 22px;
      border-radius: 50%;
      border: 2px solid var(--border);
      display: flex;
      align-items: center;
      justify-content: center;
      flex-shrink: 0;
      transition: all 0.15s;
      cursor: pointer;
    }
    .lesson-check.done {
      background: var(--success);
      border-color: var(--success);
      color: white;
      font-size: 12px;
    }

    /* A안 — 사각 체크박스 + "완료" 라벨 */
    .lesson-complete-toggle {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 5px 10px;
      border-radius: 8px;
      border: 1.5px solid var(--border);
      background: white;
      cursor: pointer;
      flex-shrink: 0;
      transition: all 0.15s;
      user-select: none;
    }
    .lesson-complete-toggle:hover { background: #F9FAFB; }
    .lesson-complete-toggle input[type="checkbox"] {
      width: 16px;
      height: 16px;
      accent-color: var(--success, #10B981);
      cursor: pointer;
      margin: 0;
    }
    .lesson-complete-toggle span {
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .lesson-complete-toggle:has(input:checked) {
      background: var(--success-light, #ECFDF5);
      border-color: var(--success, #10B981);
    }
    .lesson-complete-toggle:has(input:checked) span {
      color: var(--success, #10B981);
    }

    .lesson-no {
      font-size: 12px;
      color: var(--text-secondary);
      width: 24px;
      flex-shrink: 0;
    }

    .lesson-info { flex: 1; }

    .lesson-title {
      font-size: 14px;
      font-weight: 600;
      margin-bottom: 3px;
    }

    .lesson-title.done { color: var(--text-secondary); text-decoration: line-through; }

    .lesson-meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 12px;
      color: var(--text-secondary);
    }

    .platform-tag {
      background: var(--primary-light);
      color: var(--primary);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    .hardware-tag {
      background: #FFF4ED;
      color: var(--accent);
      padding: 2px 7px;
      border-radius: 4px;
      font-size: 11px;
      font-weight: 600;
    }

    .lesson-action {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }

    /* ── Section header ─────────────────────────────────── */
    .section-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
    }

    .section-title {
      font-size: 16px;
      font-weight: 700;
    }

    /* ── Toast ──────────────────────────────────────────── */
    .toast {
      position: fixed;
      bottom: 28px;
      right: 28px;
      background: var(--text);
      color: white;
      padding: 12px 18px;
      border-radius: var(--radius-sm);
      font-size: 13px;
      font-weight: 500;
      box-shadow: var(--shadow-md);
      z-index: 9999;
      animation: toastIn 0.25s ease-out;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    @keyframes toastIn {
      from { opacity: 0; transform: translateY(12px); }
      to { opacity: 1; transform: translateY(0); }
    }

    /* ── Lesson detail modal ────────────────────────────── */
    .modal-body { margin-bottom: 24px; }

    .detail-row {
      display: flex;
      gap: 8px;
      margin-bottom: 8px;
      font-size: 14px;
    }

    .detail-label {
      font-weight: 600;
      min-width: 70px;
      color: var(--text-secondary);
    }

    .objectives-list {
      margin-top: 12px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .objective-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      font-size: 14px;
    }

    .objective-item::before {
      content: '•';
      color: var(--primary);
      font-weight: 700;
      flex-shrink: 0;
    }

    .modal-footer {
      display: flex;
      gap: 10px;
      justify-content: flex-end;
    }

    /* ── New class form ─────────────────────────────────── */
    .grade-select {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin-bottom: 16px;
    }

    .grade-btn {
      padding: 10px;
      border: 2px solid var(--border);
      border-radius: var(--radius-sm);
      background: white;
      font-size: 14px;
      font-weight: 600;
      font-family: inherit;
      cursor: pointer;
      transition: all 0.15s;
      text-align: center;
    }

    .grade-btn:hover { border-color: var(--primary); color: var(--primary); }
    .grade-btn.selected { border-color: var(--primary); background: var(--primary-light); color: var(--primary); }

    /* ── Scrollbar ──────────────────────────────────────── */
    ::-webkit-scrollbar { width: 6px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; }

    /* ── Util ───────────────────────────────────────────── */
    .text-secondary { color: var(--text-secondary); }
    .mt-8 { margin-top: 8px; }
    .mt-16 { margin-top: 16px; }
    .mb-16 { margin-bottom: 16px; }
    .flex { display: flex; }
    .items-center { align-items: center; }
    .gap-8 { gap: 8px; }
    .flex-1 { flex: 1; }

    /* ── Responsive — 태블릿 (768px~1023px) ─────────────────── */
    @media (max-width: 1023px) {
      body { overflow: auto; }

      #app-view {
        flex-direction: column;
        height: auto;
        min-height: 100vh;
        overflow: auto;
      }

      .sidebar {
        width: 100%;
        min-width: unset;
        flex-direction: row;
        align-items: center;
        padding: 0 16px;
        height: 56px;
        min-height: 56px;
        flex-shrink: 0;
      }

      .sidebar-logo { padding: 0; border-bottom: none; margin-right: 16px; flex-shrink: 0; }
      .sidebar-logo-text { font-size: 14px; }
      .sidebar-logo-sub { display: none; }

      .sidebar-nav {
        display: flex;
        flex-direction: row;
        gap: 4px;
        flex: 1;
        padding: 0;
      }

      .nav-item {
        padding: 6px 12px;
        border-radius: 6px;
        font-size: 13px;
        border-left: none;
        flex-shrink: 0;
      }

      .nav-item.active { border-left: none; background: var(--sidebar-active); }

      .sidebar-teacher {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 8px;
        padding: 0;
        border-top: none;
        flex-shrink: 0;
      }

      .teacher-name { font-size: 12px; max-width: 80px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
      .teacher-school { display: none; }

      .main {
        flex: 1;
        overflow-y: auto;
        height: auto;
      }

      .content { height: auto; overflow-y: visible; }

      .class-grid {
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
      }
    }

    /* ── Responsive — 모바일 (~767px) ───────────────────────── */
    @media (max-width: 767px) {
      .topbar { padding: 10px 16px; }
      .content { padding: 16px; }

      .class-grid {
        grid-template-columns: 1fr;
      }

      .recommend-banner {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
      }

      .lesson-item {
        flex-wrap: wrap;
        gap: 4px;
      }

      .lesson-action {
        margin-left: auto;
      }

      .modal {
        margin: 16px;
        max-height: calc(100vh - 32px);
        overflow-y: auto;
      }

      .grade-select {
        grid-template-columns: repeat(3, 1fr) !important;
      }
    }

    /* ── Responsive — 소형 모바일 (~480px) ──────────────────── */
    @media (max-width: 480px) {
      .lesson-meta { flex-wrap: wrap; gap: 4px; }
      .topbar-title { font-size: 15px; }
    }

    /* ═══════════════════════════════════════════════════════════
       Calendar (Phase 1 — UI only)
       ═══════════════════════════════════════════════════════════ */

    /* 학급 상세 탭 바 */
    .tab-bar {
      display: flex;
      gap: 4px;
      border-bottom: 1px solid var(--border);
      margin-bottom: 20px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .tab-bar::-webkit-scrollbar { display: none; }
    .tab-btn {
      flex-shrink: 0;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 10px 16px;
      cursor: pointer;
      border-bottom: 2px solid transparent;
      margin-bottom: -1px;
      transition: color 0.15s, border-color 0.15s;
    }
    .tab-btn:hover { color: var(--text); }
    .tab-btn.active {
      color: var(--primary);
      border-bottom-color: var(--primary);
    }
    .tab-panel { display: none; }
    .tab-panel.active { display: block; }

    .empty-tab-state {
      text-align: center;
      padding: 60px 24px;
      color: var(--text-secondary);
    }
    .empty-tab-icon {
      display: inline-flex;
      width: 48px; height: 48px;
      border-radius: 50%;
      background: #F6F7F9;
      align-items: center; justify-content: center;
      color: var(--text-muted, #9CA3AF);
      margin-bottom: 14px;
    }
    .empty-tab-title {
      font-weight: 700;
      color: var(--text);
      margin-bottom: 6px;
      font-size: 15px;
    }
    .empty-tab-desc { font-size: 13px; }

    /* 학급 필터 (통합 뷰) */
    .cal-class-filter {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 18px;
    }
    .cal-filter-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: white;
      border: 1px solid var(--border);
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, border-color 0.15s, color 0.15s;
    }
    .cal-filter-chip input { display: none; }
    .cal-filter-chip.on {
      background: #F9FAFB;
      border-color: rgba(0,0,0,0.08);
      color: var(--text);
    }
    .cal-filter-chip:not(.on) { opacity: 0.55; }
    .cal-filter-dot {
      display: inline-block;
      width: 10px; height: 10px;
      border-radius: 50%;
      flex-shrink: 0;
    }

    /* 캘린더 툴바 */
    .cal-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      gap: 12px;
      flex-wrap: wrap;
    }
    .cal-nav { display: flex; align-items: center; gap: 6px; }
    .cal-nav-btn {
      width: 32px; height: 32px;
      border: 1px solid var(--border);
      background: white;
      border-radius: 8px;
      cursor: pointer;
      display: inline-flex;
      align-items: center; justify-content: center;
      color: var(--text-secondary);
      transition: background 0.15s;
    }
    .cal-nav-btn:hover { background: #F9FAFB; color: var(--text); }
    .cal-month-label {
      font-size: 18px;
      font-weight: 800;
      color: var(--text);
      min-width: 110px;
      text-align: center;
    }
    .cal-today-btn {
      margin-left: 8px;
      padding: 6px 14px;
      border: 1px solid var(--border);
      background: white;
      border-radius: 999px;
      font-family: inherit;
      font-size: 12px;
      font-weight: 700;
      color: var(--text);
      cursor: pointer;
      transition: background 0.15s;
    }
    .cal-today-btn:hover { background: #F9FAFB; }

    /* 데스크톱 월간 그리드 */
    .cal-grid {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      overflow: hidden;
    }
    .cal-dow-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      background: #F9FAFB;
      border-bottom: 1px solid var(--border);
    }
    .cal-dow {
      padding: 10px 12px;
      font-size: 12px;
      font-weight: 700;
      color: var(--text-secondary);
      text-align: center;
    }
    .cal-dow.sun { color: #EF4444; }
    .cal-dow.sat { color: #3B82F6; }

    .cal-week-row {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      border-bottom: 1px solid var(--border);
    }
    .cal-week-row:last-child { border-bottom: none; }
    .cal-cell {
      min-height: 110px;
      padding: 8px;
      border-right: 1px solid var(--border);
      cursor: pointer;
      transition: background 0.1s;
      display: flex; flex-direction: column;
      gap: 4px;
    }
    .cal-cell:last-child { border-right: none; }
    .cal-cell:hover { background: #F9FAFB; }
    .cal-cell-empty {
      background: #FAFBFC;
      cursor: default;
    }
    .cal-cell-empty:hover { background: #FAFBFC; }
    .cal-cell.today { background: var(--primary-light); }
    .cal-cell.today:hover { background: #DCFCE7; }
    .cal-cell-date {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
    }
    .cal-cell-date.sun { color: #EF4444; }
    .cal-cell-date.sat { color: #3B82F6; }
    .cal-cell-events {
      display: flex; flex-direction: column;
      gap: 3px;
    }
    .cal-chip {
      font-size: 11px;
      font-weight: 600;
      padding: 4px 7px;
      border-radius: 6px;
      background: #EFF6FF;
      color: #3B82F6;
      border: 1px solid transparent;
      line-height: 1.35;
      word-break: keep-all;
      overflow-wrap: anywhere;
      cursor: pointer;
      transition: filter 0.15s;
    }
    .cal-chip:hover { filter: brightness(0.95); }
    .cal-chip.holiday {
      background: #F3F4F6;
      color: #6B7280;
      border-color: rgba(0,0,0,0.05);
    }
    .cal-chip-more {
      font-size: 10px;
      font-weight: 700;
      color: var(--text-secondary);
      padding: 2px 4px;
    }

    /* 모바일 캘린더 (미니 + 아젠다) */
    .cal-mini {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 12px;
      margin-bottom: 16px;
    }
    .cal-mini-dow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
      margin-bottom: 6px;
    }
    .cal-mini-dow > div {
      text-align: center;
      font-size: 11px;
      font-weight: 700;
      color: var(--text-secondary);
      padding: 4px 0;
    }
    .cal-mini-dow .sun { color: #EF4444; }
    .cal-mini-dow .sat { color: #3B82F6; }
    .cal-mini-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 2px;
    }
    .cal-mini-cell {
      aspect-ratio: 1;
      border: none;
      background: transparent;
      border-radius: 8px;
      cursor: pointer;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--text);
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background 0.15s;
    }
    .cal-mini-cell:hover:not(.empty):not(.selected) { background: #F3F4F6; }
    .cal-mini-cell.empty { cursor: default; }
    .cal-mini-cell.today { color: var(--primary); font-weight: 800; }
    .cal-mini-cell.selected {
      background: var(--primary);
      color: white;
    }
    .cal-mini-cell.selected .sun,
    .cal-mini-cell.selected .sat { color: white; }
    .cal-mini-cell .sun { color: #EF4444; }
    .cal-mini-cell .sat { color: #3B82F6; }
    .cal-mini-dot {
      position: absolute;
      bottom: 4px;
      left: 50%;
      transform: translateX(-50%);
      width: 4px; height: 4px;
      border-radius: 50%;
      background: var(--primary);
    }
    .cal-mini-cell.selected .cal-mini-dot { background: white; }

    .cal-agenda { }
    .cal-agenda-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 12px;
    }
    .cal-agenda-date {
      font-size: 16px;
      font-weight: 800;
      color: var(--text);
    }
    .cal-agenda-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .cal-agenda-empty {
      padding: 24px;
      text-align: center;
      color: var(--text-secondary);
      font-size: 13px;
      background: #FAFBFC;
      border-radius: var(--radius-sm);
    }
    .cal-agenda-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-left: 4px solid #3B82F6;
      border-radius: var(--radius-sm);
      padding: 14px;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.15s;
    }
    .cal-agenda-card:hover {
      transform: translateY(-1px);
      box-shadow: var(--shadow);
    }
    .cal-agenda-meta {
      display: flex; align-items: center; gap: 8px;
      margin-bottom: 6px;
      font-size: 12px;
    }
    .cal-agenda-class-badge {
      padding: 2px 8px;
      border-radius: 999px;
      font-size: 11px;
      font-weight: 700;
    }
    .cal-agenda-type {
      font-weight: 700;
      color: var(--text-secondary);
    }
    .cal-agenda-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
    }
    .cal-agenda-memo {
      margin-top: 4px;
      font-size: 13px;
      color: var(--text-secondary);
      white-space: pre-wrap;
    }

    /* 차시 등록 모달 — 종류 토글 */
    .cal-type-toggle {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 6px;
      padding: 4px;
      background: #F3F4F6;
      border-radius: 999px;
    }
    .cal-type-btn {
      border: none;
      background: transparent;
      font-family: inherit;
      font-size: 13px;
      font-weight: 600;
      padding: 8px 14px;
      border-radius: 999px;
      cursor: pointer;
      color: var(--text-secondary);
      transition: background 0.15s, color 0.15s, box-shadow 0.15s;
    }
    .cal-type-btn.active {
      background: white;
      color: var(--text);
      font-weight: 700;
      box-shadow: 0 1px 2px rgba(15,17,21,0.08);
    }

    /* 상세 모달 — 학급/종류 배지 */
    .cal-detail-class-badge,
    .cal-detail-type-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 12px;
      font-weight: 700;
    }

    /* 상세 모달 — 수업 완료 토글 */
    .cal-complete-row {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 12px 14px;
      background: #F9FAFB;
      border: 1px solid var(--border);
      border-radius: 12px;
      cursor: pointer;
      user-select: none;
      transition: background 0.15s, border-color 0.15s;
    }
    .cal-complete-row:hover { background: #F3F4F6; }
    .cal-complete-row input[type="checkbox"] {
      width: 18px; height: 18px;
      accent-color: var(--primary);
      cursor: pointer;
    }
    .cal-complete-row > span:nth-of-type(1) {
      font-size: 14px;
      font-weight: 700;
      color: var(--text);
    }
    .cal-complete-hint {
      margin-left: auto;
      font-size: 11px;
      color: var(--text-secondary);
      font-weight: 500;
    }
    .cal-complete-row:has(input:checked) {
      background: var(--primary-light);
      border-color: var(--primary);
    }
    .cal-complete-row:has(input:checked) > span:nth-of-type(1)::before {
      content: '✓ ';
      color: var(--primary);
    }

    /* 완료된 차시 칩 — 옅게 + 취소선 */
    .cal-chip.completed {
      opacity: 0.55;
      text-decoration: line-through;
    }
    /* 완료된 아젠다 카드 — 옅게 처리 */
    .cal-agenda-card.completed { opacity: 0.7; }
    .cal-agenda-card.completed .cal-agenda-title { text-decoration: line-through; }
    .cal-agenda-done {
      margin-left: auto;
      font-size: 11px;
      font-weight: 700;
      color: var(--primary);
      background: var(--primary-light);
      padding: 2px 8px;
      border-radius: 999px;
    }

    /* 학급 색상 팔레트 */
    .color-palette {
      display: grid;
      grid-template-columns: repeat(10, 1fr);
      gap: 8px;
      margin-top: 4px;
    }
    .color-swatch {
      width: 100%;
      aspect-ratio: 1;
      max-width: 30px;
      border: 2px solid transparent;
      border-radius: 50%;
      cursor: pointer;
      transition: transform 0.1s, border-color 0.15s;
      padding: 0;
    }
    .color-swatch:hover { transform: scale(1.08); }
    .color-swatch.selected {
      border-color: var(--text);
      box-shadow: 0 0 0 2px white inset;
    }

    /* 모바일 — 캘린더 그리드 숨김 (calendar.js가 자동 분기) */
    @media (max-width: 768px) {
      .cal-cell { min-height: 80px; }
      .color-palette { grid-template-columns: repeat(5, 1fr); }
    }

    /* ═══════════════════════════════════════════════════════════
       Lesson Plan / Log Forms (Phase 3·4 — UI only)
       ═══════════════════════════════════════════════════════════ */

    /* 목록 툴바 */
    .form-list-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 16px;
      gap: 12px;
      flex-wrap: wrap;
    }
    .form-list-title {
      font-size: 14px;
      font-weight: 700;
      color: var(--text-secondary);
    }

    /* 목록 카드 그리드 */
    .form-list {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
      gap: 12px;
    }
    .form-list-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 16px 18px;
      cursor: pointer;
      transition: transform 0.1s, box-shadow 0.15s, border-color 0.15s;
    }
    .form-list-card:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow);
      border-color: rgba(0,0,0,0.08);
    }
    .form-list-card-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 8px;
    }
    .form-list-pill {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--primary-light);
      color: var(--primary);
    }
    .form-list-pill.secondary {
      background: #F3F4F6;
      color: var(--text-secondary);
    }
    .form-list-date {
      font-size: 12px;
      color: var(--text-secondary);
      margin-left: auto;
    }
    .form-list-card-title {
      font-size: 16px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .form-list-card-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
      margin-bottom: 10px;
    }
    .form-list-card-actions {
      display: flex;
      gap: 4px;
      padding-top: 10px;
      border-top: 1px solid var(--border);
    }
    .form-card-action {
      flex: 1;
      background: none;
      border: none;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      padding: 6px;
      border-radius: 6px;
      cursor: pointer;
      transition: background 0.15s, color 0.15s;
    }
    .form-card-action:hover {
      background: #F3F4F6;
      color: var(--text);
    }
    .form-card-action.danger:hover {
      background: #FEE2E2;
      color: #DC2626;
    }

    /* 폼 툴바 (back + actions) */
    .form-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 18px;
      gap: 12px;
      flex-wrap: wrap;
    }
    .form-toolbar-back {
      background: none;
      border: none;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 6px 0;
      transition: color 0.15s;
    }
    .form-toolbar-back:hover { color: var(--text); }
    .form-toolbar-actions { display: flex; gap: 8px; }

    /* 문서 본문 */
    .form-doc {
      display: flex;
      flex-direction: column;
      gap: 14px;
    }
    .form-section {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius);
      padding: 20px;
    }
    .form-section-title {
      font-size: 14px;
      font-weight: 800;
      color: var(--primary);
      margin-bottom: 14px;
      letter-spacing: -0.01em;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .form-section-linked {
      background: linear-gradient(180deg, #ECFDF5 0%, var(--card) 18%);
    }

    .form-linked-badge {
      font-size: 11px;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--primary);
      color: white;
    }
    .form-linked-hint {
      font-size: 11px;
      font-weight: 500;
      color: var(--text-secondary);
    }

    .form-grid-2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 12px;
    }

    /* 폼 내부 form-input/label 자체는 기존 스타일 그대로 */
    .form-section .form-label {
      display: block;
      margin-bottom: 6px;
      font-size: 13px;
      font-weight: 600;
      color: var(--text-secondary);
    }
    .form-section textarea.form-input {
      resize: vertical;
      min-height: 60px;
      font-family: inherit;
      line-height: 1.55;
    }
    .form-section input[disabled],
    .form-section textarea[disabled] {
      background: #F9FAFB;
      color: var(--text);
      cursor: default;
    }

    /* 체크박스 그리드 (플랫폼) */
    .form-checkbox-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
      gap: 8px;
    }
    .form-checkbox {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 8px 12px;
      border: 1px solid var(--border);
      border-radius: 10px;
      cursor: pointer;
      font-size: 13px;
      font-weight: 600;
      color: var(--text);
      background: white;
      transition: background 0.15s, border-color 0.15s;
      user-select: none;
    }
    .form-checkbox:hover { background: #F9FAFB; }
    .form-checkbox input { accent-color: var(--primary); }
    .form-checkbox input:checked + span { color: var(--primary); }
    .form-checkbox:has(input:checked) {
      border-color: var(--primary);
      background: var(--primary-light);
    }

    /* 사진 placeholder */
    .form-photos-placeholder {
      text-align: center;
      padding: 32px 20px;
      background: #FAFBFC;
      border: 1px dashed var(--border);
      border-radius: var(--radius-sm);
      color: var(--text-secondary);
    }
    .form-photos-icon {
      display: inline-flex;
      width: 44px; height: 44px;
      border-radius: 50%;
      background: white;
      align-items: center; justify-content: center;
      color: var(--text-muted, #9CA3AF);
      margin-bottom: 10px;
      border: 1px solid var(--border);
    }
    .form-photos-text {
      font-size: 13px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .form-photos-hint {
      font-size: 11px;
    }

    /* 계획서 연동 해제 버튼 */
    .form-link-clear {
      background: none;
      border: none;
      font-family: inherit;
      font-size: 12px;
      font-weight: 600;
      color: var(--text-secondary);
      cursor: pointer;
      padding: 4px 8px;
      margin-left: 6px;
      border-radius: 6px;
      transition: background 0.15s, color 0.15s;
    }
    .form-link-clear:hover {
      background: #FEE2E2;
      color: #DC2626;
    }

    /* 계획서 선택 모달 */
    .plan-picker-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      max-height: 60vh;
      overflow-y: auto;
      margin: -4px;
      padding: 4px;
    }
    .plan-picker-item {
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 14px;
      cursor: pointer;
      transition: background 0.12s, border-color 0.12s, transform 0.1s;
    }
    .plan-picker-item:hover {
      background: var(--primary-light);
      border-color: var(--primary);
      transform: translateY(-1px);
    }
    .plan-picker-meta {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      margin-bottom: 6px;
    }
    .plan-picker-title {
      font-size: 15px;
      font-weight: 700;
      color: var(--text);
      margin-bottom: 4px;
    }
    .plan-picker-desc {
      font-size: 13px;
      color: var(--text-secondary);
      line-height: 1.5;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 모바일 — 폼 단일 컬럼 */
    @media (max-width: 640px) {
      .form-grid-2 { grid-template-columns: 1fr; }
      .form-section { padding: 16px; }
    }

    /* ═══════════════════════════════════════════════════════════
       PRINT — 수업계획서 / 수업일지 PDF 저장
       window.print() 시 폼만 깔끔하게 인쇄됨
       ═══════════════════════════════════════════════════════════ */
    @media print {
      @page {
        size: A4;
        margin: 14mm 12mm;
      }

      /* 인쇄 모드 진입 시 비-콘텐츠 영역 모두 숨김 */
      body.print-mode-plan .sidebar,
      body.print-mode-plan .topbar,
      body.print-mode-plan .tab-bar,
      body.print-mode-plan .form-toolbar,
      body.print-mode-plan #plans-list-view,
      body.print-mode-plan #screen-class-detail .back-btn,
      body.print-mode-plan #screen-class-detail .icon-btn,
      body.print-mode-plan #recommend-banner,
      body.print-mode-plan #lesson-list,
      body.print-mode-plan #tab-panel-calendar,
      body.print-mode-plan #tab-panel-logs,
      body.print-mode-log .sidebar,
      body.print-mode-log .topbar,
      body.print-mode-log .tab-bar,
      body.print-mode-log .form-toolbar,
      body.print-mode-log #logs-list-view,
      body.print-mode-log #screen-class-detail .back-btn,
      body.print-mode-log #screen-class-detail .icon-btn,
      body.print-mode-log #recommend-banner,
      body.print-mode-log #lesson-list,
      body.print-mode-log #tab-panel-calendar,
      body.print-mode-log #tab-panel-plans,
      body.print-mode-log .form-photos-placeholder {
        display: none !important;
      }

      /* 메인 영역을 페이지 전체로 */
      body.print-mode-plan .main,
      body.print-mode-log .main {
        margin: 0 !important;
        padding: 0 !important;
        width: 100% !important;
      }
      body.print-mode-plan .content,
      body.print-mode-log .content {
        padding: 0 !important;
      }

      /* 학급명/메타는 표지처럼 상단에 보이게 */
      body.print-mode-plan #screen-class-detail .page-title,
      body.print-mode-log #screen-class-detail .page-title {
        font-size: 22px;
        margin-bottom: 4px;
      }
      body.print-mode-plan #detail-class-meta,
      body.print-mode-log #detail-class-meta {
        font-size: 12px;
        margin-bottom: 14px;
      }

      /* 폼 섹션 — 페이지 잘림 최소화 */
      .form-section {
        page-break-inside: avoid;
        box-shadow: none !important;
        border: 1px solid #ccc !important;
        margin-bottom: 10px !important;
        padding: 14px 16px !important;
      }
      .form-section-title {
        color: #000 !important;
        font-size: 13px !important;
        margin-bottom: 10px !important;
        border-bottom: 1px solid #ccc;
        padding-bottom: 4px;
      }
      .form-section .form-label {
        color: #444 !important;
        font-size: 11px !important;
        margin-bottom: 3px !important;
      }
      .form-section input,
      .form-section textarea,
      .form-section select {
        background: white !important;
        border: 1px solid #ddd !important;
        color: #000 !important;
        font-size: 12px !important;
        padding: 6px 8px !important;
        line-height: 1.5 !important;
        -webkit-appearance: none;
        appearance: none;
        resize: none;
        overflow: visible !important;
        height: auto !important;
        min-height: 0 !important;
      }
      /* textarea를 1줄 input처럼 펼치지 말고 wrap된 그대로 표시 */
      .form-section textarea {
        white-space: pre-wrap;
        word-wrap: break-word;
      }
      .form-section input:disabled,
      .form-section textarea:disabled {
        background: #fafafa !important;
        color: #000 !important;
      }
      .form-grid-2 { gap: 8px !important; }
      .form-checkbox-grid { gap: 6px !important; }
      .form-checkbox {
        background: white !important;
        border: 1px solid #ccc !important;
        font-size: 11px !important;
        padding: 4px 8px !important;
      }

      /* 모달은 절대 인쇄에 끼지 않게 */
      .modal-overlay { display: none !important; }
      /* 토스트 / 토픽 메뉴 */
      #toast { display: none !important; }
    }