/* Uses the homepage's existing brand palette and Korean sans typography. */
.family-popup {
  width: min(900px, calc(100vw - 48px));
  max-width: none;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 3px;
  background: var(--cream, #f8f5ee);
  color: var(--ink, #29241f);
  font-family: var(--font);
  box-shadow: 0 24px 90px rgb(0 0 0 / 28%);
  overflow: auto;
  overscroll-behavior: contain;
}
.family-popup::backdrop { background: rgb(20 23 22 / 60%); }
.family-popup-body { position: relative; display: grid; grid-template-columns: 1.07fr 1fr; }
.family-popup-photo { position: relative; min-width: 0; background: #51483e; }
.family-popup-photo img { width: 100%; height: 100%; position: absolute; inset: 0; object-fit: cover; object-position: 50% 50%; }
.family-popup-copy { position: relative; isolation: isolate; overflow: hidden; padding: 44px 38px 32px; background: var(--cream, #f8f5ee); }
.family-popup-copy::before { content: ''; position: absolute; z-index: -1; inset: 0; background: url('./assets/popup/family-dining-background-20261102.webp') center 56% / 100% auto no-repeat; opacity: .28; filter: blur(1.5px); -webkit-mask-image: linear-gradient(to bottom, transparent 16%, #000 35%, #000 70%, transparent 92%); mask-image: linear-gradient(to bottom, transparent 16%, #000 35%, #000 70%, transparent 92%); pointer-events: none; }
.family-popup-copy .family-popup-description { color: #514a40; }
.family-popup-logo { width: 220px; height: auto; margin-bottom: 40px; }
.family-popup-title { margin: 0; font-size: 36px; font-weight: 800; line-height: 1.35; letter-spacing: -.055em; }
.family-popup-description { margin: 20px 0 28px; font-size: 15px; line-height: 1.85; color: #686055; letter-spacing: -.025em; }
.family-popup-menu { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 50px; padding: 13px 20px; border-radius: 2px; background: var(--red, #bd3b25); color: #fff; font-size: 15px; font-weight: 700; }
.family-popup-menu:hover { background: var(--red-dark, #94301f); }
.family-popup-menu svg { width: 20px; height: 20px; }
.family-popup-stores { display: table; margin: 15px auto 0; padding: 4px 0; border-bottom: 1px solid #bcb2a5; font-size: 13px; line-height: 1.5; }
.family-popup-stores:hover { color: var(--red, #bd3b25); border-color: currentColor; }
.family-popup-close { position: absolute; z-index: 2; top: 10px; right: 10px; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 50%; background: var(--cream, #f8f5ee); color: var(--ink, #29241f); }
.family-popup-close svg { width: 22px; height: 22px; }
.family-popup-close:hover { background: #eae3d7; }
.family-popup-actions { position: sticky; z-index: 3; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 4px 20px; border-top: 1px solid var(--line, #ded9ce); background: var(--paper, #fffdf8); }
.family-popup-actions button { min-height: 44px; padding: 8px 4px; border: 0; background: transparent; color: #686055; font-size: 13px; line-height: 1.5; }
.family-popup-actions [data-family-hide-today] { display: flex; align-items: center; gap: 8px; }
.family-popup-actions [data-family-hide-today] svg { width: 17px; height: 17px; }
.family-popup-actions button:last-child { color: var(--ink, #29241f); font-weight: 700; }
.family-popup-actions button:hover { color: var(--red, #bd3b25); }
.family-popup :is(button, a):focus-visible { outline: 2px solid var(--red, #bd3b25); outline-offset: -4px; }
@media (max-width: 700px) {
  .family-popup { width: min(420px, calc(100vw - 32px)); max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); }
  .family-popup-body { grid-template-columns: 1fr; }
  .family-popup-photo { height: clamp(164px, 52vw, 220px); }
  .family-popup-photo img { object-position: 50% 48%; }
  .family-popup-copy { padding: 25px 28px 24px; }
  .family-popup-logo { width: 190px; margin-bottom: 22px; }
  .family-popup-title { font-size: 28px; line-height: 1.35; }
  .family-popup-description { margin: 14px 0 21px; font-size: 14px; line-height: 1.8; }
  .family-popup-menu { min-height: 48px; padding: 12px 17px; font-size: 14px; }
  .family-popup-stores { margin-top: 12px; }
  .family-popup-close { top: 9px; right: 9px; background: rgb(255 253 248 / 96%); }
  .family-popup-actions { padding-inline: 16px; }
}
@media (max-width: 360px) {
  .family-popup-copy { padding-inline: 23px; }
  .family-popup-title { font-size: 26px; }
  .family-popup-description { font-size: 13px; }
}
@media (max-height: 700px) and (min-width: 701px) {
  .family-popup-copy { padding-block: 30px 24px; }
  .family-popup-logo { width: 190px; margin-bottom: 26px; }
  .family-popup-title { font-size: 32px; }
  .family-popup-description { margin-block: 16px 20px; }
}
@media (max-height: 730px) and (max-width: 700px) {
  .family-popup-photo { height: 156px; }
  .family-popup-copy { padding-block: 20px 18px; }
  .family-popup-logo { width: 170px; margin-bottom: 16px; }
  .family-popup-title { font-size: 26px; }
  .family-popup-description { margin-block: 12px 17px; }
}