dialog.app-install-modal {
  --install-bg: #fbfaf7;
  --install-ink: #22372e;
  --install-muted: #66716a;
  display: block;
  position: fixed;
  inset: 0;
  box-sizing: border-box;
  width: min(480px, calc(100vw - 32px));
  height: fit-content;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0;
  border: 0;
  border-radius: 24px;
  background: var(--install-bg);
  color: var(--install-ink);
  box-shadow: 0 24px 100px #0006;
  overflow: auto;
  overscroll-behavior: contain;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  text-align: left;
  animation: app-install-enter .22s ease-out;
}
dialog.app-install-modal[hidden], dialog.app-install-modal:not([open]) { display: none !important; }
.app-install-modal *, .app-install-modal *::before, .app-install-modal *::after { box-sizing: border-box; }
dialog.app-install-modal::backdrop { background: #0b1516a6; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.app-install-hero { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: contain; background: #b0c8c3; }
.app-install-close { position: absolute; top: 12px; right: 12px; z-index: 1; display: grid; place-items: center; width: 44px; height: 44px; border: 1px solid #ffffff90; border-radius: 50%; background: #fffffff0; color: #22372e; cursor: pointer; }
.app-install-close .ph-bold { display: block; font-size: 20px; line-height: 1; }
.app-install-body { padding: 24px 28px 18px; }
.app-install-eyebrow { margin: 0 0 10px; color: #52715b; font-size: 11px; font-weight: 700; letter-spacing: .08em; }
.app-install-body h2 { margin: 0; color: var(--install-ink); font-size: 25px; font-weight: 750; line-height: 1.35; letter-spacing: -.9px; }
.app-install-body p#app-install-description { margin: 13px 0 21px; color: var(--install-muted); font-size: 13px; line-height: 1.8; word-break: keep-all; }
.app-install-body p strong { color: var(--install-ink); font-weight: 650; }
.app-install-stores { display: grid; gap: 9px; }
.app-install-stores a { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 16px; border-radius: 12px; background: #244a36; color: #fff; text-decoration: none; transition: background .15s; }
.app-install-stores a[hidden] { display: none; }
.app-install-stores a:hover { background: #173c29; }
.app-install-stores .ph-bold { flex: 0 0 auto; font-size: 23px; line-height: 1; }
.app-install-stores strong { font-size: 14px; font-weight: 600; }
.app-install-continue { display: block; width: 100%; min-height: 44px; margin-top: 9px; border: 0; background: transparent; color: var(--install-muted); font: inherit; font-size: 12px; cursor: pointer; }
.app-install-continue:hover { color: var(--install-ink); text-decoration: underline; text-underline-offset: 4px; }
.app-install-modal :is(a, button):focus-visible { outline: 3px solid #b28a43; outline-offset: 3px; }
@keyframes app-install-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 480px) {
  dialog.app-install-modal { width: calc(100vw - 24px); max-height: calc(100dvh - 24px); border-radius: 20px; }
  .app-install-body { padding: 20px 22px 12px; }
  .app-install-body h2 { font-size: 23px; }
  .app-install-body p#app-install-description { font-size: 12px; margin-bottom: 18px; }
  .app-install-close { top: 10px; right: 10px; }
}
@media (max-height: 650px) { .app-install-hero { max-height: 220px; object-fit: cover; object-position: center; } }
@media (prefers-color-scheme: dark) {
  dialog.app-install-modal { --install-bg: #18231e; --install-ink: #f1f3e9; --install-muted: #a5b5a8; }
  .app-install-eyebrow { color: #afc7a8; }
  .app-install-stores a { background: #c9dfb9; color: #1d3829; }
  .app-install-stores a:hover { background: #d9ebcd; }
}
@media (prefers-reduced-motion: reduce) { dialog.app-install-modal { animation: none; } }