@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* ══════════════════════════════════════════════════════════════
   NEB 홈페이지 시안 v0.3
   구조 · 섹션 문법 = 한국해양기술(koceco)
   첫 화면(영상 히어로) = 해양생태기술연구소(marine-eco)
   ══════════════════════════════════════════════════════════════ */

@view-transition { navigation: auto; }

:root{
  --blue:#0583F2; --blue-d:#0466C0; --sky:#64B5FC;
  --navy:#0E2A4F; --navy-2:#143A69; --deep:#071A31;
  --teal:#0E9488; --amber:#E8950C; --green:#1F8A5B; --red:#C6453C; --violet:#7A5AF0;
  --bg:#FFFFFF; --bg-2:#F5F8FB; --surface-2:#F8FAFC;
  --ink:#0B1220; --char:#2B3038; --slate:#5B6472; --stone:#98A2B0;
  --line:#E3E9F0; --line-2:#EFF3F8;
  --sh-1:0 1px 2px rgba(14,42,79,.05);
  --sh-2:0 6px 20px rgba(14,42,79,.10);
  --sh-3:0 16px 44px rgba(14,42,79,.16);
  --ring:0 0 0 3px rgba(5,131,242,.3);
  --max:1360px; --gut:32px; --r:4px;
  --hd:88px; --hd-s:66px;
  --ease:cubic-bezier(.22,.68,.32,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:128px;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--char);
  font-family:Pretendard,"Pretendard Variable","Noto Sans KR","Malgun Gothic",system-ui,sans-serif;
  font-size:16px;line-height:1.68;letter-spacing:-.01em;-webkit-font-smoothing:antialiased;
  word-break:keep-all}
img,svg,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:0;box-shadow:var(--ring);border-radius:4px}
::selection{background:var(--blue);color:#fff}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--blue);color:#fff;
  padding:11px 18px;border-radius:6px;font-weight:700;font-size:14px;transition:top .22s}
.skip:focus{top:12px}

/* ── 헤더 · 처음부터 끝까지 유리판(반투명) 흰 배경, 크기 고정 ───── */
header{position:fixed;top:0;left:0;right:0;z-index:100;
  background:rgba(255,255,255,.88);backdrop-filter:blur(8px);
  -webkit-backdrop-filter:blur(8px);
  border-bottom:1px solid rgba(227,233,240,.75);
  transform:translateZ(0)}
/* 디테일 많은 큰 사진(트랙레코드·소모품 배너 등)이 바로 밑을 지날 때
   backdrop-filter가 매 프레임 다시 계산되며 버벅이므로(체감상 깜빡임),
   스크롤 중에는 블러를 끄고 불투명 배경으로 대체했다가 스크롤이 멎으면
   되돌린다(site.js). */
header.is-scrolling{backdrop-filter:none;-webkit-backdrop-filter:none;
  background:rgba(255,255,255,.98)}
header .hd{position:relative;z-index:2;display:flex;align-items:center;height:var(--hd-s);gap:24px}
header .logo{flex:0 0 auto;display:flex;align-items:center}
header .logo img{height:33px;width:auto}

/* ── 메뉴 · 메가 드롭다운 ───────────────────────────────────────
   ⚠⚠ 대분류 하나에 마우스를 올리면 여섯 대분류의 중분류가 '한 판'에 모두 펼쳐진다
      (2026-09-16 대표님 - 지오시스템리서치처럼 한 번에 다 보이게).
   ⚠⚠ 판의 열은 **위 대분류와 정렬하지 않는다**(2026-09-16 대표님 시안). 대신 열마다
      대분류 이름을 다시 적고 왼쪽부터 차례로 놓는다 - 정렬을 맞추려 하면 대분류 간격이
      중분류 목록 폭에 묶여 머리말이 통째로 벌어진다. 남는 오른쪽은 배경 그림 자리다.
   ⚠ 열 폭은 내용 기준(max-content)이라 사업분야처럼 이름이 긴 열만 넓어진다. */
/* 상단 메뉴 · 펼침판 강조색 = 대표님 시안 청록(2026-10-16 '하늘색 계열 말고 녹색 쪽 계열로') - 사이트의 다른 파랑은 그대로 */
header{--mc:#058E93}
nav.gnb{display:flex;flex:1 1 auto;justify-content:center;column-gap:30px;align-items:center}
nav.gnb>div{position:static}
nav.gnb>div>a{display:block;padding:14px 6px;font-weight:700;font-size:17px;color:var(--ink);
  white-space:nowrap;letter-spacing:-.4px;transition:color .2s;position:relative}
nav.gnb>div>a::after{content:"";position:absolute;left:0;right:0;bottom:7px;height:2px;
  background:var(--mc);transform:scaleX(0);transition:transform .26s var(--ease)}
nav.gnb>div:hover>a::after,nav.gnb>div>a[aria-current]::after{transform:scaleX(1)}
nav.gnb>div:hover>a{color:var(--mc)}

/* 펼쳐지는 흰 판 - 높이는 내용에 맞춰 site.js 가 --mega-h 로 알려준다 */
header .mega{position:absolute;top:100%;left:0;right:0;z-index:1;height:0;overflow:hidden;
  background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--sh-3);
  opacity:0;visibility:hidden;transition:.26s var(--ease)}
header.mega-on .mega{height:var(--mega-h,420px);opacity:1;visibility:visible}
/* ⚠⚠ 2026-10-16 대표님 시안 - 판을 흰 바탕 여섯 칸으로 화면 폭(--max)에 고르게 편다.
   · 칸은 글 폭만큼(max-content) 왼쪽부터 놓고, 남는 오른쪽에 배경 그림(mega-bg)을 깐다(대표님 - '목록에 이미지는 넣어줘야지').
     칸 묶음 뒤에 흰 바탕 + 오른쪽 끝 96px 바림을 깔아 그림 위에 글이 겹치지 않게 한다(옛 규칙과 같다).
   · 칸 = 굵은 대분류 이름 + 항목마다 오른쪽 '>' · 지금 있는 대분류 칸은 연한 파랑 바탕(.mcol.on, site.js 가 붙인다)
   · 하위가 있는 항목(제품 구매 · 서비스 의뢰)은 굵은 소제목(.grp, '>' 없음) + 그 아래 점 목록(a.sub)
   · 칸 바탕이 판 위끝부터 아래끝까지 차도록 여백은 판(.mcols)이 아니라 칸(.mcol) 안에 둔다. */
header .mega-bg{position:absolute;top:0;right:0;bottom:0;width:52%;pointer-events:none;
  background:url(../img/mega-bg.webp) right center/cover no-repeat}
header .mega-in{position:relative;z-index:1;max-width:var(--max);margin:0 auto;
  padding:0 var(--gut)}
header .mcols{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(150px,max-content);justify-content:start;
  width:max-content;max-width:100%;padding-right:96px;
  background:linear-gradient(to right,#fff 0,#fff calc(100% - 96px),rgba(255,255,255,0) 100%)}
header .mcol{padding:30px 24px 36px}
header .mcol+.mcol{border-left:1px solid var(--line-2)}
header .mcol:last-child{border-right:1px solid var(--line-2)}
header .mcol.on{background:#EEF9F7}
header .mcol h4{margin:0 0 14px;font-size:22px;font-weight:800;letter-spacing:-.5px;
  white-space:nowrap}
header .mcol h4 a{color:var(--ink)}
header .mcol h4 a:hover,header .mcol h4 a.on{color:var(--mc)}
header .mcol>a{display:flex;align-items:center;gap:10px;padding:9px 0;font-size:16px;color:var(--slate);
  line-height:1.45;white-space:nowrap;transition:color .16s}
header .mcol>a::after{content:"";flex:0 0 auto;width:7px;height:7px;margin:0 3px 0 auto;
  border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg);opacity:.4;
  transition:opacity .16s}
header .mcol>a:hover,header .mcol>a[aria-current]{color:var(--mc);font-weight:600}
header .mcol>a:hover::after,header .mcol>a[aria-current]::after{opacity:1}
header .mcol>a.grp{margin-top:16px;font-size:16.5px;font-weight:800;color:var(--ink)}
header .mcol h4+a.grp{margin-top:0}
header .mcol>a.grp::after{content:none}
header .mcol>a.grp:hover,header .mcol>a.grp[aria-current]{color:var(--mc);font-weight:800}
/* 판이 열려 있으면 햄버거가 닫기(X)로 바뀐다 */
.burger .ic-x{display:none}
header.mega-on .burger .ic-menu{display:none}
header.mega-on .burger .ic-x{display:block}

/* ⚠ 영문은 이름이 길어 판의 열이 넓어진다 - 상단 대분류는 간격을 좁힌다. */
html[lang="en"] nav.gnb{column-gap:14px}
html[lang="en"] nav.gnb>div>a{padding-left:5px;padding-right:5px}
/* 중분류 아래 세부 자리(제품 구매의 세 묶음) - 한 단 들여 작게
   ⚠ em-dash 대신 하이픈을 쓴다(표기 규칙). */
header .mcol>a.sub{padding:7px 0 7px 4px;font-size:15px;color:var(--slate)}
header .mcol>a.sub::before{content:"";flex:0 0 auto;width:5px;height:5px;border-radius:50%;
  background:#8E9BAE}
header .mcol>a.sub:hover{color:var(--mc);font-weight:600}
html[lang="en"] header .mcol{padding:30px 12px 36px}
html[lang="en"] header .mcol>a{font-size:15px}
html[lang="en"] header .mcol>a.sub{font-size:14px}
html[lang="en"] header .mcol h4{font-size:19px}
/* ⚠ 영문 표어는 같은 뜻을 적어도 글자 수가 훨씬 많다 - 52ch 면 3줄이 된다(실측 841px/3줄).
   62ch(약 1016px) 면 2줄이고 큰 제목보다 넓어지지 않는다. */
html[lang="en"] .hero .hlead{max-width:62ch}
/* ⚠ 1181~1300px 구간은 영문 메뉴가 다 들어가지 못해 햄버거가 화면 밖으로 밀린다
   (실측 1181px 에서 58px 초과). 이 구간만 글씨·여백을 한 단계 더 줄인다.
   ⚠ 메뉴는 1180px 이하에서 숨으므로 그 아래는 영향이 없다. */
@media(max-width:1300px){
  /* ⚠ 좁아지면 상단 대분류부터 줄인다 - 판의 열은 내용 기준이라 그대로 둔다. */
  nav.gnb{column-gap:18px}
  nav.gnb>div>a{font-size:16px}
  header .mcol{padding:26px 16px 30px}
  header .mcol h4{font-size:19px}
  header .mcol>a{font-size:14.6px;padding:8px 0}
  header .mcol>a.sub{font-size:13.8px;padding:6px 0 6px 2px}
  html[lang="en"] nav.gnb{column-gap:8px}
  html[lang="en"] nav.gnb>div>a{font-size:15.5px;padding-left:4px;padding-right:4px}
  html[lang="en"] header .mcol{padding:26px 8px 30px}
  html[lang="en"] header .mcol h4{font-size:16px}
  html[lang="en"] header .mcol>a{font-size:13px;padding:7px 0}
  html[lang="en"] header .mcol>a.sub{font-size:12.6px}
}

.hd-act{flex:0 0 auto;display:flex;align-items:center;gap:10px;margin-left:auto}
.tel{display:inline-flex;align-items:center;gap:8px;background:var(--blue);color:#fff;
  font-weight:800;font-size:15.6px;padding:12px 22px;border-radius:999px;letter-spacing:.2px;
  transition:.24s var(--ease);white-space:nowrap}
.tel:hover{background:var(--blue-d);transform:translateY(-1px);box-shadow:0 8px 20px rgba(5,131,242,.3)}
/* ⚠ 넓은 화면에서도 띄운다(2026-09-08 대표님) - 위 메뉴에는 대분류만 보이지만
   여기를 누르면 소분류까지 한눈에 펼쳐져, 찾는 곳으로 바로 갈 수 있다.
   좁은 화면에서는 위 메뉴가 숨고 이것만 남는다(아래 반응형). */
.burger{display:grid;place-items:center;width:44px;height:44px;border:0;background:transparent;
  color:var(--ink);cursor:pointer;border-radius:8px;transition:background .18s}
.burger:hover{background:rgba(15,23,42,.06)}
/* 국문 ↔ 영문 전환 */
/* ⚠ 옆의 대표전화(파란 채움) 때문에 연회색 테두리 + 회색 글자로는 묻혔다
   (2026-09-16 대표님 - "EN 버튼도 눈에 잘 안 들어옴"). 남색 테두리 · 남색 굵은 글자에
   지구본 표시를 붙여 '무엇을 하는 버튼인지' 까지 드러낸다. */
.lang{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-width:62px;height:38px;
  padding:0 13px;background:var(--navy);border:1.6px solid var(--navy);border-radius:8px;
  font-weight:800;font-size:13.8px;letter-spacing:.6px;color:#fff;
  transition:.22s var(--ease);white-space:nowrap}
.lang svg{flex:0 0 auto;opacity:.92}
/* ⚠ 마우스를 올려야 남색이던 것을 **처음부터 남색**으로(2026-09-16 대표님).
   그래서 호버는 한 단계 밝은 남색으로 눌린 느낌만 준다. */
.lang:hover{background:var(--navy-2);border-color:var(--navy-2);color:#fff}

.drawer{position:fixed;inset:0;z-index:150;background:rgba(7,26,49,.5);opacity:0;visibility:hidden;
  transition:.3s var(--ease);backdrop-filter:blur(3px)}
.drawer.open{opacity:1;visibility:visible}
.drawer .panel{position:absolute;right:0;top:0;bottom:0;width:min(360px,86vw);background:#fff;
  padding:22px 24px 40px;overflow-y:auto;transform:translateX(100%);transition:transform .34s var(--ease)}
.drawer.open .panel{transform:none}
.drawer .panel .x{border:0;background:transparent;font-size:24px;cursor:pointer;float:right;color:var(--slate)}
.drawer .panel h4{margin:22px 0 4px;font-size:17px;color:var(--ink)}
.drawer .panel a{display:block;padding:9px 0;font-size:15px;color:var(--slate);border-bottom:1px solid var(--line-2)}
.drawer .panel a:hover{color:var(--blue)}
.drawer .panel a.sub{padding-left:14px;font-size:13.6px;color:var(--stone)}
.drawer .panel a.sub::before{content:"-";margin-right:7px;color:var(--line)}
/* ⚠ 바로 위 `.drawer .panel a` 규칙이 .btn 보다 특이도가 높아 display 와 padding 을
   덮어쓴다. display 가 block 이 되면 .btn 의 가운데 정렬(justify-content)이 무의미해져
   글자가 왼쪽에 붙는다(2026-09-07 신승희 주임 의견 - 실측 96·139px 치우침).
   메뉴 목록이 아니라 버튼이므로 여기서 되돌린다. */
.drawer .panel a.btn{display:flex;padding:15px 30px;border-bottom:0;color:#fff}
/* ⚠ 위 규칙에 color 가 빠져 있어 파란 단추에 회색 글자가 찍혔다(대비 1.6:1) -
   `.drawer .panel a` 가 `.btn` 보다 특이도가 높아 글자색까지 덮는다. */
.drawer .panel a.btn.ghost{color:var(--navy)}
.drawer .panel a.btn:hover{color:#fff}
.drawer .panel a.btn.ghost:hover{color:var(--blue)}

/* ── 히어로 (영상 배경) ─────────────────────────────────────── */
.hero{position:relative;min-height:100svh;display:flex;align-items:center;overflow:hidden;background:#071A31}
.hero video,.hero img.bgv{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero .scrim{position:absolute;inset:0;
  /* 2026-10-01 대표님 - 오른쪽이 어두워 보인다: 글이 있는 왼쪽(~46%)은 그대로, 오른쪽 끝 .32 -> .06 */
  background:linear-gradient(96deg,rgba(4,14,28,.9) 0%,rgba(4,14,28,.7) 40%,rgba(4,14,28,.3) 64%,rgba(4,14,28,.06) 100%)}
.hero .wrap{position:relative;color:#fff;padding-top:calc(var(--hd) + 30px);padding-bottom:120px;width:100%}
.hero .en-name{font-size:clamp(32px,5.4vw,76px);line-height:1.05;font-weight:800;letter-spacing:-2.4px;
  color:rgba(255,255,255,.95);margin:0 0 24px}
.hero .en-name span{display:block;overflow:hidden}
.hero .en-name span i{display:block;font-style:normal;transform:translateY(105%);
  animation:rise 1s var(--ease) forwards}
.hero .en-name span:nth-child(2) i{animation-delay:.11s}
@keyframes rise{to{transform:translateY(0)}}
.hero h1{font-size:clamp(33px,5.05vw,66px);font-weight:800;line-height:1.22;
  letter-spacing:-2.2px;color:#fff;margin:0 0 18px;max-width:20ch}
.hero .en-sub{font-size:clamp(17.7px,1.78vw,21.2px);color:#93AECF;font-weight:600;letter-spacing:.2px;margin:0 0 16px}
.hero .hlead{font-size:clamp(21.6px,2.3vw,27.5px);color:#C6D8F0;line-height:1.62;margin:0 0 36px;max-width:52ch}
.hero .acts{display:flex;gap:13px;flex-wrap:wrap}
/* 첫 화면 버튼만 한 단계 크게 - 전역 .btn 은 건드리지 않는다 */
.hero .acts .btn{font-size:16.8px;padding:16px 32px}
.hero .fade{opacity:0;animation:fu .85s var(--ease) forwards}
.hero h1{animation-delay:.12s}
.hero .en-sub{animation-delay:.26s}
.hero .hlead{animation-delay:.4s}
.hero .acts{animation-delay:.54s}
@keyframes fu{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
.cue{position:absolute;left:50%;bottom:32px;transform:translateX(-50%);width:46px;height:46px;
  border:1px solid rgba(255,255,255,.42);border-radius:50%;display:grid;place-items:center;
  color:rgba(255,255,255,.85);font-size:15px;animation:bob 2.2s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,9px)}}

/* ── 버튼 ───────────────────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;background:var(--blue);
  color:#fff;font-weight:700;font-size:15.5px;padding:15px 30px;border:1px solid var(--blue);
  border-radius:var(--r);cursor:pointer;transition:.24s var(--ease)}
.btn:hover{background:var(--blue-d);border-color:var(--blue-d);transform:translateY(-2px);box-shadow:var(--sh-2)}
.btn.line{background:transparent;border-color:rgba(255,255,255,.55);color:#fff}
.btn.line:hover{background:rgba(255,255,255,.13);border-color:#fff;box-shadow:none}
.btn.ghost{background:#fff;color:var(--navy);border-color:var(--line)}
.btn.ghost:hover{background:var(--bg-2);color:var(--blue);border-color:var(--blue)}
.btn.sm{font-size:14px;padding:11px 20px}
.more{display:inline-flex;align-items:center;gap:9px;border:1px solid var(--line);background:#fff;
  border-radius:999px;padding:12px 24px;font-size:14.5px;font-weight:700;color:var(--char);transition:.24s var(--ease)}
.more:hover{border-color:var(--blue);color:var(--blue);transform:translateY(-2px)}

/* ── 섹션 ───────────────────────────────────────────────────── */
section{padding:clamp(64px,7.2vw,108px) 0}
section.alt{background:var(--bg-2)}
#projects,#research,#papers{padding-top:clamp(45px,5vw,76px)}
section.flush{padding:0}
.sec-head{text-align:center;max-width:840px;margin:0 auto clamp(38px,4vw,56px)}
.sec-head.left{text-align:left;margin-left:0}
.sec-head.row{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;max-width:none;text-align:left}
.eyebrow{display:flex;align-items:center;justify-content:center;gap:11px;font-size:12px;font-weight:800;
  letter-spacing:2.4px;color:var(--blue);margin-bottom:13px}
.eyebrow::before{content:"";width:26px;height:2px;background:currentColor}
.sec-head.left .eyebrow,.sec-head.row .eyebrow{justify-content:flex-start}
.sec-head h2{font-size:clamp(27px,3.5vw,41px);font-weight:800;letter-spacing:-1.4px;color:var(--ink);
  margin:0 0 13px;line-height:1.26}
.sec-head p{font-size:clamp(15px,1.7vw,17.5px);color:var(--slate);margin:0}
.grid{display:grid;gap:26px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}

/* ── 카드 (koceco 시공사례 + marine-eco 해시태그) ───────────── */
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:visible;
  position:relative;display:flex;flex-direction:column;transition:.32s var(--ease)}
/* ⚠ 카드의 overflow 를 걷었으므로 사진 모서리는 .ph 가 직접 둥글린다 */
.card>.ph:first-child{border-radius:calc(var(--r) - 1px) calc(var(--r) - 1px) 0 0}
/* ⚠⚠ 아래 가장자리 흔들림 방지 - 자세한 이유는 .ctabox 쪽 주석 참고 */
.card::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0}
.card:hover::after{bottom:-8px;height:8px}
.card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-4px)}
.card .ph{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg-2)}
/* width/height:100%인 사진이 컨테이너를 서브픽셀 단위로 못 채우면 배경색(--bg-2)이
   얇은 선처럼 비친다 - 흰 배경 제품 사진에서 특히 두드러져(2026-09-18), 살짝
   오버스캔(scale)해 그 틈 자체를 없앤다. */
.card .ph img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);
  transition:transform .7s var(--ease)}
.card:hover .ph img{transform:scale(1.1)}
.card .pad{padding:22px 22px 22px;flex:1;display:flex;flex-direction:column}
.card .kicker{font-size:11.5px;font-weight:800;letter-spacing:1.4px;color:var(--blue);margin-bottom:9px}
.card h3{font-size:19.5px;font-weight:800;color:var(--ink);margin:0 0 10px;letter-spacing:-.6px;line-height:1.4}
/* 한글 제목 아래에 따라오는 영문 (검토보고서 4장) — 한글 제목이 줄바꿈되지 않도록 별도 줄로 배치 */
.card h3 .en{display:block;margin:3px 0 0;font-style:normal;font-size:13px;font-weight:600;
  letter-spacing:0;color:var(--stone)}
.card p{font-size:14.4px;color:var(--slate);margin:0;line-height:1.66;flex:1}
/* 메인 페이지 소모품 카드(#consumable-grid) 전용 - shop.html 자체 .price 스타일과
   충돌하지 않도록 이 id 안으로 한정한다. 설명과 버튼 사이 여백 + 버튼을 폭 꽉 채우게. */
#consumable-grid .card .price, #reagent-grid .card .price{margin-top:18px}
#consumable-grid .card .price a, #reagent-grid .card .price a{display:flex;width:100%}
/* 제품 사진(.ph.pw) - 제품 구매(shop.html)와 같은 여백으로 보이게 한다(2026-09-28).
   흰 배경에 잘리지 않게(contain) 넣고 안쪽 여백 10px. ⚠ shop.html 에도 같은 규칙이 있다. */
.card .ph.pw{background:#fff}
.card .ph.pw img{object-fit:contain;padding:10px}
.card .tags{display:flex;flex-wrap:wrap;gap:5px 6px;margin-top:14px;padding-top:13px;
  border-top:1px solid var(--line-2)}
.card .tags span{font-size:12px;font-weight:600;color:var(--slate);background:var(--bg-2);
  border-radius:999px;padding:4px 10px;line-height:1.5;white-space:nowrap;transition:.24s}
.card:hover .tags span{background:#EAF3FE;color:var(--blue-d)}
/* 사업분야 카드 - 한 줄 설명을 뺀 대신 제목을 키운다(2026-09-08 대표님).
   ⚠ '.card' 만으로 잡으면 수행 이력 카드까지 커진다 - 반드시 .area 를 붙일 것. */
.card.area h3{font-size:24px;margin:0 0 4px;line-height:1.35}
.card.area h3 .en{font-size:15.5px;margin-top:5px}
/* 태그는 두 줄까지만 보여 준다(2026-09-08 대표님) - 분야마다 개수가 달라 3~4줄로 들쭉날쭉했다.
   ⚠ 넘치는 태그는 잘린다(칩 26px + 세로 gap 5px 기준) - 개수를 늘리려면 이 높이를 함께 볼 것. */
.card.area .tags{margin-top:auto;padding-top:15px;
  max-height:calc(15px + 26px * 2 + 5px);overflow:hidden}

/* ── 좌우 분할 (koceco COMPANY 문법) ────────────────────────── */
.split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch;min-height:520px}
.split.rev .im{order:2}
.split .im{position:relative;overflow:hidden;min-height:380px;background:var(--bg-2)}
.split .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.split .tx{display:flex;flex-direction:column;justify-content:center;padding:clamp(38px,5vw,84px)}
.split .tx .eyebrow{justify-content:flex-start}
.split .tx .lead{font-size:clamp(21px,2.5vw,30px);font-weight:400;color:var(--slate);letter-spacing:-1px;margin:0;line-height:1.42}
/* ⚠ 강조 부분을 block 으로 두면 늘 두 줄이 된다 - 한 줄로 이어 쓰고 좁을 때만 접히게(2026-09-08 대표님) */
.split .tx .lead b{font-weight:800;color:var(--ink)}
/* ⚠ content:" " 는 인라인 앞 공백이라 브라우저가 지워 버린다 - 줄바꿈 없는 공백을 쓴다 */
.split .tx .lead b::before{content:"\00a0"}
/* ⚠ .lead.two 만 두 줄로 못박는다(2026-09-13 대표님 - 회사소개 첫 문장).
   다른 lead 는 위 규칙대로 한 줄로 이어 쓴다 - .two 를 빼고 적용하지 말 것. */
.split .tx .lead.two span,.split .tx .lead.two b{display:block}
.split .tx .lead.two b::before{content:none}
/* ⚠ 영문은 같은 뜻이라도 글자 수가 많아 둘째 문장이 접혀 3줄이 된다 - 한 단계만 줄인다 */
html[lang="en"] .split .tx .lead.two{font-size:clamp(19px,2.15vw,26px)}
/* 본문 - 글씨를 키우고 한 줄 길이를 제한한다(2026-09-08 대표님 - 작고 줄이 너무 길다).
   ⚠ 한글은 ch 로 재면 실제보다 좁아진다 - em 으로 줄 길이를 잡는다(34em ≈ 한글 34자). */
.split .tx p{font-size:clamp(16.6px,1.15vw,18.4px);color:var(--slate);line-height:1.9;
  margin:24px 0 0;max-width:36em}
.split .tx .acts{margin-top:30px;display:flex;gap:12px;flex-wrap:wrap}

/* 전체 폭 대신 아래 목록(.wrap)과 양 끝을 맞춘다 */
.stats-fit{max-width:var(--max);margin-left:auto;margin-right:auto;padding-left:var(--gut);padding-right:var(--gut)}

/* ── 숫자 띠 (밝은 카드형 · .mini/.ipfilter와 같은 톤) ───────── */
.stat-row{display:grid;grid-template-columns:repeat(5,1fr);gap:14px}
.stat-row>div,.stat-row>a{border:1px solid var(--line);border-radius:var(--r);
  padding:22px 14px;text-align:center;transition:.22s var(--ease);
  text-decoration:none;color:inherit}
.stat-row>a{background:#fff;box-shadow:inset 0 3px 0 0 var(--blue),var(--sh-1);cursor:pointer}
.stat-row>a:hover{border-color:var(--blue);box-shadow:inset 0 3px 0 0 var(--blue),var(--sh-2);transform:translateY(-2px)}
.stat-row>div{background:#fff;box-shadow:none}
.stat-row .n{font-size:clamp(22px,2.2vw,30px);font-weight:800;letter-spacing:-1px;
  line-height:1.15;font-variant-numeric:tabular-nums}
.stat-row>a .n{color:var(--blue-d)}
.stat-row>div .n{color:var(--ink)}
.stat-row .k{font-size:12.8px;color:var(--char);margin-top:6px;font-weight:600}
.stat-row>div .k{color:var(--slate);font-weight:500}
@media(max-width:768px){.stat-row{grid-template-columns:repeat(2,1fr)}}
.stat-row-3{grid-template-columns:repeat(3,1fr)}
.stat-row-3 .n{font-size:clamp(28px,3vw,38px)}
@media(max-width:768px){.stat-row-3{grid-template-columns:repeat(3,1fr)}
  .stat-row-3 .n{font-size:clamp(20px,6vw,26px)}}
.stat-row-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:768px){.stat-row-4{grid-template-columns:repeat(2,1fr)}}

/* ── 페이지 헤더 ────────────────────────────────────────────── */
.phead{position:relative;padding:calc(var(--hd) + 72px) 0 64px;background:var(--navy);color:#fff;overflow:hidden}
.phead img.bgv,.phead video.bgv{position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;opacity:.34}
.phead .bgv[hidden]{display:none}
.phead::after{content:"";position:absolute;inset:0;
  background:linear-gradient(96deg,rgba(8,26,49,.84),rgba(8,26,49,.46))}
.phead .wrap{position:relative;z-index:2}
/* ⚠ 2026-10-16 대표님 - 회사소개 · 수행실적 · 보유역량은 사진 위 파란 막을 뺐다(사진 왼쪽에 남색 바림이 이미 그려져 있어 글이 읽힌다).
   사진을 흐리게 하지 않고(opacity 1) 위 덧막(::after)을 없앤다. 쓰는 곳 = company · works · papers · paper-detail · credentials · ip · facility(국 · 영) 의 .phead.ph-raw */
.phead.ph-raw img.bgv{opacity:1;animation-name:settle-band-raw}
.phead.ph-raw::after{content:none}
.phead.ph-raw p{color:#fff}   /* 막 없는 사진 위라 연파랑(#C6D8F0)이 흐려 보여 흰 글씨로(2026-10-16 대표님 - 자료실 설명) */
/* ⚠⚠ 사진이 나타나는 움직임(settle-band)이 끝에서 opacity .34 로 되돌린다(fill both) - 막 없는 쪽은 1 로 끝나는 짝을 쓴다 */
@keyframes settle-band-raw{from{scale:1.075;opacity:0}to{scale:1;opacity:1}}
@media (prefers-reduced-motion:reduce){.phead.ph-raw img.bgv{animation:none}}
/* 막 세기는 쪽마다(2026-10-16 대표님 - 사진을 보고 정함) - 회사소개 = 막 없음 · 수행실적 = 옛 막보다 옅게(.ph-soft)
   · 보유역량 = 글 뒤(왼쪽)만 남색 바림(.ph-navy) - 탁자가 밝아 흰 글씨가 묻혔다. 오른쪽 액자 인증서는 맑게 둔다. */
.phead.ph-raw.ph-navy::after{content:"";background:linear-gradient(90deg,rgba(8,26,49,.9) 0%,rgba(8,26,49,.82) 40%,
  rgba(8,26,49,.6) 60%,rgba(8,26,49,0) 80%)}
.phead.ph-raw.ph-soft::after{content:"";background:linear-gradient(96deg,rgba(8,26,49,.62),rgba(8,26,49,.24))}
@media(max-width:820px){
  .phead.ph-raw.ph-navy::after{background:linear-gradient(90deg,rgba(8,26,49,.86),rgba(8,26,49,.58))}
}
.phead .crumb{font-size:13.4px;color:#93AECF;margin-bottom:15px}
.phead .crumb a:hover{color:#fff}
.phead h1{font-size:clamp(29px,4.1vw,45px);font-weight:800;margin:0 0 13px;letter-spacing:-1.6px}
.phead p{font-size:clamp(15px,1.7vw,17.5px);color:#C6D8F0;margin:0;max-width:840px}

/* ── 밝은 좌우 히어로(.shead) ─────────────────────────────────
   문의 · 구매 3개 화면(견적 · 상담 / 제품 구매 / 서비스 의뢰)이 함께 쓴다.
   배경 사진은 3:1 이고 왼쪽이 흰 여백으로 비어 있다 - 그 자리가 글자리다.
   ⚠ .tx 폭을 사진의 흰 여백보다 넓히지 말 것 - 글이 인물 위로 올라간다.
   ⚠ 높이는 다른 페이지 머리(.phead 431px)에 맞춘다. 다만 좁은 화면에서
     431px 를 고집하면 사진 좌우가 잘려 흰 여백이 사라지므로 폭의 1/3 과 견준다. */
.shead{position:relative;padding-top:var(--hd-s);background:#fff;
  border-bottom:1px solid var(--line);overflow:hidden}
.shead .bg{position:absolute;left:0;top:0;width:100%;height:100%;z-index:0}
.shead .bg img{width:100%;height:100%;object-fit:cover;object-position:right 35%}
/* ⚠ 글상자 왼쪽 끝은 본문 칸(.wrap)과 맞춘다 - 안 맞추면 넓은 화면에서
   머리글만 화면 모서리에 붙어 아래 탭·본문보다 312px 왼쪽으로 치우쳐 보인다.
   % 는 .shead 폭 기준이라 100vw 처럼 스크롤바 폭을 더 세지 않는다. */
.shead .tx{position:relative;z-index:2;width:min(44%,560px);
  margin-left:max(0px,calc((100% - var(--max)) / 2));
  min-height:min(33.33vw,365px);
  padding:clamp(40px,4.4vw,60px) clamp(18px,2.2vw,32px) clamp(38px,4.2vw,56px) var(--gut);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left}
/* ↑ 2026-09-28 대표님 - 제목 · 부제 왼쪽 정렬(견적 · 상담 · 제품 구매 · 서비스 의뢰 공통, 예전엔 가운데) */
.shead .crumb{font-size:14.2px;color:var(--slate);margin-bottom:20px}
.shead .crumb a{color:var(--slate)}
.shead .crumb a:hover{color:var(--blue)}
.shead h1{font-size:clamp(38px,4.6vw,56px);font-weight:800;color:var(--ink);
  margin:0 0 20px;letter-spacing:-2.2px;line-height:1.12}
.shead p{font-size:clamp(16.5px,1.75vw,19.5px);color:var(--slate);margin:0;line-height:1.75}
.shead .tag{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:28px;
  font-size:13.2px;font-weight:800;letter-spacing:2.4px;color:var(--teal);padding-left:2.4px}
.shead .tag::before{content:"";width:42px;height:2px;background:var(--teal)}

/* ── 갈래 고르기 카드(.pick) ───────────────────────────────────
   문의 · 구매 화면에서 '무엇을 하러 왔는지' 를 먼저 고르게 하는 카드.
   주가 되는 갈래는 색을 채우고(navy · teal), 다른 페이지로 보내는 갈래는
   톤을 낮춰 배경만 옅게 깐다(.t-soft). */
.pick{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.pick article{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);overflow:hidden;transition:.26s var(--ease)}
.pick article:hover{box-shadow:var(--sh-2);transform:translateY(-4px)}
.pick .ph{position:relative;aspect-ratio:16/9;overflow:hidden;background:var(--bg-2)}
.pick .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.pick article:hover .ph img{transform:scale(1.05)}
.pick .bd{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1}
.pick .kicker{font-size:12px;font-weight:800;letter-spacing:1.2px;margin-bottom:9px}
.pick h3{font-size:23px;font-weight:800;color:var(--ink);margin:0 0 12px;letter-spacing:-1px}
.pick p{font-size:14.4px;color:var(--slate);margin:0 0 22px;line-height:1.66;flex:1}
.pick .go{display:flex;align-items:center;justify-content:center;gap:9px;padding:14px 20px;
  border-radius:var(--r);font-weight:700;font-size:14.6px;text-decoration:none;color:#fff;
  transition:.24s var(--ease)}
.pick .go::after{content:"\2197";font-size:15px}
.pick .go:hover{transform:translateY(-2px);box-shadow:var(--sh-2)}

.pick .t-test .kicker{color:var(--navy-2)}
.pick .t-test:hover{border-color:var(--navy-2)}
.pick .t-test .go{background:var(--navy)}
.pick .t-test .go:hover{background:var(--navy-2)}

.pick .t-consult .kicker{color:var(--teal)}
.pick .t-consult:hover{border-color:var(--teal)}
.pick .t-consult .go{background:var(--teal)}
.pick .t-consult .go:hover{background:#0B7F75}

.pick .t-blue .kicker{color:var(--blue-d)}
.pick .t-blue:hover{border-color:var(--blue)}
.pick .t-blue .go{background:var(--blue)}
.pick .t-blue .go:hover{background:var(--blue-d)}

/* 다른 페이지로 보내는 갈래 - 카드 무게를 낮춘다 */
.pick .t-soft{background:#F2FAF9;border-color:#D8EEEB}
.pick .t-soft .ph{background:#F2FAF9}
.pick .t-soft .kicker{color:var(--teal)}
.pick .t-soft:hover{border-color:var(--teal)}
.pick .t-soft .link{display:inline-flex;align-items:center;gap:8px;font-size:14.6px;font-weight:800;
  color:var(--teal);text-decoration:none;padding-bottom:7px;border-bottom:2px solid var(--teal);
  align-self:flex-start;transition:.22s}
.pick .t-soft .link::after{content:"\2192";transition:.22s}
.pick .t-soft .link:hover::after{transform:translateX(4px)}

/* 어느 쪽인지 모를 때 */
.helpbar{display:flex;align-items:center;gap:20px;margin-top:26px;padding:24px 30px;
  background:var(--bg-2);border:1px solid var(--line-2);border-radius:var(--r);flex-wrap:wrap}
.helpbar img{width:38px;height:38px;flex:0 0 auto}
/* 2026-09-28 대표님 - 제목 확대, 부제는 제목 오른편으로, 버튼은 다른 CTA 와 같은 파란 바탕 · 흰 글씨(.btn) */
.helpbar .t{display:flex;align-items:baseline;gap:8px 24px;flex-wrap:wrap;min-width:0}
.helpbar .t b{font-size:19px;font-weight:800;color:var(--ink);letter-spacing:-.5px}
.helpbar .t span{font-size:14.6px;color:var(--slate)}
.helpbar .btn{margin-left:auto}

@media (max-width:1180px){
  .pick{grid-template-columns:1fr 1fr}
  .pick .t-soft{grid-column:1 / -1}
  .pick .t-soft .ph{aspect-ratio:21/6}
}
@media (max-width:820px){
  .pick{grid-template-columns:1fr}
  .pick .t-soft .ph{aspect-ratio:16/9}
  .helpbar .btn{margin-left:0;width:100%;justify-content:center}
}
/* ⚠ 영문은 낱말이 길어 같은 크기로 두면 제목이 두 줄이 되어 머리 높이가 페이지마다 달라진다 */
html[lang="en"] .shead h1{font-size:clamp(32px,3.8vw,45px);letter-spacing:-1.4px}
html[lang="en"] .shead p{font-size:clamp(15.5px,1.6vw,17.5px)}
@media (max-width:900px){
  .shead .tx{width:min(52%,460px)}
}
@media (max-width:820px){
  /* 폰에서는 사진 위에 글을 얹으면 인물과 겹쳐 안 읽힌다 - 위아래로 나눈다 */
  .shead{display:flex;flex-direction:column}
  .shead .bg{position:relative;width:100%;height:auto}
  .shead .bg img{aspect-ratio:4/3;object-position:center}
  .shead .tx{width:100%;margin-left:0;min-height:0;padding:34px var(--gut) 36px}
}

.ltabs{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--hd-s);z-index:60}
.ltabs .wrap{display:flex;gap:2px;overflow-x:auto}
.ltabs a{padding:18px 24px;font-size:15.2px;font-weight:700;color:var(--slate);white-space:nowrap;
  border-bottom:3px solid transparent;transition:.2s}
.ltabs a:hover{color:var(--blue)}
.ltabs a.on{color:var(--blue);border-bottom-color:var(--blue)}

/* ── 표 ─────────────────────────────────────────────────────── */
table.tb{width:100%;border-collapse:collapse;background:#fff;font-size:14.8px}
table.tb thead th{background:var(--navy);color:#fff;font-weight:700;font-size:14.2px;padding:14px 16px;text-align:left;
  border-right:1px solid rgba(255,255,255,.12)}
table.tb thead th:last-child{border-right:0}
table.tb td{padding:14px 16px;border:1px solid var(--line);vertical-align:middle}
table.tb tbody tr:hover{background:var(--bg-2)}
table.tb td.k{font-weight:700;color:var(--ink);background:var(--surface-2);width:180px}
.tb-scroll{overflow-x:auto;border:1px solid var(--line)}

/* ── 실적 필터 ──────────────────────────────────────────────── */
.filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:22px}
.filters select,.filters input{padding:12px 15px;border:1px solid var(--line);border-radius:var(--r);
  font-size:14.6px;background:#fff;min-width:158px}
.filters input{flex:1 1 240px;min-width:220px}
.filters select:focus,.filters input:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.cnt{margin-left:auto;font-size:14px;color:var(--stone);white-space:nowrap}
.cnt b{color:var(--blue);font-size:16px}
.filters .f-btn{padding:12px 22px;border:1px solid var(--blue);border-radius:var(--r);
  background:var(--blue);color:#fff;font-weight:700;font-size:14.6px;cursor:pointer;transition:.2s}
.filters .f-btn:hover{background:var(--blue-d);border-color:var(--blue-d)}
.cnt-line{font-size:14px;color:var(--stone);margin:-6px 0 22px}
.cnt-line b{color:var(--blue);font-weight:800}
.wklist{border-top:2px solid var(--navy)}
.wk{border-bottom:1px solid var(--line);padding:17px 6px;display:grid;
  grid-template-columns:74px 1fr 216px 168px;gap:18px;align-items:center}
[data-papers] .wk{grid-template-columns:74px 1fr}   /* 분야 칩 제거(2026-09-07) */
.wk:hover{background:var(--bg-2)}
.wk .y{font-weight:800;color:var(--blue);font-variant-numeric:tabular-nums;font-size:15.6px}
.wk .n{font-weight:600;color:var(--ink);line-height:1.5;font-size:15px}
.wk .n a{color:inherit;text-decoration:none}
.wk .n a:hover{color:var(--blue);text-decoration:underline}
.wk .kind{font-size:11.4px;font-weight:800;color:var(--stone);margin-bottom:3px;letter-spacing:.5px}
.wk .kind.rnd{color:var(--violet)}
.wk .c{font-size:14px;color:var(--slate);text-align:center}
.wk .g{font-size:12.3px;font-weight:700;color:#fff;border-radius:999px;padding:5px 12px;
  justify-self:center;white-space:nowrap;background:var(--stone)}
.pager{display:flex;gap:6px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.pager button{min-width:40px;height:40px;border:1px solid var(--line);background:#fff;border-radius:var(--r);
  font-size:14.4px;font-weight:700;color:var(--slate);cursor:pointer;transition:.2s;padding:0 12px}
.pager button:hover{border-color:var(--blue);color:var(--blue)}
.pager button.on{background:var(--blue);border-color:var(--blue);color:#fff}
.pager button:disabled{opacity:.4;cursor:default}

/* ── 지식재산 갤러리 ────────────────────────────────────────── */
/* 지식재산 종류 고르기 (검토보고서 6장 1번) */
.ipfilter{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:34px}
.ipfilter .mini{cursor:pointer;text-align:left;width:100%;font:inherit;transition:.22s var(--ease);
  background:#fff;border:1px solid var(--line);box-shadow:0 1px 3px rgba(15,23,42,.05)}
.ipfilter .mini b{display:block;font-size:26px;font-weight:800;color:var(--blue-d);line-height:1.2}
.ipfilter .mini div{font-size:13.6px;color:var(--slate);margin-top:3px;font-weight:600}
.ipfilter .mini:hover{border-color:var(--blue);box-shadow:0 6px 16px rgba(5,131,242,.14);transform:translateY(-2px)}
.ipfilter .mini.on{border-color:var(--blue-d);background:var(--blue-d);box-shadow:0 6px 18px rgba(4,102,192,.32)}
.ipfilter .mini.on b,.ipfilter .mini.on div{color:#fff}
@media(max-width:820px){.ipfilter{grid-template-columns:repeat(2,1fr)}}
.ipgrid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px}
/* ⚠ 크게 보기를 없앴다(2026-09-14) - 누르는 곳이 아니므로 확대 커서를 쓰지 않는다 */
.ipc{border:1px solid var(--line);background:#fff;border-radius:var(--r);overflow:hidden;
  cursor:default;transition:.3s var(--ease);text-align:left;padding:0;font:inherit}
.ipc:hover{border-color:var(--line-2,var(--line));box-shadow:var(--sh-1,none)}
.ipc .th{aspect-ratio:1/1.34;overflow:hidden;background:var(--bg-2)}
.ipc .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.ipc .m{padding:13px 14px 16px}
.badge{display:inline-block;font-size:10.8px;font-weight:800;padding:3px 9px;border-radius:3px;
  background:#EAF3FE;color:var(--blue-d);margin-bottom:8px}
.badge.app{background:#FFF4E3;color:#A96908}
.badge.tm{background:#E8F6F1;color:#0B6E58}

.ipc h4{margin:0 0 6px;font-size:13.4px;font-weight:700;color:var(--ink);line-height:1.46;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
  min-height:calc(2 * 1.46em)}
.ipc .no{font-size:11.6px;color:var(--stone);font-variant-numeric:tabular-nums}
.ipc.pending{cursor:default}
.ipc.pending:hover{border-color:var(--line);box-shadow:none;transform:none}
.ipc .th.pending{display:grid;place-items:center;border-bottom:1px dashed var(--line)}
.ipc .th.pending span{font-size:12.6px;font-weight:800;color:var(--stone)}

/* ── 인증 · 면허 캐러셀 ── 가운데 카드 + 좌우 미리보기 + 아래 진행 막대 ───
   2026-09-28 - 좌우 화살표 버튼을 없애고 자료실 소식 배너와 같은 진행 막대(.nf-dots)를 아래에 둔다 */
.credcarousel{display:flex;flex-direction:column;align-items:center;padding:8px 0 4px}
.cc-track{display:flex;align-items:center;justify-content:center;gap:20px;width:100%;max-width:940px;margin:0 auto;
  overflow:hidden;padding:14px 0}
.cc-dots{margin-top:14px}
.cc-item{transition:.35s var(--ease);flex:0 0 auto;text-align:left;border:1px solid var(--line);background:#fff;
  border-radius:var(--r);overflow:hidden;padding:0;font:inherit;cursor:pointer}
/* ⚠ 가운데 카드는 크게 보기를 없애 누르는 곳이 아니다(2026-09-14) */
/* 2026-09-28 대표님 - 100% 배율에서 공간이 남아 가운데 · 좌우 카드를 20% 키웠다(276→331, 193→232) */
.cc-item.center{width:min(331px,68vw);cursor:default;box-shadow:var(--sh-2)}
.cc-item.center.pending{cursor:default}
/* 화살표로 넘길 때 가운데 카드가 화살표가 가리키는 쪽으로 작아지고 옅어졌다가,
   다음 카드가 반대쪽에서 나타나 제자리로 커지는 크로스페이드 - slide()/renderTrack() 이 이 상태를 여닫는다 */
.cc-item.center.swap-l{opacity:0;transform:translateX(-28px) scale(.8)}
.cc-item.center.swap-r{opacity:0;transform:translateX(28px) scale(.8)}
.cc-item.side{width:232px;opacity:.3;filter:grayscale(.2)}
.cc-item.side:hover,.cc-item.side:focus-visible{opacity:.55}
.cc-item .th{aspect-ratio:1/1.25;overflow:hidden;background:var(--bg-2)}
.cc-item .th img{width:100%;height:100%;object-fit:cover;object-position:top}
@media(max-width:760px){
  .cc-item.side{display:none}
  .cc-track{gap:0}
  .cc-item.center{width:min(300px,70vw)}
}
/* ── 소식 게시판 (레퍼런스: marine-eco.co.kr/board8 형식) ───────── */
.bsearch{display:flex;justify-content:flex-start;margin-bottom:18px}
.bsearch input{width:220px;max-width:60vw;padding:9px 13px;border:1px solid var(--line);border-radius:var(--r);
  font-size:13.6px;background:#fff}
.bsearch input:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
/* 2026-09-28 - 삼성바이오로직스 뉴스룸 식 글자형 목록(썸네일 · 요약 없음).
   분류(파랑) · 날짜 한 줄 + 제목 한 줄, 행 사이는 가는 선. */
.bsearch{justify-content:flex-end;margin-bottom:10px}
.blist{border-top:0}   /* 검색판 바로 아래 가로선 - 2026-09-28 대표님 요청으로 없앰 */
/* 왼쪽 분류 + 제목, 오른쪽 날짜 · 조회수 · 댓글 수. 분류 · 제목은 2026-09-28 대표님 요청으로 20%+ 확대 */
.brow{display:flex;align-items:center;gap:24px;padding:22px 8px 24px;border-bottom:1px solid var(--line);
  text-decoration:none;color:inherit;transition:background .2s var(--ease)}
.brow:hover{background:var(--bg-2)}
.brow .bmain{flex:1;min-width:0}
.brow .bhead{display:flex;align-items:center;gap:12px;margin-bottom:6px;font-variant-numeric:tabular-nums}
.brow .bcat{font-size:15.5px;font-weight:600;color:var(--blue)}
.brow .bdate{font-size:14px;color:var(--stone)}
.brow h3{margin:0;font-size:21px;font-weight:700;color:var(--ink);letter-spacing:-.4px;line-height:1.45;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s var(--ease)}
.brow:hover h3{color:var(--blue)}
.brow .bmeta{flex:none;display:flex;align-items:center;gap:12px;font-size:14px;color:var(--stone);
  font-variant-numeric:tabular-nums}
.brow .bmeta .bcnt{font-size:13px;color:#98A2B0}
.bempty{padding:60px 0;text-align:center;color:#98A2B0}
@media(max-width:640px){
  /* 좁은 화면은 날짜 줄을 제목 아래로 내린다 */
  .brow{flex-direction:column;align-items:stretch;gap:8px;padding:16px 2px 18px}
  .brow .bhead{margin-bottom:4px}
  .brow .bcat{font-size:14px}
  .brow .bdate{font-size:13px}
  .brow h3{font-size:18px;white-space:normal;word-break:keep-all;text-wrap:balance}
  .brow .bmeta{font-size:13px}
}

/* ── 소식 상단 배너 (삼성바이오로직스 뉴스룸 레퍼런스) ──────────────
   왼쪽 사진 · 오른쪽 글. 화살표는 카드 바깥 양옆, 아래는 진행 막대 + 일시정지. */
.nfeat{position:relative;padding:0 56px;margin-bottom:44px}
.nf-view{overflow:hidden;border-radius:22px;box-shadow:0 10px 34px rgba(15,35,70,.12);background:#fff}
.nf-track{display:flex;transition:transform .6s var(--ease)}
.nf-slide{flex:0 0 100%;display:flex;height:340px;text-decoration:none;color:inherit}
/* ⚠ 사진은 절대배치 - 흐름에 두면 사진 원래 높이만큼 배너가 늘어난다 */
.nf-ph{flex:0 0 57%;position:relative;overflow:hidden;background:var(--bg-2)}
.nf-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .7s var(--ease)}
.nf-slide:hover .nf-ph img{transform:scale(1.04)}
/* 2026-09-28 대표님 - 레퍼런스보다 제목이 작아 보인다: 제목을 크게, 글 칸 여백은 줄여 글이 칸을 채우게 */
.nf-txt{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;padding:32px 40px 32px 34px}
.nf-meta{display:flex;align-items:center;gap:10px;font-size:14.5px;color:var(--stone);margin-bottom:14px;
  font-variant-numeric:tabular-nums}
.nf-meta b{font-weight:600;color:var(--blue)}
.nf-meta .bcnt{font-size:13.5px;color:#98A2B0}
.nf-meta span:not(.bcnt) + .bcnt{margin-left:6px}
.nf-txt h3{margin:0 0 26px;font-size:31px;font-weight:700;line-height:1.4;letter-spacing:-.8px;color:var(--ink);
  word-break:keep-all;text-wrap:balance}
/* ⚠ 줄 수 자르기(-webkit-box · line-clamp)를 걸면 balance 가 먹지 않아 '안내' 같은 한 어절만
   다음 줄로 떨어진다(2026-09-28 대표님 신고) - 제목이 짧아 자르기 없이 줄 길이만 고르게 맞춘다. */
.nf-more{font-size:16px;font-weight:700;color:var(--ink);align-self:flex-start;
  border-bottom:1px solid transparent;transition:.2s var(--ease)}
.nf-slide:hover .nf-more{color:var(--blue);border-bottom-color:var(--blue)}
.nf-arrow{all:unset;position:absolute;top:170px;transform:translateY(-50%);width:40px;height:40px;cursor:pointer;
  display:grid;place-items:center}
.nf-arrow::before{content:"";width:14px;height:14px;border:solid var(--ink);border-width:0 0 2px 2px}
.nf-arrow.prev{left:0}.nf-arrow.prev::before{transform:translateX(3px) rotate(45deg)}
.nf-arrow.next{right:0}.nf-arrow.next::before{transform:translateX(-3px) rotate(-135deg)}
.nf-arrow:hover::before{border-color:var(--blue)}
.nf-arrow:focus-visible{outline:2px solid var(--blue);border-radius:50%}
.nf-dots{display:flex;justify-content:center;align-items:center;gap:6px;margin-top:22px}
.nf-dots button{all:unset;cursor:pointer;width:20px;height:5px;border-radius:3px;background:#C4C9D0;
  transition:width .3s var(--ease),background .3s var(--ease)}
.nf-dots button.on{width:30px;background:var(--ink)}
.nf-dots button:focus-visible{outline:2px solid var(--blue);outline-offset:2px}
/* 일시정지(두 줄) ↔ 재생(삼각형) */
.nf-dots .nf-play{width:14px;height:14px;margin-left:8px;border-radius:0;background:none;position:relative}
.nf-dots .nf-play::before,.nf-dots .nf-play::after{content:"";position:absolute;top:2px;width:3px;height:10px;background:var(--ink)}
.nf-dots .nf-play::before{left:3px}.nf-dots .nf-play::after{left:8px}
.nf-dots .nf-play.paused::after{display:none}
.nf-dots .nf-play.paused::before{left:4px;width:0;height:0;background:none;
  border-style:solid;border-width:5px 0 5px 8px;border-color:transparent transparent transparent var(--ink)}
@media(max-width:900px){
  .nf-slide{height:300px}
  .nf-txt{padding:26px 26px}
  .nf-txt h3{font-size:24px}
  .nf-arrow{top:150px}
}
/* ── 보도자료 (2026-09-28, 현대자동차그룹 뉴스룸 레퍼런스) ───────────
   둥근 검색창 · 사진 카드 3열(크기 통일) · 더보기.
   섹션 배경이 회색(.alt)이라 카드는 흰색. */
.press{max-width:1000px;margin:0 auto}
.pr-search{position:relative;display:block;max-width:560px;margin:0 auto 34px}
.pr-search input{width:100%;height:48px;padding:0 20px 0 50px;border:1px solid #C9D1DB;border-radius:999px;
  background:#fff;font-size:15px;color:var(--ink)}
.pr-search input:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
/* 돋보기 - 원 + 손잡이 */
.pr-ico{position:absolute;left:20px;top:50%;width:14px;height:14px;margin-top:-9px;border:2px solid var(--ink);
  border-radius:50%;pointer-events:none}
.pr-ico::after{content:"";position:absolute;right:-6px;bottom:-5px;width:7px;height:2px;background:var(--ink);
  transform:rotate(45deg)}
/* 카드 크기 통일(2026-09-28 대표님) - 같은 줄 카드는 높이를 맞추고, 사진은 4:3 칸에 꽉 채운다 */
.pr-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.pr-grid .bempty{grid-column:1 / -1}
@media(max-width:900px){.pr-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.pr-grid{grid-template-columns:1fr}}
.pr-card{display:flex;flex-direction:column;background:#fff;border-radius:10px;overflow:hidden;text-decoration:none;color:inherit;
  box-shadow:0 1px 2px rgba(14,42,79,.05),0 2px 10px rgba(14,42,79,.05);transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.pr-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(14,42,79,.12)}
.pr-ph{aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)}
.pr-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.pr-card:hover .pr-ph img{transform:scale(1.04)}
/* 제목이 한 줄이어도 두 줄 자리를 잡아 날짜 줄 높이를 맞춘다 */
.pr-bd{flex:1;display:flex;flex-direction:column;padding:18px 18px 16px}
.pr-bd h4{margin:0 0 22px;min-height:3em;font-size:17px;font-weight:700;line-height:1.5;letter-spacing:-.3px;color:var(--ink);
  word-break:keep-all;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.pr-card:hover h4{color:var(--blue)}
.pr-meta{display:flex;gap:10px;font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
.pr-meta b{font-weight:700;color:var(--ink)}
/* 새 창으로 열린다는 표시 - 날짜 줄 오른쪽 끝 */
.pr-ext{margin-left:auto;font-size:12px;font-weight:600;color:var(--stone)}
.pr-card:hover .pr-ext{color:var(--blue)}
.pr-more-wrap{text-align:center;margin-top:30px}
.pr-more-wrap[hidden]{display:none}
.pr-more{all:unset;cursor:pointer;display:inline-block;padding:11px 42px;border-radius:999px;background:#E6EAF0;
  font-size:14px;font-weight:700;color:var(--ink);transition:background .2s var(--ease)}
.pr-more:hover{background:#D7DDE6}
.pr-more:focus-visible{outline:2px solid var(--blue);outline-offset:2px}

/* ── 소식 필터 + 목록 (2026-09-28, 루닛 미디어센터 레퍼런스) ──────────
   왼쪽 필터(분류 · 연도 체크박스) · 오른쪽 검색 + 목록. 배너 카드 양끝에 맞춘다(화살표 자리만큼 안쪽). */
.nboard{display:grid;grid-template-columns:250px minmax(0,1fr);gap:40px;align-items:start}
@media(min-width:701px){ .nfeat ~ .nboard{margin-left:56px;margin-right:56px} }
.nfl-head{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:14px}
.nfl-head h3{margin:0;font-size:28px;font-weight:700;color:var(--ink);letter-spacing:-.6px}
.nfl-reset{all:unset;cursor:pointer;font-size:13.5px;color:var(--stone);text-decoration:underline;text-underline-offset:3px}
.nfl-reset:hover{color:var(--blue)}
.nfl-reset[hidden]{display:none}
.nfl-box{background:var(--bg-2);border-radius:10px;padding:20px 18px}
.nfl-grp + .nfl-grp{margin-top:18px;padding-top:18px;border-top:1px solid var(--line)}
.nfl-grp h4{margin:0 0 10px;font-size:17px;font-weight:700;color:var(--ink)}
.nf-opt{display:flex;align-items:center;gap:8px;padding:5px 0;cursor:pointer;font-size:15.5px;color:var(--ink)}
.nf-opt input{width:17px;height:17px;margin:0;accent-color:var(--blue);cursor:pointer;flex:none}
.nf-opt em{font-style:normal;font-size:12.5px;color:var(--stone)}
.nf-opt:hover span{color:var(--blue)}
/* 검색은 레퍼런스처럼 회색 판 안에 넓게 */
.nboard-main .bsearch{background:var(--bg-2);border-radius:10px;padding:16px;margin-bottom:18px}
.nboard-main .bsearch input{width:100%;max-width:none;padding:12px 14px;font-size:15px}
@media(max-width:900px){
  .nboard{grid-template-columns:minmax(0,1fr);gap:20px}   /* 1fr 이면 한 줄 제목(nowrap)이 칸을 밀어 넓혔다 - 영문 820px 306px 넘침(2026-10-13) */
  .nfl-head h3{font-size:22px}
  /* 좁은 화면은 분류 · 연도를 가로로 나란히 */
  .nfl-box{display:flex;flex-wrap:wrap;gap:6px 28px}
  .nfl-grp + .nfl-grp{margin-top:0;padding-top:0;border-top:0}
}
@media(max-width:700px){
  .nfeat{padding:0}
  .nf-arrow{display:none}
  .nf-slide{flex-direction:column;height:auto}
  .nf-ph{flex:none;aspect-ratio:16/9}
  .nf-txt{padding:22px 22px 26px}
  .nf-txt h3{font-size:21px;margin-bottom:16px}
}

/* ── 소식 상세 (게시물) ──────────────────────────────────────── */
.bpost-head{padding-bottom:22px;border-bottom:1px solid var(--line);margin-bottom:32px}
.bpost-head h1{font-size:clamp(22px,3vw,30px);font-weight:800;color:var(--ink);margin:0 0 14px;letter-spacing:-.6px}
/* '← 목록으로' - 제목 왼쪽 위의 작은 글자 링크(2026-09-28 대표님) */
.bpost-back{display:inline-flex;align-items:center;gap:6px;margin-bottom:14px;font-size:14px;font-weight:700;
  color:var(--slate);text-decoration:none;transition:color .2s var(--ease)}
.bpost-back:hover{color:var(--blue)}
.bpost-meta{display:flex;gap:16px;font-size:13.4px;color:var(--stone);font-variant-numeric:tabular-nums;flex-wrap:wrap}
.bpost-meta span{display:inline-flex;align-items:center;gap:5px}
.bpost-hero{width:100%;aspect-ratio:16/8;overflow:hidden;border-radius:var(--r);background:var(--bg-2);margin-bottom:32px}
.bpost-hero img{width:100%;height:100%;object-fit:cover}
.bpost-body p{font-size:16px;line-height:1.9;color:var(--char);margin:0 0 18px}
.bpost-foot{display:flex;justify-content:space-between;align-items:center;margin-top:40px;padding-top:24px;
  border-top:1px solid var(--line)}
/* 이전 글 · 다음 글 (2026-09-28) - 본문 아래, '목록으로' 위. 위 · 아래 가는 선 사이 두 줄 */
.bpost-nav{margin-top:44px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.bpost-nav + .bpost-foot{margin-top:24px;padding-top:0;border-top:0}
.bpn-row{display:flex;align-items:center;gap:18px;padding:16px 6px;text-decoration:none;color:inherit;
  transition:background .2s var(--ease)}
.bpn-row + .bpn-row{border-top:1px solid var(--line)}
a.bpn-row:hover{background:var(--bg-2)}
a.bpn-row:hover .bpn-t{color:var(--blue)}
.bpn-k{flex:0 0 78px;font-size:13.5px;font-weight:700;color:var(--slate)}
.bpn-t{flex:1;min-width:0;font-size:15.5px;font-weight:600;color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:color .2s var(--ease)}
.bpn-d{flex:0 0 auto;font-size:13px;color:var(--stone);font-variant-numeric:tabular-nums}
.bpn-row.off .bpn-t{color:#98A2B0;font-weight:500}
@media(max-width:640px){ .bpn-k{flex-basis:62px} .bpn-d{display:none} }
.bcomments{margin-top:48px;padding-top:32px;border-top:2px solid var(--ink)}
.bcomments h2{font-size:18px;font-weight:800;color:var(--ink);margin:0 0 20px}
.cmt-form{display:flex;gap:10px;margin-bottom:26px;flex-wrap:wrap}
/* ⚠ 공통 입력칸 스타일이 width:100% 라 여기서 폭을 못 박는다 - 안 그러면 '등록' 버튼이 아랫줄로 밀린다 */
.cmt-form input[type=text],.cmt-form input[type=password]{flex:0 0 140px;width:140px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);font-size:14px}
.cmt-form textarea{width:auto}
.cmt-form button{min-height:44px}
/* 비밀번호 칸 + 눈 버튼(글자를 넣으면 나타남, 누르면 보기/가리기) */
.pw-wrap{position:relative;display:flex}
.cmt-form .pw-wrap{flex:0 0 150px}
.cmt-pwbox .pw-wrap{flex:0 1 220px;min-width:0}
.cmt-form .pw-wrap input,.cmt-pwbox .pw-wrap input{flex:1 1 auto;width:100%;min-width:0;padding-right:40px}
.pw-eye{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:30px;height:30px;padding:0;
  display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--stone);cursor:pointer}
/* ⚠ '등록' · '삭제' 버튼 스타일(.cmt-form button 등 - 안쪽여백 22px · 파란 바탕)이 눈 버튼에도 걸려
   아이콘 자리가 없어진다 - 여기서 전부 되돌린다 */
.cmt-form .pw-eye,.cmt-pwbox .pw-eye{min-height:0;padding:0;flex:none;background:transparent;color:var(--stone);font-size:0}
.pw-eye:hover,.cmt-form .pw-eye:hover,.cmt-pwbox .pw-eye:hover{background:var(--bg-2);color:var(--ink)}
.pw-eye[hidden]{display:none}
input[type=password]::-ms-reveal,input[type=password]::-ms-clear{display:none}   /* 엣지 기본 눈 버튼 숨김 - 겹치지 않게 */
@media(max-width:640px){
  .cmt-form .pw-wrap{flex:1 1 120px}
  .cmt-form input[type=text],.cmt-form input[type=password]{flex:1 1 120px;width:auto}
  .cmt-form textarea{flex-basis:100%}
  .cmt-form button{flex:1 1 100%}
}
.cmt-msg{flex:0 0 100%;margin:0;font-size:13px;color:#C0392B}
/* 댓글 삭제 - 비밀번호 확인 칸(× 를 누르면 그 댓글 아래에 열린다) */
.cmt-pwbox{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:12px;padding-top:12px;border-top:1px dashed var(--line)}
.cmt-pwbox input{flex:0 1 200px;min-width:0;padding:8px 12px;border:1px solid var(--line);border-radius:var(--r);font-size:13.5px}
.cmt-pwbox input:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.cmt-pwbox button{padding:8px 16px;border:0;border-radius:var(--r);font-size:13.5px;font-weight:700;cursor:pointer;
  background:#C0392B;color:#fff}
.cmt-pwbox button.cmt-cancel{background:var(--bg-2);color:var(--slate)}
.cmt-pwmsg{font-size:13px;color:#C0392B}
.cmt-pwmsg[hidden]{display:none}
.cmt-form textarea{flex:1 1 260px;min-width:200px;padding:11px 14px;border:1px solid var(--line);border-radius:var(--r);
  font-size:14px;resize:vertical;min-height:44px;font-family:inherit}
.cmt-form input:focus,.cmt-form textarea:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.cmt-form button{flex:0 0 auto;padding:0 22px;border:0;border-radius:var(--r);background:var(--blue);color:#fff;
  font-weight:700;font-size:14px;cursor:pointer;transition:.2s var(--ease)}
.cmt-form button:hover{background:var(--blue-d)}
.cmt-list{display:flex;flex-direction:column;gap:16px}
.cmt-item{padding:16px 18px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.cmt-item .cmt-top{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--stone);margin-bottom:7px}
.cmt-item .cmt-top b{color:var(--ink);font-weight:700}
.cmt-item .cmt-top span{flex:1}
.cmt-del{flex:0 0 auto;width:22px;height:22px;border:0;background:transparent;color:var(--stone);
  font-size:16px;line-height:1;cursor:pointer;border-radius:50%;transition:.18s var(--ease)}
.cmt-del:hover{background:#FDECEC;color:#C0392B}
.cmt-item p{margin:0;font-size:14.6px;color:var(--char);line-height:1.6;white-space:pre-wrap}
.cmt-empty{padding:30px 0;text-align:center;color:#98A2B0;font-size:14px}

.lb{position:fixed;inset:0;z-index:200;background:rgba(6,14,26,.92);display:none;
  align-items:center;justify-content:center;padding:56px 40px;backdrop-filter:blur(4px)}
.lb.open{display:flex}
.lb img{max-width:min(860px,92vw);max-height:80vh;object-fit:contain;box-shadow:var(--sh-3);background:#fff}
.lb .x{position:absolute;top:24px;right:28px;width:46px;height:46px;border:1px solid rgba(255,255,255,.4);
  background:transparent;color:#fff;font-size:20px;border-radius:50%;cursor:pointer}
.lb .nav{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(255,255,255,.35);background:transparent;color:#fff;font-size:19px;cursor:pointer}
.lb .nav.p{left:26px}
.lb .nav.n{right:26px}
.lb .nav:hover,.lb .x:hover{background:rgba(255,255,255,.16)}
.lb .cap{position:absolute;bottom:20px;left:0;right:0;text-align:center;color:#D5E3F5;font-size:14.4px;padding:0 60px}
.lb .cap b{color:#fff;display:block;font-size:15.6px;margin-bottom:4px}

/* ── 상세 페이지 블록 ───────────────────────────────────────── */
.blk{padding:clamp(36px,4vw,56px) 0;border-top:1px solid var(--line)}
.blk:first-of-type{border-top:0;padding-top:0}
.blk .no{display:inline-flex;align-items:center;gap:10px;font-size:12px;font-weight:800;
  letter-spacing:1.6px;color:var(--blue);margin-bottom:13px}
.blk .no b{width:26px;height:26px;border-radius:50%;background:var(--blue);color:#fff;
  display:grid;place-items:center;font-size:12.4px}
.blk h2{font-size:clamp(21px,2.5vw,29px);font-weight:800;color:var(--ink);margin:0 0 17px;letter-spacing:-1px}
.blk p{font-size:16px;color:var(--slate);line-height:1.86;margin:0 0 14px;max-width:78ch}
.blk p b{color:var(--ink)}
.steps{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-top:8px}
/* ⚠ 자식만 고른다 - `.steps span` 으로 두면 카드 안의 .when·.tag 까지 알약 상자가 된다. */
.steps>span{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 22px;
  font-size:15px;font-weight:700;color:var(--navy)}
.steps i{color:var(--stone);font-style:normal;font-size:17px}

/* 단계에 설명이 붙은 분야(생태독성) - 큰 번호 · 짧은 밑줄 · 제목 · 설명 · 태그 알약
   (2026-09-16 대표님 목업). 상자를 없애고 카드 사이를 세로 실선 + 화살표로 잇는다.
   ⚠ 태그(.tag)·조건(.when)은 선택이라 없으면 그 줄이 비고 배치는 그대로다. */
.steps.detail{align-items:stretch;gap:26px 0;margin-top:22px}
/* 사이 표시 - 세로선 · 화살표 · 세로선 을 세로로 쌓는다(배경색에 기대지 않는다) */
.steps.detail>i{flex:0 0 30px;align-self:stretch;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:11px;font-size:16px;color:#9ab0ca}
.steps.detail>i::before,.steps.detail>i::after{content:"";flex:1 1 auto;width:1px;
  min-height:8px;background:var(--line)}
/* ⚠ 3행을 1fr 로 둬야 카드 높이가 달라도 태그 알약이 아래에 나란히 선다. */
/* ⚠⚠ 여섯 단계인 분야(화학물질 컨설팅)는 205px 기준으로 한 줄에 못 들어간다
   - 205*6 + 화살표 30*5 = 1380px 이라 본문(1360px)을 넘겨 마지막 칸이 다음 줄로 떨어진다
   (실측). 여섯 칸일 때만 한 단계 좁힌다 - 다섯 칸짜리 여덟 분야는 그대로다. */
.steps.detail:has(>span.has-d:nth-of-type(6))>span.has-d{flex-basis:168px}
.steps.detail>span.has-d{flex:1 1 205px;min-width:0;display:grid;
  grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto 1fr auto;
  align-items:start;background:transparent;border:0;border-radius:0;box-shadow:none;
  text-align:left;padding:14px 22px 16px 0}
.steps.detail>span.has-d em{grid-column:1;grid-row:1;align-self:center;display:block;
  font-style:normal;font-size:clamp(30px,2.6vw,38px);font-weight:800;letter-spacing:-1.6px;
  line-height:1;color:var(--blue);margin:0}
.steps.detail>span.has-d .when{grid-column:2;grid-row:1;align-self:center;justify-self:start;
  margin-left:11px;padding:5px 12px;border-radius:999px;border:1.5px solid var(--blue);
  background:transparent;font-size:12.2px;font-weight:800;color:var(--blue-d);white-space:nowrap}
.steps.detail>span.has-d b{grid-column:1/-1;grid-row:2;position:relative;display:block;
  margin-top:30px;font-size:clamp(17px,1.35vw,19.4px);font-weight:800;color:var(--ink);
  letter-spacing:-.04em;line-height:1.3}
/* 번호와 제목 사이 짧은 파란 밑줄 */
.steps.detail>span.has-d b::before{content:"";position:absolute;left:0;top:-16px;
  width:26px;height:3px;border-radius:2px;background:var(--blue)}
.steps.detail>span.has-d small{grid-column:1/-1;grid-row:3;display:block;margin-top:11px;
  font-size:14.2px;font-weight:600;color:var(--slate);line-height:1.72;letter-spacing:-.01em}
.steps.detail>span.has-d .tag{grid-column:1/-1;grid-row:4;justify-self:start;margin-top:15px;
  padding:7px 14px;border-radius:999px;background:#EAF3FE;border:0;
  font-size:12.6px;font-weight:700;color:var(--blue-d);line-height:1.4}
/* 조건부 단계(예 '기준 초과 시')는 배경으로 한눈에 갈라 보인다 */
/* ⚠ 상하 패딩은 건드리지 않는다 - 그러면 이 카드만 줄이 내려앉는다. */
.steps.detail>span.has-d.hi{background:#EFF5FE;border-radius:18px;padding-left:20px;padding-right:20px}

/* ⚠⚠ 줄이 바뀌면 화살표만 줄 앞에 덩그러니 남는다 - 한 줄에 못 담는 폭부터 숨긴다.
   실측 줄바꿈 지점은 1200~1220px 사이라 경계를 그보다 **위**(1239px)에 둔다.
   낮게 잡으면 '두 줄인데 화살표가 보이는' 사고가 난다(반대는 무해). */
@media (max-width:1239px){
  .steps.detail{column-gap:26px}
  .steps.detail>i{display:none}
  .steps.detail>span.has-d{flex:1 1 230px}
}
@media (max-width:640px){
  .steps.detail{column-gap:0;gap:0}
  .steps.detail>span.has-d{flex:1 1 100%;padding:16px 0}
  .steps.detail>span.has-d+span.has-d{border-top:1px solid var(--line)}
  .steps.detail>span.has-d.hi{padding-left:18px;padding-right:18px}
  .steps.detail>span.has-d.hi+span.has-d{border-top:0}
}

/* ══ 4번 칸 근거 제도 - 분야별 묶음 카드 (2026-09-16 대표님 목업) ══════════
   ⚠ 예전처럼 한 줄씩 늘어놓으면 17건이 세로로 길게 늘어져 읽히지 않는다.
   ⚠ `.basis-plain` 은 아직 묶음으로 안 나눈 자료(영문)용 폴백이다 - 지우지 말 것. */
.basisg{margin-top:20px}
.basisg.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.basis-plain{margin:0;padding:18px 22px 18px 40px;border:1px solid var(--line);
  border-radius:var(--r);background:#fff;font-size:14.8px;color:var(--slate);line-height:1.82}
.basis-plain li{margin-bottom:5px}
.bsc{border:1px solid var(--line);border-radius:16px;background:#fff;
  padding:19px 22px 15px;box-shadow:var(--sh-1);min-width:0}
.bsc-h{display:flex;align-items:center;gap:12px;padding-bottom:12px;
  border-bottom:2px solid var(--line)}
.bsc-h em{font-style:normal;font-size:23px;font-weight:800;color:var(--blue);
  letter-spacing:-1px;line-height:1}
.bsc-h b{font-size:17.2px;font-weight:800;color:var(--ink);letter-spacing:-.05em}
.bsc-l{list-style:none;margin:0;padding:0}
/* ⚠ 왼쪽 법령명 · 오른쪽 부연 두 칸 - 부연이 없으면 법령명이 자리를 다 쓴다. */
.bsc-l li{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:3px 14px;
  align-items:baseline;padding:10px 0;border-bottom:1px solid var(--line-2)}
.bsc-l li:last-child{border-bottom:0}
.bsc-l .k{grid-column:1;font-size:14.3px;font-weight:700;color:var(--navy);line-height:1.5}
.bsc-l .k.org{color:var(--blue-d)}
.bsc-l .v{grid-column:2;justify-self:end;text-align:right;font-size:12.9px;font-weight:600;
  color:var(--stone);line-height:1.5}
.bsc-l .m{grid-column:1/-1;display:none;margin-top:4px;font-size:12.7px;font-weight:600;
  color:var(--slate);line-height:1.6}
.bsc.open .bsc-l .m{display:block}
.bsc-more{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;
  display:inline-flex;align-items:center;gap:8px;font-family:inherit;
  font-size:13.1px;font-weight:800;color:var(--blue-d)}
.bsc-more i{width:7px;height:7px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);
  transition:transform .2s var(--ease)}
.bsc.open .bsc-more i{transform:rotate(225deg) translateY(-2px)}

/* ══ 5번 칸 관련 분야 문의 - 왼쪽 안내 · 오른쪽 연락 카드 ═════════════════
   ⚠ 예전에는 작은 카드 한 장뿐이라 화면이 텅 비어 보였다(대표님 지적). */
.ct-wrap{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.04fr);
  gap:clamp(28px,4vw,64px);align-items:center;margin-top:6px}
.ct-kick{display:flex;align-items:center;gap:11px;font-size:12.6px;font-weight:800;
  letter-spacing:.9px;color:var(--blue-d);margin-bottom:13px}
.ct-kick i{width:26px;height:3px;border-radius:2px;background:var(--blue)}
.ct-l h2{margin:0 0 18px}
.ct-lead{font-size:clamp(15.6px,1.28vw,18.4px);color:var(--slate);line-height:1.78;margin:0 0 14px}
.ct-sub{font-size:14.6px;color:var(--stone);line-height:1.7;margin:0}
.ct-card{border:1px solid var(--line);border-radius:18px;background:var(--bg-2,#F7FAFD);
  padding:22px 24px 8px;margin-bottom:12px}
.ct-h{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding-bottom:16px}
.ct-h b{font-size:20.5px;font-weight:800;color:var(--ink);letter-spacing:-.05em}
.ct-role{font-size:13.4px;font-weight:600;color:var(--slate);letter-spacing:0}
/* 담당자가 맡는 일 한 줄(2026-09-29 화학물질) */
.ct-card .ct-duty{margin:-6px 0 14px;font-size:14.6px;font-weight:600;color:var(--slate);line-height:1.5}
.ct-badge{flex:0 0 auto;padding:6px 13px;border-radius:999px;border:1.5px solid var(--line);
  background:#fff;font-size:12.2px;font-weight:700;color:var(--slate);white-space:nowrap}
.ct-row{display:grid;grid-template-columns:64px minmax(0,1fr) auto;align-items:center;
  gap:14px;padding:15px 0;border-top:1px solid var(--line);text-decoration:none}
.ct-row .k{font-size:13.6px;font-weight:600;color:var(--stone)}
.ct-row b{font-size:clamp(15px,1.3vw,18.6px);font-weight:800;color:var(--ink);
  letter-spacing:-.03em;word-break:break-all}
.ct-row .ar{font-style:normal;font-size:17px;color:var(--blue);transition:transform .18s var(--ease)}
.ct-row:hover b{color:var(--blue-d)}
.ct-row:hover .ar{transform:translate(2px,-2px)}
.ct-go{display:flex;align-items:center;justify-content:space-between;gap:14px;
  margin-top:4px;padding:17px 24px;border-radius:14px;background:var(--blue);
  color:#fff;text-decoration:none;font-size:16.4px;font-weight:800;letter-spacing:-.03em}
.ct-go i{font-style:normal;font-size:19px;transition:transform .18s var(--ease)}
.ct-go:hover{background:var(--blue-d)}
.ct-go:hover i{transform:translateX(4px)}

@media (max-width:980px){
  .basisg.grid{grid-template-columns:1fr}
  .ct-wrap{grid-template-columns:1fr;gap:26px;align-items:start}
}
@media (max-width:520px){
  .bsc-l li{grid-template-columns:1fr}
  .bsc-l .v{grid-column:1;justify-self:start;text-align:left}
  .ct-row{grid-template-columns:52px minmax(0,1fr) auto;gap:10px}
}

/* 주요 시험종과 시험 조건 표 */
.spectbl{margin-top:clamp(22px,3vh,38px)}
.spectbl .st-h b{display:block;font-size:17.4px;font-weight:800;color:var(--navy);letter-spacing:-.02em}
.spectbl .st-h span{display:block;margin-top:6px;font-size:14.2px;font-weight:600;color:var(--slate)}
.spectbl .st-scroll{margin-top:14px;overflow-x:auto;border:1px solid var(--line);
  border-radius:var(--r);background:#fff}
.spectbl table{width:100%;border-collapse:collapse;min-width:720px}
.spectbl th,.spectbl td{padding:12px 14px;text-align:center;font-size:13.8px;
  border-bottom:1px solid var(--line);white-space:nowrap}
.spectbl th{background:var(--bg-2);font-weight:800;color:var(--navy);font-size:13.4px}
.spectbl td{color:var(--slate);font-weight:600}
.spectbl td.k{color:var(--ink);font-weight:800}
.spectbl tbody tr:last-child th,.spectbl tbody tr:last-child td{border-bottom:0}
.spectbl .st-note{margin:12px 0 0;font-size:13.4px;font-weight:600;color:var(--stone)}
.mini{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:19px 22px}
.mini b{color:var(--ink);font-size:15.2px}
.mini div{font-size:14.3px;color:var(--slate);margin-top:5px}
/* 회사소개 '오시는 길' 안내 카드(지하철 · 버스 / 주차 / 방문 상담) 제목만 키운다 - .mini 는 다른 곳에서도 쓴다(2026-09-28) */
#map .mini b{display:block;font-size:19px;font-weight:800;letter-spacing:-.3px}
#map .mini div{margin-top:8px}
/* '방문 상담' 카드 - 전화 · 견적 · 상담 바로가기 */
#map .mini .mini-acts{display:flex;flex-wrap:wrap;gap:8px 18px;margin-top:12px}
#map .mini-acts a{font-size:14.5px;font-weight:700;color:var(--blue);text-decoration:none}
#map .mini-acts a:hover{color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
details.more2{margin-top:16px;border:1px solid var(--line);border-radius:var(--r);background:#fff;overflow:hidden}
details.more2>summary{cursor:pointer;list-style:none;padding:15px 20px;font-size:14.6px;font-weight:700;
  color:var(--blue);display:flex;align-items:center;gap:9px}
details.more2>summary::-webkit-details-marker{display:none}
details.more2>summary::before{content:"";width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);transition:transform .25s var(--ease);flex:0 0 auto}
details.more2[open]>summary::before{transform:rotate(225deg)}
details.more2>summary:hover{background:var(--bg-2)}
details.more2 .body{padding:4px 22px 20px;font-size:14.8px;color:var(--slate);line-height:1.82}
details.more2 .body ul{margin:8px 0 0;padding-left:19px}
details.more2 .body li{margin-bottom:5px}

.ctas{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:8px}
.ctabox{border:1px solid var(--line);background:#fff;border-radius:var(--r);padding:24px;
  display:flex;flex-direction:column;gap:11px;transition:.28s var(--ease)}
.ctabox:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.ctabox b{font-size:19px;font-weight:800;letter-spacing:-.2px;color:var(--ink)}
.ctabox span{font-size:14px;color:var(--slate);flex:1;line-height:1.7}
.ctabox em{align-self:flex-start;font-style:normal;font-size:14.5px;font-weight:700;color:#fff;
  background:var(--blue);border:1px solid var(--blue);border-radius:8px;padding:11px 20px;
  transition:.24s var(--ease)}
.ctabox:hover em{background:var(--blue-d);border-color:var(--blue-d);box-shadow:var(--sh-2)}
.ctas.stack{grid-template-columns:1fr;gap:14px}
.ctabox.row{flex-direction:row;align-items:center;gap:26px}
.ctabox.row span{flex:1;margin:0}
.ctabox.row em{flex:0 0 auto;white-space:nowrap}

/* ── 견적 · 상담(contact.html) 오른쪽 칸 - 2026-09-28 대표님 ─────────────
   바로가기 카드 2장을 한 줄에 나란히, 카드 아래 끝을 왼쪽 '문의 보내기' 버튼 아래 끝에 맞춘다.
   두 칸을 같은 높이로 늘리고(stretch) 오른쪽 칸 안에서 카드 줄만 맨 아래로 민다(margin-top:auto). */
.ct-grid{align-items:stretch}
.ct-side{display:flex;flex-direction:column}
/* 오른쪽이 더 길 때(영문처럼 글이 길 때)는 왼쪽 '문의 내용' 칸이 늘어나 버튼 아래 끝이 따라 내려온다 -
   어느 쪽이 길든 두 칸 아래 끝이 맞는다 */
.ct-main{display:flex;flex-direction:column}
.ct-form{flex:1;display:flex;flex-direction:column}
.ct-form .field:has(textarea){flex:1;display:flex;flex-direction:column}
.ct-form .field textarea{flex:1}
/* 카드 줄이 남는 높이를 전부 차지해(flex:1) 카드가 세로로 늘어난다 - 회신 안내를 아래로 뺀 자리를 메운다 */
.ct-cards{grid-template-columns:1fr 1fr;flex:1;margin-top:22px}
/* 회신 안내 - 두 칸 아래, '시험 의뢰 진행 순서와 시험 조건' 바로 위. 그 막대(.ig-tog)와 같은 상자에
   펼치기 없이 제목 옆에 안내 문구를 바로 적는다. 구분선은 회신 안내 위로 올린다 */
.ct-reply{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px)}
.ct-reply + .inq-guide{margin-top:12px;border-top:0;padding-top:0}
.ct-reply-bar{display:flex;align-items:baseline;gap:36px;padding:16px 20px;border:1px solid var(--line);
  border-radius:10px;background:#fff}
.ct-reply-bar b{flex:0 0 auto;font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ct-reply-bar span{font-size:14.8px;line-height:1.65;color:var(--slate);word-break:keep-all}
@media(max-width:700px){.ct-reply-bar{flex-direction:column;gap:6px}}
/* 바로가기 카드(cq-* - ⚠ .ct-card/.ct-go/.ct-sub 는 다른 곳에서 이미 쓰는 이름이라 피했다) - 이미지(남는 높이를 채움) · 제목 · 부제 · 오른쪽 아래 글자 CTA(상자 없음) */
.cq-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  overflow:hidden;text-decoration:none;color:inherit;transition:border-color .25s var(--ease),box-shadow .25s var(--ease),transform .25s var(--ease)}
.cq-card:hover{border-color:var(--blue);box-shadow:var(--sh-2);transform:translateY(-3px)}
.cq-ph{flex:1;min-height:120px;position:relative;overflow:hidden;background:var(--bg-2)}
.cq-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.cq-card:hover .cq-ph img{transform:scale(1.05)}
.cq-bd{display:flex;flex-direction:column;padding:18px 20px 16px}
.cq-bd b{font-size:17.5px;font-weight:800;letter-spacing:-.3px;color:var(--ink)}
.cq-sub{margin-top:6px;font-size:14px;line-height:1.65;color:var(--slate);word-break:keep-all}
.cq-go{align-self:flex-end;margin-top:12px;font-style:normal;font-size:14.5px;font-weight:700;color:var(--blue);
  transition:transform .2s var(--ease)}
.cq-card:hover .cq-go{transform:translateX(4px)}
@media(max-width:560px){.ct-cards{grid-template-columns:1fr}}
/* 대표전화 - 누르면 전화 연결(tel, 휴대폰). 아래 이메일(.tb-mail)과 같은 파란 밑줄 링크로 통일(2026-09-28 대표님) */
.tb-tel{font-size:19px;font-weight:700;color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.tb-tel:hover{color:var(--blue-d)}
/* 이메일 - 누르면 메일 작성 창(mailto) */
.tb-mail{color:var(--blue);text-decoration:underline;text-underline-offset:3px}
.tb-mail:hover{color:var(--blue-d)}
/* 주소 칸 작은 지도 - 좌표는 company.html #map 과 같다 */
/* ⚠ 높이를 키우면 오른쪽 칸이 왼쪽 폼보다 길어져 카드 아래 끝이 '문의 보내기' 버튼 아래로 내려간다 */
.tb-map{margin-top:12px;height:128px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.tb-maplinks{display:flex;gap:14px;margin-top:8px;font-size:13px}
.tb-maplinks a{color:var(--slate);text-decoration:none}
.tb-maplinks a:hover{color:var(--blue)}
@media(max-width:640px){.ctabox.row{flex-direction:column;align-items:flex-start}}

/* 발간자료 - 정사각형 이미지 그리드, 호버 시 중앙에 버튼 노출 */
/* 카드 크기는 한 줄 3장 기준 그대로, 3장보다 적으면 가운데로(2026-10-19 - 제품 카탈로그를 빼 2장, 오른쪽이 비어 보였다) */
.pubgrid{display:flex;flex-wrap:wrap;justify-content:center;gap:16px;margin-top:8px}
.pubgrid>.pubcard{flex:0 0 calc((100% - 32px) / 3)}
@media(max-width:860px){.pubgrid>.pubcard{flex-basis:calc((100% - 16px) / 2)}}
@media(max-width:640px){.pubgrid>.pubcard{flex-basis:100%}}
.pubcard{position:relative;aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;display:block}
/* ⚠ 그라데이션은 브라우저가 중간값을 그려내지 못한다(그라데이션↔그라데이션도 마찬가지) -
   transition 시간이 끝나는 순간 툭 바뀌어, 마우스를 떼면 제목이 먼저 돌아오고 배경은
   늦게 돌아오는 것처럼 보였다(2026-09-08 · 09-28 신고).
   그래서 바닥 그라데이션(::before)은 고정으로 두고, 호버용 어두운 막(::after)을 따로 얹어
   opacity 만 바꾼다.
   ⚠ 들어갈 때만 부드럽게(.3s), 나갈 때는 막 · 제목 · 버튼 · 사진 확대를 **전부 transition 없이**
   한 번에 되돌린다 - 하나라도 시간이 남아 있으면 순서가 어긋나 보인다(2026-09-28 대표님:
   '회사소개서' 글자와 그라데이션이 한 번에 돌아와야 한다). transition 은 :hover 쪽에만 둔다. */
/* 2026-09-28 대표님 - 제목은 배너 정중앙에 항상 노출, CTA 는 호버 때 제목 바로 아래.
   CTA 를 제목(<b>) 안에 넣고 제목 기준 절대배치(top:100%) - 제목이 두 줄이 돼도 제목은
   정중앙 그대로, 버튼은 늘 제목 바로 밑에 붙는다(버튼이 나타나도 제목이 움직이지 않는다).
   제목이 가운데로 오면서 바닥만 어둡던 그라데이션으로는 글자가 안 읽혀, 가운데까지 어둡게 깔았다. */
/* ⚠⚠ 사진 · 그라데이션 · 호버 막은 한 덩어리(.pub-ph) 안에 넣고, 확대(scale)도 그 덩어리째 한다
   (2026-09-28 대표님 신고: 호버 순간 글자가 깜빡이고 그라데이션이 뒤늦게 나옴).
   예전엔 그라데이션이 카드(.pubcard::before)에, 확대는 사진(img)에 걸려 있었다 - 호버로 img 에
   transform 이 붙는 순간 img 가 그리는 순서상 그라데이션 위로 올라가 그라데이션이 통째로
   사라지고(흰 글자가 밝은 사진 위에 드러나 '깜빡'), 호버 막이 .3s 에 걸쳐 뒤늦게 깔렸다.
   이제는 확대돼도 사진 위에 늘 그라데이션이 붙어 있고, will-change 로 처음부터 별도 층에 올려
   호버 순간 층이 새로 만들어지며 글자가 다시 그려지는 일도 없앤다. */
.pubcard .pub-ph{position:absolute;inset:0;z-index:0;will-change:transform}
.pubcard .pub-ph img{width:100%;height:100%;object-fit:cover;display:block}
.pubcard .pub-ph::before,.pubcard .pub-ph::after{content:"";position:absolute;inset:0;pointer-events:none}
.pubcard .pub-ph::before{background:linear-gradient(to top,rgba(7,19,31,.72) 0%,rgba(7,19,31,.46) 50%,rgba(7,19,31,.3) 100%)}
.pubcard .pub-ph::after{background:rgba(7,19,31,.55);opacity:0}
.pubcard b{position:absolute;left:20px;right:20px;top:50%;transform:translateY(-50%);text-align:center;
  color:#fff;font-size:clamp(26px,3.4vw,36px);line-height:1.22;letter-spacing:-.3px;word-break:keep-all;z-index:2}
.pubcard .pub-cta{position:absolute;left:50%;top:100%;margin-top:18px;transform:translateX(-50%);
  opacity:0;pointer-events:none;line-height:1}
.pubcard:hover .pub-ph::after{opacity:1;transition:opacity .3s var(--ease)}
.pubcard:hover .pub-ph{transform:scale(1.06);transition:transform .5s var(--ease)}
.pubcard:hover .pub-cta{opacity:1;transition:opacity .28s var(--ease)}
.pubcard em{font-style:normal;font-size:19px;font-weight:700;color:#fff;white-space:nowrap;
  background:var(--blue);border:1px solid var(--blue);border-radius:10px;padding:14px 26px}

/* ── 폼 ─────────────────────────────────────────────────────── */
.field{margin-bottom:20px}
.field label{display:block;font-size:14px;font-weight:700;color:var(--ink);margin-bottom:8px}
.field label i{color:var(--red);font-style:normal}
.field input,.field select,.field textarea{width:100%;padding:14px 16px;border:1px solid var(--line);
  border-radius:var(--r);font-size:15px;background:#fff}
.field textarea{min-height:150px;resize:vertical}
.field input:focus,.field select:focus,.field textarea:focus{outline:0;border-color:var(--blue);box-shadow:var(--ring)}
.field.err input,.field.err select,.field.err textarea{border-color:var(--red)}
.field .msg{font-size:13px;color:var(--red);margin-top:6px;display:none}
.field.err .msg{display:block}
/* 개인정보 동의 - 빠뜨리면 동의 줄을 빨갛게 둘러 눈에 띄게(2026-09-28) */
.field.agree.err label{color:var(--red)}
.field.agree.err{background:#FDF2F2;border:1px solid #F5C6C6;border-radius:var(--r);padding:10px 14px}

.note{background:#FFF8EE;border:1px solid #F2DCBB;border-radius:var(--r);padding:17px 22px;font-size:14.6px;color:var(--char)}
.note b{color:#8A5300}
.mode-note{font-size:13px;color:var(--stone);border-left:3px solid var(--line);padding-left:12px;margin-top:14px}

/* ── 로고 마퀴 ──────────────────────────────────────────────── */
/* 제목 · 설명과 로고 사이 간격을 기본 sec-head 여백의 절반으로 줄인다 */
#clients .sec-head{margin-bottom:clamp(19px,2vw,28px)}
.mq{overflow:hidden;padding:8px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.mq+.mq{margin-top:10px}
.mq ul{display:flex;gap:34px;list-style:none;margin:0;padding:0;width:max-content;animation:mv-l 96s linear infinite}
.mq.dir-r ul{animation-name:mv-r}
.mq:hover ul{animation-play-state:paused}
.mq li{flex:0 0 auto;display:grid;place-items:center;width:172px;height:76px}
.mq img{max-height:42px;max-width:150px;width:auto;height:auto;object-fit:contain;opacity:.88}
/* 두 줄 마퀴(company.html 주요 협력기관)는 로고를 낱개로 안 불러오고, 줄마다
   미리 합쳐 그려둔 이미지 한 장(strip)을 통째로 옮긴다 - 요청이 2건뿐이라 끊김이 없다 */
/* ⚠ 두 줄은 스트립 이미지 폭이 서로 다르다(strip-a 4256px · strip-b 3800px).
   같은 초를 주면 넓은 쪽이 더 빨리 흘러 두 줄 속도가 어긋나므로 줄마다 초를 따로 준다.
   초 = (이미지 폭 ÷ 2) ÷ 목표속도.  지금 목표속도 = 20px/s
   (2026-09-08 '너무 빨리 지나간다' 의견으로 35.5·31.7 → 20px/s 로 늦춤)
   ⚠ 로고를 바꿔 스트립 폭이 달라지면 이 초도 다시 계산할 것. */
.mq img.mq-strip{display:block;height:76px;width:auto;max-height:none;max-width:none;opacity:1;
  animation:mv-l 95s linear infinite}          /* strip-b 1900px ÷ 20 */
.mq.dir-r img.mq-strip{animation-name:mv-r;animation-duration:106s}   /* strip-a 2128px ÷ 20 */
.mq:hover img.mq-strip{animation-play-state:paused}
/* 두 줄 다 [원본+원본] 2배 복제본을 정확히 절반(-50%)만큼 옮겨 이어붙이므로,
   한 바퀴 돈 뒤에도 이음매 없이 계속 이어진다 (뿅 하고 끊기지 않음) */
@keyframes mv-l{to{transform:translateX(-50%)}}
@keyframes mv-r{from{transform:translateX(-50%)}to{transform:translateX(0)}}

/* ── 우측 고정 퀵메뉴 (koceco) ──────────────────────────────── */
.quick{position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column}
.quick a{width:67px;height:67px;display:grid;place-items:center;background:var(--blue);
  color:#fff;border:0;border-bottom:1px solid rgba(255,255,255,.18);cursor:pointer;transition:.2s;
  font-size:13px;font-weight:700;line-height:1.25;text-align:center}
.quick a:hover{background:var(--blue-d)}

/* 맨 위로 - 우측 퀵메뉴와 분리해 우하단에 동그란 버튼으로 띄운다 */
.totop{position:fixed;right:24px;bottom:24px;z-index:90;width:60px;height:60px;border-radius:50%;
  display:grid;place-items:center;background:var(--blue);color:#fff;border:0;cursor:pointer;
  box-shadow:0 6px 18px rgba(5,131,242,.32);transition:.22s var(--ease)}
.totop:hover{background:var(--blue-d);transform:translateY(-3px);box-shadow:0 10px 22px rgba(5,131,242,.42)}
.totop svg{width:24px;height:24px}

/* ── 리빌 ───────────────────────────────────────────────────── */
[data-rv]{opacity:0;transform:translateY(26px);transition:opacity .78s var(--ease),transform .78s var(--ease)}
[data-rv].in{opacity:1;transform:none}

/* ── 등장 모션 · 깊이감 ──────────────────────────────────────
   가산 어반워크 사이트에서 가져온 세 가지 - ① 배너가 살짝 크게 들어와
   제자리를 찾고 ② 좌우 블록이 서로 마주 오며 ③ 배경이 본문보다 느리게
   흐른다. 상시로 움직이는 장식은 두지 않는다. 들어올 때 한 번만 움직인다.
   scale · translate 는 transform 대신 개별 속성으로 써서 JS 패럴랙스와
   애니메이션이 서로 덮어쓰지 않게 한다. */

/* 방향을 준 리빌 - 기본은 아래에서 위, 필요할 때만 좌 · 우 · 페이드 */
[data-rv="left"]{transform:translateX(-40px)}
[data-rv="right"]{transform:translateX(40px)}
[data-rv="fade"]{transform:none}
[data-rv="zoom"]{transform:scale(.962)}
[data-rv="left"],[data-rv="right"],[data-rv="zoom"]{transition-duration:.92s}

/* 배너 - 살짝 크게 들어와 2.4초에 걸쳐 제자리를 찾는다 */
@keyframes settle-hero{from{scale:1.075;opacity:0}to{scale:1;opacity:1}}
@keyframes settle-band{from{scale:1.075;opacity:0}to{scale:1;opacity:.34}}
.hero video,.hero img.bgv{animation:settle-hero 2.4s var(--ease) both}
.phead img.bgv,.phead video.bgv{animation:settle-band 2.4s var(--ease) both}

/* 배너 패럴랙스 - 위아래로 움직일 여백을 미리 확보해 둔다 */
.phead img.bgv,.phead video.bgv{height:calc(100% + 96px);top:-48px;bottom:auto;
  will-change:translate}

/* 좌우 분할 블록 - 사진은 천천히 제 크기를 찾고 글은 옆에서 들어온다 */
.split .im img{transition:scale 1.2s var(--ease)}
.split .im[data-rv] img{scale:1.075}
.split .im[data-rv].in img{scale:1}

/* 섹션 머리말 - 눈썹줄이 먼저, 제목이 뒤따라 */
.sec-head[data-rv] .eyebrow{opacity:0;translate:0 12px;
  transition:opacity .6s var(--ease) .05s,translate .6s var(--ease) .05s}
.sec-head[data-rv].in .eyebrow{opacity:1;translate:none}

@media (prefers-reduced-motion:reduce){
  .hero video,.hero img.bgv,.phead img.bgv,.phead video.bgv{animation:none}
  .phead img.bgv,.phead video.bgv{height:100%;top:0;translate:none}
  .split .im[data-rv] img,.split .im[data-rv].in img{scale:1}
  .sec-head[data-rv] .eyebrow{opacity:1;translate:none}
}

/* ── 수행하는 일 : 좌우 분할(시안 A) ──────────────────────────
   왼쪽 목록에서 고르고 오른쪽에서 읽는다. 눌러도 스크롤이 튀지 않는다. */
.wa{display:grid;grid-template-columns:308px 1fr;border:1px solid var(--line);
  border-radius:var(--r);background:#fff}
/* 소분류 목록 = 이름만 담은 카드(2026-09-08 대표님) - 번호와 작은 설명은 뺐다.
   ⚠ 카드끼리 gap 으로 띄우므로 버튼의 margin 을 쓰지 않는다. */
.wa-list{background:var(--bg-2);border-right:1px solid var(--line);padding:12px;
  border-radius:var(--r) 0 0 var(--r);display:flex;flex-direction:column;gap:8px}
.wa-list .mini.sub{background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:16px 17px;margin:0;box-shadow:0 1px 2px rgba(15,23,42,.05);position:static;
  transition:.2s var(--ease)}
.wa-list .mini.sub::after{display:none}
.wa-list .mini.sub b{display:block;font-size:16.4px;font-weight:700;color:var(--ink);
  line-height:1.42;letter-spacing:-.3px}
.wa-list .mini.sub:hover{background:#fff;border-color:var(--blue);
  box-shadow:0 4px 12px rgba(5,131,242,.13);transform:translateY(-1px)}
.wa-list .mini.sub.on{background:var(--navy);border-color:var(--navy);
  box-shadow:0 4px 14px rgba(11,31,59,.22);transform:none}
.wa-list .mini.sub.on b{color:#fff}
.wa-list .mini.sub.on .cnt{background:rgba(255,255,255,.16);color:#fff}
.wa-body{padding:24px 26px;min-height:420px}

.wa-h{font-size:19.5px;font-weight:800;color:var(--ink);letter-spacing:-.5px;line-height:1.35}
.wa-l{font-size:14.4px;color:var(--slate);margin:7px 0 20px;line-height:1.7}
.wa-trip{display:flex;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:22px}
.wa-trip div{flex:1;padding:11px 14px;border-left:1px solid var(--line-2)}
.wa-trip div:first-child{border-left:0}
.wa-trip .k{font-size:11.4px;font-weight:700;color:var(--stone)}
.wa-trip .v{font-size:15px;font-weight:800;color:var(--blue-d);margin-top:2px}
/* ⚠⚠ 소제목이 12px 파란 글씨라 **보이지 않았다**(2026-09-15 대표님 - "너무 작아서 안보임").
   제공 서비스 제목(.wp-st)과 **같은 언어**로 맞춘다 - 굵은 잉크색 + 오른쪽으로 뻗는 실선.
   ⚠ 아래 밑줄(border-bottom)을 ::after 실선으로 바꿨다 - 제목 길이와 무관하게 폭을 채운다. */
.wa-t{display:flex;align-items:center;gap:14px;font-size:20px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink);margin:34px 0 15px;padding-bottom:0;border-bottom:0}
.wa-t::after{content:"";flex:1;height:1px;background:var(--line)}
/* ⚠⚠ 이 규칙은 '본문의 맨 첫 제목' 만 노렸는데, 제공서비스 · 장비는 두 칸(.wa-duo)
   안에서 각각 첫 자식이라 여기에도 걸려 위여백이 0 이 됐다. 그래서 진행 방식 목록과
   제공서비스 제목이 딱 붙어 보였다(2026-09-14 대표님 - '간격이 너무 타이트함').
   ⚠ 본문 직속일 때만 여백을 없앤다 - 안쪽 칸의 제목은 다른 마디와 같은 24px 를 쓴다. */
.wa-body > .wa-t:first-child{margin-top:0}
.wa-body p{font-size:15.4px;color:var(--char);line-height:1.85;margin:0 0 11px}
.wa-body p:last-child{margin-bottom:0}
/* ⚠⚠ 진행 방식 - 줄글 목록에서 **단계 카드**로(2026-09-15 대표님 - "블럭으로 스텝별로
   한눈에 보기 좋게"). 제공 서비스 칸과 같은 언어(큰 옅은 번호 + 굵은 한 줄)를 쓴다.
   ⚠ 칸 수를 고정하지 않는다 - 단계가 4~7개로 분야마다 달라 auto-fit 이 알아서 접는다.
   ⚠ 예전 세로 연결선(::after)은 카드 배치와 맞지 않아 껐다. */
.wa-steps{display:grid;grid-template-columns:repeat(var(--sc,3),minmax(0,1fr));gap:12px;
  counter-reset:ws;margin:0;padding:0;list-style:none}
.wa-steps li{counter-increment:ws;position:relative;margin:0;padding:17px 19px 19px;
  background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:0 8px 20px -18px rgba(14,42,79,.5);
  font-size:15.6px;font-weight:700;color:var(--ink);line-height:1.5;letter-spacing:-.025em}
.wa-steps li::before{content:counter(ws,decimal-leading-zero);position:static;display:block;
  width:auto;height:auto;margin-bottom:9px;background:none;border-radius:0;
  font-size:27px;font-weight:800;line-height:1;color:#C7DCF2;letter-spacing:-.03em}
.wa-steps li::after{display:none}
/* ⚠ 좁아지면 변수를 무시하고 줄을 접는다 - 카드가 눌려 글자가 세로로 쪼개지면 안 된다 */
@media (max-width:1340px){.wa-steps{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:860px){.wa-steps{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wa-steps{grid-template-columns:1fr}}
.wa-duo{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.wa-body ul.dot{list-style:none;margin:0;padding:0}
.wa-body ul.dot li{position:relative;padding-left:19px;font-size:14px;color:var(--char);
  margin-bottom:7px;line-height:1.6}
.wa-body ul.dot li::before{content:"";position:absolute;left:0;top:9px;width:6px;height:6px;
  border-radius:50%;background:var(--sky)}
@media(max-width:900px){
  .wa{grid-template-columns:1fr}
  .wa-list{border-right:0;border-bottom:1px solid var(--line);
    display:grid;grid-template-columns:1fr 1fr;gap:8px}
  .wa-body{padding:20px 18px;min-height:0}
  .wa-duo{grid-template-columns:1fr;gap:0}
}
@media(max-width:560px){.wa-list{grid-template-columns:1fr}
  .wa-trip{flex-wrap:wrap}.wa-trip div{flex:1 0 50%;border-top:1px solid var(--line-2)}}

/* 목록은 스크롤을 따라온다 - 머리말(88) + 중분류 탭(약 56) 아래에 붙는다 */
.wa-list{position:sticky;top:calc(var(--hd) + 62px);align-self:start;max-height:calc(100vh - var(--hd) - 84px);overflow:auto}
.wa-list::-webkit-scrollbar{width:6px}
.wa-list::-webkit-scrollbar-thumb{background:#cfd8e3;border-radius:3px}
/* 사진 갤러리 */
.wa-gal{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:22px}
.wa-gal figure{margin:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;background:var(--bg-2)}
/* ⚠ hover 확대·zoom-in 커서를 두지 말 것 - 2026-09-16 부터 갤러리 사진은 눌러도 아무 일이
   없다(대표님 "사진들은 눌렀을때 확대해서 볼 필요가 없음"). 움직이면 누를 수 있는 줄 안다. */
.wa-gal img{display:block;width:100%;height:150px;object-fit:cover}
.wa-gal figcaption{font-size:12.2px;color:var(--slate);padding:8px 10px;border-top:1px solid var(--line-2);background:#fff;line-height:1.45}
/* 심화 설명 */
/* ── 시험 생물 카드 (2026-09-16 대표님 시안 2차) ────────────────────────────
   왼쪽 큰 사진 / 오른쪽 제목 · 요약 · 측정 원리|반응 시간 · 적용 시료,
   아래 전체 폭에 번호 원 + 연결선 시험 절차.
   ⚠⚠ 카드는 **전부 펼친 채로** 나온다(대표님 - "무조건 펼쳐져서 보이게").
      접는 것은 머리줄을 눌렀을 때만 - 사진 클릭은 아무 일도 하지 않는다.
   ⚠⚠ 사진을 눌러도 '크게 보기' 팝업은 뜨지 않는다 - `.wa-gal` 이 아니라 `.tx-shots` 라
      site.js 의 galLightbox() 가 애초에 붙지 않는다. 여기에 라이트박스를 붙이지 말 것. */
.wa-t em{font-style:normal;font-size:12.8px;font-weight:600;color:var(--stone);
  letter-spacing:0;white-space:nowrap}
.txs{display:flex;flex-direction:column;gap:16px;margin-bottom:26px}
/* ⚠⚠ padding:0 을 반드시 명시할 것 - 전역 `section{padding:clamp(64px,7.2vw,108px) 0}` 이
   카드(<section>)에 걸려 위아래 95px 씩 빈 공간이 생긴다(2026-09-16 실측). */
.tx-card{padding:0;border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;
  box-shadow:var(--sh-1);transition:box-shadow .16s var(--ease)}
.tx-card.open{box-shadow:var(--sh-2)}

/* 머리줄 - 연한 파랑 띠. 이름 · 학명 · 접기 단추 */
.tx-head{display:flex;align-items:center;gap:12px;width:100%;padding:14px 20px;
  background:#F1F7FE;border:0;border-bottom:1px solid transparent;
  cursor:pointer;font:inherit;text-align:left;transition:background .16s var(--ease)}
.tx-card.open .tx-head{border-bottom-color:#E1EBF7}
.tx-head:hover{background:#E9F2FD}
.tx-dot{flex:0 0 auto;width:9px;height:9px;border-radius:50%;background:var(--blue)}
.tx-name{flex:0 0 auto;font-size:19px;font-weight:800;color:var(--navy);letter-spacing:-.01em}
.tx-sci{flex:1;min-width:0;font-style:italic;font-size:14.6px;color:var(--slate);
  padding-left:13px;border-left:1px solid #CFDDEE;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tx-sign{flex:0 0 auto;margin-left:auto;width:26px;height:26px;border-radius:50%;
  background:var(--blue);position:relative}
.tx-sign::before,.tx-sign::after{content:"";position:absolute;left:50%;top:50%;
  width:12px;height:2px;margin:-1px 0 0 -6px;border-radius:1px;background:#fff;
  transition:transform .2s var(--ease)}
.tx-sign::after{transform:rotate(90deg)}
.tx-card.open .tx-sign::after{transform:rotate(90deg) scaleX(0)}

.tx-body{display:none;padding:22px 24px 24px}
.tx-card.open .tx-body{display:block}

/* 위 - 사진 | 설명 */
.tx-top{display:grid;grid-template-columns:minmax(0,290px) minmax(0,1fr);gap:28px;
  align-items:start}
.tx-shots{display:grid;grid-template-columns:repeat(auto-fit,minmax(125px,1fr));gap:12px}
.tx-shots figure{margin:0;min-width:0}
.tx-shots img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;
  border-radius:12px;background:var(--bg-2);border:1px solid var(--line)}
.tx-shots figcaption{margin-top:8px;line-height:1.45}
.tx-shots figcaption b{display:block;font-style:italic;font-size:12.6px;font-weight:600;
  color:var(--slate)}
.tx-shots figcaption span{display:block;font-size:12.2px;color:var(--stone);margin-top:1px}

.tx-info{min-width:0}
/* ⚠ 아래 셋은 `.tx-info` 를 앞에 붙여 둘 것 - `.wa-body p`(0,0,1,1) 가 이긴다. */
.tx-info .tx-title{margin:0 0 10px;font-size:23px;font-weight:800;color:var(--navy);
  letter-spacing:-.02em;line-height:1.3}
.tx-info .tx-lead{margin:0 0 6px;font-size:15.8px;font-weight:700;line-height:1.62;color:var(--char)}
.tx-info .tx-sub{margin:0;max-width:54em;font-size:14.4px;line-height:1.68;color:var(--slate)}

/* 측정 원리 | 반응 시간 */
.tx-meta{display:flex;flex-wrap:wrap;gap:0 30px;margin-top:18px}
.tx-meta>div{position:relative;padding-right:30px;min-width:0}
.tx-meta>div+div{padding-left:30px;border-left:1px solid var(--line)}
.tx-meta b{display:block;font-size:12.8px;font-weight:600;color:var(--stone);margin-bottom:4px}
.tx-meta span{display:block;font-size:16.2px;font-weight:800;color:var(--navy);line-height:1.4}

/* 적용 시료 */
.tx-media{margin-top:16px;max-width:52em;padding:13px 16px;border-radius:12px;background:#F1F7FE}
.tx-media b{display:block;font-size:12.8px;font-weight:800;color:var(--blue-d);margin-bottom:4px}
.tx-media span{display:block;font-size:14.8px;line-height:1.6;color:var(--char)}

/* 사진 없는 칸(시험 매체 · 판정 방법 등) */
.tx-info.solo .tx-list{margin:0}
.tx-list{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:7px}
.tx-list li{position:relative;padding-left:15px;font-size:14.4px;line-height:1.66;color:var(--char)}
.tx-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--sky)}

/* ── 사진이 2장 이상인 카드 - 펼친 배치 (2026-09-16 대표님 시안 3차) ──────────
   제목 · 요약을 전체 폭에 두고, 측정 정보와 적용 시료를 한 줄 3칸으로,
   시험 생물은 사진 아래에 이름 · 구분 알약 · 학명을 단 카드 줄로 편다.
   ⚠ 한 장짜리 카드는 예전 배치(사진 왼쪽 · 설명 오른쪽) 그대로다 - 대표님이
      "이미지가 하나일 때는 지금 방식으로 해도 깔끔"이라고 했다. */
.tx-info.full{min-width:0}
.tx-info.full .tx-sub{max-width:68em}
.tx-meta.row{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);
  gap:14px 0;margin-top:18px}
.tx-meta.row>div{padding:0 26px;border-left:1px solid var(--line)}
.tx-meta.row>div:first-child{padding-left:0;border-left:0}
.tx-ft.plain{border-top:0;padding-top:0;margin-top:18px;margin-bottom:10px}

/* ⚠ 늘 3칸 - 장수에 따라 칸이 커지면 카드마다 사진 크기가 달라 보인다(대표님). */
.tx-shots.cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tx-shots.cards figure{border:1px solid var(--line);border-radius:14px;overflow:hidden;
  background:#fff;box-shadow:var(--sh-1)}
.tx-shots.cards img{aspect-ratio:16/11;border:0;border-radius:0}
.tx-shots.cards figcaption{margin:0;padding:12px 14px 13px;display:grid;
  grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:3px 8px}
.tx-shots.cards figcaption b{grid-column:1;grid-row:1;display:block;font-style:normal;
  font-size:16.2px;font-weight:800;color:var(--navy)}
.tx-shots.cards figcaption .sp-k{grid-column:2;grid-row:1;justify-self:end;display:block;
  margin:0;padding:3px 10px;border-radius:999px;background:#EAF3FE;
  font-size:12px;font-weight:700;color:var(--blue-d);white-space:nowrap}
.tx-shots.cards figcaption i{grid-column:1/-1;grid-row:2;font-style:italic;
  font-size:13.2px;line-height:1.45;color:var(--slate)}

/* 시험 절차 - 번호 원을 가운데 두고 글자를 아래 가운데 정렬(2026-09-16 시안 3차).
   ⚠ 연결선은 이 원의 오른쪽 끝에서 다음 원의 왼쪽 끝까지다 - 원 반지름 17 + 여백 5 = 22. */
/* ⚠ 제목 위 30px · 아래 7px - 더 벌리면 절차 줄이 카드 아래쪽에 떠 보인다(대표님 지적). */
.tx-ft{margin:16px 0 7px;padding-top:14px;border-top:1px solid var(--line-2);
  font-size:15px;font-weight:800;color:var(--navy)}
.tx-flow{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  margin:0;padding:0 4px;list-style:none}
.tx-flow li{position:relative;padding:42px 10px 0;min-width:0;text-align:center}
.tx-flow li::after{content:"";position:absolute;top:16px;
  left:calc(50% + 22px);right:calc(-50% + 22px);height:2px;background:#DCE6F3}
.tx-flow li:last-child::after{display:none}
.tx-flow em{position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;
  display:grid;place-items:center;background:#fff;border:2px solid var(--blue);
  font-style:normal;font-size:12.8px;font-weight:800;color:var(--blue)}
.tx-flow li:last-child em{background:var(--blue);border-color:var(--blue);color:#fff}
.tx-flow b{display:block;font-size:14.8px;font-weight:800;color:var(--navy);line-height:1.4}
.tx-flow li:last-child b{color:var(--blue-d)}
.tx-flow small{display:block;margin-top:5px;font-size:13.2px;line-height:1.55;color:var(--slate)}

@media (max-width:900px){
  .tx-top{grid-template-columns:1fr;gap:20px}
  .tx-shots{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
}
@media (max-width:640px){
  .wa-t em{display:none}
  /* 폰에서는 학명을 이름 아랫줄로 내린다 - 한 줄에 우겨넣으면 줄임표로 잘려
     어느 시험종인지 알 수 없다. 접기 단추는 첫 줄 오른쪽 끝에 그대로 둔다. */
  .tx-head{padding:12px 14px;gap:9px;flex-wrap:wrap;row-gap:5px}
  .tx-name{flex:1 1 auto;min-width:0;font-size:17px}
  .tx-sign{order:1}
  .tx-sci{order:2;flex:1 0 100%;font-size:12.9px;padding-left:0;border-left:0;
    white-space:normal;overflow:visible;text-overflow:clip;line-height:1.45}
  .tx-body{padding:16px 14px 18px}
  .tx-info .tx-title{font-size:19.5px}
  .tx-info .tx-lead{font-size:15px}
  .tx-meta{gap:0;flex-direction:column}
  .tx-meta>div{padding-right:0}
  .tx-meta>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);
    margin-top:11px;padding-top:11px}
  /* ⚠ `.tx-meta.row`(0,0,2,0)는 `.tx-meta`(0,0,1,0)를 이기므로 여기서도 클래스를
     붙여 줘야 세로로 접힌다. */
  .tx-meta.row{grid-auto-flow:row;grid-template-columns:1fr;gap:0}
  .tx-meta.row>div{padding:0}
  .tx-meta.row>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line);
    margin-top:11px;padding-top:11px}
  .tx-shots.cards{grid-template-columns:1fr;gap:13px}
  /* 좁은 화면에서는 번호를 왼쪽에 세우고 선을 세로로 잇는다 */
  .tx-flow{grid-template-columns:1fr;padding:0}
  .tx-flow li{padding:0 0 20px 46px;min-height:38px;text-align:left}
  .tx-flow li:last-child{padding-bottom:0}
  .tx-flow li::after{top:38px;left:16px;right:auto;bottom:6px;width:2px;height:auto}
  .tx-flow em{top:0;left:0;transform:none}
}

.wa-spec{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-top:6px}
.wa-spec > div{border-top:1px solid var(--line-2);display:grid;grid-template-columns:170px 1fr}
.wa-spec > div:first-child{border-top:0}
.wa-spec dt{background:var(--bg-2);padding:12px 14px;font-size:13px;font-weight:700;color:var(--char);margin:0}
.wa-spec dd{margin:0;padding:12px 15px;font-size:13.8px;color:var(--char);line-height:1.7}
.wa-spec dd span{display:block}
.wa-spec dd span + span{margin-top:5px}
@media(max-width:900px){
  .wa-list{position:static;max-height:none}
  .wa-spec > div{grid-template-columns:1fr}
  .wa-spec dt{border-bottom:1px solid var(--line-2)}
  .wa-gal img{height:130px}
}

/* ── 푸터 ───────────────────────────────────────────────────── */
footer{background:#08172B;color:#9FB6D0;padding:62px 0 38px;font-size:15.4px}
/* ⚠ 2026-09-21 대표님 - 꼬리말 글자가 작고 잘 안 보인다. 글자를 키우고 굵기 · 색 대비를
   올리며, 칸이 7개라 좁아지므로 본문(--max 1360)보다 넓게 쓴다. */
footer .wrap{max-width:1560px}
footer .cols{display:grid;grid-template-columns:1.6fr repeat(6,1fr);gap:30px;margin-bottom:38px}
footer .brand img{height:34px;filter:brightness(0) invert(1);opacity:.9;margin-bottom:16px}
footer h5{color:#fff;font-size:17px;font-weight:800;margin:0 0 14px}
footer h5 a{display:inline-block;padding:0;color:#fff}
footer h5 a:hover{color:var(--sky)}
footer a{display:block;padding:5px 0;color:#8CA3BF;transition:.18s}
footer a:hover{color:#fff}
footer .cols>div>div>a{font-size:15px;font-weight:500;padding:5px 0;color:#A8BDD6}
footer .cols>div>div>a:hover{color:#fff}
footer .cols>div>div>a.sub{padding-left:10px;font-size:13.6px;font-weight:400;color:#93AAC4}
footer .cols>div>div>a.sub::before{content:"-";margin-right:6px}
footer .fin{border-top:1px solid #17293F;padding-top:22px;font-size:13.8px;line-height:1.95}
footer .fin b{color:#C3D4E8}

/* ── 시안 배너 ──────────────────────────────────────────────── */
.draft{position:fixed;left:0;right:0;bottom:0;z-index:120;background:var(--amber);color:#3D2600;
  font-size:12.8px;font-weight:700;padding:8px 0}
.draft .wrap{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.draft button{margin-left:auto;border:0;background:rgba(0,0,0,.14);color:inherit;border-radius:4px;
  padding:4px 12px;cursor:pointer;font-weight:800}

/* ── 반응형 ─────────────────────────────────────────────────── */
@media(max-width:1180px){
  nav.gnb{display:none}
  /* ⚠ 위 메뉴가 숨는 구간에서는 펼침 판도 함께 끈다(햄버거 서랍이 대신한다) */
  header .mega{display:none}
  .g4,.ipgrid{grid-template-columns:repeat(2,1fr)}
  .g3{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
  .split.rev .im{order:0}
  .stats{grid-template-columns:repeat(2,1fr)}
  .stats>div:nth-child(3){border-left:0}
  .stats-org{grid-template-columns:repeat(3,1fr)}
  .stats-org .n{font-size:clamp(22px,7vw,30px)}
  .stats-org>div:nth-child(3){border-left:1px solid rgba(255,255,255,.12)}
  .ctas{grid-template-columns:1fr}
  .wk{grid-template-columns:66px 1fr;row-gap:8px}
  .wk .c,.wk .g{grid-column:2}
  [data-papers] .wk{grid-template-columns:66px 1fr}
  .quick{display:none}
  footer .cols{grid-template-columns:1fr 1fr}
}
@media(max-width:640px){
  :root{--gut:18px}
  .g2,.g4,.ipgrid{grid-template-columns:1fr}
  .tel span{display:none}
  .tel{padding:11px 15px}
  /* ⚠⚠ 폰에서 머리말 내용이 wrap 보다 62px 넘쳐 **햄버거가 화면 밖으로 밀려
     메뉴를 열 수 없었다**(원본부터 · 360px 은 아예 안 보임 · 실측).
     EN 은 **서랍 안에도 있어**(언어 전환 단추) 여기서 빼도 기능이 줄지 않는다.
     되돌리려면 이 두 줄만 지우면 된다. */
  header .lang{display:none}
  header .hd{gap:14px}
  .sec-head.row{flex-direction:column;align-items:flex-start}
  footer .cols{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  /* ⚠ 반복 횟수도 1번으로 - 시간만 0.01ms 로 줄이면 무한 반복 애니메이션이 0.01ms 마다 되풀이돼 화면이 빠르게 떨린다
     (2026-10-23 대표님 폰 - 첫 화면 사진 kb-solo). */
  *,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
  [data-rv]{opacity:1;transform:none}
}
@media print{
  header,.quick,.totop,.draft,.ltabs,.cue{display:none !important}
  .hero{min-height:auto}
  body{background:#fff}
}

/* ── 상세 페이지 보정 ───────────────────────────────────────── */
/* 빈 상태 - 아이콘 + 점선 박스 + 한 줄 안내 */
.empty-box{border:1px dashed var(--line);border-radius:8px;background:var(--bg-2);
  padding:48px 30px;text-align:center;color:var(--slate)}
.empty-box .ic{font-size:34px;line-height:1;margin-bottom:14px}
.empty-box b{display:block;font-size:16.5px;color:var(--ink);margin-bottom:7px}
.empty-box span{font-size:14.4px;color:var(--stone)}
.tagrow{display:flex;flex-wrap:wrap;gap:6px 7px;margin-top:20px}
.tagrow span{font-size:12.8px;font-weight:600;color:var(--blue-d);background:#EAF3FE;
  border-radius:999px;padding:5px 12px;white-space:nowrap}
[data-d-works] .wk{grid-template-columns:74px 1fr 280px}
@media(max-width:1180px){[data-d-works] .wk{grid-template-columns:66px 1fr}}


/* ── 연대표 (연혁) ── 가운데 선 · 좌우 교차 · 스크롤 등장 ───── */
.tline{position:relative;padding:8px 0 20px}
.tl-rail{position:absolute;left:50%;top:0;bottom:0;width:2px;background:var(--line);transform:translateX(-1px)}
.tl-fill{position:absolute;left:0;top:0;width:100%;height:0;background:var(--blue);
  box-shadow:0 0 12px rgba(5,131,242,.45)}

.tl-year{position:relative;text-align:center;margin:52px 0 26px;z-index:2}
.tl-year:first-of-type{margin-top:0}
.tl-year span{display:inline-block;background:var(--navy);color:#fff;font-size:20px;font-weight:800;
  letter-spacing:-.6px;padding:9px 26px;border-radius:999px;font-variant-numeric:tabular-nums;
  box-shadow:0 0 0 8px #fff}
.tl-year.past span{background:#fff;color:var(--stone);font-size:14.5px;font-weight:700;
  border:1px solid var(--line);box-shadow:0 0 0 8px #fff}

.tl-row{position:relative;display:grid;grid-template-columns:1fr 1fr;margin-bottom:18px;
  opacity:0;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.tl-row.l{transform:translate(-28px,14px)}
.tl-row.r{transform:translate(28px,14px)}
.tl-row.in{opacity:1;transform:none}
.tl-row::before{content:"";position:absolute;left:50%;top:17px;width:13px;height:13px;border-radius:50%;
  background:#fff;border:2px solid var(--line);transform:translateX(-50%);z-index:2;transition:.45s var(--ease)}
.tl-row.in::before{border-color:var(--blue);background:var(--blue);box-shadow:0 0 0 5px rgba(5,131,242,.16)}
.tl-row.l .tl-card{grid-column:1;text-align:right;margin:0 44px 0 auto;max-width:470px}
.tl-row.r .tl-card{grid-column:2;margin:0 auto 0 44px;max-width:470px}

.tl-card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:17px 22px;
  transition:.3s var(--ease)}
.tl-card:hover{border-color:var(--blue);box-shadow:var(--sh-2)}
.tl-card b{display:block;font-size:14.6px;font-weight:800;color:var(--blue);letter-spacing:.2px;
  font-variant-numeric:tabular-nums;margin-bottom:5px}
.tl-card span{display:block;font-size:15.4px;color:var(--ink);line-height:1.62;font-weight:600}
.tl-card em{font-style:normal;font-size:12.6px;font-weight:700;color:var(--slate);background:var(--bg-2);
  border-radius:999px;padding:3px 10px;margin-left:7px;white-space:nowrap;display:inline-block}
.tl-card.start{border-color:var(--navy);border-width:2px}
.tl-card.start b{color:var(--navy)}
.tl-card.muted{background:var(--bg-2);border-style:dashed}
.tl-card.muted b,.tl-card.muted span{color:var(--slate);font-weight:600}

@media(max-width:820px){
  .tl-rail{left:9px;transform:none}
  .tl-year{text-align:left;padding-left:0;margin:38px 0 20px}
  .tl-year span{box-shadow:0 0 0 6px #fff;margin-left:-8px}
  .tl-row{grid-template-columns:1fr}
  .tl-row::before{left:9px}
  .tl-row.l,.tl-row.r{transform:translate(20px,10px)}
  .tl-row.in{transform:none}
  .tl-row.l .tl-card,.tl-row.r .tl-card{grid-column:1;text-align:left;margin:0 0 0 38px;max-width:none}
}

/* ── 소분류 펼침 ────────────────────────────────────────────── */
.mini.sub{cursor:pointer;text-align:left;width:100%;font:inherit;position:relative;
  transition:.24s var(--ease);padding-right:44px}
.mini.sub:hover{border-color:var(--blue);background:#fff}
.mini.sub::after{content:"";position:absolute;right:20px;top:24px;width:8px;height:8px;
  border-right:2px solid var(--stone);border-bottom:2px solid var(--stone);
  transform:rotate(45deg);transition:.26s var(--ease)}
.mini.sub:hover::after{border-color:var(--blue)}
.mini.sub.on{border-color:var(--blue);background:#fff;box-shadow:0 0 0 1px var(--blue)}
.mini.sub.on::after{transform:rotate(-135deg);border-color:var(--blue);top:28px}
.mini.sub .cnt{display:inline-block;margin-left:8px;font-size:11.5px;font-weight:800;
  color:var(--blue-d);background:#EAF3FE;border-radius:999px;padding:2px 9px;vertical-align:2px}
.mini.sub .todo{display:inline-block;margin-left:8px;font-size:11px;font-weight:700;color:#A96908;
  background:#FFF4E3;border-radius:999px;padding:2px 9px;vertical-align:2px}

.subpanel{margin-top:16px;border:1px solid var(--blue);border-radius:var(--r);background:#fff;
  overflow:hidden;animation:sp .3s var(--ease)}
@keyframes sp{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.subpanel .sp-h{background:var(--navy);color:#fff;padding:16px 24px;display:flex;
  align-items:center;gap:12px}
.subpanel .sp-h b{font-size:18px;letter-spacing:-.5px}
.subpanel .sp-h span{font-size:13.6px;color:#A8C2E0;flex:1}
.subpanel .sp-h button{border:1px solid rgba(255,255,255,.34);background:transparent;color:#fff;
  border-radius:999px;width:30px;height:30px;font-size:16px;cursor:pointer;flex:0 0 auto}
.subpanel .sp-h button:hover{background:rgba(255,255,255,.16)}
.subpanel .sp-b{padding:26px 24px 28px}
.subpanel h4{margin:24px 0 10px;font-size:12px;font-weight:800;letter-spacing:1.6px;color:var(--blue);
  display:flex;align-items:center;gap:10px}
.subpanel h4:first-child{margin-top:0}
.subpanel h4::after{content:"";flex:1;height:1px;background:var(--line-2)}
.subpanel p{font-size:15.6px;color:var(--slate);line-height:1.85;margin:0 0 12px;max-width:78ch}
.subpanel ul{margin:0;padding-left:19px}
.subpanel li{font-size:15px;color:var(--slate);line-height:1.75;margin-bottom:5px}
.subpanel .period{font-size:15.4px;color:var(--ink);font-weight:600;background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--r);padding:14px 18px}
.subpanel .empty{border:1px dashed #D6C09A;background:#FFFCF6;border-radius:var(--r);
  padding:14px 18px;font-size:14.2px;color:#8A6A32}
.subpanel .empty b{color:#7A5410}
.subpanel .g2{display:grid;grid-template-columns:1fr 1fr;gap:26px}
@media(max-width:820px){.subpanel .g2{grid-template-columns:1fr}}


/* ═══════════════════════════════════════════════════════════════
   FABLE 개편 레이어 (2026-09-03)
   - 아래 규칙은 기존 규칙을 '뒤에서' 덮어써 전 페이지에 적용된다
   - 상시 도는 장식은 히어로 오로라 하나뿐, 나머지는 반응형 마이크로 인터랙션
   ═══════════════════════════════════════════════════════════════ */

:root{
  --r:12px;
  --sh-1:0 1px 2px rgba(11,18,32,.05),0 2px 8px rgba(11,18,32,.04);
  --sh-2:0 12px 30px -8px rgba(14,42,79,.16);
  --sh-3:0 30px 70px -16px rgba(7,26,49,.32);
  --grad:linear-gradient(120deg,#0583F2,#3DA5FF 55%,#64D2FF);
}

/* 바탕 - 옅은 도트 질감은 회색 섹션에만 */
.alt{background:
  radial-gradient(rgba(14,42,79,.05) 1px,transparent 1.4px) 0 0/22px 22px,
  var(--bg-2)}

/* 선택 · 포커스 · 스크롤바 */
::selection{background:rgba(5,131,242,.22)}
:focus-visible{outline:3px solid rgba(5,131,242,.4);outline-offset:2px}
@media(pointer:fine){
  ::-webkit-scrollbar{width:12px}
  ::-webkit-scrollbar-track{background:transparent}
  ::-webkit-scrollbar-thumb{background:#C6D2E0;border-radius:8px;border:3px solid #fff}
  ::-webkit-scrollbar-thumb:hover{background:#A6B8CC}
}

/* 스크롤 진행 바 */
#pgbar{position:fixed;top:0;left:0;height:3px;width:0;z-index:210;background:var(--grad);
  border-radius:0 3px 3px 0;box-shadow:0 0 14px rgba(5,131,242,.5);pointer-events:none}

/* 머리말 - 스크롤 시 그림자만 추가 */
header.sc{box-shadow:0 10px 34px -14px rgba(14,42,79,.22)}

/* ── 히어로 ── */
.hero::before{content:"";position:absolute;inset:-22% -12%;z-index:1;pointer-events:none;
  background:
    radial-gradient(42% 55% at 16% 28%,rgba(5,131,242,.36),transparent 70%),
    radial-gradient(36% 46% at 84% 70%,rgba(100,210,255,.22),transparent 70%);
  mix-blend-mode:screen;animation:aurora 17s ease-in-out infinite alternate}
@keyframes aurora{to{transform:translate3d(3%,4%,0) scale(1.07)}}
.hero .wrap{position:relative;z-index:2}
.hero h1{letter-spacing:-2.4px}
.hero-badge{display:inline-flex;align-items:center;gap:9px;font-size:13.6px;font-weight:800;
  letter-spacing:1.6px;color:#CFE6FF;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.22);backdrop-filter:blur(6px);
  border-radius:999px;padding:8px 17px;margin-bottom:24px;max-width:100%}
/* 줄여 쓰지 않은 3단어라 길다 - 좁은 화면에서는 자간을 줄이고 두 줄을 허용한다 */
@media (max-width:620px){.hero-badge{letter-spacing:.5px;font-size:12.2px;
  line-height:1.5;padding:7px 14px;align-items:flex-start}
  .hero-badge i{margin-top:5px;flex:0 0 auto}}
.hero-badge i{width:7px;height:7px;border-radius:50%;background:var(--sky);font-style:normal;
  box-shadow:0 0 0 4px rgba(100,181,252,.22);animation:hbdot 2.4s ease-out infinite}
@keyframes hbdot{55%{box-shadow:0 0 0 8px rgba(100,181,252,.1)}100%{box-shadow:0 0 0 4px rgba(100,181,252,.22)}}

/* 스크롤 유도 - 화살표 글자 대신 마우스 모양 */
.cue{width:29px;height:48px;border:2px solid rgba(255,255,255,.55);border-radius:999px;
  background:transparent;font-size:0;z-index:3}
.cue:hover{border-color:#fff;background:rgba(255,255,255,.06)}
.cue::after{content:"";position:absolute;left:50%;top:9px;width:4px;height:9px;margin-left:-2px;
  border-radius:4px;background:#fff;animation:cuedrop 1.9s var(--ease) infinite}
@keyframes cuedrop{0%{transform:translateY(0);opacity:1}72%{transform:translateY(15px);opacity:0}100%{opacity:0}}

/* ── 눈썹줄 - 알약형 ── */
.eyebrow{color:var(--blue-d);background:#EAF3FE;border:1px solid #D8E9FD;border-radius:999px;
  padding:7px 15px;width:max-content;letter-spacing:1.8px;gap:8px}
.eyebrow::before,.eyebrow::after{content:none}
.sec-head .eyebrow{margin-left:auto;margin-right:auto}
.sec-head.left .eyebrow,.sec-head.row .eyebrow,.split .tx .eyebrow,.blk .eyebrow{
  margin-left:0;margin-right:0}
.sec-head h2{letter-spacing:-1.8px}

/* ── 버튼 - 알약 + 빛훑기 ── */
.btn{border-radius:999px;box-shadow:0 8px 22px -8px rgba(5,131,242,.5);
  position:relative;overflow:hidden}
.btn::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(110deg,transparent 32%,rgba(255,255,255,.28) 50%,transparent 68%);
  transform:translateX(-130%)}
.btn:hover::before{transform:translateX(130%);transition:transform .6s var(--ease)}
.btn.line,.btn.ghost{box-shadow:none}
.more{border-radius:999px}

/* ── 카드 - 커서 스포트라이트 + 리프트 ── */
.card{border-radius:18px;box-shadow:var(--sh-1)}
/* ⚠ 카드 모서리를 18px로 키웠는데 사진 모서리(.ph:first-child)는 여전히
   calc(var(--r) - 1px)(11px)로 잘려, 둥근 정도가 서로 안 맞아 모서리에
   카드 배경이 쐐기 모양으로 비쳐 보였다(2026-09-18) - 사진 쪽도 같이 맞춘다. */
.card>.ph:first-child{border-radius:17px 17px 0 0}
.card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2;
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,40%),rgba(5,131,242,.12),transparent 58%);
  opacity:0;transition:opacity .3s}
.card{position:relative}
.card:hover::before{opacity:1}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.card .kicker{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 통계 - 그라데이션 숫자 ── */
.stat-row>div,.stat-row>a{border-radius:16px;position:relative;overflow:hidden}
.stat-row>a::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(240px circle at var(--mx,50%) var(--my,50%),rgba(5,131,242,.1),transparent 60%);
  opacity:0;transition:opacity .3s}
.stat-row>a:hover::before{opacity:1}
.stat-row>a:hover{transform:translateY(-4px)}
.stat-row .n{background:linear-gradient(135deg,var(--navy) 20%,var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent}

/* ── 문의 상자 - 아이콘 + 화살표 ── */
.ctas{gap:18px}
/* ⚠⚠ hover 때 위로 떠오르는 카드는 '아래 가장자리' 에서 흔들린다(2026-09-10 윤지원 의견 #181).
   커서가 아래 5px 안에 있으면 → 카드가 떠오름 → 커서가 카드 밖으로 빠짐 → 다시 내려앉음 →
   커서가 안으로 들어옴 … 이 왕복이 초당 수십 번 일어나 '흔들린다' 로 보인다.
   해법 = 떠오른 만큼을 투명한 영역으로 덮어 hover 를 유지한다(아래 .ctabox::after).
   ⚠ 그 영역을 '항상' 늘려 두면 흔들리는 띠가 밖으로 옮겨갈 뿐이다 - hover 일 때만 늘린다.
   ⚠ overflow:hidden 이면 그 영역이 잘려 효과가 없다 - 대신 ::before 에 모서리를 물려준다. */
.ctabox{border-radius:18px;position:relative;overflow:visible}
.ctabox::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0}
.ctabox:hover::after{bottom:-7px;height:7px}
.ctabox::before{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;
  background:radial-gradient(300px circle at var(--mx,50%) var(--my,40%),rgba(5,131,242,.09),transparent 58%);
  opacity:0;transition:opacity .3s}
.ctabox:hover::before{opacity:1}
.ctabox:hover{transform:translateY(-5px);border-color:var(--sky);box-shadow:var(--sh-2)}
.ctabox .ic{width:46px;height:46px;border-radius:13px;color:var(--blue-d);
  background:linear-gradient(135deg,#EAF3FE,#DDEEFE);border:1px solid #D8E9FD;
  display:grid;place-items:center;margin-bottom:15px;transition:.25s var(--ease)}
.ctabox:hover .ic{background:var(--blue);border-color:var(--blue);color:#fff;transform:scale(1.06)}
.ctabox .ic .ico{width:22px;height:22px}
/* 아이콘 + 제목을 한 줄에 - 설명과 버튼은 아래로 폭 전체를 쓴다 */
.ctabox.hasico{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto 1fr auto;
  column-gap:13px;row-gap:11px;align-items:center}
.ctabox.hasico .ic{margin-bottom:0}
.ctabox.hasico span{grid-column:1/-1;align-self:start}
.ctabox.hasico em{grid-column:1/-1;justify-self:start;align-self:end}

/* PNG 3D 아이콘은 자체 색·그림자를 가지므로 연파랑 타일을 걷고 크게 쓴다.
   호버해도 배경을 두지 않고 살짝 확대만 한다 */
.ctabox .ic.imgico,.ctabox:hover .ic.imgico,.ctabox .ic.imgico:hover{
  width:46px;height:46px;
  background:none;background-image:none;border:0;border-radius:0;box-shadow:none;color:var(--blue-d)}
.ctabox .ic.imgico .ico{width:46px;height:46px}
.ctabox:hover .ic.imgico{transform:scale(1.12)}
.ctabox em{display:inline-flex;align-items:center;gap:7px;transition:gap .22s var(--ease)}
.ctabox:hover em{gap:12px}

/* ── 로고 마퀴 ── */
.mq img{transition:.35s var(--ease)}

/* ── 중분류 탭 - 유리 + 미끄러지는 밑줄 ── */
.ltabs{background:rgba(255,255,255,.86);backdrop-filter:blur(12px)}
.ltabs .wrap{position:relative}
.ltabs a.on{border-bottom-color:transparent}
.ltab-ind{position:absolute;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--grad);
  transition:left .32s var(--ease),width .32s var(--ease);pointer-events:none}

/* ── 퀵메뉴 - 아이콘 + 라벨 ── */
.quick{border-radius:14px 0 0 14px;overflow:hidden;box-shadow:var(--sh-2)}
.quick a{width:66px;height:66px;display:flex;flex-direction:column;gap:5px;
  align-items:center;justify-content:center;font-size:11.5px;font-weight:700}
.quick a .ico{width:34px;height:34px;background:#fff;border-radius:50%;padding:5px;box-sizing:border-box}
.quick a+a{border-top:1px solid rgba(255,255,255,.2)}
.quick a.on{background:var(--blue-d)}
/* 퀵메뉴 흰 카드(2026-10-01 대표님 시안) - 오른쪽 끝에서 띄운 둥근 흰 카드 · 파란 선 아이콘 · 파란 글 · 안쪽 구분선.
   ⚠ 아이콘은 원래 그림(assets/icons phone · chat · cart)을 그대로 쓴다 - 선 아이콘으로 바꿨다가 대표님 지적으로 되돌렸다 */
.quick{right:14px;border-radius:16px;background:#fff;border:1px solid #E3E9F0;
  box-shadow:0 12px 32px rgba(14,42,79,.14),0 1px 3px rgba(14,42,79,.08)}
.quick a{position:relative;width:64px;height:70px;gap:5px;background:#fff;color:var(--blue);border:0;font-size:12.5px;font-weight:700}
.quick a+a{border-top:0}
.quick a+a::before{content:"";position:absolute;left:12px;right:12px;top:0;height:1px;background:var(--line)}
.quick a .ico{width:30px;height:30px;background:none;border-radius:0;padding:0;object-fit:contain}
.quick a:hover{background:#F2F7FE}
.quick a.on{background:#EAF3FE}
/* '전화' 단추 번호 말풍선 (2026-10-01 대표님 - 누르면 번호 먼저) - 위치는 site.js 가 단추 옆에 맞춘다 */
.qtel-pop{position:fixed;z-index:95;transform:translateY(-50%);background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-3);padding:13px 22px 14px;white-space:nowrap}
.qtel-pop[hidden]{display:none}
.qtel-pop span{display:block;font-size:13px;font-weight:700;color:var(--slate)}
.qtel-pop a{display:block;margin-top:2px;font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.01em;
  text-decoration:none;font-variant-numeric:tabular-nums}
.qtel-pop a:hover{color:var(--blue)}
.qtel-pop::after{content:"";position:absolute;right:-7px;top:50%;width:12px;height:12px;margin-top:-6px;background:#fff;
  border-right:1px solid var(--line);border-top:1px solid var(--line);transform:rotate(45deg)}
@media print{.qtel-pop{display:none!important}}

/* ── 아이콘 공통 ── */
.ico{display:inline-block;vertical-align:middle;object-fit:contain}

/* ── 푸터 - 상단 광선 ── */
footer{position:relative}
footer::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;
  background:linear-gradient(90deg,transparent 5%,rgba(100,181,252,.55),transparent 95%)}

/* ── 시안 A 목록 활성색 보강 ── */
.wa-list .mini.sub.on{background:linear-gradient(140deg,var(--navy),#12406F)}

/* 축소 모션 존중 */
@media (prefers-reduced-motion:reduce){
  #pgbar{display:none}
  .hero::before{animation:none}
  .cue::after,.hero-badge i{animation:none}
}


/* ── FABLE 2차 - 내부 페이지 ── */
/* 페이지 배너: 더 크고 조밀한 제목, 칩형 빵부스러기 */
.phead h1{font-size:clamp(31px,4.4vw,50px);letter-spacing:-2px}
.phead .crumb{display:inline-flex;gap:6px;align-items:center;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.16);backdrop-filter:blur(6px);
  border-radius:999px;padding:6px 14px}
.phead .crumb a:hover{color:#fff}

/* 2026-09-28 대표님 - 배너의 경로 표시(홈 › 자료실 등)는 빼고 그만큼 제목을 키운다(약 20%).
   ⚠ HTML 에서 지우지 않고 여기서 숨긴다 - 22개 페이지에 흩어져 있어 한 곳에서 켜고 끄려고.
   ⚠ 특허 안내(patent-guide.html, .guide-head)는 내부 보고서라 제외한다. */
.phead:not(.guide-head) .crumb,.shead .crumb{display:none}
.phead h1{font-size:clamp(37px,5.3vw,60px)}
.shead h1{font-size:clamp(44px,5.5vw,67px)}
html[lang="en"] .shead h1{font-size:clamp(37px,4.5vw,54px)}

/* 좌우 분할 이미지 - 액자형 (가장자리에서 살짝 띄우고 둥글게) */
.split .im{margin:clamp(14px,2.2vw,30px);border-radius:22px;overflow:hidden;
  box-shadow:var(--sh-2)}
.split.rev .im{margin:clamp(14px,2.2vw,30px)}
@media(max-width:860px){.split .im,.split.rev .im{margin:14px 14px 0}}

/* 폼 - 포커스 링 */
input:focus,textarea:focus,select:focus{border-color:var(--blue)!important;
  box-shadow:var(--ring);outline:none}

/* 더보기 링크 - 호버 시 벌어짐 */
.more{transition:gap .22s var(--ease),border-color .2s,color .2s,background .2s}
.more:hover{gap:14px;border-color:var(--blue);color:var(--blue-d)}

/* 실적 행 - 호버 배경 */
.wk{transition:background .18s,transform .18s}
.wk:hover{background:#FAFCFF}

/* 통계 그라데이션 숫자를 남색 배너 위에서는 흰색으로 (혹시 재사용될 때 대비) */
.phead .stat-row .n{background:none;color:#fff}

/* ── FABLE 3차 - 코덱스 생성 그래픽 배선 ── */
/* 성과 뱃지 줄 - 각각 관련 페이지로 이동하는 링크 */
.badges{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0 6px}
.badges>a{text-decoration:none;min-width:0}
.badges figure{margin:0;display:flex;align-items:center;gap:16px;
  padding:18px 22px;border-radius:16px;background:#fff;border:1px solid #E4EDF8;
  transition:.3s var(--ease)}
.badges .bico{flex:0 0 auto;width:56px;height:56px;border-radius:15px;
  display:grid;place-items:center;color:var(--blue-d);
  background:linear-gradient(135deg,#EAF3FE,#DDEEFE);border:1px solid #D8E9FD;
  transition:.3s var(--ease)}
.badges .bico .ico{width:30px;height:30px}
/* PNG 3D 아이콘은 타일 없이 크게 - 타일 안에 작게 넣으면 스티커처럼 보인다 */
.badges .bico.imgico,.badges>a:hover .bico.imgico{width:64px;height:64px;
  background:none;background-image:none;border:0;border-radius:0;box-shadow:none}
.badges .bico.imgico .ico{width:64px;height:64px}
.badges>a:hover figure{transform:translateY(-4px);border-color:var(--sky);box-shadow:var(--sh-2)}
.badges>a:hover .bico:not(.imgico){background:var(--blue);border-color:var(--blue);color:#fff}
.badges>a:hover .bico.imgico{transform:scale(1.08)}
.badges figcaption{font-size:15.6px;color:var(--navy);font-weight:800;line-height:1.35;text-align:left}
.badges>a:hover figcaption{color:var(--blue-d)}
@media (max-width:700px){.badges{grid-template-columns:1fr}}

/* 히어로 - 등고선 일러스트 오버레이 */
.hero .mesh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  z-index:1;mix-blend-mode:screen;opacity:.45;pointer-events:none}

/* 푸터 - 밤바다 사진을 깔기(2026-09-16 대표님)
   ⚠⚠ 이 규칙이 **정본**이다. 위쪽 `footer{...}`(1191행 근처)에 background 를 또 쓰면
      여기서 덮어써져 아무 일도 일어나지 않는다 - 바닥 배경은 반드시 여기서 고칠 것.
   ⚠ 막을 .88~.95 로 두던 것은 앞 그림(sec-ocean)이 밝아서였다. 지금 사진은 원본 자체가
      아주 어두워(밝기 평균 21 · 바닥 단색 21.2 와 비슷) 그 막을 그대로 쓰면 통째로 안 보인다.
      실측으로 물결이 드러나면서도 글씨가 지켜지는 값이 아래다. */
footer{background:linear-gradient(rgba(8,23,43,.50),rgba(8,23,43,.18) 52%,rgba(8,23,43,.54)),
  url("../img/footer-bg.webp") center bottom/cover no-repeat,#08172B}

/* 푸터 왼쪽 아래 - 사옥(가산어반워크)을 아주 옅게 깐다(2026-09-15 대표님).
   ⚠ 왼쪽 여백을 메우는 것이 목적이다 - 오른쪽·위쪽은 부드럽게 사라지게 둔다.
   ⚠ 글씨를 가리면 안 된다 - 본문(.wrap)을 위로 올리고 투명도를 낮게 유지할 것. */
footer::after{content:"";position:absolute;left:0;bottom:0;z-index:0;pointer-events:none;
  width:min(430px,34%);height:min(300px,62%);
  background:url("../img/office-urbanwork-footer.webp") left bottom/contain no-repeat;
  opacity:.14;
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 92%),
    linear-gradient(0deg,#000 0%,#000 52%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,#000 0%,#000 36%,transparent 92%),
    linear-gradient(0deg,#000 0%,#000 52%,transparent 100%);
  mask-composite:intersect}
footer>.wrap{position:relative;z-index:1}
@media (max-width:900px){
  /* 폰은 왼쪽 여백이 없어 글자 밑에 깔리는 꼴이 된다 - 더 옷게 */
  footer::after{width:62%;height:30%;opacity:.11}
}

/* 관련분야 담당자 카드 (2026-09-07) */
.pcards{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:14px;margin-top:20px}
.pcard{border:1px solid var(--line);border-radius:var(--r);background:#fff;padding:16px 18px;
  box-shadow:var(--sh-1)}
.pcard.empty{background:#F7FAFD;border-style:dashed;box-shadow:none}
.pcard .pc-dept{font-size:11.6px;font-weight:800;color:var(--blue-d);letter-spacing:.3px;
  margin-bottom:4px}
.pcard b{display:block;font-size:16px;color:var(--ink);letter-spacing:-.3px}
.pcard .pc-role{font-size:12.4px;font-weight:600;color:var(--slate);margin-left:4px}
.pcard .pc-line{margin-top:7px;font-size:13.2px;color:var(--char);word-break:break-all}
.pcard .pc-line a{color:var(--char);text-decoration:none}
.pcard .pc-line a:hover{color:var(--blue-d);text-decoration:underline}
.pcard .more{margin-top:12px;display:inline-block}

/* 비전 머리말 - 한 줄로 읽히게 (2026-09-07)
   ⚠ 공용 .sec-head 는 max-width:840px 인데 이 제목은 41px 로 862px 이 필요해 22px 차이로
     두 줄이 됐다. 이 섹션만 폭을 넓힌다(글자 크기는 다른 섹션과 같게 유지).
     좁은 화면에서는 폰트가 3.5vw 로 줄며 자연스럽게 접히고, 그때는 균형 있게 나뉜다. */
#vision .sec-head{max-width:960px}
#vision .sec-head h2{text-wrap:balance}
/* 회사소개 비전 (2026-10-01 대표님 3차 시안 '해양 기술의 글로벌 비전') - OUR VISION · 두 줄 제목(끝 낱말 청록) ·
   사진 3장 · 01~03 세 칸(사진 왼쪽 끝에 세로 구분선). 사진과 글을 한 묶음(.vz-it)으로 두어 폰에서 묶음째 쌓인다 */
#vision .vz-kick{font-size:clamp(13px,1vw,15px);font-weight:700;letter-spacing:.32em;color:var(--teal);margin:0 0 clamp(12px,1.2vw,18px)}
#vision .vz-h{font-size:clamp(28px,3.6vw,54px);font-weight:800;line-height:1.24;letter-spacing:-.03em;
  color:var(--ink);margin:0 0 clamp(26px,3vw,44px);word-break:keep-all}
#vision .vz-h em{font-style:normal;color:var(--teal)}
#vision .vz-items{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 10px}
#vision .vz-it{min-width:0}
#vision .vz-pic{border-radius:10px;overflow:hidden;background:var(--line-2)}
#vision .vz-pic img{display:block;width:100%;aspect-ratio:3/2;object-fit:cover}
#vision .vz-tx{margin-top:clamp(22px,2.4vw,34px);padding:4px clamp(14px,2.8vw,48px)}
#vision .vz-it+.vz-it .vz-tx{border-left:1px solid var(--line)}
#vision .vz-tx b{display:block;font-size:clamp(17px,1.4vw,21px);font-weight:800;color:var(--teal);line-height:1.1;margin-bottom:10px}
#vision .vz-tx h3{font-size:clamp(23px,2.2vw,32px);font-weight:800;color:var(--ink);margin:0 0 8px;letter-spacing:-.02em}
#vision .vz-tx p{font-size:clamp(15px,1.2vw,18px);color:var(--slate);margin:0;word-break:keep-all}
@media (max-width:820px){
  #vision .vz-items{grid-template-columns:1fr;gap:30px}
  #vision .vz-it{max-width:560px}  /* 사진 원본이 약 536px 이라 태블릿에서 크게 늘리지 않는다 */
  #vision .vz-pic img{aspect-ratio:16/10}
  #vision .vz-tx{margin-top:16px;padding:0 2px}
  #vision .vz-it+.vz-it .vz-tx{border-left:0}
}

/* 회사소개 연혁 (2026-10-01 대표님 시안) - 숫자 띠 · 왼쪽 연도 바로가기 · 연도 블록.
   ⚠ 옛 .tline · .stat-row-3 규칙은 en/company.html · en/service.html 이 아직 쓴다 - 지우지 말 것 */
#history .hy-stats{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);padding:clamp(18px,2vw,26px) 0;margin-bottom:clamp(40px,4.6vw,64px)}
#history .hy-stats>*{text-align:center;padding:4px 10px;text-decoration:none;color:inherit;min-width:0}
#history .hy-stats>*+*{border-left:1px solid var(--line)}
#history .hy-stats b{display:block;font-size:clamp(26px,2.6vw,38px);font-weight:800;color:var(--navy);letter-spacing:-.02em;
  line-height:1.15;font-variant-numeric:tabular-nums;transition:color .2s}
#history .hy-stats .t b{color:var(--teal)}
#history .hy-stats span{display:block;margin-top:6px;font-size:14px;color:var(--slate)}
#history .hy-stats a:hover b{color:var(--blue)}
#history .hy{display:grid;grid-template-columns:84px minmax(0,1fr);gap:clamp(16px,2.4vw,40px);align-items:start}
#history .hy-nav{position:sticky;top:150px;display:flex;flex-direction:column;border-left:1px solid var(--line)}
#history .hy-nav a{display:block;padding:7px 0 7px 14px;margin-left:-1px;border-left:2px solid transparent;font-size:14px;
  font-weight:600;color:var(--stone);text-decoration:none;font-variant-numeric:tabular-nums;transition:color .2s,border-color .2s}
#history .hy-nav a:hover{color:var(--slate)}
#history .hy-nav a.on{color:var(--teal);border-left-color:var(--teal);font-weight:800}
#history .hy-list{min-width:0}
#history .hy-yr{position:relative;display:grid;grid-template-columns:clamp(150px,17vw,250px) minmax(0,1fr);align-items:start;
  padding:clamp(26px,2.8vw,40px) clamp(18px,2.4vw,40px);border-radius:12px;scroll-margin-top:150px;transition:background-color .35s}
/* 블록 사이 가는 선 - border-top 은 둥근 모서리를 따라 끝이 휘어 pseudo 로 긋는다. 칠한 블록 앞뒤는 숨긴다 */
#history .hy-yr+.hy-yr::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:var(--line)}
#history .hy-yr.on::before,#history .hy-yr.on+.hy-yr::before{display:none}
#history .hy-yr.on{background:#EEF7F5}
#history .hy-y{font-size:clamp(40px,4.6vw,66px);font-weight:800;color:var(--navy);letter-spacing:-.03em;line-height:1;
  font-variant-numeric:tabular-nums}
#history .hy-y small{display:block;font-size:14px;font-weight:700;letter-spacing:0;color:var(--stone);margin-bottom:8px}
#history .hy-yr.past .hy-y{font-size:clamp(24px,2.3vw,34px);color:var(--slate)}
#history .hy-items{--pl:clamp(22px,2.4vw,34px);list-style:none;margin:0;padding:0 0 0 var(--pl);border-left:1.5px solid #D3E4E9}
#history .hy-items li{position:relative;display:flex;align-items:baseline;gap:clamp(14px,1.8vw,26px);padding:8px 0;
  font-size:clamp(15px,1.15vw,17px);line-height:1.6;color:var(--ink)}
#history .hy-items li::before{content:"";position:absolute;left:calc(-1 * var(--pl) - 5px);top:calc(8px + .8em);
  width:8.5px;height:8.5px;border-radius:50%;background:var(--teal);transform:translateY(-50%)}
#history .hy-items b{flex:0 0 auto;min-width:1.4em;font-weight:800;color:var(--teal);font-variant-numeric:tabular-nums}
#history .hy-items span{min-width:0;font-weight:600;word-break:keep-all}
#history .hy-items em{display:inline-block;margin-left:8px;padding:2px 10px;border-radius:999px;background:#E2F2EF;color:#0B7A70;
  font-style:normal;font-size:12.5px;font-weight:700;line-height:1.6;vertical-align:1px}
/* ⚠ .note 는 시안 전역의 노란 안내 상자 클래스다 - 여기는 .hy-note (2026-10-01 실제로 겹쳤다) */
#history .hy-items li.hy-note span{font-weight:400;color:var(--slate)}
#history .hy-items li.hy-note strong{display:block;font-weight:700;color:var(--ink);margin-bottom:2px}
#history .hy-yr.past .hy-items li::before{background:var(--stone)}
@media (max-width:820px){
  #history .hy{grid-template-columns:1fr}
  #history .hy-nav{display:none}
  #history .hy-yr{grid-template-columns:1fr;gap:14px;padding:22px 14px}
  #history .hy-y{font-size:40px}
  #history .hy-stats span{font-size:12.5px}
}

/* 회사소개 조직도 (2026-10-01 대표님 시안 '프리미엄 환경연구 조직도') - .og-*
   ⚠ 옛 .orgchart / .oc-* 는 en/company.html 이 아직 쓴다 - 지우지 말 것.
   ⚠ 연결선은 모두 pseudo 요소다: 직속 조직 ↔ 대표이사(가로) · 대표이사 → 두 본부(세로 + 가로 + 세로)
   ⚠⚠ 100% 화면에서 한눈에(2026-10-01 대표님 "너무 큰 거 같다") - 1920x1080 에서 '조직도' 탭을 누르면 카드 끝까지 한 화면.
      제목은 시안처럼 대표이사 줄 왼쪽 위에 겹쳐 올리고(.og-head absolute), 직속 조직 상자는 원 아래쪽에 붙인다. */
#org{--og-biz:#12A08E;--og-res:#2272D9;--og-ln:#A9B6C6;--og-gap:clamp(36px,5.5vw,90px);--og-bh:clamp(36px,3.4vw,54px);
  padding:clamp(44px,4vw,64px) 0}
#org .og{position:relative}
#org .og-head{position:absolute;left:0;top:0;z-index:1}
#org .og-kick{font-size:clamp(12px,.9vw,14px);font-weight:700;letter-spacing:.32em;color:var(--teal);margin:0 0 6px}
#org .og-h{font-size:clamp(30px,2.8vw,44px);font-weight:800;letter-spacing:-.03em;color:var(--ink);margin:0;line-height:1.1}
/* 도식(대표이사 줄 · 가지 · 본부 카드)만 1000px 로 묶어 가운데 - 카드가 필요 이상으로 넓었다(2026-10-01 대표님). 제목은 wrap 왼쪽 그대로 */
#org .og-top,#org .og-branch,#org .og-divs{max-width:1000px;margin-left:auto;margin-right:auto}
/* 살짝 아래로(대표님) - 화면 높이가 넉넉할 때만 최대 40px, 낮은 노트북에서는 0 이라 한 화면이 유지된다 */
#org .og-top{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);column-gap:var(--og-gap);
  padding-top:clamp(0px,calc((100vh - 780px) * .45),40px)}
#org .og-staff{position:relative;align-self:end;margin-bottom:clamp(14px,1.4vw,24px);display:flex;align-items:center;justify-content:center;
  gap:clamp(10px,1.1vw,16px);width:min(100%,290px);min-height:clamp(62px,4.6vw,76px);padding:10px 20px;background:#fff;
  border:1px solid #D9E2EC;border-radius:6px}
#org .og-staff.l{justify-self:end;box-shadow:inset 5px 0 0 #1AA6C8}
#org .og-staff.r{justify-self:start;box-shadow:inset -5px 0 0 var(--og-biz)}
#org .og-staff img{width:clamp(28px,2.4vw,38px);height:auto;flex:0 0 auto}
#org .og-staff b{font-size:clamp(16px,1.35vw,21px);font-weight:800;color:var(--ink);letter-spacing:-.02em;white-space:nowrap}
/* 직속 조직 ↔ 대표이사 가로선(원 가장자리 곡선까지 닿게 16px 더 긋고 원이 덮는다) + 상자 끝 점 */
#org .og-staff::after{content:"";position:absolute;top:50%;width:calc(var(--og-gap) + 16px);height:1.5px;background:var(--og-ln)}
#org .og-staff.l::after{left:100%}
#org .og-staff.r::after{right:100%}
#org .og-staff::before{content:"";position:absolute;top:50%;width:8px;height:8px;margin-top:-4px;border-radius:50%;background:var(--og-ln);z-index:1}
#org .og-staff.l::before{right:-4.5px}
#org .og-staff.r::before{left:-4.5px}
#org .og-ceo{position:relative;z-index:1;padding:7px;border:2px solid var(--teal);border-radius:50%;background:var(--bg-2)}
#org .og-ceo-in{width:clamp(140px,10.5vw,186px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 50% 35%,#1C3A66 0%,#13294D 70%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff}
#org .og-ceo-in b{font-size:clamp(21px,1.8vw,30px);font-weight:800;letter-spacing:-.02em}
#org .og-ceo-in i{font-style:normal;font-size:clamp(11px,.85vw,13px);letter-spacing:.42em;color:#AFC3DD;margin-top:9px;padding-top:9px;position:relative}
#org .og-ceo-in i::before{content:"";position:absolute;top:0;left:50%;width:26px;height:1.5px;margin-left:-13px;background:#2FB3A3}
#org .og-ceo::after{content:"";position:absolute;left:50%;bottom:-5.5px;width:8px;height:8px;margin-left:-4px;border-radius:50%;background:var(--og-ln)}
/* 대표이사 → 두 본부 */
#org .og-branch{position:relative;height:var(--og-bh);--g:clamp(24px,3vw,44px)}
#org .og-branch::before{content:"";position:absolute;left:50%;top:0;height:50%;width:1.5px;margin-left:-.75px;background:var(--og-ln)}
#org .og-branch::after{content:"";position:absolute;top:50%;height:1.5px;background:var(--og-ln);
  left:calc((100% - var(--g)) / 4);right:calc((100% - var(--g)) / 4)}
#org .og-divs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(24px,3vw,44px)}
#org .og-div{position:relative;background:#fff;border-radius:16px;border-top:5px solid var(--og-biz);
  box-shadow:0 20px 40px -24px rgba(14,42,79,.28),0 2px 8px rgba(14,42,79,.05)}
#org .og-div.res{border-top-color:var(--og-res)}
#org .og-div::before{content:"";position:absolute;left:50%;top:calc(var(--og-bh) / -2 - 5px);height:calc(var(--og-bh) / 2);
  width:1.5px;margin-left:-.75px;background:var(--og-ln)}
#org .og-div::after{content:"";position:absolute;left:50%;top:-5px;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;
  background:var(--og-biz);box-shadow:0 0 0 3px #fff}
#org .og-div.res::after{background:var(--og-res)}
#org .og-dh{display:flex;justify-content:space-between;align-items:center;gap:14px;margin:0 clamp(20px,2.4vw,36px);
  padding:clamp(16px,1.6vw,24px) 0 clamp(12px,1.2vw,16px);border-bottom:1px solid var(--line)}
#org .og-dh h3{font-size:clamp(23px,1.9vw,31px);font-weight:800;color:var(--ink);letter-spacing:-.03em;margin:0;line-height:1.15}
#org .og-en{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:6px 0 0;font-size:clamp(11.5px,.85vw,13px);
  font-weight:600;letter-spacing:.3em;color:var(--og-biz)}
#org .og-div.res .og-en{color:var(--og-res)}
#org .og-badge{display:inline-block;letter-spacing:0;padding:3px 12px;border-radius:999px;background:#E3EEFC;color:#1A5FB8;
  font-size:clamp(12px,.9vw,13.5px);font-weight:700}
#org .og-dic{position:relative;flex:0 0 auto;width:clamp(50px,4vw,66px)}
#org .og-dic::before{content:"";position:absolute;right:-8%;top:-4%;width:62%;aspect-ratio:1;border-radius:50%;background:#E6F4F1}
#org .og-div.res .og-dic::before{background:#E5EFFB}
#org .og-dic img{position:relative;display:block;width:100%;height:auto}
#org .og-teams{position:relative;list-style:none;margin:0;padding:4px clamp(20px,2.4vw,36px) clamp(10px,1vw,16px)}
#org .og-teams::before{content:"";position:absolute;left:calc(clamp(20px,2.4vw,36px) + 5px);top:0;bottom:clamp(18px,1.8vw,28px);width:1.5px;background:#D9E2EC}
#org .og-teams li{position:relative;padding:clamp(9px,.85vw,13px) 0 clamp(9px,.85vw,13px) clamp(40px,3.4vw,56px);
  font-size:clamp(16px,1.25vw,19px);font-weight:700;color:var(--ink);letter-spacing:-.02em}
#org .og-teams li::before{content:"";position:absolute;left:1px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;background:var(--og-biz)}
#org .og-div.res .og-teams li::before{background:var(--og-res)}
#org .og-teams li+li::after{content:"";position:absolute;left:clamp(40px,3.4vw,56px);right:0;top:0;height:1px;background:var(--line)}
@media (max-width:900px){
  #org .og-head{position:static;margin-bottom:22px}
  #org .og-top{padding-top:0}
  #org .og-top{grid-template-columns:1fr 1fr;row-gap:18px;column-gap:12px}
  #org .og-ceo{grid-column:1 / -1;grid-row:1;justify-self:center}
  #org .og-staff{width:100%;justify-self:stretch;align-self:stretch;margin-bottom:0}
  #org .og-staff::before,#org .og-staff::after,#org .og-ceo::after,#org .og-branch,#org .og-div::before{display:none}
  #org .og-divs{grid-template-columns:1fr;gap:24px;margin-top:28px}
}
@media (max-width:480px){
  #org .og-staff{flex-direction:column;gap:6px;padding:12px 8px}
  #org .og-staff b{font-size:16px}
}

/* 오시는 길 (2026-10-01 대표님) - 구글 지도(키 없는 임베드, 주소 '서울 금천구 가산디지털2로 135' 로 핀) ·
   제목과 지도 간격 줄임 · 1920x1080 100% 에서 '오시는 길' 탭을 누르면 아래 카드 3장까지 한 화면.
   ⚠ 구글 지도는 아래 출처 · 약관 줄이 이용 조건이라 칸 밖으로 밀어내지 않는다(.mapbox.g iframe 은 100%) */
#map{padding:clamp(40px,3.6vw,60px) 0}
#map .sec-head{margin-bottom:clamp(14px,1.4vw,20px)}
#map .mapbox.g{height:clamp(220px,calc(100vh - 560px),400px)}
#map .mapbox.g iframe{height:100%}
#map .maplinks{margin-top:10px}
#map .grid.g3{margin-top:16px!important}
#map .mini{padding:16px 20px}

/* 오시는 길 지도 (2026-09-07)
   ⚠ 지금은 키가 필요 없는 구글 지도 임베드다. 도메인이 확정되면 카카오맵 JS SDK
     (앱키 + 도메인 등록)로 바꾸면 국내 지도가 더 자세히 나온다 - iframe 만 갈아끼우면 된다. */
.mapbox{position:relative;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:#eef2f6;height:clamp(280px,38vw,420px)}
/* ⚠ 지도 아래 오픈스트리트맵 출처 줄(문제점 보고 · 기여자 · 기부하기…)은 남의 화면(iframe) 안이라
   CSS 로 못 지운다 - 지도를 칸보다 44px 길게 띄워 그 줄을 칸 밖으로 밀어내 잘라낸다(2026-09-28 대표님).
   ⚠ 오픈스트리트맵은 출처 표시가 사용 조건이라, 지도 밖(.map-credit)에 작게 대신 적어 둔다 - 지우지 말 것.
   좁은 칸에선 출처 줄이 두 줄이 돼 44px 로 잡았다. 표식은 22px 아래로 내려가 보인다. */
.mapbox iframe,.tb-map iframe{width:100%;height:calc(100% + 44px);border:0;display:block}
.map-credit{font-size:11.5px;color:#98A2B0;text-decoration:none}
.map-credit:hover{color:var(--slate)}
.maplinks{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:14px}
.maplinks .mapaddr{font-size:13.4px;color:var(--slate);margin-left:auto}
@media(max-width:768px){.maplinks .mapaddr{margin-left:0;width:100%}}

/* 회색(alt) 섹션 안의 작은 박스 - 배경이 같아 안 보이던 문제 (2026-09-07)
   ⚠ .mini 의 배경(--bg-2)이 section.alt 의 배경과 **같은 색**이라, 옅은 테두리만 남아
     박스가 사라져 보였다(오시는 길 · 지하철/주차/방문 상담). 회색 위에서는 흰 카드로 띄운다.
   ⚠ .mini.sub(사업분야 상세의 고르는 목록)는 hover 에서 흰색이 되는 게 신호라 제외한다. */
section.alt .mini:not(.sub){background:#fff;border-color:#DCE4EE;box-shadow:0 1px 2px rgba(14,42,79,.05),0 2px 10px rgba(14,42,79,.05)}

/* ── 조직도 (2026-09-07) ─────────────────────────────────
   대표이사(원) → 직속 조직(전략기획팀 · 미래전략실) → 두 본부 → 팀.
   연결선은 전부 가상요소로 그린다(이미지 없음).
   ⚠⚠ 선이 만나는 지점은 **하나의 변수에서 파생**시킨다 - 세로선 길이와 가로선 위치를
     각각 px 로 적으면 값이 어긋나 선이 끊겨 보인다(2026-09-07 실제로 5군데가 어긋났다).
   ⚠ 가로 연결선의 양 끝은 '첫 칸 가운데 ~ 마지막 칸 가운데' 다. 칸 수를 CSS 가 알 수 없어
     .oc-teams 에 --n(팀 수)을 준다 - 팀을 늘리면 --n 도 함께 고칠 것. */
.orgchart{--oc-line:#C7D3E2;--oc-gap:clamp(20px,3vw,44px);--oc-r:clamp(124px,12.5vw,166px);
  --oc-branch:48px;   /* 대표 줄기 → 본부 : 가로 브릿지는 이 값의 절반 지점 */
  --oc-stem:32px;     /* 본부 → 팀 브릿지 */
  --oc-drop:22px;     /* 팀 브릿지 → 팀 카드 */
  --oc-tg:12px;       /* 팀 카드 사이 간격 */
  margin-top:6px}
.oc-top{position:relative;padding-bottom:clamp(30px,3.4vw,46px)}
.oc-ceo{position:relative;z-index:2;width:var(--oc-r);height:var(--oc-r);margin:0 auto;
  border-radius:50%;display:grid;place-items:center;color:#fff;font-weight:800;
  font-size:clamp(16px,1.5vw,21px);letter-spacing:-.4px;
  background:radial-gradient(125% 125% at 32% 18%,#2360A0 0%,#1B4E86 34%,var(--navy) 62%,var(--deep) 100%);
  box-shadow:0 18px 40px rgba(14,42,79,.26)}
/* 대표 아래 줄기 - 직속 조직을 지나 본부 가로 브릿지까지 내려간다
   ⚠ 브릿지는 .oc-divs 안쪽(패딩의 절반 지점)이라 bottom 을 음수로 줘야 닿는다 */
.oc-top::after{content:"";position:absolute;left:50%;top:var(--oc-r);
  bottom:calc(var(--oc-branch) / -2);width:1px;margin-left:-.5px;background:var(--oc-line)}
/* 직속 조직 - 줄기 오른쪽으로 뻗는다 */
.oc-staff{margin:clamp(18px,2vw,26px) 0 0 50%;padding-left:96px;display:flex;
  flex-direction:column;gap:12px;max-width:340px}
.oc-staff-item{position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r);padding:13px 18px;text-align:center;font-weight:700;font-size:14.6px;
  color:var(--ink);box-shadow:var(--sh-1)}
.oc-staff-item::before{content:"";position:absolute;right:100%;top:50%;width:96px;height:1px;
  background:var(--oc-line)}
/* 본부 두 갈래 */
.oc-divs{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:var(--oc-gap);
  padding-top:var(--oc-branch)}
.oc-divs::before{content:"";position:absolute;top:calc(var(--oc-branch) / 2);
  left:calc((100% - var(--oc-gap)) / 4);right:calc((100% - var(--oc-gap)) / 4);height:1px;
  background:var(--oc-line)}
.oc-div{position:relative}
.oc-div::before{content:"";position:absolute;left:50%;top:calc(var(--oc-branch) / -2);
  height:calc(var(--oc-branch) / 2);width:1px;margin-left:-.5px;background:var(--oc-line)}
.oc-div-head{border-radius:10px;padding:clamp(15px,1.7vw,21px) 18px;text-align:center;color:#fff;
  box-shadow:var(--sh-2)}
.oc-div-head b{display:block;font-size:clamp(17px,1.7vw,22px);font-weight:800;letter-spacing:-.6px}
.oc-div-head i{display:block;font-style:normal;font-size:12px;font-weight:600;letter-spacing:.6px;
  opacity:.78;margin-top:3px}
.oc-div.biz .oc-div-head{background:linear-gradient(118deg,#12A08E 0%,#0B7A78 52%,#0C5468 100%)}
.oc-div.res .oc-div-head{background:linear-gradient(118deg,#2A7CC4 0%,#0466C0 52%,#123E76 100%)}
/* 팀 - 본부에서 갈라져 내려온다 */
.oc-teams{position:relative;display:grid;grid-template-columns:repeat(var(--n,2),1fr);
  gap:var(--oc-tg);padding-top:calc(var(--oc-stem) + var(--oc-drop))}
.oc-teams::before{content:"";position:absolute;left:50%;top:0;height:var(--oc-stem);width:1px;
  margin-left:-.5px;background:var(--oc-line)}
.oc-teams::after{content:"";position:absolute;top:var(--oc-stem);height:1px;background:var(--oc-line);
  left:calc((100% - (var(--n,2) - 1) * var(--oc-tg)) / var(--n,2) / 2);
  right:calc((100% - (var(--n,2) - 1) * var(--oc-tg)) / var(--n,2) / 2)}
.oc-div.biz .oc-teams{--n:3}
.oc-div.res .oc-teams{--n:2}
.oc-team{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);
  padding:15px 10px;text-align:center;font-weight:700;font-size:clamp(13px,1.15vw,15px);
  color:var(--ink);box-shadow:var(--sh-1)}
.oc-team::before{content:"";position:absolute;left:50%;top:calc(var(--oc-drop) * -1);
  height:var(--oc-drop);width:1px;margin-left:-.5px;background:var(--oc-line)}
/* 좁은 화면 - 선을 걷고 세로로 쌓는다 */
@media(max-width:860px){
  .oc-staff{margin-left:0;padding-left:0;max-width:none;flex-direction:row;flex-wrap:wrap;
    justify-content:center}
  .oc-staff-item{flex:1 1 200px}
  .oc-staff-item::before{display:none}
  .oc-top::after{bottom:auto;height:clamp(18px,2vw,26px)}
  .oc-divs{grid-template-columns:1fr;padding-top:26px}
  .oc-divs::before,.oc-div::before{display:none}
  .oc-div + .oc-div{margin-top:8px}
}
@media(max-width:520px){
  .oc-teams{grid-template-columns:1fr;padding-top:22px;gap:9px}
  .oc-teams::after{display:none}
  .oc-teams::before{height:12px}
  .oc-team::before{display:none}
}
  .oc-team::before{display:none}
}

/* ══ 사업분야 상세 - 분야별 배치 (2026-09-08) ═══════════════════════
   ⚠ 모든 분야를 한 형식에 맞추지 않는다 - 소분류 수와 성격이 분야마다 다르다. */

/* 소분류가 하나뿐인 분야 - 왼쪽 목록을 접고 본문이 전폭을 쓴다(잘려 보이던 원인) */
.wa.solo{grid-template-columns:1fr}
.wa.solo .wa-side{display:none}   /* ⚠ 목록만 숨기면 sticky 인 '수행하는 일'
   제목이 전체 폭을 쓰는 본문 위로 떠서 겹친다(2026-09-16 대표 지적) */
.wa.solo .wa-body{padding:30px 34px;grid-column:1 / -1}

/* 화학물질 컨설팅 - 읽을거리가 중심인 분야라 글을 키우고 숫자 요약을 걷어낸다 */
body[data-area="chemical"] .blk h2{font-size:clamp(27px,2.6vw,34px)}
body[data-area="chemical"] [data-d-problem]{font-size:clamp(17.5px,1.4vw,20.5px);
  line-height:1.9;color:var(--char);max-width:44em}
body[data-area="chemical"] .wa-h{font-size:24px}
body[data-area="chemical"] .wa-l{font-size:16.4px;line-height:1.75;margin-bottom:24px;max-width:52em}
/* ⚠ 리드는 제외 - 위 .wa-body .wp-lead 가 정본이다(안 빼면 이 분야만 리드가 작아진다) */
/* ⚠ 소분류가 하나뿐이라 본문이 통째로 넓어지던 때 글씨를 키우고 줄 길이를 묶었던 규칙은
   2026-09-17 에 걷어냈다 - 소분류가 둘이 되며 좌우 분할이 살아나자 max-width:40em 때문에
   본문 오른쪽이 텅 비었다(대표 지적). 다른 분야와 같은 본문 폭 · 글씨를 쓴다. */
/* ⚠ '제공서비스 4종 · 진행 방식 7단계' 처럼 숫자만 보여 주는 칸은 이 분야에서 감춘다 -
      무엇을 해 주는지는 바로 위 한 줄 소개와 아래 목록이 이미 말한다. */
body[data-area="chemical"] .wa-trip{display:none}
/* ⚠ 이 분야만 쓰던 '번호 카드' 는 2026-09-15 부터 **전 분야 공통**(위 .wa-steps)이 됐다.
   여기서 다시 덮으면 그 분야만 모양이 달라진다 - 전용 규칙을 되살리지 말 것. */

/* 화학물질 컨설팅은 시험생물을 팔지 않는다 - 그 분야에서만 '시험생물 · 제품 구매' 안내를 감춘다(신지현 의견 #253).
   ⚠ 다른 분야는 실제로 판매하므로 통째로 지우면 안 된다.
   ⚠ renderDetail 이 body 에 data-area 를 찍어 준다 - 그 값으로만 가른다. */
body[data-area="chemical"] .ctabox[data-ico="cart"]{display:none}


/* ══ 사업분야 상세 - 한 화면씩 보는 배치(A안) ══════════════════════
   2026-09-14 대표님 확정. 한 단계 = 한 화면, 아래로 넘기며 읽는다.
   ⚠⚠ 글·순서·항목은 예전(.blk) 그대로다 - 바뀌는 것은 배치뿐.
   ⚠⚠ 안쪽에 스크롤 상자를 만들지 않는다(문서 스크롤을 쓴다) - 홈페이지 시안
      검토 화면의 의견 배지가 window 스크롤을 보고 자리를 잡기 때문. */
html{scroll-behavior:smooth}
/* ⚠⚠ 2026-09-18 대표님 - 한 화면씩 넘기던 구조를 걷어내고 **쭉 내리며 읽는 문서**로 바꿨다.
   끈 것 = 스크롤 스냅 · 100vh 고정 · 등장 모션 · 단계 구분(번호 · 배경 숫자 · 다음 단추 ·
   점 네비 · 진행 바 · 칸 경계선 · 배경 교차).
   ⚠⚠ 마크업은 **그대로 두고 감추기만** 한다 - 요소를 지우면 홈페이지 검토 의견의 CSS 경로
      (nth-of-type)가 밀려 배지가 자리를 잃는다(CLAUDE.md 2-38-5 와 같은 함정).
   ⚠ `data-go`(소분류의 '담당자 연결하기')는 그대로 살아 있다 - 칸이 남아 있어야 그 이동이 된다. */
body[data-detail]{scroll-snap-type:none}
/* ⚠ 배경 숫자(.bd-ghost)를 일부러 화면 밖으로 조금 빼 두었다 - 그대로 두면
   **가로 스크롤이 생긴다**. `clip` 은 `hidden` 과 달리 스크롤 상자를 만들지 않아
   안쪽 자리잡기(sticky·absolute)에 영향을 주지 않는다.
   ⚠ `overflow:hidden` 으로 바꾸지 말 것(2026-09-08 '단계 카드가 목록을 잘랐다' 와 같은 함정). */
.bd-scroll{position:relative;overflow-x:clip}

.bd-stage{position:relative;display:flex;flex-direction:column;
  padding:clamp(46px,6vw,78px) 0}
/* ⚠⚠ 첫 단계의 높이·여백은 아래 `.bd-s1` 한 곳에서만 정한다.
   여기(`:first-child`)에 padding 을 같이 주면 특이도가 더 높아 `.bd-s1` 을 덮어버린다
   (2026-09-14 실제로 밟음 - 여백을 늘렸는데 화면이 그대로였다). */
.bd-stage:first-child{border-top:0}
/* ⚠⚠ 칸과 칸 사이 구분선(2026-09-19 대표님 - "구분선은 좀 필요할거 같음").
   ⚠ `border-top` 을 쓰면 **화면 전체 폭**으로 그어진다 - 시안의 다른 구분선
      (지표 위 선 등)은 본문 폭이라 톤이 어긋난다. 그래서 `::before` 로 본문 폭에 맞춘다.
   ⚠ `.bd-stage` 가 `position:relative` 라 `top:0` 이 정확히 앞 칸과의 경계다.
   ⚠ 첫 칸에는 앞 형제가 없어 `+ .bd-stage` 만으로 자동 제외된다. */
.bd-stage + .bd-stage::before{content:"";position:absolute;top:0;left:0;right:0;
  width:min(100% - var(--gut) * 2, calc(var(--max) - var(--gut) * 2));
  margin:0 auto;height:1px;background:var(--line)}
/* ⚠ 칸마다 달리 주던 높이·배경 교차는 걷어냈다(위 평탄화). 여백은 `.bd-stage` 한 곳에서 정한다. */
/* ⚠⚠ width:100% 가 없으면 이 칸이 **내용 폭만큼만** 좁아진다.
   `.bd-stage` 가 flex 인데 `.wrap` 에 `margin:0 auto` 가 있어 stretch 가 풀리기 때문이다
   (실측 - 3번 칸은 1360px 인데 4번 814px · 5번 894px 로 제각각이었고, 그래서 좌우가
    휑하게 비어 보였다. 2026-09-16 대표님 지적의 진짜 원인). */
.bd-stage>.wrap{position:relative;z-index:2;width:100%}

/* 배경에 크게 깔리던 단계 번호 - 2026-09-18 감춤(단계 구분을 없앴다) */
.bd-ghost{display:none}

/* 단계 번호 배지(3 어떻게 진행되는가 …) - 2026-09-18 감춤 */
.bd-stage .no{display:none}
.bd-stage h2{font-size:clamp(28px,3.3vw,44px);font-weight:800;color:var(--ink);
  letter-spacing:-1.7px;margin:0 0 16px;line-height:1.22}
/* ⚠ 줄 길이 39em - 3번 칸 설명이 한 줄에 들어가는 최소치(실측 37.6em)다.
   35em 이면 '의뢰를 받으면 …' 문장만 두 줄로 접힌다(2026-09-16 대표님 지적). */
.bd-stage>.wrap>p{font-size:clamp(16px,1.32vw,19.5px);color:var(--slate);line-height:1.8;
  max-width:39em;margin:0 0 26px}

/* ⚠⚠ 한 줄씩 올라오던 등장 모션은 2026-09-18 걷어냈다(대표님 - "새로 등장하는 모션을 빼줘").
   활성 칸에만 걸던 규칙이라 **나머지 칸이 통째로 빈 화면**이었다(전체 캡처로 실측).
   ⚠ 자바스크립트에서도 `bd-anim` 을 붙이지 않는다 - 되살리려면 그 한 줄과 이 규칙을 함께 되돌린다.
   ⚠ 스크롤 리빌([data-rv])도 이 페이지에서는 끈다(아래 `body[data-detail] [data-rv]`). */

/* 칸마다 있던 '다음 ↓' 단추 - 2026-09-18 감춤(쭉 내려 읽으므로 넘길 것이 없다) */
.bd-next{display:none}

/* 왼쪽 단계 점 - 2026-09-18 감춤(단계가 없으므로 짚어 갈 것이 없다).
   ⚠ 되살릴 때는 **왼쪽**에 둘 것 - 오른쪽은 퀵메뉴(.quick)가 이미 쓴다. */
.bd-dots{display:none}

/* ══ 사업분야 1단계 - 한눈에 읽히는 배치 (2026-09-14 대표님 시안) ══════════
   ⚠⚠ 어두운 히어로를 감춘다 - 그것 때문에 본문이 한 화면 아래로 밀려
      "뭘 하겠다는지 한눈에 안 보인다"(대표님)는 문제가 있었다.
      마크업은 그대로 두었으니 되살리려면 이 한 줄만 지우면 된다.
   ⚠ 분야 이름(h1)은 1단계 머리(.bh-kick)로 옮겨 문서 구조를 지켰다. */
body[data-detail] .phead{display:none}

/* ⚠ 분야 탭(.ltabs)이 sticky 라 문서 흐름보다 아래로 내려와 이 단계의 머리줄을 덮는다.
   여백을 탭 높이(81px)만큼 줘야 '01 / 분야명' 이 가려지지 않는다. */
.bd-s1{padding-top:clamp(70px,8vw,92px)}
/* ⚠⚠ 스크롤 리빌도 이 페이지에서는 끈다 - 대표님이 없애라고 한 '새로 등장하는 모션'에
   소분류 목록 버튼([data-rv])이 함께 걸려 있다.
   ⚠ 특이도 (0,1,1,0) 이라 위 `[data-rv]`(0,0,1,0) 를 이긴다 - !important 가 필요 없다.
   ⚠⚠ `#bd-scroll` 로 좁힌다 - `body[data-detail]` 만 쓰면 **영문 상세**(아직 옛 `.blk` 배치)의
      등장 효과까지 함께 꺼진다. 영문은 이번 지시 범위가 아니다. */
#bd-scroll [data-rv]{opacity:1;transform:none;transition:none}
.bh{display:grid;grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr);
  gap:clamp(24px,3.2vw,54px);align-items:center}

/* '01 / 어떤 문제를 다루는가' 머리줄 - 2026-09-18 감춤(단계 구분) */
.bh-kick{display:none}

/* 제목 - 분야 이름을 넣어 **한 줄**로(2026-09-14 대표님 F+C안).
   ⚠ 두 줄로 접히면 시안 느낌이 깨진다 - 글자 수가 많은 분야는 아래 clamp 가 줄여 준다. */
.bh-h{margin:0;font-size:clamp(29px,3.5vw,51px);line-height:1.14;
  letter-spacing:-.035em;font-weight:800}
.bh-sub{margin:13px 0 0;font-size:clamp(16px,1.28vw,20.5px);font-weight:700;
  color:#475569;line-height:1.5;letter-spacing:-.01em}
.bh-sub:empty{display:none}
.bh-rule{display:block;width:56px;height:4px;border-radius:2px;
  background:var(--blue);margin:22px 0 20px}
.bh-lead p{margin:0 0 15px;font-size:clamp(16px,1.18vw,19.5px);line-height:1.8;color:var(--stone)}
.bh-lead p:last-child{margin-bottom:0}

.bh-ph{position:relative}
.bh-big{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:18px;box-shadow:var(--sh-2)}
/* 작은 사진 카드 - 무엇을 어떻게 보는 일인지 한 장으로 알려준다 */
.bh-spot{position:absolute;right:16px;bottom:16px;width:min(40%,272px);margin:0;
  background:#fff;border-radius:13px;padding:7px;box-shadow:0 12px 32px rgba(15,40,80,.24)}
.bh-spot img{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:9px}
/* ⚠ 왼쪽 아래로 - `right` 를 auto 로 풀지 않으면 양쪽이 잡혀 카드가 늘어난다 */
.bh-spot.left{left:16px;right:auto}

.bh-spot figcaption{padding:9px 5px 4px;font-size:12.6px;font-weight:800;
  color:var(--ink);line-height:1.42}

/* 핵심 3칸 */
.bh-pts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:clamp(24px,3vh,42px);padding-top:clamp(18px,2.2vh,28px);
  border-top:1px solid var(--line)}
.bh-pts>div{padding:0 clamp(12px,1.5vw,26px)}
.bh-pts>div:first-child{padding-left:0}
.bh-pts>div+div{border-left:1px solid var(--line)}
/* ⚠ 자랑거리를 6개까지 넣으면 3열 두 줄이 된다(2026-09-19 생태독성) -
   줄이 바뀌는 칸은 왼쪽 선을 빼고 위 선을 준다. 3개짜리 분야는 첫 칸만 걸려 무해하다. */
.bh-pts>div:nth-child(3n+1){border-left:0;padding-left:0}
.bh-pts>div:nth-child(n+4){margin-top:clamp(16px,2vh,24px);
  padding-top:clamp(14px,1.8vh,20px);border-top:1px solid var(--line)}
.bh-pts b{display:block;margin-bottom:7px;font-size:14px;font-weight:800;color:var(--blue)}
.bh-pts strong{display:block;margin-bottom:6px;font-size:clamp(17px,1.35vw,22px);
  font-weight:800;letter-spacing:-.02em}
.bh-pts span{font-size:14.4px;line-height:1.56;color:var(--stone)}

/* ⚠ `.tagrow` 는 사업분야 목록 카드 등 여러 곳이 함께 쓴다 - 전역으로 키우지 말 것.
   1단계에서만 키운다(2026-09-14 대표님 "해시태그 너무 작음 확 키워줘"). */
.bd-s1 .tagrow{justify-content:center;gap:10px 11px;margin-top:clamp(20px,2.6vh,34px)}
.bd-s1 .tagrow span{font-size:17.5px;font-weight:700;padding:10px 21px;letter-spacing:-.01em}
@media (max-width:900px){
  .bd-s1 .tagrow{gap:8px}
  .bd-s1 .tagrow span{font-size:15px;padding:8px 15px}
}

@media (max-width:900px){
  .bh{grid-template-columns:1fr;gap:20px}
  .bh-tx h2{max-width:none}
  .bh-rule{margin:18px 0 16px}
  .bh-pts{grid-template-columns:1fr;padding-top:16px}
  .bh-pts>div{padding:0}
  .bh-pts>div+div{border-left:0;border-top:1px solid var(--line);margin-top:14px;padding-top:14px}
  .bh-spot{width:46%;right:11px;bottom:11px}
  .bh-spot figcaption{font-size:11.6px}
}

/* 위쪽 진행 바 - 2026-09-18 감춤 */
.bd-prog{display:none}

/* ══ 2단계 '수행하는 일' - 크게 보이는 배치 (2026-09-14 대표님 시안) ═══════
   ⚠⚠ 예전에는 패널 안쪽만 굴리게 해서(max-height + overflow-y) **소분류마다 스크롤을
      내려야** 내용이 보였다. 대표님 지적으로 걷어냈다 - 페이지 스크롤을 그대로 쓴다.
      여기에 다시 내부 스크롤을 넣지 말 것. */
.bd-stage .wa-body{max-height:none;overflow:visible;padding:0}
.bd-s2{min-height:auto;padding-top:clamp(78px,9vh,98px);padding-bottom:clamp(70px,9vh,110px)}

/* 왼쪽 열 - 영문 분야명 · 큰 제목 · 소분류 목록 */
/* ⚠ 목록을 줄여 본문을 넓힌다 - 대표님 목업의 '꽉 찬 느낌'(2026-09-15).
   목록은 유지하되(대표님 선택) 자리는 최소로 준다. */
.wa{display:grid;grid-template-columns:clamp(196px,15vw,244px) minmax(0,1fr);
  gap:clamp(24px,3vw,56px);border:0;border-radius:0;background:transparent;align-items:start}
.wa-side{position:sticky;top:158px}
.wa-kick{font-size:12.6px;font-weight:800;letter-spacing:.16em;color:var(--blue);
  text-transform:uppercase;margin-bottom:9px}
.wa-kick:empty{display:none}   /* 영문 분야명을 비워 두면 자리도 차지하지 않게 */
.wa-side h2{margin:0 0 22px;font-size:clamp(29px,3.3vw,45px);line-height:1.12;
  letter-spacing:-.035em}
.wa-list{background:transparent;border:0;border-radius:0;padding:0;gap:0;
  border-top:1px solid var(--line)}
.wa-list .mini.sub{background:transparent;border:0;border-bottom:1px solid var(--line);
  border-left:3px solid transparent;border-radius:0;box-shadow:none;padding:15px 14px;
  text-align:left;width:100%}
.wa-list .mini.sub b{font-size:15.6px;font-weight:700;color:var(--slate);letter-spacing:-.02em}
.wa-list .mini.sub:hover{background:#F6FAFF;border-color:var(--line);
  border-left-color:var(--line-2);box-shadow:none;transform:none}
.wa-list .mini.sub:hover b{color:var(--ink)}
.wa-list .mini.sub.on{background:#EAF3FE;border-left-color:var(--blue);
  border-bottom-color:var(--line);box-shadow:none}
.wa-list .mini.sub.on b{color:var(--blue-d,var(--blue));font-weight:800}

/* 소분류 머리 - 무슨 일인지 한 장면으로 */
/* ⚠ 글 : 사진 = 0.84 : 1.16 - 제목이 두 줄로 접히면서 목업과 같은 덩어리가 된다 */
.wp-hero{display:grid;grid-template-columns:minmax(0,.84fr) minmax(0,1.16fr);
  gap:clamp(20px,2.6vw,46px);align-items:center}
.wp-kick{font-size:15.4px;font-weight:800;color:var(--blue);margin-bottom:13px;
  letter-spacing:-.01em}
/* ⚠ 목업 비율(제목 높이 ≈ 3.7vw). 폭이 좁아지면 저절로 두 줄로 접힌다 */
/* ⚠ text-wrap:balance - 두 줄 길이를 고르게 나눈다. 없으면 '담수 · 해수 생태독성 / 시험'
   처럼 뒷줄에 한 낱말만 남아 어색하다(2026-09-15). */
.wp-h{margin:0;text-wrap:balance;font-size:clamp(28px,3.7vw,56px);line-height:1.1;letter-spacing:-.04em;
  font-weight:800;color:var(--ink)}
/* ⚠⚠ 셀렉터를 `.wa-body .wp-lead` 로 둘 것 - 위쪽 `.wa-body p{font-size:14.6px}`(0,0,1,1)가
   그냥 `.wp-lead`(0,0,1,0)를 특이도로 이겨서 **글씨를 키워도 그대로였다**(2026-09-15 실제로 밟음).
   소분류 본문 안의 글자 크기를 손볼 때는 늘 이 규칙과의 특이도를 먼저 볼 것. */
.wa-body .wp-lead{margin:18px 0 0;font-size:clamp(16px,1.42vw,21px);line-height:1.7;
  color:var(--stone);
  /* 자료의 \n 을 줄바꿈으로 살리고(pre-line), 저절로 넘어갈 때도 어절 가운데서 끊지 않는다(keep-all)
     - '배양 ·' 처럼 나열이 줄 끝에서 갈리는 것을 자료 쪽 \n 으로 막는다(2026-09-29 해양바이오 소재개발). */
  white-space:pre-line;word-break:keep-all}
/* `leadFit` 소분류만 - 가장 긴 줄이 한 줄로 들어가게 칸 폭에 맞춰 줄인다(원래 크기보다 커지지 않음).
   ⚠ 23.3 = 해양바이오 소재개발 가운데 줄('배양 · 추출 · … 비료 등' 22.81em) + 여유. 문구를 바꾸면 다시 잴 것. */
.wp-tx:has(.wp-lead.fit){container-type:inline-size}
.wa-body .wp-lead.fit{font-size:min(clamp(16px,1.42vw,21px),max(14px,calc(100cqi / var(--lf,23.3))))}
.wp-cta{display:inline-flex;align-items:center;gap:9px;margin-top:21px;padding:11px 19px;
  border:1px solid var(--blue);border-radius:999px;background:#fff;color:var(--blue-d,var(--blue));
  font-size:14.2px;font-weight:800;cursor:pointer;transition:.2s var(--ease)}
.wp-cta:hover{background:var(--blue);color:#fff}
/* ══ 대표님 시안 배치(2026-09-19) - showcase 가 있는 분야의 1번 칸 ══════════
   킥커 / 큰 제목 / 한 줄 + 큰 사진 → 카드 3장 → 숫자 지표. */
/* ⚠ `.bh-kick` 은 2026-09-18 단계 구분(01 / 어떤 문제를 다루는가)을 없애며 감춰 뒀다 -
   showcase 에서는 분야 문구를 담으므로 display 를 되살려야 한다(안 주면 계속 none). */
.bh.has-show .bh-kick{display:block;font-size:16.5px;font-weight:800;color:var(--blue);
  letter-spacing:.01em;margin-bottom:13px}
/* ⚠ `white-space:pre-line` - 자료의 줄바꿈을 살린다(2026-09-19 대표님 "여기도 줄바꿈").
   ⚠ showcase 제목은 `fitOneLine` 을 타지 않으므로(2-38-3-34) 줄바꿈이 그대로 유지된다.
   ⚠ 줄바꿈이 없는 분야는 예전처럼 폭에 맞춰 알아서 접힌다. */
.bh.has-show .bh-h{white-space:pre-line;font-size:clamp(33px,3.8vw,53px);line-height:1.16;letter-spacing:-.03em}
.bh.has-show .bh-sub{margin-top:16px;font-size:clamp(17px,1.42vw,21px);
  font-weight:700;color:var(--slate)}
/* 새 사진이 가로로 넓다 - 16/10 으로 두면 위아래가 잘린다.
   ⚠ 2.3(원본 그대로) 이면 사진이 글보다 훨씬 길어 **왼쪽 글 옆에 위아래 공백**이 크게 남는다
   (실측 위 62 · 아래 63px). 2.5 로 조금 납작하게 해 그 공백을 줄인다 -
   원본 1600x696 기준 위아래 각 28px 만 잘려 인물 머리가 잘리지 않는다. */
.bh.has-show .bh-big{aspect-ratio:2.5/1}

/* ⚠⚠ `hidden` 속성만으로는 안 감춰진다 - UA 기본 `[hidden]{display:none}` 은 특이도 0 이라
   `.bh-pts{display:grid}` · `.tagrow{display:flex}` · `.bh-rule{display:block}` 에 눌린다
   (실측 - hidden=true 인데 높이가 267px). 작은 사진은 뒤에 도는 렌더가 hidden 을 되돌리기도 한다.
   그래서 **감추는 일은 CSS 가 맡는다**. showcase 를 지우면 그대로 되살아난다. */
/* ⚠ 여백은 showcase 를 쓰는 분야에만 줄인다 - `.bd-s1`(공통)을 건드리면 8개 분야가 함께 움직인다.
   위 padding 은 sticky 분야 탭(81px)에 제목이 가리지 않을 만큼은 남겨야 한다. */
.bd-s1.has-show{padding-top:clamp(60px,6.6vw,78px);padding-bottom:clamp(38px,4.4vw,58px)}
/* ⚠⚠ 1번 칸은 한 화면을 꽉 채운다(2026-10-13 대표님 - '100% 기준은 첫 페이지만 보였으면, 수행하는 일이 살짝 윗단이 보임').
   1920 x 1080(안쪽 905 ~ 940) 에서 1번 칸이 797px 에서 끝나 '수행하는 일' 머리가 화면 아래에 걸쳤다.
   칸 높이 = 머리말 아래 한 화면(칸은 머리말 바로 아래 66px 에서 시작). 화면이 낮아 내용이 더 길면(노트북) 예전처럼 내용 높이. 폰 · 태블릿(900px 이하)은 그대로.
   ⚠ 같은 날 2차 - 내용을 가운데에 세웠더니 탭 아래가 100px 가까이 비었다(대표님 '상단 여백이 많아 불편') ->
     위 여백(탭 높이 + 40px 안팎)과 카드 사진 높이를 site.js fitShow() 가 재서 준다(--s1-pad · --bh-cph). */
@media (min-width:901px){
  .bd-s1.has-show{min-height:calc(100vh - var(--hd-s));justify-content:flex-start;padding-top:var(--s1-pad,calc(66px + 26px));padding-bottom:26px}
  /* 남는 높이를 받은 카드 사진(site.js fitShow - 2.1:1 에서 최대 1.5:1) */
  .bd-s1.has-show .bh-card-ph img{height:var(--bh-cph,auto)}
}
.bd-s1.has-show .bh-rule,
.bd-s1.has-show [data-d-problem],
.bd-s1.has-show [data-d-spot],
.bd-s1.has-show [data-d-points],
.bd-s1.has-show [data-d-tags]{display:none !important}

.bh-cards{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  gap:clamp(14px,1.45vw,22px);margin-top:clamp(22px,2.8vh,36px)}
/* ⚠ 4장이라 중간 폭에서는 2열로 접는다 - 900px 이하 1열 규칙보다 **앞**에 둘 것
   (같은 특이도라 뒤에 오는 쪽이 이긴다). */
@media (max-width:1190px){.bh-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.bh-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:16px;overflow:hidden;text-decoration:none;color:inherit;
  transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.bh-card:hover{box-shadow:var(--sh-2);transform:translateY(-3px)}
.bh-card-ph{display:block;overflow:hidden}
/* 아직 사진이 없는 카드 - 무엇이 필요한지 적어 둔 빈칸(2026-09-19) */
.bh-card-ph.empty{display:flex;flex-direction:column;justify-content:center;align-items:center;
  gap:7px;aspect-ratio:2.1/1;background:#f7fafd;border-bottom:1px dashed var(--line);
  text-align:center;padding:12px 16px}
.bh-card-ph.empty i{font-style:normal;font-size:12.6px;font-weight:800;letter-spacing:.02em;
  color:var(--blue);background:#e8f2fd;border-radius:999px;padding:4px 11px}
.bh-card-ph.empty em{font-style:normal;font-size:13.4px;font-weight:700;color:var(--stone);
  line-height:1.45;word-break:keep-all}
.bh-card-ph img{display:block;width:100%;aspect-ratio:2.1/1;object-fit:cover;
  transform:scale(1.02);transition:transform .6s var(--ease)}
.bh-card:hover .bh-card-ph img{transform:scale(1.07)}
.bh-card-tx{display:block;padding:clamp(15px,1.4vw,21px) clamp(16px,1.5vw,23px)
  clamp(15px,1.5vw,20px)}
.bh-card-tx b{display:block;font-size:clamp(17.5px,1.37vw,20.5px);font-weight:800;
  letter-spacing:-.02em;margin-bottom:7px}
.bh-card-tx i{display:block;font-style:normal;font-size:15.4px;line-height:1.55;
  color:var(--stone)}
.bh-card-tx em{display:inline-block;margin-top:12px;font-style:normal;font-size:15px;
  font-weight:800;color:var(--blue)}
/* 설명 줄 수가 카드마다 달라도 '상담 문의' 가 같은 높이에 오게 맨 아래에 붙인다
   (2026-09-29 화학물질 카드 - 설명이 1~3줄. 원고 3쪽도 버튼이 한 줄로 맞춰져 있다) */
.bh-card-tx{display:flex;flex-direction:column;flex:1 1 auto}
.bh-card-tx em{margin-top:auto;padding-top:12px;align-self:flex-start}
.bh-card:hover .bh-card-tx em span{margin-left:3px}
.bh-card-tx em span{display:inline-block;transition:margin .25s var(--ease)}
/* 카드를 누르면 그 내용 자리로, 파란 글씨만 문의로(2026-10-15) - 카드 전체는 제목 링크의 ::after 가 덮고
   파란 글씨(.bh-card-cta)가 그 위로 올라온다(링크 안에 링크를 넣을 수 없어서) */
.bh-card{position:relative}
.bh-card-go{color:inherit;text-decoration:none}
.bh-card-go::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
.bh-card-go:focus-visible{outline:none}
.bh-card-go:focus-visible::after{outline:3px solid var(--blue);outline-offset:-3px}
.bh-card-tx em{position:relative;z-index:2}
.bh-card-cta{color:inherit;text-decoration:none}
.bh-card-cta:hover{text-decoration:underline;text-underline-offset:3px}
/* 카드 덧붙임 줄(※ 물질명 · CAS 번호) - 작은 글씨 한 줄(2026-10-01 대표님 "글씨 크기 좀 줄여서 한줄로").
   넘치는 폭에서는 site.js fitCardNotes() 가 11px 까지 더 줄인다 */
.bh-card-tx .bh-card-note{display:block;margin-top:3px;font-size:13px;line-height:1.5;
  color:var(--stone);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.bh-stats{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));
  margin-top:clamp(24px,3vh,40px);padding-top:clamp(18px,2.2vh,28px);
  border-top:1px solid var(--line)}
/* ⚠ hidden 만으로는 display:grid 에 눌린다 - 지표 · 카드가 없는 분야는 여기서 감춘다(2026-09-29) */
.bh-stats[hidden],.bh-cards[hidden]{display:none}
.bh-stats>div{padding:0 clamp(12px,1.5vw,26px)}
.bh-stats>div:first-child{padding-left:0}
.bh-stats>div+div{border-left:1px solid var(--line)}
.bh-stats strong{display:block;font-size:clamp(31px,3vw,42px);font-weight:800;
  color:var(--blue);letter-spacing:-.03em;line-height:1.05}
.bh-stats strong i{font-style:normal;font-size:.44em;font-weight:800;margin-left:5px;
  letter-spacing:normal;
  color:var(--ink,#0f172a)}
.bh-stats span{display:block;margin-top:8px;font-size:15.6px;color:var(--stone)}
/* 아직 숫자가 없는 지표 칸(2026-09-19) */
.bh-stats>div.empty strong{color:#cbd5e1}
.bh-stats>div.empty span{color:#94a3b8}
/* ⚠ 지표도 4칸 - 중간 폭에서는 카드와 같은 경계에서 2칸으로 접는다 */
@media (max-width:1190px){.bh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .bh-stats>div:nth-child(3){padding-left:0}
  .bh-stats>div:nth-child(3){border-left:0}
  .bh-stats>div:nth-child(n+3){border-top:1px solid var(--line);margin-top:16px;padding-top:16px}}
@media (max-width:900px){
  .bh-cards{grid-template-columns:1fr}
  .bh-stats{grid-template-columns:1fr}
  .bh-stats>div{padding:0}
  .bh-stats>div+div{border-left:0;border-top:1px solid var(--line);
    margin-top:14px;padding-top:14px}
  .bh.has-show .bh-big{aspect-ratio:16/9}
}

/* 사진이 없는 소분류 - 글이 전체 폭을 쓴다(2026-09-18) */
.wp-hero.solo .wp-tx{grid-column:1 / -1}
.wp-ph{position:relative}
/* 사진 오른쪽 아래 설명 알약(대표님 목업). ⚠ 사진이 화면 끝까지 늘어나므로
   오른쪽에 여유를 넉넉히 둔다 - 안 그러면 화면 가장자리에 붙어 잘려 보인다. */
.wp-cap{position:absolute;right:clamp(16px,2.4vw,42px);bottom:16px;z-index:2;
  max-width:min(62%,420px);padding:9px 16px;border-radius:999px;
  background:rgba(13,34,63,.88);backdrop-filter:blur(6px);
  color:#fff;font-size:13.6px;font-weight:800;letter-spacing:-.02em;line-height:1.35;
  box-shadow:0 10px 26px -14px rgba(8,23,43,.7)}
@media (max-width:900px){.wp-cap{right:12px;bottom:12px;font-size:12.4px;padding:7px 13px}}
/* ⚠ 세로를 줄여 가로로 길게(2026-09-15 대표님 - "그림은 세로 좀 줄여야") */
.wp-ph img{display:block;width:100%;aspect-ratio:16/7.2;object-fit:cover;
  border-radius:17px;box-shadow:var(--sh-2)}
/* ⚠⚠ 큰 사진 왼쪽을 흰 바탕으로 녹인다(2026-09-30 대표님 - '염에 의한 생태독성 증명' 사진이 제일 예쁘다,
   다른 것도). 그 사진(salt-ion-analysis)은 번짐이 **파일에 들어 있었다** - 잰 값(왼쪽 끝 불투명 0.84 →
   폭 10% 지점에서 0, 위 · 아래 · 오른쪽은 없음)을 그대로 옮겼다.
   ⚠ 사진에 mask 를 쓰지 않는다 - 그림자(box-shadow)까지 잘려 나가 염 증명과 모양이 달라진다. 흰 막을 얹는다.
   ⚠ 번짐이 이미 있는 사진 · 왼쪽 가장자리에 글자가 있는 도표는 자료(subs.json imgs)에 fade:false → .nofade */
.wp-ph::after{content:"";position:absolute;inset:0;z-index:1;border-radius:17px;pointer-events:none;
  background:linear-gradient(90deg,rgba(255,255,255,.84) 0,rgba(255,255,255,.58) 3%,
    rgba(255,255,255,.32) 6%,rgba(255,255,255,.13) 8.4%,rgba(255,255,255,0) 10.6%)}
.wp-ph.nofade::after{content:none}

/* ⚠⚠ 2단계 소분류 큰 사진을 **화면 오른쪽 끝까지 늘리던 규칙은 2026-09-19 걷어냈다**
   (2026-09-15 목업 → 대표님 "오른쪽 벽에 딱 붙히지 않아도 될 거 같은, 전화 · 문의 · 구매랑
   겹치는 걸 보니까" · "페이지를 줄이거나 늘릴 때 왜 크기 변화가 안 되냐").
   ⚠ 음수 여백(`margin-right: -calc(...)`)으로 그리드 칸 밖까지 뻗다 보니 ① 오른쪽 플로팅
      버튼과 겹치고 ② 칸 폭이 아니라 화면 폭을 따라가 **창을 줄여도 사진만 그대로**로 보였다
      (실측 1500px 화면에서 칸 572px / 사진 696px).
   ⚠ 지금은 그리드 칸 안에 들어가 폭에 따라 정상적으로 줄어든다. 되살리려면 이 자리에
      옛 규칙(음수 여백 + 왼쪽 mask + 왼쪽만 둥근 모서리)을 되돌리면 된다. */

/* 제공서비스 칸 */
.wp-sec{margin-top:clamp(26px,3.4vh,46px)}
.wp-st{display:flex;align-items:center;gap:16px;font-size:20.5px;font-weight:800;
  color:var(--ink);margin-bottom:16px;letter-spacing:-.02em}
.wp-st::after{content:"";flex:1;height:1px;background:var(--line)}
/* 제공서비스 칸 - 큰 번호 + 한 줄 설명(2026-09-15 대표님 목업).
   ⚠ 이 칸은 9개 분야·전 소분류가 함께 쓴다 - 여기를 고치면 포털 전체가 바뀜다.
   ⚠ 첫 칸만 옷은 파랑으로 강조한다 - 읽는 순서의 시작점을 알려 주는 장치다. */
.wp-st span{flex:0 0 auto}
.wp-st em{order:3;flex:0 0 auto;font-style:normal;font-size:13.4px;font-weight:700;
  color:var(--slate);letter-spacing:-.01em}
.wp-svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(196px,1fr));
  border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.wp-svc>div{position:relative;padding:24px 26px 26px}
.wp-svc>div+div{border-left:1px solid var(--line)}
.wp-svc>div:first-child{background:#EAF2FC}
.wp-svc i{display:block;width:28px;height:3px;border-radius:2px;background:var(--blue);
  margin-bottom:15px}
.wp-svc b{display:block;margin-bottom:11px;font-size:clamp(38px,3.3vw,52px);line-height:1;
  font-weight:800;color:#C7DCF2;letter-spacing:-.03em}
.wp-svc span{display:block;font-size:clamp(18px,1.45vw,21.5px);font-weight:800;
  color:var(--ink);line-height:1.35;letter-spacing:-.035em}
.wp-svc small{display:block;margin-top:10px;font-size:14.4px;font-weight:600;
  color:var(--slate);line-height:1.55;letter-spacing:-.01em}
/* 문의 버튼 두 개 - '담당자 연결하기'(같은 페이지 5번 칸) + '문의하기'(문의 페이지).
   ⚠⚠ 2026-09-19 대표님 지시로 **글자 링크 → 모서리 8px 둥근 사각형 버튼**으로 바꾸고
      제공서비스 칸 오른쪽 아래에서 **소개 글 바로 아래(왼쪽)** 로 옮겼다.
   ⚠ 폰에서는 줄이 바뀌도록 wrap 을 둔다 - nowrap 이면 오른쪽으로 삐져나간다. */
.wp-asks{display:flex;justify-content:flex-start;align-items:center;flex-wrap:wrap;
  gap:10px;margin-top:clamp(18px,2vw,26px)}
.wp-ask{display:inline-flex;justify-content:center;align-items:center;gap:7px;
  padding:12px 20px;border-radius:8px;border:1px solid var(--blue);background:var(--blue);
  color:#fff;font-size:15.2px;font-weight:800;letter-spacing:-.01em;cursor:pointer;
  text-decoration:none;transition:.2s var(--ease)}
.wp-ask:hover{background:var(--blue-d,#0469c4);border-color:var(--blue-d,#0469c4);color:#fff}
/* 담당자 연결하기 - 같은 모양이되 외곽선형(주된 행동은 '문의하기') */
.wp-ask.alt{background:#fff;border:1px solid var(--line);color:var(--slate);font:inherit;
  font-size:15.2px;font-weight:800;padding:12px 20px;border-radius:8px}
.wp-ask.alt:hover{background:#f4f7fb;border-color:var(--blue);color:var(--blue)}

/* 사진 카드 - 2단계에서는 크게(시안). ⚠ 위 여백이 없으면 제공서비스 칸에 딱 붙는다 */
.bd-s2 .wa-gal{margin-top:clamp(26px,3.4vh,46px);gap:16px;
  grid-template-columns:repeat(auto-fit,minmax(238px,1fr))}
.bd-s2 .wa-gal img{height:clamp(168px,16vw,228px)}
/* ⚠ 사진이 6장이면 auto-fit 이 4+2 로 갈라 놓는다 - 3열 2줄로 반듯하게.
   ⚠ 1100px 이하는 이미 1열 레이아웃이라 건드리지 않는다(폰에서 3열이 되면 깨진다) */
@media (min-width:1101px){
  .bd-s2 .wa-gal:has(figure:nth-child(6)){grid-template-columns:repeat(3,minmax(0,1fr))}
}
.bd-s2 .wa-gal figcaption{font-size:13.4px;font-weight:700;color:var(--char);padding:11px 13px}
/* ⚠ '하는 일' 이 카드로 바뀜 뒤로는 사진이 한 장인 소분류(환경 DNA)가
   글 옆이 아니라 아래로 내려온다 - 아래 `.wa-pair` 는 **줄글이 있을 때만** 잡히기 때문이다.
   한 장이 전체 폭을 차지하면 배너처럼 커 보여 폭을 묶는다. */
.bd-s2 .wa-gal figure:only-child{max-width:clamp(320px,38vw,520px)}
/* ⚠⚠ 사진이 한 장뿐이면 아래 격자에 덩그러니 놓여 허전하다 - '하는 일' 글 오른쪽에 붙인다
   (2026-09-16 대표님 "이미지 하나만 쓸거라 오른쪽에 이미지, 왼쪽에 하는일").
   ⚠ 실측 갤러리가 1장인 소분류는 eDNA 하나뿐 - 2장 이상은 예전 격자 그대로다.
   ⚠ 트랙은 minmax(0,…) 로 - 1fr(=minmax(auto,1fr))이면 칸이 내용 크기 밑으로 못 줄어
      좁은 화면에서 가로로 넘친다(2-38-3-3 과 같은 함정).
   ⚠ .bd-s2 를 앞에 붙여야 위 `.bd-s2 .wa-gal img{height:clamp(...)}` 를 이긴다. */
.bd-s2 .wa-pair{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.86fr);
  gap:clamp(20px,2.4vw,34px);align-items:start;margin-bottom:22px}
.bd-s2 .wa-pair .wa-pair-tx > p:last-child{margin-bottom:0}
.bd-s2 .wa-pair .wa-gal{margin:0;grid-template-columns:minmax(0,1fr)}
.bd-s2 .wa-pair .wa-gal img{height:auto;aspect-ratio:3/2}
@media (max-width:900px){
  .bd-s2 .wa-pair{grid-template-columns:minmax(0,1fr);gap:18px}
}
/* 아래 자세한 글은 한 박자 쉬고 시작한다 */
.bd-s2 .wa-body > .wa-t{margin-top:clamp(30px,3.6vh,48px)}

@media (max-width:1100px){
  .wp-hero{grid-template-columns:1fr;gap:20px}
  .wa-side{position:static}
}
@media (max-width:900px){
  /* ⚠⚠ `1fr`(=minmax(auto,1fr))로 두면 본문이 min-content 아래로 못 줄어, 학명처럼
     줄바꿈 없는 긴 글이 있는 카드가 화면 밖으로 삐져나간다(2026-09-16 실측 473px).
     자식에 min-width:0 을 줘도 소용없다 - **트랙**을 minmax(0,1fr) 로 둘 것. */
  .wa{grid-template-columns:minmax(0,1fr);gap:20px}
  .wa-side h2{margin-bottom:14px}
  .wp-svc{grid-template-columns:1fr}
  .wp-svc>div{padding:17px 18px 19px}
  .wp-svc>div+div{border-left:0;border-top:1px solid var(--line)}
  .wp-svc b{font-size:31px}
  .bd-s2{padding-top:clamp(24px,4vh,44px)}
}

/* 화학물질 컨설팅은 제목을 조금 키워 둔 규칙이 있었다 - 새 배치에도 이어준다 */
body[data-area="chemical"] .bd-stage h2{font-size:clamp(30px,3.4vw,46px)}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
}
@media (max-width:900px){
  .bd-stage{padding:clamp(34px,6vw,54px) 0}
  /* ⚠ 첫 칸은 문서 맨 위라 스크롤로 내려갈 수가 없다 - 헤더(66)+분야 탭(81)에 제목이
     가려 있었다(2026-09-15). 윗여백으로만 해결된다.
     ⚠ 위 .bd-stage 선언보다 뒤에 두어야 덧쓰기가 된다(특이도가 같다). */
  .bd-s1{padding-top:80px}
  .bd-stage .wa-body{max-height:none;overflow:visible;padding-right:0}
}

/* 수행실적 - 사업분야별 대표 사업 (2026-09-16)
   ⚠ 연도 · 필터 · 페이저 없이 분야 묶음만 보여준다.
   ⚠ 학술실적이 쓰는 `.wk` · `.filters` 는 그대로 둔다(여기서만 쓰는 전용 이름).
   ⚠ 트랙은 minmax(0,…) - 1fr 이면 칸이 내용 크기 밑으로 못 줄어 좁은 화면에서 넘친다. */
/* 2026-09-28 대표님 - 분야 카드 2열 격자를 자료실 소식 배너와 같은 사진 배너(.nfeat · bannerSlider)로 바꿨다.
   여기엔 사업 실적 배너에만 필요한 것(대표 과제 목록 · 조금 더 높은 배너)만 둔다. */
.wk-feat{margin-top:26px;margin-bottom:0}
.wk-feat .nf-slide{height:380px}
.wk-feat .nf-arrow{top:190px}
.wk-feat .nf-txt h3{font-size:30px;margin-bottom:14px}
.wk-items{margin:0 0 20px;padding:0;list-style:none}
.wk-items li{position:relative;padding:7px 0 7px 14px;font-size:14.8px;line-height:1.55;
  color:var(--char);border-top:1px solid var(--line-2);word-break:keep-all}
.wk-items li:first-child{border-top:0}
.wk-items li:before{content:"";position:absolute;left:0;top:15px;width:5px;height:5px;
  border-radius:50%;background:var(--blue)}
@media (max-width:900px){
  .wk-feat .nf-slide{height:340px}
  .wk-feat .nf-arrow{top:170px}
  .wk-feat .nf-txt h3{font-size:23px}
  .wk-items li{font-size:14px;padding:5px 0 5px 14px}
}
@media (max-width:700px){ .wk-feat .nf-slide{height:auto} }


/* ══ 소분류 안 모식도 · 절차도 (2026-09-17 재작업) ═══════════════════════
   옛 홈페이지 pid=15 의 도식을 도형 · 글자로 옮긴 것.
   ⚠ 그림이 아니라 HTML - subs.json 의 chart · procedure 를 고치면 화면이 따라온다.
   ⚠ 이름(.wc-* / .wp-*)은 시안 안에서 겹치지 않는 것을 확인하고 지었다. */
.wchart{margin-top:6px}
/* ⚠ 연결선은 .wc-wire(SVG)가 노드 좌표를 재서 긋는다 - 칸 사이에 화살표를 끼우지 않는다.
   원본의 ㄱ자 꺾임 · 합류 · 브레이스를 flex 화살표로는 그릴 수 없다(2026-09-17). */
.wc-grid{position:relative;display:grid;column-gap:30px;row-gap:24px;align-items:start}
.wc-grid>*{position:relative;min-width:0}
.wc-wire{position:absolute;left:0;top:0;width:100%;height:100%;pointer-events:none;overflow:visible}
.wc-wire path{fill:none;stroke:#2F6BA8;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.wc-wire path.dash{stroke:#93A6B8;stroke-width:1.4;stroke-dasharray:4 3.5}
/* ⚠⚠ 화살촉은 marker 안의 path 라 위 `fill:none` 에 걸려 속이 빈 채 그려진다
   - 인라인 fill 속성은 작성자 CSS 에 진다. 여기서 되돌려야 채워진 삼각형이 된다. */
.wc-wire marker path{fill:#2F6BA8;stroke:none}

/* 들어오는 것 */
.wc-b{border-radius:9px;padding:10px 12px;font-size:13.8px;font-weight:700;line-height:1.45;
  text-align:center}
.wc-b.dark{background:var(--blue-d);color:#fff}
.wc-b.mid{background:#E8F1FB;color:#1C4B76;border:1px solid #BBD6F2}
.wc-b.pale{background:#F3F6FA;color:var(--slate);border:1px solid var(--line)}

/* 단계 알약 */
.wc-step{background:var(--blue);color:#fff;border-radius:9px;padding:11px 13px;font-size:15.4px;
  font-weight:800;line-height:1.35;text-align:center;letter-spacing:-.02em}
.wc-step em{display:block;margin-top:3px;font-style:normal;font-size:12.6px;font-weight:600;
  opacity:.88}
.wc-step.sm{font-size:14.4px;padding:10px 12px}

/* 단계 설명 · 심사 결과물 */
/* ⚠ .before = 앞 단계에서 이 단계로 넘어가는 '사이'의 일 - 그 화살표 아래로 당겨 붙인다.
   음수 여백이라 칸 왼쪽 경계를 넘어 열 간격(화살표 자리)까지 걸친다. */
.wc-d.before{justify-self:start;width:auto;margin-left:-30px;max-width:min(210px, calc(100% + 30px))}
.wc-d{border:1px solid #BBD6F2;background:#fff;border-radius:8px;padding:9px 11px;font-size:13.4px;
  /* ⚠ 칸보다 조금 좁게 - 아래에서 '등록'으로 올라오는 선이 지날 자리를 낸다 */
  width:88%;justify-self:center;
  line-height:1.55;color:var(--slate);text-align:center}
.wc-out{border:1px solid var(--blue);background:#fff;border-radius:8px;padding:9px 13px;
  font-size:14px;font-weight:800;color:var(--blue-d);text-align:center;white-space:nowrap}

/* 사전신고 설명 */
.wc-note{border:1px solid #BBD6F2;border-radius:9px;background:#fff;padding:10px 13px}
.wc-note b{display:block;font-size:14px;font-weight:800;color:var(--ink);letter-spacing:-.02em}
.wc-li{display:inline-block;font-size:13.4px;color:var(--slate);line-height:1.55;margin-top:3px}
.wc-li+.wc-li{margin-left:10px;padding-left:10px;border-left:1px solid var(--line)}

/* 결과 - 위해성 평가에서 브레이스로 갈라진다 */
.wc-res{display:flex;flex-direction:column;gap:8px}
.wc-r{border:1px solid #DED4B6;border-radius:8px;background:#FCFAF3;padding:9px 11px;
  font-size:13.6px;font-weight:700;color:#6B5E3C;text-align:center;white-space:nowrap}

/* 되먹임 설명 */
.wc-tag{border:1px dashed #9DC7F5;border-radius:8px;background:#F7FBFF;padding:9px 12px;
  font-size:13.2px;line-height:1.5;color:var(--slate);text-align:center}
.wc-foot{font-size:13.6px;color:var(--stone);margin:11px 0 0}

/* 절차도 */
/* ⚠ 칸 높이는 셋이 같아야 한다(대표님 2026-09-17) - stretch 라 가장 긴 칸에 맞춰진다. */
.wproc{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px}
.wpc-step{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:var(--r);
  background:#fff;overflow:hidden}
.wpc-h{background:#BFD8F2;color:#12385F;padding:15px 14px 14px;text-align:center;
  display:flex;flex-direction:column;justify-content:flex-start}
/* ⚠⚠ STEP 글자·구분선은 맨 위에 고정하고 제목만 남은 자리 가운데에 둔다(대표님 2026-09-17
   "상단배치 말고 중간배치"). 띠 전체를 center 로 두면 기관 이름이 붙은 칸만 STEP 글자가
   올라가 세 칸이 어긋난다 - auto 여백이라 기관 이름 유무와 무관하게 가운데가 된다. */
.wpc-h strong{margin-top:auto}
.wpc-h>:last-child{margin-bottom:auto}
.wpc-step.main .wpc-h{background:var(--blue-d);color:#fff}
.wpc-h b{display:block;font-size:15.6px;font-weight:800;letter-spacing:.04em;
  padding-bottom:9px;margin-bottom:9px;border-bottom:1px solid rgba(255,255,255,.75)}
.wpc-h strong{display:block;font-size:19.5px;font-weight:800;letter-spacing:-.02em}
.wpc-h em{display:block;font-style:normal;font-size:15px;font-weight:700;margin-top:4px;opacity:1}
.wpc-body{padding:15px 15px 16px}
.wpc-chain{display:flex;flex-direction:column;align-items:center;margin-bottom:12px}
.wpc-chain span{font-size:15.4px;font-weight:800;color:var(--ink);text-decoration:underline;
  text-underline-offset:3px}
.wpc-chain i{width:0;height:0;border:4px solid transparent;border-top-color:#9DC7F5;margin:5px 0}
.wpc-step ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.wpc-step li{position:relative;padding-left:16px}
.wpc-step li::before{content:"";position:absolute;left:0;top:7px;width:9px;height:9px;border-radius:50%;
  background:#9DC7F5}
.wpc-step.main li::before{background:var(--blue-d)}
.wpc-step li b{display:block;font-size:15.4px;font-weight:800;color:var(--ink);line-height:1.5;
  text-decoration:underline;text-underline-offset:3px}
.wpc-s,.wpc-n{display:block;font-size:13.8px;line-height:1.6;margin-top:3px}
.wpc-s{color:var(--slate)}
.wpc-n{color:var(--stone)}
.wpc-u{display:block;font-size:13.6px;line-height:1.55;margin-top:2px;color:var(--blue);
  overflow-wrap:break-word;word-break:break-all}

/* ⚠⚠ 모식도는 다른 곳보다 일찍 세로로 접는다 - 가로로 두면 1220px 아래에서 단계 칸이
   148px 밑으로 좁아져 '유해성 심사' 가 글자마다 줄바꿈된다(실측).
   ⚠ 이 경계를 바꾸면 site.js wcDraw 가 '칸 수'를 재서 저절로 따라온다 - 숫자를 두 곳에 두지 말 것. */
@media (max-width:1219px){
  /* 1열 세로 스택 - SVG 선은 끄고 CSS ▼ 로 흐름만 보인다.
     DOM 순서를 '읽는 순서'로 만들어 뒀기 때문에 그대로 쌓으면 말이 된다.
     ⚠ 자리는 인라인 style 이라 !important 가 필요하다. */
  .wc-wire{display:none}
  .wc-grid{grid-template-columns:1fr!important;row-gap:22px}
  .wc-grid>*{grid-column:1!important;grid-row:auto!important;justify-self:stretch!important;
    align-self:auto!important}
  .wc-grid>*:not(.wc-wire)+*::before{content:"";position:absolute;left:50%;top:-16px;
    margin-left:-5px;width:0;height:0;border:5px solid transparent;border-top-color:#9DC7F5}
  .wc-r,.wc-out{white-space:normal}
  .wc-d{width:100%}
  .wc-res{flex-direction:row;flex-wrap:wrap;justify-content:center}
  .wc-res .wc-r{flex:1 1 168px}
}

@media (max-width:900px){
  .wproc{grid-template-columns:1fr}
  .wc-li+.wc-li{margin-left:0;padding-left:0;border-left:0;display:block}
}

/* ── 우리가 해온 것 (히어로 + 클릭형 실적 리스트) ────────────────
   2026-09-17 대표님 수정지시:
   1) 하단 항목 5개 중 3개 먼저 노출, 화살표로 나머지 2개 more-toggle.
   2) 항목 클릭 → 히어로 배너에 해당 항목이 확대 노출(이미지 · 텍스트 교체),
      우하단에 관련 사업분야 CTA 노출. 다시 클릭하면 해제.
   3) 기본 배너 이미지는 연구진 사진(researchers.webp) - 항목 선택 시에만 교체.
   4) 배너 글자 스케일 확대, "년+" 단위를 숫자 옆 하단으로 이동.
   ⚠ 발주처명 · 계약금액 · 세부 방법론은 넣지 않는다(실적 노출 원칙). */
.tr-hero{position:relative;aspect-ratio:972/447;border-radius:var(--r);overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;padding:40px 44px;margin-bottom:22px;
  background:var(--navy)}
/* 모든 배너 사진은 핵심 피사체가 세로 가운데에 오도록 object-position을 center로
   통일하고, 살짝 확대(scale)해 위아래 여백을 줄여 크롭한다 - 사진마다 구도가 달라
   특정 사진(기본 사물 사진) 기준으로 튜닝한 값을 다른 사진에 그대로 쓰면 피사체가
   잘리므로(예: ROV 사진), 개별 사진 튜닝 대신 이 공통 규칙으로 맞춘다. */
.tr-hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center center;transform:scale(1.14);transition:opacity .22s var(--ease)}
.tr-hero-scrim{position:absolute;inset:0;transition:background .22s var(--ease);
  background:linear-gradient(90deg,rgba(4,14,28,.88) 0%,rgba(4,14,28,.5) 55%,rgba(4,14,28,.06) 100%)}
.tr-hero.active .tr-hero-scrim{background:linear-gradient(90deg,rgba(4,14,28,.8) 0%,rgba(4,14,28,.42) 55%,rgba(4,14,28,.06) 100%)}
.tr-hero-body{position:relative;z-index:1;transition:opacity .2s var(--ease)}
.tr-eyebrow{font-size:19px;font-weight:800;letter-spacing:2.2px;color:var(--sky);margin-bottom:18px;
  display:inline-block;padding:4px 14px;border:1px solid rgba(255,255,255,.55);border-radius:999px;
  background:rgba(8,20,36,.34);backdrop-filter:blur(2px)}
.tr-eyebrow:empty{display:none;margin-bottom:0;padding:0;border:0;background:none}
/* "TRACK RECORD" 문구를 없애고 연도만 남긴 자리라, 그만큼 30% 키운다 */
.tr-hero.active .tr-eyebrow{font-size:24.7px}
.tr-num{display:flex;align-items:flex-end;gap:9px;font-size:clamp(87px,13.1vw,131px);font-weight:800;
  color:#fff;line-height:1;letter-spacing:-1.5px}
.tr-num span{font-size:.32em;color:var(--sky);font-weight:800;line-height:1.35;padding-bottom:.12em}
/* 줄바꿈 없이 한 줄로 - 폭에 안 맞으면 site.js가 transform:scale()로 통째로 축소한다 */
.tr-hero.active .tr-num{display:block;font-size:clamp(40px,5.6vw,58px);letter-spacing:-.5px;
  max-width:none;white-space:nowrap;transform-origin:left bottom}
.tr-cap{font-size:clamp(31.8px,3.72vw,38.4px);color:rgba(255,255,255,.95);margin-top:12px;font-weight:600;
  line-height:1.55;max-width:640px}
/* 항목 배너의 부제는 줄바꿈하지 않는다 - 폭에 안 맞으면 site.js fitCap() 이 통째로 줄인다 */
.tr-hero.active .tr-cap{white-space:nowrap;max-width:none;width:max-content;
  transform-origin:left top}

.tr-cap:empty{display:none}
.tr-hero-cta{position:absolute;right:24px;bottom:24px;z-index:2;opacity:0;pointer-events:none;
  transform:translateY(8px);transition:.22s var(--ease);display:inline-flex;align-items:center;gap:7px;
  background:var(--blue);color:#fff;font-weight:800;font-size:17px;padding:15px 28px;border-radius:999px}
.tr-hero-cta:hover{background:var(--blue-d)}
.tr-hero.active .tr-hero-cta{opacity:1;pointer-events:auto;transform:none}
/* 기본 배너는 사물 위주 사진을 좌우반전해 글자 있는 왼쪽과 시각적으로 겹치지 않게 한다 -
   항목을 고르면 실제 현장 사진으로 바뀌므로 그때는 반전을 풀어야 한다(site.js 참고). */
.tr-hero-img.flip{transform:scale(1.14) scaleX(-1)}
/* 항목 사진은 세로 비율이 제각각이라 배너 비율(2.17:1)로 무조건 채우면(cover)
   세로가 긴 사진은 위아래가 과하게 잘려나간다. 배너 비율과 크게 다른 사진
   (.is-narrow, site.js가 자연 비율을 재서 판정)만 자르지 않고 전체를 보여주고
   (contain, 남는 좌우 공간은 배경 navy가 보임), 비율이 비슷한 사진은 그대로
   꽉 채운다(cover). */
.tr-hero.active .tr-hero-img{transform:none}
.tr-hero.active .tr-hero-img.is-narrow{object-fit:contain}
/* 항목 전환 시 글자가 줄어드는 스케일 애니메이션 대신 dissolve(불투명도)로만 전환한다(site.js) */
.tr-hero.fading .tr-hero-img,.tr-hero.fading .tr-hero-body,.tr-hero.fading .tr-hero-cta{opacity:0}

/* 하단 실적 리스트 - 좌우 슬라이드 캐러셀(measure한 카드 폭만큼 translateX 이동) +
   사진 풀블리드 정방형 카드(사진 위 50% 검정 오버레이 + 제목만 노출, 호버 시
   확대 · 색 전환 · CTA 노출). 화살표는 아래로 펼치지 않고 좌우로 밀어 가려진
   카드를 등장시킨다(site.js 참고). */
.tr-list-wrap{position:relative}
.tr-arrow{all:unset;box-sizing:border-box;position:absolute;top:50%;transform:translateY(-50%);
  width:46px;height:46px;border-radius:50%;background:var(--blue);color:#fff;display:grid;place-items:center;
  font-size:21px;line-height:1;cursor:pointer;box-shadow:0 4px 14px rgba(5,131,242,.32);
  transition:.22s var(--ease);z-index:3}
.tr-arrow:hover{background:var(--blue-d);box-shadow:0 6px 18px rgba(5,131,242,.42)}
.tr-arrow[disabled]{opacity:.32;cursor:default;pointer-events:none;box-shadow:none}
.tr-arrow.prev{left:-23px}
.tr-arrow.next{right:-23px}
@media(max-width:900px){.tr-arrow.prev{left:-8px}.tr-arrow.next{right:-8px}.tr-arrow{width:38px;height:38px;font-size:18px}}

.tr-viewport{overflow:hidden}
.tr-list{display:flex;gap:16px;transition:transform .45s var(--ease)}
.tr-item{all:unset;box-sizing:border-box;flex:0 0 calc((100% - 32px)/3);position:relative;cursor:pointer;
  aspect-ratio:1/1;border-radius:var(--r);overflow:hidden;display:block;background:var(--bg-2)}
.tr-item img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transition:transform .55s var(--ease)}
.tr-item:hover img{transform:scale(1.1)}
/* 파노라마 사진처럼 칸보다 훨씬 넓은 사진은 자르지 않고 전체를 보여 준다 */
.tr-item img.full{object-fit:contain;background:#0b1a2b}
.tr-item:hover img.full{transform:none}
/* 밝은 도면·그림은 기본 50% 오버레이로는 흰 글자가 안 읽힌다 */
.tr-item img.light + .tr-item-ov{background:rgba(4,14,28,.66)}


/* ⚠⚠ 기본 오버레이(50% 검정)와 호버용 파란 그라데이션을 같은 background 속성 안에서
   전환(swap)하면, 그라데이션은 브라우저가 transition으로 보간하지 못해 순간적으로
   아무 오버레이도 없는 원본 사진이 그대로 노출되는 프레임이 생긴다(2026-09-18,
   마우스를 뗄 때 공통적으로 발생). 그래서 검정 베이스는 항상 고정으로 깔아두고,
   파란 그라데이션은 별도 레이어(::after)로 얹어 opacity만 0↔1로 전환한다 -
   opacity는 확실하게 보간되므로 어떤 순간에도 검정 베이스가 사라지지 않는다. */
.tr-item-ov{position:absolute;inset:0;background:rgba(0,0,0,.5)}
.tr-item-ov::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(5,131,242,.56) 0%,rgba(4,102,192,.8) 100%);
  opacity:0;transition:opacity .3s var(--ease)}
.tr-item:hover .tr-item-ov::after,.tr-item.on .tr-item-ov::after{opacity:1}
/* 선택된 카드는 띠(테두리 링)를 둘러 표시한다 */
.tr-item.on{box-shadow:0 0 0 4px var(--blue) inset}
/* 캡션 - 연도 + 타이틀은 한 덩어리로 흐름에 두고(연도가 타이틀 바로 위에 붙어) 그
   덩어리째 이미지 정중앙에 오도록 한다. 부제 · CTA만 절대배치로 뺀다.
   타이틀은 20% 확대 · 한 줄에 안 들어가면 두 줄까지 허용(그래도 넘치면 말줄임). */
.tr-item-cap{position:absolute;inset:0;z-index:1;display:flex;flex-direction:column;
  align-items:center;justify-content:center;text-align:center;padding:22px;color:#fff}
.tr-item-cap .t{font-size:29.5px;font-weight:800;line-height:1.12;letter-spacing:-.3px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  overflow:hidden;text-overflow:ellipsis;max-width:100%}
/* 부제는 평소엔 숨기고 호버(선택) 시에만 노출 - 평소엔 타이틀만 보인다.
   타이틀이 두 줄일 수 있어 중앙에서 좀 더 아래로 띄운다. */
.tr-item-cap .d{position:absolute;left:50%;top:calc(50% + 52px);transform:translate(-50%,6px);
  opacity:0;transition:.22s var(--ease);font-size:13.5px;color:rgba(255,255,255,.88);
  line-height:1.55;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80%}
.tr-item:hover .tr-item-cap .d,.tr-item.on .tr-item-cap .d{opacity:1;transform:translate(-50%,0)}
/* 카드가 좁아지는 구간(2~3열)에서는 부제가 잘리므로 글자를 조금 줄이고 폭을 넓힌다 */
@media(min-width:561px) and (max-width:1100px){
  .tr-item:not(.wide) .tr-item-cap .d{font-size:12.2px;max-width:90%}
}

/* 호버 시 텍스트 링크가 아니라 실제 CTA 버튼처럼(채워진 배경) 출력한다 */
.tr-item-cap .go{position:absolute;left:50%;bottom:24px;transform:translate(-50%,6px);opacity:0;
  transition:.22s var(--ease);font-size:13.5px;font-weight:800;color:#fff;background:var(--blue);
  border-radius:999px;padding:10px 22px;box-shadow:0 4px 14px rgba(5,131,242,.4);white-space:nowrap}
.tr-item:hover .tr-item-cap .go,.tr-item.on .tr-item-cap .go{opacity:1;transform:translate(-50%,0)}
.tr-item:hover .tr-item-cap .go:hover{background:var(--blue-d)}
/* 카드가 좁아지면 제목이 두 줄이 되어 부제·버튼을 침범한다 - 글자를 줄여 한 줄로 */
@media(max-width:1300px){.tr-item:not(.wide) .tr-item-cap .t{font-size:24px}}
@media(max-width:1100px){.tr-item:not(.wide) .tr-item-cap .t{font-size:20px}}
/* 부제를 타이틀 바로 아래 자연스럽게 이어 붙인다(2026-09-22) - 절대좌표(50%+고정px)
   대신 흐름(정적 배치)으로 타이틀 밑에 쌓고, 평소엔 높이 0으로 접어 숨겼다가 호버 시 펼친다.
   CTA 버튼은 원래대로 카드 하단에 고정(절대배치) 유지. */
#track-record .tr-item:not(.wide) .tr-item-cap .d{position:static;left:auto;top:auto;
  transform:none;max-height:0;margin-top:0;overflow:hidden;
  transition:max-height .22s var(--ease),opacity .18s var(--ease),margin-top .22s var(--ease)}
#track-record .tr-item:not(.wide):hover .tr-item-cap .d,
#track-record .tr-item:not(.wide).on .tr-item-cap .d{max-height:40px;margin-top:6px}
/* CTA 버튼도 카드 하단 고정을 풀고 부제 바로 아래로 붙인다(2026-09-28) - 부제와 같은 방식으로
   평소엔 높이 · 위아래 안쪽여백을 0으로 접어 두어, 평소 제목이 카드 정중앙에 오는 건 그대로다. */
#track-record .tr-item:not(.wide) .tr-item-cap .go{position:static;left:auto;bottom:auto;transform:none;
  max-height:0;margin-top:0;padding-top:0;padding-bottom:0;overflow:hidden;
  transition:max-height .22s var(--ease),opacity .18s var(--ease),margin-top .22s var(--ease),
    padding .22s var(--ease),background .22s var(--ease)}
#track-record .tr-item:not(.wide):hover .tr-item-cap .go,
#track-record .tr-item:not(.wide).on .tr-item-cap .go{max-height:48px;margin-top:12px;padding-top:10px;padding-bottom:10px}
@media(min-width:901px){
  #track-record .tr-item:not(.wide):hover .tr-item-cap .go,
  #track-record .tr-item:not(.wide).on .tr-item-cap .go{margin-top:10px;padding-top:8px;padding-bottom:8px}
}
/* 1024px 쯤에서는 카드가 174px 밖에 안 돼 연도·제목·부제·버튼이 다 안 들어간다 - 부제는 뺀다 */
@media(min-width:901px) and (max-width:1100px){
  #track-record .tr-item .tr-item-cap .d{display:none}
}
@media(max-width:900px){.tr-item{flex-basis:calc((100% - 16px)/2)}}
@media(max-width:560px){.tr-item{flex-basis:100%}}

/* 가로형 배너, 한 줄에 2개씩("제도 대응 · 컨설팅") - 슬라이더 없이 6개를 2열로 배치.
   높이 250px(200px + 50px). 타이틀 30% 확대, 부제(시험 항목 나열)는 타이틀 바로
   아래 항상 노출(간격 최소화) - 타이틀 · 부제는 카드 가운데 정렬 유지. CTA는 평소엔
   숨겼다가 호버 시에만 배너 우하단에 나타난다(타이틀 · 부제 정렬과 무관하게 절대배치). */
.tr-list.stack{flex-direction:row;flex-wrap:wrap;gap:16px}
.tr-item.wide{flex:0 0 calc((100% - 16px)/2);aspect-ratio:auto;height:250px}
/* 제도 대응 · 컨설팅 6종 배너 타이틀 · 부제 30% 확대(2026-09-18 대표님) */
.tr-item.wide .tr-item-cap .t{font-size:50.05px}
.tr-item.wide .tr-item-cap .d{position:static;opacity:1;transform:none;margin-top:4px;
  font-size:17.55px;max-width:90%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tr-item.wide .tr-item-cap .go{position:absolute;left:auto;right:20px;bottom:20px;top:auto;
  margin-top:0;opacity:0;transform:translateY(6px);font-size:17.5px;padding:13px 29px}
.tr-item.wide:hover .tr-item-cap .go,.tr-item.wide.on .tr-item-cap .go{
  opacity:1;transform:translateY(0)}
@media(max-width:700px){.tr-item.wide{flex-basis:100%;height:220px}
  .tr-item.wide .tr-item-cap .t{font-size:33.8px}
  .tr-item.wide .tr-item-cap .go{right:14px;bottom:14px}}

/* ── 대표 제품 · 서비스 (2026-09-17 재구성) ──────────────────────
   소모품을 뺀 나머지는 전부 서비스 영역이라 두 그룹으로 분리:
   ① 서비스 6개(제도 대응 · 컨설팅 포함) - track-record와 같은 .tr-item 캐러셀 재사용
   ② 소모품 2개 - 아래 고정 2열(.tr-list.cols-2, 슬라이더 없이 그대로 노출)
   ⚠ 화면에는 매출 금액 · 정렬 근거 수치를 노출하지 않는다(내부용 데이터는 넣지 않음). */
.psv-group-head{margin-bottom:16px}
.psv-group-title{font-size:24px;font-weight:800;color:var(--ink);letter-spacing:-.4px}
/* "국내 최초 사례들로 증명된 연구력" · "대표 서비스 · 제품" 제목만 20% 확대,
   "제도 대응 · 컨설팅" · "소모품 · 시약" 소제목은 30% 확대(2026-09-18 대표님) -
   .sec-head h2 · .psv-group-title 은 다른 섹션에서도 재사용하므로 전역이 아니라
   이 두 섹션에 한정해서만 키운다. */
#track-record .sec-head h2,#products .sec-head h2,#home-products .sec-head h2{font-size:clamp(32.4px,4.2vw,49.2px)}
#products .psv-group-title,#home-products .psv-group-title{font-size:31.2px}
#products .card .kicker,#home-products .card .kicker{font-size:15.2px;margin-bottom:3px}
#products .card h3,#home-products .card h3{font-size:23.4px}
/* 2026-10-13 대표님 - 첫 화면 '제품' 칸을 따로 뗐다. 첫 소제목 오른쪽에 '제품 구매 →'(NEB NEWS 의 '전체 보기' 와 같은 글자) */
.psv-group-head.has-link{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
/* 문의 칸 = 흰 바탕(2026-10-13 대표님 - 남색 띠를 걷었다). 앞뒤 회색 칸(제품 · NEB NEWS)과 흰 · 회 번갈음이 맞는다. */
.tr-list.cols-2{display:flex}
.tr-list.cols-2 .tr-item{flex:0 0 calc((100% - 16px)/2)}
@media(max-width:560px){.tr-list.cols-2 .tr-item{flex-basis:100%}}

/* 실적 섹션 한 화면 맞춤(데스크톱) - 2026-09-22 전병관 사원 시안에서 가져옴.
   제목 · 배너 · 하단 카드가 100% 배율에서 스크롤 없이 한 번에 보이도록 여백을 줄이고,
   카드는 가로로 눕히며(1.7:1), 배너는 남는 화면 높이(100svh - 나머지 요소)만큼만 쓴다.
   ⚠ 조절할 곳은 아래 3가지 - 섹션 여백 / 배너 높이의 493px / 카드 비율.
   ⚠ 493 = 헤더 + 제목 + 카드 + 여백의 합. 제목 크기를 바꾸면 이 값도 다시 재야 한다. */
@media(min-width:901px){
  #track-record{padding:32px 0 8px}                          /* 섹션 위아래 여백 */
  #track-record .sec-head{margin-bottom:18px}                /* 제목 아래 간격 */
  #track-record .tr-hero{aspect-ratio:auto;margin-bottom:16px;
    height:clamp(300px,calc(100svh - 493px),596px)}          /* 배너 높이 */
  #track-record .tr-item{flex-basis:calc((100% - 32px)/3);   /* 하단 카드 3개씩(나머지는 화살표) */
    aspect-ratio:16/9}                                       /* 카드 비율 16:9 - 사진 규격과 맞춘다 */
  /* 연도 배지를 없애 제목만 남은 뒤로는 별도로 위로 밀 필요가 없다 - 제목이 카드 정중앙에 오게 둔다 */
  #track-record .tr-item-cap .d{top:calc(50% + 40px)}
  #track-record .tr-item-cap .go{bottom:14px;padding:8px 18px}
}


/* 소모품 · 시약 카드 그리드 - 8개 전부 바로 노출(2026-09-18, "더 보기" 폐지) */
.tr-more{all:unset;box-sizing:border-box;cursor:pointer;display:flex;align-items:center;gap:8px;
  justify-content:center;margin:20px auto 0;width:fit-content;font-size:13.4px;font-weight:800;
  color:var(--blue);padding:11px 22px;border:1px solid var(--line);border-radius:999px;transition:.2s}
.tr-more:hover{border-color:var(--blue);background:#EAF3FE}
.tr-more i{font-style:normal;transition:transform .24s var(--ease)}
.tr-more.open i{transform:rotate(180deg)}


/* ══ 문의 페이지 - 시험 의뢰 진행 순서 · 시험 조건 ══════════════════
   ⚠ 사업분야 상세에서 뺀 두 블록을 여기로 옮겼다(2026-09-19 대표님).
   ⚠ 안쪽은 기존 `.steps` · `.spectbl` 을 그대로 쓴다 - 두 벌로 두지 않는다. */
.inq-guide{margin-top:clamp(34px,4vw,52px);border-top:1px solid var(--line);padding-top:clamp(26px,3vw,38px)}
.ig-tog{display:flex;justify-content:space-between;align-items:center;gap:14px;width:100%;
  padding:16px 20px;border:1px solid var(--line);border-radius:10px;background:#fff;
  cursor:pointer;font:inherit;text-align:left;transition:.2s var(--ease)}
.ig-tog:hover{border-color:var(--blue);background:#f7fafd}
.ig-tog b{font-size:16.5px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.ig-tog span{flex:0 0 auto;font-size:14.4px;font-weight:800;color:var(--blue)}
.ig-body{padding:clamp(18px,2vw,26px) 2px 0}
.ig-area{margin:0 0 14px;font-size:14.6px;font-weight:800;color:var(--blue);letter-spacing:.01em}
.ig-empty{margin:0;font-size:15.4px;color:var(--stone);line-height:1.7}
.ig-body .spectbl{margin-top:clamp(24px,2.6vw,34px)}


/* ══ '하는 일' - 요약 제목 + 번호 칸(2026-09-19 대표님 목업) ══════════
   ⚠ 줄글이 눈에 안 들어온다는 지적을 받아, 큰 제목 한 줄 + 한 줄 설명 + 번호 칸으로 바꿨다.
   ⚠ `workSteps` 를 적은 소분류만 이 배치다 - 나머지는 예전 줄글 그대로. */
.wk-sum{margin-top:6px}
.wk-h{margin:0;font-size:clamp(21px,1.95vw,29px);font-weight:800;letter-spacing:-.03em;
  color:var(--ink);line-height:1.28}
.wk-lead{margin:12px 0 0;font-size:clamp(15.4px,1.24vw,17.4px);color:var(--stone);
  line-height:1.65;letter-spacing:-.01em}
/* `workLeadFit` 소분류만 - 칸 폭에 맞춰 한 줄이 되는 만큼만 키운다(최대 20px).
   ⚠ 41.5 = 해양바이오 소재개발 문장 폭(40.74em) + 여유. 문장을 바꾸면 다시 잴 것.
   좁은 화면에선 15.4px 아래로 줄이지 않고 어절 단위로 넘긴다. */
.wk-sum:has(.wk-lead.fit){container-type:inline-size}
.wk-lead.fit{font-size:clamp(15.4px,calc(100cqi / 41.5),20px);word-break:keep-all}
/* ⚠⚠ 칸을 나누던 세로 실선 -> **카드**(2026-09-19 대표님 - "디자인 괜찮긴한데 카드형으로").
   ⚠ 모양은 시험 생물 카드(`.tx-card`)와 같은 언어를 쓴다 - 흰 바탕 + 1px 테두리 + 16px 둥근 모서리.
      같은 패널 안에 두 종류의 카드가 나란히 놓이므로 여기서 새 모양을 만들지 말 것.
   ⚠ 칸 수는 `repeat(3,...)` 고정이다 - `workSteps` 가 4개 이상인 소분류를 만들면 여기도 볼 것. */
.wk-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:clamp(14px,1.4vw,20px);margin-top:clamp(22px,2.6vw,34px)}
/* 번호 칸 아래 그림(`workImg`) - 번호 칸과 같은 카드 말투(흰 바탕 · 1px 테두리 · 16px 모서리) */
.wk-img{margin:clamp(14px,1.4vw,20px) 0 0;padding:clamp(10px,1.2vw,16px);background:#fff;
  border:1px solid var(--line);border-radius:16px;box-shadow:var(--sh-1)}
.wk-img img{display:block;width:100%;height:auto;border-radius:8px}
.wk-steps>div{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:clamp(10px,.9vw,14px);align-content:start;
  padding:clamp(20px,1.9vw,26px) clamp(18px,1.7vw,24px) clamp(22px,2vw,28px);
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.wk-steps>div:hover{border-color:var(--sky);box-shadow:var(--sh-2)}
/* ⚠ 번호와 제목은 **한 줄**에(2026-09-19 대표님 - "제목들이 숫자 옆으로 가도될거같고").
   ⚠ 글자 크기가 다르므로 `align-self:baseline` 으로 맞춘다 - 가운데 정렬하면 어긋나 보인다.
   ⚠ 제목이 두 줄이 되면 첫 줄 기준으로 맞는다(의도). */
.wk-steps b{grid-column:1;grid-row:1;align-self:baseline;
  font-size:clamp(19px,1.72vw,24px);font-weight:800;color:var(--blue);
  letter-spacing:-.02em;line-height:1.25}
.wk-steps strong{grid-column:2;grid-row:1;align-self:baseline;min-width:0;
  font-size:clamp(16.5px,1.5vw,21px);font-weight:800;color:var(--ink);
  letter-spacing:-.02em;line-height:1.25;word-break:keep-all}
.wk-steps span{grid-column:1/-1;grid-row:2;margin-top:clamp(12px,1.1vw,16px);
  font-size:clamp(15.2px,1.2vw,16.8px);
  color:var(--stone);line-height:1.66;word-break:keep-all}
/* ⚠⚠ 짧은 파란 줄(26x3)은 **번호 오른쪽**에 둔다
   (2026-09-19 대표님 - "하단으로 파란 줄이 있는데 번호 오른쪽에 있는게 더 이쁜거 같음").
   ⚠ 설명 위에 있던 `span::before` 를 옮긴 것이다 - 둘을 함께 두면 줄이 두 개가 된다.
   ⚠ `b` 안에 inline-block 으로 넣어 번호와 같은 줄에 선다 - 설명이 없는 칸에도 나온다.
   ⚠⚠ **눋히지 말고 세운다**(2026-09-19 대표님 - "이렇게 눋히지말고 세워야지 | 이런식으로").
   ⚠ 높이는 px 이 아니라 `em` 으로 - 번호 글자가 커지고 작아질 때 함께 따라와야 한다.
   ⚠ `vertical-align:baseline` 이라 바닥이 숫자 밑선에 선다. `.78em` 이 숫자 높이와 거의 같다. */
.wk-steps b::after{content:"";display:inline-block;width:3px;height:.78em;border-radius:2px;
  background:var(--blue);margin-left:clamp(10px,.9vw,14px);
  vertical-align:baseline;position:relative;top:.02em}
@media (max-width:820px){
  .wk-steps{grid-template-columns:1fr;gap:12px}
  .wk-steps>div{padding:18px 18px 20px}
}
/* -- 흐름 그림 (2026-09-20) - 그림 한 장 + 그 위치에 얹는 단계 이름
   ⚠ 전용 이름 wf-* 를 쓴다(시안 전체에 0건인 것을 확인하고 지었다 - 2-38-3-19 · 2-38-3-27 교훈) */
.wflow{margin:28px 0 0;padding:22px 20px 16px;background:#eff6ff;border:1px solid #dbeafe;border-radius:14px}
.wf-t{font-weight:800;font-size:17px;color:#1d4ed8;margin:0 0 14px;letter-spacing:-.01em}
/* 부제목이 있는 흐름 그림 - 제목은 섹션 제목(.wa-t 20px) 크기, 부제목은 실적 부제(.wcs-sub)와 같은 말투 */
.wf-t.has-sub{font-size:20px;letter-spacing:-.02em;margin-bottom:6px}
.wf-sub{margin:0 0 16px;font-size:15px;line-height:1.6;color:var(--slate);word-break:keep-all;
  white-space:pre-line}
/* ⚠ overflow-x:auto 는 overflow-y 까지 auto 로 만든다 - 1~2px 만 넘쳐도 세로 스크롤바가 생긴다 */
.wf-scroll{overflow-x:auto;overflow-y:hidden}
/* ⚠ 도식은 좁은 화면에서도 자르지 않는다 - min-width 로 가로 스크롤(라벨이 겹치지 않는 최소 폭) */
.wf-in{position:relative;min-width:580px}
.wf-in img{display:block;width:100%;height:auto;border-radius:8px}
.wf-labels{position:relative;height:24px;margin-top:8px}
.wf-labels span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;
  font-size:14.4px;font-weight:700;color:#0f172a}
@media (max-width:720px){
  .wflow{padding:18px 14px 14px}
  .wf-t{font-size:15.6px;margin-bottom:10px}
  .wf-t.has-sub{font-size:18px;margin-bottom:5px}
  .wf-sub{font-size:14px;margin-bottom:12px}
  .wf-labels span{font-size:13px}
}
/* -- 흐름 그림 갈래(오른쪽 라벨) · 블록 제목 · 관련 제품 평가 · 보유 생물종 (2026-09-20) */
.wf-in.has-side{display:grid;grid-template-columns:1fr auto;grid-template-rows:auto auto;column-gap:16px}
.wf-in.has-side .wf-img{grid-column:1;grid-row:1}
.wf-in.has-side .wf-side{grid-column:2;grid-row:1;position:relative;min-width:92px}
.wf-in.has-side .wf-labels{grid-column:1;grid-row:2}
.wf-side span{position:absolute;left:0;transform:translateY(-50%);white-space:nowrap;
  font-size:14.4px;font-weight:700;color:#0f172a}

.wg-t{font-weight:800;font-size:17px;color:#0f172a;margin:30px 0 13px;
  padding-bottom:8px;border-bottom:1px solid var(--line);letter-spacing:-.01em}

.wr-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.wr-item{display:flex;gap:14px;align-items:flex-start;padding:18px 20px;background:#fff;
  border:1px solid var(--line);border-radius:12px}
.wr-ic{flex:0 0 auto;width:44px;height:44px;border-radius:50%;background:#e0f2fe;color:#0284c7;
  display:grid;place-items:center}
.wr-ic svg{width:24px;height:24px}
.wr-tx{min-width:0}
.wr-tx b{display:block;font-size:16px;color:#0f172a;margin-bottom:5px}
.wr-tx p{margin:0 0 6px;font-size:14.4px;color:#475569;line-height:1.62}
.wr-tx small{font-size:13px;color:#64748b}

.ws-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));background:#f8fafc;
  border:1px solid var(--line);border-radius:12px;padding:18px 0}
.ws-item{text-align:center;padding:4px 14px;border-left:1px solid var(--line)}
.ws-item:first-child{border-left:0}
.ws-item i{display:block;font-size:15.4px;font-weight:700;font-style:italic;color:#0f172a;margin-bottom:5px}
.ws-item span{font-size:13.6px;color:#64748b}

@media (max-width:900px){
  .wr-grid{grid-template-columns:1fr}
  .ws-grid{grid-template-columns:1fr;padding:8px 0}
  .ws-item{border-left:0;border-top:1px solid var(--line);padding:12px 14px}
  .ws-item:first-child{border-top:0}
}
/* -- 절차 흐름도 (2026-09-20) - 왼쪽 단계 · 오른쪽 상세, 색으로 짝을 맞춘다 */
.pflow{margin:30px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.pf-t{background:#1e3a5f;color:#fff;font-weight:800;font-size:16.5px;text-align:center;padding:12px 16px}
.pf-body{display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);gap:22px;padding:22px 20px}
.pf-steps{display:flex;flex-direction:column;align-items:stretch}
.pf-step{position:relative;border:1.5px solid #94a3b8;border-radius:8px;padding:11px 12px;
  background:#fff;text-align:center}
.pf-step b{font-size:14.6px;font-weight:700;color:#0f172a}
.pf-step.amber{border-color:#f59e0b;border-style:dashed;padding:9px;background:#fffbeb}
.pf-step.indigo{border-color:#6366f1;background:#eef2ff}
.pf-step.green{border-color:#10b981;background:#ecfdf5}
.pf-step.end{background:#1e3a5f;border-color:#1e3a5f}
.pf-step.end b{color:#fff}
.pf-cols{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.pf-cols span{display:block;border:1px solid #cbd5e1;border-radius:6px;background:#fff;
  padding:8px 4px;font-size:12.6px;font-weight:700;color:#0f172a;line-height:1.35}
/* 되돌아가는 흐름 - 선 대신 배지(어디로 돌아가는지 글로 밝힌다) */
.pf-back{display:block;margin-top:7px;font-style:normal;font-size:12.2px;font-weight:700;color:#dc2626}
.pf-ar{display:block;width:2px;height:26px;background:#94a3b8;margin:0 auto;position:relative}
.pf-ar::after{content:"";position:absolute;left:50%;bottom:-1px;transform:translateX(-50%);
  border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid #94a3b8}
.pf-ar span{position:absolute;left:10px;top:50%;transform:translateY(-50%);white-space:nowrap;
  font-size:12px;font-weight:700;color:#2563eb}

.pf-details{display:flex;flex-direction:column;gap:14px}
.pf-det{border:1.5px dashed #cbd5e1;border-radius:10px;padding:14px;display:grid;gap:12px}
.pf-det.amber{border-color:#f59e0b;background:#fffbeb;grid-template-columns:repeat(3,minmax(0,1fr))}
.pf-det.indigo{border-color:#6366f1;background:#eef2ff}
.pf-det.green{border-color:#10b981;background:#ecfdf5;grid-template-columns:repeat(2,minmax(0,1fr))}
.pf-g{background:#fff;border:1px solid var(--line);border-radius:8px;padding:11px 12px;min-width:0}
.pf-g b{display:block;font-size:13.8px;font-weight:800;color:#0f172a;text-align:center;
  padding-bottom:7px;margin-bottom:7px;border-bottom:1px solid var(--line)}
.pf-g ul{margin:0;padding-left:15px}
.pf-g li{font-size:12.8px;color:#334155;line-height:1.7}
.pf-ch-h,.pf-ch-f{text-align:center;font-size:13.8px;font-weight:800;color:#0f172a;
  background:#fff;border:1px solid #6366f1;border-radius:8px;padding:8px;margin:0 auto;max-width:190px}
.pf-chain{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.pf-chain span{display:block;background:#fff;border:1px solid #c7d2fe;border-radius:8px;
  padding:9px 6px;font-size:12.6px;font-weight:700;color:#0f172a;text-align:center;line-height:1.38}

@media (max-width:1100px){
  .pf-body{grid-template-columns:1fr}
}
@media (max-width:640px){
  .pf-det.amber,.pf-det.green{grid-template-columns:1fr}
  .pf-chain{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf-cols{grid-template-columns:1fr}
}

/* ── 계층 흐름도 (2026-09-20) - 시료 하나에서 여러 시험으로 갈라지는 그림 */
.tflow{margin:30px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.tf-t{background:#1e3a5f;color:#fff;font-weight:800;font-size:16.5px;text-align:center;padding:12px 16px}
.tf-body{padding:24px 20px 18px;overflow-x:auto;overflow-y:hidden}
/* ⚠ 좁은 화면에서도 자르지 않는다 - min-width 로 가로 스크롤 */
.tf-in{min-width:660px}
.tf-root{background:#2563eb;color:#fff;font-weight:800;font-size:15.4px;text-align:center;
  padding:11px 18px;border-radius:8px;max-width:330px;margin:0 auto}
.tf-row{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px;
  margin-top:28px;position:relative}
.tf-row::before{content:"";position:absolute;left:50%;top:-22px;width:2px;height:13px;background:#94a3b8}
.tf-cell{position:relative;min-width:0}
.tf-cell::before{content:"";position:absolute;left:50%;top:-9px;width:2px;height:9px;background:#94a3b8}
.tf-cell::after{content:"";position:absolute;left:50%;top:-1px;transform:translateX(-50%);
  border-left:4px solid transparent;border-right:4px solid transparent;border-top:6px solid #94a3b8}
.tf-box{background:#2a7f8a;color:#fff;border-radius:7px;padding:10px}
.tf-box b{display:block;font-size:12.8px;font-weight:700;line-height:1.36;text-align:center}
.tf-box i{display:block;font-style:normal;font-size:11.4px;opacity:.86;margin-top:3px;text-align:center}
.tf-kids{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:7px;
  margin-top:11px;position:relative}
.tf-kids::before{content:"";position:absolute;left:50%;top:-11px;width:2px;height:11px;background:#94a3b8}
.tf-kids span{display:block;background:#dfeced;border:1px solid #b5d0d4;border-radius:5px;
  padding:6px 3px;font-size:11.8px;font-weight:700;color:#0f172a;text-align:center;line-height:1.35}
.tf-note{border-top:1px solid var(--line);padding:11px 18px;font-size:12.8px;color:#64748b;text-align:center}

/* ── 제도 · 기준 상자 (2026-09-20) */
.sbox{margin:30px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.sb-t{background:#1e3a5f;color:#fff;font-weight:800;font-size:16.5px;text-align:center;padding:12px 16px}
.sb-body{padding:22px 20px 18px}
.sb-it + .sb-it{margin-top:22px}
.sb-h{font-weight:800;font-size:15.4px;color:#0f172a;padding-left:11px;
  border-left:4px solid #3d8fb9;line-height:1.3;margin-bottom:9px}
.sb-p{margin:0;font-size:14.4px;color:#475569;line-height:1.72}
/* 번호 목록(2026-09-29 사전신고 내용) - 넓으면 2단(위에서 아래로), 좁으면 1단 */
.sb-ol{margin:0;padding:0 0 0 1.5em;columns:2;column-gap:44px;font-size:15px;color:#334155;line-height:1.65}
.sb-ol li{break-inside:avoid;margin:0 0 7px;padding-left:3px}
.sb-ol li::marker{color:var(--blue);font-weight:800}
@media (max-width:760px){.sb-ol{columns:1}}
.sb-tw{overflow-x:auto;overflow-y:hidden}
.sb-tbl{border-collapse:collapse;width:100%;min-width:430px}
.sb-tbl th{background:#3d8fb9;color:#fff;font-weight:800;font-size:13.6px;
  padding:10px 12px;border:1px solid #2f7ba3;text-align:center}
.sb-tbl td{border:1px solid var(--line);padding:10px 12px;font-size:13.6px;
  color:#334155;text-align:center}
.sb-tbl tbody tr:nth-child(even) td{background:#f8fafc}

/* ── 절차 흐름도 - 판정 · YES 갈래 · 빨강 톤 · 2열 상세 (2026-09-20) */
.pf-step.judge{border-color:#2563eb;background:#eff6ff}
.pf-yes{display:block;margin-top:6px;font-style:normal;font-size:12.2px;font-weight:700;color:#059669}
.pf-step.red{border-color:#dc2626;background:#fef2f2}
.pf-det.red{border-color:#dc2626;background:#fef2f2}
/* ⚠ .pf-det.indigo 보다 뒤에 와야 열 수가 이긴다(같은 특이도) */
.pf-det.two{grid-template-columns:repeat(2,minmax(0,1fr))}
/* ⚠ 칸이 2개일 때도 꽉 차게 - repeat(3) 고정이면 빈 칸이 남는다 */
.pf-cols{display:flex;gap:6px}
.pf-cols span{flex:1 1 0;min-width:0}
@media (max-width:640px){
  .pf-det.two{grid-template-columns:1fr}
  .pf-cols{flex-direction:column}
}

/* ⚠ 원인물질탐색 상세는 머리 -> 갈래 -> 결과 세로 배치다(원본과 같게).
   .pf-det.amber(3열) 보다 뒤에 와야 이긴다 - 같은 특이도. */
.pf-det.one{grid-template-columns:minmax(0,1fr)}
.pf-det.amber .pf-ch-h,.pf-det.amber .pf-ch-f{border-color:#f59e0b}
.pf-det.amber .pf-chain span{border-color:#fcd34d}

/* -- 주요 수행 실적 카드 (2026-09-20) ------------------------------ */
.wcase{margin-top:30px}
.wcase .wcs-sub{margin:-6px 0 14px;font-size:15px;color:var(--slate)}
.wcs-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.wcs-item{background:#fff;border:1px solid var(--line);border-radius:16px;
  overflow:hidden;box-shadow:var(--sh-1)}
.wcs-item img{display:block;width:100%;aspect-ratio:3/1;object-fit:cover}
.wcs-tx{padding:14px 16px 16px}
.wcs-tx b{display:block;font-size:17.5px;color:#14203c;margin-bottom:7px}
.wcs-year{font-style:normal;color:var(--blue);font-weight:800;margin-right:9px}
.wcs-year::after{content:"|";color:var(--line);margin-left:9px;font-weight:400}
.wcs-tx p{margin:0 0 3px;font-size:14.6px;line-height:1.62;color:var(--slate)}
.wcs-tx p:last-child{margin-bottom:0}
@media (max-width:820px){.wcs-grid{grid-template-columns:1fr}}
/* 사진 위 · 글 아래 카드(연안 생태계 복원)는 **윗줄 3개 · 아랫줄 4개** (2026-09-29 대표님).
   12칸 격자 - 앞 3개는 4칸씩, 나머지는 3칸씩. 자료는 최근 연도부터 넣는다.
   ⚠ .side(해양바이오 소재개발)는 건드리지 않는다. */
.wcs-grid:not(.side):not(.stack){grid-template-columns:repeat(12,minmax(0,1fr));gap:14px}
.wcs-grid:not(.side):not(.stack) .wcs-item{grid-column:span 3}
.wcs-grid:not(.side):not(.stack) .wcs-item:nth-child(-n+3){grid-column:span 4}
.wcs-grid:not(.side):not(.stack) .wcs-item img{aspect-ratio:5/3}
.wcs-grid:not(.side):not(.stack) .wcs-tx{padding:12px 14px 14px}
.wcs-grid:not(.side):not(.stack) .wcs-tx b{font-size:15.6px;line-height:1.4}
/* 설명 글자는 원래 크기. 아랫줄 좁은 칸에서 넘치는 줄은 자료에 \n 으로 끊을 자리를
   직접 넣었다(pre-line) - 아무 데서나 끊겨 '공급' 한 단어만 넘어가는 일을 막는다. */
.wcs-grid:not(.side):not(.stack) .wcs-tx p{font-size:13.4px;line-height:1.55;white-space:pre-line}
/* 연도 - 사진 오른쪽 아래 배지 (2026-09-29) */
.wcs-ph{position:relative}
.wcs-ybadge{position:absolute;right:10px;bottom:10px;padding:3px 10px;border-radius:999px;
  background:rgba(255,255,255,.92);color:var(--blue);font-style:normal;font-weight:800;
  font-size:13px;line-height:1.5;box-shadow:0 1px 4px rgba(15,23,42,.18)}
@media (max-width:1024px){.wcs-grid:not(.side):not(.stack){grid-template-columns:repeat(2,minmax(0,1fr))}
  .wcs-grid:not(.side):not(.stack) .wcs-item,
  .wcs-grid:not(.side):not(.stack) .wcs-item:nth-child(-n+3){grid-column:auto}}
@media (max-width:560px){.wcs-grid:not(.side):not(.stack){grid-template-columns:1fr}}

/* -- 세로 카드 4개 `casesStack` (2026-09-29 대표님 시안 - 해양바이오 소재개발)
      사진(투명 배경 소재 사진) · 이름 · 점 목록 · 맨 아래 인증서.
      ⚠ 인증서는 카드 바닥에 맞춰 네 장이 한 줄로 서도록 margin-top:auto. */
.wcs-grid.stack{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.wcs-grid.stack .wcs-item{display:flex;flex-direction:column}
.wcs-grid.stack .wcs-pic{padding:14px 14px 0}
.wcs-grid.stack .wcs-pic img{width:100%;aspect-ratio:4/3;object-fit:contain}
.wcs-grid.stack .wcs-tx{padding:14px 18px 0}
.wcs-grid.stack .wcs-tx b{font-size:17.5px;margin-bottom:12px}
.wcs-grid.stack ul{margin:0;padding:0;list-style:none}
.wcs-grid.stack li{position:relative;padding-left:11px;margin-bottom:5px;font-size:14.2px;
  line-height:1.6;color:var(--slate);word-break:keep-all}
.wcs-grid.stack li::before{content:"·";position:absolute;left:0;top:0;font-weight:700}
.wcs-grid.stack .wcs-cert{margin-top:auto;padding:18px 18px 18px;display:flex;justify-content:center}
.wcs-grid.stack .wcs-cert img{width:auto;max-width:68%;aspect-ratio:auto;height:auto;
  object-fit:initial;box-shadow:0 2px 10px rgba(15,23,42,.14);border-radius:2px}
@media (max-width:1024px){.wcs-grid.stack{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.wcs-grid.stack{grid-template-columns:1fr}
  .wcs-grid.stack .wcs-cert img{max-width:52%}}

/* 흐름 그림 라벨에 설명이 있을 때만 (없으면 예전 24px 한 줄 그대로) */
.wf-labels.has-d{height:auto;min-height:86px;margin-top:12px}
.wf-labels.has-d span{white-space:normal;width:21%;text-align:center;line-height:1.5}
.wf-labels.has-d span b{display:block;font-size:15.4px;color:#14203c;margin-bottom:4px}
/* pre-line - 자료의 \n 을 대표님 시안 줄바꿈 그대로 살린다(2026-09-29 연안 생태계 복원) */
.wf-labels.has-d span i{display:block;font-style:normal;font-size:13.2px;
  line-height:1.55;color:var(--slate);white-space:pre-line}
@media (max-width:900px){.wf-labels.has-d{min-height:104px}
  .wf-labels.has-d span{width:23%}
  .wf-labels.has-d span b{font-size:14px}
  .wf-labels.has-d span i{font-size:12.2px}}

/* ══ 개념 페이지(블루카본) - concept 자료가 있는 소분류만 ══════════ */
.bcp{--bcp-ink:#14203c}
.bcp-hero{position:relative;display:grid;grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
  align-items:center;gap:0;min-height:300px;margin-bottom:34px}
.bcp-hero-ph{position:absolute;inset:0 0 0 38%;border-radius:0 18px 18px 0;overflow:hidden}
.bcp-hero-ph img{width:100%;height:100%;object-fit:cover;display:block}
.bcp-hero-ph::before{content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(90deg,#fff 0%,rgba(255,255,255,.86) 26%,rgba(255,255,255,0) 62%)}
.bcp-hero-tx{position:relative;z-index:2;padding:16px 0}
.bcp-eyebrow{font-size:12.6px;font-weight:800;letter-spacing:.14em;color:var(--blue);
  margin-bottom:9px}
.bcp-title{margin:0 0 6px;font-size:clamp(34px,3.6vw,46px);font-weight:800;
  letter-spacing:-.03em;color:var(--bcp-ink);line-height:1.12}
.bcp .bcp-sub{margin:0 0 14px;font-size:clamp(19px,1.7vw,23px);font-weight:800;color:var(--blue)}
.bcp .bcp-desc{margin:0 0 20px;font-size:15.6px;line-height:1.78;color:var(--slate);max-width:30em}
.bcp-cta{display:inline-flex;align-items:center;gap:7px;padding:12px 20px;border-radius:8px;
  border:1px solid var(--blue);background:var(--blue);color:#fff;font-size:15px;
  font-weight:700;cursor:pointer;font-family:inherit}
.bcp-cta:hover{filter:brightness(1.06)}
.bcp-cta.ghost{background:#fff;color:var(--blue)}

.bcp-sec{margin-top:36px;padding:0}
.bcp-kick{font-size:13px;font-weight:800;color:var(--blue);margin-bottom:7px;
  padding-bottom:9px;border-bottom:1px solid var(--line)}
.bcp-h{margin:0 0 16px;font-size:clamp(22px,2.1vw,27px);font-weight:800;
  letter-spacing:-.02em;color:var(--bcp-ink)}

.bcp-eco{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.bcp-eco-i img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;
  border-radius:14px;margin-bottom:11px}
.bcp-eco-i b{display:block;font-size:17.5px;color:var(--bcp-ink);margin-bottom:5px}
.bcp-eco-i p{margin:0;font-size:14.4px;line-height:1.6;color:var(--slate)}

.bcp-how{background:#eef5fb;border-radius:18px;padding:18px}
.bcp-fig{position:relative;border-radius:12px;overflow:hidden}
.bcp-fig img{display:block;width:100%;height:auto}
.bcp-lab{position:absolute;transform:translate(-50%,-50%);background:#fff;
  border-radius:999px;padding:5px 12px;font-size:13px;font-weight:700;
  color:var(--bcp-ink);white-space:nowrap;box-shadow:0 2px 8px rgba(16,36,68,.18)}
.bcp-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:16px}
.bcp-steps>div{display:grid;grid-template-columns:auto minmax(0,1fr);
  column-gap:9px;align-items:baseline}
.bcp-steps b{font-size:21px;font-weight:800;color:var(--blue);letter-spacing:-.02em}
.bcp-steps b::after{content:"|";color:var(--line);margin-left:9px;font-weight:400}
.bcp-steps strong{font-size:17px;color:var(--bcp-ink)}
.bcp-steps span{grid-column:2;display:block;margin-top:5px;font-size:14.4px;
  line-height:1.62;color:var(--slate)}
.bcp-val{margin-top:0}

.bcp-outro{position:relative;margin-top:34px;padding:26px 28px;border-radius:18px;
  background:#eef5fb;background-size:cover;background-position:right center;overflow:hidden}
.bcp-outro::before{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,#eef5fb 0%,rgba(238,245,251,.92) 52%,rgba(238,245,251,.35) 100%)}
.bcp-outro>*{position:relative;z-index:1}
.bcp-outro b{display:block;font-size:21px;font-weight:800;color:var(--bcp-ink);margin-bottom:8px}
.bcp-outro p{margin:0 0 16px;font-size:15px;line-height:1.7;color:var(--slate);max-width:44em}
.bcp .bcp-credit{margin:14px 0 0;text-align:right;font-size:12.4px;color:var(--slate)}

@media (max-width:900px){
  .bcp-hero{grid-template-columns:1fr;min-height:0}
  .bcp-hero-ph{position:relative;inset:auto;height:210px;border-radius:14px;margin-bottom:16px}
  .bcp-hero-ph::before{background:none}
  .bcp-eco,.bcp-steps{grid-template-columns:1fr}
  .bcp-lab{font-size:11px;padding:3px 8px}
}
@media (max-width:640px){.bcp-lab{font-size:9.5px;padding:2px 6px}}

/* ── 해양바이오 소재개발 시안(2026-09-20 대표님) - 자료가 있는 소분류만 쓴다 ───────── */
/* 제목 아래 파란 부제. ⚠⚠ 셀렉터에 `.wa-body` 를 붙일 것 - 위쪽 `.wa-body p`(0,0,1,1)가
   그냥 `.wp-sub`(0,0,1,0)를 특이도로 이겨서 색·크기가 통째로 안 먹는다. */
.wa-body .wp-sub{margin:16px 0 0;font-weight:800;color:var(--blue);
  font-size:clamp(17px,1.52vw,22px);line-height:1.5;letter-spacing:-.02em}
.wa-body .wp-sub + .wp-lead{margin-top:9px}
.wp-tx:has(.wp-sub.fit){container-type:inline-size}
.wa-body .wp-sub.fit{font-size:min(clamp(17px,1.52vw,22px),max(15px,calc(100cqi / var(--sf,20))))}   /* heroSubFit(2026-10-10) */

/* 사례 카드 - 사진 왼쪽 · 글 오른쪽(`casesSide`). 없으면 예전 그대로(사진 위 · 글 아래) */
.wcs-grid.side .wcs-item{display:grid;grid-template-columns:150px minmax(0,1fr);align-items:stretch}
.wcs-grid.side .wcs-item img{aspect-ratio:auto;width:150px;height:100%;min-height:150px;
  background:#f5f8fb;border-right:1px solid var(--line-2)}
.wcs-grid.side .wcs-tx{padding:16px 18px;align-self:center}
@media (max-width:1100px){
  .wcs-grid.side .wcs-item{grid-template-columns:118px minmax(0,1fr)}
  .wcs-grid.side .wcs-item img{width:118px;min-height:118px}
}
/* ⚠ 폰에서는 사진을 위로 올린다 - 118px 옆에 글이 붙으면 두세 글자마다 줄이 바뀐다 */
@media (max-width:560px){
  .wcs-grid.side .wcs-item{grid-template-columns:1fr}
  .wcs-grid.side .wcs-item img{width:100%;height:auto;min-height:0;aspect-ratio:5/2;
    border-right:0;border-bottom:1px solid var(--line-2)}
}

/* 맺음 배너 - 왼쪽 글 · 오른쪽 사진 */
.wout{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  align-items:stretch;gap:0;margin-top:34px;border-radius:20px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy) 0%,var(--navy-2) 100%);box-shadow:var(--sh-2)}
.wo-tx{padding:clamp(24px,2.6vw,40px);display:flex;flex-direction:column;justify-content:center}
.wout .wo-t{margin:0;color:#fff;font-weight:800;letter-spacing:-.025em;
  font-size:clamp(20px,1.85vw,27px);line-height:1.38}
.wout .wo-d{margin:12px 0 0;color:rgba(255,255,255,.82);
  font-size:clamp(14.6px,1.16vw,16.4px);line-height:1.68}
.wo-cta{align-self:flex-start;margin-top:20px;display:inline-flex;align-items:center;gap:7px;
  padding:11px 20px;border-radius:8px;background:var(--blue);color:#fff;
  font-size:15px;font-weight:800;text-decoration:none;transition:background .15s}
.wo-cta:hover{background:var(--sky)}
.wo-ph{position:relative;min-height:190px}
.wo-ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;
  object-position:center 74%}
@media (max-width:820px){
  .wout{grid-template-columns:1fr}
  .wo-ph{min-height:150px;order:-1}
}


/* ══ 상단 검색 ═══════════════════════════════════════════════════
   대표님 - "상단에 검색어를 통해서 페이지를 찾아 들어갈수 있는 기능"(2026-09-22).
   ⚠ 머리말 속 자리는 24px 뿐이지만 메뉴(nav.gnb)가 실제 필요보다 385px 넓게
      늘어나 있어, 칸을 넣으면 메뉴가 그만큼 줄며 흡수한다(실측).
   ⚠ 1180px 아래에서는 메뉴가 숨는다 - 그때는 돋보기만 두고 눌러서 펼친다. */
.hs{position:relative;display:flex;align-items:center;flex:0 0 auto}

.hs-btn{display:none;align-items:center;justify-content:center;width:40px;height:40px;
  border:1px solid var(--line);border-radius:10px;background:#fff;color:var(--char);
  cursor:pointer;transition:.2s var(--ease)}
.hs-btn:hover{border-color:var(--blue);color:var(--blue)}

.hs-in{display:flex;align-items:center;gap:7px;width:250px;height:40px;padding:0 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--bg-2);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),background .2s var(--ease)}
.hs-in:hover{border-color:var(--stone)}
.hs-in:focus-within{border-color:var(--blue);background:#fff;box-shadow:var(--ring)}
.hs-ic{flex:0 0 auto;color:var(--stone)}
.hs-in:focus-within .hs-ic{color:var(--blue)}
.hs-q{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:14px;font-weight:600;color:var(--ink)}
.hs-q::placeholder{color:var(--stone);font-weight:600}
/* 브라우저가 붙이는 지우기 단추는 쓰지 않는다(Esc 로 비운다) */
.hs-q::-webkit-search-cancel-button,.hs-q::-webkit-search-decoration{-webkit-appearance:none;display:none}

.hs-pop{position:absolute;top:calc(100% + 10px);right:0;width:470px;padding:6px;
  max-height:min(72vh,540px);overflow:auto;background:#fff;
  border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-3);z-index:5}
.hs-row{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;align-items:start;
  padding:9px 11px;border-radius:9px;text-decoration:none;color:inherit}
.hs-row:hover,.hs-row.on{background:var(--bg-2)}
.hs-kind{flex:0 0 auto;margin-top:1px;padding:3px 8px;border-radius:999px;
  font-size:11.2px;font-weight:800;letter-spacing:-.01em;white-space:nowrap;
  background:#EEF2F7;color:var(--slate)}
.hs-kind.k-area{background:rgba(5,131,242,.12);color:var(--blue-d)}
.hs-kind.k-sub{background:rgba(14,148,136,.13);color:var(--teal)}
.hs-kind.k-shop{background:rgba(232,149,12,.15);color:#A66A05}
.hs-txt{min-width:0}
.hs-txt b{display:block;font-size:14.6px;font-weight:800;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-grp{display:inline-block;margin-left:7px;font-size:11.6px;font-weight:700;color:var(--stone)}
.hs-txt i{display:block;margin-top:2px;font-style:normal;font-size:12.6px;color:var(--slate);
  line-height:1.45;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hs-via{display:inline-block;margin-top:4px;padding:1px 7px;border-radius:999px;
  font-size:11.2px;font-weight:700;font-style:normal;
  background:rgba(5,131,242,.09);color:var(--blue-d)}
.hs-none{padding:18px 14px;text-align:center;font-size:13.2px;color:var(--slate)}

/* 메뉴가 좁아지는 구간 - 칸도 함께 줄인다(메뉴를 밀지 않게) */
@media (max-width:1430px){ .hs-in{width:200px} }
@media (max-width:1300px){ .hs-in{width:160px} }

/* 서랍 안 검색 - 폰에서만 쓰인다(아래 520px 규칙이 켠다) */
.drawer .hs{display:none}

/* 메뉴가 숨는 구간 - 돋보기만 두고, 누르면 머리말 아래로 펼친다
   ⚠⚠ 펼친 칸은 fixed 다 - 이 폭에서는 머리말 자체가 화면 밖으로 넘쳐서(원래부터)
      .hs 기준 right:0 이 화면 밖을 가리켜 칸이 잘려 나갔다(실측).
      머리말에 transform 이 걸려 있어 fixed 의 기준이 머리말(=화면 폭)이 된다. */
@media (max-width:1180px){
  .hs-btn{display:inline-flex}
  .hs-in{position:fixed;top:calc(var(--hd-s) + 9px);left:14px;right:14px;width:auto;display:none}
  .hs.open .hs-in{display:flex}
  .hs-pop{position:fixed;top:calc(var(--hd-s) + 60px);left:14px;right:14px;width:auto;
    max-height:calc(100vh - var(--hd-s) - 78px)}
}

/* ⚠⚠ 폰 - 서랍 안에도 검색을 둔다(메뉴를 열어 둔 채 바로 찾을 수 있게).
   ⚠ 머리말 검색은 그대로 둔다 - 아래 640px 규칙이 EN 단추를 빼 자리를 만든다. */
@media (max-width:640px){
  .drawer .hs{display:block;position:static;margin:4px 0 20px}
  .drawer .hs-btn{display:none}
  .drawer .hs-in{position:static;display:flex;width:100%;height:44px}
  .drawer .hs-pop{position:static;width:auto;max-height:none;margin-top:10px;
    padding:4px;box-shadow:none;border-radius:10px;background:var(--bg-2)}
  .drawer .hs-row{background:#fff}
}

/* 드롭다운 맨 아래 '전체 결과 보기' - 엔터와 같은 곳으로 간다 */
/* ⚠ 바닥에 붙인다 - 결과가 많으면 스크롤해야 보여서 못 찾는다.
   ⚠ 배경을 꼭 줄 것(투명하면 뒤 줄이 비친다) · bottom 은 .hs-pop 의 padding 만큼 뺀다 */
.hs-all{position:sticky;bottom:-6px;z-index:1;
  display:flex;align-items:center;justify-content:center;gap:6px;
  margin:4px 0 0;padding:12px;border-top:1px solid var(--line);
  background:#fff;box-shadow:0 -8px 12px -8px rgba(14,42,79,.14);
  font-size:13.4px;font-weight:800;color:var(--blue-d);text-decoration:none;
  border-radius:0 0 9px 9px}
.hs-all:hover{background:rgba(5,131,242,.07)}
.hs-all span{font-size:15px}

/* ══ 검색 결과 페이지(search.html) ══════════════════════════════
   대표님 - "엔터를 치면 검색어 관련 페이지가 뜨게"(2026-09-22).
   ⚠ 결과 줄(.hs-row)은 드롭다운과 **같은 모양**을 쓴다 - searchRowHtml 한 곳. */
.sr-head{padding:calc(var(--hd) + 40px) 0 30px;background:var(--bg-2);
  border-bottom:1px solid var(--line)}
.sr-head h1{margin:6px 0 20px;font-size:clamp(28px,3.2vw,38px);font-weight:900;
  letter-spacing:-.03em;color:var(--ink)}
.sr-form{display:flex;align-items:center;gap:10px;max-width:820px;height:56px;
  padding:0 8px 0 18px;background:#fff;border:1px solid var(--line);border-radius:14px;
  box-shadow:var(--sh-1);transition:border-color .2s var(--ease),box-shadow .2s var(--ease)}
.sr-form:focus-within{border-color:var(--blue);box-shadow:var(--ring)}
.sr-form svg{flex:0 0 auto;color:var(--stone)}
.sr-form:focus-within svg{color:var(--blue)}
.sr-form input{flex:1 1 auto;min-width:0;border:0;background:none;outline:none;
  font:inherit;font-size:16.5px;font-weight:600;color:var(--ink)}
.sr-form input::placeholder{color:var(--stone);font-weight:500}
.sr-form input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}
.sr-form button{flex:0 0 auto;height:42px;padding:0 22px;border:0;border-radius:10px;
  background:var(--blue);color:#fff;font:inherit;font-size:15px;font-weight:800;cursor:pointer;
  transition:.2s var(--ease)}
.sr-form button:hover{background:var(--blue-d)}

.sr-sum{margin:16px 0 0;max-width:820px;font-size:15px;color:var(--slate)}
.sr-sum b{color:var(--blue-d);font-weight:900}
.sr-chips{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0;max-width:820px}
.sr-chip{padding:7px 14px;border:1px solid var(--line);border-radius:999px;background:#fff;
  font:inherit;font-size:13.4px;font-weight:700;color:var(--slate);cursor:pointer;
  transition:.18s var(--ease)}
.sr-chip b{margin-left:4px;font-weight:900;color:var(--stone)}
.sr-chip:hover{border-color:var(--stone)}
.sr-chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.sr-chip.on b{color:rgba(255,255,255,.85)}

/* 결과 목록 - 드롭다운보다 넉넉하게 편다(설명을 두 줄까지 보여준다)
   ⚠ 검색칸과 **같은 폭** 이어야 시작 · 끝이 맞는다(1360px 를 꽉 채우면 오른쪽이 빈다). */
.sr-list{display:grid;gap:8px;max-width:820px}
.sr-list .hs-row{padding:16px 18px;border:1px solid var(--line);border-radius:12px;
  background:#fff;gap:14px}
.sr-list .hs-row:hover{border-color:var(--blue);background:var(--bg-2);box-shadow:var(--sh-1)}
.sr-list .hs-txt b{font-size:17px;white-space:normal}
.sr-list .hs-txt i{margin-top:5px;font-size:14px;line-height:1.6;white-space:normal;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.sr-list .hs-grp{font-size:12.6px}
.sr-none{padding:46px 20px;text-align:center;font-size:15px;color:var(--slate);
  background:var(--bg-2);border:1px dashed var(--line);border-radius:14px;line-height:1.7}

@media (max-width:720px){
  .sr-head{padding:calc(var(--hd-s) + 26px) 0 24px}
  .sr-form{height:50px;padding:0 6px 0 14px}
  .sr-form input{font-size:15.5px}
  .sr-form button{height:38px;padding:0 16px;font-size:14px}
  .sr-list .hs-row{padding:13px 14px;gap:10px}
  .sr-list .hs-txt b{font-size:15.6px}
}


/* ══ [간격 시안 B] 머리말 숨통 트기 ═══════════════════════════════
   대표님 260922 - "NEB 회사소개 간격을 좀더 뜨우고 · 검색어 창이 너무 긴거 같아 ·
   대분류들이 너무 붙어 있음".
   ⚠ wrap(1360px) 안에서 총량이 정해져 있어 검색칸을 줄인 만큼만 넓힐 수 있다.
   ⚠ 폭이 좁아질수록 단계로 줄인다 - 안 줄이면 1366px 에서 메뉴가 넘친다. */
@media (min-width:1500px){
  header .logo{margin-right:28px}
  nav.gnb{column-gap:44px}
  .hs-in{width:160px}
}
@media (min-width:1400px) and (max-width:1499px){
  header .logo{margin-right:20px}
  nav.gnb{column-gap:38px}
  .hs-in{width:150px}
}
@media (min-width:1301px) and (max-width:1399px){
  header .logo{margin-right:14px}
  nav.gnb{column-gap:32px}
  .hs-in{width:150px}
}

/* ── 자료실 본문 안 사진 ─────────────────────────────────────
   관리자 화면에서 넣은 <figure class="ri ri-center" style="width:NN%"> 를 그린다.
   ⚠ 폰에서는 폭·흐름을 풀어야 읽힌다(글 옆 사진은 좁은 화면에서 못 읽는다). */
.bpost-body figure.ri{margin:22px 0;width:100%;max-width:100%}
.bpost-body figure.ri img{display:block;width:100%;height:auto;border-radius:10px}
.bpost-body figure.ri.ri-center{margin-left:auto;margin-right:auto}
.bpost-body figure.ri.ri-left{margin-left:0;margin-right:auto}
.bpost-body figure.ri.ri-right{margin-left:auto;margin-right:0}
.bpost-body figure.ri.ri-wrapleft{float:left;margin:6px 24px 16px 0}
.bpost-body figure.ri.ri-wrapright{float:right;margin:6px 0 16px 24px}
.bpost-body figure.ri figcaption{font-size:13px;color:var(--slate);margin-top:8px;text-align:center}
/* 사진 묶음 (2026-10-23) - 관리 화면 '▦ 사진 묶음'. 칸 수 = ri-c2 · c3 · c4(기본 3), 누르면 크게(site.js zoomGrid)
   ⚠ 칸을 고르게 4:3 으로 잘라 보여 주고, 크게 볼 때 사진 전체가 나온다 */
.bpost-body figure.ri.ri-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.bpost-body figure.ri.ri-c2{grid-template-columns:repeat(2,minmax(0,1fr))}
.bpost-body figure.ri.ri-c4{grid-template-columns:repeat(4,minmax(0,1fr))}
.bpost-body figure.ri.ri-grid img{aspect-ratio:4/3;object-fit:cover;cursor:zoom-in;transition:filter .15s}
.bpost-body figure.ri.ri-grid img:hover{filter:brightness(1.07)}
.bpost-body figure.ri.ri-grid img:focus-visible{outline:3px solid var(--blue);outline-offset:2px}
.bpost-body h3{font-size:20px;font-weight:800;margin:28px 0 12px;letter-spacing:-.02em}
.bpost-body ul,.bpost-body ol{margin:0 0 14px;padding-left:22px}
.bpost-body li{margin:4px 0}
.bpost-body a{color:var(--blue);text-decoration:underline}
.bpost-body:after{content:"";display:block;clear:both}
@media(max-width:640px){
  /* WARN margin 에도 !important 가 필요하다 - .ri-wrapright 쪽이 특이도가 높아
     안 주면 왼쪽 여백 24px 이 남아 화면이 가로로 넘친다(2026-09-22 실측 6px). */
  .bpost-body figure.ri{width:100%!important;float:none!important;
    margin-left:0!important;margin-right:0!important}
  .bpost-body figure.ri.ri-c4{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 폰 - 4칸은 2 x 2 */
  .bpost-body figure.ri.ri-grid{gap:6px}
}

/* ══ 첫 화면 - 정지 사진 켄번즈 (2026-09-23 대표님 확정 - 영상 대신) ═══════════
   index 의 .hero 에 <img class="kb"> 2장이 16초 주기로 번갈아 나온다 - 각 사진은 10초 동안 8% 줌,
   겹치는 2초에 디졸브. ⚠ 영상(hero-v2.mp4)은 AI 질감 일렁임이 '떨림' 으로 보여 뺐다(2-38-3-81).
   ⚠ 두 사진은 같은 키프레임을 위상만 달리해 돈다 - 첫 사진 -4초(열리자마자 안정적으로 보이는 중간),
      둘째 사진 -12초(숨은 상태). 0초에서 시작하면 첫 화면이 디졸브 중이라 흔들려 보인다.
   ⚠ 숨어 있는 62.5%~100% 구간에서 scale 이 1.08 -> 1 로 돌아온다(보이지 않을 때 되감기).
   ⚠ 움직임 줄이기에서는 첫 사진만 고정으로 보인다. */
.hero img.kb{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;
  transform-origin:50% 50%;animation:kb-hero 16s linear infinite;animation-delay:-4s;will-change:opacity,transform}
.hero img.kb.b{animation-delay:-12s}
@keyframes kb-hero{
  0%{opacity:0;transform:scale(1)}
  12.5%{opacity:1}
  50%{opacity:1}
  62.5%{opacity:0;transform:scale(1.08)}
  100%{opacity:0;transform:scale(1)}}
/* 첫 화면 사진 한 장(2026-10-01) - 번갈음 없이 16초에 걸쳐 느리게 확대 · 축소(처음 30초 -> 대표님 '조금 더 빠르게') */
.hero img.kb.solo{opacity:1;animation:kb-solo 16s ease-in-out infinite alternate;animation-delay:0s;will-change:transform}
@keyframes kb-solo{from{transform:scale(1)}to{transform:scale(1.06)}}
@media (prefers-reduced-motion:reduce){
  .hero img.kb,.hero img.kb.solo{animation:none;opacity:1;transform:none}   /* ⚠ .solo 를 함께 적어야 위 .kb.solo 규칙을 이긴다 */
  .hero img.kb.b{display:none}}

/* ══ 메인 '우리의 서비스' 6장 - 밝은 카드 (2026-09-23 대표님) ═══════════════════
   왼쪽 사진 · 오른쪽 글(제목 · 한 줄 · 자세히 보기). 실적 카드(검정막 타일)와 대비를 두어
   '실적' 과 '서비스' 가 모양으로 갈린다. 부제는 줄바꿈을 허용해 폰에서 잘리지 않는다.
   ⚠ #psv-list 안에서만 - 트랙레코드 .tr-item 은 그대로다. 마크업은 손대지 않았다(img · .tr-item-ov · .tr-item-cap).
   ⚠ 사진 확대(hover scale)는 끈다 - 격자 칸 안에서 커지면 글 쪽으로 비어져 나온다.
   ⚠ 560px 이하는 사진을 위로 올린다(옆에 두면 두세 글자마다 줄이 바뀐다, 2-38-3-67 과 같은 규칙). */
#psv-list.tr-list.stack{gap:18px}
#psv-list .tr-item.wide{flex:0 0 calc((100% - 18px)/2);height:auto;min-height:184px;
  display:grid;grid-template-columns:minmax(0,.44fr) minmax(0,.56fr);overflow:hidden;
  background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-1);
  transition:border-color .2s var(--ease),box-shadow .2s var(--ease),transform .2s var(--ease)}
#psv-list .tr-item.wide:hover{border-color:var(--sky);box-shadow:var(--sh-2);transform:translateY(-3px)}
#psv-list .tr-item.wide img{position:relative;inset:auto;width:100%;height:100%;min-height:184px;
  object-fit:cover;transform:none;display:block}
#psv-list .tr-item.wide:hover img{transform:none}
#psv-list .tr-item.wide .tr-item-ov{display:none}
#psv-list .tr-item.wide .tr-item-cap{position:static;inset:auto;transform:none;display:flex;flex-direction:column;
  align-items:flex-start;justify-content:center;gap:7px;padding:22px 26px 22px 28px;text-align:left}
#psv-list .tr-item.wide .tr-item-cap .t{font-size:27px;font-weight:800;line-height:1.22;letter-spacing:-.5px;
  color:var(--ink);text-shadow:none;word-break:keep-all}
#psv-list .tr-item.wide .tr-item-cap .d{position:static;left:auto;top:auto;transform:none;opacity:1;margin:0;
  font-size:16.5px;line-height:1.6;color:var(--slate);text-shadow:none;max-width:none;
  white-space:normal;overflow:visible;text-overflow:clip;word-break:keep-all}
#psv-list .tr-item.wide .tr-item-cap .go{position:static;left:auto;right:auto;bottom:auto;top:auto;transform:none;
  opacity:1;margin:10px 0 0;padding:0;background:none;border:0;box-shadow:none;border-radius:0;
  font-size:15.5px;font-weight:700;color:var(--blue);text-shadow:none}
#psv-list .tr-item.wide:hover .tr-item-cap .go{background:none;color:var(--blue-d);text-decoration:underline;text-underline-offset:3px}
@media(max-width:700px){
  #psv-list .tr-item.wide{flex-basis:100%;height:auto;min-height:170px}
  #psv-list .tr-item.wide img{min-height:170px}
  #psv-list .tr-item.wide .tr-item-cap .t{font-size:24px}
  #psv-list .tr-item.wide .tr-item-cap .go{right:auto;bottom:auto}}
@media(max-width:560px){
  #psv-list .tr-item.wide{grid-template-columns:1fr;min-height:0}
  #psv-list .tr-item.wide img{aspect-ratio:16/9;height:auto;min-height:0}
  #psv-list .tr-item.wide .tr-item-cap{padding:18px 20px 20px}
  #psv-list .tr-item.wide .tr-item-cap .t{font-size:23px}
  #psv-list .tr-item.wide .tr-item-cap .d{font-size:15.5px}}

/* 첫 화면 배지 뒷부분(폰에서 숨기려고 span 으로 감쌈) - 데스크톱에선 글자 흐름에 그대로 붙인다.
   ⚠ 그냥 두면 inline-flex 의 별도 항목이 되어 gap 9px 이 끼어든다 */
.hero-badge .hb-more{display:contents}
/* 영어 배지 색(2026-10-01 대표님 참고 그림) - Marine 두 낱말 하늘빛 청록 · 나머지 옅은 흰빛 */
.hero-badge{color:#D6E8F5}
.hero-badge .hb-c{font-weight:inherit;color:#7AD8EC}
/* 글 전체를 .hb-t 하나로 묶어야 flex gap(9px) 이 낱말 사이에 끼어들지 않는다 */
.hero-badge .hb-t{min-width:0}

/* ══ 메인 문의 섹션 - 2칸 (2026-09-25 대표님) ═══════════════════════════════════
   셋째 칸 '사업 수행 실적' 을 뺐다 - 문의가 아니라 안내라 CONTACT 제목과 맞지 않았다.
   수행실적으로 가는 길은 상단 메뉴 · 푸터 · 실적 배너 버튼에 그대로 있다.
   2026-09-29 - 카드 모양을 전병관 사원의 사진 카드(.pick)로 바꿨다(대표님 '2칸으로 하되 병관이가 만든 사진으로').
   ⚠ 공용 `.pick` 은 3열(≤1180px 2열 · ≤820px 1열) 그대로 - 제품 구매 · 서비스 의뢰가 세 갈래로 쓴다.
     1181px 이상에서만 두 칸으로 맞추면 된다(그 아래는 공용 규칙이 이미 2열 · 1열). */
@media (min-width:1181px){
  #home-contact .pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 두 칸이라 카드가 넓어져 16:9 사진이 360px 가까이 된다 - 넓은 화면에서만 21:9 로 낮춘다 */
  #home-contact .pick .ph{aspect-ratio:21/9}
}

/* ══ 첫 화면 글자 정리 - 데스크톱 포함 전 폭, 국 · 영 (2026-09-23 대표님 승인 · 2026-10-13 영문도 같은 마크업이 되어 함께) ═══════════
   5층(영문 배지 · 제목 · 영문 부제 · 리드(괄호 영어) · 버튼 3)을 3층으로 - 영어가 세 번 나오던 것을 배지 하나로.
   마크업은 그대로(되돌리려면 이 블록만 지운다). 영문 첫 화면도 같은 마크업이라 html[lang] 으로 함께 건다(2026-10-13).
   ⚠ 폰 블록(아래)이 같은 선택자를 다시 적지만 값이 같다 - 지워도 무방하나 이력을 위해 남겨 둔다. */
html[lang] .hero .en-sub{display:none}                     /* Turning Nature's Potential… - 배지가 이미 영문 한 줄 */
html[lang] .hero .hlead .hl-en{display:none}               /* (Eco-friendly Technology) - 뜻을 더하지 않는다 */
html[lang] .hero .acts .btn[href="works.html"]{display:none}     /* 수행 이력 보기 - 아래 문의 섹션에 같은 버튼 */
html[lang] .hero .hlead{margin-bottom:30px}

/* ══ 메인 폰 화면 압축 (2026-09-23 대표님 - "다 너무 크게, 글도 다 넣을 필요 없다") ═══════
   640px 이하 · 국문 메인(html[lang])에만. 글자는 한 단계씩 줄이고, 폰에서 안 읽는 글은 숨긴다:
   영문 배지 · 영문 부제 · 셋째 버튼 · 서비스 카드 부제 · 제품 설명 · 문의 칸 설명 · 회사소개 둘째 문단.
   ⚠ 숨긴 글은 데스크톱에 그대로 있다(마크업 무변경). 되돌리려면 이 블록만 지운다.
   ⚠ 푸터(맨 아래)는 site.js 가 전 페이지에 같이 그리므로 그 규칙만 전 페이지 공통이다. */
@media (max-width:640px){
  /* 첫 화면 - 제목 + 한 줄 + 버튼 2개 */
  html[lang] .hero{min-height:0}
  html[lang] .hero .wrap{padding-top:calc(var(--hd) + 22px);padding-bottom:64px}
  html[lang] .hero-badge{font-size:11.5px;letter-spacing:1px;padding:6px 12px;margin-bottom:14px}
  html[lang] .hero-badge .hb-more{display:none}   /* 폰은 Marine Environment 만(대표님) */
  .hero-badge .hb-more{display:none}
  html[lang] .hero .en-sub{display:none}
  html[lang] .hero h1{font-size:30px;letter-spacing:-1.6px;line-height:1.24;margin-bottom:14px}
  html[lang] .hero .hlead{font-size:16.6px;line-height:1.6;margin-bottom:24px}
  html[lang] .hero .hlead .hl-en{display:none}   /* 괄호 영어는 폰에서 줄 중간에 끊겨 보인다 */
  html[lang] .hero .acts{gap:10px}
  html[lang] .hero .acts .btn{font-size:15px;padding:13px 20px}
  html[lang] .hero .acts .btn[href="works.html"]{display:none}
  html[lang] .hero .cue{display:none}   /* 첫 화면이 짧아져 버튼과 겹친다 - 폰에선 뺀다 */
  /* 섹션 공통 */
  html[lang] #track-record,html[lang] #products,html[lang] #home-products,html[lang] #home-contact{padding:40px 0}
  html[lang] #track-record .sec-head,html[lang] #products .sec-head,html[lang] #home-products .sec-head,html[lang] #home-contact .sec-head{margin-bottom:20px}
  html[lang] #track-record .sec-head h2,html[lang] #products .sec-head h2,html[lang] #home-products .sec-head h2,html[lang] #home-contact .sec-head h2{font-size:25px;letter-spacing:-1px}
  /* 실적 - 배너 글자 · 카드 높이 */
  html[lang] #track-record .tr-hero{padding:22px 20px;margin-bottom:12px}
  html[lang] #track-record .tr-num{font-size:52px}
  html[lang] #track-record .tr-cap{font-size:19px;line-height:1.4;margin-top:6px}
  html[lang] #track-record .tr-item{aspect-ratio:16/10}
  html[lang] #track-record .tr-item-cap .t{font-size:19px}
  /* 서비스 - 작은 사진 옆에 제목만 */
  html[lang] #products .psv-group-head,html[lang] #home-products .psv-group-head{margin:30px 0 12px!important}   /* 마크업의 inline margin-top:56px 을 덮는다 */
  html[lang] #home-products .psv-group-head.has-link{margin-top:0!important}   /* 제품 칸 첫 소제목은 칸 제목 바로 아래 */
  html[lang] #products .psv-group-title,html[lang] #home-products .psv-group-title{font-size:20px}
  html[lang] #psv-list.tr-list.stack{gap:10px}
  html[lang] #psv-list .tr-item.wide{grid-template-columns:118px minmax(0,1fr);min-height:0;border-radius:14px}
  html[lang] #psv-list .tr-item.wide img{aspect-ratio:auto;height:100%;min-height:104px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap{padding:12px 14px;gap:4px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .t{font-size:17.5px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .d{display:none}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .go{font-size:13px;margin-top:4px}
  /* 제품 - 2열, 설명 숨김 */
  html[lang] #consumable-grid,html[lang] #reagent-grid{grid-template-columns:1fr 1fr;gap:10px}
  html[lang] #consumable-grid .card,html[lang] #reagent-grid .card{border-radius:14px}
  html[lang] #consumable-grid .card .pad,html[lang] #reagent-grid .card .pad{padding:12px 12px 12px}
  html[lang] #consumable-grid .card .kicker,html[lang] #reagent-grid .card .kicker{font-size:10.5px;letter-spacing:.8px;margin-bottom:5px}
  html[lang] #consumable-grid .card h3,html[lang] #reagent-grid .card h3{font-size:15px;letter-spacing:-.4px;margin-bottom:4px;line-height:1.3}
  html[lang] #consumable-grid .card .pad p,html[lang] #reagent-grid .card .pad p{display:none}
  html[lang] #consumable-grid .card .price,html[lang] #reagent-grid .card .price{margin-top:8px}
  html[lang] #consumable-grid .card .price a,html[lang] #reagent-grid .card .price a{font-size:13px;padding:9px 10px}
  /* 문의 - 아이콘 · 제목 · 버튼 한 줄 */
  html[lang] #home-contact .ctas{gap:10px}
  /* 2026-09-29 사진 카드(.pick) 두 칸 - 한 줄에 나란히, 설명 · 분류는 빼고 사진 · 제목 · 단추만(9/23 압축 원칙) */
  html[lang] #home-contact .pick{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  html[lang] #home-contact .pick article{border-radius:14px}
  html[lang] #home-contact .pick .ph{aspect-ratio:16/10}
  html[lang] #home-contact .pick .bd{padding:12px 12px 12px}
  html[lang] #home-contact .pick .kicker,html[lang] #home-contact .pick p{display:none}
  html[lang] #home-contact .pick h3{font-size:15.5px;margin:0 0 10px;letter-spacing:-.5px;word-break:keep-all}
  html[lang] #home-contact .pick .go{padding:9px 6px;font-size:13px;gap:4px;margin-top:auto}
  html[lang] #home-contact .ctabox{padding:13px 14px;border-radius:14px}
  html[lang] #home-contact .ctabox span{display:none}
  html[lang] #home-contact .ctabox.hasico{grid-template-columns:auto minmax(0,1fr) auto;grid-template-rows:auto;row-gap:0;column-gap:11px}
  html[lang] #home-contact .ctabox.hasico em{grid-column:3;grid-row:1;justify-self:end;align-self:center;font-size:13px;padding:8px 12px;white-space:nowrap}
  html[lang] #home-contact .ctabox b{font-size:16px}
  html[lang] #home-contact .ctabox .ic,html[lang] #home-contact .ctabox .ic.imgico{width:40px;height:40px}
  /* 회사소개 - 사진 낮게, 둘째 문단 숨김 */
  html[lang] #company .split .im{min-height:0;height:auto;aspect-ratio:16/10}
  html[lang] #company .split .tx{padding:26px 18px 34px}
  html[lang] #company .split .tx .lead{font-size:19px;letter-spacing:-.6px}
  html[lang] #company .split .tx p:not(.lead){font-size:15.4px;line-height:1.75}
  html[lang] #company .split .tx > p:nth-of-type(3){display:none}
  html[lang] #company .split .tx .acts{margin-top:20px}
  /* 푸터 - 2열 (전 페이지 공통) */
  footer{padding:40px 0 26px;font-size:14px}
  footer .cols{grid-template-columns:1fr 1fr;gap:22px 18px;margin-bottom:26px}
  footer .brand{grid-column:1/-1}
  footer h5{font-size:15px;margin-bottom:8px}
  footer .cols>div>div>a{font-size:14px;padding:4px 0}
  footer .cols>div>div>a.sub{font-size:12.6px}
  footer .fin{font-size:12.4px;line-height:1.8;padding-top:16px}
}

/* ══ 메인 폰 화면 2차 (2026-09-23 대표님 캡처 지시) ═══════════════════════════════
   실적 배너 축소 · 실적 카드 한 줄 3장(제목만) · 서비스 카드 2단(사진 위) · 푸터 메뉴 열 숨김.
   앞 블록과 같은 선택자는 여기(뒤)가 이긴다. */
@media (max-width:640px){
  /* 실적 배너 - 글씨 줄이고 버튼은 제목 밑에 */
  html[lang] #track-record .tr-hero{aspect-ratio:auto;min-height:0;padding:16px 16px 14px}
  html[lang] #track-record .tr-eyebrow,html[lang] #track-record .tr-hero.active .tr-eyebrow{font-size:11px;letter-spacing:1px;padding:3px 9px;margin-bottom:8px}
  html[lang] #track-record .tr-num{font-size:40px}
  html[lang] #track-record .tr-hero.active .tr-num{font-size:19px;line-height:1.3;white-space:normal;transform:none!important}
  html[lang] #track-record .tr-cap,html[lang] #track-record .tr-hero.active .tr-cap{font-size:12.5px;line-height:1.45;margin-top:4px;white-space:normal;width:auto;max-width:none;transform:none!important}
  html[lang] #track-record .tr-hero-cta{display:none;position:static;margin-top:10px;font-size:12.5px;padding:8px 13px;transform:none}
  html[lang] #track-record .tr-hero.active .tr-hero-cta{display:inline-block;align-self:flex-start}
  /* 실적 카드 - 한 줄 3장 · 제목만 */
  html[lang] #track-record .tr-list{gap:8px}
  html[lang] #track-record .tr-item{flex-basis:calc((100% - 16px)/3);aspect-ratio:1/1;border-radius:10px}
  html[lang] #track-record .tr-item-cap{transform:none;padding:6px 13px;justify-content:center}   /* 좌우 13px - 화살표(30px, -14px) 아래로 글자가 안 들어가게 */
  html[lang] #track-record .tr-item-cap .t{font-size:12.5px;line-height:1.3;letter-spacing:-.2px;word-break:keep-all}
  html[lang] #track-record .tr-item-cap .d,html[lang] #track-record .tr-item-cap .go{display:none!important}
  html[lang] #track-record .tr-arrow{width:30px;height:30px;font-size:15px;box-shadow:0 3px 10px rgba(5,131,242,.3)}
  html[lang] #track-record .tr-arrow.prev{left:-14px}
  html[lang] #track-record .tr-arrow.next{right:-14px}
  /* 서비스 카드 - 2단, 사진 위 · 제목 아래 */
  html[lang] #psv-list.tr-list.stack{display:grid;grid-template-columns:1fr 1fr;gap:10px}
  html[lang] #psv-list .tr-item.wide{flex-basis:auto;grid-template-columns:1fr;min-height:0}
  html[lang] #psv-list .tr-item.wide img{aspect-ratio:16/10;height:auto;min-height:0}
  html[lang] #psv-list .tr-item.wide .tr-item-cap{padding:10px 12px 12px;gap:3px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .t{font-size:15px;line-height:1.3}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .go{font-size:12.5px;margin-top:3px}
  /* 푸터 - 메뉴 열은 숨기고 회사 정보만 (전 페이지 공통, 메뉴는 서랍에 있다) */
  footer .cols{grid-template-columns:1fr;gap:0;margin-bottom:18px}
  footer .cols>div:not(.brand){display:none}
  /* 머리말 - 폰에서는 전화번호 · 검색 돋보기를 뺀다(대표님). 둘 다 서랍(≡) 안에 그대로 있다.
     ⚠ .hd 로 범위를 좁힐 것 - 서랍의 .hs · 전화 단추까지 사라진다 */
  header .hd .hs,header .hd .tel{display:none}
  header .hd{gap:14px}
}

/* ══ 사업분야 상세 - 그리기 전 빈 틀 감추기(2026-09-30 대표님 - "다른 분야 선택할 때 로딩할 때 이런 게 보임") ══
   business-detail.html 머리의 작은 스크립트가 <html class="bd-wait"> 를 붙이고, site.js 가 첫 그리기(첫 소분류까지)를
   마치면 뗀다(bdReady). 그 사이 자리표시 제목 '이런 문제를 해결합니다' · 빈 사진 상자가 보이지 않는다.
   ⚠ 머리말 · 분야 탭은 #main 밖이라 그대로 보인다. ⚠ JS 가 끝내 못 돌아도 감춘 채로 남지 않게 3초 뒤 스스로 보인다. */
html.bd-wait #main{visibility:hidden;animation:bd-show 0s linear 3s forwards}
@keyframes bd-show{to{visibility:visible}}

/* ── 리드 글머리표 목록(`leadList`, 2026-09-30 강신길 원고 - 해상풍력 · 미세플라스틱) ──────────
   회색 리드 한 줄 대신 쓴다. 점은 `.wa-body ul.dot` 과 같은 6px 파란 점, 아래 작은 줄은 하이픈.
   ⚠ `.wa-body .wp-points` 로 쓸 것 - `.wa-body p` 류 규칙과의 특이도(2-38-3-4 · 2-38-3-67). */
.wa-body .wp-points{margin:18px 0 0;padding:0;list-style:none;
  font-size:clamp(15.5px,1.3vw,19px);line-height:1.6;color:var(--stone);word-break:keep-all}
.wa-body .wp-points>li{position:relative;padding-left:18px;margin:0 0 10px}
.wa-body .wp-points>li:last-child{margin-bottom:0}
.wa-body .wp-points>li::before{content:"";position:absolute;left:2px;top:.68em;
  width:6px;height:6px;border-radius:50%;background:var(--blue)}
.wa-body .wp-points ul{list-style:none;margin:6px 0 0;padding:0}
.wa-body .wp-points ul li{position:relative;padding-left:14px;font-size:.88em;line-height:1.6;color:var(--slate)}
.wa-body .wp-points ul li::before{content:"-";position:absolute;left:0}
.wa-body .wp-sub + .wp-points{margin-top:9px}
/* '하는 일' 카드 설명에 \n 이 있으면 항목마다 한 줄씩, 사이를 조금 띄운다(원고의 두 줄 설명 - 2026-09-30).
   ⚠ site.js 가 \n 이 있을 때만 <i class="wk-ln"> 로 나눈다 - 없는 소분류는 예전 마크업 그대로다. */
.wk-steps .wk-ln{display:block;font-style:normal}
.wk-steps .wk-ln + .wk-ln{margin-top:7px}

/* ══ 전자기장 원고(2026-10-08) - 번호 카드 위 사진 · '자세히' 표 대신 덩어리(detail) ══
   ⚠ 자료(workSteps[].img · detail)가 있는 소분류만 - 나머지는 한 줄도 안 바뀐다.
   ⚠ 이름 wk-ph · wds-* · wd-photos · wdp-* · wdg-* 는 시안 전체 0건을 확인하고 지었다.
   ⚠ 카드 말투는 .wk-steps · .tx-card 와 같다(흰 바탕 · 1px 테두리 · 16px 모서리 · --sh-1).
   ⚠ <p> 를 쓰지 않는다 - `.wa-body p`(0,0,1,1)가 글자 크기 · 여백을 덮는다(2-38-3-3). */

/* 번호 카드 위 사진 - 카드 가장자리까지 꽉 채운다(위 여백을 걷고 좌우를 음수 여백으로) */
.wk-steps.has-img>div{padding-top:0;overflow:hidden}
.wk-steps .wk-ph{grid-column:1/-1;grid-row:1;
  margin:0 calc(-1 * clamp(18px,1.7vw,24px)) clamp(16px,1.5vw,20px);
  aspect-ratio:16/9;background:var(--bg-2);overflow:hidden;border-bottom:1px solid var(--line-2)}
.wk-steps .wk-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wk-steps.has-img>div:hover .wk-ph img{transform:scale(1.03)}
.wk-steps.has-img b,.wk-steps.has-img strong{grid-row:2}
.wk-steps.has-img span{grid-row:3}

/* 측정 사양 - 왼쪽 장비 사진 · 오른쪽 사양 칸(2x2) + 특허 띠 */
.wds{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1);overflow:hidden}
.wds.noph .wds-body{grid-column:1/-1}
.wds-ph{margin:0;display:flex;flex-direction:column;justify-content:center;
  padding:clamp(16px,2vw,28px);border-right:1px solid var(--line-2);background:#fff}
.wds-ph img{width:100%;height:auto;max-height:280px;object-fit:contain}
.wds-ph figcaption{margin-top:12px;text-align:center;font-size:13.6px;font-weight:700;color:var(--slate)}
.wds-body{display:flex;flex-direction:column;gap:clamp(16px,1.8vw,24px);
  padding:clamp(20px,2.2vw,32px) clamp(20px,2.4vw,34px)}
.wds-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin:0}
.wds-grid>div{padding:clamp(14px,1.5vw,20px) 0;border-top:1px solid var(--line-2)}
.wds-grid>div:nth-child(-n+2){border-top:0;padding-top:0}
.wds-grid>div:nth-child(2n+1){padding-right:clamp(16px,1.8vw,26px)}
.wds-grid>div:nth-child(2n){padding-left:clamp(16px,1.8vw,26px);border-left:1px solid var(--line-2)}
.wds-grid dt{margin:0;font-size:13.6px;font-weight:700;color:var(--stone);letter-spacing:.02em}
.wds-grid dd{margin:7px 0 0;font-size:clamp(16px,1.35vw,19px);font-weight:800;color:var(--ink);
  line-height:1.42;letter-spacing:-.02em;word-break:keep-all}
.wds-note{margin-top:auto;display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;
  background:#F0F7FF;border:1px solid #DCEBFD;color:var(--blue-d);font-size:14.8px;font-weight:700;line-height:1.5}
.wds-note i{flex:none;width:22px;height:22px;color:var(--blue)}
.wds-note i svg{width:100%;height:100%}
.wds-note .nw{white-space:nowrap}
/* 운용 사진 줄 */
.wd-photos{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:16px;margin-top:16px}
.wd-photos figure{margin:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;box-shadow:var(--sh-1)}
.wd-photos img{width:100%;aspect-ratio:3/2;object-fit:cover}
.wd-photos figcaption{padding:11px 14px;font-size:14px;font-weight:700;color:var(--char)}

/* 측정 절차 - 번호 흐름(세로 선으로 잇는다) · 오른쪽 그림 */
.wdp{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(20px,2.6vw,40px);align-items:center}
.wdp.has-fig{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
.wdp-list{list-style:none;margin:0;padding:0}
.wdp-list li{position:relative;display:grid;grid-template-columns:38px minmax(0,1fr);column-gap:16px;
  padding-bottom:clamp(18px,1.8vw,24px)}
.wdp-list li:last-child{padding-bottom:0}
.wdp-list li::before{content:"";position:absolute;left:18px;top:42px;bottom:4px;width:2px;
  border-radius:1px;background:#D6E6FA}
.wdp-list li:last-child::before{display:none}
.wdp-list b{position:relative;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  border:1.5px solid var(--blue);background:#fff;color:var(--blue);font-size:13.6px;font-weight:800}
.wdp-list li:last-child b{background:var(--blue);color:#fff}
.wdp-list strong{display:block;padding-top:7px;font-size:clamp(16.5px,1.4vw,19px);font-weight:800;
  color:var(--ink);line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.wdp-list span{display:block;margin-top:5px;font-size:clamp(15px,1.15vw,16.2px);color:var(--slate);
  line-height:1.62;word-break:keep-all}
.wdp-fig{margin:0;padding:clamp(12px,1.4vw,18px);border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:var(--sh-1)}
.wdp-fig img{width:100%;height:auto;border-radius:8px}
.wdp-fig figcaption{margin-top:10px;text-align:center;font-size:14px;font-weight:700;color:var(--char)}

/* 생물 영향 확인 - 단계 카드(사이 화살표) + 주요 평가 대상 띠 */
.wdg{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(28px,2.8vw,40px)}
.wdg-it{position:relative;padding:clamp(20px,1.9vw,26px) clamp(18px,1.7vw,24px) clamp(22px,2vw,28px);
  border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.wdg-it:not(:last-child)::after{content:"";position:absolute;top:50%;
  right:calc(-1 * clamp(28px,2.8vw,40px) / 2 - 3px);width:10px;height:10px;
  border-top:2px solid var(--sky);border-right:2px solid var(--sky);transform:translateY(-50%) rotate(45deg)}
.wdg-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px}
.wdg-ic{width:46px;height:46px;border-radius:12px;background:#EAF3FF;color:var(--blue);display:grid;place-items:center}
.wdg-ic svg{width:24px;height:24px}
.wdg-top b{font-size:clamp(20px,1.8vw,26px);font-weight:800;color:#C9DEF8;letter-spacing:-.02em;line-height:1}
.wdg-it strong{display:block;font-size:clamp(16.5px,1.45vw,20px);font-weight:800;color:var(--ink);
  line-height:1.35;letter-spacing:-.02em;word-break:keep-all}
.wdg-it span{display:block;margin-top:10px;font-size:clamp(15px,1.15vw,16.2px);color:var(--slate);
  line-height:1.62;word-break:keep-all}
.wdg-target{display:flex;align-items:center;gap:12px;margin-top:16px;padding:14px 18px;border-radius:12px;
  background:var(--bg-2);border:1px solid var(--line-2)}
.wdg-target i{flex:none;width:24px;height:24px;color:var(--blue)}
.wdg-target i svg{width:100%;height:100%}
.wdg-target b{flex:none;font-size:14.8px;font-weight:800;color:var(--ink)}
.wdg-target span{font-size:15.2px;color:var(--char);line-height:1.6;word-break:keep-all}

@media (max-width:900px){
  .wds{grid-template-columns:minmax(0,1fr)}
  .wds-ph{border-right:0;border-bottom:1px solid var(--line-2)}
  .wds-ph img{max-height:220px}
  .wdp.has-fig{grid-template-columns:minmax(0,1fr)}
  .wdg{grid-template-columns:minmax(0,1fr);gap:30px}
  .wdg-it:not(:last-child)::after{top:auto;right:auto;left:50%;bottom:-20px;
    transform:translateX(-50%) rotate(135deg)}
}
@media (max-width:640px){
  .wds-grid{grid-template-columns:minmax(0,1fr)}
  .wds-grid>div:nth-child(2n+1){padding-right:0}
  .wds-grid>div:nth-child(2n){padding-left:0;border-left:0}
  .wds-grid>div:nth-child(2){border-top:1px solid var(--line-2);padding-top:14px}
  .wd-photos{grid-template-columns:minmax(0,1fr)}
  .wdg-target{flex-wrap:wrap}
}

/* ══ 전자기장 원고 _수정1(2026-10-08) - 짙은 부제 · 3단계 그림 줄(workFlow) · 그림 여러 장(figs) · 사진 단계 카드 ══
   ⚠ 이름 wkf-* · wdp-figs · wdg-ph · wdg-tx 는 시안 전체 0건을 확인하고 지었다. 자료가 있는 소분류만 쓴다. */
.wa-body .wp-sub.ink{color:var(--ink)}
.wa-body .wp-sub.gray{color:var(--slate);font-weight:500;font-size:clamp(16px,1.36vw,20px);line-height:1.5}   /* 2026-10-10 */
/* 하는 일 카드 아래 그림 줄 - 연한 파란 바탕, 그림 가장자리를 바탕으로 녹이고(mask) 사이에 화살표 */
.wkf{display:flex;align-items:center;gap:clamp(10px,1.2vw,18px);margin-top:clamp(16px,1.6vw,22px);
  padding:clamp(16px,1.8vw,26px) clamp(14px,1.8vw,26px);border-radius:16px;
  background:linear-gradient(180deg,#F6FAFE,#EDF4FD);border:1px solid #E1ECFA}
.wkf-it{flex:1 1 0;min-width:0;margin:0}
.wkf-ph{display:block;aspect-ratio:16/10;overflow:hidden}
.wkf-ph img{width:100%;height:100%;object-fit:cover;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%),
    linear-gradient(180deg,transparent 0,#000 7%,#000 93%,transparent 100%);
  mask-composite:intersect}
.wkf-it figcaption{margin-top:12px;text-align:center;font-size:clamp(15px,1.25vw,17.5px);font-weight:800;
  color:var(--blue-d);letter-spacing:-.01em;line-height:1.4}
/* 화살표 - 그림 높이의 가운데에 오게 아래 여백으로 글자 줄만큼 올린다 */
.wkf-ar{flex:none;position:relative;width:24px;height:2px;border-radius:1px;background:var(--blue);margin-bottom:36px}
.wkf-ar::after{content:"";position:absolute;right:-1px;top:50%;width:9px;height:9px;
  border-top:2px solid var(--blue);border-right:2px solid var(--blue);transform:translateY(-50%) rotate(45deg)}
/* 측정 장비 이름 - 원고 _수정1 에서 크게 */
.wds-ph figcaption{font-size:clamp(15.5px,1.3vw,18px);font-weight:800;color:var(--ink)}
/* 절차 옆 그림 여러 장 - 세로로 쌓는다 */
.wdp-figs{display:grid;gap:14px}
/* 그림이 두 장 이상이면 목록을 위에 붙인다(가운데로 두면 목록 위가 비어 보인다) */
.wdp:has(.wdp-fig + .wdp-fig){align-items:start}
.wdp:has(.wdp-fig + .wdp-fig) .wdp-list{padding-top:6px}
/* 사진 단계 카드 - 사진 위 · 글 아래(아이콘 · 번호 · 화살표 없이, 원고 _수정1) */
.wk-sum + .wdg{margin-top:clamp(18px,2vw,26px)}
.wdg.has-img{gap:clamp(14px,1.4vw,20px)}
.wdg.has-img .wdg-it{padding:0;overflow:hidden}
.wdg.has-img .wdg-it::after{display:none}
.wdg-ph{display:block;margin:0;aspect-ratio:2/1;overflow:hidden;background:var(--bg-2);border-bottom:1px solid var(--line-2)}
/* ⚠ 사진 칸도 <span> 이라 위 `.wdg-it span{margin-top:10px}`(설명 글용)이 걸려 사진 위에 흰 띠가 생겼다 - .wdg-it 를 붙여 이긴다 */
.wdg.has-img .wdg-it .wdg-ph{margin:0}
.wdg-ph img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.wdg.has-img .wdg-it:hover .wdg-ph img{transform:scale(1.03)}
.wdg-tx{padding:clamp(16px,1.6vw,22px) clamp(18px,1.7vw,24px) clamp(20px,1.9vw,26px)}
.wdg.has-img + .wdg-target{justify-content:center;background:#F0F7FF;border-color:#DCEBFD}
.wdg.has-img + .wdg-target b{padding-right:14px;border-right:1px solid #C9DEF8}
.wdg.has-img + .wdg-target span{font-weight:700;color:var(--char)}
/* 폰 - 세로로 쌓으면 화면 세 장 길이가 된다. 한 줄을 지키고 그림을 정사각으로, 화살표는 작게 */
@media (max-width:720px){
  .wkf{gap:6px;padding:14px 10px}
  .wkf-ph{aspect-ratio:1/1}
  .wkf-it figcaption{margin-top:8px;font-size:13px;word-break:keep-all}
  .wkf-ar{width:12px;margin-bottom:30px}
  .wkf-ar::after{width:7px;height:7px}
}
/* 사진 4장 - 폰에서는 2열(1열이면 너무 길다) */
@media (max-width:640px){
  .wd-photos[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wd-photos figcaption{padding:9px 10px;font-size:13px}
}

/* ══ 측정 절차 - 주 그림 + 보조 카드(.wdp.pair · .wdp-side · .wdp-sub, 2026-10-08 대표님 "수중이 위로, 육상은 서브(몇 지점만) ·
   사진과 글 밸런스") ══
   왼쪽 = 번호 목록 카드 / 오른쪽 칸 = 주 그림(수중) 카드 + 그 아래 작은 보조 카드(육상). 두 칸 높이를 맞춘다(stretch).
   ⚠ .wdp.has-fig 의 폰 규칙(1열)보다 뒤에 있으므로 폰 규칙을 아래에 다시 둔다. */
.wdp.pair{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:stretch;gap:clamp(14px,1.6vw,22px)}
.wdp.pair .wdp-list{display:flex;flex-direction:column;justify-content:center;
  padding:clamp(20px,2.2vw,32px) clamp(18px,2vw,30px);border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:var(--sh-1)}
.wdp-side{display:flex;flex-direction:column;gap:clamp(12px,1.2vw,14px);min-width:0}
.wdp-side .wdp-figs{flex:1;display:flex}
.wdp-side .wdp-fig{flex:1;display:flex;flex-direction:column;justify-content:center}
.wdp-side .wdp-fig figcaption{margin-top:10px;font-size:15.5px;font-weight:800;color:var(--ink)}
.wdp-sub{display:flex;align-items:center;gap:clamp(12px,1.4vw,18px);
  padding:10px clamp(14px,1.4vw,18px) 10px 10px;border:1px solid var(--line-2);border-radius:14px;background:var(--bg-2)}
.wdp-sub-ph{flex:none;display:block;width:38%;max-width:220px;aspect-ratio:752/424;overflow:hidden;
  border-radius:9px;background:#fff;border:1px solid var(--line-2)}
.wdp-sub-ph img{width:100%;height:100%;object-fit:contain}
.wdp-sub-tx{min-width:0}
.wdp-sub-tx em{display:inline-block;margin-bottom:6px;padding:2px 9px;border-radius:999px;background:#E3E9F0;
  color:var(--slate);font-size:12px;font-weight:800;font-style:normal;letter-spacing:.02em}
.wdp-sub-tx b{display:block;font-size:clamp(15px,1.2vw,16.5px);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.wdp-sub-tx span{display:block;margin-top:4px;font-size:clamp(13.6px,1vw,14.6px);color:var(--slate);
  line-height:1.55;word-break:keep-all}
@media (max-width:900px){
  .wdp.pair{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:480px){
  .wdp-sub{flex-direction:column;align-items:stretch;padding:10px}
  .wdp-sub-ph{width:100%;max-width:none}
}

/* ══ 제도 상자 보강(2026-10-08 화학물질 07-1 · 07-3) - 근거 줄 · 점 목록 · 기한 칸 · 상자 여러 개 · 번호 카드 2장 ══ */
.sbox + .sbox{margin-top:18px}
.sb-basis{display:flex;align-items:center;flex-wrap:wrap;gap:8px;margin:-4px 0 18px;padding-bottom:14px;
  border-bottom:1px dashed var(--line);font-size:14px;color:var(--slate);font-weight:600}
.sb-basis em{font-style:normal;font-size:12px;font-weight:800;color:#1e3a5f;background:#E8EFF7;
  padding:3px 9px;border-radius:999px}
.sb-ul{list-style:none;margin:0;padding:0;columns:2;column-gap:44px;font-size:15px;color:#334155;line-height:1.65}
.sb-ul.one{columns:1}
.sb-ul li{position:relative;break-inside:avoid;margin:0 0 7px;padding-left:16px;word-break:keep-all}
.sb-ul li::before{content:"";position:absolute;left:2px;top:.68em;width:6px;height:6px;border-radius:50%;background:var(--blue)}
@media (max-width:760px){.sb-ul{columns:1}}
/* 기한 칸 - 사유 · 큰 기한 · 기준(작은 글). 표 대신(대표님 - 표 디자인을 쓰지 않는다) */
.sb-tiles{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:12px}
.sb-tiles>div{display:flex;flex-direction:column;gap:4px;padding:14px 16px;border:1px solid var(--line);
  border-radius:12px;background:#F8FBFF}
.sb-tiles b{font-size:14.4px;font-weight:700;color:var(--char);line-height:1.45;word-break:keep-all}
.sb-tiles strong{font-size:clamp(20px,1.8vw,24px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.2}
.sb-tiles span{font-size:12.8px;color:var(--stone)}
@media (max-width:640px){.sb-tiles{grid-template-columns:minmax(0,1fr)}}
/* 번호 카드가 2장이면 2열(3열 격자에 빈칸이 남지 않게) - 2026-10-08 기존화학물질 사전신고 */
.wk-steps:has(> div:nth-child(2):last-child){grid-template-columns:repeat(2,minmax(0,1fr))}
@media (max-width:820px){.wk-steps:has(> div:nth-child(2):last-child){grid-template-columns:1fr}}

/* ══ 연구본부 수정본(2026-10-08) - 사례 머리 · 자세히 덩어리(cols · picflow) · 맺음 띠 밝게 ══
   ⚠ 이름 wcs-kick · wcs-h · wdc-* · wdf-* 는 시안 전체 0건을 확인하고 지었다. */
/* 사례 머리 - 파란 작은 글씨(갈래) + 검은 큰 제목. 크기는 '조사 내용' 큰 제목(.wk-h)과 같다 */
.wcase .wcs-kick{margin:34px 0 6px;font-size:15px;font-weight:800;color:var(--blue);letter-spacing:.01em}
.wcase .wcs-h{margin:0 0 18px;font-size:clamp(21px,1.95vw,29px);font-weight:800;color:var(--ink);
  letter-spacing:-.03em;line-height:1.28;word-break:keep-all}
/* cols - 번호 · 제목 카드 + 점 목록 */
.wdc{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(14px,1.4vw,20px)}
.wdc-it{padding:clamp(20px,1.9vw,26px) clamp(18px,1.7vw,24px);border:1px solid var(--line);border-radius:16px;
  background:#fff;box-shadow:var(--sh-1)}
.wdc-h{display:flex;align-items:baseline;gap:10px;margin-bottom:12px;padding-bottom:12px;border-bottom:1px solid var(--line-2)}
.wdc-h b{font-size:clamp(17px,1.45vw,21px);font-weight:800;color:var(--blue);letter-spacing:-.02em}
.wdc-h strong{font-size:clamp(16px,1.4vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.wdc-it ul{list-style:none;margin:0;padding:0}
.wdc-it li{position:relative;padding-left:14px;margin-top:8px;font-size:clamp(14.6px,1.1vw,15.8px);color:var(--char);
  line-height:1.6;word-break:keep-all}
.wdc-it li::before{content:"";position:absolute;left:1px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
/* picflow - 사진 카드 + 사이 화살표(사진 높이의 가운데) */
.wdf{display:grid;grid-template-columns:repeat(var(--n,4),minmax(0,1fr));gap:clamp(24px,2.4vw,34px)}
.wdf-it{border:1px solid var(--line);border-radius:16px;background:#fff;box-shadow:var(--sh-1)}
.wdf-pw{position:relative;display:block}
.wdf-ph{display:block;aspect-ratio:1.84/2.25;overflow:hidden;border-radius:15px 15px 0 0;border-bottom:1px solid var(--line-2);background:var(--bg-2)}
.wdf-ph img{width:100%;height:100%;object-fit:cover}
.wdf-it:not(:last-child) .wdf-pw::after{content:"";position:absolute;top:50%;
  right:calc(-1 * clamp(24px,2.4vw,34px) / 2 - 5px);width:10px;height:10px;
  border-top:2.5px solid var(--blue);border-right:2.5px solid var(--blue);transform:translateY(-50%) rotate(45deg)}
.wdf-tx{padding:clamp(14px,1.4vw,18px) clamp(14px,1.4vw,18px) clamp(16px,1.6vw,20px)}
.wdf-tx strong{display:block;font-size:clamp(16px,1.35vw,18.5px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.wdf-tx em{display:block;margin-top:7px;font-style:normal;font-size:clamp(14px,1.05vw,15.2px);color:var(--slate);line-height:1.6;word-break:keep-all}
/* 맺음 띠 - 남색 반쪽 배경 제거(2026-10-08 대표님). 연한 바탕 위 짙은 글씨 - 오른쪽 물결 사진의 흰 쪽과 이어진다 */
.wout{background:#fff;border:1px solid var(--line);box-shadow:var(--sh-1)}
.wout .wo-t{color:var(--ink)}
.wout .wo-d{color:var(--slate)}
@media (max-width:900px){
  .wdc{grid-template-columns:minmax(0,1fr)}
  .wdf{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .wdf-it:not(:last-child) .wdf-pw::after{display:none}
}

/* ══ 연구 배경(intro) - 2026-10-10 바다고리풀 대표님 2차 수정본 ══
   ⚠ 이름 wi-* 는 시안 전체 0건을 확인하고 지었다. 머리 · 제목 · 설명은 '하는 일'(.wa-t · .wk-h · .wk-lead) 그대로. */
.wk-sum.wi{margin-bottom:6px}
/* 연구 배경 설명 두 줄 - '.wa-body p'(15.4px)가 '.wk-lead' 를 특이도로 이겨 작게 나왔다(대표님 '글씨가 너무 작음', 2026-10-10).
   조상 둘을 붙여 이긴다. 크기는 제목(.wk-h 29px)과 위 소개 글(.wp-lead 20px) 사이 */
.wa-body .wk-sum.wi .wk-lead{font-size:clamp(16px,1.36vw,19px);line-height:1.6;margin-top:10px}
.wi-fig{margin-top:clamp(16px,1.6vw,22px);padding:clamp(16px,1.8vw,24px) clamp(14px,1.8vw,24px) 12px;
  background:#eff6ff;border:1px solid #dbeafe;border-radius:14px}   /* 파란 상자(.wflow 와 같은 색) - 2026-10-10 대표님 */
.wi-img{position:relative}
.wi-fig .wf-in img{border-radius:10px}
.wi-fig .wf-labels{height:28px;margin-top:6px}
.wi-fig .wf-labels span{font-size:clamp(14.4px,1.2vw,16.8px);font-weight:800;color:var(--ink)}
.wi-mark{position:absolute;transform:translate(-50%,-50%);padding:7px 12px;border-radius:999px;
  background:rgba(219,234,254,.92);border:1px solid #bfdbfe;color:#1e3a8a;font-weight:800;
  font-size:clamp(13px,1.1vw,16px);line-height:1;white-space:nowrap}
/* ⚠ '.wa-body p'(0,1,1) 가 '.wi-note' 를 이겨 여백 0 · 15.4px 로 나왔다 - 조상을 붙인다 */
.wa-body .wi-note{margin:14px 0 0;text-align:center;font-size:14.4px;line-height:1.6;color:var(--stone);word-break:keep-all;text-wrap:balance}
/* 폰 - 가로로 밀지 않고 그림 전체를 보인다(밀면 소 그림이 화면 밖에 숨는다). 이름은 두 줄까지 접는다 */
@media (max-width:720px){
  .wi-fig{padding:14px 10px 10px}
  .wi-fig .wf-scroll{overflow:visible}
  .wi-fig .wf-in{min-width:0}
  .wi-fig .wf-labels{height:auto;min-height:36px;margin-top:8px}
  .wi-fig .wf-labels span{width:27%;white-space:normal;text-align:center;line-height:1.35;font-size:12.6px;word-break:keep-all}
  .wi-mark{padding:4px 7px;font-size:11px}
  .wa-body .wi-note{font-size:13px;margin-top:10px}
}
/* `headTone: "blue"` 소분류 - 블록 머리만 파란 글씨(제목 .wk-h 는 검은 큰 글씨 그대로) */
.hd-blue .wa-t,.hd-blue .wg-t{color:var(--blue)}
/* 같은 소분류 안에서는 갤러리 머리(.wg-t, 원래 17px · 아래 밑줄)도 다른 머리(.wa-t)와 같은 크기 · 모양으로
   (2026-10-10 대표님 - "바다고리풀 연구 · 개발 흐름, 배양 연구현장 글씨 크기가 다른 것과 같게") */
.hd-blue .wg-t{display:flex;align-items:center;gap:14px;font-size:20px;letter-spacing:-.02em;
  margin:clamp(30px,3.6vh,48px) 0 15px;padding-bottom:0;border-bottom:0}
.hd-blue .wg-t::after{content:"";flex:1;height:1px;background:var(--line)}

/* ══ 번호 갈래(parts) - 2026-10-10 친환경 육상 양식 · 배양 대표님 시안 ══
   ⚠ 이름 xp-* 는 시안 전체 0건을 확인하고 지었다. 글은 div/span 이라 '.wa-body p' 영향을 받지 않는다. */
.xp{margin-top:clamp(44px,4.4vw,64px)}
.xp-hd{display:flex;align-items:baseline;gap:12px}
.xp-hd b{font-size:clamp(24px,2.1vw,30px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1}
.xp-hd span{font-size:13.5px;font-weight:800;color:var(--blue);letter-spacing:.06em}
.xp-hd::after{content:"";flex:1;height:1px;background:#bfdbfe;align-self:center}
.xp-t{margin-top:12px;font-size:clamp(22px,2.05vw,30px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
.xp-sub{margin-top:8px;font-size:clamp(16px,1.36vw,19px);font-weight:600;color:var(--char);line-height:1.5;word-break:keep-all}
.xp-desc{margin-top:4px;font-size:clamp(14.6px,1.12vw,16px);color:var(--stone);line-height:1.6;word-break:keep-all}
/* 도식 + 오른쪽 칸 */
.xp-dg{margin-top:24px}
.xp-dg.has-side{display:grid;grid-template-columns:minmax(0,1fr) 236px;gap:22px;align-items:center}
.xp-scroll{overflow-x:auto;overflow-y:hidden}
.xp-fig{min-width:540px}
.xp-top{position:relative;height:30px}
.xp-top span{position:absolute;top:0;transform:translateX(-50%);white-space:nowrap;font-size:clamp(14.4px,1.2vw,16.6px);font-weight:800;color:var(--ink)}
.xp-img{position:relative}
.xp-img img{display:block;width:100%;height:auto}
.xp-mk{position:absolute;transform:translate(-50%,-50%);width:14%;text-align:center;font-size:clamp(12.4px,1vw,14px);font-weight:700;
  color:var(--char);line-height:1.35;word-break:keep-all}
.xp-loop{position:absolute;transform:translate(-50%,-50%);padding:6px 16px;border-radius:999px;background:var(--blue);color:#fff;
  font-size:clamp(12.6px,1.05vw,14.4px);font-weight:800;white-space:nowrap;box-shadow:0 2px 8px rgba(5,131,242,.25)}
.xp-side{display:flex;flex-direction:column;gap:14px;padding:18px 16px;background:#f2f7fe;border:1px solid #dbeafe;border-radius:14px}
.xp-side div{display:flex;align-items:center;gap:12px}
.xp-side i{flex:0 0 46px;height:46px;border-radius:50%;background:#fff;border:1px solid #cfe3fb;display:grid;place-items:center;color:#0d9488}
.xp-side i svg{width:26px;height:26px}
.xp-side i img{max-width:30px;max-height:30px;object-fit:contain}
.xp-side span{font-size:14.6px;font-weight:700;color:var(--char);line-height:1.4;word-break:keep-all}
/* ⚠ 칸 이름은 xc-* - '.lb' 는 사진 크게 보기(라이트박스) 클래스라 display:none · fixed 로 숨었다(2026-10-10 실제로 밟음)
   순환 도식(diagram.cycle) - 위 이름 줄 · 그림 줄(바닥 맞춤) · 화살표 칸(아래 이름) · 아래 되돌림 선 */
.xp-cyc{min-width:560px;padding-bottom:18px}
.xp-cyc-g{display:grid;grid-template-rows:auto auto;column-gap:0;row-gap:10px;align-items:end}
.xp-cyc-g .xc-lb{text-align:center;font-size:clamp(14.4px,1.2vw,16.6px);font-weight:800;color:var(--ink);white-space:nowrap}
.xp-cyc-g .xc-it img{display:block;width:100%;height:auto}
.xp-cyc-g .xc-ln{align-self:center;display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 4px}
.xp-cyc-g .xc-ln .xp-ar{width:100%}
.xp-cyc-g .xc-ln .xp-ar svg{width:100%;max-width:64px;height:20px}
.xp-cyc-g .xc-ln span{text-align:center;font-size:clamp(12.4px,1vw,14px);font-weight:700;color:var(--char);line-height:1.35;word-break:keep-all}
.xp-cyc-loop{position:relative;height:26px;margin-top:4px;border:2.5px solid var(--blue);border-top:0;border-radius:0 0 18px 18px}
.xp-cyc-loop::before{content:"";position:absolute;left:-8.5px;top:-12px;border-left:7px solid transparent;border-right:7px solid transparent;
  border-bottom:11px solid var(--blue)}
.xp-cyc-loop span{position:absolute;left:50%;top:100%;transform:translate(-50%,-50%);padding:6px 16px;border-radius:999px;
  background:var(--blue);color:#fff;font-size:clamp(12.6px,1.05vw,14.4px);font-weight:800;white-space:nowrap;box-shadow:0 2px 8px rgba(5,131,242,.25)}
/* 문제 -> 해결 */
.xp-iss{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr) auto minmax(0,1.1fr);gap:14px;align-items:stretch;margin-top:24px}
.xp-iss .c{display:flex;align-items:center;gap:12px;padding:14px 16px;background:#f6f9fd;border:1px solid var(--line);border-radius:12px}
.xp-iss .c i{flex:0 0 40px;height:40px;display:grid;place-items:center}
.xp-iss .c img{max-width:38px;max-height:38px;object-fit:contain}
.xp-iss .c span{font-size:15px;font-weight:700;color:var(--char);line-height:1.4;word-break:keep-all}
.xp-iss .c.to{background:#eef5fe;border-color:#93c5fd}
.xp-iss .c.to span{font-size:16.6px;font-weight:800;color:var(--blue)}
.xp-ar{display:grid;place-items:center;color:var(--blue);font-style:normal}
.xp-ar svg{width:28px;height:16px}
/* 사진 카드 - 누끼 사진이라 연한 바탕 위에 통째로(contain) */
.xp-ph{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(16px,1.8vw,26px);margin-top:26px}
.xp-card .ph{display:block;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);
  background:linear-gradient(180deg,#f6f9fd 0%,#e8f0fa 100%)}
.xp-card .ph img{width:100%;height:100%;object-fit:contain;padding:12px 16px}
.xp-card .ph.fill img{object-fit:cover;padding:0}
.xp-card b{display:block;margin-top:14px;font-size:clamp(17px,1.45vw,20px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-card .d{display:block;margin-top:6px;font-size:clamp(14.6px,1.12vw,15.6px);color:var(--stone);line-height:1.6;word-break:keep-all}
/* 단계 줄 */
.xp-flow{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:24px;padding-top:22px;border-top:1px solid var(--line)}
.xp-flow .s{display:flex;align-items:center;gap:12px}
.xp-flow .s i{flex:0 0 60px;height:60px;border-radius:50%;background:#fff;border:1.5px solid #bfdbfe;display:grid;place-items:center}
.xp-flow .s img{max-width:34px;max-height:36px;object-fit:contain}
.xp-flow .s span{font-size:clamp(14.6px,1.2vw,16.4px);font-weight:800;color:var(--ink);white-space:nowrap}
/* 협력 띠 */
.xp-band{display:flex;align-items:center;flex-wrap:wrap;gap:12px 18px;margin-top:22px;padding:14px 22px;background:#eef5fe;border-radius:12px}
.xp-band b{display:flex;align-items:center;gap:10px;font-size:15.6px;font-weight:800;color:var(--blue);white-space:nowrap}
.xp-band b img{width:38px;height:auto}
.xp-band span{padding-left:18px;border-left:1px solid #bfdbfe;font-size:15px;color:var(--char);line-height:1.5;word-break:keep-all}
@media (max-width:1100px){
  .xp-dg.has-side{grid-template-columns:minmax(0,1fr)}
  .xp-side{flex-direction:row;flex-wrap:wrap}
  .xp-side div{flex:1 1 200px}
}
@media (max-width:820px){
  .xp-iss{grid-template-columns:minmax(0,1fr)}
  .xp-iss .xp-ar{transform:rotate(90deg);justify-self:center}
  .xp-ph{grid-template-columns:minmax(0,1fr)}
  .xp-flow{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
  .xp-flow .xp-ar{display:none}
  .xp-band{flex-direction:column;align-items:flex-start}
  .xp-band span{padding-left:0;border-left:0}
}
@media (max-width:640px){
  .xp-top span{font-size:13px}
  .xp-flow .s i{flex-basis:50px;height:50px}
  .xp-flow .s span{white-space:normal}
}

/* ══ CCUS 시안(2026-10-10 대표님) - 하는 일 아래 띠(workPoints) · 번호 없는 갈래 · 개념도 띠(diagram.steps) · 알약(pills) ·
      큰 아이콘 단계(flowBig) · 두 줄 띠(band.d). 자료가 있는 소분류만 쓴다.
   ⚠ 이름 wk-pts · xp-wt · xp-strip · xs-* · xp-chv · xp-pills 는 시안 전체 0건을 확인하고 지었다. 글은 div/span('.wa-body p' 영향 없음). */
.wk-pts{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:clamp(14px,1.4vw,20px);
  padding:clamp(16px,1.5vw,22px) 0;background:#eef5fe;border-radius:14px}
.wk-pts > div{padding:0 clamp(18px,2vw,30px);border-left:1px solid #cfe0f5;min-width:0}
.wk-pts > div:first-child{border-left:0}
.wk-pts b{display:block;font-size:clamp(16px,1.36vw,19px);font-weight:800;color:#1e3a8a;letter-spacing:-.02em;word-break:keep-all}
.wk-pts span{display:block;margin-top:6px;font-size:clamp(14.4px,1.12vw,16px);color:var(--slate);line-height:1.55;word-break:keep-all}
.xp-wt{margin-top:0}
.xp-wt + .xp-t{margin-top:0}
.xp-strip{min-width:640px;border:1px solid #dbeafe;border-radius:14px;overflow:hidden;background:#f4f8fe}
.xs-top{position:relative;height:clamp(44px,3.6vw,54px)}
.xs-top span{position:absolute;top:50%;transform:translate(-50%,-50%);white-space:nowrap;
  font-size:clamp(14px,1.2vw,16.6px);font-weight:800;color:#1e3a8a;letter-spacing:-.01em}
.xs-top .xp-chv{position:absolute;top:50%;transform:translate(-50%,-50%)}
.xp-chv{display:grid;place-items:center;color:var(--blue);font-style:normal}
.xp-chv svg{width:10px;height:18px}
.xs-img img{display:block;width:100%;height:auto}
.xs-cap{margin-top:10px;text-align:center;font-size:14px;color:var(--slate)}
.xp-pills{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:16px}
.xp-pills span{display:flex;align-items:center;justify-content:center;text-align:center;min-height:54px;padding:10px 16px;
  background:#eef5fe;border:1px solid #dbeafe;border-radius:10px;font-size:clamp(15px,1.2vw,16.6px);font-weight:700;color:#1e3a8a;
  line-height:1.4;word-break:keep-all}
.xp-flow.big{justify-content:space-around;align-items:flex-start;border-top:0;padding-top:0;margin-top:clamp(28px,2.8vw,40px)}
.xp-flow.big .s{flex-direction:column;gap:12px}
.xp-flow.big .s i{flex:none;display:block;width:auto;height:clamp(84px,7.4vw,112px);border:0;border-radius:0;background:none}
.xp-flow.big .s img{display:block;width:auto;height:100%;max-width:none;max-height:none}
.xp-flow.big .s span{font-size:clamp(15px,1.3vw,18px)}
.xp-flow.big > .xp-chv{align-self:flex-start;margin-top:calc(clamp(84px,7.4vw,112px) / 2 - 11px)}
.xp-flow.big > .xp-chv svg{width:12px;height:22px}
.xp-band.stack{flex-wrap:nowrap;gap:18px;padding:16px 24px}
.xp-band.stack > i{flex:0 0 auto;display:grid;place-items:center;font-style:normal}
.xp-band.stack > i img{width:40px;height:auto}
.xp-band.stack b{display:block;font-size:16.6px;color:#1e3a8a;white-space:normal}
.xp-band.stack span{display:block;margin-top:3px;padding-left:0;border-left:0;font-size:15px;color:var(--slate)}
@media (max-width:820px){
  .wk-pts{grid-template-columns:minmax(0,1fr);padding:4px 0}
  .wk-pts > div{border-left:0;border-top:1px solid #cfe0f5;padding:14px 18px}
  .wk-pts > div:first-child{border-top:0}
  .xp-pills{grid-template-columns:minmax(0,1fr);gap:10px}
  .xp-pills span{min-height:46px}
  .xp-flow.big{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 14px}
  .xp-flow.big > .xp-chv{display:none}
  .xp-band.stack{flex-direction:row;align-items:center}
}
@media (max-width:640px){
  .xp-flow.big .s i{flex-basis:auto;height:76px}
  .xs-top span{font-size:13.5px}
}

/* ══ 해양 산성화 시안(2026-10-10 대표님) - 테두리 사진 카드(photosBox) · 아이콘 칸 띠(iconRow) · 세로선 칸(cols).
   ⚠ 이름 xp-irow · xp-cols · .xp-ph.boxed 는 시안 전체 0건을 확인하고 지었다. 글은 div/span('.wa-body p' 영향 없음). */
.xp-ph.boxed .xp-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;
  overflow:hidden;box-shadow:var(--sh-1)}
.xp-ph.boxed .xp-card .ph{border:0;border-radius:0}
.xp-ph.boxed .xp-card b{margin:0;padding:18px 22px 0}
.xp-ph.boxed .xp-card .d{padding:0 22px 20px}
.xp-ph.boxed .xp-card b:last-child{padding-bottom:20px}
.xp-irow{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:24px;padding:clamp(18px,2vw,26px) 0;
  background:#eef5fe;border-radius:14px}
.xp-irow > div{display:flex;align-items:center;gap:clamp(14px,1.4vw,22px);padding:0 clamp(16px,2vw,30px);border-left:1px solid #cfe0f5;min-width:0}
.xp-irow > div:first-child{border-left:0}
.xp-irow i{flex:0 0 auto;display:grid;place-items:center;width:clamp(70px,6.4vw,96px);height:clamp(62px,5.6vw,84px);font-style:normal}
.xp-irow i img{max-width:100%;max-height:100%;object-fit:contain}
.xp-irow b{display:block;font-size:clamp(16px,1.36vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-irow span{display:block;margin-top:6px;font-size:clamp(14.4px,1.12vw,16px);color:var(--slate);line-height:1.55;word-break:keep-all}
.xp-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));margin-top:4px}
.xp-cols > div{padding:2px clamp(16px,2vw,30px);border-left:1px solid var(--line);min-width:0}
.xp-cols > div:first-child{border-left:0;padding-left:0}
.xp-cols b{display:block;font-size:clamp(16px,1.36vw,19px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-cols span{display:block;margin-top:6px;font-size:clamp(14.4px,1.12vw,16px);color:var(--slate);line-height:1.55;word-break:keep-all}
@media (max-width:820px){
  .xp-irow{grid-template-columns:minmax(0,1fr);padding:4px 0}
  .xp-irow > div{border-left:0;border-top:1px solid #cfe0f5;padding:14px 18px}
  .xp-irow > div:first-child{border-top:0}
  .xp-cols{grid-template-columns:minmax(0,1fr)}
  .xp-cols > div{border-left:0;border-top:1px solid var(--line);padding:12px 0}
  .xp-cols > div:first-child{border-top:0}
}
/* 파란 머리(headTone blue) 소분류의 '하는 일' 한 줄 설명 - '.wa-body p'(15.4px · 짙은 글씨 · 위 여백 0)에 져 있던 원래 설계로 되돌린다
   (2026-10-10 해양 산성화 시안 - 회색 한 줄). workLeadFit(.fit) · 연구 배경(.wi, 19px)은 제 크기 규칙을 그대로 쓴다 */
.hd-blue .wk-sum:not(.wi) .wk-lead:not(.fit){margin:12px 0 0;font-size:clamp(15.4px,1.24vw,17.4px);color:var(--stone);line-height:1.65}

/* ══ 해역이용협의 · 영향평가 시안(2026-10-10 대표님) - 절차별 정보 카드(dcards) · 그림 화살표(flowSep) · 단계 아래 한 줄(flowNote).
   ⚠ 이름 xp-dcard(s) · xp-sep · xp-fnote 는 시안 전체 0건을 확인하고 지었다. 글은 div/span('.wa-body p' 영향 없음). */
.xp-dcards{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:24px}
.xp-dcard{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:var(--sh-1);min-width:0}
.xp-dcard .dh{padding:16px 22px;background:#eef5fe;font-size:clamp(17px,1.45vw,20px);font-weight:800;color:#1e3a8a;letter-spacing:-.02em;word-break:keep-all}
.xp-dcard .db{padding:4px 22px 6px}
.xp-dcard .dr{padding:14px 0;border-top:1px solid var(--line)}
.xp-dcard .dr:first-child{border-top:0}
.xp-dcard .dr b{display:block;margin-bottom:6px;font-size:14.4px;font-weight:800;color:var(--blue)}
.xp-dcard .dr span{display:block;font-size:clamp(14.4px,1.12vw,15.6px);color:var(--char);line-height:1.6;word-break:keep-all}
.xp-flow.big > .xp-sep{align-self:flex-start;display:grid;place-items:center;font-style:normal;margin-top:calc(clamp(84px,7.4vw,112px) / 2 - 12px)}
.xp-flow.big > .xp-sep img{width:auto;height:26px;max-width:40px}   /* 높이 기준 - 화살표 · 꺾쇠 어느 그림이든(2026-10-10) */
.xp-fnote{margin-top:14px;text-align:center;font-size:14.4px;color:var(--stone);word-break:keep-all}
@media (max-width:820px){
  .xp-dcards{grid-template-columns:minmax(0,1fr)}
  .xp-flow.big > .xp-sep{display:none}
}

/* ══ 간이해역이용협의 시안(2026-10-10 대표님) - 사진 + 번호 목록(pairList).
   ⚠ 이름 xp-plist · pl-* 는 시안 전체 0건을 확인하고 지었다. 글은 div/span/strong('.wa-body p' 영향 없음). */
.xp-plist{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:clamp(24px,3vw,44px);align-items:start;margin-top:24px}
.xp-plist .pl-fig{margin:0}
.xp-plist .ph{display:block;aspect-ratio:1.42;border-radius:14px;overflow:hidden;box-shadow:var(--sh-1)}
.xp-plist .ph img{display:block;width:100%;height:100%;object-fit:cover}
.xp-plist figcaption{margin-top:10px;font-size:14px;color:var(--slate)}
.xp-plist .pl-it{display:grid;grid-template-columns:auto minmax(0,1fr);column-gap:16px;align-items:baseline;padding:clamp(18px,1.8vw,26px) 0;border-top:1px solid var(--line)}
.xp-plist .pl-it:first-child{border-top:0;padding-top:clamp(8px,1vw,14px)}
.xp-plist .pl-it b{font-size:clamp(22px,1.9vw,27px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1}
.xp-plist .pl-it b::after{content:"";display:inline-block;width:3px;height:.78em;margin-left:16px;background:var(--blue);vertical-align:baseline}
.xp-plist .pl-it strong{display:block;font-size:clamp(17px,1.45vw,20px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-plist .pl-it span{display:block;margin-top:10px;font-size:clamp(14.4px,1.12vw,16px);color:var(--slate);line-height:1.6;word-break:keep-all}
@media (max-width:900px){
  .xp-plist{grid-template-columns:minmax(0,1fr)}
}

/* ══ 산업 배출수 시안(2026-10-12 대표님) - 사진 카드 학명 · 알약 / 큰 아이콘 단계 아래 설명 · 가는 선 화살표 / 독성값 식 상자(formula).
   ⚠ 이름 xp-tag · xp-sci · .sd · xp-sep.ln · xp-fx · fx-* 는 시안 전체 0건을 확인하고 지었다. 글은 div/span/b('.wa-body p' 영향 없음). */
.xp-card b:has(> .xp-tag){display:flex;align-items:center;justify-content:space-between;gap:10px}
.xp-card .xp-tag{flex:0 0 auto;font-style:normal;font-size:13px;font-weight:700;color:var(--blue);background:#eaf3fe;border-radius:6px;padding:4px 10px;letter-spacing:0}
.xp-card .xp-sci{display:block;margin-top:4px;font-size:clamp(14.4px,1.1vw,15.4px);color:var(--slate);font-style:italic}
.xp-ph.boxed .xp-card .xp-sci{padding:0 22px}
.xp-ph.boxed .xp-card .xp-sci + .d{margin-top:10px}
.xp-flow.big .s .sd{margin-top:-6px;font-size:clamp(13.6px,1.08vw,15px);font-weight:500;color:var(--stone);text-align:center;white-space:normal;word-break:keep-all}
.xp-flow.big > .xp-sep.ln{color:#60a5fa;margin-top:calc(clamp(84px,7.4vw,112px) / 2 - 8px)}
.xp-flow.big > .xp-sep.ln svg{display:block;width:34px;height:16px}
.xp-fx{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);align-items:center;margin-top:24px;
  padding:clamp(22px,2.4vw,34px) clamp(22px,2.6vw,38px);background:#eef5fe;border-radius:14px}
.xp-fx .fx-l{padding-right:clamp(18px,2.4vw,36px);border-right:1px solid #cfe0f5}
.xp-fx .fx-eq{display:block;font-size:clamp(26px,2.5vw,36px);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.2;white-space:nowrap}
.xp-fx .fx-eq em{font-style:normal;color:var(--blue)}
.xp-fx .fx-note{display:block;margin-top:10px;font-size:clamp(14.4px,1.1vw,15.4px);color:var(--stone)}
.xp-fx .fx-r{padding-left:clamp(18px,2.4vw,36px)}
.xp-fx .fx-row{display:grid;grid-template-columns:clamp(56px,5vw,76px) minmax(0,1fr);gap:16px;padding:11px 0;border-bottom:1px solid #cfe0f5}
.xp-fx .fx-row b{font-size:clamp(14.4px,1.1vw,15.4px);font-weight:800;color:var(--ink)}
.xp-fx .fx-row span{font-size:clamp(14.4px,1.1vw,15.4px);color:var(--char);line-height:1.55;word-break:keep-all}
.xp-fx .fx-foot{display:block;margin-top:12px;font-size:clamp(14.4px,1.1vw,15.4px);font-weight:700;color:var(--char);word-break:keep-all}
@media (max-width:820px){
  .xp-fx{grid-template-columns:minmax(0,1fr)}
  .xp-fx .fx-l{padding:0 0 18px;border-right:0;border-bottom:1px solid #cfe0f5}
  .xp-fx .fx-r{padding:6px 0 0}
}

/* ══ 염에 의한 생태독성 증명 시안(2026-10-12 대표님) - 단계 상자(stages) · 안내 상자(notice) · 숫자 카드(stats) · 시험 생물 카드(orgs) ·
   장비 소개(feature) · 사진 + 번호 목록의 원 번호(circ) · 이름표(pl-lb).
   ⚠ 이름 xp-stgs · xp-sg · sg-* · xp-ntc · xp-kv · xp-orgs · xp-org · xo-* · xp-feat · xf-* · pl-lb 는 시안 전체 0건을 확인하고 지었다(og- 는 조직도 몫이라 피했다).
   글은 div/span/b('.wa-body p' 영향 없음). */
.xp-stgs{margin-top:24px}
.xp-sg{border-radius:16px;padding:clamp(18px,2vw,28px);border:1px solid #dbeafe;background:#f3f8ff}
.xp-sg.green{border-color:#c9ecd9;background:#effaf4}
.sg-h{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.sg-h b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--blue);color:#fff;font-size:15px;font-weight:800}
.xp-sg.green .sg-h b{background:#10b981}
.sg-h span{font-size:clamp(18px,1.6vw,22px);font-weight:800;color:#1e3a8a;letter-spacing:-.02em}
.sg-cols{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.4vw,18px)}
.sg-col{background:#fff;border:1px solid var(--line);border-radius:12px;padding:16px 18px;box-shadow:var(--sh-1);min-width:0}
.sg-col > b{display:block;padding-bottom:10px;margin-bottom:10px;border-bottom:1px solid var(--line);text-align:center;font-size:clamp(15.6px,1.3vw,17px);font-weight:800;color:var(--ink)}
.sg-li span{display:block;position:relative;padding-left:14px;font-size:clamp(14px,1.08vw,15px);color:var(--char);line-height:1.7;word-break:keep-all}
.sg-li span::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:#94a3b8}
.sg-join{position:relative;height:30px;margin:0 calc(100% / 6);color:#3b82f6;
  background:linear-gradient(currentColor,currentColor) center 0 / 1.5px calc(100% - 6px) no-repeat}
.sg-join::before{content:"";position:absolute;left:0;right:0;top:0;height:12px;border:1.5px solid currentColor;border-top:0}
.sg-join::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);border-left:5px solid transparent;border-right:5px solid transparent;border-top:7px solid currentColor}
.sg-tie{border:1px solid #c7d2fe;background:#eef2ff;border-radius:14px;padding:clamp(16px,1.8vw,24px)}
.sg-tie .sg-join{color:#6366f1}
.sg-tt{margin-bottom:14px;text-align:center;font-size:clamp(17px,1.5vw,20px);font-weight:800;color:#3730a3}
.sg-box{display:block;background:#fff;border:1px solid #c7d2fe;border-radius:9px;padding:11px 14px;text-align:center;font-size:clamp(14.4px,1.12vw,15.6px);font-weight:700;color:var(--ink);word-break:keep-all}
.sg-box small{display:block;margin-top:3px;font-size:13.6px;font-weight:500;color:var(--stone)}
.sg-box.sm{width:min(100%,calc(100% / 3));margin:0 auto}
.sg-a3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr))}
.sg-dn{display:flex;justify-content:center;color:#3b82f6;margin:6px 0;font-style:normal}
.sg-dn svg{display:block;width:16px;height:24px}
.sg-a3 .sg-dn,.sg-tie .sg-dn{color:#6366f1}
.sg-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px clamp(12px,1.4vw,18px)}
.sg-grid .sg-box{display:flex;align-items:center;justify-content:center}   /* 한 줄 · 두 줄 칸이 섞여도 글이 가운데(폰 2열) */
.xp-stgs > .sg-dn{margin:10px 0}
.sg-rv .sg-row,.sg-rv .sg-gap{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:clamp(12px,1.6vw,22px);align-items:center}
.xp-sg.green .sg-box{border-color:#bbe5cf}
.sg-side{display:flex;align-items:center;gap:8px;color:#ef4444}
.sg-side i{flex:0 0 auto;font-style:normal;display:block}
.sg-side svg{display:block;width:26px;height:16px}
.sg-side em{flex:1;font-style:normal;text-align:center;background:#fee2e2;border:1px solid #fecaca;border-radius:9px;padding:10px 12px;font-size:clamp(13.6px,1.06vw,15px);font-weight:700;color:#dc2626;word-break:keep-all}
.sg-gap > div{display:flex;align-items:center;justify-content:center;gap:6px}
.sg-gap > div .sg-dn{margin:4px 0}
.sg-gap span{font-size:13.6px;font-weight:700;color:var(--blue)}
.sg-fork{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:6px}
.sg-fl{display:flex;align-items:center;justify-content:center;gap:6px}
.sg-fl span{font-size:14.4px;font-weight:800;color:var(--blue)}
.sg-fork .ng .sg-fl .sg-dn,.sg-fork .ng .sg-fl span{color:#64748b}
.sg-okb{background:#fff;border:1.5px solid #60a5fa;border-radius:12px;overflow:hidden;text-align:center}
.sg-okb b{display:block;padding:10px 12px;background:#eaf3fe;font-size:clamp(17px,1.5vw,20px);font-weight:800;color:#1d4ed8}
.sg-okb span{display:block;padding:0 14px;font-size:clamp(14.4px,1.12vw,15.6px);color:var(--char);line-height:1.7;word-break:keep-all}
.sg-okb span:nth-child(2){padding-top:10px}
.sg-okb span:last-child{padding-bottom:12px}
.sg-ngb{background:#f5f6f8;border:1px solid #e2e8f0;border-radius:12px;padding:14px 18px}
.sg-ngb > div{display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px;padding:4px 0}
.sg-ngb b{font-size:clamp(14.4px,1.12vw,15.4px);font-weight:800;color:var(--char)}
.sg-ngb span{font-size:clamp(14.4px,1.12vw,15.4px);color:var(--stone);line-height:1.6;word-break:keep-all}
.xp-ntc{display:flex;align-items:center;gap:clamp(18px,2.4vw,34px);margin-top:24px;padding:clamp(22px,2.4vw,32px) clamp(24px,3vw,44px);background:#eef5fe;border-radius:14px}
.xp-ntc > i{flex:0 0 auto;display:block;width:clamp(52px,4.6vw,68px);height:clamp(52px,4.6vw,68px);color:var(--blue);font-style:normal}
.xp-ntc > i svg,.xp-ntc > i img{display:block;width:100%;height:100%;object-fit:contain}
.xp-ntc b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-ntc span{display:block;margin-top:8px;font-size:clamp(14.6px,1.2vw,16.6px);color:var(--char);line-height:1.65;word-break:keep-all}
.xp-kv{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.6vw,22px);margin-top:18px}
.xp-kv > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(18px,1.8vw,24px);box-shadow:var(--sh-1);min-width:0}
.xp-kv b{display:block;font-size:clamp(14.6px,1.2vw,16px);font-weight:800;color:var(--ink)}
.xp-kv strong{display:block;margin:10px 0 6px;font-size:clamp(24px,2.3vw,32px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.2;word-break:keep-all}
.xp-kv span{display:block;font-size:clamp(14px,1.1vw,15.4px);color:var(--stone);word-break:keep-all}
.xp-orgs{display:grid;gap:clamp(16px,1.8vw,24px);margin-top:24px}
.xp-org{background:#fff;border:1px solid var(--line);border-radius:16px;padding:clamp(18px,2vw,26px);box-shadow:var(--sh-1)}
.xo-top{display:grid;grid-template-columns:minmax(0,.86fr) minmax(0,1.5fr);gap:clamp(18px,2.4vw,32px);align-items:center;padding-bottom:clamp(16px,1.8vw,22px);border-bottom:1px solid var(--line)}
.xo-top .ph{display:block;aspect-ratio:1.85;border-radius:12px;overflow:hidden;background:#0b1a2b}
.xo-top .ph img{display:block;width:100%;height:100%;object-fit:cover}
.xo-tx b{display:block;font-size:clamp(20px,1.9vw,26px);font-weight:800;color:var(--ink);letter-spacing:-.02em}
.xo-tx i{display:block;margin-top:4px;font-size:clamp(14.6px,1.2vw,16.4px);color:var(--slate)}
.xo-tx strong{display:block;margin-top:12px;font-size:clamp(16px,1.36vw,19px);font-weight:700;color:var(--ink);word-break:keep-all}
.xo-tx span{display:block;margin-top:6px;font-size:clamp(14px,1.1vw,15.4px);color:var(--stone);word-break:keep-all}
.xo-fh{margin:clamp(14px,1.6vw,20px) 0 12px;font-size:14.4px;font-weight:800;color:var(--blue)}
.xo-steps{display:flex;align-items:flex-start;justify-content:space-around;gap:10px}
.xo-s{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:0}
.xo-ic{display:block;height:clamp(76px,6.6vw,100px)}
.xo-ic img{display:block;width:auto;height:100%}
.xo-s > b{display:flex;align-items:center;gap:8px;margin-top:12px;font-size:clamp(15px,1.3vw,18px);font-weight:800;color:var(--ink);word-break:keep-all}
.xo-s > b em{display:grid;place-items:center;flex:0 0 auto;width:24px;height:24px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:12px;font-weight:800}
.xo-d{display:block;margin-top:4px;font-size:clamp(13.6px,1.06vw,15px);color:var(--stone);word-break:keep-all}
.xo-ar{align-self:flex-start;display:grid;place-items:center;font-style:normal;color:#60a5fa;margin-top:calc(clamp(76px,6.6vw,100px) / 2 - 8px)}
.xo-ar svg{display:block;width:34px;height:16px}
.xp-feat{display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.4fr);gap:clamp(22px,3vw,44px);align-items:center;margin-top:24px}
.xp-feat .ph{display:block;aspect-ratio:1.45;border-radius:14px;overflow:hidden;background:#fff}
.xp-feat .ph img{display:block;width:100%;height:100%;object-fit:contain}
.xf-bd{display:inline-block;padding:6px 16px;border-radius:999px;background:var(--blue);color:#fff;font-style:normal;font-size:14px;font-weight:800}
.xf-t{display:block;margin:14px 0 12px;font-size:clamp(22px,2.3vw,32px);font-weight:800;color:var(--ink);letter-spacing:-.03em;line-height:1.3;word-break:keep-all}
.xf-t span{color:var(--blue)}
.xf-tx strong{display:block;font-size:clamp(15.6px,1.36vw,19px);font-weight:600;color:var(--char);line-height:1.75;word-break:keep-all}
.xf-tags{display:flex;flex-wrap:wrap;gap:6px 0;margin-top:16px}
.xf-tags span{font-size:clamp(14px,1.1vw,15.4px);color:var(--stone);padding:0 14px;border-left:1px solid var(--line)}
.xf-tags span:first-child{padding-left:0;border-left:0}
.xp-plist .ph{position:relative}
.xp-plist .pl-lb{position:absolute;bottom:4%;transform:translateX(-50%);font-style:normal;font-size:clamp(12.6px,1vw,14px);font-weight:700;color:var(--ink);
  background:rgba(255,255,255,.88);padding:3px 10px;border-radius:6px;white-space:nowrap}
.xp-plist.circ .pl-it{align-items:center}
.xp-plist.circ .pl-it b{display:grid;place-items:center;width:46px;height:46px;border:1.5px solid #93c5fd;border-radius:50%;font-size:15px}
.xp-plist.circ .pl-it b::after{display:none}
@media (max-width:820px){
  .sg-cols,.sg-fork,.xp-kv,.xo-top,.xp-feat{grid-template-columns:minmax(0,1fr)}
  .sg-join,.sg-a3{display:none}
  .sg-cols + .sg-tie{margin-top:14px}
  .sg-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sg-grid + .sg-box.sm{margin-top:12px}
  .sg-box.sm{width:auto}
  .sg-tie > .sg-box:not(.sm){margin-bottom:12px}
  .sg-rv .sg-row{grid-template-columns:minmax(0,1fr);gap:8px}
  .sg-rv .sg-gap{grid-template-columns:minmax(0,1fr)}
  .sg-side i{transform:rotate(90deg)}
  .xo-steps{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px 12px}
  .xo-ar{display:none}
  .xo-ic{height:72px}
}
/* ══ 살조제 · 조류제거 인증 시안(2026-10-12 대표님) - 그림 카드(icards) · 확인사항 띠(plan) · 관련 제품(prods) · 생물종(species) ·
      아래 띠(foot) · 평가 개념 머리(flowimg kick) · 사진 이름 가운데(photosCenter). 자료가 있는 소분류만 쓴다.
   ⚠ 이름 xp-icd · icd · xp-plan · pn-* · xp-prod · xp-spc · xp-foot · wf-hd · .ctr 는 시안 전체 0건을 확인하고 지었다. 글은 div/span. */
.wf-hd + .wflow{margin-top:22px}
.xp-ph.ctr .xp-card b{text-align:center}
.xp-icd{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:24px}
.xp-icd .icd{display:grid;grid-template-columns:minmax(0,.62fr) minmax(0,1.38fr);gap:clamp(14px,1.6vw,22px);align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(14px,1.5vw,20px) clamp(16px,1.8vw,24px);box-shadow:var(--sh-1);min-width:0}
.xp-icd .ph{display:block;aspect-ratio:1;border-radius:10px;overflow:hidden;background:#fff}
.xp-icd .ph img{display:block;width:100%;height:100%;object-fit:contain}
.xp-icd .tx{min-width:0}
.xp-icd b{display:block;font-size:clamp(18px,1.6vw,22px);font-weight:800;color:var(--ink);letter-spacing:-.02em;word-break:keep-all}
.xp-icd .num b{font-size:clamp(17px,1.45vw,20px);color:var(--blue)}
.xp-icd b em{font-style:normal;margin-right:8px}
.xp-icd strong{display:block;margin-top:8px;font-size:clamp(15px,1.24vw,17px);font-weight:700;color:var(--blue);word-break:keep-all}
.xp-icd .num strong{color:var(--ink)}
.xp-icd .d{display:block;margin-top:6px;font-size:clamp(14px,1.1vw,15.4px);color:var(--stone);line-height:1.6;word-break:keep-all}
.xp-icd .d + .d{margin-top:8px}
.xp-plan{display:flex;align-items:center;gap:clamp(16px,2vw,28px);margin-top:18px;padding:clamp(16px,1.6vw,22px) clamp(20px,2.4vw,32px);background:#eef5fe;border-radius:14px}
.pn-h{display:flex;align-items:center;gap:12px;flex:0 0 auto}
.pn-h i{display:block;width:clamp(36px,3vw,44px);height:clamp(36px,3vw,44px);color:var(--blue);font-style:normal}
.pn-h i svg{display:block;width:100%;height:100%}
.pn-h b{font-size:clamp(15.6px,1.2vw,17px);font-weight:800;color:var(--ink);white-space:nowrap}
.pn-b{min-width:0;flex:1}
.pn-steps{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px}
.pn-steps span{display:inline-flex;align-items:center;gap:8px;font-size:clamp(14px,1.02vw,15px);font-weight:700;color:var(--char);word-break:keep-all}
.pn-steps em{display:grid;place-items:center;flex:0 0 auto;width:22px;height:22px;border-radius:50%;background:var(--blue);color:#fff;font-style:normal;font-size:12.5px;font-weight:800}
.pn-chv{display:grid;place-items:center;color:#93c5fd;font-style:normal}
.pn-chv svg{display:block;width:9px;height:15px}
.pn-note{display:block;margin-top:8px;font-size:clamp(13.6px,1.06vw,14.6px);color:var(--stone);word-break:keep-all}
.xp-prod{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:18px}
.xp-prod > div{background:#fff;border:1px solid var(--line);border-radius:14px;padding:clamp(16px,1.6vw,22px) clamp(18px,1.8vw,24px);min-width:0}
.xp-prod b{display:block;font-size:clamp(16.4px,1.36vw,18.6px);font-weight:800;color:var(--ink);word-break:keep-all}
.xp-prod .d{display:block;margin-top:6px;font-size:clamp(14px,1.1vw,15.4px);color:var(--stone);word-break:keep-all}
.xp-prod .k{display:block;margin-top:12px;font-size:13px;font-weight:700;color:var(--slate)}
.xp-prod i{display:block;margin-top:2px;font-size:clamp(14px,1.1vw,15.4px);color:var(--char)}
.xp-spc{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(14px,1.6vw,22px);margin-top:24px}
.xp-spc > div{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;text-align:center;padding-bottom:16px;min-width:0}
.xp-spc .ph{position:relative;display:block;aspect-ratio:2.4;background:#fff;border-bottom:1px solid var(--line-2)}
.xp-spc .ph img{display:block;width:100%;height:100%;object-fit:cover}
.xp-spc .ph em{position:absolute;top:8px;right:10px;font-style:normal;font-size:12px;color:var(--stone);background:rgba(255,255,255,.88);padding:2px 8px;border-radius:6px}
.xp-spc > div > i{display:block;margin-top:12px;font-size:clamp(15.4px,1.24vw,17px);font-weight:700;color:var(--ink)}
.xp-spc > div > span:not(.ph){display:block;margin-top:3px;font-size:13.6px;color:var(--stone)}
.xp-foot{margin-top:14px;padding:12px 18px;background:#eef5fe;border-radius:10px;text-align:center;font-size:clamp(14px,1.1vw,15.4px);color:var(--char);word-break:keep-all}
@media (max-width:1100px){
  .xp-icd{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:1200px){
  .xp-plan{flex-direction:column;align-items:flex-start}
}
/* 단계가 한 줄에 안 들어가는 폭(좁은 본문 901 ~ 1000px · 폰) - 세로로 쌓고 꺾쇠를 뺀다 */
@media (max-width:640px),(min-width:901px) and (max-width:1000px){
  .pn-steps{flex-direction:column;align-items:flex-start;gap:8px}
  .pn-chv{display:none}
}
@media (max-width:820px){
  .xp-prod,.xp-spc{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:560px){
  .xp-icd .icd{grid-template-columns:76px minmax(0,1fr);align-items:start;gap:14px}
}

/* ══ 발광박테리아(N-Tox) - 대표님 시안 + 원고 01-6(2026-10-12) ══
   metas(평가 지표 칸) · flowNum(단계 이름 앞 번호) · tcards(글 카드 + 단추) · '글자_글자' 아래 첨자.
   ⚠ 이름 xp-meta · xp-tcd · tcd · tc-* · .xp-sub.plain 은 시안 전체 0건을 확인하고 지었다. 글은 div/span/b('.wa-body p' 영향 없음). */
.xp-sub.plain{font-weight:400;color:var(--slate)}
/* 칸 폭은 글 길이만큼(긴 '적용 시료' 가 한 줄에 들어가게) - 남는 폭은 고르게 나눈다 */
.xp-meta{display:flex;gap:clamp(16px,2vw,32px);margin-top:26px}
.xp-meta > div{flex:1 1 auto;min-width:0;border-left:2px solid #bfdbfe;padding:2px 0 4px clamp(16px,1.6vw,24px)}
.xp-meta .k{display:block;font-size:14px;font-weight:600;color:var(--stone)}
.xp-meta b{display:block;margin-top:6px;font-size:clamp(19px,1.7vw,24px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.35;word-break:keep-all}
.xp-meta .s{display:block;margin-top:4px;font-size:14.4px;color:var(--stone);line-height:1.5;word-break:keep-all}
.xp-ph[style*="--ar"] .xp-card .ph{aspect-ratio:var(--ar)}   /* photosAr - 사진 칸 비율 */
.xp-flow.big .s span em{font-style:normal;color:var(--blue);margin-right:8px}
.xp-meta sub,.xp-flow sub,.wk-steps sub{font-size:.7em;line-height:0;vertical-align:baseline;position:relative;top:.3em}
.xp-tcd{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(16px,1.8vw,24px);margin-top:24px}
.xp-tcd .tcd{display:flex;flex-direction:column;min-width:0;background:#f7fafe;border:1px solid #dbeafe;border-radius:14px;
  padding:clamp(22px,2.2vw,30px) clamp(22px,2.4vw,32px)}
.xp-tcd .tcd.wide{grid-column:1 / -1}
.xp-tcd .tc-t{display:block;font-size:clamp(19px,1.6vw,23px);font-weight:800;color:var(--blue);letter-spacing:-.02em;line-height:1.35;word-break:keep-all}
.xp-tcd .tc-b,.xp-tcd .tc-d{display:flex;flex-direction:column;gap:4px;margin-top:14px}
.xp-tcd .tc-b strong{font-size:clamp(16px,1.3vw,18px);font-weight:700;color:var(--ink);line-height:1.5;word-break:keep-all}
.xp-tcd .tc-d span{font-size:clamp(15px,1.2vw,17px);color:var(--char);line-height:1.6;word-break:keep-all}
.xp-tcd .tc-act{margin-top:auto;padding-top:22px}
.xp-tcd .tc-btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:8px;border:1px solid #bfdbfe;background:#fff;
  color:var(--blue);font-size:15px;font-weight:700;line-height:1.3;transition:background .15s,color .15s,border-color .15s}
.xp-tcd .tc-btn:hover,.xp-tcd .tc-btn:focus-visible{background:var(--blue);border-color:var(--blue);color:#fff}
.xp-tcd .tc-btn i{font-style:normal}
@media (max-width:820px){
  .xp-tcd{grid-template-columns:minmax(0,1fr)}
  .xp-meta{flex-direction:column;gap:16px}
}

/* ══ parts figure - 그림 한 장 + 가운데 이름(2026-10-12 유해요인 생태독성평가) ══
   ⚠ 이름 xp-pic · pc-in 은 시안 전체 0건을 확인하고 지었다. figcaption 이라 '.wa-body p' 영향 없음. */
.xp-pic{margin:24px 0 0}
.xp-pic .pc-in{border-radius:14px;overflow:hidden}
.xp-pic img{display:block;width:100%;height:auto}
/* 이름은 사진 카드 이름(.xp-card b)과 같은 크기 · 굵기(2026-10-12 대표님 - '수조형 부유사 노출 시험' 과 사이즈 맞춤) */
.xp-pic figcaption{margin-top:14px;text-align:center;font-size:clamp(17px,1.45vw,20px);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.45;word-break:keep-all}
@media (max-width:640px){
  .xp-pic.scroll .pc-in{overflow-x:auto;overflow-y:hidden;border-radius:10px}
  .xp-pic.scroll img{width:620px;max-width:none}
}

/* ══ 생리 행동 지표분석 - 대표님 시안(2026-10-12) ══
   split(글 왼쪽 · 그림 오른쪽) · duo(왼쪽 사진 둘 + 오른쪽 큰 그림) · 작은 알약 · 이름 위 번호.
   ⚠ 이름 .sbs(⚠ '.split' 은 첫 화면 소개가 쓴다 - 처음에 겹쳐 깨졌다) · sp-row · sp-tx · xp-duo · du-* · .sn · .xp-pills.sm 은 시안 전체 0건을 확인하고 지었다. 글은 div/figcaption('.wa-body p' 영향 없음). */
.xp.sbs .sp-row{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:clamp(20px,2.6vw,40px);align-items:start}
.xp.sbs .sp-tx > :first-child{margin-top:0}
.xp.sbs .xp-pic{margin-top:0}
.xp-pills.sm{grid-template-columns:repeat(var(--n,4),minmax(0,150px));gap:clamp(10px,1vw,14px)}
.xp-pills.sm span{min-height:42px;padding:8px 14px;font-size:clamp(14.4px,1.1vw,15.4px)}
.xp-duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,2.05fr);gap:clamp(16px,1.8vw,26px);margin-top:24px;align-items:start}
.xp-duo .du-l{display:flex;flex-direction:column;gap:18px;min-width:0}
.xp-duo figure{margin:0;min-width:0}
.xp-duo .ph{display:block;border-radius:12px;overflow:hidden;border:1px solid var(--line)}
.xp-duo .ph img{display:block;width:100%;height:auto}
.xp-duo figcaption{margin-top:12px;text-align:center;font-size:clamp(17px,1.45vw,20px);font-weight:800;color:var(--ink);letter-spacing:-.02em;line-height:1.45;word-break:keep-all}
.xp-flow.big .s .sn{display:block;margin-bottom:-4px;font-size:clamp(18px,1.5vw,21px);font-weight:800;color:var(--blue);line-height:1}
@media (max-width:820px){
  .xp.sbs .sp-row{grid-template-columns:minmax(0,1fr);gap:18px}
  .xp-duo{grid-template-columns:minmax(0,1fr)}
  .xp-duo .du-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
}
@media (max-width:560px){
  .xp-pills.sm{grid-template-columns:repeat(2,minmax(0,1fr))}
  .xp-duo .du-l{grid-template-columns:minmax(0,1fr)}
}

/* ══ 생리 행동 지표분석 2차 - 연한 판(lab) (2026-10-12 대표님 "만들다 그만둔 느낌") ══
   생리 · 생화학적 · 행동 반응 세 갈래를 같은 판에 담는다. 효소 활성은 글 칸을 그림 높이 가운데에 세우고 지표 알약을 글 칸 안에,
   행동은 왼쪽 사진 둘과 오른쪽 그림의 바닥이 맞게 오른쪽 그림을 왼쪽 칸 높이에 맞춘다(그림 바탕과 같은 남색으로 메움).
   ⚠ 이름 xp-lab 은 시안 전체 0건을 확인하고 지었다. */
.xp-lab{margin-top:4px;padding:clamp(20px,2.5vw,34px);background:#f7faff;border:1px solid #e4ecf6;border-radius:18px}
.xp-lab > :first-child, .xp-lab .sp-tx > :first-child{margin-top:0}
.xp-lab .xp-ph, .xp-lab .xp-duo{margin-top:22px}
.xp.sbs .xp-lab .sp-row{align-items:center}
.xp.sbs .sp-tx .xp-pills.sm{display:flex;flex-wrap:wrap;gap:10px;margin-top:20px}
.xp.sbs .sp-tx .xp-pills.sm span{padding:8px 18px;background:#fff}
.xp-lab .xp-pills.sm span{background:#fff}
.xp-lab .xp-duo{grid-template-columns:minmax(0,1fr) minmax(0,2.6fr);align-items:stretch}
.xp-lab .xp-duo .du-r{display:flex;flex-direction:column}
.xp-lab .xp-duo .du-r .ph{flex:1 1 auto;position:relative;min-height:160px;background:#060479}
.xp-lab .xp-duo .du-r .ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain}
@media (max-width:1100px){   /* 좁은 본문(901 ~ 1100 은 왼쪽 목록이 있다) - 왼쪽 사진이 150px 띠로 줄어 두 장을 나란히 · 오른쪽 그림을 아래 전체 폭으로 */
  .xp-lab .xp-duo{grid-template-columns:minmax(0,1fr)}
  .xp-lab .xp-duo .du-l{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
  .xp-lab .xp-duo .du-r .ph{position:static;min-height:0}
  .xp-lab .xp-duo .du-r .ph img{position:static;height:auto}
  .xp.sbs .xp-lab .sp-row{grid-template-columns:minmax(0,1fr);gap:20px;align-items:start}   /* 효소 활성도 글 위 · 그림 아래(글 칸이 좁아 알약이 두 줄로 갈렸다) */
}
@media (max-width:820px){
  .xp.sbs .xp-lab .sp-row{align-items:start}
}
@media (max-width:560px){
  .xp-lab{padding:16px;border-radius:14px}
  .xp-lab .xp-duo .du-l{grid-template-columns:minmax(0,1fr)}
  .xp.sbs .sp-tx .xp-pills.sm span{flex:1 1 30%;padding:8px 10px}
}

/* ══ 하천 · 호소 - 대표님 시안(2026-10-12) ══ 머리 옆 파란 한 줄 · 마지막 단계 이름 파랑 · 사진 4칸.
   ⚠ 이름 xp-kn · fl-hl 은 시안 전체 0건을 확인하고 지었다. */
.wa-t em.xp-kn{font-size:clamp(14px,1.1vw,15.4px);font-weight:700;color:var(--blue);letter-spacing:-.01em;white-space:normal;margin-left:-2px}
.xp-flow.big .s.fl-hl > span:not(.sd){color:var(--blue)}
@media (max-width:640px){.wa-t em.xp-kn{display:inline}}   /* 폰의 '.wa-t em{display:none}'(시험 생물 안내용)이 이것까지 숨겼다 */
@media (max-width:1100px){
  .xp-ph[style*="--n:4"]{grid-template-columns:repeat(2,minmax(0,1fr))}   /* 사진 4칸 - 좁은 본문 · 폰은 2칸(1칸이면 224px 사진이 1.6배로 늘어난다) */
}


/* ══ 자료실 소식 - 작성자 (2026-10-12, 옛 게시판 글을 옮기며 작성자를 살렸다 - 국문 화면만) ══ */
.brow .bauth{font-size:14px;color:var(--slate)}
.bpost-meta .bpost-by b{font-weight:700;color:var(--char)}
@media (max-width:640px){ .brow .bauth{font-size:13px} }

/* ══ 첫 화면 NEB NEWS (2026-10-12 처음 · 2026-10-13 대표님 시안으로 다시) ══
   site.js homeNews() 가 그린다 - 왼쪽 큰 소식(.hn-big) · 오른쪽 3건(.hn-it) · 분류 탭(.hn-tabs).
   색은 대표님 시안에서 쟀다 - 고른 탭 · 큰 소식 분류 · 짧은 밑줄 = 청록(--hn-t), 오른쪽 분류 · 화살표 · 전체 보기 = 파랑.
   배경 = 대표님 '여백을 살린 은은한 뉴스 그래픽'(img/home-news-bg.webp) - 이 칸만.
   ⚠ .hn-all 은 제품 칸 '제품 구매 →' 도 쓴다(#home-products) - 이 칸만 손볼 때는 .hn-bar .hn-all 로.
   ⚠ 이름 hn- 은 2026-10-12 · 10-13 에 시안 전체 0건을 확인하고 만든 것이다. */
#home-news{--hn-t:#00A0AB;--hn-ln:#E2EAF0;background:#fff url(../img/home-news-bg.webp) center/cover no-repeat}
.hn-all{font-size:15.5px;font-weight:700;color:var(--blue);text-decoration:none;white-space:nowrap;padding-bottom:6px}
.hn-all:hover{text-decoration:underline}
.hn-head h2{margin:0;font-size:clamp(34px,3.3vw,60px);font-weight:800;line-height:1.08;letter-spacing:-.03em;color:var(--ink)}
.hn-head p{margin:12px 0 0;font-size:clamp(15.5px,1.05vw,19px);color:var(--slate)}
.hn-bar{display:flex;align-items:flex-end;justify-content:space-between;gap:20px;margin:clamp(22px,2.2vw,38px) 0 clamp(20px,1.7vw,28px)}
.hn-bar .hn-all{font-size:clamp(15px,.95vw,17px);padding-bottom:12px}
.hn-tabs{display:flex;align-items:center;min-width:0}
.hn-tabs button{position:relative;padding:8px clamp(16px,1.3vw,24px) 13px;border:0;background:none;font:inherit;font-size:clamp(15px,.95vw,17px);
  font-weight:600;color:#6F7888;white-space:nowrap;cursor:pointer;transition:color .2s}
.hn-tabs button+button::before{content:"";position:absolute;left:0;top:50%;width:1px;height:13px;margin-top:-9px;background:#D7DEE5}
.hn-tabs button:hover{color:var(--ink)}
.hn-tabs button[aria-selected="true"]{color:var(--hn-t);font-weight:700}
.hn-tabs button[aria-selected="true"]::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;border-radius:2px;background:var(--hn-t)}
.hn-body{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);gap:clamp(24px,2.2vw,40px);align-items:start}
.hn-big,.hn-it{display:block;text-decoration:none;color:inherit}
.hn-bph,.hn-tph{display:block;position:relative;overflow:hidden;border-radius:6px;background:var(--bg-2)}
.hn-bph{aspect-ratio:2.2/1}
.hn-tph{aspect-ratio:1.64/1}
.hn-bph img,.hn-tph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.hn-big:hover .hn-bph img,.hn-it:hover .hn-tph img{transform:scale(1.04)}
.hn-ph0{position:absolute;inset:0;display:grid;place-items:center;background:linear-gradient(135deg,#0E2A4F 0%,#14508F 100%);
  color:#fff;font-size:17px;font-weight:800;letter-spacing:-.01em}
.hn-bbd,.hn-ibd{display:block;min-width:0}
.hn-bbd{padding-top:clamp(16px,1.4vw,24px)}
.hn-meta{display:flex;align-items:center;font-size:clamp(13.5px,.82vw,15px);font-variant-numeric:tabular-nums}
.hn-meta b{font-weight:700;color:var(--blue)}
.hn-meta em{font-style:normal;color:#7C8A9E}
.hn-meta em::before{content:"";display:inline-block;width:1px;height:11px;margin:0 10px;background:#CDD5DE;vertical-align:-1px}
.hn-big .hn-meta b{color:var(--hn-t)}
.hn-line{display:block;width:28px;height:3px;margin:11px 0 14px;border-radius:2px;background:var(--hn-t)}
.hn-big strong,.hn-it strong{display:-webkit-box;-webkit-box-orient:vertical;overflow:hidden;color:var(--ink);word-break:keep-all;text-wrap:balance}   /* balance - '…서식지 조성 / (부산)' 처럼 한 낱말만 남지 않게 */
.hn-big strong{-webkit-line-clamp:2;font-size:clamp(24px,2vw,38px);font-weight:800;line-height:1.28;letter-spacing:-.03em}
.hn-it strong{-webkit-line-clamp:2;margin:8px 0 0;font-size:clamp(17px,1.15vw,21.5px);font-weight:800;line-height:1.38;letter-spacing:-.02em}
.hn-ex{display:block;margin-top:clamp(10px,.8vw,14px);font-size:clamp(14.5px,.9vw,17px);line-height:1.62;color:var(--slate);word-break:keep-all}
.hn-it .hn-ex{margin-top:8px;font-size:clamp(14px,.85vw,16px)}
.hn-ex i{display:inline-block;margin-left:8px;font-style:normal;font-weight:700;color:var(--blue);transition:transform .2s var(--ease)}
.hn-big:hover .hn-ex i,.hn-it:hover .hn-ex i{transform:translateX(4px)}
.hn-big:hover strong,.hn-it:hover strong{color:var(--blue-d)}
/* 오른쪽 3건 - 사진 왼쪽 · 글 오른쪽, 사이 가는 선은 글 칸에만(시안) */
.hn-list{--hn-tw:clamp(160px,11.6vw,226px);--hn-g:clamp(18px,1.4vw,26px);display:flex;flex-direction:column}
.hn-it{position:relative;display:grid;grid-template-columns:var(--hn-tw) minmax(0,1fr);gap:var(--hn-g);align-items:center;padding:clamp(14px,1.1vw,18px) 0}
.hn-it:first-child{padding-top:0}
.hn-it:last-child{padding-bottom:0}
.hn-it+.hn-it::before{content:"";position:absolute;top:0;right:0;left:calc(var(--hn-tw) + var(--hn-g));height:1px;background:var(--hn-ln)}
/* 분류에 다른 소식이 없을 때(개인 UI 규격 - 아이콘 + 점선 상자 + 한 줄) */
.hn-empty{display:flex;align-items:center;justify-content:center;gap:10px;min-height:180px;padding:24px;border:1.5px dashed #CDD7E1;
  border-radius:12px;color:var(--slate);font-size:15px;background:rgba(255,255,255,.7)}
.hn-empty span{font-size:22px}
.hn-list:has(> .hn-empty){align-self:stretch}   /* 오른쪽 칸 높이만큼 - 위에만 짧게 떠 보이지 않게 */
.hn-list > .hn-empty{flex:1 1 auto}
/* 한 칸씩 넘기는 화면 - 화면이 낮으면(노트북) 큰 사진을 낮춰 한 화면에. 1920x1080 은 그대로(2.2:1) */
@media (min-width:1181px){ html.fp .hn-bph{max-height:max(200px,calc(100vh - 620px))} }
@media (max-width:900px){
  .hn-body{grid-template-columns:1fr;gap:30px}
}
@media (max-width:640px){
  #home-news .wrap{position:relative}
  .hn-head h2{font-size:30px}
  .hn-head p{margin-top:8px;font-size:14.5px}
  .hn-bar{margin:18px 0 18px}
  /* 전체 보기는 제목 줄 오른쪽으로 - 탭 줄에 같이 두면 390px 에 안 들어간다 */
  .hn-bar .hn-all{position:absolute;right:16px;top:8px;font-size:14px;padding-bottom:0}
  .hn-tabs{overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px}
  .hn-tabs::-webkit-scrollbar{display:none}
  .hn-tabs button{padding:6px 12px 11px;font-size:14px}
  .hn-big strong{font-size:22px}
  .hn-list{--hn-tw:112px;--hn-g:14px}
  .hn-it{padding:12px 0}
  .hn-it strong{margin-top:6px;font-size:15.5px}
  .hn-it .hn-ex{display:none}   /* 폰 압축(2026-09-23) - 목록은 제목까지 */
}

/* ══ 첫 화면 왼쪽 바로가기 (2026-10-12 번호 카드 -> 2026-10-13 대표님 - 옛 홈페이지처럼 글자 목록) ══
   site.js secNav() 가 data-nav 가 붙은 칸마다 data-nav-label(HOME · RESEARCH …)을 세로로 세운다.
   지금 칸 = 파란 글자 + 왼쪽 상장 그림. 어두운 칸(첫 화면 사진 · 남색 문의 띠) 위에서는 흰 글자(.dark), 바닥 위에서는 숨긴다(.off).
   ⚠ 1600px 아래는 본문 왼쪽 끝과 겹쳐 숨긴다 - 이름이 번호보다 넓다(1600px 에서 글자 끝 x 131 · 본문 x 152).
   ⚠ 이름 secnav 는 2026-10-12 에 0건을 확인하고 만든 것이다. */
.secnav{display:none}
@media (min-width:1600px){
  .secnav{position:fixed;left:26px;top:50%;transform:translateY(-50%);z-index:90;display:flex;flex-direction:column}
  .secnav a{position:relative;display:block;padding:11px 0 11px 30px;font-size:13px;font-weight:600;line-height:1.25;letter-spacing:.06em;
    color:#8A929C;text-decoration:none;text-transform:uppercase;white-space:nowrap;transition:color .2s}
  .secnav a:hover{color:var(--ink)}
  .secnav a.on{color:var(--blue)}
  .secnav a i{position:absolute;left:0;top:50%;width:21px;height:21px;margin-top:-10.5px;opacity:0;transform:scale(.6);transition:opacity .2s,transform .2s}
  .secnav a i svg{display:block;width:100%;height:100%}
  .secnav a.on i{opacity:1;transform:none}
  .secnav.dark a{color:rgba(255,255,255,.66);text-shadow:0 1px 3px rgba(0,0,0,.45)}
  .secnav.dark a:hover{color:#fff}
  .secnav.dark a.on{color:#7AD8EC}
  .secnav.dark a i{filter:drop-shadow(0 1px 2px rgba(0,0,0,.45))}
  .secnav{transition:opacity .25s}
  html.fp #company .split .im{margin-left:160px}   /* 회사소개 사진이 x 30 에서 시작하면 바로가기 글자(x 26 ~ 130) 밑에 깔린다 */
  .secnav.off{opacity:0;pointer-events:none}   /* 바닥(footer) 위에서는 숨긴다 - 바닥 글자(1600px 에서 x 52 부터)와 겹친다 */
}

/* 회사소개 - 한 번 굴리면 한 칸(2026-10-13 대표님 - 첫 화면처럼). 칸 높이 = 머리말 · 탭 줄 아래 한 화면(--fp-h, site.js secNav).
   1903x940(탭 줄 아래 807px)에서 인사말 · 비전 · 조직도 · 오시는 길이 한 화면에 들어가게 인사말 글 칸과 오시는 길 위아래 여백만 줄였다.
   연혁은 원래 한 화면보다 길어 한 화면씩 넘긴다. 칸 위아래 56px · 내용 가운데는 첫 화면 규칙(html.fp main > section[data-nav])을 같이 쓴다. */
@media (min-width:1181px){
  html.fp #greeting .split .tx{padding-top:44px;padding-bottom:44px}
  html.fp #map{padding:40px 0}
  html[lang="en"].fp #vision .vz-h{font-size:clamp(28px,3vw,44px)}   /* 영문 제목이 세 줄이라 62px 넘쳤다 */
}
/* 지도 덮개(site.js secNav) - 한 칸씩 넘기는 화면에서만. 누르면 걷히고(.shield-off) 지도를 떠나면 다시 덮인다 */
.fp-shield{display:none}
html.fp .fp-shield{display:block;position:absolute;inset:0;z-index:2;cursor:pointer}
html.fp .fp-shield span{position:absolute;left:50%;bottom:16px;transform:translateX(-50%);padding:7px 15px;border-radius:999px;
  background:rgba(10,30,69,.8);color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;opacity:0;transition:opacity .2s;pointer-events:none}
html.fp .fp-shield:hover span{opacity:1}
html.fp .shield-off > .fp-shield{display:none}

/* 영문 회사소개 - 직속 조직 이름 · 비전 세 칸 제목이 영어로 길어 넘친다(2026-10-13 영문 정리 실측) */
html[lang="en"] #org .og-staff b{font-size:clamp(15px,1.1vw,17.5px)}
html[lang="en"] #vision .vz-tx h3{font-size:clamp(19px,1.6vw,25px)}
@media (max-width:480px){ html[lang="en"] #org .og-staff b{white-space:normal;text-align:center;line-height:1.3} }

/* ══ 영문 첫 화면 (2026-10-13 - 영문도 국문과 같은 마크업이 되었다) ═══════════════════
   영어 제목이 국문보다 길어 생기는 것만 손본다. 국문은 그대로다(html[lang="en"] 만). */
html[lang="en"] .sec-head h2{text-wrap:balance}          /* 'Research proven by firsts in / Korea' 처럼 한 낱말만 남지 않게 */
@media (max-width:640px){
  /* 폰 - 실적 정사각 카드 · 서비스 카드 제목이 두 줄에서 말줄임(...)으로 잘렸다 - 세 줄까지 */
  html[lang="en"] #track-record .tr-item-cap .t,
  html[lang="en"] #psv-list .tr-item.wide .tr-item-cap .t{-webkit-line-clamp:3}
}

/* ══ 첫 화면 - 한 번 굴리면 한 칸 (2026-10-13 대표님 - 옛 홈페이지처럼 #1 ~ #7) ══════════════════
   site.js secNav() 가 데스크톱(1181px 이상 · 마우스)에서 html 에 fp 를 붙이고 --fp-h(머리말 아래 높이)를 준다.
   칸마다 적어도 한 화면 높이 · 내용은 가운데 - 짧은 칸에서 다음 칸이 밑에 걸쳐 보이지 않게.
   ⚠ 한 화면보다 긴 칸(작은 화면)은 굴릴 때마다 한 화면씩 넘기다가 칸 끝을 맞춘다(site.js stops).
   ⚠ .wrap 은 margin:0 auto 라 세로 flex 안에서 내용 폭으로 줄어든다(2-38-3-4) - 폭 100% 를 준다. */
@media (min-width:1181px){
  html.fp main > section[data-nav]:not(.hero){min-height:var(--fp-h,auto);display:flex;flex-direction:column;justify-content:center}
  /* ⚠ 크롬 '스크롤 앵커링' 끔 - 칸 내용이 가운데 정렬이라 늦게 그려지는 칸(NEB NEWS)에서 글이 위로 옮겨 가면 크롬이 페이지를 그만큼 끌어올려
     index.html#6 으로 들어오면 160 ~ 260px 어긋났다(2026-10-13 실측, 배포본도 같았다). 자리 맞춤은 secNav 가 한다 */
  html.fp main > section[data-nav]{overflow-anchor:none}
  html.fp main > section[data-nav]:not(.hero) > *{width:100%}
  /* 회사소개 - 사진은 원래처럼 화면 반쪽의 가로 사진(2026-10-13 대표님 '가로로 키우지 말고 원래처럼').
     ⚠ 칸(.split)을 한 화면 높이로 늘리지 말 것 - 사진 상자가 세로로 길어져(1903 에서 618x813) 사진이 확대 · 잘려 보였다.
     칸 높이는 글 높이대로 두고 한 화면 가운데에 세운다. 글 칸 위아래 여백만 줄여 영문도 한 화면에. */
  html.fp #company .split .tx{padding-top:44px;padding-bottom:44px}
  /* 사진 상자는 가로 16:10 으로 고정하고 글 칸 높이 가운데에 - 글이 긴 화면(영문 · 1600px)에서 상자가 글 높이로 늘어나
     정사각 ~ 세로로 잘려 보이던 것(영문 1600 에서 610x623). 사진 원본(1400x781)과 거의 같은 모양으로 보인다. */
  html.fp #company .split .im{align-self:center;min-height:0;aspect-ratio:16/10}
  html.fp main > section[data-nav]:not(.hero):not(.flush){padding-top:56px;padding-bottom:56px}   /* 내용이 한 화면 가운데에 서므로 큰 위아래 여백(108px)이 필요 없다 */

  /* 서비스 · 제품 칸 - 큰 제목('우리의 서비스' · '제품')을 빼고 1920x1080(머리말 아래 873px) 한 화면에 들어가게 */
  html[lang] #products,html[lang] #home-products{padding:40px 0}
  html[lang] #products .psv-group-title,html[lang] #home-products .psv-group-title{font-size:27px}
  html[lang] #products .psv-group-head,html[lang] #home-products .psv-group-head{margin-bottom:14px}
  html[lang] #home-products .psv-group-head[style]{margin-top:28px!important}   /* 마크업의 inline margin-top:56px */
  /* 서비스 카드 - 사진이 제 비율(4:3)로 칸 높이를 밀어 올리던 것을 칸에 맞춰 깐다 */
  html[lang] #psv-list.tr-list.stack{gap:14px}
  html[lang] #psv-list .tr-item.wide{flex-basis:calc((100% - 14px)/2);position:relative;min-height:clamp(150px,calc((100svh - 250px)/4),184px)}
  html[lang] #psv-list .tr-item.wide img{position:absolute;grid-column:1 / 2;grid-row:1 / 2;inset:0;width:100%;height:100%;min-height:0}
  /* ⚠ 절대 위치 칸은 끝줄을 적지 않으면(grid-column:1) 끝이 상자 가장자리가 되어 카드 전체를 덮는다 - 1 / 2 로 끝줄까지 */
  html[lang] #psv-list .tr-item.wide .tr-item-cap{grid-column:2 / 3;grid-row:1 / 2;padding:14px 22px 14px 26px;gap:4px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .t{font-size:24px}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .d{font-size:15.5px;line-height:1.5}
  html[lang] #psv-list .tr-item.wide .tr-item-cap .go{font-size:14.5px;margin-top:4px}
  /* 제품 카드 - 사진 띠를 낮추고(흰 바탕에 제품 통째로) 설명은 두 줄까지 */
  html[lang] #consumable-grid,html[lang] #reagent-grid{gap:20px}
  /* 사진 띠 높이는 화면 높이에 맞춘다 - 1920x1080(안쪽 940) 125px · 화면이 높으면 190px(16:10)까지 */
  html[lang] #consumable-grid .card .ph,html[lang] #reagent-grid .card .ph{aspect-ratio:auto;height:clamp(110px,calc((100svh - 690px)/2),190px)}
  html[lang] #consumable-grid .card .ph.pw img,html[lang] #reagent-grid .card .ph.pw img{padding:8px}
  html[lang] #consumable-grid .card .pad,html[lang] #reagent-grid .card .pad{padding:14px 18px 16px}
  html[lang] #consumable-grid .card .kicker,html[lang] #reagent-grid .card .kicker{font-size:13px;margin-bottom:2px}
  html[lang] #consumable-grid .card h3,html[lang] #reagent-grid .card h3{font-size:20px;line-height:1.35;margin-bottom:6px}
  html[lang] #consumable-grid .card .pad p,html[lang] #reagent-grid .card .pad p{font-size:14px;line-height:1.6;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  html[lang] #consumable-grid .card .price,html[lang] #reagent-grid .card .price{margin-top:12px}
  html[lang] #consumable-grid .card .price a,html[lang] #reagent-grid .card .price a{padding-top:9px;padding-bottom:9px}
}
/* 폰 - 서비스 칸 큰 제목을 빼서 첫 소제목이 칸 맨 위가 되었다(위 여백 30px 를 걷는다) */
@media (max-width:640px){
  html[lang] #products .psv-group-head:first-child{margin-top:0!important}
}
/* ══ 환경 DNA(eDNA) 대표님 시안(2026-10-13) - 큰 사진 4:3(heroAr) · 한 단계 작은 제목(xp-ts) · 고려사항 상자(xp-cau) ══ */
.wa-body .wp-ph.ar img{max-height:440px}
.xp-t.xp-ts{font-size:clamp(19px,1.55vw,23px)}
.xp-cau{display:grid;grid-template-columns:repeat(var(--n,3),minmax(0,1fr));gap:clamp(12px,1.4vw,20px);margin-top:18px}
.xp-cau > div{display:flex;align-items:center;gap:16px;min-width:0;padding:18px 22px;background:#fff;border:1px solid var(--line);border-radius:12px}
.xp-cau > div > i{flex:0 0 56px;display:grid;place-items:center;height:44px}
.xp-cau > div > i img{display:block;max-width:56px;max-height:40px;width:auto;height:auto}
.xp-cau > div > span{font-size:clamp(14.6px,1.1vw,16px);line-height:1.6;color:var(--char);word-break:keep-all}
.xp-cau + .xp-fnote{margin-top:16px}
@media (max-width:900px){ .xp-cau{grid-template-columns:minmax(0,1fr)} }
/* ══ 산업 폐수 대표님 시안(2026-10-13) - 단계 카드(xp-fbox) · 세모 화살표(xp-tri) · 사진 카드 점 목록(xp-li) ·
   단계 띠(xp-chain) · 표(xp-tbl) · 물벼룩 판(xf-soft · xf-cap · xf-side). ⚠ 이름은 만들기 전에 시안 전체 0건을 확인했다 ══ */
.xp-flow.big.xp-fbox{justify-content:space-between;align-items:stretch;gap:10px}
.xp-flow.big.xp-fbox > .s{flex:1 1 0;min-width:0;justify-content:flex-start;gap:10px;padding:18px 16px 20px;background:#fff;border:1px solid var(--line);border-radius:12px}
.xp-flow.big.xp-fbox > .s > span:not(.sd){order:-1;align-self:flex-start;font-size:clamp(16px,1.3vw,19px)}
.xp-flow.big.xp-fbox > .s > i{display:block;width:100%;height:clamp(96px,8vw,124px)}
.xp-flow.big.xp-fbox > .s > i img{width:100%;height:100%;max-width:none;object-fit:contain}   /* 그림 칸을 꽉 채우고 비율은 contain - 폰 2칸에서 그림이 설명 글을 덮던 것(높이 % 가 grid 안에서 풀리지 않았다) */
.xp-flow.big.xp-fbox > .s .sd{margin-top:2px}
.xp-flow.big > .xp-sep.xp-tri{align-self:center;margin-top:0;color:var(--blue)}
.xp-flow.big > .xp-sep.xp-tri svg{display:block;width:9px;height:11px}
.xp-li{margin:10px 0 0;padding:0 0 0 2px;list-style:none}
.xp-li li{position:relative;padding-left:14px;font-size:clamp(14.4px,1.08vw,15.4px);line-height:1.65;color:var(--char);word-break:keep-all}
.xp-li li::before{content:"";position:absolute;left:2px;top:.72em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
.xp-ph.boxed .xp-card .xp-li{padding:0 22px 20px}
.xp-chain{display:flex;align-items:center;justify-content:space-around;gap:10px;margin-top:22px;padding:12px 20px;background:#eef5ff;border:1px solid #dbeafe;border-radius:999px}
.xp-chain span{font-size:clamp(15px,1.2vw,17px);font-weight:800;color:var(--blue-d);white-space:nowrap}
.xp-chain i{display:grid;place-items:center;color:#93c5fd;font-style:normal}
.xp-chain i svg{width:30px;height:14px}
.xp-tbl{margin-top:22px}
.xp-tbl .tb-scroll{overflow-x:auto}
.xp-tbl table{width:100%;min-width:520px;border-collapse:collapse;background:#fff}
.xp-tbl th,.xp-tbl td{border:1px solid var(--line);padding:13px 18px;text-align:center;font-size:clamp(14.6px,1.12vw,16px);color:var(--char);word-break:keep-all}
.xp-tbl th{background:#f7f8fb;color:var(--slate);font-weight:700}
.xp-tbl td:first-child{text-align:left;font-weight:600;color:var(--ink)}
.xp-tbl td.hl{color:var(--blue);font-weight:800;font-size:clamp(16px,1.3vw,18.5px)}
.xp-tbl .tb-note{display:block;margin-top:8px;font-size:13.6px;color:var(--stone);word-break:keep-all}
.xp-tbl .tb-note + .tb-note{margin-top:2px}
.xp-feat.xf-soft{padding:clamp(18px,2vw,28px) clamp(20px,2.6vw,36px);background:#f2f7fe;border:1px solid #dbeafe;border-radius:16px}
.xp-feat.xf-soft .ph{background:transparent;position:relative}
.xp-feat.xf-3{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr) minmax(0,.72fr)}
.xp-feat .xf-cap{position:absolute;right:6%;bottom:4%;font-size:13px;color:var(--slate);font-style:italic}
.xp-feat.xf-soft .xf-t{margin:0 0 10px;font-size:clamp(20px,1.8vw,26px)}
.xp-feat.xf-soft .xf-tx strong{font-weight:500;color:var(--char);line-height:1.7}
.xf-side{align-self:center;padding-left:clamp(18px,2vw,28px);border-left:1px solid #c7dbf5}
.xf-side b{display:block;font-size:clamp(15px,1.15vw,16.6px);font-weight:800;color:var(--blue-d);word-break:keep-all}
.xf-side ul{margin:10px 0 0;padding:0;list-style:none}
.xf-side li{position:relative;padding-left:14px;font-size:clamp(14.6px,1.1vw,16px);line-height:1.8;color:var(--char)}
.xf-side li::before{content:"";position:absolute;left:2px;top:.8em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
@media (max-width:1100px){
  .xp-feat.xf-3{grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr)}
  .xp-feat.xf-3 .xf-side{grid-column:1 / -1;padding:14px 0 0;border-left:0;border-top:1px solid #c7dbf5}
}
@media (max-width:900px){
  .xp-flow.big.xp-fbox{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .xp-flow.big.xp-fbox > .xp-sep{display:none}
  .xp-chain{flex-wrap:wrap;justify-content:center;border-radius:16px}
  .xp-feat.xf-3{grid-template-columns:minmax(0,1fr)}
}

/* ══ 개인정보처리방침(privacy.html · en/privacy.html) - 2026-10-15 ══════════════
   개인정보 보호법 제30조. 표는 행 · 열 테두리 + 연회색 머리(개인 UI 규격). */
.pv-head{padding:calc(var(--hd) + 40px) 0 30px;background:var(--bg-2);border-bottom:1px solid var(--line)}
.pv-head .crumb{font-size:14.2px;color:var(--slate)}
.pv-head .crumb a{color:var(--slate)}
.pv-head .crumb a:hover{color:var(--blue)}
.pv-head h1{margin:6px 0 14px;font-size:clamp(28px,3.2vw,38px);font-weight:900;letter-spacing:-.03em;color:var(--ink)}
.pv-head p{max-width:880px;margin:0;font-size:16px;line-height:1.8;color:var(--slate)}
.pv-date{max-width:880px;margin-top:14px;font-size:14px;font-weight:700;line-height:1.7;color:var(--blue-d)}
.pv-date a{color:inherit;text-decoration:underline}
.pv-doc{max-width:880px}
.pv-toc{padding:20px 24px;border:1px solid var(--line);border-radius:14px;background:#fff}
.pv-toc b{display:block;margin-bottom:8px;font-size:15px;font-weight:800;color:var(--ink)}
.pv-toc ol{margin:0;padding-left:22px;columns:2;column-gap:36px;font-size:15px;line-height:1.95}
.pv-toc a{color:var(--char)}
.pv-toc a:hover{color:var(--blue)}
.pv-sec{padding-top:40px;scroll-margin-top:-24px}   /* html scroll-padding-top(128px) 에 더해진다 */
.pv-sec h2{display:flex;align-items:center;gap:10px;margin:0 0 14px;font-size:21px;font-weight:800;
  letter-spacing:-.02em;color:var(--ink)}
.pv-sec h2 span{display:inline-grid;place-items:center;min-width:28px;height:28px;padding:0 6px;border-radius:8px;
  background:var(--blue);color:#fff;font-size:14px;font-weight:800;letter-spacing:0}
.pv-sec p,.pv-sec li{font-size:15.5px;line-height:1.85;color:var(--char)}
.pv-sec p{margin:0 0 12px}
.pv-sec ul{margin:0 0 12px;padding-left:20px;list-style:disc}
.pv-sec li{margin-bottom:6px}
.pv-sec li b{color:var(--ink)}
.pv-sec .pv-note{font-size:14.5px;color:var(--slate)}
.pv-sec a{color:var(--blue-d);text-decoration:underline}
.pv-tw{margin:0 0 12px;overflow-x:auto}
.pv-tb{width:100%;min-width:480px;border-collapse:collapse;background:#fff;font-size:15px;line-height:1.7}
.pv-tb th,.pv-tb td{padding:11px 14px;border:1px solid var(--line);text-align:left;vertical-align:top;color:var(--char)}
.pv-tb thead th,.pv-tb.pv-kv th{background:#f7f8fb;color:var(--slate);font-weight:700}
.pv-tb.pv-kv{min-width:0}
.pv-tb.pv-kv th{width:30%}
@media (max-width:720px){
  .pv-head{padding:calc(var(--hd-s) + 26px) 0 24px}
  .pv-toc{padding:16px 18px}
  .pv-toc ol{columns:1}
  .pv-sec{padding-top:32px}
  .pv-sec h2{font-size:19px}
  .pv-tb.pv-kv th{width:36%}
}
/* 문의 폼 동의 칸 아래 안내(제15조 제2항 - 항목 · 거부할 권리를 함께 알린다) */
.field.agree .agree-note{margin:6px 0 0 26px;font-size:13.4px;line-height:1.65;color:var(--slate)}
.field.agree .agree-note a{color:var(--blue-d);font-weight:700;text-decoration:underline}
/* 바닥의 개인정보처리방침 링크 - 다른 글자와 구별되게(표준 개인정보 처리방침 작성지침) */
footer .fin a.pv-link{color:#fff;font-weight:800}
footer .fin a.pv-link:hover{text-decoration:underline}
/* 끝의 '이메일주소 무단 수집 거부' - 방침 본문(번호 칸)과 구별되는 연한 상자 */
.pv-sec.pv-extra{margin-top:44px;padding:20px 24px 10px;border:1px solid var(--line);border-radius:14px;background:var(--bg-2)}
.pv-sec.pv-extra h2{font-size:17.5px}
/* ══ 사업실적 - 배너 아래 '사업분야별 대표 과제' 사진 띠 카드(2026-10-15 대표님 시안 ③) ══════════════
   site.js works() 가 그린다. 3열 → 1100px 이하 2열 → 640px 이하 1열. 번호 · 분야 이름은 사진 위 한 줄. */
.wk-tbl-wrap{margin-top:clamp(40px,4vw,56px)}
.wk-tbl-h{margin:0 0 16px;font-size:clamp(20px,1.6vw,24px);font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.wk-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.wk-card{display:block;border:1px solid var(--line);border-radius:16px;overflow:hidden;background:#fff;
  text-decoration:none;color:inherit;transition:box-shadow .25s var(--ease),transform .25s var(--ease)}
.wk-card:hover{box-shadow:0 10px 28px rgba(14,42,79,.12);transform:translateY(-3px)}
.wk-card-ph{position:relative;height:128px;overflow:hidden}
.wk-card-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease)}
.wk-card:hover .wk-card-ph img{transform:scale(1.05)}
.wk-card-ph:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(7,26,49,.8),rgba(7,26,49,.18))}
.wk-card-ph span{position:absolute;left:22px;right:18px;bottom:18px;z-index:1;display:flex;align-items:baseline;gap:10px;
  color:#fff;font-size:clamp(19px,1.55vw,23px);font-weight:800;letter-spacing:-.02em;line-height:1.25;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wk-card-ph span b{flex:0 0 auto;font-size:.82em;font-weight:800;color:#9fd0ff;letter-spacing:0}
/* 영문 분야 이름은 길어 잘린다 - 영문만 두 줄까지(번호는 첫 줄 옆) */
html[lang="en"] .wk-card-ph span{white-space:normal;text-overflow:clip;font-size:clamp(17px,1.3vw,20px)}
.wk-card ul{margin:0;padding:18px 22px 20px;list-style:none}
.wk-card li{position:relative;margin:0 0 9px;padding:0 0 0 14px;font-size:15.5px;line-height:1.55;color:var(--char)}
.wk-card li:last-child{margin-bottom:0}
.wk-card li:before{content:"";position:absolute;left:0;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--blue)}
@media (max-width:1100px){.wk-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){
  .wk-cards{grid-template-columns:1fr;gap:14px}
  .wk-card-ph{height:112px}
  .wk-card ul{padding:16px 18px 18px}
  .wk-card li{font-size:15px}
}

/* ══ rule - 제도 한 줄 판 + 카드 (2026-10-16 염 증명 '염인정 제도란', site.js partsHtml p.rule). 이름 xp-rule · ru-* 는 0건 확인 */
.xp-rule .ru-def{display:flex;align-items:center;gap:clamp(18px,2.2vw,30px);padding:clamp(22px,2.4vw,32px) clamp(22px,3vw,40px);background:linear-gradient(135deg,#eaf3fe 0%,#f6faff 100%);border:1px solid #d5e5fa;border-left:4px solid var(--blue);border-radius:14px}
.xp-rule .ru-def > i{flex:0 0 auto;display:grid;place-items:center;width:clamp(58px,5vw,74px);height:clamp(58px,5vw,74px);border-radius:50%;background:#fff;color:var(--blue);box-shadow:var(--sh-1);font-style:normal}
.xp-rule .ru-def > i svg{display:block;width:56%;height:56%}
.xp-rule .ru-def > i.im{width:clamp(88px,7.6vw,112px);height:clamp(88px,7.6vw,112px)}
.xp-rule .ru-def > i.im img{display:block;width:78%;height:78%;object-fit:contain}
.xp-rule em{display:block;font-style:normal;font-size:clamp(13.6px,1.1vw,15px);font-weight:800;color:var(--blue);letter-spacing:-.01em;word-break:keep-all}
.xp-rule .ru-def b{display:block;margin-top:6px;font-size:clamp(19px,1.75vw,25px);font-weight:800;color:var(--ink);line-height:1.45;letter-spacing:-.02em;word-break:keep-all}
.xp-rule .ru-def span{display:block;margin-top:10px;font-size:clamp(13.6px,1.1vw,15px);color:var(--slate);word-break:keep-all}
.xp-rule .ru-def span a{color:var(--blue);font-weight:700;text-decoration:underline;text-decoration-color:rgba(5,131,242,.35);text-underline-offset:3px}
.xp-rule .ru-def span a:hover{text-decoration-color:var(--blue)}
.xp-rule .ru-def span a i{font-style:normal;white-space:nowrap}
.xp-rule .ru-def span a b{display:inline;margin:0 0 0 3px;font-size:.9em;font-weight:700;color:inherit;letter-spacing:0}
/* 카드 - 같은 뼈대(머리줄: 같은 크기 아이콘 칸 + 작은 머리 · 굵은 제목 / 가는 선 / 몸). 위로 맞춰 두 카드의 줄이 나란하다(2026-10-16 대표님 '균형감이 없다') */
.xp-rule .ru-cards{display:grid;grid-template-columns:repeat(var(--n,2),minmax(0,1fr));gap:clamp(12px,1.6vw,20px);margin-top:clamp(12px,1.6vw,18px)}
.xp-rule .ru-card{display:flex;flex-direction:column;min-width:0;padding:clamp(20px,2vw,28px);background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:var(--sh-1)}
.xp-rule .ru-hd{display:flex;align-items:center;gap:clamp(14px,1.4vw,18px)}
.xp-rule .ru-ic{flex:0 0 auto;display:grid;place-items:center;width:clamp(84px,7vw,104px);height:clamp(70px,5.8vw,86px);border-radius:14px;background:#eef5fe;color:var(--blue);font-style:normal}
.xp-rule .ru-ic img{display:block;width:86%;height:86%;object-fit:contain}
.xp-rule .ru-ic svg{display:block;width:44%;height:44%}
.xp-rule .ru-hd > div{min-width:0}
.xp-rule .ru-card b{display:block;margin-top:5px;font-size:clamp(16.5px,1.4vw,19px);font-weight:800;color:var(--ink);line-height:1.45;letter-spacing:-.01em;word-break:keep-all}
.xp-rule .ru-bd{margin-top:clamp(14px,1.4vw,18px);padding-top:clamp(14px,1.4vw,18px);border-top:1px solid var(--line)}
.xp-rule .ru-bd > span{display:block;font-size:clamp(14.6px,1.2vw,16px);color:var(--char);line-height:1.65;word-break:keep-all}
.xp-rule .ru-tags{display:flex;flex-wrap:wrap;gap:6px}
.xp-rule .ru-tags i{display:inline-block;padding:4px 12px;border:1px solid #d5e5fa;border-radius:999px;background:#f3f8ff;font-style:normal;font-size:clamp(13px,1.05vw,14.4px);font-weight:600;color:var(--ink);white-space:nowrap}
.xp-rule .ru-bd > span.ru-note{margin-top:10px;font-size:clamp(12.8px,1vw,13.8px);color:var(--slate);line-height:1.5}
@media (max-width:820px){.xp-rule .ru-cards{grid-template-columns:minmax(0,1fr)}}
@media (max-width:560px){.xp-rule .ru-def{flex-direction:column;align-items:flex-start;gap:14px}.xp-rule .ru-ic{width:76px;height:64px}}

/* ══ 2026-10-19 기후바이오팀 수정사항 ════════════════════════════
   ① 큰 그림 크게 보기(subs.json imgs[].zoom) ② 갤러리 설명 하나(galCap) ③ 문의 안내 분야 칩 */
.wp-ph.zoom{cursor:zoom-in}
.wp-ph.zoom:focus-visible{outline:2px solid var(--blue);outline-offset:3px;border-radius:17px}
.wp-zoom{position:absolute;right:12px;bottom:12px;z-index:2;display:inline-flex;align-items:center;gap:6px;
  padding:7px 12px;border-radius:8px;background:rgba(13,34,63,.82);color:#fff;font-size:13px;font-weight:700;
  letter-spacing:-.01em;pointer-events:none;transition:background .2s var(--ease)}
.wp-ph.zoom:hover .wp-zoom{background:var(--blue)}
.lb.big img{max-width:min(1400px,96vw);max-height:86vh}
.wa-body .wa-gcap{margin:12px 0 0;text-align:center;font-size:14.4px;font-weight:700;color:var(--slate)}
.ig-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 18px}
.ig-chips button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:7px 12px;font:inherit;
  font-size:13.6px;font-weight:700;color:var(--ink);cursor:pointer;transition:.18s var(--ease)}
.ig-chips button:hover{border-color:var(--blue)}
.ig-chips button.on{background:var(--blue);border-color:var(--blue);color:#fff}

/* ══ 기업소개 영상(2026-10-20) - site.js filmModal · 단추 아이콘 ══════════════ */
.btn.film-btn svg{width:15px;height:15px;fill:currentColor;flex:none}
html.film-open{overflow:hidden}
.film-lb{position:fixed;inset:0;z-index:1200;display:flex;align-items:center;justify-content:center;
  padding:64px 28px 28px;background:rgba(3,9,20,.88);animation:film-in .25s ease}
@keyframes film-in{from{opacity:0}to{opacity:1}}
.film-box{width:min(100%,calc((100vh - 92px) * 16 / 9));aspect-ratio:16/9;border-radius:12px;overflow:hidden;
  background:#06142E;box-shadow:0 30px 80px rgba(0,0,0,.55)}
.film-box iframe{display:block;width:100%;height:100%;border:0}
.film-x{position:absolute;top:12px;right:18px;width:44px;height:44px;border:0;border-radius:8px;
  background:rgba(255,255,255,.12);color:#fff;font-size:28px;line-height:1;cursor:pointer;transition:background .2s}
.film-x:hover{background:var(--blue)}
@media (prefers-reduced-motion:reduce){.film-lb{animation:none}}

/* ══ 첫 화면 회사소개 칸 - 사진 대신 기업소개 영상(2026-10-20) - site.js filmInline ══════════════
   칸을 영상 비율(16:9)로. html 을 앞에 붙여 html.fp · html[lang] 의 16:10 규칙(같은 특이도)을 뒤에서 이긴다 */
html #company .split .im.film-im{min-height:0;height:auto;aspect-ratio:16/9;align-self:center;background:#06142E}
.film-poster{position:absolute;inset:0;display:block;width:100%;height:100%;padding:0;border:0;background:#06142E;cursor:pointer;overflow:hidden}
.film-poster img{transition:scale 1.2s var(--ease),filter .3s}
.film-poster:hover img{filter:brightness(.9)}
.fv-play{position:absolute;left:74%;top:50%;width:clamp(64px,6vw,92px);aspect-ratio:1;transform:translate(-50%,-50%);
  border-radius:50%;background:rgba(255,255,255,.95);display:grid;place-items:center;box-shadow:0 12px 34px rgba(3,12,30,.35);
  transition:transform .25s,background .25s}
.fv-play svg{width:38%;height:38%;fill:var(--blue);margin-left:7%;transition:fill .25s}
.fv-play::before{content:"";position:absolute;inset:-10px;border-radius:50%;border:2px solid rgba(255,255,255,.6);animation:fv-ring 2.2s ease-out infinite}
@keyframes fv-ring{from{transform:scale(.85);opacity:.9}to{transform:scale(1.35);opacity:0}}
.film-poster:hover .fv-play,.film-poster:focus-visible .fv-play{transform:translate(-50%,-50%) scale(1.07);background:var(--blue)}
.film-poster:hover .fv-play svg,.film-poster:focus-visible .fv-play svg{fill:#fff}
.film-poster:focus-visible{outline:3px solid var(--blue);outline-offset:-3px}
.fv-cap{position:absolute;right:14px;bottom:14px;padding:6px 12px;border-radius:999px;background:rgba(4,12,28,.62);
  color:#fff;font-size:13.5px;font-weight:700;letter-spacing:-.01em;line-height:1.3;backdrop-filter:blur(4px)}
.split .im .film-frame{position:absolute;inset:0;width:100%;height:100%;border:0;background:#06142E}
@media (prefers-reduced-motion:reduce){.fv-play::before{animation:none;opacity:0}}
@media (max-width:640px){.fv-play{width:52px}.fv-play::before{inset:-7px}.fv-cap{right:10px;bottom:10px;padding:4px 10px;font-size:12px}}