/* =============================================================
   Cight 단초점렌즈 가격 비교표 — 스타일
   5단(STEP 5→1)을 한 화면에. 왼쪽이 가장 이상적, 오른쪽이 경제형.
   제품마다 첨부 사진(image-slot) · 굴절률(1.60/1.67/1.74) 가격.
   풀HD(1920×1080) · 아이패드 프로 12.9"(4:3) 한 화면 최적화.
   ============================================================= */
:root{
  --ink:#0C171C; --ink2:#475862; --ink3:#8497A0;
  --accent:#00AEEF; --accent2:#0094CC; --accentInk:#00718F;
  --soft:rgba(0,174,239,.10); --soft2:rgba(0,174,239,.18);
  --line:rgba(10,30,35,.12); --line2:rgba(10,30,35,.20);
  --surface:#FFFFFF; --bg2:#F4F8FA; --bg3:#EAF1F4;
  --gold:#E8A33D; --goldSoft:rgba(232,163,61,.12); --goldInk:#B57514;
  --cat:#5B57D6; --catSoft:rgba(91,87,214,.13);
  --rec:#0F9D58; --recSoft:rgba(15,157,88,.13);
  --font:'Pretendard','Pretendard Variable',-apple-system,system-ui,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;}
body{font-family:var(--font);color:var(--ink);background:var(--bg3);-webkit-font-smoothing:antialiased;}
.cmp-app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--surface);}
.cmp-app button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.cmp-app sup{color:var(--accent);font-weight:800;font-size:.6em;}

/* ===== 헤더 ===== */
.cmp-top{display:flex;align-items:center;justify-content:space-between;gap:24px;position:relative;z-index:30;
  padding:1.3vh 2.4vw .9vh;flex:0 0 auto;}
.cmp-brand{display:flex;align-items:center;gap:14px;}
.cmp-logo{height:clamp(26px,2.7vh,32px);width:auto;}
.cmp-kicker{font-size:11.5px;letter-spacing:.24em;color:var(--accent);font-weight:800;}
.cmp-title{font-size:clamp(19px,2.1vh,24px);font-weight:800;letter-spacing:-.02em;margin-top:2px;}
.cmp-name{color:var(--accent);}
.cmp-tiers{display:flex;gap:6px;background:var(--bg2);padding:5px;border-radius:14px;}
.cmp-tier{padding:8px 16px;border-radius:10px;font-size:13.5px;font-weight:800;color:var(--ink2);
  transition:.14s;white-space:nowrap;display:flex;flex-direction:column;align-items:center;gap:1px;}
.cmp-tier span{font-size:10.5px;font-weight:600;color:var(--ink3);}
.cmp-tier:hover{color:var(--ink);}
.cmp-tier.on{background:var(--surface);color:var(--accentInk);box-shadow:0 4px 12px -5px rgba(8,20,26,.3);}
.cmp-tier.on span{color:var(--accent);}

/* ===== 진행 안내 띠 — 왼쪽이 프리미엄 ===== */
.cmp-prog{display:flex;align-items:center;gap:14px;margin:0 2.4vw .8vh;padding:7px 22px;border-radius:13px;
  background:linear-gradient(90deg,var(--soft),var(--bg2));flex:0 0 auto;}
.cmp-prog-t{flex:1;text-align:center;font-size:13px;font-weight:700;color:var(--ink2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-prog-t b{color:var(--accentInk);font-weight:800;}
.cmp-prog-bar{flex:0 0 88px;height:7px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--line2));position:relative;}
.cmp-stair{display:flex;align-items:flex-end;gap:3px;height:20px;flex:0 0 auto;}
.cmp-stair i{width:7px;border-radius:2px 2px 0 0;background:var(--accent);display:block;}
.cmp-prog-bar::before{content:"";position:absolute;left:-2px;top:50%;transform:translateY(-50%);
  border-right:9px solid var(--accent);border-top:6px solid transparent;border-bottom:6px solid transparent;}
.cmp-prog-l{font-size:12px;font-weight:800;color:var(--ink3);white-space:nowrap;}
.cmp-prog-l.on{color:var(--accentInk);}

/* ===== 5단 비교 — 모니터 높이에 맞춰 채움(반응형) ===== */
.cmp-cols{flex:1 1 auto;display:flex;align-items:stretch;gap:.65vw;padding:.3vh 1.6vw 1.4vh;min-height:0;}
.cmp-col{flex:1 1 0;min-width:0;display:flex;flex-direction:column;border-radius:18px;
  background:var(--bg2);border:1.5px solid var(--line);overflow:hidden;}
.cmp-col.premium{border-color:var(--gold);background:var(--surface);
  box-shadow:0 20px 44px -26px rgba(232,163,61,.65);}
.cmp-col.value{opacity:.94;}

/* 컬럼 헤더 */
.cmp-chd{padding:10px 16px 9px;display:flex;flex-direction:column;gap:2px;position:relative;flex:0 0 auto;
  border-bottom:1px solid var(--line);}
/* 단계별 강조 — 프리미엄(STEP5)→경제형(STEP1) 점층 배경 */
.cmp-col[data-step="4"] .cmp-chd{background:linear-gradient(180deg,rgba(0,174,239,.13),transparent);}
.cmp-col[data-step="3"] .cmp-chd{background:linear-gradient(180deg,rgba(0,174,239,.085),transparent);}
.cmp-col[data-step="2"] .cmp-chd{background:linear-gradient(180deg,rgba(0,174,239,.045),transparent);}
.cmp-col[data-step="1"] .cmp-chd{background:transparent;}
.cmp-col.premium .cmp-chd{background:linear-gradient(180deg,var(--goldSoft),transparent);}

/* 단계 레벨 메터 — 채워진 칸 수 = STEP (5→1 내림차순 계단) */
.cmp-steplvl{display:flex;gap:3px;margin-bottom:6px;}
.cmp-steplvl i{flex:1 1 0;height:4px;border-radius:99px;background:var(--line);}
.cmp-steplvl i.on{background:var(--accent);}
.cmp-col.premium .cmp-steplvl i.on{background:var(--gold);}
.cmp-col.value .cmp-steplvl i.on{background:var(--ink3);}

/* STEP 숫자 강조 — 큰 숫자 + /5 로 단계 위계를 시각화 */
.cmp-rung{display:inline-flex;align-items:baseline;gap:1px;font-weight:900;color:var(--accentInk);}
.cmp-rung::before{content:"STEP";font-size:8.5px;font-weight:900;letter-spacing:.14em;color:var(--ink3);align-self:center;margin-right:5px;}
.cmp-rung b{font-size:21px;line-height:.85;letter-spacing:-.02em;}
.cmp-rung-of{font-size:11px;font-weight:800;color:var(--ink3);}
.cmp-col.premium .cmp-rung b{color:var(--goldInk);}
.cmp-col.value .cmp-rung b{color:var(--ink2);}
.cmp-rungrow{display:flex;align-items:center;justify-content:space-between;gap:7px;}
.cmp-cat{font-size:9px;font-weight:800;letter-spacing:.02em;color:var(--cat);background:var(--catSoft);
  padding:2.5px 8px;border-radius:99px;white-space:nowrap;}

/* ===== 도수 기반 맞춤 추천 ===== */
.cmp-recbar{display:flex;align-items:center;gap:12px;margin:0 1.6vw .8vh;padding:8px 18px;border-radius:13px;
  background:linear-gradient(90deg,var(--recSoft),var(--bg2));border:1px solid rgba(15,157,88,.28);flex:0 0 auto;}
.cmp-rec-tag{flex:0 0 auto;font-size:10px;font-weight:900;letter-spacing:.06em;color:#fff;background:var(--rec);padding:3px 9px;border-radius:99px;}
.cmp-rec-name{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--ink);white-space:nowrap;}
.cmp-rec-rx{flex:0 0 auto;font-size:12px;font-weight:700;color:var(--ink2);white-space:nowrap;}
.cmp-rec-why{flex:1 1 auto;text-align:right;font-size:12px;font-weight:800;color:var(--rec);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:24px;}
.cmp-rec-needs{display:inline-flex;gap:4px;flex:0 0 auto;}
.cmp-need{font-size:10px;font-weight:700;color:var(--ink2);background:var(--surface);border:1px solid var(--line);
  padding:2px 7px;border-radius:99px;white-space:nowrap;}
.cmp-rec-adds{display:inline-flex;align-items:center;gap:4px;flex:0 0 auto;}
.cmp-rec-adds em{font-size:10px;font-weight:800;font-style:normal;color:var(--ink3);margin-right:1px;}
.cmp-add{font-size:10px;font-weight:800;color:#fff;background:var(--rec);padding:2px 7px;border-radius:99px;white-space:nowrap;}

.cmp-col .cmp-card.rec{border:2px solid var(--rec);box-shadow:0 10px 26px -14px rgba(15,157,88,.55);}
.cmp-card.rec .cmp-chead{padding-right:56px;}
.cmp-recbadge{position:absolute;top:7px;right:7px;z-index:3;font-size:8.5px;font-weight:900;letter-spacing:.03em;
  color:#fff;background:var(--rec);padding:2.5px 8px;border-radius:99px;box-shadow:0 2px 7px -2px rgba(15,157,88,.6);}
.cmp-col .cmp-pcell.recidx{background:var(--recSoft);outline:1.5px solid var(--rec);}
.cmp-pcell.recidx .cmp-pval{color:var(--rec);}
.cmp-cname{font-size:clamp(15px,1.8vh,18px);font-weight:800;letter-spacing:-.02em;line-height:1.1;}
.cmp-col.premium .cmp-cname{color:var(--goldInk);}
.cmp-cdesc{font-size:11px;color:var(--ink2);font-weight:600;line-height:1.25;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-ribbon{font-size:9px;font-weight:800;letter-spacing:.02em;color:#fff;
  background:var(--gold);padding:2.5px 9px;border-radius:99px;white-space:nowrap;}

/* 제품 카드 — 사진 타일(높이 가변, 모니터 채움) + 정보·가격 푸터 */
.cmp-list{flex:1 1 auto;display:flex;flex-direction:column;padding:7px;gap:6px;min-height:0;justify-content:flex-start;
  overflow-y:auto;scrollbar-width:thin;}
.cmp-list::-webkit-scrollbar{width:6px;}
.cmp-list::-webkit-scrollbar-thumb{background:var(--line2);border-radius:99px;}
/* 카드는 내용(이름·가격)보다 작아지지 않음 — 좁은 화면에서도 글자가 잘리거나 겹치지 않게 */
.cmp-card{flex:1 1 0;min-height:max-content;position:relative;display:flex;flex-direction:column;gap:6px;
  border-radius:13px;background:var(--surface);padding:7px 8px;border:1px solid var(--line);overflow:hidden;
  container-type:inline-size;}
/* 설명 사진 영역 — 남는 높이를 채우되, 공간이 부족하면 먼저 양보(글자 보호) */
.cmp-photo{flex:1 1 0;min-height:0;position:relative;display:block;border-radius:9px;overflow:hidden;background:var(--bg3);font-size:10px;}
/* 니콘 브랜드 배지 — 사진 좌상단 */
.cmp-nikon{position:absolute;top:6px;left:6px;z-index:2;width:clamp(24px,2.3vw,32px);height:auto;display:block;
  border-radius:5px;box-shadow:0 2px 8px -2px rgba(8,20,26,.5);}
.cmp-photo image-slot{display:block;width:100%;height:100%;}
.cmp-col.premium .cmp-photo{outline:1px solid rgba(232,163,61,.22);}
.cmp-cbody{flex:1 1 auto;display:flex;flex-direction:column;gap:6px;min-height:0;}

/* ===== 업그레이드 강조 (SMARTLIFE) ===== */
.cmp-card.up{flex:1 1 0;}
.cmp-up{flex:0 0 auto;display:flex;flex-direction:column;gap:4px;
  padding:6px 7px;border-radius:9px;background:var(--soft);}
.cmp-col.premium .cmp-up{background:rgba(0,174,239,.12);}
.cmp-up-top{display:flex;align-items:center;gap:7px;}
.cmp-uptag{flex:0 0 auto;font-size:8px;font-weight:900;letter-spacing:.08em;color:#fff;
  background:var(--accent);padding:2px 6px;border-radius:99px;}
.cmp-stat{display:flex;align-items:center;gap:6px;min-width:0;}
.cmp-stat b{flex:0 0 auto;font-size:clamp(15px,1.7vw,20px);font-weight:900;letter-spacing:-.03em;
  color:var(--accentInk);line-height:.92;}
.cmp-stat i{font-style:normal;font-size:8px;font-weight:700;line-height:1.15;color:var(--ink2);}
.cmp-stat sup{color:var(--accent);font-weight:800;}
.cmp-hero{display:flex;flex-direction:column;gap:1px;min-width:0;}
.cmp-hero b{font-size:clamp(11px,1.2vw,13.5px);font-weight:900;letter-spacing:-.02em;color:var(--accentInk);line-height:1.1;}
.cmp-hero i{font-style:normal;font-size:8.5px;font-weight:700;color:var(--ink2);line-height:1.2;}
.cmp-bens{list-style:none;display:flex;flex-direction:column;gap:2px;}
.cmp-bens li{display:flex;align-items:center;gap:5px;font-size:9.5px;font-weight:700;
  line-height:1.2;color:var(--ink);}
.cmp-bens svg{flex:0 0 auto;width:11px;height:11px;fill:var(--accentInk);}

/* 맞춤 레벨 메터 — SMARTLIFE ●●○ / INDIVIDUAL ●●● */
.cmp-mtr{display:flex;align-items:center;gap:5px;}
.cmp-mtr-lab{flex:0 0 auto;font-size:8.5px;font-weight:800;letter-spacing:.04em;color:var(--ink3);}
.cmp-dots{display:inline-flex;gap:2.5px;flex:0 0 auto;}
.cmp-dots i{width:6px;height:6px;border-radius:99px;background:var(--line2);display:block;}
.cmp-dots i.on{background:var(--accent);}
.cmp-mtr-t{font-size:9px;font-weight:800;letter-spacing:-.01em;color:var(--accentInk);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* 업그레이드 커넥터 — SEEMAX 위에 ▲ */
.cmp-uplink{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:4px;margin:-2px 0;}
.cmp-uparrow{font-size:8.5px;line-height:1;color:var(--accent);}
.cmp-uptxt{font-size:8.5px;font-weight:800;letter-spacing:.07em;color:var(--accentInk);}
.cmp-col.premium .cmp-card{border-color:rgba(232,163,61,.35);}
.cmp-card.empty{flex:1 1 auto;align-items:center;justify-content:center;color:var(--ink3);
  font-size:12px;font-weight:700;background:transparent;border:1px dashed var(--line2);}

.cmp-chead{display:flex;align-items:center;gap:9px;flex:0 0 auto;}
.cmp-shot{display:block;width:clamp(32px,2.7vw,40px);height:clamp(32px,2.7vw,40px);flex:0 0 auto;
  border-radius:9px;overflow:hidden;font-size:9px;background:var(--bg3);}
.cmp-shot image-slot::part(empty){padding:2px;gap:0;}
.cmp-col.premium .cmp-shot{outline:1px solid rgba(232,163,61,.3);}

.cmp-cname2{display:flex;flex-direction:column;gap:1px;flex:1 1 auto;min-width:0;}
.cmp-cname2 b{font-size:13px;font-weight:800;letter-spacing:.005em;line-height:1.12;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cmp-cname2 em{font-size:10.5px;color:var(--accentInk);font-style:normal;font-weight:700;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.cmp-col.premium .cmp-cname2 em{color:var(--goldInk);}

/* 특장점 */
.cmp-feat{flex:0 0 auto;font-size:10.5px;line-height:1.3;color:var(--ink2);font-weight:600;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}

/* 추천(맞춤 용도) 라인 — 카드마다 동일한 위치에 정렬 */
.cmp-recfit{flex:0 0 auto;display:flex;align-items:flex-start;gap:6px;}
.cmp-recfit-lab{flex:0 0 auto;font-size:8.5px;font-weight:900;letter-spacing:.04em;color:#fff;
  background:var(--rec);padding:2px 7px;border-radius:99px;line-height:1.6;}
.cmp-recfit-tx{font-size:10px;font-weight:700;color:var(--ink);line-height:1.35;
  word-break:keep-all;text-wrap:pretty;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cmp-col.premium .cmp-recfit-lab{background:var(--goldInk);}

/* 능력치 패턴 — 사진 제거 후 카드의 주역. 능력치=막대(좌) / 환경=점(우) */
/* 능력치 패턴 — 카드 폭에 반응: 넓으면 가로 2단 / 좁으면 세로 1단(막대가 전체 폭) */
.cmp-skill{flex:1 1 auto;display:flex;flex-direction:column;align-content:center;justify-content:center;
  gap:5px;padding:8px 11px 9px;border-radius:10px;background:var(--bg2);border:1px solid var(--line);}
.cmp-skill-grp{display:grid;grid-template-columns:auto 1fr;align-content:center;column-gap:8px;row-gap:4px;min-width:0;}
.cmp-skill-grp.env{border-top:1px solid var(--line);padding-top:5px;margin-top:1px;}
.cmp-skill-h{grid-column:1 / -1;font-size:8px;font-weight:900;letter-spacing:.1em;
  color:var(--ink3);text-transform:uppercase;margin-bottom:1px;}
.cmp-srow{display:contents;}
.cmp-slab{font-size:10px;font-weight:700;color:var(--ink);line-height:1.1;white-space:nowrap;}
.cmp-sbar{display:flex;gap:3px;min-width:0;}
.cmp-sbar i{flex:1 1 0;min-width:0;height:9px;border-radius:2.5px;background:rgba(10,30,35,.10);display:block;}
.cmp-sbar i.on{background:var(--accent);}
.cmp-sbar i.half{background:linear-gradient(90deg,var(--accent) 50%,rgba(10,30,35,.10) 50%);}
.cmp-sbar.env i.on{background:var(--accentInk);}
.cmp-sbar.env i.half{background:linear-gradient(90deg,var(--accentInk) 50%,rgba(10,30,35,.10) 50%);}
.cmp-sbar.env i.opt{background:color-mix(in srgb, var(--accentInk) 38%, #fff);}
.cmp-opt{display:inline-block;font-style:normal;font-size:7.5px;font-weight:800;letter-spacing:.02em;
  color:var(--accent);background:var(--soft);border-radius:99px;padding:0 4px;margin-left:4px;
  line-height:1.5;vertical-align:middle;}
.cmp-col.premium .cmp-skill{background:var(--goldSoft);border-color:rgba(232,163,61,.28);}
.cmp-col.premium .cmp-sbar i.on{background:var(--gold);}
.cmp-col.premium .cmp-sbar i.half{background:linear-gradient(90deg,var(--gold) 50%,rgba(10,30,35,.10) 50%);}
.cmp-col.premium .cmp-sbar.env i.on{background:var(--goldInk);}
.cmp-col.premium .cmp-sbar.env i.half{background:linear-gradient(90deg,var(--goldInk) 50%,rgba(10,30,35,.10) 50%);}
.cmp-col.premium .cmp-sbar.env i.opt{background:color-mix(in srgb, var(--goldInk) 40%, #fff);}
.cmp-col.premium .cmp-opt{color:var(--goldInk);background:var(--goldSoft);}
.cmp-col.premium .cmp-skill-grp.env{border-top-color:rgba(232,163,61,.25);}
/* 카드가 충분히 넓을 때만 가로 2단으로 */
@container (min-width:215px){
  .cmp-skill{flex-direction:row;align-items:flex-start;gap:12px;}
  .cmp-skill-grp.bars{flex:1 1 auto;}
  .cmp-skill-grp.env{flex:0 0 auto;grid-template-columns:auto 46px;
    border-top:none;padding-top:0;margin-top:0;border-left:1px solid var(--line);padding-left:11px;}
  .cmp-col.premium .cmp-skill-grp.env{border-left-color:rgba(232,163,61,.25);}
}

/* 굴절률 축 — (제거됨) 굴절률은 각 가격 셀에 직접 표기 */

/* 굴절률 · 가격 — 굴절률+가격을 한 칸에 묶어 한눈에 짝지어 읽히게 */
.cmp-prices{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;flex:0 0 auto;
  padding-top:6px;border-top:1px solid var(--line);}
.cmp-col.premium .cmp-prices{border-top-color:rgba(232,163,61,.32);}
.cmp-pcell{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1.5px;min-width:0;
  padding:4px 2px 5px;border-radius:8px;background:var(--bg2);}
.cmp-col.premium .cmp-pcell{background:var(--goldSoft);}
.cmp-pcell.off{opacity:.4;}
.cmp-pidx{font-size:9px;font-weight:800;letter-spacing:.01em;line-height:1;color:var(--ink3);
  padding-bottom:1.5px;border-bottom:1px solid var(--line2);width:100%;text-align:center;}
.cmp-col.premium .cmp-pidx{color:var(--goldInk);border-bottom-color:rgba(232,163,61,.3);}
.cmp-pval{font-size:clamp(9px,.8vw,13px);font-weight:800;letter-spacing:-.045em;white-space:nowrap;color:var(--ink);}
.cmp-pval.free{color:var(--accent);}
.cmp-pcell.off .cmp-pidx{border-bottom-color:transparent;}
.cmp-pcell.recidx .cmp-pidx{color:var(--rec);border-bottom-color:rgba(15,157,88,.4);}

/* ===== 푸터 ===== */
.cmp-foot{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding:1vh 2.4vw;border-top:1px solid var(--line);background:var(--bg2);}
.cmp-foot-l{font-size:12px;color:var(--ink2);font-weight:600;}
.cmp-foot-l b{color:var(--ink);font-weight:800;}
.cmp-fn{color:var(--ink3);font-weight:600;}
.cmp-foot-r{font-size:11.5px;color:var(--ink3);font-weight:600;}
.cmp-legend{display:flex;align-items:center;gap:14px;}
.cmp-leg{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:700;color:var(--ink2);white-space:nowrap;}
.cmp-leg i{width:18px;height:5px;border-radius:99px;display:block;}
.cmp-leg i.prem{background:var(--gold);}

/* ===== 헤더 우측(고객 선택 + 탭) ===== */
.cmp-top-r{display:flex;align-items:center;gap:12px;}
.cmp-lang{position:relative;flex:0 0 auto;}
.cmp-lang-trigger{display:inline-flex;align-items:center;gap:8px;font-family:inherit;background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:8px 13px;cursor:pointer;color:var(--ink);box-shadow:0 1px 2px rgba(8,20,26,.04);transition:border-color .14s,box-shadow .14s;}
.cmp-lang-trigger:hover{border-color:var(--ink3);}
.cmp-lang.open .cmp-lang-trigger{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,174,239,.13);}
.cmp-lang-ic{width:16px;height:16px;color:var(--ink3);flex:0 0 auto;}
.cmp-lang-flag{font-size:15px;line-height:1;flex:0 0 auto;}
.cmp-lang-cur{font-size:13px;font-weight:700;white-space:nowrap;}
.cmp-lang-chev{width:15px;height:15px;color:var(--ink3);flex:0 0 auto;transition:transform .16s;}
.cmp-lang.open .cmp-lang-chev{transform:rotate(180deg);}
.cmp-lang-menu{position:absolute;top:calc(100% + 6px);right:0;min-width:158px;list-style:none;margin:0;padding:5px;opacity:1;background:var(--surface);border:1px solid var(--line);border-radius:13px;box-shadow:0 12px 32px -8px rgba(8,20,26,.22),0 2px 8px -2px rgba(8,20,26,.1);z-index:50;}
.cmp-lang-opt{display:flex;align-items:center;gap:9px;padding:9px 11px;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--ink2);transition:background .12s,color .12s;}
.cmp-lang-opt:hover{background:var(--bg2);color:var(--ink);}
.cmp-lang-opt.on{color:var(--accentInk);font-weight:800;}
.cmp-lang-name{flex:1 1 auto;white-space:nowrap;}
.cmp-lang-check{width:16px;height:16px;color:var(--accent);flex:0 0 auto;}
.cmp-change{padding:8px 13px;border-radius:10px;font-size:12.5px;font-weight:800;color:var(--accentInk);
  background:var(--soft);border:1px solid var(--line)!important;white-space:nowrap;transition:.14s;}
.cmp-change:hover{background:var(--soft2);}

/* ===== 고객 선택 첫 화면 ===== */
.sel{width:100vw;min-height:100vh;display:flex;flex-direction:column;gap:18px;padding:4.5vh 6vw;overflow-y:auto;background:var(--bg3);}
.sel-head{display:flex;align-items:center;gap:16px;flex:0 0 auto;position:relative;z-index:30;}
.sel-head-t{flex:1 1 auto;min-width:0;}
.sel-logo{height:34px;width:auto;}
.sel-kicker{font-size:12px;letter-spacing:.24em;color:var(--accent);font-weight:800;}
.sel-title{font-size:clamp(24px,3.4vh,34px);font-weight:800;letter-spacing:-.02em;margin-top:3px;color:var(--ink);}
.sel-bar{display:flex;gap:10px;flex:0 0 auto;flex-wrap:wrap;}
.sel-input{flex:1 1 280px;min-width:0;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);
  padding:13px 18px;border-radius:13px;border:1.5px solid var(--line);background:var(--surface);outline:none;}
.sel-input:focus{border-color:var(--accent);}
.sel-btn{flex:0 0 auto;font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:var(--accent);
  border:none;border-radius:13px;padding:13px 20px;cursor:pointer;transition:.14s;white-space:nowrap;}
.sel-btn:hover{background:var(--accent2);}
.sel-btn.ghost{background:var(--surface);color:var(--ink2);border:1.5px solid var(--line);}
.sel-btn.ghost:hover{color:var(--ink);border-color:var(--line2);}
.sel-grid{flex:1 1 auto;display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:14px;align-content:start;}
.sel-card{display:flex;flex-direction:column;gap:7px;text-align:left;cursor:pointer;
  background:var(--surface);border:1.5px solid var(--line);border-radius:16px;padding:18px 18px 16px;transition:.16s;position:relative;}
.sel-card:hover{border-color:var(--accent);box-shadow:0 16px 36px -22px rgba(8,20,26,.5);transform:translateY(-2px);}
.sel-card-top{display:flex;align-items:baseline;gap:9px;}
.sel-card-top b{font-size:19px;font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.sel-card-top em{font-size:12px;font-style:normal;font-weight:700;color:var(--ink3);}
.sel-card-rx{font-size:13.5px;font-weight:800;letter-spacing:-.02em;color:var(--accentInk);}
.sel-card-tags{display:flex;flex-wrap:wrap;gap:5px;margin-top:1px;}
.sel-tag{font-size:11px;font-weight:700;color:var(--ink2);background:var(--bg2);border:1px solid var(--line);padding:3px 9px;border-radius:99px;}
.sel-card-go{margin-top:6px;font-size:12.5px;font-weight:800;color:var(--accent);}
.sel-empty{grid-column:1/-1;padding:48px 20px;text-align:center;font-size:15px;font-weight:600;color:var(--ink3);
  background:var(--surface);border:1.5px dashed var(--line2);border-radius:16px;line-height:1.6;}

/* 직접 입력 모달 */
.man-wrap{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;
  background:rgba(8,20,26,.42);padding:20px;}
.man{width:min(460px,94vw);max-height:92vh;overflow-y:auto;background:var(--surface);border-radius:18px;
  padding:22px 22px 20px;box-shadow:0 30px 70px -30px rgba(8,20,26,.6);display:flex;flex-direction:column;gap:12px;}
.man-h{display:flex;align-items:center;justify-content:space-between;}
.man-h b{font-size:18px;font-weight:800;color:var(--ink);}
.man-x{font-size:16px;color:var(--ink3);background:none;border:none;cursor:pointer;padding:4px;}
.man label{display:block;font-size:11px;font-weight:800;color:var(--ink3);margin-bottom:4px;letter-spacing:.02em;}
.man input{width:100%;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);padding:9px 12px;
  border-radius:10px;border:1.5px solid var(--line);background:var(--bg2);outline:none;}
.man input:focus{border-color:var(--accent);background:var(--surface);}
.man-row3{display:flex;gap:10px;}
.man-row3 span{flex:1 1 0;}
.man-eye{display:flex;align-items:flex-end;gap:10px;}
.man-eye-lab{flex:0 0 76px;font-size:12px;font-weight:800;color:var(--accentInk);padding-bottom:9px;}
.man-eye span{flex:1 1 0;}
.man-tags{display:flex;flex-wrap:wrap;align-items:center;gap:6px;}
.man-tags-lab{flex:0 0 100%;font-size:11px;font-weight:800;color:var(--ink3);letter-spacing:.02em;}
.man-tag{font-family:inherit;font-size:12px;font-weight:700;color:var(--ink2);background:var(--bg2);
  border:1.5px solid var(--line);border-radius:99px;padding:6px 12px;cursor:pointer;transition:.12s;}
.man-tag.on{background:var(--soft);border-color:var(--accent);color:var(--accentInk);}
.man-submit{margin-top:4px;font-family:inherit;font-size:15px;font-weight:800;color:#fff;background:var(--accent);
  border:none;border-radius:13px;padding:14px;cursor:pointer;transition:.14s;}
.man-submit:hover{background:var(--accent2);}

/* ===== 앞쪽 안내 가이드 ===== */
.gd.paged{position:fixed;inset:0;width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;background:var(--bg3);color:var(--ink);}
.gd-top{flex:0 0 auto;display:flex;align-items:center;gap:12px;position:relative;z-index:30;
  padding:13px 6vw;background:var(--surface);border-bottom:1px solid var(--line);}
.gd-logo{height:30px;width:auto;}
.gd-top-sp{flex:1 1 auto;}
.gd-cta{font-family:inherit;font-size:14px;font-weight:800;color:#fff;background:var(--accent);
  border:none;border-radius:11px;padding:11px 20px;cursor:pointer;white-space:nowrap;transition:.14s;}
.gd-cta:hover{background:var(--accent2);}
.gd-cta.big{font-size:16px;padding:15px 30px;border-radius:13px;box-shadow:0 14px 30px -14px rgba(0,148,204,.7);}

/* 페이지(슬라이드) */
.gd-viewport{flex:1 1 auto;min-height:0;overflow:hidden;position:relative;}
.gd-track{display:flex;height:100%;transition:transform .46s cubic-bezier(.4,0,.2,1);}
.gd-slot{flex:0 0 auto;height:100%;overflow:hidden;}
.gp{width:100%;height:100%;overflow-y:auto;display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:clamp(16px,3vh,32px);padding:clamp(18px,4vh,46px) 6vw;}
.gp-head{width:100%;max-width:1240px;text-align:left;}
.gd-sec-tag{font-size:12px;font-weight:900;letter-spacing:.14em;color:var(--accent);}
.gp-head h2{font-size:clamp(23px,3vw,34px);font-weight:800;letter-spacing:-.02em;margin:8px 0 10px;}
.gp-head p{font-size:clamp(14px,1.5vw,16.5px);line-height:1.6;color:var(--ink2);font-weight:500;white-space:pre-line;text-wrap:pretty;}

/* 히어로 페이지 */
.gp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,4vw,56px);align-items:center;max-width:1080px;width:100%;}
.gd-kicker{font-size:13px;letter-spacing:.24em;font-weight:800;color:var(--accent);}
.gd-title{font-size:clamp(30px,5vw,52px);font-weight:800;letter-spacing:-.03em;line-height:1.08;margin:10px 0 14px;}
.gd-sub{font-size:clamp(15px,1.6vw,18px);line-height:1.6;color:var(--ink2);font-weight:500;max-width:32em;white-space:pre-line;text-wrap:pretty;}
.gp-hero-img{display:block;width:100%;aspect-ratio:4/3;border-radius:20px;overflow:hidden;background:var(--bg2);font-size:13px;}
.gd-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:1000px;width:100%;}
.gd-pill{display:flex;flex-direction:column;gap:6px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(14px,2vh,22px);}
.gd-pill-n{font-size:13px;font-weight:900;color:var(--accent);letter-spacing:.1em;}
.gd-pill b{font-size:clamp(16px,1.8vw,19px);font-weight:800;letter-spacing:-.01em;}
.gd-pill-d{font-size:13.5px;color:var(--ink2);font-weight:600;line-height:1.45;}

/* 콘텐츠 블록 */
.gd-art{display:block;width:100%;height:clamp(72px,11vh,104px);color:var(--accentInk);}
.gd-art svg{width:100%;height:100%;}
.gd-mat{display:flex;align-items:center;justify-content:center;gap:clamp(12px,1.8vw,22px);max-width:780px;width:100%;flex-wrap:wrap;}
.gd-mat-c{flex:1 1 0;min-width:130px;background:var(--surface);border:1px solid var(--line);border-radius:16px;padding:clamp(12px,2vh,18px);text-align:center;}
.gd-mat-c b{display:block;margin-top:6px;font-size:clamp(16px,2vw,20px);font-weight:800;color:var(--accentInk);letter-spacing:-.01em;}
.gd-mat-arrow{flex:0 0 100%;text-align:center;font-size:14px;font-weight:800;color:var(--accent);margin-top:4px;}

/* ===== STEP01 굴절률 소재 카드 ===== */
.gp-s1{justify-content:flex-start;}
.s1lead{font-weight:600;}
.idxg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);width:100%;max-width:1240px;}
.idxc{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:clamp(14px,2.2vh,22px) clamp(14px,1.5vw,24px) clamp(12px,1.8vh,18px);
  display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.6vh,7px);
  box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.idxc.hl{border-color:var(--accent);box-shadow:0 14px 32px -14px rgba(0,174,239,.5);}
.idxc-badge{background:var(--accent);color:#fff;font-weight:800;font-size:clamp(15px,1.3vw,18px);
  letter-spacing:.01em;padding:5px 22px;border-radius:999px;box-shadow:0 6px 16px -8px rgba(0,174,239,.7);}
.idxc-name{font-size:clamp(16px,1.55vw,22px);font-weight:800;letter-spacing:-.02em;color:var(--ink);margin-top:4px;white-space:nowrap;}
.idxc-sub{font-size:clamp(11px,1.1vw,14px);color:var(--ink3);font-weight:600;white-space:nowrap;}

.idxc-lensrow{width:100%;display:grid;grid-template-columns:auto 1fr;align-items:center;
  gap:clamp(3px,.4vw,8px);margin-top:clamp(8px,1.5vh,18px);}
.idxc-thk{font-size:clamp(11px,1.15vw,15px);font-weight:800;color:var(--accentInk);
  text-align:right;white-space:nowrap;letter-spacing:-.01em;}
.idxc-lensimg{display:block;width:100%;height:auto;}
.idxc-div{width:100%;height:1px;background:var(--line);margin:clamp(8px,1.5vh,18px) 0;}
.idxc-glassrow{width:100%;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.55fr);
  align-items:center;gap:clamp(4px,.6vw,12px);}
.idxc-depth{font-size:clamp(10.5px,1.12vw,15px);font-weight:600;line-height:1.4;color:var(--accentInk);
  text-align:right;text-wrap:pretty;word-break:keep-all;letter-spacing:-.01em;}
.idxc-depth b{font-weight:800;}
.idxc-glassimg{display:block;width:100%;height:auto;}
.idxc-tri{color:var(--line2);font-size:clamp(12px,1.1vw,16px);line-height:1;
  margin:clamp(6px,1vh,12px) 0 clamp(4px,.6vh,8px);}
.idxc-cap{font-size:clamp(11px,1.15vw,15.5px);font-weight:700;line-height:1.42;color:var(--ink);
  text-align:center;text-wrap:pretty;word-break:keep-all;letter-spacing:-.01em;}
.idxc-cap b{color:var(--accent);font-weight:800;}
.idxnote{width:100%;max-width:1240px;text-align:left;font-size:clamp(11px,1.1vw,14px);
  font-weight:600;color:var(--ink3);margin-top:clamp(8px,1.5vh,18px);text-wrap:pretty;word-break:keep-all;}

/* ===== STEP01 두께 비교 (옆모습 돌출 + 동전) ===== */
.gp-head h2 .acc{color:var(--accent);}
.gp-thk,.gp-cg{justify-content:flex-start;}
.thkg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);width:100%;max-width:1240px;}
.thkc{background:var(--surface);border:1px solid var(--line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.thkc.hl{border-color:var(--accent);box-shadow:0 14px 32px -14px rgba(0,174,239,.5);}
.thkc-head{display:flex;align-items:center;gap:clamp(8px,.9vw,13px);
  padding:clamp(11px,1.7vh,16px) clamp(13px,1.3vw,20px) clamp(7px,1vh,11px);}
.thkc-badge{background:var(--accent);color:#fff;font-weight:800;font-size:clamp(13px,1.2vw,18px);
  letter-spacing:.01em;padding:4px 16px;border-radius:999px;flex:0 0 auto;}
.thkc.hl .thkc-badge{background:linear-gradient(135deg,#00AEEF,#0083C6);}
.thkc-name{font-size:clamp(14px,1.4vw,21px);font-weight:800;letter-spacing:-.02em;color:var(--ink);white-space:nowrap;}
.thkc-name em{font-style:normal;font-weight:600;font-size:clamp(11px,1vw,14px);color:var(--ink3);margin-left:5px;white-space:nowrap;}
.thkc-side{display:grid;grid-template-columns:1fr .92fr;align-items:stretch;border-top:1px solid var(--line);
  min-height:clamp(118px,15vh,176px);}
.thkc-sidetx{align-self:center;padding:clamp(6px,1vh,12px) clamp(8px,.8vw,12px) clamp(6px,1vh,12px) clamp(13px,1.3vw,20px);
  font-size:clamp(12px,1.2vw,16px);font-weight:600;line-height:1.5;color:var(--ink2);word-break:normal;line-break:strict;}
html[lang="ko"] .thkc-sidetx{word-break:keep-all;}
.thkc-sidetx b{color:var(--accent);font-weight:800;}
.thkc-pic{overflow:hidden;background:#fff;}
.thkc-pic img{width:100%;height:100%;object-fit:cover;object-position:30% 42%;display:block;}
.thkc-coin{display:flex;flex-direction:column;align-items:center;gap:clamp(3px,.5vh,6px);
  padding:clamp(10px,1.5vh,16px) clamp(10px,1vw,16px) clamp(12px,1.8vh,18px);border-top:1px solid var(--line);background:var(--bg2);}
.thkc-coin-main{font-size:clamp(13px,1.25vw,17px);font-weight:800;color:var(--ink);text-align:center;white-space:nowrap;}
.thkc-coin-main b{color:var(--accent);}
.thkc-coin-sub{font-size:clamp(10.5px,1vw,13px);font-weight:600;color:var(--ink3);white-space:nowrap;}
.thkc-cmp{display:flex;align-items:flex-end;justify-content:center;gap:clamp(6px,.7vw,13px);margin-top:clamp(5px,.8vh,9px);}
.thkc-lens,.thkc-coins{height:clamp(62px,8vh,92px);width:auto;display:block;}
.thkc-eq{align-self:center;color:var(--accent);font-size:clamp(18px,1.8vw,26px);font-weight:800;}

/* ===== STEP03 코팅 (6종 · 2그룹) ===== */
.cg-wrap{display:flex;flex-direction:column;gap:clamp(12px,2vh,22px);width:100%;max-width:1240px;}
.cg-group{display:flex;flex-direction:column;}
.cg-grouplbl{display:flex;align-items:center;gap:9px;font-size:clamp(14px,1.35vw,20px);font-weight:800;
  letter-spacing:-.01em;color:var(--ink);margin-bottom:clamp(7px,1vh,12px);}
.cg-grouplbl::before{content:"";width:11px;height:11px;border-radius:50%;background:var(--accent);flex:0 0 auto;}
.cgg{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(10px,1.2vw,20px);}
.cgc{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(12px,1.7vh,20px) clamp(13px,1.3vw,22px);display:flex;flex-direction:column;
  gap:clamp(7px,1vh,12px);box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.cgc-top{display:flex;align-items:center;gap:clamp(10px,1vw,15px);}
.cgc-icon{width:clamp(42px,4vw,58px);height:clamp(42px,4vw,58px);border-radius:15px;background:var(--soft);
  flex:0 0 auto;display:grid;place-items:center;color:var(--accent);}
.cgc-icon svg{width:58%;height:58%;}
.cgc-head{min-width:0;flex:1 1 auto;display:flex;flex-direction:column;gap:5px;}
.cgc-name{font-size:clamp(14px,1.35vw,21px);font-weight:800;letter-spacing:-.01em;color:var(--ink);line-height:1.2;word-break:keep-all;}
.cgc-brand{align-self:flex-start;font-size:clamp(10.5px,.95vw,15px);font-weight:800;color:var(--accent);
  background:var(--surface);border:1px solid var(--soft2);border-radius:999px;padding:3px 11px;white-space:nowrap;}
.cgc-eff{font-size:clamp(12px,1.2vw,17px);font-weight:600;color:var(--ink2);line-height:1.5;flex:1;
  word-break:normal;line-break:strict;}
html[lang="ko"] .cgc-eff{word-break:keep-all;}
.cgc-tgt{display:inline-flex;align-items:center;gap:8px;font-size:clamp(11px,1.05vw,15px);font-weight:700;
  color:var(--accent);background:var(--surface);border:1px solid var(--line);border-radius:11px;padding:7px 12px;align-self:flex-start;max-width:100%;}
.cgc-tgt-ic{display:inline-flex;flex:0 0 auto;}
.cgc-tgt-ic svg{width:clamp(15px,1.3vw,18px);height:clamp(15px,1.3vw,18px);display:block;}
.cgc-tgt span:last-child{white-space:nowrap;}
@media(max-width:780px){ .thkg{grid-template-columns:1fr;} .cgg{grid-template-columns:1fr;} }

.idxtip{display:flex;align-items:center;gap:clamp(14px,2vw,26px);width:100%;max-width:1180px;
  background:var(--bg2);border:1px solid var(--line);border-radius:16px;padding:clamp(12px,1.8vh,18px) clamp(16px,2vw,26px);}
.idxtip-ic{flex:0 0 auto;width:42px;height:42px;display:grid;place-items:center;border-radius:50%;
  background:var(--soft);color:var(--accent);}
.idxtip-ic svg{width:22px;height:22px;}
.idxtip-tx{flex:1 1 0;min-width:200px;font-size:clamp(13px,1.2vw,15px);line-height:1.55;color:var(--ink2);font-weight:600;text-wrap:pretty;}
.idxtip-prog{flex:0 0 auto;display:flex;align-items:center;gap:clamp(8px,1vw,16px);}
.idxtip-step{display:flex;flex-direction:column;align-items:center;gap:3px;}
.idxtip-art{display:block;width:clamp(58px,5vw,82px);height:clamp(20px,2.4vh,30px);color:var(--accentInk);}
.idxtip-art svg{width:100%;height:100%;}
.idxtip-lab{font-size:clamp(11px,1vw,13px);font-weight:700;color:var(--ink2);white-space:nowrap;}
.idxtip-arrow{color:var(--ink3);font-weight:800;font-size:15px;}
.gd-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,14px);max-width:1180px;width:100%;}
.gd-step{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(8px,1.4vh,14px) clamp(6px,.8vw,12px);text-align:center;display:flex;flex-direction:column;gap:4px;}
.gd-step-sz{font-size:clamp(11px,1.1vw,13px);font-weight:800;letter-spacing:-.01em;color:var(--accentInk);}
.gd-step.hl .gd-step-sz{color:var(--gold);}
.gd-step.hl{border-color:var(--gold);box-shadow:0 16px 34px -22px rgba(232,163,61,.7);}
.gd-step-r{font-size:10.5px;font-weight:800;letter-spacing:.1em;color:var(--ink3);}
.gd-eye{display:block;width:100%;height:auto;border-radius:9px;}
.gd-step b{font-size:clamp(13px,1.3vw,15px);font-weight:800;letter-spacing:-.01em;}
.gd-step.hl b{color:var(--goldInk);}
.gd-scale{display:flex;align-items:center;gap:14px;max-width:1180px;width:100%;}
.gd-scale span{font-size:12.5px;font-weight:800;color:var(--ink3);white-space:nowrap;}
.gd-scale span.on{color:var(--accentInk);}
.gd-scale-bar{flex:1 1 auto;height:6px;border-radius:99px;background:linear-gradient(90deg,var(--accent),var(--line2));}
.gd-coats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,18px);max-width:880px;width:100%;}
.gd-coat{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:clamp(14px,2.2vh,20px);text-align:center;}
.gd-coat b{display:block;margin-top:8px;font-size:clamp(13px,1.4vw,15px);font-weight:800;letter-spacing:-.01em;}

/* 끝 페이지 */
.gp-end{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;}
.gp-end-t{font-size:clamp(26px,3.6vw,42px);font-weight:800;letter-spacing:-.025em;line-height:1.12;text-wrap:balance;}
.gd-foot{font-size:13px;font-weight:600;color:var(--ink3);}

/* 네비게이션 */
.gd-nav{flex:0 0 auto;display:flex;align-items:center;justify-content:center;gap:clamp(14px,2vw,26px);
  padding:13px;border-top:1px solid var(--line);background:var(--surface);}
.gd-arrow{width:46px;height:46px;border-radius:50%;border:1.5px solid var(--line2);background:var(--surface);
  color:var(--ink);font-size:24px;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.14s;font-family:inherit;}
.gd-arrow:hover:not(:disabled){border-color:var(--accent);color:var(--accent);}
.gd-arrow:disabled{opacity:.3;cursor:default;}
.gd-arrow.next.cta{width:auto;border-radius:23px;padding:0 24px;background:var(--accent);color:#fff;border:none;font-size:15px;font-weight:800;}
.gd-arrow.next.cta:hover{background:var(--accent2);}
.gd-dots{display:flex;gap:9px;align-items:center;}
.gd-dot{width:9px;height:9px;border-radius:50%;background:var(--line2);border:none;cursor:pointer;transition:.16s;padding:0;}
.gd-dot.on{background:var(--accent);transform:scale(1.3);}

/* STEP02 매트릭스 (왜곡 + 눈 크기) */
.gp-s2{gap:clamp(12px,2vh,22px);}
.s2matrix{width:100%;max-width:1260px;display:grid;grid-template-columns:auto repeat(5,1fr);
  gap:clamp(6px,1vh,12px) clamp(7px,.9vw,13px);align-items:stretch;word-break:keep-all;}
.s2rowlab{display:flex;align-items:center;justify-content:flex-end;gap:5px;text-align:right;
  font-size:clamp(10px,1vw,12.5px);font-weight:800;color:var(--accentInk);padding-right:4px;max-width:96px;line-height:1.25;}
.s2rl-ic{color:var(--accent);font-size:13px;}
.s2colhead{display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center;justify-content:flex-end;padding-bottom:2px;}
.s2colhead .s2step{font-size:clamp(9.5px,.95vw,11px);font-weight:800;letter-spacing:.06em;color:#fff;background:var(--ink3);border-radius:99px;padding:2px 10px;white-space:nowrap;}
.s2colhead.hl .s2step{background:var(--accent);}
.s2colhead b{font-size:clamp(12px,1.35vw,15.5px);font-weight:800;letter-spacing:-.01em;color:var(--ink);}
.s2colhead.hl b{color:var(--accentInk);}
.s2cell{display:flex;flex-direction:column;align-items:center;gap:3px;background:var(--surface);
  border:1px solid var(--line);border-radius:12px;padding:clamp(6px,1vh,10px) clamp(5px,.7vw,9px);text-align:center;}
.s2cell.hl{border-color:var(--accent);background:var(--soft);}
.s2img{width:100%;height:auto;max-height:clamp(72px,12.5vh,142px);object-fit:contain;border-radius:8px;}
.s2img.grid{background:#fff;}

/* 살아 움직이는 왜곡 격자 (STEP1 출렁 → STEP5 직선) */
.s2grid{position:relative;display:block;width:100%;max-width:clamp(72px,12.5vh,142px);aspect-ratio:1/1;
  margin:0 auto;border-radius:9px;overflow:hidden;background:
  linear-gradient(180deg,#fbfdff,#eef4f8);border:1px solid var(--line);}
.s2cell.hl .s2grid{border-color:var(--accent);background:linear-gradient(180deg,#fff,#eaf7fd);}
.s2grid-svg{position:absolute;inset:9% ;width:82%;height:82%;overflow:visible;}
.s2g-line{fill:none;stroke:#9fb6c4;stroke-width:1.4px;vector-effect:non-scaling-stroke;stroke-linecap:round;}
.s2grid.lv1 .s2g-line,.s2grid.lv2 .s2g-line{stroke:#c98a63;}
.s2grid.lv5 .s2g-line{stroke:var(--accent);stroke-width:1.6px;}
.s2grid.lv4 .s2g-line{stroke:#6aa9c4;}
/* 이동하는 렌즈 링 */
.s2lens{position:absolute;top:50%;left:50%;width:62%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);border:1.5px solid rgba(60,90,105,.32);z-index:2;pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.4) inset;}
.s2grid.lv1 .s2lens,.s2grid.lv2 .s2lens{border-color:rgba(201,138,99,.42);}
.s2grid.lv5 .s2lens{border-color:rgba(0,174,239,.5);}
/* 고정된 초점(화면 중앙) */
.s2focus{position:absolute;left:50%;top:50%;width:13px;height:13px;transform:translate(-50%,-50%);z-index:3;pointer-events:none;}
.s2focus::before,.s2focus::after{content:'';position:absolute;background:rgba(20,40,50,.6);}
.s2focus::before{left:50%;top:0;width:1.5px;height:100%;transform:translateX(-50%);}
.s2focus::after{top:50%;left:0;height:1.5px;width:100%;transform:translateY(-50%);}
.s2cell.hl .s2focus::before,.s2cell.hl .s2focus::after{background:var(--accent);}
.s2img.eye{transform-origin:center center;will-change:transform;}
/* 눈 고정 + 안경렌즈가 지나며 축소 — 마이너스 렌즈 루페 효과 */
.s2eye{position:relative;display:block;width:100%;max-width:clamp(96px,16vh,180px);aspect-ratio:250/126;
  margin:0 auto;border-radius:9px;overflow:hidden;background:#fff;border:1px solid var(--line);}
.s2cell.hl .s2eye{border-color:var(--accent);}
.s2eye-base{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;}
.s2eye-lens{position:absolute;top:50%;left:50%;width:54%;aspect-ratio:1/1;border-radius:50%;
  transform:translate(-50%,-50%);overflow:hidden;z-index:2;
  border:1.5px solid rgba(90,120,140,.55);
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.65), inset 0 3px 10px rgba(40,70,90,.28), 0 3px 9px rgba(0,0,0,.2);
  animation:s2lensSweep 6.7s ease-in-out infinite;}
.s2eye-lens::after{content:'';position:absolute;left:14%;top:10%;width:42%;height:30%;border-radius:50%;
  background:linear-gradient(135deg,rgba(255,255,255,.85),rgba(255,255,255,0));pointer-events:none;}
.s2cell.hl .s2eye-lens{border-color:rgba(0,174,239,.6);}
.s2eye-inner{position:absolute;top:50%;left:50%;width:185%;height:93.3%;object-fit:cover;
  transform:translate(-50%,-50%) scale(var(--m,.9));transform-origin:center center;
  animation:s2innerSweep 6.7s ease-in-out infinite;}
@keyframes s2lensSweep{
  0%,50%,100%{transform:translate(-50%,-50%) translateX(0);}
  25%{transform:translate(-50%,-50%) translateX(var(--sh,14px));}
  75%{transform:translate(-50%,-50%) translateX(calc(-1*var(--sh,14px)));}
}
@keyframes s2innerSweep{
  0%,50%,100%{transform:translate(-50%,-50%) translateX(0) scale(var(--m,.9));transform-origin:50% 50%;}
  25%{transform:translate(-50%,-50%) translateX(calc(-1*var(--sh,14px))) scale(var(--m,.9));transform-origin:calc(50% + var(--sh,14px)) 50%;}
  75%{transform:translate(-50%,-50%) translateX(var(--sh,14px)) scale(var(--m,.9));transform-origin:calc(50% - var(--sh,14px)) 50%;}
}
.s2eye-lv1{--m:.72;--sh:15px;}
.s2eye-lv2{--m:.81;--sh:15px;}
.s2eye-lv3{--m:.88;--sh:15px;}
.s2eye-lv4{--m:.945;--sh:15px;}
.s2eye-lv5{--m:.99;--sh:15px;}
@media (prefers-reduced-motion:reduce){
  .s2eye-lens,.s2eye-inner{animation:none;}
}
@media (prefers-reduced-motion:reduce){ .s2grid-svg{} }
.s2t{font-size:clamp(10.5px,1.05vw,13px);font-weight:800;letter-spacing:-.01em;color:var(--ink);margin-top:2px;}
.s2cell.hl .s2t{color:var(--accentInk);}
.s2d{font-size:clamp(9px,.85vw,11px);font-weight:600;color:var(--ink3);line-height:1.32;text-wrap:pretty;}
.s2foot{font-size:clamp(12px,1.3vw,14.5px);font-weight:700;color:var(--ink2);text-align:center;text-wrap:balance;max-width:62em;}
@media (max-width:820px){
  .s2matrix{grid-template-columns:repeat(5,1fr);}
  .s2rowlab{display:none;}
  .gp-hero{grid-template-columns:1fr;gap:20px;} .gd-pillars{grid-template-columns:1fr;}
  .gd-coats{grid-template-columns:1fr;}
}

/* ===== 시야 비교 진입 버튼 ===== */
.cmp-fovbtn{display:inline-flex;align-items:center;gap:7px;padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:800;
  color:#fff;background:linear-gradient(135deg,var(--accent),var(--accent2));border:none!important;white-space:nowrap;transition:.14s;
  box-shadow:0 6px 16px -7px rgba(0,148,204,.8);}
.cmp-fovbtn svg{width:16px;height:16px;}
.cmp-fovbtn:hover{filter:brightness(1.06);transform:translateY(-1px);}

/* ===== 시야 시뮬레이터 (FOV) ===== */
.fov-app{width:100vw;height:100vh;display:flex;flex-direction:column;overflow:hidden;
  background:radial-gradient(120% 90% at 50% 0%,#163041 0%,#0c1b25 55%,#081218 100%);color:#eaf4f8;
  font-family:var(--font);-webkit-font-smoothing:antialiased;}
.fov-app button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
.fov-defs{position:absolute;width:0;height:0;}

.fov-top{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:1.5vh 2.4vw 1vh;flex:0 0 auto;z-index:5;}
.fov-brand{display:flex;align-items:center;gap:14px;}
.fov-logo{height:clamp(26px,2.7vh,32px);width:auto;filter:brightness(0) invert(1);opacity:.95;}
.fov-kicker{font-size:11px;letter-spacing:.24em;color:var(--accent);font-weight:800;}
.fov-title{font-size:clamp(18px,2.1vh,23px);font-weight:800;letter-spacing:-.02em;margin-top:2px;white-space:nowrap;}
.fov-top-r{display:flex;align-items:center;gap:12px;}
.fov-top-r .cmp-lang-trigger{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);color:#eaf4f8;}
.fov-back{padding:8px 14px;border-radius:10px;font-size:12.5px;font-weight:800;color:#cfe6ef;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)!important;white-space:nowrap;transition:.14s;}
.fov-back:hover{background:rgba(255,255,255,.16);}

.fov-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;gap:clamp(20px,2.6vw,46px);padding:0 2.4vw;}
.fov-lens-wrap{display:flex;flex-direction:column;align-items:center;gap:14px;}
.fov-lens{position:relative;height:min(50vh,33vw);aspect-ratio:5/4;border-radius:50%/44%;overflow:hidden;isolation:isolate;
  background:#0a141a;box-shadow:0 34px 70px -26px rgba(0,0,0,.75);}
.fov-scene{position:absolute;inset:-2px;background-size:cover;background-position:center;}
.fov-scene.base{z-index:1;}
.fov-scene.blur{z-index:2;}
.fov-scene.ca{z-index:3;mix-blend-mode:screen;opacity:.85;}
.fov-grid{position:absolute;inset:0;width:100%;height:100%;z-index:4;pointer-events:none;}
.fov-grid path{fill:none;stroke:rgba(255,255,255,.34);stroke-width:1.1px;vector-effect:non-scaling-stroke;}
.fov-vig{position:absolute;inset:0;z-index:5;pointer-events:none;}
.fov-ring{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:6;
  border:1.5px dashed rgba(255,255,255,.55);border-radius:50%;pointer-events:none;}
.fov-clearlab{position:absolute;left:50%;transform:translateX(-50%);z-index:7;font-size:10.5px;font-weight:700;
  letter-spacing:.08em;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;white-space:nowrap;}
.fov-lens::after{content:'';position:absolute;inset:0;border-radius:inherit;z-index:8;pointer-events:none;
  box-shadow:inset 0 0 0 4px rgba(255,255,255,.42), inset 0 0 60px rgba(0,0,0,.35), inset 0 6px 24px rgba(255,255,255,.18);}
.fov-lens.prem::after{box-shadow:inset 0 0 0 4px rgba(0,174,239,.7), inset 0 0 60px rgba(0,40,60,.35), inset 0 6px 24px rgba(120,220,255,.25);}

.fov-vs{align-self:center;flex:0 0 auto;}
.fov-vs span{display:grid;place-items:center;width:clamp(40px,3vw,54px);height:clamp(40px,3vw,54px);border-radius:50%;
  font-size:clamp(13px,1.1vw,16px);font-weight:900;letter-spacing:.04em;color:#0c1b25;background:#eaf4f8;box-shadow:0 8px 20px -8px rgba(0,0,0,.6);}

.fov-meta{width:min(50vh,33vw);text-align:center;}
.fov-meta-head{display:flex;flex-direction:column;align-items:center;gap:1px;}
.fov-side{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);white-space:nowrap;}
.fov-lens.prem ~ .fov-meta .fov-side,.fov-lens-wrap:last-child .fov-side{color:var(--accent);}
.fov-pname{font-size:clamp(16px,1.7vw,21px);font-weight:800;letter-spacing:-.01em;white-space:nowrap;}
.fov-pkr{font-size:12px;color:#a9c2cd;font-style:normal;white-space:nowrap;}
.fov-cf{display:flex;align-items:center;justify-content:center;gap:9px;margin-top:9px;}
.fov-cf-bar{width:42%;height:7px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden;}
.fov-cf-bar i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent2),var(--accent));transition:width .35s ease;}
.fov-cf-num{font-size:18px;font-weight:900;letter-spacing:-.02em;}
.fov-cf-num small{font-size:11px;font-weight:700;opacity:.7;margin-left:1px;}
.fov-cf-lab{font-size:11.5px;color:#a9c2cd;font-weight:700;white-space:nowrap;}
.fov-price{margin-top:5px;display:flex;align-items:baseline;justify-content:center;gap:7px;font-size:12px;color:#a9c2cd;}
.fov-price b{font-size:15px;font-weight:800;color:#eaf4f8;}
.fov-price small{font-size:11px;font-weight:700;opacity:.8;margin-left:1px;}

.fov-ctl{flex:0 0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:stretch;gap:clamp(14px,1.6vw,28px);
  padding:1.2vh 2.4vw;background:rgba(255,255,255,.05);border-top:1px solid rgba(255,255,255,.1);}
.fov-ctl-cell{display:flex;flex-direction:column;gap:6px;justify-content:center;}
.fov-ctl-lab{font-size:11px;font-weight:800;letter-spacing:.04em;color:#a9c2cd;}
.fov-select{font-family:inherit;font-size:14px;font-weight:700;color:#0c1b25;background:#eaf4f8;border:none;border-radius:11px;
  padding:11px 14px;cursor:pointer;appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475862' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;background-size:16px;padding-right:36px;}
.fov-ctl-rx{min-width:clamp(260px,24vw,360px);display:flex;flex-direction:column;gap:7px;padding:10px 16px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:14px;}
.fov-rx-head{display:flex;align-items:center;justify-content:space-between;gap:10px;}
.fov-rx-lab{font-size:12px;font-weight:800;color:#eaf4f8;}
.fov-rx-toggle{font-size:11px;font-weight:800;color:var(--accent);background:rgba(0,174,239,.14);
  border:1px solid rgba(0,174,239,.3)!important;border-radius:8px;padding:5px 9px;transition:.14s;}
.fov-rx-toggle.on{color:#0c1b25;background:var(--accent);}
.fov-slider{display:flex;align-items:center;gap:10px;}
.fov-slider[data-dim="lock"]{opacity:.85;}
.fov-sl-name{font-size:11px;font-weight:800;letter-spacing:.06em;color:#a9c2cd;width:30px;flex:0 0 auto;}
.fov-slider input[type=range]{flex:1 1 auto;-webkit-appearance:none;appearance:none;height:5px;border-radius:99px;
  background:rgba(255,255,255,.2);cursor:pointer;}
.fov-slider input[type=range]:disabled{cursor:default;}
.fov-slider input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:18px;height:18px;border-radius:50%;
  background:var(--accent);box-shadow:0 2px 6px rgba(0,0,0,.5);border:2px solid #eaf4f8;}
.fov-slider input[type=range]::-moz-range-thumb{width:18px;height:18px;border-radius:50%;background:var(--accent);border:2px solid #eaf4f8;}
.fov-sl-val{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums;width:54px;text-align:right;flex:0 0 auto;}
.fov-power{font-size:12px;color:#a9c2cd;font-weight:700;}
.fov-power b{color:#eaf4f8;font-weight:900;font-variant-numeric:tabular-nums;}

.fov-foot{flex:0 0 auto;display:flex;align-items:center;gap:clamp(14px,2vw,30px);padding:1vh 2.4vw;
  border-top:1px solid rgba(255,255,255,.08);}
.fov-chk{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:700;color:#cfe6ef;cursor:pointer;}
.fov-chk input{width:16px;height:16px;accent-color:var(--accent);cursor:pointer;}
.fov-int{display:flex;align-items:center;gap:6px;font-size:12px;color:#a9c2cd;font-weight:700;}
.fov-int button{font-size:12px;font-weight:800;color:#cfe6ef;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16)!important;border-radius:8px;padding:6px 12px;transition:.14s;}
.fov-int button.on{color:#0c1b25;background:var(--accent);border-color:var(--accent)!important;}
.fov-note{margin-left:auto;font-size:11.5px;color:#7e98a3;}

@media (max-aspect-ratio:121/100){
  .fov-lens{height:min(46vh,36vw);}
  .fov-meta{width:min(46vh,36vw);}
  .fov-stage{gap:clamp(14px,2vw,30px);}
}