@charset "UTF-8";
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");
/* ==========================================================================
   시스템엔지니어링(주) se2u.com — style.css [현행 · 대문, 화이트 시안]
   아래 주석의 "A안" 은 보관용 다크 시안(css/style-dark.css) — 섞어 쓰지 말 것.
   첫 화면(§4)은 타이포만, 그 아래(§5~)는 섹션별 바탕색이 구조 — 색이 바뀌는 자리에 선 없음.
   구성: 0 토큰 · 1 리셋 · 2 레이아웃 · 3 GNB · 4 카피 · 5 섹션 공통
        6 도식 · 7 사업분야 · 8 선언 · 9 성과 · 10 푸터 · 11 반응형
   ========================================================================== */

/* ── 0. 디자인 토큰 ─────────────────────────────────────────────────── */
:root {
  /* A안과 토큰 이름은 같고 명암만 뒤집힘 — 도식(§6)이 값 수정 없이 동작하는 이유. --accent 는 여기서 가장 어두운 색 */
  --accent: #17181A;
  --accent-600: #000000;
  --on-accent: #FFFFFF;

  --brand-amber: #F4A638;
  --brand-red: #EE2B2A;

  /* 플랫폼 — SELab.AI 지칭 요소 전용. 흰 바탕용으로 A안보다 한 단 어둡게, 글자는 흰색 고정 */
  --teal-500: #1E7A82;
  --teal-600: #12666E;

  /* 중립 — 라이트 */
  --ink-900: #17181A;   /* 본문 */
  --ink-500: #6E6B66;   /* 보조 */
  --ink-400: #A09C96;   /* 보조보다 밝음 — 곁들이는 글줄용. 본문에는 쓰지 말 것(대비가 낮습니다) */
  --line: #E4E1DB;      /* 헤어라인 */
  --line-hi: #CFCBC3;   /* 화살표·꼬리표 바탕 */
  /* 바탕색 여럿 — 섹션마다 바닥이 바뀌며 구조를 만듦 */
  --bg: #EDEBE6;        /* 페이지 기본 — 순백이 아니라 웜 오프화이트 */
  --paper: #F5F3EF;     /* 한 단 올라온 면(도식·카드 섹션) */
  --ink-hero: #141516;  /* 히어로 색면 */
  --slate: #34383F;     /* 선언 색면 */
  --surface: #FFFFFF;   /* 도식 칸 — paper 위에서 한 단 더 올라온다 */
  --surface-hi: #EAE7E0;

  /* 선언 문구의 스크롤 색칠 — 꺼진 상태와 켜진 상태 */
  --paint-off: #DBD8D2;
  --paint-on: #17181A;

  --header-h: 76px;
  --container: 1280px;
  --gutter: 24px;
  --ease: cubic-bezier(.22,.61,.36,1);

  --fs-body: 16px;
  --fs-sm: 14px;
  --fs-xs: 12px;
  --fs-h2: 44px;
  --fs-h3: 24px;
}

/* ── 1. 리셋 & 기본 ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: 'Pretendard', 'Pretendard Variable', -apple-system, BlinkMacSystemFont,
               system-ui, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  font-size: var(--fs-body);
  line-height: 1.75;
  color: var(--ink-900);
  background: var(--bg);
  word-break: keep-all;
  overflow-wrap: break-word;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; }
/* 필수 — 브라우저 기본 [hidden] 은 특이도 0 이라 .sflow{display:grid} 에 져서 도식 두 개가 겹쳐 보임.
   style-dark.css §7 에 같은 줄 있음 — 두 벌 */
[hidden] { display: none !important; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── 2. 레이아웃 유틸 ───────────────────────────────────────────────── */
.wrap { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
.nowrap { white-space: nowrap; }
.br-mo { display: none; }

/* ── 3. 헤더 / GNB ──────────────────────────────────────────────────
   A안(style-dark.css §3)과 같은 구조·클래스. 스크롤 후 배경만 반투명 흰색 */
.gnb {
  position: sticky; top: 0; z-index: 100;
  height: var(--header-h);
  background: transparent; border: 0;
  transition: transform .38s var(--ease), background .3s var(--ease), box-shadow .3s var(--ease);
}
.gnb--hidden { transform: translateY(-100%); }

/* 맨 위에서는 배경 없음, 스크롤 시작 후 반투명 흰 바탕 + 아래 선. blur 미지원 브라우저도 알파 배경만으로 읽힘 */
/* 어두운 면 위에서 글자·로고를 밝게 뒤집는 규칙 — 지금은 검은 히어로가 없어 안 켜지지만 대비용으로 유지 */
.gnb--on-dark .gnb__menu a { color: rgba(242,241,238,.86); }
.gnb--on-dark .gnb__menu a:hover { color: #FFFFFF; }
.gnb--on-dark .gnb__menu a::after { background: #FFFFFF; }
.gnb--on-dark .gnb__lang-btn { color: rgba(242,241,238,.55); }
.gnb--on-dark .gnb__toggle span { background: #F2F1EE; }
/* 로고 두 판을 겹쳐 불투명도로 전환. 구조 규칙 → 상태 규칙 순서 유지할 것 — 뒤집으면 히어로 밖에서 로고가 사라짐 */
.gnb__logo { position: relative; }
.gnb__logo-dark  { opacity: 1; transition: opacity .3s var(--ease); }
.gnb__logo-light { position: absolute; inset: 0; opacity: 0; transition: opacity .3s var(--ease); }
.gnb--on-dark .gnb__logo-dark  { opacity: 0; }
.gnb--on-dark .gnb__logo-light { opacity: 1; }
/* 검은 히어로 위에서는 배경을 깔지 않는다 — 이미 대비가 충분하다 */
.gnb--on-dark.is-stuck { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; }

.gnb.is-stuck {
  background: rgba(255, 255, 255, .82);
  -webkit-backdrop-filter: saturate(140%) blur(18px);
  backdrop-filter: saturate(140%) blur(18px);
  box-shadow: 0 1px 0 var(--line);
}

.gnb__inner { display: flex; align-items: center; gap: 40px; height: 100%; }
.gnb__logo { display: block; }
.gnb__logo img { height: 26px; width: auto; }

.gnb__menu { display: flex; align-items: center; gap: 30px; margin-left: auto; flex: 0 0 auto; }
.gnb__menu > a { white-space: nowrap; }
.gnb__menu a {
  position: relative; font-size: var(--fs-sm); font-weight: 400; color: var(--ink-900);
  padding: 6px 0; transition: color .2s;
}
.gnb__menu a:hover { color: var(--accent); }
/* 밑줄이 왼쪽에서 자라 나온다 — A안과 같은 동작 */
.gnb__menu a::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left;
  transition: transform .25s var(--ease);
}
.gnb__menu a:hover::after { transform: scaleX(1); }
.gnb__menu a.gnb__cta { flex: 0 0 auto; white-space: nowrap; }
/* 언어 전환 — hover/focus 로 KR·EN 이 내려옴. JS 없음 */
.gnb__lang { position: relative; display: inline-flex; align-items: center; }
.gnb__lang-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 0;
  font-size: var(--fs-xs); color: var(--ink-500); letter-spacing: .04em; cursor: pointer;
}
.gnb__lang-btn:hover, .gnb__lang:focus-within .gnb__lang-btn { color: var(--ink-900); }
.gnb__lang-arrow { width: 10px; height: 6px; flex: 0 0 auto; opacity: .75; transition: transform .2s var(--ease); }
.gnb__lang:hover .gnb__lang-arrow, .gnb__lang:focus-within .gnb__lang-arrow { transform: rotate(180deg); }
.gnb__lang-menu {
  position: absolute; top: 100%; right: 0; z-index: 5; min-width: 132px; margin: 6px 0 0; padding: 6px 0; list-style: none;
  background: var(--surface); border: 1px solid var(--line); box-shadow: 0 10px 28px rgba(0,0,0,.10);
  opacity: 0; transform: translateY(-4px); pointer-events: none; transition: opacity .16s var(--ease), transform .16s var(--ease);
}
/* 단추와 메뉴 사이 6px 틈을 투명 다리로 메웁니다(말풍선과 같은 이유) */
.gnb__lang-menu::before { content: ''; position: absolute; left: 0; right: 0; bottom: 100%; height: 8px; }
.gnb__lang:hover .gnb__lang-menu, .gnb__lang:focus-within .gnb__lang-menu { opacity: 1; transform: none; pointer-events: auto; }
.gnb__menu .gnb__lang-menu a { display: flex; align-items: baseline; gap: 8px; padding: 8px 14px; font-size: var(--fs-xs); letter-spacing: .04em; color: var(--ink-500); }
.gnb__menu .gnb__lang-menu a span { font-size: var(--fs-xs); letter-spacing: 0; color: var(--ink-500); font-weight: 300; }
.gnb__menu .gnb__lang-menu a::after { display: none; }
.gnb__menu .gnb__lang-menu a:hover { background: var(--surface-hi); color: var(--ink-900); }
.gnb__menu .gnb__lang-menu a[aria-current] { color: var(--ink-900); font-weight: 600; }

.gnb__toggle { display: none; width: 44px; height: 44px; margin-left: auto; position: relative; }
.gnb__toggle span {
  position: absolute; left: 11px; width: 22px; height: 2px; background: var(--ink-900);
  transition: transform .25s var(--ease), opacity .2s;
}
.gnb__toggle span:nth-child(1) { top: 16px; }
.gnb__toggle span:nth-child(2) { top: 22px; }
.gnb__toggle span:nth-child(3) { top: 28px; }
.gnb.is-open .gnb__toggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.gnb.is-open .gnb__toggle span:nth-child(2) { opacity: 0; }
.gnb.is-open .gnb__toggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

@media (prefers-reduced-motion: reduce) { .gnb { transition: none; } }

/* ── 4. 카피 ────────────────────────────────────────────────────────
   사진 없이 타이포로 서는 첫 화면 — 두 줄이 컨테이너 폭을 정확히 채움(행간 1.06, 자간 -.045em).
   바탕 순백. 아래 --paper 와 차이가 작아 경계가 은근함 — 약해 보이면 --paper 를 내리거나 .lede 높이를 줄일 것 */
.lede {
  position: relative;
  background: #FFFFFF;
  /* 헤더 높이만큼 위로 당김 — 안 그러면 헤더 자리에 body 바탕이 비쳐 베이지 띠가 생김. 같은 값을 위 패딩으로 돌려줌 */
  margin-top: calc(var(--header-h) * -1);
  /* 56px 덜어내 다음 섹션(--paper) 윗변이 화면 안으로 올라오게 함 — 스크롤 신호 대용 */
  min-height: calc(100vh - 56px);
  min-height: calc(100svh - 56px);
  display: flex; flex-direction: column; justify-content: center;
  /* 위 여백을 키우는 손잡이는 이 150px 하나입니다 — 세로 가운데 정렬이라 화면에는 절반만 나타납니다(+80px) */
  padding: calc(var(--header-h) + 150px) 0 84px;
}
/* 배경 곡선 — 카피 뒤. 음수 z-index 는 브라우저에 따라 body 배경 뒤로 숨으므로 자식만 올림 */
.lede__bg {
  position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  /* 세로로만 눌러 파형을 가운데로 모음. 이미지가 아니라 바깥 상자를 누를 것 — 이미지에 scaleY 를 걸면 회전과 섞여 배율 계산이 무너짐 */
  transform: scaleY(.92);
  /* 위아래 흐림 — 세로로 누르면 그림 바탕이 히어로를 다 못 덮어 가로 경계가 생김 */
  -webkit-mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(180deg, transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.waveflow {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  /* multiply — 그림 바탕이 #EBEFF2 인 JPEG 라 그냥 얹으면 회색 사각형이 생김. 투명 PNG 로 바꾸면 삭제 가능 */
  mix-blend-mode: multiply;
  /* 밝기만 올려 옅게 함 — 채도를 낮추면 multiply 성분이 회색이 되어 둔탁해짐 */
  filter: brightness(1.08);
  opacity: 0;                       /* 실제 값은 키프레임이 정한다 */
  will-change: transform, opacity;
  animation: waveDrift 128s linear infinite;
}
/* 둘째 장은 주기의 절반만큼 당겨 시작 — 한 장이면 끝에서 처음으로 되돌아가는 순간이 보임 */
.waveflow--2 { animation-delay: -64s; }

/* 돌면서 오른쪽으로 흐름. 회전 ±14도, 이동 ±300px, 주기 128초.
   배율은 키프레임 값이 아니라 크로스페이드 후 보이는 값(진폭의 64%) 기준으로 계산 — 지금 1.39.
   셋 중 하나라도 바꾸면 재계산할 것 — 배율이 모자라면 회전한 모서리의 흰 삼각형이 보임 */
@keyframes waveDrift {
  0%   { opacity: 0;   transform: scale(1.42) translateX(-300px) rotate(-14deg); }
  18%  { opacity: .34; }
  82%  { opacity: .34; }
  100% { opacity: 0;   transform: scale(1.42) translateX( 300px) rotate( 14deg); }
}
/* 영상 판 — CSS 애니메이션 끔. object-fit·multiply·바깥 scaleY 는 <video> 에도 그대로 먹음 */
.waveflow--v { animation: none; opacity: .34; transform: none; }
.waveflow--still { display: none; }

@media (prefers-reduced-motion: reduce) {
  .waveflow { animation: none; opacity: .34; transform: none; }
  .waveflow--v { display: none; }
  .waveflow--still { display: block; }
}

.lede .wrap { position: relative; z-index: 1; }

.lede__title { margin: 0; font-weight: 600; line-height: 1.06; letter-spacing: -.045em; }
/* 줄마다 폭을 따로 맞춤(main.js §2). 여기 font-size 는 JS 전 대비값 */
.lede__line { display: block; white-space: nowrap; font-size: clamp(30px, 6.6vw, 92px); }
/* 윗줄은 조건, 아랫줄이 결론 — 위계는 크기가 아니라 명도로만 */
.lede__line--dim { color: #A8A5A0; }
.lede__sub {
  margin: 40px 0 0;
  font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--ink-500);
}

/* 히어로 버튼 — A안(style-dark.css §4)과 같은 클래스, 색만 잉크 쪽으로 뒤집음 */
/* 개념설계 안내 줄 — 부제 아래, 단추 위 */
.lede__concept { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 22px 0 0; font-size: var(--fs-sm); line-height: 1.6; }
.lede__concept-q { font-weight: 600; color: var(--ink-900); }
.lede__concept-link {
  display: inline-flex; align-items: center; gap: 7px; padding: 0 0 2px;
  border-bottom: 1px solid var(--line-hi); font-size: var(--fs-sm); font-weight: 400; color: var(--ink-500);
  transition: color .18s var(--ease), border-color .18s var(--ease);
}
.lede__concept-link:hover { color: var(--ink-900); border-color: var(--ink-900); }
.lede__concept-link:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 3px; }
.lede__concept-link svg { width: 6px; height: 9px; flex: 0 0 auto; }
.lede__foot { display: flex; align-items: center; gap: 14px; margin-top: 40px; }
.hero__btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 50px; min-width: 186px; padding: 0 22px;
  /* 배경 파형 위라 투명하면 사각형이 안 읽히고, 흰색으로 채우면 오려 붙인 듯 보임. backdrop-filter 폴백 값 */
  background: rgba(255,255,255,.50);
  border: 1px solid rgba(23,24,26,.18); border-radius: 0;
  color: var(--ink-900);
  font-size: var(--fs-sm); font-weight: 400; letter-spacing: -.01em;
  white-space: nowrap;
  transition: background .22s var(--ease), border-color .22s var(--ease);
}
.hero__btn-ext  { width: 13px; height: 13px; flex: 0 0 auto; opacity: .6; margin-left: -1px; }
.hero__btn-chev { width: 8px;  height: 12px; flex: 0 0 auto; opacity: .7; }
.hero__btn-mark { width: 14px; height: 16px; flex: 0 0 auto; }   /* 마크 비율 82:96 */
/* 글래스 — blur 가 파형의 고주파 선을 지우고 색만 남겨 '무늬에 속한 면' 으로 읽힘. .gnb.is-stuck 과 같은 장치 */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hero__btn {
    /* 흰 면을 얇게 하고 blur 를 올림 — 면이 얇을수록 뒤 선이 비쳐 더 뭉개야 함 */
    background: rgba(255,255,255,.26);
    -webkit-backdrop-filter: saturate(170%) blur(20px);
            backdrop-filter: saturate(170%) blur(20px);
  }
}
.hero__btn:hover { background: rgba(255,255,255,.58); border-color: var(--ink-900); }

/* ── 스크롤 인뷰 리빌 ─────────────────────────────────────────────────
   숨김 상태는 JS 가 붙이는 .js-reveal 안에만 둘 것 — CSS 에 직접 opacity:0 을 두면 JS 없는 환경에서 빈 화면 */
.reveal { transition: opacity .68s var(--ease), transform .68s var(--ease); }
.js-reveal .reveal { opacity: 0; transform: translateY(22px); }
.js-reveal .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .js-reveal .reveal { opacity: 1; transform: none; transition: none; }
}

/* ── 5. 섹션 공통 ───────────────────────────────────────────────────
   경계는 바탕색 변화로만 — 구분선 없음 */
.section--paper { background: var(--paper); }
.section--slate { background: var(--slate); color: #E9E7E3; }
.schema, .biz, .decl, .rnd { padding: 132px 0; }
.sec__title {
  margin: 0;
  font-size: clamp(26px, 3.1vw, var(--fs-h2));
  font-weight: 600; line-height: 1.32; letter-spacing: -.028em;
}
/* 본문은 칸을 다 씀 — max-width 없음 */
.sec__desc { margin: 18px 0 0; font-size: 17px; font-weight: 300; color: var(--ink-500); line-height: 1.7; }
.section--slate .sec__desc { color: rgba(233,231,227,.62); }
.accent { color: var(--ink-900); }
.ttl-mark { display: inline-block; height: .84em; width: auto; margin-right: .22em; vertical-align: -.06em; }

.headrow { position: relative; margin-top: 18px; padding-right: 150px; }
.headrow .sec__desc { margin-top: 0; }
.headrow__more {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--ink-500); transition: color .18s var(--ease);
}
.headrow__more svg { width: 7px; height: 11px; flex: 0 0 auto; }
.headrow__more:hover { color: var(--ink-900); }

/* 도식 전환 버튼 */
.sfswitch { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; }
.sfswitch__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 34px; border: 1px solid var(--line);
  background: var(--surface); transition: background .18s var(--ease), border-color .18s var(--ease);
  position: relative;
}
.sfswitch__btn + .sfswitch__btn { margin-left: -1px; }
.sfswitch__btn.is-on { z-index: 1; background: var(--surface-hi); border-color: var(--ink-500); }
.sfswitch__btn img { width: 19px; height: 19px; opacity: .5; filter: invert(1) brightness(.42); transition: opacity .18s var(--ease); }
.sfswitch__btn:hover img { opacity: .85; }
.sfswitch__btn.is-on img { opacity: 1; }
.sfswitch__btn:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.sfswitch__btn::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  padding: 4px 8px; background: var(--ink-900); color: #fff; font-size: 11px; white-space: nowrap;
  opacity: 0; pointer-events: none; transition: opacity .18s var(--ease);
}
.sfswitch__btn:hover::after, .sfswitch__btn:focus-visible::after { opacity: 1; }

.schema .sflow, .schema .sfimg { margin-top: 64px; }

/* ── 6. 도식 ────────────────────────────────────────────────────────
   A안(css/style-dark.css §6-2)에서 그대로 가져온 블록 — 두 벌, 같이 고칠 것. 직접 박은 색만 §6-3 에서 덮음 */
/* ── 6-2. 비전 흐름 — 블록 다이어그램 ───────────────────────────
   3열 × 3행 격자. 세 열의 경계를 맞춰 전체가 하나의 직사각형이 됨 */
/* 아래 여백 큼 — 도식과 맺음 띠 사이 숨 자리. .mg.mg--flow 로 특이도 올림 — 뒤의 .mg--head 규칙에 덮이지 않게 */
.mg.mg--flow { padding: 92px 30px 132px; }

/* 3열 × 3행 격자 — 같은 행 칸은 stretch 로 높이가 같고, Goal 은 두 행에 걸침. DOM 은 읽는 순서(1→6) 그대로 */
/* 한 줄 세로 배치 — 맨 위 Goal, 맨 아래 Foundation(계층형 도식과 위아래 같음). 화살표 전부 위 방향(.sfa).
   DOM 은 읽는 순서 그대로, grid-row 로만 뒤집음(.sflow 는 aria-hidden). 폭 820px — 더 넓으면 글이 안 읽힘 */
.sflow {
  display: grid;
  grid-template-columns: 1fr;
  max-width: 820px; margin-left: auto; margin-right: auto;
  row-gap: 52px;
}
.sf-a1, .sf-a2, .sf-b1, .sf-b2, .sf-b3, .sf-c { grid-column: 1; }
.sf-a2 { grid-row: 1; }   /* Goal — 지구와 인류의 지속가능성 증대 */
.sf-b2 { grid-row: 2; }   /* 전 세계적 공감대 확산 */
.sf-b3 { grid-row: 3; }   /* 산업혁신 주도 */
.sf-c  { grid-row: 4; }   /* SELab.AI 플랫폼 */
.sf-b1 { grid-row: 5; }   /* 기반 기술 */
.sf-a1 { grid-row: 6; }   /* Foundation — 시스템 사고 */

.sfn {
  position: relative;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  padding: 24px 24px 26px;
}
/* 칸이 내용보다 커져도 내용은 위에 붙임 — 바닥에 붙이면 가운데가 비어 보임 */
/* 다만 Goal 의 요약문은 제목 바로 아래에 둔다 — 바닥에 붙이면 가운데가 뻥 뚫린다 */
.sfn--goal .sfn__summary { margin-top: 18px; }
.sfn--goal { background: var(--accent); border-color: var(--accent); padding-bottom: 26px; }

.sfn__stereo {
  align-self: flex-start; margin-bottom: 14px; padding: 3px 9px;
  background: var(--line-hi); color: #CFCCC5;
  font-size: 10px; font-weight: 600; letter-spacing: .06em;
}
.sfn--goal .sfn__stereo { background: #C9C6BF; color: #55534F; }
.sfn__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.4; color: var(--ink-900); }
.sfn__mark { display: inline-block; height: 1em; width: auto; margin-right: .36em; vertical-align: -.14em; }
.sfn--goal .sfn__title { color: var(--on-accent); }
.sfn__note { margin: 10px 0 0; font-size: 15px; line-height: 1.6; color: var(--ink-500); }
/* Outcome 두 칸의 보충 설명 */
.sfn__sub { margin: 6px 0 0; font-size: 13px; line-height: 1.55; color: var(--ink-500); }

.sfn__chips { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.sfn__chips li { border: 1px solid var(--line); padding: 9px 12px; font-size: 13px; color: var(--ink-900); }

.sfn__duo { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.sfn__duo > div { border: 1px solid var(--line); padding: 10px 12px; }
.sfn__duo strong { display: block; font-size: 12.5px; font-weight: 600; color: var(--ink-900); line-height: 1.45; }
.sfn__duo span   { display: block; margin-top: 5px; font-size: 11px; color: var(--ink-500); line-height: 1.5; }
/* 플랫폼 칸 — 도식의 주인공, 여기에만 색(teal = SELab.AI 전용 토큰) */
.sfn--key {
  border-color: rgba(42,151,160,.42);
  background: linear-gradient(180deg, rgba(42,151,160,.10), rgba(42,151,160,.03));
}
.sfn__stereo--key { background: var(--teal-500); color: #06282B; }

/* 약속 — 플랫폼 칸 안에 넣어 "이 플랫폼의 두 약속" 관계가 위치로 드러남 */
.pledge { margin-top: 20px; padding-top: 18px; border-top: 1px solid rgba(42,151,160,.28); }
.pledge__tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 10px;
  background: rgba(42,151,160,.18); color: #7FD4DB;
  font-size: 11px; font-weight: 700; letter-spacing: .04em;
}
/* 제품 이름이 제목, v10 본문 첫 문장이 부제, 나머지가 본문 — 세 단이다 */
.pledge__name { margin: 0 0 8px; font-size: 17px; font-weight: 600; line-height: 1.45; letter-spacing: -.015em; color: var(--ink-900); }
.pledge__lead {
  margin: 0 0 12px; font-size: 15px; font-weight: 400; line-height: 1.6; color: #BFBCB6;
  text-decoration: underline; text-decoration-color: rgba(42,151,160,.55);
  text-decoration-thickness: 1px; text-underline-offset: 5px;
}
.pledge__body { margin: 0; font-size: 12px; line-height: 1.85; color: var(--ink-500); }

.sfn__ref {
  margin: 22px 0 0; border: 1px solid rgba(42,151,160,.28); padding: 13px 14px;
  /* 13px — 14 면 '참조모델' 이 다음 줄로 떨어짐 */
  font-size: 13px; color: var(--ink-500); text-align: center;
}
/* 맺음 문장은 도착점(Goal) 안으로 — 결론과 그 요약이 한 상자에 있다 */
.sfn__summary {
  margin: 16px 0 0; padding-top: 15px;
  border-top: 1px solid rgba(29,30,31,.18);
  /* .pledge__lead 와 같은 급 — 같은 크기여야 같은 무게로 읽힘 */
  font-size: 15px; line-height: 1.6; color: #55534F;
}

/* 연결선 — 각 노드가 자기 나가는 선을 그림. 선·화살촉·관계 이름 한 덩어리 */
.sfa { position: absolute; display: block; background: var(--line-hi); }
.sfa em {
  position: absolute; font-style: normal; font-size: 10.5px;
  color: var(--ink-500); white-space: nowrap;
}
.sfa::after { content: ''; position: absolute; border: 4px solid transparent; }

.sfa--right { top: 73px; right: -66px; width: 66px; height: 1px; }
.sfa--right::after { right: 0; top: -3.5px; border-left-color: var(--line-hi); }
.sfa--right em { left: 50%; transform: translateX(-50%); bottom: 7px; }

.sfa--left  { bottom: 83px; left: -66px; width: 66px; height: 1px; }
.sfa--left::after  { left: 0; top: -3.5px; border-right-color: var(--line-hi); }
.sfa--left em  { left: 50%; transform: translateX(-50%); bottom: 7px; }

.sfa--down  { left: 50%; bottom: -62px; width: 1px; height: 62px; }
.sfa--down::after  { bottom: 0; left: -3.5px; border-top-color: var(--line-hi); }
.sfa--down em  { top: 50%; transform: translateY(-50%); left: 9px; }

/* 아웃컴 두 칸이 한 열에 세로로 놓이므로 되돌아오는 방향은 위쪽이다 */
.sfa--up  { left: 50%; top: -34px; width: 1px; height: 34px; }
.sfa--up::after  { top: 0; left: -3.5px; border-bottom-color: var(--line-hi); }
.sfa--up em  { top: 50%; transform: translateY(-50%); left: 9px; }

/* 플랫폼 칸은 키가 크다 — 나가는 선은 도착점(아웃컴 아래 칸) 높이에 맞춰 아래쪽에 둔다 */
/* 제목 글자가 커지면서 두 값이 같아졌다 — 클래스는 의미(아래 단 화살표)를 위해 남긴다 */
.sfa--left-low { bottom: 83px; }

/* 한 줄 배치라 방향은 위 하나 — 네 갈래(--right/--left/--up/--down)를 통째로 덮음. 클래스 이름은 마크업 유지.
   이 블록은 위의 .sfa--* 규칙보다 뒤에 있어야 먹음 */
.sfa--right, .sfa--left, .sfa--up, .sfa--down {
  top: -52px; right: auto; bottom: auto; left: 34px;
  width: 1px; height: 52px;
}
.sfa--right::after, .sfa--left::after, .sfa--up::after, .sfa--down::after {
  top: 0; left: -3.5px; right: auto; bottom: auto;
  border-color: transparent; border-bottom-color: var(--line-hi);
}
.sfa em { top: 50%; left: 9px; bottom: auto; transform: translateY(-50%); }

@media (max-width: 900px) {
  /* 넓은 화면도 이미 한 줄 — 간격만 줄임. 옛 S자 되돌리기 규칙은 삭제됨(남기면 좁은 화면에서 위아래가 뒤집힘) */
  .sflow { row-gap: 46px; }
  .sfa--right, .sfa--left, .sfa--up, .sfa--down { top: -46px; height: 46px; left: 30px; }
  .sfn--goal .sfn__summary { margin-top: 16px; }
  .mg--head .sflow, .mg--head .sfimg { margin-top: 40px; }
  /* 계층형 도식은 최소 폭을 두고 가로 스크롤. 스크롤은 .sfscroll 에만 — figure 전체에 주면 캡션까지 밀림 */
  .sfscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfsvg { min-width: 880px; }
}



/* ── 6-3. 흰 바탕 보정 ──────────────────────────────────────────────
   위 블록에서 색을 직접 박은 줄만 덮음 — 어두운 바탕 전제 값이라 흰 바탕에서 글자가 사라짐 */
.sfn__stereo { color: #4A4844; }                        /* 밝은 회색 칩 위 → 어두운 글자 */
.sfn--goal .sfn__stereo { background: rgba(255,255,255,.22); color: #F2F0EC; }
.sfn__stereo--key { background: var(--teal-500); color: #FFFFFF; }
.pledge__tag { background: rgba(30,122,130,.14); color: var(--teal-600); }
.pledge__lead { color: #2F3E40; text-decoration-color: rgba(30,122,130,.55); }
/* 칸 폭(287px)에 한 줄로 못 들어가 두 줄 허용, text-wrap: balance 로 길이 맞춤(keep-all 이라 단어 단위 줄바꿈) */
.sfn__ref { font-size: 12.5px; text-wrap: balance; }
/* Goal 칸은 이제 유일한 '어두운 면' 이다 — 그 안의 글자는 전부 밝은 쪽으로 뒤집는다 */
.sfn--goal .sfn__note { color: rgba(255,255,255,.62); }
.sfn__summary { border-top-color: rgba(255,255,255,.22); color: #C9C6BF; }
.sfimg { margin: 0; padding: 0; }
.sfsvg { display: block; width: 100%; max-width: 1200px; height: auto; margin: 0 auto; }

/* ── 6-4. 맺음 문장 ───────────────────────────────────────────────── */
/* 맺음 문장 — 페이지 유일의 컬러 면(로고 그라데이션) */
.closing {
  background: linear-gradient(100deg,
    #229741 0%, #248A5C 30%, #267F6F 50%, #257780 70%, #28699D 100%);
  padding: 132px 0;
}
.closing__text {
  /* 폭 제한 없음 — 줄바꿈은 마크업 <br> 하나로만. max-width 를 두면 앞줄이 한 번 더 접힘.
   문구를 고치면 앞줄이 한 줄로 남는지 확인할 것 */
  margin: 0 auto; max-width: none; color: #FFFFFF;
  text-align: center;
  /* 크기는 선언(.decl__title/.decl__body)과 같은 값 — clamp 세 값 다 맞출 것. 굵기만 400 (얇으면 그라데이션 위에서 획이 먹힘) */
  font-size: clamp(20px, 2.5vw, 34px); font-weight: 400;
  line-height: 1.45; letter-spacing: -.028em;
}
/* 앞줄은 수단, 뒷줄이 결론 */
.closing__lead { color: rgba(255,255,255,.72); }

/* ── 6-5. 개념설계란 무엇인가요? · 이렇게 사용합니다 ─────────────────────
   색면 없음(--bg). 글자 크기는 이 파일의 기존 값만 사용 */
.howto { padding: 132px 0; }
/* 개념설계 설명 — 히어로 안, 안내 줄 아래에 펼쳐짐 */
.lede__concept-body { margin-top: 40px; }
/* 펼치면 물결 영상은 첫 화면 높이까지만(.is-concept-open 은 JS §15) */
.lede.is-concept-open .lede__bg { inset: 0 0 auto 0; height: 100vh; height: 100svh; }
/* 펼친 동안 위 여백 = 헤더 + 88px (제목이 헤더에 붙지 않게) */
.lede.is-concept-open { padding-top: calc(var(--header-h) + 88px); }
.concept__title { margin: 0 0 48px; }
.concept__toggle-row { display: flex; justify-content: flex-end; margin: 28px 0 0; }   /* 접기 — 오른쪽 끝 */
.concept__toggle-row .lede__concept-link { color: var(--ink-900); border-color: var(--ink-900); }
.concept__toggle-row .lede__concept-link svg { width: 10px; height: 7px; }
/* 펼칠 때 살짝 올라오며 나타남 */
@keyframes conceptIn { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.lede__concept-body.is-in { animation: conceptIn .32s var(--ease) both; }
@media (prefers-reduced-motion: reduce) { .lede__concept-body.is-in { animation: none; } }
.concept__intro { margin-top: 0; }
.concept__p { margin: 0; font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--ink-500); }
.concept__p + .concept__p { margin-top: 18px; }
.concept__lead { margin: 56px 0 0; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
/* 다섯 산업 예시 — 5열, 테두리·배경 없음(.bizrow 와 같은 조판) */
.concept__grid {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px 32px;
  margin-top: 28px;
}
.concept__item { position: relative; }
/* 예시 사진 — 16:10, 둥근 모서리 */
.concept__photo { display: block; width: 100%; aspect-ratio: 16 / 10; margin: 14px 0 16px; overflow: hidden; background: var(--surface-hi); border-radius: 12px; }
.concept__photo img { width: 100%; height: 100%; object-fit: cover; display: block;
  /* 다섯 장 톤 맞춤 — 이 줄만 지우면 원색 */
  filter: saturate(.72) contrast(.94) sepia(.12) brightness(1.02);
}
.concept__name { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.concept__desc { margin: 10px 0 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-500); }
/* 지구적 과제 — 검정 띠(도식 Goal 칸과 같은 색 #1D1E1F / 보조 글자 #C9C6BF) */
.concept__global {
  margin-top: 48px; padding: 40px 44px 44px;
  background: #1D1E1F; color: #FFFFFF;
}
.concept__global .concept__name { color: #FFFFFF; }
.concept__global .concept__desc { color: #C9C6BF; }
.concept__global .concept__link { color: #FFFFFF; }
.concept__global .concept__link:hover { color: #C9C6BF; }
/* 상자 안 맺음 문단 — 링크 아래 헤어라인 */
.concept__global .concept__global-after { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.18); color: #C9C6BF; }
.concept__links { display: flex; flex-wrap: wrap; gap: 8px 32px; margin: 16px 0 0; }
.concept__link {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: var(--fs-sm); color: var(--ink-900); transition: color .18s var(--ease);
}
.concept__link svg { width: 7px; height: 11px; flex: 0 0 auto; }
.concept__link:hover { color: var(--teal-600); }
.concept__punch { margin: 28px 0 0; font-size: var(--fs-h3); font-weight: 500; line-height: 1.5; letter-spacing: -.022em; }

/* 이렇게 사용합니다 — 왼쪽 탭(sticky) + 오른쪽 단계. 스크롤 연동 js/main.js §16. ≤1100 은 위쪽 가로 띠 */
.howto__layout { display: grid; grid-template-columns: 4fr 8fr; gap: 0 64px; margin-top: 72px; align-items: start; }
/* 탭 묶음(sticky) — 표제는 .is-stuck 일 때만 보임. 표제 자리 34px 만큼 음수 margin 으로 당김 */
.howto__side { position: sticky; top: calc(var(--header-h) + 32px); margin-top: -34px; padding-top: 34px; }
.howto__tabs-label { position: absolute; top: 0; left: 0; margin: 0; line-height: 22px; font-size: var(--fs-sm); font-weight: 600; color: var(--ink-900); letter-spacing: -.01em; opacity: 0; transform: translateY(-4px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.howto__side.is-stuck .howto__tabs-label { opacity: 1; transform: none; }
.howto__tabs { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--line); }
.howto__tab {
  display: grid; grid-template-columns: 64px 1fr; gap: 0 12px; align-items: baseline;
  padding: 16px 0 16px 16px; border-bottom: 1px solid var(--line);
  box-shadow: inset 2px 0 0 transparent;
  color: var(--ink-500); transition: color .2s var(--ease), box-shadow .2s var(--ease);
}
.howto__tab:hover { color: var(--ink-900); }
.howto__tab.is-on { color: var(--ink-900); box-shadow: inset 2px 0 0 var(--ink-900); }
.howto__tab-no { font-size: var(--fs-xs); font-weight: 600; letter-spacing: .06em; }
.howto__tab-name { font-size: var(--fs-sm); font-weight: 500; line-height: 1.5; }
.howto__tab.is-on .howto__tab-name { font-weight: 600; }
.howto__panels { border-top: 1px solid var(--line); }
.howto__step { padding: 40px 0 44px; border-bottom: 1px solid var(--line); scroll-margin-top: calc(var(--header-h) + 32px); }
.howto__no { display: inline-block; padding: 4px 10px; margin-bottom: 18px; background: var(--surface-hi); color: var(--ink-500); font-size: var(--fs-xs); font-weight: 600; letter-spacing: .04em; }
.howto__title { margin: 0; font-size: var(--fs-h3); font-weight: 600; line-height: 1.4; letter-spacing: -.02em; }
.howto__desc { margin: 14px 0 0; font-size: 17px; font-weight: 300; line-height: 1.75; color: var(--ink-500); }
.howto__chain { margin: 18px 0 0; padding-top: 14px; border-top: 1px solid var(--line); font-size: 13px; font-weight: 300; line-height: 1.7; color: var(--ink-500); }

/* ── 6-6. 용어 설명 — 밑줄 용어 · 말풍선 · 레이어 ─────────────────────────────
   마크업 src/components/Glossary.jsx, 열고 닫기 js/main.js §14. 말풍선은 CSS(:hover), JS 는 .term--flip 만 붙임 */
.term {
  position: relative;
  text-decoration: underline; text-decoration-style: dotted; text-decoration-color: var(--line-hi);
  text-underline-offset: .18em; transition: text-decoration-color .18s var(--ease);
}
.term:hover, .term:focus-visible { text-decoration-color: var(--ink-900); }
.term__tip {
  position: absolute; left: 0; bottom: calc(100% + 10px); z-index: 30;
  display: flex; flex-direction: column; gap: 6px;
  width: 320px; max-width: min(320px, calc(100vw - 2 * var(--gutter)));
  padding: 14px 16px 12px; background: var(--ink-900); color: #FFFFFF;
  font-size: 13px; font-weight: 300; line-height: 1.6; letter-spacing: 0; text-align: left;
  white-space: normal; word-break: keep-all;
  /* 평소엔 display:none 필수 — opacity 만으로 숨기면 모바일에서 페이지가 옆으로 넓어짐. 페이드는 @starting-style */
  display: none;
  opacity: 0; transform: translateY(4px); pointer-events: none;
  transition: opacity .16s var(--ease), transform .16s var(--ease);
}
/* 글자와 말풍선 사이 틈을 투명 다리로 메움 — 없으면 마우스가 옮겨 가는 순간 hover 가 끊김 */
.term__tip::before { content: ''; position: absolute; top: 100%; left: 0; right: 0; height: 14px; }
.term__tip::after {                 /* 꼬리 */
  content: ''; position: absolute; top: 100%; left: 18px;
  border: 6px solid transparent; border-top-color: var(--ink-900);
}
.term--flip .term__tip { left: auto; right: 0; }
.term--flip .term__tip::after { left: auto; right: 18px; }
.term:hover .term__tip, .term:focus-visible .term__tip { display: flex; opacity: 1; transform: none; pointer-events: auto; }
@starting-style { .term:hover .term__tip, .term:focus-visible .term__tip { opacity: 0; transform: translateY(4px); } }
.term__tip-name { font-weight: 600; font-size: var(--fs-sm); color: #FFFFFF; }
.term__tip-def { color: rgba(255,255,255,.82); }
.term__more { display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; font-size: var(--fs-xs); font-weight: 500; color: rgba(255,255,255,.7); text-decoration: underline; text-underline-offset: .2em; cursor: pointer; }
.term__tip:hover .term__more { color: #FFFFFF; }
.term__more svg { width: 5px; height: 8px; }
/* 제목 안 용어는 글자 크기를 물려받으므로 말풍선만 본문 크기로 되돌림 */
.sfn__title .term__tip, .pledge__name .term__tip { font-weight: 300; letter-spacing: 0; }

/* 레이어 — 화면 가운데 판 하나. 뒤는 반투명 잉크로 덮습니다. */
/* z-index 는 헤더(100)보다 위 */
.glossary-layer { position: fixed; inset: 0; z-index: 120; display: flex; align-items: center; justify-content: center; padding: var(--gutter); }
.glossary-layer__backdrop { position: absolute; inset: 0; background: rgba(23,24,26,.55); }
.glossary-layer__panel {
  position: relative; width: 100%; max-width: 760px; max-height: min(80vh, 760px);
  display: flex; flex-direction: column;
  background: var(--surface); color: var(--ink-900);          /* 흰 바탕 [고객 지시] */
  border-radius: 14px; overflow: hidden;                       /* 모서리 살짝 둥글게 [고객 지시] */
  box-shadow: 0 24px 64px rgba(0,0,0,.28);
}
.glossary-layer__head { display: flex; align-items: center; justify-content: space-between; padding: 26px 32px 18px; border-bottom: 1px solid var(--line); }
/* 제목 35px [고객 지시] — 좁은 화면에서는 clamp 로 내려갑니다 */
.glossary-layer__title { margin: 0; font-size: clamp(24px, 2.6vw, 35px); font-weight: 600; line-height: 1.2; letter-spacing: -.025em; }
.glossary-layer__close {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-right: -12px; color: var(--ink-500);
  transition: color .18s var(--ease), background .18s var(--ease);
}
.glossary-layer__close svg { width: 16px; height: 16px; }
.glossary-layer__close { border-radius: 8px; }
.glossary-layer__close:hover { color: var(--ink-900); background: var(--surface-hi); }
.glossary-layer__close:focus-visible { outline: 2px solid var(--teal-500); outline-offset: 2px; }
.glossary-layer__list { margin: 0; padding: 6px 32px 18px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.glossary-layer__item { padding: 18px 0 20px; border-bottom: 1px solid var(--line); scroll-margin-top: 12px; }
.glossary-layer__item:last-child { border-bottom: 0; }
.glossary-layer__term { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; }
.glossary-layer__def { margin: 6px 0 0; font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-500); }
/* 누른 용어 — 레이어가 열리면 그 항목으로 내려가고 잠깐 표시가 남습니다 */
.glossary-layer__item.is-current { box-shadow: inset 3px 0 0 var(--ink-900); padding-left: 16px; margin-left: -16px; }
/* 레이어가 열려 있는 동안 뒤 페이지는 스크롤을 멈춥니다 */
body.is-glossary-open { overflow: hidden; }

/* ── 7. 사업분야 ────────────────────────────────────────────────────
   격자 없음 — 칸은 간격으로만 나눔, 배경·테두리 없는 '항목' */
.bizrow {
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 40px;
  margin-top: 84px;
}
.biz-card { position: relative; display: flex; flex-direction: column; padding-bottom: 30px; }
.biz-card__art { display: block; width: 160px; height: 160px; margin: 0 auto 30px; }
/* 원본 SVG(#f2bf81)는 손대지 않고 CSS 필터로만 잉크 쪽으로 누름 — 원본을 고치면 A안이 함께 바뀜 */
.biz-card__art img { width: 100%; height: 100%; filter: grayscale(1) brightness(.28); transition: filter .25s var(--ease); }
a.biz-card:hover .biz-card__art img { filter: grayscale(1) brightness(0); }
.biz-card__title { margin: 0; font-size: 17px; font-weight: 600; line-height: 1.5; letter-spacing: -.015em; transition: color .18s var(--ease); }
.biz-card__desc { margin: 10px 0 0; font-size: 13.5px; font-weight: 300; line-height: 1.65; color: var(--ink-500); }
/* 화살표는 평소 감춤 — 상시 노출하면 잔무늬가 생김 */
.biz-card__go { position: absolute; left: 0; bottom: 0; width: 7px; height: 11px; color: var(--ink-900); opacity: 0; transform: translateX(-5px); transition: opacity .2s var(--ease), transform .2s var(--ease); }
.biz-card__go svg { width: 100%; height: 100%; display: block; }
a.biz-card:hover .biz-card__go { opacity: 1; transform: translateX(0); }

/* ── 8. 선언 ────────────────────────────────────────────────────────
   네 줄 크기·굵기 하나, 숫자만 강조. 스크롤 연동 색칠은 A안과 같고 값만 흰 바탕용 */
.decl { text-align: center; }
.decl__title, .decl__body {
  margin: 0; font-size: clamp(20px, 2.5vw, 34px); font-weight: 300;
  line-height: 1.62; letter-spacing: -.022em; color: rgba(233,231,227,.78);
}
.decl__body { margin-top: .2em; }
.decl__num { font-style: normal; font-weight: 700; font-size: 1.24em; line-height: 1; color: #FFFFFF; }
/* 전환을 주지 않는다 — 부드럽게 번지면 어느 단어가 칠해졌는지 경계가 흐려진다 */
.decl__w { transition: none; }
/* 슬레이트 색면 위이므로 칠하기 값도 뒤집는다 — 꺼진 상태가 어둡고 켜진 상태가 밝다 */
.is-armed .decl__w { color: rgba(233,231,227,.18); }
.is-armed .decl__w.is-on { color: rgba(233,231,227,.78); }
.is-armed .decl__num .decl__w.is-on { color: #FFFFFF; }

/* ── 9. 연구개발 성과 ───────────────────────────────────────────── */
.postrow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; margin-top: 84px; }
.post-card { position: relative; display: flex; flex-direction: column; padding-bottom: 34px; }
.post-card__tag {
  align-self: flex-start; margin-bottom: 18px; padding: 4px 10px;
  background: var(--surface-hi); color: var(--ink-500);
  font-size: var(--fs-xs); font-weight: 600;
}
.post-card__title { font-size: var(--fs-h3); font-weight: 300; line-height: 1.5; margin-bottom: 12px; transition: color .2s var(--ease); }
.post-card__date { margin-top: auto; padding-top: 22px; font-size: var(--fs-xs); color: var(--ink-500); transition: color .2s var(--ease); }
.post-card__tag { transition: color .2s var(--ease), background .2s var(--ease); }
a.post-card:hover .post-card__title { color: var(--accent-600); }
a.post-card:hover .post-card__tag { background: #E6E2DA; color: var(--ink-900); }
a.post-card:hover .post-card__date { color: var(--ink-900); }
a.post-card::after {
  content: ''; position: absolute; right: 0; bottom: 35px;
  width: 8px; height: 8px;
  border-right: 1.5px solid var(--ink-900); border-top: 1.5px solid var(--ink-900);
  transform: translateX(-5px) rotate(45deg);
  opacity: 0; pointer-events: none;
  transition: opacity .22s var(--ease), transform .22s var(--ease);
}
a.post-card:hover::after { opacity: 1; transform: translateX(0) rotate(45deg); }

/* ── 10. 푸터 ─────────────────────────────────────────────────────── */
/* 푸터 — 한 단 내려간 옅은 회색 면(#F2F1ED)이 '끝' 신호. 더 진하면 색면이 하나 더 생긴 듯 보임.
   앰버 띠(#F4A638 = --brand-amber)는 로고가 아니라 브랜드 액센트 근거로 유지 — 로고와 안 맞는다고 지우지 말 것.
   사이트에서 앰버를 쓰는 곳은 여기뿐(도식의 #D9A24E 는 다른 뜻) */
.foot {
  margin-top: 0;
  border-top: 14px solid var(--brand-amber);
  /* 바로 위가 --paper 라 푸터는 --bg — 같은 값이면 바닥이 안 내려앉음 */
  background: var(--bg);
  padding: 72px 0 48px;
  font-size: 15px; font-weight: 300; line-height: 1.7; color: var(--ink-500);
}
.foot :where(p, a, li, h3, address) { font-size: 15px; font-weight: 300; }
.foot__inner { display: grid; grid-template-columns: 1fr auto; gap: 40px; align-items: stretch; }
.foot__label { font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ink-500); text-transform: uppercase; }
.foot__addr { font-style: normal; margin-top: 18px; }
.foot__line { margin: 0; }
.foot__line a:hover, .foot__col a:hover { color: var(--ink-900); }
.foot__sns { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; }
.foot__sns svg { width: 20px; height: 20px; }
.foot__logo { display: block; margin-top: 40px; }
.foot__logo img { width: 172px; height: auto; opacity: .85; }
.foot__policy { display: flex; gap: 18px; margin-top: 22px; }
.foot__policy a { font-size: 13px; }
/* 푸터에서 굵기가 다른 유일한 글자 — 이유는 README §1-2 · §6 */
.foot__policy-em { font-weight: 600; }
.foot__side { display: flex; flex-direction: column; padding-left: 40px; border-left: 1px solid rgba(0,0,0,.13); }
.foot__cols { display: flex; gap: 56px; }
.foot__col ul { margin-top: 18px; }
.foot__col .ext { display: inline-block; width: 11px; height: 11px; margin-left: 5px; vertical-align: -1px; opacity: .6; }
/* 맨 위로 — 앵커 하나(scroll-behavior: smooth, §1). 대상은 <body id="top"> — #gnb 는 고정 위치라 안 됨 */
.foot__top {
  align-self: flex-end; margin-top: auto;
  display: inline-flex; align-items: center; gap: 8px;
  height: 38px; padding: 0 16px;
  border: 1px solid var(--line-hi);
  font-size: 11px; font-weight: 600; letter-spacing: .14em; color: var(--ink-500);
  transition: border-color .18s var(--ease), color .18s var(--ease);
}
.foot__top:hover { border-color: var(--ink-900); color: var(--ink-900); }
.foot__top svg { width: 11px; height: 11px; }

.foot__copy { margin-top: 24px; text-align: right; font-size: 13px; color: #A5A29C; }

/* ── 11. 반응형 ─────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .schema, .biz, .decl, .rnd, .howto { padding-top: 116px; padding-bottom: 88px; }
  .concept__grid { grid-template-columns: repeat(3, 1fr); }
  .howto__layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
  /* min-width:0 필수 — 없으면 탭 띠 내용 폭만큼 페이지가 옆으로 넘침 */
  .howto__side { position: sticky; top: var(--header-h); z-index: 5; background: var(--bg); margin-top: 0; padding-top: 0; min-width: 0; max-width: 100%; }
  /* 헤더가 숨으면(.gnb--hidden) 띠도 맨 위로 — 안 그러면 헤더 자리로 본문이 비침 */
  .gnb--hidden ~ main .howto__side { top: 0; }
  .howto__side { transition: top .25s var(--ease); }
  .howto__tabs-label { position: static; line-height: 1.5; padding: 10px 0 0; margin-bottom: 4px; }
  .howto__tabs { display: flex; overflow-x: auto; border-top: 0; border-bottom: 1px solid var(--line); }
  .howto__tabs li + li { margin-left: 8px; }
  .howto__tab { grid-template-columns: 1fr; gap: 2px; padding: 12px 14px; border-bottom: 0; box-shadow: inset 0 -2px 0 transparent; white-space: nowrap; }
  .howto__tab:not(.is-on) .howto__tab-name { opacity: .55; }
  .howto__tab.is-on { box-shadow: inset 0 -2px 0 var(--ink-900); }
  .howto__panels { border-top: 0; }
  .lede { padding-bottom: 64px; }
  /* ⚠ 위 여백 손잡이 150px 은 **넓은 화면용**입니다(.lede 기본 규칙).
     좁은 화면에서는 글이 짧아 세로 가운데 정렬과 겹치며 위쪽이 화면 절반쯤 비어 버립니다.
     넓은 화면 값을 고치실 때 이 줄은 같이 안 고쳐도 됩니다 — 여기가 위쪽 여백의 전부입니다 */
  .lede { padding-top: calc(var(--header-h) + 40px); }
  .areas { margin-top: 48px; }
  .bizrow { grid-template-columns: repeat(3, 1fr); gap: 40px 32px; }
  .postrow { grid-template-columns: 1fr; gap: 40px; }
  .closing { margin-top: 96px; }

  .schema .sflow, .schema .sfimg { margin-top: 52px; }

}
@media (max-width: 900px) {
  /* 좁은 화면에서는 원본 도식을 버리고 흐름도만 — .sfswitch 기본 규칙보다 뒤에 있어야 먹음 */
  .sfswitch { display: none; }
  .headrow { position: static; padding-right: 0; }
  .headrow__more { position: static; transform: none; margin-top: 16px; }
  /* 모바일 드로어 — A안(style-dark.css §12)과 같은 방식 */
  .gnb__menu, .gnb__cta, .gnb__lang { display: none; }
  .gnb__toggle { display: block; }
  .gnb.is-open .gnb__menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    position: absolute; left: 0; right: 0; top: var(--header-h);
    background: var(--paper); border-bottom: 1px solid var(--line);
    padding: 12px var(--gutter) 24px;
  }
  .gnb.is-open .gnb__menu a { padding: 14px 0; border-bottom: 1px solid var(--line); font-size: var(--fs-body); }
  .gnb.is-open .gnb__cta { display: block; }
  /* 드로어 안에서는 언어를 한 줄로 펼쳐 둡니다(hover 가 없으니 메뉴를 늘 열어 둠) */
  .gnb.is-open .gnb__lang { display: block; margin-top: 12px; }
  .gnb.is-open .gnb__lang-btn { display: none; }
  .gnb.is-open .gnb__lang-menu { position: static; display: flex; gap: 8px; min-width: 0; margin: 0; padding: 0; border: 0; box-shadow: none; opacity: 1; transform: none; pointer-events: auto; background: none; }
  .gnb.is-open .gnb__lang-menu::before { display: none; }
  .gnb.is-open .gnb__menu .gnb__lang-menu a { flex: 1; justify-content: center; padding: 12px 0; border: 1px solid var(--line); font-size: var(--fs-sm); }
  .gnb.is-open .gnb__menu .gnb__lang-menu a[aria-current] { border-color: var(--ink-900); }
}
@media (max-width: 760px) {
  :root { --gutter: 20px; }
  /* 좁은 화면에서는 줄 맞춤 끔 — main.js 의 값(760)과 같아야 함, 두 벌 */
  .lede__line { white-space: normal; font-size: clamp(26px, 8.4vw, 44px); }
  .lede__foot { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 32px; }
  .hero__btn { min-width: 0; width: 100%; }
  .lede__title { line-height: 1.2; letter-spacing: -.035em; }
  /* 좁은 화면에서는 곡선을 한 단 더 낮춤 — 세로로 잘리며 선이 글자 뒤로 들어옴 */
  .lede__bg { opacity: .55; }
  /* 좁은 화면에서는 nowrap 을 풀고 크기는 clamp 가 맡음(main.js 도 같은 폭에서 손을 뗌) */
  .lede__line { white-space: normal; font-size: clamp(26px, 8.4vw, 44px); }
  .lede__foot { flex-direction: column; align-items: stretch; gap: 10px; margin-top: 32px; }
  .hero__btn { min-width: 0; width: 100%; }
  .lede__title { line-height: 1.2; letter-spacing: -.035em; }
  /* 좁은 화면에서는 곡선을 한 단 더 낮춤 — 세로로 잘리며 선이 글자 뒤로 들어옴 */
  .lede__bg { opacity: .55; }

  .schema, .biz, .decl, .rnd, .howto { padding-top: 88px; padding-bottom: 64px; }
  .bizrow { grid-template-columns: repeat(2, 1fr); gap: 40px 24px; }
  .concept__grid { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
  .concept__global { padding: 28px 20px 32px; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); }
  .glossary-layer { padding: 0; align-items: stretch; }
  .glossary-layer__panel { max-width: none; max-height: none; border-radius: 0; }
  .glossary-layer__head { padding: 20px var(--gutter) 14px; }
  .glossary-layer__list { padding: 4px var(--gutter) 16px; }
  .concept__lead { margin-top: 40px; }
  .howto__layout { margin-top: 48px; }
  .lede__sub { font-size: 15.5px; }
  .br-pc { display: none; }
  .sfscroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sfsvg { min-width: 880px; }
  .foot__inner { grid-template-columns: 1fr; }
  .foot__side { padding-left: 0; border-left: 0; border-top: 1px solid rgba(0,0,0,.13); padding-top: 34px; }
  .foot__top { align-self: flex-start; margin-top: 30px; }
  .foot__copy { text-align: left; }
}
@media (max-width: 520px) {
  .bizrow { grid-template-columns: 1fr; gap: 44px; }
  .biz-card__art { margin-left: 0; }
  .concept__grid { grid-template-columns: 1fr; }
}

/* ── 12. 좁은 화면 탭 타깃 44px ──────────────────────────────────────────
   글자 크기는 건드리지 않고 누를 면적만 넓힘 — 세로로 쌓인 것은 min-height:44px + flex, 이웃 없는 것은 margin-top 으로 자리 보존.
   투명 판(::after)은 이웃 없는 로고에만. 경계 900px 은 §11 모바일 메뉴와 같은 선 — 한쪽만 옮기지 말 것.
   이 묶음은 파일 맨 끝에 있어야 함. 본문 속 인라인 링크는 일부러 제외
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {

  /* 푸터 메뉴 — 18px 을 44 로. 푸터가 약 110px 길어지지만 누를 수 있는 것이 먼저 */
  .foot__col li a { display: flex; align-items: center; min-height: 44px; }

  /* 대표전화 · 이메일 — 눌러서 거는 링크입니다. 줄 자체가 목표물이 됩니다. */
  .foot__line a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 아래 넷은 위아래로 붙은 이웃이 없어 늘린 만큼 margin 을 뺍니다 */
  .foot__sns    { min-height: 44px; margin-top: 13px; }   /* 22 - (44-26)/2 ≈ 13 */
  .foot__logo   { display: flex; align-items: center; min-height: 44px; margin-top: 29px; }  /* 40 - (44-22)/2 = 29 */
  .foot__policy { margin-top: 11px; }                      /* 22 - (44-22)/2 = 11 */
  .foot__policy a { display: inline-flex; align-items: center; min-height: 44px; }

  /* 맨 위로 — 38px 로 박혀 있었습니다 */
  .foot__top { height: 44px; }

  /* 헤더 로고 — 투명 판으로만 넓힘. padding 금지 — .gnb__logo-light 가 inset:0 이라 흰 로고가 커짐 */
  .gnb__logo::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; transform: translateY(-50%); height: 44px;
  }

  /* 대문 '전체 보기' — 900 이하에서 이미 static 으로 내려와 있습니다(§11) */
  .headrow__more { min-height: 44px; margin-top: 7px; }    /* 16 - (44-24.5)/2 ≈ 7 */
}

/* ── 13. 좁은 화면 최소 글자 크기 12px ─────────────────────────────────────
   12px 미만을 전부 기존 단계 --fs-xs(12px)로 올림 — px 직접 쓰지 말 것, 9번째 크기 만들지 말 것.
   좁은 화면(≤900px, §12 와 같은 선)에서만. 데스크톱의 10·10.5·11px 은 미결. .sr-only 는 제외
   ────────────────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  /* 대문 흐름도 — 이 폭에서는 칸이 한 열로 펴져(§11) 글자가 커져도 자리가 넉넉합니다 */
  .sfn__stereo { font-size: var(--fs-xs); }   /* 10   → 12 */
  .sfa em      { font-size: var(--fs-xs); }   /* 10.5 → 12 */
  .pledge__tag { font-size: var(--fs-xs); }   /* 11   → 12 */

  /* 푸터 — 전 페이지 공통 */
  .foot__label { font-size: var(--fs-xs); }   /* 11   → 12 */
  .foot__top   { font-size: var(--fs-xs); }   /* 11   → 12 */
}