html, body { overflow: hidden; overscroll-behavior: none; touch-action: manipulation; -webkit-user-select: none; user-select: none; }
.screen { position: fixed; inset: 0; display: flex; flex-direction: column; background: #fff; }

.sheet { aspect-ratio: 2 / 3; background: #EEF1F5; border-radius: 6px; box-shadow: 0 14px 40px rgba(10, 42, 79, .16); max-width: 100%; max-height: 100%; }

/* 상단 막대 */
.bar { display: flex; align-items: center; gap: 16px; padding: 16px 24px; border-bottom: 1.5px solid var(--line); }
.bar h2 { flex: 1; margin: 0; font-size: clamp(22px, 3vw, 32px); text-align: center; }
.step { font-weight: 700; color: var(--muted); min-width: 92px; text-align: right; }

/* 1. 대기 */
#attract { flex-direction: row; align-items: center; justify-content: center; gap: 6vw; padding: 5vh 6vw; cursor: pointer; }
.attract-copy { max-width: 560px; }
.eyebrow { margin: 0 0 14px; font-weight: 800; color: var(--accent); font-size: 22px; }
.attract-copy h1 { margin: 0 0 20px; font-size: clamp(44px, 6vw, 72px); line-height: 1.15; letter-spacing: -.02em; }
.lead { margin: 0 0 34px; font-size: clamp(18px, 2vw, 22px); line-height: 1.6; color: var(--muted); }
.attract-art { height: min(78vh, 760px); display: flex; align-items: center; }
.attract-art canvas { height: 100%; width: auto; aspect-ratio: 2/3; border-radius: 6px; box-shadow: 0 24px 60px rgba(10, 42, 79, .2); transform: rotate(2.5deg); transition: opacity .5s ease; }
#startBtn { animation: breathe 2.4s ease-in-out infinite; }
@keyframes breathe { 50% { transform: scale(1.04); } }

/* 2. 프레임 고르기 */
.choose-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr minmax(300px, 34%); grid-template-rows: minmax(0, 1fr); }
.frame-list { overflow-y: auto; padding: 24px; display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 18px; align-content: start; -webkit-overflow-scrolling: touch; }
.frame-card { border: 3px solid transparent; border-radius: 16px; padding: 10px; background: var(--soft); display: grid; gap: 8px; text-align: center; transition: border-color .15s ease, transform .12s ease; }
.frame-card canvas { width: 100%; aspect-ratio: 2/3; border-radius: 4px; background: #fff; }
.frame-card b { font-size: 16px; }
.frame-card small { color: var(--muted); font-size: 13px; }
.frame-card.on { border-color: var(--accent); background: #fff; box-shadow: 0 8px 24px rgba(18, 122, 130, .18); }
.frame-card:active { transform: scale(.97); }
.layout-head { grid-column: 1 / -1; margin: 10px 0 -4px; font-size: 20px; }
.layout-head small { font-weight: 400; color: var(--muted); font-size: 15px; margin-left: 8px; }
.choose-side { border-left: 1.5px solid var(--line); padding: 24px; display: flex; flex-direction: column; align-items: center; gap: 16px; min-height: 0; }
.choose-side .sheet { flex: 1; min-height: 0; height: 100%; width: auto; }
.frame-name { margin: 0; font-weight: 800; font-size: 20px; }
.copies { display: flex; align-items: center; gap: 16px; font-weight: 700; font-size: 18px; }
.stepper { display: flex; align-items: center; border: 2px solid var(--line); border-radius: 999px; overflow: hidden; }
.stepper button { width: 60px; height: 56px; border: 0; background: #fff; font-size: 30px; font-weight: 700; }
.stepper b { min-width: 48px; text-align: center; font-size: 26px; }
#goShoot { width: 100%; }

/* 3. 촬영 */
#shoot { background: #000; }
#cam { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
#cam.mirror { transform: scaleX(-1); }
.shoot-top { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 22px 28px; color: #fff; font-size: 24px; font-weight: 700; background: linear-gradient(rgba(0,0,0,.45), transparent); }
.shoot-top b { font-size: 34px; background: rgba(0,0,0,.35); padding: 6px 18px; border-radius: 999px; }
.countdown { position: absolute; inset: 0; display: grid; place-items: center; color: #fff; font-weight: 800; font-size: min(42vh, 40vw); text-shadow: 0 8px 40px rgba(0,0,0,.45); pointer-events: none; }
.countdown.pop { animation: pop .9s ease-out; }
.countdown small { font-size: 6vh; }
@keyframes pop { from { transform: scale(1.35); opacity: 0; } 25% { opacity: 1; } to { transform: scale(.9); opacity: .9; } }
.flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.flash.go { animation: flash .45s ease-out; }
@keyframes flash { from { opacity: 1; } to { opacity: 0; } }
.shoot-thumbs { position: absolute; left: 0; right: 0; bottom: 0; display: flex; gap: 10px; justify-content: center; padding: 18px; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.shoot-thumbs canvas { height: 76px; border: 3px solid #fff; border-radius: 6px; }

/* 4. 사진 고르기 */
.pick-body { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(240px, 34%) 1fr; grid-template-rows: minmax(0, 1fr); gap: 0; }
.pick-body > .sheet { margin: 24px auto; height: calc(100% - 48px); width: auto; }
.pick-side { border-left: 1.5px solid var(--line); padding: 20px 24px 0; display: flex; flex-direction: column; gap: 14px; min-height: 0; overflow: hidden; }
.pick-help { margin: 0; font-size: 19px; font-weight: 700; }
.pick-help em { font-style: normal; color: var(--accent); }
.takes { flex: 1 1 0; min-height: 90px; overflow-y: auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; align-content: start; -webkit-overflow-scrolling: touch; }
.take { position: relative; border: 4px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: var(--soft); }
.take canvas { display: block; width: 100%; height: auto; }
.take.on { border-color: var(--accent); }
.take i { position: absolute; top: 8px; left: 8px; width: 40px; height: 40px; border-radius: 50%; background: var(--accent); color: #fff; font-style: normal; font-weight: 800; font-size: 22px; display: grid; place-items: center; }
.take:not(.on) i { display: none; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; }
.filters button { min-height: 50px; padding: 0 22px; border-radius: 999px; border: 2px solid var(--line); background: #fff; font-weight: 700; font-size: 17px; }
.filters button.on { border-color: var(--ink); background: var(--ink); color: #fff; }
/* 아래 고정 막대: 사진이 많아도 늘 보인다 */
.pick-actions { flex: none; display: flex; gap: 12px; padding: 14px 0 20px; border-top: 1.5px solid var(--line); background: #fff; }
.pick-actions .ai-btn { flex: 1; }
.pick-actions #finishBtn { flex: 1.4; }
.pick-actions .ai-btn.hidden + #finishBtn { flex: 1; }
.filters { flex: none; }
.pick-help { flex: none; }

/* 5. 완성 */
.done-body { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 6vw; padding: 4vh 5vw; }
.done-body .sheet { height: 100%; width: auto; animation: rise .7s cubic-bezier(.16,1,.3,1); }
@keyframes rise { from { transform: translateY(40px) scale(.94); opacity: 0; } }
.done-side { max-width: 420px; display: flex; flex-direction: column; gap: 20px; }
.done-side h2 { margin: 0; font-size: clamp(34px, 4.4vw, 52px); }
.done-side .lead { margin: 0; }
.qr { display: flex; align-items: center; gap: 18px; padding: 16px; border: 1.5px solid var(--line); border-radius: 18px; }
.qr img { width: 160px; height: 160px; image-rendering: pixelated; }
.qr p { margin: 0; font-size: 18px; line-height: 1.5; }

/* 세로로 세운 태블릿 */
@media (orientation: portrait) {
  #attract { flex-direction: column-reverse; gap: 4vh; text-align: center; }
  .attract-art { height: 46vh; }
  .choose-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .choose-side { border-left: 0; border-top: 1.5px solid var(--line); flex-direction: row; flex-wrap: wrap; justify-content: center; }
  .choose-side .sheet { height: 26vh; flex: none; }
  #goShoot { width: auto; }
  .pick-body { grid-template-columns: 1fr; grid-template-rows: minmax(0, 40%) minmax(0, 1fr); }
  .pick-side { border-left: 0; border-top: 1.5px solid var(--line); }
  .done-body { flex-direction: column; gap: 2.5vh; padding: 3vh 5vw; }
  .done-body .sheet { height: 44vh; }
  .done-side { gap: 14px; }
}

/* 숨은 설정 */
#secret { position: fixed; top: 0; left: 0; width: 64px; height: 64px; opacity: 0; border: 0; z-index: 50; }
#settings { border: 0; border-radius: 20px; padding: 28px; width: min(520px, 92vw); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
#settings h3 { margin: 0 0 18px; font-size: 24px; }
#settings .row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.check { display: flex; gap: 10px; align-items: center; font-weight: 700; font-size: 18px; }
.check input { width: 24px; height: 24px; }
.pending { color: var(--warm); font-weight: 700; margin: 14px 0 0; }

/* AI 변신 */
.ai-btn { min-height: 76px; font-size: 21px; border: 2.5px solid var(--accent); color: var(--accent); background: #fff; }
.ai-btn small { font-weight: 700; color: var(--muted); font-size: 15px; }
.take .ai-tag { position: absolute; right: 8px; bottom: 8px; background: var(--ink); color: #fff; font-weight: 800; font-size: 13px; padding: 4px 10px; border-radius: 999px; }
#aiDialog { border: 0; border-radius: 24px; padding: 30px 30px 0; overflow-y: auto; overscroll-behavior: contain; width: min(880px, 94vw); max-height: 92vh; box-shadow: 0 30px 80px rgba(0,0,0,.25); }
#aiDialog::backdrop { background: rgba(10, 42, 79, .45); }
#aiDialog h3 { margin: 0 0 14px; font-size: 28px; }
#aiDialog .row { display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap; margin-top: 20px; position: sticky; bottom: 0; background: #fff; padding: 14px 0 24px; }
.ai-q { margin: 18px 0 10px; font-weight: 700; font-size: 19px; color: var(--muted); }
.ai-photos { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 4px; }
.ai-photos button { flex: none; width: 170px; border: 4px solid transparent; border-radius: 12px; padding: 0; overflow: hidden; background: var(--soft); position: relative; }
.ai-photos button canvas { display: block; width: 100%; height: auto; }
.ai-photos button.on { border-color: var(--accent); }
.ai-photos button b { position: absolute; top: 6px; left: 6px; width: 32px; height: 32px; border-radius: 50%; background: rgba(10,42,79,.8); color: #fff; display: grid; place-items: center; font-size: 17px; }
.ai-photos button { width: 140px; }
.ai-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 10px; }
.ai-styles h4 { grid-column: 1 / -1; margin: 6px 0 -2px; font-size: 16px; color: var(--ink); }
.ai-styles button { text-align: left; border: 2.5px solid var(--line); border-radius: 14px; background: #fff; padding: 14px 16px; display: grid; gap: 4px; }
.ai-styles button b { font-size: 18px; }
.ai-styles button small { color: var(--muted); font-size: 14px; }
.ai-styles button.on { border-color: var(--accent); background: rgba(18,122,130,.06); }
.ai-notice { margin: 18px 0 0; font-size: 15px; color: var(--muted); }
.ai-wait { position: relative; width: min(420px, 80%); margin: 0 auto 20px; border-radius: 14px; overflow: hidden; }
.ai-wait canvas { display: block; width: 100%; height: auto; filter: saturate(.6) brightness(1.05); }
.ai-wait i { position: absolute; inset: 0; background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.65) 50%, transparent 70%); background-size: 250% 100%; animation: sweep 1.6s ease-in-out infinite; }
@keyframes sweep { from { background-position: 120% 0; } to { background-position: -120% 0; } }
#aiWaitStep { text-align: center; }
#aiWaitStep .row { justify-content: center; }
.ai-compare { display: flex; align-items: center; gap: 16px; }
.ai-compare figure { flex: 1; margin: 0; }
.ai-compare canvas { width: 100%; height: auto; border-radius: 12px; display: block; }
.ai-compare figcaption { text-align: center; font-weight: 700; margin-top: 8px; color: var(--muted); }
.ai-compare figure:last-child figcaption { color: var(--accent); }
.ai-arrow { width: 40px; height: 40px; color: var(--accent); flex: none; }
@media (orientation: portrait) { .ai-compare { flex-direction: column; } .ai-arrow { transform: rotate(90deg); } }

/* 세로가 낮은 창(노트북 크롬): 사진 미리보기와 칸을 줄인다 */
@media (orientation: landscape) and (max-height: 760px) {
  .bar { padding: 10px 20px; }
  .bar .btn { min-height: 46px; }
  .pick-body > .sheet { margin: 14px auto; height: calc(100% - 28px); }
  .filters button { min-height: 42px; }
  .pick-actions { padding: 10px 0 14px; }
  .pick-actions .btn.big, .ai-btn { min-height: 62px; font-size: 20px; }
  .pick-help { font-size: 17px; }
}
@media (max-width: 700px) { .pick-actions { flex-direction: column; } }