/* =========================================================
   cell. — SC301의원 줄기세포 연구센터 사이트 공통 스타일
   ---------------------------------------------------------
   구조
   1. 디자인 토큰 (색·서체·간격)
   2. 기본 요소
   3. 레이아웃 (컨테이너, 섹션, 그리드)
   4. 공통 컴포넌트 (헤더, 푸터, 버튼, 카드, 통계, 공정, 표, 폼)
   5. 페이지 전용 (히어로, 아티클, 브리지)
   6. 유틸리티
   ---------------------------------------------------------
   색 규칙
   - --teal : 연구센터 포인트색. 링크, 강조, 아이콘.
   - --rust : 본사이트(수술) 연결 요소에만 사용. 그 외에는 쓰지 않는다.
   - 의미색은 --ok / --warn 두 가지만.
   ========================================================= */

/* 1. 토큰 ------------------------------------------------- */
:root{
  /* 색 */
  --bg:#ffffff;
  --bg-alt:#f4f7f8;        /* 섹션 교차 배경 */
  --surface:#ffffff;
  --fg:#172126;
  --fg-2:#4a5a62;          /* 보조 본문 */
  --muted:#7b8a91;         /* 캡션·라벨 */
  --line:#dde4e7;
  --line-strong:#b9c5ca;

  --teal:#157a8c;
  --teal-dark:#0f5c6a;
  --teal-soft:#e3f1f3;
  --teal-ink:#0b4650;

  --rust:#a8463c;          /* 본사이트 연결 전용 */
  --rust-soft:#f7e8e5;

  --ok:#2e7d4f;
  --warn:#8a6a1a; --warn-soft:#f7efd9;

  /* 서체 */
  --font-body:"Pretendard Variable",Pretendard,"Apple SD Gothic Neo","Noto Sans KR",system-ui,-apple-system,sans-serif;
  --font-display:"Noto Serif KR","Apple Myungjo","Nanum Myeongjo",serif;
  --font-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 타입 스케일 */
  --fs-xs:12px; --fs-sm:13.5px; --fs-base:16px; --fs-md:18px;
  --fs-lg:22px; --fs-xl:28px; --fs-2xl:36px; --fs-3xl:48px;

  /* 간격 */
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px;
  --sp-6:32px; --sp-7:48px; --sp-8:64px; --sp-9:96px;

  --radius:4px;
  --radius-lg:8px;
  --container:1160px;
  --measure:66ch;
  --header-h:64px;
}

/* 2. 기본 요소 ------------------------------------------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-body); font-size:var(--fs-base); line-height:1.75;
  -webkit-font-smoothing:antialiased; word-break:keep-all;
}
img,svg,video{max-width:100%; height:auto; display:block}
a{color:var(--teal); text-decoration:none}
a:hover{text-decoration:underline; text-underline-offset:3px}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{
  outline:2px solid var(--teal); outline-offset:2px
}
h1,h2,h3,h4{margin:0; line-height:1.3; font-weight:700; letter-spacing:-.01em; text-wrap:balance}
h1{font-size:var(--fs-2xl)}
h2{font-size:var(--fs-xl)}
h3{font-size:var(--fs-lg)}
h4{font-size:var(--fs-md)}
p{margin:0 0 var(--sp-4); max-width:var(--measure)}
ul,ol{margin:0 0 var(--sp-4); padding-left:22px; max-width:var(--measure)}
li{margin-bottom:var(--sp-1)}
small,.small{font-size:var(--fs-sm); color:var(--fg-2)}
hr{border:0; border-top:1px solid var(--line); margin:var(--sp-6) 0}
table{border-collapse:collapse; width:100%; font-size:15px}
th,td{text-align:left; padding:10px 12px; border-bottom:1px solid var(--line); vertical-align:top}
th{font-size:var(--fs-sm); color:var(--muted); font-weight:600; letter-spacing:.03em; border-bottom:1px solid var(--line-strong)}
code{font-family:var(--font-mono); font-size:.9em}
@media (max-width:720px){
  :root{--fs-2xl:30px; --fs-xl:24px; --fs-lg:19px; --sp-8:48px; --sp-9:64px}
}

/* 3. 레이아웃 -------------------------------------------- */
.container{max-width:var(--container); margin-inline:auto; padding-inline:20px}
@media (max-width:720px){ .container{padding-inline:16px} }
.section{padding-block:var(--sp-8)}
.section--alt{background:var(--bg-alt)}
.section--tight{padding-block:var(--sp-6)}
.section-head{margin-bottom:var(--sp-6); max-width:720px}
.section-head .eyebrow{margin-bottom:var(--sp-2)}
.section-head p{color:var(--fg-2); margin-top:var(--sp-3)}
.eyebrow{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--teal); font-weight:600}
.grid{display:grid; gap:var(--sp-5)}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{grid-template-columns:repeat(3,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
@media (max-width:960px){ .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))} .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:600px){ .grid-2,.grid-3,.grid-4{grid-template-columns:minmax(0,1fr)} }
.split{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-7); align-items:start}
.split--rev{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
@media (max-width:860px){ .split,.split--rev{grid-template-columns:minmax(0,1fr); gap:var(--sp-5)} }
.prose{max-width:var(--measure)}
.prose h2{margin:var(--sp-7) 0 var(--sp-3); font-size:var(--fs-lg)}
.prose h3{margin:var(--sp-5) 0 var(--sp-2); font-size:var(--fs-md)}
.prose figure{margin:var(--sp-5) 0}
.prose figcaption{font-size:var(--fs-sm); color:var(--muted); margin-top:var(--sp-2)}
.prose blockquote{margin:var(--sp-5) 0; padding:var(--sp-3) var(--sp-5); border-left:3px solid var(--teal); background:var(--bg-alt); color:var(--fg-2)}
.tablewrap{overflow-x:auto; margin:0 0 var(--sp-5)}
.tablewrap table{min-width:560px}

/* 4. 컴포넌트 -------------------------------------------- */

/* 4.1 헤더 */
.topbar{
  position:sticky; top:0; z-index:50; background:rgba(255,255,255,.92);
  backdrop-filter:saturate(1.4) blur(8px); border-bottom:1px solid var(--line);
}
.topbar .container{display:flex; align-items:center; gap:var(--sp-5); min-height:var(--header-h)}
.brand{display:flex; align-items:baseline; gap:10px; color:var(--fg); text-decoration:none; white-space:nowrap}
.brand:hover{text-decoration:none}
.brand .wordmark{font-family:var(--font-display); font-size:24px; font-weight:700; letter-spacing:-.02em}
.brand .wordmark::after{content:"."; color:var(--teal)}
.brand .org{font-size:var(--fs-xs); color:var(--muted); letter-spacing:.02em}
/* 로고 이미지 바닥을 기준선으로 쓰고, Lab을 로고 속 SC301 글자 바닥(이미지 하단에서 약 1.5px 위)에 맞춘다 */
.brand--logo{align-items:baseline}
.brand-logo{display:block; height:30px; width:auto}
.brand-lab{position:relative; top:-1.5px; margin-left:-3px; font-family:var(--font-display); font-size:22px; font-weight:700; line-height:1; letter-spacing:-.01em; color:#000}
.footer .brand-logo{filter:invert(1)}
.footer .brand-lab{color:#fff}
.nav{display:flex; align-items:center; gap:2px; margin-left:auto}
.nav a{padding:8px 12px; font-size:15px; color:var(--fg-2); border-radius:var(--radius)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--fg); background:var(--bg-alt); text-decoration:none}
.nav a[aria-current="page"]{font-weight:600}
.nav .nav-cta{margin-left:var(--sp-2); color:var(--rust); border:1px solid var(--rust); padding:6px 12px}
.nav .nav-cta:hover{background:var(--rust-soft); color:var(--rust)}
.nav-toggle{display:none; margin-left:auto; background:none; border:1px solid var(--line); border-radius:var(--radius); padding:8px 10px; font:inherit; color:var(--fg); cursor:pointer}
@media (max-width:960px){
  .nav-toggle{display:inline-flex}
  .nav{display:none; position:absolute; left:0; right:0; top:var(--header-h); flex-direction:column; align-items:stretch; background:var(--bg); border-bottom:1px solid var(--line); padding:var(--sp-3) 20px var(--sp-4); gap:0}
  .nav.is-open{display:flex}
  .nav a{padding:12px 8px; border-bottom:1px solid var(--line)}
  .nav .nav-cta{margin:var(--sp-3) 0 0; border-bottom:1px solid var(--rust); text-align:center}
  .brand .org{display:none}
}

/* 4.2 버튼 */
.btn{
  display:inline-flex; align-items:center; gap:8px; padding:11px 18px;
  border:1px solid var(--teal); border-radius:var(--radius); background:var(--teal); color:#fff;
  font:inherit; font-size:15px; font-weight:600; line-height:1.2; cursor:pointer; text-decoration:none;
}
.btn:hover{background:var(--teal-dark); border-color:var(--teal-dark); text-decoration:none; color:#fff}
.btn--ghost{background:transparent; color:var(--teal)}
.btn--ghost:hover{background:var(--teal-soft); color:var(--teal-dark)}
.btn--main{background:var(--rust); border-color:var(--rust)}
.btn--main:hover{background:#8d3a31; border-color:#8d3a31}
.btn--main-ghost{background:transparent; border-color:var(--rust); color:var(--rust)}
.btn--main-ghost:hover{background:var(--rust-soft); color:var(--rust)}
.btn--sm{padding:7px 12px; font-size:var(--fs-sm)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--sp-3)}
.link-arrow::after{content:" →"}

/* 4.3 카드 */
.card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5); min-width:0}
.card h3,.card h4{margin-bottom:var(--sp-2)}
.card p{color:var(--fg-2); font-size:15px; margin-bottom:var(--sp-3)}
.card p:last-child{margin-bottom:0}
.card--link{display:block; color:inherit; transition:border-color .15s}
.card--link:hover{border-color:var(--teal); text-decoration:none}
.card .eyebrow{display:block; margin-bottom:var(--sp-2)}
.card-list{display:grid; gap:var(--sp-4)}

/* 4.4 신뢰 지표 (숫자는 반드시 기준 문구와 함께) */
.stats{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden}
@media (max-width:860px){ .stats{grid-template-columns:repeat(2,minmax(0,1fr))} }
.stat{background:var(--surface); padding:var(--sp-5)}
.stat .label{font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-1)}
.stat .value{font-family:var(--font-display); font-size:var(--fs-2xl); line-height:1.1; color:var(--teal-ink); font-variant-numeric:tabular-nums}
.stat .value small{font-family:var(--font-body); font-size:var(--fs-base); color:var(--fg-2); margin-left:4px}
.stat .basis{font-size:var(--fs-xs); color:var(--muted); margin-top:var(--sp-2); line-height:1.5}

/* 4.5 공정 단계 */
.process{display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:var(--sp-3); counter-reset:step}
@media (max-width:960px){ .process{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:600px){ .process{grid-template-columns:minmax(0,1fr)} }
.step{position:relative; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-4) var(--sp-4); counter-increment:step; min-width:0}
.step::before{content:counter(step,decimal-leading-zero); font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--teal); display:block; margin-bottom:var(--sp-2)}
.step h3{font-size:var(--fs-md); margin-bottom:var(--sp-1)}
.step .equip{font-size:var(--fs-sm); color:var(--teal-ink); background:var(--teal-soft); display:inline-block; padding:2px 8px; border-radius:3px; margin-bottom:var(--sp-2)}
.step p{font-size:14.5px; color:var(--fg-2); margin:0}

/* 4.6 장비 목록 */
.equipment{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-5)}
@media (max-width:720px){ .equipment{grid-template-columns:minmax(0,1fr)} }
.equip-item{display:grid; grid-template-columns:160px minmax(0,1fr); gap:var(--sp-4); align-items:start}
@media (max-width:480px){ .equip-item{grid-template-columns:minmax(0,1fr)} }
.equip-item h3{font-size:var(--fs-md); margin-bottom:var(--sp-1)}
.equip-item .role{font-size:var(--fs-xs); color:var(--teal); letter-spacing:.08em; text-transform:uppercase; font-weight:600}
.equip-item p{font-size:15px; color:var(--fg-2); margin:var(--sp-1) 0 0}

/* 4.7 사진 자리표시 (실제 촬영 이미지로 교체) */
.ph{position:relative; background:var(--bg-alt); border:1px dashed var(--line-strong); border-radius:var(--radius); aspect-ratio:4/3; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:var(--fs-sm); text-align:center; padding:var(--sp-3); overflow:hidden}
.ph--wide{aspect-ratio:16/9}
.ph--square{aspect-ratio:1}
.ph--portrait{aspect-ratio:3/4}
.ph::before{content:"사진"; position:absolute; top:8px; left:10px; font-family:var(--font-mono); font-size:11px; letter-spacing:.1em; color:var(--muted)}

/* 4.8 인증 */
.cert{display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface)}
@media (max-width:480px){ .cert{grid-template-columns:minmax(0,1fr)} }
.cert .ph{aspect-ratio:3/4}
.cert-img{margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt); align-self:start}
.cert-img img{width:100%; display:block}
@media (max-width:480px){ .cert-img{max-width:240px} }
.cert dl{margin:var(--sp-3) 0 0; display:grid; grid-template-columns:auto minmax(0,1fr); gap:4px 12px; font-size:var(--fs-sm)}
.cert dt{color:var(--muted)} .cert dd{margin:0}

/* 4.9 연혁 */
.timeline{list-style:none; padding:0; margin:0; max-width:none; border-left:2px solid var(--line); margin-left:6px}
.timeline li{position:relative; padding:0 0 var(--sp-5) var(--sp-5); margin:0}
.timeline li::before{content:""; position:absolute; left:-7px; top:9px; width:12px; height:12px; border-radius:50%; background:var(--bg); border:2px solid var(--teal)}
.timeline .year{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--teal); display:block; margin-bottom:2px}
.timeline p{margin:0; color:var(--fg-2); font-size:15px}

/* 4.10 연구진 */
.person{display:grid; grid-template-columns:120px minmax(0,1fr); gap:var(--sp-4)}
@media (max-width:480px){ .person{grid-template-columns:minmax(0,1fr)} }
.person .ph{aspect-ratio:3/4}
.person-photo{width:100%; height:auto; aspect-ratio:3/4; object-fit:cover; object-position:50% 0; border-radius:var(--radius); background:var(--bg-alt)}
@media (max-width:480px){ .person-photo{max-width:240px} }
.person-avatar{aspect-ratio:3/4; display:flex; align-items:center; justify-content:center; border-radius:var(--radius); background:linear-gradient(160deg,#e3f3f5,#c9e6ea); font-size:64px; line-height:1}
@media (max-width:480px){ .person-avatar{max-width:240px; font-size:96px} }
.person .role{font-size:var(--fs-sm); color:var(--teal); margin-bottom:var(--sp-1)}
.person h3{font-size:var(--fs-md); margin-bottom:var(--sp-2)}
.person ul{padding-left:18px; font-size:14.5px; color:var(--fg-2); margin:0}

/* 4.11 논문 */
.paper{border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5); background:var(--surface)}
.paper .journal{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--teal); margin-bottom:var(--sp-2)}
.paper h3{font-size:var(--fs-md); margin-bottom:var(--sp-2)}
.paper .meta{font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-3)}
.paper dl{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; margin:0; font-size:15px}
.paper dt{color:var(--muted); white-space:nowrap} .paper dd{margin:0}

/* 4.12 글 목록 */
.post-list{list-style:none; padding:0; margin:0; max-width:none; display:grid; gap:0}
.post-list li{margin:0; border-bottom:1px solid var(--line)}
.post-list a{display:grid; grid-template-columns:110px minmax(0,1fr); gap:var(--sp-4); padding:var(--sp-4) 0; color:inherit}
.post-list a:hover{text-decoration:none}
.post-list a:hover .title{color:var(--teal)}
.post-list .cat{font-size:var(--fs-xs); color:var(--teal); letter-spacing:.08em; text-transform:uppercase; font-weight:600; padding-top:4px}
.post-list .title{font-weight:600; font-size:17px; margin-bottom:2px}
.post-list .summary{font-size:14.5px; color:var(--fg-2); margin:0}
.post-list .by{font-size:var(--fs-xs); color:var(--muted); margin-top:4px}
@media (max-width:480px){ .post-list a{grid-template-columns:minmax(0,1fr); gap:4px} }

/* 4.13 태그·배지 */
.tag{display:inline-block; font-size:var(--fs-xs); padding:2px 8px; border-radius:3px; background:var(--bg-alt); color:var(--fg-2); font-weight:500}
.tag--teal{background:var(--teal-soft); color:var(--teal-ink)}
.tag--rust{background:var(--rust-soft); color:var(--rust)}
.tag--warn{background:var(--warn-soft); color:var(--warn)}

/* 4.14 폼 */
.form{display:grid; gap:var(--sp-4); max-width:560px}
.field{display:grid; gap:6px}
.field label{font-size:var(--fs-sm); font-weight:600; color:var(--fg)}
.field .hint{font-size:var(--fs-xs); color:var(--muted)}
.field input,.field select,.field textarea{
  font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--line-strong); border-radius:var(--radius); background:var(--surface); color:var(--fg); width:100%
}
.field textarea{min-height:120px; resize:vertical}
.field--check{grid-template-columns:auto minmax(0,1fr); align-items:start; gap:10px}
.field--check input{width:auto; margin-top:5px}
.field--check label{font-weight:400; font-size:14.5px}
.form-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4)}
@media (max-width:480px){ .form-row{grid-template-columns:minmax(0,1fr)} }

/* 4.15 알림 박스 */
.notice{border:1px solid var(--line); border-left:3px solid var(--teal); background:var(--bg-alt); padding:var(--sp-4) var(--sp-5); border-radius:0 var(--radius) var(--radius) 0; font-size:15px; max-width:var(--measure)}
.notice--warn{border-left-color:var(--warn); background:var(--warn-soft)}
.notice p:last-child{margin-bottom:0}

/* 4.16 푸터 */
.footer{background:var(--teal-ink); color:#cfe0e4; padding-block:var(--sp-7) var(--sp-5); margin-top:var(--sp-8); font-size:var(--fs-sm)}
.footer a{color:#e8f2f4}
.footer .cols{display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:var(--sp-6); margin-bottom:var(--sp-6)}
@media (max-width:860px){ .footer .cols{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .footer .cols{grid-template-columns:minmax(0,1fr)} }
.footer .brand .wordmark{color:#fff}
.footer .brand .org{color:#9fbac1}
.footer h2{color:#fff; font-size:var(--fs-sm); margin-bottom:var(--sp-3); letter-spacing:.04em}
.footer ul{list-style:none; padding:0; margin:0}
.footer li{margin-bottom:6px}
.footer .legal{border-top:1px solid rgba(255,255,255,.15); padding-top:var(--sp-4); color:#9fbac1; font-size:var(--fs-xs); line-height:1.7}
.footer .legal p{max-width:none; margin-bottom:6px}

/* 5. 페이지 전용 ------------------------------------------ */

/* 5.1 히어로 */
.hero{padding-block:var(--sp-9) var(--sp-8); border-bottom:1px solid var(--line)}
.hero .container{display:grid; grid-template-columns:minmax(0,7fr) minmax(0,5fr); gap:var(--sp-7); align-items:center}
@media (max-width:860px){ .hero{padding-block:var(--sp-7) var(--sp-6)} .hero .container{grid-template-columns:minmax(0,1fr)} }
.hero h1{font-family:var(--font-display); font-size:var(--fs-3xl); font-weight:600; line-height:1.25; letter-spacing:-.02em; margin:var(--sp-3) 0 var(--sp-4)}
@media (max-width:720px){ .hero h1{font-size:34px} }
.hero .lead{font-size:var(--fs-md); color:var(--fg-2); max-width:56ch}
.hero .btn-row{margin-top:var(--sp-5)}

/* 5.2 페이지 헤더 (서브 페이지) */
.page-head{padding-block:var(--sp-7) var(--sp-6); border-bottom:1px solid var(--line)}
.page-head h1{font-family:var(--font-display); font-weight:600; margin-top:var(--sp-2)}
.page-head p{color:var(--fg-2); margin:var(--sp-3) 0 0; font-size:var(--fs-md)}
.crumbs{font-size:var(--fs-sm); color:var(--muted); display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--muted)}
.crumbs span::before{content:"/"; margin-right:6px}

/* 5.3 아티클 */
.article{display:grid; grid-template-columns:minmax(0,1fr) 260px; gap:var(--sp-7); padding-block:var(--sp-7)}
@media (max-width:960px){ .article{grid-template-columns:minmax(0,1fr)} }
.article-body{min-width:0}
.article-body > h1{font-family:var(--font-display); font-weight:600; font-size:var(--fs-2xl); margin-bottom:var(--sp-3)}
.article-body .byline{display:flex; flex-wrap:wrap; gap:6px 16px; font-size:var(--fs-sm); color:var(--muted); margin-bottom:var(--sp-6); padding-bottom:var(--sp-4); border-bottom:1px solid var(--line)}
.article-body .byline a{color:var(--fg-2)}
.article-body .summary{font-size:var(--fs-md); color:var(--fg-2); border-left:3px solid var(--teal); padding-left:var(--sp-4); margin-bottom:var(--sp-6)}
.article-body .sources{font-size:var(--fs-sm); color:var(--fg-2); border-top:1px solid var(--line); padding-top:var(--sp-4); margin-top:var(--sp-7)}
.article-body .sources ol{padding-left:18px}
.aside{position:sticky; top:calc(var(--header-h) + 24px); align-self:start; display:grid; gap:var(--sp-5)}
.aside .toc{font-size:var(--fs-sm)}
.aside .toc ol{list-style:none; padding:0; margin:0; border-left:2px solid var(--line)}
.aside .toc a{display:block; padding:4px 0 4px 12px; color:var(--fg-2)}
.aside .toc a:hover{color:var(--teal); text-decoration:none}
.aside h2{font-size:var(--fs-xs); letter-spacing:.12em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-2)}
@media (max-width:960px){ .aside{position:static} }

/* 5.4 브리지 — 본사이트 연결 블록. 임상 적용 가슴 페이지와 가슴 관련 글 하단에만 배치한다. */
.bridge{border:1px solid var(--rust); border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-6); background:var(--rust-soft); display:grid; grid-template-columns:minmax(0,1fr) auto; gap:var(--sp-5); align-items:center; max-width:none}
@media (max-width:720px){ .bridge{grid-template-columns:minmax(0,1fr)} }
.bridge .eyebrow{color:var(--rust); display:block; margin-bottom:var(--sp-1)}
.bridge h3{font-size:var(--fs-md); margin-bottom:var(--sp-1)}
.bridge p{font-size:14.5px; color:var(--fg-2); margin:0; max-width:none}
.bridge .review{font-size:var(--fs-xs); color:var(--muted); margin-top:var(--sp-2)}

/* 5.5 임상 적용 분야 */
.fields{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-4)}
@media (max-width:960px){ .fields{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .fields{grid-template-columns:minmax(0,1fr)} }
.field-card{border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5); background:var(--surface); display:flex; flex-direction:column; gap:var(--sp-2); min-width:0}
.field-card h2,.field-card h3{font-size:var(--fs-md)}
.field-card p{font-size:14.5px; color:var(--fg-2); margin:0; flex:1}
.field-card--main{border-color:var(--rust)}
.field-card--main .eyebrow{color:var(--rust)}

/* 6. 유틸리티 -------------------------------------------- */
.mt-0{margin-top:0} .mt-3{margin-top:var(--sp-3)} .mt-5{margin-top:var(--sp-5)} .mt-6{margin-top:var(--sp-6)}
.mb-0{margin-bottom:0} .mb-3{margin-bottom:var(--sp-3)} .mb-5{margin-bottom:var(--sp-5)}
.text-muted{color:var(--muted)} .text-2{color:var(--fg-2)}
.tabular{font-variant-numeric:tabular-nums}
.sr-only{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
.visually-wide{max-width:none}
@media (prefers-reduced-motion:reduce){ *{transition:none!important; scroll-behavior:auto!important} }

/* =========================================================
   7. sc301-research-site 추가 컴포넌트
   (cell-site 뼈대 위에 실제 콘텐츠용으로 확장)
   ========================================================= */

/* 7.1 실제 사진 */
.photo{margin:0; border-radius:var(--radius); overflow:hidden; background:var(--bg-alt)}
.photo img{width:100%; height:100%; object-fit:cover; display:block}
.photo--portrait{aspect-ratio:3/4}
.photo--wide{aspect-ratio:16/9}
.photo--4x3{aspect-ratio:4/3}
.photo figcaption{font-size:var(--fs-sm); color:var(--muted); padding:8px 2px 0; line-height:1.5}
.photo-pair{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px}

/* 7.2 키워드 칩 */
.chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:var(--sp-3)}
.chips span{font-size:var(--fs-xs); padding:3px 9px; border-radius:999px; background:var(--teal-soft); color:var(--teal-ink); font-weight:500}

/* 7.3 랩 투어 항목 (사진 좌 · 글 우, 짝수는 반전) */
.lab-item{display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:var(--sp-7); align-items:start; padding-block:var(--sp-7); border-top:1px solid var(--line)}
.lab-item:first-of-type{border-top:0}
.lab-item:nth-of-type(even) .lab-media{order:2}
@media (max-width:860px){ .lab-item{grid-template-columns:minmax(0,1fr); gap:var(--sp-5); padding-block:var(--sp-6)} .lab-item:nth-of-type(even) .lab-media{order:0} }
.lab-item .idx{font-family:var(--font-mono); font-size:var(--fs-sm); color:var(--teal); letter-spacing:.06em; margin-bottom:var(--sp-2)}
.lab-item h2{font-family:var(--font-display); font-weight:600; font-size:var(--fs-xl); margin-bottom:var(--sp-3)}
.lab-item .q{font-weight:600; font-size:var(--fs-md); margin-bottom:var(--sp-2); color:var(--teal-ink)}
.lab-item .a{font-size:var(--fs-md); margin-bottom:var(--sp-3)}
.lab-item p{color:var(--fg-2)}

/* 7.4 목차 (Contents) */
.contents{border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5) var(--sp-6); background:var(--surface); max-width:720px}
.contents h2{font-size:var(--fs-xs); letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:var(--sp-3)}
.contents ol{margin:0; padding-left:22px; columns:2; column-gap:32px; max-width:none}
@media (max-width:600px){ .contents ol{columns:1} }
.contents li{break-inside:avoid; font-size:15px; margin-bottom:6px}
.contents a{color:var(--fg)}

/* 7.5 FAQ (details/summary) */
.faq{border-top:1px solid var(--line); max-width:none}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{cursor:pointer; list-style:none; padding:16px 0; font-weight:600; font-size:17px; display:flex; gap:12px; align-items:flex-start}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"Q"; font-family:var(--font-mono); color:var(--teal); flex:0 0 auto; padding-top:1px}
.faq summary::after{content:"+"; margin-left:auto; color:var(--muted); font-weight:400; font-size:20px; line-height:1}
.faq details[open] summary::after{content:"−"}
.faq .ans{padding:0 0 18px 26px; color:var(--fg-2); max-width:var(--measure)}
.faq .ans p:last-child{margin-bottom:0}

/* 7.6 연구 프로세스 STEP */
.steps{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--sp-3)}
@media (max-width:860px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:480px){ .steps{grid-template-columns:minmax(0,1fr)} }
.steps .s{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-4) var(--sp-5)}
.steps .s .n{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--teal); letter-spacing:.1em; margin-bottom:6px}
.steps .s b{display:block; font-size:16px}
.steps .s p{font-size:14px; color:var(--fg-2); margin:6px 0 0}

/* 7.7 연구 부문 3개 */
.divisions{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4)}
@media (max-width:860px){ .divisions{grid-template-columns:minmax(0,1fr)} }
.division{border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-5); background:var(--surface)}
.division .k{font-family:var(--font-mono); font-size:var(--fs-xs); color:var(--teal); letter-spacing:.1em}
.division h3{font-size:var(--fs-md); margin:6px 0 8px}
.division p{font-size:14.5px; color:var(--fg-2); margin:0}

/* 7.8 마무리 섹션 */
.closing{background:var(--teal-ink); color:#e8f2f4; padding-block:var(--sp-8)}
.closing .eyebrow{color:#9fd3dd}
.closing h2{font-family:var(--font-display); font-weight:600; color:#fff; font-size:var(--fs-2xl); margin:var(--sp-3) 0 var(--sp-4)}
.closing p{color:#cfe0e4; font-size:var(--fs-md)}
.closing .btn--ghost{color:#fff; border-color:rgba(255,255,255,.5)}
.closing .btn--ghost:hover{background:rgba(255,255,255,.1); color:#fff}

/* 7.9 부작용 고지 (의료광고 필수 문구) */
.disclaimer{font-size:var(--fs-xs); color:var(--muted); border-top:1px solid var(--line); padding-top:var(--sp-3); margin-top:var(--sp-5); max-width:none}

/* 7.10 진료시간 표 */
.hours{display:grid; grid-template-columns:auto minmax(0,1fr); gap:6px 16px; font-size:15px; margin:0}
.hours dt{color:var(--muted)} .hours dd{margin:0; font-variant-numeric:tabular-nums}
/* 7.11 내비 항목 수가 많아 글자 크기 소폭 축소 */
.nav a{font-size:14.5px; padding:8px 10px}

/* 8. 조직도 · 논문/특허 이미지 (연구센터 소개 페이지 원문 반영) */
.org-chart{margin:0; padding:var(--sp-5); border:1px solid var(--line); border-radius:var(--radius-lg); background:var(--surface)}
.org-chart img{width:100%; max-width:860px; height:auto; display:block; margin-inline:auto}
.org-chart figcaption{font-size:var(--fs-sm); color:var(--muted); text-align:center; padding-top:var(--sp-3); line-height:1.5}
.paper-imgs{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--sp-4); margin-bottom:var(--sp-5)}
.paper-imgs .photo img{object-fit:contain}
@media (max-width:600px){ .paper-imgs{grid-template-columns:minmax(0,1fr)} }

/* 9. 분리 공정 목록 · 감수 표기 · 카드 안 목록 (연구 노트 참고 반영) */
.proc{list-style:none; padding:0; margin:0; max-width:none; display:grid; gap:var(--sp-3)}
.proc li{display:grid; grid-template-columns:56px minmax(0,1fr); gap:var(--sp-4); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5); margin:0}
.proc .pn{font-family:var(--font-mono); font-size:22px; color:var(--teal); line-height:1; padding-top:4px}
.proc h3{font-size:var(--fs-md); margin:0 0 6px}
.proc h3 .where{display:inline-block; font-family:var(--font-mono); font-size:var(--fs-xs); font-weight:500; color:var(--muted); letter-spacing:.06em; margin-left:8px; vertical-align:middle}
.proc p{margin:0; font-size:15px; color:var(--fg-2); max-width:none}
.proc p b{color:var(--fg)}
@media (max-width:480px){ .proc li{grid-template-columns:minmax(0,1fr)} .proc .pn{padding-top:0} }
.review-line{font-size:var(--fs-sm); color:var(--muted); border-top:1px solid var(--line); padding-top:var(--sp-4); margin-top:var(--sp-6); margin-bottom:var(--sp-6); max-width:none}
.card ul.plain{list-style:none; padding:0; margin:0; font-size:14.5px; color:var(--fg-2)}
.card ul.plain li{padding:4px 0; border-bottom:1px dashed var(--line); margin:0}
.card ul.plain li:last-child{border-bottom:0}
.chips span a{color:inherit}
/* 내비 9항목 + CTA: 중간 폭에서 글자·여백을 줄여 한 줄 유지 */
@media (min-width:961px) and (max-width:1240px){ .nav a{font-size:13.5px; padding:8px 7px} .nav .nav-cta{padding:8px 10px} .brand .org{display:none} }

/* 10. 첫 화면 전면 배경형 히어로 (assets/img/hero-stem-cell.jpg 가 없으면 그라데이션 대체 배경이 보인다) */
.hero--image{position:relative; isolation:isolate; overflow:hidden; border-bottom:0; background:#0a181d; color:#fff; min-height:min(88vh,760px); display:flex; flex-direction:column; justify-content:center; padding-block:var(--sp-9) var(--sp-9)}
.hero--image .container{width:100%; box-sizing:border-box; min-width:0}
.hero-copy{min-width:0}
.hero-bg{position:absolute; inset:0; z-index:-2;
  background:
    url("img/hero-stem-cell.jpg") center / cover no-repeat,
    radial-gradient(42% 60% at 68% 48%, rgba(57,178,196,.55) 0%, rgba(57,178,196,.18) 45%, transparent 72%),
    radial-gradient(28% 40% at 80% 30%, rgba(120,214,228,.45) 0%, transparent 70%),
    radial-gradient(22% 30% at 58% 72%, rgba(27,120,140,.6) 0%, transparent 70%),
    radial-gradient(60% 80% at 85% 85%, rgba(14,70,82,.9) 0%, transparent 70%),
    #0a181d;
  animation:hero-drift 24s ease-in-out infinite alternate}
@keyframes hero-drift{from{transform:scale(1) translate3d(0,0,0)} to{transform:scale(1.06) translate3d(-1.5%,1%,0)}}
@media (prefers-reduced-motion:reduce){ .hero-bg{animation:none} }
.hero-shade{position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(90deg, rgba(8,20,24,.94) 0%, rgba(8,20,24,.82) 38%, rgba(8,20,24,.42) 62%, rgba(8,20,24,.18) 100%),
    linear-gradient(180deg, rgba(8,20,24,.35) 0%, transparent 30%, transparent 70%, rgba(8,20,24,.75) 100%)}
.hero--image .container{grid-template-columns:minmax(0,8fr) minmax(0,4fr); align-items:end}
.hero--image .eyebrow{color:#8fd6e2}
.hero--image h1{color:#fff; font-size:clamp(36px, 4.6vw, 54px); text-shadow:0 2px 24px rgba(0,0,0,.35)}
.hero--image .lead{color:rgba(255,255,255,.82); max-width:52ch}
.hero--image .btn{background:#fff; color:var(--teal-ink); border-color:#fff}
.hero--image .btn:hover{background:#e3f1f3}
.hero--image .btn--ghost{background:transparent; color:#fff; border-color:rgba(255,255,255,.55)}
.hero--image .btn--ghost:hover{border-color:#fff; background:rgba(255,255,255,.08)}
.hero-marks{list-style:none; padding:0; margin:var(--sp-6) 0 0; max-width:none; display:flex; flex-wrap:wrap; gap:8px 28px; border-top:1px solid rgba(255,255,255,.18); padding-top:var(--sp-4)}
.hero-marks li{margin:0; display:grid; gap:2px}
.hero-marks .k{font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; color:rgba(255,255,255,.6)}
.hero-marks .v{font-family:var(--font-mono); font-size:14px; color:#fff}
.hero-card{justify-self:end; display:grid; grid-template-columns:96px minmax(0,1fr); gap:14px; align-items:center; width:min(100%,380px); padding:12px; border-radius:var(--radius-lg); background:rgba(10,24,29,.55); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px); color:#fff; box-shadow:0 20px 50px rgba(0,0,0,.35)}
.hero-card:hover{text-decoration:none; border-color:rgba(255,255,255,.4)}
.hero-card img{width:96px; height:96px; object-fit:cover; border-radius:var(--radius)}
.hero-card .eyebrow{display:block; margin-bottom:4px}
.hero-card b{display:block; font-size:14.5px; line-height:1.4}
.hero-card .more{display:block; margin-top:6px; font-size:var(--fs-sm); color:#8fd6e2}
.hero-credit{position:absolute; right:20px; bottom:10px; margin:0; font-size:11px; color:rgba(255,255,255,.45); max-width:none}
@media (max-width:860px){
  .hero--image{min-height:0; padding-block:var(--sp-8) var(--sp-8)}
  .hero-shade{background:linear-gradient(180deg, rgba(8,20,24,.88) 0%, rgba(8,20,24,.78) 60%, rgba(8,20,24,.9) 100%)}
  .hero--image .container{grid-template-columns:minmax(0,1fr)}
  .hero-card{justify-self:start; margin-top:var(--sp-4)}
  .hero-credit{position:static; padding:var(--sp-5) 20px 0; text-align:left}
}

/* 11. 하위 페이지 상단 블록: 첫 화면의 어두운 청록(#0a181d)을 기준으로 페이지마다 색상(hue)만 조금씩 다르게 */
.page-head{--ph-h:190; --ph-s:55%; position:relative; isolation:isolate; overflow:hidden; border-bottom:0; color:#fff; background:#0a181d; padding-block:var(--sp-8) var(--sp-7)}
.page-head::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(55% 95% at 88% 15%, hsl(var(--ph-h) var(--ph-s) 48% / .55) 0%, hsl(var(--ph-h) var(--ph-s) 48% / .15) 45%, transparent 72%),
    radial-gradient(38% 70% at 62% 100%, hsl(calc(var(--ph-h) + 18) 50% 40% / .5) 0%, transparent 70%),
    radial-gradient(70% 120% at 100% 100%, hsl(var(--ph-h) 45% 20% / .95) 0%, transparent 70%),
    linear-gradient(90deg, #0a181d 0%, #0c1f25 55%, hsl(var(--ph-h) 40% 14%) 100%)}
.page-head::after{content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg, rgba(8,20,24,.55) 0%, rgba(8,20,24,.25) 45%, transparent 75%)}
.page-head .crumbs,.page-head .crumbs a{color:rgba(255,255,255,.6)}
.page-head .crumbs a:hover{color:#fff}
.page-head .eyebrow{color:hsl(var(--ph-h) 60% 76%); display:inline-block; margin-top:var(--sp-3)}
.page-head h1{color:#fff; font-size:clamp(30px, 3.6vw, 44px); line-height:1.25; letter-spacing:-.015em; max-width:30ch; text-shadow:0 2px 20px rgba(0,0,0,.3)}
.page-head p{color:rgba(255,255,255,.8); max-width:60ch}
.page-head a:not(.crumbs a){color:hsl(var(--ph-h) 60% 80%)}
@media (max-width:720px){ .page-head{padding-block:var(--sp-6) var(--sp-6)} }
/* 페이지별 색상: 청록(190)을 기준으로 ±50 안에서 이동 */
.page-head[data-tone="about"]{--ph-h:190}
.page-head[data-tone="lab"]{--ph-h:204}
.page-head[data-tone="process"]{--ph-h:172}
.page-head[data-tone="research"]{--ph-h:222}
.page-head[data-tone="team"]{--ph-h:163}
.page-head[data-tone="cert"]{--ph-h:198; --ph-s:45%}
.page-head[data-tone="knowledge"]{--ph-h:236; --ph-s:45%}
.page-head[data-tone="faq"]{--ph-h:184; --ph-s:50%}
.page-head[data-tone="clinical"]{--ph-h:140; --ph-s:42%}
.page-head[data-tone="contact"]{--ph-h:212}

/* 12. 마무리 블록 바로 뒤에 푸터가 올 때 흰 띠가 생기지 않도록 붙이고, 경계선으로만 구분 */
main > .closing:last-child{margin-bottom:calc(-1 * var(--sp-8))}
.footer{border-top:1px solid rgba(255,255,255,.14)}
.review-line{margin-bottom:0}
/* 13. 마무리 블록도 상단 블록과 같은 계열의 그라데이션으로, 푸터(단색)와 구분 */
.closing{--ph-h:190; position:relative; isolation:isolate; overflow:hidden; background:#0b1d22}
.closing::before{content:""; position:absolute; inset:0; z-index:-1;
  background:
    radial-gradient(50% 110% at 90% 20%, hsl(var(--ph-h) 55% 46% / .5) 0%, transparent 70%),
    radial-gradient(40% 80% at 15% 110%, hsl(calc(var(--ph-h) + 18) 50% 38% / .4) 0%, transparent 70%),
    linear-gradient(90deg, #0b1d22 0%, #0d2228 50%, hsl(var(--ph-h) 40% 15%) 100%)}

/* 14. 분리 공정 타임라인 (process.html #steps) */
.steps-dark{--ph-h:178; position:relative; isolation:isolate; color:#e8f2f4; background:#0b1d22}
.steps-dark::before{content:""; position:absolute; inset:0; z-index:-1;
  background:radial-gradient(45% 30% at 95% 0%, hsl(var(--ph-h) 55% 40% / .45), transparent 70%),
             radial-gradient(40% 25% at 0% 55%, hsl(200 50% 35% / .3), transparent 70%),
             radial-gradient(45% 25% at 100% 100%, hsl(160 45% 32% / .35), transparent 70%)}
.steps-dark .section-head h2{color:#fff; font-family:var(--font-display); font-weight:600}
.steps-dark .section-head p{color:rgba(255,255,255,.75)}
.steps-dark .eyebrow{color:#8fd6e2}
.steps-dark a{color:#9fe0ea}

/* 흐름 요약 바 */
.flow{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:8px; margin:var(--sp-6) 0 var(--sp-7)}
.flow-zone{position:relative; display:flex; flex-wrap:wrap; gap:6px; align-items:center; padding:28px 12px 12px; border-radius:var(--radius-lg); border:1px solid rgba(255,255,255,.14)}
.flow-zone--or{background:rgba(255,255,255,.04)}
.flow-zone--lab{background:linear-gradient(90deg, rgba(57,178,196,.16), rgba(57,178,196,.08)); border-color:rgba(143,214,226,.35)}
.fz-label{position:absolute; top:8px; left:12px; font-size:11px; letter-spacing:.1em; color:rgba(255,255,255,.55)}
.flow-zone--lab .fz-label{color:#8fd6e2}
.flow-zone a{font-size:13.5px; color:#fff; padding:6px 10px; border-radius:999px; background:rgba(255,255,255,.08); white-space:nowrap}
.flow-zone a:hover{background:rgba(255,255,255,.18); text-decoration:none}
.flow-time{grid-column:1/-1; display:flex; flex-wrap:wrap; gap:6px 24px; font-size:var(--fs-sm); color:rgba(255,255,255,.65)}
.flow-time b{color:#fff; font-family:var(--font-mono); font-weight:500}
@media (max-width:860px){ .flow{grid-template-columns:minmax(0,1fr)} }

/* 타임라인 */
.tl{list-style:none; padding:0; margin:0; max-width:none; position:relative; display:grid; gap:var(--sp-6)}
.tl::before{content:""; position:absolute; left:50%; top:20px; bottom:20px; width:2px; transform:translateX(-1px);
  background:linear-gradient(180deg, rgba(255,255,255,.15) 0 8%, #39b2c4 12% 84%, rgba(255,255,255,.15) 90% 100%)}
.tl-step{position:relative; margin:0; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-8); align-items:center; scroll-margin-top:90px}
.tl-step::before{content:""; position:absolute; left:50%; top:50%; width:16px; height:16px; transform:translate(-50%,-50%); border-radius:50%; background:#0b1d22; border:3px solid #39b2c4; box-shadow:0 0 0 6px rgba(57,178,196,.15); z-index:1}
.tl-step[data-zone="or"]::before{border-color:#cfe0e4; box-shadow:0 0 0 6px rgba(255,255,255,.08)}
.tl-step:nth-child(even) .tl-media{order:2}
.tl-media{position:relative; margin:0; border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; background:#0e2a31; box-shadow:0 24px 50px rgba(0,0,0,.35)}
.tl-media img{width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s ease}
.tl-step:hover .tl-media img{transform:scale(1.04)}
.tl-body{min-width:0}
.tl-top{display:flex; align-items:baseline; gap:12px; margin-bottom:6px}
.tl-n{font-family:var(--font-display); font-size:56px; line-height:1; font-weight:600; color:transparent; -webkit-text-stroke:1px rgba(143,214,226,.7)}
.tl-zone{font-family:var(--font-mono); font-size:12px; letter-spacing:.06em; color:#8fd6e2; border:1px solid rgba(143,214,226,.4); border-radius:999px; padding:3px 10px}
.tl-step[data-zone="or"] .tl-zone{color:#e8f2f4; border-color:rgba(255,255,255,.35)}
.tl-body h3{color:#fff; font-size:24px; font-family:var(--font-display); font-weight:600; margin:4px 0 12px}
.tl-body p{color:rgba(255,255,255,.82); font-size:15.5px; margin:0 0 8px; max-width:52ch}
.tl-body p.sub{color:rgba(255,255,255,.6); font-size:14px}
.specs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:14px}
.spec{display:inline-flex; align-items:baseline; gap:4px; padding:6px 12px; border-radius:8px; background:rgba(57,178,196,.14); border:1px solid rgba(57,178,196,.35); font-size:13px; color:rgba(255,255,255,.75)}
.spec b{font-family:var(--font-mono); font-size:16px; font-weight:500; color:#fff}

/* 7단계 배합 다이어그램 */
.tl-media--diagram{display:flex; align-items:center; justify-content:center; background:linear-gradient(135deg,#0f3139,#0b1d22); border:1px solid rgba(143,214,226,.25)}
.tl-media--diagram::after{display:none}
.mix{width:82%; display:grid; gap:14px}
.mix-label{font-size:12px; letter-spacing:.1em; color:#8fd6e2}
.mix-bar{display:flex; height:56px; border-radius:10px; overflow:hidden; border:1px solid rgba(255,255,255,.2)}
.mix-bar .fat{display:flex; align-items:center; padding-left:14px; background:linear-gradient(90deg,#e9d8a6,#f3e6bd); color:#3b3220; font-size:14px}
.mix-bar .svf{background:#39b2c4; box-shadow:-6px 0 18px rgba(57,178,196,.8)}
.mix-legend{display:flex; gap:18px; font-size:13px; color:rgba(255,255,255,.8)}
.mix-legend .dot{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; vertical-align:-1px}
.dot.fat{background:#f3e6bd} .dot.svf{background:#39b2c4}
.mix-route{display:grid; grid-template-columns:auto minmax(0,1fr) auto; gap:10px; align-items:center; font-size:13px; color:#fff; margin-top:8px}
.mix-route svg{width:100%; height:12px; color:#8fd6e2}
.mix-note{font-family:var(--font-mono); font-size:12px; color:rgba(255,255,255,.6)}
/* 글자가 들어간 일러스트: 잘리지 않게 이미지 바탕색(#fafafa)에 전체 표시 */
.tl-media.tl-media--illust{background:#fafafa}
.tl-media--illust img{object-fit:contain; padding:4%}
.tl-step:hover .tl-media--illust img{transform:none}
/* 1단계 채취 경로 다이어그램 */
.dg-flow{display:grid; grid-template-columns:minmax(0,1fr) 18px minmax(0,1fr) 18px minmax(0,1fr); gap:6px; align-items:center}
.dg-node{padding:14px 6px; border-radius:10px; border:1px solid rgba(255,255,255,.22); background:rgba(255,255,255,.06); text-align:center; font-size:14px; font-weight:600; color:#fff; line-height:1.35}
.dg-node small{display:block; margin-top:4px; font-size:11.5px; font-weight:400; color:rgba(255,255,255,.7)}
.dg-node--accent{border-color:#39b2c4; background:rgba(57,178,196,.18); box-shadow:0 0 18px rgba(57,178,196,.35)}
.dg-flow svg{width:18px; height:12px; color:#8fd6e2}

/* 표 접기 */
.tl-table{margin-top:var(--sp-7); border:1px solid rgba(255,255,255,.15); border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5); background:rgba(255,255,255,.03)}
.tl-table summary{cursor:pointer; color:#fff; font-weight:600}
.tl-table[open] summary{margin-bottom:var(--sp-4)}
.tl-table table{color:rgba(255,255,255,.85)}
.tl-table th,.tl-table td{border-color:rgba(255,255,255,.12)!important; color:inherit}
.tl-table th{color:#8fd6e2}
.tl-source{color:rgba(255,255,255,.55)!important; margin-top:var(--sp-4)}

@media (max-width:860px){
  .tl::before{left:7px}
  .tl-step{grid-template-columns:minmax(0,1fr); gap:var(--sp-4); padding-left:32px}
  .tl-step::before{left:8px; top:28px}
  .tl-step:nth-child(even) .tl-media{order:0}
  .tl-n{font-size:44px}
}
@media (prefers-reduced-motion:reduce){ .tl-media img{transition:none} }
.spec b,.flow-time b{font-family:var(--font-body); font-weight:700; font-variant-numeric:tabular-nums; letter-spacing:-.01em}
/* 15. 단계 섹션 밝기 조정: 바탕을 중간 청록으로 */
.steps-dark{background:#17505b}
.steps-dark::before{background:
  radial-gradient(50% 35% at 95% 0%, hsl(186 55% 52% / .45), transparent 70%),
  radial-gradient(45% 30% at 0% 50%, hsl(196 50% 48% / .30), transparent 70%),
  radial-gradient(50% 30% at 100% 100%, hsl(165 45% 45% / .35), transparent 70%),
  linear-gradient(180deg, #1a5864 0%, #17505b 50%, #154a54 100%)}
.tl-step::before{background:#17505b}
.tl-media{background:#1f5f6b; box-shadow:0 20px 40px rgba(4,30,36,.35)}
.tl-media--diagram{background:linear-gradient(135deg,#226876,#185561); border-color:rgba(200,240,246,.3)}
.spec{background:rgba(255,255,255,.12); border-color:rgba(200,240,246,.35)}
.flow-zone--or{background:rgba(255,255,255,.07)}
.flow-zone--lab{background:linear-gradient(90deg, rgba(160,230,240,.20), rgba(160,230,240,.10))}
.tl-table{background:rgba(255,255,255,.06)}
.steps-dark .section-head p,.tl-body p{color:rgba(255,255,255,.88)}
.tl-body p.sub{color:rgba(255,255,255,.7)}

/* 16. 첫 화면 통계 동작 */
.stat .value small.pre{margin:0 6px 0 0}
.meter{position:relative; height:6px; border-radius:99px; background:var(--teal-soft); margin-top:var(--sp-3); overflow:visible}
.meter i{position:absolute; inset:0 auto 0 0; width:100%; border-radius:inherit; background:linear-gradient(90deg,#7cc9d4,var(--teal)); transform-origin:left; transform:scaleX(var(--f,1))}
.meter i[data-fill="1"]{--f:1} .meter i[data-fill="0.7748"]{--f:.7748}
.meter--rate b{position:absolute; top:50%; width:12px; height:12px; margin:-6px 0 0 -6px; border-radius:50%; background:#fff; border:3px solid var(--teal); box-shadow:0 0 0 4px rgba(21,122,140,.15)}
.pips{display:flex; gap:6px; margin-top:var(--sp-3)}
.pips i{width:22px; height:6px; border-radius:99px; background:var(--teal)}
/* 애니메이션 시작 전 상태 (JS가 will-animate를 붙였을 때만) */
.will-animate .meter i{transform:scaleX(0); transition:transform 1.8s cubic-bezier(.22,.8,.3,1)}
.will-animate .meter--rate b{opacity:0; left:0 !important; transition:left 1.8s cubic-bezier(.22,.8,.3,1), opacity .3s}
.will-animate .pips i{transform:scaleX(0); transform-origin:left; transition:transform .4s ease}
.will-animate .stat{opacity:0; transform:translateY(14px); transition:opacity .6s ease, transform .6s ease}
.will-animate.is-in .stat{opacity:1; transform:none}
.will-animate.is-in .stat:nth-child(2){transition-delay:.08s} .will-animate.is-in .stat:nth-child(3){transition-delay:.16s} .will-animate.is-in .stat:nth-child(4){transition-delay:.24s}
.will-animate.is-in .meter i{transform:scaleX(var(--f,1))}
.will-animate.is-in .meter--rate b{opacity:1; left:77.48% !important}
.will-animate.is-in .pips i{transform:scaleX(1)}
.will-animate.is-in .pips i:nth-child(1){transition-delay:.5s} .will-animate.is-in .pips i:nth-child(2){transition-delay:.9s} .will-animate.is-in .pips i:nth-child(3){transition-delay:1.3s}
/* 스크롤 등장 */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .7s ease, transform .7s ease}
.reveal.is-in{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){ .reveal{opacity:1; transform:none; transition:none} }