[data-app-design-v2] .appV2EventTheme-halloween { --app-v2-event-bg: radial-gradient(120% 80% at 50% 30%,#3b2340 0%,#22152a 55%,#120b16 100%); --app-v2-event-chip: #e8742a; --app-v2-event-chip-ink: #1b1b1b; --app-v2-event-action: #e8742a; --app-v2-event-action-ink: #1b1b1b; }
[data-app-design-v2] .appV2EventTheme-pepero { --app-v2-event-bg: linear-gradient(180deg,#f3dcc0 0%,#f9ecdc 55%,#f6f1ec 90%); --app-v2-event-chip: #6b3e26; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-suneung { --app-v2-event-bg: linear-gradient(180deg,#d9e5f6 0%,#ecf2fa 55%,#f6f1ec 90%); --app-v2-event-chip: #2f5aa8; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-xmas { --app-v2-event-bg: radial-gradient(120% 80% at 50% 30%,#2f5a44 0%,#1d3a2c 55%,#11241b 100%); --app-v2-event-chip: #f2c94c; --app-v2-event-chip-ink: #1b1b1b; --app-v2-event-action: #9e2a2b; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-newyear { --app-v2-event-bg: radial-gradient(120% 80% at 50% 30%,#2a3668 0%,#18204a 55%,#0b1030 100%); --app-v2-event-chip: #f2c94c; --app-v2-event-chip-ink: #1b1b1b; --app-v2-event-action: #f2a03a; --app-v2-event-action-ink: #1b1b1b; }
[data-app-design-v2] .appV2EventTheme-seol { --app-v2-event-bg: linear-gradient(180deg,#f9dcd3 0%,#fcece6 55%,#f6f1ec 90%); --app-v2-event-chip: #c8443a; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-valentine { --app-v2-event-bg: radial-gradient(120% 80% at 50% 30%,#5a1f2e 0%,#3a1320 55%,#200a12 100%); --app-v2-event-chip: #f6a5b8; --app-v2-event-chip-ink: #1b1b1b; --app-v2-event-action: #b8325a; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-grad { --app-v2-event-bg: linear-gradient(180deg,#e3dcf4 0%,#efebf9 55%,#f6f1ec 90%); --app-v2-event-chip: #5b3fa0; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-white { --app-v2-event-bg: linear-gradient(180deg,#d8ebf5 0%,#ecf5fa 55%,#f6f1ec 90%); --app-v2-event-chip: #266b8b; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-children { --app-v2-event-bg: linear-gradient(180deg,#fdefbd 0%,#fbf5de 55%,#f6f1ec 90%); --app-v2-event-chip: #23804a; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-parents { --app-v2-event-bg: linear-gradient(180deg,#fad8df 0%,#fcecef 55%,#f6f1ec 90%); --app-v2-event-chip: #c42b45; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-teacher { --app-v2-event-bg: linear-gradient(180deg,#dbeedf 0%,#edf6ee 55%,#f6f1ec 90%); --app-v2-event-chip: #2f7d4a; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-couple { --app-v2-event-bg: linear-gradient(180deg,#f3d9e3 0%,#f9ecf1 55%,#f6f1ec 90%); --app-v2-event-chip: #8a3f58; --app-v2-event-chip-ink: #fff; --app-v2-event-action: #4e2c3c; --app-v2-event-action-ink: #fff; }
[data-app-design-v2] .appV2EventTheme-chuseok { --app-v2-event-bg: radial-gradient(120% 80% at 50% 30%,#263a5c 0%,#172640 55%,#0c1424 100%); --app-v2-event-chip: #f2c94c; --app-v2-event-chip-ink: #1b1b1b; --app-v2-event-action: #f2a03a; --app-v2-event-action-ink: #1b1b1b; }
[data-app-design-v2] .appV2EventDialog { box-sizing: border-box; width: calc(100% - 16px); max-width: 480px; max-height: calc(100dvh - 16px); margin: auto; padding: 0; border: 1px solid var(--app-v2-rule); border-radius: 28px; overflow: auto; overscroll-behavior: contain; background: var(--app-v2-event-bg); color: var(--app-v2-ink); font: 400 1rem/1.5 var(--app-v2-font); }
[data-app-design-v2] .appV2EventDialog::backdrop { background: rgba(18, 11, 22, .8); }
[data-app-design-v2] .appV2EventDark { color: #f6f1ec; border-color: #6f6166; }
[data-app-design-v2] .appV2EventTop { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: max(12px, env(safe-area-inset-top)) 20px 0; }
[data-app-design-v2] .appV2EventBrand { font-weight: 700; overflow-wrap: anywhere; }
[data-app-design-v2] .appV2EventSkip { flex-shrink: 0; min-width: 44px; min-height: 44px; padding: 10px 14px; border: 1px solid currentColor; border-radius: 24px; background: transparent; color: inherit; font: inherit; cursor: pointer; }
[data-app-design-v2] .appV2EventStage { position: relative; display: grid; place-items: center; width: 100%; aspect-ratio: 390 / 440; max-height: 440px; }
[data-app-design-v2] .appV2EventScene { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
[data-app-design-v2] .appV2EventMascot { position: relative; width: 46%; padding: 8%; box-sizing: content-box; background: radial-gradient(closest-side, rgba(255, 240, 224, .75), rgba(255, 240, 224, 0)); }
[data-app-design-v2] .appV2EventMascot .appV2Mascot { display: block; width: 100%; height: auto; transform: rotate(-4deg); }
[data-app-design-v2] .appV2EventPanel { position: relative; margin: 0 8px 8px; padding: 22px 16px max(22px, env(safe-area-inset-bottom)); border-radius: 28px; background: #fffdfb; color: #231a1e; border: 1px solid #e6ddd6; overflow-wrap: anywhere; }
[data-app-design-v2] .appV2EventDark .appV2EventPanel { background: #2a1820; color: #f6f1ec; border-color: #6f6166; }
[data-app-design-v2] .appV2EventChip { display: inline-block; padding: 6px 12px; border-radius: 20px; font-size: .875rem; font-weight: 700; background: var(--app-v2-event-chip); color: var(--app-v2-event-chip-ink); }
[data-app-design-v2] .appV2EventTitle { margin: 12px 0 8px; font: 700 clamp(1.625rem, 8vw, 2.5rem)/1.4 var(--app-v2-font-display); letter-spacing: -.035em; }
[data-app-design-v2] .appV2EventDescription { margin: 0 0 20px; font-size: 1rem; }
[data-app-design-v2] .appV2EventActions { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.5fr); gap: 8px; }
[data-app-design-v2] .appV2EventOther, [data-app-design-v2] .appV2EventCreate, [data-app-design-v2] .appV2EventBannerAction { display: flex; align-items: center; justify-content: center; min-height: 44px; min-width: 0; box-sizing: border-box; padding: 12px; border-radius: 28px; font: 700 1rem/1.5 var(--app-v2-font); text-align: center; text-decoration: none; }
[data-app-design-v2] .appV2EventOther { border: 1px solid currentColor; background: transparent; color: inherit; }
[data-app-design-v2] .appV2EventCreate, [data-app-design-v2] .appV2EventBannerAction { background: var(--app-v2-event-action); color: var(--app-v2-event-action-ink); }
[data-app-design-v2] .appV2EventSkip:focus-visible, [data-app-design-v2] .appV2EventOther:focus-visible, [data-app-design-v2] .appV2EventCreate:focus-visible, [data-app-design-v2] .appV2EventBannerAction:focus-visible { outline: var(--app-v2-focus); outline-offset: 3px; }
/* Only the initial non-keyboard focus; keydown/blur removes this marker. */
[data-app-design-v2] .appV2EventSkip[data-entry-auto-focus="true"]:focus { outline: none; }
/* Near-opaque surfaces remain readable when backdrop-filter is unsupported. */
[data-app-design-v2] .appV2EventPanel { background: rgba(255, 253, 251, .94); backdrop-filter: blur(22px); }
[data-app-design-v2] .appV2EventDark .appV2EventPanel { background: rgba(42, 24, 32, .94); }
@media (max-width: 360px) {
  [data-app-design-v2] .appV2EventTop { padding-inline: 16px; }
}
@media (max-width: 340px) {
  [data-app-design-v2] .appV2EventActions { grid-template-columns: minmax(0, 1fr); }
}
@media (min-width: 430px) {
  [data-app-design-v2] .appV2EventTop { padding-inline: 24px; }
}
@media (orientation: landscape) and (max-height: 500px) {
  [data-app-design-v2] .appV2EventLayout { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); align-items: center; }
  [data-app-design-v2] .appV2EventTitle { font-size: 1.625rem; }
  [data-app-design-v2] .appV2EventActions { grid-template-columns: minmax(0, 1fr); }
}
/* No animation or timer: reduced-motion uses this same stationary composition. */

/* PF1: one manual entry card, using the selected event's existing theme. */
[data-app-design-v2] .appV2EventBanner { margin: 0 var(--app-v2-edge) 24px; padding: 20px; border: 1px solid var(--app-v2-rule); border-radius: 28px; background: var(--app-v2-event-bg); color: var(--app-v2-ink); }
[data-app-design-v2] .appV2EventBanner.appV2EventDark { color: var(--app-v2-on-night); }
[data-app-design-v2] .appV2EventBannerTitle { margin: 12px 0 16px; font: 700 1.25rem/1.5 var(--app-v2-font-display); }
[data-app-design-v2] .appV2EventBanner .appV2EventBannerAction { width: 100%; border: 0; cursor: pointer; }

/* Low viewports (e.g. unfolded landscape): the stage gives up height before the
   actions leave the first screen. Reserve = top bar + panel down to the actions + 8px
   (measured at the 480px dialog); the title term follows the title's own clamp. */
[data-app-design-v2] .appV2EventDialog { --app-v2-event-stage-max: calc(100dvh - 354px - max(12px, env(safe-area-inset-top, 0px)) + 2.8 * (2.5rem - clamp(1.625rem, 8vw, 2.5rem))); }
[data-app-design-v2] .appV2EventStage { max-height: min(440px, max(180px, var(--app-v2-event-stage-max))); }
[data-app-design-v2] .appV2EventMascot { width: min(46%, calc((min(440px, max(180px, var(--app-v2-event-stage-max))) - 16%) * 1.06)); }
@media (orientation: landscape) and (max-height: 500px) {
  [data-app-design-v2] .appV2EventDialog { --app-v2-event-stage-max: 440px; }
}