/* Dalpha AX 랜딩 프로토타입 — 피그마 「최종」(234:3025) 기준. 1920 화면에서 본문 1440px. */
:root {
  /* 마스크 아이콘은 파일로 빼면 file:// 로 열 때 CORS 로 막혀 안 보임. 원본은 Figma 아이콘 */
  --icon-menu: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cg%3E%3Cpath d='M2.25 18C2.25 17.5858 2.58154 17.25 2.99051 17.25H21.0095C21.4185 17.25 21.75 17.5858 21.75 18C21.75 18.4142 21.4185 18.75 21.0095 18.75H2.99051C2.58154 18.75 2.25 18.4142 2.25 18Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23242424'/%3E%3Cpath d='M2.25 12C2.25 11.5858 2.58154 11.25 2.99051 11.25H21.0095C21.4185 11.25 21.75 11.5858 21.75 12C21.75 12.4142 21.4185 12.75 21.0095 12.75H2.99051C2.58154 12.75 2.25 12.4142 2.25 12Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23242424'/%3E%3Cpath d='M2.25 6C2.25 5.58579 2.58154 5.25 2.99051 5.25H21.0095C21.4185 5.25 21.75 5.58579 21.75 6C21.75 6.41421 21.4185 6.75 21.0095 6.75H2.99051C2.58154 6.75 2.25 6.41421 2.25 6Z' fill-rule='evenodd' clip-rule='evenodd' fill='%23242424'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M10.5 15H9V13.5H10.5V15ZM12 13.5H10.5V12H12V13.5ZM13.5 12H12V10.5H13.5V12ZM15 7.5H16.5V9H15V10.5H13.5V9H1.5V7.5H13.5V6H15V7.5ZM13.5 6H12V4.5H13.5V6ZM12 4.5H10.5V3H12V4.5ZM10.5 3H9V1.5H10.5V3Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  --icon-arrow-diagonal: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M18.9062 15.8303C18.906 16.2442 18.5702 16.5801 18.1562 16.5803C17.7422 16.5803 17.4065 16.2444 17.4062 15.8303V7.7395L6.5459 18.5999C6.25301 18.8927 5.77824 18.8927 5.48535 18.5999C5.19263 18.3069 5.19252 17.8321 5.48535 17.5393L16.3447 6.67993H8.25586C7.84165 6.67993 7.50586 6.34415 7.50586 5.92993C7.50586 5.51572 7.84165 5.17993 8.25586 5.17993H18.9062V15.8303Z' fill='%235C5F65'/%3E%3C/g%3E%3C/svg%3E");
  --icon-chevron: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M7.5 15.5H6V14H7.5V15.5ZM9 14H7.5V12.5H9V14ZM10.5 12.5H9V11H10.5V12.5ZM12 11H10.5V9.5H12V11ZM13.5 9.5H12V8H13.5V9.5ZM12 8H10.5V6.5H12V8ZM10.5 6.5H9V5H10.5V6.5ZM9 5H7.5V3.5H9V5ZM7.5 3.5H6V2H7.5V3.5Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  --icon-download: url("data:image/svg+xml,%3Csvg preserveAspectRatio='none' overflow='visible' width='18' height='18' viewBox='0 0 18 18' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cg%3E%3Cpath d='M3 15H13.5V12H15V16.5H1.5V12H3V15ZM9 9H10.5V10.5H9V12H7.5V10.5H6V9H7.5V1.5H9V9ZM6 9H4.5V7.5H6V9ZM12 9H10.5V7.5H12V9ZM4.5 7.5H3V6H4.5V7.5ZM13.5 7.5H12V6H13.5V7.5Z' fill='white'/%3E%3C/g%3E%3C/svg%3E");
  --ink: #242424;
  --ink-2: #1a1a1a;
  --sub: #6d6d6d;
  --quote: #3d3d3d;
  --line: #ebebeb;
  --orange: #ed5500;
  --orange-soft: #ffeee3;
  --orange-deep: #c94800;
  --dark: #080807;
  --gray: #f6f7f7;
  --gray-2: #ecedee;
  --pad: clamp(20px, 6vw, 96px);
  --sec-y: clamp(88px, 7.3vw, 140px);
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  /* 행간은 글자 크기 비례로 두 가지만 씀: 제목 148%, 본문 · 작은 글자 140% (히어로 제목만 시안대로 118%) */
  --lh-title: 1.48;
  --lh-body: 1.4;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  background: #fff; color: var(--ink);
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, sans-serif;
  -webkit-font-smoothing: antialiased; line-height: var(--lh-body); letter-spacing: -0.01em; word-break: keep-all; overflow-wrap: break-word;
}
/* 영문판은 시안대로 전부 Geist */
html[lang='en'] body { font-family: 'Geist', -apple-system, BlinkMacSystemFont, sans-serif; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }
img { display: block; max-width: 100%; }
ol, ul { list-style: none; }

.wrap { box-sizing: content-box; max-width: 1440px; margin-inline: auto; padding-inline: var(--pad); }
.section { padding-block: var(--sec-y); }
.dark { background: var(--dark); color: #fff; }
.gray { background: var(--gray); }
.center { text-align: center; }
.m-only { display: none; }

/* 공통 글자 */
.h2 { font-size: clamp(32px, 2.5vw, 48px); font-weight: 600; line-height: var(--lh-title); letter-spacing: -0.02em; text-wrap: balance; }
.lead { margin-top: 16px; font-size: clamp(17px, 1.05vw, 20px); color: var(--sub); }
.lead.small { font-size: clamp(16px, 0.95vw, 18px); }
.dark .lead { color: #a3a3a3; }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--sub); }
.section-head { margin-bottom: 56px; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  height: 52px; padding: 0 24px; border-radius: 40px;
  font-size: 16px; font-weight: 600; white-space: nowrap;
  transition: background-color 0.2s;
}
/* 상태는 DDS SolidButton 규정을 따름 — 호버 때 한 단계 진한 색. 눌렀을 때(active)도 호버와 같게 둠 */
.btn-dark { background: var(--ink); color: #fff; }
.btn-dark:hover, .btn-dark:active { background: #0c0c0c; }
.btn-orange { background: var(--orange); color: #fff; }
.btn-orange:hover, .btn-orange:active { background: #e74c0c; }
.btn-line { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-line:hover, .btn-line:active { background: #f3f3f3; }
.btn-ghost-dark { background: #242424; color: #fff; }
.btn-ghost-dark:hover, .btn-ghost-dark:active { background: #333; }
.btn-arrow { justify-content: space-between; gap: 72px; padding: 0 16px 0 18px; }
.arrow {
  width: 18px; height: 18px; flex: none; transition: transform 0.25s var(--ease);
  background: currentColor;
  -webkit-mask: var(--icon-arrow) center / contain no-repeat; mask: var(--icon-arrow) center / contain no-repeat;
}
.btn:hover .arrow { transform: translateX(4px); }
.cta { display: flex; gap: 12px; flex-wrap: wrap; }
.cta.center { justify-content: center; }

/* 스크롤하면 나타나기 */
[data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 0.9s var(--ease) var(--d, 0s), transform 0.9s var(--ease) var(--d, 0s); }
[data-reveal].is-in { opacity: 1; transform: none; }

/* 로고 무한 롤링 */
.marquee { overflow: hidden; -webkit-mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee-track { --gap: 16px; display: flex; gap: var(--gap); width: max-content; animation: marquee 40s linear infinite; }
.marquee.reverse .marquee-track { animation-direction: reverse; animation-duration: 48s; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(calc(-50% - var(--gap) / 2)); } }
/* 고객사 로고 — 피그마 logo_gray(336:2043)처럼 단색 · 낮은 불투명도. 파일은 흰색 단색이라 밝은 배경에선 검게 뒤집음 */
.logo-track { --gap: clamp(48px, 4.2vw, 80px); align-items: center; height: 56px; animation-duration: 60s; }
.logo-track img { flex: none; }
.hero-clients .logo-track img { filter: brightness(0); opacity: 0.32; }

/* ───── GNB ───── */
.gnb {
  position: fixed; z-index: 50; top: 24px; left: 32px; right: 32px;
  height: 56px; padding: 0 12px 0 30px; border-radius: 999px;
  display: flex; align-items: center; justify-content: space-between;
  color: var(--ink); transition: color 0.4s, transform 0.5s var(--ease);
}
/* 유리 배경은 따로 깔아서, 히어로 그래픽이 지나가는 부분만 뚫어 줌 */
.gnb::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit;
  background: rgba(255, 255, 255, 0.07); border: 1px solid rgba(255, 255, 255, 0.12);
  backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  transition: background-color 0.4s, border-color 0.4s;
}
.gnb.is-scrolled::before { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.06); }
.gnb[data-theme='dark'] { color: #fff; }
.gnb[data-theme='dark']::before { background: rgba(20, 20, 20, 0.55); border-color: rgba(255, 255, 255, 0.1); }
.gnb.over-hero::before {
  --a: calc(var(--hole-x) - 280px); --b: calc(var(--hole-x) - 150px);
  --c: calc(var(--hole-x) + 150px); --d: calc(var(--hole-x) + 280px);
  -webkit-mask: linear-gradient(90deg, #000 var(--a), transparent var(--b), transparent var(--c), #000 var(--d));
  mask: linear-gradient(90deg, #000 var(--a), transparent var(--b), transparent var(--c), #000 var(--d));
}
.gnb.is-hidden { transform: translateY(-120px); }
.gnb-logo { display: flex; }
.gnb-links { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 40px; }
.gnb-links a { font-size: 15px; opacity: 0.72; transition: opacity 0.2s, color 0.2s; }
.gnb-links a:hover { opacity: 1; color: var(--orange); }
.gnb-actions { display: flex; align-items: center; gap: 20px; }
.gnb-ext { font-size: 13px; opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.gnb-ext:hover { opacity: 1; color: var(--orange); }
/* 한글판 · 영문판 스위치 (피그마 370:2585) — 고른 쪽은 진하게, 나머지는 흐리게 */
.lang-switch { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.lang-switch svg { flex: none; }
.lang-switch button { padding: 2px 0; opacity: 0.7; transition: opacity 0.2s, color 0.2s; }
.lang-switch button[aria-pressed='true'] { opacity: 1; font-weight: 500; }
.lang-switch button[aria-pressed='false']:hover { opacity: 1; color: var(--orange); }
.lang-switch i { width: 3px; height: 3px; border-radius: 50%; background: currentColor; opacity: 0.7; }
.gnb-contact {
  display: flex; align-items: center; gap: 10px; height: 40px; padding: 0 18px 0 16px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 15px; font-weight: 500; transition: background-color 0.2s, color 0.4s;
}
.gnb[data-theme='dark'] .gnb-contact { background: #fff; color: var(--ink); }
/* 호버 = DDS Primary-black(어두운 배경 위에서는 Secondary-black) 규정, 눌렀을 때도 같게 */
.gnb-contact:hover, .gnb-contact:active { background: #0c0c0c; }
.gnb[data-theme='dark'] .gnb-contact:hover, .gnb[data-theme='dark'] .gnb-contact:active { background: #f3f3f3; }

/* 태블릿 · 모바일 메뉴 */
/* DDS Button-subtle icon · medium · circle */
.gnb-burger { display: none; width: 40px; height: 40px; place-items: center; border-radius: 999px; transition: background-color 0.2s; }
@media (hover: hover) { .gnb-burger:hover { background: rgba(190, 190, 190, 0.15); } }
.gnb-burger i { width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--icon-menu) center / contain no-repeat; mask: var(--icon-menu) center / contain no-repeat; }
.mnav {
  position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column;
  background: #fff; color: var(--ink); opacity: 0; transition: opacity 0.3s;
}
.mnav[hidden] { display: none; }
.mnav.is-open { opacity: 1; }
/* 열어도 로고 · 닫기 버튼이 그대로 있도록 닫힌 GNB 자리에 맞춤: 위 24 + 높이 56 + 아래 24 + 구분선 1, 왼쪽 32 + 30, 오른쪽 32 + 12 */
.mnav-top { flex: none; display: flex; align-items: center; justify-content: space-between; height: 105px; padding: 0 44px 0 62px; border-bottom: 1px solid #e3e3e3; }
.mnav-close { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; transition: background-color 0.2s; }
.mnav-close:hover { background: rgba(190, 190, 190, 0.15); }
.mnav-actions { display: flex; align-items: center; gap: 12px; }
/* GNB 언어 스위치와 같은 모양. 손가락으로 누르기 쉽게 버튼 높이를 40 으로 */
.mnav .lang-switch { gap: 2px; }
.mnav .lang-switch svg { margin-right: 4px; }
.mnav .lang-switch button { height: 40px; padding: 0 4px; }
.mnav-links { flex: 1; overflow-y: auto; padding: 8px 24px; }
.mnav-links a {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 68px; border-bottom: 1px solid #e3e3e3;
  font: 400 20px/var(--lh-body) 'Geist', sans-serif; letter-spacing: -0.01em;
  opacity: 0; transform: translateY(8px); transition: opacity 0.4s, transform 0.5s var(--ease), color 0.2s;
}
.mnav-links a:hover { color: var(--orange); }
/* 호버 하이라이트: 아래 선이 왼쪽 주황에서 오른쪽 흰색으로 */
.mnav-links a::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, var(--orange), #fff); opacity: 0; transition: opacity 0.2s; }
.mnav-links a:hover::after { opacity: 1; }
.mnav.is-open .mnav-links a { opacity: 1; transform: none; }
.mnav.is-open .mnav-links a:nth-child(2) { transition-delay: 0.04s; }
.mnav.is-open .mnav-links a:nth-child(3) { transition-delay: 0.08s; }
.mnav.is-open .mnav-links a:nth-child(4) { transition-delay: 0.12s; }
.mnav.is-open .mnav-links a:nth-child(5) { transition-delay: 0.16s; }
.mnav.is-open .mnav-links a:nth-child(6) { transition-delay: 0.2s; }
.mnav-ext { flex: none; width: 24px; height: 24px; background: currentColor; -webkit-mask: var(--icon-arrow-diagonal) center / contain no-repeat; mask: var(--icon-arrow-diagonal) center / contain no-repeat; }
.mnav-cta { flex: none; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px calc(32px + env(safe-area-inset-bottom)); }
.mnav-cta .btn { width: 100%; }
.mnav-cta .btn-line { border-radius: 999px; font-size: 15px; }
body.menu-open { overflow: hidden; }

/* ───── 01 Hero ───── */
/* 브라우저 창 높이에서 80px 를 남겨 다음 섹션 그라데이션이 살짝 보이게 함. 아주 큰 화면은 1040px 까지만, 낮은 화면은 내용 높이만큼 */
.hero { position: relative; overflow: hidden; min-height: min(calc(100vh - 80px), 1040px); min-height: min(calc(100svh - 80px), 1040px); display: flex; flex-direction: column; }
.hero > .wrap { position: relative; z-index: 1; width: calc(100% - 2 * var(--pad)); }
/* 바탕은 피그마 274:373 의 「이미지 90% + #c7c7c7」과 같은 값: 캔버스가 페이드인할 때 회색이 비치지 않게 캔버스 위에 #c7c7c7 10% 를 덮음 */
/* 03 Problem 으로 넘어가는 그라데이션: 히어로 아랫단에서 하프톤을 흰색으로 지우고, Problem 윗단이 흰색 → 검정으로 이어받음 */
.hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%) 0 100% / 100% 160px no-repeat, rgba(199, 199, 199, 0.1); }
.hero-main { flex: 1; display: flex; align-items: center; padding-top: 120px; }
.hero-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.hero .cta { margin-top: 24px; }
/* 피그마 274:377: 1920 기준 92px, 자간 -4px, 단어 사이 공백만 -8px */
.hero-title { font: 400 clamp(52px, 4.375vw, 84px)/1.18 'Geist', sans-serif; letter-spacing: -0.0435em; }
.hero-title .sp { letter-spacing: -0.087em; }
/* 글자 아랫부분이 잘리지 않게 여백을 두되, 줄 간격은 1.18 그대로 유지 */
.hero-title .line { display: block; overflow: hidden; padding-bottom: 0.06em; margin-bottom: -0.06em; }
.hero-title .line > span { display: inline-block; transform: translateY(110%); animation: rise 1.1s var(--ease) forwards; }
.hero-title .line:nth-child(2) > span { animation-delay: 0.12s; }
@keyframes rise { to { transform: none; } }
.hero-sub { padding-left: 8px; font-size: 20px; letter-spacing: -0.04em; color: var(--ink); }
.hero-clients { margin-top: 64px; margin-bottom: clamp(32px, 3.3vw, 64px); display: flex; flex-direction: column; gap: 14px; }
.hero-clients .logo-track { zoom: 0.7; }

/* ───── 02 LAICA ───── */
.demo {
  position: relative; width: min(936px, 100%); margin: 0 auto 56px; padding: 28px; border-radius: 24px;
  background: rgba(255, 255, 255, 0.08); box-shadow: 0 40px 80px rgba(0, 0, 0, 0.1);
  display: flex; flex-direction: column; gap: 48px;
}
.chat { display: flex; flex-direction: column; gap: 24px; min-height: 488px; }
.msg { display: flex; gap: 8px; opacity: 0; transform: translateY(12px); transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); }
.msg.is-shown { opacity: 1; transform: none; }
.msg.ai::before {
  content: ''; flex: none; width: 42px; height: 42px; border-radius: 50%;
  background: url(assets/avatar-gray.png) center / contain no-repeat;
}
.msg.ai.hot::before { background-image: url(assets/avatar-orange.png); }
.msg.ai.is-thinking::before { animation: think 1.2s ease-in-out infinite; }
@keyframes think { 50% { transform: scale(0.88); filter: brightness(1.25); } }
.bubble { position: relative; max-width: 560px; font-size: 14px; white-space: pre-wrap; }
.msg.ai .bubble { padding-top: 10px; font-weight: 500; color: #f4f4f4; }
.msg.me { justify-content: flex-end; }
.msg.me .bubble { padding: 12px 16px; border-radius: 14px; background: rgba(255, 88, 0, 0.18); color: #fff; text-align: right; }
.bubble .ghost { visibility: hidden; }
.bubble .live { position: absolute; left: 0; right: 0; top: 0; padding: inherit; }
.msg.me .bubble .live { text-align: right; }
.live .tok { animation: tok 0.35s ease-out both; }
@keyframes tok { from { opacity: 0; filter: blur(2px); } }
.live.is-streaming::after {
  content: ''; display: inline-block; width: 8px; height: 8px; margin-left: 4px; border-radius: 50%;
  background: #f4f4f4; vertical-align: middle; animation: blink 0.9s ease-in-out infinite;
}
.dots { display: inline-flex; gap: 4px; height: 22px; align-items: center; }
.dots i { width: 6px; height: 6px; border-radius: 50%; background: #8a8a8a; animation: dot 1.1s ease-in-out infinite; }
.dots i:nth-child(2) { animation-delay: 0.15s; }
.dots i:nth-child(3) { animation-delay: 0.3s; }
@keyframes dot { 30% { transform: translateY(-4px); background: #f4f4f4; } }
@keyframes blink { 50% { opacity: 0.2; } }
.chat-input {
  display: flex; align-items: center; gap: 8px; height: 42px; padding: 8px 8px 8px 16px; border-radius: 12px;
  background: rgba(255, 255, 255, 0.08); border: 1px solid #434343; transition: border-color 0.3s;
}
.chat-input.is-typing { border-color: rgba(237, 85, 0, 0.6); }
.chat-input-text { flex: 1; font-size: 14px; color: #999; white-space: nowrap; overflow: hidden; }
.chat-input-text.is-typed { color: #fff; }
.chat-input-text.is-typed::after { content: ''; display: inline-block; width: 1px; height: 15px; margin-left: 1px; background: #fff; vertical-align: -2px; animation: blink 0.8s steps(1) infinite; }
.chat-send { width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center; color: #8a8c90; transition: background-color 0.2s, color 0.2s, transform 0.2s; }
.chat-send.is-pressed { background: var(--orange); color: #fff; transform: scale(0.9); }
.demo-replay {
  position: absolute; top: 16px; right: 16px; padding: 6px 12px; border-radius: 999px;
  font-size: 12px; color: #a3a3a3; background: rgba(255, 255, 255, 0.06); transition: color 0.2s, background-color 0.2s;
}
.demo-replay:hover { color: #fff; background: rgba(255, 255, 255, 0.12); }

/* ───── 03 Problem · 다크 ───── */
.problem {
  --fade: clamp(200px, 16vw, 300px);
  /* 히어로 아래 가장자리에 생기는 얇은 잔상선을 2px 덮음 */
  position: relative; z-index: 1; margin-top: -2px;
  padding-top: calc(var(--fade) + var(--sec-y) * 0.6);
  /* 경계에 선이 생기지 않게 배경색 없이 그라데이션 하나로 섹션 전체를 칠함 */
  background: linear-gradient(#ffffff 0px, #fbfbfb calc(var(--fade) * 0.08), #eeeeee calc(var(--fade) * 0.17), #dbdbdb calc(var(--fade) * 0.25), #c1c1c1 calc(var(--fade) * 0.33), #a3a3a3 calc(var(--fade) * 0.42), #848483 calc(var(--fade) * 0.5), #646463 calc(var(--fade) * 0.58), #464645 calc(var(--fade) * 0.67), #2c2c2b calc(var(--fade) * 0.75), #191918 calc(var(--fade) * 0.83), #0c0c0b calc(var(--fade) * 0.92), #080807 var(--fade));
}
.problem .h2 { color: #f4f4f4; }
.stages { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.stage { display: flex; flex-direction: column; gap: 16px; }
.stage-head { display: flex; align-items: center; gap: 10px; }
.stage-no {
  flex: none; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: #2e2e2e; color: #fff; font-size: 12px; font-weight: 700; transition: background-color 0.35s;
}
.stage-head h3 { font-size: 22px; font-weight: 700; line-height: var(--lh-title); white-space: nowrap; color: #f4f4f4; }
.stage-head i { flex: 1; height: 1px; margin-left: 4px; background: #2a2a2a; position: relative; overflow: hidden; }
.stage-head i::after { content: ''; position: absolute; inset: 0; background: var(--orange); transform: scaleX(0); transform-origin: left; transition: transform 0.6s var(--ease); }
.stage-card {
  position: relative; flex: 1; display: flex; flex-direction: column; overflow: hidden; border-radius: 24px;
  background: #141414; border: 1px solid #262626;
  transition: border-color 0.35s, transform 0.45s var(--ease);
}
.stage-halftone {
  position: absolute; inset: 0; pointer-events: none;
  background: url(assets/problem/corner-halftone.png) right top / 464px auto no-repeat;
  opacity: 0; transition: opacity 0.6s;
}
.stage-problem { position: relative; padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 12px; }
.stage-title { font-size: clamp(22px, 1.35vw, 26px); font-weight: 700; line-height: var(--lh-title); color: #f4f4f4; }
.voices { position: relative; flex: 1; display: flex; flex-direction: column; gap: 10px; padding: 20px 20px 24px; background: #0e0e0d; transition: background-color 0.35s; }
/* 카드 높이는 그리드가 맞춰 주므로, 문장 박스가 남는 높이를 똑같이 나눠 가져 세 카드의 박스 높이가 같아짐. 출처는 박스 아래 끝에 붙임 */
.voices blockquote { flex: 1 1 0; padding: 16px 18px 18px; border-radius: 12px; background: #1b1b1b; display: flex; flex-direction: column; gap: 10px; }
.voices p { font-size: 15px; font-weight: 500; color: #d4d4d4; }
.voices cite { align-self: flex-end; margin-top: auto; font-style: normal; font-size: 13px; font-weight: 500; color: #8f8f8f; }
/* 강조된 카드 (기본은 첫 번째, 마우스를 올린 카드로 옮겨 감) */
.stage.is-active .stage-no { background: var(--orange); }
.stage.is-active .stage-head i::after { transform: none; }
.stage.is-active .stage-halftone { opacity: 1; }
.stage.is-active .voices { background: rgba(0, 0, 0, 0.3); }

/* ───── 04 Solution ───── */
.solution { background: #fbfbfb; }
.sol-scroll { position: relative; height: calc(var(--sol-h, 100vh) + 4 * 75vh); }
/* 고정 화면 높이 --sol-h: 마지막 카드 아래 끝 + 섹션 간격(--sec-y, 1920에서 140px)에서 섹션이 끝나도록 main.js가 계산. 없으면 100vh */
.sol-sticky { position: sticky; top: 0; height: var(--sol-h, 100vh); overflow: hidden; padding-top: clamp(96px, 12vh, 140px); }
.sol-head { margin-bottom: clamp(28px, 5vh, 56px); }
/* 고정 화면의 제목과 카드 사이 100px: 창 높이가 880px보다 낮으면 카드가 잘리지 않게 줄어듦 */
.solution:not(.is-static) .sol-head { margin-bottom: clamp(28px, calc(36vh - 216px), 100px); }
.sol-head .h2 { font-size: clamp(30px, min(2.5vw, 4.6vh), 48px); }
.journey { display: grid; grid-template-columns: minmax(180px, 320px) 1fr; gap: 48px; align-items: start; }
.rail { padding-top: 40px; display: flex; flex-direction: column; gap: 56px; }
.rail-item { position: relative; }
.rail-item:not(:last-child)::before, .rail-item:not(:last-child)::after {
  content: ''; position: absolute; left: 19px; top: 40px; width: 2px; height: 56px; background: #e0e0e0;
}
.rail-item:not(:last-child)::after { background: var(--orange); transform: scaleY(var(--fill, 0)); transform-origin: top; transition: transform 0.2s linear; }
.rail button { display: flex; align-items: center; gap: 16px; text-align: left; }
.rail-marker {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid #d9d9d9; color: #6b6b6b; font-size: 13px; font-weight: 700;
  transition: background-color 0.35s, border-color 0.35s, color 0.35s, transform 0.35s var(--ease);
}
.rail-label { font-size: 24px; font-weight: 700; line-height: var(--lh-title); color: #6b6b6b; transition: color 0.35s; }
.rail button:hover .rail-label { color: var(--ink); }
.rail-item.is-done .rail-marker { border-color: var(--orange); color: var(--orange); }
.rail-item.is-active .rail-marker { background: var(--orange); border-color: var(--orange); color: #fff; transform: scale(1.08); }
.rail-item.is-active .rail-label { color: var(--orange); }

.steps {
  position: relative; display: flex; flex-direction: column; gap: 16px;
  height: calc(min(100vh, var(--sol-h, 100vh)) - var(--steps-top, 300px)); padding-bottom: 48px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 calc(100% - 56px), transparent); mask: linear-gradient(#000 calc(100% - 56px), transparent);
}
.step {
  --active-top: clamp(260px, 42vh, 417px);
  flex: none; display: grid; grid-template-rows: 1fr; border-radius: 24px; overflow: hidden;
  background: var(--gray-2); cursor: pointer;
  transition: grid-template-rows 0.7s var(--ease), margin 0.7s var(--ease), opacity 0.5s, background-color 0.6s;
}
.step[data-step="0"] { --active-top: clamp(274px, 44vh, 437px); }
/* 대기(회색) 카드 문구는 펼친 카드와 같음 — 제목이 두 줄인 진단 카드는 한 줄만큼 높게 */
.step[data-step="0"] { --idle-h: 174px; }
.step.is-past { grid-template-rows: 0fr; margin-top: -16px; opacity: 0; pointer-events: none; }
.step.is-active { cursor: default; background: #000; }
.step-inner { position: relative; min-height: 0; overflow: hidden; display: flex; flex-direction: column; }
.step-visual { position: absolute; inset: 0 0 auto 0; height: var(--active-top); overflow: hidden; background: #000; opacity: 0; transition: opacity 0.6s; }
/* 도트가 이미지 아랫단에 있어 아래를 기준으로 맞추고 키움: 위쪽 빈 여백부터 잘림 */
.step-visual img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: right bottom; opacity: 0; transform-origin: right bottom; transition: opacity 0.9s var(--ease), transform 6s linear; }
.step-visual img.is-on { opacity: 1; transform: scale(1.03); }
.step-dots { position: absolute; z-index: 3; right: 24px; bottom: 20px; display: flex; gap: 6px; }
.step-dots button { width: 8px; height: 8px; border-radius: 999px; background: rgba(255, 255, 255, 0.35); transition: width 0.4s var(--ease), background-color 0.3s; }
.step-dots button.is-on { width: 28px; background: var(--orange); }
.step-text { position: relative; z-index: 2; display: grid; height: var(--idle-h, 136px); padding: 40px 40px 24px; transition: height 0.7s var(--ease), padding 0.7s var(--ease); pointer-events: none; }
.tx { grid-area: 1 / 1; display: flex; flex-direction: column; gap: 12px; transition: opacity 0.45s; }
.tx-on { opacity: 0; gap: 10px; }
.step-label { font-size: 15px; font-weight: 700; color: #f98b4d; }
.step-title { font-size: 26px; font-weight: 600; line-height: var(--lh-title); letter-spacing: -0.02em; color: var(--ink-2); }
.tx-on .step-title { font-size: clamp(26px, 1.67vw, 32px); color: #fff; }
.step:not(.is-active):hover { background: #e2e3e4; }
.step.is-active .step-visual { opacity: 1; }
.step.is-active .step-text { height: var(--active-top); padding: 48px; }
.step.is-active .tx-idle { opacity: 0; transition-delay: 0s; }
.step.is-active .tx-on { opacity: 1; transition-delay: 0.2s; }
.step-features {
  display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 40px; padding-bottom: 40px;
  transition: padding 0.7s var(--ease);
}
.step-features.two { grid-template-columns: repeat(2, 1fr); }
.step-features > div { min-height: var(--feat-h, 0); padding: 24px 32px 4px; display: flex; flex-direction: column; gap: 10px; }
.step-features > div:first-child { padding-left: 0; }
.step-features > div + div { border-left: 1px solid rgba(0, 0, 0, 0.08); transition: border-color 0.5s; }
.step-features b { font-size: 13px; font-weight: 700; color: var(--orange); }
.step-features h4 { font-size: 20px; font-weight: 600; line-height: var(--lh-title); color: var(--ink-2); transition: color 0.5s; }
.step-features p { font-size: 15px; color: #6b6b6b; transition: color 0.5s; }
.step.is-active .step-features { padding-bottom: 36px; }
.step.is-active .step-features > div + div { border-left-color: transparent; }
.step.is-active .step-features h4 { color: #fff; }
.step.is-active .step-features p { color: #a3a3a3; }
/* 높이가 낮으면 카드가 납작해져 긴 소제목이 그래픽에 닿으므로 두 줄로 */
@media (max-height: 820px) {
  .short-only { display: inline; }
  .solution:not(.is-static) .step[data-step="3"] .step-label { max-width: 46%; text-wrap: balance; }
  /* 낮은 화면은 카드 높이를 줄이고, 그림이 잘리지 않게 기준을 조금 위로 */
  .solution:not(.is-static) .step { --active-top: clamp(260px, 38vh, 417px); }
  .solution:not(.is-static) .step[data-step="0"] { --active-top: clamp(274px, 40vh, 437px); }
  .solution:not(.is-static) .step-visual img { object-position: right 60%; transform-origin: right 60%; }
}

/* 카드 전환 · 슬라이드: 카드 크기는 그대로 두고 열 전체를 한 번에 밀어 올림
   접히는 전환으로 되돌리려면 index.html의 data-motion="slide"만 지우면 됨 */
.solution.is-slide .steps {
  margin-top: -16px; padding-top: 16px;
  -webkit-mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 56px), transparent);
  mask: linear-gradient(transparent, #000 16px, #000 calc(100% - 56px), transparent);
  -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  transition: -webkit-mask-size 0.9s var(--ease), mask-size 0.9s var(--ease);
}
/* 마지막 단계엔 아래에 이어지는 카드가 없으므로 하단 페이드를 박스 밖으로 밀어 카드 끝이 흐려지지 않게 */
.solution.is-slide.is-end .steps { -webkit-mask-size: 100% calc(100% + 56px); mask-size: 100% calc(100% + 56px); }
.solution.is-slide .step { transform: translateY(var(--slide-y, 0)); transition: transform 0.9s var(--ease), background-color 0.45s; }
.solution.is-slide .step-visual { transition: opacity 0.45s; }
.solution.is-slide .step.is-past { grid-template-rows: 1fr; margin-top: 0; opacity: 1; }
.solution.is-slide .step-text, .solution.is-slide .step.is-active .step-text { height: var(--active-top); padding: 48px; transition: none; }
.solution.is-slide .tx-idle { transform: translate(-8px, -8px); }
/* 대기 카드는 문구 바로 아래에 기능 목록을 보여 주고, 펼쳐지면 제자리로 내려옴 */
.solution.is-slide .step-features { padding-bottom: 36px; transition: transform 0.9s var(--ease); }
.solution.is-slide .step:not(.is-active) .step-features { transform: translateY(calc(var(--idle-h, 136px) - var(--active-top))); }

/* 고정 없이 보여 주는 모드 (가로 1280 미만 · 세로 640 미만, main.js 의 layoutSolution 이 켬)
   카드는 문구 → 그림 → 기능 순으로 세로 배치. 고정 스크롤 카드는 폭이 1280 아래로 가면 그림이 문구 밑으로 들어가
   흰 글자가 안 보이므로(1000px 창에서 네 장 모두), 그 구간은 전부 이 모드로 보여 준다 */
.solution.is-static .sol-scroll { height: auto; }
.solution.is-static .sol-sticky { position: static; height: auto; overflow: visible; padding-block: var(--sec-y); }
.solution.is-static .steps { height: auto; -webkit-mask: none; mask: none; padding-bottom: 0; }
.solution.is-static .rail { display: none; }
.solution.is-static .journey { grid-template-columns: 1fr; }
/* 이미지는 화면 폭에 비례해 키우고(최대 400px, 넓은 화면과 같은 크기) 위쪽 빈 여백만 잘라 문구에 붙임
   구축 카드는 도식이 잘리지 않는 만큼만 키움 */
.solution.is-static .step { --img-h: min(56vw, 400px); --img-crop: 0.12; }
.solution.is-static .step[data-step="0"] { --img-crop: 0; }
.solution.is-static .step[data-step="1"] { --img-h: min(46vw, 400px); --img-crop: 0.1; }
.solution.is-static .step[data-step="3"] { --img-crop: 0.24; }
.solution.is-static .step-visual { position: relative; order: 2; height: calc(var(--img-h) * (1 - var(--img-crop))); }
.solution.is-static .step-visual img { inset: auto 0 0; height: var(--img-h); }
.solution.is-static .step-text { order: 1; height: auto; }
.solution.is-static .step-features { order: 3; max-height: none; }
@media (max-width: 900px) {
  .solution.is-static .step-text { padding: 28px 24px 20px; }
  .solution.is-static .step-features { margin: 0 24px; }
  .solution.is-static .step-title { font-size: 24px; }
}

/* ───── 05 Proof ───── */
.team { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; margin-bottom: 56px; }
.team-copy { display: flex; flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 42px; }
.team-copy .eyebrow { margin-bottom: 16px; }
.team-copy .h2 { color: #f6f7f7; }
.bench { display: flex; flex-direction: column; gap: 32px; }
.bench-src { font-size: 14px; font-weight: 500; color: var(--sub); }
.bench-title { margin-top: 6px; font-size: 24px; font-weight: 600; line-height: var(--lh-title); color: var(--orange); }
.bench-desc { margin-top: 6px; font-size: 14px; color: var(--sub); }
.bench-chart { display: flex; align-items: flex-end; gap: 40px; }
.col { width: 180px; display: flex; flex-direction: column; gap: 10px; }
.col-num { font-size: 20px; font-weight: 500; color: #c8cccf; font-variant-numeric: tabular-nums; }
.col.win .col-num { font-size: 24px; font-weight: 700; color: var(--orange); }
.bar { position: relative; height: calc(var(--h) + 18px); display: flex; flex-direction: column; justify-content: flex-end; }
.bar-top { width: 100%; height: 18px; display: block; image-rendering: pixelated; }
.bar-body { height: var(--h); background: #c8cccf; padding: 12px 16px; font-size: 13px; color: rgba(255, 255, 255, 0.92); }
.col.win .bar-body { background: var(--orange); }
.bar { transform: scaleY(0); transform-origin: bottom; transition: transform 1.2s var(--ease) var(--bd, 0s); }
.bench.is-in .bar { transform: none; }
.bar-body span { display: block; opacity: 0; transition: opacity 0.6s 1.2s; }
.bench.is-in .bar-body span { opacity: 1; }
.col-label { display: flex; align-items: center; gap: 8px; height: 24px; font-size: 15px; color: #c8cccf; }
.col.win .col-label { font-size: 16px; font-weight: 500; color: #fff; }

/* ───── 06 Process ───── */
.procs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 56px; }
.proc {
  padding: 28px; border-radius: 24px; background: #f4f4f4; display: flex; flex-direction: column; gap: 12px;
  transition: background-color 0.35s, transform 0.45s var(--ease), box-shadow 0.45s var(--ease);
}
.proc-step { font-size: 14px; font-weight: 700; color: var(--orange); }
.proc-icon { width: 48px; height: 48px; border-radius: 12px; background: #fff1e8; display: grid; place-items: center; transition: background-color 0.35s, transform 0.45s var(--ease); }
.proc-icon svg { width: 48px; height: 48px; fill: var(--orange); transition: fill 0.35s; }
.proc h3 { margin-top: 4px; font-size: 22px; font-weight: 700; line-height: var(--lh-title); }
.proc p:last-child { font-size: 16px; color: var(--sub); }
.proc:hover { background: #fff; transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
.proc:hover .proc-icon { background: var(--orange); transform: rotate(-6deg) scale(1.06); }
.proc:hover .proc-icon svg { fill: #fff; }

.casebook { position: relative; min-height: 329px; border-radius: 24px; background: var(--dark); color: #fff; display: flex; align-items: center; }
.casebook-copy { position: relative; z-index: 2; padding: 56px 80px; max-width: 760px; display: flex; flex-direction: column; gap: 10px; }
.casebook-copy .eyebrow { color: #999; }
.casebook-copy h3 { font-size: clamp(22px, 1.46vw, 28px); font-weight: 700; line-height: var(--lh-title); }
.casebook-copy > p:not(.eyebrow) { font-size: 17px; color: #b8b8b8; }
.casebook-actions { margin-top: 17px; display: flex; gap: 10px; flex-wrap: wrap; }
/* 드롭다운이 카드 밖으로 나올 수 있게, 넘치는 그림은 카드 대신 그림 영역이 가림 */
.casebook-art { position: absolute; top: 0; right: 0; width: 500px; height: 100%; overflow: hidden; border-radius: 0 24px 24px 0; }
/* 사례집 묶음은 잘린 데 없는 한 장 이미지로, 카드 위아래로 넘치는 부분만 카드가 가림 */
.paper {
  position: absolute; left: 25px; top: -68px; width: 438px; will-change: transform;
  filter: drop-shadow(0 24px 40px rgba(0, 0, 0, 0.45)); animation: float 6s ease-in-out infinite;
}
@keyframes float { 50% { transform: translate3d(0, -10px, 0) rotate(-0.6deg); } }
.casebook:hover .paper { animation-duration: 3.5s; }
.casebook-m { display: none; }

.select { position: relative; }
/* 피그마 281:1691: 고른 산업 이름 길이와 관계없이 너비 211px 고정 */
.select-btn { width: 211px; justify-content: space-between; padding: 0 16px; }
/* 영문은 가장 긴 Manufacturing & Construction 을 골라도 아이콘이 눌리지 않는 너비. :where 로 모바일의 100% 를 덮지 않음 */
:where(html[lang='en']) .select-btn { width: 288px; }
.select-btn span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.chev { flex: none; width: 10px; height: 10px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); transition: transform 0.3s var(--ease); }
.select.is-open .chev { transform: translateY(2px) rotate(-135deg); }
.select-menu {
  position: absolute; z-index: 20; left: 0; top: calc(100% + 8px); min-width: 100%; padding: 8px; border-radius: 8px;
  display: flex; flex-direction: column; gap: 2px;
  background: #242424; box-shadow: 0 0 1px rgba(23, 23, 23, 0.08), 0 0 16px rgba(23, 23, 23, 0.12), 0 20px 40px rgba(0, 0, 0, 0.35);
  opacity: 0; transform: translateY(-6px); pointer-events: none; transition: opacity 0.25s, transform 0.25s var(--ease);
}
.select.is-open .select-menu { opacity: 1; transform: none; pointer-events: auto; }
.select-menu li { display: flex; align-items: center; height: 44px; padding: 0 12px 0 8px; border-radius: 4px; font-size: 16px; color: #fff; white-space: nowrap; cursor: pointer; transition: background-color 0.2s; }
.select-menu li:hover, .select-menu li[aria-selected='true'] { background: rgba(237, 85, 0, 0.18); color: #fff; }

/* ───── 06 Resources ───── */
.resources .section-head { margin-bottom: clamp(56px, 5.21vw, 100px); }
.res-bar { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; margin-bottom: 40px; }
.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 40px; padding: 0 16px; border-radius: 999px; background: #f8f9f9; color: #0a0b0d; font-size: 14px; transition: background-color 0.25s, color 0.25s; }
.chip:hover { background: var(--gray-2); }
.chip.is-on { background: #0a0b0d; color: #fff; }
.search { display: flex; align-items: center; gap: 8px; width: 280px; height: 40px; padding: 0 16px; border-radius: 999px; background: var(--gray-2); }
.search img { flex: none; }
.search input { flex: 1; min-width: 0; border: 0; outline: 0; background: none; font: inherit; font-size: 14px; color: #0a0b0d; }
.search input::placeholder { color: #74777d; opacity: 1; }
.articles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px 24px; margin-bottom: clamp(56px, 5.21vw, 100px); }
.article { display: flex; flex-direction: column; gap: 16px; }
.article.is-hidden { display: none; }
.article-img { display: block; overflow: hidden; border-radius: 24px; aspect-ratio: 410 / 260; background: #e6e6e6; }
.article-img img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--ease); }
.article:hover .article-img img { transform: scale(1.05); }
.article-head { display: flex; flex-direction: column; gap: 10px; }
.article-meta { display: flex; justify-content: space-between; align-items: center; height: 28px; padding: 0 12px; border-radius: 999px; background: #f8f9f9; font-size: 13px; letter-spacing: 0; }
.article-meta time { color: #74777d; }
.article-meta b { font-weight: 400; color: #0a0b0d; }
.article h3 { display: -webkit-box; overflow: hidden; -webkit-box-orient: vertical; -webkit-line-clamp: 2; font-size: 20px; font-weight: 500; line-height: var(--lh-title); letter-spacing: -0.5px; color: #16181a; text-wrap: pretty; }
.article h3 span { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size 0.5s var(--ease); }
.article:hover h3 span { background-size: 100% 1px; }
/* 시각 보정: 제목을 라벨 글자의 안쪽 여백만큼 들여 왼쪽 선을 맞춤 */
.article h3 { padding-inline: 12px; }
.res-empty { padding: 64px 0; text-align: center; color: var(--sub); }

/* ───── 06 Contact ───── */
.contact { position: relative; overflow: hidden; }
.contact > .wrap { position: relative; z-index: 2; }
.logo-band { position: relative; z-index: 2; margin-top: clamp(64px, 5vw, 96px); }
.logo-band img { opacity: 0.4; }
.contact .lead { margin-top: 24px; margin-bottom: 54px; color: #fff; }
/* 하프톤은 섹션보다 크게(16:9) 깔고 반투명으로, 위는 진하고 아래로 갈수록 옅어지는 딤을 덮음 */
.contact > canvas {
  top: 50% !important; bottom: auto !important; height: auto !important; min-height: 100%; aspect-ratio: 16 / 9;
  translate: 0 calc(-50% + var(--drift, 0px));
}
.contact::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(rgba(13, 13, 13, 1), rgba(13, 13, 13, 0.14)); }
.hero > canvas, .contact > canvas { opacity: 0; transition: opacity 1.8s ease; }
.hero > canvas.is-on { opacity: 1; }
.contact > canvas.is-on { opacity: 0.5; }
.article.is-pop { animation: pop 0.5s var(--ease) both; }
@keyframes pop { from { opacity: 0; transform: translateY(12px); } }

/* ───── Footer ───── */
.footer { background: var(--gray-2); padding: 110px max(var(--pad), calc(50% - 720px)) 140px; display: flex; flex-direction: column; gap: 60px; }
.footer a { transition: color 0.2s; }
.footer a:hover, .footer a:focus-visible { color: #000; -webkit-text-stroke: 0.3px currentColor; }
.footer-top { display: flex; justify-content: space-between; gap: 40px; }
.footer-top img { flex: none; }
.footer-cols { display: flex; gap: 64px; font-size: 15px; letter-spacing: 0; color: #242424; white-space: nowrap; }
.footer-cols > * { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.footer-cols p { font-size: 13px; color: rgba(36, 36, 36, 0.55); }
.footer-info { display: flex; flex-direction: column; gap: 8px; font-size: 13px; font-weight: 500; letter-spacing: -0.008em; color: rgba(36, 36, 36, 0.55); }
.footer-name { margin-bottom: 12px; font-size: 15px; font-weight: 600; letter-spacing: -0.01em; color: #242424; }
.footer-line { display: flex; align-items: center; gap: 12px; }
.footer-line i { width: 1px; height: 10px; background: rgba(36, 36, 36, 0.3); }
.footer-bar { display: flex; justify-content: space-between; gap: 24px; margin-top: 40px; font-size: 13px; letter-spacing: 0; color: rgba(36, 36, 36, 0.55); }
.footer-bar p:last-child { display: flex; gap: 24px; }
.footer-m { display: none; }

/* ───── 반응형 ───── */
/* 영문 사례집 버튼: 나란히 두면 그림에 겹치므로 같은 너비로 쌓음 */
@media (min-width: 768px) and (max-width: 1360px) {
  html[lang='en'] .casebook-actions { flex-direction: column; width: 304px; }
  html[lang='en'] .casebook-actions .btn { width: 100%; }
}
/* 데스크톱 · 1440 */
@media (max-width: 1599px) {
  .journey { grid-template-columns: 168px 1fr; gap: 40px; }
}
/* 데스크톱 · 1440 이하 */
@media (max-width: 1360px) {
  .gnb-ext { display: none; }
}
/* 낮은 노트북 화면(1366×768 등): 히어로 여백을 줄여 다음 섹션 힌트가 보이게 함 */
@media (min-width: 768px) and (max-height: 700px) {
  .hero-main { padding-top: 96px; }
  .hero-clients { margin-top: 32px; margin-bottom: 24px; }
}
/* 태블릿 · 768 */
@media (max-width: 1023px) {
  .gnb-links { display: none; }
  .gnb-burger { display: grid; }
  /* 햄버거가 나오는 순간부터 머리 영역 · 펼침 메뉴는 모바일(피그마 393:1275 · 393:880)과 같게: 언어 전환 · Contact 는 펼침 메뉴에서만 보임 */
  .gnb.over-hero::before { background: rgba(255, 255, 255, 0.72); border-color: rgba(0, 0, 0, 0.06); }
  /* 전체 폭, 위 0, 높이 72, 양옆 16, 로고는 6 더 들어감, 버튼 42. 메뉴를 열어도 같은 자리에 있도록 머리 영역도 맞춤 */
  .gnb { top: 0; left: 0; right: 0; height: 72px; padding: 0 16px 0 22px; border-radius: 0; }
  /* 맨 위에서는 배경 없이 그래픽이 그대로 보이고, 스크롤하면 유리 효과가 켜짐 */
  .gnb::before { border-width: 0 0 1px; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); }
  .gnb.over-hero::before { -webkit-mask: none; mask: none; }
  .gnb:not(.is-scrolled)::before { background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mnav-top { height: 72px; padding: 0 16px 0 22px; border-bottom: 0; }
  .gnb-contact { display: none; }
  .gnb .lang-switch { display: none; }
  .gnb-actions { gap: 8px; }
  .stages, .procs { grid-template-columns: 1fr 1fr; }
  .stages .stage:last-child { grid-column: span 2; }
  .team { grid-template-columns: 1fr; }
  .articles { grid-template-columns: 1fr 1fr; }
  .casebook-copy { padding: 48px 40px; max-width: 460px; }
  .casebook-art { width: 300px; opacity: 0.55; }
  .paper { left: 10px; top: -30px; width: 340px; }
  .footer-cols { gap: 40px; }
}
/* 모바일 · 390 (피그마 393:1275 접힘 · 393:880 펼침) */
@media (max-width: 767px) {
  .m-only { display: inline; }
  .d-only { display: none; }
  /* 영문은 끝 단어가 혼자 남지 않게 줄을 고르게 나누고, 막대 수치는 한 줄을 유지 */
  html[lang='en'] :is(.hero-sub, .lead, .step-label) { text-wrap: balance; }
  html[lang='en'] .col.win .bar-body { padding-right: 0; font-size: 12px; }
  .h2, .sol-head .h2 { font-size: 26px; }
  .lead, .lead.small { font-size: 16px; }
  .section-head, .resources .section-head { margin-bottom: 40px; }
  .btn-arrow { gap: 24px; padding: 0 16px; }

  /* 01 Hero: 글자 위로 하프톤이 깔림. 소실점은 데스크톱처럼 오른쪽에 두고(폭 1028 · 높이 578), 글자 뒤에서 흰색으로 지움 */
  /* 높이는 내용을 따라감: 아래 여백 64 에서 Problem 이 76 겹쳐 올라와도 버튼이 가려지지 않음 */
  .hero { min-height: 0; }
  .hero > canvas { left: calc(50% - 627.7px) !important; right: auto !important; bottom: auto !important; width: 1028px !important; height: 578px !important; }
  /* 글자 뒤 하프톤을 바탕색으로 지우고, Problem 이 겹치는 76px 위에서 흰색으로 이어줌 */
  .hero::before { content: ''; position: absolute; z-index: 1; left: 0; right: 0; top: 216px; bottom: 0; pointer-events: none; background: linear-gradient(rgba(249, 249, 249, 0), #f9f9f9 200.7px, #f9f9f9 calc(100% - 150px), #fff calc(100% - 76px)); }
  .hero-main { align-items: flex-start; padding-top: 292px; padding-bottom: 64px; }
  .hero-copy { align-items: stretch; width: 100%; gap: 28px; }
  .hero-title { font-size: min(10vw, 52px); letter-spacing: -0.04em; }
  .hero-title .sp { letter-spacing: inherit; }
  .hero-title .line { padding-bottom: 0.05em; margin-bottom: 0; }
  .hero-sub { padding-left: 0; font-size: 16px; letter-spacing: -0.01em; color: var(--sub); }
  .hero .cta { flex-direction: column; gap: 10px; margin-top: 0; padding: 20px 0 32px; }
  .hero .btn-arrow { justify-content: center; }
  .hero .arrow { display: none; }
  .hero .btn-line { border-radius: 999px; font-size: 15px; }
  .logo-track { zoom: 0.72; --gap: 66.67px; }
  .hero-clients .logo-track { zoom: 0.5; }

  /* 03 Problem: 히어로 아랫단 76px 위로 올라가 그라데이션이 겹침 */
  .problem { --fade: 197px; margin-top: -76px; padding-top: 200px; padding-bottom: 88px; }
  .stages, .procs, .articles { grid-template-columns: 1fr; }
  .stages .stage:last-child { grid-column: auto; }

  /* 04 Solution */
  .step[data-step="3"] .step-label { font-weight: 500; }
  .step-dots { bottom: 12px; }
  .step-label { font-weight: 600; }
  .step-features, .step-features.two { grid-template-columns: 1fr; }
  .solution.is-static .step-features, .step.is-active .step-features { padding-bottom: 52px; }
  .step-features > div { padding-left: 0; padding-bottom: 0; }
  .step-features > div + div { border-left: 0; }

  /* 05 Proof */
  .team-copy .btn { width: 240px; }
  .bench-chart { gap: 12px; }
  .col { width: auto; flex: 1; }
  .col.win .bar-body { padding-left: 12px; }

  /* 06 Process */
  .casebook { display: block; min-height: 0; }
  .casebook-copy { width: 100%; padding: 40px 24px 0; }
  .casebook-art { display: none; }
  /* 사례집 묶음: 가로 가운데에서 왼쪽으로 9.5px, 넘치는 아래쪽은 카드 끝에서 잘림 */
  .casebook-m { display: block; position: relative; height: 211px; margin-top: 25px; overflow: hidden; border-radius: 0 0 24px 24px; }
  .casebook-m div { position: absolute; left: calc(50% - 133px); top: 0; width: 247px; height: 295px; }
  .casebook-m img { position: absolute; width: 147px; height: 82.7px; border-radius: 2.3px; object-fit: cover; }
  .casebook-m img:nth-child(1) { left: 34.9px; top: 52.5px; opacity: 0.4; transform: rotate(-11.93deg); }
  .casebook-m img:nth-child(2) { left: 92.4px; top: 15.9px; filter: brightness(0.6); transform: rotate(-13.37deg); }
  .casebook-m img:nth-child(3) { left: 9.3px; top: 191.5px; opacity: 0.6; transform: rotate(18.45deg); }
  .casebook-m img:nth-child(4) { left: 42.7px; top: 78.9px; width: 191.4px; height: 114.9px; border-radius: 0; transform: rotate(-7.65deg); }
  .casebook-actions { flex-direction: column; }
  .select, .casebook-actions .btn { width: 100%; }
  .chev { width: 18px; height: 18px; border: 0; background: currentColor; transform: rotate(90deg); -webkit-mask: var(--icon-chevron) center / contain no-repeat; mask: var(--icon-chevron) center / contain no-repeat; }
  .select.is-open .chev { transform: rotate(-90deg); }
  .casebook-actions .arrow { -webkit-mask-image: var(--icon-download); mask-image: var(--icon-download); }
  .btn:hover .arrow { transform: none; }

  /* 06 Contact: 하프톤을 섹션 전체에 깔아 위에서 아래로 퍼지게 하고, 로고는 양끝 페이드 없이 */
  .contact > canvas { top: 0 !important; height: 100% !important; aspect-ratio: auto; translate: none; }
  .logo-band .marquee { -webkit-mask: none; mask: none; }

  /* Footer */
  .footer { padding: 80px 24px 40px; gap: 0; }
  .footer-top, .footer-bottom { display: none; }
  .footer-m { display: flex; flex-direction: column; gap: 40px; font-size: 13px; font-weight: 500; letter-spacing: -0.008em; color: rgba(36, 36, 36, 0.55); }
  .footer-m-line { display: flex; align-items: center; gap: 12px; }
  .footer-m-line i { width: 1px; height: 12px; background: rgba(36, 36, 36, 0.3); }
  .footer-m > .footer-m-line { color: var(--ink); }
  .footer-m-biz { display: flex; flex-direction: column; gap: 8px; }
  .footer-m-copy { font-weight: 400; letter-spacing: 0; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
  [data-reveal] { opacity: 1; transform: none; }
}

/* ───── 문의하기 페이지 (피그마 333:874) ─────
   글자 크기 · 간격은 시안 값. 여백 · 구간은 홈과 같음: 본문 1440, 양옆 --pad, 태블릿 1023 · 모바일 767 */
.page-inquiry { background: #101010; color: #fff; }
/* GNB: 맨 위에서는 배경 없이, 스크롤하면 유리 효과 */
.page-inquiry .gnb:not(.is-scrolled)::before { background: none; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.page-inquiry .gnb-ext:not(:hover) { opacity: 1; color: #5c5f65; }
.page-inquiry .lang-switch button[aria-pressed='false']:not(:hover) { opacity: 1; color: #5c5f65; }
.page-inquiry .gnb[data-theme='dark'] .gnb-contact { background: rgba(255, 255, 255, 0.1); color: #fff; }
.page-inquiry .gnb[data-theme='dark'] .gnb-contact:hover, .page-inquiry .gnb[data-theme='dark'] .gnb-contact:active { background: rgba(255, 255, 255, 0.16); }

.inquiry-hero { position: relative; overflow: hidden; }
.inquiry-kv { position: absolute; inset: 0; pointer-events: none; }
.inquiry-kv img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 0; opacity: 0.3; }
.inquiry-kv::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 247px; background: linear-gradient(rgba(16, 16, 16, 0) 16.55%, #101010); }
.inquiry-main { position: relative; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, 820px); gap: 40px; align-items: start; padding-block: 176px 132px; }
/* 홈 히어로 타이틀과 같은 자리: .hero 높이 안에서 .hero-copy(타이틀 두 줄 + 나머지 180px)를 세로 가운데 둔 값 */
.inquiry-title {
  --size: clamp(52px, 4.375vw, 84px); --hero-top: 120px;
  margin-top: calc(var(--hero-top) + max(0px, (min(100svh - 80px, 1040px) - var(--hero-top) - 180px - 2.36 * var(--size)) / 2) - 176px);
  font: 400 var(--size)/1.18 'Geist', sans-serif; letter-spacing: -0.04em;
}
@media (min-width: 768px) and (max-height: 700px) {
  .inquiry-title { --hero-top: 96px; }
}

.inquiry-sheet {
  display: flex; flex-direction: column; gap: 49px; padding: 56px 40px 32px; border-radius: 24px;
  background: rgba(31, 31, 33, 0.55); backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px);
  letter-spacing: 0;
}
.inquiry-top { display: flex; flex-direction: column; gap: 56px; }
.inquiry-head { display: flex; flex-direction: column; gap: 16px; }
.inquiry-head h2 { font-size: 32px; font-weight: 700; line-height: 38px; }
.inquiry-head p { font-size: 16px; line-height: 19px; color: rgba(255, 255, 255, 0.55); }
.inquiry-head strong { font-weight: 400; color: #ff8a3d; }
.inquiry-fields { display: flex; flex-direction: column; gap: 24px; }
.inquiry-row { display: flex; align-items: flex-start; gap: 12px; }
.inquiry-row.is-wide { gap: 16px; }
.inquiry-field { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; }
.inquiry-field.is-topic { gap: 10px; }
.inquiry-label { display: flex; gap: 4px; font-size: 13px; line-height: 16px; font-weight: 500; color: rgba(255, 255, 255, 0.7); }
.inquiry-label em { font-style: normal; font-weight: 400; color: #f75800; }
.inquiry-label small { font-size: inherit; font-weight: 400; color: rgba(255, 255, 255, 0.4); }
.inquiry-input {
  width: 100%; height: 48px; padding: 0 16px; border: 0; border-radius: 12px; outline: 0; background: rgba(255, 255, 255, 0.07);
  font: inherit; font-size: 15px; color: #fff; caret-color: #ff8a3d; transition: background-color 0.2s, box-shadow 0.2s;
}
textarea.inquiry-input { display: block; height: 120px; padding-top: 14px; line-height: 22px; resize: none; }
.inquiry-input::placeholder { color: rgba(255, 255, 255, 0.35); opacity: 1; }
.inquiry-input:hover { background: rgba(255, 255, 255, 0.1); }
.inquiry-input:focus { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); }
.inquiry-input[aria-invalid='true'] { box-shadow: inset 0 0 0 1px #f75800; }
.inquiry-input:-webkit-autofill { -webkit-text-fill-color: #fff; box-shadow: inset 0 0 0 48px #2b2b2d; }
.inquiry-error { font-size: 13px; line-height: 18px; color: #ff8a3d; }
.inquiry-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.inquiry-chip { display: flex; align-items: center; gap: 8px; height: 33px; padding: 0 14px; border-radius: 999px; background: rgba(255, 255, 255, 0.064); font-size: 14px; color: rgba(255, 255, 255, 0.6); transition: background-color 0.2s, color 0.2s; }
.inquiry-chip:hover { background: rgba(255, 255, 255, 0.1); color: #fff; }
.inquiry-chip[aria-pressed='true'] { padding-left: 10px; background: rgba(255, 255, 255, 0.14); font-weight: 500; color: #fff; }
.inquiry-chip[aria-pressed='true']::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: #f75800; }
.inquiry-foot { display: flex; flex-direction: column; gap: 16px; }
.inquiry-consent { display: flex; align-items: center; gap: 10px; font-size: 14px; line-height: 24px; }
.inquiry-consent input { flex: none; width: 16px; height: 16px; margin: 4px; border: 1px solid rgba(255, 255, 255, 0.4); border-radius: 2px; background: transparent; appearance: none; -webkit-appearance: none; cursor: pointer; }
.inquiry-consent input:checked { border: 0; background: url(assets/inquiry/check.svg) center / 24px no-repeat; }
.inquiry-consent input[aria-invalid='true'] { border-color: #f75800; }
.inquiry-consent input:focus-visible { outline: 1px solid rgba(255, 255, 255, 0.6); outline-offset: 3px; }
.inquiry-consent label { cursor: pointer; }
.inquiry-consent a { flex: none; font: 400 12px/18px 'Geist', sans-serif; color: #707070; text-decoration: underline; transition: color 0.2s; }
.inquiry-consent a:hover { color: #fff; }
.inquiry-result { font-size: 14px; line-height: 20px; color: #ff8a3d; }
.inquiry-send { width: 100%; }
.inquiry-send:disabled { opacity: 0.6; cursor: default; }
.inquiry-modal {
  width: min(360px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 14px; border: 0; border-radius: 34px;
  background: #fff; color: #0c0c0c; text-align: center;
}
.inquiry-modal::backdrop { background: rgba(12, 12, 12, 0.5); }
.inquiry-modal-body { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 24px 8px 16px; margin-bottom: 10px; }
.inquiry-modal :is(h2, p, .btn) { letter-spacing: -0.005em; }
.inquiry-modal h2 { font-size: 17px; font-weight: 600; line-height: 22px; }
.inquiry-modal p { font-size: 16px; line-height: var(--lh-body); color: var(--sub); }
.inquiry-modal .btn { width: 100%; height: 52px; padding: 10px 16px; font-size: 16px; font-weight: 500; line-height: 24px; }

/* 어두운 푸터 (피그마 393:537 · 348:502) */
.footer.is-dark { background: #101010; color: rgba(255, 255, 255, 0.55); }
.footer.is-dark a:hover, .footer.is-dark a:focus-visible { color: #fff; }
.footer.is-dark > .footer-top img, .footer.is-dark .footer-m > img { filter: brightness(0) invert(1); }
.footer.is-dark .footer-cols, .footer.is-dark .footer-name, .footer.is-dark .footer-m > .footer-m-line { color: #fff; }
.footer.is-dark .footer-cols p, .footer.is-dark .footer-info, .footer.is-dark .footer-bar, .footer.is-dark .footer-m { color: rgba(255, 255, 255, 0.55); }
.footer.is-dark .footer-line i, .footer.is-dark .footer-m-line i { background: rgba(255, 255, 255, 0.3); }
.footer.is-dark .footer-cols, .footer.is-dark .footer-info, .footer.is-dark .footer-m { line-height: 18px; }
.footer.is-dark .footer-cols p, .footer.is-dark .footer-bar, .footer.is-dark .footer-m > :last-child { line-height: 16px; }
.footer.is-dark .footer-name { line-height: 22px; }

/* 태블릿 · 768: 제목이 입력 폼 위로 */
@media (max-width: 1023px) {
  .inquiry-main { grid-template-columns: minmax(0, 1fr); padding-block: 140px 88px; }
  .inquiry-title { margin-top: 0; }
}
/* 모바일 · 390 (피그마 348:352) */
@media (max-width: 767px) {
  .inquiry-kv { bottom: auto; height: 406px; }
  .inquiry-kv img { object-position: 66.8% 0; opacity: 1; }
  .inquiry-kv::after { height: 100%; }
  .inquiry-main { display: block; padding: 221px 16px 36px; }
  .inquiry-title { margin-bottom: 32px; padding-left: calc(var(--pad) - 16px); font-size: 39px; line-height: 50px; }
  .inquiry-sheet { padding: 32px 24px; }
  .inquiry-head h2 { font-size: 24px; line-height: 36px; }
  .inquiry-head { gap: 24px; }
  .inquiry-head p { font-size: 15px; line-height: var(--lh-title); }
  textarea.inquiry-input { font-size: 14px; }
  .inquiry-row { flex-direction: column; align-items: stretch; }
  .inquiry-consent a { margin-left: auto; }
  /* 문의 완료 모달 (피그마 590:946) */
  .inquiry-modal { width: min(300px, calc(100vw - 32px)); }
  .inquiry-modal p { font-size: 15px; }
}

/* ───── 사례집 다운로드 모달: 입력 컴포넌트는 문의하기의 .inquiry-* 를 그대로 씀 ───── */
.mnav-links a[hidden], .res-bar[hidden] { display: none; }
.casebook-modal {
  width: min(440px, calc(100vw - 32px)); max-width: none; margin: auto; padding: 0; border: 0; border-radius: 24px;
  background: #1f1f21; color: #fff; letter-spacing: 0;
}
.casebook-modal::backdrop { background: rgba(12, 12, 12, 0.5); }
.casebook-form { position: relative; display: flex; flex-direction: column; gap: 32px; padding: 40px 32px 32px; }
.casebook-form[hidden], .casebook-done[hidden] { display: none; }
.casebook-close { position: absolute; top: 12px; right: 12px; display: grid; place-items: center; width: 40px; height: 40px; }
.casebook-close img { filter: invert(1); opacity: 0.7; }
.casebook-close:hover img { opacity: 1; }
.casebook-modal .inquiry-head h2 { font-size: 24px; line-height: 30px; }
.casebook-modal .inquiry-head p { font-size: 15px; line-height: 22px; }
.casebook-done { display: flex; flex-direction: column; gap: 8px; padding: 40px 32px 32px; text-align: center; }
.casebook-done h2 { font-size: 18px; font-weight: 600; line-height: 24px; outline: 0; }
.casebook-done p { margin-bottom: 16px; font-size: 14px; line-height: 22px; color: rgba(255, 255, 255, 0.6); }
.casebook-done a { color: #ff8a3d; text-decoration: underline; }
.casebook-done .btn { width: 100%; font-size: 14px; background: rgba(255, 255, 255, 0.14); }
@media (max-width: 767px) {
  .casebook-form { padding: 40px 24px 24px; }
  .casebook-done { padding: 40px 24px 24px; }
}