/* ==========================================================
   바이오사업부 FAQ 전용 스타일 / bio_faq.php
   bio.css, bio.js 없이 독립 사용. 제품/도표/인디케이터 규칙은 포함하지 않습니다.
   FAQ 색상·글꼴·질문/답변 크기는 기존 bio.php의 디자인을 유지합니다.
========================================================== */
.bio-faq-page {
    --bio-width: 1400px;
    --bio-navy: #172b46;
    --bio-muted: #687485;
    --bio-blue: #2d659f;
    --bio-line: #e5e8ed;
    --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);
    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-faq-page,
.bio-faq-page *,
.bio-faq-page *::before,
.bio-faq-page *::after { box-sizing: border-box; }
.bio-faq-page [hidden] { display: none !important; }
.bio-faq-page h1,
.bio-faq-page p { margin-top: 0; word-break: keep-all; }
.bio-faq-page a { text-decoration: none; }
.bio-faq-page a:focus-visible,
.bio-faq-page input:focus-visible,
.bio-faq-page summary:focus-visible {
    outline: 3px solid var(--bio-blue);
    outline-offset: 5px;
}
.bio-faq-page input { font: inherit; }
.bio-faq-page strong { font-weight: 800; }
.bio-faq-page .bio-shell { width: min(calc(100% - 92px), var(--bio-width)); margin: 0 auto; }
/* 독립 페이지의 첫 콘텐츠이므로 헤더 아래 여백만 확보합니다. */
.bio-faq-page .bio-section {
    position: relative;
    padding: 10px 0 92px;
    background-color: #fff;
    scroll-margin-top: var(--bio-scroll-offset);
}
.bio-faq-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;
}

/* FAQ 23~26: 참고 레이아웃 + 제공 Q1~Q10. 답변은 초기 HTML에 포함. */
.bio-faq-page .bio-faq-departments { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0; font-size: 17px; }
.bio-faq-page .bio-faq-departments > * { padding: 11px 22px; border: 1px solid var(--bio-line); border-radius: 8px; background: #fff; }
.bio-faq-page .bio-faq-departments .bio-faq-current { border-color: var(--bio-blue); color: var(--bio-blue); font-weight: 800; }
.bio-faq-page .bio-faq-unlinked { color: var(--bio-muted); }
.bio-faq-page .bio-faq-search { display: flex; align-items: center; gap: 20px; margin-bottom: 32px; }
.bio-faq-page .bio-faq-search label { flex-shrink: 0; font-size: 16px; font-weight: 700; }
.bio-faq-page .bio-faq-search input { display: block; width: 100%; max-width: 600px; padding: 14px 18px; border: 1px solid #cad3de; border-radius: 10px; background: #fff; color: var(--bio-navy); font-size: 17px; }
.bio-faq-page .bio-faq-list { border-top: 1px solid var(--bio-line); }
.bio-faq-page .bio-faq-item { border-bottom: 1px solid var(--bio-line); }
.bio-faq-page .bio-faq-item summary { display: flex; align-items: baseline; gap: 18px; padding: 25px 8px; list-style: none; font-size: clamp(17px,1.6vw,22px); font-weight: 700; line-height: 1.6; cursor: pointer; }
.bio-faq-page .bio-faq-item summary::-webkit-details-marker { display: none; }
.bio-faq-page .bio-faq-item summary::marker { content: ''; }
.bio-faq-page .bio-faq-number { flex: 0 0 42px; color: var(--bio-blue); }
.bio-faq-page .bio-faq-mark { position: relative; flex: 0 0 16px; width: 16px; height: 16px; margin: 6px 8px 0 auto; align-self: flex-start; }
.bio-faq-page .bio-faq-mark::before, .bio-faq-page .bio-faq-mark::after { content: ''; position: absolute; left: 0; top: 7px; width: 16px; height: 2px; background: var(--bio-muted); }
.bio-faq-page .bio-faq-mark::after { transform: rotate(90deg); transition: transform .2s; }
.bio-faq-page .bio-faq-item[open] .bio-faq-mark::after { transform: rotate(0); }
.bio-faq-page .bio-faq-answer { padding: 0 42px 28px 68px; color: var(--bio-muted); font-size: 18px; line-height: 1.9; }
.bio-faq-page .bio-faq-answer p { margin: 0 0 16px; }
.bio-faq-page .bio-faq-answer p:last-child { margin: 0; }
.bio-faq-page .bio-faq-empty { margin: 20px 0; padding: 24px; border: 1px solid var(--bio-line); border-radius: 12px; }
.bio-faq-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; }
.bio-faq-page .bio-faq-item { scroll-margin-top: var(--bio-scroll-offset); }

@media (max-width: 767px) {
    .bio-faq-page {
        --bio-header-gap: calc(var(--gnb-header-height, 80px) + 20px);
        font-size: 17px;
    }
    .bio-faq-page .bio-shell { width: calc(100% - 40px); }
    .bio-faq-page .bio-section { padding-bottom: 58px; }
    .bio-faq-page .bio-heading { font-size: 30px; }
    .bio-faq-page .bio-faq-search { align-items: flex-start; flex-direction: column; gap: 8px; }
    .bio-faq-page .bio-faq-item summary { gap: 8px; padding: 22px 0; }
    .bio-faq-page .bio-faq-number { flex-basis: 34px; }
    .bio-faq-page .bio-faq-answer { padding: 0 10px 24px 42px; font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .bio-faq-page .bio-faq-mark::after { transition: none; }
}
@media print {
    .bio-faq-page { padding: 0; }
    .bio-faq-page .bio-shell { width: 100%; }
    .bio-faq-page .bio-section { padding: 24px 0; }
    .bio-faq-page .bio-faq-search { display: none !important; }
}