:root {
      --bg: #0f1115;
      --panel: #171a21;
      --panel2: #1d2330;
      --line: #2b3547;
      --text: #eef4ff;
      --muted: #a8b3c7;
      --accent: #7aa2ff;
      --cell: #131923;
      --changed: #33280f;
      --changed-line: #9a7824;
      --live-bg: #12241c;
      --live-line: #2f6b4f;
      --live-dot: #4ade80;
      --break-bg: #241f12;
      --break-line: #6b5a2f;
    }

    * { box-sizing: border-box; }

    body {
      margin: 0;
      padding: 24px;
      background: var(--bg);
      color: var(--text);
      font-family: Pretendard, "Noto Sans KR", system-ui, sans-serif;
    }

    .wrap {
      max-width: 1100px;
      margin: 0 auto;
    }

    .card {
      background: var(--panel);
      border: 1px solid var(--line);
      border-radius: 18px;
      padding: 18px;
      margin-bottom: 18px;
    }

    h1 {
      margin: 0 0 10px;
      font-size: 26px;
    }

    .controls {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 16px;
    }

    select, button {
      height: 46px;
      border-radius: 12px;
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      font-size: 15px;
      padding: 0 14px;
    }

    select {
      min-width: 140px;
    }

    button {
      background: var(--accent);
      color: #0c1220;
      font-weight: 800;
      border: none;
      cursor: pointer;
      min-width: 120px;
    }

    .status {
      margin-top: 14px;
      font-size: 14px;
      color: var(--muted);
      white-space: pre-wrap;
      line-height: 1.6;
    }

    .meta {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 12px;
      margin-top: 16px;
    }

    .meta-item {
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 14px;
      padding: 12px 14px;
    }

    .meta-k {
      color: var(--muted);
      font-size: 12px;
      margin-bottom: 6px;
    }

    .meta-v {
      font-weight: 800;
      font-size: 15px;
      word-break: break-all;
    }

    /* 실시간 수업 현황 카드 */
    .now-card {
      padding: 20px 18px 24px;
    }

    .now-title {
      font-size: 14px;
      color: var(--muted);
      margin-bottom: 12px;
      font-weight: 700;
      letter-spacing: 0.02em;
    }

    .now-time-controls {
      display: flex;
      align-items: center;
      gap: 10px;
      flex-wrap: wrap;
      margin-bottom: 10px;
    }

    .time-toggle {
      display: inline-flex;
      background: var(--panel2);
      border: 1px solid var(--line);
      border-radius: 10px;
      padding: 3px;
      flex-shrink: 0;
    }

    .time-mode-btn {
      border: none;
      background: transparent;
      color: var(--muted);
      font-size: 14px;
      font-weight: 700;
      padding: 8px 16px;
      border-radius: 8px;
      cursor: pointer;
      height: auto;
    }

    .time-mode-btn.active {
      background: var(--accent);
      color: #0c1220;
    }

    .manual-controls {
      display: none;
      align-items: center;
      gap: 10px;
      margin-bottom: 16px;
      flex-wrap: wrap;
    }

    .manual-controls.open {
      display: flex;
    }

    .manual-time-input {
      height: 44px;
      border-radius: 10px;
      border: 1px solid var(--line);
      background: var(--panel2);
      color: var(--text);
      font-size: 15px;
      padding: 0 12px;
    }

    .manual-start-btn {
      height: 44px;
      padding: 0 22px;
      border-radius: 10px;
      border: none;
      background: var(--accent);
      color: #0c1220;
      font-weight: 800;
      font-size: 15px;
      cursor: pointer;
      min-width: 0;
    }

    /* 칠판에 붙일 큰 현황판 */
    .now-board {
      text-align: center;
      padding: 44px 24px 34px;
      border-radius: 22px;
      border: 2px solid var(--line);
      background: var(--panel2);
    }

    .now-board.now-live {
      border-color: var(--live-line);
      background: var(--live-bg);
    }

    .now-board.now-break {
      border-color: var(--break-line);
      background: var(--break-bg);
    }

    .now-board-context {
      font-size: 15px;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 14px;
    }

    .now-board-tag {
      display: inline-block;
      font-weight: 900;
      font-size: 20px;
      background: var(--accent);
      color: #0c1220;
      padding: 8px 22px;
      border-radius: 999px;
      margin-bottom: 22px;
      letter-spacing: 0.02em;
    }

    .now-board-tag.break-tag {
      background: #f5b942;
    }

    .now-board-subject {
      font-size: 64px;
      font-weight: 900;
      line-height: 1.15;
      margin-bottom: 14px;
      word-break: keep-all;
    }

    .now-board-people {
      font-size: 24px;
      color: var(--muted);
      font-weight: 700;
      margin-bottom: 28px;
    }

    .now-board-timeinfo {
      font-size: 26px;
      font-weight: 800;
      margin-bottom: 18px;
    }

    .progress-bar-wrap {
      width: 100%;
      max-width: 620px;
      margin: 0 auto 14px;
      height: 20px;
      border-radius: 999px;
      background: #0c1220;
      overflow: hidden;
      border: 1px solid var(--line);
    }

    .progress-bar-fill {
      height: 100%;
      background: var(--accent);
      transition: width 1s linear;
    }

    .now-board.now-break .progress-bar-fill {
      background: #f5b942;
    }

    .now-board-percent {
      font-size: 18px;
      color: var(--muted);
      font-weight: 700;
    }

    .now-board-off-text {
      font-size: 34px;
      font-weight: 900;
    }

    .now-board-off-sub {
      font-size: 18px;
      color: var(--muted);
      margin-top: 12px;
      font-weight: 700;
    }

    .now-clock {
      margin-top: 16px;
      font-size: 14px;
      color: var(--muted);
      text-align: center;
      font-weight: 600;
    }

    .table-wrap {
      overflow-x: auto;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: var(--panel);
    }

    /* 가정통신문 카드 */
    .notice-card {
      padding: 18px 18px 8px;
    }

    .notice-list {
      display: flex;
      flex-direction: column;
    }

    .notice-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 14px;
      padding: 14px 4px;
      border-bottom: 1px solid var(--line);
    }

    .notice-item:last-child {
      border-bottom: none;
    }

    .notice-main {
      display: flex;
      flex-direction: column;
      gap: 5px;
      min-width: 0;
    }

    .notice-subject {
      font-weight: 700;
      font-size: 15px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .notice-today-tag {
      flex-shrink: 0;
      font-size: 11px;
      font-weight: 800;
      background: var(--accent);
      color: #0c1220;
      padding: 2px 8px;
      border-radius: 999px;
    }

    .notice-meta {
      font-size: 12px;
      color: var(--muted);
    }

    .notice-view-btn {
      height: 40px;
      padding: 0 18px;
      border-radius: 10px;
      border: none;
      background: var(--accent);
      color: #0c1220;
      font-weight: 800;
      font-size: 14px;
      cursor: pointer;
      flex-shrink: 0;
      min-width: 0;
    }

    .notice-view-btn:disabled {
      background: var(--panel2);
      color: var(--muted);
      cursor: not-allowed;
      border: 1px solid var(--line);
    }

    .notice-empty {
      padding: 20px 4px;
      color: var(--muted);
      font-size: 14px;
    }

    table {
      width: 100%;
      min-width: 900px;
      border-collapse: collapse;
    }

    th, td {
      border-right: 1px solid var(--line);
      border-bottom: 1px solid var(--line);
      padding: 10px 8px;
      text-align: center;
      vertical-align: top;
    }

    th {
      background: #111722;
      font-size: 14px;
    }

    td.period {
      background: #111722;
      width: 110px;
      font-weight: 800;
    }

    td.cell {
      background: var(--cell);
      height: 92px;
      min-width: 150px;
    }

    td.cell.changed {
      background: var(--changed);
      box-shadow: inset 0 0 0 1px var(--changed-line);
    }

    .subject {
      font-size: 15px;
      font-weight: 800;
      line-height: 1.25;
      margin-bottom: 6px;
    }

    .teacher, .room, .code {
      color: var(--muted);
      font-size: 12px;
      line-height: 1.5;
    }

    @media (max-width: 900px) {
      .meta {
        grid-template-columns: 1fr 1fr;
      }
    }

    @media (max-width: 640px) {
      .controls {
        flex-direction: column;
      }

      select, button {
        width: 100%;
      }

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

      .now-time-controls {
        flex-direction: column;
        align-items: stretch;
      }

      .manual-controls {
        flex-direction: column;
        align-items: stretch;
      }

      .manual-time-input {
        width: 100%;
      }

      .manual-start-btn {
        width: 100%;
      }

      .now-board {
        padding: 30px 16px 24px;
        border-radius: 18px;
      }

      .now-board-subject {
        font-size: 38px;
      }

      .now-board-people {
        font-size: 18px;
        margin-bottom: 20px;
      }

      .now-board-timeinfo {
        font-size: 20px;
      }

      .now-board-off-text {
        font-size: 26px;
      }

      .notice-item {
        flex-direction: column;
        align-items: stretch;
      }

      .notice-view-btn {
        width: 100%;
      }
    }