/* ═══ AR 공유 스타일 (콘택트렌즈 + 안경 공통) ═══ */

:root{--b900:#0b3d91;--b700:#1459c2;--b500:#2e7be8;--line:#cfe3ff;--ink:#112a4a;--muted:#45658d}
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Apple SD Gothic Neo","Noto Sans KR",sans-serif;color:var(--ink);background:#0a0a0a;padding:0}
.app{width:100%;max-width:600px;margin:0 auto;background:#fff;min-height:100vh;position:relative}

/* ── 헤더 ── */
.head{display:flex;justify-content:space-between;align-items:center;padding:10px 14px;background:#fff;border-bottom:1px solid #eef3fa}
.title{margin:0;color:var(--b900);font-size:1.05rem;font-weight:800}
.ghost-btn{border:1px solid #d2e5ff;border-radius:8px;padding:7px 10px;font-weight:700;font-size:.78rem;cursor:pointer;background:#f9fcff;color:#1d5eb4;transition:transform .14s ease}
.ghost-btn:active{transform:scale(.97)}

/* ── 카메라 뷰어 ── */
.viewer{position:relative;background:#000;overflow:hidden;height:min(72vh,580px)}
video,canvas{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transform:scaleX(-1);display:block}
video{opacity:0;pointer-events:none}
.viewer-watermark{position:absolute;right:8px;top:8px;z-index:8;display:inline-flex;align-items:center;gap:5px;padding:3px 7px;border:1px solid rgba(255,255,255,.2);border-radius:999px;background:rgba(0,0,0,.35);color:#fff;font-size:.6rem;font-weight:700;pointer-events:none;backdrop-filter:blur(2px)}
.viewer-watermark img,.viewer-watermark svg{width:12px;height:12px;flex-shrink:0;opacity:.85}

/* ── 설정 패널 ── */
.settings-panel{border-top:1px solid #eef3fa}
.settings-details{border-bottom:1px solid #f0f4fa}
.settings-details[open]{background:#fafcff}
.settings-toggle{padding:12px 14px;font-size:.86rem;font-weight:700;color:#355985;cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;-webkit-tap-highlight-color:transparent}
.settings-toggle::-webkit-details-marker{display:none}
.settings-toggle::after{content:"";width:6px;height:6px;border-right:2px solid #8aa8cc;border-bottom:2px solid #8aa8cc;transform:rotate(45deg);transition:transform .2s ease}
.settings-details[open] .settings-toggle::after{transform:rotate(-135deg)}
.settings-body{padding:8px 14px 14px}

/* ── Overlay (idle + loading) ── */
.loading-overlay{position:absolute;inset:0;z-index:20;display:flex;align-items:center;justify-content:center;background:rgba(5,15,30,.88);transition:opacity .4s ease;padding:16px}
.loading-overlay[hidden]{display:none}
.loading-overlay.fade-out{opacity:0;pointer-events:none}
.ov-inner{display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.ov-inner[hidden]{display:none}
.idle-rings{width:64px;height:64px;position:relative;flex-shrink:0}
.idle-rings .ring{position:absolute;inset:0;border:1.5px solid rgba(96,165,250,.22);border-radius:50%;animation:ringPulse 3s ease-out infinite}
.idle-rings .ring:nth-child(2){inset:7px;animation-delay:.6s;border-color:rgba(96,165,250,.35)}
.idle-rings .ring:nth-child(3){inset:16px;animation-delay:1.2s;border-color:rgba(96,165,250,.5)}
.ov-idle-btn{cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s ease}
.ov-idle-btn:active{transform:scale(0.96)}
.idle-play{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.idle-play::after{content:"";width:0;height:0;border-style:solid;border-width:9px 0 9px 16px;border-color:transparent transparent transparent rgba(180,210,255,.7);margin-left:3px}
.ov-title{color:#e2ecf8;font-size:.92rem;font-weight:700;line-height:1.4}
.ov-sub{color:rgba(160,190,230,.55);font-size:.76rem;line-height:1.4}
.ld-spinner{width:44px;height:44px;border:2.5px solid rgba(255,255,255,.08);border-radius:50%;position:relative;flex-shrink:0}
.ld-spinner::before{content:"";position:absolute;inset:-2.5px;border:2.5px solid transparent;border-top-color:#60a5fa;border-right-color:#3b82f6;border-radius:50%;animation:spin .9s linear infinite}
.ld-spinner::after{content:"";position:absolute;inset:6px;border:2px solid transparent;border-bottom-color:#93c5fd;border-left-color:#60a5fa;border-radius:50%;animation:spin 1.6s linear infinite reverse}
.ld-bar{width:min(200px,70vw);height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden}
.ld-bar-fill{height:100%;background:linear-gradient(90deg,#3b82f6,#60a5fa,#93c5fd);border-radius:2px;width:0%;transition:width .7s cubic-bezier(.4,0,.2,1)}
.ld-tip{color:rgba(180,205,240,.55);font-size:.72rem;max-width:min(240px,80vw);line-height:1.4;min-height:1.8em;transition:opacity .4s ease}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes ringPulse{0%{transform:scale(.85);opacity:.7}70%{transform:scale(1.2);opacity:0}100%{transform:scale(1.2);opacity:0}}

/* ── 데스크탑 ── */
@media (min-width:641px){
  body{background:linear-gradient(180deg,#f0f5ff 0%,#e4efff 100%)}
  .app{border-radius:16px;overflow:hidden;min-height:auto;box-shadow:0 16px 48px rgba(0,0,0,.08)}
}