/* ==========================================================================
   손으로 쓴 화면의 공용 스타일 — style.css
   Reference: imweb.me (레이아웃·인터랙션 패턴). 색·글꼴은 브랜드 톤앤매너를 따른다
   ========================================================================== */

:root {
  color-scheme: light dark;
  /* ── 역할 토큰 ─────────────────────────────────────────────────────
     같은 «검정»이라도 «어두운 칩의 바탕»과 «본문 글자»는 다른 것이다.
     둘을 한 이름으로 쓰면 어두운 화면에서 한쪽이 반드시 깨진다.
     밝은 화면의 값은 지금과 같다 — 여기서는 아무것도 달라지지 않는다. */
  --bg:        #ffffff;            /* 페이지 바탕 */
  --surface:   #ffffff;            /* 카드·패널 바탕 */
  --surface-2: #f1f1f3;            /* 옅게 채운 바탕 */
  --line:      #c7c7cf;            /* 테두리 */
  --fg:        #1c1c1f;            /* 본문 글자 */
  --fg-strong: #0a0a0b;            /* 제목·강조 글자 */
  --muted:     #606069;            /* 흐린 글자 — 대표 결정(2026-09-25) 4.5:1 이 되는 만큼만 진하게(투명도 아닌 같은 계열 진하기) */
  --muted-2:   #404049;            /* 보조 글자 — 대표 결정(2026-09-25 위계) 흐린 글자와 고르게 벌어지도록 본문 쪽으로 진하게 */
  --chip:      #0a0a0b;            /* «일부러 어두운» 칩·버튼 바탕 (글자는 흰색) */
  --glass:     rgba(255, 255, 255, 0.86);  /* 스크롤 시 상단바의 반투명 바탕 */

  --black: #0a0a0b;
  --black-soft: #141416;
  --ink: #1c1c1f;
  --gray-900: #232326;
  --gray-700: #4a4a52;
  --gray-500: #82828c;
  --gray-300: #c7c7cf;
  --gray-100: #f1f1f3;

  /* 🔴 «늘 어두운 자리» 위에 얹는 글자색이다. 화면을 밝게 보든 어둡게 보든
     그 자리는 어두우므로 이 둘은 뒤집지 않는다. --white 를 직접 쓰면
     «흰색» 이라는 이름이 «밝은 바탕» 으로 오해돼 어두운 화면에서 사라진다. */
  --ondark-fg:    #ffffff;
  --ondark-muted: #c7c7cf;
  --white: #ffffff;
  --accent: #ff5a1f;
  --accent-dark: #e2440c;
  --accent-soft: #fff1ea;
  /* 레드팀 4차(2026-09-25) — gl-shop.css 가 var(--danger, #c0392b) 로 다섯 곳(오류 문구 ·
     품절 배지 등)을 쓰는데 엔진에 --danger 가 없어 대체값이 늘 나갔다. 어두운 화면에서
     3.04~3.48:1 로 미달 — 두 모드 모두 4.5 이상 나게 값을 새로 둔다(빨강 계열, 최소값). */
  --danger: #c0392b;
  --ok: #1e7a3f; /* gl-shop.css 의 var(--ok, #2a8a4a) 도 4.5 미달(4.35:1) — 같이 둔다 */
  --radius-lg: 28px;
  --radius-md: 18px;
  --radius-sm: 10px;
  --shadow-soft: 0 20px 60px rgba(10, 10, 11, 0.08);
  --shadow-hard: var(--shadow-soft); /* 2026-09-25 그림자 한 종으로 통일 */
  --container: 1180px;
  --ease: cubic-bezier(0.16, 1, 0.3, 1);
  /* gl-theme.js 가 theme.config.js 값과 서버 설정으로 이 변수를 덮어씀 */
  --font-family: "Pretendard", -apple-system, BlinkMacSystemFont, "Malgun Gothic", "Apple SD Gothic Neo", sans-serif;

  /* ── 글자 크기 · 세로 리듬 한 벌 (2026-09-23 소유자 「레퍼런스 사이트 기준으로」) ──
     🔴 화면마다 clamp() 를 새로 적지 않는다. 종전에는 다섯 곳에 흩어져 있어서
        섹션 제목 여덟 개가 전부 같은 크기(42px)로 굳었고, 섹션 여백도 120px 한
        값이라 화면이 처음부터 끝까지 같은 박자로 흘렀다.
     잰 값으로 기준을 삼았다 (1440px) —
        Linear  제목 64 · 줄간격 1.0 · 굵기 510 / 섹션 제목 48~72 / 본문 15 · 1.55
        29CM    Pretendard · 각진 사진(4:5) · 라벨 13
     그대로 베끼지는 않는다. 한글은 같은 크기에서 더 빽빽해 보여 줄간격을
     1.04~1.12 로 두고, 굵기는 800 → 700 으로 낮춰 덩어리져 보이는 것을 푼다. */
  --t-display: clamp(40px, 6.2vw, 84px);   /* 첫 화면 제목 */
  --t-h2:      clamp(30px, 4.2vw, 56px);   /* 섹션 제목 */
  --t-h3:      clamp(20px, 2.1vw, 26px);
  --t-lead:    clamp(17px, 1.5vw, 20px);   /* 제목 밑 설명 */
  --t-body:    16px;
  --t-label:   13px;                        /* 제목 위 짧은 글(eyebrow) */
  --lh-display: 1.04;
  --lh-h2:      1.12;
  --lh-text:    1.7;
  --ls-display: -0.035em;
  --ls-h2:      -0.03em;
  --w-display:  700;

  /* 세로 리듬 — 섹션 여백이 한 값이면 «어디가 중요한지» 가 안 보인다.
     좁은 화면에서 88px 까지 줄고 넓은 화면에서 160px 까지 벌어진다. */
  --sp-section: clamp(88px, 9vw, 160px);
  --sp-head:    clamp(40px, 4vw, 72px);

  /* 소셜 로그인 제공사 색 — 카카오 · 네이버가 «이 색으로 쓰라» 고 정해 둔 것이다.
     우리 브랜드 3색(블랙 · 화이트 · 오렌지)에 없지만, 버튼을 알아보는 것이 그 색
     자체이므로 예외로 둔다. 🔴 화면마다 적지 않는다 — 여기 한 곳이다 (2026-09-23). */
  --kakao: #FEE500;
  --kakao-fg: #191600;
  --naver: #03C75A;
  --naver-fg: #ffffff;
}

* { box-sizing: border-box; }

/* 🔴 상단바가 position:fixed 라 «본문 위에 떠» 있다. 앵커(#business 같은 것)로
   뛰면 브라우저는 그 칸의 «맨 위» 를 화면 맨 위에 맞추는데, 그 자리는 이미
   상단바가 덮고 있다 — 눈표(BUSINESS)와 제목 윗줄이 바 뒤로 들어가서
   «애매한 데 섰다» 로 보인다. 위에서 뛰든 아래에서 뛰든 똑같이 어긋난다.

   scroll-padding-top 은 «앵커로 설 때만» 쓰는 여백이라, 손으로 굴리는
   스크롤은 건드리지 않는다. 상단바 높이(--nav-h)에 숨 쉴 틈(--anchor-gap)을
   더한다. 값을 두 곳에 적지 않는다 — 바 높이가 바뀌면 여기 하나만 고친다. */
:root {
  --nav-h: 64px;        /* .nav.scrolled — 위아래 12px + 안쪽 40px */
  --anchor-gap: 24px;   /* 제목이 바에 «붙어» 보이지 않을 만큼의 틈 */
}
html { scroll-behavior: smooth; }

/* 앵커로 뛰어 서는 칸은 상단바 아래에 선다. */
[id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap)); }

/* 🔴 화면을 붙잡는 구간(gl-pin)만은 여백을 두지 않는다.
   그 구간은 «화면을 꽉 채운 채로 걸리는 것» 이 목적이라, 상단바만큼 위에
   세우면 걸리기 직전의 어중간한 자리에 선다 — 제목 아래로 첫 제품이 반쯤
   잘려 보이는, 걸린 것도 아니고 안 걸린 것도 아닌 그 자리다.
   딱 0 에 세우면 스크롤하다 걸린 그 순간과 같은 화면이 되고, 1번째가 나온다. */
.gl-pin[id] { scroll-margin-top: 0; }

/* 붙잡지 않는 모양(「동작 줄이기」)에서는 보통 칸과 같다.
   여기서 0 을 두면 첫 줄이 상단바 뒤로 들어간다.
   두 갈래로 적는다 — 스크립트가 붙여 주는 표시(gl-pin-flat)와,
   스크립트가 아예 안 도는 자리를 위한 설정 자체. 한쪽만 적으면 나머지가 샌다. */
.gl-pin-flat[id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap)); }
@media (prefers-reduced-motion: reduce) {
  .gl-pin[id] { scroll-margin-top: calc(var(--nav-h) + var(--anchor-gap)); }
}

body {
  margin: 0;
  font-family: var(--font-family);
  color: var(--fg);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  /* 히어로의 빗금 띠가 화면 밖으로 나가므로 가로 넘침을 잘라 낸다.
     🔴 hidden 을 쓰면 안 된다 — body 가 «스크롤 상자»가 되어 그 안의
     position:sticky 가 화면이 아니라 이 상자를 기준으로 붙는다.
     그러면 화면 고정 구간(gl-pin)이 위아래 방향에 따라 다르게 어긋난다.
     clip 은 «자르기만» 하고 스크롤 상자를 만들지 않아 sticky 가 멀쩡하다. */
  overflow-x: clip;
}

/* clip 을 모르는 옛 브라우저를 위한 대비.
   그쪽에서는 sticky 가 제대로 안 될 수 있지만, 가로로 밀려 보이는 것보다는 낫다. */
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* 제목 글꼴 — theme.config.js 의 font.heading 이 있을 때만 (gl-theme.js 가
   --font-heading 과 data-font-heading 을 함께 건다). 없는 브랜드는 이 줄이
   아예 걸리지 않아 지금 화면이 글자 하나 바뀌지 않는다.
   :where() 로 점수를 0 으로 두어, 화면마다 제목에 따로 준 글꼴이 있으면 그것이 이긴다. */
:root[data-font-heading] :where(h1, h2, h3) { font-family: var(--font-heading); }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 32px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--fg-strong); /* 대표 결정(2026-09-25 H1) — 글자는 역할 색, 주황은 앞선(::before)만 */
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--accent);
  display: inline-block;
}

/* ---------- 로고 (실제 그림 파일은 brands/<슬러그>/assets/ 에 둔다) ---------- */
.logo-mark {
  display: inline-flex;
  align-items: center;
  /* 상단바가 좁아져도 이름을 꺾거나 줄이지 않는다 — 넘치면 메뉴가 ⋯ 로 접힌다 */
  flex-shrink: 0;
  white-space: nowrap;
  gap: 10px;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.logo-mark .logo-box {
  width: 36px;
  height: 36px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  flex-shrink: 0;
  /* 🔴 2026-09-25 레드팀 M1 — `border` 는 박스 모형(box-sizing:border-box)에 끼어들어
     안쪽 사진이 36→34px 로 줄고 또렷한 회색 틀이 됐다. `outline` 은 박스 크기에 관여하지
     않으면서 같은 자리에 그려진다 — 사진 크기는 그대로 두고 옅은 테두리만 얹는다.
     그림자(box-shadow)로 쓰지 않는 것은 그림자는 --shadow-soft 한 종만 쓰기로 정리했기
     때문이다(2026-09-25). */
  outline: 1px solid var(--line);
  outline-offset: -1px;
}
.logo-mark .logo-box img { width: 100%; height: 100%; object-fit: cover; display: block; }
.logo-mark .logo-text {
  font-size: 17px;
  font-weight: 700;
  color: var(--fg-strong);
  line-height: 1;
  letter-spacing: -0.01em;
}
.logo-mark.on-dark .logo-text { color: var(--ondark-fg); }

/* 영문 이름은 국문 옆에 작게 붙는다 — 마르다 Martha 와 같은 모양이다.
   좁은 화면에서는 뺀다. 두 낱말이 겹치면 둘 다 안 읽힌다. */
.logo-mark .logo-en {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
  line-height: 1;
  letter-spacing: 0.01em;
  margin-left: 6px;
}
.logo-mark.on-dark .logo-en { color: var(--ondark-muted, var(--muted)); }
@media (max-width: 640px) { .logo-mark .logo-en { display: none; } }

/* ---------- Nav ---------- */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 18px 0;
  /* 🔴 2026-09-25 레드팀 L2 — 밑줄(border-bottom)이 굴러서 나타날 때 색만 바뀌도록
     투명한 테두리를 미리 깔아 둔다(너비가 그대로라 밀림이 없다). */
  border-bottom: 1px solid transparent;
  transition: background 0.3s var(--ease), border-color 0.3s var(--ease), padding 0.3s var(--ease);
}
.nav.scrolled {
  background: var(--glass);
  backdrop-filter: blur(14px) saturate(140%);
  /* 🔴 2026-09-25 — 그림자 대신 밑줄 하나(그림자는 --shadow-soft 한 종으로 정리) */
  border-bottom-color: var(--line);
  padding: 12px 0;
}
.nav .container { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
/* 🔴 상단바 글자는 꺾지 않는다 (2026-09-13 소유자 제보 — 「너무 볼품 없어」).
   메뉴가 많으면 글자가 두 줄로 꺾이고 버튼이 한 글자씩 세로로 쌓였다. 꺾는 대신
   넘치면 메뉴를 ⋯ 버튼으로 접는다 — main.js 가 재어 보고 정한다. */
.nav-right { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.nav-links {
  display: flex; align-items: center; gap: 36px;
  /* 스크립트가 돌기 전에도 오른쪽 버튼을 덮지 않게 넘치는 것은 가린다.
     안쪽 여백은 키보드 초점 테두리가 잘리지 않을 자리다. */
  min-width: 0; overflow: hidden; padding: 4px; margin: -4px;
}
.nav-links a {
  white-space: nowrap;
  flex-shrink: 0;
  font-size: 15px;
  font-weight: 700;
  color: var(--muted-2);
  position: relative;
  padding: 6px 0;
  transition: color 0.2s;
}
.nav-links a:hover { color: var(--fg-strong); }
.nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 2px;
  background: var(--accent);
  transition: width 0.25s var(--ease);
}
.nav-links a:hover::after { width: 100%; }

.nav-cta {
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--chip);
  color: var(--ondark-fg);
  font-weight: 700;
  font-size: 14px;
  padding: 11px 20px;
  border-radius: 100px;
  border: none;
  transition: transform 0.25s var(--ease), background 0.25s;
}
.nav-cta:hover { background: var(--accent); color: var(--on-accent, var(--black)); transform: translateY(-2px); } /* 대표 결정(2026-09-25) */

.nav-burger {
  display: none;
  width: 40px; height: 40px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  align-items: center;
  justify-content: center;
}
.nav-burger span, .nav-burger span::before, .nav-burger span::after {
  content: "";
  display: block;
  width: 18px; height: 2px;
  background: var(--chip);
  position: relative;
  transition: all 0.25s;
}
.nav-burger span::before { position: absolute; top: -6px; }
.nav-burger span::after { position: absolute; top: 6px; }

.mobile-menu {
  position: fixed;
  inset: 0;
  background: var(--surface);
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 32px;
  gap: 28px;
  transform: translateY(-100%);
  transition: transform 0.4s var(--ease);
}
.mobile-menu.open { transform: translateY(0); }
.mobile-menu a { font-size: 28px; font-weight: 700; }
.mobile-menu .mm-close {
  position: absolute; top: 24px; right: 32px;
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px;
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  padding: 168px 0 120px;
  /* 🔴 2026-09-25 — 종전에는 주황 번짐(radial-gradient)과 배경 번짐(linear-gradient)
     둘을 겹쳐 썼다. AI 티 기준(그라데이션 5 이하)을 넘기는 자리라 하나만 남긴다 —
     옅은 배경 번짐 하나로도 화면 위아래 톤 차이는 충분히 난다 (레퍼런스 §9 «명암을
     잘게 바꾸지 않는다»). */
  background: linear-gradient(180deg, var(--bg) 0%, var(--surface-2) 100%);
  overflow: hidden;
}
/* 🔴 첫 화면 배경 패턴. 여기에 «무슨 패턴인지» 를 적지 않는다.
   종전에는 경고테이프 빗금이 박혀 있었다. 그래서 교회든 병원이든 새 브랜드를
   올리면 공사장 빗금이 함께 깔렸다. 패턴는 브랜드가 고르는 것이다 —
   목록은 layout/patterns.json, 그리는 규칙은 gl-pattern.css 에 있다.
   자리(position)만 여기서 잡아 준다. */
.hero-stripe {
  position: absolute;
  top: 0;
  height: 100%;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }
.hero-inner { max-width: 720px; }
/* 첫 화면 오른쪽 그림 (hero slots.visual · 2026-09-17 소유자 시안)
   넓은 화면: 프레임 · 중심점 · 크기(2026-09-19 소유자 새 스펙, 아래) · 좁은 화면
   (휴대폰 · 태블릿): 글 뒤에 흐릿하게 — 제목 · 버튼을 밀어내지 않는다 */
.hero-visual { position: absolute; z-index: 0; pointer-events: none;
  width: min(38vw, 500px);
  /* 세로 «프레임 비율»(--gl-vyr, 2026-09-20 소유자 「화면의 비율로 할 수 있는 옵션」) —
     0 은 지금 자리, ±100(=±1)은 첫 화면 위 · 아래 끝이다. transform 의 퍼센트는
     «그림 자신» 을 재기 때문에 여기(top)에 둔다 — top 의 퍼센트라야 첫 화면 높이를 잰다. */
  top: calc(50% + var(--gl-vyr, 0) * 50%);
  /* 자리 · 크기 조절(--gl-vx · --gl-vy · --gl-vs, 2026-09-19 소유자) — translateY(-50%) 는
     늘 «원래 크기» 기준이라(퍼센트는 배율 뒤에 다시 안 잰다) scale 을 뒤에 둬도 가운데를
     지킨다. 안 정하면 0 · 배율 1 — 지금까지와 같은 자리다. */
  /* 가로 «프레임 비율»(--gl-vxr) — 프레임 중점(0)에서 양 극점(±1)까지를 잰다.
     한 칸의 길이 --gl-vhalf 는 자리(left)를 정하는 곳마다 함께 정한다. */
  transform: translate(calc(-50% + var(--gl-vx, 0px) + var(--gl-vxr, 0) * var(--gl-vhalf, 0px)),
                       calc(-50% + var(--gl-vy, 0px))) scale(var(--gl-vs, 1));
  /* 흐리기는 «감싼 칸» 이 맡는다. 값이 없으면 100% — 지금까지와 같다. */
  opacity: calc(var(--gl-op, 100) / 100); }
.hero-visual img,
.hero-visual picture { display: block; width: 100%; height: auto; }
/* 🔴 gl-style.css 의 공용 규칙(`[style*="--gl-op"] :is(img,video)`)이 이 그림에도 걸린다.
   그대로 두면 칸과 그림에 흐리기가 두 번 곱해져 설정값보다 훨씬 옅어진다.
   여기서 그림은 늘 1 로 못박고, 흐리기는 위의 칸 하나만 맡게 한다. */
.hero .hero-visual img { opacity: 1; }

/* 크기마다 다른 흐리기 (2026-09-18 소유자 «로고 옵션은 플랫폼별로»).
   기본값 22 는 종전에 이 자리에 박혀 있던 값이다 — 아무것도 안 정하면 지금 그대로다.
   🔴 경계값은 gl-render.js 의 <picture> media 와 같아야 한다. */
@media (max-width: 1100px) {
  /* 🔴 태블릿 · 휴대폰 기본 자리 — 넓은 화면과 같은 계산(2026-09-19 소유자
     「태블릿·휴대폰도 프레임 스펙으로 넓혀줘」, 예전 -14%/-100px 임시방편 대신).
     top·width·흐리기(22%)는 고유값 그대로. 프레임·중심점·크기를 고르면 아래가 덮는다. */
  .hero-visual { left: calc((55vw + min(100vw, 50vw + (var(--container, 1180px) / 2))) / 2); right: auto;
    --gl-vhalf: calc((min(100vw, 50vw + (var(--container, 1180px) / 2)) - 55vw) / 2);
    top: calc(96px + var(--gl-vyr-t, 0) * 50%); width: min(78vw, 460px);
    transform: translate(calc(-50% + var(--gl-vx-t, 0px) + var(--gl-vxr-t, 0) * var(--gl-vhalf, 0px)),
                         var(--gl-vy-t, 0px)) scale(var(--gl-vs-t, 1));
    opacity: calc(var(--gl-op-t, 22) / 100); }
}
@media (max-width: 640px) {
  /* 휴대폰만의 자리 · 크기를 안 정했으면 태블릿 것을 그대로 쓴다 — 지금까지 태블릿
     자리를 공짜로 물려받던 것과 같은 모양을 지킨다. 정하면 휴대폰 값이 이긴다. */
  .hero-visual {
    top: calc(96px + var(--gl-vyr-p, var(--gl-vyr-t, 0)) * 50%);
    transform: translate(calc(-50% + var(--gl-vx-p, var(--gl-vx-t, 0px))
                              + var(--gl-vxr-p, var(--gl-vxr-t, 0)) * var(--gl-vhalf, 0px)),
                         var(--gl-vy-p, var(--gl-vy-t, 0px)))
               scale(var(--gl-vs-p, var(--gl-vs-t, 1)));
    opacity: calc(var(--gl-op-p, 22) / 100); }
}

/* 크기마다 숨기기 — 값이 실릴 때만 걸린다 (보임이 기본).
   흐리기·그림 파일은 «비우면 위 크기 것을 물려받지만», 숨기기는 칸마다 따로다 —
   켜고 끄는 것은 물려받으면 어느 쪽을 끈 것인지 알 수 없어진다. */
@media (min-width: 1101px) { .hero.gl-lgw-off .hero-visual { display: none; } }
@media (min-width: 641px) and (max-width: 1100px) { .hero.gl-lgt-off .hero-visual { display: none; } }
@media (max-width: 640px) { .hero.gl-lgp-off .hero-visual { display: none; } }
/* 넓은 화면 칸이 비고 태블릿 · 휴대폰 칸만 있을 때 (gl-render.js hero — 2026-09-24).
   경계값은 바로 위 세 줄과 같다. */
@media (min-width: 1101px) { .hero-visual.gl-vis-nowide { display: none; } }
@media (min-width: 641px) and (max-width: 1100px) { .hero-visual.gl-vis-notab { display: none; } }

/* 로고 «프레임 · 중심점 · 크기» (2026-09-19 소유자 새 스펙 「이렇게 해보자」 →
   「태블릿·휴대폰도 프레임 스펙으로 넓혀줘」). 예전 «가로 정렬(오른쪽 · 가운데 ·
   왼쪽, 화면 위 임의의 세 점)» 을 대신한다 — 대신 실제로 뜻이 있는 자리를 가리킨다.
   크기(넓은 화면 · 태블릿 · 휴대폰) 셋 다 같은 이름 · 같은 계산을 쓰고, 클래스만
   크기별 접미사(없음/-t-/-p-)로 나뉜다.

     · 프레임 = 패턴 · 로고가 서는 쪽(오른쪽 기본 · 왼쪽). gl-pattern.css 의
       [data-gl-pat-where="right"|"left"] 와 같은 자리 — 오른쪽 45vw([55vw,100vw]),
       왼쪽 45vw([0,45vw]). 왼쪽을 고르면 패턴(.hero-stripe)도, 문구(.hero-inner)도
       반대편으로 넘어간다 — 패턴과 문구가 같은 쪽에 서면 안 되기 때문이다. 패턴이
       «시작» 하는 안쪽 끝(55vw·45vw)은 늘 그대로지만, «바깥쪽» 끝은 화면 끝이
       아니라 외곽 프레임(안내선, --container)에서 멈춘다(소유자 「패턴 전체가
       아니라 외곽 프레임을 끝점으로」) — 패턴(장식)은 화면 끝까지 깔려도 로고
       (내용)는 실제 콘텐츠 경계를 안 넘긴다.
     · 중심점 = 로고 가운데를 어디에 두나. 패턴(기본, 프레임의 가운데) · 문구
       (프레임 반대편, 문구가 서는 자리의 가운데) · 전체(50vw, 프레임과 무관).
     · 크기 = 절대(기본, 위 width 그대로) · 프레임 비율(중심점이 속한 자리에
       가로 · 세로 어느 쪽도 안 넘치게 꽉 찬다 — object-fit:contain 으로 그림의
       실제 비율과 상관없이 그 자리 안에 맞춘다).

   숫자(55vw · 45vw)는 하나만 쓴다 — gl-pattern.css 의 right:-10%·width:55% 가
   .hero{overflow:hidden} 에 잘려 보이는 몫과 같은 값이다. 늘려 쓰면 패턴 자리를
   고칠 때 여기만 남는다. */
@media (min-width: 1101px) {
  /* 🔴 패턴 자리의 «바깥쪽 끝» 은 화면 끝(100vw)이 아니라 외곽 프레임(안내선,
     --container 콘텐츠 경계)에서 멈춘다(2026-09-19 소유자 「패턴 전체가 아니라
     외곽 프레임을 끝점으로 했으면 좋겠어」·「이게 제한점이었으면 좋겠다는거야」,
     스크린샷으로 확인 — 화면이 아주 넓으면 패턴(장식 배경)은 화면 끝까지 깔려도
     되지만 로고(내용)는 실제 콘텐츠가 끝나는 자리를 넘으면 안 된다). 패턴이
     «시작» 하는 안쪽 끝(55vw · 45vw)은 그대로다 — gl-pattern.css 의 자리 그 자체라
     콘텐츠 경계와 무관하다.
       · 외곽 프레임 오른쪽 끝 = min(100vw, 50vw + --container/2)
         (넓혀도 100vw 를 넘지 않는다 — 화면이 좁아 안내선이 아직 안 뜨는 폭에서는
         100vw 그대로 써 예전과 같다. 안내선 계산과 같은 식이다)
       · 외곽 프레임 왼쪽 끝 = max(0vw, 50vw − --container/2) */
  /* 🔴 자리(left)를 정하는 곳마다 «중점에서 극점까지»(--gl-vhalf)를 함께 정한다.
     한쪽만 고치면 가로 비율 슬라이더가 다른 자리를 재게 된다 (2026-09-20 소유자). */
  .hero-visual { left: calc((55vw + min(100vw, 50vw + (var(--container, 1180px) / 2))) / 2);
    --gl-vhalf: calc((min(100vw, 50vw + (var(--container, 1180px) / 2)) - 55vw) / 2); }
  .hero.gl-hco-text .hero-visual { left: 27.5vw; --gl-vhalf: 27.5vw; }   /* 문구 자리 [0,55vw] 의 가운데 */
  .hero.gl-hco-all .hero-visual  { left: 50vw; --gl-vhalf: 50vw; }        /* 첫 화면 전체의 가운데 */
  /* 프레임 왼쪽 — 패턴 · 문구 자리를 맞바꾼다 */
  .hero.gl-hfr-left .hero-visual { left: calc((max(0vw, 50vw - (var(--container, 1180px) / 2)) + 45vw) / 2);
    --gl-vhalf: calc((45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))) / 2); }
  .hero.gl-hfr-left.gl-hco-text .hero-visual { left: 72.5vw; --gl-vhalf: 27.5vw; }  /* 문구 자리 [45vw,100vw] 의 가운데 */
  .hero.gl-hfr-left .hero-stripe { left: -10%; right: auto; }
  .hero.gl-hfr-left .hero-inner { margin-left: auto; margin-right: 0; }

  /* 크기 — 프레임 비율(상대). 중심점이 속한 자리에 «가로든 세로든 넘치지 않는» 것이
     기본 100% 다(2026-09-19 소유자 — 처음엔 가로만 꽉 채웠더니 방패 그림이 세로로
     길어(3969×4451) 첫 화면 높이를 넘어 42% 가 위아래로 잘렸다. 「가로든 세로든
     넘치지 않도록 하는게 기본 100%」 로 다시 정함. 중심점(패턴 · 문구 · 전체) 도
     같은 규칙이다).
       · 감싼 칸(.hero-visual)을 «그 자리 폭 × 첫 화면 높이» 상자로 두고
       · 그림 자체는 object-fit: contain 으로 그 상자 «안에» 원래 비율 그대로
         맞춘다 — 그림의 실제 가로세로 비율을 여기 숫자로 안 적어도 넘치지 않는다
         (비율이 다른 로고로 바꿔도 그대로 맞다).
     「크기」 슬라이더(scale, 위 base 규칙)가 100% 위아래로 «더 크게 · 더 작게» 를
     잰다. 절대(기본)는 위 width: min(38vw,500px) · height: auto 그대로. */
  /* 패턴 중심점(기본)은 위 자리 계산과 같은 이유로 폭도 외곽 프레임에서 멈춘다 —
     자리(중심)가 안쪽으로 들어오는데 폭은 그대로 45vw 면 다시 밖으로 넘친다. */
  .hero.gl-hsm-relative .hero-visual { height: 100%;
    width: calc(min(100vw, 50vw + (var(--container, 1180px) / 2)) - 55vw); }
  .hero.gl-hfr-left.gl-hsm-relative .hero-visual {
    width: calc(45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))); }
  .hero.gl-hsm-relative.gl-hco-text .hero-visual { width: 55vw; }
  /* 「전체」도 같은 이유로 화면 진짜 끝이 아니라 콘텐츠 경계(--container)에서
     멈춘다(2026-09-19 소유자 「프레임과 전체 크기를 비교해서 전체크기가
     안쪽이면 전체 크기 안으로」) — 화면이 아주 넓으면 100vw 는 콘텐츠보다
     훨씬 넓어진다. 자리(가운데, 50vw)는 --container 도 가운데 정렬이라
     그대로 맞다 — 폭만 묶는다. */
  .hero.gl-hsm-relative.gl-hco-all .hero-visual  { width: min(100vw, var(--container, 1180px)); }
  .hero.gl-hsm-relative .hero-visual img { width: 100%; height: 100%; object-fit: contain; }
}
@media (min-width: 641px) and (max-width: 1100px) {
  /* 태블릿 프레임 · 중심점 · 크기 — 넓은 화면과 같은 이름 · 같은 계산, 자기 크기의
     var(-t)/클래스(-t-)만 쓴다(2026-09-19 소유자 「태블릿·휴대폰도 프레임 스펙으로
     넓혀줘」). 기본(둘 다 안 고른 상태)은 위 공유 규칙(오른쪽 · 패턴 · 절대)이다.
     정렬처럼 크기마다 따로다 — 태블릿에서 왼쪽을 골라도 휴대폰은 그대로다. */
  .hero.gl-hco-t-text .hero-visual { left: 27.5vw; --gl-vhalf: 27.5vw; }
  .hero.gl-hco-t-all .hero-visual  { left: 50vw; --gl-vhalf: 50vw; }
  .hero.gl-hfr-t-left .hero-visual { left: calc((max(0vw, 50vw - (var(--container, 1180px) / 2)) + 45vw) / 2);
    --gl-vhalf: calc((45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))) / 2); }
  .hero.gl-hfr-t-left.gl-hco-t-text .hero-visual { left: 72.5vw; --gl-vhalf: 27.5vw; }
  .hero.gl-hfr-t-left .hero-stripe { left: -10%; right: auto; }
  .hero.gl-hfr-t-left .hero-inner { margin-left: auto; margin-right: 0; }

  /* 크기 = 프레임 비율(상대) — 넓은 화면과 같은 이유(가로든 세로든 안 넘친다).
     top·height 를 넓은 화면처럼 가운데 기준으로 바꿔야 «자리에 맞춰 커진» 그림이
     아래로 넘치지 않는다(기본 top:96px 는 «작게, 위쪽에 살짝» 자리라 안 맞다). */
  .hero.gl-hsm-t-relative .hero-visual { top: calc(50% + var(--gl-vyr-t, 0) * 50%); height: 100%;
    width: calc(min(100vw, 50vw + (var(--container, 1180px) / 2)) - 55vw);
    transform: translate(calc(-50% + var(--gl-vx-t, 0px) + var(--gl-vxr-t, 0) * var(--gl-vhalf, 0px)),
                         calc(-50% + var(--gl-vy-t, 0px))) scale(var(--gl-vs-t, 1)); }
  .hero.gl-hfr-t-left.gl-hsm-t-relative .hero-visual {
    width: calc(45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))); }
  .hero.gl-hsm-t-relative.gl-hco-t-text .hero-visual { width: 55vw; }
  .hero.gl-hsm-t-relative.gl-hco-t-all .hero-visual  { width: min(100vw, var(--container, 1180px)); }
  .hero.gl-hsm-t-relative .hero-visual img { width: 100%; height: 100%; object-fit: contain; }
}
@media (max-width: 640px) {
  /* 휴대폰 프레임 · 중심점 · 크기 — 안 고르면 위 공유 규칙(태블릿과 같은 기본) 그대로다.
     자리 · 흐리기와 달리 «무엇을 고를지» 는 물려받지 않는다(숨기기와 같은 이유 —
     물려받으면 태블릿에서 무엇을 골랐는지가 휴대폰에서 뭘 골랐는지를 가려 버린다). */
  .hero.gl-hco-p-text .hero-visual { left: 27.5vw; --gl-vhalf: 27.5vw; }
  .hero.gl-hco-p-all .hero-visual  { left: 50vw; --gl-vhalf: 50vw; }
  .hero.gl-hfr-p-left .hero-visual { left: calc((max(0vw, 50vw - (var(--container, 1180px) / 2)) + 45vw) / 2);
    --gl-vhalf: calc((45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))) / 2); }
  .hero.gl-hfr-p-left.gl-hco-p-text .hero-visual { left: 72.5vw; --gl-vhalf: 27.5vw; }
  .hero.gl-hfr-p-left .hero-stripe { left: -10%; right: auto; }
  .hero.gl-hfr-p-left .hero-inner { margin-left: auto; margin-right: 0; }

  /* 크기 = 프레임 비율(상대). transform 은 자리·크기 슬라이더처럼 휴대폰만의 값이
     없으면 태블릿 것을 물려받는다(-p, fallback -t) — 이건 자리 값이라 고르는 것
     (sizeMode 클래스)과는 다르다. */
  .hero.gl-hsm-p-relative .hero-visual { top: calc(50% + var(--gl-vyr-p, var(--gl-vyr-t, 0)) * 50%); height: 100%;
    width: calc(min(100vw, 50vw + (var(--container, 1180px) / 2)) - 55vw);
    transform: translate(calc(-50% + var(--gl-vx-p, var(--gl-vx-t, 0px))
                              + var(--gl-vxr-p, var(--gl-vxr-t, 0)) * var(--gl-vhalf, 0px)),
                         calc(-50% + var(--gl-vy-p, var(--gl-vy-t, 0px))))
               scale(var(--gl-vs-p, var(--gl-vs-t, 1))); }
  .hero.gl-hfr-p-left.gl-hsm-p-relative .hero-visual {
    width: calc(45vw - max(0vw, 50vw - (var(--container, 1180px) / 2))); }
  .hero.gl-hsm-p-relative.gl-hco-p-text .hero-visual { width: 55vw; }
  .hero.gl-hsm-p-relative.gl-hco-p-all .hero-visual  { width: min(100vw, var(--container, 1180px)); }
  .hero.gl-hsm-p-relative .hero-visual img { width: 100%; height: 100%; object-fit: contain; }
}
.hero h1 {
  font-size: var(--t-display);
  line-height: var(--lh-display);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-display);
  margin: 0 0 24px;
  color: var(--fg-strong);
}
.hero h1 em {
  font-style: normal;
  color: var(--accent);
}
/* 레드팀 3차(2026-09-25 · check:contrast 색톤 실기) — 늘 어두운 첫 화면(현장 전면 ·
   숫자 우선 어두운 띠)에서 강조 글자(*…*)가 accent 원색 그대로면 남색·자주 같은
   어두운 강조색 톤에서 큰 글씨(3.0 기준)도 못 넘는다(1.15~2.85:1). 그 자리에서만
   흰색을 섞어(같은 색상, 밝기만 올림) 읽히게 한다 — 밝은 화면·밝은 첫 화면은 그대로. */
.hero.gl-t-scene h1 em,
.hero.gl-t-numbers.gl-d-tone-band h1 em {
  color: var(--ondark-fg);
}
.hero p.lead {
  font-size: var(--t-lead);
  line-height: 1.7;
  color: var(--muted-2);
  max-width: 560px;
  margin: 0 0 40px;
}
.hero-actions { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 64px;
  align-items: center;
}

.btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* 높이 46px — 종전 53px 은 한 화면에 셋만 놓여도 무거웠다. 손가락으로 누르는
     최소 크기 44px 는 지킨다 (2026-09-23 레퍼런스 대조). */
  padding: 13px 26px;
  border-radius: 100px;
  font-weight: 700;
  font-size: 15px;
  border: none;
  transition: transform 0.25s var(--ease), box-shadow 0.25s var(--ease), background 0.25s;
}
.btn-primary { background: var(--chip); color: var(--ondark-fg); }
.btn-primary:hover { background: var(--accent); color: var(--on-accent, var(--black)); transform: translateY(-3px); box-shadow: var(--shadow-soft); } /* 대표 결정(2026-09-25) — 주황 바탕 위 흰 글자(ondark-fg 상속) 3.12:1 → 검정 */
.btn-ghost { background: transparent; color: var(--fg-strong); border: 1.5px solid var(--line); }
.btn-ghost:hover { border-color: var(--fg-strong); transform: translateY(-3px); }
.btn-light { background: var(--surface); color: var(--fg-strong); }
.btn-light:hover { background: var(--accent); color: var(--on-accent, var(--black)); transform: translateY(-3px); } /* 대표 결정(2026-09-25) */

.hero-floaters {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
}
.floater {
  display: flex;
  align-items: center;
  gap: 12px;
  background: var(--surface);
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  border-radius: var(--radius-md);
  padding: 14px 18px;
  font-size: 14px;
  font-weight: 700;
  color: var(--fg-strong);
  animation: floaty 5s ease-in-out infinite;
}
.floater:nth-child(2) { animation-delay: 0.6s; }
.floater:nth-child(3) { animation-delay: 1.2s; }
.floater .fdot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
@keyframes floaty {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}

/* ---------- Section shared ---------- */
section { padding: var(--sp-section) 0; }
/* 제목 밑 설명은 한 줄 40자 안쪽이어야 읽힌다 — 한글 기준이다(레퍼런스의 66~77자는
   영문 기준이라 그대로 쓰면 한글에서 너무 길어진다). */
.section-head { max-width: 640px; margin: 0 0 var(--sp-head); }
.section-head h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-h2);
  line-height: var(--lh-h2);
  margin: 0 0 16px;
  color: var(--fg-strong);
}
.section-head p {
  font-size: var(--t-lead);
  line-height: var(--lh-text);
  color: var(--muted-2);
  margin: 0;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* JS 미실행 환경(정적 스냅샷 등)에서도 콘텐츠가 항상 보이도록, 애니메이션은 .js 클래스가 붙었을 때만 적용 */
.js .reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.7s var(--ease), transform 0.7s var(--ease);
}
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---------- Business / feature cards ---------- */
.biz { background: var(--surface); }
.biz-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.biz-card {
  background: var(--surface-2);
  border-radius: var(--radius-lg);
  padding: 40px 32px;
  transition: transform 0.35s var(--ease), background 0.35s var(--ease), box-shadow 0.35s var(--ease);
  position: relative;
  overflow: hidden;
}
.biz-card:hover {
  background: var(--chip);
  transform: translateY(-8px);
  box-shadow: var(--shadow-hard);
}
.biz-card:hover .biz-tag { background: var(--chip); color: var(--ondark-fg); } /* 대표 결정(2026-09-25 H1) — 흰 글자·주황 바탕 3.12:1 → 검정(chip) 바탕 */
.biz-card:hover h3,
.biz-card:hover p,
.biz-card:hover .biz-icon svg { color: var(--ondark-fg); }
.biz-card:hover .biz-icon svg path,
.biz-card:hover .biz-icon svg rect,
.biz-card:hover .biz-icon svg circle { stroke: var(--ondark-fg); }
.biz-tag {
  display: inline-block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg-strong); /* 대표 결정(2026-09-25 H1) — M2, 놓쳤던 작은 주황 글자 */
  background: var(--accent-soft);
  padding: 6px 12px;
  border-radius: 100px;
  margin-bottom: 24px;
  transition: all 0.35s var(--ease);
}
.biz-icon { margin-bottom: 20px; }
.biz-icon svg { width: 44px; height: 44px; }
.biz-icon svg path, .biz-icon svg rect, .biz-icon svg circle {
  stroke: var(--black);
  transition: stroke 0.35s var(--ease);
}
.biz-card h3 {
  font-size: 21px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fg-strong);
  transition: color 0.35s var(--ease);
}
.biz-card p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted-2);
  margin: 0;
  transition: color 0.35s var(--ease);
}

/* ---------- Why (3-column, imweb "쉬워요" pattern) ---------- */
.why { background: var(--surface-2); }
.why-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 48px;
}
.why-item { text-align: left; }
.why-num {
  font-size: 13px;
  font-weight: 700;
  color: var(--fg-strong); /* 대표 결정(2026-09-25 H1) — M2, 놓쳤던 작은 주황 글자 */
  letter-spacing: 0.08em;
  margin-bottom: 14px;
  display: block;
}
.why-item h3 {
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 12px;
  color: var(--fg-strong);
}
.why-item p {
  font-size: 14.5px;
  line-height: 1.75;
  color: var(--muted-2);
  margin: 0;
}

/* ---------- Stats ---------- */
/* 🔴 2026-09-21 — 종전에는 어두운 바탕(--chip · --ondark-*)이 여기 «박혀» 있었다.
   그래서 이 위젯만 늘 어두웠고, 다른 위젯은 같은 모양을 낼 방법이 없었다.
   이제 역할 색을 쓰고, 어둡게 보이는 것은 스타일의 「반전」 이 맡는다 (가드랩은 켜 둠).
   반전은 «지금 화면의 반대» 라 어두운 화면에서는 밝은 띠가 된다. */
.stats {
  background: var(--bg);
  color: var(--fg);
  position: relative;
  overflow: hidden;
}
/* 🔴 2026-09-25 — 종전에는 사선 그라데이션 장식(::before)을 깔았다. 「숫자 세기」가
   «어두운 띠»(.gl-t-band) 모양일 때 이 장식이 밑에 깔려 바탕이 붉은 갈색으로 번져
   보였다(ContentsDoc/22 라운드 1 크롬 실기 08번). AI 티 기준(그라데이션 5 이하)에도
   걸려 뺀다 — 숫자는 그 자체로 내용이 촘촘해 장식이 없어도 빈 자리로 안 보인다. */
.stats .container { position: relative; z-index: 1; }
.stats .section-head h2 { color: var(--fg-strong); }
.stats .section-head p { color: var(--muted); }
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.stat-card {
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  padding: 32px 24px;
  background: var(--surface);
}
.stat-num {
  font-size: var(--t-h2);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-h2);
  display: flex;
  align-items: baseline;
  gap: 4px;
  color: var(--fg-strong);
  margin-bottom: 10px;
  /* 🔴 숫자는 줄을 맞춘다 — 자릿수가 바뀌면 세로줄이 어긋나 표가 덜컹거린다 (2026-09-23) */
  font-variant-numeric: tabular-nums;
}
.stat-num .unit { font-size: 20px; font-weight: 700; color: var(--accent); }
.stat-label { font-size: 14px; color: var(--muted); line-height: 1.6; }

/* ---------- Gallery / 시공사례 ---------- */
.gallery { background: var(--surface); }
.gallery-tabs {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 40px;
}
.gtab {
  padding: 10px 18px;
  border-radius: 100px;
  border: 1.5px solid var(--line);
  font-size: 14px;
  font-weight: 700;
  color: var(--muted-2);
  background: transparent;
  transition: all 0.2s;
}
.gtab.active, .gtab:hover { border-color: var(--fg-strong); background: var(--chip); color: var(--ondark-fg); }

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}
.gcard {
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface-2);
  aspect-ratio: 4 / 5;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  transition: transform 0.4s var(--ease), box-shadow 0.4s var(--ease);
}
.gcard:hover { transform: translateY(-6px); box-shadow: var(--shadow-soft); }
.gcard .gcard-visual {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  /* 🔴 2026-09-25 — 사진이 아직 없을 때(SVG 자리표시)의 바탕. 종전에는 그라데이션이었다.
     레퍼런스(§9-2 ③) — 사진은 꾸미지 않는다. 자리표시도 사진의 일부이므로 한 색으로 둔다. */
  background: var(--surface-2);
}
.gcard .gcard-visual svg { width: 46%; height: 46%; opacity: 0.9; }
.gcard .gcard-visual img { width: 100%; height: 100%; object-fit: cover; }
.gcard .gcard-visual svg path, .gcard .gcard-visual svg rect, .gcard .gcard-visual svg circle, .gcard .gcard-visual svg polyline {
  stroke: var(--gray-700);
}
.gcard-body {
  position: relative;
  z-index: 1;
  /* 🔴 2026-09-25 — 사진 위 글자가 읽히려면 바탕이 필요하지만, 그라데이션 대신
     한 색의 투명도로 바꾼다(레퍼런스 §9-2 ① «색을 늘리지 않고 투명도로 층을 만든다»).
     카드 6장이 한 화면에 있으면 그라데이션 12개가 되어 AI 티 기준을 바로 넘겼다. */
  background: rgba(10,10,11,0.72);
  padding: 20px 16px 16px;
}
.gcard-cat {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--ondark-fg); /* 대표 결정(2026-09-25 H1) — 검정 덮개(.gcard-body) 위라 onDark 역할 색. 시공사례 case-list 기본(card) 진열의 실제 선택자 */
  margin-bottom: 6px;
}
.gcard-title { font-size: 14px; font-weight: 700; color: var(--ondark-fg); line-height: 1.4; }

/* 카드는 이제 눌러서 상세로 들어가는 링크다 (전에는 그냥 그림이었다) */
.gcard { text-decoration: none; color: inherit; }
.gcard-badge {
  position: absolute; top: 12px; right: 12px; z-index: 2;
  background: rgba(10,10,11,0.75); color: var(--ondark-fg);
  font-size: 11.5px; font-weight: 700; padding: 5px 10px; border-radius: 100px;
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
}
.gcard-badge svg { width: 12px; height: 12px; flex-shrink: 0; }

/* 목록을 불러오는 동안, 또는 비어 있을 때 자리를 지키는 글 */
.grid-loading {
  grid-column: 1 / -1;
  padding: 56px 0;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}
.gallery-more { text-align: center; margin-top: 32px; }

/* ---------- CTA ---------- */
.cta {
  background: var(--chip);
  color: var(--ondark-fg);
  border-radius: var(--radius-lg);
  margin: 0 32px;
  padding: 80px 48px;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.cta-wrap { max-width: var(--container); margin: 0 auto; padding: 60px 0; }
.cta::before {
  content: "";
  position: absolute; inset: 0;
  /* 🔴 2026-09-25 레드팀 M3 — 엔진 파일에 브랜드 주황(rgba(255,90,31,…))이 그대로 박혀
     있었다. 엔진은 브랜드 값을 새로 쓰지 않는다(CLAUDE.md) — 역할 토큰 --accent 를
     투명도로 섞어 쓴다. 브랜드가 강조색을 바꾸면 이 번짐도 따라간다. */
  background: radial-gradient(60% 100% at 50% 0%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 70%);
}
.cta > * { position: relative; z-index: 1; }
.cta h2 {
  font-size: var(--t-h2);
  font-weight: var(--w-display);
  letter-spacing: var(--ls-h2);
  margin: 0 0 16px;
}
.cta p { font-size: var(--t-lead); line-height: var(--lh-text); color: var(--ondark-muted); margin: 0 0 36px; }
.cta-actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
  align-items: center;
}
.cta-contact {
  margin-top: 32px;
  display: flex;
  gap: 28px;
  justify-content: center;
  flex-wrap: wrap;
  font-size: 14px;
  color: var(--ondark-muted);
}
.cta-contact strong { color: var(--ondark-fg); }
/* 에디터의 *강조* 는 <em> 으로 나온다. 이 자리에서는 <strong> 과 똑같이 보여야 한다 */
/* 🔴 2026-09-25 레드팀 M2 — 상대 키워드 `bolder` 대신 굵기 두 토큰(400·700) 중 하나로 못박는다 */
.cta-contact em { font-style: normal; font-weight: 700; color: var(--ondark-fg); }
/* 어두운 문의 상자 위의 테두리 버튼 — 기본 모양이면 글자가 거의 안 보인다 */
.cta .btn-ghost { border-color: rgba(255,255,255,0.3); color: #fff; }

/* ---------- Footer ---------- */
footer { background: var(--surface); border-top: 1px solid var(--line); padding: 56px 0 40px; }
.footer-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}
.footer-links { display: flex; gap: 28px; flex-wrap: wrap;
  align-items: center;
}
.footer-links a { font-size: 14px; font-weight: 700; color: var(--muted-2); }
.footer-links a:hover { color: var(--fg-strong); }
.footer-info {
  font-size: 13px;
  line-height: 2;
  color: var(--muted);
}
.footer-info b { color: var(--muted-2); font-weight: 700; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 24px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
  .nav-links { display: none; }
  .nav-burger { display: flex; }
  .biz-grid, .why-grid { grid-template-columns: 1fr 1fr; }
  .stats-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  /* 🔴 문의 상자는 기둥의 선에 선다 (2026-09-21 화면 검수가 찾음). 종전 16px 은
     기둥(태블릿 32 · 휴대폰 20)과 어긋나 이 상자만 바깥으로 삐져나와 보였다. */
  .cta { margin: 0 32px; padding: 56px 24px; }
}
@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .cta { margin: 0 20px; }
  .hero { padding: 132px 0 80px; }
  .biz-grid, .why-grid, .stats-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  /* 여백은 --sp-section 이 폭에 따라 이미 줄어든다 — 여기서 또 줄이면
     좁은 화면에서만 두 번 줄어 답답해진다 (2026-09-23). */
  .footer-top { flex-direction: column; }
}


/* ══════════════════════════════════════════════════════════════════════
   어두운 화면 — 기기 설정을 따른다 (prefers-color-scheme)
   ──────────────────────────────────────────────────────────────────────
   브랜드 색(오렌지)과 «흰 글자»는 그대로 둔다. 바꾸는 것은 역할 토큰뿐이다.
   --chip 은 반전하지 않고 «조금 들어 올린다» — 반전하면 그 위의 흰 글자가
   읽히지 않는다. 어두운 바탕에서도 칩이 페이지와 구분되기만 하면 된다.
   ══════════════════════════════════════════════════════════════════════ */
/* 🔴 어두운 색은 아래 두 곳에 «똑같이» 적혀 있다.
      한 벌은 기기 설정을 따르는 몫, 한 벌은 화면에서 고른 몫이다.
      CSS 에는 미디어 조건 안팎을 함께 묶는 방법이 없어서 어쩔 수 없다.
      대신 check:theme 이 두 벌이 같은지 본다 — 한쪽만 고치면 검사가 잡는다. */
@media (prefers-color-scheme: dark) {
  /* 기기가 어둡다. 다만 화면에서 «밝게» 를 고른 분은 빼 준다. */
  :root:not([data-theme="light"]) {
    --bg:        #0f1113;
    --surface:   #16181c;
    --surface-2: #1c1f24;
    --line:      #2b2f35;
    --fg:        #e8e8ea;
    --fg-strong: #f4f4f7;
    --muted:     #9a9aa4;
    --muted-2:   #c2c2cb;
    --chip:      #262a30;
    --glass:     rgba(15, 17, 19, 0.86);
    --accent-soft: #2b1710;
    --danger: #ff6b5b;
    --ok: #3fb86a;
    --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.55);
    --shadow-hard: var(--shadow-soft);
  }
}

/* 기기는 밝은데 화면에서 «어둡게» 를 고른 분. 위와 같은 값이어야 한다. */
:root[data-theme="dark"] {
  --bg:        #0f1113;
  --surface:   #16181c;
  --surface-2: #1c1f24;
  --line:      #2b2f35;
  --fg:        #e8e8ea;
  --fg-strong: #f4f4f7;
  --muted:     #9a9aa4;
  --muted-2:   #c2c2cb;
  --chip:      #262a30;
  --glass:     rgba(15, 17, 19, 0.86);
  --accent-soft: #2b1710;
  --danger: #ff6b5b;
  --ok: #3fb86a;
  --shadow-soft: 0 20px 60px rgba(0, 0, 0, 0.55);
  --shadow-hard: var(--shadow-soft);
}


/* 🔴 밝게·어둡게 선택와 언어 선택의 규칙은 여기 두지 않는다.
   gl-controls.css 한 벌로 옮겼다 — 종전에는 이 파일과 site.css 에
   나뉘어 있어서, 안쪽 화면에서만 선택 메뉴가 모양 없이 나왔다. */