/* ==========================================================
   MCTech / 바이오사업부 — bio.php 전용
   기존 visible.css, 헤더, 메인 풀페이지 스타일에는 영향을 주지 않습니다.
   페이지 배경은 흰색. 제품 사진과 본문은 PPT 원문 순서를 유지합니다.
========================================================== */
.bio-page {
    --bio-width: 1400px;
    --bio-navy: #172b46;
    --bio-muted: #687485;
    --bio-blue: #2d659f;
    --bio-teal: #277b79;
    --bio-purple: #7156a4;
    --bio-line: #e5e8ed;
    --bio-table-head: #eef4fc;
    --bio-table-row: #f7f8fb;
    --bio-radius: 18px;
    --bio-section-space: 92px;
    --bio-header-gap: calc(var(--gnb-header-height, 80px) + 35px);
    --bio-scroll-offset: 18px;
    --bio-body-size: clamp(17px, 1.45vw, 21px);
    --bio-heading-size: clamp(29px, 3.1vw, 46px);
    --bio-background-blur: 10px;
    position: relative;
    width: 100%;
    min-width: 0;
    margin: 0;
    padding: var(--bio-header-gap) 0 0;
    color: var(--bio-navy);
    background: #fff;
    font-family: 'NanumSquare', 'Noto Sans KR', 'Malgun Gothic', Arial, sans-serif;
    font-size: var(--bio-body-size);
    line-height: 1.85;
    text-align: left;
    overflow-wrap: break-word;
}
.bio-page, .bio-page *, .bio-page *::before, .bio-page *::after,
#bio-chapter-nav, #bio-chapter-nav *, #bio-chapter-nav *::before,
#bio-chapter-nav *::after { box-sizing: border-box; }
.bio-page [hidden], #bio-chapter-nav[hidden] { display: none !important; }
.bio-page figure, .bio-page h1, .bio-page h2, .bio-page h3,
.bio-page p, .bio-page ul { margin-top: 0; }
.bio-page figure { margin: 0; }
.bio-page img { display: block; max-width: 100%; }
.bio-page a { text-decoration: none; }
.bio-page a:focus-visible, .bio-page button:focus-visible,
.bio-page input:focus-visible, .bio-page summary:focus-visible,
.bio-page [tabindex="0"]:focus-visible {
    outline: 3px solid var(--bio-blue); outline-offset: 5px;
}
.bio-page button, .bio-page input { font: inherit; }
.bio-page button { cursor: pointer; }
.bio-page h1, .bio-page h2, .bio-page h3,
.bio-page p, .bio-page li { word-break: keep-all; }
.bio-page strong { font-weight: 800; }
.bio-page .bio-shell { width: min(calc(100% - 92px), var(--bio-width)); margin: 0 auto; }
.bio-page .bio-section {
    position: relative;
    padding: var(--bio-section-space) 0;
    border-bottom: 1px solid var(--bio-line);
    background-color: #fff;
    scroll-margin-top: var(--bio-scroll-offset);
}
.bio-page .bio-section:last-child { border-bottom: 0; }
.bio-page .bio-intro { padding-top: 10px; }
.bio-page .bio-heading {
    margin: 0 0 22px;
    color: var(--bio-navy);
    font-size: var(--bio-heading-size);
    font-weight: 800;
    line-height: 1.38;
    letter-spacing: -.045em;
}
.bio-page .bio-english { margin: -6px 0 34px; font-size: clamp(16px,1.55vw,23px); color: var(--bio-muted); line-height: 1.5; }
.bio-page .bio-prose { max-width: 1200px; margin: 0 auto; }
.bio-page .bio-prose p { margin: 0 0 24px; }
.bio-page .bio-prose > :last-child { margin-bottom: 0; }
.bio-page .bio-prose .bio-lead { font-size: clamp(21px,1.9vw,28px); font-weight: 700; color: var(--bio-blue); }
.bio-page .bio-note { color: var(--bio-muted); font-size: 15px; line-height: 1.85; margin: 24px 0 0; }
.bio-page .bio-subheading { margin: 48px 0 20px; }
.bio-page .bio-subheading .bio-heading { font-size: clamp(22px,2.1vw,30px); color: var(--bio-blue); margin-bottom: 10px; }
.bio-page .bio-subheading .bio-english { font-size: 18px; margin-bottom: 24px; }
.bio-page .bio-muted { color: var(--bio-muted); }
/* PPT 이미지: 재생성/임의 도형 대체 없이 원본 비율 유지 */
.bio-page .bio-panorama { margin: 0 auto 50px; }
.bio-page .bio-panorama img { width: 100%; height: auto; max-height: 640px; object-fit: contain; }
.bio-page .bio-machine { margin: 0 auto 50px; height: clamp(280px,43vw,560px); }
.bio-page .bio-machine img { width: 100%; height: 100%; object-fit: contain; object-position: center; }
.bio-page .bio-process { margin: 0 0 50px; }
.bio-page .bio-process img { width: 100%; height: auto; }
.bio-page .bio-spec { margin-top: 35px; padding: 26px 0 0; border-top: 1px solid var(--bio-line); }
.bio-page .bio-spec h3 { margin-bottom: 14px; font-size: 23px; color: var(--bio-blue); }
.bio-page .bio-spec ul, .bio-page .bio-materials { margin-bottom: 0; padding-left: 24px; }
.bio-page .bio-spec li, .bio-page .bio-materials li { margin: 4px 0; }
.bio-page .bio-list-title { font-size: 23px; margin: 34px 0 14px; }
/* 제품 라인업 표 — 화장품 사업부의 네이비/라이트 블루/둥근 카드 연결 */
.bio-page .bio-table-wrap { margin: 40px 0 0; border: 1px solid var(--bio-line); border-radius: var(--bio-radius); overflow-x: auto; background: #fff; }
.bio-page .bio-table { width: 100%; min-width: 790px; border-collapse: separate; border-spacing: 0; font-size: 17px; line-height: 1.65; }
.bio-page .bio-table th, .bio-page .bio-table td { padding: 22px 24px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--bio-line); border-right: 1px solid var(--bio-line); }
.bio-page .bio-table th:last-child, .bio-page .bio-table td:last-child { border-right: 0; }
.bio-page .bio-table tbody tr:last-child > * { border-bottom: 0; }
.bio-page .bio-table thead th { color: var(--bio-blue); font-size: 19px; font-weight: 800; background: var(--bio-table-head); }
.bio-page .bio-table tbody th { width: 18%; color: var(--bio-navy); font-weight: 700; }
.bio-page .bio-table tbody tr:nth-child(even) > * { background: var(--bio-table-row); }
/* 슬라이드 8~11: 원문 이미지 쌍과 캡션 */
.bio-page .bio-supply-images { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; max-width: 1120px; margin: 0 auto 30px; }
.bio-page .bio-supply-images figure { min-width: 0; height: clamp(240px,30vw,390px); }
.bio-page .bio-supply-images img { width: 100%; height: 100%; object-fit: contain; }
.bio-page .bio-supply-caption { text-align: center; margin: 0 auto 45px; color: var(--bio-navy); font-size: 19px; }
.bio-page .bio-supply-caption p { margin: 0 0 4px; }
.bio-page .bio-supply-caption p + p { color: var(--bio-muted); font-size: 17px; }
/* 보고서 캐러셀: JS 미동작 시에도 세 원본이 모두 읽히도록 기본은 세로 배치 */
.bio-page .bio-carousel { margin: 44px auto 0; max-width: 960px; }
.bio-page .bio-carousel-viewport { background: #fff; border: 1px solid var(--bio-line); border-radius: var(--bio-radius); }
.bio-page .bio-report { padding: 24px; margin: 0; width: 100%; }
.bio-page .bio-report + .bio-report { border-top: 1px solid var(--bio-line); }
.bio-page .bio-report > img { width: auto; height: auto; max-width: 100%; max-height: 680px; margin: 0 auto; object-fit: contain; }
.bio-page .bio-report figcaption { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 9px 20px; font-size: 16px; line-height: 1.5; padding-top: 22px; }
.bio-page .bio-report figcaption strong { color: var(--bio-blue); }
.bio-page .bio-report figcaption span { color: var(--bio-muted); }
.bio-page .bio-report figcaption a { color: var(--bio-navy); text-decoration: underline; text-underline-offset: 4px; }
.bio-page .bio-carousel.is-enhanced .bio-carousel-viewport { overflow: hidden; touch-action: pan-y; }
.bio-page .bio-carousel.is-enhanced .bio-carousel-track { display: flex; align-items: stretch; transform: translateX(0); transition: transform .5s ease; }
.bio-page .bio-carousel.is-enhanced .bio-report { flex: 0 0 100%; min-width: 0; border: 0; }
.bio-page .bio-carousel.is-enhanced .bio-report > img { width: 100%; height: min(70vh,680px); max-height: none; }
.bio-page .bio-carousel-controls { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 22px; }
.bio-page .bio-control { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 19px; margin: 0; border: 1px solid var(--bio-line); border-radius: 8px; background: #fff; color: var(--bio-navy); font-size: 15px; font-weight: 700; line-height: 1.4; }
.bio-page .bio-control:hover { background: #f5f6fa; border-color: var(--bio-blue); }
.bio-page .bio-autoplay { color: var(--bio-blue); min-width: 144px; }
.bio-page .bio-carousel-dots { display: flex; align-items: center; gap: 2px; }
.bio-page .bio-carousel-dots button { display: grid; place-items: center; width: 34px; height: 44px; border: 0; padding: 0; margin: 0; background: transparent; }
.bio-page .bio-carousel-dots button::before { content: ''; display: block; width: 9px; height: 9px; border-radius: 50%; background: #c0c9d3; transition: background .2s, transform .2s; }
.bio-page .bio-carousel-dots button[aria-pressed="true"]::before { background: var(--bio-blue); transform: scale(1.35); }
/* 15~17 슬라이드의 요약 수치. 값/조건/반복 내용은 원문 유지 */
.bio-page .bio-metrics { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 26px; margin: 46px auto 0; }
.bio-page .bio-metric { padding: 30px 20px; border: 1px solid var(--bio-line); border-radius: var(--bio-radius); background: #fff; text-align: center; }
.bio-page .bio-metric h3 { margin: 0 0 18px; color: var(--bio-blue); font-weight: 700; font-size: 20px; }
.bio-page .bio-metric p { margin: 0 0 8px; font-size: 17px; }
.bio-page .bio-metric .bio-metric-number { color: var(--bio-navy); font-size: clamp(32px,3.7vw,52px); line-height: 1.2; letter-spacing: -.03em; font-weight: 800; }
.bio-page .bio-metric p:last-child { margin: 18px 0 0; }
.bio-page .bio-analysis-copy { margin-top: 50px; }
/* 19번 장비 배경. 텍스트 자체에는 blur를 적용하지 않습니다. */
.bio-page .bio-photo-section { isolation: isolate; overflow: hidden; }
.bio-page .bio-backdrop { position: absolute; z-index: -1; inset: 0 0 auto; height: min(880px,85%); min-height: 560px; pointer-events: none; }
.bio-page .bio-backdrop-img { position: absolute; width: 100%; height: 100%; object-fit: cover; object-position: 75% top; }
.bio-page .bio-backdrop::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg,#fff 0%,rgba(255,255,255,.96) 26%,rgba(255,255,255,.9) 48%,rgba(255,255,255,.4) 76%,rgba(255,255,255,.05) 100%),linear-gradient(0deg,#fff 0%,rgba(255,255,255,0) 32%); }
.bio-page .bio-backdrop-soften { position: absolute; inset: 0; backdrop-filter: blur(var(--bio-background-blur)); -webkit-backdrop-filter: blur(var(--bio-background-blur)); -webkit-mask-image: linear-gradient(90deg,#000 0%,#000 48%,transparent 85%); mask-image: linear-gradient(90deg,#000 0%,#000 48%,transparent 85%); }
.bio-page .bio-service-copy { position: relative; width: 72%; max-width: 1050px; margin: 0; }
.bio-page .bio-sr-only { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }
/* 목차: 여섯 개 대표 구간 / visible 인디케이터와 분리 */
#bio-chapter-nav {
    --bio-nav-dot: #9aa7b5;
    --bio-nav-active: #243b53;
    --bio-nav-y: 0px;
    position: fixed;
    top: 50%; right: 22px;
    display: block;
    transform: translateY(-50%);
    z-index: 1450;
    padding: 0; margin: 0;
    font-family: 'NanumSquare','Noto Sans KR','Malgun Gothic',Arial,sans-serif;
}
#bio-chapter-nav ul { position: relative; display: flex; flex-direction: column; align-items: center; gap: 22px; width: auto; margin: 0; padding: 15px 6px; list-style: none; background: rgba(255,255,255,.76); border: 1px solid rgba(208,218,229,.75); border-radius: 999px; box-shadow: 0 4px 18px rgba(36,59,83,.1); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
#bio-chapter-nav li { position: relative; float: none; margin: 0; padding: 0; list-style: none; }
#bio-chapter-nav a { position: relative; display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; margin: 0; padding: 0; text-decoration: none; }
#bio-chapter-nav a::before { content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--bio-nav-dot); }
#bio-chapter-nav a[aria-current="location"]::before { opacity: 0; }
#bio-chapter-nav .bio-nav-marker { position: absolute; left: 50%; top: 0; width: 14px; height: 14px; border-radius: 50%; background: var(--bio-nav-active); box-shadow: 0 0 0 4px rgba(36,59,83,.13); transform: translate(-50%,var(--bio-nav-y)); pointer-events: none; transition: transform .4s ease; }
#bio-chapter-nav .bio-nav-label { position: absolute; right: calc(100% + 14px); top: 50%; transform: translate(5px,-50%); padding: 9px 13px; border-radius: 7px; background: #243b53; color: #fff; font-size: 14px; font-weight: 700; line-height: 1.5; white-space: nowrap; opacity: 0; visibility: hidden; transition: opacity .15s, transform .15s, visibility .15s; }
#bio-chapter-nav .bio-nav-label::before { content: ''; position: absolute; right: -15px; top: 0; width: 16px; height: 100%; }
#bio-chapter-nav .bio-nav-label::after { content: ''; position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; background: #243b53; transform: translateY(-50%) rotate(45deg); }
#bio-chapter-nav li:not(.bio-label-dismissed):hover .bio-nav-label,
#bio-chapter-nav li:not(.bio-label-dismissed):focus-within .bio-nav-label { opacity: 1; visibility: visible; transform: translate(0,-50%); }
#bio-chapter-nav a:focus-visible { outline: 2px solid #2d659f; outline-offset: 3px; border-radius: 50%; }
@media (max-width: 1100px) {
    .bio-page { --bio-section-space: 72px; }
    .bio-page .bio-supply-images { gap: 30px; }
    .bio-page .bio-service-copy { width: 85%; }
    .bio-page .bio-table th, .bio-page .bio-table td { padding: 18px; }
    #bio-chapter-nav { right: 10px; }
}
@media (max-width: 767px) {
    .bio-page { --bio-section-space: 58px; --bio-header-gap: calc(var(--gnb-header-height,80px) + 20px); font-size: 17px; }
    .bio-page .bio-shell { width: calc(100% - 40px); }
    .bio-page .bio-panorama, .bio-page .bio-machine, .bio-page .bio-process { margin-bottom: 32px; }
    .bio-page .bio-heading { font-size: 30px; }
    .bio-page .bio-supply-images { gap: 18px; }
    .bio-page .bio-supply-images figure { height: clamp(150px,30vw,260px); }
    .bio-page .bio-supply-caption { font-size: 17px; }
    .bio-page .bio-prose p { margin-bottom: 20px; }
    .bio-page .bio-service-copy { width: 100%; }
    .bio-page .bio-backdrop::after { background: linear-gradient(90deg,rgba(255,255,255,.97),rgba(255,255,255,.88)),linear-gradient(0deg,#fff,transparent); }
    .bio-page .bio-report { padding: 15px; }
    .bio-page .bio-carousel.is-enhanced .bio-report > img { height: auto; max-height: 650px; }
    .bio-page .bio-report figcaption { display: flex; flex-direction: column; font-size: 15px; }
    .bio-page .bio-carousel-controls { gap: 9px; }
    .bio-page .bio-control { padding: 9px 13px; font-size: 14px; }
    .bio-page .bio-metrics { gap: 12px; }
    .bio-page .bio-metric { padding: 22px 10px; }
    .bio-page .bio-metric h3 { font-size: 16px; }
    .bio-page .bio-metric p { font-size: 14px; }
    .bio-page .bio-metric .bio-metric-number { font-size: 33px; }
    /* 모바일에서도 표시. 하단의 작은 가로형 목차로 본문 가림 최소화. */
    #bio-chapter-nav { top: auto; bottom: max(12px,env(safe-area-inset-bottom)); right: auto; left: 50%; transform: translateX(-50%); }
    #bio-chapter-nav ul { flex-direction: row; gap: 8px; padding: 7px 9px; }
    #bio-chapter-nav a { width: 28px; height: 30px; }
    #bio-chapter-nav .bio-nav-marker { left: 0; transform: translate(var(--bio-nav-x,0px),var(--bio-nav-y,0px)); }
    #bio-chapter-nav .bio-nav-label { right: auto; left: 50%; top: auto; bottom: calc(100% + 14px); transform: translate(-50%,4px); font-size: 12px; max-width: 190px; white-space: normal; width: max-content; text-align: center; }
    #bio-chapter-nav .bio-nav-label::after { top: auto; bottom: -4px; right: 50%; transform: translateX(50%) rotate(45deg); }
    #bio-chapter-nav .bio-nav-label::before { left: 0; right: 0; top: 100%; width: 100%; height: 16px; }
    #bio-chapter-nav li:not(.bio-label-dismissed):hover .bio-nav-label,
    #bio-chapter-nav li:not(.bio-label-dismissed):focus-within .bio-nav-label { transform: translate(-50%,0); }
    .bio-page > .bio-section:last-child { padding-bottom: 120px; }
}
@media (max-width: 420px) {
    .bio-page .bio-metrics { grid-template-columns: 1fr; }
    .bio-page .bio-metric { padding: 20px; }
    .bio-page .bio-metric h3 { margin-bottom: 10px; }
    .bio-page .bio-metric p:last-child { margin-top: 10px; }
    .bio-page .bio-autoplay { flex-basis: 100%; max-width: 190px; margin: 0 auto; }
}
@media (max-height: 600px) and (min-width: 768px) {
    #bio-chapter-nav ul { gap: 10px; padding-top: 10px; padding-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) {
    .bio-page .bio-carousel.is-enhanced .bio-carousel-track,
    #bio-chapter-nav .bio-nav-marker,
    #bio-chapter-nav .bio-nav-label { transition: none; }
}
@media print {
    #bio-chapter-nav, .bio-page .bio-carousel-controls { display: none !important; }
    .bio-page { padding: 0; }
    .bio-page .bio-shell { width: 100%; }
    .bio-page .bio-section { padding: 24px 0; }
    .bio-page .bio-carousel.is-enhanced .bio-carousel-track { display: block; transform: none !important; }
    .bio-page .bio-carousel.is-enhanced .bio-carousel-viewport { overflow: visible; }
    .bio-page .bio-report { break-inside: avoid; }
    .bio-page .bio-backdrop { display: none; }
    .bio-page .bio-service-copy { width: 100%; }
}