/* =============================================================
   선글라스 비교표 — 가이드 전용 추가 스타일
   (compare/styles.css 다음에 로드 · 변수 재사용)
   ============================================================= */

/* 컬럼 헤더 — 등급명은 전체폭 한 줄, 리본은 우상단 고정 */
.cmp-chd{position:relative;}
.cmp-chd .cmp-cname{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;}
.sg-ribbon-abs{position:absolute;top:10px;right:14px;z-index:2;}

/* 탭이 많아도(9종) 헤더 안에서 우측 정렬·줄바꿈 */
.cmp-top-r{flex-wrap:wrap;justify-content:flex-end;}
.cmp-tiers{flex-wrap:wrap;justify-content:flex-end;gap:5px;padding:4px;}
.cmp-tier{padding:6px 11px;}
.cmp-tier span{font-size:9.5px;}
@media (max-width:1500px){
  .cmp-tier{padding:5px 9px;font-size:12.5px;}
  .cmp-tier span{font-size:9px;}
}

/* 변종 토글(단초점/누진 · 여벌/STRX/RX) */
.sg-subtabs{display:inline-flex;gap:4px;background:var(--surface);border:1px solid var(--line2);
  border-radius:10px;padding:3px;flex:0 0 auto;}
.sg-subtab{font-family:inherit;padding:5px 14px;border-radius:7px;font-size:12.5px;font-weight:800;
  color:var(--ink2);white-space:nowrap;border:none;background:none;cursor:pointer;transition:.12s;}
.sg-subtab:hover{color:var(--ink);}
.sg-subtab.on{background:var(--accent);color:#fff;box-shadow:0 3px 9px -4px rgba(0,148,204,.7);}

/* 렌즈 곡률 비교 사진 (안면각 페이지) */
.sg-curve{display:grid;grid-template-columns:1fr 1fr;gap:clamp(12px,1.4vw,22px);width:100%;max-width:760px;}
.sg-curve-c{display:flex;flex-direction:column;gap:8px;background:var(--surface);border:1px solid var(--line);
  border-radius:16px;padding:clamp(10px,1.4vh,16px);box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.sg-curve-c.hl{border-color:var(--accent);box-shadow:0 14px 32px -14px rgba(0,174,239,.45);}
.sg-curve-img{display:block;width:100%;aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:var(--bg2);font-size:12px;}
.sg-curve-img image-slot{display:block;width:100%;height:100%;}
.sg-curve-c b{font-size:clamp(13px,1.3vw,16px);font-weight:800;color:var(--ink);text-align:center;}
.sg-curve-c.hl b{color:var(--accentInk);}

/* 제목·푸터가 길어도 한 줄 유지(다국어) */
.cmp-top .cmp-title{white-space:nowrap;}
.cmp-foot{flex-wrap:wrap;row-gap:2px;}
.cmp-foot-l{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62%;}
.cmp-foot-r{white-space:nowrap;}

/* 단일 카드 컬럼이 비지 않도록 능력치를 세로 중앙 정렬 */
.cmp-card .cmp-skill{justify-content:center;}
@container (min-width:215px){ .cmp-card .cmp-skill{align-items:center;} }

/* 안면각 카드 3종 */
.sg-angles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(12px,1.4vw,22px);width:100%;max-width:1100px;}
.sg-angle{background:var(--surface);border:1px solid var(--line);border-radius:18px;
  padding:clamp(16px,2.4vh,26px) clamp(14px,1.5vw,24px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(7px,1.1vh,13px);box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.sg-angle.hl{border-color:var(--accent);box-shadow:0 14px 32px -14px rgba(0,174,239,.5);}
.sg-angle b{font-size:clamp(16px,1.7vw,21px);font-weight:800;letter-spacing:-.01em;color:var(--ink);
  line-height:1.2;word-break:keep-all;text-align:center;}
.sg-angle.hl b{color:var(--accentInk);}
.sg-angle-d{font-size:clamp(11.5px,1.15vw,14px);font-weight:600;color:var(--ink2);text-align:center;
  line-height:1.45;text-wrap:pretty;word-break:keep-all;}

/* 안면각 시각화 — 밑변(시선) + 위로 벌어진 광선(렌즈면) */
.sg-angle-vis{position:relative;width:100%;height:clamp(58px,7vh,82px);}
.sg-angle-baseline{position:absolute;left:14%;width:62%;bottom:26%;height:2.5px;border-radius:3px;background:var(--line2);}
.sg-angle-ray{position:absolute;left:14%;bottom:26%;width:52%;height:3px;border-radius:3px;transform-origin:left center;
  background:linear-gradient(90deg,var(--accent),var(--accent2));}
.sg-angle.hl .sg-angle-ray{box-shadow:0 0 0 3px rgba(0,174,239,.14);}
.sg-angle-vis::before{content:"";position:absolute;left:14%;bottom:26%;width:11px;height:11px;border-radius:50%;
  background:var(--accent);transform:translate(-50%,50%);}
.sg-angle-deg{position:absolute;right:6%;top:4%;font-size:clamp(16px,1.8vw,23px);font-weight:900;
  letter-spacing:-.02em;color:var(--accentInk);}
.sg-angle.hl .sg-angle-deg{color:var(--accent);}

/* 등급 사다리 5종 */
.sg-grades{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(8px,1vw,16px);width:100%;max-width:1180px;
  align-items:end;}
.sg-grade{background:var(--surface);border:1px solid var(--line);border-radius:16px;
  padding:clamp(12px,2vh,20px) clamp(8px,.9vw,16px);display:flex;flex-direction:column;align-items:center;
  gap:clamp(5px,.9vh,9px);text-align:center;box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.sg-grade.hl{border-color:var(--gold);box-shadow:0 16px 34px -22px rgba(232,163,61,.7);background:var(--surface);}
.sg-grade-lvl{display:flex;gap:3px;width:100%;}
.sg-grade-lvl i{flex:1 1 0;height:5px;border-radius:99px;background:var(--line);}
.sg-grade-lvl i.on{background:var(--accent);}
.sg-grade.hl .sg-grade-lvl i.on{background:var(--gold);}
.sg-grade b{font-size:clamp(13px,1.4vw,18px);font-weight:800;letter-spacing:-.01em;color:var(--ink);white-space:nowrap;}
.sg-grade.hl b{color:var(--goldInk);}
.sg-grade-d{font-size:clamp(10.5px,1.05vw,13px);font-weight:600;color:var(--ink2);line-height:1.4;
  text-wrap:pretty;word-break:keep-all;}

@media (max-width:820px){
  .sg-angles{grid-template-columns:1fr;}
  .sg-grades{grid-template-columns:1fr;align-items:stretch;}
}

/* 등급 페이지 — 헤드+사다리+최적화 도식을 세로 중앙 정렬 */
.gp-grades{justify-content:center;gap:clamp(16px,2.6vh,30px);}

/* ===== 최적화 도식: 등급↑ → 불편(어지럼·울렁임·착용감)↓ ===== */
.sg-optfig{width:100%;max-width:1180px;display:flex;flex-direction:column;gap:clamp(12px,2vh,20px);}

.sg-optfig-chart{position:relative;width:100%;
  background:linear-gradient(180deg,var(--surface),color-mix(in oklab,var(--surface) 88%,var(--bg2)));
  border:1px solid var(--line);border-radius:18px;
  padding:clamp(12px,1.8vh,20px) clamp(14px,1.6vw,26px) clamp(8px,1.2vh,12px);
  box-shadow:0 2px 14px -8px rgba(8,20,26,.12);}
.sg-optfig-svg{display:block;width:100%;height:auto;aspect-ratio:1000/230;overflow:visible;}
.sg-optfig-grid{stroke:var(--line);stroke-width:1.2;stroke-dasharray:2 8;}
.sg-optfig-guide{stroke:var(--line2);stroke-width:1.2;stroke-dasharray:3 6;opacity:.5;}
.sg-optfig-dot{fill:var(--surface);stroke:var(--accent);stroke-width:4;}
.sg-optfig-dot.hl{stroke:var(--gold);}

.sg-optfig-yhi,.sg-optfig-ylo{position:absolute;z-index:2;font-size:clamp(11px,1.1vw,13px);font-weight:800;
  letter-spacing:-.01em;display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:999px;
  background:var(--surface);border:1px solid var(--line);white-space:nowrap;}
.sg-optfig-yhi{top:clamp(12px,1.8vh,20px);left:clamp(16px,1.7vw,28px);color:var(--goldInk);
  border-color:color-mix(in oklab,var(--gold) 55%,var(--line));
  background:color-mix(in oklab,var(--gold) 12%,var(--surface));}
.sg-optfig-ylo{bottom:clamp(30px,5vh,46px);right:clamp(16px,1.7vw,28px);color:var(--ink2);}
.sg-optfig-yhi svg,.sg-optfig-ylo svg{width:14px;height:14px;}

.sg-optfig-xaxis{display:flex;justify-content:space-between;align-items:center;
  font-size:clamp(11px,1.1vw,13.5px);font-weight:800;color:var(--ink3);padding:0 4px;letter-spacing:-.01em;
  white-space:nowrap;}
.sg-optfig-xaxis .hl{color:var(--goldInk);}

/* 최적화가 줄여 주는 불편 3가지 */
.sg-opthd{display:flex;align-items:center;gap:9px;font-size:clamp(13px,1.35vw,16px);font-weight:800;
  color:var(--ink);letter-spacing:-.01em;}
.sg-opthd::before{content:"";width:18px;height:3px;border-radius:3px;background:var(--accent);}
.sg-optlist{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,18px);}
.sg-optitem{display:flex;gap:clamp(10px,1vw,14px);align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:14px;padding:clamp(12px,1.6vh,18px) clamp(13px,1.3vw,20px);
  box-shadow:0 2px 12px -6px rgba(8,20,26,.10);}
.sg-opticon{flex:0 0 auto;width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);border-radius:12px;
  display:grid;place-items:center;background:var(--bg2);color:var(--accent);}
.sg-opticon svg{width:58%;height:58%;}
.sg-opttx{display:flex;flex-direction:column;gap:3px;min-width:0;}
.sg-opttx b{font-size:clamp(14px,1.4vw,17px);font-weight:800;color:var(--ink);letter-spacing:-.01em;}
.sg-opttx span{font-size:clamp(11.5px,1.1vw,13.5px);font-weight:600;color:var(--ink2);line-height:1.45;
  text-wrap:pretty;word-break:keep-all;}

@media (max-width:820px){
  .sg-optlist{grid-template-columns:1fr;}
}

/* ===== 변색 핵심 비교 요소 띠 (속도·농도·투명도) ===== */
.sg-focus{display:flex;align-items:center;gap:clamp(12px,1.4vw,22px);margin:0 2.4vw .8vh;
  padding:8px 20px;border-radius:13px;flex:0 0 auto;
  background:linear-gradient(90deg,var(--goldSoft),var(--bg2));
  border:1px solid color-mix(in oklab,var(--gold) 28%,var(--line));}
.sg-focus-head{flex:0 0 auto;font-size:clamp(11.5px,1.15vw,13.5px);font-weight:800;color:var(--goldInk);
  letter-spacing:-.01em;line-height:1.2;max-width:14ch;word-break:keep-all;}
.sg-focus-items{flex:1 1 auto;display:grid;grid-template-columns:repeat(3,1fr);
  gap:clamp(10px,1.2vw,20px);min-width:0;}
.sg-focus-it{position:relative;display:flex;align-items:center;gap:clamp(8px,.8vw,12px);min-width:0;}
.sg-focus-sep{position:absolute;right:calc(-1 * clamp(5px,.6vw,10px));top:50%;transform:translateY(-50%);
  width:1px;height:62%;background:var(--line2);}
.sg-focus-ic{flex:0 0 auto;width:clamp(30px,2.4vw,38px);height:clamp(30px,2.4vw,38px);border-radius:10px;
  display:grid;place-items:center;background:var(--surface);color:var(--gold);
  border:1px solid color-mix(in oklab,var(--gold) 30%,var(--line));}
.sg-focus-ic svg{width:56%;height:56%;}
.sg-focus-tx{display:flex;flex-direction:column;gap:1px;min-width:0;}
.sg-focus-tx b{font-size:clamp(12.5px,1.25vw,15px);font-weight:800;color:var(--ink);letter-spacing:-.01em;
  line-height:1.15;white-space:nowrap;}
.sg-focus-tx span{font-size:clamp(10px,.92vw,12px);font-weight:600;color:var(--ink2);line-height:1.32;
  text-wrap:pretty;word-break:keep-all;}

@media (max-width:980px){
  .sg-focus{flex-wrap:wrap;gap:8px;}
  .sg-focus-head{flex:1 1 100%;max-width:100%;}
  .sg-focus-tx span{display:none;}
}