/* ==========================================================================
   SkillNau — Visual Clone Base v1 + SkillNau copy (v1.4) / tokens (spec v1.1)
   구조·클래스·조판은 클론 베이스 그대로. 토큰 3색만 SkillNau 브랜드로 교체.
   Breakpoints: desktop ≥992 / tablet 768–991 / mob-landscape 480–767 / mob-portrait ≤479
   ========================================================================== */

/* ---------- tokens (beige-test v2: SkillNau 그레이 — 원본 #d9d9d9보다 미세하게 밝게) ---------- */
:root {
  --bg: #dedede;
  --ink: #222222;
  --ink-soft: #4a4a4a;
  --dim: #6b6b6b; /* a11y: #dedede 배경 대비 4.5:1 이상 확보 (기존 #8c8c8c는 2.9:1) */
  --line: #b7b9bd;
  --accent: #7D58FD;        /* SkillNau purple */
  --accent-soft: rgba(125, 88, 253, 0.35);   /* menu grid lines */
  --lime: #C7FF4D;          /* secondary accent */
  --white: #FFFFFF;

  --font-body: "Pretendard Variable", Pretendard, "SF Pro Display", -apple-system, system-ui, "Segoe UI", Roboto, sans-serif;
  /* 영문 라벨·번호·캡션용 모노. 한글 글리프는 Pretendard로 자동 폴백 */
  --font-mono: "IBM Plex Mono", "Pretendard Variable", Pretendard, monospace;

  --pad-x: clamp(20px, 4vw, 56px);
  --container: 1360px;

  --sec-gap: clamp(96px, 12vw, 180px);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.5;
  font-weight: 400;
  overflow-x: hidden;
  word-break: keep-all; /* Korean-ready line breaking for phase 2 */
}

img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; background: none; border: none; cursor: pointer; color: inherit; }
em { font-style: italic; }

.container {
  max-width: var(--container);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

.section { padding-top: var(--sec-gap); padding-bottom: 0; }

.br-desktop { display: block; }

/* ==========================================================================
   BACKGROUND DOTTED GRID
   ========================================================================== */
.bg-grid {
  position: fixed;
  inset: 0;
  display: flex;
  pointer-events: none;
  z-index: 0;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--pad-x);
}
.bg-grid-col { flex: 1; border-left: 1px dotted var(--line); }
.bg-grid-col.is-last { border-right: 1px dotted var(--line); }

/* beige-test v2: 세로선은 3줄만 — 양끝 2줄 + 가운데 1줄 (2·4번째 선 숨김) */
.bg-grid-col:nth-child(2),
.bg-grid-col:nth-child(4) { border-left: none; }

.bg-grid.is-menu { position: absolute; z-index: 0; }
.bg-grid.is-menu .bg-grid-col,
.bg-grid.is-menu .bg-grid-col.is-last { border-color: var(--accent-soft); }

main, .footer { position: relative; z-index: 1; }

/* ==========================================================================
   NAVBAR
   ========================================================================== */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  padding: 18px var(--pad-x);
  transition: background 0.25s ease, border-color 0.25s ease;
  border-bottom: 1px dotted transparent;
}
.navbar.is-scrolled {
  background: rgba(222, 222, 222, 0.92); /* beige-test v2: --bg 기준 */
  backdrop-filter: blur(6px);
  border-bottom-color: var(--line);
}
body.menu-open .navbar.is-scrolled { background: transparent; backdrop-filter: none; border-bottom-color: transparent; }
.navbar-inner {
  max-width: var(--container);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.nav-logo { display: flex; align-items: center; gap: 10px; }
.nav-logo-mark {
  width: 18px; height: 18px;
  background: var(--accent);
  clip-path: polygon(0 0, 100% 0, 100% 60%, 60% 60%, 60% 100%, 0 100%);
}
.nav-logo-text {
  font-family: var(--font-mono);
  font-size: 20px;
  letter-spacing: 0.04em;
}
.nav-logo-text sup { font-size: 10px; }

.nav-status {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  color: var(--ink-soft);
}
/* 그레이 클론 원본과 동일한 퍼플 원형 상태 dot */
.status-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
  animation: pulse 2s infinite;
}
@keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: 0.3; } }

.menu-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
  padding: 0 4px;
}
.menu-btn-icon { display: flex; flex-direction: column; gap: 4px; width: 22px; }
.menu-btn-icon span {
  height: 2px;
  background: var(--ink);
  transition: transform 0.3s ease, opacity 0.3s ease, background 0.3s ease;
}
.menu-btn-text {
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.12em;
}
body.menu-open .menu-btn-icon span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
body.menu-open .menu-btn-icon span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn-icon span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
body.menu-open .menu-btn-icon span,
body.menu-open .menu-btn-text,
body.menu-open .nav-logo-text,
body.menu-open .nav-status { color: var(--white); }
body.menu-open .menu-btn-icon span { background: var(--white); }
body.menu-open .nav-logo-mark { background: var(--lime); }
body.menu-open .nav-logo img { filter: brightness(0) invert(1); } /* 퍼플 로고 → 오버레이 위 흰색 */
body.menu-open .status-dot { background: var(--lime); }

/* ==========================================================================
   FULLSCREEN MENU
   ========================================================================== */
.full-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  height: 100dvh;
  overflow: hidden; /* 오버레이 내부 스크롤 금지 — 내용이 화면 안에 들어오게 조판 */
  background: var(--accent);
  color: var(--white);
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.4s ease, visibility 0.4s ease;
}
body.menu-open .full-menu { visibility: visible; opacity: 1; }

.full-menu-inner {
  position: relative;
  z-index: 1;
  height: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: clamp(76px, 12dvh, 110px) var(--pad-x) 24px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: clamp(14px, 3.5dvh, 48px);
}
.menu-upper {
  display: flex;
  justify-content: space-between;
  gap: 48px;
  flex: 1;
  min-height: 0;
}
.menu-links { display: flex; flex-direction: column; justify-content: center; }
.menu-link {
  display: flex;
  align-items: baseline;
  gap: 20px;
  padding: clamp(4px, 1.1dvh, 10px) 0;
  transition: transform 0.25s ease, opacity 0.25s ease;
  opacity: 0;
  transform: translateY(24px);
}
body.menu-open .menu-link { opacity: 1; transform: translateY(0); }
body.menu-open .menu-links li:nth-child(1) .menu-link { transition-delay: 0.08s; }
body.menu-open .menu-links li:nth-child(2) .menu-link { transition-delay: 0.14s; }
body.menu-open .menu-links li:nth-child(3) .menu-link { transition-delay: 0.20s; }
body.menu-open .menu-links li:nth-child(4) .menu-link { transition-delay: 0.26s; }
body.menu-open .menu-links li:nth-child(5) .menu-link { transition-delay: 0.32s; }

.menu-num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--lime);
  min-width: 34px;
}
.menu-word {
  font-family: var(--font-mono);
  font-size: 5.5rem;
  line-height: 1;
  letter-spacing: 0.01em;
  transition: color 0.2s ease, letter-spacing 0.25s ease;
}
.menu-link:hover .menu-word { color: var(--lime); letter-spacing: 0.04em; }

.menu-side {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding-top: 12px;
  text-align: right;
  flex-shrink: 0;
}
.menu-side-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--lime);
  margin-bottom: 8px;
}
.menu-side-list { display: flex; flex-direction: column; gap: 4px; }
.menu-side-link { font-size: 17px; opacity: 0.9; }
.menu-side-link:hover { opacity: 1; text-decoration: underline; }
.menu-side-note { font-size: 15px; opacity: 0.75; max-width: 220px; margin-left: auto; }

.menu-lower {
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}
.menu-extra {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  opacity: 0.7;
}

/* ==========================================================================
   SHARED — tags, buttons, links, placeholders
   ========================================================================== */
.section-tag {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--accent);
  color: var(--bg);
  padding: 7px 12px 5px;
  margin-bottom: clamp(24px, 3vw, 40px);
}
.section-tag.is-dark { background: var(--ink); }

.section-heading {
  font-size: clamp(2.4rem, 4.5vw, 4rem);
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  margin-bottom: clamp(48px, 6vw, 96px);
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 14px 30px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  border: 1px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.btn-primary { background: var(--accent); border-color: var(--accent); color: var(--white); }
.btn-primary:hover { background: var(--ink); border-color: var(--ink); transform: translateY(-2px); }
.btn-dark { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.btn-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--white); transform: translateY(-2px); }
.btn.is-full { width: 100%; }

.text-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-body);
  font-size: 16px;
  letter-spacing: 0.02em;
  font-weight: 600;
  border-bottom: 1px solid var(--ink);
  padding-bottom: 4px;
  min-height: 44px;
  transition: color 0.2s ease, border-color 0.2s ease, gap 0.2s ease;
}
.text-link:hover { color: var(--accent); border-color: var(--accent); gap: 14px; }

/* ---------- placeholder panels ---------- */
.ph-panel {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background:
    repeating-linear-gradient(45deg, rgba(34,34,34,0.05) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #cfcfcf 0%, #c2c2c4 55%, #b8b8bb 100%);
  border: 1px solid var(--line);
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.ph-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(34,34,34,0.14) 1px, transparent 1px);
  background-size: 5px 5px;
  opacity: 0.35;
  pointer-events: none;
}
.ph-panel.is-dark {
  background:
    repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 2px, transparent 2px 6px),
    linear-gradient(160deg, #2c2c2e 0%, #1f1f21 100%);
}
.ph-panel.is-dark .ph-label { color: var(--bg); border-color: rgba(217,217,217,0.4); }

.ph-label {
  position: relative;
  z-index: 1;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.12em;
  color: var(--ink-soft);
  border: 1px solid var(--ink-soft);
  padding: 5px 9px 3px;
  margin: 14px;
  background: rgba(217,217,217,0.6);
}
.ph-panel.is-dark .ph-label { background: rgba(34,34,34,0.5); }

/* browser mockup */
.ph-browser { aspect-ratio: 16 / 10; flex-direction: column; align-items: stretch; }
.ph-browser-bar {
  display: flex;
  gap: 6px;
  padding: 10px 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(217,217,217,0.5);
}
.ph-browser-bar i { width: 9px; height: 9px; border-radius: 50%; border: 1px solid var(--ink-soft); }
.ph-browser .ph-label { margin-top: auto; align-self: flex-start; }

/* magazine block */
.ph-mag { aspect-ratio: 3 / 4; }
.ph-mag::before {
  content: "";
  position: absolute;
  top: 0; bottom: 0; left: 12%;
  width: 1px;
  background: rgba(34,34,34,0.25);
}

/* slide preview */
.ph-slide { aspect-ratio: 16 / 9; }
.ph-slide::before {
  content: "";
  position: absolute;
  left: 14px; right: 14px; top: 14px;
  height: 34%;
  border: 1px dashed rgba(34,34,34,0.35);
}

.ph-grain { aspect-ratio: 4 / 3; }

.ph-avatar {
  flex-shrink: 0;
  width: 64px; height: 64px;
  border-radius: 50%;
  border: 1px solid var(--line);
  background:
    radial-gradient(circle at 35% 35%, #c6c6c8, #a9a9ac);
}

/* reveal on scroll */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}

/* ==========================================================================
   HERO — nvrmnd 실제 구성: 중앙 정렬, 인트로 첫 줄 우측, 박스 워드,
   가는 웨이트 마지막 줄, 중앙 CTA(버튼+화살표), 하단 3분할 스트립
   ========================================================================== */
.hero {
  min-height: 100svh;
  display: flex;
  align-items: stretch;
  padding-top: 96px;
  padding-bottom: 24px;
}
.hero-container {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 100%;
  padding-bottom: 64px;
}
.hero-headings {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}
/* 원본(hflex) 구조: h1 + 인트로가 한 행의 flex 형제 — 묶음 전체를 중앙 정렬 */
.hero-line-row.is-first {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(24px, 3.5vw, 56px);
  width: 100%;
  padding: 5px 0px; /* 폰트 줄이면서 패팅 추가 0819 */
}
.hero-heading {
  font-size: clamp(3rem, 7.0vw, 6.4rem); /* beige-test v2: 데스크톱 최대 120px (3rem, 8.3vw, 7.5rem)*/
  font-weight: 600;
  line-height: 1.02;
  letter-spacing: -0.03em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 5px 0px;/* 폰트 줄이면서 패팅 추가 0819 */
}
.hero-heading.is-light {
  font-weight: 300;
  letter-spacing: -0.02em;
}

/* 박스 워드 — 선택 핸들 느낌의 아웃라인 */
.hero-boxed {
  position: relative;
  display: inline-block;
  border: 2px solid var(--accent);
  padding: 0 0.1em;
  line-height: 1;
}
/* 그레이 클론 원본과 동일한 코너 사각점 */
.hero-boxed::before, .hero-boxed::after {
  content: "";
  position: absolute;
  left: -6px; right: -6px;
  height: 9px;
  background:
    linear-gradient(var(--accent), var(--accent)) left center / 9px 9px no-repeat,
    linear-gradient(var(--accent), var(--accent)) right center / 9px 9px no-repeat;
}
.hero-boxed::before { top: -6px; }
.hero-boxed::after { bottom: -6px; }

/* 인트로 — 데스크톱에서 첫 줄 우측 (flex 형제, 원본 hero-body 위치) */
.hero-intro {
  flex: 0 0 300px;
  padding-top: 10px;
  text-align: left;
  font-size: 18px; /* beige-test v2 */
  line-height: 1.55;
  color: var(--ink-soft);
}

.hero-cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 52px;
}
.btn-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 52px; height: 52px;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 20px;
  transition: background 0.2s ease, color 0.2s ease;
}
.btn-arrow:hover { background: var(--accent); color: var(--white); }

/* 하단 3분할 스트립 */
.hero-foot {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: 16px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
}
.hero-foot-left { text-align: left; }
.hero-foot-scroll { text-align: center; color: var(--accent); }
.hero-foot-right { text-align: right; }
.hero-foot a:hover { color: var(--accent); }

/* ==========================================================================
   ABOUT
   ========================================================================== */
.about-lede {
  font-size: clamp(1.7rem, 3.2vw, 2.9rem);
  font-weight: 500;
  line-height: 1.18;
  letter-spacing: -0.015em;
  max-width: 22ch;
  margin-bottom: clamp(56px, 7vw, 110px);
}
.about-lede em { color: var(--accent); }

.about-grid {
  display: grid;
  grid-template-columns: 5fr 4fr;
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}
.about-media .ph-panel { aspect-ratio: 4 / 3; }
.about-copy { display: flex; flex-direction: column; gap: 20px; padding-bottom: 8px; }
.about-copy p { color: var(--ink-soft); max-width: 46ch; }
.about-copy .text-link { align-self: flex-start; margin-top: 12px; }

.about-divider {
  margin-top: clamp(64px, 8vw, 120px);
  padding: 20px 0;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 4vw, 48px);
  flex-wrap: wrap;
}
.divider-word {
  font-family: var(--font-body);
  font-size: clamp(1.1rem, 2.4vw, 1.8rem);
  letter-spacing: 0.14em;
  color: var(--ink-soft);
}
.divider-dot { width: 7px; height: 7px; background: var(--accent); }

/* ==========================================================================
   WORK
   ========================================================================== */
.work-item {
  display: grid;
  grid-template-columns: 7fr 4fr;
  gap: clamp(28px, 5vw, 80px);
  align-items: end;
  padding: clamp(36px, 5vw, 64px) 0;
  border-top: 1px dotted var(--line);
}
.work-item.is-flip { grid-template-columns: 4fr 7fr; }
.work-item.is-flip .work-media { order: 2; }
.work-item.is-flip .work-meta { order: 1; }

.work-media .ph-panel { width: 100%; }
.work-meta { display: flex; flex-direction: column; gap: 12px; padding-bottom: 6px; }
.work-index {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.work-title {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.work-desc { color: var(--ink-soft); max-width: 34ch; }
.work-date {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-top: 8px;
}
.work-cta {
  border-top: 1px dotted var(--line);
  padding-top: clamp(28px, 4vw, 44px);
  display: flex;
  justify-content: flex-end;
}

/* ==========================================================================
   PROCESS
   ========================================================================== */
.process-step {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(28px, 5vw, 88px);
  align-items: start;
  padding: clamp(44px, 6vw, 80px) 0;
  border-top: 1px dotted var(--line);
}
.process-step.is-flip .process-head { order: 2; text-align: right; }
.process-step.is-flip .process-body { order: 1; }

.process-head {
  display: flex;
  flex-direction: column;
  gap: 6px;
  position: sticky;
  top: 100px;
}
.process-num {
  font-family: var(--font-mono);
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  color: var(--accent);
}
.process-word {
  font-family: var(--font-mono);
  font-size: clamp(4rem, 11vw, 9.5rem);
  font-weight: 600;
  line-height: 0.9;
  text-transform: lowercase;
  letter-spacing: 0.01em;
}
.process-step.is-flip .process-head { align-items: flex-end; }

.process-body { display: flex; flex-direction: column; gap: 20px; }
.process-label {
  font-family: var(--font-body);
  font-size: 14px;
  letter-spacing: 0.04em;
  font-weight: 600;
  color: var(--ink-soft);
}
.process-desc { color: var(--ink-soft); max-width: 44ch; }
.process-body .ph-panel { margin-top: 10px; }

/* ==========================================================================
   FEEDBACK
   ========================================================================== */
.quote-block {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding: clamp(44px, 6vw, 76px) 0;
  border-top: 1px dotted var(--line);
  max-width: 1000px;
}
.quote-block.is-flip { margin-left: auto; text-align: right; }
.quote-block.is-flip .quote-meta { justify-content: flex-end; }

.quote-text {
  font-size: clamp(1.5rem, 3vw, 2.6rem);
  font-weight: 500;
  line-height: 1.22;
  letter-spacing: -0.015em;
  border: none;
  padding: 0;
}
.quote-meta { display: flex; align-items: center; gap: 16px; }
.quote-who { display: flex; flex-direction: column; }
.quote-who strong { font-size: 17px; font-weight: 600; }
.quote-who em {
  font-style: normal;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dim);
  margin-top: 3px;
}

/* ==========================================================================
   SERVICES
   ========================================================================== */
.service-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4.5vw, 72px);
  align-items: start;
  padding: clamp(40px, 5vw, 68px) 0;
  border-top: 1px dotted var(--line);
}
.service-head { display: flex; align-items: flex-start; gap: clamp(16px, 2.5vw, 32px); }
.service-num {
  font-family: var(--font-mono);
  font-size: clamp(2.6rem, 5vw, 4.4rem);
  line-height: 0.9;
  color: var(--accent);
}
.service-title-box { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.service-title {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.05;
}
.service-sub {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.14em;
  color: var(--dim);
}
.service-body { display: flex; flex-direction: column; gap: 18px; }
.service-desc { color: var(--ink-soft); }
.service-list { display: flex; flex-direction: column; gap: 8px; }
.service-list li {
  position: relative;
  padding-left: 22px;
  font-size: 16px;
  color: var(--ink-soft);
}
.service-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 0.55em;
  width: 8px; height: 8px;
  background: var(--accent);
}
.service-media .ph-panel { aspect-ratio: 1 / 1; }
.services-cta {
  border-top: 1px dotted var(--line);
  padding-top: clamp(32px, 4vw, 48px);
  display: flex;
  justify-content: center;
}

/* ==========================================================================
   GUIDE / LEAD MAGNET
   ========================================================================== */
.guide .container {
  background: var(--ink);
  color: var(--bg);
  padding-top: clamp(56px, 7vw, 100px);
  padding-bottom: clamp(56px, 7vw, 100px);
}
.guide-grid {
  display: grid;
  grid-template-columns: 6fr 5fr;
  gap: clamp(36px, 6vw, 96px);
  align-items: center;
}
.guide-copy { display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.guide-cta { align-self: start; }
.guide .section-tag { background: var(--lime); color: var(--ink); margin-bottom: 0; }
.guide-heading {
  font-size: clamp(2.1rem, 4vw, 3.6rem);
  font-weight: 600;
  line-height: 1.04;
  letter-spacing: -0.02em;
}
.guide-desc { color: #b9b9bb; max-width: 42ch; }
.guide .btn-dark { background: var(--lime); border-color: var(--lime); color: var(--ink); }
.guide .btn-dark:hover { background: var(--accent); border-color: var(--accent); color: var(--white); }

.guide-media {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 320px;
}
.guide-media .ph-panel { position: absolute; width: 56%; }
.ph-mag.is-tilted { transform: rotate(-5deg) translateX(-26%); }
.ph-mag.is-tilted-alt { transform: rotate(4deg) translateX(26%); }

/* ==========================================================================
   NEWSLETTER
   ========================================================================== */
.newsletter-heading {
  font-family: var(--font-body);
  font-size: clamp(3.2rem, 9vw, 8rem);
  font-weight: 600;
  line-height: 0.92;
  letter-spacing: 0.01em;
  margin-bottom: 20px;
}
.newsletter-sub { color: var(--ink-soft); max-width: 52ch; margin-bottom: clamp(36px, 5vw, 64px); }

.newsletter-points {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px dotted var(--line);
  margin-bottom: clamp(40px, 5vw, 64px);
}
.newsletter-points li {
  display: flex;
  gap: 16px;
  align-items: baseline;
  padding: 22px 24px 22px 0;
  border-bottom: 1px dotted var(--line);
  color: var(--ink-soft);
  font-size: 17px;
}
.point-num {
  font-family: var(--font-mono);
  font-size: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

.newsletter-form {
  display: flex;
  gap: 12px;
  max-width: 640px;
}
.newsletter-input {
  flex: 1;
  min-height: 52px;
  padding: 12px 18px;
  font-family: var(--font-mono);
  font-size: 15px;
  letter-spacing: 0.08em;
  background: transparent;
  border: 1px solid var(--ink);
  color: var(--ink);
}
.newsletter-input::placeholder { color: var(--dim); }
.newsletter-input:focus { outline: 2px solid var(--accent); outline-offset: 2px; }
.newsletter-note {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 14px;         /* 카카오 버튼(14px)과 통일 */
  letter-spacing: 0.02em;
  color: var(--ink);       /* 블랙 통일 */
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.footer {
  margin-top: var(--sec-gap);
  border-top: 1px dotted var(--line);
  padding-top: clamp(48px, 6vw, 80px);
  overflow: hidden;
}
.footer-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-bottom: 0; /* 간격 제어는 .footer-wordmark의 margin-top 단일 소스로 일원화 (마진 병합 방지) */
}
.footer-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--dim);
  margin-bottom: 14px;
}
.footer-list { display: flex; flex-direction: column; gap: 8px; }
.footer-list a, .footer-mail { font-size: 17px; color: var(--ink-soft); }
.footer-list a:hover, .footer-mail:hover { color: var(--accent); }

.footer-wordmark {
  display: block;
  width: 100%;
  margin-top: clamp(64px, 8vw, 140px);
  font-family: var(--font-mono);
  font-size: min(18.5vw, 16rem); /* JS 실측 스케일링 전 초기값(깜빡임 방지) — fitFooterWordmark()가 정확한 값으로 덮어씀 */
  font-weight: 700;
  line-height: 0.85;
  letter-spacing: -0.01em;
  text-align: center;
  white-space: nowrap;
  color: var(--ink);
  user-select: none;
}
.footer-wordmark sup { font-size: 0.18em; vertical-align: super; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 20px 0 24px;
  border-top: 1px dotted var(--line);
  margin-top: clamp(32px, 4vw, 56px);
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--dim);
}
.footer-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: right;
}

/* ==========================================================================
   STICKY MOBILE CTA (structure ready, disabled in phase 1)
   ========================================================================== */
.sticky-cta {
  position: fixed;
  left: 16px; right: 16px; bottom: 16px;
  z-index: 30;
  transform: translateY(140%);
  transition: transform 0.35s ease;
}
.sticky-cta.is-visible { transform: translateY(0); }

/* ==========================================================================
   RESPONSIVE — TABLET ≤991
   ========================================================================== */
@media screen and (max-width: 991px) {
  .hero-heading { font-size: clamp(2.8rem, 8vw, 5.4rem); } /* beige-test v2: 국문 최장 행 잘림 방지 */
  /* 인트로는 헤드라인 블록 아래 중앙으로 (is-first 해체 후 order로 이동) */
  .hero-line-row.is-first { display: contents; }
  .hero-intro {
    flex: none;
    order: 10;
    padding-top: 0;
    margin-top: 26px;
    text-align: center;
    max-width: 420px;
  }
  .menu-word { font-size: 4.5rem; }

  .about-grid { grid-template-columns: 1fr; gap: 40px; align-items: start; }
  .about-copy { padding-bottom: 0; }

  .work-item, .work-item.is-flip { grid-template-columns: 1fr; gap: 24px; }
  .work-item.is-flip .work-media { order: 1; }
  .work-item.is-flip .work-meta { order: 2; }

  .process-step { grid-template-columns: 1fr; gap: 28px; }
  .process-head { position: static; flex-direction: row; align-items: baseline; gap: 18px; }
  .process-step.is-flip .process-head { order: 1; text-align: left; align-items: baseline; }
  .process-step.is-flip .process-body { order: 2; }

  .service-block { grid-template-columns: 1fr 1fr; }
  .service-media { grid-column: 1 / -1; }
  .service-media .ph-panel { aspect-ratio: 16 / 9; }

  .guide-grid { grid-template-columns: 1fr; gap: 56px; }
  .guide-media { min-height: 380px; }

  .newsletter-points { grid-template-columns: 1fr; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE LANDSCAPE ≤767
   ========================================================================== */
@media screen and (max-width: 767px) {
  :root { --pad-x: 24px; --sec-gap: clamp(80px, 16vw, 120px); }

  /* beige-test v2: 모바일도 동일하게 3줄(양끝+가운데) 유지 */
  .bg-grid .bg-grid-col:nth-child(2) { border-left: none; }

  .nav-status { display: none; } /* beige-test v2: 모바일에선 상태 표시 숨김 */

  /* 메뉴 — 한 화면 안에: 링크는 dvh 기반으로 축소, 사이드는 가로 압축, 상태 문구·하단 라인 숨김 */
  .menu-upper { flex-direction: column; justify-content: center; gap: clamp(14px, 3dvh, 32px); }
  .menu-links { flex: 0 0 auto; }
  .menu-word { font-size: clamp(28px, 6dvh, 3.6rem); }
  .menu-side {
    flex-direction: row;
    flex-wrap: wrap;
    gap: clamp(14px, 3vw, 32px);
    text-align: left;
    padding-top: 0;
  }
  .menu-side-note { margin-left: 0; }
  .menu-side-block:nth-child(3) { display: none; }
  .menu-side-list { flex-direction: row; gap: 14px; }
  .menu-lower { display: none; }
  .full-menu-inner { padding-top: clamp(72px, 11dvh, 96px); }

  .hero { padding-top: 96px; }
  /* beige-test v2: nowrap 상태에서 국문이 잘리던 문제 — 크기 축소 + 줄바꿈 허용 */
  .hero-heading { font-size: clamp(2.2rem, 8.6vw, 4.2rem); white-space: normal; }

  .section-heading { margin-bottom: 40px; }

  .service-block { grid-template-columns: 1fr; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer { padding-bottom: 110px; } /* beige-test v2: 고정 CTA 바가 사업자 메타를 가리지 않게 */

  .newsletter-form { flex-direction: column; }
  .newsletter-form .btn { width: 100%; }
}

/* ==========================================================================
   RESPONSIVE — MOBILE PORTRAIT ≤479
   ========================================================================== */
@media screen and (max-width: 479px) {
  :root { --pad-x: 20px; }

  body { font-size: 16px; }

  /* mobile-only typesetting */
  .br-desktop { display: none; }

  .hero { padding-top: 88px; padding-bottom: 20px; }
  .hero-heading {
    font-size: clamp(36px, 12.5vw, 44px);
    white-space: normal;
    line-height: 1.02;
  }
  .hero-headings { gap: 8px; } /* beige-test v2: 사업계획서/발표자료 행 간격 확보 */
  .hero-boxed { border-width: 1.5px; }
  .hero-boxed::before, .hero-boxed::after {
    left: -4px; right: -4px;
    height: 7px;
    background:
      linear-gradient(var(--accent), var(--accent)) left center / 7px 7px no-repeat,
      linear-gradient(var(--accent), var(--accent)) right center / 7px 7px no-repeat;
  }
  .hero-boxed::before { top: -4px; }
  .hero-boxed::after { bottom: -4px; }
  .hero-intro { font-size: 16px; }
  .hero-cta { width: 100%; margin-top: 40px; }
  .hero-cta .btn-primary { flex: 1; }
  .hero-foot { grid-template-columns: 1fr; }
  .hero-foot-left, .hero-foot-right { display: none; }

  .section-heading { font-size: clamp(28px, 8.5vw, 34px); }

  .about-lede { font-size: clamp(24px, 7vw, 30px); max-width: 100%; }
  /* 모바일: 줄바꿈 없이 한 줄에 수납 (단어 잘림·도트 고아 방지) */
  .about-divider { gap: clamp(6px, 2.1vw, 12px); flex-wrap: nowrap; padding: 18px 0; }
  .divider-word { font-size: clamp(0.94rem, 4.05vw, 1.25rem); letter-spacing: 0.02em; white-space: nowrap; }
  .divider-dot { width: 5px; height: 5px; flex: none; }

  .work-title { font-size: 28px; }
  .work-cta { justify-content: flex-start; }

  .process-head { flex-direction: column; gap: 4px; }
  .process-word { font-size: clamp(56px, 17vw, 72px); }
  .process-num { font-size: 20px; }

  .quote-text { font-size: clamp(22px, 6.4vw, 26px); }
  .quote-block.is-flip { text-align: left; }
  .quote-block.is-flip .quote-meta { justify-content: flex-start; }

  .service-head { gap: 14px; }
  .service-num { font-size: 40px; }
  .service-title { font-size: 24px; }
  .service-list li { padding-left: 20px; }

  .guide .container { padding-left: 20px; padding-right: 20px; }
  .guide-heading { font-size: clamp(28px, 8.5vw, 34px); }
  /* 모바일: 보안 패널 50% 축소 · CTA는 이미지 다음, 중앙 정렬 */
  /* 모바일 전용: copy 내부 요소를 그리드로 승격시켜 CTA를 이미지 뒤로 재배치 */
  .guide-grid { display: flex; flex-direction: column; gap: 20px; align-items: stretch; text-align: left; }
  .guide-copy { display: contents; }              /* 자식(태그·헤딩·설명·CTA)이 직접 항목이 됨 */
  .guide-copy > .section-tag { order: 1; align-self: flex-start; width: auto; display: inline-block; }
  .guide-copy > .guide-heading { order: 2; }
  .guide-copy > .guide-desc { order: 3; }
  .guide-media { order: 4; }
  .guide-copy > .guide-cta { order: 5; align-self: center; margin: 4px auto 0; }

  /* 보안 패널: 데스크톱과 동일한 겹침·기울임 유지, 크기만 축소 */
  .guide-media { position: relative; display: flex; justify-content: center; align-items: center; min-height: 180px; }
  .guide-media .ph-panel { position: absolute; width: 38%; }
  .guide-media .ph-label { font-size: 10px; }
  .guide-media .ph-mag.is-tilted { transform: rotate(-5deg) translateX(-26%); }
  .guide-media .ph-mag.is-tilted-alt { transform: rotate(4deg) translateX(26%); }
  .guide-copy .btn { align-self: stretch; }

  /* 히어로 헤딩 상단 여백 */
  .hero-headings { margin-top: 40px; }

  .newsletter-heading { font-size: clamp(48px, 15vw, 60px); }
  .newsletter-points li { font-size: 16px; padding-right: 0; }

  /* 모바일: 2×2 — 좌 QUICK LINKS(2행 span) / 우상 SOCIALS / 우하 E-MAIL */
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 24px 20px; align-items: start; }
  .footer-grid .footer-label { font-size: 11px; }
  .footer-grid .footer-list a,
  .footer-grid .footer-mail { font-size: 13.5px; word-break: break-all; }
  .footer-grid .footer-col:nth-child(1) { grid-column: 1; grid-row: 1 / span 2; }
  .footer-grid .footer-col:nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer-grid .footer-col:nth-child(3) { grid-column: 2; grid-row: 2; }
  /* footer-wordmark 크기는 JS(fitFooterWordmark)가 실측으로 정확히 채움 — vw 근사치 불필요 */
  .footer-bottom { flex-direction: column; gap: 6px; }
  .footer-meta { text-align: left; }
}

/* ==========================================================================
   beige-test v2 — SkillNau 디테일 컴포넌트
   ========================================================================== */

/* 아웃라인 박스 버튼 — WHY(샘플 구성 보기), SAMPLE(무료 샘플 신청하기), APPLY(카카오톡) */
.btn-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--ink);
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.btn-outline:hover {
  color: var(--accent);
  border-color: var(--accent); /* 화이트 불투명도 효과 제거 — 아웃라인만 */
}
.btn-outline.is-small {
  min-height: 38px;
  padding: 7px 14px;
  font-size: 14px;
  gap: 6px;
}
.about-copy .btn-outline { align-self: flex-start; margin-top: 12px; }
.newsletter-note .btn-outline.is-small { margin-left: 8px; margin-top: 6px; }

/* ===== TRUST stacking panels v3 (beige-test 전용 실험) =====
   패널은 섹션 전체에 sticky, 패널 사이 100vh 스페이서로 "완주 후 덮기" 타이밍 구현.
   (200vh 래퍼 방식은 sticky 범위가 래퍼로 제한돼 덮기 효과가 사라지므로 등가 구조 사용) */
body { overflow-x: clip; } /* 기존 overflow-x:hidden이 sticky를 무력화 — 라인 무수정 덮어씀 */
.trust-panel {
  position: sticky;
  top: 0;
  height: 100vh;
  background: var(--bg); /* 덮기 효과의 전제 — 불투명 */
  display: flex;
  align-items: flex-start; /* v5: 세로 중앙 폐기 — 태그 아래 상단 기준 배치 */
  /* v6: 태그 하단 + 170px — 태그와 인용문 사이가 화면의 약 1/4 */
  padding-top: calc(clamp(90px, 12vh, 140px) + 26px + 170px);
}
.trust-step-gap { height: 100vh; } /* 각 패널의 진행률 완주 구간 */
.trust-tail { height: 100vh; }
/* 패널 내부 최하층 도트 그리드 — 패널이 덮여도 그리드가 이어져 보이게 */
.bg-grid.is-panel { position: absolute; inset: 0; z-index: 0; }
.trust-inner { position: relative; z-index: 1; width: 100%; }
/* 태그 레이어 — 섹션 전체를 덮는 absolute 래퍼(inset:0) 안의 100vh sticky.
   sticky 범위가 패널과 동일해져 패널3 해제 지점에서 태그도 같은 속도로 올라감 */
.feedback { position: relative; }
.trust-tag-layer {
  position: absolute;
  inset: 0;
  z-index: 10;
  pointer-events: none;
}
.trust-tag-pin {
  position: sticky;
  top: 0;
  height: 100vh;
}
.trust-tag-pin .section-tag {
  position: absolute;
  top: clamp(90px, 12vh, 140px);
  left: max(var(--pad-x), calc(50% - (var(--container) / 2) + var(--pad-x)));
  margin-bottom: 0;
}
.trust-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: clamp(32px, 5vw, 80px);
  align-items: center;
}
.trust-quote { display: flex; flex-direction: column; gap: 28px; }
/* v6: OFFER 상단 — 섹션 패딩 제거, 배경 그리드와 동일한 점선 구분선,
   TRUST 종료~태그 간격은 컨테이너 내부 여백(88~120px)으로 확보 */
.services { padding-top: 0; }
.services > .container {
  position: relative;
  padding-top: clamp(88px, 10vw, 120px);
}
/* 구분선은 배경 세로 그리드 첫~마지막 컬럼 사이에만 (컨테이너 패딩 안쪽) */
.services > .container::before {
  content: "";
  position: absolute;
  top: 0;
  left: var(--pad-x);
  right: var(--pad-x);
  border-top: 1px dotted var(--line);
}
/* 원형 링 */
.trust-ring {
  position: relative;
  width: 320px;
  height: 320px;
  margin-left: auto;
  font-family: var(--font-mono);
}
.qr-ring { position: absolute; inset: 0; width: 100%; height: 100%; }
.qr-ring-base { fill: none; stroke: var(--line); stroke-width: 1; }
.qr-ring-arc {
  fill: none;
  stroke: var(--accent);
  stroke-width: 4;            /* v3: 두께 대비 */
  stroke-linecap: round;
  stroke-dasharray: 100;      /* pathLength=100 기준 */
  stroke-dashoffset: 100;
  /* v3: 진행률 연속 매핑 — 전환 트랜지션 없음(스크롤이 곧 애니메이션) */
}
/* 태그 칩 — 원 좌상단 림 위 */
.qr-tag {
  position: absolute;
  top: 17%;
  left: 17%;
  transform: translate(-50%, -50%);
  z-index: 1;
  background: var(--accent);
  color: #fff;
  font-size: 11px;
  letter-spacing: 0.14em;
  padding: 4px 10px;
  white-space: nowrap;
}
/* 원 내부 롤 — 값 위 / 라벨 아래 세로 스택 중앙 */
.qr-window {
  position: absolute;
  left: 10%;
  right: 10%;
  top: 50%;
  height: 84px;
  transform: translateY(-50%);
  overflow: hidden;
}
.qr-track { transition: transform 0.45s ease; will-change: transform; }
.qr-item {
  height: 84px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  white-space: nowrap;
}
.qr-item b {
  font-size: clamp(1.5rem, 1.9vw, 1.9rem);
  font-weight: 700;
  color: var(--dim);
  transition: color 0.3s ease;
}
.qr-item i {
  font-style: normal;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--dim);
  white-space: nowrap;
}
.qr-item.is-on b { color: var(--accent); }
/* CONFIRMED — 퍼플 텍스트 + 퍼플 언더라인 */
.qr-item.is-final.is-on b {
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: var(--accent);
  text-decoration-thickness: 0.16em;
  text-underline-offset: 0.14em;
}
/* 정적 흐름 — 모바일(<768px) 및 reduced-motion(is-static-mode) */
@media screen and (max-width: 767px) {
  .trust-panel { position: static; height: auto; padding: clamp(56px, 12vw, 88px) 0; }
  .trust-step-gap, .trust-tail { display: none; }
  .trust-tag-layer { position: static; pointer-events: auto; }
  .trust-tag-pin { position: static; height: auto; }
  .trust-tag-pin .section-tag { position: static; display: inline-block; margin: 0 0 4px var(--pad-x); }
  .trust-grid { grid-template-columns: 1fr; gap: 36px; }
  .trust-ring { width: 220px; height: 220px; margin: 0 auto; }
  .qr-track { transition: transform 0.3s ease; } /* v5: 모바일 롤 전환 단축 */
}
.feedback.is-static-mode .trust-panel { position: static; height: auto; padding: clamp(56px, 12vw, 88px) 0; }
.feedback.is-static-mode .trust-step-gap,
.feedback.is-static-mode .trust-tail { display: none; }
.feedback.is-static-mode .trust-tag-layer { position: static; pointer-events: auto; }
.feedback.is-static-mode .trust-tag-pin { position: static; height: auto; }
.feedback.is-static-mode .trust-tag-pin .section-tag { position: static; display: inline-block; margin: 0 0 4px var(--pad-x); }
.feedback.is-static-mode .trust-grid { grid-template-columns: 1fr; gap: 36px; }
.feedback.is-static-mode .trust-ring { width: 220px; height: 220px; margin: 0 auto; }
.kakao-inline{
  font-weight:700;
  text-decoration:underline;
  text-underline-offset:3px;
  color:inherit;
  transition:color .2s ease;
}
.kakao-inline:hover{ color:var(--accent); }

/* ==========================================================================
   ROOT PAGE ADDITIONS (index.html 전용) — 공유 토큰 기반 소규모 유틸
   ========================================================================== */

/* 실적 고객사 라인 — 모노 라벨 + 도트 구분 */
.client-row {
  margin-top: clamp(40px, 5vw, 64px);
  padding: 20px 0;
  border-top: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px 28px;
}
.client-row-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  flex-basis: 100%;
}
.client-row-name {
  font-size: 17px;
  font-weight: 500;
  color: var(--ink-soft);
}

/* CTA 2개 나란히 */
.cta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 36px;
}

/* 가격 앵커 — 모노 강조 라인 */
.price-anchor {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
  color: var(--ink);
  margin-top: 28px;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.price-anchor::before {
  content: "";
  width: 8px; height: 8px;
  background: var(--accent);
}

/* 섹션 리드 문단 (서비스 소개용) */
.svc-lede {
  font-size: clamp(17px, 2vw, 20px);
  line-height: 1.6;
  color: var(--ink-soft);
  max-width: 640px;
  margin-top: 24px;
}

/* ==========================================================================
   ROOT v2 ADDITIONS — 지표 스트립 / 분야 그리드 / 고객 코멘트 / FAQ
   ========================================================================== */

/* 실측 지표 스트립 */
.stats-strip {
  margin-top: clamp(56px, 7vw, 96px);
  border-top: 1px dotted var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.stats-item {
  padding: 28px 20px 8px 0;
  border-right: 1px dotted var(--line);
}
.stats-item:last-child { border-right: none; }
.stats-num {
  font-family: var(--font-mono);
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
  display: block;
}
.stats-label {
  font-size: 14px;
  color: var(--ink-soft);
  display: block;
  margin-top: 6px;
}
.stats-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dim);
  margin-top: 18px;
}
@media (max-width: 767px) {
  .stats-strip { grid-template-columns: repeat(2, 1fr); }
  .stats-item:nth-child(2) { border-right: none; }
  .stats-item { border-bottom: 1px dotted var(--line); padding-bottom: 20px; }
  .stats-item:nth-child(3), .stats-item:nth-child(4) { border-bottom: none; }
}

/* 디자인 분야 그리드 — 텍스트 기본, 호버 시 이미지 확대 리빌 */
.cat-grid {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px dotted var(--line);
  border-left: 1px dotted var(--line);
}
.cat-card {
  position: relative;
  overflow: hidden;
  border-right: 1px dotted var(--line);
  border-bottom: 1px dotted var(--line);
  padding: 24px 20px 28px;
  min-height: 140px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 14px;
  transition: background 0.2s ease;
}
.cat-card:not(.has-media):hover { background: rgba(125, 88, 253, 0.06); }

.cat-media {
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0;
  transform: scale(1.14);
  transition: opacity 0.5s ease, transform 0.5s ease;
}
.cat-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cat-media::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(190deg, rgba(20, 16, 32, 0.1) 0%, rgba(20, 16, 32, 0.82) 100%);
}
@media (hover: hover) {
  .cat-card.has-media:hover .cat-media { opacity: 1; transform: scale(1); }
}

.cat-num, .cat-name {
  position: relative;
  z-index: 1;
  transition: color 0.35s ease;
}
.cat-num {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
}
.cat-name {
  font-size: 17px;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.35;
}
@media (hover: hover) {
  .cat-card.has-media:hover .cat-num { color: rgba(255, 255, 255, 0.72); }
  .cat-card.has-media:hover .cat-name { color: #fff; }
}
@media (max-width: 767px) {
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .cat-card { min-height: 108px; }
}

/* 분야 그리드 하단 노트 + 포트폴리오 CTA */
.cat-foot {
  margin-top: 28px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}
.cat-foot-note {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dim);
}

/* 고객 코멘트 카드 */
.quote-cards {
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(20px, 3vw, 40px);
}
.quote-card {
  border: 1px solid var(--line);
  padding: clamp(24px, 3vw, 36px);
  background: rgba(255, 255, 255, 0.45);
}
.quote-card-text {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: var(--ink);
}
.quote-card-meta {
  margin-top: 20px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--dim);
}
@media (max-width: 767px) {
  .quote-cards { grid-template-columns: 1fr; }
}

/* FAQ 아코디언 */
.faq-list { margin-top: clamp(32px, 4vw, 56px); border-top: 1px dotted var(--line); }
.faq-item { border-bottom: 1px dotted var(--line); }
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 22px 0;
  display: flex;
  align-items: baseline;
  gap: 18px;
  font-size: clamp(16px, 1.9vw, 19px);
  font-weight: 600;
  color: var(--ink);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-q-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--dim);
  flex-shrink: 0;
}
.faq-item summary::after {
  content: "+";
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 20px;
  color: var(--dim);
  transition: transform 0.2s ease;
}
.faq-item[open] summary::after { transform: rotate(45deg); }
.faq-a {
  padding: 0 0 26px 44px;
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink-soft);
  max-width: 720px;
}
@media (max-width: 479px) { .faq-a { padding-left: 0; } }

/* ==========================================================================
   ROOT v3 — 협력사 로고 스트립
   ========================================================================== */

/* 협력사 로고 스트립 */
.logo-strip {
  margin-top: clamp(40px, 5vw, 64px);
  padding-top: 24px;
  border-top: 1px dotted var(--line);
}
.logo-strip-label {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.08em;
  color: var(--dim);
  display: block;
  margin-bottom: 20px;
}
.logo-strip-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px 40px;
}
.logo-strip-row img {
  height: 22px;
  width: auto;
  filter: grayscale(1) brightness(0.35);
  opacity: 0.65;
  transition: filter 0.25s ease, opacity 0.25s ease;
}
.logo-strip-row img:hover { filter: grayscale(0) brightness(1); opacity: 1; }
@media (max-width: 767px) {
  .logo-strip-row { gap: 20px 26px; }
  .logo-strip-row img { height: 18px; }
}

/* ==========================================================================
   ROOT v4 — 헤더 인라인 네비게이션 (데스크톱 상시 노출)
   ========================================================================== */

/* 앵커 스크롤 시 고정 헤더에 가리지 않도록 */
.section, #hero { scroll-margin-top: 84px; }

.nav-links {
  display: none; /* 모바일: 숨김 → 햄버거 메뉴 사용 */
  align-items: center;
  gap: clamp(20px, 2.4vw, 34px);
  margin-left: auto;
}
.nav-link {
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.1em;
  color: var(--ink-soft);
  padding: 6px 0;
  position: relative;
  transition: color 0.2s ease;
}
.nav-link::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 1px;
  background: var(--accent);
  transition: right 0.25s ease;
}
.nav-link:hover { color: var(--ink); }
.nav-link:hover::after { right: 0; }
.nav-link.is-current { color: var(--ink); }
.nav-link.is-current::after { right: 0; }

.nav-cta {
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.08em;
  padding: 10px 18px;
  background: var(--ink);
  color: var(--white);
  transition: background 0.2s ease;
}
.nav-cta:hover { background: var(--accent); }

@media (min-width: 960px) {
  .nav-links { display: flex; }
  .menu-btn { display: none; }   /* 데스크톱: 풀스크린 메뉴 숨김 */
  .nav-status { display: none; } /* 링크 공간 확보 */
}

/* ==========================================================================
   V5 — 기획서 v3.1 리빌드 (배경 토큰 / 히어로 분할 / 마키 / 라우터 / 아코디언
   / 4시스템 / 박스라인 다크 / 타깃 / 원형 프로세스 / 리뷰 마키 / CTA 밴드)
   ========================================================================== */
:root { --bg-lift: #f4f4f2; --bg-dark: #222222; }

.sec-lift { background: var(--bg-lift); }
.sec-dark { background: var(--bg-dark); }
.sec-dark .section-tag { color: var(--lime); }
.sec-dark .section-heading { color: #fff; }

/* 공용 버튼 v5 */
.btn5 { display: inline-block; padding: 14px 26px; background: var(--accent); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: -0.01em; transition: background .2s; }
.btn5:hover { background: #6a47e0; }
.btn5-ghost { display: inline-block; padding: 13px 22px; border: 1px solid #9a9a9a; color: var(--ink); font-weight: 600; font-size: 14.5px; transition: border-color .2s, color .2s; }
.btn5-ghost:hover { border-color: var(--ink); }
.btn5-lime { display: inline-block; padding: 13px 24px; background: var(--lime); color: var(--ink); font-weight: 800; font-size: 14.5px; }
.btn5-lime:hover { filter: brightness(.95); }
.btn5-ghost-w { display: inline-block; padding: 12px 20px; border: 1px solid #666; color: #eee; font-weight: 600; font-size: 14px; transition: border-color .2s; }
.btn5-ghost-w:hover { border-color: #fff; }
.micro5 { display: block; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: .02em; }

/* ---------- 1. HERO ---------- */
.hero2 { min-height: 88vh; display: flex; align-items: center; padding: 150px 0 70px; }
.hero2-grid { display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.hero2-heading { font-size: clamp(29px, 4.4vw, 54px); font-weight: 800; line-height: 1.3; letter-spacing: -0.02em; color: var(--ink); word-break: keep-all; }
.hero2-box { background: var(--ink); color: #fff; padding: 0 .16em; }
.hero2-solve { margin-top: 20px; font-size: clamp(17px, 2vw, 23px); font-weight: 500; color: var(--ink-soft); word-break: keep-all; }
.hero2-solve strong { color: var(--ink); font-weight: 800; }
.hero2-sub { margin-top: 14px; font-size: 15px; color: var(--dim); word-break: keep-all; }
.hero2-sub strong { color: var(--ink); }
.hero2-ctas { display: flex; align-items: center; gap: 14px; margin-top: 34px; flex-wrap: wrap; }
.hero2-badge { margin-top: 30px; font-family: var(--font-mono); font-size: 12.5px; color: var(--dim); letter-spacing: .04em; }
.hero2-badge strong { color: var(--ink); }
.hero2-visual { position: relative; }
.hero2-visual img { width: 100%; max-width: 480px; display: block; margin: 0 auto; }
.chip5 { position: absolute; font-family: var(--font-mono); font-size: 12px; letter-spacing: .04em; padding: 9px 13px; background: var(--ink); color: #fff; box-shadow: 0 8px 22px rgba(0,0,0,.16); animation: float5 5s ease-in-out infinite; }
.chip5.is-a { top: 5%; right: 2%; }
.chip5.is-b { bottom: 5%; left: 2%; background: var(--accent); animation-delay: 2.2s; }
@keyframes float5 { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }

/* ---------- 2. TRUST ---------- */
.trust-head { text-align: center; font-size: clamp(18px, 2.5vw, 27px); font-weight: 700; color: var(--ink); word-break: keep-all; }
.trust-stats { display: flex; justify-content: center; gap: clamp(30px, 7vw, 90px); margin: 40px 0 52px; flex-wrap: wrap; text-align: center; }
.tstat-num { font-family: var(--font-mono); font-size: clamp(27px, 3.6vw, 42px); font-weight: 700; color: var(--ink); }
.tstat-label { margin-top: 6px; font-family: var(--font-mono); font-size: 12px; color: var(--dim); letter-spacing: .08em; }
.mq { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.mq-track { display: flex; align-items: center; gap: clamp(44px, 6vw, 84px); width: max-content; animation: mq5 42s linear infinite; }
.mq:hover .mq-track { animation-play-state: paused; }
.mq-track img { height: 26px; width: auto; filter: grayscale(1); opacity: .6; }
@keyframes mq5 { to { transform: translateX(-50%); } }

/* ---------- 3. PAIN ---------- */
.pain-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 48px; }
.pain-card { background: #fff; border: 1px solid #d9d9d9; padding: 28px 26px; display: flex; flex-direction: column; gap: 10px; transition: border-color .2s; }
.pain-card:hover { border-color: var(--accent); }
.pain-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.pain-title { font-size: 17.5px; font-weight: 700; color: var(--ink); line-height: 1.5; word-break: keep-all; }
.pain-desc { font-size: 14px; color: var(--dim); line-height: 1.7; word-break: keep-all; }
.pain-link { margin-top: auto; padding-top: 10px; font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .04em; }

/* ---------- 4. DESIGN OPS ---------- */
.ops-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(28px, 5vw, 64px); align-items: center; margin-top: 44px; }
.ops-media img { width: 100%; max-width: 400px; display: block; margin: 0 auto; }
.ops-copy p { font-size: 15.5px; line-height: 1.9; color: var(--ink-soft); word-break: keep-all; }
.ops-copy p + p { margin-top: 18px; }
.ops-copy strong { color: var(--ink); }

/* 분야 아코디언 (6열 1행) */
.acc { display: flex; gap: 8px; margin-top: 56px; height: 420px; }
.acc-item { position: relative; flex: 1; overflow: hidden; background: #fff; border: 1px solid #cfcfcf; cursor: pointer; transition: flex .55s cubic-bezier(.2, .7, .25, 1); }
.acc-item img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transform: scale(1.08); transition: opacity .5s ease, transform .65s ease; }
.acc-item::after { content: ""; position: absolute; inset: auto 0 0 0; height: 46%; background: linear-gradient(transparent, rgba(18, 15, 30, .72)); opacity: 0; transition: opacity .4s; z-index: 1; }
.acc-label { position: absolute; left: 16px; bottom: 16px; right: 10px; z-index: 2; display: flex; flex-direction: column; gap: 6px; }
.acc-num { font-family: var(--font-mono); font-size: 11px; color: var(--dim); letter-spacing: .08em; transition: color .3s; }
.acc-name { font-size: 14.5px; font-weight: 700; color: var(--ink); word-break: keep-all; line-height: 1.4; transition: color .3s; }
.acc-item.is-open { flex: 3.4; }
.acc-item.is-open img { opacity: 1; transform: scale(1); }
.acc-item.is-open::after { opacity: 1; }
.acc-item.is-open .acc-num { color: rgba(255,255,255,.75); }
.acc-item.is-open .acc-name { color: #fff; font-size: 16px; }

/* 4시스템 카드 */
.sys-head { margin-top: 88px; }
.sys-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-top: 40px; }
.sys-card { background: #fff; border: 1px solid #d9d9d9; padding: 30px 28px; display: grid; grid-template-columns: 1fr 118px; gap: 20px; align-items: center; }
.sys-num { font-family: var(--font-mono); font-size: 24px; font-weight: 700; color: var(--accent); }
.sys-title { margin-top: 8px; font-size: 18px; font-weight: 800; color: var(--ink); }
.sys-desc { margin-top: 10px; font-size: 14px; color: var(--dim); line-height: 1.75; word-break: keep-all; }
.sys-card img { width: 118px; height: auto; }

/* ---------- 5. BOX LINE (dark) ---------- */
.bx-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 52px; }
.bx-card { background: #2e2e2e; padding: 36px 32px 32px; display: flex; flex-direction: column; gap: 13px; scroll-margin-top: 90px; }
.bx-cond { color: #b5b5b5; font-size: 15px; word-break: keep-all; }
.bx-name { font-family: var(--font-mono); font-size: clamp(24px, 2.8vw, 32px); font-weight: 700; color: #fff; letter-spacing: .02em; }
.bx-media { margin: 4px auto; width: min(70%, 300px); }
.bx-media img { width: 100%; display: block; }
.bx-desc { color: #cfcfcf; font-size: 14.5px; line-height: 1.75; word-break: keep-all; }
.bx-badge { font-family: var(--font-mono); font-size: 12.5px; color: var(--lime); letter-spacing: .06em; }
.bx-ctas { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }

/* ---------- 6. TARGET ---------- */
.tg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 48px; }
.tg-card { background: #fff; border: 1px solid #d9d9d9; padding: 28px 26px; }
.tg-num { font-family: var(--font-mono); font-size: 12px; color: var(--accent); letter-spacing: .08em; }
.tg-title { margin-top: 12px; font-size: 17.5px; font-weight: 800; color: var(--ink); word-break: keep-all; }
.tg-desc { margin-top: 10px; font-size: 14px; color: var(--dim); line-height: 1.7; word-break: keep-all; }

/* ---------- 7. PROCESS 원형 ---------- */
.pc-row { display: flex; align-items: center; justify-content: space-between; gap: 4px; margin-top: 60px; }
.pc-step { width: clamp(92px, 10.5vw, 132px); aspect-ratio: 1; border: 1.5px solid var(--ink); border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; text-align: center; flex-shrink: 0; background: rgba(255,255,255,.35); }
.pc-step .n { font-family: var(--font-mono); font-size: 10.5px; color: var(--dim); letter-spacing: .08em; }
.pc-step .w { font-size: clamp(12px, 1.2vw, 15px); font-weight: 700; color: var(--ink); word-break: keep-all; padding: 0 10px; line-height: 1.35; }
.pc-arrow { font-size: 20px; color: var(--dim); flex-shrink: 0; }
.pc-step.reveal { transition-delay: calc(var(--d, 0) * 120ms); }

/* ---------- 8. REVIEW (dark marquee) ---------- */
.rev-sub { margin-top: 14px; color: #aaa; font-size: 15px; }
.rev-mq { overflow: hidden; margin-top: 26px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.rev-mq + .rev-mq { margin-top: 14px; }
.rev-track { display: flex; gap: 14px; width: max-content; animation: mq5 58s linear infinite; padding: 4px 0; }
.rev-track.is-rev { animation-direction: reverse; animation-duration: 64s; }
.rev-mq:hover .rev-track { animation-play-state: paused; }
.rev-card { width: 350px; background: #2e2e2e; padding: 26px 24px; display: flex; flex-direction: column; gap: 11px; flex-shrink: 0; }
.rev-top { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rev-dur { font-family: var(--font-mono); font-size: 11px; color: #999; border: 1px solid #555; padding: 3px 9px; letter-spacing: .04em; }
.rev-tag { font-family: var(--font-mono); font-size: 11px; color: #b5b5b5; letter-spacing: .04em; padding: 3px 2px; }
.rev-tag.is-lime { background: var(--lime); color: var(--ink); padding: 4px 9px; font-weight: 700; }
.rev-title { color: #fff; font-weight: 700; font-size: 15.5px; line-height: 1.5; word-break: keep-all; }
.rev-body { color: #b8b8b8; font-size: 13.5px; line-height: 1.7; word-break: keep-all; }
.rev-meta { margin-top: auto; padding-top: 6px; font-family: var(--font-mono); font-size: 11px; color: #888; letter-spacing: .03em; }
.rev-clients { margin-top: 44px; text-align: center; font-family: var(--font-mono); font-size: 12px; color: #888; letter-spacing: .07em; line-height: 2; }
.rev-clients strong { color: #ddd; font-weight: 600; }

/* ---------- 9. CTA BAND ---------- */
.ctab { text-align: center; }
.ctab-heading { font-size: clamp(24px, 3.6vw, 42px); font-weight: 800; line-height: 1.45; color: var(--ink); word-break: keep-all; }
.ctab-ctas { display: flex; gap: 12px; justify-content: center; margin-top: 34px; flex-wrap: wrap; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .hero2 { padding-top: 120px; min-height: 0; }
  .hero2-grid { grid-template-columns: 1fr; gap: 44px; }
  .hero2-visual img { max-width: 340px; }
  .sys-grid, .bx-grid { grid-template-columns: 1fr; }
  .ops-grid { grid-template-columns: 1fr; }
  .ops-media img { max-width: 300px; }
}
@media (max-width: 767px) {
  .pain-grid, .tg-grid { grid-template-columns: 1fr; }
  .acc { flex-direction: column; height: auto; gap: 6px; }
  .acc-item { min-height: 62px; flex: none; }
  .acc-item.is-open { min-height: 300px; flex: none; }
  .pc-row { flex-direction: column; gap: 10px; margin-top: 44px; }
  .pc-arrow { transform: rotate(90deg); }
  .sys-card { grid-template-columns: 1fr 92px; padding: 24px 20px; }
  .rev-card { width: 290px; }
}
@media (prefers-reduced-motion: reduce) {
  .mq-track, .rev-track, .chip5 { animation: none; }
  .mq-track, .rev-track { flex-wrap: wrap; justify-content: center; width: auto; }
}

/* ==========================================================================
   V6 — 피드백 라운드 1 (그레이·블랙 톤 / 균일 패딩 / 히어로 2:1 / 아코디언 리스트형
   / 시스템 다크 카드 / 타깃 아이콘 / 프로세스 확대 / CTA 퍼플 패널)
   ========================================================================== */

/* 섹션 상하 패딩 균일화 (메인·ppt 공통) */
main .section { padding-top: clamp(88px, 9vw, 136px); padding-bottom: clamp(88px, 9vw, 136px); }

/* 히어로: 좌 2 / 우 1 */
.hero2-grid { grid-template-columns: 2fr 1fr; }
.hero2-visual img { max-width: 400px; }

/* 아코디언 → 리스트형 (기본 텍스트 + ↗, 클릭 시 이미지 전체 비율 노출) */
.acc { height: 460px; }
.acc-item { background: #fff; }
.acc-go { position: absolute; top: 16px; right: 16px; z-index: 2; font-family: var(--font-mono); font-size: 15px; color: var(--dim); transition: color .3s, transform .3s; }
.acc-item:hover .acc-go { color: var(--accent); transform: translate(2px, -2px); }
.acc-item img { object-fit: contain; padding: 52px 22px 84px; background: #fff; }
.acc-item::after { display: none; }
.acc-item.is-open { flex: 4; }
.acc-item.is-open .acc-num { color: var(--dim); }
.acc-item.is-open .acc-name { color: var(--ink); font-size: 15.5px; }
.acc-item.is-open .acc-go { color: var(--accent); }

/* 시스템 — 다크 카드 (ppt 가이드 톤 + 순차 스텝) */
.sysdark { margin-top: 96px; background: var(--ink); padding: clamp(48px, 6vw, 84px) clamp(24px, 5vw, 72px); }
.sysdark .section-heading { color: #fff; }
.sysdark .section-tag { color: var(--lime); }
.sysrow { display: grid; grid-template-columns: 84px 1fr 128px; gap: clamp(18px, 3vw, 40px); align-items: center; padding: clamp(28px, 3.5vw, 44px) 0; border-top: 1px solid #3a3a3a; }
.sysrow:first-of-type { margin-top: 44px; }
.sysrow .num { font-family: var(--font-mono); font-size: clamp(22px, 2.6vw, 30px); font-weight: 700; color: var(--lime); }
.sysrow .tit { font-size: clamp(17px, 2vw, 21px); font-weight: 800; color: #fff; }
.sysrow .dsc { margin-top: 10px; font-size: 14.5px; line-height: 1.8; color: #b5b5b5; word-break: keep-all; }
.sysrow img { width: 128px; height: auto; justify-self: end; }

/* 타깃 아이콘 */
.tg-icon { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1.5px solid var(--accent); margin-bottom: 16px; }
.tg-icon svg { width: 20px; height: 20px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 프로세스 확대 + 설명 */
.pc-row { align-items: flex-start; margin-top: 64px; }
.pc-col { display: flex; flex-direction: column; align-items: center; gap: 16px; flex: 1; min-width: 0; }
.pc-step { width: clamp(112px, 13vw, 172px); border-width: 2px; }
.pc-step .n { font-size: 11.5px; }
.pc-step .w { font-size: clamp(13.5px, 1.5vw, 17px); }
.pc-desc { font-size: 13px; color: var(--dim); text-align: center; line-height: 1.6; word-break: keep-all; max-width: 170px; }
.pc-arrow { margin-top: clamp(44px, 6vw, 76px); font-size: 22px; }
.pc-col.reveal { transition-delay: calc(var(--d, 0) * 140ms); }
@media (max-width: 767px) {
  .pc-arrow { margin-top: 0; }
  .pc-col { gap: 10px; }
}

/* CTA 퍼플 패널 */
.ctab-panel { background: var(--accent); padding: clamp(56px, 7vw, 100px) clamp(24px, 5vw, 80px); text-align: center; }
.ctab-panel .ctab-heading { color: #fff; }
.ctab-panel .micro5 { color: rgba(255, 255, 255, .75); margin-top: 18px; }
.btn5-inv { display: inline-block; padding: 14px 28px; background: #fff; color: var(--ink); font-weight: 800; font-size: 15px; transition: transform .2s; }
.btn5-inv:hover { transform: translateY(-2px); }
.btn5-ghost-p { display: inline-block; padding: 13px 24px; border: 1px solid rgba(255,255,255,.65); color: #fff; font-weight: 600; font-size: 14.5px; transition: border-color .2s; }
.btn5-ghost-p:hover { border-color: #fff; }

@media (max-width: 900px) {
  .hero2-grid { grid-template-columns: 1fr; }
  .sysrow { grid-template-columns: 1fr; gap: 14px; }
  .sysrow img { justify-self: start; width: 104px; }
}

/* ==========================================================================
   V7 — 피드백 라운드 2 (블랙 톤 강화 / 타이포 확대 / 카운트업 / 배지 /
   ppt식 시스템 / 박스인박스 / 프로세스 라이브 / 다크 CTA / 버튼 규격)
   ========================================================================== */

/* 1. 히어로 타이포 확대 + 우측 이미지 여백 */
.hero2-heading { font-size: clamp(32px, 4.8vw, 62px); }
.hero2-solve { font-size: clamp(18px, 2.2vw, 27px); margin-top: 24px; }
.hero2-sub { font-size: clamp(15px, 1.6vw, 18px); margin-top: 16px; }
.hero2-visual { padding: 0 clamp(16px, 3.5vw, 52px); }

/* 2. TRUST 다크 + 카운트업 타이포 */
#trust.sec-dark .trust-head { color: #fff; font-size: clamp(20px, 2.9vw, 33px); }
.sec-dark .tstat-num { color: var(--lime); font-size: clamp(36px, 4.8vw, 60px); }
.sec-dark .tstat-label { color: #aaa; font-size: 13.5px; margin-top: 10px; }
.sec-dark .mq-track img { filter: brightness(0) invert(1); opacity: .5; }

/* 3. PAIN 블랙 카드 + 배지 */
.pain-sub { margin-top: 16px; font-size: clamp(16px, 1.9vw, 21px); color: var(--dim); }
.pain-card { background: var(--ink); border-color: var(--ink); gap: 12px; padding: 32px 30px; }
.pain-card:hover { border-color: var(--lime); }
.pain-tag { font-family: var(--font-mono); font-size: 12px; color: #8f8f8f; letter-spacing: .08em; }
.pain-card .pain-title { color: #fff; font-size: clamp(17px, 1.9vw, 20px); }
.pain-card .pain-desc { color: #b0b0b0; font-size: 14.5px; line-height: 1.75; }
.pain-badge { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; margin-top: auto; padding: 9px 15px; font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: .02em; }
.pain-badge.is-purple { background: var(--accent); color: #fff; }
.pain-badge.is-lime { background: var(--lime); color: var(--ink); }

/* 4. 하이라이트 박스 + 본문 확대 + 아코디언 블랙 */
.hl-box { background: var(--ink); color: #fff; padding: 0 .16em; }
.ops-copy p { font-size: clamp(16px, 1.8vw, 18.5px); line-height: 1.9; }
.acc-item { background: var(--ink); border-color: var(--ink); }
.acc-item .acc-num { color: #8a8a8a; }
.acc-item .acc-name { color: #fff; }
.acc-item .acc-go { color: #8a8a8a; }
.acc-item.is-open { background: #fff; border-color: #cfcfcf; }
.acc-item.is-open .acc-num { color: var(--dim); }
.acc-item.is-open .acc-name { color: var(--ink); }

/* 5. 시스템 = ppt 프로세스 스타일 보조 (3D 삽입) */
.sys3d { width: min(240px, 62%); height: auto; margin-top: 20px; display: block; }

/* 6. BOX LINE 박스인박스 + 좌텍스트/우3D */
.bxwrap { background: var(--ink); padding: clamp(46px, 6vw, 84px) clamp(24px, 4.5vw, 68px); }
.bxwrap .section-tag { color: var(--lime); }
.bxwrap .section-heading { color: #fff; }
.bx-card { grid-template-columns: none; display: grid; }
@media (min-width: 768px) { .bx-card { grid-template-columns: 1.15fr .85fr; column-gap: 24px; align-items: center; } .bx-card .bx-txt { display: flex; flex-direction: column; gap: 13px; } }
.bx-cond { font-size: clamp(17px, 2vw, 22px); font-weight: 800; color: #fff; line-height: 1.5; }
.bx-media { margin: 0; width: 100%; max-width: 250px; justify-self: center; }
.bx-ctas { margin-top: 16px; }

/* 7. TARGET 블랙 카드 + 라임 아이콘 */
.tg-card { background: var(--ink); border-color: var(--ink); padding: 32px 30px; }
.tg-card .tg-title { color: #fff; }
.tg-card .tg-desc { color: #b0b0b0; font-size: 14.5px; line-height: 1.75; }
.tg-icon { border-color: var(--lime); }
.tg-icon svg { stroke: var(--lime); }
.tg-card .tg-num { color: #8f8f8f; }

/* 8. PROCESS: 블랙 원 + 퍼플 화살표 + 라이브 텍스트 */
.pc-step { background: var(--ink); border-color: var(--ink); }
.pc-step .n { color: #9a9a9a; }
.pc-step .w { color: #fff; }
.pc-arrow { color: var(--accent); font-weight: 700; }
.pc-col.reveal { transform: translateY(56px); }
.pc-col.reveal.is-in { transform: translateY(0); }
.proc-top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: end; }
.pc-live { font-size: clamp(18px, 2.1vw, 26px); font-weight: 700; color: var(--ink); line-height: 1.6; word-break: keep-all; opacity: 0; transform: translateY(14px); transition: opacity .4s ease, transform .4s ease; }
.pc-live.is-on { opacity: 1; transform: none; }
.pc-live .st { display: block; font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--accent); letter-spacing: .08em; margin-bottom: 10px; }
@media (max-width: 900px) { .proc-top { grid-template-columns: 1fr; } .pc-live { display: none; } }

/* 9. CTA 다크 패널 + 라임 / 버튼 규격 통일 + ↗ */
.ctab-panel { background: var(--ink); }
.ctab-panel .ctab-heading { color: #fff; }
.ctab-panel .micro5 { color: #999; }
.btn5, .btn5-ghost, .btn5-lime, .btn5-ghost-w, .btn5-inv, .btn5-ghost-p {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 28px; height: 56px; min-width: 210px; box-sizing: border-box;
  font-size: 15px; line-height: 1; text-align: center;
}
.b-arr { font-family: var(--font-mono); font-size: 15px; }

/* 10. FAQ 열림 상태 퍼플 */
.faq-item summary::after { transition: transform .25s ease, color .25s ease; }
.faq-item[open] summary::after { color: var(--accent); }
.faq-item[open] .faq-q-num { color: var(--accent); }

/* ==========================================================================
   V8 — 피드백 라운드 3 (폭 규격 / 퍼플 정리 / 아웃라인 카드 / 하이라이터 /
   아코디언 아웃라인 / 시스템 좌정렬 / 프로세스 퍼플 원 + 라이브 재배치)
   ========================================================================== */

/* 전역 폭: 헤더 1100 / 콘텐츠 1024 */
.container { max-width: 1024px; }
.navbar-inner { max-width: 1100px; margin: 0 auto; }

/* 퍼플 정리: 섹션 태그 = 박스 제거, 모노 텍스트만 */
.section-tag { background: none !important; padding: 0 !important; color: var(--dim) !important; }
.sec-dark .section-tag, .bxwrap .section-tag { color: #9a9a9a !important; }
.chip5.is-b { background: var(--ink); }

/* 1. 히어로 이미지 확대 */
.hero2-visual { padding: 0 clamp(8px, 2vw, 28px); }
.hero2-visual img { max-width: 470px; }

/* 2. TRUST: 그레이 복귀 + 상하 라인(콘텐츠 폭 내) */
#trust .trust-frame { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(48px, 6vw, 76px) 0; }
#trust .trust-head { color: var(--ink); }
#trust .tstat-num { color: var(--ink); }
#trust .tstat-label { color: var(--dim); }
#trust .mq-track img { filter: grayscale(1); opacity: .6; }

/* 3. PAIN: 아웃라인 카드 + 무채색 CTA(호버만) */
.pain-card { background: transparent; border: 1px solid #8f8f8f; }
.pain-card:hover { border-color: var(--ink); }
.pain-card .pain-title { color: var(--ink); }
.pain-card .pain-desc { color: var(--dim); }
.pain-tag { color: var(--dim); }
.pain-badge, .pain-badge.is-purple, .pain-badge.is-lime { background: none; color: var(--ink-soft); padding: 0; font-weight: 600; transition: color .2s; }
.pain-badge .b, .pain-badge span[aria-hidden] { transition: transform .25s; }
.pain-card:hover .pain-badge { color: var(--accent); }
.pain-card:hover .pain-badge span[aria-hidden] { transform: translateX(4px); }

/* 4. 하이라이터 강조 + 본문 좌정렬(텍스트 좌 / 이미지 우) */
.hl-mark { font-style: italic; background: linear-gradient(transparent 58%, rgba(125, 88, 253, .32) 0); padding: 0 .04em; }
.ops-grid { grid-template-columns: 1.15fr .85fr; align-items: center; }
.ops-copy { text-align: left; }

/* 아코디언: 기본 아웃라인, 호버 시 블랙, 열림 시 이미지 */
.acc-item { background: transparent; border: 1px solid #8f8f8f; }
.acc-item .acc-num { color: var(--dim); }
.acc-item .acc-name { color: var(--ink); }
.acc-item .acc-go { color: var(--dim); }
.acc-item:not(.is-open):hover { background: var(--ink); border-color: var(--ink); }
.acc-item:not(.is-open):hover .acc-num,
.acc-item:not(.is-open):hover .acc-go { color: #8a8a8a; }
.acc-item:not(.is-open):hover .acc-name { color: #fff; }

/* 5. 시스템: 좌측 통일 + 라벨 확대 (메인 페이지 한정) */
#design .process-step.is-flip { flex-direction: row; }
#design .process-label { font-size: clamp(18px, 2vw, 24px); font-weight: 800; color: var(--ink); }

/* 6. BOX LINE: 3D 확대 + 버튼 가로 + 카드 높이 동일 */
.bx-grid { align-items: stretch; }
.bx-card { height: 100%; }
.bx-media { max-width: 320px; }
.bx-ctas { flex-wrap: nowrap; }
.bx-ctas .btn5-lime, .bx-ctas .btn5-ghost-w { min-width: 0; height: 50px; padding: 0 20px; flex: none; font-size: 14px; }
@media (min-width: 768px) { .bx-card { grid-template-columns: 1fr .9fr; } }

/* 7. TARGET: 아웃라인 카드 */
.tg-card { background: transparent; border: 1px solid #8f8f8f; position: relative; }
.tg-card:hover { border-color: var(--ink); }
.tg-card .tg-title { color: var(--ink); }
.tg-card .tg-desc { color: var(--dim); }
.tg-card .tg-num { color: var(--accent); }

/* 8. PROCESS: 퍼플 아웃라인 원 + 라이브 텍스트 헤딩 아래 전체 폭 */
.pc-step { background: transparent; border: 2px solid var(--accent); }
.pc-step .n { color: var(--dim); }
.pc-step .w { color: var(--ink); }
.proc-top { display: block; }
.pc-live { margin-top: 32px; font-size: clamp(20px, 2.6vw, 34px); min-height: 2.6em; }
.pc-live .st { font-size: 14px; }

/* 9. REVIEW: 그레이 배경 + 화이트 카드 */
#review { background: transparent; }
#review .section-heading { color: var(--ink); }
#review .rev-sub { color: var(--dim); }
.rev-card { background: #fff; border: 1px solid #ddd; }
.rev-title { color: var(--ink); }
.rev-body { color: var(--dim); }
.rev-dur { color: var(--dim); border-color: #bbb; }
.rev-tag { color: var(--dim); }
.rev-tag.is-lime { background: var(--lime); color: var(--ink); }

/* 10. CTA: 섹션 전체 블랙 */
#cta.sec-dark .ctab-heading { color: #fff; }
#cta.sec-dark .micro5 { color: #999; }

/* ==========================================================================
   V9 — 피드백 라운드 4 (폭 복구 / 도트 라인 통일 / 태그 퍼플 복원 / 세로 아코디언
   / 시스템 워드 스왑 / 프로세스 스크롤 연동 / CTA 텍스처)
   ========================================================================== */

/* 폭 원상복구 (V8 오버라이드 무효화) */
.container { max-width: var(--container); }
.navbar-inner { max-width: var(--container); }

/* 태그 퍼플 박스 복원 (V8 무효화) */
.section-tag { background: var(--accent) !important; color: #fff !important; padding: 6px 12px !important; }

/* 가로 라인 = 세로 라인과 동일한 도트 스타일, 세로 라인 사이 꽉 채움 */
#trust .trust-frame { border-top: 1px dotted var(--line); border-bottom: 1px dotted var(--line); }
.rule-top { border-top: 1px dotted var(--line); }

/* 1. 히어로 이미지 확대 (복구된 폭 비율) */
.hero2-visual img { max-width: 560px; }

/* 2. 수치 접미사 축소 */
.tstat-num .sfx { font-size: .48em; font-style: normal; margin-left: 3px; font-weight: 600; }

/* 3. PAIN 태그 퍼플 텍스트 + 호버 연퍼플 */
.pain-tag { color: var(--accent); }
.pain-card:hover { background: rgba(125, 88, 253, .06); border-color: var(--accent); }

/* 4. 강조 = 퍼플 텍스트 (하이라이터 삭제) */
.hl-mark { font-style: italic; background: none; color: var(--accent); padding: 0; }
.em-acc { color: var(--accent); font-weight: 700; }
/* ops 이미지 칩 */
.ops-media { position: relative; }
.ops-media .chip5 { font-size: 11px; padding: 7px 11px; }
.ops-media .chip5.is-a { top: 6%; right: 0; }
.ops-media .chip5.is-b { bottom: 8%; left: 0; }

/* 아코디언 → 세로 리스트형 (행 56px 고정, 클릭 행만 확장) */
.acc { flex-direction: column; height: auto; gap: 8px; margin-top: 48px; }
.acc-item { flex: none; height: 56px; transition: height .5s cubic-bezier(.2, .7, .25, 1), background .25s, border-color .25s; }
.acc-item .acc-label { position: absolute; inset: 0 auto auto 0; width: 100%; height: 56px; padding: 0 52px 0 18px; flex-direction: row; align-items: center; gap: 14px; }
.acc-item .acc-go { top: 50%; transform: translateY(-50%); }
.acc-item .acc-name { font-size: 15px; }
.acc-item img { top: 56px; height: calc(100% - 56px); padding: 10px 20px 24px; object-fit: contain; }
.acc-item.is-open { flex: none; height: 480px; }
.acc-item.is-open .acc-go { transform: translateY(-50%) rotate(45deg); color: var(--accent); }
@media (max-width: 767px) { .acc-item.is-open { height: 340px; } }

/* 5. 시스템: 워드 스왑(한글 대형) + 상단 정렬 (메인 한정) */
#design .process-step { align-items: flex-start; }
#design .process-word { font-size: clamp(30px, 4.2vw, 54px); letter-spacing: -0.02em; word-break: keep-all; }
#design .process-label { font-family: var(--font-mono); font-size: 13px; font-weight: 600; color: var(--dim); letter-spacing: .1em; }

/* 6. 프로세스: 간격 축소 + 스크롤 연동 상태 */
.pc-live { margin-top: 22px; min-height: 2.4em; }
.pc-row { margin-top: 36px; }
.pc-arrow { color: var(--dim); font-weight: 400; }
.pc-col { opacity: 0; transform: translateY(46px); transition: opacity .5s ease, transform .5s ease; }
.pc-col.is-shown { opacity: 1; transform: none; }
.pc-col.is-shown .pc-step { border-color: rgba(125, 88, 253, .35); }
.pc-col.is-now .pc-step { border-color: var(--accent); }
.pc-col.reveal { transform: translateY(46px); } /* 구 reveal 무효화 겸용 */
.pc-col.reveal.is-in { transform: translateY(46px); opacity: 0; }
.pc-col.reveal.is-in.is-shown { opacity: 1; transform: none; }

/* 7. 리뷰 카드 라이트 그레이 */
.rev-card { background: #ebebe9; border-color: #cfcfcd; }

/* 8. CTA: 다크 도트 텍스처 + 태그 + 시그니처 */
#cta.sec-dark { background-color: var(--bg-dark); background-image: radial-gradient(circle, #343434 1px, transparent 1px); background-size: 22px 22px; }
#cta .section-tag { margin-bottom: 20px; }
#cta .ctab-heading { font-size: clamp(26px, 4vw, 48px); }
.ctab-sign { margin-top: 56px; font-family: var(--font-mono); font-size: 11.5px; letter-spacing: .22em; color: #777; }

/* ==========================================================================
   V10 — 라운드 5 (우측 라인 이격 / 라인 폭 교정 / 아코디언 가로 복귀 /
   시스템 정렬·확대 / 박스라인 배경 3D / 프로세스 무결성 / 라임 호버)
   ========================================================================== */

/* 히어로·OPS 이미지: 우측 세로 라인과 이격 */
.hero2-visual { padding: 0 32px 0 0; }
.ops-media { padding-right: 32px; }
.ops-media img { max-width: 340px; }

/* 구분 라인: 콘텐츠 폭 내부로 한정 (컨테이너 패딩 침범 금지) */
#trust .trust-frame { border: 0; }
.rule-line { border-top: 1px dotted var(--line); }
#trust .rule-line.is-top { margin-bottom: clamp(44px, 6vw, 68px); }
#trust .rule-line.is-bottom { margin-top: clamp(44px, 6vw, 68px); }
#review .rule-line { margin-bottom: clamp(56px, 7vw, 88px); }

/* 아코디언: 가로 6열 복귀 — 행 56px, 클릭 시 가로·세로 동시 확장 */
.acc { flex-direction: row; align-items: flex-start; gap: 8px; height: auto; }
.acc-item { flex: 1; height: auto; min-height: 56px; }
.acc-item .acc-label { position: static; height: auto; min-height: 56px; padding: 15px 44px 15px 16px; display: flex; flex-direction: row; align-items: center; gap: 12px; }
.acc-item .acc-name { font-size: 14.5px; line-height: 1.4; }
.acc-item .acc-go { top: 18px; transform: none; }
.acc-item img { display: none; position: static; width: 100%; height: 400px; padding: 4px 16px 22px; object-fit: contain; opacity: 1; transform: none; }
.acc-item.is-open { flex: 2.8; height: auto; }
.acc-item.is-open img { display: block; opacity: 1; }
.acc-item.is-open .acc-go { transform: rotate(45deg); }
@media (max-width: 767px) {
  .acc { flex-direction: column; }
  .acc-item.is-open img { height: 280px; }
}

/* 시스템: 워드 확대 + 좌우 상단 기준선 일치 + 본문 좌텍스트/우3D */
#design .process-word { font-size: clamp(38px, 5.2vw, 68px); }
#design .process-num { display: block; margin-bottom: 8px; }
#design .process-label { font-size: 15px; }
#design .process-body { display: grid; grid-template-columns: 1fr clamp(130px, 15vw, 190px); gap: 8px 32px; padding-top: clamp(34px, 3.8vw, 50px); }
#design .process-body .process-label { grid-column: 1; }
#design .process-body .process-desc { grid-column: 1; margin: 0; }
#design .process-body .sys3d { grid-column: 2; grid-row: 1 / span 2; width: 100%; margin: 0; align-self: start; }

/* 다크 섹션 태그 = 라임 텍스트 (박스 없음) */
.bxwrap .section-tag, .sec-dark .section-tag { background: transparent !important; color: var(--lime) !important; padding: 0 !important; }

/* 박스라인: 3D 배경화 + 텍스트 전면 + CTA 하단 정렬 통일 */
.bx-card { display: flex !important; flex-direction: column; gap: 13px; position: relative; overflow: hidden; min-height: 350px; }
.bx-card .bx-txt { display: flex; flex-direction: column; gap: 13px; height: 100%; position: relative; z-index: 1; max-width: 64%; }
.bx-media { position: absolute; right: -14px; top: 50%; transform: translateY(-50%); width: min(48%, 300px); max-width: none; margin: 0; z-index: 0; pointer-events: none; }
.bx-ctas { margin-top: auto; }
@media (max-width: 767px) {
  .bx-card .bx-txt { max-width: 100%; }
  .bx-media { position: static; transform: none; width: 70%; margin: 8px auto; order: 2; }
}

/* 타깃: WHY와 동일 호버 */
.tg-card:hover { background: rgba(125, 88, 253, .06); border-color: var(--accent); }

/* 프로세스: JS 없이도 노출 (연출은 js-anim 클래스가 켬) */
.pc-col { opacity: 1; transform: none; }
.pc-row.js-anim .pc-col { opacity: 0; transform: translateY(46px); transition: opacity .5s ease, transform .5s ease; }
.pc-row.js-anim .pc-col.is-shown { opacity: 1; transform: none; }

/* 라임 버튼 호버 강화 */
.btn5-lime:hover { background: #A9EC1C; filter: none; transform: translateY(-2px); }

/* ==========================================================================
   V11 — 라운드 6 (히어로 이격 확정 / 카운트업 재조정 / OPS 칩·300px /
   아코디언 하단 여백 / 박스 텍스트 좌정렬 / 프로세스 핀 스크롤)
   ========================================================================== */

/* 1. 히어로: 이미지 자체를 우측 라인에서 32px 이격 (padding 방식 폐기) */
.hero2-visual { padding: 0; }
.hero2-visual img { margin: 0 32px 0 auto; max-width: min(560px, calc(100% - 32px)); }

/* 4. OPS: 칩이 이미지 위에 겹치도록 + 높이 300px */
.ops-media { width: fit-content; margin: 0 auto; padding: 0; position: relative; }
.ops-media img { max-height: 300px; width: auto; max-width: 100%; }
.ops-media .chip5.is-a { top: 5%; right: -14px; }
.ops-media .chip5.is-b { bottom: 7%; left: -18px; }

/* 아코디언 하단 여백 */
.acc { margin-bottom: 32px; }

/* 6. 박스 카드 텍스트 좌정렬 */
.bx-card .bx-txt { text-align: left; align-items: flex-start; }

/* 7. PROCESS 핀 스크롤 (ppt trust 방식) */
.pc-live { margin-top: 12px; min-height: 40px; font-size: clamp(17px, 2vw, 25px); }
.pc-stage { height: 240vh; position: relative; }
.pc-pin { position: sticky; top: 96px; }
.pc-pin .pc-row { margin-top: 28px; }
@media (max-width: 900px) {
  .pc-stage { height: auto; }
  .pc-pin { position: static; }
  .pc-row.js-anim .pc-col { opacity: 1; transform: none; }
  .pc-live { display: none; }
}

/* ==========================================================================
   V12 — 라운드 7 (헤더 패딩 / 히어로 마진·갭 / 스탯 / SYSTEM 규격 /
   BOX LINE 그리드 확정 / PROCESS 핀 trust 방식)
   ========================================================================== */

/* 1. 헤더 CTA */
.nav-cta { padding-left: 22px; padding-right: 22px; }

/* 2. 히어로 */
.hero2-sub { margin-top: 0; }
.hero2-grid { gap: 0px; }
.hero2-visual { margin-right: 30px; }
.hero2-visual img { margin: 0 auto; max-width: 100%; }

/* 3. TRUST */
.tstat-label { font-size: 14px; }
.trust-stats { margin-bottom: 80px; }

/* 4. WHY → 박스라인 랜딩: 블랙 박스 상단이 헤더 바로 아래 */
#boxline { scroll-margin-top: 84px; }

/* 5. SYSTEM (메인 한정) */
#design .process-word { font-size: clamp(58px, 5.2vw, 68px); }
#design .process-step { display: grid; grid-template-columns: 6fr 5fr; gap: clamp(28px, 5vw, 40px); align-items: start; padding: clamp(44px, 6vw, 80px) 0; }
#design .process-body { grid-template-columns: 1fr 1fr; gap: 8px 8px; }
#design .process-body .sys3d { max-width: 220px; max-height: 220px; }

/* 6. BOX LINE — 좌텍스트/우이미지 그리드 확정 (배경화 폐기) */
.bxwrap .bx-card { display: grid !important; grid-template-columns: 1.15fr .85fr; column-gap: 24px; align-items: start; padding: 38px 50px 34px; min-height: 340px; overflow: visible; }
.bxwrap .bx-card .bx-txt { position: static; max-width: none; height: 100%; }
.bxwrap .bx-media { position: static; transform: none; width: 100%; max-width: 280px; justify-self: center; align-self: center; pointer-events: auto; }
@media (max-width: 767px) {
  .bxwrap .bx-card { grid-template-columns: 1fr; padding: 28px 24px; }
  .bxwrap .bx-media { max-width: 220px; margin: 8px auto 0; }
}

/* 7. PROCESS — 핀(헤딩 포함) + 원·화살표 순차 + 색 규칙(신규=라이트, 기존=퍼플) */
.pc-live { margin-top: 0; }
.pc-stage { height: 280vh; }
.pc-pin { position: sticky; top: 88px; padding-top: 8px; }
.pc-pin .section-heading { margin-bottom: 14px; }
.pc-row.js-anim .pc-arrow { opacity: 0; transform: translateY(30px); transition: opacity .4s ease, transform .4s ease; }
.pc-row.js-anim .pc-arrow.is-shown { opacity: 1; transform: none; }
.pc-row.js-anim .pc-col.is-shown .pc-step { border-color: rgba(125, 88, 253, .38); }
.pc-row.js-anim .pc-col.is-done .pc-step { border-color: var(--accent); }
@media (max-width: 900px) {
  .pc-stage { height: auto; }
  .pc-pin { position: static; }
  .pc-row.js-anim .pc-arrow { opacity: 1; transform: none; }
}
@media (max-width: 767px) {
  /* 세로 스택 레이아웃: js-anim/is-shown의 transform:none이 rotate(90deg)를 덮지 않도록 재고정 */
  .pc-row.js-anim .pc-arrow,
  .pc-row.js-anim .pc-arrow.is-shown { transform: rotate(90deg); }
}

/* ==========================================================================
   V13 — 라운드 8 (OPS 마진 / 아코디언 이미지 맞춤형 / PROCESS 라이브 롤링·완주 /
   REVIEW 3배 루프 / 버튼 호버 화살표 회전)
   ========================================================================== */

/* OPS 마진 */
#design > .container > .section-heading { margin-bottom: 0; }
.ops-grid { margin-top: 0; margin-bottom: 70px; }

/* 아코디언 v3 — 닫힘: 번호 위/이름 아래 2단, 열림: 블랙 라벨바 + 이미지 폭 맞춤 */
.acc { align-items: flex-start; }
.acc-item { min-height: 64px; }
.acc-item .acc-label { min-height: 64px; padding: 11px 40px 11px 14px; flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; }
.acc-item .acc-name { font-size: 14px; line-height: 1.35; }
.acc-item .acc-go { top: 12px; right: 12px; }
.acc-item.is-open { flex: 0 0 auto !important; width: auto; max-width: min(52%, 520px); }
.acc-item.is-open .acc-label { flex-direction: row; align-items: center; gap: 10px; background: var(--ink); min-height: 0; padding: 13px 16px; }
.acc-item.is-open .acc-num { color: #8a8a8a; }
.acc-item.is-open .acc-name { color: var(--lime); font-size: 15px; }
.acc-item.is-open img { height: 360px; width: auto; max-width: 100%; padding: 14px 14px 18px; margin: 0 auto; }
.acc-item.is-open .acc-go { top: auto; bottom: 16px; right: 16px; transform: rotate(-90deg); color: var(--ink); background: rgba(255,255,255,.85); padding: 4px 6px; }
@media (max-width: 767px) {
  .acc-item.is-open { max-width: 100%; width: 100%; }
  .acc-item.is-open img { height: auto; max-height: 300px; width: 100%; object-fit: contain; }
}

/* PROCESS: 헤딩 마진 + 라이브 롤링 */
.pc-pin .section-heading { margin-bottom: 40px; }
.pc-live { overflow: hidden; }
.pc-live .roll { display: block; transform: translateY(0); opacity: 1; transition: transform .45s cubic-bezier(.2,.7,.3,1), opacity .45s ease; }
.pc-live .roll.is-out { transform: translateY(-60%); opacity: 0; transition-duration: .25s; }
.pc-live .roll.is-in-up { transform: translateY(60%); opacity: 0; transition: none; }

/* REVIEW: 3배 세트 · -1/3 루프 */
.rev-track { animation-name: mq5c; }
@keyframes mq5c { to { transform: translateX(calc(-100% / 3)); } }

/* 버튼: 라임 상승 삭제 + 호버 시 ↗ → 회전 */
.btn5-lime:hover { transform: none; }
.b-arr { display: inline-block; transition: transform .25s ease; }
.btn5:hover .b-arr, .btn5-ghost:hover .b-arr, .btn5-lime:hover .b-arr,
.btn5-ghost-w:hover .b-arr, .btn5-inv:hover .b-arr { transform: rotate(45deg); }

/* ==========================================================================
   V14 — 라운드 9 (TRUST 타이포 vw / 아코디언 부드러운 전환·라벨 좌정렬 /
   프로세스 라이브 복구)
   ========================================================================== */

/* TRUST 타이포: 고정 한계 제거(vw), 라벨 16px — 모바일 하한 별도 */
.trust-head { font-size: 2.4vw; }
.tstat-num { font-size: 3.6vw; }
.tstat-label { font-size: 16px; }
@media (max-width: 767px) {
  .trust-head { font-size: 18px; }
  .tstat-num { font-size: 30px; }
  .tstat-label { font-size: 13px; }
}

/* 아코디언: flex-basis 트랜지션(부드러움) + 열림 라벨 좌정렬 2단 + ↖ 라벨 우측 */
.acc-item { transition: flex-basis .55s cubic-bezier(.25,.8,.3,1), flex-grow .55s cubic-bezier(.25,.8,.3,1), background .25s, border-color .25s; }
.acc-item.is-open { flex: 0 0 380px !important; width: auto; max-width: none; }
.acc-item.is-open .acc-label { flex-direction: column; align-items: flex-start; justify-content: center; gap: 3px; padding: 12px 44px 12px 16px; }
.acc-item.is-open .acc-go { top: 14px; right: 14px; bottom: auto; background: none; color: #cfcfcf; padding: 0; transform: rotate(-90deg); }
.acc-item.is-open img { width: 100%; height: auto; max-height: 430px; padding: 12px 14px 16px; }
@media (max-width: 767px) { .acc-item.is-open { flex: none !important; width: 100%; } }

/* 프로세스 라이브 텍스트 복구: 부모 상시 노출, 롤링은 .roll 담당 */
.pc-live { opacity: 1 !important; transform: none !important; }

/* ==========================================================================
   V15 — 라운드 10 (아코디언 다크 열림·부드러운 닫힘 / TRUST 타이포 확정 /
   화살표 규격 통일)
   ========================================================================== */

/* 아코디언 열림: 카드 전체 잉크 배경 */
.acc-item.is-open { background: var(--ink); border-color: var(--ink); }
.acc-item.is-open img { background: transparent; }

/* TRUST 타이포 확정 */
.trust-head { font-size: clamp(26px, 2.5vw, 36px); }
.tstat-num { font-size: clamp(40px, 3.6vw, 50px); }
.tstat-label { font-size: clamp(12px, 1.2vw, 16px); }
@media (max-width: 767px) {
  .trust-head { font-size: 20px; }
  .tstat-num { font-size: 32px; }
}

/* 포트폴리오 받아보기(아웃라인 버튼) 화살표 호버 회전 */
.btn-outline .b-arr { display: inline-block; transition: transform .25s ease; }
.btn-outline:hover .b-arr { transform: rotate(45deg); }

/* ==========================================================================
   V16 — 라운드 11 (+/× 토글 / 자연스러운 개폐 / 히어로·OPS 종횡비 예약)
   ========================================================================== */
.hero2-visual img, .ops-media img { height: auto; }

/* 아코디언: + 버튼 (라벨 내부, 우측 고정) — 열림 시 45° 회전 = × */
.acc-item .acc-label { position: relative; }
.acc-item .acc-go { position: absolute; top: 12px; right: 14px; bottom: auto; left: auto;
  font-size: 19px; font-weight: 400; line-height: 1; color: var(--dim); background: none; padding: 0;
  transform: none; transition: transform .35s ease, color .25s ease; }
.acc-item:hover .acc-go { color: var(--accent); transform: none; }
.acc-item.is-open .acc-go { transform: rotate(45deg); color: var(--lime); top: 14px; right: 16px; }
.acc-item.is-open:hover .acc-go { transform: rotate(45deg); }

/* 개폐 애니메이션: 배경 잉크↔그레이 페이드 + 이미지 높이 접힘 */
.acc-item { transition: flex-basis .55s cubic-bezier(.25,.8,.3,1), flex-grow .55s cubic-bezier(.25,.8,.3,1),
  background .5s ease, border-color .5s ease; }
.acc-item img { max-height: 0; opacity: 0; overflow: hidden;
  transition: max-height .5s cubic-bezier(.25,.8,.3,1), opacity .35s ease; }
.acc-item.is-open img { opacity: 1; }

/* ==========================================================================
   V17 — 라운드 12 (아코디언 높이 안정화 / 패딩 포함 접힘 / 푸터 박스 앵커)
   ========================================================================== */

/* 열린 카드 이미지: 고정 높이 + border-box(패딩 포함 접힘 → 막판 덜컥 제거) */
.acc-item img { box-sizing: border-box; }
.acc-item.is-open img { height: 430px; object-fit: contain; }

/* 컨테이너: 열림 상태 동안 높이 고정 유지, 전체 닫힘 시에만 부드럽게 축소 */
.acc { transition: min-height .55s cubic-bezier(.25,.8,.3,1); min-height: 0; }
.acc.has-open { min-height: 526px; }
@media (max-width: 767px) { .acc.has-open { min-height: 0; } }

/* ==========================================================================
   V18 — 라운드 13 (아코디언 축 속도 분리 / 프로세스 지연 시작 / 리빌 완화)
   ========================================================================== */

/* 아코디언: y축(높이)을 x축(폭)보다 빠르게 → 닫힘 겹침 제거 */
.acc-item img { transition: max-height .34s cubic-bezier(.4,0,.2,1), opacity .26s ease; }
.acc-item.is-open img { transition: max-height .5s cubic-bezier(.25,.8,.3,1), opacity .3s ease .08s; }
.acc { transition: min-height .6s cubic-bezier(.25,.8,.3,1) .06s; }

/* 프로세스: 진입 여유 확보(스테이지 상단 여백) + 초기 비노출 */
.pc-stage { height: 320vh; }
.pc-pin { top: 108px; }
.pc-row.js-anim .pc-col:not(.is-shown),
.pc-row.js-anim .pc-arrow:not(.is-shown) { visibility: hidden; }
.pc-live .roll:empty { opacity: 0; }

/* 전역 리빌: 더 느리고 부드럽게 */
.reveal { transition: opacity .95s cubic-bezier(.22,.7,.25,1), transform .95s cubic-bezier(.22,.7,.25,1); }
.pc-row.js-anim .pc-col { transition: opacity .7s ease, transform .7s cubic-bezier(.22,.7,.25,1); }
.pc-row.js-anim .pc-arrow { transition: opacity .55s ease, transform .55s cubic-bezier(.22,.7,.25,1); }

/* ==========================================================================
   V19 — 아코디언 이미지 높이 제어 단일화 (height 고정 제거 · 패딩 0)
   ========================================================================== */
.acc-item img { padding-top: 0; padding-bottom: 0; padding-left: 0; padding-right: 0; }
.acc-item.is-open img { height: auto; max-height: none; width: 100%; object-fit: contain; }
.acc.has-open { min-height: 470px; }
@media (max-width: 767px) { .acc.has-open { min-height: 0; } }

/* ==========================================================================
   V20 — 이미지 레이아웃 예약 (첫 클릭 위치 오차 근본 차단)
   ========================================================================== */
img { height: auto; }
.sys3d { width: 100%; max-width: 220px; aspect-ratio: 1 / 1; object-fit: contain; }
.hero2-visual img, .ops-media img, .bx-media img { aspect-ratio: 1 / 1; object-fit: contain; }
.mq-track img { height: 26px; width: auto; }

/* ==========================================================================
   V22 — 프로세스 단순화 (라이브 텍스트 제거 · 고정 서브카피 · 스크롤 축소)
   ========================================================================== */
.pc-note { margin-top: 6px; font-size: clamp(15px, 1.7vw, 19px); color: var(--dim); word-break: keep-all; }
.pc-stage { height: 150vh; }
.pc-row { margin-top: 44px; }
@media (max-width: 900px) { .pc-stage { height: auto; } }

/* ==========================================================================
   V23 — 프로세스 헤딩 마진을 전역 섹션 헤딩 규격으로
   ========================================================================== */
.pc-pin .section-heading { margin-bottom: clamp(48px, 6vw, 96px); }

/* ==========================================================================
   V24 — ppt 헤더를 메인과 동일 높이·구성으로 (현재 페이지 표시 포함)
   ========================================================================== */
.nav-link.is-current { color: var(--ink); font-weight: 600; }
.nav-link.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--accent); }

/* ==========================================================================
   V25 — ppt 헤더 높이를 메인과 동일하게 (구조는 원본 유지)
   메인: padding 36 + nav-cta 40 = 76px / ppt: menu-btn min-height 40 → 76px
   ========================================================================== */
@media (min-width: 768px) {
  body.is-ppt .menu-btn { min-height: 40px; }
}

/* ==========================================================================
   V26 — ppt 헤더 예외: 데스크톱에서도 상태표시·MENU 버튼 노출
   (960px+ 규칙은 메인의 인라인 네비 전용 — ppt에는 적용하지 않음)
   ========================================================================== */
@media (min-width: 960px) {
  body.is-ppt .menu-btn { display: flex; }
  body.is-ppt .nav-status { display: flex; }
}

/* ==========================================================================
   V27 — ppt 메뉴 선착순 문구 점멸 / 헤더 높이 정밀 통일
   ========================================================================== */
.menu-side-note.is-blink { display: flex; align-items: center; gap: 8px; animation: noteBlink 1.6s ease-in-out infinite; }
.blink-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); flex: none; }
@keyframes noteBlink { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@media (prefers-reduced-motion: reduce) { .menu-side-note.is-blink { animation: none; } }

/* 헤더 높이 정밀 통일: 두 페이지 모두 내부 요소 40px 고정 → 36+40 = 76px */
@media (min-width: 768px) {
  body.is-ppt .menu-btn { min-height: 40px; height: 40px; }
  body.is-ppt .nav-status { min-height: 40px; }
  .nav-cta { display: inline-flex; align-items: center; height: 40px; padding-top: 0; padding-bottom: 0; }
  .navbar-inner { min-height: 40px; }
}

/* ==========================================================================
   V28 — ppt 자산 배치: 그레이 박스(ph-panel) 프레임 안에 이미지 삽입
   ========================================================================== */
.ph-panel.has-img > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  padding: clamp(14px, 1.4vw, 20px);
  z-index: 1;
  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.14));
}
/* 문서·슬라이드 실물은 여백을 더 크게 */
.ph-panel.has-img.is-doc > img {
  padding: clamp(10px, 2.6vw, 25px);
  filter: brightness(0.92) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.14));
}
/* 라벨·브라우저 바는 이미지 위로 */
.ph-panel.has-img .ph-label { position: relative; z-index: 2; }
.ph-panel.has-img .ph-browser-bar { position: relative; z-index: 2; }
/* 이미지가 들어간 패널은 질감 오버레이 완화 */
.ph-panel.has-img::after { opacity: .25; }
.ph-panel.has-img.is-doc::after { display: none; }
.ph-panel.has-img.ph-mag::before { display: none; }

/* ppt 패널 내 칩 (메인 히어로 chip5 재사용) */
.ph-panel .ph-chip { position: absolute; top: 10%; right: 10%; z-index: 3; animation: float5 5s ease-in-out infinite; }
@media (max-width: 767px) { .ph-panel .ph-chip { font-size: 10px; padding: 6px 9px; } }

/* ==========================================================================
   V29 — Tally 임베드 프레임 (그레이 아웃라인)
   ========================================================================== */
.tally-frame { border: 1px solid var(--line); background: transparent; padding: clamp(14px, 2.4vw, 28px); }
.tally-frame iframe { display: block; width: 100%; border: 0; }

/* ==========================================================================
   V30 — 진단 리포트 3장 평행 겹침 스택 (회전 없음 · 타 자산과 동일 필터)
   ========================================================================== */
.ph-panel.has-stack { position: relative; overflow: hidden; }
.rp-stack { position: absolute; inset: 0; display: block; z-index: 1; }
.rp-stack .rp {
  position: absolute;
  top: 50%;
  height: 78%;
  width: auto;
  transform: translateY(-50%);
  /* 실물 문서와 동일한 밝기·그림자 */
  filter: brightness(0.92) drop-shadow(0 8px 18px rgba(0, 0, 0, 0.14));
}
/* 뒤 → 앞 순서로 우측에서 좌측으로 겹침 (평행, 회전 0) */
/* 뒤(3p) 왼쪽 → 앞(1p) 오른쪽 : 1페이지가 맨 위·오른쪽에서 온전히 노출 */
.rp-stack .rp.is-3 { left: 12%; z-index: 1; }
.rp-stack .rp.is-2 { left: 29%; z-index: 2; }
.rp-stack .rp.is-1 { left: 46%; z-index: 3; }
@media (max-width: 767px) {
  .rp-stack .rp { height: 72%; }
  .rp-stack .rp.is-3 { left: 12%; }
  .rp-stack .rp.is-2 { left: 28%; }
  .rp-stack .rp.is-1 { left: 44%; }
}

/* ==========================================================================
   V31 — ppt CTA 화살표(메인과 동일) / OPTION_01 무료 샘플 조합 스택
   ========================================================================== */
.btn .b-arr, .btn-outline .b-arr { display: inline-block; transition: transform .25s ease; }
.btn:hover .b-arr, .btn-outline:hover .b-arr { transform: rotate(45deg); }

/* 무료 샘플 조합 — 시안(Frame_9) 좌표 그대로. 패널 안에 정사각 무대를 만들어
   패널 비율에 상관없이 동일한 구성이 유지되도록 함 */
.ph-panel.is-fs { overflow: hidden; }
.fs-stack {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  height: 92%;
  aspect-ratio: 1 / 1;
  max-width: 96%;
  display: block;
  z-index: 1;
}
.fs-stack .fs {
  position: absolute;
  background: #fff;
  filter: brightness(0.97);
  box-shadow: 0 8px 22px rgba(0, 0, 0, .15);
}
/* 리포트 3장 (A4 세로) — 상단, 좌→우 계단식, 아래는 슬라이드에 가려짐 */
.fs-stack .rp3 { width: 44%; top: 4%;  left: 11%; z-index: 1; }
.fs-stack .rp2 { width: 44%; top: 6%;  left: 28%; z-index: 2; }
.fs-stack .rp1 { width: 44%; top: 8%;  left: 45%; z-index: 3; }
/* 슬라이드 2장 (16:9) — 하단, 앞 레이어 */
.fs-stack .sl2 { width: 79%; top: 38%; left: 4%;  z-index: 4; }
.fs-stack .sl1 { width: 75%; top: 50%; left: 20%; z-index: 5; }
/* 블랙 라벨 — 칩보다 작게 */
.fs-tag {
  position: absolute;
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: clamp(7px, 0.72vw, 10px);
  font-weight: 700;
  letter-spacing: .1em;
  padding: 4px 9px;
  line-height: 1;
  white-space: nowrap;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .2);
}
.fs-tag.is-report { top: 9%;  right: 8%;  z-index: 6; }
.fs-tag.is-sample { top: 51%; right: 5%;  z-index: 7; }
@media (max-width: 767px) {
  .fs-tag { padding: 3px 6px; font-size: 7.5px; }
}

/* 이미지 스택은 라벨(ph-label) 아래 레이어로 */
.ph-panel.has-stack .ph-label,
.ph-panel.has-img .ph-label { position: relative; z-index: 10; }

/* ppt 스티키 바 등 풀폭 CTA */
.btn5.is-full { width: 100%; }

/* ==========================================================================
   V32 — OPTION_03 디자인 업그레이드 (좌 BEFORE 2장 / 우 AFTER 2장 · 겹침 없음)
   ========================================================================== */
.ph-panel.is-du { overflow: hidden; }
.du-stack {
  position: absolute;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  align-content: center;
  justify-items: center;
  gap: clamp(8px, 1.4vw, 16px) clamp(10px, 1.8vw, 20px);
  padding: clamp(16px, 2.6vw, 30px);
  z-index: 1;
}
.du-stack .du {
  position: static;
  width: 100%;
  height: auto;
  background: #fff;
  box-shadow: 0 6px 16px rgba(0, 0, 0, .14);
}
/* 좌: 흑백 원본 2장 (상·하) */
.du-stack .bw1 { grid-column: 1; grid-row: 1; filter: brightness(0.94); }
.du-stack .bw2 { grid-column: 1; grid-row: 2; filter: brightness(0.94); }
/* 우: 컬러 완성본 2장 (상·하) */
.du-stack .up1 { grid-column: 2; grid-row: 1; }
.du-stack .up2 { grid-column: 2; grid-row: 2; }
/* 라벨 — 각 열 상단 */
.fs-tag.is-before { position: absolute; top: 4%; left: 6%;  z-index: 4; background: #6b6b6b; }
.fs-tag.is-after  { position: absolute; top: 4%; right: 6%; z-index: 5; background: var(--accent); }

/* ==========================================================================
   V33 — service-block 2열화 (텍스트 4 : 이미지 6) · 이미지 프레임 4:3 통일
   ========================================================================== */
/* 좌측 칼럼: copy 래퍼 안에 head + body 세로 배치 (단일 행) */
/* 번호 칸 + 내용 칸 2열: 제목 박스와 본문이 같은 좌측 기준선에 정렬 */
.service-copy {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: clamp(16px, 2.5vw, 32px);
  row-gap: clamp(12px, 1.4vw, 18px);
  align-self: start;
}
.service-copy .service-head { display: contents; }
.service-copy .service-num { grid-column: 1; grid-row: 1; }
.service-copy .service-title-box { grid-column: 2; grid-row: 1; }
.service-copy .service-body { grid-column: 2; grid-row: 2; }
@media (max-width: 600px) {
  .service-copy { grid-template-columns: 1fr; }
  .service-copy .service-num,
  .service-copy .service-title-box,
  .service-copy .service-body { grid-column: 1; grid-row: auto; }
}
.service-block .service-media { align-self: center; }

/* 이미지 프레임 4:3 통일 */
.service-media .ph-panel { aspect-ratio: 4 / 3; height: auto; min-height: 0; }

@media (max-width: 900px) {
  .service-block { grid-template-columns: 1fr; }
  .service-block .service-head,
  .service-block .service-body,
  .service-block .service-media { grid-column: 1; grid-row: auto; }
  .service-block .service-media { margin-top: clamp(20px, 3vw, 28px); }
}

/* ==========================================================================
   FOOTER LEGAL LINKS (v30-0 추가 — 기존 푸터 규칙은 건드리지 않음)
   ========================================================================== */
.footer-legal {
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--dim);
}
.footer-legal a {
  font-weight: 600;
  color: var(--ink-soft);
  text-decoration: none;
}
.footer-legal a:hover { color: var(--accent); }

@media screen and (max-width: 479px) {
  /* word-break 미지정 — 링크 라벨이 중간에서 잘리지 않도록 자연 줄바꿈만 허용 */
  .footer-legal { font-size: 11px; line-height: 1.9; }
}

/* ==========================================================================
   TALLY 폼 아웃라인 제거 — 테두리 없이 본문에 그대로 얹히도록
   (기존 style.css:2554 규칙은 그대로 두고 여기서만 해제)
   ========================================================================== */
.tally-frame { border: 0; padding: 0; }

/* ==========================================================================
   V30-1 — 메인(index) 모바일 1차 정리 (≤767px 전용)
   ppt 페이지는 아래 셀렉터(#design, .hero2, .acc, .ops-grid) 미사용 — 영향 없음
   ========================================================================== */
@media (max-width: 767px) {
  /* 1. 히어로 퍼플 박스(DESIGN OPS STUDIO) 축소 */
  .hero2 .section-tag { font-size: 11px !important; padding: 5px 10px !important; }

  /* 2·3. 히어로 텍스트 + CTA 중앙정렬 */
  .hero2-grid > div:first-child { text-align: center; }
  .hero2-ctas { justify-content: center; }

  /* 4. 히어로 3D 이미지 + 떠있는 칩 숨김 (모바일: 텍스트·CTA 1화면 완결) */
  .hero2-visual { display: none; }

  /* 5. 아코디언 행 풀폭 통일 (데스크톱용 flex-start가 세로모드에 새던 것 복구) */
  .acc { align-items: stretch; }

  /* 6-a. OPS 그리드(카피+3D) 1열 스택 */
  .ops-grid { grid-template-columns: 1fr; gap: 28px; }

  /* 6-b. 시스템 스텝 4개 1열 스택 + 제목 축소 */
  #design .process-step { grid-template-columns: 1fr; gap: 20px; }
  #design .process-word { font-size: clamp(34px, 9.5vw, 40px); }
  #design .process-body { grid-template-columns: 1fr; gap: 12px; padding-top: 20px; }
  #design .process-body .sys3d { grid-column: 1; grid-row: auto; width: 140px; }
}

/* ==========================================================================
   V30-2 — 메인(index) 모바일 2차 정리 (≤767px 전용)
   .br-m: 모바일에서만 나타나는 줄바꿈
   ========================================================================== */
.br-m { display: none; }

@media (max-width: 767px) {
  .br-m { display: inline; }

  /* 섹션 헤딩: 줄간 확보 (기본 1.02가 모바일 두 줄에서 답답함) */
  .section-heading { line-height: 1.25; }

  /* 히어로: solve 상단 여백 (헤딩 크기는 V30-8 동기화 블록이 담당) */
  .hero2-solve { margin-top: 40px; }

  /* TRUST: 헤드 24px + 통계 가로 → 세로 스택 + 폰트 확대 */
  .trust-head { font-size: 24px; }
  .trust-stats { flex-direction: column; gap: 26px; }
  .tstat-num { font-size: 46px; }
  .tstat-label { font-size: 14px; margin-top: 4px; }

  /* DESIGN OPS: 헤딩 → 이미지 → 설명 순서, 설명은 문맥 자연 줄바꿈 */
  .ops-grid .ops-media { order: -1; }
  .ops-media img { width: 280px; height: 280px; max-width: none; max-height: none; }
  .ops-copy br { display: none; }

  /* 아코디언: JS가 전 항목에 is-open 부여(기존 오픈 디자인) — x표 숨김 + 라벨바 색 명시 */
  .acc-item { cursor: default; }
  .acc-item .acc-go { display: none; }
  .acc-item.is-open .acc-label { background: var(--ink); }
  .acc-item.is-open .acc-num { color: #8a8a8a; }
  .acc-item.is-open .acc-name { color: var(--lime); }

  /* 시스템 스텝: 3D 이미지를 우하단 대형 워터마크 배경으로 */
  #design .process-step { position: relative; overflow: hidden; }
  #design .process-body { position: static; }
  #design .process-head,
  #design .process-label,
  #design .process-desc { position: relative; z-index: 1; }
  #design .process-head { top: 0; } /* 베이스 sticky의 top:100px가 relative로 전환되며 내려앉던 겹침 수정 */
  #design .process-body .sys3d { position: absolute; right: -30px; bottom: 8px; width: 200px; max-width: none; opacity: .60; z-index: 0; pointer-events: none; }

  /* 박스라인: 블랙 컨테이너 풀블리드 + 카드 좌우 패딩 20px */
  #boxline-sec .bxwrap { margin-left: calc(-1 * var(--pad-x)); margin-right: calc(-1 * var(--pad-x)); padding-left: 20px; padding-right: 20px; }
  .bxwrap .bx-card { padding: 28px 20px; text-align: center; }
  /* 카드 내부: 조건문 → 이름 → 이미지 → 설명 → 배지 → CTA 순서 */
  .bx-card .bx-txt { display: contents; }
  .bx-cond { order: 1; }
  .bx-name { order: 2; }
  .bxwrap .bx-media { order: 3; position: static; transform: none; width: 210px; max-width: 210px; margin: 2px auto; }
  .bx-desc { order: 4; }
  .bx-badge { order: 5; }
  .bx-ctas { order: 6; margin-top: 8px; justify-content: center; flex-wrap: nowrap; }

  /* 프로세스 5단계: 좌 원형 / 우 설명 그리드, 화살표는 원형 축에 중앙정렬 */
  .pc-row { align-items: stretch; }
  .pc-col { display: grid; grid-template-columns: 1fr 1fr; align-items: center; column-gap: 18px; text-align: left; }
  .pc-step { width: 140px; min-width: 140px; justify-self: center; }
  .pc-step .n { font-size: 13px; }
  .pc-step .w { font-size: 16.5px; }
  .pc-desc { text-align: left; max-width: none; }
  .pc-arrow { margin: 0; width: calc((100% - 18px) / 2); text-align: center; transform: rotate(90deg); }

  /* 푸터 법적 링크 중앙정렬 */
  .footer-legal { display: block; text-align: center; }
}

/* ==========================================================================
   V30-10 — 메인 히어로 헤딩: ppt 동기화 중 웨이트(600)만 유지
   데스크톱: 크기·줄간·자간 기존값 복원 / 모바일: 크기 44px 유지, 줄간 기존 복원
   ========================================================================== */
.hero2-heading { font-weight: 600; }
@media screen and (max-width: 767px) {
  .hero2-heading { font-size: 44px; }
}

/* ==========================================================================
   V30-12 — CTA 헤딩: 웨이트 600 (웹·모바일 공통), 모바일 크기 24px
   ========================================================================== */
.ctab-heading { font-weight: 600; }
@media screen and (max-width: 767px) {
  #cta .ctab-heading { font-size: 23px; line-height: 1.8; }
  /* CTA 버튼 2개: 좌우 그리드 균등 분할 */
  #cta .ctab-ctas { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 60px; }
  #cta .ctab-ctas .btn5-lime,
  #cta .ctab-ctas .btn5-ghost-w { min-width: 0; padding-left: 12px; padding-right: 12px; white-space: nowrap; }
}

/* ==========================================================================
   V30-14 — 터치 기기(hover 불가 입력): 탭 후 호버 상태 고정(sticky hover) 무효화
   호버 시 값을 평상시 값으로 재고정 — 데스크톱(hover: hover)은 기존 효과 그대로
   ========================================================================== */
@media (hover: none) {
  /* 버튼: 색·트랜스폼 원복 */
  .btn5:hover { background: var(--accent); }
  .btn5-ghost:hover { border-color: #9a9a9a; }
  .btn5-lime:hover { background: var(--lime); filter: none; transform: none; }
  .btn5-ghost-w:hover { border-color: #666; }
  .btn5-inv:hover { transform: none; }
  .btn5-ghost-p:hover { border-color: rgba(255, 255, 255, .65); }
  .btn-primary:hover { background: var(--accent); border-color: var(--accent); transform: none; }
  .btn-outline:hover { color: var(--ink); border-color: var(--ink); }

  /* 화살표(↗) 회전 원복 */
  .btn5:hover .b-arr, .btn5-ghost:hover .b-arr, .btn5-lime:hover .b-arr,
  .btn5-ghost-w:hover .b-arr, .btn5-inv:hover .b-arr,
  .btn:hover .b-arr, .btn-outline:hover .b-arr { transform: none; }

  /* 카드 호버 원복 */
  .pain-card:hover { background: transparent; border-color: #8f8f8f; }
  .tg-card:hover { background: transparent; border-color: #8f8f8f; }
  .pain-card:hover .pain-badge { color: var(--ink-soft); }
  .pain-card:hover .pain-badge.is-purple { color: #fff; }
  .pain-card:hover .pain-badge.is-lime { color: var(--ink); }
  .pain-card:hover .pain-badge span[aria-hidden] { transform: none; }
}

/* ==========================================================================
   V30-16 — 히어로 CTA 버튼 2개 폭 통일 (웹·모바일 공통)
   inline-grid + 1fr 트랙: 두 버튼 모두 '더 넓은 쪽' 폭으로 균등
   ========================================================================== */
.hero2-ctas { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; }
.hero2-ctas .btn5, .hero2-ctas .btn5-ghost { text-align: center; }
@media screen and (max-width: 767px) {
  .hero2-ctas { grid-auto-flow: row; } /* 모바일: 세로 스택, 폭은 동일 유지 */
}

/* ==========================================================================
   V30-17 — 푸터 그리드 비율 (웹 전용): QUICK LINKS 2 : SOCIALS 1 : E-MAIL 1
   992px 이하는 기존 2열/2×2 모바일 규칙 그대로
   ========================================================================== */
@media screen and (min-width: 992px) {
  .footer-grid { grid-template-columns: 2fr 1fr 1fr; }
}

/* ==========================================================================
   V30-18 — 이메일 복사 토스트 (브라우저 alert 대체, 사이트 디자인)
   ========================================================================== */
.copy-toast {
  position: fixed;
  left: 50%;
  bottom: 32px;
  transform: translateX(-50%) translateY(10px);
  background: var(--ink);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.05em;
  padding: 13px 22px;
  white-space: nowrap; /* 항상 한 줄 노출 */
  max-width: calc(100vw - 24px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .22);
  z-index: 10000; /* 풀스크린 메뉴 위에서도 보이도록 */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}
.copy-toast.is-on { opacity: 1; transform: translateX(-50%) translateY(0); }
@media screen and (max-width: 767px) {
  .copy-toast { font-size: 11.5px; letter-spacing: 0.03em; padding: 11px 16px; }
}
.copy-toast .t-mark { color: var(--lime); margin-right: 9px; font-weight: 700; }
.copy-toast .t-mark.is-fail { color: var(--accent); }