/* ==========================================================================
   리뉴얼 레이어 — styles.css 위에 덮어쓴다. 색은 전부 아래 테마 토큰을 거쳐서
   라이트/다크 양쪽에서 같이 바뀐다(밝은 색을 고정으로 박아두면 다크 모드에서 안 보인다).
   ========================================================================== */

/* 제목 글꼴이 준비될 때까지(최대 1.5초) 입장 연출 대상을 감춰 두었다가 한 번에 시작한다. */
/* 카페24 써라운드에서 "빈스 캘린더" 글자만 남긴 파일(2KB)을 사이트에 직접 두고 먼저 받아온다 — 다른 글꼴이
   도착하기 전에 기본 글꼴로 제목이 보이는 순간을 막는다. (SIL OFL 1.1, 라이선스 전문: assets/fonts/LICENSE-Cafe24Ssurround.txt) */
@font-face { font-family: "Cafe24 Ssurround"; font-weight: 400; src: url("/static/assets/fonts/cafe24-ssurround-title.woff2") format("woff2"); font-display: block; }

/* 제목 글꼴이 준비될 때까지(최대 1.5초) 입장 연출 대상을 감춰 두었다가 한 번에 시작한다. */
body.is-font-wait .home-content, body.is-font-wait .home-footer, body.is-font-wait .side-nav, body.is-font-wait .top-actions, body.is-font-wait .brand-block { opacity: 0; }

body[data-theme="light"] {
  --rn-ink: #231636;
  --rn-muted: #6a5f7d;
  --rn-line: #e1d8f2;
  --rn-surface: #ffffff;
  --rn-surface-2: #f6f2fc;
  --rn-chip: #efe8fa;
  --rn-input: #ffffff;
  --rn-shadow: 0 10px 30px rgba(80, 40, 140, 0.1);
  --rn-nav-bg: rgba(250, 247, 255, 0.9);
  --rn-nav-line: rgba(139, 92, 246, 0.35);
  --rn-nav-ink: #4b3a6a;
  --rn-nav-active-bg: #6d28d9;
  --rn-nav-active-ink: #ffffff;
  --rn-brand: #2b1a4a;
  --rn-page: #f3effa;
  --rn-tab-bg: rgba(252, 250, 255, 0.96);
  --rn-accent-ink: #6d28d9;
  --rn-accent-soft: #e6dcfb;
}

body[data-theme="dark"] {
  --rn-ink: #f4f0fa;
  --rn-muted: #b3a8c4;
  --rn-line: #372a4a;
  --rn-surface: #1c1130;
  --rn-surface-2: #150d24;
  --rn-chip: #2a1d40;
  --rn-input: #120a1e;
  --rn-shadow: 0 12px 34px rgba(0, 0, 0, 0.4);
  --rn-nav-bg: rgba(18, 12, 26, 0.8);
  --rn-nav-line: rgba(255, 255, 255, 0.14);
  --rn-nav-ink: #d6cbe8;
  --rn-nav-active-bg: #a78bfa;
  --rn-nav-active-ink: #1a0f2e;
  --rn-brand: #f4f0fa;
  --rn-page: #0a0710;
  --rn-tab-bg: rgba(14, 9, 22, 0.97);
  --rn-accent-ink: #c4b5fd;
  --rn-accent-soft: rgba(167, 139, 250, 0.18);
}

html { scroll-behavior: smooth; }
.main-with-nav { margin-left: 0; }
.page-glow { display: none; }

/* ---------- 상단 바 / 탭 메뉴 ---------- */
.topbar { top: 0; min-height: 70px; padding: 10px clamp(18px, 3vw, 48px); align-items: center; pointer-events: none; z-index: 50; }
.topbar > * { pointer-events: auto; }
.brand-block { display: inline-flex; align-items: center; border: 0; background: none; padding: 4px 0; font-family: "Cafe24 Ssurround", "Noto Sans KR", sans-serif; font-weight: 400; font-size: 1.1rem; letter-spacing: -.02em; color: var(--rn-brand); white-space: nowrap; cursor: pointer; transition: opacity 240ms ease; }
/* 홈에서는 가운데 큰 제목과 겹치므로 왼쪽 위 로고를 감춘다. */
body[data-page="home"] .brand-block { opacity: 0; visibility: hidden; pointer-events: none; }
.top-actions { margin-left: auto; }

.side-nav,
body[data-theme="dark"] .side-nav {
  top: 16px; left: 50%; bottom: auto; transform: translateX(-50%); width: auto; padding: 3px; flex-direction: row; gap: 2px;
  border-radius: 999px; background: var(--rn-nav-bg); border: 1px solid var(--rn-nav-line);
  box-shadow: 0 8px 24px rgba(10, 4, 20, 0.2); backdrop-filter: blur(26px) saturate(1.4); -webkit-backdrop-filter: blur(26px) saturate(1.4); z-index: 49;
}
.side-nav-item { display: flex; flex-direction: row; align-items: center; justify-content: center; width: auto; min-width: 64px; padding: 9px 14px; border-radius: 999px; color: var(--rn-nav-ink); font-size: .8rem; transition: background 200ms ease, color 200ms ease; }
.side-nav-item:hover { color: var(--rn-ink); background: color-mix(in srgb, var(--rn-nav-ink) 10%, transparent); }
.side-nav-item svg, .side-nav-item::before { display: none; }
.side-nav-item span { display: inline; }
.side-nav-item.is-active, .side-nav-item.is-active:hover { color: var(--rn-nav-active-ink); background: var(--rn-nav-active-bg); }

/* 홈은 사진 위에 떠 있으므로 테마별로 따로 맞춘다. */
body[data-page="home"][data-theme="dark"] .side-nav { background: rgba(18, 12, 28, 0.66); border-color: rgba(255, 255, 255, 0.24); }
body[data-page="home"][data-theme="dark"] .side-nav-item { color: #e9e2f5; }
body[data-page="home"][data-theme="dark"] .side-nav-item.is-active { color: #1a0f2e; background: #efe8fb; }
body[data-page="home"][data-theme="light"] .side-nav { background: rgba(252, 250, 255, 0.82); border-color: rgba(255, 255, 255, 0.9); }

/* ---------- 홈 ---------- */
.renewal-home {
  position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-height: 100svh;
  margin-left: 0; width: 100%;
  padding: 92px clamp(22px, 5vw, 80px) 24px; overflow: hidden; isolation: isolate; color: var(--home-ink);
}
body[data-theme="dark"] .renewal-home { --home-ink: #ffffff; --home-muted: #cfc4e2; --home-card-line: rgba(255, 255, 255, 0.22); background: #0a0710; }
body[data-theme="light"] .renewal-home { --home-ink: #231636; --home-muted: #5a4d70; --home-card-line: rgba(255, 255, 255, 0.95); background: #e9e1f7; }
.renewal-home .hero-aura { display: none; }
.renewal-home::after { content: ""; display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
body[data-theme="dark"] .renewal-home::after { background: linear-gradient(100deg, rgba(10, 5, 20, 0.9) 0%, rgba(14, 7, 28, 0.62) 42%, rgba(14, 7, 28, 0.12) 100%); }
body[data-theme="light"] .renewal-home::after { background: linear-gradient(100deg, rgba(243, 238, 252, 0.94) 0%, rgba(240, 232, 252, 0.7) 42%, rgba(236, 226, 252, 0.08) 100%); }
body[data-theme="light"] .renewal-home .hero-scrim { display: none; }
body[data-theme="light"] .renewal-home .hero-image { filter: none; }
.renewal-home .home-content, .renewal-home .home-footer { position: relative; z-index: 2; }

.home-content {
  width: min(1240px, 100%); flex: 1; margin: auto; padding: clamp(24px, 6vh, 80px) 0 40px;
  display: flex; align-items: center;
}
.home-copy { min-width: 0; width: min(520px, 100%); text-align: left; }
.renewal-home .home-title { margin: 0 0 30px; font-family: "Cafe24 Ssurround", "Noto Sans KR", sans-serif; font-weight: 400; font-synthesis: none; font-size: clamp(2.8rem, 6.2vw, 5.6rem); line-height: 1.1; letter-spacing: -.02em; color: var(--home-ink); text-shadow: none; }
.home-title .home-title-line { display: block; overflow: hidden; padding: .04em .02em .1em; white-space: nowrap; }
.home-title .home-char { display: inline-block; will-change: transform; }

.home-agenda {
  display: grid; gap: 16px; width: min(520px, 100%); padding: 20px 0 0;
  border-top: 1px solid color-mix(in srgb, var(--home-ink) 42%, transparent);
}
.home-agenda-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.home-agenda-label { color: var(--home-ink); font-size: .82rem; font-weight: 800; letter-spacing: -.01em; }
.home-agenda-live-mark { color: #d6344b; font-size: .82rem; font-weight: 800; white-space: nowrap; }
.home-agenda-live-dot { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: currentColor; vertical-align: .08em; }
body[data-theme="dark"] .home-agenda-live-mark { color: #ff8e9e; }
.home-agenda-date { color: var(--home-muted); font-size: .82rem; font-weight: 600; }
.home-agenda-note { margin: -8px 0 0; overflow: hidden; font-size: .82rem; color: var(--home-muted); }
.home-agenda-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; }
.home-agenda-item { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; padding: 11px 0 11px 14px; border-left: 3px solid var(--dot); }
body[data-theme="light"] .home-agenda-item { border-left-color: color-mix(in srgb, var(--dot) 60%, #4c2a8a); }
.home-agenda-item + .home-agenda-item { border-top: 1px solid color-mix(in srgb, var(--home-ink) 20%, transparent); }
.home-agenda-text { min-width: 0; display: grid; gap: 2px; }
.home-agenda-text strong { font-size: clamp(1.08rem, 1.8vw, 1.35rem); line-height: 1.4; word-break: keep-all; }
.home-agenda-text small { font-size: .78rem; color: var(--home-muted); }
.home-agenda-cat { color: var(--home-muted); font-size: .72rem; font-weight: 600; white-space: nowrap; }
.home-agenda-empty { padding: 4px 0 6px; font-size: 1.08rem; font-weight: 700; }
.home-agenda-loading { animation: home-loading-fade 1.1s ease-in-out infinite alternate; }
.home-agenda-foot { min-height: 30px; padding-top: 10px; border-top: 1px solid color-mix(in srgb, var(--home-ink) 20%, transparent); }
.home-agenda-time { color: var(--home-ink); font-size: .85rem; font-weight: 700; }

.home-footer { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 20px; width: min(1240px, 100%); margin: 0 auto; padding: 14px 0 0; border-top: 1px solid var(--home-card-line); font-size: .78rem; text-shadow: none; color: var(--home-ink); }
body[data-theme="dark"] .home-footer { border-top-color: rgba(255, 255, 255, 0.18); }
.home-footer .footer-link-button { display: inline; color: var(--home-ink); font-size: .78rem; text-shadow: none; font-weight: 500; text-decoration: none; opacity: .85; }
.home-footer .footer-link-button:hover { text-decoration: underline; opacity: 1; }
.home-footer .site-footer-copy { color: var(--home-muted); }

/* 첫 입장 연출 — 배경이 천천히 내려앉고, 제목 글자가 마스크 안에서 하나씩
   올라오고, 액자가 아래서부터 내려앉는다(1회만). */
body.is-intro .renewal-home .hero-image { animation: home-scene-in 2.6s cubic-bezier(.2, .7, .1, 1) both; }
body.is-intro .renewal-home::after { animation: home-fade-in 1.4s ease both; }
body.is-intro .home-char { animation: home-char-in 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(.35s + var(--i) * .065s); }
body.is-intro .home-agenda { animation: home-rise-in 1s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .95s; }
body.is-intro .home-agenda-item { animation: home-rise-in .8s cubic-bezier(.16, 1, .3, 1) both; }
body.is-intro .home-agenda-item:nth-child(1) { animation-delay: 1.15s; }
body.is-intro .home-agenda-item:nth-child(2) { animation-delay: 1.23s; }
body.is-intro .home-agenda-item:nth-child(3) { animation-delay: 1.31s; }
body.is-intro .home-agenda-item:nth-child(n+4) { animation-delay: 1.39s; }
body.is-intro .side-nav { animation: home-drop-in .9s cubic-bezier(.16, 1, .3, 1) both; animation-delay: .2s; }
body.is-intro .top-actions { animation: home-fade-in .9s ease both; animation-delay: .3s; }
body.is-intro .home-footer { animation: home-fade-in .9s ease both; animation-delay: 1.4s; }

@keyframes home-scene-in { from { transform: scale(1.14); opacity: .35; } to { transform: scale(1); opacity: 1; } }
@keyframes home-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes home-char-in { from { transform: translateY(110%) rotate(8deg); opacity: 0; filter: blur(8px); } to { transform: none; opacity: 1; filter: none; } }
@keyframes home-rise-in { from { transform: translateY(26px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes home-frame-in {
  from { transform: translateY(36px) rotate(-5deg) scale(.95); opacity: 0; }
  55% { opacity: 1; }
  75% { transform: translateY(-4px) rotate(.8deg) scale(1.005); }
  to { transform: none; opacity: 1; }
}
@keyframes home-drop-in { from { opacity: 0; transform: translateX(-50%) translateY(-14px); } to { opacity: 1; transform: translateX(-50%); } }
@keyframes home-loading-fade { to { opacity: .45; } }

@media (prefers-reduced-motion: reduce) {
  body.is-intro .renewal-home .hero-image, body.is-intro .renewal-home::after, body.is-intro .home-char, body.is-intro .home-agenda,
  body.is-intro .home-agenda-item,
  body.is-intro .side-nav, body.is-intro .top-actions, body.is-intro .home-footer { animation: none; }
  .home-agenda-loading { animation: none; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 860px) {
}

@media (max-width: 1050px) {
  .brand-block { font-size: .95rem; }
  .side-nav-item { min-width: 53px; padding: 9px 9px; }
}

/* ---------- 모바일 앱 구성 ----------
   위에는 스크롤하면 같이 올라가는 얇은 상단 바, 아래에는 아이콘+이름이 있는 탭 바(숨지 않음),
   그 사이 화면은 여백 없이 꽉 채운다. */
@media (max-width: 760px) {
  /* 짧은 탭에서도 배경이 모바일 화면 끝까지 이어지게 한다(주소창이 접히면 화면이 길어진다). */
  body { min-height: 100vh; min-height: 100lvh; }
  .topbar { position: absolute; top: 0; left: 0; right: 0; height: calc(52px + env(safe-area-inset-top, 0px)); min-height: 0; padding: env(safe-area-inset-top, 0px) 12px 0; align-items: center; }
  body:not([data-page="home"]) .topbar { background: transparent; border: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .brand-block { font-size: 1rem; }
  .top-actions { position: relative; flex-wrap: nowrap; }
  .top-actions .auth-chip { position: absolute; top: calc(100% + 6px); right: 0; width: max-content; max-width: calc(100vw - 24px); white-space: normal; border-color: var(--rn-line); background: var(--rn-surface); color: var(--rn-ink); box-shadow: 0 6px 18px rgba(0, 0, 0, .28); }

  /* 하단 탭 바 */
  .side-nav, body[data-theme="dark"] .side-nav, body[data-page="home"][data-theme] .side-nav {
    top: auto; left: 0; right: 0; bottom: 0; width: 100%; transform: none; justify-content: space-around; gap: 0;
    padding: 0 0 env(safe-area-inset-bottom, 0px); border: 0; border-top: 1px solid var(--rn-line); border-radius: 0;
    background: var(--rn-tab-bg); box-shadow: none; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  }
  .side-nav.is-nav-hidden { transform: none; }
  body.is-intro .side-nav { animation: home-fade-in .9s ease both; animation-delay: .2s; }
  .side-nav .side-nav-item, body[data-page="home"][data-theme] .side-nav .side-nav-item {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    flex: 1 1 0; width: auto; min-width: 0; height: 58px; padding: 0; border-radius: 0; background: transparent; color: var(--rn-muted);
  }
  body[data-theme] .side-nav .side-nav-item.hidden, body[data-theme] .side-nav .side-nav-item[data-nav="game"] { display: none; }
  .side-nav .side-nav-item svg { display: block; width: 22px; height: 22px; padding: 3px 14px; box-sizing: content-box; border-radius: 999px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; transition: background 160ms ease; }
  .side-nav .side-nav-item span { font-size: .68rem; font-weight: 700; letter-spacing: -.01em; }
  .side-nav .side-nav-item.is-active, body[data-page="home"][data-theme] .side-nav .side-nav-item.is-active { color: var(--rn-accent-ink); background: transparent; }
  .side-nav .side-nav-item.is-active svg { background: var(--rn-accent-soft); }
  .main-with-nav { padding-bottom: 0; }

  .renewal-home { min-height: 100vh; min-height: 100lvh; padding: 76px 18px calc(74px + env(safe-area-inset-bottom, 0px)); }
  .renewal-home .hero-image { object-position: 62% center; }
  .home-content { padding: 18px 0 24px; }
  .home-copy { width: 100%; }
  .renewal-home .home-title { margin: 0 0 22px; font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .home-agenda { width: 100%; padding-top: 16px; }
  .home-agenda-item { padding: 10px 0 10px 12px; gap: 10px; }
  .home-footer { flex-wrap: wrap; gap: 9px 17px; padding-top: 12px; }

  /* 일정: 연·월을 한 줄로("‹ 2026년 10월 ›"), 연도 화살표는 감춘다(월 화살표가 해를 넘어감). */
  body .calendar-card { padding: 4px 2px 8px; background: transparent; border: 0; box-shadow: none; }
  body .calendar-head { display: flex; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
  body .calendar-nav-wrap { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 2px; flex: 1 0 auto; min-width: max-content; width: auto; }
  body .calendar-nav-wrap .calendar-nav { display: contents; }
  body #year-prev, body #year-next { display: none; }
  body #month-prev { order: 1; } body #year-title { order: 2; } body #month-title { order: 3; } body #month-next { order: 4; }
  body .calendar-nav-wrap h2 { flex: none; width: auto; min-width: 0; margin: 0; padding: 0 2px; font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--rn-ink); background: none; }
  body .calendar-nav-wrap .nav-title-full { display: inline; } body .calendar-nav-wrap .nav-title-compact { display: none; }
  body .calendar-nav-wrap .icon-button.icon-button-small { width: 32px; height: 32px; min-height: 32px; border: 0; background: transparent; color: var(--rn-ink); font-size: 1.2rem; box-shadow: none; }
  body .calendar-head-actions { flex: none; gap: 6px; }
  body .calendar-head .calendar-notice-link:not(.hidden) { order: 3; flex: 1 0 100%; max-width: none; margin: 0; padding: 2px 4px 0; justify-content: flex-start; font-size: .8rem; }
  body .calendar-head .calendar-notice-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  body .calendar-head-actions .mobile-view-toggle, body .calendar-head-actions .calendar-search-trigger { height: 32px; border: 1px solid var(--rn-line); background: var(--rn-surface); color: var(--rn-ink); box-shadow: none; }

  .mday { display: grid; gap: 14px; }
  .mday-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; padding: 6px 2px; border-radius: 16px; background: var(--rn-surface); border: 1px solid var(--rn-line); }
  .mday-date { display: grid; justify-items: center; gap: 3px; padding: 6px 0 5px; border: 0; border-radius: 12px; background: transparent; color: var(--rn-ink); cursor: pointer; }
  .mday-weekday { font-size: .66rem; font-weight: 700; color: var(--rn-muted); }
  .mday-date.is-sun .mday-weekday { color: #e0607a; } .mday-date.is-sat .mday-weekday { color: #7a9cf0; }
  .mday-number { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-size: .95rem; font-weight: 800; font-variant-numeric: tabular-nums; }
  .mday-date.is-today .mday-number { color: var(--rn-accent-ink); box-shadow: inset 0 0 0 1.5px currentColor; }
  .mday-date.is-active .mday-number { background: #6d28d9; color: #fff; box-shadow: none; }
  body[data-theme="dark"] .mday-date.is-active .mday-number { background: #a78bfa; color: #1a0f2e; }
  .mday-date.is-outside .mday-number, .mday-date.is-off .mday-number { opacity: .45; }
  .mday-date.is-active .mday-number { opacity: 1; }
  .mday-dot { width: 5px; height: 5px; border-radius: 50%; background: transparent; }
  .mday-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; padding: 0 4px; }
  .mday-title h3 { margin: 0; font-size: 1.15rem; font-weight: 800; letter-spacing: -.03em; color: var(--rn-ink); }
  .mday-today { margin-left: 4px; padding: 2px 7px; border-radius: 999px; background: var(--rn-accent-soft); color: var(--rn-accent-ink); font-size: .68rem; vertical-align: middle; }
  .mday-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 5px 0 0; font-size: .78rem; color: var(--rn-muted); }
  .mday-chip { padding: 2px 8px; border-radius: 999px; background: var(--rn-accent-soft); color: var(--rn-accent-ink); font-size: .7rem; font-weight: 800; }
  .mday-chip.is-off { background: var(--rn-chip); color: var(--rn-muted); }
  .mday-meta .mobile-day-edit-button { margin-left: auto; height: 26px; padding: 0 10px; border: 1px solid var(--rn-line); border-radius: 999px; background: var(--rn-surface); color: var(--rn-ink); font-size: .72rem; font-weight: 700; }
  .mday-arrows { display: flex; gap: 4px; }
  .mday-arrows .mobile-day-arrow { width: 34px; height: 34px; border: 1px solid var(--rn-line); border-radius: 50%; background: var(--rn-surface); color: var(--rn-ink); font-size: 1.1rem; box-shadow: none; }
  .mday .mobile-entry-list { gap: 8px; }
  .mday .mobile-entry-card { padding: 12px 14px 12px 16px; border: 1px solid var(--rn-line); border-left: 4px solid var(--mobile-entry-color, var(--rn-line)); border-radius: 12px; background: var(--rn-surface); box-shadow: none; }
  .mday .mobile-entry-category { min-height: 0; padding: 0; background: none; color: var(--rn-muted); font-size: .7rem; font-weight: 700; }
  .mday .mobile-entry-body { margin-top: 3px; }
  .mday .mobile-entry-title { color: var(--rn-ink); font-size: .98rem; }
  .mday .mobile-day-empty { padding: 18px 14px; border: 1px dashed var(--rn-line); border-radius: 12px; background: transparent; color: var(--rn-muted); font-size: .86rem; }
  .mday .mobile-day-note-card, .mday .mobile-day-image-card { border: 1px solid var(--rn-line); border-radius: 12px; background: var(--rn-surface); box-shadow: none; }
}

/* 페이지 끝을 넘어 당겼을 때 보이는 바탕(기본 흰색)을 하단 메뉴 색과 맞춘다. */
html:has(body[data-theme="light"]) { background-color: #f7f4fc; }
html:has(body[data-theme="dark"]) { background-color: #0a0710; }