/* =========================================================
   RS-TEAM 홈 · 2026-10-08 (통합정리 문서 반영)
   구조: header / main > .hero · .work · .how · .products · .why · .contact / footer
   톤: body[data-tone] 한 곳에서만 바꾼다(블랙·차콜 두 면. 2026-10-13 라이트 폐기 — 전환 명도차가 눈 아픔).
       섹션이 화면 60% 선을 지나면 header.js 가 body 톤을 바꾸고 배경이 1초에 걸쳐 건너간다.
   간격: 8px 단위. 섹션 패딩 120/88/64, 제목→설명 24/20/16, 섹션 헤더→콘텐츠 48/36/28, 카드 간격 32/24/24.
   모양: 카드·이미지 8px, 버튼 999px. 그 밖의 둥근 모서리 없음.
   ========================================================= */

/* ---------- 토큰 ---------- */
:root {
  /* RS RED 스케일 (컬러시스템 v0.2). 캔버스(palette.js)가 전부 읽음 */
  --red-300: #FFA39B;
  --red-400: #FF6460;
  --red-500: #EC383E;
  --red-600: #CF0C25;
  --red-700: #AC011B;
  --red-800: #880B17;
  /* 그린 한 단계 (2026-10-26 사장님 지정 #45635C). 고양이 이야기 전용: 히어로 원·커튼 스포트·헤더 고양이 버튼 호버 */
  --green-600: #45635C;
  --green-400: #7FA897;   /* 다크 위 글자·선용(4.5:1 이상) */
  /* 레인·빛 라인용 웜 그레이 (mono 모드). 레드는 삼각형·마침표·▶·CTA 에만 */
  --ink-300: #A8A6AE;
  --ink-400: #8A888F;
  --ink-500: #69676E;
  --ink-600: #4E4C53;
  --ink-700: #38373D;
  --ink-800: #27262B;
  /* 레인·빛 라인 그린 모드(2026-10-26 사장님 "매트릭스에 그린"). --ink-* 와 같은 명도 단계, 색상은 --green-600 계열. palette.js 가 읽음. 비교: ?rain=mono|red|green */
  --inkg-300: #9FC2B4;
  --inkg-400: #7FA897;
  --inkg-500: #5F8A7A;
  --inkg-600: #45635C;
  --inkg-700: #334A45;
  --inkg-800: #233430;
  --c-red: var(--red-600);              /* 주 CTA · 삼각형 · 작은 강조 */
  --c-red-hover: var(--red-700);
  --c-title-end: #9A9DA6;               /* 히어로 영문 제목 그라데이션 끝: 중성 회색. 2026-10-26 그린 45% 섞어 봤으나 사장님 "회색이 더 낫다" → 원복 */

  --font-mono: "Share Tech Mono", ui-monospace, Consolas, monospace;
  --font-sans: "Geist", "Asta Sans", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;

  --wrap-max: 1600px;
  --gutter: clamp(20px, 4.2vw, 64px);
  --header-h: 72px;
  --sec-pad: 128px;
  --head-gap: 24px;        /* 제목 → 설명 */
  --content-gap: 48px;     /* 섹션 헤더 → 콘텐츠 */
  --card-gap: 32px;
  --radius: 8px;
  --win-bar: 40px;         /* 브라우저 틀 주소 막대 높이(홈 서비스 창·서비스 상자) */

  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --tone-dur: 1s;
}
@media (max-width: 1199px) { :root { --header-h: 68px; --sec-pad: 96px; --head-gap: 20px; --content-gap: 36px; --card-gap: 24px; } }
@media (max-width: 767px)  { :root { --header-h: 64px; --sec-pad: 72px; --head-gap: 16px; --content-gap: 28px; } }

/* 톤: 배경만 바뀜. 무채색 4단계(deep < dark < charcoal < graphite)로 섹션 구분. 글자·보조글자·붉은글자는 고정 */
body {
  color-scheme: dark;
  --c-bg: #0E0E10;
  --c-ink: #F2F3F6;
  --c-ink-1: #E6E7EB;                   /* 긴 본문용: 다크 위 흰 글자 번짐(halation) 줄임 */
  --c-ink-2: #B9B9C0;
  --c-red-text: var(--red-400);
  --c-surface: color-mix(in srgb, var(--c-bg), #fff 5%);     /* 바닥보다 한 단계 밝은 면(카드) */
  --c-line: color-mix(in srgb, currentColor 10%, transparent);
  --radius-card: 12px;
}
body[data-tone="deep"] { --c-bg: #050506; }
body[data-tone="charcoal"] { --c-bg: #1E1E22; }
body[data-tone="graphite"] { --c-bg: #1E1E22; }   /* 2026-10-21 경계 고정 후 "단계 차이 크다" → #2C2C32 → #1C1C20 */
/* 2026-10-21 사장님 C3: 섹션 배경 고정. body 크로스페이드는 헤더·theme-color 만 따라가고, 면은 섹션이 직접 칠해 경계가 또렷하다 */
main [data-tone] { background: var(--c-bg); --c-surface: color-mix(in srgb, var(--c-bg), #fff 5%); }
main [data-tone="deep"] { --c-bg: #050506; }
main [data-tone="dark"] { --c-bg: #141417; }   /* "너무 블랙" → dark 를 올리고 graphite 와 간격 ≈ 17 */
main [data-tone="charcoal"] { --c-bg: #1E1E22; }
main [data-tone="graphite"] { --c-bg: #1E1E22; }
main [data-tone] + [data-tone] { border-top: 1px solid rgba(255,255,255,.06); }   /* 경계는 색 차이 대신 헤어라인이 말하게 */

/* ---------- 기본 ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; }
html { scroll-behavior: smooth; color-scheme: dark; }   /* 스크롤바·폼 컨트롤 다크 */
@media (pointer: fine) { html { overscroll-behavior: none; } }   /* 데스크톱 러버밴드 억제. 터치는 pull-to-refresh 유지 */
body {
  background: var(--c-bg);
  color: var(--c-ink);
  font: 400 18px/1.7 var(--font-sans);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
  transition: background-color var(--tone-dur) ease;
}
@media (max-width: 1199px) { body { font-size: 17px; } }
@media (max-width: 767px)  { body { font-size: 16px; } }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; text-decoration: none; }
a, button { cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent; }   /* :active 로 피드백 주므로 기본 하이라이트 끔 */
img { display: block; max-width: 100%; height: auto; }

::selection { background: var(--c-red); color: #fff; }
:focus-visible { outline: 2px solid var(--c-red); outline-offset: 4px; }
html { scrollbar-color: color-mix(in srgb, currentColor 25%, transparent) transparent; scrollbar-width: thin; }
html { scroll-padding-top: var(--header-h); }          /* 고정 헤더가 포커스 요소를 가리지 않게 */
section[id] { scroll-margin-top: var(--header-h); }

.sec { padding-block: var(--sec-pad); }   /* 2026-10-30 공용: 섹션 위아래 여백(개별 섹션마다 같은 값이던 것 통합) */
/* 공용: 위 2px 선 카드 목록(회사소개 연구·탐색·동행 / 채용 인재상 / 문의 후 진행). 블록 클래스에는 차이만 */
.linecards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); margin-top: var(--content-gap); }
.linecards > li { padding-top: 20px; border-top: 2px solid color-mix(in srgb, currentColor 35%, transparent); }   /* 2026-10-30 사장님 "흰 선 눈 아파" 100% → 35% */
.linecards h3 { font: 700 clamp(26px, 2.4vw, 36px)/1.2 var(--font-sans); letter-spacing: -.02em; }
.linecards p { margin-top: 16px; font-size: 16px; color: var(--c-ink-2); }
@media (max-width: 767px) { .linecards { grid-template-columns: 1fr; } }
.btn-row { display: flex; flex-wrap: wrap; gap: 10px; }   /* 2026-10-30 공용: 버튼 줄(홈 히어로·연락처·CTA) */
.wrap { width: 100%; max-width: var(--wrap-max); margin-inline: auto; padding-inline: max(var(--gutter), env(safe-area-inset-left)) max(var(--gutter), env(safe-area-inset-right)); }
.skip-link { position: absolute; left: -999px; top: 8px; z-index: 100; padding: 8px 12px; background: #fff; color: #000; }
.skip-link:focus { left: 8px; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; height: 48px; padding: 0 26px; border: 0; border-radius: 999px; appearance: none; background: none; color: inherit;   /* <button> 에도 쓰므로 기본 테두리·외형 제거(2026-10-26 문의 버튼 흰 링) */
  font: 600 15px/1 var(--font-sans); white-space: nowrap;
  transition: background-color .25s, border-color .25s, color .25s, transform .15s;
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--c-red); color: #fff; }
.btn--primary:hover { background: var(--c-red-hover); }
.btn--ghost { border: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.btn--ghost:hover { border-color: currentColor; }
.btn--small { height: 40px; padding: 0 18px; font-size: 14px; }

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed; inset: 0 0 auto; z-index: 10;
  height: var(--header-h);
  color: #F2F3F6;
  transition: color .2s ease, background-color .25s ease, box-shadow .25s ease;
}
.site-header[data-scrolled] {
  background: color-mix(in srgb, var(--c-bg) 78%, transparent);
  -webkit-backdrop-filter: blur(16px) saturate(140%); backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 1px 0 color-mix(in srgb, currentColor 8%, transparent);
}
.site-header .wrap { position: relative; height: 100%; display: flex; align-items: center; justify-content: space-between; }
.site-header__logo { display: inline-flex; align-items: center; padding: 8px; margin: -8px; }   /* 2026-10-30 탭 타깃 44(모바일 28px 아이콘 + 16), 자리 변화 없이 */
.site-header__logo svg { display: block; width: 35px; height: 35px; }

.site-header__nav { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); }
.site-header__nav > ul { display: flex; gap: clamp(64px, 64px + (100vw - 1200px) * .1, 112px); }   /* 2026-10-26 가운데 몰림 → 40 → 64. 10-31 풀다운 열 간격: 1200 에선 오른쪽 버튼과 36px 뿐이라 64 유지, 넓은 화면에서 1440 ≈ 88 · 1920 112 */
.site-header__nav a {
  position: relative; display: inline-block; padding: 8px 0;
  font: 500 15px/1 var(--font-sans);
  opacity: .72; transition: opacity .2s;
}
.site-header__nav a::before {           /* 현재 섹션 앞 붉은 ▶ */
  content: ""; position: absolute; left: -14px; top: 50%; margin-top: -4px;
  width: 0; height: 0; border: 4px solid transparent; border-left: 6px solid var(--c-red); border-right: 0;
  opacity: 0; transform: translateX(-4px) scale(.6);
  transition: opacity .25s, transform .35s var(--ease-out);
}
.site-header__nav a:hover, .site-header__nav a[aria-current] { opacity: 1; }
.site-header__nav a[aria-current]::before { opacity: 1; transform: none; }
.site-header__nav li { position: relative; }
.site-header__m-only, .site-header__nav-foot { display: none; }   /* 2026-10-28 모바일 메뉴 전용: 고양이 이야기 항목 + 하단 CTA·연락처 */
/* GNB 2뎁스 · 풀다운(10-31 사장님 "서브메뉴 풀다운으로", 항목별 유리 카드는 "클로드가 만든 것 같다" → 폐기)
   메뉴에 올리면 헤더 아래로 패널 하나가 전체 폭으로 내려오고, 2뎁스 전부가 각 1뎁스 글자 밑에 세로로 나란히. 패널·헤더는 불투명 바닥색, 선 하나. JS 없음(:has) */
@media (min-width: 1200px) {
  .site-header { --panel-h: 304px; }
  /* 10-31 사장님 "로고와 오른쪽 버튼 사이 정확히 가운데": 메뉴를 화면 가운데(absolute 50%)가 아니라 로고 | 메뉴 | 버튼 3칸 그리드의 가운데 칸 중앙에 → 양쪽 남는 폭이 같음 */
  .site-header .wrap { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; }
  .site-header__nav { position: relative; left: auto; top: auto; transform: none; justify-self: center; }
  .site-header::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; z-index: -1; height: 0; overflow: hidden; background: var(--c-bg); border-bottom: 1px solid color-mix(in srgb, currentColor 10%, transparent); transition: height .35s var(--ease-out), background-color var(--tone-dur) ease; }
  .site-header:has(.site-header__nav:hover), .site-header:has(.site-header__nav:focus-within) { background: var(--c-bg); box-shadow: 0 1px 0 color-mix(in srgb, currentColor 8%, transparent); -webkit-backdrop-filter: none; backdrop-filter: none; }
  .site-header:has(.site-header__nav:hover)::after, .site-header:has(.site-header__nav:focus-within)::after { height: var(--panel-h); }
  /* 패널 안(2뎁스 아래 빈 곳)에 마우스가 있어도 열린 채로: 메뉴의 호버 영역을 패널 크기로 넓힘 */
  /* 11-02 "카테고리 사이 스칠 때 사라짐": z -1 로 내리니 .wrap·패널(::after) 아래로 깔려 1뎁스 바로 아래 20px 부터 호버가 끊겼음 → z 는 기본(auto)으로 두고, 대신 2뎁스(.sub)를 z 1 로 올려 링크 클릭을 살림 */
  .site-header:has(.site-header__nav:hover) .site-header__nav::after { content: ""; position: absolute; left: -50vw; right: -50vw; top: 100%; height: var(--panel-h); }
  .site-header__nav .sub {
    position: absolute; z-index: 1; left: 50%; top: calc(100% + 32px); display: grid; gap: 2px; text-align: center;   /* 10-31 "1뎁스와 2뎁스 가운데 정렬 맞추자": 열을 1뎁스 글자 중심 아래로 */
    opacity: 0; visibility: hidden; transform: translate(-50%, -8px);
    transition: opacity .25s var(--ease-out), transform .3s var(--ease-out), visibility 0s .25s;
  }
  .site-header:has(.site-header__nav:hover) .sub, .site-header:has(.site-header__nav:focus-within) .sub { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: .05s, .05s, 0s; }
  .site-header__nav .sub a { display: block; padding: 9px 0; font: 500 15px/1.4 var(--font-sans); white-space: nowrap; opacity: .6; }
  .site-header__nav .sub a::before { display: none; }
  .site-header__nav .sub a:hover, .site-header__nav .sub a:focus-visible { opacity: 1; }
}
.site-header__sub-toggle { display: none; }

.site-header__side { display: flex; align-items: center; gap: 12px; }
/* 고양이 이야기 버튼: 쉴 땐 쪼꼬만 생선, 호버·포커스에 생선이 위로 빠지고 발바닥이 아래서 스르륵 올라와 발가락 톡톡, 색은 그린. 떼면 되돌아감.
   2026-10-26: 혼자 빼꼼·꾹꾹이 반복은 제거(호버 이상). 전부 transition 이라 들어올 때/나갈 때 대칭 */
.site-header__cat { position: relative; gap: 8px; padding-left: 14px; overflow: hidden; transition: color .25s, border-color .25s; }
.site-header__paw { position: relative; width: 20px; height: 20px; }
.site-header__paw svg { position: absolute; inset: 0; width: 20px; height: 20px; fill: currentColor; transition: transform .4s cubic-bezier(.34, 1.56, .64, 1), opacity .25s; }
.site-header__paw .fish { width: 16px; height: 16px; inset: 2px; }
.site-header__paw .paw { opacity: 0; transform: translateY(14px) rotate(-12deg); transform-origin: 50% 100%; }
.site-header__paw .toe { transform-box: fill-box; transform-origin: center; }
.site-header__cat:hover .fish, .site-header__cat:focus-visible .fish { opacity: 0; transform: translateY(-12px) rotate(10deg); }
.site-header__cat:hover .paw, .site-header__cat:focus-visible .paw { opacity: 1; transform: none; }   /* 고양이 페이지에서도 쉴 땐 생선(사장님 2026-10-26) */
.site-header__cat:hover .toe, .site-header__cat:focus-visible .toe { animation: toePop .5s var(--ease-out) .3s both; }
.site-header__cat:hover .toe:nth-child(2), .site-header__cat:focus-visible .toe:nth-child(2) { animation-delay: .37s; }
.site-header__cat:hover .toe:nth-child(3), .site-header__cat:focus-visible .toe:nth-child(3) { animation-delay: .44s; }
.site-header__cat:hover .toe:nth-child(4), .site-header__cat:focus-visible .toe:nth-child(4) { animation-delay: .51s; }
@keyframes toePop { 0%, 100% { transform: none; } 40% { transform: scale(1.5); } }
.site-header__cat:hover, .site-header__cat:focus-visible { border-color: var(--green-400); color: var(--green-400); }   /* 고양이 버튼 호버는 빨강 대신 그린(페이지 톤) */
@media (max-width: 760px) {
  .site-header__cat { width: 40px; padding: 0; justify-content: center; }
  .site-header__cat-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .site-header__paw .paw { opacity: 1; transform: none; } .site-header__paw .fish { opacity: 0; }   /* 모바일은 글자가 없으니 발바닥 상시 노출 */
}
@media (prefers-reduced-motion: reduce) { .site-header__paw svg { transition: none; } .site-header__paw .toe { animation: none !important; } }
.site-header__menu {
  display: none; height: 40px; padding: 0 16px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: none; color: inherit;
  font: 600 14px/1 var(--font-sans);
}

/* ---------- 공통 ---------- */
.sec__title {
  font: 800 clamp(34px, 3.5vw, 56px)/1.15 var(--font-sans);
  letter-spacing: -.03em; text-wrap: balance;
}
.sec__title--sm { font-size: clamp(26px, 2.4vw, 36px); letter-spacing: -.02em; }
.sec__desc { margin-top: var(--head-gap); max-width: 34em; font-size: clamp(18px, 1.3vw, 22px); line-height: 1.6; color: var(--c-ink-2); }
.dot { color: var(--c-red); }
.sec__more { margin-top: 48px; font-size: 15px; }
.sec__more a { display: inline-block; padding: 10px 0; margin: -10px 0; color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; }
.sec__more a:hover { color: var(--c-ink); } /* 섹션 제목 마침표: 히어로 마침표와 같은 RS RED 한 점 */

/* 등장: 24px 아래에서 올라오며 또렷. 한 번만. 형제끼리 60ms 스태거(--i 는 reveal.js). JS 없으면 그냥 보임 */
.js [data-reveal] {
  opacity: 0; transform: translateY(24px);
  transition: opacity .6s var(--ease-out), transform .7s var(--ease-out);
  transition-delay: calc(var(--i, 0) * 60ms);
}
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* 섹션 제목·설명은 조금 더 크게 들어옴 */
.js .sec__title[data-reveal]:not(.is-in), .js .page-hero .wrap[data-reveal]:not(.is-in) { transform: translateY(32px); }
.js .page-hero .wrap[data-reveal] { transition-duration: .8s, .9s; }
/* 10-31 홈 전체 모션(사장님 "메인은 모션이 전체적으로"): 모두 스크롤 들어올 때 한 번, 시간으로 혼자 도는 것 없음 */
/* ① 섹션 제목: 올라오면서 위에서 아래로 드러남(제목 태그 하나 그대로, 글자 쪼개기 없음) */
.js .sec__title[data-reveal] { clip-path: inset(-.1em -.2em 100% -.2em); transition: opacity .6s var(--ease-out), transform .8s var(--ease-out), clip-path .9s var(--ease-out); }
.js .sec__title[data-reveal].is-in { clip-path: inset(-.1em -.2em -.25em -.2em); }
/* ② 마침표: 제목이 다 올라온 뒤 한 번 톡 */
.js .is-in .dot, .js .is-in.sec__title .dot { display: inline-block; animation: dot-pop .5s var(--ease-out) .55s both; }
@keyframes dot-pop { 0% { transform: scale(0); } 60% { transform: scale(1.5); } 100% { transform: scale(1); } }

/* ---------- 01 히어로 ---------- */
.hero { position: relative; height: 300vh; height: 300svh; }   /* 100vh 삼각형 + 100vh 해체(Work 가 덮음) + 100vh 스테이지. 2026-10-15 360→300 */
#rain { opacity: .8; }
/* 11-03 히어로 등장 연출(사장님: 인트로 화면 4안 모두 폐기 → "히어로 자체가 등장"): 레인 먼저 번지고(0.2s) → 라벨(0.45s) → 제목이 아래서 올라오고(0.55s) → 빨간 마침표가 마지막에 찍힘(1.15s). from 만 두어 끝값은 각 요소의 원래 상태 */
/* 11-03 사장님 "레인이 더 잘 보이다가 어두워지는 게 낫지 않을까" → 레인이 먼저 밝게(0.1s 부터 0.35s 에 2.2배 밝기) 쏟아지고, 제목이 올라오는 동안(0.7s~) 원래 밝기로 가라앉음. 끝값은 키프레임에 안 써서 PC .8·모바일 .5 각자 */
#rain { animation: heroRain 1.7s ease-in-out .1s backwards; }
.hero__bg > :not(#rain) { animation: heroIn .9s ease-out .5s backwards; }
.hero__label { animation: heroIn .5s ease-out .6s backwards; }
.hero__title { animation: heroRise .8s var(--ease-out) .7s backwards; }
.hero__dot { animation: heroStamp .3s cubic-bezier(.2,1.5,.4,1) 1.3s backwards; }
@keyframes heroIn { from { opacity: 0; } }
@keyframes heroRain { 0% { opacity: 0; filter: brightness(1.7); } 20% { opacity: 1; filter: brightness(1.7); } 45% { opacity: 1; filter: brightness(1.7); } }   /* 2.2 → 1.7: 영화색은 밝기 올리면 다시 네온이 됨 */
@keyframes heroRise { from { opacity: 0; transform: translateY(32px); } }
@keyframes heroStamp { from { transform: scale(0); } }
@media (prefers-reduced-motion: reduce) { #rain, .hero__bg > *, .hero__label, .hero__title, .hero__dot { animation: none; } }   /* 레인은 질감. 헤드라인과 경쟁하지 않게. .55 → .7 (사장님 "수정 전에서 문자 투명도만 조금") */
#streaks { opacity: .55; }   /* 빛 라인은 수정 전 그대로 */
.hero__stage { position: sticky; top: 0; isolation: isolate; overflow: hidden; height: 100vh; height: 100svh; display: flex; align-items: center; }
.hero__bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__bg > * { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__vignette {
  background:
    radial-gradient(70% 60% at 22% 55%, rgba(15,15,17,.7), rgba(15,15,17,.3) 45%, transparent 75%),
    linear-gradient(180deg, rgba(15,15,17,.6), transparent 22% 78%, rgba(15,15,17,.7));
}
.hero__grain {
  opacity: .35; mix-blend-mode: overlay;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
/* 1 BUILT TO WORK. → 2 한글 헤드라인(고정) → 3 그 아래 설명 + 버튼이 나타남 → 4 전부 페이드(해체·커튼). 제목과 문구 블록은 같은 칸에 겹침 */
.hero__text { display: grid; grid-template-rows: auto auto; max-width: 50%; padding-top: var(--header-h); color: #F2F3F6; }
.hero__label { grid-row: 1; margin-bottom: 28px; font: 400 14px/1 var(--font-mono); letter-spacing: .14em; color: var(--red-400); transition: opacity .5s; }
.hero[data-step="4"] .hero__label { opacity: 0; }
.hero__title, .hero__statement { grid-area: 2 / 1; align-self: center; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
.hero__statement { width: max-content; max-width: 100%; }   /* 폭 = 헤드라인 가장 긴 줄 → 아래 설명·버튼이 같은 오른쪽 라인 */
.hero__final { margin-top: 28px; width: 0; min-width: 100%; transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }   /* width 0 + min-width 100%: 부모(max-content) 폭 계산에 안 끼고 헤드라인 폭만큼 펴짐 → 설명이 헤드라인 폭에서 줄바꿈 */
.hero:not([data-step="1"]) .hero__title { opacity: 0; transform: translateY(-24px); pointer-events: none; }
.hero[data-step="1"] .hero__statement { opacity: 0; transform: translateY(24px); pointer-events: none; }
.hero[data-step="4"] .hero__statement { opacity: 0; transform: translateY(-16px); pointer-events: none; }
.hero[data-step="1"] .hero__final, .hero[data-step="2"] .hero__final { opacity: 0; transform: translateY(16px); pointer-events: none; }
.hero__title {
  font: 800 clamp(56px, 9vw, 152px)/.92 var(--font-sans);
  letter-spacing: -.05em; white-space: nowrap; opacity: .9;
  background: linear-gradient(180deg, #FFFFFF 0%, #E6E7EB 45%, var(--c-title-end) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  padding-bottom: .06em;
}
/* 마침표: 글자 대신 붉은 면. data-dot: square(기존 네모) · tri(로고 ▶) · split(네모를 사선으로 가른 세모 둘). 미리보기 ?dot= */
.hero__dot {
  display: inline-block; width: .16em; height: .16em; margin-left: .1em;
  vertical-align: baseline; background: var(--c-red); opacity: .9;
  -webkit-text-fill-color: transparent; color: transparent; font-size: inherit; line-height: 0;
}
.hero[data-dot="tri"] .hero__dot { width: .17em; height: .19em; clip-path: polygon(0 0, 100% 50%, 0 100%); }
.hero[data-dot="split"] .hero__dot {
  background: linear-gradient(to top left, var(--c-red) calc(50% - 1px), #0F0F11 calc(50% - 1px), #0F0F11 calc(50% + 1px), var(--c-red) calc(50% + 1px));   /* 2026-10-21 사선 반대로(＼ → ／) */
}
.hero__headline { font: 700 clamp(34px, 3.6vw, 72px)/1.12 var(--font-sans); letter-spacing: -.035em; color: #ECEDF1;
  /* 글자 그라데이션: 위는 흰색, 아래로 갈수록 회색. 11-06 사장님 "초록 빼자" — 직전(10-26)은 끝색에 --inkg-300 을 40% 섞은 옅은 그린 */
  background: linear-gradient(180deg, #F4F5F7 0%, #E6E7EB 45%, #C9CBD1 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent; padding-bottom: .04em;
}
.hero__lead { max-width: 100%; font-size: clamp(17px, 1.15vw, 20px); color: #B9B9C0; text-wrap: pretty; }   /* 2026-10-26 양옆 라인 맞춤: 문단 폭 = 헤드라인 폭(.hero__statement 이 max-content), <br> 대신 자연 줄바꿈 2줄 */
.hero__actions { margin-top: 32px; }   /* 나머지는 .btn-row */

/* 썸네일·목업 톤다운: 다크 배경과 채도 차이를 줄이고, 호버(포커스) 시 원본 그대로 */
.work__media, .tile__media, .feature__media { filter: saturate(.85) brightness(.9); transition: filter .5s var(--ease-out); }
a:hover .work__media, a:focus-visible .work__media,
.tile__link:hover .tile__media, .tile__link:focus-visible .tile__media, .feature:hover .feature__media { filter: none; }

/* 짧은 화면(높이 720 이하 데스크톱): 핀 화면에 제목+카드+푸터가 안 들어가므로 네이티브 가로 스크롤(work.js 도 같은 조건) */
@media (min-width: 901px) and (max-height: 720px) {
  .work { margin-top: 0; box-shadow: none; padding-block: var(--sec-pad); }
  .work__scroll { height: auto; }
  .work__stage { position: static; height: auto; overflow: visible; padding-top: 0; }
  .work__track { width: auto; overflow-x: auto; padding-right: var(--gutter); scrollbar-width: none; }
  .work__track::-webkit-scrollbar { display: none; }
  .work__card { transform: none; opacity: 1; }
  .work__bar { display: none; }
  .how { margin-top: 0; box-shadow: none; }
}
/* ---------- 02 대표 프로젝트: 히어로 위로 커튼 → 핀 + 가로 팬 → 다음 섹션이 덮음 ---------- */
.work {
  position: relative; z-index: 2;
  margin-top: -100vh; margin-top: -100svh;
  background: var(--c-bg);
  box-shadow: 0 -60px 120px -40px rgba(0, 0, 0, .45);
  transition: background-color var(--tone-dur) ease;
}
.work__scroll { height: calc(200vh + var(--work-extra, 0px)); height: calc(200svh + var(--work-extra, 0px)); }
.work__stage {
  position: sticky; top: 0; overflow: hidden; height: 100vh; height: 100svh;
  display: flex; flex-direction: column; justify-content: flex-start; gap: var(--content-gap);
  padding-top: calc(var(--header-h) + 64px); padding-bottom: 48px;   /* 헤더 밑 숨 쉴 여백 */
}
.work__track {
  display: flex; gap: var(--card-gap); width: max-content; align-items: stretch;
  padding-left: max(var(--gutter), calc((100vw - var(--wrap-max)) / 2 + var(--gutter)));
  will-change: transform;
}
.work__card {
  flex: none; width: min(600px, calc(var(--work-media-h, 9999px) * 16 / 10));   /* 핀 화면 높이에 맞춰 축소(work.js 가 --work-media-h 측정). 짧은 화면(1872×932)에서 잘리지 않게 */
  display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; gap: 20px;
  transform: scale(calc(.95 + .05 * var(--near, 1)));
  opacity: calc(.5 + .5 * var(--near, 1));
}
/* 썸네일·상자 바탕의 방사형 빛 색 단계(가운데 → 가장자리). 홈 카드·WORK 타일·띠·서비스 상자가 같이 씀. 바탕색·--glow 를 쓰는 요소에서 풀려야 해서 :root 가 아니라 여기에 둠 */
.work__media, .tile__media, .page-hero__strip li, .feature { --glow-stops: color-mix(in srgb, var(--c-bg), var(--glow, #4A6FB5) 62%), color-mix(in srgb, var(--c-bg), var(--glow, #4A6FB5) 24%) 60%, color-mix(in srgb, var(--c-bg), var(--glow, #4A6FB5) 7%) 100%; }
.work__media {
  aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--radius-card);
  background: radial-gradient(36% 46% at 50% 52%, var(--glow-stops));   /* 11-02 사장님 "메인도": 목록 타일과 같은 차콜 그라데이션(카드별 --bg 안 씀) */
  box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 8%, transparent);
}
.work__media { padding: 6%; box-sizing: border-box; }   /* 2026-10-26 썸네일 박스 안 상하좌우 같은 여백(목업이 테두리에 닿지 않게). 이미지는 contain */
.work__media img { width: 100%; height: 100%; object-fit: contain; transform: translateX(calc(var(--dx, 0) * -28px)); }   /* ④ 10-31 패럴랙스: 카드가 가로로 지나갈 때 안의 그림이 살짝 늦게 따라옴(--dx 는 work.js) */
/* 11-05 사장님 "메인 프로젝트는 가로로 기니까 로고 위·썸네일 아래 가운데 정렬": 로고 한 줄 + 남은 높이에 목업. 로고 높이는 카드 높이 비율(cqh)이라 카드가 줄어도 같이 줄어듦(--lh 는 build.py 가 figure 에 넣음).
   11-06 "썸네일 조금 작게, 로고랑 너무 붙어 보여": 목업을 남은 칸의 86% 로, 로고와의 틈 5% → 8% */
.work__media--stack { container-type: size; display: grid; grid-template-rows: auto minmax(0, 1fr); justify-items: center; align-items: center; row-gap: 8%; padding: 6% 6% 5%;
  background: radial-gradient(40% 44% at 50% 60%, var(--glow-stops)); }
.work__media--stack .work__logo { width: auto; max-width: 46%; height: calc(20px * var(--lh, 1)); height: calc(6.4cqh * var(--lh, 1)); transform: none; filter: drop-shadow(0 2px 10px rgba(0,0,0,.5)); }
.work__media--stack .work__shot { min-height: 0; width: 86%; height: 86%; }
.work__meta { display: grid; gap: 8px; }
.work__meta h3 { font: 600 22px/1.35 var(--font-sans); letter-spacing: -.01em; }
.work__meta p { font-size: 15px; line-height: 1.6; color: var(--c-ink-2); }
.work__year { font-size: 14px; color: var(--c-ink-2); font-variant-numeric: tabular-nums; }
.work__foot { display: flex; align-items: center; gap: 24px; }
.work__bar { position: relative; flex: 1; height: 1px; background: color-mix(in srgb, currentColor 14%, transparent); }
.work__bar i { position: absolute; inset: 0; right: auto; width: var(--p, 0%); background: var(--c-red); }
.work__all { display: inline-block; padding: 10px 0; margin: -10px 0; font-size: 15px; color: var(--c-ink-2); text-decoration: underline; text-underline-offset: .22em; text-decoration-thickness: 1px; white-space: nowrap; }
.work__all:hover { color: var(--c-ink); }
.work__nav { display: flex; gap: 8px; }
.work__btn {
  width: 44px; height: 44px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: none; color: inherit;
  font: 500 18px/1 var(--font-sans);
  transition: border-color .25s, background-color .25s;
}
.work__btn:hover { border-color: currentColor; }

/* ---------- 03 협업 방식 ---------- */
.how {
  position: relative; z-index: 3;
  margin-top: -100vh; margin-top: -100svh;
  padding-block: var(--sec-pad);
  background: var(--c-bg);
  box-shadow: 0 -60px 120px -40px rgba(0, 0, 0, .45);
  transition: background-color var(--tone-dur) ease;
}
.how__layout { display: grid; grid-template-columns: 5fr 7fr; gap: 72px; align-items: start; }
.how__sticky { position: sticky; top: calc(var(--header-h) + 48px); }
/* 단계(A안 · 번호 행): 카드 없이 hairline 행. 번호 | 이름+글 | 삼각 격자(4개 상시, 활성만 선명). 화면 가운데 선에 걸린 행 하나만 .is-active (reveal.js) */
.how__steps { display: grid; border-top: 1px solid var(--c-line); }
.how__step {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 32px 48px; align-items: start;
  padding: 48px 0; border-bottom: 1px solid var(--c-line);
}
.how__num {
  font: 800 clamp(48px, 4.2vw, 72px)/1 var(--font-sans); letter-spacing: -.05em; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, currentColor 16%, transparent);
  transition: color .5s var(--ease-out);
}
.how__step.is-active .how__num { color: transparent; background: linear-gradient(160deg, var(--inkg-300) 0%, var(--green-400) 45%, var(--green-600) 100%); -webkit-background-clip: text; background-clip: text; }   /* 2026-10-26 활성 번호 레드 → 그린 그라데이션(밝은 민트 → 사장님 그린) */
.how__name { font: 700 clamp(24px, 1.8vw, 30px)/1.25 var(--font-sans); letter-spacing: -.02em; transition: color .4s var(--ease-out); }
.how__text { margin-top: 14px; max-width: 44em; font-size: 17px; line-height: 1.75; color: var(--c-ink-2); }
.how__step:not(.is-active) .how__name { color: var(--c-ink-1); }

/* ---------- 04 자사 서비스 ---------- */
.products { position: relative; z-index: 3; background: var(--c-bg); transition: background-color var(--tone-dur) ease; }
/* ---------- 04 서비스 · 실제 화면 전환형(.svc, 2026-10-31, js/svc.js) ----------
   PC: 섹션 전체(제목·왼쪽 글·오른쪽 브라우저 창)가 화면에 고정, 스크롤하면 그 자리에서 서비스 4개가 차례로 바뀜(10-31 사장님 "이 상태에서 스크롤 되도록").
       창 안 화면·주소가 활성 서비스로 바뀌고, 위의 동작 조각이 스크롤 진행만큼 채워짐. 왼쪽 세로선의 빨간 부분 = 전체 진행도(--svc-t).
   모바일: 고정 없이 항목마다 자기 화면 */
/* 섹션 제목 톤다운(10-31 "아래 서비스 제목이 눈에 들어와야 하니까, 회색 또는 초록 그라데이션으로"). 회색 확정(초록 미리보기는 삭제) */
.svc__head .sec__title { background: linear-gradient(180deg, #B9BBC2 0%, #7F828A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.svc__head .sec__title .dot { -webkit-text-fill-color: var(--c-red); }
.svc__item + .svc__item { margin-top: 32px; padding-top: 32px; border-top: 1px solid var(--c-line); }
.svc__num { font: 500 14px/1 var(--font-sans); color: var(--c-red-text); }
.svc__name { margin-top: 16px; font: 700 clamp(34px, 3.2vw, 52px)/1.15 var(--font-sans); letter-spacing: -.02em; }
.svc__tag { margin-top: 12px; font-size: clamp(18px, 1.4vw, 22px); font-weight: 600; color: var(--c-ink-1); }
.svc__desc { margin-top: 16px; max-width: 30em; font-size: clamp(16px, 1.15vw, 18px); line-height: 1.7; color: var(--c-ink-2); }
.svc__links { display: flex; flex-wrap: wrap; gap: 6px 20px; margin-top: 24px; font-size: 16px; }
.svc__links a { display: inline-block; padding: 8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); }
.svc__links a:hover { border-color: currentColor; }
.svc__shot { margin-top: 20px; border-radius: 10px; overflow: hidden; border: 1px solid var(--c-line); aspect-ratio: 16 / 10; }
.svc__shot img, .svc__screen img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.svc__stage { display: none; }
@media (min-width: 901px) {
  .svc { height: calc(4 * 75vh + 100vh); padding-block: 0; }   /* 서비스당 75vh 스크롤 + 고정 화면 한 장 */
  /* 위아래 여백 --svc-pad(10-31 "섹션 상하 여백 충분히, 오른쪽 화면을 줄이더라도") */
  /* 10-31 "텍스트 왼쪽 오른쪽 이미지로 영역 재편": 왼쪽 칸 = 제목 묶음 + 서비스 글, 오른쪽 칸 = 창(위아래 전체 높이) */
  .svc > .wrap { --svc-pad: clamp(56px, 10vh, 120px); position: sticky; top: var(--header-h); height: calc(100vh - var(--header-h)); padding-block: var(--svc-pad); display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; column-gap: 72px; align-content: center; }
  .svc__head { grid-column: 1; grid-row: 1; }
  .svc .sec__more { display: none; }   /* 고정 화면 아래에 떠 보여서 PC 는 숨김(상단 메뉴 "서비스"로 감). 모바일은 목록 끝에 둠 */
  .svc__layout { display: contents; }
  .svc__list { grid-column: 1; grid-row: 2; align-self: start; margin-top: var(--content-gap); position: relative; display: grid; padding-left: 28px; border-left: 2px solid var(--c-line); }
  .svc__list::before { content: ""; position: absolute; left: -2px; top: 0; width: 2px; height: calc(var(--svc-t, 0) * 100%); background: var(--c-red); }
  .svc__item, .svc__item + .svc__item { grid-area: 1 / 1; margin: 0; padding: 0; border: 0; align-self: center; opacity: 0; transform: translateY(24px); pointer-events: none; transition: opacity .2s ease-in, transform .2s ease-in; }
  /* 나가는 글은 .2s 에 빠지고 들어오는 글은 그 뒤에 시작 → 두 글이 겹쳐 보이지 않음 */
  .svc__item.is-active { opacity: 1; transform: none; pointer-events: auto; transition: opacity .45s var(--ease-out) .2s, transform .45s var(--ease-out) .2s; }
  .svc__shot { display: none; }   /* PC 는 창에 복제해서 보여 줌 */
  .svc__stage { display: grid; grid-column: 2; grid-row: 1 / 3; align-items: center; justify-items: end; min-height: 0; }
  /* 창 높이 = 고정 화면에서 위아래 여백을 뺀 높이 안(40 = 주소 막대) */
  .svc__window { width: min(100%, (100vh - var(--header-h) - 2 * var(--svc-pad) - 40px) * 1.6); border-radius: 12px; overflow: hidden; background: #0B0B0D; border: 1px solid var(--c-line); box-shadow: 0 40px 100px -40px rgba(0,0,0,.7); }
}
.svc__bar { display: flex; align-items: center; gap: 6px; height: var(--win-bar); padding: 0 14px; background: color-mix(in srgb, var(--c-bg), #fff 6%); border-bottom: 1px solid var(--c-line); }
.svc__bar i { width: 10px; height: 10px; border-radius: 50%; background: color-mix(in srgb, currentColor 22%, transparent); }
.svc__url { margin-left: 14px; padding: 4px 14px; border-radius: 999px; font: 500 13px/1 var(--font-sans); color: var(--c-ink-2); background: color-mix(in srgb, currentColor 6%, transparent); }
.svc__screens { position: relative; aspect-ratio: 16 / 10; }
.svc__screen { position: absolute; inset: 0; opacity: 0; transition: opacity .6s var(--ease-out); }
.svc__screen.is-active { opacity: 1; }
/* 쿠핀 랜딩은 밝아서 다크 톤에 맞게 어둡게 덮음(10-31). 창·모바일 캡처 둘 다 */
.svc__screen[data-svc="coupin"] img, .svc__item[data-svc="coupin"] .svc__shot img { filter: brightness(.6) saturate(.85); }
/* 동작 조각: 창 왼쪽 아래 카드 */
/* 10-31 글래스모피즘: 반투명 흰 막 + 강한 블러·채도, 위쪽 가는 하이라이트 */
.svc__bit { position: absolute; left: 20px; bottom: 20px; max-width: min(78%, 420px); padding: 16px 18px; border-radius: 14px; background: linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)), rgba(16,16,20,.62); border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), 0 24px 48px -20px rgba(0,0,0,.6); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); color: var(--c-ink); transform: translateY(12px); opacity: 0; transition: opacity .5s var(--ease-out) .15s, transform .5s var(--ease-out) .15s; }
.svc__screen.is-active .svc__bit { opacity: 1; transform: none; }
.svc__screen[data-svc="coupin"] .svc__bit, .svc__screen[data-svc="ga-workone"] .svc__bit { background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), rgba(12,12,16,.86); }   /* 밝은 쿠핀 화면 위라서 이 카드만 더 어둡게 */
.svc__bit-label { font: 600 12px/1 var(--font-sans); color: var(--inkg-300); }   /* 10-31 "자간·폰트": 모노·자간 뺌 */
.svc__type { min-height: 1.6em; margin-top: 10px; font-size: 15px; line-height: 1.6; }
.svc__type::after { content: ""; display: inline-block; width: 7px; height: 1em; margin-left: 2px; vertical-align: -2px; background: var(--green-400); }
.svc__chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 10px; }
.svc__chips li { padding: 5px 9px; border-radius: 999px; font: 500 12px/1 var(--font-sans); border: 1px solid rgba(255,255,255,.16); color: var(--c-ink-2); opacity: .35; transition: opacity .3s, border-color .3s, color .3s; }
.svc__chips li.is-on { opacity: 1; color: var(--c-ink); border-color: var(--green-400); }
.svc__bit--flow .svc__chips li + li::before { content: "→"; margin-right: 6px; color: var(--c-ink-2); }
@media (prefers-reduced-motion: reduce) { .svc__item, .svc__item.is-active, .svc__screen, .svc__bit, .svc__chips li { transition: none; } }

/* ---------- 05 회사소개 ---------- */
.why { position: relative; overflow: clip; }   /* hidden 은 스크롤 컨테이너가 돼서 안쪽 view() 타임라인이 멈춤 → clip(10-31) */
/* 10-31 "배경에 패턴 살짝, 빗금이든 네모든 질감"(why) → 서비스 섹션·서브 히어로도 같은 규칙(pages.css 에서 mask 위치만) → 40px 네모 격자(1px 선, 흰 4.5%). 점 격자는 거의 안 보여서 교체. 가운데가 가장 보이고 가장자리로 갈수록 사라짐(mask) */
.why::before, .svc > .wrap::before, .page-hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(var(--grid-c, rgba(255,255,255,.045)) 1px, transparent 1px), linear-gradient(90deg, var(--grid-c, rgba(255,255,255,.045)) 1px, transparent 1px); background-size: 40px 40px; background-position: center top; -webkit-mask-image: radial-gradient(ellipse 70% 80% at 60% 45%, #000 20%, transparent 75%); mask-image: radial-gradient(ellipse 70% 80% at 60% 45%, #000 20%, transparent 75%); }
.why > .wrap { position: relative; }
/* 10-31 "서비스 섹션에도 같은 패턴": 고정 화면(.wrap) 안에만 깔아 내용과 함께 고정. 가장 보이는 곳 = 오른쪽 창 둘레. 모바일(고정 없음)은 안 깖 */
.svc > .wrap::before { --grid-c: rgba(255,255,255,.075); -webkit-mask-image: radial-gradient(ellipse 70% 85% at 70% 50%, #000 30%, transparent 80%); mask-image: radial-gradient(ellipse 70% 85% at 70% 50%, #000 30%, transparent 80%); }   /* 10-31 "잘 안 보임": 배경(graphite)이 밝아 선 4.5% → 7.5%, 번짐 범위 넓힘 */
.svc__head, .svc__list, .svc__stage, .svc .sec__more { position: relative; }   /* 격자(::before) 위로. .svc__layout 은 display: contents 라 자식에 직접 */
@media (max-width: 900px) { .svc > .wrap::before { content: none; } }
.why__points { display: grid; gap: 12px; margin-top: var(--content-gap); }
.why__point { display: grid; gap: 10px; padding: 28px 32px; background: var(--c-surface); border: 1px solid var(--c-line); border-radius: var(--radius-card); }
.why__point h3 { font: 700 22px/1.35 var(--font-sans); letter-spacing: -.01em; }
.why__point p { font-size: 16px; color: var(--c-ink-2); text-wrap: pretty; }
/* 10-31 사장님 스케치 "레이아웃 이렇게": 제목 묶음 위, 카드 3장 가로 3칸(901 이상). 스크롤에 묶여 왼쪽 카드부터 차례로 페이드 인.
   타임라인은 카드 목록 하나(--why)를 같이 써서 계단이 화면 크기와 무관하게 일정. 목록이 화면에 다 들어오면(entry 100%) 세 장 모두 끝. CSS 만, 미지원 브라우저는 그냥 보임 */
/* 10-31 "아이콘에 컬러": 사이트 포인트 그린(협업 단계 번호와 같은 계열). 옅은 그린 타일 위에 밝은 그린 선 */
.why__icon { width: 52px; height: 52px; padding: 12px; border-radius: 14px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; color: var(--inkg-300); background: linear-gradient(160deg, color-mix(in srgb, var(--inkg-500) 28%, transparent), color-mix(in srgb, var(--inkg-700) 18%, transparent)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--inkg-400) 30%, transparent); }
@media (min-width: 901px) {
  .why__points { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--card-gap); }
  .why__point { align-content: start; padding: 36px 32px; }
  .why__icon { width: 56px; height: 56px; }
  .why__point h3 { margin-top: 20px; font-size: clamp(20px, 1.6vw, 24px); }
  .why__point p br { display: none; }   /* 3칸이라 폭이 좁아 고정 줄바꿈 대신 자연 줄바꿈 */
  @supports (animation-timeline: view()) {
    .why__points { view-timeline-name: --why; }
    .why__point { animation: whyIn linear both; animation-timeline: --why; }
    /* 10-31 "확실하게 1, 2, 3 순서대로" + 직접 검수: entry 구간(목록 높이 ≈ 휠 3칸)은 카드가 화면 맨 아래에 걸친 채 끝나 안 보였음
       → 목록 위끝이 화면 85% 선 → 45% 선(가운데 근처)을 지나는 동안 3등분, 겹치지 않게. 휠 한 칸에 카드 반 장꼴 */
    .why__point:nth-child(1) { animation-range: cover 11% cover 21%; }
    .why__point:nth-child(2) { animation-range: cover 21% cover 32%; }
    .why__point:nth-child(3) { animation-range: cover 32% cover 42%; }
    @keyframes whyIn { from { opacity: 0; transform: translate(-40px, 24px); } to { opacity: 1; transform: none; } }
  }
}
@media (max-width: 900px) { .why__icon { margin-bottom: 6px; } }
.history { position: relative; margin-top: clamp(96px, 9vw, 136px); }
.history__title { font: 700 clamp(22px, 2vw, 26px)/1.35 var(--font-sans); letter-spacing: -.02em; margin-bottom: 28px; }
.history__list { columns: 3; column-gap: var(--card-gap); font-size: 16px; }   /* 9건 = 3×3 (2열은 5+4 로 한 칸 빔) */
.history__list li { display: flex; gap: 20px; padding: 14px 0; break-inside: avoid; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); }
.history__list time { flex: none; width: 5.2em; font-variant-numeric: tabular-nums; color: var(--c-ink-2); }   /* 빨강은 마침표·CTA 만 */

.partners { position: relative; z-index: 3; padding-block: 96px; background: var(--c-bg); transition: background-color var(--tone-dur) ease; }
/* 파트너 로고: 한 줄로 흐르는 마키(트랙 2개 이어 붙임). 호버 시 정지, reduced-motion 은 줄바꿈 정렬 */
.partners__marquee { display: flex; overflow: hidden; margin-top: var(--content-gap); }   /* mask-image 는 isolation 을 만들어 screen 블렌드가 깨짐(검은 상자) → 페이드 없이 */
.partners__track { display: flex; align-items: center; gap: 88px; padding-right: 88px; flex: none; animation: marquee 120s linear infinite; background: var(--c-bg); transition: background-color var(--tone-dur) ease; }   /* transform 이 stacking context 라 screen 블렌드 백드롭이 필요 → 트랙에 바닥색 */
.partners__marquee:hover .partners__track { animation-play-state: paused; }
.partners__track li { flex: none; display: flex; align-items: center; height: 84px; }   /* 가장 큰 로고(is-xl 84) 가 안 잘리게 (2026-10-30 60 → 84) */
.partners__track img.is-md { height: 46px; }   /* 2026-10-30 로고별 보정 3단(build.py LOGO_SIZE): 아이콘+워드마크 세로 조합 */
.partners__track img.is-lg { height: 72px; }   /* 안쪽 여백 많은 상자형 */
.partners__track img.is-xl { height: 84px; }   /* 여백이 아주 많은 상자형(KB금융·PCMK) */
.partners__track img.is-square { height: 52px; }
.partners__track img.is-boxed { height: 56px; }   /* 안쪽 여백 많은 상자형 로고(한미·KB금융·coop·PCMK·스퀘어노트) */
.partners__track img.is-wide { height: 26px; max-width: 150px; }
.partners__track img { height: 38px; width: auto; max-width: 170px; object-fit: contain; filter: grayscale(1) invert(1) brightness(1.6); opacity: .72; mix-blend-mode: screen; }
.partners__track img.is-native { height: auto; }   /* 2026-10-30 원본이 목표 높이보다 작은 로고는 원본 크기(업스케일 금지) */
@keyframes marquee { to { transform: translateX(-100%); } }
/* 로고 PNG 는 흰 배경이라 반전하면 검은 상자가 됨 → screen 블렌드로 검정만 지움(흰 단색 로고). 호버 시 흰 타일 + 원색 */

/* ---------- 06 프로젝트 문의 ---------- */
.contact__layout { display: grid; grid-template-columns: 7fr 5fr; gap: 64px; align-items: start; }
.contact__info { padding-top: 14px; }   /* 첫 라벨을 제목 첫 줄에 맞춤 */
.contact__actions { margin-top: 32px; }   /* 나머지는 .btn-row */
.contact__info { display: grid; gap: 24px; font-size: 16px; }
.contact__info dt { font-size: 14px; color: var(--c-ink-2); margin-bottom: 6px; }
.contact__info dd a { display: inline-block; padding: 8px 0; margin: -8px 0; border-bottom: 1px solid color-mix(in srgb, currentColor 28%, transparent); transition: border-color .2s; }
.contact__info dd a:hover { border-color: currentColor; }
.contact__copy {
  margin-left: 10px; height: 40px; padding: 0 14px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, currentColor 28%, transparent); background: none; color: inherit;
  font: 500 13px/1 var(--font-sans); vertical-align: middle;
  transition: border-color .25s;
}
.contact__copy:hover { border-color: currentColor; }
.contact__copied { display: block; margin-top: 6px; font-size: 14px; color: var(--green-400); min-height: 1.4em; }   /* 2026-10-30 안내·상태는 그린(레드는 포인트만) */

.footer { padding: 64px 0 36px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: 14px; color: var(--c-ink-2); }
.footer__top { display: grid; grid-template-columns: 1.2fr 2.4fr; gap: 48px; align-items: start; }
.footer__brand svg { width: 28px; height: 28px; color: var(--c-ink); }
.footer__brand p { margin-top: 16px; line-height: 1.8; }
.footer__brand a { display: inline-block; padding: 4px 0; }
.footer__map { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }   /* 2026-10-26 채용 추가로 4열 */
.footer__head { display: block; font-weight: 600; color: var(--c-ink); margin-bottom: 12px; }
.footer__map li { padding: 4px 0; }
.footer__map a { display: inline-block; padding: 3px 0; }   /* 24px 타깃 */
.footer a:hover { color: var(--c-ink); }
.footer__copy { margin-top: 48px; padding-top: 20px; border-top: 1px solid color-mix(in srgb, currentColor 10%, transparent); font-size: 13px; }
@media (max-width: 1199px) { .footer__sep { display: none; } .footer__brand a[href^="mailto"] { display: block; } }   /* 2026-10-30 구분점이 줄 끝에 매달리던 것 → 이메일은 제 줄. 767 → 1199(태블릿 1024 에서도 매달림) */
@media (max-width: 900px) { .footer__top { grid-template-columns: 1fr; } .footer__map { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) {   /* 2026-10-28 모바일 사이트맵 2뎁스 생략(1,000px 넘게 길었음): 1뎁스 4개만 가로로 */
  .footer__map { display: flex; flex-wrap: wrap; gap: 4px 24px; }
  .footer__map ul { display: none; }
  .footer__map .footer__head { margin-bottom: 0; padding: 10px 0; }   /* 2026-10-30 .footer__map a(3px) 보다 세게 → 탭 타깃 44 */
  .footer__copy { margin-top: 32px; }
}

/* ---------- 반응형 ---------- */
@media (max-width: 1199px) {
  .how__layout { grid-template-columns: 1fr; gap: 48px; }
  .how__sticky { position: static; }
}
@media (max-width: 900px) {
  /* 2026-10-29 모바일도 스크롤 연출 유지(사장님 "스크롤 살리는 방향"): sticky 100svh + 단계 전환 그대로, 글은 위·삼각형은 아래(structure.js cy .74). 해체 뒤 바로 프로젝트라 200svh */
  .hero { height: 300vh; height: 300svh; }   /* 데스크톱과 같음: 1vh 삼각형 → 1vh 해체 → 1vh 프로젝트 커튼 */
  .hero__stage { align-items: flex-end; }   /* 사장님 "요소는 하단 30% 정도 떠 있는 곳": 글 블록 바닥 = 화면 75%, 삼각형은 위쪽(structure.js 모바일 tiny 링) */
  .hero__stage .wrap { padding-bottom: 22svh; }
  .hero__text { max-width: 100%; padding-top: 0; }
  .hero__title { white-space: normal; }

  /* 프로젝트: 핀 없이 네이티브 가로 스크롤. 히어로 위 커튼은 유지(2026-10-29) */
  .work { padding-block: var(--sec-pad); }
  .work__scroll { height: auto; }
  .work__stage { position: static; height: auto; overflow: visible; padding-top: 0; }
  .work__track {
    width: auto; overflow-x: auto; padding-right: var(--gutter);
    scroll-snap-type: x mandatory; scroll-padding-left: var(--gutter); scrollbar-width: none;
  }
  .work__track::-webkit-scrollbar { display: none; }
  .work__card { width: 84vw; scroll-snap-align: start; transform: none; opacity: 1; }
  .work__bar { display: none; }
  .how { margin-top: 0; box-shadow: none; }

  .how__step { grid-template-columns: auto 1fr; gap: 6px 14px; align-items: baseline; padding-block: 28px; }   /* 2026-10-28 번호가 제목 위에 크게 떠 길어짐 → 번호·제목 한 줄 */
  .how__num { font-size: 26px; }
  .history__list { columns: 1; }
  .contact__layout { grid-template-columns: 1fr; gap: 40px; }
}
@media (max-width: 1199px) {   /* 2026-10-30 햄버거 메뉴 760 → 1199: 761~1140 에서 가운데 메뉴와 오른쪽 버튼이 겹쳤음(태블릿) */
  .site-header__cta { display: none; }
  .site-header__menu { display: inline-flex; align-items: center; }
  .site-header[data-menu-open] .site-header__menu { background: var(--c-ink); color: var(--c-bg); border-color: var(--c-ink); }   /* 열림 = 반전 + 글자 '닫기'(header.js) */
  .site-header__nav {
    position: fixed; inset: var(--header-h) 0 0; transform: none; display: none;
    padding: 24px var(--gutter) max(24px, env(safe-area-inset-bottom)); background: var(--c-bg); color: var(--c-ink);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .site-header[data-menu-open] { background: var(--c-bg); }
  .site-header[data-menu-open] .site-header__nav { display: block; }
  .site-header__nav > ul { flex-direction: column; gap: 0; }
  .site-header__nav a { display: block; padding: 18px 0; font-size: 24px; opacity: 1; }
  .site-header__nav > ul > li { border-bottom: 1px solid color-mix(in srgb, currentColor 12%, transparent); }   /* 선은 li 에: 토글 칸 아래까지 이어짐 */
  .site-header__m-only { display: grid; }
  .site-header__nav-foot { display: block; margin-top: 32px; }
  .site-header__nav-foot p { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 20px; font-size: 15px; color: var(--c-ink-2); }
  .site-header__nav-foot p a { display: inline-block; padding: 8px 0; font-size: 15px; border: 0; }   /* 44px 타깃 */
  .site-header__nav-foot .btn { display: flex; justify-content: center; }   /* 2026-10-30 태블릿(761~1199)에선 .btn--block 가운데 정렬(760 이하 규칙)이 안 걸려 글자가 왼쪽에 붙었음 */
  .site-header__nav a::before { display: none; }
  .site-header__nav li { display: grid; grid-template-columns: 1fr auto; align-items: center; }
  .site-header__nav .sub {
    grid-column: 1 / -1; position: static; transform: none; min-width: 0; padding: 0 0 12px 16px; border-radius: 0;
    background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; opacity: 1; visibility: visible; display: none;
  }
  .site-header__nav .has-sub[data-open] .sub { display: block; }
  .site-header__nav .has-sub:hover > .sub, .site-header__nav .has-sub:focus-within > .sub { transform: none; }
  .site-header__nav .sub a { padding: 10px 0; font-size: 16px; border-bottom: 0; }
  .site-header__sub-toggle {
    display: inline-flex; width: 44px; height: 44px; align-items: center; justify-content: center;
    border: 0; background: none; color: inherit; cursor: pointer;
  }
  .site-header__sub-toggle::before { content: ""; width: 8px; height: 8px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .2s; }
  .has-sub[data-open] .site-header__sub-toggle::before { transform: rotate(-135deg); }
}
@media (max-width: 760px) {
}

/* ---------- 모션 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .js .sec__title[data-reveal] { clip-path: none; }
  .js .is-in .dot { animation: none; }
  .why__point { animation: none; }
  .work__media img { transform: none; }
  .hero { height: auto; min-height: 100svh; }
  .hero__stage { position: relative; height: auto; min-height: 100svh; }
  .work { margin-top: 0; box-shadow: none; padding-block: var(--sec-pad); }
  .work__scroll { height: auto; }
  .work__stage { position: static; height: auto; overflow: visible; padding-top: 0; }
  .work__track { width: auto; overflow-x: auto; }
  .work__card { transform: none; opacity: 1; }
  .work__bar { display: none; }
  .how { margin-top: 0; box-shadow: none; }
  .partners__marquee { mask-image: none; -webkit-mask-image: none; flex-wrap: wrap; }
  .partners__track { animation: none; flex-wrap: wrap; gap: 32px 56px; }
  .partners__track[aria-hidden] { display: none; }
}

@media (max-width: 767px) {   /* 2026-10-28 (파일 끝: .sec__title 뒤에 와야 이김) 모바일: 섹션 제목 한 값(34/26 섞임 → 30), 단독 버튼은 가로 100% */
  .sec__title, .sec__title--sm { font-size: 30px; }
  .btn--block { width: 100%; justify-content: center; }
}

/* 2026-10-29 모바일 히어로 타이포·버튼(사장님 "로고 크다·버튼 2중·폰트"). 단계 전환·삼각형은 데스크톱과 같음(위 900 블록) */
@media (max-width: 900px) {
  #rain { opacity: .5; }
  .hero__statement { width: auto; }
  .hero__final { width: auto; min-width: 0; margin-top: 20px; }
  .hero__label { margin-bottom: 20px; font-size: 12px; }
  .hero__title { font-size: clamp(44px, 13vw, 64px); }
  .hero__headline { font-size: clamp(24px, 7vw, 34px); }
  .hero__lead { font-size: 15px; line-height: 1.6; }
  .hero__actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 24px; }
  .hero__actions .btn { justify-content: center; height: 46px; padding: 0 12px; font-size: 14px; }
}
@media (max-width: 760px) {
  .site-header__logo svg { width: 28px; height: 28px; }
}

/* ---------- 03 협업 방식 · 등각 레이어 스택(.how--iso, 2026-10-29 시안-H3 이식, js/how-iso.js) ---------- */
.how--iso > .wrap { height: 400svh; }   /* 핀 트랙: 100svh 스테이지 + 300svh 진행 */
.how--iso .how__layout {
  position: sticky; top: 0; height: 100svh; isolation: isolate;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center;
  padding-top: calc(var(--header-h) + 24px);   /* 2026-10-29 헤더 아래에서 가운데 정렬. 96 까지 내렸더니 790 높이에서 스택이 잘림 → 24 로 되돌리고 SVG viewBox 여백을 잘라 균형(사장님 "균형이 안 맞아 보인다") */
}
/* (2026-10-29 오른쪽 30° 해칭은 사장님 "빗금 말고 초록 매트릭스" 로 폐기 → .how__rain) */
.how--iso .how__sticky { position: static; display: flex; flex-direction: column; }
.how--iso .sec__desc { max-width: 26em; }
/* 2026-10-29 왼쪽 정리(사장님 "01/04 폰트 확 줄이고 내용이 보이게"): 큰 카운터 → 진행 바 옆 13px, 단계 4개 전부 목록으로(활성만 밝고 짧은 글 펼침) */
/* 진행 바는 행 왼쪽 세로 3px(가로 바 + 04/04 카운터 폐기) */
.how--iso .how__steps { display: block; margin-top: 44px; border: 0; }
.how--iso .how__step { display: grid; grid-template-columns: 3px 40px 1fr; gap: 0 16px; align-items: baseline; padding: 10px 0; border: 0; opacity: .42; transition: opacity .4s var(--ease-out); }
.how__bar { position: relative; align-self: stretch; min-height: 28px; overflow: hidden; background: color-mix(in srgb, currentColor 18%, transparent); }
.how__bar u { position: absolute; inset: 0; background: var(--c-red); transform-origin: 50% 0; transform: scaleY(0); }
.how--iso .how__step.is-active { opacity: 1; }
.how--iso .how__num { font: 400 12px/1.6 var(--font-mono); letter-spacing: .12em; color: var(--c-ink-2); background: none; -webkit-text-fill-color: currentColor; }
.how--iso .how__step.is-active .how__num { color: var(--c-red-text); }   /* 2026-10-30 12px 글자라 --c-red 는 3.3:1 → 글자용 레드(red-400) */
.how--iso .how__name { display: flex; align-items: baseline; gap: 12px; margin: 0; font-size: 20px; color: var(--c-ink); transition: font-size .3s var(--ease-out); }
.how--iso .how__name::after { content: attr(data-label); font: 400 11px/1 var(--font-mono); letter-spacing: .14em; color: var(--c-ink-2); }
.how--iso .how__step.is-active .how__name { font-size: 24px; }
.how--iso .how__text { display: none; }
.how__short { display: none; margin-top: 8px; max-width: 26em; font-size: 16px; line-height: 1.7; color: var(--c-ink-2); }
.how--iso .how__step.is-active .how__short { display: block; }
.how__iso { position: relative; display: grid; place-items: center; min-width: 0; align-self: stretch; }
.how__rain {   /* 그린 레인(rain.js, 바닥 #0F0F11 불투명이라 screen 으로 섞고 가장자리 마스크) */
  position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none;
  mix-blend-mode: screen; opacity: .75;
  -webkit-mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%); mask-image: radial-gradient(70% 70% at 50% 50%, #000 30%, transparent 100%);
}
.how__iso svg { position: relative; z-index: 1; }
@media (min-width: 901px) {   /* 2026-10-30 사장님 "svg 55px 내려"(84) + "왼쪽에 svg, 오른쪽에 텍스트"(85). 모바일(세로 배치)은 제외 */
  .how__iso svg { top: 25px; }   /* 2026-10-30 55 → 25 (사장님) */
  .how--iso .how__layout { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }   /* 직전: 5fr 7fr(글 | 그림) */
  .how--iso .how__iso { order: -1; justify-items: end; }   /* 마크업 순서(글 → 그림)는 그대로, 보이는 순서만. (87) 왼쪽 라인 맞춤 → (89) 글 쪽으로: 칸 오른쪽에 붙이고 */
  .how--iso .how__iso svg { --gap: 152px; width: min(100% - 72px, 560px); margin-right: clamp(72px, 100% - 560px, var(--gap)); }   /* 그림↔글 간격 = --gap + 칸 사이 48 ≈ 200(사장님 "너무 들어갔다" 120 → 200). 칸이 좁으면 72 까지 줄어 그림 크기 유지. viewBox 폭 560(how-iso.js)과 짝 */
  /* (91) 사장님 "서브 텍스트 나타날 때 위아래 출렁" → 원인: 짧은 글이 display none↔block 이라 단계마다 줄 수(1~2줄)만큼 목록 높이가 바뀌고,
     이름 글자 20↔24 가 .3s 동시에 커지고 줄며 행 높이가 흔들림 → 글 칸이 세로 가운데 정렬이라 제목까지 같이 움직였음.
     PC 는 이름 줄 높이 고정 + 목록(ul) 최소 높이를 "가장 긴 경우"(4행 + 짧은 글 2줄)로 고정 → 목록 바깥 높이가 어느 단계에서나 같음.
     (92) 처음엔 활성 행 안에 2줄 자리를 비웠더니 1줄 단계 밑에 빈칸·빨간 바가 남아 어색(사장님 "최선일까") → 남는 높이는 목록 맨 아래로 */
  .how--iso .how__name { line-height: 32px; }
  .how--iso .how__steps { min-height: calc(4 * (32px + 20px) + 8px + 2 * 1.7 * 16px); }   /* 행 = 이름 32 + 위아래 패딩 20, 짧은 글 = 위 8 + 16px×1.7×2줄 */
}
.how__iso svg { width: min(100%, 760px); height: auto; max-height: calc(100svh - var(--header-h) - 96px); overflow: visible; }
.plate { transition: opacity .45s ease; }
.plate .face { fill: var(--c-bg); stroke: color-mix(in srgb, currentColor 32%, transparent); stroke-width: 1.2; transition: stroke .4s ease, fill .4s ease; }
.plate .side { fill: var(--c-surface); stroke: color-mix(in srgb, currentColor 32%, transparent); stroke-width: 1.2; }
.plate .det { fill: none; stroke: color-mix(in srgb, currentColor 32%, transparent); stroke-width: 1.1; transition: stroke .4s ease; }
.plate .detf { fill: color-mix(in srgb, currentColor 32%, transparent); transition: fill .4s ease; }
.plate.on .face { stroke: var(--c-ink); fill: var(--c-surface); }
.plate.on .det { stroke: var(--c-ink); } .plate.on .detf { fill: var(--c-ink); }
.plate .red { fill: var(--c-red); }
.plate.done { opacity: .78; }   /* 2026-10-29 조립: 쌓인 층은 남아 있음(분해도의 .32 흐림 폐기) */
.plate .silk { font: 500 8.5px var(--font-mono); letter-spacing: .14em; fill: color-mix(in srgb, currentColor 55%, transparent); }   /* 층 앞면 실크스크린 */
.plate.on .silk { fill: var(--c-ink-1); }
.plate .log { font: 500 10px var(--font-mono); letter-spacing: .04em; fill: color-mix(in srgb, currentColor 70%, transparent); white-space: pre; }
.plate .port { fill: var(--c-bg); stroke: color-mix(in srgb, currentColor 40%, transparent); stroke-width: 1; }   /* 앞면 엣지 커넥터 슬롯 */
.plate.on .port { stroke: var(--c-ink-1); }
.conn { stroke: color-mix(in srgb, currentColor 45%, transparent); stroke-width: 1; stroke-dasharray: 3 4; }   /* 층 사이 배선 */
.conn-dot { fill: var(--c-red); }
.conn-dot--ai { fill: var(--green-400); }   /* 가운데 가닥 = AI 신호(그린) */
.plate .log--ai { fill: var(--green-400); }
.ai { transition: opacity .4s ease; }   /* AI 태그: 활성 창 노치에 꽂힌 그린 점 + 라벨 */
.ai line { stroke: color-mix(in srgb, var(--green-400) 60%, transparent); stroke-width: 1; }
.ai .ai-dot { fill: var(--green-400); }
.ai .ai-ring { fill: none; stroke: var(--green-400); stroke-width: 1; }
.ai text { font: 500 11px var(--font-mono); letter-spacing: .14em; fill: var(--green-400); }
.plate .ai-fill { fill: var(--green-400); transition: fill .4s ease; }   /* AI 흔적: 분류된 줄·고친 코드 줄·이상 지점 */
.plate .ai-gen { transition: opacity .4s ease; }   /* AI 가 생성한 카드(그린 점선) */
.plate .ai-gen rect:first-child { fill: none; stroke: var(--green-400); stroke-width: 1.1; stroke-dasharray: 4 3; }
.plate .ai-ring { fill: none; stroke: var(--green-400); stroke-width: 1; }
.ptr { fill: var(--c-red); transition: transform .55s cubic-bezier(.2, .8, .2, 1), opacity .3s; }
@media (max-width: 900px) {
  .how--iso > .wrap { height: 300svh; }   /* 2026-10-30 320 → 300: 핀 구간 조금 짧게 */
  .how--iso .how__layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto; gap: 16px; align-items: start; align-content: center; padding-top: calc(var(--header-h) + 24px); }   /* 2026-10-30 그림 아래 빈 바닥 한 덩어리 → 세로 가운데(위아래로 나눔) */
  .how--iso .sec__desc { display: none; }
  .how--iso .how__steps { margin-top: 20px; }
  .how--iso .how__step { padding: 8px 0; }
  .how--iso .how__step:not(.is-active) { display: none; }   /* 모바일은 자리가 없어 활성 단계만 */
  .how--iso .how__name, .how--iso .how__step.is-active .how__name { font-size: 22px; }
  .how__short { font-size: 15px; }
  .how__iso { align-self: start; margin-top: 8px; }
  .how__iso svg { max-height: 54svh; }
}
@media (prefers-reduced-motion: reduce) { .plate, .ptr { transition: none; } }