/* 여덟 번째 아침 — 폰 UI (A안 클린 리얼) */

.p8-root {
  position: relative;
  height: 100%;
  max-width: 430px;
  margin: 0 auto;
  overflow: hidden;
  background: #000;
  font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo',
    'Pretendard', system-ui, sans-serif;
  -webkit-font-smoothing: antialiased;
  user-select: none;
  -webkit-user-select: none;
  color: #17181c;
}
@media (min-width: 520px) {
  .p8-root {
    height: calc(100% - 24px);
    margin-top: 12px;
    border-radius: 34px;
    box-shadow: 0 0 0 8px #16171c, 0 18px 60px rgba(0, 0, 0, .55);
  }
}

.p8-screen {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #f4f5f7;
  display: flex;
  flex-direction: column;
}
.p8-overlay { position: absolute; inset: 0; z-index: 40; }

.p8-wall {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
}

/* 상태바 · 다이나믹 아일랜드 */
.p8-statusbar {
  position: relative; z-index: 3;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 24px 4px;
  font-size: 14px; font-weight: 700;
  flex: none;
}
.p8-sb-right { display: inline-flex; align-items: center; gap: 6px; }
.p8-island {
  position: absolute; top: 9px; left: 50%; transform: translateX(-50%);
  width: 96px; height: 26px; border-radius: 15px; background: #000;
  z-index: 5; pointer-events: none;
}

/* 공통 버튼 */
.p8-btn {
  font: inherit; font-size: 15.5px; font-weight: 700;
  border: 0; border-radius: 13px;
  padding: 13px 20px;
  background: #2f6fed; color: #fff;
  cursor: pointer;
}
.p8-btn:active { filter: brightness(.88); }
.p8-btn.secondary { background: rgba(120, 126, 140, .18); color: #17181c; }

/* ── 화면 전환 ── */
.p8-screen.p8-in { animation: p8-sc-in .26s ease; }
@keyframes p8-sc-in {
  from { opacity: .35; transform: scale(.985); }
  to { opacity: 1; transform: scale(1); }
}

/* ── 부팅 ── */
.p8-boot {
  background: radial-gradient(130% 100% at 50% 40%, #0a0d16 0%, #05060a 70%);
  align-items: center; justify-content: center;
}
.p8-boot-inner { display: flex; flex-direction: column; align-items: center; width: 100%; }
.p8-ecg {
  width: 96%; max-width: 380px; height: auto;
  transition: opacity 1s;
}
.p8-ecg.dim { opacity: .3; }
.p8-boot-name {
  margin-top: 2px;
  font-size: 14px; letter-spacing: .9em; text-indent: .9em;
  color: #e8ecf4; opacity: 0; font-weight: 600;
  transition: opacity 1s ease, letter-spacing 1.4s cubic-bezier(.2, .6, .2, 1),
    text-indent 1.4s cubic-bezier(.2, .6, .2, 1);
  white-space: nowrap;
}
.p8-boot-name.on { opacity: .95; letter-spacing: .4em; text-indent: .4em; }
.p8-boot-rule {
  margin-top: 14px; width: 0; height: 1px;
  background: linear-gradient(90deg, transparent, #5a6a96, transparent);
  transition: width 1.3s ease .25s, opacity 1s;
  opacity: 0;
}
.p8-boot-rule.on { width: 168px; opacity: 1; }

/* ── 타이틀 ── */
.p8-title {
  background:
    radial-gradient(120% 90% at 50% 0%, #223052 0%, #101322 58%, #08090f 100%);
  align-items: center; justify-content: center;
  position: absolute;
}
.p8-title-dawn {
  position: absolute; left: 0; right: 0; bottom: 0; height: 46%;
  background: radial-gradient(130% 100% at 50% 108%, rgba(214, 150, 96, .34) 0%, rgba(150, 108, 92, .12) 45%, transparent 72%);
  animation: p8-dawn 7s ease-in-out infinite;
  pointer-events: none;
}
@keyframes p8-dawn {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}
.p8-title-wrap { text-align: center; padding: 0 30px; position: relative; }
.p8-title-sub {
  color: #8e96ac; font-size: 13px; letter-spacing: .2em; text-indent: .2em;
  margin-bottom: 14px;
  animation: p8-rise .8s ease both;
}
.p8-title-name {
  color: #f2f4fa; font-size: 35px; font-weight: 800; letter-spacing: .06em;
  text-shadow: 0 0 38px rgba(150, 176, 255, .3), 0 2px 4px rgba(0, 0, 0, .4);
  animation: p8-rise .8s ease .08s both;
}
.p8-title-days {
  display: flex; justify-content: center; gap: 9px;
  margin: 22px 0 34px;
  animation: p8-rise .8s ease .16s both;
}
.p8-title-days i {
  width: 7px; height: 7px; border-radius: 50%; background: #3d475f;
}
.p8-title-days i.last {
  background: #d86a52;
  box-shadow: 0 0 8px rgba(216, 106, 82, .55);
}
@keyframes p8-rise {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.p8-title .p8-start {
  min-width: 190px;
  animation: p8-rise .8s ease .24s both;
  box-shadow: 0 8px 26px rgba(47, 111, 237, .35);
}
.p8-title-day { margin-top: 20px; color: #6b7188; font-size: 12.5px; animation: p8-rise .8s ease .3s both; }
.p8-title-brand {
  position: absolute; left: 0; right: 0;
  bottom: calc(18px + env(safe-area-inset-bottom, 0px));
  text-align: center;
  font-size: 9.5px; font-weight: 600; color: #454f68;
  letter-spacing: .34em; text-indent: .34em;
}

/* ── 잠금화면 ── */
.p8-lock { background: #101322; }
.p8-daychip {
  position: absolute; top: 46px; left: 50%; transform: translateX(-50%);
  z-index: 3;
  font-size: 11.5px; font-weight: 700; letter-spacing: .1em;
  color: rgba(255, 255, 255, .82);
  background: rgba(20, 24, 36, .42);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 999px; padding: 4px 12px;
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.p8-lock-clock {
  position: relative; z-index: 2;
  text-align: center; color: #fff; margin-top: 66px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .35);
}
.p8-lock-date { font-size: 16px; font-weight: 600; opacity: .94; }
.p8-lock-time { font-size: 76px; font-weight: 600; line-height: 1.06; letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.p8-alarm-card {
  position: relative; z-index: 2;
  margin: 26px 22px 0;
  background: rgba(24, 28, 40, .55);
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 20px;
  padding: 18px 18px 16px;
  text-align: center; color: #fff;
  animation: p8-alarm-wobble 1s ease-in-out infinite;
}
@keyframes p8-alarm-wobble {
  0%, 100% { transform: translateX(0); }
  12% { transform: translateX(-3px); }
  24% { transform: translateX(3px); }
  36% { transform: translateX(-2px); }
  48% { transform: translateX(0); }
}
.p8-alarm-label { font-size: 12.5px; opacity: .75; letter-spacing: .14em; }
.p8-alarm-time { font-size: 34px; font-weight: 700; margin: 4px 0 12px; }
.p8-alarm-off { width: 100%; }
.p8-notifs {
  position: relative; z-index: 2;
  margin: 20px 16px 0; display: flex; flex-direction: column; gap: 9px;
  overflow-y: auto;
}
.p8-notif {
  background: rgba(240, 242, 248, .82);
  backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border-radius: 17px; padding: 11px 14px;
  color: #1a1c24;
}
.p8-notif.danger { background: rgba(255, 238, 234, .92); }
.p8-notif-head {
  display: flex; justify-content: space-between;
  font-size: 11px; color: #6a7080; margin-bottom: 3px;
}
.p8-notif-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 2.5px;
  margin-right: 5px; vertical-align: -1px;
}
.p8-notif-title { font-size: 13.5px; font-weight: 700; }
.p8-notif-body { font-size: 13px; line-height: 1.45; margin-top: 1px; }
.p8-lock-quick {
  position: absolute; z-index: 3; bottom: 26px;
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(24, 28, 40, .5);
  border: 1px solid rgba(255, 255, 255, .16);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: inline-flex; align-items: center; justify-content: center;
}
.p8-lock-quick.left { left: 26px; }
.p8-lock-quick.right { right: 26px; }
.p8-unlock::before {
  content: '';
  display: block; margin: 0 auto 5px;
  width: 8px; height: 8px;
  border-left: 2px solid rgba(255, 255, 255, .85);
  border-top: 2px solid rgba(255, 255, 255, .85);
  transform: rotate(45deg);
  animation: p8-chev 1.8s ease-in-out infinite;
}
@keyframes p8-chev {
  0%, 100% { translate: 0 0; opacity: .55; }
  50% { translate: 0 -3px; opacity: 1; }
}
.p8-unlock {
  position: absolute; z-index: 3; left: 50%; bottom: 30px; transform: translateX(-50%);
  font: inherit; font-size: 14px; font-weight: 600;
  color: #fff; background: rgba(20, 24, 36, .4);
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px; padding: 11px 26px;
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  cursor: pointer;
}

/* ── 홈 ── */
.p8-home { background: #101322; }
.p8-grid {
  position: relative; z-index: 2;
  margin-top: 54px;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 18px 6px; padding: 0 16px;
  align-content: start;
  flex: 1;
}
.p8-app {
  border: 0; background: none; padding: 0; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  font: inherit;
}
.p8-app:active .p8-appicon { transform: scale(.92); }
.p8-appicon {
  position: relative;
  width: 58px; height: 58px; border-radius: 14px;
  display: inline-flex; align-items: center; justify-content: center;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -1px 0 rgba(0, 0, 0, .12),
    0 4px 10px rgba(0, 0, 0, .28);
  transition: transform .12s;
}
.p8-badge {
  position: absolute; top: -6px; right: -8px;
  min-width: 20px; height: 20px; border-radius: 10px;
  background: #e5382c; color: #fff;
  font-size: 11px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 5px; box-sizing: border-box;
}
.p8-appname {
  font-size: 11.5px; font-weight: 600; color: #fff;
  text-shadow: 0 1px 5px rgba(0, 0, 0, .55);
}
.p8-judge {
  position: relative; z-index: 3;
  display: flex; gap: 10px;
  padding: 12px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  background: linear-gradient(180deg, rgba(10, 12, 20, 0), rgba(10, 12, 20, .55) 46%);
  flex: none;
}
.p8-judge .p8-btn { flex: 1; padding: 15px 8px; font-size: 16px; transition: transform .1s; }
.p8-judge .p8-btn:active { transform: scale(.965); }
.p8-judge .p8-btn.secondary {
  background: rgba(235, 238, 246, .92); color: #17181c;
}

/* ── 판정 페이드/암전/플래시 ── */
.p8-fade {
  background: #000; opacity: 0; transition: opacity .85s ease;
  z-index: 60;
}
.p8-fade.slow { transition-duration: 1.3s; }
.p8-fade.on { opacity: 1; }
.p8-fade.p8-fadeout { opacity: 0; transition: opacity .7s ease; }
.p8-fade.p8-black { opacity: 1; transition: none; }
.p8-daycard {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 9px;
  opacity: 0; transform: translateY(7px);
  transition: opacity .6s ease, transform .6s ease;
}
.p8-daycard.on { opacity: 1; transform: translateY(0); }
.p8-dc-n { color: #eef1f8; font-size: 27px; font-weight: 800; letter-spacing: .1em; text-indent: .1em; }
.p8-dc-d { color: #79819a; font-size: 13.5px; letter-spacing: .06em; }
.p8-blackout { background: #000; z-index: 70; }
.p8-flash {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  color: #ff2b20; font-size: 30px; font-weight: 800; letter-spacing: .04em;
  text-shadow: 0 0 24px rgba(255, 43, 32, .55);
  animation: p8-flashjit .09s steps(2) infinite;
}
@keyframes p8-flashjit {
  0% { transform: translate(0, 0); }
  50% { transform: translate(1.5px, -1px); }
  100% { transform: translate(-1px, 1px); }
}

/* ── 실시간 이벤트: 재난문자 배너 ── */
.p8-alertbanner {
  z-index: 50;
  background: rgba(8, 9, 13, .45);
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 52px;
}
.p8-alert-box {
  width: calc(100% - 28px); box-sizing: border-box;
  background: #fdfdfe; border-radius: 18px;
  padding: 14px 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}
.p8-alert-tag {
  font-size: 11.5px; font-weight: 800; color: #d43a2e;
  letter-spacing: .06em; margin-bottom: 6px;
}
.p8-alert-body { font-size: 13.5px; line-height: 1.55; }
.p8-alert-ok { width: 100%; margin-top: 12px; }
.p8-shake { animation: p8-shake .5s ease; }
@keyframes p8-shake {
  0%, 100% { transform: translateX(0); }
  15% { transform: translateX(-7px); }
  30% { transform: translateX(6px); }
  45% { transform: translateX(-5px); }
  60% { transform: translateX(4px); }
  75% { transform: translateX(-2px); }
}

/* ── 전화 수신 ── */
.p8-call {
  z-index: 55;
  background:
    radial-gradient(120% 70% at 50% 0%, #232c44 0%, #141927 55%, #0b0e18 100%);
  display: flex; flex-direction: column;
  align-items: center; justify-content: space-between;
  padding: 74px 0 60px;
}
.p8-call-top { text-align: center; color: #fff; }
.p8-call-ava {
  width: 88px; height: 88px; border-radius: 50%;
  margin: 0 auto 18px;
  background: linear-gradient(180deg, #7c8598, #59627a);
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; font-weight: 700; color: #f2f4fa;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .4);
}
.p8-call-name { font-size: 30px; font-weight: 700; }
.p8-call-sub { margin-top: 8px; font-size: 14.5px; color: #9aa2b8; }
.p8-call-sub b { color: #fff; font-weight: 800; }
.p8-call-minor {
  display: flex; gap: 56px;
  font-size: 12.5px; color: #8a92aa;
}
.p8-call-actions { display: flex; gap: 78px; }
.p8-call-act {
  display: flex; flex-direction: column; align-items: center; gap: 9px;
}
.p8-call-act em { font-style: normal; font-size: 12.5px; color: #aeb5c8; }
.p8-call-btn {
  width: 68px; height: 68px; border-radius: 50%; border: 0;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
}
.p8-call-btn.accept { background: #34c257; animation: p8-callpulse 1.2s ease infinite; }
.p8-call-btn.decline { background: #e5382c; }
@keyframes p8-callpulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 194, 87, .5); }
  60% { box-shadow: 0 0 0 16px rgba(52, 194, 87, 0); }
}
.p8-ars-caption {
  position: absolute; left: 24px; right: 24px; bottom: 170px;
  text-align: center; color: #c6ccdd; font-size: 14px; line-height: 1.6;
}

/* ── 앱 공통 ── */
.p8-app-screen { background: #f4f5f7; }
.p8-app-head {
  flex: none;
  display: flex; align-items: center; gap: 2px;
  padding: 6px 10px 8px;
  background: rgba(248, 249, 251, .92);
  border-bottom: 1px solid #e3e5ea;
}
.p8-back {
  border: 0; background: none; padding: 6px; cursor: pointer;
  display: inline-flex;
}
.p8-back.light {
  position: absolute; top: 46px; left: 10px; z-index: 3;
  background: rgba(10, 12, 18, .4); border-radius: 50%;
}
.p8-app-title { font-size: 17.5px; font-weight: 800; }
.p8-app-body { flex: 1; overflow-y: auto; padding: 12px 14px 90px; }

.p8-sec-title {
  font-size: 12.5px; font-weight: 800; color: #82889a;
  letter-spacing: .05em;
  margin: 16px 4px 7px;
}
.p8-sec-title:first-child { margin-top: 2px; }
.p8-list {
  background: #fff; border-radius: 15px; overflow: hidden;
}
.p8-row {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 14px;
  border: 0; background: none; font: inherit; text-align: left;
  cursor: pointer;
  color: inherit;
}
.p8-row + .p8-row { border-top: 1px solid #eff0f3; }
button.p8-row:active { background: #f2f3f6; }
.p8-ava {
  flex: none;
  width: 42px; height: 42px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 15px; font-weight: 700;
}
.p8-ava.default { background: #aab0bd; }
.p8-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.p8-row-t { font-size: 15px; font-weight: 700; }
.p8-row-s {
  font-size: 13px; color: #6d7383;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p8-row-when { flex: none; font-size: 12px; color: #9298a6; }

/* ── 대화(문자·AI) ── */
.p8-thread .p8-app-body, .p8-ai .p8-app-body {
  display: flex; flex-direction: column; padding-bottom: 12px;
}
.p8-thread-list {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column; gap: 7px;
  padding: 6px 2px;
}
.p8-bub {
  max-width: 76%;
  padding: 9px 13px; border-radius: 18px;
  font-size: 14.5px; line-height: 1.45;
  word-break: break-word;
}
.p8-bub.them {
  align-self: flex-start;
  background: #e9eaee; border-bottom-left-radius: 6px;
}
.p8-bub.me {
  align-self: flex-end;
  background: #2f6fed; color: #fff; border-bottom-right-radius: 6px;
}
.p8-bmeta { font-size: 10.5px; color: #98a0b0; margin-top: -3px; }
.p8-bmeta.me { align-self: flex-end; }
.p8-bmeta.them { align-self: flex-start; }
.p8-bday {
  align-self: center; font-size: 11px; color: #9aa0ae; margin: 8px 0 2px;
}
.p8-inputbar {
  flex: none; margin-top: 8px;
  background: #fff; border: 1px solid #e0e2e8; border-radius: 999px;
  padding: 10px 16px;
}
.p8-fakeinput { font-size: 14px; color: #a2a8b6; }
.p8-ai-tail { font-size: 12px; color: #8087b0; }
.p8-ai .p8-bub.them { background: #eceafd; }
.p8-typing { display: inline-flex; gap: 4px; align-items: center; min-height: 12px; }
.p8-typing i {
  width: 6px; height: 6px; border-radius: 50%; background: #9a92d6;
  animation: p8-typing 1s ease-in-out infinite;
}
.p8-typing i:nth-child(2) { animation-delay: .16s; }
.p8-typing i:nth-child(3) { animation-delay: .32s; }
@keyframes p8-typing {
  0%, 60%, 100% { transform: translateY(0); opacity: .55; }
  30% { transform: translateY(-3.5px); opacity: 1; }
}
.p8-ai-chips {
  flex: none; display: flex; gap: 8px; margin-top: 10px;
  overflow-x: auto; padding-bottom: 2px;
}
.p8-ai-chips .p8-chip { flex: none; }
.p8-chip {
  font: inherit; font-size: 13px; font-weight: 600;
  border: 1px solid #d8dbe6; border-radius: 999px;
  background: #fff; padding: 8px 13px; cursor: pointer;
  color: #3d4b8f;
}

/* ── 메일 ── */
.p8-mail-row { align-items: flex-start; }
.p8-unread {
  flex: none; width: 8px; height: 8px; border-radius: 50%;
  margin-top: 6px; background: transparent;
}
.p8-unread.on { background: #2f6fed; }
.p8-mail-subj-s { font-size: 13.5px; font-weight: 600; color: #3c4150; }
.p8-mail-view-full { background: #fff; border-radius: 15px; padding: 16px 16px 20px; }
.p8-mail-subj { font-size: 17px; font-weight: 800; line-height: 1.35; }
.p8-mail-fromline {
  display: flex; gap: 10px; align-items: center;
  margin: 13px 0 14px; padding-bottom: 13px;
  border-bottom: 1px solid #eff0f3;
}
.p8-mail-fromtx { display: flex; flex-direction: column; gap: 1px; font-size: 12px; color: #82889a; }
.p8-mail-fromtx b { font-size: 13.5px; color: #17181c; }
.p8-mail-meta { font-size: 12.5px; color: #82889a; margin: 5px 0 13px; }
.p8-mail-text { font-size: 14.5px; line-height: 1.7; }
.p8-mail-foot { font-size: 12px; color: #9298a6; }

/* ── 뉴스 ── */
.p8-banner {
  background: #fff; border-radius: 13px;
  padding: 11px 14px; font-size: 12.5px; color: #6d7383;
}
.p8-banner.ritual { color: #4e4638; background: #f6efe2; }
.p8-newslist { background: #fff; border-radius: 15px; overflow: hidden; }
.p8-newsitem {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px 13px;
}
.p8-newsitem + .p8-newsitem { border-top: 1px solid #eff0f3; }
.p8-newsitem.archive { background: #fff; border-radius: 15px; }
.p8-news-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.p8-news-h { font-size: 13.5px; font-weight: 600; line-height: 1.42; }
.p8-news-meta { font-size: 11px; color: #9298a6; }
.p8-thumb { flex: none; width: 92px; border-radius: 8px; display: block; }
.p8-newsitem.archive .p8-thumb { width: 112px; }
.p8-thumb.gaze .eye { transform: translateY(-1.6px); }
.p8-fortune, .p8-obit {
  background: #fff; border-radius: 13px; padding: 12px 14px; font-size: 14px;
}

/* ── 갤러리 ── */
.p8-selfie-btn { width: 100%; margin-bottom: 4px; }
.p8-photos {
  display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
.p8-photos.bw img, .p8-photos.bw svg,
.p8-photoview.bw img, .p8-photoview.bw svg { filter: grayscale(1) contrast(1.05); }
.p8-photo {
  margin: 0; padding: 0; border: 0; background: none; font: inherit;
  text-align: left; cursor: pointer; color: inherit;
  display: flex; flex-direction: column; gap: 4px;
}
.p8-photo:active .p8-photo-fr { filter: brightness(.86); }
.p8-photo-fr {
  display: block; border-radius: 10px; overflow: hidden; background: #dfe1e6;
  aspect-ratio: 4/3;
}
.p8-photo-fr img, .p8-photo-fr svg {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.p8-photo-fr img { opacity: 0; transition: opacity .25s; }
.p8-photo-fr img.p8-img-on { opacity: 1; }
.p8-photo-cap { font-size: 11.5px; color: #82889a; }

/* 사진 전체화면 뷰어 */
.p8-photoview { background: #08090c; }
.p8-pv-stage {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 76px 0 64px; box-sizing: border-box;
}
.p8-pv-img, .p8-pv-stage svg {
  max-width: 100%; max-height: 100%;
  width: auto; height: auto;
  object-fit: contain;
}
.p8-pv-stage svg { width: 100%; }
.p8-pv-cap {
  position: absolute; left: 0; right: 0; bottom: 22px;
  text-align: center; color: #b9c0d0; font-size: 12.5px;
}
img.p8-img-dead { visibility: hidden; }

/* 셀카 — 자산에 카메라 UI 포함: 전체 표시 (contain, 크롭 금지) */
.p8-selfie { background: #000; }
.p8-selfie-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain;
}
.p8-shot47 {
  position: relative;
  border-radius: 14px; overflow: hidden;
  background: linear-gradient(180deg, #2a3350, #131828);
  color: #fff; padding: 4px 0 14px; text-align: center;
}
.p8-shot47 .p8-statusbar { position: static; }
.p8-shot47-time { font-size: 40px; font-weight: 700; margin-top: 8px; }
.p8-shot47-n { font-size: 12.5px; opacity: .8; margin-top: 3px; }

/* ── 앱스토어 ── */
.p8-store-head { display: flex; gap: 14px; align-items: flex-start; }
.p8-store-icon {
  flex: none; width: 72px; height: 72px; border-radius: 17px; overflow: hidden;
  box-shadow: 0 4px 12px rgba(20, 27, 48, .28);
}
.p8-store-icon svg { display: block; }
.p8-store-hd { flex: 1; position: relative; }
.p8-store-name { font-size: 18px; font-weight: 800; }
.p8-store-dev { font-size: 13px; color: #6d7383; margin-top: 2px; }
.p8-store-rate {
  display: flex; align-items: center; gap: 6px;
  font-size: 12px; color: #82889a; margin-top: 5px;
}
.p8-store-get {
  position: absolute; right: 0; top: 2px;
  padding: 6px 18px; font-size: 13.5px; border-radius: 999px;
}
.p8-stars { position: relative; display: inline-block; height: 13px; line-height: 0; }
.p8-stars .p8-star { width: 13px; height: 13px; }
.p8-stars-off { color: #c9cdd8; }
.p8-stars-off .p8-star, .p8-stars-on .p8-star { fill: currentColor; }
.p8-stars-on {
  position: absolute; left: 0; top: 0; overflow: hidden; white-space: nowrap;
  color: #f5a623;
}
.p8-inforow {
  display: flex; margin-top: 14px;
  background: #fff; border-radius: 13px; padding: 10px 4px;
}
.p8-inforow span {
  flex: 1; text-align: center;
  font-size: 10.5px; color: #82889a;
  display: flex; flex-direction: column; gap: 2px;
}
.p8-inforow span + span { border-left: 1px solid #eff0f3; }
.p8-inforow b { font-size: 14px; color: #3c4150; }
.p8-store-sub { font-size: 13.5px; color: #4a4f5c; margin-top: 14px; }
.p8-shots {
  display: flex; gap: 10px; overflow-x: auto; margin-top: 12px;
  padding-bottom: 4px;
}
.p8-shot { flex: none; display: flex; flex-direction: column; gap: 6px; }
.p8-shot-cap { font-size: 11px; color: #82889a; text-align: center; }
/* 미니 폰 목업 */
.p8-mini {
  position: relative;
  width: 122px; height: 224px; border-radius: 16px;
  border: 3px solid #23252e;
  background:
    radial-gradient(120% 80% at 50% 0%, #24335a 0%, #131829 62%, #0b0e18 100%);
  box-sizing: border-box; overflow: hidden;
  color: #eef1f8;
  display: flex; flex-direction: column; align-items: center;
}
.p8-mini-notch {
  width: 34px; height: 9px; border-radius: 6px; background: #05060a;
  margin-top: 5px; flex: none;
}
.p8-mini-date { font-size: 8px; opacity: .85; margin-top: 22px; }
.p8-mini-clock { font-size: 30px; font-weight: 700; line-height: 1.1; }
.p8-mini-chip {
  width: calc(100% - 16px); box-sizing: border-box;
  background: rgba(240, 243, 250, .88); color: #23252e;
  border-radius: 8px; padding: 5px 7px; margin-top: 7px;
  font-size: 6.5px; line-height: 1.35; text-align: left;
}
.p8-mini-chip b { display: block; font-size: 7px; }
.p8-mini-grid {
  display: grid; grid-template-columns: repeat(4, 18px); gap: 9px;
  margin-top: 26px;
}
.p8-mini-grid i { width: 18px; height: 18px; border-radius: 5px; display: block; }
.p8-mini-btns {
  margin-top: auto; margin-bottom: 12px;
  display: flex; gap: 6px; width: calc(100% - 20px);
}
.p8-mini-btns i {
  flex: 1; height: 18px; border-radius: 6px; background: rgba(238, 241, 248, .9);
}
.p8-mini-btns i.b { background: #2f6fed; }
.p8-mini-copy {
  margin-top: 74px; text-align: center;
  font-size: 11px; font-weight: 700; line-height: 1.5; letter-spacing: .02em;
}
.p8-mini-days { display: flex; gap: 5px; margin-top: 16px; }
.p8-mini-days i { width: 7px; height: 7px; border-radius: 50%; background: #55617f; }
.p8-mini-days i.last { background: #e3574a; }
/* VHS 스크린샷 (STORE-01) */
.p8-shot.vhs .p8-mini { filter: sepia(.45) contrast(1.12) saturate(.72); }
.p8-vhs-lines {
  position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .07) 0 1px, transparent 1px 3px);
}
.p8-vhs-tc {
  position: absolute; right: 6px; bottom: 6px;
  font-family: monospace; font-size: 8px; color: #efe6cf;
  text-shadow: 0 0 4px rgba(239, 230, 207, .8);
}
.p8-review {
  background: #fff; border-radius: 13px; padding: 12px 14px;
  font-size: 13.5px; line-height: 1.5; margin-bottom: 9px;
}
.p8-rv-head { font-size: 12px; font-weight: 800; color: #82889a; margin-bottom: 4px; }
.p8-rv-reply {
  margin-top: 8px; padding: 8px 11px;
  background: #f2f3f6; border-radius: 9px;
  font-size: 12.5px; color: #4a4f5c;
}
.p8-review.gone .p8-rv-reply { margin-top: 0; }

/* ── 메모 ── */
.p8-note { background: #fff; border-radius: 13px; padding: 12px 14px; margin-bottom: 9px; }
.p8-note-t { font-size: 14.5px; font-weight: 800; margin-bottom: 4px; }
.p8-note-b { font-size: 13.5px; color: #4a4f5c; line-height: 1.6; }

/* ── 지도 ── */
.p8-map-search {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border-radius: 999px;
  padding: 10px 15px; margin-bottom: 10px;
  font-size: 13.5px; color: #a2a8b6;
  box-shadow: 0 1px 4px rgba(30, 34, 48, .06);
}
.p8-map-wrap {
  border-radius: 15px; overflow: hidden;
  box-shadow: 0 1px 5px rgba(30, 34, 48, .08);
}
.p8-map { width: 100%; display: block; }
.p8-route {
  background: #fff; border-radius: 13px; padding: 12px 14px;
}
.p8-route-line {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 14px; font-weight: 700;
}
.p8-route-dot {
  width: 9px; height: 9px; border-radius: 50%; background: #2f6fed;
}
.p8-route-arrow {
  width: 14px; height: 2px; background: #c3c8d4; position: relative;
}
.p8-route-arrow::after {
  content: ''; position: absolute; right: -1px; top: -2.5px;
  border-left: 5px solid #c3c8d4;
  border-top: 3.5px solid transparent; border-bottom: 3.5px solid transparent;
}
.p8-route-meta { font-size: 12px; color: #6d7383; margin-top: 6px; }

/* ── 시계 ── */
.p8-sleepcard { background: #fff; border-radius: 13px; padding: 12px 14px; }
.p8-sleepcard svg { width: 100%; display: block; margin-bottom: 2px; }
.p8-sleep-axis {
  display: flex; justify-content: space-between;
  font-size: 10px; color: #a2a8b6; margin-bottom: 7px; padding: 0 2px;
}
.p8-clock-t { font-size: 26px; font-weight: 300; color: #3c4150; }
.p8-toggle {
  flex: none; width: 46px; height: 28px; border-radius: 15px;
  background: #d5d8e0; position: relative; transition: background .15s;
}
.p8-toggle.on { background: #46c15e; }
.p8-toggle i {
  position: absolute; top: 2px; left: 2px;
  width: 24px; height: 24px; border-radius: 50%; background: #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
  transition: left .15s;
}
.p8-toggle.on i { left: 20px; }
.p8-note-sub { font-size: 11px; color: #a2a8b6; margin: -2px 0 5px; }

/* ── 설정 ── */
.p8-set-row {
  width: 100%; box-sizing: border-box;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  background: #fff; border-radius: 13px;
  padding: 13px 15px; margin-bottom: 8px;
  font-size: 14.5px; font-weight: 600; text-align: left;
  border: 0; font-family: inherit; color: inherit;
}
button.p8-set-row { cursor: pointer; }
button.p8-set-row:active { background: #f2f3f6; }
.p8-set-row.dis { color: #a2a8b6; }
.p8-set-row.unknown { letter-spacing: .04em; }
.p8-set-row.danger { color: #d43a2e; }
.p8-check { font-size: 12.5px; font-weight: 700; color: #2f6fed; }
.p8-set-foot {
  text-align: center; font-size: 11.5px; color: #a2a8b6; margin-top: 18px;
}

/* ── 도감 ── */
.p8-dex-head {
  display: flex; align-items: center; gap: 12px;
  background: #fff; border-radius: 13px;
  padding: 13px 15px; margin-bottom: 10px;
}
.p8-dex-n { font-size: 19px; font-weight: 800; white-space: nowrap; }
.p8-dex-n em { font-style: normal; font-size: 13px; color: #9298a6; font-weight: 700; }
.p8-dex-prog {
  flex: 1; height: 7px; border-radius: 4px; background: #e9eaee; overflow: hidden;
}
.p8-dex-prog i {
  display: block; height: 100%; border-radius: 4px;
  background: linear-gradient(90deg, #2f6fed, #6a9bff);
}
.p8-dex { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.p8-dex-item {
  background: #fff; border-radius: 13px; padding: 12px 13px;
  min-height: 64px; box-sizing: border-box;
}
.p8-dex-item.locked {
  background: #e9eaee; color: #a2a8b6;
  display: flex; align-items: center; justify-content: center;
}
.p8-dex-t { font-size: 13.5px; font-weight: 800; }
.p8-dex-f { font-size: 11.5px; color: #6d7383; margin-top: 4px; line-height: 1.45; }

/* ── 모달 ── */
.p8-modal {
  z-index: 65;
  background: rgba(8, 9, 13, .42);
  display: flex; align-items: center; justify-content: center;
  padding: 0 26px;
}
.p8-modal-box {
  width: 100%; background: #fdfdfe; border-radius: 18px;
  padding: 20px 18px 16px;
  box-shadow: 0 16px 44px rgba(0, 0, 0, .4);
}
.p8-modal-t { font-size: 15px; line-height: 1.55; margin-bottom: 15px; }
.p8-modal-row { display: flex; gap: 9px; }
.p8-modal-row .p8-btn { flex: 1; }
.p8-modal-box > .p8-btn { width: 100%; }

/* ── 배드엔딩 메일 ── */
.p8-mail-ending { background: #f4f5f7; }
.p8-mail-ending .p8-mail-body {
  flex: 1; overflow-y: auto; padding: 16px 18px;
}
.p8-inputblock { z-index: 80; background: transparent; }
.p8-endlogo {
  position: relative;
  margin-top: 46px; padding: 10px 0 90px;
  text-align: center;
  font-size: 17px; font-weight: 700; letter-spacing: .3em;
  color: #23252e;
}
.p8-endlogo .p8-lg { display: inline-block; will-change: transform; }
.p8-endlogo.p8-ghost {
  position: absolute; left: 0; right: 0; margin-top: 0;
  transform: translateY(-100%);
  visibility: hidden; pointer-events: none;
}

/* ── 트루엔딩 ── */
.p8-eyelid {
  position: absolute; inset: 0; opacity: 0;
  background:
    radial-gradient(85% 60% at 50% 46%, #ffd9b0 0%, #b06a3a 42%, #300f08 78%, #000 100%);
}
.p8-whiteout {
  position: absolute; inset: 0;
  background: #fff; opacity: 0; transition: opacity 1.4s ease;
}
.p8-whiteout.on { opacity: 1; }
.p8-black { background: #000; }
.p8-overlay.p8-fadeblack::after {
  content: '';
  position: absolute; inset: 0; background: #000;
  animation: p8-toblack 3s ease forwards;
}
@keyframes p8-toblack { from { opacity: 0; } to { opacity: 1; } }
.p8-room {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, #0d1018 0%, #151a26 55%, #0c0e15 100%);
  animation: p8-roomin 2.2s ease forwards;
}
@keyframes p8-roomin { from { opacity: 0; } to { opacity: 1; } }
.p8-curtain {
  position: absolute; top: 0; left: 14%; width: 34%; height: 62%;
  background: linear-gradient(100deg, rgba(96, 116, 168, .16) 0%, rgba(50, 62, 96, .05) 70%);
  filter: blur(2px);
}
.p8-miniphone {
  position: absolute; left: 50%; bottom: 24%;
  transform: translateX(-50%) rotate(-8deg);
  width: 54px; height: 110px; border-radius: 10px;
  background: #05060a;
  box-shadow: 0 3px 14px rgba(0, 0, 0, .6), 0 0 26px rgba(150, 176, 255, .12);
}
.p8-mini-screen {
  position: absolute; inset: 3px; border-radius: 8px;
  background: #131a2c;
  display: flex; align-items: center; justify-content: center;
  transition: opacity .12s;
}
.p8-mini-screen.off { opacity: 0; }
.p8-mini-time { color: #dfe6f8; font-size: 13px; font-weight: 700; }

/* ── 라이브 연출 레이어 ── */
.p8-fxdefs { position: absolute; width: 0; height: 0; overflow: hidden; }
.p8-film {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 46;
}