@font-face {
  font-family: "Fahkwang";
  src: url("/assets/fonts/Fahkwang-Regular.ttf") format("truetype");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Fahkwang";
  src: url("/assets/fonts/Fahkwang-Medium.ttf") format("truetype");
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
}
@font-face {
  font-family: "Fahkwang";
  src: url("/assets/fonts/Fahkwang-Bold.ttf") format("truetype");
  font-style: normal;
  font-weight: 700;
  font-display: swap;
}
@keyframes spin { to { transform: rotate(360deg); } }
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; font-family: "Verdana", sans-serif; }
      body { background: #EEE8DC; }
      ::-webkit-scrollbar { width: 4px; }
      ::-webkit-scrollbar-track { background: #EEE8DC; }
      ::-webkit-scrollbar-thumb { background: #3D4B2E; border-radius: 2px; }
      button:focus { outline: none; }
      input:focus, textarea:focus, select:focus { outline: 2px solid #3D4B2E; outline-offset: 1px; }
      .pill {
        display: flex; align-items: center; gap: 6px;
        border-radius: 20px; padding: 5px 12px;
        cursor: pointer; user-select: none;
        border: 1.5px solid rgba(255,255,255,0.2);
        background: rgba(255,255,255,0.1);
        transition: transform 0.12s, box-shadow 0.12s, opacity 0.15s;
      }
      .pill:hover  { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.2); }
      .pill:active { transform: scale(0.96); }
      .pill.on  { background: white !important; border-color: var(--cat-border) !important; box-shadow: 0 2px 10px rgba(0,0,0,0.2); }
      .pill.dim { opacity: 0.38; }
      .cal-main-grid { display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:20px; align-items:start; }
      .cal-main-grid > * { min-width:0; overflow:hidden; }
      .cal-main-grid > *:last-child { position:sticky; top:20px; }
      @media (max-width:1200px) {
        .cal-main-grid { grid-template-columns:minmax(0,1fr) 260px; gap:14px; }
      }
      @media (max-width:1000px) {
        .cal-main-grid { grid-template-columns:1fr; }
        .cal-main-grid > *:last-child { position:static; }
      }
      .timeline-card {
        border-radius: 12px; padding: 16px 18px; margin-bottom: 12px;
        transition: transform 0.1s, box-shadow 0.1s; cursor: pointer;
      }
      .timeline-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(42,56,32,0.12); }
      .view-toggle { display: flex; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255,255,255,0.25); }
      .view-toggle button { background: rgba(255,255,255,0.08); color: white; border: none; padding: 6px 16px; font-size: 12px; font-weight: 600; cursor: pointer; transition: background 0.15s; }
      .view-toggle button.active { background: rgba(255,255,255,0.28); }
      .view-toggle button:hover:not(.active) { background: rgba(255,255,255,0.15); }
      .month-section { margin-bottom: 28px; }
      .month-header { font-family: "Fahkwang", sans-serif; font-size: 20px; font-weight: 700; color: #2A3820; margin-bottom: 12px; padding-bottom: 8px; border-bottom: 2px solid #CDB98B; display: flex; align-items: center; gap: 10px; }
      .month-header .count { background: #3D4B2E; color: #EEE8DC; border-radius: 12px; padding: 2px 10px; font-size: 12px; font-family: "Verdana", sans-serif; }
      .rj-panel {
        background: #fff;
        border-radius: 16px;
        overflow: hidden;
        box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 4px 16px rgba(42,56,32,0.06);
      }