/* ============================================================================
   스튜디오 상세 페이지 공통 뼈대 (2026-09-22)

   운영자 지시: "Venture와 Programs의 톤앤매너나 폰트 같은 부분은 통일성 있게
   가자." 같은 회사의 두 부서다. 메인에서 갈라져 들어왔다가 돌아 나올 때
   다른 회사로 느끼면 안 된다.

   그래서 뼈대는 하나로 두고 차이는 액센트 색과 사진과 문장 길이가 지게 한다.
   페이지는 자기 액센트만 --ac 로 덮어쓴다.

   ★ 메인페이지와 달리 스크롤 애니메이션이 없다(운영자 지시). 읽는 페이지다.
   ★ 히어로만 메인과 같은 남색이다. 넘어올 때 끊기지 않는다.
   ============================================================================ */

:root {
  /* 메인 A안에서 그대로 가져온다 */
  --ink:       #0A1628;   /* 메인의 배경색을 여기서는 글자색으로 뒤집어 쓴다 */
  --ink-2:     #475569;
  /* ★ 흰 배경 대비 4.76:1. 이전 값 #94A3B8 은 2.56:1 로 WCAG AA(4.5:1)의 절반이었고
     이 색을 쓰는 12px 글씨가 세 페이지에 54곳 있었다. --ink-2(#475569)와는
     밝기가 갈려 3단 위계는 그대로 남는다. */
  --ink-3:     #64748B;
  --bg:        #FFFFFF;
  --bg-2:      #F8FAFC;
  --line:      #E2E8F0;
  --line-2:    #F1F5F9;

  /* ★ 액센트는 배경마다 값을 나눈다. 밝은 배경에서 읽히는 값과 어두운
     배경에서 읽히는 값이 같을 수 없다. 페이지가 :root 에 흰 배경용을 두고
     .hero 에 어두운 배경용을 덮어쓴다. 히어로 안 요소는 상속으로 따라온다. */
  --ac:        #157F53;   /* 흰 배경 기준. 페이지가 덮어쓴다 */
  --ac-ink:    #FFFFFF;

  --max:       1200px;
  --gut:       24px;
  --r:         12px;

  --font: 'Pretendard', 'Pretendard Variable', system-ui, -apple-system, sans-serif;
  --font-en: 'Inter', var(--font);

  /* ★ 모션 토큰 (2026-09-27, web-motion.md). 시간 4단계 + 곡선 3종만 쓴다.
     등장은 enter, 퇴장은 exit, 자리 이동은 move. 장면 전환처럼 길어야 하는
     것은 slow 의 배수로 쓰고 곡선은 토큰을 그대로 쓴다. */
  --duration-press: 100ms;
  --duration-fast:  150ms;
  --duration-base:  220ms;
  --duration-slow:  320ms;
  --ease-enter: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-exit:  cubic-bezier(0.4, 0, 1, 1);
  --ease-move:  cubic-bezier(0.65, 0, 0.35, 1);

  /* ★ 글자 크기 척도 7단계 (C4). 새 규칙은 이 값만 쓴다.
     예외: 13px 은 UI 전용(태그·표지·상단바 버튼). 상단바는 390px 폭에서
     13px 기준으로 한 줄에 맞춘 실측이 있다. 큰 제목은 clamp 로 두 단계 사이를 잇는다. */
  --fs-1: 12px; --fs-2: 14px; --fs-3: 16px; --fs-4: 20px;
  --fs-5: 28px; --fs-6: 40px; --fs-7: 56px;

  /* ★ 구역 간격 두 단계 (C3) */
  --sec-y: 96px;
  --sec-y-lg: 144px;
}

* { box-sizing: border-box; }
/* hidden 속성이 display 규칙에 지지 않게 한다 (빈 소식 구역 숨김 등) */
[hidden] { display: none !important; }

html { scroll-behavior: smooth; scroll-padding-top: 120px; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.7;
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: inherit; }

.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding: 0 var(--gut); }

/* ─ 상단바 ─────────────────────────────────────────────────────────────────
   ★ 한 줄이다 (2026-09-22 개편). 왼쪽에 로고, 오른쪽에 섹션 메뉴와
   스튜디오 전환과 문의 버튼을 몰아 둔다.

   전에는 두 줄이었고 위 줄에 Venture·Programs 둘을 나란히 뒀다. 그런데
   보고 있는 페이지의 이름을 다시 보여줄 이유가 없다. 지금 있는 곳 말고
   갈 수 있는 곳 하나만 둔다. 벤처에서는 프로그램, 프로그램에서는 벤처다. */

/* ★ --top-h 는 히어로가 "헤더 아래부터 화면 끝까지"를 계산할 때만 쓴다.
   헤더 자신의 높이 지정에 쓰지 않는다.

   한 번 그렇게 만들었다가 되먹임 고리를 만들었다(2026-09-22). JS 가 헤더를
   재서 --top-h 에 넣는데 .top__row{min-height:var(--top-h)} 가 그 값을 쓰자,
   헤더가 커지고 → 다시 재고 → 더 커지기를 반복해 798px 까지 갔다.
   헤더 높이는 아래 --top-row-h 로 따로 둔다. */
:root { --top-h: 64px; --top-row-h: 64px; }

/* ★ 히어로 위에서는 투명, 지나가면 흰 배경 (2026-09-22 운영자 지시).
   첫 화면이 히어로 하나로 읽히게 하려는 것이다. 헤더가 처음부터 흰 띠로
   있으면 히어로가 화면 전체를 쓰는 의미가 반감된다.

   ★ 기본을 solid 로 둔다. 스크립트가 막히거나 히어로가 없는 페이지에서도
   글자가 읽혀야 한다. 투명은 JS 가 .top--over-hero 를 붙였을 때만이다.
   반대로 짜면(기본 투명 + JS 가 solid 부여) 스크립트 실패 시 흰 배경에
   흰 글자가 남는다. */
.top {
  position: sticky; top: 0; z-index: 50;
  /* ★ .92 면 스크롤할 때 뒤 히어로의 남색이 비쳐 내비 글자 대비가 기준 아래로
     떨어진다. .97 로 올려도 흐림 효과 덕에 떠 있는 느낌은 그대로다. */
  background: rgba(255,255,255,.97);
  backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid var(--line);
  transition: background-color var(--duration-base) var(--ease-enter), border-color var(--duration-base) var(--ease-enter);
}

/* 히어로 위에 떠 있는 상태 */
.top--over-hero {
  background: transparent;
  border-bottom-color: transparent;
  backdrop-filter: none;
}
/* ★ 히어로 위 어두운 구간에서만 흰 로고로 바꾼다 (운영자 질문 2026-09-22
   "화이트바일때 앤드원 로고 색이 흑색인 이유는 뭐야?").
   전에는 흰 로고 한 장을 filter: brightness(0) 으로 뒤집어 썼는데, 그러면
   심볼 오른쪽 획의 그린까지 검정이 됐다. 두 장을 겹쳐 두고 배경에 맞춰
   고른다. */
.top--over-hero .top__logo-c { display: none; }
.top--over-hero .top__logo-w { display: inline-block; }
.top--over-hero .top__nav a,
.top--over-hero .top__switch { color: rgba(255,255,255,.84); }
.top--over-hero .top__nav a:hover,
.top--over-hero .top__switch:hover { color: #fff; }
@media (max-width: 900px) {
  .top--over-hero .top__nav { border-top-color: rgba(255,255,255,.18); }
}
.top__row {
  display: flex; align-items: center; gap: 20px;
  min-height: var(--top-row-h);   /* ★ --top-h 를 쓰지 않는다. 위 주석 참조 */
  flex-wrap: wrap;
}
.top__logo { display: inline-flex; align-items: center; flex: none; }
.top__logo img { height: 22px; width: auto; }
.top__logo-w { display: none; }

/* 섹션 메뉴 — 오른쪽 묶음의 첫 요소. margin-left:auto 로 밀어 붙인다 */
.top__nav {
  margin-left: auto;
  display: flex; align-items: center; gap: 24px;
  overflow-x: auto; scrollbar-width: none;
}
.top__nav::-webkit-scrollbar { display: none; }
/* ★ 손가락으로 누르는 곳은 44px 을 채운다. 글자는 14px 이지만 위아래
   여백으로 누르는 칸을 넓힌다. 눈에 보이는 크기는 그대로다. */
.top__nav a {
  display: inline-flex; align-items: center;
  min-height: 44px;
  font-size: 14px; font-weight: 500; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-enter);
}
.top__nav a:hover { color: var(--ac); }

/* 스튜디오 전환 — 맨 오른쪽 끝 (2026-09-22 운영자 지시로 문의 버튼과 순서 교체).
   ★ 세로 구분선을 없앴다. 전에는 메뉴와 버튼 묶음을 가르는 선이었는데,
   순서가 바뀌면서 문의 버튼 뒤에 붙어 무엇을 가르는지 알 수 없게 됐다.
   초록 알약 버튼이 이미 시각적 경계 역할을 한다. */
.top__switch {
  flex: none;
  display: inline-flex; align-items: center; gap: 5px;
  min-height: 44px;
  font-size: 14px; font-weight: 600; color: var(--ink-2);
  text-decoration: none; white-space: nowrap;
  transition: color var(--duration-fast) var(--ease-enter);
}
.top__switch:hover { color: var(--ac); }
.top__switch::after { content: '→'; font-size: 13px; }

/* ★ 2026-09-27 운영자 요청: 다른 스튜디오로 가는 링크를 다른 메뉴와 구분한다.
   ① 섹션 메뉴 끝에 짧은 세로선 — "이 페이지 안"과 "다른 곳으로"를 가른다.
   ② 전환 링크는 도착할 스튜디오 색의 알약 — 누르기 전에 어디로 가는지 보인다.
   색만 바꾸면 흰 헤더와 어두운 히어로에서 대비가 흔들리고, 알약만 쓰면 문의 버튼처럼
   보여서 둘을 함께 쓴다. 색은 각 페이지 <style>의 대비 실측값을 그대로 옮겼다.
   누르는 칸은 44px 그대로, 알약은 ::before 로 34px 만 그린다. */
.top__nav::after {
  content: ''; flex: none; align-self: center;
  width: 1px; height: 18px; background: var(--line);
}
.top--over-hero .top__nav::after { background: rgba(255,255,255,.28); }
.top__switch[href^="venture"]  { --to: #157F53; --to-hero: #2DB87C; }
.top__switch[href^="programs"] { --to: #0F766E; --to-hero: #14B8A6; }
.top__switch[href^="venture"],
.top__switch[href^="programs"] {
  position: relative; padding: 0 14px;
  isolation: isolate;          /* ::before(z-index:-1)이 헤더 배경 뒤로 숨지 않게 */
  color: var(--to);
}
.top__switch[href^="venture"]::before,
.top__switch[href^="programs"]::before {
  content: ''; position: absolute; z-index: -1;
  left: 0; right: 0; top: 50%; height: 34px; transform: translateY(-50%);
  border: 1px solid color-mix(in srgb, var(--to) 55%, transparent);
  border-radius: 999px;
  background: color-mix(in srgb, var(--to) 7%, transparent);
  transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}
.top__switch[href^="venture"]:hover,
.top__switch[href^="programs"]:hover { color: #fff; }
.top__switch[href^="venture"]:hover::before,
.top__switch[href^="programs"]:hover::before { background: var(--to); border-color: var(--to); }
/* 어두운 히어로 위 */
.top--over-hero .top__switch[href^="venture"],
.top--over-hero .top__switch[href^="programs"] { color: var(--to-hero); }
.top--over-hero .top__switch[href^="venture"]::before,
.top--over-hero .top__switch[href^="programs"]::before {
  border-color: color-mix(in srgb, var(--to-hero) 60%, transparent);
  background: color-mix(in srgb, var(--to-hero) 12%, transparent);
}
.top--over-hero .top__switch[href^="venture"]:hover,
.top--over-hero .top__switch[href^="programs"]:hover { color: var(--ink); }
.top--over-hero .top__switch[href^="venture"]:hover::before,
.top--over-hero .top__switch[href^="programs"]:hover::before { background: var(--to-hero); border-color: var(--to-hero); }
.top__switch:focus-visible { outline: 2px solid var(--to, var(--ac)); outline-offset: 2px; border-radius: 999px; }
@media (max-width: 900px) {
  .top__nav::after { display: none; }   /* 좁은 화면은 메뉴가 둘째 줄로 내려가 선이 뜻을 잃는다 */
}

.top__cta {
  flex: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 40px; padding: 0 18px; border-radius: 999px;
  background: var(--ac); color: var(--ac-ink);
  font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: opacity var(--duration-fast) var(--ease-enter);
}
/* 로고도 누르는 칸을 채운다 (홈으로 가는 링크다) */
.top__logo { min-height: 44px; }
.top__cta:hover { opacity: .88; }

/* 좁아지면 메뉴만 아래 줄로 내린다. 로고와 전환·문의는 위에 남는다.
   한 줄에 욱여넣으면 글자가 서로 붙어 읽히지 않는다. */
@media (max-width: 900px) {
  /* ★ 메뉴가 둘째 줄로 내려가므로 헤더가 그만큼 높아진다. 히어로의
     min-height 계산이 이 값을 쓰므로 함께 올린다. 정확한 값은 JS 가
     실측해 덮어쓴다(studio.js measureHeader). 여기 값은 그 전까지와
     스크립트가 막혔을 때 쓰는 근사값이다. */
  :root { --top-h: 104px; }
  .top__row { padding-bottom: 10px; gap: 14px; }
  .top__nav {
    order: 3; width: 100%; margin-left: 0;
    gap: 20px; padding-top: 4px;
    border-top: 1px solid var(--line-2);
    /* ★ 메뉴가 화면보다 길면 마지막 글자가 중간에 잘려 오타처럼 보인다.
       오른쪽 끝 18px 만 흐려 "옆으로 더 있다"로 읽히게 한다.
       글자 자체를 흐리는 것이 아니라 가장자리만 걸리므로 대비는 유지된다. */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 18px), transparent);
  }
  /* ★ 순서가 로고 → 문의 → 전환이므로 문의 버튼이 오른쪽 묶음의 첫 요소다.
     여기에 auto 를 줘야 둘이 함께 오른쪽에 붙는다. 전환에 주면 문의만
     왼쪽에 남아 로고 옆에 떨어진다. */
  .top__cta { margin-left: auto; }
  /* ★ 문의 버튼을 뺀 뒤(2026-09-23) 전환 버튼이 로고 옆에 붙어 있었다.
     문의가 없을 때는 전환 버튼이 스스로 오른쪽 끝으로 간다
     (운영자 지적 2026-09-29). 문의가 있으면 위 규칙대로 둘이 함께 붙는다. */
  .top__switch { margin-left: auto; }
  .top__cta ~ .top__switch { margin-left: 0; }
}

/* ─ 히어로 ──────────────────────────────────────────────────────────────── */

/* ★ 헤더 아래부터 화면 끝까지 채운다 (2026-09-22). 전에는 고정 여백만
   있어 화면 절반쯤에서 끝났고, 첫 화면에 히어로와 다음 섹션이 함께 보여
   무엇이 이 페이지의 첫 메시지인지 흐렸다.

   ★ 100vh 가 아니라 100svh 다. 모바일 브라우저는 주소창이 나타났다
   사라지며 100vh 가 흔들려 내용이 위아래로 튄다. svh 는 주소창이 보이는
   상태로 고정이라 튀지 않는다. */
.hero {
  background: var(--ink);
  color: #fff;
  /* ★ 헤더 뒤로 올라온다 (2026-09-22). 헤더를 투명하게 만들어도 그 자리에
     히어로가 없으면 흰 페이지 배경이 그대로 보인다(실측). 음수 margin 으로
     헤더 높이만큼 끌어올리고 같은 값을 padding 으로 되돌려 내용 위치는
     그대로 둔다. 헤더가 sticky 라 문서 흐름에 자리가 있어 이 방식이 통한다. */
  margin-top: calc(-1 * var(--top-h));
  padding-top: calc(var(--top-h) + 56px);
  /* ★ 어두운 배경 위 액센트는 밝은 값을 쓴다 (2026-09-22 실측).
     흰 배경용 --ac(#157F53)를 그대로 쓰면 13px 라벨이 ::after 그라데이션이
     가장 짙은 곳에서 3.79:1 이 되어 기준(4.5:1)에 못 미친다.
     ★ 처음에는 "그라데이션 중심이 오른쪽 위라 왼쪽 라벨엔 안 닿는다"고
     넘겼는데, 중심까지 정규화 거리를 재니 0.48 로 반경 안이었다. 추정으로
     넘기지 않고 재야 갈린다. --ac-hero 는 각 페이지가 정한다. */
  --ac: var(--ac-hero, #34D399);
  /* 이제 헤더를 덮으므로 화면 전체다. 빼지 않는다. */
  min-height: 100svh;
  display: flex; flex-direction: column; justify-content: center;
  padding-bottom: 96px;
  position: relative; overflow: hidden;
}
/* 은은한 빛 하나. 사진 없이도 평면으로 보이지 않게. */
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 80% at 78% 18%, color-mix(in srgb, var(--ac) 22%, transparent), transparent 70%),
    radial-gradient(50% 60% at 10% 90%, rgba(255,255,255,.05), transparent 70%);
}

/* ─ 히어로 배경 사진 ─────────────────────────────────────────────────────
   ★ 사진은 studio.js 가 data-hero-bg 를 읽어 넣는다. CSS 에 경로를 박지
   않는 이유는 ERP 에서 갈아끼울 것이기 때문이다. 속성만 바꾸면 된다.

   ★ 사진이 안 왔거나 못 읽어도 화면이 비지 않는다. .hero 의 남색 배경이
   그대로 바닥에 남고 그 위에 그늘만 얹힌다. */
/* ★ 선택자를 `.hero > .hero__bg` 로 둔다. 아래 `.hero > *` 가
   `position: relative; z-index: 1` 을 주는데 명시도가 같으면 뒤에 오는
   그쪽이 이긴다. 실제로 그렇게 되어 absolute 가 relative 로 덮이고
   inset:0 이 무의미해져 높이가 0 이 됐다(실측 1440x0). 사진이 깔렸는데도
   화면에 아무것도 없었고, 배경 URL 은 정상이라 경로를 의심하기 쉬웠다. */
.hero > .hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: no-repeat center center / cover;
  pointer-events: none;
}
/* 여러 장을 돌릴 때 위에 겹치는 판. JS 가 만들어 넣는다.
   ★ z-index 를 주지 않는다. 주면 그늘(.hero__bg::after)보다 위로
   올라와 사진이 그늘 없이 보이고 글자가 안 읽힌다. 가상 요소는 자식
   요소보다 뒤에 그려지므로 둘 다 auto 로 두면 순서가 맞는다. */
.hero__bg-layer {
  position: absolute; inset: 0;
  background: no-repeat center center / cover;
  opacity: 0;
  transition: opacity calc(var(--duration-slow) * 3) var(--ease-enter);
}
@media (prefers-reduced-motion: reduce) {
  .hero__bg-layer { transition: none; }
}
/* 글자가 왼쪽에 있으므로 왼쪽을 더 눌러 읽히게 한다. 오른쪽은 사진이
   살아 있어야 배경을 깐 뜻이 산다. 위쪽 띠는 헤더 글자용이다.

   ★ 밝히는 방향을 오른쪽으로 한정한다. 전체를 고르게 걷으면 글자 뒤
   배경까지 밝아져 대비가 무너진다. 실측으로 확인했다. 고르게 걷은 안은
   제목 대비가 2.86:1 로 기준 3:1 에 미달했고, 왼쪽을 그대로 두고 오른쪽
   끝만 .5 에서 .22 로 걷으니 4.67:1 로 통과하면서 공장·전시장이 보였다.

   ★ 대비는 글자가 실제로 앉는 자리에서 잰다. 제목 상자는 블록이라 화면
   폭 전체인데 글자 획은 왼쪽에만 있다. 상자로 재면 글자 없는 오른쪽
   배경까지 잡혀 멀쩡한 안이 미달로 나온다(같은 화면이 5.07 대 6.47 로
   갈렸다). Range.getClientRects 로 줄 단위 실제 폭을 받아 잰다. */
.hero--photo .hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(100deg,
      rgba(8,18,33,.93) 0%, rgba(8,18,33,.86) 40%,
      rgba(8,18,33,.5) 72%, rgba(8,18,33,.22) 100%),
    linear-gradient(180deg, rgba(8,18,33,.55) 0%, transparent 26%);
}
/* ★ 휴대폰에서는 사진이 세로 화면을 채우느라 가로 폭의 4분의 1만 보인다.
   왼쪽 기준으로 두면 사람 없는 짐상자만 남아 무엇을 찍었는지 알 수 없었다
   (운영자 지적 2026-09-29 "사진 자체가 안 보인다"). 사진마다 사람이 있는
   가로 위치로 옮기고, 왼쪽을 누르던 그늘을 위아래 방향으로 바꿔 윗부분
   사진이 보이게 한다. 글자는 화면 가운데 아래에 앉으므로 그 아래를 누른다. */
/* ★ 2차(같은 날 운영자 "이상한데 방법 없나"): 글자 뒤에 사진을 깔면
   글자를 읽히게 하려고 사진을 눌러야 해서 둘 다 어정쩡했다. 휴대폰에서는
   사진을 화면 위쪽 58%에만 깔고 글자는 그 아래 남색 바탕에 둔다. 사진은
   그늘 없이 보이고 글자는 바탕 대비로 읽힌다. 사진이 차지하는 칸이
   세로로 덜 길어져 가로 폭도 절반 가까이 보인다. */
@media (max-width: 760px) {
  .hero--photo { justify-content: flex-end; padding-bottom: 104px; }
  .hero--photo > .hero__bg { bottom: 36%; }
  .hero__bg[data-hero-studio="venture"],
  .hero__bg[data-hero-studio="venture"] .hero__bg-layer { background-position: 58% center !important; }
  .hero__bg[data-hero-studio="programs"],
  .hero__bg[data-hero-studio="programs"] .hero__bg-layer { background-position: 40% center !important; }
  .hero--photo .hero__bg::after {
    background: linear-gradient(180deg,
      rgba(8,18,33,.78) 0%, rgba(8,18,33,.35) 16%, rgba(8,18,33,0) 30%,
      rgba(8,18,33,0) 72%, rgba(8,18,33,1) 100%);
  }
  .hero.hero--photo > .hero__dots { bottom: calc(36% + 14px); }
}
/* 사진 위에서는 빛 효과를 줄인다. 그대로 두면 사진과 겹쳐 탁해진다. */
.hero--photo::after { opacity: .3; }
.hero > * { position: relative; z-index: 1; }
.hero__eyebrow {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 600; letter-spacing: .14em;
  color: var(--ac); text-transform: uppercase;
  margin: 0 0 20px;
}
/* 화면을 다 쓰므로 글자를 키운다. 상한 52 -> 62 */
.hero__title {
  margin: 0;
  font-size: clamp(32px, 4.8vw, 62px);
  line-height: 1.3; font-weight: 800; letter-spacing: -.025em;
}
.hero__title em { font-style: normal; color: var(--ac); }

/* ★ 영문 헤드라인 (2026-09-22 운영자 지시로 카피를 줄이면서 신설).
   짧은 영문을 크게 두고 한글 한 줄이 바로 아래에서 뜻을 받는다.
   스파크랩·theilab 둘 다 이 구조다.

   ★ 한글을 서브(.hero__sub)로 내리지 않는다. 그러면 19px 이라 영문
   장식에 한글 설명이 딸린 것처럼 보인다. 우리 독자는 한국 발주기관과
   창업자라 한글이 문장의 주인이어야 한다. */
/* ★ 2026-09-23 운영자 지시로 80% 로 줄였다. 사진을 배경에 깔면서
   글자가 화면을 너무 덮었다. 상한 76 -> 61, 28 -> 22.

   최소값은 비례로 줄이지 않는다. 34 x 0.8 = 27 은 맞지만 19 x 0.8 =
   15.2 라 한글 부제가 모바일에서 작아진다. 17px 로 둔다. 본문 최소가
   16px 이고 부제는 그보다 커야 한다. */
.hero__title--en {
  font-family: var(--font-en);
  font-size: clamp(27px, 4.5vw, 61px);
  line-height: 1.08;
  letter-spacing: -.02em;
  text-transform: uppercase;
}
.hero__ko {
  margin: 20px 0 0;
  font-size: clamp(17px, 1.8vw, 22px);
  line-height: 1.45; font-weight: 600; letter-spacing: -.02em;
  color: rgba(255,255,255,.92);
  word-break: keep-all;
}

.hero__sub {
  margin: 26px 0 0; max-width: 62ch;
  font-size: clamp(15px, 1.5vw, 19px);
  color: rgba(255,255,255,.76);
}
.hero__meta {
  margin: 38px 0 0; display: flex; flex-wrap: wrap; gap: 10px 28px;
  font-size: 14px; color: rgba(255,255,255,.62);
}
.hero__meta a { color: var(--ac); text-decoration: none; }
.hero__meta a:hover { text-decoration: underline; }

/* 아래로 더 있다는 표시. 장식이 아니라 실제로 다음 섹션으로 가는 링크다.
   ★ 터치 타깃 44px 을 지키려고 보이는 화살표보다 누르는 칸을 넓게 잡았다. */
.hero__down {
  position: absolute; left: 50%; bottom: 26px; transform: translateX(-50%);
  z-index: 2;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,.66);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-enter);
}
.hero__down:hover { color: #fff; }
.hero__down::after {
  content: '';
  width: 13px; height: 13px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translate(-2px, -2px);
  animation: heroDown 1.9s var(--ease-move) infinite;
}
@keyframes heroDown {
  0%, 100% { opacity: .5; transform: rotate(45deg) translate(-4px, -4px); }
  50%      { opacity: 1;  transform: rotate(45deg) translate(1px, 1px); }
}
/* ★ 2026-09-27 (web-motion M2): 한 번 스크롤하면 할 일을 다 했다. 반복을 멈춘다.
   html.is-scrolled 는 studio.js 가 첫 스크롤에 한 번 붙인다. */
.is-scrolled .hero__down::after { animation: none; opacity: .66; }

/* ── 히어로 사진 점 표시 ─────────────────────────────────────────────
   사진이 두 장 이상일 때만 JS 가 만든다. 화살표 바로 위에 둔다.

   ★ 선택자를 `.hero > .hero__dots` 로 둔다. `.hero > *` 가
   `position: relative; z-index: 1` 을 주는데 명시도가 같으면 뒤에 오는
   그쪽이 이긴다. .hero__bg 에서 같은 이유로 높이가 0 이 됐던 적이 있다. */
.hero > .hero__dots {
  position: absolute; left: 50%; bottom: 88px; transform: translateX(-50%);
  z-index: 2;
  display: flex; gap: 2px;
}
/* ★ padding:0 이 있어야 점이 칸 가운데에 온다. button 기본값 1px 6px 가
   남으면 내용 칸이 좁아져 8px 짜리 점이 칸보다 커지고, grid 의 가운데
   정렬이 시작 정렬로 밀린다. 인트로 레일에서 같은 일이 있었다. */
/* ★ 가로를 16px 로 줄였다(운영자 지시 2026-09-23 "간격을 지금의 절반으로").
   점 사이 거리는 버튼 폭에서 오는 여백이 대부분이라 gap 만 줄여서는
   안 좁혀진다. 24px 일 때 점 사이가 21px 이었고 16px + gap 2 로 11px 이 된다.

   ★ 세로는 24px 로 남긴다. 손가락으로 누를 여지를 어느 한 축이라도
   지켜야 한다. 가로를 함께 줄이면 누르기가 힘들어진다. */
.hero__dot {
  position: relative;
  width: 16px; height: 24px; padding: 0;
  border: 0; background: transparent; cursor: pointer;
  display: grid; place-items: center;
}
/* ★ 2026-09-27: 누르는 칸만 세로 44px 로 넓힌다. 가로는 이웃과 겹쳐서 못 넓힌다 */
.hero__dot::before { content: ''; position: absolute; inset: -10px 0; }
/* ★ 비활성은 테두리만, 활성은 채운다(운영자 지시 2026-09-23 "이렇게
   표시하는게 좋음"). 반투명 채움은 배경이 밝으면 묻히고 어두우면
   튀어서 사진마다 다르게 보인다. 테두리는 굵기가 고정이라 배경과
   무관하게 같은 인상이다.

   ★ box-sizing 을 명시한다. 테두리가 크기에 더해지면 활성·비활성이
   1.5px 씩 어긋나 줄이 흔들린다. 이 파일에 전역 border-box 선언이
   없으므로 여기서 건다. */
.hero__dot i {
  box-sizing: border-box;
  width: 7px; height: 7px; border-radius: 50%;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,.72);
  transition: background var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}
.hero__dot:hover i { border-color: #fff; }
.hero__dot[aria-current="true"] i { background: #fff; border-color: #fff; }
.hero__dot[aria-current="true"] { cursor: default; }
@media (prefers-reduced-motion: reduce) {
  .hero__dot i { transition: none; }
}
@media (max-width: 720px) {
  .hero > .hero__dots { bottom: 76px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero__down::after { animation: none; }
}
/* 화면이 낮으면(가로 휴대폰·작은 노트북) 화살표가 글자를 가린다. 숨긴다. */
@media (max-height: 620px) {
  /* ★ padding 축약형을 쓰지 않는다. 위 .hero 의 padding-top 계산
     (헤더 높이 + 여백)이 통째로 지워져 내용이 헤더에 가린다. */
  .hero { min-height: auto; padding-bottom: 64px; }
  .hero__down { display: none; }
}

/* ─ 섹션 ────────────────────────────────────────────────────────────────── */

/* ★ 2026-09-27 (개선안 C3): 구역 간격을 두 단계로 정한다. 기본 96px,
   장이 바뀌는 곳(.sec--chapter)은 위만 144px. 전에는 120·88 이 섞였다. */
.sec { padding: var(--sec-y) 0; }
.sec--tint { background: var(--bg-2); }
.sec--tight { padding: var(--sec-y) 0; }
.sec--chapter { padding-top: var(--sec-y-lg); }

/* ─ 강조 섹션 (포트폴리오) ───────────────────────────────────────────────
   좌우 끝까지 남색을 깔아 흰 섹션들 사이에서 끊어 읽게 한다. 히어로와 같은
   색이라 페이지가 어두움 → 밝음 → 어두움으로 리듬을 갖는다.

   ★ 화려한 배경 효과는 쓰지 않는다. 우리 차단 목록이 막는 것(그라데이션
      발광·빛줄기)을 빼고 나면 남는 것은 질감과 여백이다. 점 격자와 로고
      워터마크 둘만 쓴다. 둘 다 CSS 로 그리므로 파일이 늘지 않는다. */
.sec--feature {
  position: relative;
  overflow: hidden;
  /* ★ 어두운 남색에서 연회색으로 바꿨다(운영자 2026-09-23 "포트폴리오
     배경 밝은게 좋아"). 참고로 본 theilab.kr 도 사례 목록을 밝게 둔다.
     카드 자체가 흰색이라 어두운 바닥 위에서는 카드만 떠 보였는데, 연회색
     위에 두면 카드와 바닥이 같은 계열이라 목록으로 읽힌다.

     ★ 앞뒤 섹션이 흰색이라 연회색만으로 구분된다. 어두움을 썼던 이유가
     "흰 섹션들 사이에서 끊어 읽게" 였는데 그 역할은 --bg-2 도 한다. */
  background: var(--bg-2);
  color: var(--ink-2);
}

/* 점 격자. 24px 간격에 7% 흰색이라 눈에 띄지 않고 바탕이 비어 보이지 않는다.
   가장자리로 갈수록 옅어지게 마스크를 씌워 격자가 잘린 티를 없앤다.
   ★ 2026-09-27 (개선안 C3): 끈다. impeccable 이 AI 템플릿 무늬로 잡았고
   (codex-grid-background), 연회색 바닥만으로 구역이 이미 갈린다. 되돌릴 때는
   아래 display 한 줄만 지운다. */
.sec--feature::before { display: none; }
.sec--feature::before {
  content: '';
  position: absolute; inset: 0;
  /* 밝은 바닥으로 바뀌었으므로 점도 어두운 값이다. .05 는 연회색 위에서
     거의 안 보였고 .08 이 질감으로 읽히는 선이다. */
  background-image: radial-gradient(circle, rgba(15,23,42,.08) 1px, transparent 1px);
  background-size: 26px 26px;
  -webkit-mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
          mask-image: radial-gradient(ellipse 80% 70% at 50% 40%, #000 40%, transparent 100%);
  pointer-events: none;
}

/* 우측 하단 로고 워터마크. 섹션 밖으로 일부 걸쳐 잘리게 두면 배경 무늬로
   읽히고, 안에 다 들어오면 로고를 놓은 것처럼 읽힌다. 전자를 택했다.

   ★ 글자 없이 심볼만 쓴다(운영자 지시 2026-09-22 "앤드원의 A 같이 생긴
   로고만 크게 해줘 뒤에 알파벳은 필요 없으니"). 가로로 긴 전체 로고를
   정사각 자리에 contain 으로 넣으면 실제 심볼이 작게 들어갔다.
   logo-mark.png 는 logo-white.png 에서 심볼만 잘라 낸 것이다(404×329). */
.sec--feature::after {
  content: '';
  position: absolute;
  right: -46px; bottom: 28px;
  width: 460px; height: 374px;
  background: url('logo-mark.png') no-repeat right bottom / contain;
  /* ★ 파일이 흰 로고라 밝은 바닥에서는 안 보인다. brightness(0) 으로
     검게 만들어 쓴다. 색 로고를 따로 두지 않는 이유는 워터마크가 단색일
     때 배경으로 읽히기 때문이다. */
  filter: brightness(0);
  opacity: .05;
  pointer-events: none;
}

/* 제목·리드·수치는 밝은 섹션 기본값을 그대로 쓴다. 어두운 배경용으로
   덮어쓰던 흰색 규칙은 2026-09-23 에 지웠다. */
.sec--feature .stat { border-color: var(--line); }

/* ─ 어두운 변형 (Programs 포트폴리오) ────────────────────────────────────
   ★ Programs 는 캐러셀 연출이 어두운 배경을 전제로 짜여 있다. 카드 그림자,
   화살표 버튼, 점 표시까지 흰색 전제 규칙이 열두 곳이라 함께 밝히려면 그
   연출을 다시 설계해야 한다. Venture 만 밝히고 이쪽은 남긴다
   (운영자 2026-09-23 "포트폴리오 배경 밝은게 좋아"는 Venture 맥락). */
.sec--feature.sec--onink {
  background: var(--ink);
  --ac: var(--ac-dark, #22A06C);
  color: rgba(255,255,255,.72);
}
.sec--feature.sec--onink::before {
  background-image: radial-gradient(circle, rgba(255,255,255,.07) 1px, transparent 1px);
}
.sec--feature.sec--onink::after { filter: none; opacity: .09; }
/* ★ 2026-09-27: 밝은 바닥으로 바뀐 뒤 제목이 본문 회색(--ink-2)을 물려받아
   다른 구역 제목보다 흐렸다. 제목은 먹색으로 맞춘다. */
.sec--feature .sec__title { color: var(--ink); }
.sec--feature.sec--onink .sec__title { color: #fff; }
.sec--feature.sec--onink .sec__lead { color: rgba(255,255,255,.72); }
.sec--feature.sec--onink .stat__v { color: #fff; }
.sec--feature.sec--onink .stat__l { color: rgba(255,255,255,.62); }
.sec--feature.sec--onink .stat { border-color: rgba(255,255,255,.14); }
.sec--feature.sec--onink .btn--ghost { border-color: rgba(255,255,255,.3); color: #fff; }
.sec--feature.sec--onink .btn--ghost:hover { border-color: #fff; }

/* 섹션 안 내용은 배경 위로 올린다 */
.sec--feature > .wrap { position: relative; z-index: 1; }

@media (max-width: 720px) {
  /* 모바일에서는 워터마크가 카드를 침범하므로 줄이고 더 묻는다 */
  .sec--feature::after { width: 190px; height: 190px; right: -28px; bottom: -30px; opacity: .04; }
}

.sec__label {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--ac); text-transform: uppercase;
  margin: 0 0 14px;
}
/* 프로그램 스튜디오는 한글 제목을 쓴다. 발주기관 담당자가 읽는 화면이다. */
.sec__label--ko,
html[lang="ko"] .sec__label {
  font-family: var(--font);
  font-size: 13px; letter-spacing: 0; text-transform: none;
}
.sec__title {
  margin: 0;
  /* ★ 2026-09-27 (개선안 C5): 한 줄 33자까지 늘어나던 제목을 20자 안팎에서
     끊는다. 한글 굵은 글자 한 자가 약 1em 이다. */
  max-width: 21em;
  font-size: clamp(24px, 3vw, 36px);
  line-height: 1.38; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}

/* ★ 2026-09-27 (개선안 C1): 장 번호. 같은 틀의 구역이 이어져도 장이 바뀌는
   곳이 보이게 한다. 번호는 CSS 카운터가 매기므로 HTML 에는 .sec--chapter 만
   붙인다. 언어와 무관하다. */
body { counter-reset: chapter; }
.sec--chapter { counter-increment: chapter; }
.sec--chapter .sec__label::before {
  content: counter(chapter, decimal-leading-zero);
  display: inline-block; margin-right: 10px; padding-right: 10px;
  border-right: 1px solid currentColor;
  font-family: var(--font-en); font-variant-numeric: tabular-nums;
}
.sec__lead {
  margin: 20px 0 0; max-width: 68ch;
  font-size: clamp(15px, 1.4vw, 17px); color: var(--ink-2);
}
.sec__body { margin-top: 56px; }

/* 섹션 머리에 버튼이 함께 놓이는 경우 (뉴스의 전체 보기) */
.sec__head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 20px; flex-wrap: wrap;
}
/* 섹션 안에서 한 번 더 나누는 소제목 */
.sec__sub {
  margin: 64px 0 22px;
  font-size: 20px; font-weight: 700; letter-spacing: -.01em;
}
/* 아직 채울 것이 없는 자리. 없는 내용을 지어 넣지 않는다는 표시다. */
.sec__empty { margin: 0; color: var(--ink-3); font-size: 16px; }

/* ─ 격자 ────────────────────────────────────────────────────────────────── */

.grid { display: grid; gap: 20px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

/* ─ U 자 프로세스 (운영자 요청 2026-09-22) ─────────────────────────────── */
/*
   여덟 칸을 4 × 2 로 놓되 아랫줄을 오른쪽부터 읽게 뒤집는다. 그러면
   01 02 03 04 로 가서 오른쪽에서 돌아 05 06 07 08 로 돌아온다. 그 경로를
   카드 뒤에 선으로 깔아 눈에 보이게 한다.

   ★ DOM 순서는 01 부터 08 그대로다. 순서를 건드리면 스텝 점등과 스크린
   리더 읽기 순서가 함께 뒤집힌다. 화면 배치만 order 로 바꾼다.
*/
.uflow { position: relative; }
.uflow > .card { position: relative; z-index: 1; }

/* 아랫줄만 역순. 05 가 맨 오른쪽, 08 이 맨 왼쪽 */
.uflow > .card:nth-of-type(5) { order: 8; }
.uflow > .card:nth-of-type(6) { order: 7; }
.uflow > .card:nth-of-type(7) { order: 6; }
.uflow > .card:nth-of-type(8) { order: 5; }

/* 경로. 오른쪽으로 열린 ㄷ 자라 U 를 눕힌 모양이 된다.
   ★ 돌아 나가는 곡선은 카드 바깥으로 뺀다. 카드 안에 두면 흰 배경에
   가려 칸 사이 틈에만 토막으로 보인다(실측). 가로 구간은 카드 뒤를
   지나므로 틈에서만 보이는데, 그것이 "뒤로 지나간다"의 표현이다. */
.uflow__path {
  position: absolute; z-index: 0; pointer-events: none;
  left: -18px; right: -30px;
  top: 26%; bottom: 26%;
  border: 3px solid var(--ac-soft, rgba(45, 184, 124, .42));
  border-left: 0;
  border-radius: 0 70px 70px 0;
}
/* 끝점 화살촉. 아랫줄 왼쪽 끝에서 왼쪽을 가리킨다.
   ★ 카드 바깥에 둔다. 안에 두면 흰 카드에 가려 안 보인다. */
.uflow__tip {
  position: absolute; z-index: 0; pointer-events: none;
  left: -29px; bottom: calc(26% - 7px);
  width: 0; height: 0;
  border-top: 7px solid transparent;
  border-bottom: 7px solid transparent;
  border-right: 11px solid var(--ac-soft, rgba(45, 184, 124, .42));
}
@media (max-width: 1080px) {
  /* 2열·1열로 접히면 U 자가 실제 배치와 어긋난다
     ★ 2026-09-28: :nth-of-type(n) 을 붙여 위 역순 규칙과 우선순위를 맞춘다.
     전에는 .uflow > .card 만 써서 우선순위에서 져 모바일이 01~04 뒤에
     08·07·06·05 로 거꾸로 쌓였다(배포본 캡처로 발견). */
  .uflow > .card:nth-of-type(n) { order: 0; }
  .uflow__path, .uflow__tip { display: none; }
}
.grid--5 { grid-template-columns: repeat(5, 1fr); }

/* ─ 카드 ────────────────────────────────────────────────────────────────── */

.card {
  border: 1px solid var(--line);
  border-radius: var(--r);
  padding: 26px 24px;
  background: #fff;
}
.card__kicker {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: .08em;
  color: var(--ac); margin: 0 0 10px;
}
/* ★ 한국어 kicker. 영문용 자간(.08em)을 그대로 쓰면 한글이 성기게 벌어진다.
   목적을 적는 자리다(운영자 요청 2026-09-22 "목적이 초록색으로 적히고"). */
.card__kicker--ko {
  font-family: inherit;
  font-size: 13px; letter-spacing: -.01em;
}
.card__title { margin: 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 설명이 두 문단이면 사이를 벌린다. 앞이 무엇인가, 뒤가 어떻게 운영하는가다 */
.card__body + .card__body { margin-top: 10px; }
.card__body { margin: 10px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.66; }

/* 번호가 붙는 카드 (단계·프로세스) */
.card--step {
  position: relative; padding-top: 30px;
  transition: border-color var(--duration-slow) var(--ease-enter), background-color var(--duration-slow) var(--ease-enter),
              transform var(--duration-slow) var(--ease-enter), box-shadow var(--duration-slow) var(--ease-enter);
}
/* ★ 2026-09-28 운영자 "2.5D 에셋을 블럭마다 우측 하단에… 단조로워 보이네".
   단계마다 그 일을 뜻하는 클레이 에셋(assets/step/s1~s8, 배경 투명).
   글과 겹치지 않게 아래 여백을 두고 오른쪽 아래에 앉힌다. */
.card--step:has(.card__deco) { padding-bottom: 96px; }
.card--step .card__deco {
  position: absolute; right: 12px; bottom: 10px;
  width: 96px; height: 96px; object-fit: contain; object-position: right bottom;
  pointer-events: none; user-select: none;
  transition: transform var(--duration-slow) var(--ease-enter);
}
.card--step:hover .card__deco,
.card--step.is-lit .card__deco { transform: translateY(-3px) rotate(-2deg); }
@media (max-width: 640px) {
  .card--step:has(.card__deco) { padding-bottom: 24px; padding-right: 96px; }
  .card--step .card__deco { width: 76px; height: 76px; top: 50%; bottom: auto; transform: translateY(-50%); }
  .card--step:hover .card__deco, .card--step.is-lit .card__deco { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
  .card--step:hover .card__deco, .card--step.is-lit .card__deco { transform: none; }
}

/* ★ 01 부터 08 까지 한 칸씩 초록으로 켜졌다 꺼진다(운영자 요청
   2026-09-22 "블럭마다 색이 초록색으로 바뀌고 다시 하얀색으로 돌아가면서
   프로세스 스텝을 표하면"). 여덟 칸이 순서 있는 단계라는 것을 글을 읽기
   전에 눈으로 알린다. studio.js 가 화면에 들어올 때 한 번만 돌린다. */
/* ★ 칸 전체를 브랜드 색으로 칠하고 글자를 흰색으로 뒤집는다(운영자 요청
   2026-09-22 "테두리 색을 변경하라는게 아니라 블럭의 색을 앤드원 색으로
   바꾸고 텍스트들이 화이트로 바뀌어야지"). 테두리만 바꾸면 여덟 칸 중
   어디가 켜졌는지 멀리서 안 보인다. */
/* ★ 2026-09-28 운영자 "색 들어오는 효과 자체가 2.5D 느낌 + 질감". 켜진 칸이
   두께 있는 타일처럼 솟는다: 위에서 빛을 받는 그라데이션, 윗면 하이라이트,
   아래 옆면(진한 초록 6px), 바닥 그림자, 그리고 고운 입자(노이즈) 질감. */
.card--step.is-lit {
  border-color: #1E9E66;
  background:
    radial-gradient(120% 90% at 18% 0%, rgba(255,255,255,.22) 0%, rgba(255,255,255,0) 55%),
    linear-gradient(165deg, #34C98B 0%, var(--ac) 48%, #16875A 100%);
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.45),
    inset 0 -1px 0 rgba(0,0,0,.10),
    0 6px 0 #11704A,
    0 8px 2px rgba(10, 70, 45, .18),
    0 22px 34px rgba(20, 120, 78, .32);
}
.card--step::after {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode: soft-light;
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-enter);
}
.card--step.is-lit::after { opacity: .55; }
.card--step > * { position: relative; z-index: 1; }
.card--step > .card__deco { position: absolute; }
.card--step.is-lit .card__deco { filter: drop-shadow(0 6px 8px rgba(8, 60, 38, .35)); }
.card--step.is-lit .card__no { color: rgba(255, 255, 255, .78); }
.card--step.is-lit .card__title { color: #fff; }
.card--step.is-lit .card__body,
.card--step.is-lit .card__ul li { color: rgba(255, 255, 255, .92); }
.card--step .card__no {
  font-family: var(--font-en);
  font-size: 12px; font-weight: 700; color: var(--ink-3);
  letter-spacing: .06em;
  transition: color var(--duration-slow) var(--ease-enter);
}

/* ─ 단계 진행 선 ────────────────────────────────────────────────────────── */
/*
   카드 위를 지나는 가로선이 왼쪽에서 오른쪽으로 자라고, 선이 닿는 카드가
   차례로 떠오른다. 이 구간이 "한 팀이 끝까지 맡는다"를 말하는 곳이라
   순서가 눈에 보이는 편이 낫다.

   ★ 선은 카드 위 여백에 둔다. 카드 뒤에 깔면 흰 배경에 가려 사이 간격에만
     토막으로 보인다.
   ★ 1080px 이하에서는 숨긴다. 카드가 2열·1열로 접혀 가로선이 실제 순서와
     어긋난다. 카드가 떠오르는 것만 남는다.
*/
.steps { position: relative; padding-top: 28px; }

/* 바탕선. 전체 길이로 깔려 있고 움직이지 않는다 */
.steps::before {
  content: ''; position: absolute;
  left: 0; right: 0; top: 6px; height: 2px;
  background: var(--line);
}

/* ★ 지나온 길. 화살표를 따라 단계마다 늘어난다.
   전에는 ::before 하나를 scaleX 로 늘렸는데, 단계마다 멈추게 하려면 JS 가
   길이를 직접 정해야 해서 실제 요소로 뺐다. 의사요소에는 스타일을 못 준다.
   ★ 2026-09-27: width 대신 scaleX 로 늘린다(레이아웃 재계산 없음). JS 가
   --p(0~1)를 정한다. */
.steps__line {
  position: absolute; left: 0; right: 0; top: 6px; height: 2px;
  background: var(--ac);
  transform-origin: left center;
  transform: scaleX(var(--p, 0));
  transition: transform var(--duration-slow) var(--ease-move);
  z-index: 1;
}
.steps.is-done .steps__line { --p: 1; transition: none; }

/* 선이 지나는 자리에 점을 찍어 어느 카드까지 왔는지 남긴다.
   화살표가 지나간 자리는 액센트로 켜진 채 남는다. */
.steps .card--step::before {
  content: ''; position: absolute;
  top: -26px; left: 26px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--line);
  transition: background-color var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter);
}
.steps .card--step.is-on::before,
.steps.is-done .card--step::before { background: var(--ac); transform: scale(1.2); }

/* ★ 화살표 하나가 선을 따라 단계마다 멈췄다 간다 (운영자 요청 2026-09-22).
   끊김 없이 한 번에 지나가는 것보다 각 단계를 읽을 틈이 생긴다.
   머무는 시간은 studio.js 의 STEP_STAY 한 곳에서 정한다.

   ★ 2026-09-27: left 대신 transform 으로 옮긴다. JS 가 px 위치를 --x 로
   넘기고 가운데 맞춤 -50% 는 calc 로 섞는다. 이동과 크기 변화가 한 속성이라
   전환 시간은 이동 기준(slow)으로 맞춘다. */
.steps__dot {
  position: absolute; top: 6px; left: 0;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ac);
  display: flex; align-items: center; justify-content: center;
  transform: translate(calc(var(--x, 0px) - 50%), -50%) scale(.5);
  opacity: 0; z-index: 2;
  transition: transform var(--duration-slow) var(--ease-move),
              opacity var(--duration-base) var(--ease-enter);
}
.steps__dot::after {
  content: ''; width: 6px; height: 6px;
  border-right: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg) translate(-1px, -1px);
}
/* 위치는 JS 가 단계마다 left 로 정한다. 여기서는 보이기만 한다 */
.steps.is-run .steps__dot { opacity: 1; transform: translate(calc(var(--x, 0px) - 50%), -50%) scale(1); }
/* 다 지나가면 조용히 사라진다. 끝에 멈춰 있으면 버튼처럼 보인다 */
.steps.is-lit .steps__dot { opacity: 0; transform: translate(calc(var(--x, 0px) - 50%), -50%) scale(.7); }
.steps.is-done .steps__dot { display: none; }

/* 마지막에 전체가 한 번 환해진다 (운영자 요청) */
@keyframes stepsLit {
  0%   { box-shadow: 0 0 0 0 transparent; }
  35%  { box-shadow: 0 10px 30px color-mix(in srgb, var(--ac) 30%, transparent); }
  100% { box-shadow: 0 2px 10px rgba(10, 22, 40, .06); }
}
.steps.is-lit .card--step { animation: stepsLit calc(var(--duration-slow) * 3) var(--ease-enter) both; }

/* ★ 글자를 흐리게 하지 않는다. opacity .5 로 두었더니 본문 대비가 2.34:1 로
   떨어졌다(2026-09-22 실측, 기준 4.5:1). 잠깐이지만 JS 가 실패하면 그대로
   남아 읽을 수 없는 카드가 된다.
   진행 표시는 위로 떠오르는 움직임과 번호·점 색이 맡는다. 둘 다 글자
   가독성을 건드리지 않는다. */
.steps .card--step {
  transform: translateY(12px);
  border-color: var(--line-2);
  transition: transform var(--duration-slow) var(--ease-enter), border-color var(--duration-slow) var(--ease-enter), box-shadow var(--duration-slow) var(--ease-enter);
}
.steps .card--step.is-on,
.steps.is-done .card--step { transform: none; border-color: var(--line); }

.steps .card--step.is-on .card__no,
.steps.is-done .card--step .card__no { color: var(--ac); }

@media (max-width: 1080px) {
  .steps { padding-top: 0; }
  .steps::before { display: none; }
  .steps .card--step::before { display: none; }
  .steps__dot, .steps__line { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .steps .card--step { transform: none; transition: none; animation: none; border-color: var(--line); }
  .steps__dot { display: none; }
  .steps__line { --p: 1; transition: none; }
}

/* ─ 강점 목록 ───────────────────────────────────────────────────────────── */
/*
   왼쪽에 무엇을, 오른쪽에 그래서 무엇이 되는지와 근거를 둔다.
   카드 3열은 셋을 견주게 만드는 모양이라 "우리 강점 셋"에는 안 맞았다.
   테두리를 두르지 않고 가로선만 써서 읽는 흐름을 한 방향으로 둔다.
*/
.edge { margin: 26px 0 0; padding: 0; }
.edge__row {
  display: grid; grid-template-columns: 210px 1fr; gap: 28px;
  padding: 24px 0; border-top: 1px solid var(--line);
}
.edge__row:last-child { border-bottom: 1px solid var(--line); }
.edge__k {
  margin: 0; font-size: 14px; font-weight: 700;
  color: var(--ink-2); letter-spacing: -.01em;
  padding-top: 3px;
}
.edge__v { margin: 0; }
.edge__lead {
  margin: 0; font-size: 20px; font-weight: 700;
  color: var(--ink); letter-spacing: -.025em; line-height: 1.4;
  word-break: keep-all;
}
.edge__sub {
  margin: 8px 0 0; font-size: 14px; line-height: 1.6;
  color: var(--ink-2); word-break: keep-all;
}
@media (max-width: 760px) {
  .edge__row { grid-template-columns: 1fr; gap: 10px; padding: 20px 0; }
  .edge__k { padding-top: 0; }
  .edge__lead { font-size: 16px; }
}

/* 문제 카드 — 왼쪽에 굵은 색 막대를 넣지 않는다(우리 anti-slop 차단 목록).
   대신 라벨과 본문의 크기 차로 위계를 만든다. */
.gap { border: 1px solid var(--line); border-radius: var(--r); padding: 22px 24px; }
.gap__k { margin: 0; font-size: 16px; font-weight: 700; }
.gap__v { margin: 8px 0 0; font-size: 14px; color: var(--ink-2); }

/* ─ 숫자 ────────────────────────────────────────────────────────────────── */

.stats { display: grid; gap: 20px; grid-template-columns: repeat(4, 1fr); }
.stat { border-top: 2px solid var(--ink); padding-top: 16px; }
.stat__v {
  font-family: var(--font-en);
  font-size: clamp(26px, 3.4vw, 38px); font-weight: 800;
  letter-spacing: -.02em; line-height: 1.1;
}
.stat__l { margin: 8px 0 0; font-size: 13px; color: var(--ink-2); }

/* ─ 거점 (벤처) ─────────────────────────────────────────────────────────── */

.node { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }

/* ★ 사진 자리에 루프 영상을 겹친다. 사진을 치우고 영상을 넣는 방식은 쓰지
   않는다. 바꾸는 순간 높이가 한 번 튀고, 영상이 오기 전과 움직임을 줄인
   환경에서 자리가 빈다. 사진은 바탕으로 두고 영상을 위에 덮어 투명도로만
   드러낸다. 비율은 바깥 칸이 잡으므로 안쪽 둘은 칸을 채우기만 한다. */
.node__media {
  position: relative; aspect-ratio: 16 / 10; overflow: hidden;
  background: var(--bg-2);
}
.node__img,
.node__vid { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.node__vid { opacity: 0; transition: opacity var(--duration-slow) var(--ease-enter); }
.node__vid.is-on { opacity: 1; }
.node__in { padding: 22px 22px 26px; }
/* ★ 위 Find Opportunity 카드와 같은 짜임이다(운영자 지시 2026-09-22).
   나라 이름을 작은 영문 라벨로 올리고, 그 나라에서 우리가 맡는 일을
   큰 제목으로 내린다. 위에서 KOREA 로 본 자리가 아래에서 주인공이 된다. */
.node__label {
  margin: 0; font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--ac);
}
/* ★ 한글 제목이라 영문 서체를 걸지 않는다. 영문 원문은 data-en 에 있고
   영어판을 만들 때 그쪽을 쓴다(운영자 2026-09-22). */
.node__title {
  margin: 10px 0 0; font-size: 20px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.35;
  color: var(--ink); word-break: keep-all;
}
.node__ul { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.node__ul li {
  font-size: 14px; color: var(--ink-2); line-height: 1.6;
  padding-left: 15px; position: relative;
}
.node__ul li::before {
  content: ''; position: absolute; left: 0; top: 10px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ac);
}

/* ─ 포트폴리오 ──────────────────────────────────────────────────────────── */

.folio {
  border: 1px solid var(--line); border-radius: var(--r);
  padding: 22px 22px 24px;
  /* ★ 흰 배경을 준다. 없으면 sec--tint 섹션에서 카드 안팎 색이 같아지고,
     같은 색을 쓰는 folio__tag 가 통째로 사라진다(실측). */
  background: #fff;
  transition: transform var(--duration-base) var(--ease-enter), box-shadow var(--duration-base) var(--ease-enter), border-color var(--duration-base) var(--ease-enter);
}

/* 마우스를 올리면 카드가 종이 한 장만큼 떠오른다. 4px 과 옅은 그림자까지다.
   더 올리면 카드가 튀고, 진한 그림자는 우리 차단 목록에 걸린다. */
.folio:hover {
  transform: translateY(-4px);
  box-shadow: 0 10px 28px rgba(10,22,40,.10);
  border-color: var(--line);
}

/* 어두운 섹션 안에서는 테두리가 안 보이므로 그림자만으로 띄운다.
   ★ 글자색을 반드시 되돌린다. 섹션이 color 를 흰색으로 주므로 그대로 두면
   흰 카드 위에 흰 글자가 되어 제목이 통째로 사라진다(실측으로 잡았다). */
.sec--feature.sec--onink .folio {
  border-color: transparent;
  color: var(--ink-2);
}
.sec--feature.sec--onink .folio .folio__title { color: var(--ink); }

/* ★ 마우스를 올리면 색이 들어온다 (운영자 요청 2026-09-22).
   로고 띠에서 흑백이 컬러로 돌아오는 것과 같은 반응을 여기서도 준다.
   다만 카드는 원래 흑백이 아니므로 "되돌린다"가 아니라 "들어온다"로
   만들었다. 테두리와 태그가 액센트 색을 받고 카드가 떠오른다. */
.sec--feature .folio:hover {
  box-shadow: 0 14px 34px rgba(0,0,0,.28);
  border-color: var(--ac);
}
.folio__tag { transition: background-color var(--duration-base) var(--ease-enter), color var(--duration-base) var(--ease-enter); }
.folio:hover .folio__tag {
  background: var(--ac);
  color: #fff;
}

/* ─ 스크롤 진입 등장 ─────────────────────────────────────────────────────
   카드가 화면에 들어올 때 아래에서 올라온다. studio.js 가 보이는 순간
   .is-in 을 붙이고, 순서에 따라 --i 를 매겨 차례로 나타나게 한다.

   ★ 스크립트가 못 돌면 카드가 영영 숨는다. 그래서 숨김은 JS 가 붙이는
      .reveal 에만 걸고, HTML 에는 아무 표시도 하지 않는다. */
.reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter);
  transition-delay: calc(var(--i, 0) * 90ms);
}
.reveal.is-in { opacity: 1; transform: none; }

/* ★ 수치 칸은 간격을 벌려 하나씩 서는 것이 보이게 한다(운영자 요청
   2026-09-22). 90ms 로는 넷이 거의 동시에 올라와 순서가 안 읽힌다. */
.stats .reveal { transition-delay: calc(var(--i, 0) * 260ms); }

/* 움직임 줄이기를 켠 분에게는 전부 끈다. 등장도 호버도 즉시 상태로 간다. */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .folio { transition: none; }
  .folio:hover { transform: none; }
}
.folio__tag {
  display: inline-flex; align-items: center;
  font-size: 12px; font-weight: 600; color: var(--ink-2);
  background: var(--bg-2); border-radius: 999px; padding: 4px 11px;
}
.folio__title { margin: 14px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
.folio__meta { margin: 12px 0 0; display: grid; gap: 5px; font-size: 13px; color: var(--ink-2); }
/* ★ dl 안은 dt·dd 로 짝을 지어야 스크린리더가 "일시 — 2025.12.04" 로 읽는다.
   b 로만 두면 라벨과 값이 이어진 한 덩어리 글로 읽힌다. dd 는 브라우저 기본
   왼쪽 여백이 붙으므로 여기서 지운다. */
.folio__meta > div { display: flex; }
/* ★ 라벨 스타일을 dt 와 b 둘 다에 준다. programs 는 dl/dt/dd 로 고쳤지만
   venture 는 아직 <p><span><b> 구조다. dt 만 적으면 venture 쪽 라벨이
   붙어 버린다("지원Project Skill-UP" — 2026-09-22 실측으로 잡은 회귀). */
.folio__meta dt,
.folio__meta b { font-weight: 600; color: var(--ink-3); margin-right: 8px; flex: none; }
.folio__meta dd { margin: 0; }
.folio__body { margin: 12px 0 0; font-size: 14px; color: var(--ink-2); line-height: 1.66; }
/* 다음 기수 안내처럼 행동을 부르는 카드. 버튼을 아래에 붙인다. */
.folio--cta { display: flex; flex-direction: column; }
/* flex 자식은 기본이 stretch 라 태그가 카드 폭으로 늘어난다(실측). */
.folio--cta .folio__tag { align-self: flex-start; }
/* margin-top:auto 가 버튼을 카드 아래로 민다. 옆 카드 높이에 맞춰 카드가
   늘어나므로 그 여백을 버튼이 아니라 auto 가 먹는다. 고정값을 함께 쓰면
   auto 가 죽으므로 하나만 둔다. */
.folio__btn { margin-top: auto; align-self: flex-start; }
.folio--cta .folio__body { margin-bottom: 20px; }

/* 숫자 줄이 앞 블록과 붙지 않게 */
.stats--gap { margin-top: 56px; }

/* ─ 투자 포트폴리오 (로고 + 모달) ────────────────────────────────────────
   회사 소개를 카드로 늘어놓지 않고 로고만 건다. 한 곳일 때 허전하지 않고
   늘어나도 벽이 되지 않는다. 상세는 눌렀을 때 모달로 편다. */

/* ★ 2026-09-22 로고 타일에서 카드로 바꿨다(운영자 지시, theilab.kr 참조).
   전에는 로고만 걸고 상세를 전부 모달에 숨겼는데, 그러면 회사 이름만
   보이고 무엇을 하는 곳인지가 화면에 없었다. 분야·이름·한 줄 설명을
   카드 밖으로 꺼내고 모달은 더 깊은 내용만 맡는다.

   ★ 지금 투자처가 한 곳이라 3열에 하나만 놓으면 허전하다. 자동 열 수를
   쓰되 다음 기수 모집 카드를 같은 격자에 넣어 함께 세운다. 회사가 늘면
   모집 카드가 자연히 뒤로 밀린다. */
.pf {
  list-style: none; margin: 44px 0 0; padding: 0;
  display: grid; gap: 22px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
@media (min-width: 1000px) { .pf { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px)  { .pf { grid-template-columns: 1fr; gap: 16px; } }

.pf__card {
  display: flex; flex-direction: column;
  width: 100%; height: 100%;
  text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  overflow: hidden;
  cursor: pointer;
  transition: transform var(--duration-fast) var(--ease-enter), box-shadow var(--duration-fast) var(--ease-enter);
}
.pf__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 34px rgba(10,22,40,.22);
}
.pf__card:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

/* 상단 그림 자리. 사업 사진이 오면 <img> 로 채우고, 없으면 로고를 세운다. */
.pf__visual {
  aspect-ratio: 16 / 9;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg-2, #F4F6F8);
  border-bottom: 1px solid var(--line-2);
  overflow: hidden;
}
.pf__visual img { width: 100%; height: 100%; object-fit: cover; }
.pf__visual img.pf__logoimg { width: auto; height: auto; max-width: 58%; max-height: 52%; object-fit: contain; }
/* 로고 파일이 아직 없는 회사. 이름을 크게 세워 둔다.
   ★ 회색으로 두면 "빈 칸"으로 읽힌다. 잉크색으로 또렷하게 둬야 로고가
   올 자리에 이름이 임시로 서 있는 것으로 보인다. */
.pf__name {
  font-size: 28px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink);
}

.pf__body { padding: 22px 22px 24px; display: flex; flex-direction: column; flex: 1; }
.pf__tag {
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac-dark, #047857);
}
.pf__title {
  margin: 10px 0 0;
  font-size: 20px; font-weight: 700; letter-spacing: -.02em; color: var(--ink);
}
.pf__desc {
  margin: 10px 0 0;
  font-size: 14px; line-height: 1.65; color: var(--ink-2);
  word-break: keep-all;
}
.pf__more {
  margin-top: auto; padding-top: 18px;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 14px; font-weight: 600; color: var(--ink);
}
.pf__more::after { content: '→'; transition: transform var(--duration-fast) var(--ease-enter); }
.pf__card:hover .pf__more::after { transform: translateX(3px); }

/* ★ 다음 기수 모집. 같은 격자에 들어가되 점선으로 구분한다.
   가짜 로고나 "준비 중" 글자를 넣지 않는다. 그건 비어 있다는 사실을
   가리려다 오히려 더 비어 보이게 한다. 1기를 막 마친 지금을 그대로 보인다. */
/* ★ 밝은 바닥으로 바뀌어 색을 되돌렸다(2026-09-23). 점선 테두리는 유지한다.
   옆 카드가 실선 흰 카드라 점선이 "아직 비어 있는 자리"로 읽힌다. */
.pf__next {
  display: flex; flex-direction: column;
  padding: 26px 24px 24px;
  border: 1px dashed var(--line);
  border-radius: 16px;
  background: #fff;
}
/* ★ .pf__next 가 flex column 이라 자식이 기본으로 폭을 다 먹는다.
   칩은 inline-flex 여도 stretch 되어 가로로 늘어났다(실측). 자기 폭만
   쓰도록 align-self 를 준다. */
.pf__next .folio__tag { align-self: flex-start; }
.pf__next-title { margin: 12px 0 0; font-size: 20px; font-weight: 700; color: var(--ink); letter-spacing: -.02em; }
.pf__next-body { margin: 10px 0 0; font-size: 14px; line-height: 1.65; color: var(--ink-2); word-break: keep-all; }
.pf__next .btn { margin-top: auto; align-self: flex-start; }

/* 상세 모달 */
.pfm {
  width: min(520px, calc(100vw - 40px));
  padding: 30px 30px 26px;
  border: 1px solid var(--line); border-radius: 16px;
  background: #fff; color: var(--ink-2);
}
.pfm::backdrop { background: rgba(10,22,40,.55); }
.pfm__x {
  position: absolute; top: 12px; right: 14px;
  width: 44px; height: 44px;           /* 터치 타깃 최소선 */
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--ink-3);
}
.pfm__x:hover { color: var(--ink); }
.pfm__title { margin: 12px 0 0; font-size: 20px; font-weight: 800; color: var(--ink); }
.pfm__desc { margin: 12px 0 0; font-size: 16px; line-height: 1.7; word-break: keep-all; }
.pfm__meta { margin: 20px 0 0; display: grid; gap: 8px; font-size: 14px; }
.pfm__meta > div { display: flex; }
.pfm__meta dt { font-weight: 600; color: var(--ink-3); margin-right: 10px; flex: none; min-width: 42px; }
.pfm__meta dd { margin: 0; }
.pfm__site { margin-top: 24px; width: 100%; }
/* 홈페이지 주소가 없는 회사는 버튼을 숨긴다. 빈 링크를 두면 눌리고도
   아무 일이 없어 고장처럼 보인다. */
.pfm__site[hidden] { display: none; }

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

/* ─ 파트너 로고 ─────────────────────────────────────────────────────────── */

.logos { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.logos li {
  display: flex; align-items: center; justify-content: center;
  height: 62px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-enter);
}
/* 로고 56 개의 색이 제각각이라 그대로 두면 격자가 어지럽다. 평소에는 회색으로
   가라앉히고 마우스를 올린 것만 원래 색으로 돌린다. 개별 확인은 되면서
   전체는 차분해진다. */
.logos img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  /* ★ 원래 색이 연한 로고(창조경제혁신센터 계열·건국대·bluepoint 등)는
     회색조로 바꾸면 거의 사라진다. 대비를 올려 세웠다(실측 후 조정). */
  filter: grayscale(1) contrast(1.35) brightness(.86);
  opacity: .8;
  transition: filter var(--duration-fast) var(--ease-enter), opacity var(--duration-fast) var(--ease-enter);
}
.logos li:hover { border-color: var(--line); }
.logos li:hover img { filter: none; opacity: 1; }
/* 로고가 적을 때(8개 미만) 흘리지 않고 한 줄 가운데. 몇 곳뿐이라 원래 색 그대로 보여 준다 */
.logos--few { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; }
.logos--few li { width: 220px; height: 92px; padding: 16px 22px; }
.logos--few li a { display: flex; width: 100%; height: 100%; align-items: center; justify-content: center; }
.logos--few img { filter: none; opacity: 1; }
@media (max-width: 640px) { .logos--few li { width: calc(50% - 7px); height: 72px; } }

/* 글자만 있는 자리(로고 파일이 없는 파트너)를 위한 폴백 */
.logos span {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-align: center; line-height: 1.35; word-break: keep-all;
}

/* ─ 팀 ──────────────────────────────────────────────────────────────────── */
/*
   운영자 확정 (2026-09-22): "각 소속을 담을꺼라 이름/직함/한줄 소개"

   ★ 블루포인트는 사진과 이름만 둔다. 우리는 직함과 한 줄을 더 둔다.
   사람이 적을 때 이름만 있으면 허전하고, 무엇을 하는 사람인지가 남지 않는다.
*/
.team {
  list-style: none; margin: 0; padding: 0;
  display: grid; gap: 22px;
  /* 240px 은 1440px 화면에서 4열이 되는 값이다. 210px 이면 5열이 되는데
     그 폭에서는 한 줄 소개가 2줄로 접히고 7명일 때 둘째 줄이 3칸 빈다.
     4열이면 1칸만 빈다 (2026-09-22 실측). */
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
@media (max-width: 640px) { .team { grid-template-columns: repeat(2, 1fr); gap: 16px; } }

.team__card {
  display: flex; flex-direction: column; gap: 14px;
  width: 100%; height: 100%;
  text-align: left;
  background: none; border: 0; padding: 0;
  color: inherit;
}
.team__card--more { cursor: pointer; }
.team__card--more:focus-visible { outline: 2px solid var(--ac); outline-offset: 4px; }

/* 세로로 긴 증명사진 비율. 블루포인트도 이 형태다. */
.team__photo {
  aspect-ratio: 3 / 4;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  transition: border-color var(--duration-fast) var(--ease-enter);
}
.team__photo img { width: 100%; height: 100%; object-fit: cover; }
.team__card--more:hover .team__photo { border-color: var(--ink-3); }

/* ★ 사진이 없으면 이름 첫 글자를 세운다. 빈 네모를 두면 사진을 못 불러온
   고장으로 읽힌다. */
.team__photo--none {
  font-size: 40px; font-weight: 800; letter-spacing: -.03em;
  color: var(--ink-3);
  background: var(--bg-2);
}
/* ★ 2026-09-28 사진이 없으면 앤드원 A 심벌(운영자). 얼굴 공개가 싫은 사람의 자리 */
.team__photo--none .team__mark {
  width: 38%; height: auto; aspect-ratio: auto;
  object-fit: contain; opacity: .9;
}

.team__body { display: flex; flex-direction: column; gap: 3px; }
.team__name { font-size: 16px; font-weight: 700; letter-spacing: -.02em; color: var(--ink); }
.team__role { font-size: 13px; font-weight: 500; color: var(--ac); }
.team__sum {
  margin-top: 4px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  word-break: keep-all;
}

/* ─ 뉴스 ────────────────────────────────────────────────────────────────── */

.news { border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; background: #fff; }
.news__img { aspect-ratio: 16 / 9; object-fit: cover; width: 100%; background: var(--bg-2); }
.news__in { padding: 20px 20px 24px; }
.news__d { font-family: var(--font-en); font-size: 12px; color: var(--ink-3); }
.news__t { margin: 8px 0 0; font-size: 16px; font-weight: 700; line-height: 1.5; }
/* 바깥 기사로 나가는 카드만 누를 수 있게 보인다. 링크가 없으면 평범한 카드다. */
.news--link { display: block; color: inherit; text-decoration: none; transition: border-color var(--duration-fast) var(--ease-enter); }
.news--link:hover { border-color: var(--ink-3); }
.news--link:hover .news__t { text-decoration: underline; }

/* 뉴스 목록 페이지의 스튜디오 구분 */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.tab {
  height: 44px; padding: 0 18px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff;
  font-family: inherit; font-size: 14px; font-weight: 600; color: var(--ink-2);
  cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter), background var(--duration-fast) var(--ease-enter);
}
.tab:hover { border-color: var(--ink-3); color: var(--ink); }
.tab[aria-selected='true'] { background: var(--ink); border-color: var(--ink); color: #fff; }

/* ─ 문의 ────────────────────────────────────────────────────────────────── */

.form { display: grid; gap: 16px; max-width: 640px; }
.form__row { display: grid; gap: 7px; }
.form label { font-size: 13px; font-weight: 600; }
/* ★ 글자 16px 는 취향이 아니라 조건이다. 15px 이하면 iOS Safari 가 입력칸을
   누를 때마다 화면을 확대하고 되돌리지 않는다. 높이 46px 는 버튼과 같은 값으로,
   손가락으로 누를 수 있는 최소선(44px)을 넘긴다. */
/* ★ 체크박스를 제외한다. 이 규칙은 글자를 적는 칸을 위한 것인데 그대로
   두면 동의 체크박스에도 폭 100%·높이 46px·안쪽 여백 11px 이 걸린다.
   체크박스 자체 크기(16px)는 따로 지정해 뒀지만 min-height 를 덮지 못해,
   네모가 46px 상자 안에 들어앉아 글자보다 한참 아래로 내려가 보였다.
   나중에 라디오나 체크박스를 더 넣어도 같은 일이 생기지 않게 대상을
   좁힌다. */
.form input:not([type="checkbox"]):not([type="radio"]),
.form select, .form textarea {
  width: 100%; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 16px; color: var(--ink);
  background: #fff;
}
.form input:not([type="checkbox"]):not([type="radio"]),
.form select { min-height: 46px; }
.form input:focus, .form select:focus, .form textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--ac) 55%, transparent);
  outline-offset: 1px; border-color: var(--ac);
}
.form textarea { min-height: 128px; resize: vertical; }
.form__2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

/* 문의 폼과 직접 연락 카드를 나란히. 폼만 두면 넓은 화면에서 오른쪽이 빈다. */
.contact { display: grid; gap: 40px; grid-template-columns: minmax(0, 1fr) minmax(0, 320px); }
.contact .form { max-width: none; }
.contact aside { display: grid; gap: 16px; align-content: start; }

/* 문의 보낸 뒤의 안내. 성공과 실패를 색으로 가른다. */
.form__msg { margin: 0; font-size: 14px; line-height: 1.6; word-break: keep-all; }
.form__msg:empty { display: none; }
.form__msg--ok  { color: var(--ac); }
.form__msg--bad { color: #B91C1C; }
.contact a { color: var(--ac); text-decoration: none; }
.contact a:hover { text-decoration: underline; }
.form__agree {
  display: flex; gap: 9px; align-items: flex-start;
  font-size: 13px; color: var(--ink-2); line-height: 1.6;
  font-weight: 400; word-break: keep-all;
}
.form__agree input { width: 20px; height: 20px; margin-top: 1px; flex: none; accent-color: var(--ac); }
.form__agree a { color: var(--ac); text-decoration: underline; text-underline-offset: 2px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  height: 46px; padding: 0 26px; border-radius: 999px;
  background: var(--ac); color: var(--ac-ink);
  font-family: inherit; font-size: 16px; font-weight: 700;
  border: 0; cursor: pointer; text-decoration: none;
  transition: opacity var(--duration-fast) var(--ease-enter);
}
.btn:hover { opacity: .88; }
.btn--ghost { background: transparent; color: var(--ink); border: 1px solid var(--line); }
.btn--ghost:hover { border-color: var(--ink-3); opacity: 1; }

/* ─ 푸터 ────────────────────────────────────────────────────────────────── */

.foot { background: var(--ink); color: rgba(255,255,255,.66); padding: 72px 0 56px; font-size: 14px; }
.foot__top { display: flex; flex-wrap: wrap; gap: 32px 60px; align-items: flex-start; }
.foot__logo img { height: 20px; width: auto; }
/* 로고 아래 한 줄. 우리가 무엇을 하는 회사인지 한 문장으로 말한다.
   ★ 한글로 바꿨다(2026-09-22 운영자 지시). 영문 서체를 걸면 한글이
   폴백으로 떨어져 자간과 굵기가 어긋난다. 밝기는 읽히는 선을 지킨다. */
/* ★ 두 줄이다. 위가 한 줄 정의이고 아래가 그 풀이다
   (운영자 문구 2026-09-22). 굵기와 밝기로 층을 나눈다. */
.foot__tagline {
  margin: 14px 0 0;
  font-size: 14px; font-weight: 600;
  letter-spacing: -.015em; line-height: 1.55;
  color: rgba(255,255,255,.88);
  word-break: keep-all;
}
.foot__desc {
  margin: 8px 0 0; max-width: 46em;
  font-size: 13px; font-weight: 400;
  letter-spacing: -.01em; line-height: 1.66;
  color: rgba(255,255,255,.58);
  word-break: keep-all;
}
/* ★ 글자가 아니라 로고다(운영자 지적 2026-09-22). 앤드원 홈페이지 개편본과
   같은 SVG 를 쓴다. 같은 회사 푸터인데 한쪽만 글자면 어긋난다.
   ★ 아이콘은 18px 이지만 누를 자리는 40px 을 지킨다. */
.foot__sns { margin: 18px 0 0; display: flex; gap: 8px; }
.foot__sns a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  color: rgba(255,255,255,.6); text-decoration: none;
  transition: color var(--duration-fast) var(--ease-enter);
}
.foot__sns a:hover { color: #fff; }
.foot__sns svg { width: 18px; height: 18px; fill: currentColor; display: block; }
.foot__cols { display: flex; flex-wrap: wrap; gap: 32px 60px; margin-left: auto; }
/* ★ align-content: start 를 빼면 링크 수가 적은 칼럼의 행이 늘어난다.
   .foot__cols 가 flex 라 칼럼들이 같은 높이로 맞춰지고, 그 남는 높이를
   내부 grid 가 행마다 나눠 갖는다. 2026-09-22 실측에서 칼럼 제목 높이가
   22px 과 36px 로 갈려 첫 링크가 14px 어긋났다. */
.foot__col { display: grid; gap: 2px; align-content: start; }
.foot__col b { color: #fff; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
/* ★ 손가락으로 누르는 곳이라 높이를 채운다. 글자 크기는 그대로다.
     전에는 24px 이라 좁은 화면에서 옆 항목을 잘못 누르기 쉬웠다. */
.foot__col a {
  display: inline-flex; align-items: center; min-height: 40px;
  color: inherit; text-decoration: none;
}
.foot__col a:hover { color: #fff; }
.foot__bot {
  margin-top: 44px; padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.12);
  /* ★ .44 는 이 남색 배경에서 4.36:1 이라 기준(4.5:1)에 못 미쳤다. .54 는 5.8:1 로
     통과하면서 본문(.66)보다 흐린 위계는 그대로 남는다. */
  font-size: 13px; color: rgba(255,255,255,.54);
  /* ★ 회사 정보 덩어리와 언어 버튼 둘만 둔다. 예전에는 span 하나하나가
     flex 항목이라 정보가 두 줄로 접히면 버튼이 함께 밀려 내려갔다.

     ★ 이 줄은 접지 않는다(nowrap). 접으면 영문처럼 정보가 길어질 때
     버튼이 다음 줄 왼쪽 끝으로 가버린다. 대신 정보 덩어리가 남은 폭을
     다 차지하고(flex:1) 그 안에서만 줄바꿈한다. */
  display: flex; flex-wrap: nowrap; gap: 14px 22px;
  align-items: flex-end;
}
.foot__info { flex: 1; display: flex; flex-wrap: wrap; gap: 6px 22px; }

/* ─ 언어 전환 ────────────────────────────────────────────────────────────
   ★ 푸터 하단 오른쪽 끝에 둔다. margin-left:auto 로 밀어 회사 정보와
   떨어뜨린다. 글자 크기는 같은 줄(13px)을 따르되 누를 수 있다는 것이
   보이도록 테두리를 준다. 지금 보는 언어는 누를 수 없게 막는다. */
.foot__lang { flex-shrink: 0; display: flex; gap: 6px; }
.foot__lang button {
  font: inherit; font-size: 12px; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,.26);
  background: transparent; color: rgba(255,255,255,.62);
  cursor: pointer; transition: color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}
.foot__lang button:hover { color: #fff; border-color: rgba(255,255,255,.5); }
.foot__lang button[aria-current="true"] {
  color: #0f2b23; background: #fff; border-color: #fff; cursor: default;
}

/* ─ 푸터 법정 고지 ───────────────────────────────────────────────────────
   개인정보처리방침은 법이 공개를 요구하는 항목이라 다른 줄보다 눈에 띄게
   둔다(개인정보 처리방침 작성지침). 크기는 그대로 두고 밝기와 굵기만
   올려 줄의 리듬은 지킨다. */
.foot__legal {
  color: rgba(255,255,255,.82); font-weight: 600; text-decoration: none;
  transition: color var(--duration-fast) var(--ease-enter);
}
.foot__legal:hover { color: #fff; text-decoration: underline; }

/* ─ 단계 카드 안 목록 ───────────────────────────────────────────────────── */
/*
   OUR SERVICE 다섯 단계가 한 줄 설명에서 항목 셋으로 바뀌었다
   (운영자 요청 2026-09-22). 다섯 칸이라 한 칸 폭이 1440px 화면에서
   약 240px 이다. 글자를 13px 로 내리고 줄간격을 좁혀 세 줄이 들어가게 했다.
*/
.card__ul {
  margin: 12px 0 0; padding: 0; list-style: none;
  display: grid; gap: 7px;
}
.card__ul li {
  position: relative; padding-left: 11px;
  font-size: 13px; line-height: 1.55; color: var(--ink-2);
  word-break: keep-all;
}
.card__ul li::before {
  content: ''; position: absolute; left: 0; top: 8px;
  width: 4px; height: 4px; border-radius: 50%;
  background: var(--ink-3);
  transition: background-color var(--duration-slow) var(--ease-enter);
}
/* 화살표가 지나간 카드는 점도 액센트 색을 받는다 */
.card--step.is-on .card__ul li::before,
.steps.is-done .card--step .card__ul li::before { background: var(--ac); }

/* ─ 기회 발견 (Find Opportunity) ────────────────────────────────────────── */
/*
   세 나라가 각자 무엇을 가장 잘하는지와, 그 곳에서 무엇이 비어 있는지를
   함께 보여준다. 비어 있는 한 줄이 바로 아래 Our Solution 에서 우리가
   하는 일이 되므로 둘을 선으로 잇는다.
*/
/* ★ 나라 사진을 배경으로 깐다(운영자 요청 2026-09-22).

   처음에는 흰 카드에 사진을 0.13 으로 아주 연하게 깔았다. 운영자가
   "너무 안 보인다"고 해 어두운 카드로 바꿨다. 사진을 진하게 두고 그
   위에 검정 장막을 덮어 흰 글자를 올린다.

   ★ 부수 효과가 크다. 아래 Our Solution 카드는 흰 바탕에 사진이 또렷하다.
   위가 어둡고 아래가 밝아 두 구간이 눈에 갈린다. 같은 나라를 다루면서
   위는 그 곳의 분위기, 아래는 우리가 하는 일로 읽힌다.

   ★ 카드 안에서만 액센트를 어두운 배경용으로 바꾼다. 흰 배경용
   #157F53 은 이 위에서 안 읽힌다. */
/*
   ★ 평소에는 사진과 나라 이름만 보이고, 마우스를 올리면 나머지 문구가
   올라온다 (운영자 요청 2026-09-22 "사진만 나오다가 마우스 가져다 대면
   그때 저 문구들 나오게").

   사진이 주인공이라 카드를 세로로 길게 잡고 글자를 아래에 몬다.
   포트폴리오 카드와 같은 문법이라 사이트 안에서 따로 놀지 않는다.
*/
.find {
  position: relative;
  --ac: #2DB87C;
  min-height: 360px;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r);
  padding: 26px 24px 24px;
  background: #0A1628;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden;
  cursor: default;
}
.find__bg {
  position: absolute; inset: 0; z-index: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  opacity: .92;
  filter: grayscale(.15) brightness(.86);
  transform: scale(1);
  transition: opacity var(--duration-slow) var(--ease-enter), transform calc(var(--duration-slow) * 2) var(--ease-enter),
              filter var(--duration-slow) var(--ease-enter);
}
/* ★ 위아래 양쪽에서 덮는 검정 그라데이션.
   전에는 아래에서만 올라왔는데 라벨과 제목이 카드 위쪽에 있어, 간판이
   많은 선전 사진에서는 제목이 묻혔다(실측). 위쪽에도 띠를 둬 글자가
   앉는 자리를 눌러 주고 가운데는 비워 사진을 살린다. */
.find__bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to bottom,
      rgba(4, 10, 20, .90) 0%, rgba(4, 10, 20, .74) 18%,
      rgba(4, 10, 20, .30) 38%, rgba(4, 10, 20, .04) 54%),
    linear-gradient(to top,
      rgba(4, 10, 20, .94) 0%, rgba(4, 10, 20, .80) 18%,
      rgba(4, 10, 20, .28) 44%, rgba(4, 10, 20, .04) 60%);
  transition: opacity var(--duration-slow) var(--ease-enter);
}
/* 마우스를 올리면 한 겹 더 덮는다. 사진 위 글자가 어떤 사진에서도 읽힌다. */
.find::after {
  content: ''; position: absolute; inset: 0; z-index: 0;
  background: linear-gradient(to top,
    rgba(4, 10, 20, .96) 0%, rgba(4, 10, 20, .9) 46%, rgba(4, 10, 20, .74) 100%);
  opacity: 0;
  transition: opacity var(--duration-slow) var(--ease-enter);
  pointer-events: none;
}
.find:hover::after,
.find:focus-within::after { opacity: 1; }
.find:hover .find__bg,
.find:focus-within .find__bg { transform: scale(1.05); filter: grayscale(0) brightness(.9); }

.find > *:not(.find__bg) { position: relative; z-index: 1; }

.find__ko { color: #fff; }

/* ★ 마우스를 올렸을 때만 나오는 문구. opacity 로만 감춘다. display 나
   height 로 감추면 카드 높이가 hover 마다 달라져 격자가 흔들린다. */
.find__ul,
.find__gap {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity var(--duration-slow) var(--ease-enter), transform var(--duration-slow) var(--ease-enter);
}
.find__gap { transition-delay: .06s; }
.find:hover .find__ul,
.find:hover .find__gap,
.find:focus-within .find__ul,
.find:focus-within .find__gap { opacity: 1; transform: none; }

/* ★ 손가락으로 보는 화면에는 hover 가 없다. 감춘 문구가 영영 안 나오므로
   처음부터 보여 준다. 덮개도 켜 둔다. */
@media (hover: none) {
  .find__ul, .find__gap { opacity: 1; transform: none; }
  .find::after { opacity: 1; }
  .find { min-height: 0; }
}
.find__en {
  margin: 0; font-family: var(--font-en);
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  color: var(--ac);
}
/* ★ 세 제목의 길이가 9자에서 19자까지 갈린다. min-height 로 두 줄 자리를
   잡아 두지 않으면 카드마다 본문 시작 높이가 어긋난다. */
.find__ko {
  margin: 10px 0 0; min-height: 2.8em;
  font-size: 20px; font-weight: 800;
  letter-spacing: -.025em; line-height: 1.4;
  word-break: keep-all;
}
.find__ul {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; gap: 8px; flex: 1;
  align-content: start;
}
/* ★ 사진 위에 얹히므로 흰색이다. 앞쪽에 어두운 배경용 규칙을 따로
   뒀었는데 이 기본 정의가 뒤에 와서 그것을 덮고 회색으로 나갔다
   (운영자 지적 2026-09-22 "하얀색 글씨로 하는게 좋지 않겠어"). */
.find__ul li {
  position: relative; padding-left: 14px;
  font-size: 14px; line-height: 1.6; color: #fff;
  word-break: keep-all;
}
.find__ul li::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--ac);
}
/* ★ 한계는 강점과 같은 목록에 넣지 않는다. 성격이 달라 섞이면 셋 다
   강점으로 읽힌다. 선을 긋고 아래로 내려 눈에 걸리게 한다. */
.find__gap {
  margin: 18px 0 0; padding-top: 15px;
  border-top: 1px dashed rgba(255, 255, 255, .34);
  font-size: 14px; line-height: 1.6; font-weight: 600;
  color: #fff; word-break: keep-all;
}

/* ─ 아래 경로로 잇는 선 ─────────────────────────────────────────────────── */
/*
   Find Opportunity 세 칸에서 Our Solution 세 칸으로 내려가는 선이다.
   화면에 들어오면 위에서 아래로 자라고, 왼쪽부터 조금씩 늦게 출발해
   한국에서 선전으로, 선전에서 베트남으로 이어지는 것이 보인다.

   ★ 선은 Find 섹션 안에 둔다. 두 섹션 사이에 따로 두면 배경색 경계와
   섹션 여백을 모두 계산해야 하고, wrap 폭이 달라지면 칼럼 중앙에서
   어긋난다. 같은 wrap 안 같은 grid 규칙을 쓰면 위치가 저절로 맞는다.
*/
.bridge {
  margin-top: 4px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
  /* ★ 운영자 요청 "저 선이 길게 내려가다가"(2026-09-22). 96px 이던 것을
     늘렸다. 선 길이가 곧 스크롤 구간 길이라 연출 전체가 함께 길어진다.
     230px 에서 전체 구간이 약 990px 이 된다(전 465px 의 2.1배). */
  height: 230px;
}
.bridge__c { position: relative; }
.bridge__c::before {
  content: ''; position: absolute; left: 50%; top: 0;
  width: 2px; height: 100%;
  background: var(--line);
  transform: translateX(-50%);
}
/* ★ 스크롤을 따라 자란다(운영자 요청 2026-09-22). 전에는 화면에 들어온
   순간 한 번에 자랐는데, 그러면 "내려가는 중"이 안 보이고 이미 이어진
   결과만 남는다. 이제 studio.js 가 스크롤 진행도로 height 를 직접 준다.

   ★ transition 을 짧게만 둔다. 0 이면 스크롤 한 칸마다 계단처럼 튀고,
   길면 손가락보다 늦게 따라와 따로 논다. */
/* ★ 2026-09-27: height 를 늘리던 것을 scaleY 로 바꿨다(레이아웃 재계산 없음).
   요소는 전체 높이로 두고 선은 ::before 가 그린다. 요소 자체를 늘이면
   ::after 끝점까지 같이 찌그러진다. 끝점은 도착했을 때만 보이므로 아래
   끝에 고정해 두면 된다. 진행도는 JS 가 --p(0~1)로 준다. */
.bridge__l {
  position: absolute; left: 50%; top: 0;
  width: 2px; height: 100%;
  transform: translateX(-50%);
}
.bridge__l::before {
  content: ''; position: absolute; inset: 0;
  background: var(--ac);
  transform-origin: top center;
  transform: scaleY(var(--p, 0));
  transition: transform var(--duration-press) linear;
}
/* 스크립트가 못 돌면 선이 영영 0 이다. JS 가 붙였을 때만 스크롤을 따르고,
   아니면 관찰자 방식(.is-on)이 그대로 채운다. */
.bridge__l::after {
  content: ''; position: absolute; left: 50%; bottom: -3px;
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ac);
  transform: translateX(-50%);
  opacity: 0; transition: opacity var(--duration-base) var(--ease-enter);
}
/* JS 가 없을 때의 폴백. 화면에 들어오면 한 번에 채운다. */
.bridge.is-on:not(.is-scroll) .bridge__l { --p: 1; }
.bridge.is-on:not(.is-scroll) .bridge__l::before { transition: transform calc(var(--duration-slow) * 2) var(--ease-move); }
.bridge.is-on .bridge__l::after { opacity: 1; }

/* ★ 선이 끝까지 닿았을 때만 끝점이 찍힌다. 도착 표시이므로 도착 전에
   보이면 뜻이 없다. */
.bridge.is-done .bridge__l::after { opacity: 1; }

/* 선이 끝나는 곳에서 바로 다음 섹션이 시작한다 */
.sec--bridged { padding-bottom: 0; }

/* ★ 화면 고정은 넣지 않는다 (2026-09-22 실측 후 되돌림)
   운영자 요청: "프레임이 고정되는 효과를 추가할 수 있나? 스크롤 다 내려서
   기존 효과들을 다 봐야지만 아래로 내릴 수 있게"

   sticky 로 이 섹션 안쪽을 붙여 실제로 돌려 봤으나 연출이 깨졌다. 이 구간은
   위 카드에서 나온 선이 아래 Solution 카드로 이어지는 것이 전부인데, 위를
   붙이면 아래 섹션이 화면에 들어오지 못한다. 붙어 있는 400~600px 동안
   선만 빈 흰 공간으로 내려가고 Solution 카드는 끝까지 화면 밖이었다.
   고정을 풀어야 비로소 카드가 올라온다. 즉 "다 보고 넘어간다"의 그 '다'가
   고정 중에는 보이지 않는다.

   ★ 대신 스크롤 거리로 같은 체감을 만든다. 이미 운영자 요청으로 2배 이상
   늘려 둔 상태이고, 더 필요하면 tail 높이와 진행도 분모를 키운다.

   ★ Chromium 함정 하나를 여기 남긴다. padding-bottom 은 sticky 가 움직일
   여지를 만들지 못한다. 붙는 요소는 부모의 content box 안에서만 제약되므로,
   그 요소가 유일한 자식이면 여지가 0 이라 position 이 sticky 로 계산되어도
   전혀 붙지 않는다(인라인 important 로 줘도 같았다). 여백이 필요하면
   ::after 처럼 자식으로 넣어야 한다. */

/* ── 아래 섹션으로 이어지는 꼬리 ────────────────────────────────────────── */
/*
   운영자 요청 2026-09-22: "스크롤 내리면 저 초록색 선이 아래 박스로
   이어지게 해줘"

   ★ 제목·리드 뒤를 관통해 카드 상단까지 간다. 그 글자들은 나중에
   나타나므로 선이 지나갈 때 자리가 비어 있다. 선이 닿은 뒤에는 선을
   지우고 그 자리에 문구가 올라온다. 선과 글자가 겹쳐 있는 순간이 없다.
*/
/* ★ 이 연출을 천천히 보게 하는 손잡이 (운영자 요청 2026-09-22
   "스크롤 다 내려서 기존 효과들을 다 봐야지만").
   위 여백을 늘리면 선이 자라는 거리와 아래 카드가 화면에 들어오는 시점이
   함께 늘어 순서가 그대로 유지된다. 진행도 식의 vh 계수를 키우는 것과는
   다르다. 그쪽은 t 만 느려져 카드가 상단바 뒤에서 서 버린다.
   꼬리 선 높이는 studio.js 가 이 여백에 맞춰 자동으로 잰다. */
@media (min-width: 981px) {
  [data-route] { padding-top: 320px; }
}

/* ★ 화면 고정 (운영자 요청 2026-09-22)
   "경계선에서 멈추게 하면 전체 화면으로 2번째 화면이 딱 가득차는데
    거기에서 고정되고 스크롤 내리면 카드섹션이 하나씩 나타나고 마지막에
    헤드라인이 나타난 다음에 이제 다시 아래로 내려가지게"

   ★ 붙이는 것은 이 Solution 섹션이다. 처음에 위 Find 섹션을 붙였다가
   되돌렸다. 위를 붙이면 정작 봐야 할 이 카드들이 화면에 들어오지 못한다.

   ★ 여백은 padding-bottom 이 아니라 ::after 로 만든다. Chromium 은 붙는
   요소를 부모의 content box 안에서만 제약해서, wrap 이 유일한 자식이면
   padding 을 아무리 줘도 움직일 여지가 0 이라 전혀 붙지 않는다(실측).

   ★ 붙어 있는 거리가 곧 이 여백이다. 그 사이 카드 셋과 헤드라인이 차례로
   선다. 낮은 화면에서는 끈다. wrap 높이(약 680px)가 들어갈 자리가 없으면
   붙은 채로 아래가 잘린다. */
[data-route] .wrap { position: relative; }

/* ★ 위 규칙보다 뒤에 둬야 한다. 특정도가 같아 순서로 갈린다(실측: 앞에
   두었더니 position 이 relative 로 계산돼 전혀 붙지 않았다). */
@media (min-width: 981px) and (min-height: 820px) {
  /* ★ 이 높이가 곧 붙어 있는 거리다. 늘리면 더 오래 머문다
     (운영자 요청 2026-09-22 "고정 스크롤을 조금 더 길게 끌어야지만").
     카드와 헤드라인이 서는 시점은 studio.js 에서 비율로 잡으므로 이 값만
     바꾸면 넷이 같은 간격으로 늘어난다. */
  /* 고정 구간. 운영자 지시 2026-09-23 으로 1780 에서 2500 으로 늘렸다.
     카드와 문구가 나타나는 진행도(studio.js PIN_CARD·PIN_TEXT)는 비율이라
     이 값만 바꾸면 전체가 함께 늘어난다. */
  [data-route]::after { content: ''; display: block; height: 2500px; }
  [data-route] > .wrap {
    position: sticky;
    top: calc(var(--top-h, 68px) + 20px);
  }
}
@media (prefers-reduced-motion: reduce) {
  [data-route]::after { display: none; }
  [data-route] > .wrap { position: static; }
}
[data-route] .wrap > *:not(.bridge--tail) { position: relative; z-index: 1; }

.bridge--tail {
  position: absolute; left: 0; right: 0;
  top: 0; height: 0;            /* studio.js 가 위 선 끝과 카드 위치를 재서 넣는다 */
  margin: 0; z-index: 0;
  opacity: 1;
  /* ★ 0.5 초면 문구가 올라오는 동안 선이 아직 남아 글자를 스친다.
     선이 먼저 비켜 주도록 짧게 잡았다. */
  transition: opacity var(--duration-base) var(--ease-enter);
  /* ★ absolute 라 wrap 의 좌우 여백을 안 받는다. 그대로 두면 세 선의
     x 가 위 구간과 16px 씩 어긋나 이어진 선으로 안 보인다(실측). */
  padding: 0 var(--gut);
}
/* 바탕선은 두지 않는다. 위 구간에서 이미 회색 바탕선을 봤으므로 여기서도
   깔면 아직 안 온 길이 두 번 보인다. 닿은 자리만 초록으로 그린다. */
.bridge--tail .bridge__c::before { display: none; }
/* 끝점은 꼬리 쪽에만 찍는다. 카드에 닿았다는 표시다. */
.bridge--tail .bridge__l::after { opacity: 0; }
.bridge--tail.is-hit .bridge__l::after { opacity: 1; }
/* 닿고 나면 지운다. 문구가 그 자리에 올라온다. */
.bridge--tail.is-fade { opacity: 0; }

/* ─ 선이 닿으면 아래 경로가 올라온다 ────────────────────────────────────── */
/*
   운영자 요청 2026-09-22: "저 선이 연결되서 아래 3개의 우리가 하는 것들이
   나오고, 조금 더 내리면 문구가 함께 끌어올려지면서 저 자리에 가게"

   ★ 제목·리드·카드가 한 덩어리로 올라온다. 제목만 먼저 세우면 카드가
   나타나기 전까지 빈 자리가 남는다.
*/
[data-route] .sec__label,
[data-route] .sec__title,
[data-route] .sec__lead,
[data-route] .node {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity calc(var(--duration-slow) * 2) var(--ease-enter), transform calc(var(--duration-slow) * 2) var(--ease-enter);
}
/* ★ 카드가 먼저 올라오고 문구가 뒤따른다. 운영자 문장이 그 순서다.
   "저 선이 연결되서 아래 3개의 우리가 하는 것들이 나오고, 조금 더 내리면
    문구가 함께 끌어 올려지면서 저 자리에 가게"

   ★ 제목이 DOM 에서 카드보다 위라, 늦게 나타나는 동안 그 자리가 비어
   보인다. 0.34 초라 눈에 걸리지 않는다. 1 초를 넘기면 빈 자리가 결함으로
   읽힌다. */
/* ★ 1단계. 카드는 스크롤을 내릴 때마다 하나씩 올라온다(운영자 요청
   2026-09-22 "스크롤 내릴떄마다 한국, 중국, 베트남 나타나고").
   전에는 셋이 0.1 초 간격으로 한꺼번에 나왔다. 지금은 studio.js 가
   진행도를 보고 카드마다 is-in 을 따로 붙인다.

   .is-up 은 선을 못 그리는 화면(모바일·움직임 줄이기)에서 셋을 한 번에
   띄우는 폴백이다. */
[data-route] .node.is-in,
[data-route].is-up .node { opacity: 1; transform: none; }


/* ★ 2단계. 문구는 스크롤을 더 내려야 나온다(운영자 요청 2026-09-22).
   전에는 카드와 같은 is-up 에 묶여 0.34 초 뒤 따라왔는데, 스크롤을 조금
   내렸을 뿐인데 셋이 한꺼번에 지나갔다. studio.js 가 진행도 2.4 에서
   is-text 를 붙인다. */
[data-route].is-text .sec__label { opacity: 1; transform: none; }
[data-route].is-text .sec__title { opacity: 1; transform: none; transition-delay: .07s; }
[data-route].is-text .sec__lead  { opacity: 1; transform: none; transition-delay: .15s; }

/* ─ 로고 띠 (marquee) ───────────────────────────────────────────────────── */
/*
   클라이언트 로고 56 개를 격자로 세워 두면 한 화면을 통째로 차지하고
   읽는 사람이 훑지 않는다. 우에서 좌로 흐르는 띠 셋으로 바꿨다
   (운영자 요청 2026-09-22).

   ★ 끊김 없이 이으려면 같은 목록을 두 벌 두고 정확히 절반만큼 움직인다.
   한 벌만 두고 100% 를 움직이면 끝에서 빈 구간이 생긴다.

   ★ 마우스를 올리면 멈춘다. 흐르는 로고를 정확히 겨냥할 수 없기 때문이다.
   멈춘 상태에서 개별 로고에 올리면 색이 돌아온다.
*/
/* ★ 좌우 끝을 흐리게 지운다. 마스크가 없으면 화면 가장자리에서 로고가
   반쯤 잘린 채 툭 끊겨 고장처럼 보인다. 흐려지면 띠가 화면 밖으로
   이어지는 것으로 읽힌다. */
/* ★ 화면 끝에서 끝까지 흐른다 (운영자 요청 2026-09-22).
   wrap 안에 가두면 좌우에 빈 자리가 남아 로고가 상자에 담긴 것처럼
   보인다.

   ★ CSS 로 wrap 을 빠져나오지 않는다. 100vw 는 세로 스크롤바 폭을
   포함해 가로 스크롤을 만들고, 음수 마진 계산은 max-width 가 걸린
   wrap 안에서 화면 끝까지 못 간다. HTML 에서 .mq 를 wrap 밖에 둔다. */
.mq {
  display: grid; gap: 10px; overflow: hidden;
  /* ★ 6% 로는 약하다. 컨테이너 폭이 1,120px 이라 6% 가 67px 인데 로고 한
     칸이 164px 이라 절반도 못 가린다. 12% 면 134px 로 한 칸의 대부분을
     덮는다(2026-09-22 실측). */
  -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
          mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent);
}
.mq__row {
  display: flex; width: max-content;
  will-change: transform;
}
.mq__row:hover { animation-play-state: paused; }
/* ★ 2026-09-27: 화면 밖에서는 돌지 않는다. .is-off 는 studio.js 관찰자가 붙인다. */
.mq.is-off .mq__row { animation-play-state: paused; }
/* ★ 오른쪽 여백이 트랙 안 gap 과 같아야 두 벌 사이 간격이 내부와 같아진다.
   5px 로 두면 이음매에서 간격이 좁아져 복제 지점이 눈에 띈다. */
.mq__track {
  display: flex; gap: 10px; margin: 0; padding: 0 10px 0 0; list-style: none;
  flex: 0 0 auto;
}
/* ★ transform 은 studio.js 가 매 프레임 준다. 마우스를 피해 밀려나는
   효과다(운영자 요청 2026-09-22). transition 을 짧게 걸어 두면 커서를
   조금 늦게 따라오면서 물이 밀리는 느낌이 난다. 0 이면 손가락에 딱
   붙어 기계처럼 보이고, 0.3 을 넘으면 따로 논다. */
.mq__track li {
  display: flex; align-items: center; justify-content: center;
  flex: 0 0 auto;
  width: 164px; height: 62px; padding: 10px 14px;
  border: 1px solid var(--line-2); border-radius: 9px;
  background: #fff;
  transition: border-color var(--duration-fast) var(--ease-enter), transform var(--duration-fast) var(--ease-enter);
}
/* ★ 흑백을 그대로 둔다. 마우스를 올려 색이 돌아오는 반응은 포트폴리오
   카드로 옮겼다(운영자 결정 2026-09-22 (a)안). 흐르는 로고를 정확히
   겨냥하기 어렵고, 여기서는 밀려나는 움직임이 그 자리를 대신한다. */
.mq__track img {
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  filter: grayscale(1) contrast(1.35) brightness(.86);
  opacity: .8;
}
.mq__track li:hover { border-color: var(--line); }
.mq__track span {
  font-size: 12px; font-weight: 600; color: var(--ink-3);
  text-align: center; line-height: 1.35; word-break: keep-all;
}

@keyframes mqLeft {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
/* ★ 가운데 줄만 반대로 흐른다. 셋이 같은 방향이면 화면 전체가 한 덩어리로
   미끄러져 보여 어지럽다. 방향이 갈리면 띠 셋이 따로 읽힌다. */
@keyframes mqRight {
  from { transform: translateX(-50%); }
  to   { transform: translateX(0); }
}
.mq__row--a { animation: mqLeft  52s linear infinite; }
.mq__row--b { animation: mqRight 58s linear infinite; }
.mq__row--c { animation: mqLeft  64s linear infinite; }

/* ★ 움직임 줄이기를 켠 분에게는 흐르지 않는다. 대신 한 벌만 남겨
   줄바꿈되는 목록으로 보여 준다. 복제본은 같은 로고가 두 번 읽히므로
   숨긴다. */
@media (prefers-reduced-motion: reduce) {
  /* ★ 격자로 되돌린다. flex-wrap 만으로는 줄바꿈이 안 된다. 트랙이
     flex: 0 0 auto 라 내용 폭(3,306px)을 그대로 갖고, 로고가 화면
     오른쪽으로 삐져나간다(2026-09-22 실측). grid 로 바꿔야 칸이
     부모 폭을 나눠 갖는다. */
  .mq { -webkit-mask-image: none; mask-image: none; display: block; }
  .mq__row { animation: none; display: block; width: auto; }
  .mq__track {
    display: grid; grid-template-columns: repeat(7, 1fr);
    gap: 10px; margin: 0 0 10px; padding: 0;
  }
  .mq__track li { width: auto; transition: none; transform: none !important; }
  .mq__track[aria-hidden="true"] { display: none; }
  /* 스크롤 연출을 끈다. 선은 채워 두고 아래 경로는 바로 보인다. */
  .bridge__l { --p: 1 !important; }
  .bridge__l::before { transition: none; }
  [data-route] .sec__label,
  [data-route] .sec__title,
  [data-route] .sec__lead,
  [data-route] .node { opacity: 1; transform: none; transition: none; }
  .find__bg { opacity: .1; }
  .bridge__l::after { transition: none; opacity: 1; }
}

/* ─ 포트폴리오 캐러셀 ───────────────────────────────────────────────────── */
/*
   운영자 요청 2026-09-22. 가운데 한 장이 또렷하고 좌우는 작게 흐려진다.
   끝까지 가면 처음으로 돌아와 무한히 돈다.

   ★ 무한 회전은 같은 목록을 세 벌 이어 붙이고 가운데 벌에서 시작하는
   방식이다. 끝 벌에 닿으면 transition 을 끄고 가운데 벌 같은 자리로
   되돌린다. 눈에는 이어져 보인다.

   ★ 사진이 배경이다. 아직 사진이 없는 건은 짙은 남색으로 두고 글자만
   세운다. 빈 회색 네모를 두면 로딩 실패로 읽힌다.
*/
.caro { position: relative; margin-top: 44px; }

/* 좌우로 넘어가는 카드를 잘라 낸다 */
.caro__view { overflow: hidden; padding: 10px 0 18px; }

.caro__track {
  display: flex; gap: 24px;
  transition: transform calc(var(--duration-slow) * 2) var(--ease-enter);
  will-change: transform;
}
.caro.is-jump .caro__track { transition: none; }
/* ★ 2026-09-27 (개선안 A5): 손가락으로 밀어 넘긴다. 세로 스크롤은 브라우저에
   맡기고 가로 움직임만 받는다. 끄는 동안은 전환 없이 손가락을 1:1 로 따른다. */
.caro__view { touch-action: pan-y; }
.caro.is-drag .caro__track { transition: none; cursor: grabbing; }
.caro.is-drag { user-select: none; -webkit-user-select: none; }

.caro__item {
  position: relative; flex: 0 0 var(--caro-w, 580px);
  aspect-ratio: 16 / 9;
  border-radius: 16px; overflow: hidden;
  background: #0A1628;
  transform: scale(.87);
  opacity: .42;
  transition: transform calc(var(--duration-slow) * 2) var(--ease-enter), opacity var(--duration-slow) var(--ease-enter),
              box-shadow var(--duration-slow) var(--ease-enter);
  cursor: pointer;
}
.caro__item.is-center {
  transform: scale(1);
  opacity: 1;
  box-shadow: 0 22px 54px rgba(0, 0, 0, .42);
}

/* 배경 사진. JS 가 --photo 를 넣는다 */
.caro__ph {
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  /* ★ 평소에는 색을 뺀다. 마우스를 올리면 돌아오면서 살짝 확대된다
     (운영자 요청). 로고 띠에서 뺀 반응을 여기서 쓴다. */
  filter: grayscale(.65) brightness(.72);
  transform: scale(1);
  transition: filter var(--duration-slow) var(--ease-enter), transform calc(var(--duration-slow) * 2) var(--ease-enter);
}
.caro__item.is-center:hover .caro__ph {
  filter: grayscale(0) brightness(.82);
  transform: scale(1.06);
}

/* 사진이 없을 때. 글자가 읽히도록 어두운 바탕을 세운다.
   ★ 섹션 배경(#0A1628)보다 밝아야 카드 경계가 보인다. 같은 색으로
   두면 카드가 배경에 녹아 글자만 떠 있는 것처럼 보인다. */
.caro__ph--none {
  background-image:
    radial-gradient(130% 100% at 76% 10%, rgba(20, 184, 166, .30), transparent 60%),
    linear-gradient(158deg, #1D3350 0%, #14243C 58%, #101D31 100%);
}
/* 사진이 없는 카드는 테두리로 경계를 세운다. 사진이 있으면 필요 없다. */
.caro__item:has(.caro__ph--none) { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.caro__item.is-center:has(.caro__ph--none) {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14), 0 22px 54px rgba(0, 0, 0, .42);
}

/* 아래에서 올라오는 그늘. 글자가 사진에 묻히지 않게 한다 */
.caro__item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 12, 22, .92) 0%, rgba(6, 12, 22, .62) 34%, rgba(6, 12, 22, .06) 68%);
  pointer-events: none;
}

.caro__in {
  position: absolute; inset: auto 0 0 0; z-index: 1;
  padding: 0 26px 24px;
  pointer-events: none;
}
.caro__tag {
  display: inline-flex; align-items: center;
  font-family: var(--font-en);
  font-size: 13px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: #fff;
  background: rgba(255, 255, 255, .17);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px; padding: 4px 11px;
  backdrop-filter: blur(3px);
  transition: background-color var(--duration-slow) var(--ease-enter), border-color var(--duration-slow) var(--ease-enter);
}
.caro__item.is-center:hover .caro__tag {
  background: var(--ac); border-color: var(--ac);
}
.caro__t {
  margin: 12px 0 0;
  font-size: 20px; font-weight: 800; line-height: 1.38;
  letter-spacing: -.025em; color: #fff;
  word-break: keep-all;
  text-shadow: 0 2px 14px rgba(0, 0, 0, .5);
}
.caro__m {
  margin: 8px 0 0;
  font-size: 13px; line-height: 1.5;
  color: rgba(255, 255, 255, .82);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}

/* 좌우 버튼. 가운데 카드 좌우 가장자리에 겹쳐 놓는다 */
.caro__nav {
  position: absolute; top: 50%; z-index: 3;
  width: 46px; height: 46px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .3);
  background: rgba(10, 22, 40, .58);
  backdrop-filter: blur(6px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transform: translateY(-50%);
  transition: background-color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}
.caro__nav:hover { background: var(--ac); border-color: var(--ac); }
.caro__nav:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }
/* ★ 버튼을 가운데 카드 바깥에 둔다. 경계에 걸치면 제목 위를 덮는다.
   46px 은 버튼 폭이라 오른쪽 끝이 카드 왼쪽 경계에 닿는다. */
.caro__nav--prev { left: calc(50% - var(--caro-w, 580px) / 2 - 46px - 12px); }
.caro__nav--next { left: calc(50% + var(--caro-w, 580px) / 2 + 12px); }
.caro__nav svg { width: 18px; height: 18px; }

/* ★ 2026-09-27: 버튼은 누르는 영역(28×44)만 맡고 보이는 점은 ::before 가
   그린다. 전에는 7×7 버튼 자체가 점이라 손가락으로 누르기 어려웠고, 켜질 때
   width 를 늘려 레이아웃을 다시 계산했다. 이제 scaleX 로 늘어난다. */
.caro__dots {
  display: flex; justify-content: center; gap: 0;
  margin-top: 6px;
}
.caro__dot {
  position: relative;
  width: 28px; height: 44px;
  border: 0; padding: 0; cursor: pointer;
  background: none;
}
.caro__dot::before {
  content: ''; position: absolute; left: 50%; top: 50%;
  width: 20px; height: 7px; margin: -3.5px 0 0 -10px;
  border-radius: 4px;
  background: rgba(255, 255, 255, .28);
  transform: scaleX(.35);
  transition: background-color var(--duration-base) var(--ease-enter), transform var(--duration-base) var(--ease-enter);
}
.caro__dot.is-on::before { background: var(--ac); transform: none; }
.caro__dot:focus-visible { outline: 2px solid var(--ac); outline-offset: -8px; border-radius: 8px; }

/* 흰 배경 섹션에 놓일 때(전체 페이지)는 점 색을 뒤집는다 */
/* ★ 조건을 뒤집었다(2026-09-23). 전에는 sec--feature 가 유일한 어두운
   섹션이라 "그것이 아니면 밝다"로 썼는데, 이제 sec--feature 가 밝고
   sec--onink 가 붙은 것만 어둡다. */
.sec:not(.sec--onink) .caro__dot::before { background: var(--line); }
.sec:not(.sec--onink) .caro__dot.is-on::before { background: var(--ac); }

.caro__more { display: flex; justify-content: center; margin-top: 34px; }

@media (max-width: 1080px) {
  .caro { --caro-w: 68vw; }
}
@media (max-width: 760px) {
  .caro { --caro-w: 82vw; }
  .caro__track { gap: 14px; }
  .caro__t { font-size: 16px; }
  .caro__in { padding: 0 18px 18px; }
  /* 화면이 좁으면 버튼이 카드 위를 덮는다. 안쪽으로 당긴다 */
  .caro__nav { width: 38px; height: 38px; }
  /* 보이는 원은 38px, 누르는 칸은 44px */
  .caro__nav::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; }
  .caro__nav--prev { left: 10px; }
  .caro__nav--next { left: auto; right: 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .caro__track { transition: none; }
  .caro__item { transition: none; }
  .caro__ph { transition: none; }
  .caro__item.is-center:hover .caro__ph { transform: none; }
}

/* ─ 포트폴리오 전체 페이지 ──────────────────────────────────────────────── */
/*
   운영자 요청 2026-09-22. 사진이 가득 차는 3열 격자와 두 축 필터다.
   메인 캐러셀이 "골라 보여주는" 자리라면 여기는 "전부 훑는" 자리다.
*/

/* 어두운 배경. 사진이 이어지면 격자가 한 덩어리로 읽힌다. */
.sec--dark { background: #0A1628; color: rgba(255, 255, 255, .78); }
.sec--dark .sec__title { color: #fff; }

/* ── 필터 탭 ── */
.ftabs { margin-top: 34px; display: grid; gap: 10px; }
.ftabs__row { display: flex; flex-wrap: wrap; gap: 8px; }
.ftab {
  font-family: inherit; font-size: 13px; font-weight: 600;
  color: var(--ink-2); background: #fff;
  border: 1px solid var(--line); border-radius: 999px;
  padding: 8px 16px; min-height: 38px; cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter);
}
.ftab:hover { border-color: var(--ink-3); }
.ftab.is-on { background: var(--ac); border-color: var(--ac); color: #fff; }
.ftab:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
/* 연도는 보조 축이라 한 단계 낮춘다 */
.ftab--y { font-size: 12px; padding: 6px 13px; min-height: 34px; }

/* ── 격자 ── */
/*
   ★ 화면 끝에서 끝까지 채운다(운영자 요청 2026-09-22). wrap 안에 가두면
   좌우에 빈 자리가 남아 사진이 상자에 담긴 것으로 보인다. 사진이 붙어
   이어져야 실적이 한 덩어리로 읽힌다.
*/
.sec--bleed { padding-left: 0; padding-right: 0; }
.fg {
  display: grid; gap: 10px;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 8px;
  padding: 0 10px;
}
.fg__count {
  margin: 0 0 18px; font-size: 13px;
  color: rgba(255, 255, 255, .55);
}
/* ★ 화면에서는 감추되 스크린리더에는 남긴다. 필터를 바꿨을 때 몇 건이
   남았는지 눈으로 보는 사람은 격자로 알지만, 못 보는 사람은 이 문장이
   유일한 단서다. display:none 이면 그것도 사라진다. */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  white-space: nowrap; border: 0;
}

.fg__item {
  position: relative; aspect-ratio: 4 / 3;
  border-radius: 12px; overflow: hidden;
  background: #101D31; cursor: pointer;
  transition: transform var(--duration-slow) var(--ease-enter), box-shadow var(--duration-slow) var(--ease-enter);
}
.fg__item:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0, 0, 0, .44); }
.fg__item:focus-visible { outline: 2px solid var(--ac); outline-offset: 3px; }

.fg__ph {
  position: absolute; inset: 0;
  background-image: var(--photo, none);
  background-size: cover; background-position: center;
  filter: grayscale(.55) brightness(.74);
  transform: scale(1);
  transition: filter var(--duration-slow) var(--ease-enter), transform calc(var(--duration-slow) * 2) var(--ease-enter);
}
.fg__item:hover .fg__ph { filter: grayscale(0) brightness(.86); transform: scale(1.07); }
.fg__ph--none {
  background-image:
    radial-gradient(130% 100% at 76% 10%, rgba(20, 184, 166, .26), transparent 60%),
    linear-gradient(158deg, #1D3350 0%, #14243C 58%, #101D31 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08);
}

.fg__item::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(6, 12, 22, .9) 0%, rgba(6, 12, 22, .5) 38%, rgba(6, 12, 22, 0) 72%);
  pointer-events: none;
}

/* ★ 오른쪽 위 분야 배지 (운영자 요청 2026-09-22). 카드에서 읽을 것이
   행사명·발주기관·연도 셋인데, 그것만으로는 무슨 성격의 일이었는지
   모른다. 데모데이와 교육과 제품 개발은 같은 발주기관에서도 다르다. */
.fg__cat {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  font-size: 13px; font-weight: 700; letter-spacing: -.01em;
  color: #fff;
  background: rgba(10, 22, 40, .5);
  border: 1px solid rgba(255, 255, 255, .26);
  border-radius: 999px; padding: 4px 10px;
  backdrop-filter: blur(4px);
  transition: background-color var(--duration-base) var(--ease-enter), border-color var(--duration-base) var(--ease-enter);
}
.fg__item:hover .fg__cat { background: var(--ac); border-color: var(--ac); }

/* 오른쪽 아래 화살표. 누를 수 있다는 표시다. */
.fg__go {
  position: absolute; right: 14px; bottom: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .16);
  border: 1px solid rgba(255, 255, 255, .26);
  backdrop-filter: blur(4px);
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity var(--duration-base) var(--ease-enter), transform var(--duration-base) var(--ease-enter), background-color var(--duration-base) var(--ease-enter);
}
.fg__go svg { width: 15px; height: 15px; }
.fg__item:hover .fg__go,
.fg__item:focus-visible .fg__go { opacity: 1; transform: none; }
.fg__item:hover .fg__go { background: var(--ac); border-color: var(--ac); }

.fg__in { position: absolute; inset: auto 0 0 0; z-index: 1; padding: 0 18px 16px; }
.fg__t {
  margin: 0; font-size: 16px; font-weight: 700; line-height: 1.42;
  letter-spacing: -.02em; color: #fff; word-break: keep-all;
  text-shadow: 0 2px 12px rgba(0, 0, 0, .55);
}
.fg__m {
  margin: 7px 0 0; font-size: 12px;
  color: rgba(255, 255, 255, .72);
  text-shadow: 0 1px 10px rgba(0, 0, 0, .5);
}
.fg__dot { margin: 0 7px; opacity: .45; }

.fg__empty {
  margin: 40px 0 0; text-align: center;
  font-size: 14px; color: rgba(255, 255, 255, .58);
}

/* 필터로 숨는 칸 */
.fg__item[hidden] { display: none; }

@media (max-width: 1000px) { .fg { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .fg { grid-template-columns: 1fr; } }

/* ── 상세 ── */
/*
   왼쪽에 정보, 오른쪽에 사진이다(운영자 참고 화면). 사진이 여러 장이면
   오른쪽에서 슬라이드로 돈다.
*/
.fd {
  border: 0; padding: 0; border-radius: 18px;
  width: min(1080px, 94vw); max-width: none;
  background: #0E1B2E; color: rgba(255, 255, 255, .82);
  overflow: hidden;
}
.fd::backdrop { background: rgba(4, 9, 17, .74); backdrop-filter: blur(3px); }
.fd__x {
  position: absolute; top: 12px; right: 14px; z-index: 5;
  width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .22);
  background: rgba(10, 22, 40, .6); color: #fff;
  font-size: 20px; line-height: 1; cursor: pointer;
}
.fd__x:hover { background: var(--ac); border-color: var(--ac); }

.fd__grid { display: grid; grid-template-columns: 340px 1fr; min-height: 420px; }
.fd__info { padding: 34px 30px; }
.fd__tag {
  margin: 0; font-family: var(--font-en);
  font-size: 13px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ac);
}
.fd__t {
  margin: 12px 0 0; font-size: 28px; font-weight: 800;
  line-height: 1.34; letter-spacing: -.025em; color: #fff;
  word-break: keep-all;
}
.fd__meta {
  margin: 22px 0 0; padding-top: 20px;
  border-top: 1px solid rgba(255, 255, 255, .12);
  display: grid; gap: 12px; font-size: 14px;
}
.fd__meta > div { display: grid; grid-template-columns: 62px 1fr; gap: 10px; }
.fd__meta dt { color: rgba(255, 255, 255, .5); font-size: 13px; }
.fd__meta dd { margin: 0; color: rgba(255, 255, 255, .88); word-break: keep-all; }

.fd__visual {
  position: relative; min-height: 420px;
  background-image:
    radial-gradient(130% 100% at 76% 10%, rgba(20, 184, 166, .24), transparent 60%),
    linear-gradient(158deg, #1D3350 0%, #14243C 58%, #101D31 100%);
  background-size: cover; background-position: center;
}

@media (max-width: 840px) {
  .fd__grid { grid-template-columns: 1fr; min-height: 0; }
  /* 사진을 위로 올린다. 좁은 화면에서 글자부터 나오면 무엇을 보는지 모른다 */
  .fd__visual { order: -1; min-height: 220px; aspect-ratio: 16 / 10; }
  .fd__info { padding: 24px 22px 28px; }
  .fd__t { font-size: 20px; }
}

@media (prefers-reduced-motion: reduce) {
  .fg__item, .fg__ph, .fg__go { transition: none; }
  .fg__item:hover { transform: none; }
  .fg__item:hover .fg__ph { transform: none; }
}

/* ─ 반응형 ──────────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .grid--4, .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .stats   { grid-template-columns: repeat(2, 1fr); }
  .logos   { grid-template-columns: repeat(5, 1fr); }
  /* ★ 한 칸 폭이 넓어져 제목이 한 줄에 들어가므로 두 줄 자리를 비운다 */
  .find__ko { min-height: 0; }
}
@media (max-width: 820px) {
  :root { --gut: 18px; }
  .sec { padding: 72px 0; }
  .sec--tight { padding: 72px 0; }
  .sec--chapter { padding-top: 104px; }
  .sec__body { margin-top: 36px; }
  /* ★ 히어로는 모바일에서도 첫 화면을 다 쓴다. 아래 여백만 줄인다.
     padding 만 주면 min-height 가 무력화되지 않으므로 풀 스크린이 유지된다. */
  /* 위 분기와 같은 이유로 padding-bottom 만 준다 */
  .hero { padding-bottom: 72px; }
  .grid--2, .grid--3 { grid-template-columns: 1fr; }
  /* ★ 세 칸이 한 줄로 쌓이면 아래로 내려가는 선이 뜻을 잃는다. 선이
     칼럼 중앙을 가리키는 구조인데 칼럼이 하나가 되기 때문이다. */
  .bridge { display: none; }
  .sec--bridged { padding-bottom: 72px; }
  .form__2 { grid-template-columns: 1fr; }
  .contact { grid-template-columns: 1fr; gap: 28px; }
  /* ★ 2026-09-22 한 줄 헤더로 바꾸면서 여기 남아 있던 옛 규칙 셋을 지웠다.
     height:56px 는 둘째 줄로 내려간 메뉴를 헤더 밖으로 밀어내 히어로 위에
     겹치게 했고, .top__cta{display:none} 은 문의 버튼을 통째로 숨겼다.
     둘 다 위 줄에 자리가 없던 두 줄 구조의 흔적이다.
     .top__studios·.top__studio 는 이제 없는 클래스다. */
  .top__cta { min-height: 38px; padding: 0 14px; font-size: 13px; }
  .top__switch { font-size: 13px; }
  /* ★ 390px 실측: 로고 135 + 전환 117 + 문의 73 + 간격 28 = 353 으로 내부
     폭 339 를 14px 넘겨 문의 버튼이 셋째 줄로 밀렸다. "Studio" 를 빼면
     전환이 65px 이 되어 한 줄에 들어간다. 뜻은 그대로 통한다. */
  .top__switch-x { display: none; }
  .foot__cols { margin-left: 0; }
}
@media (max-width: 560px) {
  .grid--4, .grid--5 { grid-template-columns: 1fr; }
  .stats   { grid-template-columns: 1fr 1fr; }
  .logos   { grid-template-columns: repeat(3, 1fr); gap: 8px; }
  .logos li { height: 54px; padding: 8px 10px; }
}
/* ─ 서비스 슬라이드 (2026-09-27 운영자 요청) ─────────────────────────────
   서비스 네 가지를 한 장씩 넘겨 본다. 장마다 슬로건·하는 일·장점이 함께 있다.
   탭(01~04)으로 바로 가고, 화살표나 손가락으로 좌우로 넘긴다(studio.js initSvc).
   ★ 전에 넣은 모바일 단계 가로 스크롤(개선안 B4)은 걷어냈다. 슬라이드 안에서
   또 가로로 넘기면 두 제스처가 부딪친다. 모바일 단계는 세로로 촘촘히 쌓는다. */
/* ★ 화살표를 탭 줄 오른쪽에 둔다. 슬라이드마다 높이가 달라 아래에 두면 넘길
   때마다 버튼이 위아래로 움직여 연달아 누를 수 없다. */
/* 탭과 화살표는 한 줄(.svc__bar)에 둔다. ★ 처음엔 .svc 전체를 그리드로 짰다가
   풀 와이드 창(100vw)이 열 폭 계산을 밀어내 화살표가 사라졌다(2026-09-27 실측).
   창은 그리드 밖 일반 블록으로 둔다. */
.svc__bar { display: flex; align-items: center; gap: 16px; margin: 0 0 20px; }
.svc__tabs {
  flex: 1 1 auto; min-width: 0;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
  margin: 0; padding: 0;
}
.svc__nav { flex: none; }
.svc__tab {
  display: flex; align-items: center; gap: 10px;
  min-height: 52px; padding: 10px 16px;
  border: 1px solid var(--line); border-radius: var(--r);
  background: var(--bg); color: var(--ink-2);
  font: inherit; font-size: 14px; font-weight: 700; text-align: left; cursor: pointer;
  transition: color var(--duration-fast) var(--ease-enter), border-color var(--duration-fast) var(--ease-enter),
              background-color var(--duration-fast) var(--ease-enter);
}
.svc__tab:hover { border-color: var(--ac); color: var(--ink); }
.svc__tab:active { transform: scale(.98); transition-duration: var(--duration-press); }
.svc__tab[aria-selected="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }
.svc__tab:focus-visible { outline: 2px solid var(--ac); outline-offset: 2px; }
.svc__tab-no { font-family: var(--font-en); font-size: 13px; color: var(--ac); font-variant-numeric: tabular-nums; }
.svc__tab[aria-selected="true"] .svc__tab-no { color: #7ee2b8; }

.svc__view {
  overflow: hidden; touch-action: pan-y;
  border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
  background: var(--bg);
}
.svc__track {
  display: flex; align-items: flex-start;
  transform: translateX(calc(var(--i, 0) * -100%));
  transition: transform calc(var(--duration-slow) * 2) var(--ease-enter);
  will-change: transform;
}
.svc.is-drag .svc__track { transition: none; }
.svc.is-drag { user-select: none; -webkit-user-select: none; }
.svc__slide { flex: 0 0 100%; min-width: 0; padding: 48px 48px 44px; }

.svc__no {
  margin: 0; font-family: var(--font-en); font-size: 13px; font-weight: 700;
  letter-spacing: .08em; color: var(--ac);
}
.svc__t {
  margin: 12px 0 0; max-width: 22em;
  font-size: clamp(22px, 2.4vw, 28px); line-height: 1.4; font-weight: 800; letter-spacing: -.02em;
  text-wrap: balance;
}
.svc__d { margin: 14px 0 0; max-width: 62ch; font-size: 16px; color: var(--ink-2); }
.svc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 0; padding: 0; list-style: none; }
.svc__chips li {
  padding: 7px 14px; border-radius: 999px;
  background: var(--bg-2); border: 1px solid var(--line);
  font-size: 14px; color: var(--ink);
}
.svc__sub { margin: 40px 0 0; font-size: 14px; font-weight: 700; color: var(--ink); }
.svc__steps { margin-top: 18px; }
.svc__edge { margin-top: 36px; }

.svc__nav { display: flex; align-items: center; gap: 10px; }
.svc__arrow {
  width: 44px; height: 44px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--bg); color: var(--ink); cursor: pointer;
  transition: border-color var(--duration-fast) var(--ease-enter), color var(--duration-fast) var(--ease-enter);
}
.svc__arrow:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.svc__arrow:active:not(:disabled) { transform: scale(.94); }
.svc__arrow:disabled { opacity: .35; cursor: default; }
.svc__arrow svg { width: 18px; height: 18px; }
.svc__count { margin: 0; min-width: 44px; text-align: center; font-family: var(--font-en); font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

@media (max-width: 760px) {
  .svc__nav { display: none; }        /* 모바일은 탭과 손가락으로 넘긴다 */
  .svc__tabs { gap: 6px; }
  .svc__tab { flex-direction: column; align-items: flex-start; gap: 2px; padding: 8px 10px; font-size: 13px; }
  .svc__slide { padding: 28px 20px 26px; }
  /* 슬라이드 안 단계 카드는 세로로 촘촘히 */
  .svc .steps { display: grid; grid-template-columns: 1fr; gap: 10px; }
  .svc .steps .card--step { padding: 18px 18px 16px; }
}
@media (prefers-reduced-motion: reduce) {
  .svc__track { transition: none; }
}

/* ─ Venture 시그니처 프로그램: 남색 + 카드별 3D 에셋 (2026-09-27 운영자 요청) ──
   "여기도 관련 이미지를 생성해서 백그라운드에 깔고 블랙으로 바꾸자 / 에셋을 넣던가".
   Programs 서비스 구역과 같은 바탕·같은 에셋 스타일(assets/prog/*.webp). 카드 위쪽
   그림 칸은 카드 끝까지 채우고 아래쪽을 바탕색으로 녹여 글과 이어지게 한다. */
.sec--prog {
  background: var(--ink);
  --ac: #2DB87C;                 /* Venture 어두운 섹션 값 (venture.html 대비 실측 7.13:1) */
  color: rgba(255,255,255,.72);
}
.sec--prog .sec__title { color: #fff; }
.sec--prog .sec__lead { color: rgba(255,255,255,.66); }
/* ★ 2026-09-28 운영자 "너무 넓고 문구가 우선시 되어야" → 그림을 카드 위 전폭에서
   오른쪽 작은 칸으로 옮겼다. 글이 왼쪽 위에서 바로 시작한다. */
.sec--prog .card {
  position: relative; overflow: hidden;
  display: grid; grid-template-columns: minmax(0, 1fr) 150px; column-gap: 20px; align-content: start;
  padding: 28px;
  background: rgba(255,255,255,.035);
  border-color: rgba(255,255,255,.12);
  border-radius: calc(var(--r) + 4px);
  transition: border-color var(--duration-base) var(--ease-enter), background-color var(--duration-base) var(--ease-enter);
}
.sec--prog .card > :not(.card__art) { grid-column: 1; }
.sec--prog .card:hover { border-color: rgba(255,255,255,.26); background: rgba(255,255,255,.055); }
.sec--prog .card__art {
  display: block; grid-column: 2; grid-row: 1 / span 6; align-self: start;
  width: 150px; max-width: none; margin: -6px -6px 0 0;
  aspect-ratio: 1; object-fit: cover; object-position: center 45%;
  mix-blend-mode: lighten;   /* 그림의 남색 바탕이 카드 바탕보다 어두워 사각형이 보이던 것을 지운다 */
  -webkit-mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
          mask-image: radial-gradient(closest-side, #000 72%, transparent 100%);
  transition: transform var(--duration-slow) var(--ease-enter);
}
@media (max-width: 640px) {
  .sec--prog .card { grid-template-columns: minmax(0, 1fr) 84px; column-gap: 12px; padding: 22px; }
  .sec--prog .card__art { width: 84px; margin: -4px -6px 0 0; }
}
.sec--prog .card:hover .card__art { transform: scale(1.03); }
.sec--prog .card__kicker { color: var(--ac); }
.sec--prog .card__title { color: #fff; font-size: 20px; }
.sec--prog .card__body { color: rgba(255,255,255,.68); }
@media (prefers-reduced-motion: reduce) {
  .sec--prog .card:hover .card__art { transform: none; }
}

/* ─ 서비스 구역: 남색 풀 와이드 (2026-09-27 운영자 요청) ─────────────────
   "가로 픽셀 지키지 말고 여긴 전체 풀 와이드로, 포폴처럼 검정 레이아웃으로".
   탭과 머리글은 본문 폭을 지키고, 슬라이드 창만 화면 끝까지 편다.
   배경 에셋은 서비스별 3D 오브젝트(assets/svc/*.webp, Gemini 생성)다.
   에셋 바탕 남색이 --ink 보다 한두 단계 밝아서 가장자리를 마스크로 녹인다. */
.sec--svc {
  background: var(--ink);
  --ac: var(--ac-dark, #22A06C);
  color: rgba(255,255,255,.72);
  overflow-x: clip;              /* 100vw 창이 스크롤바 폭만큼 넘치는 것을 자른다 */
  padding-bottom: 0;             /* 슬라이드 안에 이미 아래 여백이 있다. 밑선 뒤 빈 띠를 없앤다 */
}

.sec--svc .sec__title { color: #fff; }
.sec--svc .sec__lead { color: rgba(255,255,255,.66); }

.sec--svc .svc__tab {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.14);
  color: rgba(255,255,255,.72);
}
.sec--svc .svc__tab:hover { border-color: var(--ac); color: #fff; }
.sec--svc .svc__tab[aria-selected="true"] { background: #fff; border-color: #fff; color: var(--ink); }
.sec--svc .svc__tab[aria-selected="true"] .svc__tab-no { color: #0F766E; }   /* 흰 바탕 위라 밝은 --ac 는 대비 3.32. 흰 배경용 청록(5.47:1) */
/* ★ 2026-09-27 운영자 요청: 화살표를 탭 줄 구석이 아니라 슬라이드 창 좌우에.
   높이는 슬로건 구역(.svc__lead)의 가운데에 고정한다. 장마다 창 높이가 달라도
   화살표가 움직이지 않는다. 가로는 본문 폭 바깥 여백에 둔다. */
.sec--svc .svc__view { position: relative; }
.sec--svc .svc__arrow {
  position: absolute; z-index: 2;
  top: calc(clamp(360px, 38vw, 520px) / 2 + 24px);
  width: 56px; height: 56px;
  transform: translateY(-50%);
  background: rgba(10, 22, 40, .55); border-color: rgba(255,255,255,.24); color: #fff;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
}
.sec--svc .svc__arrow--prev { left: max(16px, calc((100vw - var(--max)) / 2 - 76px)); }
.sec--svc .svc__arrow--next { right: max(16px, calc((100vw - var(--max)) / 2 - 76px)); }
.sec--svc .svc__arrow svg { width: 22px; height: 22px; }
.sec--svc .svc__arrow:hover:not(:disabled) { border-color: var(--ac); color: var(--ac); }
.sec--svc .svc__arrow:active:not(:disabled) { transform: translateY(-50%) scale(.94); }
.sec--svc .svc__arrow:disabled { opacity: .25; }
@media (max-width: 760px) {
  .sec--svc .svc__arrow { display: none; }   /* 모바일은 탭과 손가락으로 넘긴다 */
}
.sec--svc .svc__count { color: rgba(255,255,255,.66); }

.sec--svc .svc__view {
  width: 100vw; margin-left: calc(50% - 50vw);
  border: 0; border-radius: 0; background: transparent;
  border-top: 1px solid rgba(255,255,255,.08);

}
.sec--svc .svc__slide { position: relative; padding: 0; overflow: hidden; }
.svc__art {
  position: absolute; top: 0; right: 0; z-index: 0;
  width: min(1180px, 74vw); aspect-ratio: 16 / 9; height: auto; object-fit: cover;
  pointer-events: none;
  /* 왼쪽은 글 쪽으로 녹이고, 위아래 끝은 짧게 녹여 사각형 경계를 지운다.
     ★ 처음엔 원형 마스크 하나였는데 아래 경계가 희미한 사각형으로 남았다(실측). */
  -webkit-mask-image: linear-gradient(to right, transparent 0, #000 42%),
                      linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, #000 42%),
                      linear-gradient(to bottom, transparent 0, #000 12%, #000 80%, transparent 100%);
          mask-composite: intersect;
}
.svc__in {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto; padding: 0 var(--gut) 64px;
}
.svc__lead {
  display: flex; flex-direction: column; justify-content: center;
  max-width: 560px;
  min-height: clamp(360px, 38vw, 520px);
  padding: 48px 0 24px;
}
.sec--svc .svc__t { color: #fff; font-size: clamp(28px, 3.4vw, 44px); line-height: 1.3; max-width: 13em; }
.sec--svc .svc__d { color: rgba(255,255,255,.72); font-size: 17px; }
.sec--svc .svc__chips li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.16); color: #fff; }

.svc__more { border-top: 1px solid rgba(255,255,255,.1); padding-top: 36px; }
/* 장점 줄로 바로 시작하는 장은 그 줄의 윗선이 경계를 맡는다. 두 줄이 겹치지 않게 */
.svc__more:has(> .svc__edge:first-child) { border-top: 0; padding-top: 0; }
.sec--svc .svc__sub { margin-top: 0; color: #fff; }

/* 운영 과정 카드: 어두운 바탕용 */
.sec--svc .steps::before { background: rgba(255,255,255,.14); }
.sec--svc .steps .card--step {
  background: rgba(255,255,255,.04); border-color: rgba(255,255,255,.12); box-shadow: none;
}
.sec--svc .steps .card--step.is-on,
.sec--svc .steps.is-done .card--step { border-color: rgba(255,255,255,.24); }
.sec--svc .steps .card--step::before { background: rgba(255,255,255,.24); }
.sec--svc .steps .card--step.is-on::before,
.sec--svc .steps.is-done .card--step::before { background: var(--ac); }
.sec--svc .card--step .card__title { color: #fff; }
.sec--svc .card--step .card__ul li { color: rgba(255,255,255,.72); }
.sec--svc .card--step .card__no { color: rgba(255,255,255,.5); }
.sec--svc .steps .card--step.is-on .card__no,
.sec--svc .steps.is-done .card--step .card__no { color: var(--ac); }

/* 장점: 세로 목록 대신 나란히 */
.sec--svc .svc__edge {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0 40px;
  margin-top: 40px;
}
.sec--svc .svc__more > .svc__edge:first-child { margin-top: 0; }
.sec--svc .svc__edge .edge__row {
  display: block; padding: 22px 0 0;
  border-top: 1px solid rgba(255,255,255,.14); border-bottom: 0;
}
.sec--svc .edge__k { color: var(--ac); padding-top: 0; }
.sec--svc .edge__lead { margin-top: 10px; color: #fff; }
.sec--svc .edge__sub { color: rgba(255,255,255,.62); }

@media (max-width: 760px) {
  /* 모바일은 에셋을 위에 배너로 두고 글을 아래로 */
  .svc__art {
    position: relative; display: block; width: 150%; max-width: none; margin: 0 0 -24% -30%;
    -webkit-mask-image: radial-gradient(ellipse 50% 60% at 62% 48%, #000 50%, transparent 100%);
            mask-image: radial-gradient(ellipse 50% 60% at 62% 48%, #000 50%, transparent 100%);
  }
  .svc__in { padding: 0 20px 40px; }
  .svc__lead { min-height: 0; padding: 0 0 24px; }
  .sec--svc .svc__t { font-size: 26px; }
  .sec--svc .svc__d { font-size: 15px; }
}

/* ── 자주 묻는 질문 (2026-09-28, 검색·AI 검색용. _seo_build.py 가 넣는다) ── */
.faq { display: grid; border-top: 1px solid var(--line); max-width: 960px; }
.faq__item { border-bottom: 1px solid var(--line); }
.faq__item > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 22px 4px; }
.faq__item > summary::-webkit-details-marker { display: none; }
.faq__item > summary::after { content: "+"; flex: none; font-family: var(--font-en); font-size: 22px; line-height: 1; color: var(--ink-3); transition: transform .25s ease; }
.faq__item[open] > summary::after { transform: rotate(45deg); }
.faq__item > summary:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
.faq__q { margin: 0; font-size: 17px; font-weight: 700; line-height: 1.5; word-break: keep-all; }
.faq__a { margin: 0; padding: 0 4px 24px; color: var(--ink-2); font-size: 15px; line-height: 1.8; word-break: keep-all; max-width: 820px; }
@media (max-width: 640px) { .faq__q { font-size: 16px; } .faq__item > summary { padding: 18px 2px; } }

/* ── News 상세 (우리 소식, /news/{id}, api/news.js 가 서버에서 만든다) ── */
.post { padding-top: calc(var(--sec-y) + 40px); }
.post__wrap { max-width: 760px; }
.post__meta { margin: 0; font-size: 13px; color: var(--ink-3); }
.post__meta a { color: var(--ac); font-weight: 600; text-decoration: none; }
.post__title { margin: 12px 0 0; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800; line-height: 1.35; letter-spacing: -.02em; word-break: keep-all; }
.post__key { margin: 24px 0 0; padding: 16px 20px; border-left: 4px solid var(--ac); background: var(--bg-2); font-size: 17px; font-weight: 600; line-height: 1.7; word-break: keep-all; }
.post__cover { display: block; width: 100%; margin: 32px 0 0; border-radius: var(--r); }
.post__body { margin-top: 32px; font-size: 17px; line-height: 1.9; color: var(--ink); word-break: keep-all; }
.post__body p { margin: 0 0 1.1em; }
.post__body h2 { margin: 2em 0 .6em; font-size: 24px; font-weight: 800; line-height: 1.4; }
.post__body h3 { margin: 1.6em 0 .5em; font-size: 20px; font-weight: 700; }
.post__body ul, .post__body ol { margin: 0 0 1.1em; padding-left: 1.4em; }
.post__body li { margin: .3em 0; }
.post__body a { color: var(--ac); text-decoration: underline; text-underline-offset: 3px; }
.post__body img { display: block; max-width: 100%; height: auto; margin: 1.5em 0; border-radius: var(--r); }
.post__body blockquote { margin: 1.4em 0; padding: 4px 0 4px 18px; border-left: 3px solid var(--line); color: var(--ink-2); }
.post__body table { width: 100%; margin: 1.4em 0; border-collapse: collapse; font-size: 15px; }
.post__body th, .post__body td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; }
.post__body th { background: var(--bg-2); }
.post__body figure[data-youtube] { margin: 1.6em 0; }
.post__body iframe { display: block; width: 100%; aspect-ratio: 16 / 9; height: auto; border: 0; border-radius: var(--r); }
.post__link { margin: 32px 0 0; font-size: 14px; color: var(--ink-3); word-break: break-all; }
.post__link a { color: var(--ac); }
.post__faq { margin-top: 56px; }
.post__h { margin: 0 0 16px; font-size: 22px; font-weight: 800; }
.post__back { margin: 56px 0 0; }
@media (max-width: 640px) { .post__body { font-size: 16px; } .post__key { font-size: 16px; } }