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

    body {
      font-family: 'Hiragino Maru Gothic Pro', 'BIZ UDPGothic', sans-serif;
      background: #fff9e6;
      min-height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    header {
      width: 100%;
      background: linear-gradient(135deg, #ff7eb3, #ff9a44);
      padding: 16px 24px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    }

    header h1 {
      color: white;
      font-size: clamp(1.4rem, 4vw, 2rem);
      text-shadow: 2px 2px 4px rgba(0,0,0,0.2);
    }

    #edit-btn {
      background: white;
      color: #ff7eb3;
      border: none;
      border-radius: 20px;
      padding: 8px 18px;
      font-size: 0.95rem;
      font-weight: bold;
      cursor: pointer;
      box-shadow: 0 2px 6px rgba(0,0,0,0.15);
      transition: transform 0.1s;
    }
    #edit-btn:hover { transform: scale(1.05); }

    /* ========== メイン表示 ========== */
    #main-view {
      width: 100%;
      max-width: 600px;
      padding: 24px 16px;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 20px;
    }

    #clock {
      font-size: clamp(3rem, 12vw, 5rem);
      font-weight: bold;
      color: #444;
      letter-spacing: 4px;
      text-shadow: 2px 2px 0 #e0d0b0;
    }

    #current-card {
      width: 100%;
      border-radius: 24px;
      padding: 32px 24px;
      text-align: center;
      box-shadow: 0 8px 24px rgba(0,0,0,0.12);
      transition: background 0.5s, color 0.5s;
    }

    #current-label {
      font-size: clamp(1rem, 3vw, 1.2rem);
      margin-bottom: 8px;
      opacity: 0.85;
    }

    #current-period {
      font-size: clamp(2.8rem, 10vw, 4.5rem);
      font-weight: bold;
      line-height: 1.1;
      margin-bottom: 12px;
    }

    #current-time-range {
      font-size: clamp(1rem, 3vw, 1.3rem);
      opacity: 0.75;
    }

    #next-info {
      font-size: clamp(0.85rem, 2.5vw, 1rem);
      margin-top: 14px;
      opacity: 0.7;
    }

    /* カードの色テーマ */
    .theme-class   { background: #ffe4f0; color: #c2185b; }
    .theme-break   { background: #e8f5e9; color: #2e7d32; }
    .theme-lunch   { background: #fff8e1; color: #f57f17; }
    .theme-before  { background: #e3f2fd; color: #1565c0; }
    .theme-after   { background: #ede7f6; color: #4527a0; }
    .theme-clean   { background: #e0f7fa; color: #00696f; }
    .theme-none    { background: #f5f5f5; color: #555; }

    /* ========== 時間割一覧 ========== */
    #schedule-view {
      width: 100%;
      max-width: 600px;
      padding: 16px;
    }

    #schedule-view h2 {
      font-size: 1.2rem;
      color: #555;
      margin-bottom: 12px;
      text-align: center;
    }

    .slot-row {
      display: flex;
      align-items: center;
      gap: 8px;
      background: white;
      border-radius: 12px;
      padding: 10px 14px;
      margin-bottom: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    }

    .slot-row.is-current {
      outline: 3px solid #ff7eb3;
    }

    .slot-badge {
      min-width: 44px;
      height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 0.8rem;
      font-weight: bold;
      color: white;
      flex-shrink: 0;
    }

    .slot-info { flex: 1; min-width: 0; }
    .slot-name { font-size: 1rem; font-weight: bold; color: #333; }
    .slot-time { font-size: 0.82rem; color: #888; margin-top: 2px; }

    .slot-actions { display: flex; gap: 6px; }
    .slot-actions button {
      background: none;
      border: 1px solid #ddd;
      border-radius: 8px;
      padding: 4px 10px;
      cursor: pointer;
      font-size: 0.8rem;
      color: #666;
      transition: background 0.15s;
    }
    .slot-actions button:hover { background: #f0f0f0; }
    .slot-actions .del-btn { color: #e53935; border-color: #ffcdd2; }
    .slot-actions .del-btn:hover { background: #ffebee; }

    #add-slot-btn {
      width: 100%;
      padding: 12px;
      border: 2px dashed #ffb3d0;
      border-radius: 12px;
      background: none;
      cursor: pointer;
      font-size: 1rem;
      color: #ff7eb3;
      margin-top: 4px;
      transition: background 0.15s;
    }
    #add-slot-btn:hover { background: #fff0f5; }

    /* ========== モーダル ========== */
    #modal-overlay {
      display: none;
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.45);
      z-index: 100;
      justify-content: center;
      align-items: center;
    }
    #modal-overlay.open { display: flex; }

    #modal {
      background: white;
      border-radius: 20px;
      padding: 28px 24px;
      width: min(90vw, 380px);
      box-shadow: 0 16px 48px rgba(0,0,0,0.2);
    }

    #modal h3 { font-size: 1.2rem; margin-bottom: 20px; color: #333; }

    .form-group { margin-bottom: 16px; }
    .form-group label { display: block; font-size: 0.9rem; color: #666; margin-bottom: 6px; }
    .form-group input, .form-group select {
      width: 100%;
      padding: 10px 14px;
      border: 2px solid #eee;
      border-radius: 10px;
      font-size: 1rem;
      transition: border-color 0.2s;
    }
    .form-group input:focus, .form-group select:focus {
      outline: none;
      border-color: #ff7eb3;
    }

    .time-row { display: flex; gap: 10px; align-items: center; }
    .time-row span { color: #888; }

    .modal-actions { display: flex; gap: 10px; margin-top: 20px; }
    .modal-actions button {
      flex: 1;
      padding: 12px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      font-weight: bold;
      cursor: pointer;
      transition: opacity 0.2s;
    }
    .modal-actions button:hover { opacity: 0.85; }
    #modal-cancel { background: #f0f0f0; color: #555; }
    #modal-save   { background: linear-gradient(135deg, #ff7eb3, #ff9a44); color: white; }
  
header { gap:12px; flex-wrap:wrap; } button { min-height:44px; }
#current-period,.slot-name { overflow-wrap:anywhere; }
#settings { width:100%; background:white; border-radius:16px; padding:16px; }
#settings p { line-height:1.8; margin:8px 0; color:#555; }
#settings select { font:inherit; padding:10px; max-width:100%; }
#settings button { font:inherit; padding:8px; margin:8px 0; }
#notice { color:#963a00; line-height:1.6; }
#modal { max-height:90dvh; overflow-y:auto; }
#modal-overlay { padding:12px; }
.slot-actions { flex-wrap:wrap; }
.time-row input { min-width:0; }
:focus-visible { outline:3px solid #1565c0; outline-offset:3px; }
[hidden] { display:none !important; }
@media(max-width:420px) { header {padding:12px;} .slot-row {flex-wrap:wrap;} .slot-actions {width:100%; justify-content:flex-end;} #current-card {padding:24px 16px;} }