/* ============================================================
   8akeryy AI Photobooth — kiosk styles (iPad portrait 기준)
   메인 사이트 style.css 팔레트/톤을 그대로 계승
   ink #3E3216 · cream #F7EDD2 · sage #C9D2CA · pink #EFD3D7
   ============================================================ */
:root{
  --bg:#FFFFFF;
  --cream:#F7EDD2;
  --sage:#C9D2CA;
  --pink:#EFD3D7;
  --pink-deep:#CD8E96;
  --ink:#3E3216;
  --ink-soft:#8C7C5C;
  --line:#E9E0CC;
  --card:#FFFFFF;
  --shadow:rgba(62,50,22,.08);
}
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;}
body{
  background:var(--bg);color:var(--ink);
  font-family:"Pretendard",sans-serif;-webkit-font-smoothing:antialiased;
  overflow:hidden;                       /* 키오스크: 스크롤 잠금 */
  touch-action:manipulation;             /* 더블탭 줌 방지 */
  -webkit-user-select:none;user-select:none;
  -webkit-touch-callout:none;
  display:flex;flex-direction:column;
}
h1,h2,h3{font-weight:800;letter-spacing:-.03em;}
::selection{background:var(--pink);color:var(--ink);}
button{font-family:inherit;cursor:pointer;}

.accent{background:linear-gradient(transparent 56%, var(--pink) 56%);padding:0 .06em;border-radius:2px;font-style:normal;}
.eyebrow{font-size:12px;letter-spacing:.3em;text-transform:uppercase;color:var(--pink-deep);font-weight:700;margin-bottom:18px;}

/* stripe motif — 메인 사이트 패키징 모티프 */
.stripe{
  background-color:#FFFFFF;
  background-image:
    repeating-linear-gradient(90deg, var(--sage) 0 11px, transparent 11px 30px),
    repeating-linear-gradient(90deg, var(--pink) 20px 23px, transparent 23px 30px);
}
.stripe-band{height:10px;}

/* ---------- 프레임 공통 ---------- */
.booth-top{
  flex:none;display:flex;align-items:center;justify-content:center;gap:12px;
  padding:calc(14px + env(safe-area-inset-top)) 20px 14px;
  border-bottom:1px solid var(--line);background:rgba(255,255,255,.9);
}
.booth-logo{height:26px;display:block;}
.booth-top-label{font-size:11px;letter-spacing:.26em;text-transform:uppercase;color:var(--ink-soft);font-weight:700;}
.booth-foot{flex:none;}

.booth{flex:1;position:relative;overflow:hidden;}
.screen{
  position:absolute;inset:0;display:none;
  align-items:center;justify-content:center;
  padding:clamp(18px,3vh,40px) clamp(20px,5vw,64px);
  overflow:hidden;
}
.screen.is-active{display:flex;}

/* ---------- 버튼 ---------- */
.btn-big{
  display:inline-block;border-radius:999px;font-weight:700;letter-spacing:-.01em;
  font-size:clamp(16px,2.2vw,20px);padding:clamp(15px,2vh,20px) clamp(28px,4vw,44px);
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  transition:transform .25s,background .3s,color .3s,opacity .3s;
  min-height:56px;                       /* 터치 타깃 */
}
.btn-big:active{transform:scale(.97);}
.btn-big.fill{background:var(--ink);color:var(--bg);}
.btn-big.fill:active{background:var(--pink);color:var(--ink);border-color:var(--pink);}
.btn-big.ghost{border-color:var(--line);color:var(--ink-soft);}
.btn-big:disabled{opacity:.35;pointer-events:none;}

/* ════════ 1. 시작 화면 ════════ */
.screen-start{text-align:center;}
.start-inner{max-width:640px;width:100%;}
.start-title{font-size:clamp(34px,6.5vw,64px);line-height:1.12;}
.start-title .ln{display:block;overflow:hidden;padding-bottom:.08em;}
.start-title .ln > span{display:inline-block;transform:translateY(110%);animation:lnUp .95s cubic-bezier(.2,.75,.2,1) forwards;}
.start-title .ln:nth-child(1) > span{animation-delay:.1s;}
.start-title .ln:nth-child(2) > span{animation-delay:.26s;}
@keyframes lnUp{to{transform:translateY(0);}}
.start-desc{margin-top:22px;font-size:clamp(14px,1.8vw,17px);line-height:1.9;color:var(--ink-soft);font-weight:300;}

.start-preview{
  margin:clamp(24px,4vh,44px) auto;display:flex;align-items:center;justify-content:center;
  gap:clamp(12px,2.5vw,26px);
}
.prev-card{width:clamp(120px,17vw,180px);}
.prev-card .prev-ph,.prev-card img{
  width:100%;aspect-ratio:4/5;border-radius:18px;border:1px solid var(--line);
  object-fit:cover;display:flex;align-items:center;justify-content:center;
  background:var(--cream);box-shadow:0 18px 26px -18px var(--shadow);
}
.prev-emoji{font-size:44px;}
.prev-card figcaption{margin-top:10px;font-size:12.5px;font-weight:700;color:var(--ink-soft);}
.prev-arrow{font-size:clamp(22px,3vw,32px);color:var(--pink-deep);font-weight:800;animation:nudge 1.6s ease-in-out infinite;}
@keyframes nudge{0%,100%{transform:translateX(0);}50%{transform:translateX(6px);}}
.prev-after img{background:#fff;}

#btnStart{margin-top:6px;}
.start-hint{margin-top:16px;font-size:12.5px;color:var(--ink-soft);font-weight:300;}

/* ════════ 2. 동의 화면 ════════ */
.panel{
  width:min(620px,100%);background:var(--card);border:1px solid var(--line);
  border-radius:24px;padding:clamp(28px,4vw,48px);
  box-shadow:0 30px 50px -34px var(--shadow);
}
.panel h2{font-size:clamp(26px,4vw,38px);line-height:1.25;margin-bottom:26px;}
.consent-item{
  display:flex;gap:14px;align-items:flex-start;
  border:1.5px solid var(--line);border-radius:18px;
  padding:18px 20px;margin-bottom:14px;transition:border-color .25s,background .25s;
}
.consent-item:has(input:checked){border-color:var(--pink-deep);background:#FFF9F9;}
.consent-item input{position:absolute;opacity:0;pointer-events:none;}
.ck-box{
  flex:none;width:28px;height:28px;border-radius:9px;border:2px solid var(--line);
  background:#fff;position:relative;margin-top:2px;transition:all .2s;
}
.consent-item:has(input:checked) .ck-box{background:var(--pink-deep);border-color:var(--pink-deep);}
.consent-item:has(input:checked) .ck-box::after{
  content:"";position:absolute;left:9px;top:4px;width:7px;height:13px;
  border:solid #fff;border-width:0 3px 3px 0;transform:rotate(42deg);
}
.ck-text{font-size:14px;line-height:1.7;color:var(--ink-soft);font-weight:300;}
.ck-text strong{display:block;font-size:15.5px;color:var(--ink);font-weight:700;margin-bottom:4px;}
.ck-text em{font-style:normal;font-size:10.5px;font-weight:700;letter-spacing:.08em;border-radius:999px;padding:3px 9px;vertical-align:2px;margin-left:6px;}
.ck-text em.req{background:var(--pink);color:var(--ink);}
.ck-text em.opt{background:var(--cream);color:var(--ink-soft);}
.panel-actions{display:flex;gap:12px;justify-content:space-between;margin-top:26px;flex-wrap:wrap;}
.panel-actions .fill{flex:1;}

/* ════════ 3. 카메라 화면 ════════ */
.cam-wrap{width:min(560px,100%);text-align:center;display:flex;flex-direction:column;align-items:center;max-height:100%;}
.cam-title{font-size:clamp(22px,3.4vw,32px);margin-bottom:18px;}
.cam-stage{
  position:relative;width:min(100%, calc((100vh - 340px) * .8));
  aspect-ratio:4/5;border-radius:24px;overflow:hidden;
  background:var(--cream);border:1px solid var(--line);
  box-shadow:0 30px 50px -30px var(--shadow);
}
.cam-stage video,.cam-stage #camShot{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
}
.cam-stage video{transform:scaleX(-1);}          /* 셀피 미러 */
.cam-frame{
  position:absolute;inset:14px;border:2px dashed rgba(205,142,150,.55);
  border-radius:16px;pointer-events:none;
}
.cam-count{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  background:rgba(62,50,22,.18);backdrop-filter:blur(2px);
}
.cam-count span{
  font-size:clamp(90px,18vw,150px);font-weight:800;color:#fff;
  text-shadow:0 8px 30px rgba(62,50,22,.45);
}
.cam-flash{position:absolute;inset:0;background:#fff;opacity:0;pointer-events:none;}
.cam-error{
  position:absolute;inset:0;display:flex;flex-direction:column;gap:18px;
  align-items:center;justify-content:center;background:var(--cream);padding:30px;
}
.cam-error p{font-size:16px;font-weight:700;line-height:1.7;}
.cam-error small{font-weight:300;color:var(--ink-soft);}
[hidden]{display:none !important;}

.cam-controls{
  margin-top:clamp(16px,2.5vh,26px);display:flex;align-items:center;gap:14px;
  width:100%;justify-content:space-between;
}
.cam-controls-spacer{width:96px;}
.btn-shutter{
  width:84px;height:84px;border-radius:50%;border:none;background:none;position:relative;flex:none;
}
.shutter-ring{position:absolute;inset:0;border-radius:50%;border:4px solid var(--ink);}
.shutter-dot{
  position:absolute;inset:10px;border-radius:50%;background:var(--pink-deep);
  transition:transform .15s;
}
.btn-shutter:active .shutter-dot{transform:scale(.86);}

/* ════════ 4. 처리 중 화면 ════════ */
.screen-processing{text-align:center;background:linear-gradient(180deg,#fff 0%,var(--cream) 140%);}
.proc-inner{max-width:480px;width:100%;}
.oven-box{
  width:min(300px,60vw);aspect-ratio:1/1;margin:0 auto 34px;position:relative;
  border:1px solid var(--line);border-radius:24px;background:#fff;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.oven-glow{
  position:absolute;width:80%;height:80%;border-radius:50%;
  background:radial-gradient(circle,rgba(239,211,215,.85),transparent 70%);
  animation:glowPulse 2.2s ease-in-out infinite;
}
@keyframes glowPulse{0%,100%{transform:scale(.9);opacity:.6;}50%{transform:scale(1.12);opacity:1;}}
.oven-dogs{position:relative;display:flex;gap:10px;font-size:52px;}
.oven-dogs .dog{display:inline-block;animation:dogBounce 1.4s ease-in-out infinite;}
.oven-dogs .d2{animation-delay:.18s;}
.oven-dogs .d3{animation-delay:.36s;}
@keyframes dogBounce{0%,100%{transform:translateY(0);}40%{transform:translateY(-16px);}}
.paw-loader{position:absolute;bottom:22px;display:flex;gap:10px;}
.paw-loader span{
  width:10px;height:10px;border-radius:50%;background:var(--pink-deep);opacity:.25;
  animation:pawBlink 1.2s infinite;
}
.paw-loader span:nth-child(2){animation-delay:.15s;}
.paw-loader span:nth-child(3){animation-delay:.3s;}
.paw-loader span:nth-child(4){animation-delay:.45s;}
@keyframes pawBlink{0%,100%{opacity:.25;}40%{opacity:1;}}
.proc-title{font-size:clamp(26px,4.4vw,40px);}
.proc-msg{margin-top:14px;font-size:15px;color:var(--ink-soft);font-weight:300;min-height:1.6em;transition:opacity .3s;}
.proc-bar{
  margin:26px auto 0;width:min(320px,70%);height:8px;border-radius:999px;
  background:var(--line);overflow:hidden;
}
.proc-bar-fill{width:0%;height:100%;border-radius:999px;background:linear-gradient(90deg,var(--pink) 0%,var(--pink-deep) 100%);transition:width .5s ease;}

/* ════════ 5. 결과 화면 ════════ */
.screen-result{text-align:center;}
.result-inner{width:min(760px,100%);max-height:100%;display:flex;flex-direction:column;align-items:center;}
.result-title{font-size:clamp(24px,4vw,38px);line-height:1.25;margin-bottom:clamp(18px,3vh,30px);}
.result-body{
  display:flex;gap:clamp(20px,4vw,40px);align-items:center;justify-content:center;
  width:100%;flex-wrap:wrap;
}
.result-card{
  width:min(340px, 42vw);flex:none;border-radius:24px;overflow:hidden;
  border:1px solid var(--line);box-shadow:0 34px 60px -34px rgba(62,50,22,.3);
  background:var(--cream);
}
.result-card img{width:100%;aspect-ratio:4/5;object-fit:cover;display:block;}
.result-side{display:flex;flex-direction:column;align-items:center;gap:18px;}
.qr-card{
  background:#fff;border:1px solid var(--line);border-radius:20px;
  padding:20px 24px;display:flex;flex-direction:column;align-items:center;gap:12px;
  box-shadow:0 22px 36px -26px var(--shadow);
}
.qr-box{width:150px;height:150px;display:flex;align-items:center;justify-content:center;}
.qr-box img,.qr-box canvas{width:150px !important;height:150px !important;image-rendering:pixelated;}
.qr-label{font-size:13px;line-height:1.6;color:var(--ink-soft);font-weight:300;}
.qr-label strong{color:var(--ink);font-weight:700;}
.result-timer{font-size:12px;color:var(--ink-soft);font-weight:300;}

/* 세로가 짧은 화면(가로 모드 등) 보정 */
@media (max-height:700px){
  .start-preview{margin:16px auto;}
  .prev-card{width:110px;}
  .oven-box{width:200px;margin-bottom:20px;}
}