@import url("ar-shared.css");

/* ═══ 콘택트렌즈 전용 스타일 ═══ */

.viewer-wrap{position:relative}

/* ── 렌즈 선택 바 (카메라 하단 가로 스크롤) ── */
.lens-bar{position:absolute;bottom:0;left:0;right:0;z-index:9;padding:8px 0 10px;background:linear-gradient(transparent,rgba(0,0,0,.6));pointer-events:auto}
.lens-scroll-bar{display:flex;gap:8px;padding:0 12px;overflow-x:auto;overflow-y:hidden;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.lens-scroll-bar::-webkit-scrollbar{display:none}
.lens-scroll-item{flex-shrink:0;display:flex;flex-direction:column;align-items:center;gap:4px;cursor:pointer;transition:transform .15s;-webkit-tap-highlight-color:transparent}
.lens-scroll-item:active{transform:scale(.92)}
.lens-scroll-item .lens-item-ring{width:52px;height:52px;border-radius:50%;padding:2px;border:2px solid rgba(255,255,255,.2);transition:border-color .2s,box-shadow .2s;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,.25);backdrop-filter:blur(4px)}
.lens-scroll-item.active .lens-item-ring{border-color:#3b82f6;box-shadow:0 0 10px rgba(59,130,246,.5)}
.lens-scroll-item .lens-item-img{width:100%;height:100%;border-radius:50%;object-fit:contain}
.lens-scroll-item .lens-item-name{font-size:.62rem;color:rgba(255,255,255,.7);font-weight:600;max-width:56px;text-align:center;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;line-height:1.2}
.lens-scroll-item.active .lens-item-name{color:#fff}

/* ── 비포/애프터 비교 슬라이더 ── */
.compare-slider{position:absolute;top:0;bottom:0;left:0;right:0;z-index:7;pointer-events:none;touch-action:none}
.compare-line{position:absolute;top:0;bottom:0;width:2px;background:#fff;box-shadow:0 0 8px rgba(0,0,0,.5);pointer-events:none;left:50%;transform:translateX(-1px)}
.compare-handle{position:absolute;bottom:25%;left:50%;transform:translate(-50%,0);width:36px;height:36px;border-radius:50%;background:rgba(255,255,255,.85);border:2px solid rgba(255,255,255,.9);display:flex;align-items:center;justify-content:center;cursor:ew-resize;pointer-events:auto;box-shadow:0 2px 12px rgba(0,0,0,.4);transition:background .15s}
.compare-handle:active{background:rgba(59,130,246,1)}

/* ── 공유 버튼 ── */
.share-btn{position:absolute;top:10px;left:54px;z-index:8;width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.share-btn:active{background:rgba(59,130,246,.7);border-color:rgba(255,255,255,.8)}

/* ── 비교 토글 버튼 ── */
.compare-toggle{position:absolute;top:10px;left:10px;z-index:8;width:36px;height:36px;border-radius:50%;border:2px solid rgba(255,255,255,.4);background:rgba(0,0,0,.35);backdrop-filter:blur(4px);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .2s,border-color .2s;-webkit-tap-highlight-color:transparent}
.compare-toggle:active,.compare-toggle.active{background:rgba(59,130,246,.7);border-color:rgba(255,255,255,.8)}

/* ── 설정 패널 (콘택트렌즈 고유) ── */
.card{border:1px solid #eef3fa;border-radius:0;background:#fff;padding:0}
.row{display:flex;align-items:center;justify-content:space-between;gap:8px;min-width:0;margin-bottom:6px}
.row label{font-size:.82rem;color:#5a7a9e;flex:0 0 auto}
.row input[type="range"]{flex:1;min-width:0}
.seg{display:flex;gap:6px;flex-wrap:wrap;margin-top:4px}
.seg .mini{border:1px solid #d8e5f5;border-radius:999px;background:#fff;color:#4a6d94;padding:5px 10px;font-size:.75rem;font-weight:800;cursor:pointer}
.seg .mini.active{background:#eaf3ff;border-color:#96bdf3;color:#174f9e}