/* 2026-10-27 major-6 feedback — shared components (Claude Code).
   m6-subnav (GNB 하단 서브메뉴) · m6-review (의학정보 감수) · m6-cta (전화상담 + 예약) · m6-simple-cta (단일 검사예약)
   Tokens follow components/README.md: radius 0, ink #111110, mint #0FDFDD only for actions/indicators, black text on mint. */
:root{--m6-ink:#111110;--m6-mint:#0FDFDD;--m6-mint-light:#BAFDFE;--m6-text-2:#6f6e69;--m6-text-3:#8a8984;--m6-line:#e5e5e5;--m6-line-2:#d6d5d0;--m6-surface:#f5f5f5;--m6-error:#d9442f;--m6-top:104px;--m6-w:min(1044px,calc(100% - clamp(36px,5.6vw,80px)))}
@media (max-width:799px){:root{--m6-top:76px}}

/* GNB 하단 서브메뉴·토스트 규칙은 major6-subnav.css로 분리(서비스 페이지와 공유, 10/28) */
/* 10/28 모바일 헤더는 모든 페이지에서 화면 폭 카드(양옆 10px)로 통일 — 알약(max-content) 폭 사용 안 함. 로고 왼쪽, 도구 오른쪽 */
@media (max-width:900px){html body :is(header.bv-dock-wrap,header.site-header) :is(.bv-dock,.dock){grid-template-columns:minmax(0,1fr) auto!important}}
@media (max-width:799px){
  html body :is(header.bv-dock-wrap,header.site-header).bv-dock-wrap,html body :is(header.bv-dock-wrap,header.site-header).site-header{width:calc(100vw - 20px)!important;max-width:none!important}
  html body header.bv-dock-wrap .bv-dock{width:100%}
  html body :is(header.bv-dock-wrap,header.site-header) :is(.bv-dock-tools,.tools){margin-left:auto} /* 홈(.bv-dock flex)도 도구를 오른쪽 끝으로 */
}

/* 의학정보 감수 */
/* 2026-10-27 통일: 바로 위 FAQ(960) 글 폭에 맞춤. 기준 컴포넌트에 없는 위·아래 구분선은 넣지 않음(임의 구분선 금지) */
.m6-review{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;width:min(960px,calc(100% - clamp(36px,5.6vw,80px)));margin:clamp(40px,5vw,64px) auto 0;padding:0;border:0;font:400 13px/1.6 'Pretendard Variable',Pretendard,system-ui,sans-serif;color:var(--m6-text-2)}
.m6-review b{font-weight:600;color:var(--m6-ink)}
.m6-review i{font-style:normal;width:1px;height:12px;background:var(--m6-line-2)}

/* 상담·예약 CTA */
.m6-cta{width:min(1200px,calc(100% - clamp(36px,5.6vw,80px)));margin:clamp(120px,14vw,200px) auto 0;font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif;color:var(--m6-ink)}
.m6-cta-head{margin-bottom:clamp(32px,4vw,48px)}
.m6-cta-head h2{margin:0;font-size:clamp(26px,2.6vw,32px);font-weight:400;letter-spacing:-.02em;line-height:1.5;color:#323232} /* 통일: 6페이지 섹션 제목(#precautions h2·FAQ h2)과 같은 32/400/1.5 */
.m6-cta-head p{margin:14px 0 0;font-size:clamp(15px,1.2vw,17px);line-height:1.8;color:var(--m6-text-2)}
.m6-cta-grid{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr);gap:8px}
.m6-cta-form,.m6-cta-book{background:var(--m6-surface);padding:clamp(28px,3vw,44px)}
/* 10/27 통일: 카드 제목은 시력교정 정본 카드 제목(진료시간·주차안내 h3)과 같은 20(모바일 17)/400/1.55 #323232 */
html body .m6-cta :is(.m6-cta-form,.m6-cta-book) h3{margin:0 0 8px;font-size:clamp(17px,1.7vw,20px);font-weight:400;letter-spacing:-.02em;line-height:1.55;color:#323232}
.m6-cta-form>p,.m6-cta-book>p{margin:0 0 24px;font-size:14px;line-height:1.7;color:var(--m6-text-2)}
.m6-cta-fields{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 24px}
.m6-cta-field{display:flex;flex-direction:column;gap:6px;min-width:0}
.m6-cta-field label{font-size:13px;font-weight:600}
/* 10/27 사용자 결정: 일반 폼의 필수 표시(민트 *)는 쓰지 않는다 */
/* 피드백: 최초 밑줄 Black → 선택·입력 시 강조색. 두께는 두 상태 모두 2px */
.m6-cta-field :is(input,select){width:100%;height:46px;padding:0 2px;border:0;border-bottom:2px solid var(--m6-ink);border-radius:0;background:transparent;font:inherit;font-size:16px;color:var(--m6-ink);appearance:none;-webkit-appearance:none;outline:none;transition:border-color .25s cubic-bezier(.4,0,.2,1)}
/* 10/27 Select 표준: 네이티브 화살표 없음, 셰브론은 아래 표준(.bv-chev) 한 종류 */
.m6-cta-field select{padding-right:28px;background:transparent;cursor:pointer}
.m6-cta-field select:invalid{color:var(--m6-text-3)}
.m6-cta-field :is(input,select):focus,.m6-cta-field :is(input,select)[data-filled],.m6-cta-field select:has(option:checked:not([value=""])){border-bottom:2px solid var(--m6-mint)}
.m6-cta-field[data-error] :is(input,select){border-bottom-color:var(--m6-error)}
.m6-cta-field .m6-err{margin:0;font-size:13px;line-height:1.5;color:var(--m6-error)}
.m6-cta-actions{display:flex;justify-content:flex-end}
/* 통일: 기본(테두리)은 기존 .bv-dir-btn 46px·14px, data-primary는 기존 상담 신청 민트 CTA 52px·17px·좌우 30 */
.m6-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:46px;padding:0 18px 0 16px;border:1px solid var(--m6-ink);background:#fff;color:var(--m6-ink);font:600 14px/1 'Pretendard Variable',Pretendard,system-ui,sans-serif;letter-spacing:-.01em;text-decoration:none;cursor:pointer;transition:background-color .25s cubic-bezier(.4,0,.2,1),color .25s cubic-bezier(.4,0,.2,1),border-color .25s cubic-bezier(.4,0,.2,1)}
.m6-btn svg{flex:none;width:16px;height:16px;transition:transform .3s cubic-bezier(.2,.8,.2,1)}
.m6-btn:hover svg{transform:translateX(3px)}
.m6-btn:hover,.m6-btn:focus-visible{background:var(--m6-ink);color:#fff}
.m6-btn[data-primary]{min-height:52px;padding:0 30px;font-size:17px;background:var(--m6-mint);border-color:var(--m6-mint);box-shadow:0 12px 30px rgba(15,223,221,.38),0 3px 8px rgba(15,223,221,.22)}
.m6-btn[data-primary]:hover,.m6-btn[data-primary]:focus-visible{background:var(--m6-ink);border-color:var(--m6-ink);color:#fff;box-shadow:0 12px 30px rgba(17,17,16,.32),0 3px 8px rgba(17,17,16,.2)}
.m6-cta-form,.m6-cta-book{display:flex;flex-direction:column}
.m6-cta-form .m6-cta-actions,.m6-cta-book .m6-cta-actions{margin-top:auto;padding-top:28px}
/* 예약 카드: 민트 유리 이미지 + 전화상담 신청과 같은 민트 버튼(전화예약 문구 없음) */
.m6-cta-art{flex:1 1 auto;display:flex;align-items:center;justify-content:center;min-height:0;margin:8px 0 0}
.m6-cta-art img{display:block;width:min(100%,280px);aspect-ratio:3/2;object-fit:contain}
/* 10/27 사용자 지시: 예약 카드는 제목·설명·이미지·버튼 모두 가운데 정렬 */
.m6-cta-book{text-align:center}
.m6-cta-book .m6-cta-actions{justify-content:center}
/* 통일: 페이지 마지막 블록이면 푸터 위 간격(clamp 96~168) */
.m6-cta:last-child{margin-bottom:clamp(96px,12vw,168px)}
@media (max-width:799px){.m6-cta-grid{grid-template-columns:1fr}.m6-cta-fields{grid-template-columns:1fr}.m6-cta-actions .m6-btn{width:100%}.m6-cta-art img{width:min(100%,210px)}}

/* 단일 검사예약 CTA (제품 페이지) */
.m6-simple-cta{width:var(--m6-w);margin:clamp(96px,12vw,160px) auto clamp(96px,12vw,168px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:20px 32px;padding:clamp(28px,3.4vw,44px) clamp(24px,3.4vw,48px);background:var(--m6-surface);font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
.m6-simple-cta p{margin:0;font-size:clamp(18px,1.6vw,22px);font-weight:500;letter-spacing:-.03em;line-height:1.5;color:var(--m6-ink)}

/* 검토용 표시와 토스트 */
.m6-todo{display:inline-flex;align-items:center;padding:1px 6px;font-size:12px;font-weight:600;line-height:1.6;color:#087b85;background:#e7fbfb;border:1px dashed #087b85;white-space:nowrap}
@media (prefers-reduced-motion:reduce){.m6-btn,.m6-btn svg{transition:none;animation:none}}

/* 10/27 사용자 지시: 상담 입력칸의 focus 테두리 표시 제거. 포커스는 밑줄이 민트 2px로 바뀌는 것으로 대신 알린다 */
html body :is(.bv-field,.m6-cta-field) :is(input,select,textarea,button,.bv-sel-btn,.m6-sel-btn):is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}

/* ── 10/27 사용자 결정: 주요 6페이지 Select 표준 1종 ──
   메인·시력교정 상담 바(.bv-sel), 비교표(.bv-cmp), 하단 상담 CTA(.m6-sel)가 같은 셰브론·목록을 쓴다.
   셰브론: Phosphor caret-down Bold 16×16(선 1.5px, 10/28 아이콘 통일), #111110 고정(빈 값도), 열리면 180° .2s.
   목록: 트리거와 같은 폭, 4px 아래, 패딩 4, 흰 바탕, 패널 그림자, 모서리 0, 행 40·15px, 선택 600 + 10px 채운 네모, hover·키보드 행 #f5f5f5(목록 옵션 면, 사용자 승인). */
html body :is(.bv-chev,.bv-cmp-chev,.m6-chev){display:block;flex:none;width:16px;height:16px;margin:0;border:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 256 256' fill='%23111110'%3E%3Cpath d='M216.49,104.49l-80,80a12,12,0,0,1-17,0l-80-80a12,12,0,0,1,17-17L128,159l71.51-71.52a12,12,0,0,1,17,17Z'/%3E%3C/svg%3E") center/16px 16px no-repeat;transform:none;transition:transform .2s cubic-bezier(.2,.8,.2,1);pointer-events:none}
html body :is(.bv-chev.bv-chev-up,.bv-cmp-chev.is-up,.m6-chev.is-up){transform:rotate(180deg);margin:0}
/* 밑줄 필드(좌우 패딩 없음): 오른쪽 끝 0. 상담 바는 42px 트리거 가운데, CTA는 46px 트리거 가운데 */
html body .bv-field .bv-chev{position:absolute;right:0;top:13px}
html body .m6-sel .bv-chev{position:absolute;right:0;top:15px}
/* 비교표 PC 머리칸은 좌우 패딩이 있는 칸 → 오른쪽 16. 모바일은 밑줄 필드(오른쪽 2) */
@media(min-width:721px){html body .bv-cmp-btn{padding-right:16px}}
html body :is(.bv-sel-panel,.m6-sel-panel){position:absolute;left:0;right:auto;width:100%;min-width:0;box-sizing:border-box;z-index:80;max-height:min(320px,60vh);overflow-x:hidden;overflow-y:auto;padding:4px;background:#fff;border:1px solid #e5e5e5;border-radius:0;box-shadow:0 16px 40px rgba(17,17,16,.14),0 2px 6px rgba(17,17,16,.06);animation:m6-sel-in .18s cubic-bezier(.2,.8,.2,1)}
html body .bv-field .bv-sel-panel{top:calc(100% + 6px);bottom:auto} /* 밑줄 2px 바깥으로 4px */
html body .bv-field .bv-sel-panel.bv-sel-up{top:auto;bottom:calc(100% + 4px);animation-name:m6-sel-in-up}
html body .m6-sel .m6-sel-panel{top:calc(100% + 4px)}
html body .bv-cmp-pick .bv-cmp-panel{left:0;width:100%;min-width:0;top:calc(100% + 4px)}
@media(min-width:721px){html body .bv-cmp-pick .bv-cmp-panel{top:calc(100% - 10px)}} /* 머리칸 아래 패딩 14 안쪽 → 버튼 밑줄 4px 아래 */
html body :is(.bv-sel-opt,.m6-sel-opt){position:relative;display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;height:40px;min-height:40px;box-sizing:border-box;padding:0 19px 0 12px;background:transparent;border:0;border-radius:0;text-align:left;font-family:inherit;font-size:15px;font-weight:400;line-height:1.4;letter-spacing:-0.01em;color:#111110;white-space:nowrap;cursor:pointer;outline:0}
html body :is(.bv-sel-opt,.m6-sel-opt)>*{min-width:0;overflow:hidden;text-overflow:ellipsis}
html body :is(.bv-sel-opt,.m6-sel-opt):is(:hover,:focus-visible,.is-active){background:#f5f5f5;color:#111110;outline:0}
html body :is(.bv-sel-opt,.m6-sel-opt):is(.is-on,[aria-selected=true]){font-weight:600}
html body :is(.bv-sel-opt,.m6-sel-opt)::after{content:none}
html body :is(.bv-sel-opt,.m6-sel-opt):is(.is-on,[aria-selected=true])::after{content:"";display:block;flex:none;width:10px;height:10px;background:#111110;border:0}
/* 펼침 애니메이션 동안 목록 스크롤바가 잠깐 비치지 않도록 overflow를 끝날 때까지 숨긴다(overflow는 이산 애니메이션) */
@keyframes m6-sel-in{from{opacity:0;transform:translateY(-4px);overflow:hidden}99%{overflow:hidden}}
@keyframes m6-sel-in-up{from{opacity:0;transform:translateY(4px);overflow:hidden}99%{overflow:hidden}}
@media(prefers-reduced-motion:reduce){html body :is(.bv-sel-panel,.m6-sel-panel){animation:none}html body :is(.bv-chev,.bv-cmp-chev,.m6-chev){transition:none}}
/* 상담 바 인라인 오류 글자 규격 통일 13px/1.5 */
html body .bv-err-msg{font-size:13px;line-height:1.5}

/* 하단 상담 CTA Select: PC(≥800)는 커스텀 목록, 모바일(≤799)은 OS 기본 피커(상담 바 10/13 결정과 같음). 값은 숨긴 select가 가진다 */
.m6-sel{position:relative;min-width:0}
.m6-sel-btn{display:block;width:100%;height:46px;padding:0 28px 0 2px;border:0;border-bottom:2px solid var(--m6-ink);border-radius:0;background:transparent;font:inherit;font-size:16px;line-height:44px;text-align:left;color:var(--m6-ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;cursor:pointer;outline:none;transition:border-color .25s cubic-bezier(.4,0,.2,1)}
.m6-sel-btn[data-empty]{color:var(--m6-text-3)}
.m6-sel-btn:focus,.m6-sel-btn[data-filled],.m6-sel[data-open] .m6-sel-btn{border-bottom-color:var(--m6-mint)}
.m6-cta-field[data-error] .m6-sel-btn{border-bottom-color:var(--m6-error)}
@media(min-width:800px){.m6-sel select{display:none}}
@media(max-width:799px){.m6-sel-btn,.m6-sel .m6-sel-panel{display:none!important}}
@media(prefers-reduced-motion:reduce){.m6-sel-btn{transition:none}}

/* 10/27 통일: 섹션 머리 오른쪽·아래 '더보기'류 글자 버튼은 컴포넌트 문서 .bv-textbtn 규격 14/700 ink */
html body :is(.news-tools>a,.handoff-textbtn,.m6r-more-link){font-size:14px;font-weight:700;color:#111110}

/* 10/28 메인 '비앤빛 이야기' 탭: 마우스 올림·포커스 때 깔리던 회색 배경 제거(호버 배경 금지 원칙). 키보드 포커스는 외곽선으로 표시 */
html body #stories .bv-drag .bv-textbtn::before{content:none}
html body #stories .bv-drag .bv-textbtn:focus-visible{outline:2px solid #087b85;outline-offset:2px}