/* Invitation in the benefit sheets' own tone, kept to one screen: flat paper, square cells,
   beige label cells, Bebas labels and brick. Kakao yellow is kept for the button that opens
   KakaoTalk. invite.html does not load benefit.css, so the sheet tokens are repeated here. */
:root {
  --inv-sheet: #fbf8f2; --inv-band: #ebe5dc; --inv-cell: #f5f1ea; --inv-line: #d9cfc2;
  --inv-sub: #766758; --inv-yellow: #fee500;
}
.inv-dialog-open { overflow: hidden; }

/* Sheet: rises from the bottom on phones, centred on wider screens. */
.inv-modal { --inv-max: calc(100dvh - 24px); position: fixed; padding: 0; border: 0; width: 100%; max-width: 430px; max-height: var(--inv-max); margin: auto auto 0; background: var(--inv-sheet); color: var(--ink); overflow: hidden; box-shadow: 0 -10px 40px #241b1526; }
.inv-modal::backdrop { background: #241b1580; }
.inv-modal[open] { animation: inv-rise .3s var(--ease) both; }
@keyframes inv-rise { from { transform: translateY(24px); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .inv-modal[open] { animation: none; } }
@media (min-width: 600px) { .inv-modal { --inv-max: calc(100dvh - 64px); max-width: 410px; margin: auto; } }
.inv-panel { max-height: var(--inv-max); padding: 18px 18px calc(16px + env(safe-area-inset-bottom)); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }

.inv-head { display: flex; align-items: center; gap: 10px; }
.inv-eyebrow { flex: none; padding: 3px 7px 2px; background: var(--brick); color: var(--cream); font: 13px/1.2 var(--display); letter-spacing: .1em; }
.inv-panel h2 { flex: 1; min-width: 0; font: 700 18px/1.3 var(--text); letter-spacing: -.05em; }
.inv-close { flex: none; width: 40px; height: 40px; margin: -8px -8px -8px 0; display: grid; place-items: center; font: 300 28px/1 var(--text); }
.inv-intro { margin-top: 6px; font-size: 12px; line-height: 1.5; color: var(--inv-sub); }

/* Demo-mode notice: one short strip, always shown when collection runs on test data. */
.inv-preview { display: flex; align-items: flex-start; gap: 7px; margin: 10px 0 0; padding: 6px 9px; background: #f3e7e1; color: var(--brick); font-size: 10.5px; line-height: 1.55; text-align: left; }
.inv-preview b { flex: none; padding: 1px 4px 0; background: var(--brick); color: var(--cream); font: 400 11px/1.4 var(--display); letter-spacing: .1em; }

/* FROM / TO: small tables like the coupon pairs on the benefit sheet. */
.inv-fields { display: grid; gap: 3px; min-width: 0; margin: 14px 0 0; padding: 0; border: 0; }
.inv-fields legend { display: flex; align-items: baseline; gap: 6px; width: 100%; margin: 0 0 6px; padding: 0 0 5px; border-bottom: 1px solid var(--ink); font: 700 12px/1.3 var(--text); letter-spacing: -.03em; }
.inv-fields legend b { font: 400 17px/1 var(--display); letter-spacing: .04em; color: var(--brick); }
.inv-row { display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 3px; }
.inv-row label { display: flex; align-items: center; justify-content: center; background: var(--inv-band); font: 700 12px/1.3 var(--text); letter-spacing: -.03em; }
.inv-row input, .inv-manual input, .inv-admin input { display: block; width: 100%; min-width: 0; height: 44px; margin: 0; padding: 8px 12px; border: 0; border-radius: 0; background: #fff; box-shadow: inset 0 0 0 1px var(--inv-band); color: var(--ink); font: 500 16px/1.4 var(--text); letter-spacing: -.02em; }
.inv-row input::placeholder, .inv-manual input::placeholder { color: #b0a597; font-weight: 400; }
.inv-row input:focus, .inv-manual input:focus, .inv-admin input:focus { outline: 0; box-shadow: inset 0 0 0 1px var(--inv-band), inset 0 -2px 0 var(--brick); }
.inv-row input:disabled { background: var(--inv-cell); color: var(--inv-sub); }
.inv-help { margin: 7px 0 0; font-size: 10.5px; line-height: 1.6; color: var(--inv-sub); word-break: keep-all; }

/* Consent: checkbox and 내용 보기 on one line; the policy opens beneath them. */
.inv-consent { position: relative; margin-top: 12px; padding: 0 10px; background: var(--inv-cell); }
.inv-check { display: flex; align-items: center; gap: 9px; min-height: 44px; padding-right: 62px; font: 600 12px/1.4 var(--text); letter-spacing: -.03em; cursor: pointer; }
.inv-check input { flex: none; appearance: none; -webkit-appearance: none; width: 19px; height: 19px; margin: 0; border: 1.5px solid var(--ink); border-radius: 0; background: #fff center / 13px no-repeat; cursor: pointer; }
.inv-check input:checked { border-color: var(--brick); background-color: var(--brick); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'%3E%3Cpath d='M2.5 7.2l3 3 6-6.4' fill='none' stroke='%23f0e9e0' stroke-width='2'/%3E%3C/svg%3E"); }
.inv-check input:focus-visible { outline: 2px solid var(--brick); outline-offset: 2px; }
.inv-policy summary { position: absolute; right: 4px; top: 0; display: flex; align-items: center; min-height: 44px; padding: 0 6px; list-style: none; cursor: pointer; font-size: 11px; color: var(--inv-sub); text-decoration: underline; text-underline-offset: 3px; }
.inv-policy summary::-webkit-details-marker { display: none; }
.inv-policy-body { padding: 8px 0 10px; border-top: 1px solid var(--inv-line); font-size: 11px; line-height: 1.65; overflow-wrap: anywhere; }
.inv-policy-body dl { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: 3px; margin: 6px 0 8px; }
.inv-policy-body dt { display: flex; align-items: center; padding: 5px 8px; background: var(--inv-band); font-weight: 700; white-space: nowrap; }
.inv-policy-body dd { margin: 0; padding: 5px 8px; background: #fff; color: var(--inv-sub); }
.inv-policy-body p + p { margin-top: 6px; }
.inv-policy-draft { color: var(--brick); font-weight: 600; }
.inv-policy-body [hidden] { display: none; }
.inv-status { margin: 10px 0 0; font-size: 12px; color: var(--brick); line-height: 1.5; }
.inv-status:empty { display: none; }

/* Buttons: brick for making the card, Kakao yellow only for sending it. Square, like .bn-cta. */
.inv-primary { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 50px; margin-top: 12px; padding: 12px 16px; border: 0; border-radius: 2px; background: var(--brick); color: var(--cream); font: 650 14px/1.4 var(--text); letter-spacing: -.02em; cursor: pointer; transition: background-color .18s ease; }
.inv-primary > span[aria-hidden] { font-size: 20px; line-height: 1; }
.inv-primary:not(:disabled):active { background: var(--brick-deep); }
.inv-primary:disabled { background: #ddd4c8; color: #8a7d70; cursor: default; }
.inv-kakao { justify-content: center; gap: 8px; margin-top: 12px; background: var(--inv-yellow); color: #000000d9; }
.inv-kakao:not(:disabled):active { background: #f2d900; }
.inv-kakao svg { width: 20px; height: 19px; fill: currentColor; }
.inv-text-button { display: block; min-height: 40px; margin: 4px auto 0; padding: 8px 10px; color: var(--inv-sub); font: 12px/1.5 var(--text); text-decoration: underline; text-underline-offset: 4px; }

/* Ready: one compact card that echoes the letter, then the two ways to send it. */
.inv-ready { margin-top: 14px; }
.inv-mini-card { padding: 14px 14px 12px; background: #fff; outline: 1px solid var(--inv-line); outline-offset: -5px; text-align: center; }
.inv-mini-logo { font: 30px/1 var(--display); letter-spacing: .01em; }
.inv-mini-logo span { margin-left: 6px; color: var(--brick); font-size: 18px; letter-spacing: .03em; }
.inv-mini-line { margin: 6px 0 0; font-size: 12.5px; line-height: 1.6; letter-spacing: -.03em; word-break: keep-all; }
.inv-ready-name { font-weight: 700; overflow-wrap: anywhere; }
.inv-mini-from { display: grid; grid-template-columns: 52px minmax(0, 1fr); gap: 3px; margin: 10px 0 0; }
.inv-mini-from dt { display: flex; align-items: center; justify-content: center; padding: 5px 4px 4px; background: var(--inv-band); font: 13px/1 var(--display); letter-spacing: .08em; color: var(--brick); }
.inv-mini-from dd { margin: 0; padding: 5px 10px; background: var(--inv-cell); font: 600 12px/1.5 var(--text); text-align: left; overflow-wrap: anywhere; }
.inv-share-note { text-align: center; }
.inv-share-note:empty { display: none; }
.inv-ready-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; margin-top: 6px; }
.inv-ready-actions > * { display: flex; align-items: center; justify-content: center; gap: 4px; min-height: 44px; border-radius: 2px; background: var(--inv-band); font: 600 12.5px/1.4 var(--text); letter-spacing: -.03em; }
.inv-ready-actions > *:active { background: #e0d8cc; }
.inv-manual label { display: block; margin: 10px 0 6px; font-size: 12px; font-weight: 600; }
.inv-manual input { font-size: 12px; }

.inv-modal [hidden], .inv-document [hidden], .inv-admin [hidden] { display: none !important; }
.inv-modal :focus-visible, .inv-document :focus-visible, .inv-admin :focus-visible { outline: 2px solid var(--brick); outline-offset: 3px; }

/* Guest letter: one framed sheet on the cream desk, sized to a phone screen. */
.inv-document { min-height: 100dvh; background: var(--cream); padding: 12px 12px calc(12px + env(safe-area-inset-bottom)); }
.inv-letter { width: min(100%, 430px); margin: 0 auto; padding: 30px 22px 22px; background: var(--inv-sheet); outline: 1px solid var(--inv-line); outline-offset: -7px; box-shadow: 0 6px 30px #241b1512; text-align: center; }
.inv-letter-brand { width: 54px; height: auto; margin: 0 auto 12px; }
.inv-letter-logo { font: 72px/.84 var(--display); letter-spacing: -.01em; }
.inv-letter-date { margin-top: 10px; padding-bottom: 16px; border-bottom: 1px solid var(--ink); font: 22px/1 var(--display); letter-spacing: .03em; color: var(--brick); }
.inv-letter-content { padding-top: 16px; }
.inv-letter-content .inv-preview { margin: 0 0 12px; }
.inv-letter h1 { font-size: 18px; font-weight: 700; line-height: 1.5; letter-spacing: -.05em; overflow-wrap: anywhere; word-break: keep-all; }
#inv-guest { color: var(--brick); }
.inv-letter-copy { margin: 12px auto 0; font-size: 12.5px; line-height: 1.75; letter-spacing: -.04em; word-break: keep-all; }
.inv-letter-copy p + p { margin-top: 10px; }
.inv-letter-benefit { padding: 9px 8px; background: var(--inv-band); }
.inv-letter-copy strong { color: var(--brick); font-weight: 700; }
.inv-letter-sender { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 3px; margin: 14px 0 0; text-align: left; }
.inv-letter-sender dt { display: flex; align-items: center; justify-content: center; background: var(--inv-band); font: 15px/1 var(--display); letter-spacing: .08em; color: var(--brick); }
.inv-letter-sender dd { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 8px; margin: 0; padding: 8px 12px; background: var(--inv-cell); font-size: 13px; line-height: 1.5; overflow-wrap: anywhere; }
#inv-host { font-weight: 700; }
.inv-letter-guide { margin-top: 10px; font-size: 11px; line-height: 1.6; color: var(--inv-sub); letter-spacing: -.03em; word-break: keep-all; }
.inv-letter-cta { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 50px; margin-top: 14px; padding: 12px 16px; border-radius: 2px; background: var(--ink); color: var(--cream); font: 650 13.5px/1.4 var(--text); letter-spacing: -.02em; text-align: left; }
.inv-letter-cta span[aria-hidden] { font-size: 20px; line-height: 1; }
.inv-letter-status { padding: 24px 0; font-size: 13px; line-height: 1.8; }

/* Download page for the operator. */
.inv-admin { max-width: 600px; margin: 40px auto; padding: 28px; background: var(--inv-sheet); }
.inv-admin .inv-eyebrow { display: inline-block; }
.inv-admin h1 { margin: 10px 0 18px; font-size: 24px; letter-spacing: -.04em; }
.inv-admin label { display: block; margin: 20px 0 8px; font-size: 13px; font-weight: 600; }
.inv-admin-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

@media (max-width: 359px) {
  .inv-panel { padding-left: 14px; padding-right: 14px; }
  .inv-row { grid-template-columns: 56px minmax(0, 1fr); }
  .inv-letter { padding: 26px 16px 18px; }
  .inv-letter-logo { font-size: 64px; }
  .inv-letter h1 { font-size: 16.5px; }
  .inv-letter-copy { font-size: 12px; }
  .inv-admin-dates { grid-template-columns: 1fr; gap: 0; }
}