/* 모바일 전용 (max-width: 768px). 데스크톱 style.css는 수정하지 않음 */

@media (max-width: 768px) {
  :root {
    --mobile-tab-bar-h: 54px;
    --mobile-header-h: 152px;
  }

  html,
  body {
    height: auto;
    overflow: auto;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }

  html.display-timeline,
  html.display-timeline body {
    height: auto;
    overflow: auto;
  }

  html.display-timeline .page {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
  }

  html.display-timeline .layout {
    flex: none;
    min-height: auto;
    overflow: visible;
  }

  html.display-timeline .calendar-column {
    overflow: visible;
    max-height: none;
  }

  .page {
    height: auto;
    min-height: 100dvh;
    overflow: visible;
    padding:
      max(8px, env(safe-area-inset-top))
      max(12px, env(safe-area-inset-right))
      calc(var(--mobile-tab-bar-h) + env(safe-area-inset-bottom, 0px) + 12px)
      max(12px, env(safe-area-inset-left));
  }

  .layout {
    display: flex !important;
    flex-direction: column;
    grid-template-columns: unset !important;
    align-items: stretch !important;
    gap: 12px;
    min-height: auto;
    width: 100%;
    max-width: 100%;
  }

  html.display-timeline .layout {
    align-items: stretch !important;
  }

  .sidebar {
    display: flex;
    flex-direction: column;
    order: 1;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    height: auto;
    min-height: auto;
    gap: 12px;
    max-height: none;
    overflow: visible;
    pointer-events: auto;
  }

  /* ── 상단 헤더 (데스크톱 사이드바 패널 톤) ── */
  .header--sidebar {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    z-index: 51;
    margin-bottom: 0;
    padding: 12px 14px;
    pointer-events: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    border: 1px solid var(--border);
    background: var(--surface);
  }

  .header--sidebar .header-top-row .header-toolbar,
  .header--sidebar .header-top-row .header-auth {
    position: relative;
    z-index: 2;
  }

  .header--sidebar .auth-user-popover {
    z-index: 120;
  }

  body.is-mobile .layout,
  html.is-mobile-view .layout {
    padding-top: calc(var(--mobile-header-h, 152px) + max(8px, env(safe-area-inset-top)) + 8px);
  }

  /* 헤더·상태바 위로 스크롤되는 일정은 불투명 레이어로 가림 (iOS는 ::before보다 DOM이 안정적) */
  .mobile-top-veil {
    display: none;
  }

  html.is-mobile-view .mobile-top-veil {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 48;
    height: calc(var(--mobile-header-h, 152px) + max(8px, env(safe-area-inset-top)) + 12px);
    pointer-events: none;
    background-color: var(--bg);
    background-image: var(--bg-accent);
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 76%, transparent 100%);
  }

  html.is-mobile-view .header--sidebar {
    position: fixed;
    top: max(8px, env(safe-area-inset-top));
    left: max(12px, env(safe-area-inset-left));
    right: max(12px, env(safe-area-inset-right));
    width: auto;
    z-index: 51;
  }

  html.is-mobile-view .sidebar {
    display: contents;
    height: auto;
    min-height: auto;
    overflow: visible;
    pointer-events: auto;
  }

  html.is-mobile-view .calendar-subscribe-panel,
  html.is-mobile-view .calendar-live-panel {
    display: none !important;
  }

  html.is-mobile-view a.calendar-live-orb:not(.hidden),
  a.calendar-live-orb:not(.hidden) {
    display: block !important;
    /* 하단 탭바(일정/구독/주요) 위로 올려 가리지 않음 */
    bottom: calc(var(--mobile-tab-bar-h) + env(safe-area-inset-bottom, 0px) + 14px);
    right: max(14px, env(safe-area-inset-right, 0px));
    width: 58px;
    height: 58px;
    z-index: 55; /* tab bar(60) 아래 — 탭 클릭 우선 */
  }

  body.modal-open a.calendar-live-orb:not(.hidden) {
    /* 모달 때 탭바 숨김 → 기본 여백만 */
    bottom: max(20px, calc(env(safe-area-inset-bottom, 0px) + 16px));
  }

  html.is-mobile-view .calendar-column,
  html.is-mobile-view .highlights-panel {
    order: 2;
  }

  html.is-mobile-view .calendar-page-note {
    order: 10;
    width: 100%;
    margin-top: 8px;
    padding: 0 4px calc(10px + env(safe-area-inset-bottom, 0px));
  }

  body.is-mobile.mobile-tab-calendar .calendar-page-note,
  body.is-mobile.mobile-tab-highlights .calendar-page-note {
    display: block;
  }

  body.is-mobile .highlights-panel,
  body.is-mobile .legend-panel {
    pointer-events: auto;
  }

  body.is-mobile .links-promo-panel,
  body.is-mobile .musicbook-promo-panel {
    display: none !important;
  }

  .header-mobile-foot {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    width: 100%;
    min-height: 34px;
    margin: 4px 0 0;
    padding-top: 2px;
  }

  #mobile-scroll-today {
    position: absolute;
    left: 0;
    bottom: 0;
  }

  .header-mobile-quick-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 30px;
    padding: 5px 12px;
    border-radius: 999px;
    border: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
    background: var(--surface-2);
    color: var(--accent-deep);
    font-family: inherit;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    box-shadow: var(--shadow-sm);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
  }

  .header-mobile-quick-btn:active {
    transform: scale(0.98);
  }

  .header-home-icon-btn {
    position: absolute;
    right: 0;
    bottom: 0;
  }

  .header-home-icon-btn:active {
    transform: scale(0.98);
  }

  .header-mobile-foot .debut-day {
    margin: 0;
    min-width: 0;
  }

  .header-mobile-foot .debut-day.hidden {
    display: none;
  }

  .header--sidebar .header-top-row {
    gap: 8px;
  }

  .header--sidebar .header-top-row .view-toggle {
    margin-left: auto;
  }

  .header--sidebar .page-title {
    font-size: 1.22rem;
    line-height: 1.15;
  }

  .header--sidebar .header-auth .auth-login-btn {
    height: 28px;
    min-height: 28px;
    font-size: 0.72rem;
    padding: 0 10px;
  }

  .header--sidebar .header-auth .auth-user-avatar {
    width: 28px;
    height: 28px;
  }

  .header--sidebar .header-month {
    margin-top: 2px;
  }

  .header--sidebar .header-month .month-title {
    font-size: 1.45rem;
    letter-spacing: -0.03em;
  }

  .header--sidebar .header-month .nav-btn,
  .nav-btn {
    width: 42px;
    height: 42px;
    font-size: 0.82rem;
    border-radius: 12px;
  }

  .view-toggle-btn {
    min-height: 40px;
    padding: 8px 14px;
    font-size: 0.82rem;
  }

  .header--sidebar .view-toggle {
    width: auto;
    flex-shrink: 0;
  }

  .calendar-column {
    order: 2;
    min-height: 0;
    height: auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  html.display-timeline .calendar-column {
    width: 100% !important;
    align-self: stretch;
  }

  /* 데스크톱 그리드 대신 모바일 아젠다만 표시 */
  .calendar-wrap {
    display: none !important;
  }

  #mobile-agenda {
    display: flex !important;
    width: 100%;
  }

  #mobile-agenda.hidden {
    display: flex !important;
  }

  .mobile-agenda-empty {
    margin: 0;
    padding: 28px 16px;
    text-align: center;
    color: var(--muted);
    font-size: 0.9rem;
    font-weight: 600;
    border: 1px dashed color-mix(in srgb, var(--accent) 22%, var(--border));
    border-radius: var(--radius);
    background: linear-gradient(180deg, var(--surface-2) 0%, var(--surface) 100%);
  }

  .mobile-agenda-empty--error {
    color: #c0392b;
    border-color: color-mix(in srgb, #c0392b 30%, var(--border));
  }

  /* ── 탭별 레이아웃 ── */
  body.is-mobile.mobile-tab-calendar .highlights-panel {
    display: none;
  }

  body.is-mobile.mobile-tab-calendar .legend-panel {
    display: block;
    margin-top: 0;
  }

  body.is-mobile.mobile-tab-highlights .calendar-column,
  body.is-mobile.mobile-tab-highlights .legend-panel {
    display: none;
  }

  body.is-mobile.mobile-tab-calendar .calendar-column {
    display: flex;
    flex: none;
    min-height: auto;
  }

  body.is-mobile.mobile-tab-highlights .highlights-panel {
    display: block;
    width: 100%;
    min-height: calc(100dvh - 200px - var(--mobile-tab-bar-h) - env(safe-area-inset-bottom, 0px));
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 16px 18px;
    box-shadow: var(--shadow);
  }

  body.is-mobile.mobile-tab-highlights .hl-text {
    font-size: 0.9rem;
    line-height: 1.38;
  }

  body.is-mobile.mobile-tab-highlights .hl-cat {
    font-size: 0.56rem;
    padding: 1px 5px;
  }

  body.is-mobile.mobile-tab-highlights .hl-card {
    min-height: 52px;
    border-radius: 11px;
  }

  body.is-mobile.mobile-tab-highlights .hl-date-col,
  body.is-mobile.mobile-tab-highlights .hl-date-pill {
    min-width: 48px;
    padding: 8px 6px;
  }

  body.is-mobile.mobile-tab-highlights .hl-date-num {
    font-size: 0.84rem;
  }

  body.is-mobile.mobile-tab-highlights .hl-head-aside {
    flex-wrap: wrap;
    justify-content: flex-end;
  }

  body.is-mobile.mobile-tab-highlights .highlights {
    gap: 10px;
  }

  body.is-mobile .font-credit {
    display: block;
    pointer-events: auto;
    margin: 8px 4px 0;
    padding-bottom: 4px;
    font-size: 0.68rem;
  }

  body.is-mobile.mobile-tab-highlights .font-credit {
    margin-top: 12px;
  }

  html.is-mobile-view .sidebar-page-foot .font-credit {
    margin-top: 0;
  }

  .legend-panel {
    margin-top: 0;
    width: 100%;
    padding: 14px 16px;
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
  }

  body.is-mobile.mobile-tab-calendar .legend-panel .panel-head h3 {
    font-size: 0.92rem;
  }

  body.is-mobile.mobile-tab-calendar .legend {
    gap: 8px;
  }

  body.is-mobile.mobile-tab-calendar .legend-item {
    font-size: 0.8rem;
    padding: 6px 12px 6px 8px;
  }

  /* ── 모바일 일정 목록: 데스크톱 day-cell + slot-chip 재사용 ── */
  .mobile-agenda {
    overflow: visible;
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 2px 0 6px;
  }

  .mobile-agenda-day.day-cell {
    cursor: pointer;
    min-height: auto;
    height: auto;
    padding: 8px 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .mobile-agenda-day.day-cell.empty {
    opacity: 0.78;
    min-height: 52px;
  }

  .mobile-agenda-day.day-cell.today {
    border-width: 1px;
  }

  .magenda-day.today {
    z-index: 1;
  }

  /* 좌측 날짜 레일 */
  .mobile-agenda-head {
    margin: -2px -4px 0;
    padding: 2px 4px 0;
  }

  .mobile-agenda-day .day-num {
    font-size: 0.95rem;
    min-width: 30px;
    height: 28px;
  }

  .mobile-agenda-day .day-bangon-time {
    font-size: 0.62rem;
    max-width: 54%;
    padding: 4px 8px;
    border-radius: 999px;
  }

  /* display-timeline 고정 높이 — 비율 확장 모드 */
  html.cal-layout-proportional.is-mobile-view .mobile-agenda .slot-list,
  body.is-mobile.cal-layout-proportional .mobile-agenda .slot-list {
    flex: 0 0 var(--day-slots-height, 148px) !important;
    height: var(--day-slots-height, 148px) !important;
    min-height: var(--day-slots-height, 148px) !important;
    max-height: var(--day-slots-height, 148px) !important;
    overflow: hidden !important;
    overscroll-behavior: auto !important;
    gap: 4px;
    margin-top: 4px;
    padding: 0;
  }

  /* 1시간 1칸 — 일정 길이만큼 세로 확장 */
  html.cal-layout-hourly.is-mobile-view .mobile-agenda .slot-list,
  body.is-mobile.cal-layout-hourly .mobile-agenda .slot-list {
    flex: none !important;
    height: auto !important;
    min-height: var(--day-slots-height, 148px);
    max-height: none !important;
    overflow: visible !important;
    overscroll-behavior: auto !important;
    gap: 4px;
    margin-top: 4px;
    padding: 0;
  }

  html.is-mobile-view .mobile-agenda .slot-chip,
  body.is-mobile .mobile-agenda .slot-chip {
    grid-template-columns: auto 1fr !important;
    align-items: stretch !important;
    flex: 0 0 auto;
    min-height: 16px;
    border-radius: 8px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
    position: relative;
  }

  /* display-timeline 1fr 단일열이 우선되면 시간 칸이 본문을 밀어냄 → 명시적 2열 */
  html.display-timeline.is-mobile-view .mobile-agenda .slot-chip.slot-chip--has-start,
  html.display-timeline.is-mobile-view .mobile-agenda .slot-chip.slot-chip--all-day,
  html.display-timeline body.is-mobile .mobile-agenda .slot-chip.slot-chip--has-start,
  html.display-timeline body.is-mobile .mobile-agenda .slot-chip.slot-chip--all-day,
  body.is-mobile.display-timeline .mobile-agenda .slot-chip.slot-chip--has-start,
  body.is-mobile.display-timeline .mobile-agenda .slot-chip.slot-chip--all-day {
    grid-template-columns: minmax(0, auto) minmax(0, 1fr) !important;
  }

  /* display-timeline 데스크톱 규칙(배지 absolute·1열 그리드)이 모바일에 섞이지 않게 */
  html.is-mobile-view .mobile-agenda .slot-chip--has-start > .slot-duration,
  html.is-mobile-view .mobile-agenda .slot-chip--all-day > .slot-duration,
  body.is-mobile .mobile-agenda .slot-chip--has-start > .slot-duration,
  body.is-mobile .mobile-agenda .slot-chip--all-day > .slot-duration {
    position: static;
    left: auto;
    top: auto;
    bottom: auto;
    z-index: auto;
    grid-column: 1;
    align-self: stretch;
    width: auto;
    max-width: 34px;
    height: auto;
    min-height: 100%;
  }

  html.is-mobile-view .mobile-agenda .slot-chip--has-start .slot-chip-body,
  html.is-mobile-view .mobile-agenda .slot-chip--all-day .slot-chip-body,
  html.is-mobile-view .mobile-agenda .slot-chip--has-members .slot-chip-body,
  body.is-mobile .mobile-agenda .slot-chip--has-start .slot-chip-body,
  body.is-mobile .mobile-agenda .slot-chip--all-day .slot-chip-body,
  body.is-mobile .mobile-agenda .slot-chip--has-members .slot-chip-body {
    display: flex !important;
    flex-direction: column !important;
    grid-template-rows: unset !important;
    grid-column: 2 !important;
    width: auto !important;
    min-width: 0;
    text-align: left;
    align-items: flex-start !important;
    justify-content: center;
    padding: 6px 10px !important;
    gap: 3px;
  }

  html.is-mobile-view .mobile-agenda .slot-chip:not(.slot-chip--has-start):not(.slot-chip--all-day) .slot-chip-body,
  body.is-mobile .mobile-agenda .slot-chip:not(.slot-chip--has-start):not(.slot-chip--all-day) .slot-chip-body {
    grid-column: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: left;
    align-items: flex-start !important;
    justify-content: center;
    padding: 6px 10px !important;
  }

  html.is-mobile-view .mobile-agenda .slot-chip--has-members .slot-text,
  body.is-mobile .mobile-agenda .slot-chip--has-members .slot-text {
    align-self: stretch;
    min-height: 0;
    text-align: left;
    width: 100%;
  }

  html.is-mobile-view .mobile-agenda .slot-chip--has-members .slot-members,
  body.is-mobile .mobile-agenda .slot-chip--has-members .slot-members {
    align-self: flex-start;
    justify-content: flex-start;
    width: 100%;
  }

  html.cal-layout-hourly.is-mobile-view .mobile-agenda .slot-chip,
  body.is-mobile.cal-layout-hourly .mobile-agenda .slot-chip {
    height: auto;
  }

  html.slot-chip-style-inline.is-mobile-view .mobile-agenda .slot-chip,
  html.slot-chip-style-inline body.is-mobile .mobile-agenda .slot-chip,
  body.is-mobile.slot-chip-style-inline .mobile-agenda .slot-chip {
    grid-template-columns: 1fr !important;
  }

  html.slot-chip-style-inline.is-mobile-view .mobile-agenda .slot-chip--inline-timed:not(.slot-chip--inline-compact) > .slot-time-text,
  html.slot-chip-style-inline body.is-mobile .mobile-agenda .slot-chip--inline-timed:not(.slot-chip--inline-compact) > .slot-time-text,
  body.is-mobile.slot-chip-style-inline .mobile-agenda .slot-chip--inline-timed:not(.slot-chip--inline-compact) > .slot-time-text {
    top: 6px;
    left: 8px;
    font-size: 0.66rem;
  }

  html.slot-chip-style-inline.is-mobile-view .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact,
  html.slot-chip-style-inline body.is-mobile .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact,
  body.is-mobile.slot-chip-style-inline .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact {
    grid-template-columns: auto 1fr !important;
  }

  html.slot-chip-style-inline.is-mobile-view .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact .slot-chip-body,
  html.slot-chip-style-inline body.is-mobile .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact .slot-chip-body,
  body.is-mobile.slot-chip-style-inline .mobile-agenda .slot-chip--inline-timed.slot-chip--inline-compact .slot-chip-body {
    grid-column: 2 !important;
    padding: 5px 10px !important;
    align-items: flex-start !important;
  }

  html.is-mobile-view .mobile-agenda .slot-text,
  body.is-mobile .mobile-agenda .slot-text {
    text-align: left !important;
    font-family: var(--font-schedule);
    font-size: 0.92rem;
    line-height: 1.35;
    width: 100%;
    padding-top: 0 !important;
    transform: none !important;
  }

  html.is-mobile-view .mobile-agenda .slot-members,
  body.is-mobile .mobile-agenda .slot-members {
    font-size: 0.68rem;
    margin-top: 3px;
    padding: 0;
    border-radius: 0;
    background: none;
    border: none;
    width: 100%;
    max-width: 100%;
    align-self: flex-start;
  }

  html.is-mobile-view .mobile-agenda .slot-chip--has-members .slot-members-label,
  body.is-mobile .mobile-agenda .slot-chip--has-members .slot-members-label {
    display: none;
  }

  html.display-timeline.is-mobile-view .mobile-agenda .slot-duration,
  html.display-timeline body.is-mobile .mobile-agenda .slot-duration,
  body.is-mobile.display-timeline .mobile-agenda .slot-duration,
  html.is-mobile-view .mobile-agenda .slot-duration,
  body.is-mobile .mobile-agenda .slot-duration {
    min-width: 26px;
    max-width: 34px;
    padding: 0 3px;
    font-size: 0.62rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.03em;
    line-height: 1.15;
    background-image: none;
  }

  /* ============================================================
     모바일 전용 아젠다 디자인 (magenda-*) — 데스크톱과 완전 분리
     ============================================================ */
  .mobile-agenda {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 2px 0 14px;
    overflow: visible;
  }

  .magenda-day {
    display: grid;
    grid-template-columns: 50px minmax(0, 1fr);
    gap: 12px;
    align-items: center;
    padding: 12px 12px 13px 10px;
    background: var(--surface);
    border: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    border-radius: 16px;
    box-shadow: 0 2px 8px rgba(26, 34, 51, 0.05);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
  }

  .magenda-day.is-empty {
    opacity: 0.62;
    padding-top: 10px;
    padding-bottom: 10px;
  }

  /* 좌측 날짜 레일 */
  .magenda-rail {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self: center;
    gap: 1px;
    text-align: center;
  }

  .magenda-dow,
  .magenda-date {
    display: block;
    width: 100%;
    text-align: center;
  }

  .magenda-dow {
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--muted);
    letter-spacing: 0.03em;
  }

  .magenda-day.sun .magenda-dow {
    color: #e2557b;
  }

  .magenda-day.sat .magenda-dow {
    color: #4d7cc7;
  }

  .magenda-date {
    font-size: 1.5rem;
    font-weight: 800;
    line-height: 1.04;
    color: var(--text);
    font-variant-numeric: tabular-nums;
  }

  .magenda-day.today .magenda-date {
    color: var(--highlight-deep, var(--highlight));
    font-weight: 900;
  }

  .magenda-holiday {
    display: inline-block;
    margin-top: 2px;
    font-size: 0.62rem;
    font-weight: 800;
    line-height: 1.15;
    color: var(--sun, #e2557b);
    letter-spacing: -0.02em;
  }

  .magenda-holiday-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: 4px;
    border-radius: 50%;
    vertical-align: middle;
    background: var(--sun, #e2557b);
    box-shadow: 0 0 0 1px color-mix(in srgb, var(--sun, #e2557b) 25%, transparent);
  }

  /* 우측 본문 */
  .magenda-body {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding-top: 1px;
  }

  .magenda-bangon {
    align-self: flex-start;
    font-size: 0.64rem;
    font-weight: 800;
    color: var(--accent, #4a6cf7);
    background: color-mix(in srgb, var(--accent, #4a6cf7) 11%, transparent);
    padding: 3px 9px;
    border-radius: 999px;
    letter-spacing: -0.01em;
    white-space: nowrap;
  }

  .magenda-bangon--preset {
    font-size: 0.68rem;
    padding: 3px 10px;
    letter-spacing: 0;
  }

  .magenda-events {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  /* 2부 분할 섹션 */
  .magenda-part {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  .magenda-part + .magenda-part {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dashed color-mix(in srgb, var(--accent, #4a6cf7) 28%, #d5dde8);
  }

  .magenda-day--multipart .magenda-part:first-child {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
  }

  .magenda-part-head {
    display: flex;
    align-items: center;
    gap: 7px;
  }

  .magenda-part-label {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #fff;
    background: var(--accent, #4a6cf7);
    padding: 2px 9px;
    border-radius: 999px;
  }

  .magenda-part-head .magenda-bangon {
    align-self: auto;
  }

  .magenda-part-head--solo {
    margin-bottom: 0;
  }

  .magenda-event {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 9px;
    padding: 8px 11px 8px 12px;
    border-radius: 11px;
    background: var(--ev-tint, rgba(120, 140, 180, 0.1));
    border: 1px solid var(--ev-border, color-mix(in srgb, var(--ev-color, #8a96b5) 22%, transparent));
    box-shadow: 0 1px 2px rgba(26, 34, 51, 0.04);
  }

  html.chip-color-default .magenda-event,
  html.chip-color-tinted .magenda-event {
    border-left: 3px solid var(--ev-color, #8a96b5);
  }

  html.chip-color-original .magenda-event {
    border-color: var(--ev-border, color-mix(in srgb, var(--ev-color, #333) 24%, transparent));
  }

  .magenda-event-time {
    flex: none;
    align-self: center;
    min-width: 42px;
    font-size: 0.72rem;
    font-weight: 800;
    color: var(--ev-color, #556);
    letter-spacing: -0.03em;
    line-height: 1.2;
    white-space: nowrap;
    text-align: center;
  }

  .magenda-event.is-allday .magenda-event-time {
    font-size: 0.68rem;
    opacity: 0.95;
  }

  .magenda-event-time--none {
    min-width: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .magenda-event-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--ev-color, #8a96b5);
  }

  .magenda-event-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }

  .magenda-event-title {
    font-size: 0.92rem;
    font-weight: 600;
    line-height: 1.34;
    color: var(--text);
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  .magenda-event-members {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--muted);
    line-height: 1.28;
    word-break: keep-all;
    overflow-wrap: normal;
  }

  html.chip-color-default .magenda-event-title,
  html.chip-color-tinted .magenda-event-title,
  html.chip-color-original .magenda-event-title {
    color: var(--ev-color, var(--text));
  }

  html.chip-color-default .magenda-event-members,
  html.chip-color-tinted .magenda-event-members,
  html.chip-color-original .magenda-event-members {
    color: color-mix(in srgb, var(--ev-color, var(--muted)) 72%, var(--muted));
  }

  html.chip-color-default .magenda-event-time,
  html.chip-color-tinted .magenda-event-time,
  html.chip-color-original .magenda-event-time {
    color: color-mix(in srgb, var(--ev-color, #556) 88%, #000);
  }

  .magenda-event-side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    gap: 5px;
    flex: none;
    max-width: 38%;
  }

  .magenda-event-link {
    --item-accent: var(--ev-tint, #fff);
    --item-text: var(--ev-color, #556);
    max-width: 100%;
    padding: 6px 11px 6px 9px;
    font-size: 0.68rem;
    border-radius: 8px;
  }

  .magenda-event-link .slot-link-icon {
    width: 12px;
    height: 12px;
  }

  .magenda-event-side .magenda-event-tag {
    align-self: flex-end;
  }

  .slot-edit-link-fields {
    grid-template-columns: 1fr;
  }

  .magenda-event-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
  }

  .magenda-event-meta .slot-members,
  .magenda-event-meta .magenda-event-members {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.28;
    word-break: keep-all;
    overflow-wrap: anywhere;
  }

  html.chip-color-default .magenda-event-meta .slot-members,
  html.chip-color-tinted .magenda-event-meta .slot-members,
  html.chip-color-original .magenda-event-meta .slot-members,
  html.chip-color-default .magenda-event-members,
  html.chip-color-tinted .magenda-event-members,
  html.chip-color-original .magenda-event-members {
    color: color-mix(in srgb, var(--ev-color, var(--muted)) 72%, var(--muted));
  }

  .magenda-event-meta .slot-broadcast,
  .magenda-event-meta .magenda-event-broadcast {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.28;
    text-decoration: none;
    word-break: keep-all;
    overflow-wrap: anywhere;
    opacity: 0.95;
  }

  html.chip-color-default .magenda-event-meta .slot-broadcast,
  html.chip-color-tinted .magenda-event-meta .slot-broadcast,
  html.chip-color-original .magenda-event-meta .slot-broadcast,
  html.chip-color-default .magenda-event-meta .magenda-event-broadcast,
  html.chip-color-tinted .magenda-event-meta .magenda-event-broadcast,
  html.chip-color-original .magenda-event-meta .magenda-event-broadcast {
    color: color-mix(in srgb, var(--ev-color, var(--muted)) 72%, var(--muted));
  }

  .magenda-event-meta .slot-broadcast:hover,
  .magenda-event-meta .slot-broadcast:focus-visible,
  .magenda-event-meta .magenda-event-broadcast:hover,
  .magenda-event-meta .magenda-event-broadcast:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 2px;
  }

  .magenda-event-meta .slot-broadcast-mark {
    width: 12px;
    height: 12px;
    opacity: 0.82;
  }

  .magenda-event-meta .slot-members-mark {
    width: 12px;
    height: 12px;
    opacity: 0.82;
  }

  .magenda-event-live {
    align-self: flex-start;
    margin-top: 1px;
    font-size: 0.54rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    color: #fff;
    background: #e0395e;
    padding: 1px 6px;
    border-radius: 5px;
  }

  .magenda-event-tag {
    flex: none;
    align-self: center;
    font-size: 0.58rem;
    font-weight: 800;
    color: var(--ev-color, #556);
    background: color-mix(in srgb, var(--ev-tint, #fff) 55%, #fff);
    border: 1px solid var(--ev-border, color-mix(in srgb, var(--ev-color, #889) 20%, transparent));
    padding: 3px 8px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.01em;
  }

  html.chip-color-original .magenda-event-tag {
    background: color-mix(in srgb, var(--ev-tint, #fff) 68%, #fff);
  }

  .magenda-empty-note {
    font-size: 0.82rem;
    color: var(--muted);
    font-weight: 600;
    padding: 5px 2px;
  }

  @media (max-width: 380px) {
    .magenda-day {
      grid-template-columns: 44px minmax(0, 1fr);
      gap: 9px;
    }
    .magenda-date {
      font-size: 1.34rem;
    }
    .magenda-event {
      gap: 7px;
      padding-left: 10px;
    }
    .magenda-event-tag {
      display: none;
    }
  }

  @media (hover: none) {
    .magenda-day:active {
      transform: scale(0.992);
      opacity: 0.96;
    }

    .highlight-item:hover .hl-card {
      transform: none;
    }

    .highlight-item--today:hover .hl-card {
      transform: none;
    }
  }

  /* ── 하단 탭 바 ── */
  .mobile-tab-bar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex;
    align-items: stretch;
    gap: 4px;
    padding:
      4px max(10px, env(safe-area-inset-left))
      calc(4px + env(safe-area-inset-bottom, 0px))
      max(10px, env(safe-area-inset-right));
    background: rgba(255, 255, 255, 0.94);
    border-top: 1px solid var(--border);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -8px 28px rgba(26, 39, 63, 0.1);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
  }

  .mobile-tab-bar.hidden {
    display: none;
  }

  body.modal-open .mobile-tab-bar {
    display: none;
  }

  .mobile-tab {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    min-height: calc(var(--mobile-tab-bar-h) - 8px);
    padding: 4px 8px;
    border: none;
    background: transparent;
    color: var(--muted);
    font-family: inherit;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    border-radius: 10px;
    transition: color 0.15s ease, background 0.15s ease;
  }

  .mobile-tab-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 22px;
    font-size: 1.05rem;
    line-height: 1;
    opacity: 0.72;
    transition: opacity 0.15s ease, transform 0.15s ease;
  }

  .mobile-tab-label {
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.02em;
  }

  .mobile-tab.active {
    color: var(--highlight);
    background: color-mix(in srgb, var(--highlight-soft) 52%, transparent);
  }

  .mobile-tab.active .mobile-tab-icon {
    opacity: 1;
  }

  .mobile-tab-icon--svg svg {
    width: 20px;
    height: 20px;
    display: block;
  }

  .mobile-tab--subscribe:active {
    color: var(--highlight);
    background: color-mix(in srgb, var(--highlight-soft) 40%, transparent);
  }

  /* ── 모달 · 바텀시트 ── */
  .ics-dialog {
    width: min(600px, calc(100vw - 20px));
  }

  .ics-dialog form {
    max-height: min(90dvh, 760px);
  }

  .app-dialog-actions {
    padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  }

  .day-modal:not(.hidden),
  .slot-edit-modal:not(.hidden) {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 0;
    width: 100%;
    max-width: 100vw;
    overflow: hidden;
    touch-action: manipulation;
  }

  .day-modal-card,
  .slot-edit-card {
    width: 100%;
    max-width: 100%;
    max-height: min(92dvh, 720px);
    border-radius: 20px 20px 0 0;
    margin: 0;
    box-shadow: 0 -12px 40px rgba(26, 39, 63, 0.18);
    box-sizing: border-box;
  }

  .day-modal-card::before {
    content: "";
    display: block;
    flex-shrink: 0;
    width: 36px;
    height: 4px;
    margin: 8px auto 0;
    border-radius: 999px;
    background: color-mix(in srgb, var(--muted) 38%, transparent);
  }

  /* 보기 모드: 하단 버튼이 없어 시트가 화면 끝에 잘린 것처럼 보임 */
  .day-modal:has(.day-modal-actions.hidden) .day-modal-card {
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .day-modal-header {
    padding: 12px 18px 14px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
  }

  .day-modal-body {
    padding: 14px 16px 20px;
  }

  .day-modal:has(.day-modal-actions.hidden) .day-modal-body {
    padding-bottom: 28px;
  }

  .day-modal-schedule {
    padding-bottom: 2px;
  }

  .day-modal-bangon-wrap {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid color-mix(in srgb, var(--border) 55%, transparent);
  }

  /* ── 자세히 보기: 모바일 카드 (데스크톱 slot-chip / hl-card 톤) ── */
  .day-detail-list {
    gap: 12px;
  }

  .day-detail-item {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    min-height: 0 !important;
    height: auto !important;
    border-radius: 12px;
    overflow: hidden;
  }

  .day-detail-item > .day-detail-body {
    height: auto !important;
    min-height: 0 !important;
  }

  .day-detail-duration {
    flex: 0 0 44px;
    width: 44px;
    min-width: 44px;
    align-self: stretch;
    border-right: 1px solid color-mix(in srgb, var(--item-text, #333) 14%, transparent);
    background-color: color-mix(in srgb, #fff 58%, var(--item-accent, #fff));
    background-image: none;
  }

  .day-detail-duration.slot-duration--start,
  .day-detail-duration--all-day-label {
    min-width: 44px;
    font-size: 0.78rem;
    line-height: 1.2;
    white-space: normal;
    text-align: center;
    padding: 6px 4px;
    background-image: none;
  }

  .day-detail-body {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    width: auto !important;
    height: auto !important;
    display: flex;
    flex-direction: column;
    overflow: visible;
  }

  .day-detail-main {
    position: relative !important;
    inset: auto !important;
    flex: 0 0 auto !important;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 6px;
    padding: 12px 14px 10px !important;
    padding-top: 12px !important;
    padding-bottom: 10px !important;
    transform: none !important;
    overflow: visible;
    pointer-events: auto;
    min-height: 0;
  }

  .day-detail-item--has-members .day-detail-main {
    padding: 12px 14px 8px !important;
    transform: none !important;
  }

  .day-detail-text {
    margin: 0;
    width: 100%;
    font-family: var(--font-schedule);
    font-size: 1.02rem !important;
    font-weight: var(--font-schedule-weight, 500);
    line-height: 1.42 !important;
    text-align: left;
    white-space: pre-line;
    word-break: keep-all;
    overflow-wrap: break-word;
    overflow: visible;
  }

  .day-detail-members {
    margin: 0;
    width: 100%;
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.35;
    color: color-mix(in srgb, var(--item-text, #333) 78%, #000);
    min-width: 0;
  }

  .day-detail-members .slot-members-label {
    display: none;
  }

  .day-detail-members .slot-members-text {
    white-space: normal;
    overflow: visible;
    text-overflow: unset;
  }

  .day-detail-foot {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    flex: 0 0 auto;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 10px 12px 12px;
    border-top: 1px solid color-mix(in srgb, var(--item-text, #333) 12%, transparent);
    background: color-mix(in srgb, #fff 38%, var(--item-accent, #fff));
    pointer-events: auto;
  }

  .day-detail-foot-aside {
    display: contents;
  }

  .day-detail-foot-aside .day-detail-link {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    max-width: none;
    justify-content: center;
    text-align: center;
    min-height: 0;
    padding: 4px 10px 4px 8px;
    border-radius: 999px;
    font-size: 0.72rem;
    box-sizing: border-box;
    order: 1;
  }

  .day-detail-foot-aside .day-detail-link .slot-link-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
  }

  .day-detail-foot-aside .day-detail-actions {
    flex: 1 1 100%;
    width: 100%;
    order: 2;
  }

  .day-detail-meta {
    flex: 0 0 auto;
    flex-wrap: wrap;
    gap: 8px;
  }

  .day-detail-tag {
    font-size: 0.72rem;
    padding: 4px 10px;
    border-radius: 999px;
    background: color-mix(in srgb, var(--item-text, #333) 10%, var(--item-accent, #fff));
    border: 1px solid color-mix(in srgb, var(--item-text, #333) 16%, transparent);
  }

  .day-detail-tag::before {
    display: none;
  }

  .day-detail-actions {
    margin-left: 0;
    width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 6px;
  }

  .day-detail-btn {
    min-height: 36px;
    padding: 8px 12px;
    font-size: 0.78rem;
    border-radius: 10px;
  }

  .day-all-day-card {
    padding: 14px 16px;
    gap: 10px;
  }

  .day-all-day-card-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }

  .day-all-day-text {
    font-family: var(--font-schedule);
    font-size: 1.05rem;
    font-weight: var(--font-schedule-weight, 500);
    line-height: 1.4;
  }

  .day-detail-members--all-day {
    font-size: 0.82rem;
  }

  .bangon-picker {
    padding: 9px 10px;
    gap: 7px;
  }

  .bangon-quick-actions {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .bangon-quick-btn {
    min-height: 42px;
    font-size: 0.76rem;
  }

  .day-modal-actions {
    flex-direction: column;
    padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    border-top: 1px solid color-mix(in srgb, var(--border) 65%, transparent);
    background: var(--surface-2);
  }

  .day-modal-actions .btn {
    width: 100%;
    min-height: 46px;
  }

  .slot-edit-card:has(.slot-edit-body) {
    padding: 0;
  }

  .slot-edit-header {
    padding: 16px 18px 12px;
  }

  .slot-edit-body {
    padding: 12px 18px 4px;
  }

  .slot-edit-row--2 {
    grid-template-columns: 1fr;
  }

  .slot-edit-link-fields {
    grid-template-columns: 1fr;
  }

  .slot-edit-control,
  .slot-edit-card input:not([type="radio"]),
  .slot-edit-card select,
  .slot-edit-card textarea {
    font-size: 16px;
  }

  #slot-edit-start-wrap .slot-edit-time-split {
    gap: 8px;
  }

  .slot-edit-card:has(.slot-edit-body) .slot-edit-actions {
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 18px calc(18px + env(safe-area-inset-bottom, 0px));
  }

  .slot-edit-actions {
    flex-wrap: wrap;
    gap: 8px;
  }

  .slot-edit-actions .btn {
    min-height: 46px;
    flex: 1 1 calc(50% - 4px);
  }

  .slot-edit-actions #slot-edit-save {
    flex-basis: 100%;
  }

  .ctx-menu {
    min-width: 188px;
    border-radius: 14px;
    box-shadow: 0 12px 36px rgba(26, 39, 63, 0.16);
  }

  .ctx-menu button {
    min-height: 44px;
    padding: 10px 14px;
    font-size: 0.88rem;
  }

  html.display-timeline .page {
    padding-bottom: calc(var(--mobile-tab-bar-h) + env(safe-area-inset-bottom, 0px) + 12px);
  }
}

@media (max-width: 400px) {
  .header--sidebar .header-month .month-title {
    font-size: 1.28rem;
  }

  html.is-mobile-view .mobile-agenda .slot-text,
  body.is-mobile .mobile-agenda .slot-text {
    font-size: 0.86rem;
  }
}