/* src/styles/invitation/base/shell.css */
/*
 * Base chrome shared by every invitation. Colours and fonts arrive as --yt-*
 * custom properties from the theme, so one set of section styles dresses
 * twelve different ways.
 *
 * The shell is a size container. Sections size themselves with @container, not
 * @media, because the editor renders this same CSS inside a 390px iframe where
 * the viewport is the browser window and every viewport query would be wrong.
 */
.yt-invitation {
  min-height: 100dvh;
  container: yt-page / inline-size;
  background: var(--yt-bg);
  color: var(--yt-ink);
  font-family: var(--yt-font-body);
  overflow-x: hidden;
  /* Korean wraps on syllable boundaries, never mid-word. */
  word-break: keep-all;
  overflow-wrap: anywhere;
  -webkit-font-smoothing: antialiased;
}

/* Centred reading column. The design language is a phone-width invitation that
   stays comfortable up to about 480px. */
.yt-container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-eyebrow {
  color: var(--yt-accent);
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
}

.yt-section-title {
  margin-top: 12px;
  color: var(--yt-ink);
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}

/* src/styles/invitation/sections/accounts.css */
/*
 * yt/accounts — 마음 전하실 곳
 *
 * No legacy @media queries existed; no @container queries are needed.
 * Accordion open/close state is managed by Island.tsx (client component);
 * the chevron rotation is driven by the --open modifier class.
 */

.yt-accounts {
  padding: 60px 0;
  text-align: center;

  & .yt-accounts__container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-inline: 28px;
  }

  & .yt-accounts__eyebrow {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    color: var(--yt-accent);
  }

  & .yt-accounts__title {
    margin-top: 12px;
    font-family: var(--yt-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
  }

  & .yt-accounts__groups {
    max-width: 360px;
    margin: 28px auto 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  & .yt-accounts__group {
    border: 1px solid var(--yt-hairline);
    border-radius: 10px;
    overflow: hidden;
    background: var(--yt-surface);
  }

  & .yt-accounts__panel-toggle {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 18px;
    font: inherit;
    font-family: var(--yt-font-display);
    font-size: 15px;
    color: var(--yt-ink);
    background: transparent;
    border: 0;
    cursor: pointer;
  }

  & .yt-accounts__panel-label {
    letter-spacing: 0.02em;
  }

  & .yt-accounts__chevron {
    font-size: 16px;
    line-height: 1;
    color: var(--yt-accent);
    transition: transform 0.18s ease;

    &.yt-accounts__chevron--open {
      transform: rotate(180deg);
    }
  }

  & .yt-accounts__rows {
    list-style: none;
    margin: 0;
    padding: 0 18px 6px;
    display: flex;
    flex-direction: column;
  }

  & .yt-accounts__row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 0;
    text-align: left;
    border-top: 1px solid var(--yt-hairline);
  }

  & .yt-accounts__info {
    min-width: 0;
  }

  & .yt-accounts__name {
    font-size: 14px;
    color: var(--yt-ink);
  }

  & .yt-accounts__bank {
    margin-top: 4px;
    font-size: 13px;
    line-height: 1.5;
    color: var(--yt-muted);
  }

  & .yt-accounts__actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 6px;
  }

  & .yt-accounts__copy {
    padding: 7px 14px;
    font: inherit;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    color: var(--yt-accent);
    background: var(--yt-accent-soft);
    border: 1px solid var(--yt-hairline);
    border-radius: 999px;
    cursor: pointer;
  }

  & .yt-accounts__kakao {
    padding: 7px 14px;
    font-size: 12px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    color: var(--yt-muted);
    border: 1px solid var(--yt-hairline);
    border-radius: 999px;
  }
}

/* src/styles/invitation/sections/calendar.css */
.yt-calendar {
  padding: 56px 0;
  text-align: center;

  & .yt-calendar__container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-inline: 28px;
  }

  & .yt-calendar__eyebrow {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    color: var(--yt-accent);
  }

  & .yt-calendar__widget {
    max-width: 320px;
    margin: 28px auto 0;
  }

  & .yt-calendar__week-header {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    padding-bottom: 12px;
    /* Separates the header row from the day grid. */
    border-bottom: 1px solid var(--yt-hairline);
  }

  & .yt-calendar__weekday {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.04em;
    color: var(--yt-muted);

    &.yt-calendar__weekday--sun {
      color: var(--yt-accent);
    }

    /* Explicit so a future theme can override sat colour independently of muted. */
    &.yt-calendar__weekday--sat {
      color: var(--yt-muted);
    }
  }

  & .yt-calendar__grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 6px 0;
    margin-top: 14px;
  }

  & .yt-calendar__day {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    justify-self: center;
    width: 34px;
    height: 34px;
    font-size: 14px;
    line-height: 1;
    color: var(--yt-ink);

    &.yt-calendar__day--sun {
      color: var(--yt-accent);
    }

    &.yt-calendar__day--sat {
      color: var(--yt-muted);
    }

    &.yt-calendar__day--wedding {
      border-radius: 50%;
      background: var(--yt-accent);
      /* The accent circle must override any sun/sat colour on the day. */
      color: var(--yt-on-accent);
      font-weight: 600;
    }
  }

  & .yt-calendar__time {
    margin-top: 24px;
    font-size: 14px;
    letter-spacing: 0.02em;
    color: var(--yt-muted);
  }
}

/* src/styles/invitation/sections/closing.css */
/*
 * Closing section — full-bleed photo stack with white message overlay.
 * All color values are intentionally hardcoded: this section is always dark,
 * regardless of the active theme palette.
 *
 * The overlay's positioning differs between photo mode and panel mode:
 * over photos it must span the full stacked height (position:absolute),
 * while in panel mode the flex container centers it naturally.
 *
 * `min-height:60vh` on the panel variant is viewport-relative on purpose —
 * the panel must look substantial on any screen, including inside the editor.
 */

.yt-closing {
  position: relative;
  width: 100%;
  display: flex;
  flex-direction: column;

  &.yt-closing--panel {
    min-height: 60vh;
    align-items: center;
    justify-content: center;
    background: #16161a;
  }

  /* Span the full stacked photo height so the message floats over all frames. */
  &:not(.yt-closing--panel) .yt-closing__overlay {
    position: absolute;
    inset: 0;
  }
}

.yt-closing__frame {
  position: relative;
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: #16161a;
}

.yt-closing__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkening wash to keep white text legible over any photo. */
.yt-closing__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.18) 0%,
    rgba(0, 0, 0, 0.42) 55%,
    rgba(0, 0, 0, 0.62) 100%
  );
}

.yt-closing__overlay {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 28px;
  z-index: 1;
}

.yt-closing__message {
  max-width: 320px;
  margin: 0;
  font-family: var(--yt-font-display);
  font-size: 19px;
  font-weight: 500;
  line-height: 2;
  letter-spacing: 0.01em;
  text-align: center;
  /* The couple's line breaks are the layout. */
  white-space: pre-line;
  /* Hardcoded white — legibility requirement over any theme or photo. */
  color: #ffffff;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.45);
}

/* src/styles/invitation/sections/countdown.css */
/*
 * yt/countdown — D-day ticker.
 *
 * The eyebrow and container use the shared .yt-eyebrow and .yt-container
 * classes from shell.css; only the block-specific elements are defined here.
 *
 * No legacy media queries existed in Countdown.module.scss. One defensive
 * container query collapses the four-column badge grid at very narrow widths
 * (below roughly 280px) where each badge would be too cramped to read. This
 * has no legacy equivalent but prevents a layout break on old small handsets.
 */
.yt-countdown {
  padding: 56px 0;
  text-align: center;

  & .yt-countdown__badges {
    margin-top: 24px;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
  }

  & .yt-countdown__badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 6px;
    background: var(--yt-surface);
    border: 1px solid var(--yt-hairline);
    border-radius: 12px;
  }

  & .yt-countdown__value {
    font-family: var(--yt-font-display);
    font-size: 30px;
    font-weight: 500;
    line-height: 1;
    color: var(--yt-ink);
    font-variant-numeric: tabular-nums;
  }

  & .yt-countdown__label {
    font-family: var(--yt-font-body);
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--yt-muted);
  }
}

/* Collapse to two columns when the invitation column is very narrow. */
@container yt-page (max-width: 280px) {
  .yt-countdown .yt-countdown__badges {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* src/styles/invitation/sections/divider.css */
.yt-divider {
  display: flex;
  justify-content: center;
  padding-block: 32px;

  & .yt-divider__mark {
    display: block;
  }

  &[data-style="line"] .yt-divider__mark {
    width: 48px;
    height: 1px;
    background: var(--yt-accent);
  }

  &[data-style="dots"] .yt-divider__mark {
    width: 44px;
    height: 3px;
    /* Three dots, drawn rather than typed, so they inherit the accent. */
    background-image: radial-gradient(circle, var(--yt-accent) 1.5px, transparent 1.5px);
    background-size: 16px 3px;
    background-repeat: repeat-x;
  }

  &[data-style="diamond"] .yt-divider__mark {
    width: 7px;
    height: 7px;
    background: var(--yt-accent);
    rotate: 45deg;
  }
}

/* src/styles/invitation/sections/gallery.css */
/*
 * Gallery section — 3-column square grid or horizontal scroll-snap carousel.
 * Both layouts are CSS-only; no JS state needed.
 *
 * The grid and carousel sit outside the .yt-container so they can bleed to
 * the section edges, then supply their own padding-inline to match the column.
 */

.yt-gallery {
  padding-block: 56px;

  & .yt-gallery__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
    max-width: 480px;
    margin: 28px auto 0;
    padding-inline: 28px;
  }

  & .yt-gallery__carousel {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-inline: 28px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;

    & .yt-gallery__cell {
      flex: 0 0 72%;
      scroll-snap-align: center;
      /* 4:5 portrait cells in the carousel override the square default below. */
      aspect-ratio: 4 / 5;
    }
  }

  & .yt-gallery__cell {
    position: relative;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background: var(--yt-hairline);
  }

  & .yt-gallery__img {
    /* Fills the positioned parent without next/image's wrapper div. */
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

/* src/styles/invitation/sections/greeting.css */
.yt-greeting {
  padding-block: 64px;
  text-align: center;

  &[data-align="left"] {
    text-align: left;
  }

  & .yt-greeting__title {
    margin-top: 12px;
    color: var(--yt-ink);
    font-family: var(--yt-font-display);
    font-size: 22px;
    font-weight: 500;
  }

  & .yt-greeting__message {
    max-width: 320px;
    margin: 28px auto 0;
    color: var(--yt-muted);
    font-size: 15px;
    line-height: 2;
    /* The couple's line breaks are the layout. */
    white-space: pre-line;
  }

  &[data-align="left"] .yt-greeting__message {
    margin-inline: 0;
  }
}

/* src/styles/invitation/sections/guest-snap.css */
.yt-guest-snap {
  padding: 56px 0;
  text-align: center;
}

.yt-guest-snap__container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-guest-snap__eyebrow {
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
  color: var(--yt-accent);
}

.yt-guest-snap__title {
  margin-top: 12px;
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-ink);
}

.yt-guest-snap__prompt {
  max-width: 340px;
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--yt-muted);
  white-space: pre-line;
}

.yt-guest-snap__notice {
  margin: 24px auto 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--yt-muted);
}

.yt-guest-snap__uploader {
  max-width: 340px;
  margin: 24px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yt-guest-snap__input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--yt-ink);
  background: var(--yt-surface);
  border: 1px solid var(--yt-hairline);
  border-radius: 8px;

  &:focus {
    outline: 2px solid var(--yt-accent);
    outline-offset: -1px;
  }
}

/* Visually hidden; triggered by the label below instead. */
.yt-guest-snap__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.yt-guest-snap__upload-btn {
  display: block;
  padding: 14px 0;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--yt-on-accent);
  background: var(--yt-accent);
  border-radius: 8px;
  cursor: pointer;

  &[aria-disabled="true"] {
    opacity: 0.55;
    cursor: default;
  }
}

.yt-guest-snap__error {
  font-size: 13px;
  color: #b3261e;
}

/* Grid sits outside the padded container — no side padding, full bleed to the
   section edges, capped at 480px. Always 2 columns; no breakpoint in the
   legacy design and none needed. */
.yt-guest-snap__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 480px;
  margin: 28px auto 0;
  padding: 0 28px;
}

.yt-guest-snap__cell {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin: 0;
  background: var(--yt-hairline);
}

/* Replaces next/image fill prop — same visual result without Next.js. */
.yt-guest-snap__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-guest-snap__caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 14px 10px 6px;
  font-size: 11px;
  text-align: left;
  /* White text over a photo — explicit white is intentional, not a missing token. */
  color: white;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.45), transparent);
}

/* "Show more photos" under the grid. A busy reception fills hundreds of cells
   and the first paint should not carry all of them. */
.yt-guest-snap__more {
  margin-top: 16px;
  padding: 11px 26px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--yt-accent);
  background: transparent;
  border: 1px solid var(--yt-hairline);
  border-radius: 999px;
  cursor: pointer;

  &:disabled {
    opacity: 0.55;
    cursor: default;
  }
}

/* src/styles/invitation/sections/guestbook.css */
.yt-guestbook {
  padding: 60px 0;
  text-align: center;
}

.yt-guestbook__container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-guestbook__eyebrow {
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
  color: var(--yt-accent);
}

.yt-guestbook__title {
  margin-top: 12px;
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-ink);
}

.yt-guestbook__notice {
  margin-top: 28px;
  font-size: 14px;
  line-height: 1.9;
  color: var(--yt-muted);
}

.yt-guestbook__count {
  margin-top: 24px;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--yt-muted);
}

.yt-guestbook__list {
  margin: 16px auto 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;
}

.yt-guestbook__entry {
  position: relative;
  padding: 16px 18px;
  background: var(--yt-surface);
  border: 1px solid var(--yt-hairline);
  border-radius: 10px;
}

.yt-guestbook__entry-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}

.yt-guestbook__entry-name {
  font-family: var(--yt-font-display);
  font-size: 15px;
  color: var(--yt-ink);
}

.yt-guestbook__entry-date {
  flex-shrink: 0;
  font-size: 12px;
  color: var(--yt-muted);
}

.yt-guestbook__entry-message {
  margin-top: 10px;
  font-size: 14px;
  line-height: 1.8;
  white-space: pre-line;
  word-break: break-word;
  color: var(--yt-ink);
}

.yt-guestbook__delete {
  margin-top: 12px;
  padding: 0;
  font: inherit;
  font-size: 12px;
  color: var(--yt-muted);
  background: none;
  border: 0;
  text-decoration: underline;
  cursor: pointer;
}

/* Inline PIN entry that replaces window.prompt for the delete flow. */
.yt-guestbook__delete-inline {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yt-guestbook__delete-actions {
  display: flex;
  gap: 12px;
}

.yt-guestbook__input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--yt-ink);
  background: var(--yt-surface);
  border: 1px solid var(--yt-hairline);
  border-radius: 8px;

  &:focus {
    outline: 2px solid var(--yt-accent);
    outline-offset: -1px;
  }

  /* Compact PIN field inside the inline delete row. */
  &.yt-guestbook__input--pin {
    padding: 8px 12px;
    font-size: 13px;
  }
}

textarea.yt-guestbook__input {
  min-height: 96px;
  resize: vertical;
}

.yt-guestbook__ghost {
  margin-top: 16px;
  padding: 11px 26px;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  color: var(--yt-accent);
  background: transparent;
  border: 1px solid var(--yt-hairline);
  border-radius: 999px;
  cursor: pointer;

  &:disabled {
    opacity: 0.55;
    cursor: default;
  }
}

.yt-guestbook__form {
  max-width: 340px;
  margin: 40px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yt-guestbook__submit {
  margin-top: 6px;
  padding: 14px 0;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--yt-on-accent);
  background: var(--yt-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  &:disabled {
    opacity: 0.55;
    cursor: default;
  }
}

.yt-guestbook__error {
  font-size: 13px;
  color: #b3261e;
}

/* src/styles/invitation/sections/hero.css */
/*
 * Hero section — six visual treatments selected by `.yt-hero--{variant}`.
 *
 * The legacy Hero.module.scss had no @media queries, so no @container
 * conversions are required here. Everything is a phone-width column by design.
 *
 * Colors for the full-bleed variant are hardcoded #fff / rgba(255,255,255,…)
 * rather than theme tokens: text must stay legible over any couple's photo, and
 * the theme surface and ink colors are not guaranteed to provide sufficient
 * contrast against a dark photograph.
 */

.yt-hero {
  position: relative;
}

/* ── Shared text atoms ─────────────────────────────────────────────────────── */

.yt-hero__script {
  font-family: var(--yt-font-script);
  font-size: 28px;
  line-height: 1.2;
  color: var(--yt-accent);
}

.yt-hero__names {
  font-family: var(--yt-font-display);
  font-size: 34px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: 0.01em;
  color: var(--yt-ink);
}

/* Smaller when either name is missing — the fallback phrase is longer */
.yt-hero__names--fallback {
  font-size: 28px;
  line-height: 1.4;
}

.yt-hero__date-numeric {
  font-family: var(--yt-font-body);
  font-size: 14px;
  letter-spacing: 0.18em;
  color: var(--yt-muted);
}

.yt-hero__date-long {
  font-family: var(--yt-font-body);
  font-size: 15px;
  letter-spacing: 0.04em;
  color: var(--yt-muted);
}

.yt-hero__rule {
  display: block;
  width: 28px;
  height: 1px;
  margin: 4px auto;
  background: var(--yt-accent);
}

/* ── Shared positioned image ───────────────────────────────────────────────── */
/*
 * next/image with `fill` injects these styles automatically in the legacy app;
 * the renderer uses a plain <img>, so the rules are explicit here.
 */
.yt-hero__img {
  object-fit: cover;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ── Wax seal (letter variant) ─────────────────────────────────────────────── */
/*
 * A convex glossy wax body with a raised embossed rim and a pressed inner ring.
 * Rotated slightly so it reads as hand-pressed rather than machine-perfect.
 */
.yt-hero__wax-seal {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 76px;
  height: 76px;
  margin-top: 22px;
  border-radius: 50%;
  color: var(--yt-on-accent);
  font-family: var(--yt-font-display);
  font-size: 15px;
  letter-spacing: 0.03em;
  text-align: center;
  /* Convex wax body: bright glossy hotspot up-and-left, darkening to the rim */
  background: radial-gradient(
    120% 120% at 32% 28%,
    color-mix(in srgb, var(--yt-accent) 78%, white) 0%,
    var(--yt-accent) 38%,
    color-mix(in srgb, var(--yt-accent) 72%, black) 78%,
    color-mix(in srgb, var(--yt-accent) 55%, black) 100%
  );
  box-shadow:
    inset 0 4px 7px -2px color-mix(in srgb, var(--yt-accent) 35%, white),
    inset 0 -7px 9px -3px color-mix(in srgb, var(--yt-accent) 50%, black),
    1px 3px 6px color-mix(in srgb, var(--yt-accent) 45%, transparent),
    0 1px 1px color-mix(in srgb, black 22%, transparent);
  transform: rotate(-6deg);

  /* Raised embossed outer rim — lit at the top, shadowed at the bottom */
  &::before {
    content: "";
    position: absolute;
    inset: 3px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    box-shadow:
      inset 0 2px 2px color-mix(in srgb, var(--yt-accent) 30%, white),
      inset 0 -2px 3px color-mix(in srgb, var(--yt-accent) 55%, black),
      inset 0 0 0 1px color-mix(in srgb, var(--yt-accent) 60%, black);
  }

  /* Thin pressed inner ring — the crisp channel where the stamp bit into the wax */
  &::after {
    content: "";
    position: absolute;
    inset: 9px;
    border-radius: 50%;
    pointer-events: none;
    z-index: -1;
    border: 1px solid color-mix(in srgb, var(--yt-accent) 62%, black);
    box-shadow:
      inset 0 1px 1px color-mix(in srgb, var(--yt-accent) 45%, black),
      inset 0 -1px 1px color-mix(in srgb, var(--yt-accent) 25%, white);
  }
}

/* ── Inline quote (letter + wreath variants) ───────────────────────────────── */

.yt-hero__quote {
  margin: 0;
  max-width: 320px;

  & blockquote {
    margin: 0;
    font-family: var(--yt-font-body);
    font-size: 13px;
    font-style: italic;
    line-height: 1.9;
    color: var(--yt-muted);
  }

  & figcaption {
    margin-top: 8px;
    font-family: var(--yt-font-body);
    font-size: 11px;
    letter-spacing: 0.1em;
    color: var(--yt-accent);
  }
}

/* ── full-bleed ────────────────────────────────────────────────────────────── */

.yt-hero--full-bleed {
  width: 100%;
  height: 100dvh;
  overflow: hidden;
}

.yt-hero__ground {
  position: absolute;
  inset: 0;
  background: #1c1b1a;
}

.yt-hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 38%,
    rgba(0, 0, 0, 0.18) 62%,
    rgba(0, 0, 0, 0.66) 100%
  );
}

.yt-hero__caption {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 28px 64px;
  text-align: center;
}

/* Full-bleed text is always white — hardcoded, not themed */
.yt-hero--full-bleed .yt-hero__script {
  font-size: 30px;
  color: #fff;
}

.yt-hero--full-bleed .yt-hero__names {
  font-size: 40px;
  letter-spacing: 0.02em;
  color: #fff;
}

.yt-hero--full-bleed .yt-hero__names--fallback {
  font-size: 30px;
}

.yt-hero--full-bleed .yt-hero__date-numeric {
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.86);
}

/* ── polaroid ──────────────────────────────────────────────────────────────── */

.yt-hero--polaroid {
  padding: 56px 28px;
  display: flex;
  justify-content: center;
}

.yt-hero__polaroid-card {
  width: 100%;
  max-width: 360px;
  padding: 16px 16px 24px;
  background: var(--yt-surface);
  border-radius: 4px;
  box-shadow: 0 18px 40px -18px rgba(0, 0, 0, 0.35);
}

.yt-hero__polaroid-photo {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  background: var(--yt-hairline);
}

.yt-hero__polaroid-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  text-align: center;
}

/* ── letter ────────────────────────────────────────────────────────────────── */

.yt-hero--letter {
  padding: 88px 28px;
  display: flex;
  justify-content: center;
}

.yt-hero__letter-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
  max-width: 360px;
  text-align: center;
}

/* ── arch ──────────────────────────────────────────────────────────────────── */

.yt-hero--arch {
  padding: 56px 28px 64px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.yt-hero__arch-frame {
  position: relative;
  width: 100%;
  max-width: 360px;
  aspect-ratio: 3 / 4;
  border-radius: 180px 180px 0 0;
  overflow: hidden;
  background: var(--yt-hairline);
}

.yt-hero__arch-placeholder {
  position: absolute;
  inset: 0;
  background: var(--yt-accent-soft);
}

.yt-hero__arch-fade {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  height: 38%;
  /* Fade to the page background, so the arch photo dissolves into the section below */
  background: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, var(--yt-bg) 100%);
}

.yt-hero__arch-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  text-align: center;
}

/* ── wreath ────────────────────────────────────────────────────────────────── */

.yt-hero--wreath {
  padding: 80px 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}

.yt-hero__wreath-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 1 / 1;
  padding: 44px;
}

/* SVG tinted via currentColor so the theme accent colors the leaves */
.yt-hero__wreath-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--yt-accent);
  pointer-events: none;
}

.yt-hero__wreath-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
}

/* ── monogram ──────────────────────────────────────────────────────────────── */

.yt-hero--monogram {
  padding-bottom: 56px;
}

.yt-hero__monogram-photo {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--yt-hairline);
}

.yt-hero__monogram-placeholder {
  position: absolute;
  inset: 0;
  background: var(--yt-accent-soft);
}

/* Tints the photo with the accent color via multiply blend */
.yt-hero__monogram-wash {
  position: absolute;
  inset: 0;
  background: var(--yt-accent-soft);
  mix-blend-mode: multiply;
  opacity: 0.32;
}

.yt-hero__monogram-mark {
  position: absolute;
  inset-inline: 0;
  top: 32px;
  text-align: center;
  font-family: var(--yt-font-display);
  font-size: 20px;
  letter-spacing: 0.3em;
  color: var(--yt-on-accent);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.3);
}

.yt-hero__monogram-caption {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: 28px;
  padding: 0 28px;
  text-align: center;
}

/* src/styles/invitation/sections/image.css */
.yt-image {
  margin: 0;
  padding-block: 24px;

  & .yt-image__frame {
    position: relative;
    overflow: hidden;
    background: var(--yt-hairline);

    &.is-rounded {
      border-radius: 12px;
    }

    &[data-aspect="square"] {
      aspect-ratio: 1 / 1;
    }

    &[data-aspect="portrait"] {
      aspect-ratio: 4 / 5;
    }

    &[data-aspect="landscape"] {
      aspect-ratio: 3 / 2;
    }
  }

  & .yt-image__img {
    object-fit: cover;
  }

  & .yt-image__caption {
    margin-top: 10px;
    color: var(--yt-muted);
    font-size: 13px;
    line-height: 1.7;
    text-align: center;
  }
}

/* src/styles/invitation/sections/info-tabs.css */
.yt-info-tabs {
  padding: 60px 0;
  text-align: center;
}

/* The shared .yt-eyebrow and .yt-container classes from shell.css provide
   the eyebrow and column-width styles; only info-tabs-specific rules live here. */

.yt-info-tabs__title {
  margin-top: 12px;
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-ink);
  text-align: center;
}

.yt-info-tabs__tab-bar {
  display: flex;
  gap: 6px;
  justify-content: center;
  margin-top: 28px;
}

.yt-info-tabs__tab {
  flex: 1;
  max-width: 140px;
  padding: 11px 0;
  font: inherit;
  font-size: 13px;
  letter-spacing: 0.04em;
  border-radius: 999px;
  cursor: pointer;
  /* border shorthand is overridden per modifier, but the property must exist. */
  border: 1px solid;
  transition:
    color 0.18s,
    background 0.18s,
    border-color 0.18s;

  &.yt-info-tabs__tab--on {
    color: var(--yt-on-accent);
    background: var(--yt-accent);
    border-color: var(--yt-accent);
  }

  &.yt-info-tabs__tab--off {
    color: var(--yt-muted);
    background: transparent;
    border-color: var(--yt-hairline);
  }
}

.yt-info-tabs__panel {
  margin-top: 28px;
}

.yt-info-tabs__figure {
  position: relative;
  /* Portrait aspect ratio — fills the 480px column naturally at phone width. */
  aspect-ratio: 4 / 5;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  background: var(--yt-hairline);
}

/* Plain <img> in place of Next.js <Image fill> — same visual result without
   the Next.js Image optimisation pipeline. */
.yt-info-tabs__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-info-tabs__text {
  max-width: 340px;
  margin: 22px auto 0;
  font-size: 15px;
  line-height: 1.95;
  white-space: pre-line;
  color: var(--yt-muted);
}

/* Native sibling combinator — no Sass needed. */
.yt-info-tabs__figure + .yt-info-tabs__text {
  margin-top: 22px;
}

/* src/styles/invitation/sections/interview.css */
.yt-interview {
  padding: 64px 0;
}

/* The shared .yt-eyebrow and .yt-container classes from shell.css provide
   the eyebrow and column-width styles; only interview-specific rules live here. */

.yt-interview__title {
  margin-top: 12px;
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-ink);
  text-align: center;
}

.yt-interview__list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.yt-interview__item {
  border: 1px solid var(--yt-hairline);
  border-radius: 14px;
  background: var(--yt-surface);
  overflow: hidden;

  /* Native nesting with & prefix — relaxed nesting needs Safari 17.2; floor is 16.4. */
  &[open] {
    & .yt-interview__chevron {
      transform: rotate(225deg) translateY(-2px);
    }
  }
}

.yt-interview__summary {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 20px;
  cursor: pointer;
  list-style: none;
  user-select: none;

  &::-webkit-details-marker {
    display: none;
  }
}

.yt-interview__q {
  flex: none;
  font-family: var(--yt-font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--yt-accent);
}

.yt-interview__question {
  flex: 1 1 auto;
  font-size: 15px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--yt-ink);
}

.yt-interview__chevron {
  flex: none;
  width: 9px;
  height: 9px;
  margin-right: 2px;
  border-right: 1.5px solid var(--yt-muted);
  border-bottom: 1.5px solid var(--yt-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 0.2s ease;
}

.yt-interview__answers {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 18px 20px 22px;
  border-top: 1px solid var(--yt-hairline);
}

.yt-interview__answer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.yt-interview__who {
  align-self: flex-start;
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--yt-accent-soft);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--yt-accent);
}

.yt-interview__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.85;
  /* The couple's line breaks are the layout. */
  white-space: pre-line;
  color: var(--yt-muted);
}

/* src/styles/invitation/sections/map.css */
/*
 * yt/map — 오시는 길
 *
 * No legacy @media queries existed; no @container queries are needed.
 * The block relies on the .yt-container primitive in shell.css for the
 * centred reading column.
 */

.yt-map {
  padding: 56px 0;
  text-align: center;

  & .yt-map__container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-inline: 28px;
  }

  & .yt-map__eyebrow {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    color: var(--yt-accent);
  }

  & .yt-map__title {
    margin-top: 12px;
    font-family: var(--yt-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
  }

  & .yt-map__venue {
    margin-top: 28px;
  }

  & .yt-map__venue-name {
    font-family: var(--yt-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--yt-ink);
  }

  & .yt-map__venue-address {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--yt-muted);
  }

  & .yt-map__nav-apps {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
  }

  & .yt-map__nav-button {
    flex: 1 1 0;
    min-width: 92px;
    padding: 11px 14px;
    font-family: var(--yt-font-body);
    font-size: 13px;
    font-weight: 500;
    color: var(--yt-ink);
    text-decoration: none;
    background: var(--yt-surface);
    border: 1px solid var(--yt-hairline);
    border-radius: 999px;
    transition:
      background 0.15s ease,
      color 0.15s ease;

    &:hover {
      background: var(--yt-accent-soft);
      color: var(--yt-accent);
    }
  }

  & .yt-map__transit {
    margin-top: 36px;
    padding: 0;
    list-style: none;
    text-align: left;
    border-top: 1px solid var(--yt-hairline);
  }

  & .yt-map__transit-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 16px 4px;
    border-bottom: 1px solid var(--yt-hairline);
  }

  & .yt-map__transit-icon {
    flex: 0 0 auto;
    width: 22px;
    font-size: 16px;
    line-height: 1.6;
    text-align: center;
  }

  & .yt-map__transit-body {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
  }

  & .yt-map__transit-label {
    font-family: var(--yt-font-body);
    font-size: 13px;
    font-weight: 600;
    color: var(--yt-accent);
  }

  & .yt-map__transit-text {
    font-size: 14px;
    line-height: 1.7;
    color: var(--yt-muted);
    /* The couple's line breaks are the layout. */
    white-space: pre-line;
  }
}

/* The optional KakaoMap. A fixed height because the SDK measures its container
   on creation and an auto-height div is zero pixels tall at that moment. */
.yt-map__embed {
  width: 100%;
  height: 220px;
  margin-top: 20px;
  overflow: hidden;
  border: 1px solid var(--yt-hairline);
  border-radius: 10px;
  background: var(--yt-surface);
}

/* src/styles/invitation/sections/parents.css */
.yt-parents {
  padding: 56px 0;
  text-align: center;

  & .yt-parents__container {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding-inline: 28px;
  }

  & .yt-parents__parents {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }

  & .yt-parents__lineage {
    font-size: 15px;
    line-height: 1.7;
    color: var(--yt-ink);
  }

  & .yt-parents__names {
    font-family: var(--yt-font-display);
    font-weight: 500;
  }

  & .yt-parents__role {
    color: var(--yt-muted);
  }

  & .yt-parents__contacts {
    margin-top: 36px;
    padding-top: 32px;
    /* Visually separates contacts from the lineage lines above. */
    border-top: 1px solid var(--yt-hairline);
  }

  & .yt-parents__eyebrow {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    color: var(--yt-accent);
  }

  & .yt-parents__list {
    list-style: none;
    margin: 18px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
  }

  & .yt-parents__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 18px;
    background: var(--yt-surface);
    border: 1px solid var(--yt-hairline);
    border-radius: 12px;
    text-align: left;
  }

  & .yt-parents__meta {
    display: flex;
    align-items: baseline;
    gap: 10px;
    min-width: 0;
  }

  & .yt-parents__label {
    font-size: 14px;
    color: var(--yt-muted);
  }

  & .yt-parents__name {
    font-family: var(--yt-font-display);
    font-size: 15px;
    font-weight: 500;
    color: var(--yt-ink);
  }

  & .yt-parents__call {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
    padding: 8px 14px;
    font-size: 13px;
    color: var(--yt-accent);
    background: var(--yt-accent-soft);
    border-radius: 999px;
    text-decoration: none;
  }

  & .yt-parents__icon {
    display: block;
  }
}

/* src/styles/invitation/sections/profiles.css */
.yt-profiles {
  padding: 56px 0;
  text-align: center;

  & .yt-profiles__eyebrow {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    color: var(--yt-accent);
  }

  /*
   * Two-column layout — unconditional. The 480px max-width container naturally
   * fits the editor's 390px iframe without a container query. The legacy SCSS had
   * no @media queries here either; the 2-column grid is the intended layout at all
   * phone widths.
   */
  & .yt-profiles__cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    margin-top: 28px;
  }

  & .yt-profiles__card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 22px 14px;
    background: var(--yt-surface);
    border: 1px solid var(--yt-hairline);
    border-radius: 14px;
  }

  & .yt-profiles__photo {
    width: 96px;
    height: 96px;
    margin-bottom: 16px;
    border-radius: 50%;
    overflow: hidden;
    /* Placeholder background when photo is loading or absent. */
    background: var(--yt-hairline);
    flex-shrink: 0;
  }

  & .yt-profiles__img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }

  & .yt-profiles__side {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: var(--yt-eyebrow-spacing);
    text-transform: var(--yt-eyebrow-transform);
    /* --yt-accent-2 is the accent variant for the second person; fall back to
       the primary accent when the theme does not define it. */
    color: var(--yt-accent-2, var(--yt-accent));
  }

  & .yt-profiles__name {
    margin-top: 6px;
    font-family: var(--yt-font-display);
    font-size: 19px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
  }

  & .yt-profiles__meta-list {
    margin-top: 14px;
    display: flex;
    flex-direction: column;
    gap: 5px;
  }

  & .yt-profiles__meta {
    display: flex;
    justify-content: center;
    gap: 7px;
    font-size: 12px;
    line-height: 1.5;
  }

  & .yt-profiles__meta-label {
    color: var(--yt-accent);
    font-weight: 500;
  }

  & .yt-profiles__meta-value {
    color: var(--yt-muted);
  }

  & .yt-profiles__traits {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px;
  }

  & .yt-profiles__trait {
    padding: 4px 10px;
    font-size: 11px;
    line-height: 1.3;
    color: var(--yt-ink);
    background: var(--yt-accent-soft);
    border-radius: 999px;
  }
}

/* src/styles/invitation/sections/qr-message-cta.css */
.yt-qr-message-cta {
  padding: 52px 0;
  text-align: center;
}

.yt-qr-message-cta__container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-qr-message-cta__eyebrow {
  color: var(--yt-accent);
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
}

.yt-qr-message-cta__title {
  margin-top: 12px;
  color: var(--yt-ink);
  font-family: var(--yt-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

.yt-qr-message-cta__body {
  margin-top: 12px;
  color: var(--yt-muted);
  font-size: 13px;
  line-height: 1.9;
  white-space: pre-line;
}

.yt-qr-message-cta__button {
  display: inline-block;
  margin-top: 22px;
  padding: 13px 30px;
  font-family: var(--yt-font-body);
  font-size: 13px;
  letter-spacing: 0.03em;
  color: var(--yt-on-accent);
  background: var(--yt-accent);
  border: 1px solid var(--yt-accent);
  border-radius: 999px;
  text-decoration: none;
  transition: opacity 0.2s ease;

  &:hover {
    opacity: 0.88;
  }
}

/* src/styles/invitation/sections/quote.css */
.yt-quote {
  padding: 88px 0;
  text-align: center;

  & .yt-quote__figure {
    position: relative;
    margin: 0;
  }

  & .yt-quote__mark {
    display: block;
    font-family: var(--yt-font-display);
    font-size: 56px;
    line-height: 0.6;
    color: var(--yt-accent-soft);
    opacity: 0.9;
  }

  & .yt-quote__text {
    margin: 18px auto 0;
    max-width: 300px;
    font-family: var(--yt-font-display);
    font-style: italic;
    font-size: 19px;
    font-weight: 400;
    line-height: 1.9;
    /* The couple's line breaks are the layout — a poem or verse reads naturally. */
    white-space: pre-line;
    color: var(--yt-ink);
  }

  & .yt-quote__source {
    margin-top: 24px;
    font-family: var(--yt-font-body);
    font-size: 12px;
    letter-spacing: 0.04em;
    color: var(--yt-muted);

    /* Short hairline rule above the attribution, drawn without a wrapper element. */
    &::before {
      content: "";
      display: block;
      width: 28px;
      height: 1px;
      margin: 0 auto 14px;
      background: var(--yt-hairline);
    }
  }
}

/* src/styles/invitation/sections/reception.css */
/*
 * yt/reception — reception (피로연) announcement card.
 *
 * The eyebrow and container use the shared .yt-eyebrow and .yt-container
 * classes from shell.css; only the block-specific elements are defined here.
 *
 * No legacy media queries existed in Reception.module.scss.
 * The card's fixed 24px horizontal padding inside a 480px column remains
 * comfortable at all phone widths, so no container queries are needed.
 *
 * The :first-child rule on .yt-reception__note drops the top border and
 * spacing when the note is the only field rendered in the card. This ports
 * the legacy .note:first-child Sass rule as plain CSS nesting.
 */
.yt-reception {
  padding: 64px 0;
  text-align: center;

  & .yt-reception__title {
    margin-top: 12px;
    font-family: var(--yt-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
    text-align: center;
  }

  & .yt-reception__card {
    margin-top: 28px;
    padding: 32px 24px;
    background: var(--yt-surface);
    border: 1px solid var(--yt-hairline);
    border-radius: 14px;
  }

  & .yt-reception__date {
    display: flex;
    flex-direction: column;
    gap: 6px;
  }

  & .yt-reception__date-line {
    font-family: var(--yt-font-display);
    font-size: 20px;
    font-weight: 500;
    color: var(--yt-ink);
  }

  & .yt-reception__time-line {
    font-size: 14px;
    color: var(--yt-muted);
  }

  & .yt-reception__venue {
    margin-top: 20px;
    font-family: var(--yt-font-display);
    font-size: 17px;
    font-weight: 500;
    color: var(--yt-ink);
  }

  & .yt-reception__address {
    margin-top: 8px;
    font-size: 14px;
    line-height: 1.7;
    color: var(--yt-muted);
  }

  & .yt-reception__note {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--yt-hairline);
    font-size: 14px;
    line-height: 1.9;
    white-space: pre-line;
    color: var(--yt-muted);

    /* When note is the only card child, drop the divider. */
    &:first-child {
      margin-top: 0;
      padding-top: 0;
      border-top: none;
    }
  }
}

/* src/styles/invitation/sections/rsvp.css */
.yt-rsvp {
  padding: 60px 0;
  text-align: center;
}

.yt-rsvp__container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-rsvp__eyebrow {
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
  color: var(--yt-accent);
}

.yt-rsvp__title {
  margin-top: 12px;
  font-family: var(--yt-font-display);
  font-size: 26px;
  font-weight: 500;
  line-height: 1.4;
  color: var(--yt-ink);
}

.yt-rsvp__form {
  max-width: 340px;
  margin: 28px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.yt-rsvp__choice {
  display: flex;
  gap: 10px;
}

.yt-rsvp__choice-btn {
  flex: 1;
  padding: 12px 0;
  font: inherit;
  font-size: 14px;
  border-radius: 8px;
  cursor: pointer;

  &.yt-rsvp__choice-btn--on {
    color: var(--yt-on-accent);
    background: var(--yt-accent);
    border: 1px solid var(--yt-accent);
  }

  &.yt-rsvp__choice-btn--off {
    color: var(--yt-muted);
    background: transparent;
    border: 1px solid var(--yt-hairline);
  }
}

.yt-rsvp__row {
  display: flex;
  gap: 10px;
}

.yt-rsvp__input {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 14px;
  color: var(--yt-ink);
  background: var(--yt-surface);
  border: 1px solid var(--yt-hairline);
  border-radius: 8px;

  &:focus {
    outline: 2px solid var(--yt-accent);
    outline-offset: -1px;
  }
}

textarea.yt-rsvp__input {
  min-height: 80px;
  resize: vertical;
}

.yt-rsvp__submit {
  margin-top: 6px;
  padding: 14px 0;
  font: inherit;
  font-size: 14px;
  letter-spacing: 0.08em;
  color: var(--yt-on-accent);
  background: var(--yt-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  &:disabled {
    opacity: 0.55;
    cursor: default;
  }
}

.yt-rsvp__error {
  font-size: 13px;
  color: #b3261e;
}

.yt-rsvp__thanks {
  margin-top: 24px;
  font-size: 15px;
  line-height: 1.9;
  color: var(--yt-muted);
}

/* src/styles/invitation/sections/send.css */
/*
 * The private message page (/invitations/<slug>/send).
 *
 * Not a section of an invitation but a page of its own, styled from the same
 * theme tokens so the printed card and the screen it opens read as one thing.
 */
.yt-send {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding: 48px 20px 64px;
}

.yt-send__card {
  width: 100%;
  max-width: 420px;
  text-align: center;
}

.yt-send__eyebrow {
  color: var(--yt-accent);
  font-family: var(--yt-font-body);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
}

.yt-send__title {
  margin-top: 14px;
  color: var(--yt-ink);
  font-family: var(--yt-font-display);
  font-size: 22px;
  font-weight: 600;
  line-height: 1.5;
}

.yt-send__notice {
  margin-top: 28px;
  color: var(--yt-muted);
  font-size: 14px;
  line-height: 1.8;
}

.yt-send__form {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 28px;
  text-align: left;
}

.yt-send__input {
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--yt-ink);
  background: var(--yt-surface);
  border: 1px solid var(--yt-hairline);
  border-radius: 8px;

  &:focus {
    outline: 2px solid var(--yt-accent);
    outline-offset: -1px;
  }

  &:disabled {
    opacity: 0.6;
  }
}

.yt-send__textarea {
  line-height: 1.7;
  resize: vertical;
}

.yt-send__thumbs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  list-style: none;
}

.yt-send__thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 8px;
  background: var(--yt-surface);
}

.yt-send__thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.yt-send__thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  color: #fff;
  font-size: 14px;
  line-height: 1;
  background: rgb(0 0 0 / 55%);
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}

/* Hidden from sight, not from assistive technology: the styled <label> is what
   guests tap, and the input has to stay focusable for the keyboard. */
.yt-send__file-input {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.yt-send__add-photos {
  padding: 12px 0;
  color: var(--yt-accent);
  font-size: 14px;
  text-align: center;
  border: 1px dashed var(--yt-accent);
  border-radius: 8px;
  cursor: pointer;

  &[aria-disabled="true"] {
    opacity: 0.5;
    cursor: default;
  }
}

.yt-send__error {
  color: #b3261e;
  font-size: 13px;
}

.yt-send__submit {
  padding: 14px 0;
  color: var(--yt-on-accent);
  font: inherit;
  font-size: 15px;
  letter-spacing: 0.08em;
  background: var(--yt-accent);
  border: 0;
  border-radius: 8px;
  cursor: pointer;

  &:disabled {
    opacity: 0.6;
    cursor: default;
  }
}

.yt-send__done {
  margin-top: 56px;
  text-align: center;
}

.yt-send__done-emoji {
  font-size: 40px;
}

.yt-send__done-title {
  margin-top: 14px;
  color: var(--yt-ink);
  font-family: var(--yt-font-display);
  font-size: 20px;
  font-weight: 600;
}

.yt-send__done-text {
  margin-top: 8px;
  color: var(--yt-muted);
  font-size: 14px;
}

/* src/styles/invitation/sections/share.css */
.yt-share {
  padding: 48px 0;
  text-align: center;
}

.yt-share__container {
  width: 100%;
  max-width: 480px;
  margin: 0 auto;
  padding-inline: 28px;
}

.yt-share__eyebrow {
  color: var(--yt-accent);
  font-family: var(--yt-font-body);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: var(--yt-eyebrow-spacing);
  text-transform: var(--yt-eyebrow-transform);
}

.yt-share__title {
  margin-top: 12px;
  color: var(--yt-ink);
  font-family: var(--yt-font-display);
  font-size: 24px;
  font-weight: 500;
  line-height: 1.4;
}

.yt-share__note {
  margin-top: 10px;
  color: var(--yt-muted);
  font-size: 13px;
  line-height: 1.8;
}

.yt-share__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  margin-top: 22px;
}

.yt-share__btn {
  flex: 0 1 auto;
  padding: 12px 22px;
  font-family: var(--yt-font-body);
  font-size: 13px;
  letter-spacing: 0.02em;
  color: var(--yt-ink);
  background: transparent;
  border: 1px solid var(--yt-hairline);
  border-radius: 999px;
  cursor: pointer;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    color: var(--yt-accent);
    border-color: var(--yt-accent);
  }
}

/* KakaoTalk's brand yellow is fixed by their guidelines, so it is the one
   colour on an invitation that no theme may repaint. */
.yt-share__btn--kakao {
  color: #191600;
  background: #fee500;
  border-color: #fee500;

  &:hover {
    color: #191600;
    border-color: #f2da00;
    background: #f2da00;
  }
}

.yt-share__error {
  flex: 1 0 100%;
  margin-top: 4px;
  color: var(--yt-accent);
  font-size: 12px;
}

/* src/styles/invitation/sections/spacer.css */
.yt-spacer {
  &[data-size="small"] {
    height: 24px;
  }

  &[data-size="medium"] {
    height: 48px;
  }

  &[data-size="large"] {
    height: 88px;
  }
}

/* src/styles/invitation/sections/text.css */
.yt-text {
  padding-block: 16px;

  & .yt-text__body {
    color: var(--yt-muted);
    line-height: 2;
    white-space: pre-line;
  }

  &[data-align="center"] .yt-text__body {
    text-align: center;
  }

  &[data-size="small"] .yt-text__body {
    font-size: 13px;
  }

  &[data-size="normal"] .yt-text__body {
    font-size: 15px;
  }

  &[data-size="large"] .yt-text__body {
    color: var(--yt-ink);
    font-size: 18px;
  }
}

/* src/styles/invitation/sections/timeline.css */
/*
 * Timeline section — vertical dotted rule with a circular marker per milestone.
 * No media queries; no container queries needed (no breakpoint changes exist
 * in the legacy source).
 */

.yt-timeline {
  padding-block: 56px;
  text-align: center;

  & .yt-timeline__list {
    list-style: none;
    margin: 36px 0 0;
    padding: 0;
    /* Each item's text is left-aligned even though the section is centered. */
    text-align: left;
  }

  & .yt-timeline__item {
    position: relative;
    padding-left: 28px;
    padding-bottom: 36px;

    /* The dotted vertical rule runs down the left edge of the item. */
    &::before {
      content: "";
      position: absolute;
      top: 6px;
      bottom: 0;
      left: 4px;
      border-left: 1px dotted var(--yt-hairline);
    }

    &:last-child {
      padding-bottom: 0;

      /* Stop the rule at the last marker rather than extending past it. */
      &::before {
        bottom: auto;
        height: 6px;
      }
    }
  }

  & .yt-timeline__marker {
    position: absolute;
    top: 5px;
    left: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: var(--yt-surface);
    border: 1px solid var(--yt-accent-2);
    /* Halo separates the marker from the rule behind it. */
    box-shadow: 0 0 0 3px var(--yt-bg);
  }

  & .yt-timeline__body {
    display: flex;
    flex-direction: column;
  }

  & .yt-timeline__date {
    font-family: var(--yt-font-body);
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--yt-accent-2);
  }

  & .yt-timeline__entry-title {
    margin: 6px 0 0;
    font-family: var(--yt-font-display);
    font-size: 17px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
  }

  & .yt-timeline__photo {
    position: relative;
    margin-top: 12px;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: 4px;
    background: var(--yt-hairline);
  }

  & .yt-timeline__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  & .yt-timeline__text {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.9;
    /* Stores plain text; line breaks come from the stored string, not markup. */
    white-space: pre-line;
    color: var(--yt-muted);
  }
}

/* src/styles/invitation/sections/together-counter.css */
/*
 * yt/together-counter — elapsed-time display and live HH:MM:SS ticker.
 *
 * The eyebrow and container use the shared .yt-eyebrow and .yt-container
 * classes from shell.css; only the block-specific elements are defined here.
 *
 * No legacy media queries existed in TogetherCounter.module.scss.
 * flex-wrap: wrap is added defensively on the headline row so unit spans
 * reflow gracefully at very narrow container widths.
 */
.yt-together-counter {
  padding: 64px 0;
  text-align: center;

  & .yt-together-counter__title {
    margin-top: 12px;
    font-family: var(--yt-font-display);
    font-size: 26px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--yt-ink);
    text-align: center;
  }

  & .yt-together-counter__headline {
    margin: 30px auto 0;
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 18px;
    /* Defensive: lets units wrap rather than overflow at very narrow widths. */
    flex-wrap: wrap;
  }

  & .yt-together-counter__unit {
    display: inline-flex;
    align-items: baseline;
    gap: 4px;
  }

  & .yt-together-counter__value {
    font-family: var(--yt-font-display);
    font-size: 40px;
    font-weight: 500;
    line-height: 1;
    color: var(--yt-accent);
    font-variant-numeric: tabular-nums;
  }

  & .yt-together-counter__label {
    font-family: var(--yt-font-body);
    font-size: 14px;
    color: var(--yt-muted);
  }

  & .yt-together-counter__clock {
    margin: 22px auto 0;
    display: inline-block;
    padding: 8px 18px;
    font-family: var(--yt-font-body);
    font-size: 15px;
    letter-spacing: 0.16em;
    color: var(--yt-ink);
    background: var(--yt-accent-soft);
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
  }
}

/* src/styles/invitation/sections/wreath-link.css */
.yt-wreath-link {
  padding: 44px 0;
  text-align: center;
}

/* The shared .yt-container class from shell.css provides the column-width
   styles; only wreath-link-specific rules live here. */

.yt-wreath-link__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  font-family: var(--yt-font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  color: var(--yt-ink);
  background: transparent;
  border: 1px solid var(--yt-hairline);
  border-radius: 999px;
  text-decoration: none;
  transition:
    border-color 0.2s ease,
    color 0.2s ease;

  &:hover {
    color: var(--yt-accent);
    border-color: var(--yt-accent);
  }
}

.yt-wreath-link__icon {
  flex: 0 0 auto;
  color: var(--yt-accent);
}