html,body{margin:0;height:100%;background:#0d1230;overflow:hidden;font-family:"Pretendard",system-ui,sans-serif;}
@keyframes spin{to{transform:rotate(360deg);}}
@keyframes cardIn{0%,15%{transform:translateY(135px) scale(1);}60%,100%{transform:translateY(-10px) scale(0.8);}}
@keyframes alertBlink{0%,100%{opacity:.12;}50%{opacity:1;}}
@keyframes ssBlink{0%,100%{opacity:.45;}50%{opacity:1;}}
#screensaver{position:absolute;inset:0;z-index:3000;display:none;flex-direction:column;align-items:center;justify-content:center;gap:64px;background:#111318;overflow:hidden;cursor:pointer;}
/* qr_pay 폰 목업 애니메이션 (디자인 5-1 QR·바코드 결제) */
@keyframes qrShow{0%,18%{opacity:0;}23%,100%{opacity:1;}}
@keyframes beamSweep{0%,30%{top:6%;opacity:0;}34%{top:6%;opacity:1;}55%{top:90%;}76%{top:6%;}97%,100%{top:90%;opacity:1;}}
@keyframes tapA{0%,10%{opacity:0;transform:scale(0.4);}14%{opacity:1;transform:scale(1);}20%,100%{opacity:0;transform:scale(1.35);}}
@keyframes tapB{0%,27%{opacity:0;transform:scale(0.4);}31%{opacity:1;transform:scale(1);}37%,100%{opacity:0;transform:scale(1.35);}}
#viewport{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;}
#stage{position:relative;width:1080px;height:1920px;flex:none;transform-origin:center center;--bg:#FFFFFF;--sub:#F6F6F6;--line:#E7E7E7;--bd:#D1D1D1;--tx:#1A1A1A;--tb:#262626;--ts:#5D5D5D;--ac:#F5A438;--onAc:#1A1A1A;--acSoft:#FDE8C4;--acBadge:#FCC93C;--warn:#D41515;--btnBd:#3D3D3D;--fill:#3D3D3D;--btnBg:#FFFFFF;--chip:#F6F6F6;--shBtn:rgba(0,0,0,.25) 0 -6px 0 0 inset,rgba(0,0,0,.2) 0 1px 2px 0;--shCta:#E08A1E 0 -10px 0 0 inset,rgba(0,0,0,.3) 0 6px 15px 0;--sh:rgba(0,0,0,.3) 0 0 20px 0;--selBg:#FDE8C4;--selNum:#E08A1E;--logoFilter:none;}
body.hc #stage{--bg:#000000;--sub:#151515;--line:#4A4A4A;--bd:#B0B0B0;--tx:#FFFFFF;--tb:#FFFFFF;--ts:#D1D1D1;--ac:#F8DA29;--onAc:#000000;--acSoft:#262626;--acBadge:#F8DA29;--warn:#FFA0A0;--btnBd:#FFFFFF;--fill:#FFFFFF;--btnBg:#000000;--chip:#262626;--shBtn:none;--shCta:none;--sh:none;--selBg:#3A2E0E;--selNum:#F8DA29;--logoFilter:invert(1);}
.screen{position:absolute;inset:0;display:none;}
.screen.active{display:block;}
/* 실 input placeholder = 밝은 회색(var(--ts)) — restock/signup 등 하드코딩 예시값 제거 후 통일 */
#stage input::placeholder{color:var(--ts);opacity:1;}
/* scan hint */
.scanhint{position:absolute;right:26px;bottom:120px;z-index:50;background:var(--ac);color:var(--onAc);
 border:none;border-radius:14px;padding:16px 22px;font:700 26px "Pretendard";cursor:pointer;box-shadow:var(--shCta);}
/* interactions.js — modal overlay (바코드 없는 상품 / 비닐 봉투) */
.ix-modal{position:absolute;inset:0;background:rgba(0,0,0,.5);display:flex;align-items:center;justify-content:center;z-index:2000;}
.ix-card{background:var(--bg);color:var(--tx);border:2px solid var(--line);border-radius:20px;box-shadow:var(--sh);padding:40px;width:860px;max-width:92%;}
.ix-card-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:30px;}
.ix-title{font-size:42px;font-weight:700;color:var(--tx);}
.ix-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;}
.ix-item{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;height:112px;border:2px solid var(--btnBd);border-radius:14px;background:var(--btnBg);color:var(--tx);box-shadow:var(--shBtn);font-family:inherit;cursor:pointer;}
.ix-item .nm{font-size:30px;font-weight:700;color:var(--tx);}
.ix-item .pr{display:flex;flex-direction:column;align-items:center;gap:2px;}
.ix-item .sp{font-size:32px;font-weight:800;color:var(--ac);}
.ix-item.sel{border-color:var(--ac);background:var(--acSoft);box-shadow:var(--shBtn);position:relative;}
.ix-item.sel::after{content:'✓';position:absolute;top:6px;right:14px;font-size:28px;font-weight:900;color:var(--ac);line-height:1;}
.ix-item.dis{opacity:.45;cursor:default;}
.ix-item.dis .sp{color:var(--ts);}
.ix-empty{grid-column:1/-1;text-align:center;padding:80px 0;font-size:32px;font-weight:600;color:var(--ts);}
/* 균일가 탭 */
.ix-tabs{display:flex;gap:6px;background:var(--chip);border-radius:9999px;padding:6px;margin:0 auto 24px;width:fit-content;}
.ix-tab{border:none;background:transparent;color:var(--ts);font-size:30px;font-weight:700;font-family:inherit;padding:12px 44px;border-radius:9999px;cursor:pointer;}
.ix-tab.on{background:var(--ac);color:var(--onAc);}
/* 모달 푸터: 닫기 / N개 선택 */
.ix-foot{display:flex;align-items:center;justify-content:space-between;margin-top:28px;}
.ix-close2{height:88px;padding:0 40px;border-radius:16px;border:2px solid var(--btnBd);background:var(--btnBg);color:var(--tx);font-size:30px;font-weight:600;font-family:inherit;box-shadow:var(--shBtn);cursor:pointer;}
.ix-cta{height:88px;padding:0 56px;border-radius:16px;border:none;background:var(--ac);color:var(--onAc);font-size:32px;font-weight:700;font-family:inherit;box-shadow:var(--shCta);cursor:pointer;}
.ix-cta:disabled{background:var(--chip);color:var(--ts);box-shadow:none;cursor:default;}
/* interactions.js — language dropdown (control-bar 한국어 pill) */
.ix-lang{position:absolute;top:100px;left:50%;transform:translateX(-50%);z-index:1500;background:var(--bg);border:2px solid var(--line);border-radius:14px;box-shadow:var(--sh);overflow:hidden;min-width:280px;}
.ix-lang button{display:flex;align-items:center;gap:14px;width:100%;text-align:left;padding:20px 28px;font-size:30px;font-weight:600;color:var(--tx);background:var(--bg);border:none;border-bottom:2px solid var(--line);font-family:inherit;cursor:pointer;}
.ix-lang button:last-child{border-bottom:none;}
/* cfdj_hangul.js — 회원가입 이름칸 두벌식 한글 키보드 (signup 화면 하단, 접근성바 위) */
.cfdj-kbd{position:absolute;left:0;right:0;bottom:104px;background:var(--bg);border-top:2px solid var(--line);padding:16px 18px;display:flex;flex-direction:column;gap:8px;z-index:1600;box-shadow:0 -6px 24px rgba(0,0,0,.12);}
.cfdj-kbd-row{display:flex;gap:8px;justify-content:center;}
.cfdj-kbd-key{width:94px;height:86px;border-radius:10px;border:2px solid var(--btnBd);background:var(--btnBg);color:var(--tx);font-size:38px;font-weight:600;box-shadow:var(--shBtn);font-family:inherit;cursor:pointer;}
.cfdj-kbd-key.space{flex:1;}
.cfdj-kbd-key.done{background:var(--ac);color:var(--onAc);border:none;box-shadow:var(--shCta);}
.cfdj-kbd-key.shift.on{background:var(--acSoft);}
.cfdj-kbd-key.lang{width:auto;padding:0 20px;font-size:28px;background:var(--chip);}   /* 한/영 전환키 — 키보드 하단행 안(모바일 쿼티 위치) */
/* 전용 전체화면 키패드 페이지(kiosk.js openKeypad, data-step="kbd_input") — pt_lookup 톤 큰 버튼 */
.kbd-num{width:560px;display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.kbd-num .kbd-key{height:118px;border-radius:12px;border:2px solid var(--btnBd);background:var(--btnBg);color:var(--tx);font-size:42px;font-weight:600;box-shadow:var(--shBtn);font-family:inherit;cursor:pointer;line-height:1.2;}
.kbd-num .kbd-key.fn{background:var(--chip);font-size:26px;}
.kbd-alnum{display:flex;flex-direction:column;align-items:center;gap:12px;}
.kbd-alnum-row{display:flex;gap:9px;justify-content:center;}
.kbd-alnum .kbd-key{min-width:84px;height:96px;padding:0 6px;border-radius:12px;border:2px solid var(--btnBd);background:var(--btnBg);color:var(--tx);font-size:38px;font-weight:600;box-shadow:var(--shBtn);font-family:inherit;cursor:pointer;}
.kbd-alnum .kbd-key.fn{background:var(--chip);font-size:28px;padding:0 26px;}
.kbd-alnum .kbd-key.done{background:var(--ac);color:var(--onAc);border:none;box-shadow:var(--shCta);}
/* 대기화면 광고판 — 공동구매 딜 썸네일 크로스페이드(그라디언트 위 레이어, 실패시 그라디언트 fallback) */
#adStage .adSlide{position:absolute;inset:0;border-radius:36px;overflow:hidden;opacity:0;background:#fff;}
#adStage .adSlide.on{opacity:1;}
#adStage .adSlide img{width:100%;height:100%;object-fit:cover;display:block;}
/* 스크림 상단까지 불투명도 확보(밝은 상품이미지 위 흰 제목 대비 3:1↑) + text-shadow 보강 */
#adStage .ad-cap{position:absolute;left:0;right:0;bottom:0;padding:44px 46px 50px;text-align:left;color:#fff;background:linear-gradient(to top,rgba(0,0,0,.82),rgba(0,0,0,.5) 55%,rgba(0,0,0,.18));}
#adStage .ad-cap .bdg{display:inline-block;background:var(--ac);color:#1A1A1A;font-size:30px;font-weight:800;padding:6px 22px;border-radius:9999px;margin-bottom:16px;}
#adStage .ad-cap .tt{font-size:52px;font-weight:800;line-height:1.15;letter-spacing:-1px;text-shadow:0 2px 6px rgba(0,0,0,.55);}
#adStage .ad-cap .pr{font-size:48px;font-weight:800;margin-top:12px;text-shadow:0 2px 6px rgba(0,0,0,.55);}
#adStage .ad-cap .pr s{font-size:30px;font-weight:600;color:#d8d8d8;margin-left:16px;}
/* 저감모션 사용자: 무한 애니(대기화면 blink·카드/QR 루프)는 인라인 style이라 !important 필요 */
@media (prefers-reduced-motion: reduce){ #stage *, #screensaver *{ animation:none !important; } }