:root {
      --bg: #17191f;
      --paper: #fff8ed;
      --paper-soft: #fffdf8;
      --paper-warm: #f1e5d4;
      --ink: #252330;
      --muted: #6f6973;
      --line: rgba(48, 42, 51, .13);
      --line-strong: rgba(48, 42, 51, .2);
      --coral: #e66b58;
      --coral-soft: #fff0ea;
      --mint: #6ea99b;
      --mint-soft: #eaf5f1;
      --gold: #d5a84f;
      --blue: #4d7ed8;
      --shadow: 0 24px 60px rgba(0, 0, 0, .26);
      --html-doc-top-bg: rgba(255, 248, 237, .92);
      --html-doc-top-color: #252330;
      --html-doc-top-border: 1px solid rgba(255, 248, 237, .5);
      --html-doc-top-shadow: 0 14px 34px rgba(0, 0, 0, .34);
      --html-doc-top-focus: rgba(230, 107, 88, .34);
    }

    * {
      box-sizing: border-box;
    }

    [hidden] {
      display: none !important;
    }

    html {
      min-height: 100%;
      background: var(--bg);
      touch-action: manipulation;
      -webkit-text-size-adjust: 100%;
    }

    body {
      min-height: 100%;
      margin: 0;
      overflow-x: hidden;
      color: var(--ink);
      font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", "Segoe UI", sans-serif;
      line-height: 1.5;
      background: var(--bg);
      touch-action: manipulation;
    }

    .page {
      min-height: 100svh;
      position: relative;
      display: grid;
      place-items: start center;
      isolation: isolate;
      padding: 10px;
    }

    .page::before {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -3;
      background-image: var(--poster-url);
      background-size: cover;
      background-position: center;
      filter: blur(24px) saturate(1.08) brightness(.5);
      transform: scale(1.12);
    }

    .page::after {
      content: "";
      position: fixed;
      inset: 0;
      z-index: -2;
      background: rgba(19, 20, 28, .7);
      box-shadow: inset 0 -34vh 80vh rgba(14, 15, 20, .58);
    }

    .invite-shell {
      width: min(100%, 500px);
    }

    .invite {
      --state-accent: var(--coral);
      width: 100%;
      display: flex;
      flex-direction: column;
      border-radius: 24px;
      overflow: hidden;
      background: var(--paper);
      box-shadow: var(--shadow);
      backdrop-filter: blur(18px);
    }

    .header {
      position: relative;
      padding: 22px 18px 15px;
      color: var(--ink);
      background: var(--paper-soft);
      border-bottom: 1px dashed rgba(48, 42, 51, .2);
    }

    .header::before {
      content: "";
      position: absolute;
      inset: 0 0 auto;
      height: 9px;
      background: var(--state-accent);
    }

    .section-label::before {
      width: 5px;
      height: 5px;
      flex: 0 0 5px;
      border-radius: 999px;
      background: var(--state-accent);
      box-shadow: 0 0 0 2px rgba(48, 42, 51, .06);
    }

    .section-label {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      color: #6a4d3a;
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
    }

    .section-label::before {
      content: "";
      width: 5px;
      height: 5px;
      flex-basis: 5px;
    }

    .header-title-row {
      display: block;
    }

    .header-title {
      min-width: 0;
      margin: 0;
      color: var(--ink);
      font-size: 25px;
      line-height: 1.12;
      letter-spacing: 0;
      word-break: keep-all;
      text-wrap: balance;
      -webkit-user-select: none;
      user-select: none;
      touch-action: manipulation;
      -webkit-tap-highlight-color: transparent;
      cursor: default;
    }

    .header-store {
      margin: 8px 0 0;
      color: var(--muted);
      font-size: 12px;
      font-weight: 800;
      line-height: 1.3;
      word-break: keep-all;
    }

    .header-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 12px;
    }

    .header-stats {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 8px;
    }

    .meta-badge {
      align-items: center;
      gap: 5px;
      display: inline-flex;
      width: fit-content;
      min-height: 28px;
      padding: 7px 10px;
      border: 1px solid rgba(48, 42, 51, .11);
      border-radius: 999px;
      color: #34313d;
      background: rgba(255, 255, 255, .7);
      font-size: 11px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 6px 16px rgba(48, 42, 51, .05);
    }

    .meta-location {
      padding: 6px 7px 6px 11px;
      color: #9c493d;
      background: var(--coral-soft);
      border-color: rgba(230, 107, 88, .28);
      text-decoration: none;
    }

    .meta-location svg {
      width: 14px;
      height: 14px;
      display: block;
    }

    .stat-pill {
      --stat-bg: rgba(48, 42, 51, .06);
      --stat-border: rgba(48, 42, 51, .1);
      --stat-label: #6c6670;
      --stat-value: #2c2a36;
      display: inline-flex;
      overflow: hidden;
      border: 1px solid var(--stat-border);
      border-radius: 999px;
      color: var(--stat-value);
      background: var(--stat-bg);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
      box-shadow: 0 5px 14px rgba(48, 42, 51, .04);
    }

    .stat-pill span {
      padding: 5px 7px;
      color: var(--stat-label);
      border-right: 1px solid var(--stat-border);
    }

    .stat-pill strong {
      padding: 5px 8px;
      font-weight: 950;
    }

    .stat-low {
      --stat-bg: var(--mint-soft);
      --stat-border: rgba(110, 169, 155, .26);
      --stat-label: #587d73;
      --stat-value: #2d6055;
    }

    .stat-mid {
      --stat-bg: #fff4df;
      --stat-border: rgba(213, 168, 79, .32);
      --stat-label: #82652c;
      --stat-value: #6b501d;
    }

    .stat-high {
      --stat-bg: var(--coral-soft);
      --stat-border: rgba(230, 107, 88, .3);
      --stat-label: #a04b3e;
      --stat-value: #833a30;
    }

    .stat-none {
      --stat-bg: #edf3fb;
      --stat-border: rgba(77, 126, 216, .22);
      --stat-label: #5f718f;
      --stat-value: #39598f;
    }

    .poster-intro {
      display: grid;
      grid-template-columns: minmax(0, 1.25fr) minmax(146px, .75fr);
      background: var(--paper);
    }

    .poster-panel {
      min-width: 0;
      margin: 0;
      padding: 10px;
      display: grid;
      align-content: center;
      background: var(--paper-warm);
      border-right: 1px solid var(--line);
    }

    .poster-frame {
      aspect-ratio: var(--poster-aspect-ratio, 2 / 3);
      width: 100%;
      height: auto;
      max-height: 430px;
      display: grid;
      place-items: center;
      overflow: hidden;
      border: 1px solid rgba(48, 42, 51, .12);
      border-radius: 18px;
      background: #111;
      box-shadow:
        0 0 0 6px rgba(255, 250, 243, .72),
        0 18px 36px rgba(65, 41, 27, .2);
    }

    .poster-frame img {
      display: block;
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center;
    }

    .intro-panel {
      min-width: 0;
      padding: 5px 8px 8px;
      display: grid;
      grid-template-rows: auto auto;
      gap: 8px;
      align-content: start;
      background: var(--paper-soft);
    }

    .intro-copy,
    .intro-reservation {
      min-width: 0;
      padding: 0 9px 9px;
      border: 1px solid var(--line);
      border-radius: 16px;
      background: #ffffff;
    }

    .intro-copy .section-label,
    .intro-reservation .section-label {
      margin-top: 0;
    }

    .intro-panel p {
      margin: 6px 0 0;
      color: #55505b;
      font-size: 10px;
      line-height: 1.45;
      max-height: none;
      overflow: visible;
      white-space: pre-line;
      word-break: keep-all;
    }

    .info-grid {
      display: grid;
      gap: 1px;
      background: var(--line);
    }

    .info-grid.two {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .info-grid.three {
      grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .info-cell {
      position: relative;
      min-width: 0;
      min-height: 76px;
      padding: 13px 14px;
      display: grid;
      align-content: center;
      background: var(--paper-soft);
    }

    .info-cell:nth-child(even) {
      background: var(--paper-warm);
    }

    .info-label {
      display: inline-flex;
      width: fit-content;
      margin-bottom: 7px;
      padding: 4px 8px;
      border-radius: 999px;
      color: #6a4d3a;
      background: rgba(230, 107, 88, .1);
      font-size: 10px;
      font-weight: 900;
      line-height: 1;
    }

    .info-value {
      display: block;
      color: var(--ink);
      font-size: 16px;
      font-weight: 900;
      line-height: 1.22;
      overflow-wrap: anywhere;
    }

    .date-line {
      color: #756e78;
      font-size: 11px;
      font-weight: 800;
    }

    .time-line {
      display: block;
      margin-top: 1px;
      color: var(--ink);
      font-size: 14px;
      font-weight: 950;
      white-space: nowrap;
    }

    .intro-reservation {
      min-width: 130px;
      padding-right: 6px;
      padding-bottom: 7px;
      padding-left: 6px;
      background: var(--paper-soft);
    }

    .intro-reservation .section-label {
      margin-bottom: 3px;
    }

    .intro-reservation .time-line {
      font-size: 13px;
    }

    .week-calendar {
      width: 100%;
      min-width: 116px;
      margin-top: 5px;
      padding: 6px 5px;
      display: grid;
      justify-items: center;
      gap: 7px;
      border: 0;
      border-radius: 10px;
      background: rgba(255, 255, 255, .32);
    }

    .week-calendar-inner {
      min-width: 79px;
      display: grid;
      justify-content: center;
    }

    .week-calendar-legend {
      min-width: 64px;
      display: flex;
      justify-content: center;
      gap: 8px;
      color: #675f69;
      font-size: 9px;
      font-weight: 700;
      line-height: 7px;
    }

    .week-calendar-legend > span {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      height: 7px;
      min-height: 7px;
      line-height: 7px;
      white-space: nowrap;
    }

    .legend-dot {
      width: 7px;
      height: 7px;
      flex: 0 0 7px;
      display: inline-block;
      padding: 0;
      box-sizing: border-box;
      border: 1px solid transparent;
      border-radius: 50%;
      background: #ffffff;
      line-height: 0;
    }

    .legend-today {
      border-color: #2f9e7e;
    }

    .legend-event {
      border-color: #c78a1d;
    }

    .week-row {
      display: grid;
      grid-template-columns: repeat(7, 7px);
      justify-content: center;
      gap: 5px;
      align-items: center;
    }

    .week-row + .week-row {
      margin-top: 4px;
    }

    .week-dot {
      position: relative;
      width: 7px;
      height: 7px;
      margin: 0 auto;
      border: 1px solid transparent;
      border-radius: 999px;
      background: rgba(48, 42, 51, .2);
    }

    .week-dot.is-sunday {
      background: var(--coral);
    }

    .week-dot.is-saturday {
      background: var(--blue);
    }

    .week-dot.today {
      border-color: #2f9e7e;
      background: #ffffff;
    }

    .week-dot.event {
      border-color: #c78a1d;
      background: #ffffff;
    }

    .week-dot.today.event {
      border-color: #c78a1d;
      background: #ffffff;
    }

    .compact-cell {
      min-height: 68px;
    }

    .compact-cell .info-value {
      font-size: 15px;
    }

    .meta-location:focus-visible {
      outline: 3px solid rgba(230, 107, 88, .34);
      outline-offset: 3px;
    }

    .action-dock {
      position: relative;
      display: flex;
      justify-content: flex-end;
      gap: 10px;
      margin-top: 11px;
      padding-right: 2px;
    }

    .action-button {
      width: 46px;
      height: 46px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border: 1px solid rgba(255, 248, 237, .32);
      border-radius: 999px;
      color: #fff7ea;
      background: rgba(37, 35, 48, .88);
      box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, .1),
        0 14px 26px rgba(0, 0, 0, .22);
      cursor: pointer;
      text-decoration: none;
    }

    .action-button svg {
      width: 19px;
      height: 19px;
      display: block;
    }

    .action-button:focus-visible {
      outline: 3px solid rgba(244, 135, 154, .38);
      outline-offset: 3px;
    }

    .action-button.is-done {
      color: #e8fff7;
      border-color: rgba(110, 169, 155, .5);
      background: rgba(72, 115, 104, .9);
    }

    .copy-menu {
      position: absolute;
      right: 2px;
      bottom: calc(100% + 10px);
      z-index: 3;
      min-width: 148px;
      padding: 6px;
      display: grid;
      gap: 4px;
      border: 1px solid rgba(255, 248, 237, .24);
      border-radius: 16px;
      background: rgba(37, 35, 48, .96);
      box-shadow: 0 18px 36px rgba(0, 0, 0, .24);
      backdrop-filter: blur(12px);
    }

    .copy-menu button {
      width: 100%;
      min-height: 36px;
      padding: 8px 10px;
      border: 0;
      border-radius: 11px;
      color: #fff8ed;
      background: transparent;
      font: inherit;
      font-size: 12px;
      font-weight: 900;
      line-height: 1;
      text-align: left;
      cursor: pointer;
    }

    .copy-menu button:hover,
    .copy-menu button:focus-visible {
      outline: none;
      background: rgba(255, 248, 237, .1);
    }

    .snackbar {
      position: fixed;
      right: max(14px, env(safe-area-inset-right));
      bottom: max(14px, env(safe-area-inset-bottom));
      z-index: 10;
      max-width: calc(100% - 28px);
      padding: 11px 14px;
      border: 1px solid rgba(255, 248, 237, .2);
      border-radius: 999px;
      color: #fff8ed;
      background: rgba(37, 35, 48, .92);
      box-shadow: 0 16px 34px rgba(0, 0, 0, .24);
      font-size: 13px;
      font-weight: 800;
      line-height: 1.2;
      opacity: 0;
      transform: translateY(10px);
      pointer-events: none;
      transition: opacity .18s ease, transform .18s ease;
    }

    .snackbar.is-visible {
      opacity: 1;
      transform: translateY(0);
    }

    @media (min-width: 900px) {
      .page {
        padding: 12px;
      }

      .invite-shell {
        width: min(100%, 500px);
      }
    }