/*
Theme Name: groment
Theme URI: https://groment.local
Author: groment
Description: groment 마케팅 에이전시 커스텀 테마
Version: 1.0.0
Text Domain: groment
*/

/* ==========================================================================
   0. Reset & Variables
   ========================================================================== */
:root{
  /* GROMENT Brand Color Palette — 1안. Deep Forest Green + Charcoal + Warm Stone */
  --color-primary: #183c32;       /* Deep Forest */
  --color-primary-light: #2a5c4d;
  --color-primary-dark: #1e2222;  /* Charcoal Black */
  --color-white: #f8f6f1;         /* Soft Ivory */
  --color-bg: #f8f6f1;            /* Soft Ivory */
  --color-bg-alt: #efece4;
  --color-text: #1e2222;          /* Charcoal Black */
  --color-muted: #6f6a60;
  --color-border: #e2ded3;
  --color-stone: #c8b9a6;         /* Warm Stone */
  --color-stone-light: #e4d9c8;
  --color-mist: #d8d6d0;          /* Mist Gray */
  --font-base: 'Pretendard', -apple-system, BlinkMacSystemFont, 'Malgun Gothic', sans-serif;
  /* GNB(로고·메인 메뉴)만 Anton, 그 외 전부(강조 요소 포함) Pretendard.
     기존에 강조 요소들이 참조하던 --font-accent는 이제 --font-base와 동일 —
     한 곳만 바꾸면 되도록 GNB 전용 변수를 따로 뒀다. */
  --font-accent: var(--font-base);
  --font-gnb: 'Anton', var(--font-base);
  --container: 100%;
  --radius: 8px;
}

*,*::before,*::after{ box-sizing:border-box; }
::selection{ background:var(--color-primary); color:var(--color-white); }
html.no-lenis{ scroll-behavior:smooth; }
html.lenis, html.lenis body{ height:auto; }
html.lenis.lenis-smooth{ scroll-behavior:auto; }
body{
  margin:0;
  display:flex;
  flex-direction:column;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  font-family:var(--font-base);
  color:var(--color-text);
  background:var(--color-bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* 한글 단락이 어절(공백) 단위로만 줄바꿈되게 하는 전역 기본값 — 개별
     컴포넌트마다 word-break:keep-all을 따로 챙기지 않아도 모바일 폭에서
     단어 중간이 아니라 단어 사이에서 깔끔하게 떨어진다. 넘칠 걱정이 있는
     긴 영문/URL 등은 overflow-wrap:break-word가 안전망 역할을 한다. */
  word-break:keep-all;
  overflow-wrap:break-word;
}
/* 콘텐츠가 적은 페이지(예: 글 없는 인사이트)에서도 footer가 화면 하단에 붙도록 —
   header는 position:fixed로 흐름 밖에 있어 이 flex 레이아웃엔 영향 없다. */
#main{ flex:1 0 auto; }
/* 시각적으로는 숨기되 스크린리더·검색엔진에는 그대로 노출되는 표준 유틸리티
   (예: 히어로처럼 완전히 비주얼 위주라 화면엔 안 보이지만 SEO상 필요한 h1). */
.screen-reader-text{
  position:absolute !important;
  width:1px; height:1px;
  padding:0; margin:-1px;
  overflow:hidden;
  clip:rect(0,0,0,0);
  white-space:nowrap;
  border:0;
}
img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
h1,h2,h3,h4,p{ margin:0; }
button{ font-family:inherit; cursor:pointer; }
input,textarea,select{ font-family:inherit; font-size:1rem; }

.container{
  max-width:var(--container);
  margin:0 auto;
  padding:0 24px;
}
.section{ padding:96px 0; }
.section--alt{ background:var(--color-bg-alt); }
@media (max-width:640px){
  .section{ padding:64px 0; }
}
.section--dark{ background:var(--color-primary); color:var(--color-white); }

.section-head{ margin-bottom:56px; max-width:640px; }
.section-title{
  font-family:var(--font-accent);
  font-size:clamp(1.7rem, 3vw, 2.5rem);
  font-weight:700;
  letter-spacing:-0.02em;
  line-height:1.3;
}
.section-desc{
  margin-top:16px;
  color:var(--color-muted);
  font-size:1.05rem;
}
.section--dark .section-desc{ color:var(--color-stone-light); }

.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:14px 28px;
  border-radius:999px;
  font-weight:600;
  font-size:.95rem;
  border:1px solid transparent;
  transition:all .2s ease;
}
.btn--primary{ background:var(--color-primary); color:var(--color-white); }
.btn--primary:hover{ background:var(--color-primary-light); }
.btn--outline{ border-color:var(--color-stone); color:var(--color-stone); }
.btn--outline:hover{ background:var(--color-stone); color:var(--color-white); }
.btn--light{ background:var(--color-white); color:var(--color-primary); }
.btn--light:hover{ background:var(--color-mist); }

/* 전역 플로팅 CTA — footer(.site-footer)가 화면에 들어오면 main.js가 is-hidden을 붙여 숨긴다. */
.floating-cta{
  position:fixed;
  right:28px;
  bottom:28px;
  z-index:50;
  opacity:1;
  visibility:visible;
  transform:translateY(0);
  transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
}
.floating-cta.is-hidden{
  opacity:0;
  visibility:hidden;
  transform:translateY(16px);
  pointer-events:none;
}
.floating-cta__badge{
  position:relative;
  display:flex; align-items:center; justify-content:center;
  width:80px; height:80px;
  border-radius:50%;
  background:var(--color-primary);
  transition:transform .3s;
}
.floating-cta:hover .floating-cta__badge{ transform:scale(1.06); }
.floating-cta__ring{
  position:absolute; inset:0; width:100%; height:100%;
  animation:floating-cta-spin 9s linear infinite;
}
.floating-cta__ring text{
  fill:var(--color-white);
  font-family:var(--font-accent);
  font-size:11px;
  font-weight:700;
  letter-spacing:.08em;
}
.floating-cta__icon{
  position:relative; z-index:1;
  color:var(--color-white);
  font-size:22px;
  line-height:1;
}
@keyframes floating-cta-spin{
  from{ transform:rotate(0deg); }
  to{ transform:rotate(360deg); }
}
@media (max-width:768px){
  .floating-cta{ right:16px; bottom:16px; }
  .floating-cta__badge{ width:76px; height:76px; }
  .floating-cta__ring text{ font-size:9px; }
  .floating-cta__icon{ font-size:18px; }
}

/* ==========================================================================
   1. Header (플로팅)
   ========================================================================== */
body{ padding-top:0; }
.site-header{
  width: 100%;
  position:fixed; top:0; left:0; z-index:100;
  margin:0 auto;
  /* max-width:calc(var(--container) + 32px); */
  /* background:rgba(248,246,241,.78); */
  /* backdrop-filter:blur(14px); */
  /* -webkit-backdrop-filter:blur(14px); */
  /* border:1px solid rgba(248,246,241,.6); */
  /* border-radius:999px; */
  /* box-shadow:0 10px 30px rgba(30,34,34,.1); */
  /* transition:transform .4s cubic-bezier(.4,0,.2,1), background .3s ease, box-shadow .3s ease; */
}
.site-header.is-hidden{ transform:translateY(-140%); }
.site-header.is-scrolled{
  /* background:rgba(248,246,241,.92); */
  /* box-shadow:0 10px 24px rgba(30,34,34,.14); */
}
.site-header .container{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
  padding:0 28px;
}
/* 플로팅 헤더가 문서 흐름에서 빠지므로, 히어로가 없는 페이지는 상단 여백 확보 */
.page-banner{ padding-top:156px; }
.site-logo{ font-family:var(--font-gnb); font-size:1.4rem; font-weight:800; letter-spacing:-0.03em; color:var(--color-primary); }
.site-logo img{ display:block; height:32px; width:auto; }
/* 어두운 배경(홈/works)에서는 흰 로고, 나머지는 기본(primary) 로고 */
.site-logo img.site-logo__img--white{ display:none; }
.nav-on-dark .site-logo img.site-logo__img--dark{ display:none; }
.nav-on-dark .site-logo img.site-logo__img--white{ display:block; }

.main-nav ul{ display:flex; gap:40px; }
.main-nav a{
  font-family:var(--font-gnb);
  font-size:1.4rem; font-weight:400; letter-spacing:.03em; color:var(--color-primary);
  position:relative; padding:4px 0;
}
.nav-on-dark .main-nav a{ color:var(--color-white); }
.main-nav a:hover{ color:var(--color-stone); }
/* 모바일 전체화면 메뉴 팝업 전용 하단 영역(회사소개서 받기/개인정보처리방침/SNS) —
   데스크톱 가로 메뉴에는 필요 없으니 기본은 숨기고 880px 이하에서만 보인다. */
.main-nav__extra{ display:none; }
.nav-toggle{
  display:none; width:32px; height:32px; border:none; background:none;
  flex-direction:column; justify-content:center; gap:6px;
}
.nav-toggle span{ display:block; height:2px; background:var(--color-primary); border-radius:2px; transition:transform .3s ease, opacity .2s ease; }
.nav-on-dark .nav-toggle span{ background:var(--color-white); }
/* "=" → "X" — 두 줄을 박스 중앙으로 모아 45도씩 반대로 돌려 X를 만든다
   (박스 32px, 줄 간격 6px 기준으로 각 줄 중심을 4px씩 이동). */
.nav-toggle[aria-expanded="true"] span:first-child{ transform:translateY(4px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:last-child{ transform:translateY(-4px) rotate(-45deg); }

/* 팝업이 떠 있는 동안 배경 스크롤 잠금 — overflow:hidden만으로는 iOS Safari에서
   뒤 배경이 터치로 밀리는 경우가 있어, body를 현재 스크롤 위치에 position:fixed로
   고정한다(top은 JS가 -스크롤위치로 설정). width:100%는 fixed로 인해 body 너비가
   줄어들면서 레이아웃이 좁아지는 걸 막기 위함. */
body.nav-open{ overflow:hidden; position:fixed; width:100%; }

@media (max-width: 880px){
  .site-header .container{ padding:0 14px; }
  /* 헤더 바는 배경 없이 투명하게 두고, 팝업 하나(.main-nav)가 뷰포트 전체(inset:0)를
     덮는다. 헤더에 따로 배경을 칠하면 두 배경이 경계에서 살짝 갈라져 보이는 문제가
     있었다. 로고는 DOM상 .main-nav보다 앞이라 그냥 두면 팝업에 가려지므로, 로고와
     닫기 버튼에 z-index를 줘서 팝업 위에 항상 보이게 한다. */
  .site-logo{ position:relative; z-index:2; }
  .nav-toggle{ position:relative; z-index:2; }
  /* 팝업이 열려 있는 동안엔 페이지와 무관하게 항상 어두운(primary) 배경 위이므로
     로고/닫기 버튼도 항상 흰색으로 보이게 한다. */
  body.nav-open .site-logo__img--dark{ display:none; }
  body.nav-open .site-logo__img--white{ display:block; }
  body.nav-open .nav-toggle span{ background:var(--color-white); }
  .main-nav{
    position:fixed; inset:0; z-index:1; background:var(--color-primary);
    display:flex; flex-direction:column; align-items:flex-start; justify-content:center;
    gap:48px; overflow-y:auto;
    padding: 96px 1.5rem 32px;
    transform:translateY(-16px); opacity:0; visibility:hidden;
    transition:transform .3s ease, opacity .3s ease, visibility .3s;
  }
  .main-nav.is-open{ transform:translateY(0); opacity:1; visibility:visible; }
  .main-nav ul{ flex-direction:column; align-items:flex-start; gap:15px; }
  /* 흰 배경 카드가 아니라 전체 화면 다크 팝업이라, 데스크톱과 같은 흰 글자를 그대로 쓴다 */
  .main-nav a{ font-size:3.3rem; color:var(--color-white); }
  .nav-toggle{ display:flex; }
  .header-cta .btn span{ display:none; }

  /* 메뉴 아래 회사소개서 받기 / 개인정보처리방침 / SNS — footer-sns와 같은 다크
     배경 톤이라 아이콘 스타일은 거의 그대로 재사용(justify-content만 좌측 정렬로).
     위의 ".main-nav ul"(flex-direction:column)과 ".main-nav a"(font-size:3.8rem)가
     클래스+엘리먼트 조합이라 명시도가 이 블록의 단일 클래스 선택자보다 높아서,
     그냥 .main-nav__sns / .main-nav__profile-link 식으로만 적으면 조용히
     무시된다 — 전부 .main-nav를 앞에 붙여 명시도를 그 이상으로 올린다. */
  .main-nav .main-nav__extra{ display:flex; flex-direction:column; align-items:flex-start; gap:10px; }
  .main-nav a.main-nav__profile-link{ font-size:1rem; color:rgba(248,246,241,.6); letter-spacing:.02em; padding: 0 ;}
  .main-nav a.main-nav__privacy-link{ font-size:1rem; color:rgba(248,246,241,.6); letter-spacing:.02em; padding: 0 ;}
  .main-nav .main-nav__sns{
    display:flex; flex-direction:row; flex-wrap:nowrap;
    gap:15px; justify-content:flex-start; margin-top: 10px;
  }
  .main-nav .main-nav__sns a{
    width:38px; height:38px; border-radius:50%; border:1px solid rgba(248,246,241,.3);
    display:flex; align-items:center; justify-content:center; transition:background .2s ease;
  }
  .main-nav .main-nav__sns a:hover{ background:var(--color-white); }
  .main-nav .main-nav__sns a img{ width:18px; height:18px; object-fit:contain; }
}

/* ==========================================================================
   2. Hero
   ========================================================================== */
.hero{
  position:relative;
  min-height:100vh;
  min-height:100svh;
  min-height:100dvh;
  display:flex; align-items:center;
  color:var(--color-white);
  background-color:var(--color-primary);
  background-size:cover; background-position:center;
  overflow:hidden;
}
.hero-video{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:0; pointer-events:none;
}
.hero-overlay{
  position:absolute; inset:0; z-index:1;
  /* 영상이 최대한 잘 보이도록 가운데는 거의 투명, 헤더/스크롤 인디케이터가 걸리는
     위아래 가장자리만 살짝 어둡게 */
  background:linear-gradient(180deg,
    rgba(30,34,34,.4) 0%,
    rgba(30,34,34,.08) 16%,
    rgba(30,34,34,.05) 78%,
    rgba(30,34,34,.7) 100%);
}
.hero-inner{ position:relative; z-index:2; }
.hero-eyebrow{
  font-family:var(--font-accent);
  font-size:.9rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase;
  color:var(--color-stone); margin-bottom:20px;
}
.hero-title{
  font-family:var(--font-accent);
  font-size:clamp(2.2rem, 5.2vw, 4.2rem);
  font-weight:800; letter-spacing:-0.03em; line-height:1.15;
  max-width:900px;
}
.hero-subtitle{
  margin-top:24px; font-size:1.15rem; color:var(--color-stone-light); max-width:560px;
}
.hero-actions{ margin-top:40px; display:flex; gap:16px; flex-wrap:wrap; }
.hero-scroll{
  position:absolute; bottom:32px; left:50%; transform:translateX(-50%); z-index:2;
  font-size:.75rem; letter-spacing:.14em; text-transform:uppercase; color:var(--color-stone); font-weight: 600;
  display:flex; flex-direction:column; align-items:center; gap:8px;
}
.hero-scroll::after{
  content:''; width:1px; height:36px; background:var(--color-stone);
  animation:scrollLine 1.8s infinite;
}
@keyframes scrollLine{
  0%{ transform:scaleY(0); transform-origin:top; }
  50%{ transform:scaleY(1); transform-origin:top; }
  51%{ transform-origin:bottom; }
  100%{ transform:scaleY(0); transform-origin:bottom; }
}
/* service 히어로 — 홈 히어로와 같은 SCROLL 표시를 재사용하되, 배경이 밝은 톤이라
   stone 대신 primary 색으로 바꿔서 잘 보이게 한다. */
.service-hero-scroll{ color:var(--color-primary); }
.service-hero-scroll::after{ background:var(--color-primary); }

/* service 히어로 문구 — 캔버스 위, 화면 좌/우 끝에 줄마다 다른 top으로 흩어져
   있다가 뷰포트에 들어오면 각자 자기 쪽 가장자리에서 살짝 밀려 들어오며
   순서대로(줄마다 transition-delay) 나타난다. .service-hero-copy 자체에
   is-visible을 한 번만 토글하고(JS), 각 줄은 nth-of-type로 지연 시간만 다르게
   준다 — 굳이 줄마다 옵저버를 만들지 않아도 스태거 효과가 난다. */
.service-hero-copy{ position:absolute; inset:0; z-index:2; pointer-events:none; }
.service-hero-line{
  position:absolute;
  width:clamp(300px,44vw,560px);
  font-size:clamp(2.3rem,4.8vw,3.1rem); line-height:1.3; color:var(--color-muted);
  word-break:keep-all;
  opacity:0;
  transition:opacity .8s ease, transform .8s ease;
}
.service-hero-line--left{ left:6%; text-align:left; transform:translateX(-36px); }
.service-hero-line--right{ right:6%; text-align:right; transform:translateX(36px); }
.service-hero-copy.is-visible .service-hero-line{ opacity:1; transform:translateX(0); }
.service-hero-copy.is-visible .service-hero-line:nth-of-type(1){ top: 20%; transition-delay:0.5s; }
.service-hero-copy.is-visible .service-hero-line:nth-of-type(2){ top: 40%; transition-delay:1s; }
.service-hero-copy.is-visible .service-hero-line:nth-of-type(3){ top: 60%; transition-delay:1.5s; }
.service-hero-copy.is-visible .service-hero-line:nth-of-type(4){ top: 80%; transition-delay:2.5s; }
.service-hero-line strong{ color:var(--color-primary); font-weight:700; }
@media (max-width:640px){
  .service-hero-line{
    left:6%; right:auto; width:80%; text-align:left;
    font-size:clamp(1.4rem,6vw,1.9rem);
    transform:translateY(16px);
  }
  .service-hero-copy.is-visible .service-hero-line{ transform:translateY(0); }
  .service-hero-copy.is-visible .service-hero-line:nth-of-type(1){ top: 45%;}
  .service-hero-copy.is-visible .service-hero-line:nth-of-type(2){ top: 50%;}
  .service-hero-copy.is-visible .service-hero-line:nth-of-type(3){ top: 55%;}
  .service-hero-copy.is-visible .service-hero-line:nth-of-type(4){ top: 60%;}
}

/* 3-0-1. 리더십 위 "3개 원 → 1개" 스크롤 머지 섹션. 텍스트 없이 원 3개(선만,
   배경 없음)만 두고, .service-pillars__stage는 .growth-stage와 동일하게 CSS만으로
   sticky pin되어 JS/GSAP 없이도(모션 최소화 등) 항상 화면에 고정 노출된다.
   좌(PERFORMANCE)·우(DATA INSIGHT) 원이 가운데(CREATIVE)로 모여드는 이동은 JS가
   --merge(스크롤 진행도 0~1)를 섹션에 세팅해 transform으로 반영한다. --merge-fill은
   그중 마지막 30%(0.7~1) 구간만 0→1로 다시 매핑한 값 — 원이 거의 다 겹친 순간에만
   그라디언트 채움과 "Growth" 글자가 빠르게 나타나게 하는 용도(선 채로 있다가 합쳐질
   때만 색이 확 바뀌는 느낌). 라벨은 반대로 이 값만큼 옅어져 사라진다. */
.service-pillars{
  position:relative;
  height:220vh; height:220svh; height:220dvh;
  background:var(--color-bg-alt);
  --merge-fill: clamp(0, calc((var(--merge, 0) - 0.7) * 3.3334), 1);
}
.service-pillars__stage{
  position:sticky; top:0;
  height:100vh; height:100svh; height:100dvh;
  display:flex; align-items:center; justify-content:center;
  overflow:hidden; padding:24px;
}

/* 원 지름은 다시 vw로 계산하되(예전 느낌의 큰 사이즈로), 이동거리를 독립된
   vw 값이 아니라 "지름 × 1.05"로 지름에서 직접 파생시킨다. 예전 버그는 지름
   (48vw, 340~520px)과 이동거리(48vw, 180~580px)가 서로 다른 폭에서 각자
   최댓값에 도달해 그 사이 구간(약 700~1400px)에서 어긋난 게 원인이었다 —
   이동거리를 지름의 배수로 묶으면 최댓값 도달 시점이 항상 같이 움직여
   어긋날 수가 없다. 안전 조건은 "반지름 + 이동거리 ≤ 컨테이너 폭의 절반"이고,
   지름 = a·vw, 이동거리 = 지름×r 이라 할 때 이 조건은 a ≤ 50/(r+0.5)로
   정리된다. r=1.05일 때 안전 상한은 약 32.3vw — 여유를 두고 30vw를 쓴다
   (1568px 폭 기준 지름 약 470px로 이전에 "괜찮았다"던 크기에 가깝다). 최솟값을
   두지 않아(min()에 최댓값만 있음) 화면이 아무리 좁아져도 이 비율이 깨지지
   않는다 — 특정 breakpoint 없이 모든 화면 폭에서 항상 안전하다. */
.service-pillars__circles{
  position:relative; width:100%; max-width:1200px;
  --circle-d: min(30vw, 520px);
  height:var(--circle-d);
}
.service-pillars__circle{
  position:absolute; top:50%; left:50%;
  width:var(--circle-d); aspect-ratio:1/1;
  border-radius:50%;
  border:2px solid var(--color-primary);
  display:flex; align-items:center; justify-content:center;
}
.service-pillars__circle[data-circle="1"]{
  transform:translate(calc(-50% - var(--circle-d) * 1.05 * (1 - var(--merge,0))), -50%);
  z-index:1;
}
.service-pillars__circle[data-circle="2"]{
  transform:translate(-50%,-50%);
  z-index:3;
}
.service-pillars__circle[data-circle="3"]{
  transform:translate(calc(-50% + var(--circle-d) * 1.05 * (1 - var(--merge,0))), -50%);
  z-index:2;
}
.service-pillars__circle-fill{
  position:absolute; inset:-2px; border-radius:50%;
  background:linear-gradient(135deg, var(--color-stone-light) 0%, var(--color-primary-light) 48%, var(--color-primary) 100%);
  opacity:var(--merge-fill);
}
/* 라벨/"GROWTH SYSTEM" 글자 크기도 뷰포트가 아니라 원 지름(--circle-d)에서
   직접 파생시킨다 — 이전엔 vw 기반 clamp를 따로 튜닝해서 PC 폭에서는 원
   지름과 얼추 맞았지만, 원 지름 공식이 바뀌거나 화면이 작아져 원이 줄어들면
   글자는 그대로거나 clamp 최솟값에 걸려 원보다 훨씬 커져버렸다. 원 지름에
   비례한 배수로 정하면 화면 크기와 무관하게 항상 원 안에 맞는 비율을 유지한다. */
.service-pillars__label{
  position:relative; z-index:1;
  /* 원 지름에 비례하되, 원이 아주 작아지는 화면(모바일)에서 글자가 읽을 수
     없을 만큼 작아지지 않도록 max()로 최소 크기를 같이 둔다 — 아주 작은
     화면에서는 글자가 원 폭을 살짝 넘칠 수 있지만, 안 보이는 것보다 낫다. */
  font-size:max(.8rem, calc(var(--circle-d) * 0.05)); font-weight:800; letter-spacing:.02em;
  text-transform:uppercase; color:var(--color-primary); padding:0 12px; text-align:center;
  opacity:calc(1 - var(--merge-fill));
}
.service-pillars__merge-label{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  z-index:4; width:100%; text-align:center;
  font-family:var(--font-gnb); font-size:max(1.3rem, calc(var(--circle-d) * 0.16)); line-height:1.15;
  letter-spacing:.02em; text-transform:uppercase; color:var(--color-white);
  opacity:var(--merge-fill);
  pointer-events:none;
}

@media (max-width:640px){
  /* 원 지름·위치·글자 크기 모두 이제 --circle-d에서 비례로 파생되어 어떤
     화면에서도 화면 밖으로 나가거나 원보다 글자가 커지지 않는다(위 주석
     참고) — 아래는 세로 스크롤 길이만 모바일에 맞게 줄인다. */
  .service-pillars{ height:200vh; height:200svh; height:200dvh; }
}

/* ==========================================================================
   3. Services (/service/ 페이지)
   ========================================================================== */
/* 3-0. 히어로 — growth-canvas-v5.js(도면 와이어프레임, 밝은 톤)를 그대로 재사용.
   .growth-section/.growth-stage/#growth-gl 이름은 vendor 스크립트가
   closest('.growth-section')/getElementById('growth-gl')로 직접 찾으므로 그대로 둬야
   한다 — 홈페이지와 같은 페이지에 동시에 존재하지 않아 id가 겹쳐도 문제없다.
   배경만 v5의 밝은 팔레트(#eceee9)에 맞게 오버라이드한다(기본은 v4용 검정). */
.growth-stage.service-growth-stage{ background:#eceee9; }

/* 3-0-2. OUR APPROACH — LEADERSHIP 아래, GMS 위. 01~05를 카드 그리드가 아니라
   세로 로드맵(여정) 타임라인으로 배치한다. 왼쪽에 세로선(.service-approach__line)이
   흐르고, 그 위에 진행도 만큼 채워지는 .service-approach__progress가 겹쳐진다.
   바로 아래 GMS 섹션이 01~05 숫자 카운팅을 쓰고 있어 중복되지 않도록, 노드는
   숫자 없이 작은 점 마커로만 두고(.service-approach__dot는 정렬용 40px 슬롯,
   실제 보이는 점은 ::after) 타이틀 텍스트가 시각적 무게를 대신 가져간다.
   스크롤하면서 각 노드를 지나칠 때마다 is-passed가 붙어 점이 채워지고 본문이
   또렷해지는 식으로 "순차적으로 도달하는" 여정 느낌을 낸다(main.js의 SERVICE
   스텝퍼와 같은 top<markerY 판정 방식, 다만 지나간 노드는 스포트라이트처럼
   하나만 켜지는 게 아니라 전부 누적으로 켜진 채 유지된다). */
.service-approach{ background:var(--color-bg); }
.service-approach__eyebrow{
  display:block; margin-bottom:24px;
  font-size:.85rem; font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-stone);
}
.service-approach__headline{
  font-size:clamp(1.6rem,4vw,3rem); line-height:1.35; font-weight:700;
  letter-spacing:-0.5px; color:var(--color-text); max-width:820px;
}
.service-approach__headline-accent{ color:var(--color-stone); }

.service-approach__roadmap{ position:relative; margin-top:72px; max-width:760px; }
.service-approach__line{
  position:absolute; left:19px; top:8px; bottom:8px; width:2px;
  background:var(--color-border);
}
.service-approach__progress{
  position:absolute; left:19px; top:8px; width:2px; height:0;
  background:var(--color-primary);
  transition:height .3s ease;
}
.service-approach__step{
  position:relative;
  display:flex; gap:24px; align-items:center;
  padding:22px 0;
}
.service-approach__step:first-child{ padding-top:0; }
.service-approach__step:last-child{ padding-bottom:0; }
.service-approach__dot{
  position:relative; z-index:1; flex:none;
  width:40px; height:40px;
  display:flex; align-items:center; justify-content:center;
}
.service-approach__dot::after{
  content:''; width:16px; height:16px; border-radius:50%;
  background:var(--color-bg); border:2px solid var(--color-border);
  transition:background-color .4s ease, border-color .4s ease,
             transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.service-approach__step.is-passed .service-approach__dot::after{
  background:var(--color-primary); border-color:var(--color-primary);
  transform:scale(1.15);
  box-shadow:0 0 0 6px rgba(24,60,50,.12);
}
.service-approach__step-body{ opacity:.5; transition:opacity .4s ease; }
.service-approach__step.is-passed .service-approach__step-body{ opacity:1; }
.service-approach__step-title{ font-size:1.25rem; font-weight:700; line-height:1.4; color:var(--color-text); }

/* 마지막 노드 — 숫자 점 대신 체크 아이콘 하나로 여정의 도착지를 표시(같은 40px
   슬롯이라 위 점 마커들과 선이 정확히 일직선으로 이어진다). */
.service-approach__dot--final{
  width:40px; height:40px; border-radius:50%;
  background:var(--color-bg); border:2px solid var(--color-border); color:var(--color-muted);
  transition:background-color .4s ease, border-color .4s ease, color .3s ease,
             transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s ease;
}
.service-approach__dot--final::after{ content:none; }
.service-approach__dot--final svg{ width:18px; height:18px; }
.service-approach__step--final.is-passed .service-approach__dot--final{
  background:var(--color-primary); border-color:var(--color-primary); color:var(--color-white);
  transform:scale(1.08);
  box-shadow:0 0 0 6px rgba(24,60,50,.12);
}
.service-approach__step--final{ padding-top:32px; align-items:flex-start; }
.service-approach__step--final .service-approach__dot{ margin-top:2px; }
.service-approach__punchline{ font-size:1.4rem; font-weight:700; line-height:1.5; color:var(--color-text); }

@media (max-width:640px){
  .service-approach__roadmap{ margin-top:48px; }
  .service-approach__step{ gap:18px; padding:16px 0; }
}

/* 3-1. GROWTH MANAGEMENT SYSTEM — 진단→실행→확장→다음 가설 5단계 */
.service-gms{ background:var(--color-primary); color:var(--color-white); }
.service-gms__eyebrow{
  display:block; margin-bottom:32px;
  font-size:.85rem; font-weight:300; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-stone);
}
.service-gms__headline{
  font-size:clamp(1.6rem,4vw,3rem); line-height:1.35; font-weight:700;
  letter-spacing:-0.5px; color:var(--color-white); max-width:920px;
}
.service-gms__headline-accent{ color:var(--color-stone); }

.service-gms__list{ margin-top:80px; }
.service-gms__item{
  display:grid; grid-template-columns:180px 1fr; gap:40px; align-items:start;
  padding:56px 0; border-top:1px solid rgba(200,185,166,.25);
}
.service-gms__list .service-gms__item:last-child{ border-bottom:1px solid rgba(200,185,166,.25); }
.service-gms__number{
  font-family:var(--font-accent); font-size:5.5rem; line-height:.8; font-weight:700; letter-spacing:-2px;
  color:rgba(200,185,166,.25);
}
.service-gms__label{
  margin:0 0 20px; font-size:.85rem; font-weight:300; letter-spacing:.15em; text-transform:uppercase;
  color:var(--color-stone);
}
.service-gms__title{ margin:0 0 20px; font-size:1.7rem; line-height:1.4; font-weight:700; letter-spacing:-0.5px; color:var(--color-white); }
.service-gms__desc{ margin:0; font-size:1.05rem; line-height:1.8; color:rgba(248,246,241,.7); }

@media (min-width:768px){
  .service-gms__number{ font-size:7.5rem; }
  .service-gms__title{ font-size:1.9rem; }
}
@media (max-width:640px){
  .service-gms__list{ margin-top:48px; }
  .service-gms__item{ grid-template-columns:1fr; gap:12px; padding:36px 0; }
  .service-gms__number{ font-size:3.4rem; }
}

.service-accordion-section{ padding-top:72px; }
.service-accordion{ border-top:1px solid var(--color-border); }
.service-item{ border-bottom:1px solid var(--color-border); }

.service-item__header{
  position:relative; display:block; width:100%; overflow:hidden;
  background:none; border:none; padding:0; margin:0; cursor:pointer; text-align:left;
}
.service-item__header-bg{
  position:absolute; inset:0; background:var(--color-primary);
  transform:scaleY(0); transform-origin:top;
  transition:transform .6s cubic-bezier(.16,1,.3,1);
}
.service-item.is-open .service-item__header-bg,
.service-item__header:hover .service-item__header-bg{ transform:scaleY(1); }

.service-item__header-row{
  position:relative; display:grid; grid-template-columns:1fr auto; align-items:center; gap:16px;
  padding:32px 10px;
}
@media (min-width:768px){ .service-item__header-row{ padding:48px 20px; } }

.service-item__heading{ display:flex; flex-direction:column; gap:10px; min-width:0; }
.service-item__title{
  font-family:var(--font-gnb); text-transform:uppercase; letter-spacing:-0.01em;
  font-size:clamp(1.8rem,6vw,3.4rem); line-height:.95; color:var(--color-text);
  transition:color .4s ease;
}
.service-item__desc{ font-size:1rem; font-weight:600; color:var(--color-text); transition:color .4s ease; }
@media (min-width:768px){ .service-item__desc{ font-size:1.15rem; } }
.service-item.is-open .service-item__title,
.service-item__header:hover .service-item__title,
.service-item.is-open .service-item__desc,
.service-item__header:hover .service-item__desc{ color:var(--color-white); }

.service-item__icon{
  position:relative; flex:none; width:44px; height:44px; border-radius:50%;
  border:1px solid var(--color-border); color:var(--color-text);
  display:flex; align-items:center; justify-content:center;
  transition:all .5s cubic-bezier(.16,1,.3,1); transform:rotate(0deg);
}
@media (min-width:768px){ .service-item__icon{ width:56px; height:56px; } }
.service-item__icon span{ position:absolute; background:currentColor; }
.service-item__icon span:first-child{ width:16px; height:1.5px; }
.service-item__icon span:last-child{ width:1.5px; height:16px; }
.service-item.is-open .service-item__icon{ transform:rotate(45deg); border-color:var(--color-white); color:var(--color-white); }
.service-item__header:hover .service-item__icon{ border-color:var(--color-white); color:var(--color-white); }

.service-item__panel{ display:grid; grid-template-rows:0fr; transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1); }
.service-item.is-open .service-item__panel{ grid-template-rows:1fr; }
.service-item__panel-inner{ overflow:hidden; }

.service-item__points{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:16px 32px;
  padding:0 4px 40px;
}
@media (min-width:768px){ .service-item__points{ padding:0 8px 56px; } }
.service-item__point{
  display:flex; align-items:baseline; gap:10px;
  padding-top:16px; border-top:1px solid var(--color-border);
  font-size:1rem; color:var(--color-muted);
}
.service-item__point-index{ font-size:.75rem; font-weight:700; color:var(--color-primary); }

/* 3-2. 대표 소개(LEADERSHIP) — about 페이지를 더 이상 쓰지 않기로 하면서, 거기 있던
   대표 실적/강점 소개 콘텐츠 중 텍스트 콘텐츠만 옮겨왔다(사진은 자리표시용 스톡
   이미지라 가져오지 않음, 아이콘도 외부 폰트 대신 사이트에서 이미 쓰는 체크 svg 재사용).
   좌측 텍스트(intro) / 우측 카드(aside: 통계+강점)로 분리한 2단 레이아웃.
   .container가 사이트 전역에서 max-width:100%(사실상 풀와이드)라, 넓은 화면에서
   6:4 그리드를 그대로 늘리면 두 컬럼 사이 여백이 지나치게 커진다 — LEADERSHIP과
   그 아래 OUR APPROACH/GMS/서비스 아코디언 섹션은 컨테이너 폭을 좁혀 가운데로
   모은다(사이트 다른 섹션은 그대로 풀와이드 유지). */
.service-ceo .container,
.service-approach .container,
.service-gms .container,
.service-accordion-section .container{ max-width:1280px; }
.service-ceo__body{
  display:grid; grid-template-columns:minmax(0,6fr) minmax(0,4fr);
  gap:24px; align-items:center;
}
.service-ceo__intro{ padding-top:6px; }
.service-ceo__eyebrow{
  display:flex; align-items:center; gap:10px; margin-bottom:22px;
  font-size:.9rem; font-weight:600; letter-spacing:.2em; text-transform:uppercase;
  color:var(--color-primary);
}
.service-ceo__headline{
  font-size:clamp(1.8rem,4.6vw,3.2rem); line-height:1.3; font-weight:800;
  letter-spacing:-0.5px; color:var(--color-text);
}
.service-ceo__headline em{ font-style:normal; color:var(--color-primary); }

/* 우측 카드 — 통계+강점을 하나의 패널로 묶고, 카드 전체가 한 번에 슬라이드-인된다. */
.service-ceo__aside{
  background:var(--color-bg-alt); border:1px solid var(--color-border); border-radius:var(--radius);
  padding:36px 32px;
}
/* 500억/300건을 위아래로 쌓은 1열(세로) 배치. 항목 사이는 가로 구분선으로 나눈다. */
.service-ceo__stats{ display:flex; flex-direction:column; }
/* 카운트업 숫자(main.js의 [data-count] 옵저버 재사용) + 카드가 보이면 아래 바가
   왼쪽에서 채워지며 그려지는 연출. 숫자/포인트 각각 카드 등장 뒤 살짝 시차를 두고 페이드인. */
.service-ceo__stat{ cursor:default; opacity:0; padding:20px 0; transition:opacity .5s ease; }
.service-ceo__stat:first-child{ padding-top:0; }
.service-ceo__stat:last-child{ padding-bottom:0; }
.service-ceo__stat + .service-ceo__stat{ border-top:1px solid var(--color-border); }
.service-ceo__aside.is-visible .service-ceo__stat{ opacity:1; }
.service-ceo__stats .service-ceo__stat:nth-child(2){ transition-delay:.12s; }
/* 숫자+바를 별도 shrink-to-fit 래퍼로 묶어서, 폭이 정해지지 않은 바(width:100%)가
   래퍼의 실제 폭(=숫자 콘텐츠 폭)에 자동으로 맞춰지게 한다 — 라벨 텍스트 폭과는
   무관하게 항상 숫자 밑줄처럼 붙는다. */
.service-ceo__stat-figure{ display:inline-flex; flex-direction:column; align-items:flex-start; }
.service-ceo__stat-num{
  font-family:var(--font-gnb); font-size:clamp(2.2rem,3.8vw,2.9rem); color:var(--color-primary);
  font-variant-numeric:tabular-nums;
}
.service-ceo__stat-bar{
  margin-top:2px; width:100%; height:2px; background:var(--color-border);
  position:relative; overflow:hidden;
}
.service-ceo__stat-bar::after{
  content:''; position:absolute; inset:0; background:var(--color-primary);
  transform:scaleX(0); transform-origin:left; transition:transform .8s cubic-bezier(.16,1,.3,1);
}
.service-ceo__aside.is-visible .service-ceo__stat-bar::after{ transform:scaleX(1); }
.service-ceo__stat-label{ margin-top:10px; font-size:.8rem; font-weight:600; line-height:1.4; color:var(--color-text); }

.service-ceo__points{
  margin-top:36px;
  display:flex; flex-direction:column; 
}
.service-ceo__point{ opacity:0; transition:opacity .5s ease; }
.service-ceo__points.is-visible .service-ceo__point{ opacity:1; }
.service-ceo__points .service-ceo__point:nth-child(2){ transition-delay:.5s; }
/* 호버 인터랙션 없음 — 이 블록이 뷰포트에 들어오는 순간(.service-ceo__points.is-visible)
   테두리만 있던 빈 원이 순서대로(0s → 0.5s) primary로 채워지며 "체크되는" 연출만 낸다.
   구분선은 아이콘 폭만큼 안쪽으로 들여써서 .service-ceo__point-body 너비에만
   맞춘다(아이콘 아래까지 선이 지나가지 않도록 body에 ::before로 그린다). */
.service-ceo__point{
  display:flex; gap:14px; align-items:center;
  padding:18px 0;
  transition:opacity .5s ease;
}
.service-ceo__point-body{ position:relative; }
.service-ceo__point + .service-ceo__point .service-ceo__point-body::before{
  content:''; position:absolute; top:-18px; left:0; right:0; height:1px;
  background:var(--color-border);
}
/* 체크 아이콘 — 배경색이 그냥 바뀌는 게 아니라 실제로 원 테두리(stroke)가
   시작점에서 끝점까지 그려지고, 그 뒤 안쪽 배경이 채워지고, 마지막으로 체크
   표시가 획을 그리듯 나타나는 3단계 SVG 애니메이션. 원 stroke는
   stroke-dasharray(원주 길이)=stroke-dashoffset(같은 값→0)로 "그려지는" 효과를
   내고, 체크 표시도 같은 방식(path 길이보다 넉넉한 18)으로 획을 긋는다.
   각 단계는 앞 단계가 끝나는 시점부터 이어지도록 transition-delay를 누적하고,
   두 번째 항목(Growth Performance)은 전체가 0.5초 뒤로 통째로 밀린다. */
.service-ceo__point-icon{ flex:none; width:28px; height:28px; overflow:visible; }
.service-ceo__point-icon-ring{
  fill:none; stroke:var(--color-primary); stroke-width:1.6;
  stroke-dasharray:76; stroke-dashoffset:76;
  transition:stroke-dashoffset .5s ease;
}
.service-ceo__point-icon-fill{
  fill:var(--color-primary);
  opacity:0; transform:scale(0); transform-origin:14px 14px;
  transition:opacity .35s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
}
.service-ceo__point-icon-check{
  fill:none; stroke:var(--color-white); stroke-width:2.2;
  stroke-linecap:round; stroke-linejoin:round;
  stroke-dasharray:18; stroke-dashoffset:18;
  transition:stroke-dashoffset .3s ease;
}
.service-ceo__points.is-visible .service-ceo__point-icon-ring{ stroke-dashoffset:0; }
.service-ceo__points.is-visible .service-ceo__point-icon-fill{ opacity:1; transform:scale(1); }
.service-ceo__points.is-visible .service-ceo__point-icon-check{ stroke-dashoffset:0; }

.service-ceo__points.is-visible .service-ceo__point:nth-child(1) .service-ceo__point-icon-ring{ transition-delay:0s; }
.service-ceo__points.is-visible .service-ceo__point:nth-child(1) .service-ceo__point-icon-fill{ transition-delay:.5s; }
.service-ceo__points.is-visible .service-ceo__point:nth-child(1) .service-ceo__point-icon-check{ transition-delay:.85s; }
.service-ceo__points.is-visible .service-ceo__point:nth-child(2) .service-ceo__point-icon-ring{ transition-delay:.5s; }
.service-ceo__points.is-visible .service-ceo__point:nth-child(2) .service-ceo__point-icon-fill{ transition-delay:1s; }
.service-ceo__points.is-visible .service-ceo__point:nth-child(2) .service-ceo__point-icon-check{ transition-delay:1.35s; }
.service-ceo__point h4{ font-size:1.05rem; font-weight:800; color:var(--color-text); }
.service-ceo__point p{ margin-top:5px; font-size:.9rem; line-height:1.55; color:var(--color-muted); }

@media (max-width:880px){
  .service-ceo__body{ grid-template-columns:1fr; gap:28px; }
  .service-ceo__aside{ max-width:420px; }
}
@media (max-width:640px){
  .service-ceo__aside{ padding:28px 24px; }
  .service-ceo__points{ margin-top:6px; }
  .service-ceo__point{ padding:14px 0 14px 0; }
}

/* ==========================================================================
   3-1. Services stepper (홈 SERVICE 섹션 — 좌측 고정 타이틀 + 우측 스크롤 스텝퍼)
   ========================================================================== */
.services-stepper{ background:var(--color-primary-dark); color:var(--color-white); }
.services-stepper__inner{
  max-width:1400px; margin:0 auto;
  display:grid; grid-template-columns:minmax(260px,380px) 1fr; gap:64px; align-items:start;
}
.services-stepper__head{ position:sticky; top:140px; }
.services-stepper__head .section-title{ color:var(--color-white); }
.services-stepper__head .section-desc{ color:var(--color-stone-light); }
.services-stepper__cta{ margin-top:32px; }

.services-stepper__list{ position:relative; }
.services-stepper__line{
  position:absolute; left:5px; top:8px; bottom:8px; width:2px;
  background:rgba(248,246,241,.14);
}
.services-stepper__progress{
  position:absolute; left:5px; top:8px; width:2px; height:0;
  background:linear-gradient(180deg, #1d775c, var(--color-stone));
  transition:height .35s ease;
}
.services-stepper__item{
  position:relative;
  display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center;
  padding:56px 0; border-bottom:1px solid rgba(248,246,241,.08);
}
.services-stepper__item:first-child{ padding-top:8px; }
.services-stepper__item:last-child{ border-bottom:none; padding-bottom:8px; }
.services-stepper__dot{
  position:absolute; left:0; top:64px; width:12px; height:12px; border-radius:50%;
  background:var(--color-primary-dark); border:2px solid rgba(248,246,241,.3);
  transition:background .35s ease, border-color .35s ease, box-shadow .35s ease;
}
.services-stepper__item:first-child .services-stepper__dot{ top:16px; }
.services-stepper__item.is-active .services-stepper__dot{
  background:#1d775c; border-color:#1d775c; box-shadow:0 0 0 6px rgba(29,119,92,.2);
}
.services-stepper__body{ margin-left:40px; }
.services-stepper__tag{
  display:block; font-family:var(--font-accent); font-size:.85rem; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  color:rgba(248,246,241,.4); transition:color .35s ease; margin-bottom:10px;
}
.services-stepper__item.is-active .services-stepper__tag{ color:#1d775c; }
.services-stepper__title{
  font-family:var(--font-accent); font-size:clamp(1.4rem,2.6vw,2rem); font-weight:700;
  letter-spacing:-.02em; color:rgba(248,246,241,.55); transition:color .35s ease;
}
.services-stepper__item.is-active .services-stepper__title{ color:var(--color-white); }
.services-stepper__points{ margin-top:20px; display:flex; flex-direction:column; gap:10px; }
.services-stepper__points li{ font-size:1rem; color:rgba(248,246,241,.4); transition:color .35s ease; }
.services-stepper__item.is-active .services-stepper__points li{ color:var(--color-stone-light); }
.services-stepper__art{ width:160px; opacity:.45; transition:opacity .35s ease; }
.services-stepper__item.is-active .services-stepper__art{ opacity:1; }
.services-stepper__art svg{ width:100%; height:auto; display:block; }

@media (max-width:960px){
  .services-stepper__inner{ grid-template-columns:1fr; gap:40px; }
  .services-stepper__head{ position:static; }
  /* 모바일은 한 칸짜리 그리드라 art가 body 밑에 나란히 쌓이면서 justify-self:start
     때문에 그리드 시작점(왼쪽, .services-stepper__line 세로 바 바로 옆)에 붙어버렸다.
     그리드 흐름에서 아예 빼서(position:absolute) 아이템 우측 하단 구석에 고정한다 —
     텍스트(포인트 목록)가 그 자리로 흘러들어가지 않게 오른쪽 여백도 확보한다. */
  .services-stepper__item{ grid-template-columns:1fr; gap:24px; padding-right:96px; }
  .services-stepper__art{ position:absolute; right:0; bottom:24px; width:80px; }
}

/* ==========================================================================
   4. Clients / Logo marquee
   ========================================================================== */
.logo-marquee{ overflow:hidden; position:relative; -webkit-mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image:linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.logo-marquee + .logo-marquee{ margin-top:28px; }
/* 두 벌을 이어붙여 두고 정확히 절반(-50%)만큼만 옮기면, 두 번째 벌이 첫 번째 벌과
   완전히 같은 자리에 오면서 끊김 없이 이어진다 — 끝에서 처음으로 튀는 지점이 없음 */
.logo-track{ display:flex; align-items:center; gap:64px; width:max-content; animation:marquee-left 34s linear infinite; }
.logo-track--right{ animation-name:marquee-right; animation-duration:40s; }
.logo-track img{ flex:0 0 auto; height:36px; width:auto; object-fit:contain; filter:brightness(0) invert(1); opacity:.65; transition:opacity .3s; }
.logo-track img:hover{ opacity:1; }
@keyframes marquee-left{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
@keyframes marquee-right{ from{ transform:translateX(-50%); } to{ transform:translateX(0); } }
@media (prefers-reduced-motion: reduce){ .logo-track{ animation:none; } }

/* ==========================================================================
   5. Works
   ========================================================================== */
.works-filter{ display:flex; gap:10px; flex-wrap:wrap; margin-bottom:40px; }
.works-filter button{
  padding:10px 20px; border-radius:999px; border:1px solid var(--color-border);
  background:var(--color-white); font-size:.9rem; font-weight:600; color:var(--color-muted);
}
.works-filter button.is-active, .works-filter button:hover{ background:var(--color-primary); border-color:var(--color-primary); color:var(--color-white); }
/* works 목록 페이지 전체가 primary 배경(어두운 테마)이라, 필터 버튼도 밝은
   테마용 색 대신 어두운 배경에 맞는 색으로 바꾼다 */
.works-section .works-filter button{ background:transparent; border-color:rgba(248,246,241,.35); color:var(--color-stone-light); }
.works-section .works-filter button.is-active, .works-section .works-filter button:hover{ background:var(--color-white); border-color:var(--color-white); color:var(--color-primary); }
.works-filter__count{ margin-left:6px; opacity:.6; font-weight:500; }
.works-filter button.is-active .works-filter__count{ opacity:1; font-weight:700; }

.works-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:880px){ .works-grid{ grid-template-columns:repeat(2,1fr); } }
@media (max-width:560px){ .works-grid{ grid-template-columns:1fr; } }

/* Works 목록 카드 — 세부 페이지로 링크하지 않는 단순 카드: 정사각 이미지 +
   그 아래 운영기간/ROAS만 보여준다. */
.work-card{ display:block; }
.work-card__thumb{ aspect-ratio:1/1; overflow:hidden; border-radius:var(--radius); }
.work-card__thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .35s ease; }
.work-card:hover .work-card__thumb img{ transform:scale(1.06); }
.work-card__body{ display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:16px 4px 0; }
.work-card__period{ font-size:.92rem; color:var(--color-white); }
.work-card__roas{ font-size:.95rem; font-weight:700; color:var(--color-white); }
.works-more{ margin-top:48px; text-align:center; }

/* 홈 Works 가로 스크롤 갤러리 (creatip.co.kr 참고, GSAP ScrollTrigger가 pin) — 세로 스크롤에 따라 우→좌 이동 */
/* 가로 스크롤 카드가 100vh 안에서 자체적으로 세로 중앙정렬되므로, 섹션 상단
   여백(.section의 기본 padding-top:96px)이 위에 불필요한 빈 공간을 만든다 */
#works.section{ padding-top:0; }
#clients.section,
#works.section{ background:var(--color-primary-dark); }
.hworks-wrap{
  position:relative;
  height:100vh; height:100svh; height:100dvh;
  display:flex; align-items:center;
  overflow:hidden;
}
.hworks-track{
  display:flex; align-items:stretch; gap:30px;
  padding:0 24px;
  will-change:transform;
}
/* work-style.png 참고 — 정사각 이미지 + 각진 모서리 + 사진 아래 브랜드명이 배경 위에
   바로 놓이는 구성. 원본은 검은 배경이지만 이 섹션은 primary(녹색) 배경이라
   캡션 색을 그에 맞게(흰색/스톤) 새로 잡았다. archive-works.php의 기본 카드
   (.work-card, 밝은 배경)는 그대로 두고 이 홈 가로 스크롤 카드만 다르게 꾸민다. */
.work-card--wide{
  flex:0 0 auto; width:min(90vw,480px);
  background:transparent; border-radius:0;
}
/* work-style.png의 지그재그 배치 — 2번째, 4번째... (2의 배수)만 아래로 살짝 내려서
   1번째가 상대적으로 위에 오도록 한다 (레이아웃에 영향 없는 순수 시각적 이동) */
.work-card--wide:nth-child(2n){ transform:translateY(10%); }
.work-card--wide .work-card__thumb{ aspect-ratio:1/1; border-radius:0; }
/* view-example.png 참고 — 테두리만 있는 고스트 카드(배경은 어두운 섹션 배경이 그대로
   비침), 좌상단에 작은 라벨, 우상단에 대각선 화살표, 하단에 서브카피 + 큼직한 스트로크
   타이틀. 호버하면 카드 배경이 딥그린(primary)으로 차오른다 — 대비상 텍스트는 rest/
   hover 어느 쪽이든 항상 어두운 배경 위라 밝은 톤(stone/white) 그대로 유지한다.
   화살표는 자신이 가리키는 방향(우상단)으로 살짝 이동한다. */
.hworks-cta{
  flex:0 0 auto; width:min(90vw,480px); aspect-ratio:1/1;
  position:relative;
  border-radius:0;
  display:flex; flex-direction:column; align-items:flex-start; justify-content:space-between;
  padding:32px;
  border: 1px solid var(--color-stone);
  transition:background-color .3s ease;
}
.hworks-cta:hover{ background-color:var(--color-primary); }
.hworks-cta .num{ font-family:var(--font-accent); font-size:.85rem; letter-spacing:.1em; text-transform:uppercase; color:var(--color-stone); }
.hworks-cta .arrow{
  position:absolute; top:32px; right:32px;
  font-size:1.6rem; color:var(--color-stone);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.hworks-cta:hover .arrow{ transform:translate(6px,-6px); }

.hworks-cta__content{ display:flex; flex-direction:column; align-items:flex-start; gap:22px; }
.hworks-cta__subtitle{ font-size:1rem; color:var(--color-stone-light); }
/* "View All" — 채움 없이 외곽선만 있는 스트로크 타이틀. color는
   -webkit-text-stroke를 지원하지 않는 브라우저를 위한 대체 채움. */
/* "View All" — 외곽선(stroke)은 항상 보이고, 속은 텍스트에 클리핑한 그라디언트를
   가로로 밀어 넣어 왼쪽부터 서서히 차오르는 느낌을 준다(즉시 색이 바뀌는 대신
   진행 애니메이션). 그라디언트는 폭 200%에 절반은 채움색·절반은 투명으로 딱 나눠
   놓고, background-position을 100%(투명 절반이 보임) → 0%(채움 절반이 보임)로
   옮기며 스윕시킨다. */
.hworks-cta .label{
  font-family:var(--font-gnb);
  /* 카드 폭이 min(90vw,480px)라 뷰포트를 따라 줄어드는데 글자 크기는 고정이라
     좁은 화면에서 카드 밖으로 넘쳤다 — 카드와 같은 비율로 줄어들게 vw 기반 clamp로 전환 */
  font-size:clamp(2rem, 9vw, 5.2rem); line-height:1.1; letter-spacing:2px;
  color:var(--color-stone); /* background-clip:text 미지원 브라우저용 대체 채움 */
  -webkit-text-stroke:1px var(--color-stone);
  background-image:linear-gradient(90deg, var(--color-stone) 50%, transparent 50%);
  background-size:200% 100%;
  background-position:100% 0;
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  transition:background-position .5s cubic-bezier(.4,0,.2,1);
}
.hworks-cta:hover .label{ background-position:0 0; }

/* wrap 높이를 카드 크기에 맞춰 줄이는 시도를 해봤는데, pin이 'top top'(뷰포트
   상단에 붙는 방식)이라 wrap 자체가 짧아지면 화면 위쪽에만 눌린 채 고정돼버려서
   —전체 화면 안에서 가운데 정렬되던 느낌이 사라지고 위로 쏠려 보였다— 원래대로
   100vh 되돌림. 카드는 1:1 비율 유지, .hworks-wrap의 align-items:center가 그
   안에서 카드를 세로 중앙에 놓는다(빈 여백은 남지만 최소한 화면 전체 기준으로는
   가운데). */
@media (max-width:880px){
  .work-card--wide:nth-child(2n){ transform:translateY(0); }
}

/* GSAP 로드 실패/모션최소화 등 pin 애니메이션을 못 쓰는 경우에만 네이티브 가로
   스와이프로 대체. 높이는 .hworks-wrap의 100vh(세로 중앙정렬)를 그대로 유지 — PC와
   동일한 풀스크린 느낌으로 보여주고, 그 안에서 가로 스와이프만 네이티브로 처리한다. */
.hworks-native{
  overflow-x:auto; overflow-y:hidden;
  -webkit-overflow-scrolling:touch; scroll-snap-type:x proximity;
  touch-action:pan-x;
}
.hworks-native .hworks-track{ transform:none !important; }
.hworks-native .work-card--wide,
.hworks-native .hworks-cta{ scroll-snap-align:start; }

.work-body{ max-width:820px; margin:56px auto 0; }
.work-body img{ border-radius:var(--radius); margin:24px 0; }
/* 전역 리셋이 h1~h4/ul 마진을 다 0으로 없애놔서, 개인정보처리방침처럼 소제목·
   목록이 많은 긴 본문 페이지는 줄마다 다 붙어 보였다 — 이 컨테이너 안에서만
   최소한의 여백을 되살린다. */
.work-body p{ margin-bottom:14px; }
.work-body h2,
.work-body h3{ margin-top:36px; margin-bottom:10px; }
.work-body h2:first-child,
.work-body h3:first-child{ margin-top:0; }
.work-body ul{ list-style:disc; padding-left:22px; margin-bottom:14px; }
.work-body li{ margin-bottom:6px; }
/* page.php(일반 페이지)/single.php(인사이트 글) — 본문 바로 다음이 footer라
   여백 없이 붙어 보였다. 뒤에 CTA 배너 등 다른 섹션이 이어지는 single-works.php는
   거기서 이미 spacing이 생기므로 이 클래스를 쓰지 않는다. */
.container--content-end{ padding-bottom:96px; }

/* 인사이트(블로그) 상세 — 배너/본문 모두 인사이트 아카이브와 같은 primary 배경
   (GNB도 functions.php의 nav-on-dark에 is_singular('post')를 추가해 흰색으로 통일).
   .page-banner--dark .section-title는 원래 INSIGHT/WORKS처럼 짧은 한 단어용
   대형 타이틀(clamp(4rem,9vw,6rem), Anton)이라, 실제 문장형 글 제목에는 너무 커서
   글 상세 배너에서만 별도로 줄인다. */
.page-banner--dark.insight-single-banner .section-title{
  font-family:var(--font-base);
  font-size:clamp(1.6rem,3.2vw,2.4rem);
  font-weight:700;
  letter-spacing:normal;
}
.insight-single__date{ display:block; margin-top:16px; color:var(--color-stone-light); font-size:.95rem; }
.insight-single{ background:var(--color-primary); color:var(--color-white); padding-top:56px; }
/* 글 영역(.work-body, 820px) 안에 넣어서 그 폭만큼은 항상 채우고, 비율은
   깨지지 않게 height는 auto로 둔다(크롭도, 강제 축소도 하지 않음).
   여백/border-radius는 아래 .work-body img 규칙을 그대로 물려받는다. */
.insight-single__hero{ display:block; width:100%; height:auto; }
.insight-single .work-body{ margin-top:40px; }
.insight-single .work-body p{ color:rgba(248,246,241,.85); }
.insight-single .work-body h2,
.insight-single .work-body h3{ color:var(--color-white); }
.insight-single .work-body a{ color:var(--color-white); text-decoration:underline; }

/* 글 상세 우측 고정 목차 네비게이션 — 본문(h2/h3)에서 뽑은 항목으로 이동.
   floating-cta(우하단)와 겹치지 않게 화면 세로 중앙에 두고, 본문과 겹칠 만큼
   좁은 화면에서는 숨긴다. */
.insight-toc{
  position:fixed;
  right:28px; top:50%;
  transform:translateY(-50%);
  z-index:40;
  width:220px;
  max-height:70vh;
  overflow-y:auto;
  padding:20px 18px;
  border-radius:var(--radius);
  background:rgba(248,246,241,.06);
  border:1px solid rgba(248,246,241,.25);
}
.insight-toc__label{
  display:block; margin-bottom:12px;
  font-size:.72rem; font-weight:700; letter-spacing:.16em; text-transform:uppercase;
  color:var(--color-stone-light);
}
.insight-toc__list{ display:flex; flex-direction:column; gap:8px; }
.insight-toc__item a{
  display:block; overflow:hidden; white-space:nowrap; text-overflow:ellipsis;
  font-size:.85rem; line-height:1.4; color:rgba(248,246,241,.75);
  transition:color .2s ease;
}
.insight-toc__item a:hover{ color:var(--color-white); }
.insight-toc__item--h3 a{ padding-left:14px; font-size:.8rem; color:rgba(248,246,241,.55); }
@media (max-width:1500px){
  .insight-toc{ display:none; }
}

/* ==========================================================================
   5-1. Growth (씨앗이 자라나는 Three.js 섹션)
   ========================================================================== */
.growth-section{ position:relative; height:260vh; height:260svh; height:260dvh; }
.growth-stage{
  position:sticky; top:0;
  height:100vh; height:100svh; height:100dvh;
  /* background:var(--color-primary); */
  background:#000000;
  overflow:hidden;
}
/* 한 번에 한 줄만 보임 — 같은 자리에 겹쳐 놓고 화면 가장자리에서 슬라이드해 들어왔다 나간다 */
.growth-copy{
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
}
/* 왼쪽에서 나오는 줄은 왼쪽에, 오른쪽에서 나오는 줄은 오른쪽에 그대로 머문다 */
.growth-copy__line{
  position:absolute; top:60%;
  width:clamp(240px,33vw,520px);
  word-break:keep-all; /* 한글이 음절 단위로 잘리지 않고 어절 단위로 줄바꿈 */
  font-family:var(--font-accent);
  font-size:clamp(2.4rem,6.6vw,5rem);
  font-weight:800; letter-spacing:-.02em; line-height:1.25;
  -webkit-text-stroke:1.5px #f4f4f4b8;
  color:#0000;
  opacity:0;
  transition:opacity .8s ease, transform .8s ease;
}
/* 줄마다 세로 위치를 다르게 줘서 한 줄로 나란히 반복되지 않도록 */
.growth-copy__line:nth-of-type(1){ top:38%; }
.growth-copy__line:nth-of-type(2){ top:56%; }
.growth-copy__line:nth-of-type(3){ top:84%; }
.growth-copy__line:nth-of-type(4){ top:84%; }
.growth-copy__line[data-dir="left"]{
  left:6%; text-align:left;
  transform:translateY(-50%) translateX(-100%);
}
.growth-copy__line[data-dir="right"]{
  right:6%; left:auto; text-align:right;
  transform:translateY(-50%) translateX(100%);
}
.growth-copy__line.is-visible{ opacity:1; transform:translateY(-50%) translateX(0); }
.growth-copy__line--brand{ letter-spacing:.04em; -webkit-text-stroke:0; color:var(--color-white); }
.growth-copy__highlight--stone{ -webkit-text-stroke-color:var(--color-stone); }
.growth-copy__highlight--primary{ -webkit-text-stroke-color:#1d775c; }
.growth-copy__logo{ display:block; width:100%; height:auto; }
.growth-visual{
  position:absolute; inset:0;
  width:100%; height:100%;
  z-index:1;
}
.growth-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  display:block; opacity:0; transition:opacity .6s ease;
}
.growth-canvas.is-ready{ opacity:1; }
.growth-fallback{
  position:absolute; top:50%; left:50%; transform:translate(-50%,-50%);
  width:min(80vw,460px); height:min(70vh,460px);
  opacity:0; transition:opacity .4s ease;
}
/* 기본은 숨김(로딩 중 번쩍임 방지) — three.js를 못 쓰거나 실패한 경우에만 JS가 is-active를 붙여서 보여줌 */
.growth-fallback.is-active{ opacity:1; }

@media (max-width:880px){
  /* 모바일도 PC와 같은 sticky pin + 스크롤 연동 캔버스를 쓰되, 총 스크롤 길이는
     PC(260vh)보다 짧게 줘서 좁은 화면에서 너무 오래 스크롤하지 않도록 한다 */
  .growth-section{ height:180vh; height:180svh; height:180dvh; }
}

/* ==========================================================================
   6. Stats
   ========================================================================== */
.stats-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:32px; text-align:center; }
@media (max-width:768px){ .stats-grid{ grid-template-columns:repeat(2,1fr); } }
.stat-item .num{ font-family:var(--font-accent); font-size:clamp(2.2rem,4vw,3.2rem); font-weight:800; color:var(--color-primary); }
.stat-item .num .suffix{ font-size:.6em; }
.stat-item .label{ margin-top:10px; color:var(--color-muted); font-size:.95rem; }

/* ==========================================================================
   7. Insights
   ========================================================================== */
.insight-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
@media (max-width:880px){ .insight-grid{ grid-template-columns:1fr; } }
.insight-card__thumb{ aspect-ratio:16/10; overflow:hidden; border-radius:var(--radius); background:var(--color-bg-alt); }
.insight-card__thumb img{ width:100%; height:100%; object-fit:cover; }
.insight-card__date{ margin-top:16px; font-size:.8rem; color:var(--color-muted); }
.insight-card__title{ margin-top:8px; font-size:1.1rem; font-weight:700; line-height:1.4; }

/* 인사이트(블로그) 아카이브 — 뉴스레터/카드뉴스 스타일. 배너~본문 전체를 primary
   배경으로 이어서 페이지 전체가 어두운 톤이 되도록 하고(GNB는 functions.php의
   nav-on-dark 분기로 흰색 전환), 원본 이미지 비율을 그대로 살린(크롭 없음) 카드를
   간격 없이 붙여서 각 카드 높이만큼 자연스럽게 퍼즐처럼 이어지도록 한다.
   CSS 멀티컬럼(column-count)은 balance 알고리즘 때문에 카드 높이 편차가 크면
   짧은 칸 아래에 빈 공간이 남아서, 대신 3칸을 라운드로빈으로 미리 나눠(PHP)
   flex 컬럼으로 순서대로 이어붙인다 — 모바일은 원래 날짜순 그대로 보이도록
   별도의 단일 목록(.insight-news-grid--mobile)을 두고 화면폭으로 토글한다. */
.insight-archive{ padding-top:24px; background:var(--color-primary); color:var(--color-white); }

.insight-news-masonry{ display:flex; align-items:flex-start; }
.insight-news-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.insight-news-grid--mobile{ display:none; }

.insight-cell{
  display:block;
  width:100%;
  border:1px solid rgba(248,246,241,.22);
  background:var(--color-primary);
  transition:background .3s ease, border-color .3s ease;
}
.insight-cell:hover{ background:var(--color-primary-light); border-color:rgba(248,246,241,.4); }

.insight-cell__thumb{ overflow:hidden; background:var(--color-primary-dark); line-height:0; }
.insight-cell__thumb img{ display:block; width:100%; height:auto; transition:transform .5s ease; }
.insight-cell:hover .insight-cell__thumb img{ transform:scale(1.04); }
.insight-cell__thumb-fallback{ width:100%; aspect-ratio:16/10; background:var(--color-primary-light); }

.insight-cell__body{ padding:20px 24px 24px; }
.insight-cell__title{
  font-size:1.2rem; font-weight:700; line-height:1.4; color:var(--color-white);
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.insight-cell__excerpt{
  margin-top:8px; color:rgba(248,246,241,.65); font-size:.9rem; line-height:1.6;
  display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;
}
.insight-cell__meta{ margin-top:16px; display:flex; align-items:center; justify-content:space-between; }
.insight-cell__date{ font-size:.78rem; color:var(--color-stone-light); letter-spacing:.02em; }
.insight-cell__more{ display:inline-flex; align-items:center; font-size:.85rem; font-weight:700; color:var(--color-white); }
.insight-cell__more span{ display:inline-block; transition:transform .3s ease; }
.insight-cell:hover .insight-cell__more span{ transform:translateX(4px); }

@media (max-width:880px){
  .insight-news-masonry{ display:none; }
  .insight-news-grid--mobile{ display:block; }
}

.insight-archive .navigation.pagination{ margin-top:64px; }
.insight-archive .nav-links{ display:flex; align-items:center; justify-content:center; gap:8px; flex-wrap:wrap; }
.insight-archive .page-numbers{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:40px; height:40px; padding:0 12px;
  border-radius:999px; border:1px solid rgba(248,246,241,.25);
  color:var(--color-white); font-size:.9rem; font-weight:600;
  transition:all .2s ease;
}
.insight-archive a.page-numbers:hover{ border-color:var(--color-white); }
.insight-archive .page-numbers.current{ background:var(--color-white); border-color:var(--color-white); color:var(--color-primary); }
.insight-archive .page-numbers.dots{ border-color:transparent; }

/* ==========================================================================
   8. CTA banner
   ========================================================================== */
/* footer가 바로 이어지므로 이 섹션 자체의 하단 패딩(.section의 96px)은 없애고,
   footer-top과 같은 폭(좌우 여백 동일)의 구분선만 footer의 상단 패딩 위에 얹는다 —
   .section 96px + footer 72px가 그대로 겹치면 간격이 두 배로 벌어져 버린다. */
.cta-banner{ padding-bottom:0; }
.cta-banner .container::after{
	content:'';
	display:block;
	margin-top:48px;
	border-bottom:1px solid rgba(248,246,241,.12);
}
/* 좌측 텍스트 + 우측 버튼 2개(무료 상담 받기 / 회사 소개서 받기, 세로로 쌓임) */
.cta-banner__inner{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:48px;
	text-align:left;
}
.cta-banner__text{ flex:1 1 auto; min-width:0; }
.cta-banner__actions{
	flex:0 0 auto;
	display:flex;
	flex-direction:column;
	gap:16px;
}
/* 공용 .btn(알약형 pill, border-radius:999px)과 다르게 이 두 버튼만 각지게 +
   좌우 여백을 더 넓게 — .btn 자체를 고치면 사이트 전체 버튼이 다 바뀌어서 여기
   범위로만 덮어쓴다. */
.cta-banner__actions .btn{
	border-radius:0;
	padding-left:44px;
	padding-right:44px;
}
/* 무료 상담 받기 — 평소엔 흰색 선/글자, 호버하면 흰색으로 꽉 채워지고 글자는 primary색 */
.cta-banner__btn--primary{
	border-color:var(--color-white);
	color:var(--color-white);
}
.cta-banner__btn--primary:hover{
	background:var(--color-white);
	color:var(--color-primary);
}
/* 회사 소개서 받기 — 위 버튼과 다르게 primary-light로 채워진다 */
.cta-banner__btn--secondary:hover{
	background:var(--color-primary-light);
	border-color:var(--color-primary-light);
	color:var(--color-stone);
}
@media (max-width:720px){
  .cta-banner {padding-top: 48px;}
	.cta-banner__inner{ flex-direction:column; align-items:flex-start; gap:32px; }
	.cta-banner__actions{ width:100%; }
	.cta-banner__actions .btn{ justify-content:center; }
}

.cta-banner__eyebrow{
	display:inline-block;
	font-family:var(--font-accent);
	font-size:.85rem;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--color-stone);
	margin-bottom:20px;
}
.cta-banner__title{
	font-size:clamp(2.2rem,5vw,4rem);
	line-height:1.3;
	letter-spacing:.5px;
}
/* "여러분" 타이핑 리빌 — 네모 박스(입력창처럼) 안에서 커서가 깜빡이다가 실제
   글자가 한 글자씩 채워진다. 이전엔 CSS width/steps()로 흉내냈는데, 한글은
   글자마다 폭이 달라 아직 안 보여야 할 다음 글자가 살짝 삐져나오는 문제가
   있었다 — main.js에서 textContent를 한 글자씩 실제로 늘려가는 방식으로 바꿔서
   (브라우저가 그때그때 정확한 폭으로 레이아웃하므로) 그 문제를 없앴다. 박스는
   글자 유무와 무관하게 항상 떠 있어서 타이핑 전에도 "입력 대기 중" 느낌을 준다.
   재생 시점은 페이지 로드 즉시가 아니라 이 CTA가 스크롤로 실제 보일 때 —
   main.js가 별도 IntersectionObserver로 처리한다(맨 아래 섹션이라 로드 직후
   재생하면 스크롤해서 도착했을 때 이미 다 끝나있는 문제를 피하기 위함). */
.cta-banner__typed{
	display:inline;
	padding:.02em .14em;
	border: 3px solid var(--color-stone);
}
.cta-banner__typed-text{ color:var(--color-white); }
/* 커서 — 박스 안, 타이핑된 글자 바로 뒤에서 계속 깜빡인다. em 단위라 title의
   clamp() 폰트 크기를 그대로 따라간다. */
.cta-banner__cursor{
	display:inline-block;
	width:.08em;
	height:.85em;
	margin-left:.06em;
	background:var(--color-white);
	vertical-align:-0.08em;
	animation:cta-cursor-blink 1s step-end infinite;
}
@media (prefers-reduced-motion: reduce){
	.cta-banner__cursor{ animation:none; }
}
@keyframes cta-cursor-blink{
	0%, 50%{ opacity:1; }
	50.01%, 100%{ opacity:0; }
}

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer{ background:var(--color-primary); color:var(--color-stone-light); padding:72px 0 32px; }
.footer-top{ display:grid; grid-template-columns:1.4fr 1fr; gap:48px; padding-bottom:48px; border-bottom:1px solid rgba(248,246,241,.12); }
@media (max-width:768px){
  .site-footer{padding: 32px 0;}
  .footer-top{ grid-template-columns:1fr; padding-bottom: 28px; gap: 24px;}
  /* 1열로 쌓일 때 회사정보 블록과 메뉴 블록 사이 — 간격(48px, .footer-top의 gap)은
     그대로 두고(패딩을 더 얹으면 간격이 두 배로 벌어짐) 경계에 구분선만 추가한다. */
  .footer-top > div:nth-child(2){ border-top:1px solid rgba(248,246,241,.12); }
}
.footer-logo{ font-size:1rem; font-weight:600; color:var(--color-white); margin-bottom:10px; }
.footer-address{ font-size:.92rem; line-height:1.6; }
.footer-heading{ font-size:.85rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--color-white); margin-bottom:16px; }
/* wp_nav_menu가 만드는 <ul>을 가로로 늘어놓는다. 예전엔 items_wrap으로 <ul>
   자체를 없애고 <li>들을 .footer-links div 안에 바로 뿌렸는데, <ul>/<ol> 밖에
   놓인 <li>는 브라우저 기본 스타일(list-style)이 그대로 적용돼서 앞에 점(•)이
   붙어 나왔다 — <ul>을 그대로 두면 전역 리셋(ul{list-style:none})이 알아서
   없애주므로 그쪽으로 되돌렸다. */
.footer-links ul{ display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end; gap:8px 18px; }
/* GNB(헤더 메인 메뉴)와 같은 Anton 폰트로 통일 */
.footer-links a{ display:block; padding:6px 0; font-size:0.9rem; letter-spacing:.02em; font-weight: 600;}
.footer-links a:hover{ color:var(--color-white); }
.footer-sns{ display:flex; gap:14px; margin-top:10px; justify-content:flex-end; }
.footer-sns a{ width:35px; height:35px; border-radius:50%; border:1px solid rgba(248,246,241,.25); display:flex; align-items:center; justify-content:center; font-size:.8rem; }
.footer-sns a:hover{ background:var(--color-white); color:var(--color-primary-dark); }
.footer-sns a img{ width:18px; height:18px; object-fit:contain; }
.footer-bottom{ display:flex; justify-content:space-between; flex-wrap:wrap; gap:12px; padding-top:24px; font-size:.82rem; color:#8a8478; }
@media (max-width:768px){
  /* .footer-top이 1열로 접히는 지점과 맞춰서, 메뉴/SNS도 다른 블록들처럼 왼쪽
     정렬로 통일 — flex-end로 오른쪽에 떠 있으면 다른 줄들과 정렬이 안 맞아 어색했다. */
  .footer-links ul,
  .footer-sns{ justify-content:flex-start; }
  .footer-links ul {
    margin-top: 12px;
  }
}

/* ==========================================================================
   10. About / Timeline
   ========================================================================== */
.timeline{ margin-top:24px; }
.timeline-item{ display:grid; grid-template-columns:140px 1fr; gap:32px; padding:28px 0; border-top:1px solid var(--color-border); }
.timeline-item:first-child{ border-top:none; }
.timeline-year{ font-family:var(--font-accent); font-size:1.4rem; font-weight:800; color:var(--color-primary); }
.timeline-text{ color:var(--color-muted); }

/* ==========================================================================
   11. Contact form
   ========================================================================== */
.form-note{
  position:fixed; left:50%; top:88px; transform:translateX(-50%);
  z-index:200; width:calc(100% - 48px); max-width:520px;
  padding:14px 20px; border-radius:8px; font-size:.9rem; text-align:center;
  box-shadow:0 12px 32px rgba(0,0,0,.18);
}
.form-note--success{ background:#e7ece5; color:var(--color-primary-dark); }
.form-note--error{ background:#fbeaea; color:#8a1f1f; }

.field-hidden{ display:none; }

.contact-hero__grid{ display:grid; grid-template-columns:1fr; gap:48px; margin-top:32px; }
@media (min-width:960px){ .contact-hero__grid{ grid-template-columns:minmax(260px,4fr) 6fr; gap:72px; } }

.contact-hero__headline{ font-size:clamp(26px,3.6vw,44px); font-weight:800; line-height:1.35; letter-spacing:-.01em; color:var(--color-text); word-break:keep-all; }
@media (min-width:1920px){ .contact-hero__headline{ font-size:66px; } }
@media (min-width:960px){ .contact-hero__aside{ position:sticky; top:140px; align-self:start; } }

.contact-sentence__group{ position:relative; padding-top:15px; margin-bottom:48px; }
.contact-sentence__group::before{ content:''; position:absolute; left:0; top:6px; width:6px; height:6px; border-radius:50%; background:var(--color-primary); }
.contact-sentence__group--plain{ padding-top:0; }
.contact-sentence__group--plain::before{ display:none; }
.contact-sentence__row{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 8px; }
/* pill 줄 바로 앞 라벨 줄에만 아래 여백을 줘서 라벨↔버튼 사이만 벌어지게 하고,
   "마케팅 문의" 하이라이트가 있는 줄에만 위 여백을 줘서 그 줄만 앞줄과 떨어지게 한다. */
.contact-sentence__row:has(+ .contact-sentence__row--pills){ margin-bottom:16px; }
.contact-sentence__row:has(.contact-sentence__highlight){ margin-top:16px; }
.contact-sentence__text{ font-size:clamp(19px,2.3vw,27px); font-weight:700; color:var(--color-text); line-height:1.5; }

/* "마케팅 문의" — 드래그(텍스트 선택)한 것처럼 보이도록 사이트 전역 ::selection과 같은 배색 사용 */
.contact-sentence__highlight{
  display:inline-block; font-size:clamp(24px,2.9vw,34px); font-weight:800; line-height:1.4;
  color:var(--color-white); background:var(--color-primary); padding:2px 12px; border-radius:4px;
}

.contact-sentence__blank{
  border:none; border-bottom:2px solid rgba(30,34,34,.2); background:transparent;
  font:inherit; font-size:clamp(19px,2.3vw,27px); font-weight:700; color:var(--color-text);
  padding:0 2px 4px; outline:none; min-width:0; transition:border-color .3s;
}
.contact-sentence__blank::placeholder{ color:rgba(30,34,34,.3); font-weight:500; font-size:1.1rem; }
.contact-sentence__blank:focus{ border-bottom-color:var(--color-primary); }
.contact-sentence__blank--company{ width:300px; max-width:100%; }
.contact-sentence__blank--name{ width:180px; max-width:100%; }
.contact-sentence__blank--position{ width:140px; max-width:100%; }
.contact-sentence__blank--email{ width:230px; max-width:100%; }
.contact-sentence__blank--phone{ width:190px; max-width:100%; }
.contact-sentence__blank--brief{ width:100%; max-width:420px; }
.contact-sentence__blank--other{ width:220px; max-width:100%; }
/* 지원 브라우저에서는 버튼처럼 내용(placeholder/입력값) 너비만큼만 차지하게 해서
   옆 텍스트와의 간격이 pill 버튼과 동일하게 보이도록 한다 — 위 width는 미지원 브라우저용 폴백. */
@supports (field-sizing: content) {
  .contact-sentence__blank{ field-sizing:content; width:auto; min-width:2ch; max-width:min(100%,420px); }
}

.contact-sentence__field{ display:inline-flex; flex-wrap:wrap; align-items:center; gap:4px; }
.contact-sentence__field.is-invalid .contact-sentence__blank{ border-bottom-color:#c0392b; }
.contact-sentence__row.is-invalid .contact-sentence__blank{ border-bottom-color:#c0392b; }
/* 평소엔 공간을 전혀 차지하지 않다가(display:none), invalid일 때만 나타나면서
   그만큼만 아래 여백을 밀어낸다 — position:absolute를 쓰지 않아 겹침 걱정이 없다.
   (이름/연락처/이메일처럼 옆에 텍스트가 붙는 줄은 에러가 필드 자체가 아니라
   .contact-sentence__row에 걸려있어야 width:100%가 줄 전체 너비로 정상 계산된다 —
   .contact-sentence__field는 inline-flex라 너비가 내용에 따라 정해져서 100%가 안맞았다.) */
.contact-sentence__error{ display:none; flex:0 0 100%; width:100%; margin-top:6px; font-size:12px; font-weight:500; color:#c0392b; }
.contact-sentence__field.is-invalid .contact-sentence__error{ display:block; }
.contact-sentence__row.is-invalid .contact-sentence__error{ display:block; }

/* pill 그룹(예산/유입경로/광고매체) 전용 줄 — 라벨은 별도 줄로 위에 두고,
   이 줄 안에서는 버튼과 뒤따르는 "이며,/입니다." 텍스트가 같은 flex-wrap 흐름을 공유해
   버튼 바로 오른쪽에 붙고, 넘치면 자연스럽게 다음 줄로 떨어진다.
   .contact-pills는 display:contents로 자기 박스를 없애 버튼들을 이 줄의 직계 flex 아이템으로 만든다. */
.contact-sentence__row--pills{ position:relative; gap:12px 10px; }
.contact-sentence__row--pills .contact-pills{ display:contents; }
.contact-sentence__row--pills.is-invalid .contact-pill{ border-color:#c0392b; }
.contact-sentence__row--pills.is-invalid .contact-sentence__error{ display:block; }

.contact-sentence__field--block{ display:block; }
.contact-sentence__field--block.is-invalid .contact-textarea{ border-color:#c0392b; background:rgba(192,57,43,.05); }

.contact-sentence__divider{ border:none; border-top:1px solid var(--color-border); margin:8px 0 40px; }
.contact-sentence__note{ margin:8px 0 32px; font-size:13px; color:rgba(30,34,34,.45); }
.contact-sentence__note a{ text-decoration:underline; text-underline-offset:2px; transition:color .3s; }
.contact-sentence__note a:hover{ color:rgba(30,34,34,.7); }

.contact-pills{ display:flex; flex-wrap:wrap; gap:8px 6px; }
.contact-pill{ border-radius: 5px; border:1px solid rgba(30,34,34,.15); padding:12px 16px; font-size:14px; background:transparent; color:rgba(30,34,34,.6); transition:all .3s; }
.contact-pill:hover{ border-color:rgba(30,34,34,.4); color:var(--color-text); }
.contact-pill.is-active{ border-color:var(--color-white); background: var(--color-primary); color:var(--color-white); font-weight:600; }

/* "마케팅 문의/컨설팅 문의" 선택 pill — 원래 "마케팅 문의" 하나만 고정 텍스트로
   있었을 때(.contact-sentence__highlight)와 같은 크기감을 유지한다. */
.contact-pill--highlight{ font-size:clamp(24px,2.9vw,34px); font-weight:800; padding:6px 18px; }

.contact-textarea{
  margin-top:14px; width:100%; border-radius:12px; border:1px solid rgba(30,34,34,.15); background:rgba(30,34,34,.03);
  padding:14px 16px; font-size:15px; color:var(--color-text); outline:none; transition:border-color .3s; resize:none; line-height:1.65;
}
.contact-textarea::placeholder{ color:rgba(30,34,34,.35); }
.contact-textarea:focus{ border-color:rgba(24,60,50,.6); }

.contact-upload-wrap{ position:relative; margin-top:14px; }
.contact-upload{
  display:flex; width:100%; align-items:center; justify-content:space-between;
  border-radius:12px; border:1px dashed rgba(30,34,34,.25); background:rgba(30,34,34,.03); padding:20px; text-align:left; transition:border-color .3s, background .3s;
}
.contact-upload:hover, .contact-upload.is-dragover{ border-color:rgba(24,60,50,.6); }
/* 파일이 선택되면(is-active) 눈에 띄게 — 테두리를 실선 primary색으로, 배경도 살짝 물들인다 */
.contact-upload.is-active{ border-style:solid; border-color:var(--color-primary); background:rgba(24,60,50,.08); }
.contact-upload__title{ font-size:14px; color:rgba(30,34,34,.8); word-break:break-all; }
.contact-upload.is-active .contact-upload__title{ color:var(--color-primary); font-weight:700; }
.contact-upload__hint{ display:block; margin-top:4px; font-family:var(--font-accent); font-size:11px; letter-spacing:.14em; color:rgba(30,34,34,.4); }
.contact-upload.is-active .contact-upload__hint{ color:rgba(24,60,50,.65); }
.contact-upload__icon{ font-size:20px; color:var(--color-primary); flex:none; margin-left:12px; transition:transform .3s; }
.contact-upload.is-active .contact-upload__icon{ transform:scale(1.15); }
.contact-upload__remove{
  display:none; align-items:center; justify-content:center;
  position:absolute; top:-9px; right:-9px; width:24px; height:24px; border-radius:50%;
  background:var(--color-primary); color:var(--color-white); font-size:11px; line-height:1;
  border:2px solid var(--color-bg); transition:background .2s, transform .2s;
}
.contact-upload__remove:hover{ background:var(--color-primary-light); transform:scale(1.08); }
.contact-upload__remove.is-visible{ display:flex; }

.contact-hero__footer{ display:flex; flex-direction:column; gap:20px; border-top:1px solid var(--color-primary); padding-top:28px; }
@media (min-width:768px){ .contact-hero__footer{ flex-direction:row; align-items:center; justify-content:space-between; } }
.contact-hero__portfolio{ display:flex; flex-direction:column; gap:6px; }
.contact-hero__portfolio-label{ font-family:var(--font-accent); font-size:10px; letter-spacing:.2em; color:rgba(24,60,50,.7); transition:color .5s; }
.contact-hero__portfolio:hover .contact-hero__portfolio-label{ color:var(--color-primary); }
.contact-hero__portfolio-text{ display:flex; align-items:center; gap:8px; font-size:13px; color:rgba(30,34,34,.55); transition:color .5s; }
.contact-hero__portfolio:hover .contact-hero__portfolio-text{ color:var(--color-text); }
.contact-hero__portfolio-arrow{ color:var(--color-primary); display:inline-block; transition:transform .5s; }
.contact-hero__portfolio:hover .contact-hero__portfolio-arrow{ transform:translateX(-4px); }

.contact-hero__actions{ display:flex; flex-direction:column; align-items:flex-start; gap:38px; }
.contact-submit{
  width:115px; height:115px; flex:none; border-radius:50%; background:transparent;
  border:1.5px solid var(--color-primary);
  display:inline-flex; align-items:center; justify-content:center; text-align:center; padding:0;
  font-family:var(--font-accent); font-size:16px; font-weight:700; letter-spacing:.04em; line-height:1.4;
  color:var(--color-primary); transition:transform .3s, opacity .3s, background .3s, color .3s;
}
.contact-submit:not(.is-disabled){ background:var(--color-primary); color:var(--color-white); }
.contact-submit:not(.is-disabled):hover{ transform:scale(1.06); }
.contact-submit.is-disabled{ opacity:.3; }

.contact-consent{ display:flex; align-items:center; gap:10px; font-size:12.5px; line-height:1.5; color:rgba(30,34,34,.6); }
.contact-consent label{ cursor:pointer; }

/* 커스텀 체크박스 — 실제 input은 투명하게 남겨 클릭/키보드 접근성은 유지하고,
   시각적으로는 뒤의 .contact-consent__box(사각 박스 + 체크 아이콘)로 대체한다. */
.contact-consent__control{ position:relative; display:inline-flex; width:20px; height:20px; flex:none; }
.contact-consent__input{ position:absolute; inset:0; margin:0; opacity:0; cursor:pointer; z-index:1; }
.contact-consent__box{
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  border-radius:5px; border:1.5px solid rgba(30,34,34,.35); background:var(--color-white);
  color:var(--color-white); transition:background .2s, border-color .2s;
}
.contact-consent__box svg{ width:12px; height:12px; opacity:0; transition:opacity .15s; }
.contact-consent__input:checked + .contact-consent__box{ background:var(--color-primary); border-color:var(--color-primary); }
.contact-consent__input:checked + .contact-consent__box svg{ opacity:1; }
.contact-consent__input:focus-visible + .contact-consent__box{ outline:2px solid var(--color-primary); outline-offset:2px; }
.contact-consent.is-invalid .contact-consent__box{ border-color:#c0392b; }
.contact-consent a{ text-decoration:underline; text-underline-offset:2px; transition:opacity .3s; }
.contact-consent a:hover{ opacity:.7; }
.contact-consent.is-invalid{ color:#c0392b; }

/* 반응형 — 태블릿/모바일에서 여백·크기를 단계적으로 줄인다 */
@media (max-width:880px){
  .contact-hero__actions { gap: 18px; }
  .contact-hero{ padding:64px 0; }
  .contact-hero__grid{ gap:36px; margin-top:24px; }
  .contact-sentence__group{ margin-bottom:34px; }
  .contact-submit{ width:112px; height:112px; font-size:15px; }
}
@media (max-width:640px){
  .contact-hero{ padding:48px 0; }
  .contact-hero__grid{ gap:28px; margin-top:20px; }
  .contact-sentence__group{ margin-bottom:26px; padding-top:12px; }
  .contact-sentence__row:has(+ .contact-sentence__row--pills){ margin-bottom:12px; }
  .contact-sentence__row:has(.contact-sentence__highlight){ margin-top:12px; }
  .contact-pill{ padding:9px 16px; font-size:13px; }
  .contact-upload{ padding:16px; }
  .contact-textarea{ padding:12px 14px; }
  .contact-submit{ width:96px; height:96px; font-size:13px; }
  .contact-hero__footer{ padding-top:22px; }
}

/* ==========================================================================
   11-1. CONSULT 페이지 — 화면 전체(100vh) 히어로.
   page-templates/template-consult.php. 우측 상품 리스트는 inc/consult.php의
   groment_consult_products() 배열(코드)에서만 관리 — 워드프레스 글/CPT/ACF 없음.
   ========================================================================== */
.consult-hero{
  --consult-accent: var(--color-primary);
  position:relative;
  min-height:100vh;
  display:flex;
  align-items:stretch;
  padding:64px 0;
  background:linear-gradient(135deg, var(--color-bg) 0%, var(--color-stone-light) 55%, #84c3b2   100%);
  overflow:hidden;
}
/* container가 히어로 전체 높이를 채우고(align-items:stretch), 그 안에서 헤드라인은
   좌측 상단에서 40%, 상품 리스트는 우측 상단에서 60% 지점에 각각 독립적으로
   절대위치로 자리잡는다(둘 다 top:%값 + translateY(-50%)로 그 지점에 세로 중앙 고정). */
.consult-hero .container{ position:relative; width:100%; }

.consult-hero__headline{
  position:absolute; left:24px; top:38%; transform:translateY(-50%);
}
.consult-hero__title{
  font-family:var(--font-gnb); font-size:clamp(3.5rem,8vw,7.5rem); line-height:.92;
  font-weight:400; color:var(--color-text); text-transform:uppercase; word-break:keep-all;
  letter-spacing:-0.02em;
}
.consult-hero__title-indent{ display:inline-block; margin-left:clamp(24px,6vw,100px); }
.consult-hero__desc{
  margin-top:20px; margin-left:clamp(48px,9vw,150px); max-width:560px; white-space:nowrap;
  font-size:clamp(1.1rem,1.6vw,1.35rem); line-height:1.6; color:var(--color-muted);
}

/* 상품 리스트 — 메뉴처럼 위/아래 구분선을 두고, 평소엔 상품명만 보이다가
   호버하면 좌측 바(list-bar)와 우측 원형 화살표가 함께 나타난다. */
.consult-hero__products{
  position:absolute; top:71%; right:24px; transform:translateY(-50%);
  list-style:none; margin:0; padding:0; width:min(360px,60vw);
}
.consult-hero__products li{ border-bottom:1px solid rgba(30,34,34,.15); }
.consult-hero__products li:first-child{ border-top:1px solid rgba(30,34,34,.15); }
.consult-hero__products a{
  display:flex; align-items:center; justify-content:flex-end; gap:12px;
  padding:18px 0; font-size:clamp(1.05rem,1.4vw,1.3rem); font-weight:600; color:var(--color-text); text-decoration:none;
}
.consult-hero__list-bar{
  width:2px; height:16px; background:var(--consult-accent);
  opacity:0; transform:scaleY(0); transition:opacity .25s ease, transform .25s ease;
}
.consult-hero__list-arrow{
  width:28px; height:28px; border-radius:50%; border:1px solid var(--color-text);
  display:inline-flex; align-items:center; justify-content:center; font-size:13px;
  opacity:0; transform:translateX(-6px); transition:opacity .25s ease, transform .25s ease;
}
.consult-hero__products a:hover{ color:var(--consult-accent); }
.consult-hero__products a:hover .consult-hero__list-arrow{ border-color:var(--consult-accent); }
.consult-hero__products a:hover .consult-hero__list-bar,
.consult-hero__products a:hover .consult-hero__list-arrow{ opacity:1; transform:none; }

/* 헤드라인(좌)과 상품 리스트(우)는 둘 다 clamp/vw로 각자 커지긴 하지만 서로 폭을
   나눠 갖지 않는 절대위치라서, 768px 바로 위(태블릿 가로~좁은 데스크톱 창) 구간에서는
   헤드라인 2번째 줄(들여쓰기 포함)과 리스트가 겹칠 수 있다. 표준 태블릿 기준인
   768px로 스택 레이아웃 전환점을 맞춰뒀다. */
@media (max-width:768px){
  .consult-hero{ padding:96px 0 48px; }
  .consult-hero .container{ display:flex; flex-direction:column; justify-content:center; gap:48px; }
  .consult-hero__headline{ position:relative; left:auto; top:auto; transform:none; }
  .consult-hero__products{ position:static; width:100%; transform:none; line-height: 1.2; }
  .consult-hero__products a{ justify-content:flex-start; padding: 14px 0; }
  .consult-hero__title-break{ display:none; }
  .consult-hero__title-indent { margin-left: 0; }
  .consult-hero__desc{ white-space:normal; margin-left:0; }
  /* 터치 기기엔 진짜 hover가 없어서 bar/화살표가 평소엔 안 보이는 채로 남아
     링크인지 알기 어려웠다 — 모바일에서는 항상 보이게 해서 클릭 가능함을 표시한다. */
  .consult-hero__list-bar,
  .consult-hero__list-arrow{ opacity:1; transform:none; }
}

/* 컨설팅 상품 상세 (page-templates/template-consult-product.php) — 이미지·영상을
   위에서부터 순서대로 쌓아 보여준다. imagemap 타입은 이미지 자체에 <map><area>로
   클릭 영역이 박혀 있는 경우(inc/consult.php 참고) — area에 마우스 포인터만 표시. */
.container--narrow{ max-width:800px; }
/* 헤더(.site-header .container)와 같은 지점에서 같은 좌우 여백으로 맞춘다. */
@media (max-width:880px){
  .container--narrow{ padding:0 14px; }
}
/* 블록 하나하나가 아니라 전체 이미지 묶음(.consult-product-blocks)에 한 번만
   둥근 모서리를 준다 — 블록 사이 여백이 없어서(margin 없음) 맨 위/아래 모서리만
   둥글고 중간은 쭉 이어진 하나의 이미지처럼 보인다. */
.consult-product-blocks{ border-radius:var(--radius); overflow:hidden; }
.consult-product-block img,
.consult-product-block__video{ display:block; width:100%; height:auto; }
.consult-product-block area{ cursor:pointer; }
/* 이미지 묶음을 통째로 띄워서 별도 카드처럼 분리하고 싶을 때 — block 배열에
   'gap_before'=>true를 주면 그 블록부터 .consult-product-blocks를 새로 열어서
   (template-management.php 참고) 네 모서리가 다 둥근 별도 카드로 띄운다. */
.consult-product-blocks--floating{ margin-top:clamp(24px,4vw,48px); }

/* management 17(cta)처럼 블록을 별도 카드로 안 띄우고 다른 블록(16번) 안에
   겹쳐서(overlay) 띄우고 싶을 때 — block 배열에 'overlay'=>[...]를 주면
   (template-management.php 참고) 기준 블록 안에서 absolute로 하단(bottom)에
   붙는다. 기준 블록엔 자동으로 consult-product-block--has-overlay가 붙어서
   position:relative가 된다. */
.consult-product-block--has-overlay{ position:relative; }
.consult-product-block__overlay{ position:absolute; left:0; right:0; bottom:4%; z-index:1; }
.consult-product-block__overlay img{ display:block; width:100%; height:auto; }

/* 자동 슬라이드(management 7-1/7-2/7-3처럼 이미지 N장을 시간차로 겹쳐 반복 재생) —
   전부 겹쳐 쌓아두고(absolute), 자기 차례가 되면 오른쪽 화면 밖에서 들어오고,
   차례가 끝나면 왼쪽 화면 밖으로 이어서 나간다(필름스트립처럼 연결된 이동, 덮는
   방식 아님) — 다음 이미지의 "들어오기"와 이전 이미지의 "나가기"가 같은 시간대에
   같은 길이로 겹치게 타이밍을 맞춰서 하나로 이어지는 것처럼 보인다.
   --slide-count/--slide-duration/aspect-ratio는 template-management.php의 인라인
   style에서 넘어온다(전부 absolute라 컨테이너 자체에 높이가 있어야 함). */
.consult-product-block__slideshow{ position:relative; overflow:hidden; }
.consult-product-block__slideshow img{
  display:block; width:100%; height:100%; object-fit:cover;
  position:absolute; inset:0;
  animation-name: consult-slideshow-slide;
  animation-duration: calc(var(--slide-duration) * var(--slide-count));
  animation-iteration-count: infinite;
  animation-timing-function: ease-in-out;
  animation-fill-mode: backwards;
}
/* 이미지 3장(각 1/3 구간) 기준. 0~5%: 오른쪽 밖→제자리(들어옴). 5~33.33%: 제자리에
   머묾(보여지는 구간). 33.33~38.33%: 제자리→왼쪽 밖(나감, 다음 이미지의 0~5%
   들어오기와 정확히 같은 구간이라 서로 이어져 보인다). 이후 100%까지 왼쪽 밖에 대기. */
@keyframes consult-slideshow-slide{
  0%     { transform:translateX(100%); }
  5%     { transform:translateX(0%); }
  33.33% { transform:translateX(0%); }
  38.33% { transform:translateX(-100%); }
  100%   { transform:translateX(-100%); }
}

/* ==========================================================================
   12. Page banner (내부 페이지 상단)
   ========================================================================== */
.page-banner{ padding:72px 0 48px; border-bottom:1px solid var(--color-border); }
.page-banner .section-title{ font-size:clamp(2rem,4vw,3rem); }
/* works 아카이브/카테고리는 GNB가 흰색(홈과 동일)이라, 헤더 바로 아래 배너도
   어둡게 맞춰서 흰 글자가 보이게 한다. 다른 내부 페이지(contact 등)는
   이 클래스를 안 쓰므로 기본(밝은) 배너 그대로 유지된다. */
.page-banner--dark{ background:var(--color-primary); color:var(--color-white); border-bottom-color:transparent; }
/* works 배너 — 타이틀을 크게 키운 히어로 톤이라, 배너 자체의 하단 여백과
   바로 아래(.works-section)의 상단 여백을 줄여 필터와의 간격을 좁히고,
   그 사이에 옅은 구분선을 하나 넣는다. */
.page-banner--dark .section-title{ font-family:var(--font-gnb); font-size:clamp(4rem,9vw,6rem); letter-spacing:2px; }
.page-banner--dark{ padding-bottom:16px; border-bottom:none; }
/* 화면 끝까지 닿는 full-width 선 대신, 다른 콘텐츠와 같은 좌우 여백(.container)
   안에서만 그어지는 구분선 — cta-banner 하단 구분선과 같은 방식 */
.page-banner--dark .container::after{
	content:'';
	display:block;
	margin-top:16px;
	border-bottom:1px solid rgba(248,246,241,.15);
}
.works-section{ padding-top:20px; }
.page-banner--dark .section-title{ color:var(--color-white); }
.page-banner--dark .section-desc{ color:var(--color-stone-light); }

/* ==========================================================================
   13. Utilities
   ========================================================================== */
.text-center{ text-align:center; }
.mt-0{ margin-top:0; }
[data-animate]{ opacity:0; transform:translateY(24px); transition:opacity .6s ease, transform .6s ease; }
[data-animate].is-visible{ opacity:1; transform:none; }
/* CTA+Footer 전용 — 스크롤 진행도에 직접 붙어서 들어오면 올라오고 나가면 다시
   내려가는 커튼형 리빌 (main.js의 GSAP ScrollTrigger scrub이 transform을 제어). */
.cta-footer-mask{ overflow:hidden; background:var(--color-primary); }
.cta-footer-stack{ will-change:transform; }

/* ==========================================================================
   14. 404
   ========================================================================== */
/* 헤더/푸터 없이 단독 페이지 — body 자체가 전체 화면을 채우는 primary 배경 */
.error-404-body{ background:var(--color-primary); }
.error-404{
	min-height:100vh;
	min-height:100svh;
	min-height:100dvh;
	display:flex;
	align-items:center;
	justify-content:center;
	padding:24px;
}
.error-404__inner{ max-width:520px; text-align:center; }
.error-404__eyebrow{
	display:inline-block;
	font-family:var(--font-accent);
	font-size:.85rem;
	font-weight:700;
	letter-spacing:.18em;
	text-transform:uppercase;
	color:var(--color-stone);
	margin-bottom:20px;
}
.error-404__code{
	font-family:var(--font-accent);
	font-size:clamp(5rem,16vw,9rem);
	font-weight:800;
	line-height:1;
	letter-spacing:-.02em;
	color:var(--color-white);
	-webkit-text-stroke:1.5px var(--color-stone);
}
.error-404__title{
	margin-top:16px;
	font-size:clamp(1.3rem,3vw,1.7rem);
	font-weight:700;
	color:var(--color-white);
}
.error-404__desc{
	margin-top:14px;
	color:var(--color-stone-light);
	font-size:1rem;
	line-height:1.7;
}
.error-404__btn{ margin-top:36px; }