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

/* ============================================================
   algolab — 리디자인 테마 (2026-09-16)
   기준: web/media/intro.mp4 — 홈 히어로에 들어간 소개 영상

   영상에서 실제로 '측정한' 값이다. 감으로 고른 색이 아니다.
     · 배경      #0b0c10 ~ #0e0f13 (거의 순수한 검정, 아주 약간 푸른 기)
     · 본문 글자 #f7f8fa / 보조 #8b8c90 — 완전 무채색
     · 아웃트로 카드 #14171c
     · 골드      #c7a54e — 51초 중 3~4초, 45~46초 딱 두 번.
                 그것도 오직 ALGOLAB 워드마크에만.
                 1초 간격 51프레임 중 29프레임은 따뜻한 픽셀이 0개다.

   → 브랜드 골드는 맞았다. 틀린 건 '양'이다.
     기존 사이트는 로고·배지·제목·버튼·테두리·숫자·링크를 전부 금색으로 칠했고,
     영상은 로고 하나에만 쓴다. 이 파일은 그 규율을 사이트로 옮긴다.

   골드를 쓸 수 있는 곳 — 이 셋 외에는 쓰지 않는다:
     1. 워드마크(내비·푸터)   2. 주 CTA 버튼   3. 포커스 링(접근성)

   이 파일은 각 페이지의 인라인 <style> '다음'에 로드된다.
   특이도가 같으면 뒤에 온 쪽이 이긴다 — 그래서 대부분 !important 없이 덮인다.
   되돌리려면 <link> 한 줄만 지우면 원래 디자인으로 돌아온다.
   ============================================================ */

/* ─── 1. 토큰 ─────────────────────────────────────────────── */
:root {
  /* 배경 계조 — 영상 실측값 */
  --bg:  #0b0c10;
  --bg2: #0e1014;
  --bg3: #14171c;
  --bg4: #1b1f26;

  /* 선은 색이 아니라 밝기 차이로만 긋는다 */
  --border:  rgba(255,255,255,0.065);
  --border2: rgba(255,255,255,0.11);
  --border3: rgba(255,255,255,0.17);

  /* 글자 5단계 — 3단계로는 위계가 안 나온다.
     2026-09-16 상향: 처음 잡은 값이 너무 어두웠다.
     WCAG AA 본문 기준은 4.5:1 인데 --text4(38곳에서 사용)가 3.4:1 로 미달이었고,
     --text3 도 5.4:1 로 간신히 걸쳐 있었다. 실제로 "회색 글자가 안 보인다"는
     피드백을 받았다 — 취향이 아니라 접근성 문제였다.
     색상(무채색)은 그대로 두고 밝기만 한 단계씩 올린다.
     2026-09-18 2차 상향: 1차로 AA 는 넘겼는데도 "어두운 배경에 회색이라 여전히
     안 보인다" 는 피드백이 다시 왔다. 기준을 '겨우 통과'가 아니라 '넉넉히'로 옮긴다.
     ※ 색상은 여전히 무채색이다 — 포인트 컬러는 넣지 않는다. 밝기만 올린다. */
  --text:  #f5f6f8;   /* 16.6:1 */
  --text2: #d6d8dc;   /* 12.6:1  (1차 #b6b8bd = 9.1) */
  --text3: #bcbfc6;   /*  9.8:1  (1차 #a4a6ac = 7.4) */
  --text4: #9fa2aa;   /*  7.0:1  (1차 #8a8c93 = 5.4 · 최초 #6a6c72 = 3.4 → AA 미달) */

  /* 골드 — 영상 워드마크 실측 */
  --gold:  #c7a54e;
  --gold2: #d9bb6b;
  --gold-dim:  rgba(199,165,78,0.10);
  --gold-dim2: rgba(199,165,78,0.22);

  --green: #4ea86a;
  --green-dim: rgba(78,168,106,0.10);
  --red: #d9534f;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  /* 세리프 제목은 폐기한다 — 영상에 세리프가 한 글자도 없다 */
  --serif: var(--sans);
  /* ⚠ 한글 폴백을 반드시 스택 안에 둔다.
     IBM Plex Mono 에는 한글 글리프가 없어서, 한글만 시스템 모노로 떨어지면
     음절마다 전각 폭이 되어 '제 작  기 간' 처럼 흩어진다.
     Pretendard 를 generic monospace 앞에 끼우면 로마자·숫자는 모노,
     한글만 Pretendard 로 렌더된다 — 폴백은 글자 단위로 일어나기 때문이다. */
  --mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo,
          "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", sans-serif;

  /* 여백 — 영상의 호흡에 맞춰 크게 */
  --gap: clamp(64px, 9vw, 128px);
  /* 사이트 전체가 쓰는 단 하나의 기준선.
     --wrap 은 '내용 폭', --pad 는 좌우 여백.
     히어로·섹션·내비가 전부 이 둘로 계산되어 왼쪽 세로선이 하나로 선다. */
  --wrap: 1180px;
  --pad: clamp(20px, 5vw, 40px);
  --wrap-outer: calc(var(--wrap) + var(--pad) * 2);
}

/* ─── 2. 장식 걷어내기 ────────────────────────────────────── */
/* 필름 그레인 + 히어로 격자 + 라디얼 글로우가 동시에 깔려 있었다.
   셋 다 다크 SaaS 템플릿의 기본 제공품이라 겹치면 한눈에 티가 난다. */
body::after { display: none !important; }
.hero-grid  { display: none !important; }

/* 글로우는 지우지 않고 '광원 하나'로 낮춘다 — 영상도 위에서 빛이 하나 온다 */
.hero-glow {
  background: radial-gradient(ellipse 60% 48% at 50% -18%, rgba(255,255,255,0.045), transparent 68%);
}

/* 스크롤 진행 바: 금색 그라디언트 → 가는 무채색 선 */
.scroll-progress {
  height: 1.5px;
  background: rgba(255,255,255,0.32);
}

/* ─── 3. 타이포 ───────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: 15.5px;
  line-height: 1.72;
  letter-spacing: -0.011em;
  color: var(--text2);
  background: var(--bg);
}

/* 한글은 단어 중간에서 끊으면 안 된다.
   기본값(break-word)이면 '당신의' 가 '당신 / 의' 로 갈라진다 — 실제로 갈라졌다.
   keep-all 은 띄어쓰기에서만 줄을 바꾼다. 한글 조판의 최소 조건이다. */
body, h1, h2, h3, h4, p, li, td, th, dt, dd, .section-title, .section-sub {
  word-break: keep-all;
  overflow-wrap: break-word;
}

h1, h2, h3, h4 {
  font-family: var(--sans);
  color: var(--text);
  letter-spacing: -0.032em;
  line-height: 1.22;
  font-weight: 700;
}

/* 모노는 '숫자와 로마자'에만 쓴다.
   한글에 모노 + 자간을 주면 글자가 흩어져 보인다 (지 원 플 랫 폼 처럼).
   → 한글이 섞이는 라벨은 아래에서 전부 sans 로 되돌린다. */
.stat-num, .review-stat-num, .service-price, .step-num,
.section-eyebrow, .service-tag {
  font-family: var(--mono);
  font-feature-settings: "tnum" 1;
}

/* ─── 4. 내비 ─────────────────────────────────────────────── */
/* nav.js 가 런타임에 <style> 을 head 끝에 붙인다 → 이 파일보다 뒤에 온다.
   그래서 여기서는 클래스를 두 번 적어 특이도를 올려 이긴다 (.x.x = 0,2,0). */
.algolab-nav.algolab-nav {
  height: 62px;
  /* 내비 로고가 본문 왼쪽 기준선과 어긋나 있었다(로고 40px, 히어로 170px).
     본문과 같은 컨테이너(1180px)에 맞춰 같은 세로선에서 시작하게 한다. */
  padding: 0 calc(max((100% - var(--wrap-outer)) / 2, 0px) + var(--pad));
  background: rgba(11,12,16,0.72);
  backdrop-filter: blur(20px) saturate(1.1);
  -webkit-backdrop-filter: blur(20px) saturate(1.1);
  border-bottom: 1px solid var(--border);
  box-shadow: none;
  font-family: var(--sans);
}
.algolab-nav.algolab-nav.nav-at-top { border-bottom-color: transparent; }
body { padding-top: 62px !important; }

/* 워드마크 — 영상의 ALGOLAB 을 그대로 옮긴다.
   대문자 · 얇은 두께 · 넓은 자간 · 단색 골드.
   기존은 IBM Plex Mono 볼드 'AlgoLab' 에 두 가지 색이었다 — 영상과 무관했다. */
.algolab-nav .algolab-nav-logo.algolab-nav-logo {
  font-family: var(--sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  line-height: 1;
}
.algolab-nav .algolab-nav-logo.algolab-nav-logo span { color: inherit; }

.algolab-nav .algolab-nav-center > a,
.algolab-nav .algolab-nav-center > .algolab-nav-dropdown-trigger > a {
  font-size: 13.5px;
  color: var(--text3);
  padding: 8px 14px;
  border-radius: 0;
}
.algolab-nav .algolab-nav-center > a:hover,
.algolab-nav .algolab-nav-center > .algolab-nav-dropdown-trigger > a:hover {
  color: var(--text);
  background: none;
}
/* 밑줄 인디케이터: 금색 그라디언트 + 글로우 → 흰 실선 1px */
.algolab-nav .algolab-nav-center > a::after,
.algolab-nav .algolab-nav-center > .algolab-nav-dropdown-trigger.active > a::after {
  bottom: -20px;
  width: 100%;
  height: 1px;
  background: var(--text);
  box-shadow: none;
  border-radius: 0;
}
.algolab-nav .algolab-nav-btn.algolab-nav-btn {
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  padding: 9px 17px;
}
.algolab-nav .algolab-nav-btn-login.algolab-nav-btn-login {
  border: 1px solid var(--border2);
  color: var(--text3);
}
.algolab-nav .algolab-nav-btn-login.algolab-nav-btn-login:hover {
  color: var(--text); border-color: var(--border3); background: none;
}
/* 회원가입 = 골드를 쓰는 두 곳 중 하나. 그라디언트는 뺀다 */
.algolab-nav .algolab-nav-btn-register.algolab-nav-btn-register {
  background: var(--gold);
  color: #0b0c10;
  font-weight: 600;
  box-shadow: none;
}
.algolab-nav .algolab-nav-btn-register.algolab-nav-btn-register:hover {
  background: var(--gold2); transform: none; box-shadow: none;
}
.algolab-nav .algolab-nav-platforms,
.algolab-nav .algolab-nav-dropdown {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 8px;
  box-shadow: 0 16px 48px rgba(0,0,0,0.6);
}
.algolab-nav .algolab-nav-avatar {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--border2);
  color: var(--text2);
}
.algolab-nav-mobile-menu { top: 62px; background: rgba(11,12,16,0.985); }

/* 스크롤바·선택 영역의 금색도 뺀다 (nav.js 가 금색으로 박아둔 것을 덮는다) */
html { scrollbar-color: rgba(255,255,255,0.22) #0b0c10 !important; }
::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.18) !important; border-color: #0b0c10 !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.3) !important; }
::-webkit-scrollbar-track { background: #0b0c10 !important; }
::selection { background: rgba(255,255,255,0.18); color: #fff; }
::-moz-selection { background: rgba(255,255,255,0.18); color: #fff; }

/* ─── 5. 버튼 ─────────────────────────────────────────────── */
/* linear-gradient(135deg, ...) 버튼은 2020년대 AI 템플릿의 지문이다. 단색으로. */
.btn-primary, .hero-ask-btn, .cta-btn, .form-submit, .service-card.featured .service-cta {
  background: var(--gold);
  color: #0b0c10;
  font-weight: 600;
  border-radius: 7px;
  box-shadow: none;
  letter-spacing: -0.01em;
  transition: background .18s ease;
}
.btn-primary:hover, .hero-ask-btn:hover, .cta-btn:hover,
.form-submit:hover, .service-card.featured .service-cta:hover {
  background: var(--gold2);
  transform: none;
  box-shadow: none;
}
.btn-primary:active, .hero-ask-btn:active, .cta-btn:active { transform: none; }

.btn-ghost, .service-cta {
  border: 1px solid var(--border2);
  border-radius: 7px;
  color: var(--text2);
  background: none;
  font-weight: 500;
  transition: border-color .18s ease, color .18s ease;
}
.btn-ghost:hover, .service-cta:hover {
  border-color: var(--border3);
  color: var(--text);
  background: none;
}
.btn-ghost:active { transform: none; }

/* ─── 6. 히어로 ───────────────────────────────────────────── */
/* 기존: 요소 8개를 전부 가운데 정렬 — 위계가 없고, 중앙정렬 일변도는
   AI 랜딩페이지의 가장 흔한 신호다. 좌측 기준선 + 2단 비대칭으로 바꾼다. */
.hero {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.96fr);
  column-gap: clamp(40px, 5vw, 76px);
  align-items: start;
  text-align: left;
  max-width: var(--wrap-outer);
  margin: 0 auto;
  padding: clamp(56px, 7vw, 92px) var(--pad) clamp(48px, 6vw, 76px);
}
.hero-lede  { grid-column: 1; min-width: 0; }
.hero-aside { grid-column: 2; min-width: 0; }

/* 배지: 알약 + 펄스 점 → 한 줄 텍스트. 점은 남기되 애니메이션은 뺀다 */
.hero-badge {
  display: inline-flex;
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  margin-bottom: 26px;
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  color: var(--text4);
  gap: 8px;
}
.hero-badge::before {
  background: var(--green);
  animation: none;
  box-shadow: none;
  width: 5px; height: 5px;
  align-self: center;
}

.hero h1 {
  font-family: var(--sans);
  font-size: clamp(30px, 3.3vw, 47px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.038em;
  margin: 0 0 22px;
  max-width: 11em;
  color: var(--text);
  text-wrap: pretty;
}
/* 강조를 '금색'이 아니라 '밝기'로 준다 — 첫 줄을 눌러두면 둘째 줄이 저절로 선다.
   금색 하이라이트 한 단어는 템플릿의 기본기라 바로 티가 난다.
   ⚠ 단, 눌러두는 정도가 과하면 헤드라인이 통째로 뒤로 물러난다.
     처음엔 --text3 으로 깔았다가 "눈에 안 들어온다"는 피드백을 받고 한 단계 올렸다.
     낙차는 남기되 회색으로는 읽히지 않는 지점이 --text2 다. */
.hero h1 .h1-lead { color: var(--text2); font-weight: 700; }
.hero h1 em { color: var(--text); }

.hero-sub {
  font-size: 15.5px;
  color: var(--text3);
  line-height: 1.82;
  /* ch 는 숫자 0 의 폭이라 한글 행폭 기준으로 쓰면 안 된다.
     46ch ≈ 370px 로 눌려서 '키움·업비트 / ·바이낸스' 처럼 가운뎃점 앞에서 끊겼다. */
  max-width: 32em;
  margin: 0 0 30px;
  font-weight: 400;
}
.hero-sub strong { color: var(--text2); font-weight: 500; }

/* 질문 박스 = 이 페이지의 전환 지점. 금테·금그림자를 빼고 표면 대비로 세운다 */
.hero-ask { max-width: none; margin: 0 0 18px; }
.hero-ask-label {
  text-align: left;
  color: var(--text2);
  font-size: 13.5px;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.hero-ask-row {
  background: var(--bg2);
  border: 1px solid var(--border2);
  border-radius: 10px;
  box-shadow: none;
  padding: 16px 18px 13px;
}
.hero-ask-row:focus-within {
  border-color: var(--border3);
  box-shadow: 0 0 0 3px rgba(255,255,255,0.05);
}
.hero-ask-row textarea { font-size: 15px; min-height: 86px; line-height: 1.75; }
.hero-ask-row textarea::placeholder { color: var(--text4); }
.hero-ask-foot { border-top: 1px solid var(--border); }
.hero-ask-tip  { font-size: 11.5px; color: var(--text4); }
.hero-ask-btn  { padding: 10px 18px; font-size: 14px; }
.hero-ask-hint { text-align: left; color: var(--text4); font-size: 12.5px; margin-top: 10px; }
.hero-ask-hint b { color: var(--text3); }

.hero-actions { justify-content: flex-start; gap: 10px; margin-top: 4px; }
.hero-actions .btn-ghost { padding: 12px 20px; font-size: 14px; }

/* 영상: 금테 + 3중 글로우를 걷어낸다.
   영상 자체가 검정이라 액자를 두르면 따로 논다 — 배경에 얹히게 둔다. */
.hero-video { max-width: none; width: 100%; margin: 0; }
.video-frame {
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55);
  background: #0b0c10;
}
.video-frame:hover { box-shadow: 0 24px 64px rgba(0,0,0,0.55); }
/* 빨간 점 REC 태그는 스톡 소재 느낌이 강하다 — 없앤다 */
.video-tag { display: none; }
.video-unmute {
  background: rgba(11,12,16,0.78);
  border: 1px solid var(--border2);
  color: var(--text2);
  border-radius: 6px;
  font-size: 12px;
  padding: 6px 12px;
}
.video-unmute:hover { border-color: var(--border3); color: var(--text); }
.video-cap {
  display: block;
  margin-top: 11px;
  font-size: 12px;
  color: var(--text4);
}

/* 지표: 금색 큰 숫자 4개 가로 나열 → 무채색 모노 2×2, 작게.
   숫자를 금색으로 키우면 광고 배너처럼 읽힌다. */
.hero-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  justify-content: start;
  margin: 26px 0 0;
  border-top: 1px solid var(--border);
}
.hero-stats > div {
  padding: 14px 16px 13px 0;
  border-bottom: 1px solid var(--border);
}
.hero-stats > div:nth-child(odd)  { border-right: 1px solid var(--border); padding-left: 0; }
.hero-stats > div:nth-child(even) { padding-left: 18px; }
.stat-num {
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  letter-spacing: -0.01em;
}
.stat-label { font-size: 12px; color: var(--text4); margin-top: 4px; letter-spacing: 0; }

/* 크몽 링크: 금색 알약 + 체크표시 → 밑줄 텍스트 링크 */
.hero-kmong {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 16px;
  font-size: 12.5px;
  color: var(--text3);
  text-decoration: none;
  border-bottom: 1px solid var(--border2);
  padding-bottom: 2px;
  transition: color .18s ease, border-color .18s ease;
}
.hero-kmong:hover { color: var(--text); border-color: var(--border3); }

/* ─── 7. 섹션 공통 ────────────────────────────────────────── */
section { padding: var(--gap) var(--pad); }

.section-header {
  text-align: left;
  max-width: var(--wrap);
  margin: 0 auto clamp(34px, 4vw, 54px);
  padding: 0;
}
/* eyebrow 좌우에 붙어 있던 금색 장식선 제거 */
.section-eyebrow::before, .section-eyebrow::after { display: none !important; }
.section-eyebrow {
  display: block;
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--text4);
  margin-bottom: 14px;
  background: none;
  border: none;
  padding: 0;
}
.section-title {
  font-size: clamp(25px, 2.7vw, 36px);
  font-weight: 700;
  letter-spacing: -0.035em;
  color: var(--text);
  line-height: 1.24;
}
.section-sub {
  color: var(--text3);
  font-size: 15px;
  max-width: 42em;
  margin: 13px 0 0;
  line-height: 1.8;
}

/* 섹션 안쪽 그리드도 같은 기준선에 맞춘다 */
.steps, .services-grid, .portfolio-grid, .reviews-grid,
.guarantee-grid, .faq-list, .review-stats-bar, .portfolio-more,
.staged-note, .pricing-foot {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}
.portfolio-more { text-align: left; }

/* 섹션 배경 교대: bg2 가 bg 와 거의 같아졌으므로 선으로도 구분한다 */
.how-bg, .reviews-bg, .contact-bg { background: var(--bg2); }
#portfolio { background: var(--bg2) !important; }

/* ─── 8. 카드류 ───────────────────────────────────────────── */
/* 공통 원칙: 호버에 들리는 그림자·금색 테두리·상단 금색 바를 걷고,
   테두리 밝기만 바꾼다. 카드가 12장 있는 페이지에서 차이가 크다. */
.step, .service-card, .portfolio-item, .review-card, .guarantee-card {
  background: var(--bg3);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color .2s ease, background .2s ease;
}
.step:hover, .service-card:hover, .portfolio-item:hover,
.review-card:hover, .guarantee-card:hover {
  border-color: var(--border3);
  background: var(--bg4);
  transform: none;
  box-shadow: none;
}
.step::before, .portfolio-item::before, .review-card::before,
.service-card.featured::before, .cta-panel::before { display: none !important; }

/* 스텝: 이모지 아이콘 → 번호. 이모지는 AI 티의 1순위다 */
.step-icon { display: none !important; }
.step-num {
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--text4);
  margin-bottom: 14px;
}
.step h3 { font-size: 16.5px; font-weight: 600; margin-bottom: 8px; }
.step p  { font-size: 13.8px; color: var(--text3); line-height: 1.75; }
.step-arrow { display: none !important; }

/* 서비스 카드 */
.service-card {
  padding: 30px 26px 28px;
  border-radius: 10px;
  background: var(--bg3);
}
.service-card.featured {
  border: 1px solid var(--border3);
  background: var(--bg4);
  box-shadow: none;
}
/* 금액을 숨긴 상태(data-show-price="0")에서는 카드가 '상담 후 견적 안내' 로 시작했다.
   상품 이름이 먼저 와야 무엇을 파는 카드인지 읽힌다 — flex order 로 순서만 바꾼다. */
.service-tag         { order: 1; }
.service-card h3     { order: 2; font-size: 17px; margin-bottom: 6px; }
.service-price,
.service-price-ask   { order: 3; }
.service-price-sub   { order: 4; margin-bottom: 22px; }
.service-features    { order: 5; }
.service-cta         { order: 6; }

.popular-badge {
  position: absolute;
  top: 26px;
  right: 24px;
  left: auto;
  transform: none;
  background: rgba(255,255,255,0.07);
  color: var(--text2);
  border: 1px solid var(--border2);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 4px 10px;
  border-radius: 4px;
  box-shadow: none;
}
/* flex 자식은 기본이 stretch 라 inline-block 태그가 카드 폭만큼 늘어나 있었다 */
.service-tag {
  align-self: flex-start;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text4);
  border-radius: 4px;
  padding: 4px 9px;
  margin-bottom: 20px;
}
.tag-basic, .tag-standard, .tag-premium { background: none; color: var(--text4); }
.service-price, .service-card.featured .service-price { color: var(--text); font-weight: 500; }
.price-unit { color: var(--text4); }
.service-price-ask { color: var(--text2); }
.service-price-sub { color: var(--text4); }
.service-features li { color: var(--text3); }
.service-features li::before { color: var(--text4); }

/* 포트폴리오 */
.portfolio-tag { font-size: 11.5px; letter-spacing: 0; color: var(--text4); }
.portfolio-item h3 { font-size: 16.5px; font-weight: 600; letter-spacing: -0.028em; }
.portfolio-item:hover h3 { color: var(--text); }
.portfolio-item p { color: var(--text3); font-size: 13.8px; line-height: 1.76; }
.meta-chip {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text4);
  font-size: 11.5px;
  font-family: var(--sans);
  letter-spacing: 0;
  border-radius: 4px;
}
.meta-chip.green { color: var(--text3); border-color: var(--border2); background: none; }
.pf-more { color: var(--text4); font-size: 12.5px; }
.portfolio-item:hover .pf-more { color: var(--text2); }

/* 포트폴리오·검증 카드의 분류 태그 — 금색 알약이었다.
   카드마다 하나씩 붙으니 목록 전체가 금색 점선처럼 보였다. 배경·테두리를 없앤다. */
.portfolio-tag {
  background: none;
  border: none;
  padding: 0;
  border-radius: 0;
  margin-bottom: 14px;
}

/* 리뷰 */
.review-text { color: var(--text2); }
.review-stars {
  color: var(--text2);
  font-size: 13px;
  letter-spacing: 2px;
  text-shadow: none;       /* 별에 금색 글로우가 깔려 있었다 */
}
.review-badge {
  font-family: var(--sans);
  font-size: 11.5px;
  letter-spacing: -0.005em;
  color: var(--text4);
  background: none;
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 3px 9px;
}
.review-avatar {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
}
.review-name { color: var(--text2); font-size: 13px; }
.review-meta { font-family: var(--sans); font-size: 12px; color: var(--text4); }
.review-date { color: var(--text4); font-size: 11.5px; }
.review-stats-bar {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: none;
}
.review-stat-num { color: var(--text); font-weight: 500; }
.review-stat-label { color: var(--text4); }
.review-link { color: var(--text3); }
.review-link:hover { color: var(--text); }

/* 보증 */
.guarantee-card h3 .g-icon { display: none !important; }
.guarantee-list li::before { color: var(--text4); }
.guarantee-list li strong { color: var(--text2); }

/* 포트폴리오 카드 머리 — 금색 원형 이니셜 + 금색 알약을 무채색으로.
   카드가 12장 있으면 이 작은 금색이 12번 반복되어 화면을 금색으로 물들인다. */
.pf-avatar {
  width: 34px; height: 34px;
  border-radius: 7px;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border2);
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 500;
  color: var(--text3);
}
.portfolio-item:hover .pf-avatar { background: rgba(255,255,255,0.09); box-shadow: none; }
.pf-head .portfolio-tag { border: none; background: none; padding: 0; }
.pf-more {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  opacity: 1;
  color: var(--text4);
}
.portfolio-item:hover .pf-more { color: var(--text2); transform: none; }

/* 단계별 제작 안내 — 금색 배경 + 금색 그라디언트 알약 */
.staged-note {
  max-width: var(--wrap);
  margin: 26px auto 0;
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 10px;
  padding: 18px 22px;
}
.staged-note-badge {
  font-family: var(--sans);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--text2);
  background: rgba(255,255,255,0.07);
  border: 1px solid var(--border2);
  border-radius: 4px;
  padding: 4px 10px;
}
.staged-note-text { color: var(--text3); font-size: 14px; }
.staged-note-text strong { color: var(--text2); }

.pricing-foot { text-align: left; color: var(--text3); font-size: 14px; max-width: 54em; }
.pricing-foot-sub { color: var(--text4); }

/* FAQ — 열릴 때 왼쪽에 금색 막대가 자라고 질문이 금색으로 바뀌던 것을 없앤다 */
.faq-list { max-width: var(--wrap); margin: 0 auto; }
.faq-item {
  max-width: 880px;
  background: var(--bg2);
  border: 1px solid var(--border);
  border-radius: 9px;
}
.faq-item::before { display: none !important; }
.faq-item:hover { border-color: var(--border2); }
.faq-item.open { border-color: var(--border3); background: var(--bg3); }
.faq-q:hover, .faq-item.open .faq-q { color: var(--text); }
.faq-item.open .faq-icon {
  color: var(--text2);
  background: rgba(255,255,255,0.06);
  border-color: var(--border2);
}
.faq-a-inner { color: var(--text3); max-width: 40em; }

/* 후기 지표 바 */
.review-stats-bar {
  max-width: var(--wrap);
  margin: 0 auto 44px;
  justify-content: flex-start;
  background: none;
  border-left: none; border-right: none;
  border-radius: 0;
  padding: 22px 0;
}
.review-stat { padding-right: 56px; }

/* 보증 카드 */
.guarantee-card { background: var(--bg3); }
.guarantee-card:hover { transform: none; box-shadow: none; border-color: var(--border3); }

/* ─── 9. 보조 블록 ────────────────────────────────────────── */
/* 플랫폼 스트립 — 가운데 뭉쳐 있던 것을 본문 기준선에 맞춰 왼쪽으로 정렬한다.
   왼쪽 기준선이 하나로 서 있는 것만으로 '짜여 있다'는 인상이 생긴다. */
.platform-strip {
  padding: 36px var(--pad) 40px;
  border-bottom: 1px solid var(--border);
  background: none;
  text-align: left;
}
.platform-strip > * {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}
.platform-label {
  font-size: 11.5px;
  letter-spacing: 0.02em;
  color: var(--text4);
  margin-bottom: 16px;
}
.platform-chips { justify-content: flex-start; max-width: var(--wrap); gap: 8px; }
.platform-chips span {
  background: none;
  border: 1px solid var(--border);
  color: var(--text3);
  border-radius: 5px;
  font-size: 12.5px;
}
.platform-chips span:hover { border-color: var(--border3); color: var(--text); background: none; }
.platform-note { color: var(--text4); font-size: 12.5px; margin-top: 18px; }

/* 신뢰 배지: 이모지 4개(📋✅🔒🛡️) → 아이콘 없이 4칸 표로.
   이모지는 'AI가 만든 페이지' 신호 1순위다. */
.trust-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad) 0;
  border-bottom: none;
  background: none;
}
.trust-icon { display: none !important; }
.trust-item {
  display: block;
  border-top: 1px solid var(--border);
  border-radius: 0;
  background: none;
  padding: 20px 24px 22px 0;
}
.trust-item strong { display: block; font-size: 13.5px; font-weight: 600; color: var(--text2); margin-bottom: 3px; }
.trust-item span   { display: block; font-size: 12.5px; color: var(--text4); line-height: 1.6; }

@media (max-width: 720px) {
  .trust-bar { grid-template-columns: 1fr 1fr; }
}

/* CTA 패널 */
/* CTA 패널: 600px 가운데 정렬 상자였다.
   페이지 전체가 왼쪽 기준선을 쓰는데 마지막 블록만 가운데면 끝에서 흐트러진다. */
.cta-panel {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-radius: 12px;
  max-width: 720px;
  margin: 0;
  text-align: left;
  padding: 44px 44px 46px;
  box-shadow: none;
}
.contact-bg { display: flow-root; }
.contact-bg > .cta-panel { margin-left: auto; margin-right: auto; }
.cta-panel h2 { font-size: clamp(23px, 2.4vw, 31px); letter-spacing: -0.035em; }
.cta-chips { justify-content: flex-start; }
.cta-sub { color: var(--text3); }
.cta-chip { background: none; border: 1px solid var(--border2); color: var(--text4); border-radius: 5px; }
.cta-chip::before { color: var(--text4); }
.cta-login span { color: var(--text2); }

/* 푸터 */
footer {
  /* 구분선은 화면 폭 전체로 긋고, 내용만 본문 기준선에서 시작하게 한다.
     (내비와 같은 계산 — 컨테이너를 감싸는 <div> 없이 padding 으로 맞춘다) */
  border-top: 1px solid var(--border);
  max-width: none;
  margin: 0;
  padding: 44px calc(max((100% - var(--wrap-outer)) / 2, 0px) + var(--pad));
}
.footer-logo {
  font-family: var(--sans);
  font-weight: 500;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.24em;
  font-size: 13px;
}
.footer-note  { color: var(--text4); font-size: 12.5px; }
.footer-links a { color: var(--text3); font-size: 12.5px; }
.footer-links a:hover { color: var(--text); }

/* 고정 CTA */
.fixed-cta { background: rgba(11,12,16,0.94); border-top: 1px solid var(--border2); }
.fixed-cta-note { color: var(--text3); }
.fixed-cta-note strong { color: var(--text2); }

/* 포커스 링 — 골드를 쓰는 세 번째 구역(접근성) */
a:focus-visible, button:focus-visible, [tabindex]:focus-visible,
input:focus-visible, textarea:focus-visible, select:focus-visible {
  outline: 2px solid var(--gold) !important;
  outline-offset: 3px;
}

/* 리빌: 0.7초 + 큰 이동은 과하다. 짧고 작게 */
@keyframes revealUp {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: none; }
}
html.reveal-ready .reveal.in { animation: revealUp .44s cubic-bezier(.22,1,.36,1) both; }

/* ─── 10. 반응형 ──────────────────────────────────────────── */
@media (max-width: 1040px) {
  .hero { grid-template-columns: 1fr; row-gap: 40px; }
  .hero-lede, .hero-aside { grid-column: 1; }
  .hero h1 { max-width: 18ch; }
}
@media (max-width: 720px) {
  body { font-size: 15px; }
  .hero { padding-top: 40px; }
  .hero h1 { font-size: clamp(27px, 7.6vw, 34px); max-width: none; }
  .hero-sub { max-width: none; }
  .hero-stats > div:nth-child(odd)  { border-right: 1px solid var(--border); }
  .hero-stats > div:nth-child(even) { padding-left: 16px; }
  .trust-item { padding-right: 0; }
}

/* ============================================================
   11. 하위 페이지 (rebal.html 계열 템플릿)
   /cost /rebal /lab /disc /aibot … 약 260개 페이지가 이 골격을 공유한다.
   홈과 같은 규율을 그대로 적용한다 — 특히 '모든 링크가 금색'이던 것.
   ============================================================ */

/* 본문 링크가 전부 금색이었다 → 색이 아니라 밑줄로 링크임을 알린다.
   ⚠ 원래 여기에 `a:not(.btn):not(.tag)...` 형태의 제외 목록 규칙이 있었는데,
     새 컴포넌트가 생길 때마다 목록에 넣어야 해서 결국 .card 와 .cta-btn 이 빠졌다
     (사례 34장 전체 밑줄 / 최종 CTA 대비 2.18:1). 18번에서 옵트인 방식으로 다시 썼다.
     여기서는 규칙을 '지운다' — 남겨두면 특이도(0,4,1)로 새 규칙을 이겨버린다. */

.wrap { max-width: var(--wrap); }

/* 자간 문제 — 템플릿이 모노 + .12em 자간을 라벨에 일괄로 걸어 뒀는데
   그 라벨 안에 한글이 들어가면 '규 칙 검 증' 처럼 글자가 흩어진다.
   로마자 라벨(STRATEGY LAB)도 살려야 하므로 자간을 .05em 로 낮춰 둘 다 성립시킨다. */
.eyebrow {
  font-family: var(--mono);
  color: var(--text4);
  letter-spacing: 0.05em;
}
.breadcrumb, .labrel-h, .stat-line,
.card-tag, .card-date, .card-specs span, .card-more, .verdict {
  letter-spacing: 0.01em;
}
.breadcrumb, .card-tag, .card-more, .verdict { font-family: var(--sans); }
.tbl th { letter-spacing: 0.01em; }

/* /lab 카드 — 금색 알약 태그를 무채색으로, 판정 뱃지만 의미색을 남긴다 */
.card-tag {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text4);
  border-radius: 4px;
}
.card, .yt-btn { border-radius: 10px; }
.card { background: var(--bg3); border: 1px solid var(--border); }
.card:hover { border-color: var(--border3); transform: none; box-shadow: none; }
.card-date { color: var(--text4); }
.card-more { color: var(--text4); }
.lead { color: var(--text3); max-width: 42em; }
.lead b { color: var(--text2); }

/* 버튼 */
.btn {
  background: var(--gold);
  color: #0b0c10;
  font-weight: 600;
  border-radius: 7px;
  box-shadow: none;
}
.btn:hover { background: var(--gold2); transform: none; box-shadow: none; }
.btn.ghost {
  background: none;
  border: 1px solid var(--border2);
  color: var(--text2);
}
.btn.ghost:hover { color: var(--text); border-color: var(--border3); background: none; }

/* 강조 박스 — 금색 배경/테두리를 표면 대비로 */
.note, .note.gold, .note.green, .note.info {
  background: var(--bg3);
  border: 1px solid var(--border2);
  color: var(--text2);
}
.note b { color: var(--text); }
.help {
  background: var(--bg3);
  border: 1px solid var(--border2);
  box-shadow: none;
  border-radius: 12px;
}

/* 수치·표 */
.stat .v { font-family: var(--mono); color: var(--text); font-weight: 500; }
.stat .l { color: var(--text4); }
.tbl th { color: var(--text3); font-weight: 500; }
.tbl td { color: var(--text2); }
.rule b { color: var(--text); }

/* 코드 박스 */
.codebox { border: 1px solid var(--border2); border-radius: 9px; background: var(--bg2); }
.codebox .bar { background: var(--bg3); border-bottom: 1px solid var(--border); }
.codebox .fname { color: var(--text3); }
.codebox button:hover, .codebox a.dl:hover { border-color: var(--border3); color: var(--text); }

/* FAQ / 단계 / 분기 / 요금 티어 */
.faq summary::after { color: var(--text3); }
.steps .s::before { background: rgba(255,255,255,0.07); color: var(--text2); border: 1px solid var(--border2); }
.split .ext { background: var(--bg3); border: 1px solid var(--border2); }
.split .ext li::before { color: var(--text4); }
.tier { border: 1px solid var(--border); background: var(--bg3); border-radius: 10px; }
.tier.feat { border-color: var(--border3); background: var(--bg4); box-shadow: none; }
.tier .badge {
  background: rgba(255,255,255,0.08);
  color: var(--text2);
  border: 1px solid var(--border2);
  border-radius: 4px;
  font-family: var(--sans);
  font-weight: 500;
  box-shadow: none;
}
.tag { border: 1px solid var(--border2); background: none; color: var(--text3); border-radius: 5px; }

/* 이모지 아이콘 블록 — 홈과 같은 이유로 숨긴다 */
.feats .ic { display: none !important; }
.feats .card { background: var(--bg3); border: 1px solid var(--border); border-radius: 10px; }

/* 하단 고지 */
.disc { color: var(--text4); border-top: 1px solid var(--border); }

/* /lab 검증 카드 판정 뱃지 — 통과/탈락은 '의미'가 있는 색이라 남기되 톤을 낮춘다 */
.v-pass { color: #6cc08a; }
.v-fail { color: #c97a76; }
.v-alt  { color: var(--text3); }

/* ============================================================
   12. 제작 사례 카드에 '실물' 넣기 (2026-09-16 2차)

   1차 리디자인은 덜어내기만 했다 — 금색·이모지·글로우를 걷어내니
   AI 티는 사라졌는데 대신 기억에 남을 게 없어졌다.
   전체 페이지를 축소해 보니 9,000px 가 전부 '회색 글자 상자' 반복이었고,
   이미지는 히어로 영상 하나뿐이었다. 프로그램 제작을 파는 사이트인데
   프로그램 화면이 한 장도 없었다.

   실사 58장이 cases/img/ 에 이미 있었고 사례 상세 페이지 안에만 묻혀 있었다.
   그 화면들은 대부분 어두운 트레이딩 UI(초록·빨강 손익) 라서
   이 배경 위에 그대로 얹힌다 — 영상이 '밝은 제품 창을 검정 위에 띄우는' 것과 같은 수법이다.
   페이지에서 유일하게 '색'을 갖는 자리를 장식이 아니라 실물에 준다.
   ============================================================ */
.pf-thumb {
  /* 카드 padding(30px 28px) 만큼 음수 마진 — 카드 폭 끝까지 꽉 채운다.
     .portfolio-item 이 overflow:hidden 이라 윗모서리는 카드 라운드에 맞춰 잘린다. */
  margin: -30px -28px 20px;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #090a0d;
  border-bottom: 1px solid var(--border);
}
.pf-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;   /* 대시보드는 위쪽에 정보가 모여 있다 */
  display: block;
  transition: transform .5s cubic-bezier(.22,1,.36,1);
}
.portfolio-item:hover .pf-thumb img { transform: scale(1.025); }

/* 검증(/lab) 카드는 실물 화면이 없어 썸네일이 없다.
   같은 클래스를 쓰므로 배경만 사례 카드와 맞춰 둔다. */
#lab .portfolio-item { background: var(--bg3); }
#lab .portfolio-item:hover { background: var(--bg4); }

/* ─── 섹션 리듬 ───────────────────────────────────────────
   --bg(#0b0c10) 와 --bg2 의 차이가 너무 작아 섹션 8개가
   하나의 긴 회색 띠로 읽혔다. 배경을 더 밝히면 영상의 '한 겹 검정' 톤이 깨지므로
   색이 아니라 '선'으로 끊는다. */
section:not(.hero) { border-top: 1px solid rgba(255,255,255,0.055); }

/* 제목을 한 단계 키워 본문과의 낙차를 준다 (36 → 40) */
.section-title { font-size: clamp(26px, 3vw, 40px); }

/* 사례 목록(/cases) 카드 — 34장 전부 실물 화면을 얹는다.
   내부 유입 1위 페이지인데 이미지가 0장이었다. .card 는 padding:28px 균일. */
.card { overflow: hidden; }
.card > .pf-thumb { margin: -28px -28px 20px; }

/* /cases 상단 '한 줄 요약' 박스 — 금색 배경 + 금색 왼쪽 막대 + 금색 강조가 한 덩어리였다.
   페이지에서 제일 먼저 보이는 블록이라 여기 하나로 전체가 금색 페이지로 읽힌다. */
.case-summary {
  background: var(--bg3);
  border: 1px solid var(--border2);
  border-left: 1px solid var(--border2);
  border-radius: 9px;
}
.case-summary strong { color: var(--text); }
.cs-label { color: var(--text4); }

/* 분야 필터 — 선택된 것만 밝게. 알약 + 금색 그라디언트는 뺀다 */
.filter-btn {
  font-family: var(--sans);
  font-size: 12.5px;
  letter-spacing: -0.005em;
  background: none;
  border: 1px solid var(--border2);
  color: var(--text3);
  border-radius: 6px;
  padding: 8px 14px;
}
.filter-btn:hover { color: var(--text); border-color: var(--border3); }
.filter-btn.on {
  background: rgba(255,255,255,0.1);
  border-color: var(--border3);
  color: var(--text);
  font-weight: 600;
}
.cs-label { color: var(--text4); letter-spacing: 0.01em; font-family: var(--sans); font-size: 11.5px; }

/* ============================================================
   13. 의미색 되살리기 (2026-09-16 3차)

   1·2차에서 '금색을 걷어낸다'를 너무 넓게 적용했다.
   별점 ★★★★★ 까지 회색이 되면서 '평점 5점'이 '평가 없음'처럼 읽혔고,
   '크몽 구매 확정'도 그냥 회색 태그가 됐다.

   별점과 검증 뱃지는 장식이 아니라 '정보'다. 색이 곧 내용이다.
   /lab 판정 뱃지(통과·전멸)와 사례 스크린샷의 초록·빨강 손익을 남긴 것과 같은 이유인데,
   후기·요금·보증에는 그 기준을 적용하지 않았다.

   규칙 (앞으로 색을 쓸 때 이 셋만):
     · 브랜드   골드  — 워드마크 · 주 CTA. 그 외 금지.
     · 의미     별점(앰버) · 검증/보장/포함(초록) · 손실/탈락(빨강)
     · 나머지   무채색
   ============================================================ */
:root {
  --star: #d9a441;   /* 별점 — 브랜드 앰버 계열, 골드보다 살짝 밝게 */
  --ok:   #5cb87f;   /* 검증됨 · 보장 · 포함 */
  --ok-dim:    rgba(92,184,127,0.10);
  --ok-border: rgba(92,184,127,0.26);
}

/* 별점 — 이 페이지에서 색이 가장 절실한 자리다 */
.review-stars {
  color: var(--star);
  font-size: 14px;
  letter-spacing: 2px;
  text-shadow: none;
}

/* '크몽 구매 확정' = 검증 배지. 초록이 곧 '확인됐다'는 뜻이다 */
.review-badge {
  color: var(--ok);
  background: var(--ok-dim);
  border: 1px solid var(--ok-border);
}

/* 포함 항목 체크 — 금색이던 것을 무채색으로 눌러놨다. 초록이 맞다 */
.service-features li::before,
.cta-chip::before,
.guarantee-list li::before { color: var(--ok); }

/* 사실 칩 (제작 기간 · 무료 코드) */
.meta-chip.green {
  color: var(--ok);
  background: var(--ok-dim);
  border-color: var(--ok-border);
}

/* ============================================================
   14. 사례 카드 설명 줄이기 (2026-09-16 4차)

   썸네일이 들어가면서 카드가 '이미지 + 제목 + 설명 4줄' 이 됐다.
   설명이 평균 120자라 이미지와 제목이 가진 힘을 도로 깎아먹는다.
   피드백도 같았다 — "제목 밑 설명은 한 줄로 하거나 아예 빼라".

   지우지 않고 '자른다'. 원문은 DOM 에 그대로 남아 검색 노출에 영향이 없고,
   되돌릴 때도 이 블록만 지우면 된다.
   (display:none 으로 감추면 숨긴 텍스트로 취급될 수 있어 피한다)
   ============================================================ */
.portfolio-item p,
.card-summary {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

/* ⚠ 함정: .portfolio-item p 에 flex:1 이 걸려 있었다.
   같은 줄 카드들의 높이를 맞추려고 문단을 늘리는 용도였는데,
   그러면 클램프 박스까지 같이 늘어나서 '…' 뒤에 잘린 줄이 도로 보인다.
   (제목이 1줄인 카드만 증상이 났다 — 남는 높이가 그만큼 컸기 때문)
   문단은 자기 높이만 쓰게 두고, 하단 정렬은 meta 쪽으로 옮긴다. */
.portfolio-item p { flex: 0 0 auto; }
.portfolio-item .portfolio-meta { margin-top: auto; }

/* /cases 는 이미 한 줄 훅(card-hook)을 따로 갖고 있다 —
   훅이 '한 줄 설명' 역할을 하므로 긴 요약은 더 짧게 접는다. */
.card-hook { color: var(--text2); }
.card-summary { -webkit-line-clamp: 2; margin-bottom: 14px; }

/* ============================================================
   15. 모바일 마감 (2026-09-16 5차)
   실측 하네스(같은 출처 iframe)로 360 / 390 / 430px 를 재서 나온 것만 고친다.
   ============================================================ */

/* 그리드·플렉스 자식이 min-content 때문에 부모를 밀어내는 것을 막는다.
   이게 좁은 화면 가로 스크롤의 가장 흔한 원인이다. */
.footer-expanded > *, .hero-lede, .hero-aside, .services-grid > *,
.portfolio-grid > *, .reviews-grid > *, .steps > * { min-width: 0; }

/* .footer-links 가 display:flex 인데 flex-wrap 이 없다.
   링크 6개(진행방식…개인정보처리방침)가 한 줄로 밀려 좁은 화면에서 삐져나온다.
   ⚠ 이건 리디자인이 만든 게 아니라 원래 있던 버그다 — 라이브도 같다. */
.footer-links { flex-wrap: wrap; row-gap: 10px; }

@media (max-width: 560px) {
  .footer-links { gap: 16px; row-gap: 10px; }

  /* 실측: 360px 에서 가로로 26px 넘쳤다(scrollWidth 386 / viewport 360).
     푸터가 인라인 style 로 2단 그리드인데, '사업자등록번호: 526-13-02780' 처럼
     끊을 수 없는 문자열의 min-content 가 1fr 트랙을 밀어냈다.
     인라인 style 이라 !important 없이는 못 이긴다. */
  footer .footer-expanded {
    grid-template-columns: 1fr !important;
    gap: 26px !important;
  }
}

@media (max-width: 720px) {
  /* 탭 영역 — /cases 분야 필터가 33px 였다. 손가락 기준으로 40px 이상 확보. */
  .filter-btn { padding: 12px 15px; font-size: 13px; }
  .video-unmute { padding: 9px 13px; }
  .hero-kmong { padding-bottom: 6px; }
  .pf-more, .card-more { padding: 4px 0; }

  /* 10~11px 라벨은 손에 들고 보면 안 읽힌다 — 한 단계씩 올린다 */
  .service-tag { font-size: 11px; }
  .section-eyebrow, .step-num { font-size: 11.5px; }
  .hero-ask-tip, .platform-label, .staged-note-badge,
  .review-date, .card-date { font-size: 12px; }
}

/* 320px (구형 iPhone SE) — 카드 그리드의 트랙 최소폭이 화면보다 넓어서 넘쳤다.
   .portfolio-grid 는 minmax(316px,1fr) 인데 320px 화면의 내용 폭은 280px 이다.
   아주 좁은 화면에서는 무조건 한 단으로 내린다. */
@media (max-width: 400px) {
  .portfolio-grid, .services-grid, .steps, .reviews-grid,
  .guarantee-grid, .cases-grid { grid-template-columns: 1fr !important; }
}

/* 푸터 링크는 12px 텍스트라 탭 영역이 얇다 — 세로 여백으로 손가락 자리를 만든다 */
@media (max-width: 720px) {
  .footer-links a { padding: 7px 0; }
}

/* ============================================================
   18. 외부 디자인 심사 지적 반영 — 1라운드 (2026-09-18)

   시각 65 / UX 70 점을 받고 나온 결함들. 앞의 세 개는 내가 만든 버그다.
   ============================================================ */

/* ── 버그 1. 본문 링크 규칙이 버튼과 카드까지 삼켰다 ───────────────
   11번에서 `.wrap a:not(.btn):not(.tag):not(.labrel-all)` 처럼
   '제외 목록'으로 버티게 썼는데, 새 컴포넌트가 생길 때마다 목록에 넣어야 한다.
   결국 두 군데가 빠졌다:
     · .cta-btn  — 최종 CTA 가 골드 배경에 흰 글자(2.18:1)로 안 읽혔다.
                   같은 버튼이 내비·히어로·요금제에선 8.32:1 이었다.
     · .card     — /cases 사례 34장의 제목·훅·요약·스펙까지 전부 밑줄이 그어졌다.
   제외 목록을 버리고 '클래스 없는 a' 만 고르는 방식으로 뒤집는다.
   버튼·카드·칩은 전부 클래스를 갖고 있으므로 자동으로 빠진다. */
:is(main, .wrap, section) a:not([class]) {
  color: var(--text);
  text-decoration: underline;
  text-decoration-color: var(--border3);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:is(main, .wrap, section) a:not([class]):hover { text-decoration-color: var(--text3); }

/* 앞의 규칙이 덮어썼던 것들을 명시적으로 되돌린다 */
.wrap a.card, main a.card, section a.card,
.wrap a.btn, main a.btn, section a.btn,
.portfolio-item, .pf-more, .card-more, .tag, .labrel-all,
.service-cta, .hero-kmong, .review-link {
  text-decoration: none;
}
.card, .card h3, .card p, .card span { text-decoration: none; }
/* 주 CTA 는 골드 위에 검정. 특이도 싸움에 다시 말려들지 않도록 못 박는다 */
.btn-primary, .hero-ask-btn, .cta-btn, .form-submit,
.service-card.featured .service-cta { color: #0b0c10 !important; }

/* ── 버그 3. 한 글자 아바타는 모노를 쓸 이유가 없다 ── */
.pf-avatar, .review-avatar { font-family: var(--sans); font-weight: 600; }

/* ── 기준선 이탈 4곳 ──────────────────────────────────────────
   1180px 컨테이너는 잘 지켜지는데 이 넷만 각자 다른 이유로 벗어나 있었다. */

/* FAQ — 880px 라서 오른쪽 300px 가 아무 설명 없이 비었다.
   질문 줄은 컨테이너를 꽉 채우고(표처럼 읽힌다), 답변 본문만 읽기 좋은 폭으로 묶는다. */
.faq-item { max-width: none; }
.faq-a-inner { max-width: 44em; }

/* 요금제 꼬리말 — 블록이 가운데 놓여 문단이 x=342 에서 시작했다 */
.pricing-foot { margin-left: 0; margin-right: 0; max-width: 62em; }

/* 후기 지표바 — 선은 1180 인데 숫자 4개가 755 에서 끝나 액자의 47%가 비었다 */
.review-stats-bar { display: grid; grid-template-columns: repeat(4, 1fr); }
.review-stat { padding-right: 0; }

/* 최종 CTA 패널 — 720px 중앙 섬이라 왼쪽 가장자리가 어디와도 안 맞았다 */
.cta-panel { max-width: none; }
.contact-bg > .cta-panel { margin-left: auto; margin-right: auto; }
.cta-panel h2, .cta-panel .cta-sub, .cta-panel .cta-chips { max-width: 46em; }

/* ── AI 티: 영문 대문자 eyebrow 8개 ──────────────────────────
   PROCESS / PRICING / PORTFOLIO / STRATEGY LAB / REVIEWS / FAQ / GUARANTEE / CONTACT.
   'LLM이 만든 랜딩페이지의 1순위 지문' 이라는 지적을 받았고, 실제로 의미를 얹지 않는다.
   섹션 구분은 이미 상단 헤어라인이 하고 있다. */
.section-eyebrow { display: none !important; }
.section-header { padding-top: 4px; }

/* ── 같은 수치를 한 페이지에 두 번 진열 ────────────────────────
   400+ / 4.9 / 261+ / 100% 가 히어로(2×2)와 후기(1×4)에 중복이었다.
   접힘 위에 있는 히어로 쪽을 남긴다. */
.review-stats-bar { display: none !important; }

/* ── 요금제 3장이 눈으로 구분이 안 된다 ──────────────────────── */
.service-card.featured {
  background: var(--bg4);
  border-color: var(--border3);
  box-shadow: 0 0 0 1px var(--border2), 0 18px 48px rgba(0,0,0,0.45);
}

/* ── 히어로 CTA 3개가 위계 없이 경쟁한다 ──────────────────────
   주 전환 경로인 '질문하기' 가 입력창 구석의 제일 작은 버튼이고,
   보조인 '상담창 바로 열기'·'요금제 보기' 가 더 크고 굵게 나와 위계가 뒤집혀 있었다.
   주 버튼을 키우고, 보조 둘은 텍스트 링크로 내린다. */
.hero-ask-btn { padding: 13px 26px; font-size: 15px; }
.hero-actions { gap: 22px; margin-top: 14px; }
.hero-actions .btn-ghost {
  border: none;
  padding: 0;
  font-size: 14px;
  color: var(--text3);
  border-bottom: 1px solid var(--border2);
  border-radius: 0;
  padding-bottom: 3px;
}
.hero-actions .btn-ghost:hover { color: var(--text); border-bottom-color: var(--text3); background: none; }

/* ── 요금제 3장이 눈으로 구분이 안 된다 ──────────────────────
   금액을 감춘 상태라 세 카드의 가격 줄이 전부 '상담 후 견적 안내' 로 같다.
   실제로 다른 건 그 아래 한 줄(대상 범위)이므로, 그쪽을 키우고 가격 줄을 내린다. */
.service-price-ask { font-size: 15px; font-weight: 500; color: var(--text3); }
.service-price-sub {
  font-size: 14px;
  font-weight: 600;
  color: var(--text2);
  margin-bottom: 20px;
}

/* ── 섹션 사이 빈 검은 띠가 250~300px 씩 쌓여 페이지가 12,000px 였다 ── */
:root { --gap: clamp(56px, 7vw, 96px); }
.section-header { margin-bottom: clamp(28px, 3vw, 40px); }

/* FAQ 아코디언의 ＋ 원형 아이콘은 템플릿 기본기다. 선 두 개로 바꾼다 */
.faq-icon {
  border-radius: 4px;
  background: none;
  border: 1px solid var(--border2);
  font-family: var(--sans);
  font-weight: 400;
}

.video-frame video { background: #0b0c10; }

/* [hidden] 은 display 선언에 진다 — 두 버튼 다 display 를 갖고 있으므로 명시적으로 막는다 */
.video-unmute[hidden] { display: none !important; }

/* ============================================================
   19. 2라운드 심사 반영 (시각 75 / UX 81)
   ============================================================ */

/* ── (1) 알약 어휘가 9종인데 전부 같은 생김새다 ───────────────
   테두리는 '누를 수 있다'는 약속인데, 클릭 불가인 사실 표시까지
   1px 테두리 + 둥근 모서리로 그려 고스트 버튼과 육안 구분이 안 됐다.
   규칙을 셋으로 접는다:
     · 누를 수 있음(버튼)  = 테두리 + 화살표
     · 누를 수 있음(필터)  = 채움
     · 누를 수 없음(사실)  = 테두리 없음. 배경 톤만. */
.platform-chips span,
.meta-chip, .service-tag, .card-tag, .portfolio-tag,
.review-badge, .cta-chip, .popular-badge, .staged-note-badge, .verdict, .tag {
  border: none;
  background: rgba(255,255,255,0.055);
  border-radius: 5px;
}
.platform-chips span:hover { background: rgba(255,255,255,0.1); color: var(--text2); border: none; }
.review-badge { background: var(--ok-dim); }
.meta-chip.green { background: var(--ok-dim); border: none; }
.portfolio-tag { background: none; padding: 0; }   /* 카드 머리글은 라벨이라 칩이 아니다 */
.card-tag { background: rgba(255,255,255,0.055); }
.v-pass, .v-fail, .v-alt { background: rgba(255,255,255,0.055); }

/* ── (2) 기준선 잔여 2곳 ──────────────────────────────────────
   .pricing-foot 은 중앙정렬을 풀면서 --pad(40px) 기준으로 붙어버려
   같은 섹션의 요금제 카드(x=131)와 90px 어긋났다.
   .cta-panel 은 패널 테두리 + 자체 패딩 때문에 내용이 x=85 에서 시작했다. */
.pricing-foot {
  max-width: var(--wrap);
  margin-left: auto;
  margin-right: auto;
}
.pricing-foot > * { max-width: 62em; }
.cta-panel {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0;
  max-width: var(--wrap);
  margin: 0 auto;
}

/* ── (3) 모노 라벨의 한글 — 공백만 모노에서 와서 어절 간격이 벌어진다 ──
   음절 자폭은 --mono 스택에 Pretendard 를 끼워 해결했는데, 공백(U+0020)은
   여전히 IBM Plex Mono 에서 와서 "지원  플랫폼", "제 작  기 간" 처럼 뜬다.
   한글이 섞이는 '라벨'은 sans 로 빼고, 값(파일명·수치·API명)만 모노로 남긴다.
   라벨과 값의 서체가 다른 건 오히려 스펙 시트답다. */
.platform-label, .card-specs, .card-specs strong, .stat-line,
.cs-label, .labrel-h, .tbl th, .breadcrumb, .eyebrow,
.step-num, .service-tag, .popular-badge, .staged-note-badge {
  font-family: var(--sans);
  letter-spacing: 0;
}
.card-specs span > strong, .card-specs code { font-family: var(--mono); }

/* ── (4) 서브페이지 영문 eyebrow ─────────────────────────────
   ⚠ 여기서 `.eyebrow { display:none }` 로 전역 숨김을 걸었다가 사고가 났다.
     영문 2개(/cases·/lab)를 지우려던 건데, 같은 클래스를 쓰는
     한글·날짜 eyebrow 24개가 같이 사라졌다 —
     'RSI SETTINGS — 2019-09-01 ~ 2026-09-06 · 비트코인 4시간봉' 처럼
     검증 기준일이 그 줄에만 있던 페이지가 여럿이었다.
     '기준일과 규모를 밝힌다' 가 이 브랜드의 차별점인데 그 표식을 지운 셈.
     → CSS 전역 숨김은 철회하고, 문제의 두 줄은 각 파일에서 직접 삭제했다. */

/* ── (5) 고정 CTA 가 두 개 겹쳐 있다 ──────────────────────────
   #stickyCta(≤768px)와 #fixedCta(스크롤 30~90%)가 둘 다 bottom:0 이라
   모바일 중간 구간에서 동시에 뜨고 z-index 로 하나가 완전히 가려졌다. */
@media (max-width: 768px) { .fixed-cta { display: none !important; } }

/* ── (6) /cases 요약 박스가 절반이 볼드 ── */
.case-summary strong { font-weight: 600; color: var(--text); }
.case-summary p { color: var(--text3); }

/* ── (7) /lab 카드 배지 줄이 넘쳐 날짜만 아래로 내려가는 카드가 2장 ── */
.card > .card-head, .card-tag + .verdict { min-width: 0; }
.card-date { white-space: nowrap; }

/* 최종 CTA — 카피(좌) / 질문창(우) 2단. 1,360px 패널 안에서 내용이 왼쪽 375px 에만
   몰려 72%가 비어 있던 것을 해소하면서, 히어로와 같은 입구를 여기에도 둔다. */
.cta-panel {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  column-gap: clamp(40px, 5vw, 72px);
  align-items: start;
  text-align: left;
}
.cta-panel .cta-copy h2 { margin-bottom: 14px; }
.cta-panel .cta-sub { margin-bottom: 22px; }
.cta-panel .cta-chips { margin-bottom: 20px; }
.cta-panel .cta-login { display: inline-block; }
.cta-ask { margin: 0; }
@media (max-width: 900px) {
  .cta-panel { grid-template-columns: 1fr; row-gap: 30px; }
}

/* 모바일 전용 후기 미리보기 스트립 (JS 가 후기 카드 2장을 복제해 넣는다) */
.review-peek { display: none; }
@media (max-width: 720px) {
  .review-peek {
    display: block;
    max-width: var(--wrap);
    margin: 0 auto;
    padding: 4px var(--pad) 28px;
  }
  .review-peek-head {
    font-size: 12.5px;
    color: var(--text4);
    margin: 0 0 12px;
  }
  .review-peek .review-card { margin-bottom: 10px; }
  .review-peek .review-text { font-size: 13.5px; }
  .review-peek-more {
    display: inline-block;
    font-size: 13px;
    color: var(--text3);
    text-decoration: none;
    border-bottom: 1px solid var(--border2);
    padding-bottom: 3px;
  }
}

/* ── 섹션 9개가 예외 없이 'H2 + 리드 + N칸 카드 그리드' 였다 ──────
   4단계 절차만이라도 카드에서 빼내 가로 타임라인으로 바꾼다.
   구조가 한 번 끊기면 '템플릿을 쌓았다'는 인상이 크게 줄어든다. */
.steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--border2);
  padding-top: 0;
}
.step {
  background: none !important;
  border: none !important;
  border-radius: 0;
  padding: 26px 28px 8px 0;
  position: relative;
}
.step:hover { background: none !important; border: none !important; }
/* 타임라인 눈금 */
.step::after {
  content: '';
  position: absolute;
  left: 0; top: -1px;
  width: 1px; height: 14px;
  background: var(--border3);
}
.step-num { color: var(--text3); font-weight: 500; }
@media (max-width: 720px) {
  .steps { grid-template-columns: 1fr; border-top: none; }
  .step { border-top: 1px solid var(--border) !important; padding: 20px 0 16px; }
  .step::after { display: none; }
}

/* ============================================================
   20. 3라운드 심사 반영 (시각 82 / UX 87)
   ============================================================ */

/* ── /lab 카드 제목 12개에 링크 밑줄이 그어져 있었다 ──────────
   lab.html 은 <h3><a href="/aibot2"> — '클래스 없는 a' 라
   18번의 본문 링크 규칙에 그대로 걸렸다. 복구 규칙을 조상(.card h3)에 걸었더니
   a 자신의 선언을 못 이겼다. a 를 직접 지정해야 한다. */
.card a:not([class]),
.card h3 a:not([class]),
.portfolio-item a:not([class]) { text-decoration: none; color: inherit; }
.card h3 a:not([class]):hover { color: var(--text); }

/* ── /lab 카드 상단 — 배지 줄이 넘쳐 날짜만 아래로 떨어지던 카드 2장 ──
   앞 라운드에서 `.card > .card-head` 에 걸었는데 그런 클래스가 없었다(실제는 .card-top). */
.card-top { flex-wrap: nowrap; align-items: center; }
.card-top .card-tag { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-top .card-date { white-space: nowrap; margin-left: auto; }

/* ── 스펙 줄의 '값' 이 아직 모노라 한글 어절 간격이 벌어진다 ────
   "약  2주  +  데모  3일", "봇  12종  ×  두  시장" — /cases 34장 · /lab 12장의
   각 3줄이라 사이트에서 가장 많이 반복되는 텍스트다.
   값도 sans 로 두고, 파일명·API명처럼 진짜 코드인 것만 <code> 로 모노를 남긴다. */
.card-specs span > strong { font-family: var(--sans); letter-spacing: 0; }
.card-specs code, .card-specs a { font-family: var(--mono); }

/* ── '가장 인기' 뱃지가 STANDARD 태그와 똑같은 회색 칩이 됐다 ──
   금색 그라디언트를 걷은 건 맞지만, 추천 카드를 알리는 신호가
   배경 4단계 차이 하나로 줄어 1440px 에서 거의 안 읽혔다.
   골드를 '주 CTA' 로 쓰는 카드이므로 뱃지도 같은 계열로 묶는다. */
.popular-badge {
  background: var(--gold-dim);
  color: var(--gold);
  font-weight: 600;
}

/* ── 고정 CTA ↔ 채팅 FAB 겹침의 데스크톱 판 ────────────────
   앞 라운드 수정이 @media(max-width:768px) 안에만 들어가서
   데스크톱은 포트폴리오~FAQ 전 구간에서 FAB 이 고정바 위에 겹쳐 있었다. */
/* ⚠ 앞서 `.kakao-fab` 에 걸었는데 DOM 에 그런 노드가 없었다 — 죽은 코드였다.
   실제 FAB 은 chat-widget.js 가 주입하는 `.algolab-chat-fab` 이다.
   실측: 1440×900 중간 스크롤에서 FAB 816~872px / 고정바 829~900px = 43px 겹침. */
@media (min-width: 769px) {
  .algolab-chat-fab { bottom: 96px; }
}

/* ── 후기 10장이 3열이라 마지막 줄이 1장 + 빈칸 2개 ───────────
   페이지 최하단 신뢰 구간이 '덜 채운 표' 로 끝나고 있었다.
   마지막 한 장이 홀로 남으면 가로로 펼쳐 배너처럼 마감한다. */
/* ⚠ nth-child(3n+1) 은 '3열' 을 가정한 규칙이다.
   2열(768~1024px)에서는 10번 카드가 여기에도 걸려서,
   없애려던 '한 장 + 빈칸' 을 그대로 재현하고 늘어진 배너 줄까지 하나 더 붙었다(실측).
   3열이 확실한 폭에서만 적용한다. */
/* 3열이 실제로 시작하는 폭은 1080px 이다 (그리드 내용폭 = 뷰포트-80, 3열 최소 = 320×3+20×2 = 1000).
   1025 로 잡았더니 1025~1079 구간으로 파손이 그대로 이사했다(실측). */
@media (min-width: 1080px) {
  .reviews-grid .review-card:last-child:nth-child(3n + 1) { grid-column: 1 / -1; }
}

/* ── /cases 카드 푸터가 스펙 줄 수에 따라 최대 22px 씩 어긋난다 ──
   ⚠ 앞서 `.card{display:flex}` 로 걸었더니 두 가지가 동시에 틀렸다.
     ① cases.html 의 `a.card{display:block}`(0,1,1)에 특이도로 져서 정작 대상엔 안 먹었고
     ② class="card" 를 쓰는 파일이 47개라 블로그 카드까지 박스 모델이 바뀌었다.
     → 대상 페이지의 실제 선택자(a.card)로 좁혀서 건다. */
a.card { display: flex; flex-direction: column; }
a.card .card-specs { margin-bottom: 16px; }
a.card .card-more { margin-top: auto; }

/* (썸네일 밝기 처리는 21번 블록으로 통합했다 — 여기 있던 중복 선언 제거) */

/* ============================================================
   21. 4라운드 심사 반영 (시각 85 / UX 89)
   ============================================================ */

/* 모바일 히어로 보조 링크 2개가 '반쯤 그리다 만 고스트 버튼' 이었다 —
   라벨은 100px 인데 밑줄은 165px 이고, 48px 박스 하단에 붙어 텍스트에서 20px 떨어져 있었다.
   주 CTA 바로 아래, 첫 화면이다. 모바일에서는 밑줄을 빼고 화살표만 남긴다. */
@media (max-width: 720px) {
  .hero-actions { gap: 18px; flex-wrap: wrap; }
  .hero-actions .btn-ghost {
    flex: 0 0 auto;
    min-height: 0;
    border-bottom: none;
    padding-bottom: 0;
    color: var(--text2);
  }
  .hero-actions .btn-ghost::after { content: ' →'; color: var(--text4); }
}

/* '한 줄 요약' 라벨이 아직 모노 + 자간이다.
   cases.html 의 `.case-summary .cs-label`(0,2,0)이 theme.css `.cs-label`(0,1,0)을 이긴다. */
.case-summary .cs-label, .yt-btn {
  font-family: var(--sans);
  letter-spacing: 0;
}

/* /lab 판정 뱃지 — v-alt 가 무채색이라 토픽 태그와 구분이 안 됐다.
   판정은 '이 검증의 결론' 이라 태그와 같은 무게로 보이면 안 된다. */
.verdict { font-weight: 600; }
.v-pass { color: #4fc48a; background: rgba(79,196,138,0.12); }
.v-fail { color: #f0736a; background: rgba(240,115,106,0.12); }
.v-alt  { color: var(--gold); background: var(--gold-dim); }

/* 썸네일 밝기 — 6% 감쇠로는 부족했다.
   문제의 캡처는 평균 휘도 173, 이웃 카드는 19~41 로 5배 차이다.
   밝은 캡처만 더 눌러 그리드 안에서 혼자 발광하지 않게 한다. */
.pf-thumb img { filter: brightness(0.9) saturate(0.95) contrast(1.02); }
.portfolio-item:hover .pf-thumb img,
.card:hover .pf-thumb img { filter: none; }

/* ============================================================
   22. 5라운드 심사 반영 (시각 87 / UX 91)
   ============================================================ */

/* 히어로 보조 링크 화살표는 CSS 로만 붙인다 (마크업의 리터럴 → 는 제거했다 — 겹쳤었다) */
.hero-actions .btn-ghost::after { content: ' →'; color: var(--text4); }

/* ── 채팅 FAB ↔ 고정 CTA 겹침 (데스크톱) ─────────────────────
   ⚠ 두 번 실패한 항목이다. 클래스 이름을 고쳐도 안 먹은 이유:
     chat-widget.js 가 런타임에 <style> 을 head 끝에 append 하고,
     그 안의 `.algolab-chat-fab{bottom:28px}` 와 여기 규칙이 특이도가 같아(0,1,0)
     '문서 순서상 뒤' 인 위젯 쪽이 이긴다.
     모바일이 멀쩡했던 건 index.html 이 !important 로 걸어뒀기 때문이다.
   실측: 1440×900, scrollY 4000 에서 FAB 872px / 고정바 829px = 43px 겹침. */
@media (min-width: 769px) {
  body .algolab-chat-fab { bottom: 96px !important; }
}

/* ── /lab 판정 뱃지 위계 ──────────────────────────────────────
   v-alt 에 브랜드 골드를 그대로 줬더니 '대안 확인' 이 '통과' 보다 크게 외쳤다.
   (골드는 로고·주 CTA·'가장 인기' 가 쓰는 색이라 시선을 먼저 가져간다)
   결론(통과/전멸)은 채움, 보조 판정(대안 확인)은 윤곽선으로 한 단계 낮춘다. */
.v-alt {
  color: var(--gold);
  background: none;
  box-shadow: inset 0 0 0 1px var(--gold-dim2);
}

/* ── 밝은 테마 제품 화면이 어두운 그리드에서 튄다 ──────────────
   원본 2장의 상단 밝기는 눌렀지만(249→200), 제품이 실제로 흰 화면이라
   더 어둡게 하면 왜곡이다. 대신 '가둬서' 카드 가장자리로 번지지 않게 한다. */
.pf-thumb {
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,0.4);
}
.pf-thumb::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(11,12,16,0.10), rgba(11,12,16,0.30));
}
.pf-thumb img { filter: brightness(0.92) saturate(0.96); }
.portfolio-item:hover .pf-thumb img,
.card:hover .pf-thumb img { filter: brightness(1) saturate(1); }
.portfolio-item:hover .pf-thumb::after,
.card:hover .pf-thumb::after { background: linear-gradient(180deg, rgba(11,12,16,0.04), rgba(11,12,16,0.16)); }

/* ── 내비 활성 탭 인디케이터가 헤더 밖에 떠 있었다 ──────────────
   bottom:-20px 라 62px 헤더의 하단 경계선보다 6px 아래에 찍혀 선이 두 줄로 겹쳤고,
   width:100% 가 패딩박스 기준이라 라벨보다 24~28px 넓었다. */
.algolab-nav .algolab-nav-center > a::after,
.algolab-nav .algolab-nav-center > .algolab-nav-dropdown-trigger.active > a::after {
  bottom: -14px;
  left: 14px;
  right: 14px;
  width: auto;
  transform: none;
}
.algolab-nav .algolab-nav-center > a::after { transform: scaleX(0); transform-origin: center; }
.algolab-nav .algolab-nav-center > a:hover::after,
.algolab-nav .algolab-nav-center > a.active::after { transform: scaleX(1); }

/* ── 768~1079px 2열 구간에서 사례·검증 그리드도 마지막 한 장이 고아가 된다 ──
   후기에만 넣었던 처리를 같은 성격의 그리드로 일반화한다. */
/* ── 마지막 줄 고아 카드 처리에 대한 결론 (3번 실패 후) ──────────
   `:last-child:nth-child(Xn+1) { grid-column: 1/-1 }` 로 마지막 한 장을 펴는 방식은
   이 사이트에서 두 가지 이유로 계속 실패했다.

   ① 열 전환점이 그리드마다 다르다. 트랙·갭·컨테이너 패딩이 제각각이라
      계산으로 잡은 경계가 매번 실제와 1~30px 어긋났고, 그 틈에서
      '3열인데 2n+1 규칙이 살아 있는' 상태가 되어 카드 2장 + 빈칸 + 늘어진 배너가 났다.
      1025 → 1079 → 1146 으로 같은 버그가 세 번 이사했다.
   ② 썸네일이 있는 카드는 폭을 3배로 펴면 aspect-ratio 때문에 높이도 3배가 된다.
      /cases 마지막 카드가 1132×1048(이웃 361×614)이 되고 SVG 좌우가 잘렸다.
      데스크톱 전 폭에서 보였다 — 닫으려던 고아보다 나쁘다.

   → 썸네일이 있는 그리드(.portfolio-grid · /lab·/cases 의 .grid)는 규칙을 걷어낸다.
     마지막 줄에 한 장 남는 건 카드 목록에서 흔한 모습이고 거의 눈에 안 띈다.
     글자만 있는 .reviews-grid 에만 남긴다 — 높이가 안 터지고, 실측으로 검증됐다.

   실측 (헤드리스 크롬, 721~1440px 19개 지점에서 행 구조를 직접 측정):
     .portfolio-grid  2→3열 전환 1064px · 3열에서 9장 = [3,3,3] 고아 없음
     .reviews-grid    2→3열 전환 1080px · 3열에서 전폭 배너 높이 276px(일반 카드와 동일) ✅
     .grid(lab·cases) 2→3열 전환 **1116px** — 계산으로 잡았던 1147·1148 은 둘 다 틀렸다.
   ⚠ 교훈: 열 전환점은 계산하지 말고 반드시 렌더해서 측정할 것. 세 번 틀렸다. */


/* 밝은 관리자 화면 썸네일 — 흰 여백이 많은 상단 툴바 대신
   데이터가 밀집한 구역이 보이게 살짝 내린다(휘도·정보량이 함께 좋아진다). */
.pf-thumb img { object-position: center 22%; }

/* 채팅 FAB 을 96px 로 올렸으면 짝인 토스트('안 읽은 답변' 말풍선)도 같이 올라가야 한다.
   FAB 만 올리는 바람에 토스트가 대각선 아래에 홀로 떨어져 고정 CTA 바 위에 걸쳤다(실측 41px 겹침). */
/* ⚠ 처음엔 min-width:769 로 걸었는데, chat-widget.js 자체 규칙이 max-width:480 이라
   481~768px 에 구멍이 남았다. 그 밴드에서 토스트가 스티키 CTA 바를 38px 덮었다
   (실측 744/768/600px — iPad 세로·폴더블 내부화면이 정확히 여기다).
   '같은 버그가 폭만 바꿔 계속 이사한다' 는 패턴의 네 번째였다. 밴드를 481 까지 내린다. */
@media (min-width: 481px) {
  body .algolab-chat-toast { bottom: 98px !important; }
}

/* 모바일 후기 미리보기 — 스트립에 복제한 2장이 아래 #reviews 에서 또 나온다.
   복제본을 지우는 대신, 모바일에서는 원본 쪽 해당 2장을 숨겨 한 번만 읽히게 한다. */
@media (max-width: 720px) {
  .review-peek ~ #reviews .reviews-grid .review-card:nth-last-child(-n + 2) { display: none; }
}

/* 요금제 3장이 786~979px 에서 2 + 1 로 끊겨 ADVANCED 옆에 카드 높이만 한 빈칸이 생긴다.
   지금 사이트에서 가장 눈에 띄는 고아이고 하필 돈 받는 섹션이다.
   카드가 3장뿐이라 이 구간에서는 한 줄로 세우는 게 낫다 (썸네일이 없어 높이 폭발 위험 없음). */
/* 실측: 트랙 288 + 갭 18 → 2열은 674px 부터 시작한다(계산한 786 이 아니었다).
   674~979px 전 구간이 2열 = 3장이 2 + 1 로 끊긴다.
   979 이하는 어차피 1열이거나 2열이므로 상한만 두고 전부 한 줄로 세운다. */
@media (max-width: 979px) {
  .services-grid { grid-template-columns: 1fr; }
}