/* CDN 이 배포하는 @font-face 에는 font-display 가 없다 —
   10-aeo-seo §7(CLS) 요구사항이라 같은 family 로 덮어써 swap 을 강제한다. */
@font-face { font-family: "Pretendard Variable"; font-display: swap;
  src: local("Pretendard Variable"); }

@charset "utf-8";
/* =========================================================================
   (주)바오밥크리에이티브 — 디자인 시스템 v3
   방향: 컬러 필드 에디토리얼 (Color-Field Editorial)

   근거: 클라이언트 공식 회사소개서(2023, 72p)에서 추출한 바오밥 고유의 시각 언어.
        구릿빛 색면(色面) 전면 슬래브 + 거대한 한글 + 헤어라인 + 잎 워터마크.
        흰 카드 격자는 쓰지 않는다 — 그것이 "논문처럼 보인다"는 반려의 원인이었다.
   컬러: 소개서 픽셀 실측값. 브론즈 #a86727 / 딥그린 #0f3c2b / 본문그레이 #57585a
   서체: 한글 고딕 전용(Pretendard). 명조 사용 금지 — 보스 지시 2026-08-25.
   ========================================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");

/* ========== 1. 토큰 ========== */
:root {
  /* 브랜드 — 소개서 실측 */
  --bronze:      #a86727;
  --bronze-lt:   #c3844f;
  --bronze-dk:   #8a5320;
  --bronze-pale: #e8d5c2;
  --forest:      #0f3c2b;
  --forest-lt:   #1c5a41;

  /* 중립 */
  --ink:      #1a1a1a;
  --gray:     #57585a;
  --gray-lt:  #8b8c8e;
  --paper:    #ffffff;
  --cream:    #faf7f3;
  --cream-dk: #f2ece4;
  --line:     rgba(26, 26, 26, .13);
  --line-lt:  rgba(26, 26, 26, .07);
  --on-dark:  rgba(255, 255, 255, .82);
  --on-dark-dim: rgba(255, 255, 255, .58);

  /* 서체 — 한글 고딕 단일. Latin 세리프를 한글에 상속시키지 않는다. */
  --font-sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
               "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  /* 리듬 */
  --shell:   1200px;
  --gut:     clamp(20px, 5vw, 64px);
  --sec-y:   clamp(80px, 11vw, 160px);
  --ease:    cubic-bezier(.16, 1, .3, 1);
}

/* ========== 2. 리셋 ========== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.85;
  color: var(--gray);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul, ol { margin: 0; padding: 0; list-style: none; }
h1, h2, h3, h4, p, figure, blockquote { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }

.shell { width: min(100% - var(--gut) * 2, var(--shell)); margin-inline: auto; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ========== 3. 타이포 스케일 ========== */
/* 거대한 한글 = 이 사이트의 목소리. 소개서의 「기획」「디자인」「온라인」 슬래브에서 왔다. */
.display {
  font-size: clamp(2.4rem, 7.2vw, 6rem);
  line-height: 1.06;
  letter-spacing: -.035em;
  font-weight: 800;
  color: var(--ink);
}
.title {
  font-size: clamp(1.85rem, 4.4vw, 3.4rem);
  line-height: 1.22;
  letter-spacing: -.03em;
  font-weight: 800;
  color: var(--ink);
}
.title em { font-style: normal; color: var(--bronze); }
.lede {
  font-size: clamp(1rem, 1.35vw, 1.16rem);
  line-height: 1.95;
  color: var(--gray);
  max-width: 62ch;
}

/* 섹션 머리표 — 소개서의 좌상단 라벨 + 우상단 'Creative strategy group' 을 웹으로 옮긴 것 */
.eyebrow {
  display: flex; align-items: center; gap: 14px;
  font-size: .74rem; font-weight: 700; letter-spacing: .22em;
  text-transform: uppercase; color: var(--bronze);
  margin-bottom: 26px;
}
.eyebrow::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }

.sec-head { margin-bottom: clamp(44px, 6vw, 84px); }
.sec-head .lede { margin-top: 22px; }

/* ========== 4. 헤더 ========== */
.site-header {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .93);
  backdrop-filter: saturate(150%) blur(12px);
  transition: box-shadow .35s var(--ease), background .35s var(--ease);
}
.site-header.is-stuck { box-shadow: 0 1px 0 var(--line), 0 10px 30px -22px rgba(0,0,0,.5); }
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; height: clamp(64px, 7vw, 82px);
}
.brand { display: flex; align-items: center; gap: 13px; }
.brand img { width: auto; height: clamp(26px, 2.6vw, 33px); }
.brand__sub {
  font-size: .68rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--gray-lt); font-weight: 600; padding-left: 13px;
  border-left: 1px solid var(--line);
}
@media (max-width: 720px) { .brand__sub { display: none; } }

.gnb ul { display: flex; align-items: center; gap: clamp(18px, 2.4vw, 34px); }
.gnb a {
  position: relative; font-size: .93rem; font-weight: 600; color: var(--gray);
  padding: 8px 0; transition: color .25s var(--ease);
}
.gnb a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: var(--bronze); transform: scaleX(0); transform-origin: left;
  transition: transform .4s var(--ease);
}
.gnb a:hover { color: var(--ink); }
.gnb a.is-active { color: var(--bronze); }
.gnb a.is-active::after { transform: scaleX(1); }
.gnb__cta {
  padding: 11px 22px !important; background: var(--bronze); color: #fff !important;
  border-radius: 2px; font-weight: 700;
}
.gnb__cta::after { display: none; }
.gnb__cta:hover { background: var(--bronze-dk); }

.nav-toggle {
  display: none; width: 44px; height: 44px; border: 1px solid var(--line);
  background: none; cursor: pointer; border-radius: 2px; padding: 0;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after {
  display: block; width: 18px; height: 1.5px; background: var(--ink);
  margin-inline: auto; transition: transform .3s var(--ease), opacity .2s;
}
.nav-toggle span { position: relative; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after  { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after  { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 940px) {
  .nav-toggle { display: block; }
  .gnb {
    position: fixed; inset: auto 0 0 0; top: clamp(64px, 7vw, 82px);
    background: var(--paper); border-top: 1px solid var(--line);
    transform: translateY(-12px); opacity: 0; pointer-events: none;
    transition: opacity .3s var(--ease), transform .3s var(--ease);
    max-height: calc(100dvh - 82px); overflow-y: auto;
  }
  .gnb.is-open { opacity: 1; transform: none; pointer-events: auto; }
  .gnb ul { flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gut) 28px; }
  .gnb li + li { border-top: 1px solid var(--line-lt); }
  .gnb a { display: block; padding: 17px 0; font-size: 1.02rem; }
  .gnb a::after { display: none; }
  .gnb__cta { text-align: center; margin-top: 18px; }
}

.progress {
  position: fixed; top: 0; left: 0; height: 2px; width: 0;
  background: var(--bronze); z-index: 80; transition: width .1s linear;
}

/* ========== 5. 히어로 ========== */
.hero {
  position: relative; isolation: isolate; overflow: hidden;
  background: var(--cream);
  padding: clamp(74px, 12vw, 148px) 0 clamp(56px, 8vw, 96px);
}
/* 잎 심볼 워터마크 — 소개서 전 페이지에 반복되는 브랜드 표식 */
.hero__leaf {
  position: absolute; z-index: -1; right: -8%; top: 50%; translate: 0 -50%;
  width: clamp(360px, 52vw, 760px); opacity: .07; pointer-events: none;
  filter: saturate(0) brightness(0);
}
.hero__rule {
  position: absolute; z-index: -1; inset: 0; pointer-events: none;
  background-image: linear-gradient(to right, var(--line-lt) 1px, transparent 1px);
  background-size: calc(100% / 6) 100%;
}
.hero__label {
  display: inline-flex; align-items: center; gap: 12px; margin-bottom: 30px;
  font-size: .76rem; font-weight: 700; letter-spacing: .2em; color: var(--bronze);
}
.hero__label b { font-weight: 700; }
.hero__label i {
  font-style: normal; color: var(--gray-lt); letter-spacing: .04em;
  font-weight: 500; padding-left: 12px; border-left: 1px solid var(--line);
}
.hero h1 { max-width: 19ch; }
.hero h1 .accent { color: var(--bronze); }
.hero__body { margin-top: clamp(26px, 3.4vw, 40px); max-width: 56ch; }

.hero__stats {
  display: grid; gap: 1px; margin-top: clamp(46px, 6vw, 78px);
  background: var(--line); border-block: 1px solid var(--line);
}
@media (min-width: 640px) { .hero__stats { grid-template-columns: repeat(3, 1fr); } }
.hero__stats li { background: var(--cream); padding: 26px clamp(4px, 2vw, 26px); }
.hero__stats b {
  display: block; font-size: clamp(2.1rem, 4.6vw, 3.3rem); font-weight: 800;
  line-height: 1; letter-spacing: -.04em; color: var(--forest);
}
.hero__stats b i { font-style: normal; font-size: .42em; color: var(--bronze); margin-left: 3px; }
.hero__stats > li > span {
  display: block; margin-top: 12px; font-size: .86rem; color: var(--gray-lt); font-weight: 500;
}

/* ========== 6. 색면 슬래브 — 이 사이트의 핵심 장치 ========== */
/* 소개서의 전면 구릿빛/딥그린 간지를 웹 섹션으로 옮긴 것. 카드 격자를 대체한다. */
.slab { position: relative; isolation: isolate; overflow: hidden; padding: var(--sec-y) 0; }
.slab--bronze { background: var(--bronze); color: var(--on-dark); }
.slab--forest { background: var(--forest); color: var(--on-dark); }
.slab--cream  { background: var(--cream); }
.slab--paper  { background: var(--paper); padding: var(--sec-y) 0; }

.slab--bronze .eyebrow, .slab--forest .eyebrow { color: rgba(255,255,255,.62); }
.slab--bronze .title, .slab--forest .title,
.slab--bronze .display, .slab--forest .display { color: #fff; }
.slab--bronze .title em, .slab--forest .title em { color: var(--bronze-pale); }
.slab--bronze .lede, .slab--forest .lede { color: var(--on-dark); }

/* 슬래브 안 거대 한글 워터마크 — 「기획」「디자인」「온라인」 */
.slab__word {
  position: absolute; z-index: -1; pointer-events: none; user-select: none;
  right: clamp(-30px, -1vw, 0px); bottom: -.16em;
  font-size: clamp(7rem, 24vw, 20rem); font-weight: 900; line-height: .8;
  letter-spacing: -.06em; color: rgba(255, 255, 255, .085);
}
.slab--cream .slab__word, .slab--paper .slab__word { color: rgba(168, 103, 39, .06); }
.slab__leaf {
  position: absolute; z-index: -1; pointer-events: none;
  left: -6%; top: -18%; width: clamp(280px, 34vw, 520px); opacity: .09;
  filter: brightness(0) invert(1);
}

/* ========== 7. 헤어라인 격자 — 카드 대신 쓰는 기본 배치 ========== */
/* 카드(테두리+그림자) 없이 1px 선만으로 칸을 나눈다. 소개서 OUR STRENGTH 지면과 같은 방식. */
.rules { display: grid; gap: 0; }
.rules > li { position: relative; padding: clamp(32px, 4vw, 52px) 0; border-top: 1px solid var(--line); }
.rules > li:last-child { border-bottom: 1px solid var(--line); }
.slab--bronze .rules > li, .slab--forest .rules > li { border-color: rgba(255,255,255,.24); }

@media (min-width: 860px) {
  .rules--2 { grid-template-columns: 1fr 1fr; column-gap: clamp(40px, 5vw, 84px); }
  .rules--2 > li:nth-child(-n+2) { border-top: 1px solid var(--line); }
  .rules--2 > li:nth-last-child(-n+2) { border-bottom: 1px solid var(--line); }
  .slab--bronze .rules--2 > li, .slab--forest .rules--2 > li { border-color: rgba(255,255,255,.24); }
  /* 가운데 세로 헤어라인 */
  .rules--2 > li:nth-child(odd)::after {
    content: ""; position: absolute; top: 0; bottom: 0;
    right: calc(clamp(40px, 5vw, 84px) / -2); width: 1px; background: var(--line);
  }
  .slab--bronze .rules--2 > li:nth-child(odd)::after,
  .slab--forest .rules--2 > li:nth-child(odd)::after { background: rgba(255,255,255,.24); }
}

.rule-num {
  display: block; font-size: .78rem; font-weight: 700; letter-spacing: .18em;
  color: var(--bronze); margin-bottom: 16px;
}
.slab--bronze .rule-num, .slab--forest .rule-num { color: rgba(255,255,255,.6); }
.rule-title {
  font-size: clamp(1.22rem, 2.1vw, 1.6rem); font-weight: 800; letter-spacing: -.025em;
  line-height: 1.35; color: var(--ink); margin-bottom: 8px;
}
.slab--bronze .rule-title, .slab--forest .rule-title { color: #fff; }
.rule-en {
  display: block; font-size: .8rem; font-weight: 600; letter-spacing: .1em;
  color: var(--gray-lt); margin-bottom: 18px;
}
.slab--bronze .rule-en, .slab--forest .rule-en { color: rgba(255,255,255,.5); }
.rule-body { font-size: .97rem; line-height: 1.9; max-width: 46ch; }

/* ========== 8. 스텝 타임라인 (5단계) ========== */
.steps { counter-reset: step; border-top: 1px solid var(--line); }
.steps > li {
  display: grid; gap: 6px 30px; align-items: baseline;
  padding: clamp(26px, 3.2vw, 40px) 0; border-bottom: 1px solid var(--line);
  transition: background .4s var(--ease);
}
@media (min-width: 780px) {
  .steps > li { grid-template-columns: 130px minmax(0, 300px) 1fr; }
}
.steps > li:hover { background: var(--cream); }
.step-no {
  font-size: .82rem; font-weight: 700; letter-spacing: .16em; color: var(--bronze);
}
.step-name {
  font-size: clamp(1.2rem, 2vw, 1.5rem); font-weight: 800;
  letter-spacing: -.025em; color: var(--ink);
}
.step-desc { font-size: .95rem; color: var(--gray); }

/* ========== 9. 대행 영역 (4분면) ========== */
.quads { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 760px) { .quads { grid-template-columns: 1fr 1fr; } }
.quads > li { background: var(--paper); padding: clamp(30px, 3.6vw, 46px); }
.quads h3 {
  font-size: 1.16rem; font-weight: 800; color: var(--ink); letter-spacing: -.02em;
  padding-bottom: 16px; margin-bottom: 18px; border-bottom: 1px solid var(--line);
}
.quads ul li {
  position: relative; padding-left: 17px; font-size: .95rem; line-height: 2.1;
}
.quads ul li::before {
  content: ""; position: absolute; left: 0; top: .95em;
  width: 5px; height: 5px; background: var(--bronze); border-radius: 50%;
}

/* ========== 10. 온라인 5대 서비스 (딥그린 슬래브 안 번호 리스트) ========== */
.stack { border-top: 1px solid rgba(255,255,255,.24); }
.stack > li {
  display: grid; gap: 10px 36px; align-items: start;
  padding: clamp(30px, 3.6vw, 46px) 0; border-bottom: 1px solid rgba(255,255,255,.24);
}
@media (min-width: 880px) { .stack > li { grid-template-columns: 92px minmax(0, 340px) 1fr; } }
.stack__no {
  font-size: clamp(1.6rem, 3vw, 2.3rem); font-weight: 800; line-height: 1;
  color: rgba(255,255,255,.26); letter-spacing: -.04em;
}
.stack__name { font-size: clamp(1.16rem, 2vw, 1.45rem); font-weight: 800; color: #fff; letter-spacing: -.025em; }
.stack__en {
  display: block; margin-top: 7px; font-size: .78rem; font-weight: 600;
  letter-spacing: .08em; color: rgba(255,255,255,.5);
}
.stack__body { font-size: .95rem; line-height: 1.95; color: var(--on-dark); }

/* ========== 11. 연혁 ========== */
.era { display: grid; gap: 0; }
.era > li {
  display: grid; gap: 10px 40px; padding: clamp(28px, 3.4vw, 44px) 0;
  border-top: 1px solid var(--line);
}
.era > li:last-child { border-bottom: 1px solid var(--line); }
@media (min-width: 780px) { .era > li { grid-template-columns: 220px 1fr; } }
.era__year {
  font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 800; line-height: 1;
  letter-spacing: -.04em; color: transparent;
  -webkit-text-stroke: 1px var(--bronze);
}
.era__list li { position: relative; padding-left: 19px; font-size: .96rem; line-height: 2.05; }
.era__list li::before {
  content: ""; position: absolute; left: 0; top: .93em; width: 9px; height: 1px; background: var(--bronze);
}

/* ========== 12. IMC 순환 도식 ========== */
.diagram { margin-top: clamp(20px, 3vw, 40px); }
.diagram svg { width: 100%; height: auto; }
.dg-draw { stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.js .is-in .dg-draw { animation: draw 1.1s var(--ease) forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.dg-cap { margin-top: 26px; text-align: center; font-size: .93rem; color: var(--gray-lt); }

/* ========== 13. 포트폴리오 ========== */
/* 13-1. 실제 클라이언트 CI — 회사소개서에서 추출한 진짜 작업물 */
.clients { display: grid; gap: 1px; background: var(--line); border: 1px solid var(--line); }
@media (min-width: 560px)  { .clients { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px)  { .clients { grid-template-columns: repeat(4, 1fr); } }
.clients li {
  background: var(--paper); display: grid; place-items: center;
  padding: clamp(30px, 3.4vw, 44px) 22px; min-height: 148px;
}
.clients img {
  /* 높이만 제한하면 가로로 긴 로고가 유독 커 보인다 — 폭도 같이 묶어 무게를 맞춘다 */
  width: auto; max-height: clamp(56px, 6vw, 78px); max-width: 76%; object-fit: contain;
  /* 회색조는 정돈을 위한 것 — 로고가 안 읽힐 만큼 죽이면 신뢰 자산을 버리는 셈이다 */
  /* 흑백으로 죽이면 실제 CI 컬러라는 신뢰 자산을 버리는 셈이다 — 컬러 그대로 둔다 */
  opacity: .9;
  transition: opacity .45s var(--ease), transform .45s var(--ease);
}
.clients li:hover img { opacity: 1; transform: scale(1.04); }

/* 13-2. 전략 기획 케이스 */
.cases { border-top: 1px solid var(--line); margin-top: clamp(48px, 6vw, 76px); }
.cases > li {
  display: grid; gap: 12px 40px; padding: clamp(30px, 3.6vw, 46px) 0;
  border-bottom: 1px solid var(--line);
}
@media (min-width: 860px) { .cases > li { grid-template-columns: 128px 1fr 300px; } }
.case-no { font-size: .78rem; font-weight: 700; letter-spacing: .16em; color: var(--bronze); }
.case-title {
  font-size: clamp(1.12rem, 1.9vw, 1.42rem); font-weight: 800;
  letter-spacing: -.025em; color: var(--ink); line-height: 1.45;
}
.case-badge {
  display: inline-block; margin-top: 12px; padding: 5px 13px;
  background: var(--forest); color: #fff; font-size: .76rem; font-weight: 700;
  letter-spacing: .04em; border-radius: 2px;
}
.case-body { font-size: .94rem; line-height: 1.95; }

/* ========== 14. 문의 ========== */
.contact-grid { display: grid; gap: clamp(40px, 5vw, 72px); }
@media (min-width: 980px) { .contact-grid { grid-template-columns: minmax(0, 400px) 1fr; } }

.contact-info h3 {
  font-size: 1.3rem; font-weight: 800; letter-spacing: .04em; color: #fff; margin-bottom: 16px;
}
.contact-info p { color: var(--on-dark); font-size: .96rem; line-height: 1.95; }
.contact-dl { margin-top: 34px; border-top: 1px solid rgba(255,255,255,.24); }
.contact-dl div {
  display: flex; gap: 18px; padding: 15px 0; border-bottom: 1px solid rgba(255,255,255,.24);
}
.contact-dl dt {
  flex: 0 0 74px; font-size: .8rem; font-weight: 700; letter-spacing: .1em;
  color: rgba(255,255,255,.55);
}
.contact-dl dd { margin: 0; font-size: .95rem; color: #fff; font-weight: 500; }
.contact-dl dd a { border-bottom: 1px solid rgba(255,255,255,.4); transition: border-color .25s; }
.contact-dl dd a:hover { border-color: #fff; }


.form-card { background: var(--paper); padding: clamp(28px, 4vw, 48px); border-radius: 2px; }
.field-grid { display: grid; gap: 20px; }
@media (min-width: 620px) { .field-grid { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 8px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: .84rem; font-weight: 700; color: var(--ink); letter-spacing: .01em; }
.field label .req { color: var(--bronze); margin-left: 3px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 13px 14px; background: var(--cream);
  border: 1px solid transparent; border-bottom: 1px solid var(--line);
  border-radius: 2px; font-size: .96rem; transition: border-color .25s, background .25s;
}
.field textarea { min-height: 130px; resize: vertical; line-height: 1.8; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; background: var(--paper); border-color: var(--bronze);
}
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.consent { display: flex; gap: 11px; align-items: flex-start; margin-top: 24px; }
.consent input { margin-top: 5px; flex: 0 0 auto; accent-color: var(--bronze); }
.consent span { font-size: .85rem; line-height: 1.8; color: var(--gray-lt); }

.submit {
  width: 100%; margin-top: 26px; padding: 17px 24px; border: 0; border-radius: 2px;
  background: var(--forest); color: #fff; font-size: 1rem; font-weight: 700;
  letter-spacing: .02em; cursor: pointer; transition: background .3s var(--ease);
}
.submit:hover:not(:disabled) { background: var(--forest-lt); }
.submit:disabled { opacity: .55; cursor: not-allowed; }
.form-status {
  margin-top: 18px; padding: 13px 16px; border-radius: 2px; font-size: .9rem;
  background: rgba(15, 60, 43, .07); color: var(--forest); border-left: 3px solid var(--forest);
}
.form-status.is-error {
  background: rgba(168, 67, 39, .08); color: #a34327; border-left-color: #a34327;
}

/* ========== 15. 푸터 ========== */
.site-footer { background: var(--ink); color: rgba(255,255,255,.5); padding: clamp(44px, 5vw, 68px) 0; }
.site-footer__inner { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: center; }
.site-footer img { height: 26px; width: auto; filter: brightness(0) invert(1); opacity: .72; }
.site-footer small { font-size: .82rem; letter-spacing: .02em; }

/* ========== 16. 모션 ========== */
/* .js 클래스는 스크립트가 살아있을 때만 붙는다 — JS 실패 시 본문이 사라지는 사고 방지 */
.js .reveal { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.js .reveal.is-in { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: .09s; }
.js .reveal[data-delay="2"] { transition-delay: .18s; }
.js .reveal[data-delay="3"] { transition-delay: .27s; }
.js .reveal[data-delay="4"] { transition-delay: .36s; }
@media (prefers-reduced-motion: reduce) {
  .js .reveal { opacity: 1; transform: none; }
}

/* ========== 14. 히어로 비주얼 — 실제 캠페인 집행 현장 ========== */
/* 잎 워터마크만 있던 우측 절반이 미완성 와이어프레임처럼 읽혀서 실사로 채운다 */
.hero__grid { display: grid; gap: clamp(38px, 5vw, 64px); align-items: center; }
@media (min-width: 980px) { .hero__grid { grid-template-columns: 1fr .78fr; } }

.hero__shot { position: relative; }
.hero__shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 3 / 2; object-fit: cover;
}
.hero__shot figcaption {
  margin-top: 14px; font-size: .78rem; font-weight: 600; letter-spacing: .04em;
  color: var(--gray-lt);
}
.hero__shot figcaption b { color: var(--bronze); font-weight: 700; }
/* 사진이 들어왔으니 잎 워터마크는 제목 뒤에서 비켜 하단으로 물러난다.
   글자 뒤에 큰 도형이 깔리면 그게 곧 시각 소음이다. */
@media (min-width: 980px) {
  .hero__leaf {
    right: auto; left: -9%; top: auto; bottom: -34%; translate: none;
    width: clamp(300px, 34vw, 480px); opacity: .045;
  }
}

/* ========== 15. 실제 집행 갤러리 — 에디토리얼 모자이크 ========== */
/* 균일 카드 격자를 피하려고 12칼럼 위에 폭을 다르게 얹는다 */
.works { display: grid; gap: clamp(14px, 1.8vw, 26px); margin-top: clamp(44px, 5vw, 68px); }
@media (min-width: 760px) { .works { grid-template-columns: repeat(12, 1fr); } }

.works figure { margin: 0; position: relative; overflow: hidden; background: var(--cream-dk); }
.works img {
  width: 100%; height: 100%; display: block; object-fit: cover;
  transition: transform .7s var(--ease);
}
.works li:hover img { transform: scale(1.045); }
.works figcaption {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin-top: 14px; font-size: .82rem; line-height: 1.6;
}
.works figcaption b {
  font-size: .7rem; font-weight: 700; letter-spacing: .12em; color: var(--bronze);
  padding: 3px 9px; border: 1px solid rgba(168,103,39,.3);
}
.works figcaption span { color: var(--gray); font-weight: 500; }

@media (min-width: 760px) {
  .works li:nth-child(1) { grid-column: span 7; }   /* 디지털 */
  .works li:nth-child(2) { grid-column: span 5; }   /* 옥외 포스터 */
  .works li:nth-child(3) { grid-column: span 12; }  /* 버스 랩핑 — 전폭 배너로 리듬을 끊는다 */
  /* 마지막 줄은 네 칸을 고르게 — 2칸짜리는 너무 좁아 사진이 우표처럼 보였다 */
  .works li:nth-child(4),
  .works li:nth-child(5),
  .works li:nth-child(6),
  .works li:nth-child(7) { grid-column: span 3; }
}
.works li:nth-child(1) figure { aspect-ratio: 2 / 1; }
.works li:nth-child(2) figure { aspect-ratio: 3 / 2; }
.works li:nth-child(3) figure { aspect-ratio: 3 / 1; }
.works li:nth-child(4) figure,
.works li:nth-child(5) figure { aspect-ratio: 4 / 3; }
.works li:nth-child(6) figure,
.works li:nth-child(7) figure { aspect-ratio: 3 / 4; }
/* 좁은 화면에서는 전폭 배너의 3:1 이 너무 납작해진다 */
@media (max-width: 759px) { .works li:nth-child(3) figure { aspect-ratio: 5 / 2; } }

/* 소제목 — 실적 섹션 안에서 갤러리와 로고 격자를 나눈다 */
.sub-head {
  margin-top: clamp(64px, 8vw, 104px); padding-top: clamp(26px, 3vw, 38px);
  border-top: 1px solid var(--line);
}
.sub-head h3 {
  font-size: clamp(1.15rem, 2.1vw, 1.5rem); font-weight: 800; letter-spacing: -.03em;
}
.sub-head p { margin-top: 10px; font-size: .9rem; color: var(--gray); }

/* ========== 16. 색면 슬래브 안의 실사 — 글만 있던 구간을 끊는다 ========== */
.slab-shot { margin: clamp(40px, 5vw, 64px) 0 0; }
.slab-shot img { width: 100%; height: auto; display: block; }
.slab-shot figcaption {
  margin-top: 13px; font-size: .8rem; font-weight: 500; letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
.slab-shot figcaption b { color: #fff; font-weight: 700; }

/* 캠페인 — 헤드 옆에 나란히 세워 첫 화면에서 바로 실물이 보이게 한다 */
@media (min-width: 980px) {
  .campaign__top { display: grid; grid-template-columns: 1fr .62fr; gap: clamp(40px, 5vw, 76px); align-items: end; }
  .campaign__top .slab-shot { margin-top: 0; }
}
.campaign__top .slab-shot img { aspect-ratio: 3 / 2; object-fit: cover; }

/* 온라인 — 원본이 1:5 세로라 그대로 두면 섹션을 통째로 잡아먹는다.
   폰 화면 비율로 잘라 위쪽(첫 화면)만 보여준다. */
.online__shot { max-width: 244px; }
.online__shot img {
  aspect-ratio: 9 / 16; object-fit: cover; object-position: top center;
  border: 1px solid rgba(255,255,255,.16);
}
@media (min-width: 980px) {
  .online__top { display: grid; grid-template-columns: 1fr auto; gap: clamp(40px, 5vw, 80px); align-items: center; }
  .online__top .slab-shot { margin-top: 0; }
}