@charset "utf-8";
/*
 * 마이크로발란스 바이오사업부
 *
 * 참고한 방향 (셀트리온)
 *  - 한글 제목 + 영문 부제를 나란히 두는 표기
 *  - 밸류체인을 01 / 02 / 03 으로 번호 매겨 순서를 드러냄
 *  - #111 잉크에 회색 밴드(#f4f4f4 · #f8f8f8), 밝은 그린 한 가지만 강조색
 *  - 제목을 크게 키우지 않는 절제된 타입 스케일 (32~40px)
 */

@import url('../shared/fonts/pretendard/pretendard.css');

:root {
    --font: 'pretendard', -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;

    --ink: #111111;
    --ink-2: #4a4a4a;
    --ink-3: #6b6b6b;
    --ink-4: #6d6d6d;           /* 부제·날짜용. AA 4.5:1 확보 */
    --paper: #ffffff;
    --gray-1: #f8f8f8;
    --gray-2: #f4f4f4;
    --dark: #111111;
    --on-dark: #ffffff;
    --on-dark-2: #a8a8a8;
    --line: #e3e3e3;
    --line-dark: #2e2e2e;

    /* 포털의 바이오 패널(#00816c)과 같은 청록 계열로 맞췄습니다.
       농업이 초록이라면 바이오는 청록 — 두 사업부가 색으로 구분됩니다.
       흰 배경 위 작은 글자에는 대비가 확보되는 진한 쪽을 씁니다. */
    --brand: #00816c;          /* 기본 강조 (포털 --bio 와 동일) */
    --brand-text: #005c4c;     /* 옅은 배경 위 텍스트용 */
    --brand-bright: #6fd8bf;   /* 어두운 배경 위 (포털 패널 eyebrow 와 동일) */
    --brand-deep: #00483c;     /* 배지 등 진한 표기 */

    --page: 1200px;
    --gutter: clamp(1.25rem, 0.6rem + 2.6vw, 2.75rem);
    --band: clamp(4.5rem, 3rem + 6vw, 8.5rem);
    --header-h: 72px;

    /* 원본 컬러뱅크 시안이 쓰던 라운드 값(10 / 20 / 30px)을 그대로 가져왔습니다 */
    --r-sm: 10px;
    --r-md: 20px;
    --r-lg: 30px;
    --ease: cubic-bezier(.22, 1, .36, 1);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 1rem); }
body {
    font-family: var(--font);
    font-size: 1rem;
    font-weight: 500;
    line-height: 1.8;
    letter-spacing: -0.02em;
    color: var(--ink-2);
    background: var(--paper);
    word-break: keep-all;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
address { font-style: normal; }
:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }

.wrap { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: .8rem 1.2rem; background: var(--ink); color: #fff; }
.skip:focus { left: 0; }

/* ── 헤더 ────────────────────────────────────────── */
.hd {
    position: sticky; top: 0; z-index: 80;
    height: var(--header-h);
    display: flex; align-items: center;
    background: var(--paper);
    border-bottom: 1px solid transparent;
    transition: border-color .3s ease;
}
.hd.is-stuck { border-bottom-color: var(--line); }
.hd__in { width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; display: flex; align-items: center; gap: 1.5rem; }
.hd__logo { font-size: 1.125rem; font-weight: 800; letter-spacing: -0.035em; color: var(--ink); display: flex; align-items: baseline; gap: .55rem; }
.hd__logo span { font-size: .75rem; font-weight: 500; color: var(--ink-4); letter-spacing: -0.01em; }
.hd__nav { margin-inline-start: auto; }
.hd__nav ul { display: flex; gap: clamp(.75rem, 2vw, 2.25rem); }
.hd__nav a { font-size: .9375rem; font-weight: 600; color: var(--ink-2); transition: color .2s; }
.hd__nav a:hover { color: var(--brand-text); }
.hd__btn { display: none; width: 38px; height: 38px; margin-inline-start: auto; }
.hd__btn span { display: block; width: 20px; height: 1.5px; background: var(--ink); margin: 4px auto; }

@media (max-width: 880px) {
    .hd__btn { display: block; }
    .hd__nav {
        position: fixed; inset: var(--header-h) 0 auto 0;
        background: var(--paper); border-bottom: 1px solid var(--line);
        padding: .5rem var(--gutter) 1.5rem;
        display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
        transition: grid-template-rows .32s ease, opacity .32s ease, visibility .32s;
    }
    .hd__nav[data-open='true'] { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
    .hd__nav ul { flex-direction: column; gap: 0; overflow: hidden; }
    .hd__nav a { display: block; padding: 1rem 0; font-size: 1.0625rem; border-bottom: 1px solid var(--line); }
}

/* ── 첫 화면 (영상 배경) ─────────────────────────── */
.hero {
    position: relative;
    min-height: min(86svh, 760px);
    display: flex; align-items: center;
    padding-block: clamp(4rem, 3rem + 4vw, 7rem);
    background: var(--dark);
    overflow: hidden;
}
.hero__video {
    position: absolute; inset: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    opacity: .5;
}
.hero::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(100deg, rgba(10, 10, 10, .88) 0%, rgba(10, 10, 10, .62) 46%, rgba(10, 10, 10, .3) 100%);
}
.hero__in { position: relative; z-index: 1; width: min(var(--page), 100% - var(--gutter) * 2); margin-inline: auto; }
.hero__eng { font-size: .875rem; font-weight: 700; letter-spacing: .06em; color: var(--brand-bright); }
.hero__title {
    margin-block-start: 1.25rem;
    font-size: clamp(1.875rem, 1.2rem + 2.6vw, 3.125rem);
    font-weight: 800;
    line-height: 1.4;
    letter-spacing: -0.042em;
    color: var(--on-dark);
}
.hero__desc { margin-block-start: 1.5rem; font-size: 1.0625rem; line-height: 1.85; color: rgba(255, 255, 255, .8); max-width: 52ch; }
.hero__stats {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr));
    margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem);
    border-top: 1px solid rgba(255, 255, 255, .22);
}
.hero__stats > div { padding-block: 1.75rem; padding-inline-end: 1.5rem; }
.hero__stats dt { font-size: .875rem; color: rgba(255, 255, 255, .62); }
.hero__stats dd { margin-block-start: .4rem; font-size: 1.25rem; font-weight: 700; color: var(--on-dark); letter-spacing: -0.03em; }

/* ── 연구개발 이미지 ─────────────────────────────── */
.rnd-media { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
.rnd-media img { width: 100%; height: clamp(220px, 30vw, 380px); object-fit: cover; }

/* ── 밴드 ────────────────────────────────────────── */
.band { padding-block: var(--band); }
.band--gray { background: var(--gray-2); }
.band--dark { background: var(--dark); color: var(--on-dark-2); }

/* 한글 제목 + 영문 부제 (셀트리온식 병기) */
.shead { display: flex; flex-wrap: wrap; align-items: baseline; gap: .3rem 1rem; }
.shead__ko { font-size: clamp(1.5rem, 1.1rem + 1.5vw, 2rem); font-weight: 800; letter-spacing: -0.04em; color: var(--ink); line-height: 1.4; }
.shead__en { font-size: .9375rem; font-weight: 600; letter-spacing: .01em; color: var(--ink-4); }
.band--dark .shead__ko { color: var(--on-dark); }
.band--dark .shead__en { color: var(--on-dark-2); }

.sdesc { margin-block-start: 1.25rem; font-size: 1rem; line-height: 1.9; color: var(--ink-3); max-width: 62ch; }
.band--dark .sdesc { color: var(--on-dark-2); }

/* ── 밸류체인 01 / 02 / 03 ───────────────────────── */
.chain { margin-block-start: clamp(2.5rem, 1.5rem + 3vw, 4rem); }
.chain__row { display: grid; gap: 1.5rem; padding-block: clamp(2rem, 1.5rem + 2vw, 3.25rem); border-top: 1px solid var(--line); }
.chain__row:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 900px) { .chain__row { grid-template-columns: 4.5rem minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(2rem, 4vw, 4rem); align-items: start; } }
.chain__no { font-size: 1.5rem; font-weight: 800; color: var(--brand-text); letter-spacing: -0.03em; line-height: 1.2; }
.chain__ko { font-size: 1.3125rem; font-weight: 700; letter-spacing: -0.035em; color: var(--ink); }
.chain__en { margin-block-start: .35rem; font-size: .875rem; font-weight: 600; color: var(--ink-4); }
.chain__desc { font-size: .9375rem; line-height: 1.9; color: var(--ink-3); }
.chain__tags { display: flex; flex-wrap: wrap; gap: .5rem; margin-block-start: 1.25rem; }
.chain__tags li { padding: .3rem .75rem; font-size: .8125rem; font-weight: 600; background: var(--paper); border: 1px solid var(--line); color: var(--ink-2); border-radius: 2px; }
.band--gray .chain__tags li { background: var(--paper); }

/* ── 파이프라인 표 ───────────────────────────────── */
.ptable { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); overflow-x: auto; }
.ptable table { width: 100%; border-collapse: collapse; min-width: 640px; }
.ptable th, .ptable td { padding: 1.1rem 1rem; text-align: left; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.ptable thead th { font-size: .8125rem; font-weight: 700; color: var(--ink-4); background: var(--gray-1); border-bottom: 1px solid var(--line); }
.ptable td { color: var(--ink-2); }
.ptable .cat { font-weight: 700; color: var(--ink); }
.ptable .name { font-weight: 700; color: var(--ink); }
.stage { display: inline-block; padding: .25rem .7rem; font-size: .8125rem; font-weight: 700; border-radius: 2px; background: rgba(0, 129, 108, .12); color: var(--brand-deep); }

/* ── 제품 ────────────────────────────────────────── */
.prods { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2rem); margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
.prod { background: var(--paper); border: 1px solid var(--line); }
.prod__fig { aspect-ratio: 1; background: var(--gray-1); display: grid; place-items: center; overflow: hidden; }
.prod__fig img { width: 100%; height: 100%; object-fit: contain; padding: 1.5rem; }
.prod__body { padding: 1.25rem 1.25rem 1.5rem; }
.prod__tag { display: inline-block; padding: .2rem .6rem; font-size: .75rem; font-weight: 700; background: var(--gray-2); color: var(--ink-3); border-radius: 2px; }
.prod__name { margin-block-start: .75rem; font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.prod__ind { margin-block-start: .4rem; font-size: .875rem; line-height: 1.75; color: var(--ink-3); }

/* ── 배너 ────────────────────────────────────────── */
.claim { text-align: center; }
.claim__ko { font-size: clamp(1.375rem, 1rem + 1.6vw, 2.125rem); font-weight: 800; line-height: 1.45; letter-spacing: -0.04em; color: var(--on-dark); }
/* em 은 강조색 표시용이다 — 브라우저 기본 italic 을 끄지 않으면 이 줄만 기울어진다 */
.claim__ko em { color: var(--brand-bright); font-style: normal; }
.claim__sub { margin-block-start: 1.5rem; font-size: .9375rem; line-height: 1.9; color: var(--on-dark-2); }

/* ── 소식 ────────────────────────────────────────── */
.news { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); border-top: 1px solid var(--line); }
.news li { border-bottom: 1px solid var(--line); }
.news a { display: grid; gap: .5rem; padding-block: 1.75rem; transition: background .25s; }
@media (min-width: 760px) { .news a { grid-template-columns: 7.5rem minmax(0, 1fr) 4.5rem; gap: 2.5rem; align-items: baseline; } }
.news a:hover { background: var(--gray-1); }
.news__date { font-size: .875rem; color: var(--ink-4); font-variant-numeric: tabular-nums; }
.news__ttl { font-size: 1.0625rem; font-weight: 700; line-height: 1.6; letter-spacing: -0.03em; color: var(--ink); }
.news__sum { display: block; margin-block-start: .5rem; font-size: .875rem; line-height: 1.8; color: var(--ink-3); }
.news__go { font-size: .8125rem; font-weight: 600; color: var(--brand-text); }

/* ── 푸터 ────────────────────────────────────────── */
.ft { background: var(--dark); color: var(--on-dark-2); padding-block: clamp(3rem, 2rem + 3vw, 4.5rem) 2.5rem; }
.ft__top { display: grid; gap: 2.5rem; padding-block-end: 2.5rem; border-bottom: 1px solid var(--line-dark); }
@media (min-width: 820px) { .ft__top { grid-template-columns: 1.3fr 1fr 1fr; } }
.ft__logo { font-size: 1.1875rem; font-weight: 800; color: var(--on-dark); letter-spacing: -0.035em; }
.ft__tag { margin-block-start: .75rem; font-size: .875rem; line-height: 1.8; max-width: 28ch; }
.ft__h { font-size: .8125rem; font-weight: 600; color: #979797; margin-block-end: 1rem; }
.ft__list li + li { margin-block-start: .6rem; }
.ft__list a { font-size: .875rem; }
.ft__list a:hover { color: var(--brand-bright); }
.ft__info div { display: flex; gap: .9rem; font-size: .875rem; line-height: 2; }
.ft__info dt { min-width: 3rem; color: #979797; }
.ft__copy { padding-block-start: 2rem; display: flex; flex-wrap: wrap; gap: .75rem 2rem; justify-content: space-between; font-size: .8125rem; color: #979797; }

/* ── 등장 ────────────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .rv { animation: rise linear both; animation-timeline: view(); animation-range: entry 4% cover 22%; }
    }
}
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } html { scroll-behavior: auto; } }

/* ══════════════════════════════════════════════════
   원본 컬러뱅크 시안에서 가져온 라운드 · 전환 효과
   ══════════════════════════════════════════════════ */

/* ── 라운드 ──────────────────────────────────────── */
.hero { border-radius: 0 0 var(--r-lg) var(--r-lg); }
.rnd-media img,
.hero__helix-wrap { border-radius: var(--r-md); }
.prod { border-radius: var(--r-md); overflow: hidden; }
.prod__fig { border-radius: 0; }
.stage { border-radius: 999px; }
.chain__tags li { border-radius: 999px; }
.prod__tag { border-radius: 999px; }
.ptable table { border-radius: var(--r-sm); overflow: hidden; }
.band--dark { border-radius: var(--r-lg); margin-inline: clamp(0px, 2vw, 24px); }
.hd__nav a { border-radius: var(--r-sm); }

/* ── 첫 화면: 영상 + DNA 나선 ────────────────────── */
.hero__grid { display: grid; gap: clamp(2rem, 2vw, 3rem); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1.15fr .85fr; } }

.hero__helix-wrap {
    position: relative;
    aspect-ratio: 4 / 5;
    max-height: 460px;
    background: radial-gradient(70% 60% at 50% 45%, rgba(0, 129, 108, .1), transparent 70%);
}
/* place-items:center 로 두면 캔버스가 늘어나지 않고 내용 크기가 되므로 절대배치로 채웁니다 */
.hero__helix { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
@media (max-width: 979px) { .hero__helix-wrap { display: none; } }

/* ── 진입 시퀀스 ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
    .intro > * { opacity: 0; transform: translateY(18px); animation: introUp .9s var(--ease) forwards; }
    .intro > *:nth-child(1) { animation-delay: .05s; }
    .intro > *:nth-child(2) { animation-delay: .17s; }
    .intro > *:nth-child(3) { animation-delay: .29s; }
    .intro > *:nth-child(4) { animation-delay: .41s; }
    .hero__helix-wrap { opacity: 0; animation: introFade 1.4s var(--ease) .3s forwards; }
}
@keyframes introUp { to { opacity: 1; transform: none; } }
@keyframes introFade { to { opacity: 1; } }

/* ── 섹션 등장: 아래에서 밀려 올라오며 드러남 ────── */
@media (prefers-reduced-motion: no-preference) {
    @supports (animation-timeline: view()) {
        .rv-clip {
            animation: clipUp linear both;
            animation-timeline: view();
            animation-range: entry 2% cover 20%;
        }
    }
}
@keyframes clipUp {
    from { opacity: 0; clip-path: inset(14% 0 0 0 round var(--r-md)); transform: translateY(22px); }
    to { opacity: 1; clip-path: inset(0 0 0 0 round var(--r-md)); transform: none; }
}

/* ── 밸류체인 행: 번호가 먼저 들어오고 내용이 따라옴 ── */
.chain__row { transition: background .35s var(--ease); border-radius: var(--r-sm); }
.chain__row:hover { background: rgba(0, 129, 108, .04); }
.chain__no { transition: transform .35s var(--ease), color .35s var(--ease); }
.chain__row:hover .chain__no { transform: translateX(4px); color: var(--brand); }

/* ── 제품 카드 ───────────────────────────────────── */
.prod { transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s var(--ease); }
.prod:hover { transform: translateY(-5px); border-color: var(--brand); box-shadow: 0 14px 40px rgba(0, 0, 0, .09); }
.prod__fig img { transition: scale .6s var(--ease); }
.prod:hover .prod__fig img { scale: 1.05; }

/* ── 소식 ────────────────────────────────────────── */
.news a { border-radius: var(--r-sm); }

/* ── 부드러운 앵커 이동 ──────────────────────────── */
@media (prefers-reduced-motion: reduce) {
    .intro > *, .hero__helix-wrap { opacity: 1 !important; transform: none !important; animation: none !important; }
}

/* ══════════════════════════════════════════════════
   초록 음영 배경 · 아코디언 파이프라인
   ══════════════════════════════════════════════════ */

/* ── 은은한 초록 음영 밴드 ───────────────────────────
   가장자리에서 민트빛이 번지고 가운데는 밝게 비워 둡니다. */
.band--tint {
    position: relative;
    background:
        radial-gradient(80% 60% at 0% 0%, rgba(0, 129, 108, .14), transparent 62%),
        radial-gradient(70% 55% at 100% 8%, rgba(111, 216, 191, .16), transparent 60%),
        radial-gradient(90% 70% at 88% 100%, rgba(0, 129, 108, .1), transparent 62%),
        linear-gradient(180deg, #f7faf9 0%, #fbfcfc 55%, #f6f9f8 100%);
    border-radius: var(--r-lg);
    margin-inline: clamp(0px, 2vw, 24px);
    overflow: hidden;
}

/* 연구개발 밴드에도 옅게 얹어 두 섹션이 이어지게 */
.band--soft {
    background:
        radial-gradient(65% 50% at 100% 0%, rgba(0, 129, 108, .09), transparent 60%),
        radial-gradient(55% 45% at 0% 90%, rgba(111, 216, 191, .1), transparent 58%),
        var(--paper);
}

/* ── 파이프라인 머리말 ───────────────────────────── */
.pipe-head {
    display: flex; flex-wrap: wrap; gap: 1.5rem;
    align-items: flex-end; justify-content: space-between;
}
.pipe-head .sdesc { margin-block-start: 1rem; }
.btn-dark {
    display: inline-flex; align-items: center;
    padding: .8rem 1.6rem;
    background: var(--ink); color: #fff;
    font-size: .875rem; font-weight: 700;
    border-radius: var(--r-sm);
    white-space: nowrap;
    transition: background .25s var(--ease), transform .25s var(--ease);
}
.btn-dark:hover { background: #000; transform: translateY(-2px); }

/* ── 아코디언 ────────────────────────────────────── */
.acc { margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); display: grid; gap: 1rem; }
.acc__item {
    background: var(--paper);
    border-radius: var(--r-md);
    box-shadow: 0 1px 2px rgba(17, 17, 17, .04), 0 8px 28px rgba(17, 17, 17, .05);
    overflow: hidden;
    transition: box-shadow .3s var(--ease);
}
.acc__item:has(.acc__head[aria-expanded='true']) { box-shadow: 0 2px 4px rgba(17,17,17,.06), 0 14px 40px rgba(17,17,17,.09); }
.acc__item h3 { font: inherit; margin: 0; }

.acc__head {
    display: flex; align-items: center; gap: 1rem;
    width: 100%;
    padding: clamp(1.25rem, 1rem + 1vw, 1.9rem) clamp(1.25rem, 1rem + 1.4vw, 2.25rem);
    text-align: left;
    cursor: pointer;
}
.acc__step {
    flex: 0 0 auto;
    padding: .45rem .95rem;
    border-radius: var(--r-sm);
    background: rgba(0, 129, 108, .12);
    color: var(--brand-deep);
    font-size: .8125rem; font-weight: 700;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}
.acc__name {
    flex: 1 1 auto;
    font-size: clamp(1.0625rem, 1rem + .5vw, 1.375rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    color: var(--ink);
}
.acc__tag {
    flex: 0 0 auto;
    font-size: .75rem; font-weight: 700; letter-spacing: .04em;
    color: var(--ink-4);
}
.acc__arrow {
    flex: 0 0 auto;
    width: 22px; height: 22px;
    fill: none; stroke: var(--ink-3); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
    transition: transform .3s var(--ease), stroke .3s var(--ease);
}
.acc__head[aria-expanded='true'] .acc__arrow { transform: rotate(180deg); stroke: var(--brand); }
.acc__head:hover .acc__name { color: var(--brand-deep); }

.acc__panel { padding: 0 clamp(1.25rem, 1rem + 1.4vw, 2.25rem) clamp(1.25rem, 1rem + 1vw, 1.9rem); }
.acc__facts { display: grid; gap: 1rem; border-top: 1px solid var(--line); padding-block-start: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
@media (min-width: 760px) { .acc__facts { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem; } }
.acc__facts dt { font-size: .8125rem; color: var(--ink-4); margin-block-end: .4rem; }
.acc__facts dd { font-size: .9375rem; line-height: 1.75; color: var(--ink-2); }

@media (max-width: 560px) {
    .acc__tag { display: none; }
    .acc__head { gap: .75rem; padding-inline: 1.1rem; }
}

/* 펼침 애니메이션 */
@media (prefers-reduced-motion: no-preference) {
    .acc__panel:not([hidden]) { animation: accOpen .35s var(--ease); }
}
@keyframes accOpen { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }

/* ── 헤더 로고 (실제 로고 이미지) ────────────────── */
.hd__logo { gap: .7rem; }
.hd__logo-img { width: clamp(118px, 11vw, 150px); height: auto; display: block; }
.ft__logo img { width: 150px; height: auto; }

/* ── 제품 격자: 개수에 상관없이 카드 크기 고정 ──────
   auto-fit 은 항목이 1개면 한 칸이 통째로 늘어나 카드가 커집니다.
   HUMAN 처럼 1개뿐인 경우에도 PET 카드와 같은 크기가 되도록 열 수를 고정합니다. */
.prods { grid-template-columns: 1fr; }
@media (min-width: 620px) { .prods { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 940px) { .prods { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* ══════════════════════════════════════════════════
   가로로 넘기는 제품 목록
   넘기기는 브라우저 기본 가로 스크롤 + scroll-snap 으로 처리합니다.
   ══════════════════════════════════════════════════ */
.carousel { position: relative; margin-block-start: clamp(1.5rem, 1rem + 1.5vw, 2rem); }

.carousel__nav { display: flex; gap: .5rem; justify-content: flex-end; margin-block-end: 1rem; }
.carousel.is-static .carousel__nav { display: none; }   /* 넘길 것이 없으면 숨김 */
.carousel__btn {
    display: grid; place-items: center;
    width: 42px; height: 42px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: var(--paper);
    color: var(--ink-2);
    transition: background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.carousel__btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.carousel__btn:hover:not(:disabled) { background: var(--brand); border-color: var(--brand); color: #fff; }
.carousel__btn:disabled { opacity: .32; cursor: default; }

/* 트랙 — 항목 폭은 기존 격자와 같게 유지해 카드 크기가 달라지지 않습니다 */
.prods {
    --slides: 1;
    display: flex;
    gap: clamp(1.25rem, 1rem + 1.5vw, 2rem);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-behavior: smooth;
    scrollbar-width: none;
    padding-block-end: 4px;      /* 포커스 테두리가 잘리지 않도록 */
    grid-template-columns: none; /* 기존 격자 설정 무력화 */
}
.prods::-webkit-scrollbar { display: none; }
@media (min-width: 620px) { .prods { --slides: 2; } }
@media (min-width: 940px) { .prods { --slides: 3; } }

.prods > * {
    flex: 0 0 calc((100% - (var(--slides) - 1) * clamp(1.25rem, 1rem + 1.5vw, 2rem)) / var(--slides));
    scroll-snap-align: start;
}

@media (prefers-reduced-motion: reduce) { .prods { scroll-behavior: auto; } }

/* ══════════════════════════════════════════════════
   하위 페이지 공통 (셀트리온식 구조)
   ══════════════════════════════════════════════════ */

/* ── 페이지 상단 ─────────────────────────────────── */
.phead {
    position: relative;
    padding-block: clamp(3rem, 2rem + 4vw, 5.5rem) clamp(2.5rem, 2rem + 3vw, 4rem);
    background:
        radial-gradient(70% 60% at 8% 0%, rgba(0, 129, 108, .13), transparent 62%),
        radial-gradient(60% 50% at 100% 20%, rgba(111, 216, 191, .16), transparent 60%),
        var(--gray-1);
    border-radius: 0 0 var(--r-lg) var(--r-lg);
}
.phead__eng { font-size: .8125rem; font-weight: 700; letter-spacing: .06em; color: var(--brand-text); }
.phead__ko { margin-block-start: .9rem; font-size: clamp(1.75rem, 1.3rem + 1.9vw, 2.625rem); font-weight: 800; letter-spacing: -0.042em; line-height: 1.3; color: var(--ink); }
.phead__desc { margin-block-start: 1.25rem; font-size: 1rem; line-height: 1.9; color: var(--ink-3); max-width: 60ch; }

/* 빵부스러기 */
.crumb { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; font-size: .8125rem; color: var(--ink-4); }
.crumb li { display: flex; align-items: center; gap: .5rem; }
.crumb li + li::before { content: '/'; color: var(--line); }
.crumb a:hover { color: var(--brand-text); }
.crumb [aria-current] { color: var(--ink-2); font-weight: 600; }

/* ── 하위 탭 (같은 분류 안에서 이동) ─────────────── */
.subnav { border-bottom: 1px solid var(--line); background: var(--paper); }
.subnav__list { display: flex; gap: clamp(1rem, 3vw, 2.5rem); overflow-x: auto; scrollbar-width: none; }
.subnav__list::-webkit-scrollbar { display: none; }
.subnav a {
    display: block; position: relative;
    padding: 1.15rem .15rem;
    font-size: .9375rem; font-weight: 600; white-space: nowrap;
    color: var(--ink-3);
    transition: color .2s;
}
.subnav a:hover { color: var(--ink); }
.subnav a[aria-current='page'] { color: var(--ink); }
.subnav a[aria-current='page']::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px;
    height: 2px; background: var(--brand);
}

/* ── 본문 블록 ───────────────────────────────────── */
.blk { padding-block: clamp(3.5rem, 2.5rem + 4vw, 6rem); }
.blk + .blk { border-top: 1px solid var(--line); }
.blk--gray { background: var(--gray-2); border-top: 0 !important; }
.blk--tintbg {
    background:
        radial-gradient(70% 55% at 0% 10%, rgba(0, 129, 108, .1), transparent 60%),
        radial-gradient(60% 50% at 100% 90%, rgba(111, 216, 191, .12), transparent 58%),
        var(--paper);
    border-top: 0 !important;
}

/* 좌우 2단 (글 + 그림) */
.split { display: grid; gap: clamp(1.75rem, 1.5rem + 2vw, 3.5rem); align-items: center; }
@media (min-width: 900px) { .split { grid-template-columns: 1fr 1fr; } .split--rev > :first-child { order: 2; } }
.split__fig { border-radius: var(--r-md); overflow: hidden; background: var(--gray-1); }
.split__fig img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }

/* 번호 카드 (셀트리온식 01/02/03) */
.numcards { display: grid; gap: 1rem; margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem); }
@media (min-width: 700px) { .numcards { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); } }
.numcard { padding: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); }
.numcard__no { font-size: .875rem; font-weight: 800; color: var(--brand-text); letter-spacing: .02em; }
.numcard__ttl { margin-block-start: .9rem; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.numcard__txt { margin-block-start: .7rem; font-size: .9375rem; line-height: 1.85; color: var(--ink-3); }

/* 연혁 */
.hist { border-top: 1px solid var(--line); }
.hist > li { display: grid; gap: .75rem; padding-block: clamp(1.5rem, 1rem + 1.5vw, 2.25rem); border-bottom: 1px solid var(--line); }
@media (min-width: 720px) { .hist > li { grid-template-columns: 9rem minmax(0, 1fr); gap: 2.5rem; } }
.hist__year { font-size: 1.125rem; font-weight: 800; color: var(--brand-text); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.hist__items > li { position: relative; padding-inline-start: .95rem; font-size: .9375rem; line-height: 2; color: var(--ink-2); }
.hist__items > li::before { content: ''; position: absolute; left: 0; top: 1.05em; width: 5px; height: 5px; border-radius: 50%; background: var(--brand); }

/* 로고 격자 (파트너) */
.logos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 170px), 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; margin-block-start: 1.5rem; }
.logos li { display: grid; place-items: center; gap: .6rem; padding: 1.75rem 1rem; background: var(--paper); min-height: 130px; text-align: center; }
.logos img { max-width: 118px; max-height: 46px; object-fit: contain; }
.logos span { font-size: .8125rem; color: var(--ink-3); line-height: 1.5; }

/* 자료 격자 (특허·논문) */
.docs { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: clamp(1rem, 1.5vw, 1.75rem); margin-block-start: 1.75rem; }
.doc { border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; background: var(--paper); transition: border-color .3s var(--ease), transform .3s var(--ease); }
.doc:hover { border-color: var(--brand); transform: translateY(-3px); }
.doc__fig { aspect-ratio: 3 / 4; background: var(--gray-1); overflow: hidden; }
.doc__fig img { width: 100%; height: 100%; object-fit: cover; }
.doc__body { padding: 1rem 1.1rem 1.25rem; }
.doc__no { font-size: .8125rem; color: var(--brand-text); font-weight: 600; }
.doc__ttl { margin-block-start: .4rem; font-size: .9375rem; font-weight: 600; line-height: 1.6; color: var(--ink); }

/* 표 */
.tbl { overflow-x: auto; margin-block-start: 1.75rem; border: 1px solid var(--line); border-radius: var(--r-md); }
.tbl table { width: 100%; border-collapse: collapse; min-width: 620px; }
.tbl th, .tbl td { padding: 1.05rem 1.1rem; text-align: left; font-size: .9375rem; border-bottom: 1px solid var(--line); }
.tbl thead th { font-size: .8125rem; font-weight: 700; color: var(--ink-4); background: var(--gray-1); }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl td { color: var(--ink-2); }
.tbl .em { font-weight: 700; color: var(--ink); }
/* 코드명이 하이픈에서 잘려 두 줄이 되는 것을 막는다 */
.tbl td .em { white-space: nowrap; }

/* 개발 단계 진행 바 — 세 칸을 한 줄로 두고 지나온 단계만 브랜드색으로 채운다.
   임상을 Ph I·II·III 로 나누지 않고 한 칸으로 둔 이유는, 회사가 3상까지 계획한다는 근거 자료가
   없어서다(사용자 확인 후 5칸에서 줄임). 채움 폭은 data-stage(1~3) 로만 정해지므로
   칸 수를 다시 바꾸려면 --prog-steps 와 아래 [data-stage=…] 규칙을 함께 고쳐야 한다. */
.prog {
    --prog-steps: 3;
    position: relative; display: grid; grid-template-columns: repeat(var(--prog-steps), 1fr);
    min-width: 260px; border-radius: 999px; overflow: hidden;
    background: var(--gray-2); isolation: isolate;
}
.prog::before {
    content: ''; position: absolute; inset: 0 auto 0 0; z-index: -1;
    width: calc(var(--prog-fill, 0) / var(--prog-steps) * 100%);
    border-radius: 999px;
    /* 밝은 --brand-bright 로 시작하면 흰 글자 대비가 1.7:1 까지 떨어진다.
       흰 배경 위 바이므로 진한 구간만 써서 4.8:1 이상을 지킨다. */
    background: linear-gradient(90deg, var(--brand) 0%, var(--brand-deep) 100%);
}
.prog[data-stage="1"] { --prog-fill: 1; }
.prog[data-stage="2"] { --prog-fill: 2; }
.prog[data-stage="3"] { --prog-fill: 3; }
.prog li {
    padding: .5rem .35rem; text-align: center;
    font-size: .75rem; font-weight: 600; line-height: 1.35;
    color: var(--ink-4);
    border-right: 1px dashed var(--line);
}
.prog li:last-child { border-right: 0; }
/* 채워진 칸은 진한 배경 위에 오므로 흰 글자로 뒤집는다 */
.prog li.is-done { color: #fff; border-right-color: rgba(255, 255, 255, .45); }
.prog__now {
    display: block; margin-block-start: .55rem;
    font-size: .8125rem; font-weight: 700; color: var(--brand-text);
}

/* 정보 목록 (오시는 길) */
.info { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-md); overflow: hidden; }
@media (min-width: 700px) { .info { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.info > div { background: var(--paper); padding: 1.5rem 1.6rem; }
.info dt { font-size: .8125rem; color: var(--ink-4); }
.info dd { margin-block-start: .45rem; font-size: 1rem; font-weight: 600; color: var(--ink); line-height: 1.7; }
.map { margin-block-start: 1.75rem; border-radius: var(--r-md); overflow: hidden; border: 1px solid var(--line); }
.map iframe { display: block; width: 100%; height: clamp(280px, 40vw, 430px); border: 0; }

/* ══════════════════════════════════════════════════
   하위 페이지 부품 보강 (7개 하위 페이지에서 실제로 필요했던 것만)
   ══════════════════════════════════════════════════ */

/* 빵부스러기와 영문 눈썹 사이 간격 — .phead__eng 에는 위 여백이 없어 붙어 보입니다.
   .phead 는 청록 그라디언트가 얹혀 배경이 살짝 어두워지므로, 가장 작은 글자인
   빵부스러기는 한 단계 진한 잉크를 써서 AA(4.5:1) 여유를 확보합니다. */
.phead .crumb { margin-block-end: 1.4rem; color: var(--ink-2); }

/* 번호 대신 아이콘을 쓰는 카드 (핵심가치·목표) — 순서가 없는 항목이라 번호를 붙이지 않습니다 */
.numcard__ico { width: 46px; height: 46px; object-fit: contain; margin-block-end: 1.1rem; }
/* 제목만 있는 카드(응용 분야)에서 제목 위 여백이 뜨지 않도록 */
.numcard > .numcard__ttl:first-child { margin-block-start: 0; }

/* 연혁의 월 표기 — 연도(.hist__year) 아래 항목마다 붙는 두 자리 숫자 */
.hist__mo { display: inline-block; min-width: 2.4rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }

/* 파트너 분류 묶음 — 분류 제목(.chain__ko)과 로고 격자(.logos)를 한 덩어리로 띄웁니다 */
.pgroup { margin-block-start: clamp(2.25rem, 1.75rem + 2vw, 3.25rem); }

/* 가로로 긴 설명 도식(작용기전) — .rnd-media 는 높이가 고정돼 도식이 잘려 별도 상자를 씁니다 */
.diagram {
    margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
    padding: clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
}
.diagram img { width: 100%; height: auto; }

/* 버튼 줄 (길찾기) */
.btnrow { display: flex; flex-wrap: wrap; gap: .75rem; margin-block-start: 1.75rem; }

/* 특허·논문 이미지는 문서 스캔이라 잘리면 내용이 사라집니다 — 채우지 않고 맞춥니다 */
.doc__fig img { object-fit: contain; }
/* 카드 전체가 링크가 되는 경우 (특허) */
a.doc { display: block; }

/* ── 서비스 카드 (services.html → 각 상세 페이지) ──────────
   서비스가 정확히 두 개라 열 수를 고정합니다.
   auto-fit 으로 두면 시트에서 하나만 남았을 때 카드가 한 줄을 통째로 차지합니다. */
.svcs {
    display: grid; gap: clamp(1rem, .75rem + 1vw, 1.75rem);
    margin-block-start: clamp(2rem, 1.5rem + 2vw, 3rem);
}
@media (min-width: 760px) { .svcs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

a.svc {
    display: flex; flex-direction: column;
    padding: clamp(1.75rem, 1.25rem + 2vw, 2.75rem);
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--r-md);
    transition: border-color .3s var(--ease), transform .3s var(--ease);
}
a.svc:hover { border-color: var(--brand); transform: translateY(-3px); }
.svc__no { font-size: .8125rem; font-weight: 800; color: var(--brand-text); letter-spacing: .02em; }
.svc__ko {
    margin-block-start: .9rem;
    font-size: clamp(1.25rem, 1.1rem + .5vw, 1.5rem);
    font-weight: 700; letter-spacing: -0.03em; color: var(--ink);
}
.svc__en { margin-block-start: .3rem; font-size: .875rem; font-weight: 500; color: var(--ink-4); }
.svc__txt { margin-block-start: 1rem; font-size: .9375rem; line-height: 1.85; color: var(--ink-3); }
.svc__tags { margin-block-start: 1.25rem; display: flex; flex-wrap: wrap; gap: .4rem; }
.svc__tags li {
    padding: .35rem .75rem; border-radius: 999px;
    background: var(--gray-2); font-size: .8125rem; color: var(--ink-2);
}
/* auto 로 밀어 두면 두 카드의 설명 길이가 달라도 화살표 줄이 아래에서 나란히 맞습니다 */
.svc__go {
    margin-block-start: auto; padding-block-start: 1.5rem;
    display: inline-flex; align-items: center; gap: .35rem;
    font-size: .875rem; font-weight: 700; color: var(--brand-text);
    transition: gap .25s var(--ease);
}
a.svc:hover .svc__go { gap: .6rem; }
.svc__go svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }

/* 정사각으로 찍혀 가장자리까지 내용이 차 있는 사진용 (채취 키트).
   기본값인 4:3 으로 자르면 위아래가 12% 씩 잘려 상자 이름과 면봉이 사라집니다 — 측정값. */
.split__fig--square img { aspect-ratio: 1 / 1; }

/* ── 사진을 깐 어두운 밴드 (index 의 "건강한 생태계" 배너) ──────
   사진을 그냥 깔면 햇빛 부분에서 흰 글자 대비가 무너집니다.
   그래서 두 겹으로 눌렀습니다 — ::before 가 사진(불투명도 16%), ::after 가 어두운 그라디언트.
   본문보다 뒤에 두려고 z-index:-1 을 쓰므로 부모의 isolation:isolate 가 반드시 필요합니다.
   값을 올리려면 대비를 다시 재세요. 현재 최악 지점 기준 흰 글자 14:1 이상입니다. */
.band--photo { position: relative; overflow: hidden; isolation: isolate; }
.band--photo::before {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: url('img/ecosystem.jpg') center / cover no-repeat;
    opacity: .16;
}
.band--photo::after {
    content: ''; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, rgba(17, 17, 17, .72), rgba(17, 17, 17, .34) 55%, rgba(17, 17, 17, .72));
}