/* 홈 화면에 추가 방법 그림 설명 (pwa.js가 만든다) */
.pwa-sheet {
  position: fixed;
  inset: 0;
  z-index: 25;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  padding: max(12px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) 0 max(10px, env(safe-area-inset-left));
  background: rgba(16, 12, 40, .62);
  overscroll-behavior: contain;
  touch-action: pan-y;
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  color: #4A2B1E;
  -webkit-user-select: none;
  user-select: none;
  animation: pwa-fade .2s ease-out;
}
.pwa-panel {
  width: 100%;
  max-width: 420px;
  max-height: 100%;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 18px 16px calc(14px + env(safe-area-inset-bottom));
  background: #FFF6E2;
  border: 4px solid #E8B874;
  border-bottom: 0;
  border-radius: 26px 26px 0 0;
  animation: pwa-up .28s cubic-bezier(.2, 1.2, .4, 1);
}
@keyframes pwa-fade { from { opacity: 0; } }
@keyframes pwa-up { from { transform: translateY(40%); } }

.pwa-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; text-align: left; }
.pwa-head h2 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.3px; }
.pwa-head p { margin: 2px 0 0; font-size: 13.5px; font-weight: 600; color: #8A6650; word-break: keep-all; }
.pwa-appicon { flex: none; width: 40px; height: 40px; border-radius: 10px; }

.pwa-steps { display: grid; gap: 8px; margin: 0 0 12px; padding: 0; list-style: none; }
.pwa-steps li { display: grid; grid-template-columns: 132px 1fr; gap: 10px; align-items: center; padding: 8px; background: #FFEBC4; border-radius: 16px; }
.pwa-steps p { margin: 0; font-size: 14.5px; font-weight: 700; line-height: 1.4; text-align: left; word-break: keep-all; }
.pwa-steps p b {
  display: inline-grid; place-items: center;
  width: 22px; height: 22px; margin-right: 6px;
  font-size: 13px; color: #fff; background: #FF6B57; border-radius: 50%;
  vertical-align: 1px;
}
.pwa-steps em { font-style: normal; color: #D9483A; white-space: nowrap; }
.pwa-steps small { display: block; margin-top: 2px; font-size: 12.5px; font-weight: 600; color: #8A6650; }
.pwa-steps p svg, .pwa-steps small i svg { width: 18px; height: 18px; vertical-align: -3px; }
.pwa-steps small i { font-style: normal; }

/* 폰 화면 조각 그림 */
.pwa-pic {
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: center; gap: 5px;
  min-width: 0; min-height: 64px; padding: 7px; overflow: hidden;
  font-size: 11px; font-weight: 700; color: #3B3F4A;
  background: #fff; border-radius: 12px;
  box-shadow: inset 0 0 0 1.5px #E7D9C2;
}
.pwa-pic svg { width: 19px; height: 19px; flex: none; }
.pwa-bar { display: flex; align-items: center; justify-content: space-between; padding: 6px 4px; color: #2F7BF6; background: #F2F2F4; border-radius: 9px; }
.pwa-bar span { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 50%; }
.pwa-addr { gap: 4px; color: #3B3F4A; }
.pwa-url { display: block !important; flex: 1 1 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 22px; width: auto !important; height: 22px !important; padding: 0 6px; place-items: center start !important; font-size: 10px; color: #6B7080; background: #fff; border-radius: 11px !important; }
.pwa-list { display: grid; gap: 2px; padding: 3px; background: #F2F2F4; border-radius: 9px; }
.pwa-list div { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 6px; background: #fff; border-radius: 6px; }
.pwa-list div span { order: -1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pwa-top { display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px 2px; font-size: 10.5px; color: #2F7BF6; }
.pwa-top strong { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; text-align: center; color: #3B3F4A; font-size: 10px; white-space: nowrap; }
.pwa-top span { flex: none; padding: 2px 4px; white-space: nowrap; border-radius: 6px; }
.pwa-app { display: flex; align-items: center; gap: 7px; padding: 4px; color: #3B3F4A; }
.pwa-app .pwa-appicon { width: 30px; height: 30px; border-radius: 8px; }
.pwa-app span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pwa-app .pwa-pill { flex: none; min-width: auto; overflow: visible; margin-right: 4px; padding: 4px 9px; color: #fff; background: #1A73E8; border-radius: 999px; }

.pwa-hit { position: relative; box-shadow: 0 0 0 2.5px #FF6B57; animation: pwa-pulse 1.4s ease-in-out infinite; }
.pwa-list .pwa-hit { color: #D9483A; background: #FFF0EC; }
@keyframes pwa-pulse { 50% { box-shadow: 0 0 0 5px rgba(255, 107, 87, .35); } }

.pwa-close {
  display: block; width: 100%; min-height: 52px; padding: 10px;
  font-family: inherit; font-size: 18px; font-weight: 800; line-height: 1.2;
  color: #fff; background: #FF6B57; border: 0; border-radius: 16px;
  box-shadow: 0 4px 0 #D9483A; cursor: pointer; touch-action: manipulation;
}
.pwa-close:active { transform: translateY(3px); box-shadow: 0 1px 0 #D9483A; }
.pwa-close:focus-visible { outline: 3px solid #2A2358; outline-offset: 2px; }

@media (max-width: 350px) {
  .pwa-steps li { grid-template-columns: 112px 1fr; }
  .pwa-steps p { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .pwa-sheet, .pwa-panel, .pwa-hit { animation: none; }
}