/* 2026-10-27 major-6 feedback — Lens page only (FEEDBACK §5).
   Loaded from pages/lens/index.html. Later shared layers (system-1018, typography-normalized, major6)
   are injected after this file, so selectors are prefixed with `html body` where they must win. */

/* 5-2 GNB 하단 서브메뉴: 공통 서브메뉴(major6 D안)가 경로·같은 단계 메뉴와 섹션 바로가기(section-progress 링크)를 한 줄로 대신한다 */
html body .site-header .section-progress{display:none!important}

/* 서브메뉴 고정 높이만큼 앵커 위치 보정 */
html body #main section[id]{scroll-margin-top:172px}
@media (max-width:799px){html body #main section[id]{scroll-margin-top:128px}}

/* 5-1 Hero: 검사·수술·일상복귀 — 2026-10-27 통일: 기존 시력교정 히어로 메타(.bv-hero .bv-meta) 부품 그대로
   흰 면 + 카드 그림자, 120px 칸 3개 간격 12, 아이콘 22 위 → 항목명 14/600 검정 → 값 12.5 회색, 가운데 정렬 */
html body #main .m6-surgery-facts{display:flex;flex-wrap:nowrap;gap:12px;width:100%;margin:clamp(32px,4vw,44px) 0 0;padding:0;list-style:none}
html body #main .m6-surgery-facts li{flex:0 1 120px;min-width:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:0;margin:0;padding:22px 6px;background:#fff;box-shadow:0 6px 18px rgba(17,17,16,.08),0 1px 3px rgba(17,17,16,.05)}
html body #main .m6-surgery-facts svg{width:22px;height:22px;flex:none;color:#323232}
html body #main .m6-fact-label{margin-top:10px;font-size:14px;font-weight:600;line-height:1.2;letter-spacing:-.02em;color:#111110}
html body #main .m6-fact-value{margin-top:4px;font-size:12.5px;font-weight:400;line-height:1.5;letter-spacing:-.01em;color:#6f6e69;word-break:keep-all}
html body #main .m6-fact-value .m6-todo{white-space:normal;font-size:11px}
@media (max-width:799px){
  html body #main .m6-surgery-facts{gap:8px;margin-top:28px}
  html body #main .m6-surgery-facts li{flex:1 1 0;padding:18px 4px}
}

/* 5-3 수술 계획 카드: X/+ 아이콘 → 위·아래 Chevron (접힘=아래, 펼침=위) */
html body #main #planning .square-toggle .plus-bars{display:none}
html body #main #planning .square-toggle::before{content:"";display:block;width:8px;height:8px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
html body #main #planning .square-toggle[aria-expanded=true]::before{transform:translateY(2px) rotate(-135deg)}
@media (max-width:799px){
  /* 모바일 기본 모두 펼침: 시스템 기본 높이 규칙을 그대로 쓰되, 접힌 카드만 0 */
  html body #main #planning.planning-mobile .square-toggle{display:grid!important}
}

/* 5-4 고정 두 수술 비교표: 강조선 민트 → Black */
html body #main #comparison .comparison-title{border-bottom-color:#111110!important}

/* 5-5 고객후기 (스타 / 인플루언서 / 의료진) */
html body #main .m6-lens-reviews .section-heading{text-align:center;margin-inline:auto}
/* 10/28 사용자 지시: 탭 = 메인 '비앤빛 이야기' 글자 탭(15px 회색 400 → 선택 검정 700, gap 32, .bv-textbtn 호버 면), 탭 왼쪽 + 오른쪽 넘김 버튼(메인 '고객 리뷰' 40px 네모, 간격 6),
   카드 = 메인 스타후기 카드(.bv-celeb 232×316, 하단 그늘 + 이름·직업·수술명, 호버 블러 띠 + → 칩), 콘텐츠 폭 가로 스크롤, 넘기면 왼쪽 가장자리 페이드(메인 스타 띠와 같은 폭) */
html body #main .m6r-bar{display:flex;align-items:center;justify-content:space-between;gap:24px;margin:0 0 40px}
html body #main .m6r-tabs{display:flex;gap:32px;min-width:0;overflow-x:auto;scrollbar-width:none;padding:7px 14px;margin:-7px -14px}
html body #main .m6r-tabs::-webkit-scrollbar{display:none}
html body #main .m6r-tabs [role=tab]{position:relative;isolation:isolate;flex:none;padding:7px 14px;margin:-7px -14px;border:0;border-radius:0;background:transparent;font-family:inherit;white-space:nowrap;font-size:clamp(14px,1.3vw,15px);line-height:26px;font-weight:400;color:#8a8984;cursor:pointer;transition:color .2s}
html body #main .m6r-tabs [role=tab]::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(17,17,16,.08);opacity:0;transform:scale(.9);transition:opacity .25s cubic-bezier(.4,0,.2,1),transform .3s cubic-bezier(.2,.8,.2,1)}
html body #main .m6r-tabs [role=tab]:is(:hover,:focus-visible){color:#111110}
html body #main .m6r-tabs [role=tab]:is(:hover,:focus-visible)::before{opacity:1;transform:scale(1)}
html body #main .m6r-tabs [role=tab][aria-selected=true]{color:#111110;font-weight:700}
html body #main .m6r-nav{display:flex;gap:6px;flex:none}
html body #main .m6r-arrow{display:grid;place-items:center;width:40px;height:40px;padding:0;border:1px solid #111110;border-radius:0;background:transparent;color:#111110;cursor:pointer;transition:background .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),opacity .2s}
html body #main .m6r-arrow:not(:disabled):is(:hover,:focus-visible){background:#111110;color:#fff}
html body #main .m6r-arrow:disabled{opacity:.35;cursor:default}
html body #main .m6r-chev{display:block;width:8px;height:8px;border-top:1.5px solid currentColor}
html body #main .m6r-chev-prev{border-left:1.5px solid currentColor;transform:translateX(1.5px) rotate(-45deg)}
html body #main .m6r-chev-next{border-right:1.5px solid currentColor;transform:translateX(-1.5px) rotate(45deg)}
html body #main .m6r-track{display:flex;gap:24px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;overscroll-behavior-x:contain}
html body #main .m6r-track::-webkit-scrollbar{display:none}
html body #main .m6r-track.is-scrolled{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,7vw,120px));mask-image:linear-gradient(90deg,transparent 0,#000 clamp(40px,7vw,120px))}
html body #main .m6r-track .bv-celeb{position:relative;display:block;flex:none;width:clamp(180px,18vw,232px);height:clamp(240px,24vw,316px);overflow:hidden;background:#f0efec;border-radius:0;color:#fff;text-decoration:none;scroll-snap-align:start}
html body #main .m6r-track .bv-celeb>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
html body #main .bv-celeb-shade{position:absolute;inset:0;background:linear-gradient(180deg,#00000000 46%,#00000099 100%)}
html body #main .m6r-track .bv-celeb-fill{position:absolute;left:0;right:0;bottom:0;height:156px;display:flex;align-items:flex-end;justify-content:flex-end;padding:0 16px 16px;background:linear-gradient(180deg,rgba(0,0,0,0),rgba(0,0,0,.28));-webkit-backdrop-filter:blur(12px) saturate(1.1);backdrop-filter:blur(12px) saturate(1.1);-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 46%);mask-image:linear-gradient(180deg,transparent 0,#000 46%);color:#fff;font-size:13px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .3s cubic-bezier(.4,0,.2,1)}
html body #main .m6r-track .bv-celeb-fill b{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;background:#111110;color:#fff;font-size:12px;font-weight:600}
html body #main .m6r-track .bv-celeb-fill i{font-style:normal;font-size:13px;line-height:1;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
html body #main .m6r-track a.bv-celeb:is(:hover,:focus-visible) .bv-celeb-fill{opacity:1}
html body #main .m6r-track a.bv-celeb:is(:hover,:focus-visible) .bv-celeb-fill i{transform:translateX(2px)}
html body #main .bv-celeb-text{position:absolute;left:0;right:0;bottom:0;padding:0 20px 20px}
html body #main .bv-celeb-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 8px}
html body #main .bv-celeb-line strong{font-size:17px;font-weight:600;letter-spacing:-.02em;white-space:nowrap}
html body #main .bv-celeb-line small{font-size:12px;color:#ffffffb3;white-space:nowrap}
html body #main .bv-celeb-surgery{display:block;margin-top:6px;font-size:12px;color:#ffffffcc}
html body #main .m6r-track .bv-celeb.m6r-dummy{background:#e4e3df;cursor:default} /* 더미 카드: 사진 전 회색, 같은 하단 그늘·글자 */
html body #main .m6r-track .bv-celeb.m6r-dummy>img{object-position:50% 20%}
html body #main .m6r-more{text-align:center;margin-top:clamp(28px,3.4vw,40px)}
html body #main .m6r-more-link{display:inline-flex;align-items:center;gap:10px;font-size:14px;font-weight:700;color:#111110;text-decoration:none;cursor:pointer}
html body #main .m6r-plus{position:relative;display:grid;place-items:center;width:28px;height:28px;border:1px solid #111110;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1)}
html body #main .m6r-plus::before,html body #main .m6r-plus::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:currentColor;translate:-50% -50%}
html body #main .m6r-plus::after{rotate:90deg}
html body #main .m6r-more-link:hover .m6r-plus,html body #main .m6r-more-link:focus-visible .m6r-plus{background:#111110;color:#fff}
@media (max-width:799px){
  html body #main .m6r-nav{display:none} /* 메인 고객 리뷰와 같이 모바일은 손가락 넘김 */
  html body #main .m6r-bar{margin-bottom:40px;justify-content:center} /* 10/28: 모바일 탭 가운데 정렬 */
  html body #main .m6r-tabs{justify-content:center}
  html body #main .m6r-track .bv-celeb small{font-size:13px} /* 메인 모바일 스타 카드와 같음 */
}

/* 5-6 의학정보 감수: 공통 규칙(FAQ 폭 960, 구분선 없음) 사용 */

/* 5-8 수술 전·후 주의사항 — 2026-10-27 통일: 기존 주의사항 패널(#precautions .precaution-panel, shared/precautions.css)과
   기존 테두리 버튼(.bv-dir-btn 46px)을 그대로 쓰고 버튼만 2개(같은 URL, 탭 파라미터). 글자 내용 너비. */
html body #main #precautions .m6-precaution-actions{display:flex;flex-wrap:wrap;gap:8px;flex:none}
@media (max-width:799px){
  html body #main #precautions .m6-precaution-actions{margin-top:24px}
  html body #main #precautions .m6-precaution-actions .bv-dir-btn{margin-top:0}
}

@media (prefers-reduced-motion:reduce){
  html body #main #planning .square-toggle::before,html body #main .m6r-tabs [role=tab],html body #main .m6r-tabs [role=tab]::before,html body #main .m6r-arrow,html body #main .bv-celeb-fill,html body #main .bv-celeb-fill i,html body #main .m6r-plus{transition:none}html body #main .m6r-track{scroll-behavior:auto}
}

/* 2026-10-27 통일: 상담·예약 CTA는 제목이 있는 독립 섹션 → 시력교정 허브와 같은 공통 섹션 간격(clamp 120~200).
   기존 상담 바용 #consultation 간격(40~64, 관련 이야기에 붙는 바)을 덮어씀 */
html body #main #consultation.m6-cta{margin-top:clamp(120px,14vw,200px)}

/* 10/27 HIGH 수정: 마지막 블록(#precautions)이 푸터에 붙던 것 → 다른 페이지와 같은 푸터 위 간격 clamp(96,12vw,168) */
html body #main>#precautions:last-child{margin-bottom:clamp(96px,12vw,168px)}

/* 10/28 렌즈 Hero 이미지(수술 현미경 + 의료진). 흰 덮개를 시력교정 허브와 같은 위치로: 허브는 히어로 전체 폭 기준 0~50% 흰색 → 100% 투명,
   렌즈는 덮개가 이미지 박스(오른쪽 62%)에 걸려 있어 같은 지점으로 환산(50%→19.4%, 62%→38.7%, 80%→67.7%). 피사체가 오른쪽이라 오른쪽 맞춤 */
.hero-visual>picture{display:contents}
@media(min-width:800px){
  html body #main .cover.hero .hero-visual::after{background:linear-gradient(90deg,#fff 0%,#fff 19.4%,#ffffffcc 38.7%,#ffffff55 67.7%,#fff0 100%)} /* system-1018.css 공통 규칙보다 한 단계 높게 */
  html body #main .cover.hero .hero-image{object-position:75% 50%}
}
/* 10/28 모바일 Hero: 시력교정 허브 모바일과 같은 방식. 글·카드 아래 사진 띠, 위쪽을 흰 안개로 풀어 위 내용과 살짝 겹쳐 잇는다(허브는 메타와 20px 겹침) */
@media(max-width:799px){
  html body #main .cover.hero .hero-copy{position:relative;z-index:1}
  html body #main .cover.hero .hero-visual{position:relative;z-index:0;margin-top:-52px}
  html body #main .cover.hero .hero-visual::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,#ffffff 0%,#ffffffe6 16%,#ffffff80 32%,#ffffff00 52%)}
}

/* 10/28 후기 탭(메인 '비앤빛 이야기' 탭과 같은 디자인): 회색 배경 제거, 마우스 올림은 글자색만, 키보드 포커스는 외곽선 */
html body #main .m6r-tabs [role=tab]::before{content:none}
html body #main .m6r-tabs [role=tab]:focus-visible{outline:2px solid #087b85;outline-offset:2px}