/* =====================================================================
   FFFF · 흐름 화면(2026-10-19): 로그인 → 사진 → 사주 정보 → 날 고르기 → 그날의 사주
   - 웹(body.web, 데스크톱 폭): 세로로 이어진 화면, 스크롤 허용.
   - 앱(body.app, 모바일 폭·네이티브 래퍼·홈 화면 설치): 화면마다 꽉 찬 한 장, 스크롤 없음. .pg 페이지를 아래 ‹ · › 버튼이나 스와이프로 넘긴다.
   - 기준 기기: iPhone 17 (402×874pt). 다른 크기는 맞추지 않는다(사용자 결정 2026-10-19).
   apple.css 위에 덮는다.
   ===================================================================== */

/* ---------- 앱 모드: 로그인 화면만 스크롤 없이 한 장(사용자 결정 2026-10-20). 나머지 화면은 평소처럼 세로 스크롤 ---------- */
body.app[data-view=home] { height: 100vh; height: 100dvh; overflow: hidden; }
body.app[data-view=home] main { max-width: none; padding: 0; height: 100%; }
body.app[data-view=home] #view-home.on { position: relative; height: 100%; overflow: hidden; animation: none; }
.pgr { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 44px; padding: 0 2px; }
.pgr[hidden] { display: none; }
.pgr-prev, .pgr-next { width: 44px; height: 40px; border: 0; border-radius: 12px; background: #fff; color: var(--text); font: inherit; font-size: 24px; line-height: 1; cursor: pointer; box-shadow: var(--shadow-s); }
.pgr-prev:disabled, .pgr-next:disabled { opacity: .25; cursor: default; }
.pgr-dots { display: flex; gap: 7px; align-items: center; }
.pgr-dots button { width: 7px; height: 7px; padding: 0; border: 0; border-radius: 50%; background: #c7c7cc; cursor: pointer; transition: width .3s, background .3s; }
.pgr-dots button[aria-selected=true] { width: 22px; border-radius: 4px; background: var(--text); }
body.web .pgr { display: none; }
body[data-view=pick] .top, body[data-view=pick] nav { display: none; }
body[data-view=pick] main { max-width: none; padding: 0; }
body[data-view=pick] .dev-chip { display: none; }
body.app[data-view=home] .dev-chip { display: none; }

/* ---------- 로그인: 앱(슬라이드 한 화면) ---------- */
.al { display: none; }
body.app .al { display: flex; flex-direction: column; position: absolute; inset: 0; padding: calc(14px + env(safe-area-inset-top)) 22px calc(18px + env(safe-area-inset-bottom)); background: #fff; }
body.app #view-home .hm-hero, body.app #view-home .hm-sec, body.app #view-home .hm-final, body.app #view-home .hm-foot { display: none; }
body.app[data-view=home] .top { display: none; }
.al-top { display: flex; align-items: baseline; gap: 10px; height: 36px; flex: none; }
.al-top .wm { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.al-slogan { font-size: 12px; color: var(--muted); }
.al-slides { flex: 1; min-height: 0; position: relative; }
body.app #view-home .al-slide { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 0; opacity: 0; visibility: hidden; pointer-events: none; transform: translateX(44px); transition: opacity .4s cubic-bezier(.16,1,.3,1), transform .5s cubic-bezier(.16,1,.3,1), visibility 0s .4s; }
body.app #view-home .al-slide.pg-l { transform: translateX(-44px); }
body.app #view-home .al-slide.pg-on { opacity: 1; visibility: visible; pointer-events: auto; transform: none; transition-delay: 0s; }
.al-title { font-family: var(--display); font-size: clamp(40px, 12vw, 56px); font-weight: 800; letter-spacing: -.05em; line-height: 1.04; margin: 0 0 16px; background: var(--rainbow); background-size: 200% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .06em; }
.al-title .w, .al-title .wi { background: inherit; -webkit-background-clip: text; background-clip: text; }
.al-sub { font-size: 16px; line-height: 1.5; color: var(--muted); margin: 0; max-width: 320px; }
.al .hm-eyebrow { font-size: 15px; margin-bottom: 10px; }
.al-card { width: min(100%, 320px); transform: scale(.92); transform-origin: top center; }
.al-card .s-score b { font-size: 64px; }
.al-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; width: 100%; max-width: 340px; text-align: left; }
.al-steps li { display: grid; grid-template-columns: 34px 1fr; gap: 12px; align-items: start; background: var(--bg); border-radius: 16px; padding: 12px 14px; }
.al-steps li b { width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: #fff; display: grid; place-items: center; font-family: var(--display); font-weight: 700; }
.al-steps li span { font-size: 14px; color: var(--muted); line-height: 1.4; }
.al-steps li strong { display: block; color: var(--text); font-weight: 600; margin-bottom: 2px; }
.al-foot { flex: none; display: flex; flex-direction: column; align-items: center; gap: 10px; padding-top: 10px; }
.al-pgr { flex: none; }
.al-foot .g-btn { width: 100%; justify-content: center; padding: 15px 20px; }
.al-guest { font-size: 15px; color: var(--link); text-decoration: none; }
.al-foot .hm-note { margin: 0; font-size: 12px; text-align: center; }
.al-foot .hm-note a { color: var(--muted); }
.hm-guest { color: var(--muted); }

/* ---------- 설정 도우미: 사진 단계 + 앱에서 꽉 찬 한 화면 ---------- */
.ob-photo { display: grid; justify-items: center; gap: 14px; }
.ob-frame { position: relative; width: min(60vw, 240px); aspect-ratio: 1; border-radius: 28px; background: var(--bg); overflow: hidden; display: grid; place-items: center; }
.ob-frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .4s; }
.ob-photo.has .ob-frame img { opacity: 1; } .ob-photo.has .ob-ph { display: none; }
.ob-ph { font-size: 72px; line-height: 1; }
.ob-photo-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; justify-content: center; }
.ob-cam { height: 46px; padding: 0 22px; border: 0; border-radius: 999px; background: var(--text); color: #fff; font: inherit; font-size: 16px; font-weight: 600; cursor: pointer; }
.ob-cam:active { transform: scale(.98); }
.ob-photo .ob-ghost { margin-top: 0; }
.ob-photo .ob-picked { margin: 0; text-align: center; }
body.app .ob-q { font-size: clamp(26px, 7.4vw, 34px); } body.app .ob-hint { font-size: 15px; margin-bottom: 22px; }

/* ---------- 사주 타입 선택 ---------- */
#view-pick { background: #fff; min-height: 100vh; min-height: 100svh; }
.pk { max-width: 600px; margin: 0 auto; min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; padding: calc(18px + env(safe-area-inset-top)) 24px calc(28px + env(safe-area-inset-bottom)); }
.pk-top { display: flex; align-items: center; justify-content: space-between; height: 44px; flex: none; }
.pk-top .wm { font-family: var(--display); font-weight: 700; font-size: 17px; letter-spacing: .04em; }
.pk-me { font-size: 15px; color: var(--link); text-decoration: none; }
.pk-body { flex: 1; min-height: 0; display: flex; flex-direction: column; justify-content: center; padding: 4vh 0 2vh; }
.pk-q { font-family: var(--display); font-size: clamp(30px, 4vw + 12px, 44px); font-weight: 700; letter-spacing: -.035em; line-height: 1.12; margin: 0 0 10px; }
body.app .pk-q { font-size: clamp(26px, 7.4vw, 34px); }
.pk-hint { font-size: 15px; color: var(--muted); margin: 0 0 26px; min-height: 1.4em; }
.pk-choice { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.pk-card { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; text-align: left; min-height: 150px; padding: 18px 18px 16px; border-radius: 22px; border: 2px solid transparent; background: var(--bg); font: inherit; color: var(--text); cursor: pointer; transition: border-color .2s, background .2s, transform .2s; }
.pk-card:hover { background: #ededf0; } .pk-card:active { transform: scale(.98); }
.pk-card.on { border-color: var(--blue); background: var(--blue-s); }
.pk-k { font-family: var(--display); font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.pk-card b { font-size: 15px; font-weight: 600; color: var(--blue); }
.pk-card:not(.on) b { color: var(--muted); }
.pk-d { margin-top: auto; font-size: 13px; color: var(--muted); line-height: 1.35; }
.pk-date { margin-top: 14px; display: grid; gap: 10px; } .pk-date[hidden] { display: none; }
.pk-date .ob-input { font-size: 20px; }
.pk-quick { display: flex; gap: 8px; flex-wrap: wrap; }
.pk-quick button { border: 0; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; font-weight: 500; padding: 8px 14px; border-radius: 999px; cursor: pointer; }
.pk-quick button.on { background: var(--text); color: #fff; }
.pk-photo { margin: 18px 0 0; display: flex; gap: 8px; flex-wrap: wrap; min-height: 30px; }
.pk-st { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 13px; font-weight: 500; padding: 6px 12px; border-radius: 999px; background: var(--bg); color: var(--muted); border: 0; text-decoration: none; cursor: default; }
.pk-st.ok { background: #e6f6ec; color: #1f7a3f; } .pk-st.run { background: var(--blue-s); color: var(--blue); } .pk-st.fail { background: #fdecec; color: #b3261e; }
.pk-st.run::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: pkblink 1s infinite alternate; }
@keyframes pkblink { to { opacity: .2; } }
.pk-st.wait, .pk-st.none { cursor: pointer; }
.pk .ob-foot { flex: none; }
@media (max-width: 420px) { .pk-choice { grid-template-columns: 1fr; } .pk-card { min-height: 0; } .pk-d { margin-top: 2px; } }

/* ---------- 그날의 사주: 머리 ---------- */
.td-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 0 18px; }
.td-eyebrow { margin: 0 0 2px; font-size: 13px; font-weight: 500; color: var(--muted); }
.td-eyebrow #td-label { color: var(--blue); font-weight: 600; }
.td-title { font-family: var(--display); font-size: 34px; font-weight: 700; letter-spacing: -.035em; line-height: 1.1; margin: 0; }
.td-change { font-size: 14px; color: var(--link); text-decoration: none; white-space: nowrap; padding-bottom: 6px; }
body.app .td-title { font-size: 28px; }