/* ============================================================
   THE BEAR & COMPANY — 홈(index.html) 전용 덧칠
   styles.css 의 레이아웃은 그대로 두고, 브랜드·색·새 블록만 얹는다.
   다른 페이지(lp/book/admin/status/privacy/terms)는 이 파일을 읽지 않는다.
   ============================================================ */

.home-tbc {
  --tbc-indigo: #060daa;
  --tbc-indigo-ink: #04087a;
  --primary: var(--tbc-indigo);
  --primary-foreground: var(--bo-barely-white);
}

/* ---------- 워드마크 ---------- */
.home-tbc .brand-wordmark {
  font-size: 0.9375rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--bo-carbon-black);
}
.home-tbc .brand-accent { color: var(--tbc-indigo); }
.home-tbc .site-footer .brand-wordmark,
.home-tbc .site-footer .brand-accent { color: var(--bo-barely-white); }
.home-tbc .drawer-head .brand-wordmark { font-size: 0.875rem; }

/* ---------- 인디고 = 행동과 강조 ---------- */
.home-tbc .btn-primary { background: var(--tbc-indigo); color: var(--bo-barely-white); }
.home-tbc .btn-primary:hover { background: var(--tbc-indigo-ink); }
.home-tbc .hero .btn-primary { background: var(--bo-barely-white); color: var(--tbc-indigo); }
.home-tbc .section-title .accent { color: var(--tbc-indigo); }
.home-tbc .eyebrow::before,
.home-tbc .eyebrow::after { background: var(--tbc-indigo); }
.home-tbc .hero .eyebrow::before,
.home-tbc .hero .eyebrow::after { background: rgba(252, 250, 238, 0.42); }
.home-tbc .hero .eyebrow { font-size: 0.6875rem; letter-spacing: 0.12em; white-space: nowrap; gap: 10px; }
.home-tbc .hero .eyebrow::before,
.home-tbc .hero .eyebrow::after { width: 16px; }
@media (min-width: 900px) {
  .home-tbc .hero .eyebrow { font-size: 0.75rem; letter-spacing: 0.24em; gap: 12px; }
  .home-tbc .hero .eyebrow::before,
  .home-tbc .hero .eyebrow::after { width: 24px; }
}
.home-tbc .service-num,
.home-tbc .process-num,
.home-tbc .case-num { color: var(--tbc-indigo); }
.home-tbc .chip.active {
  background: var(--tbc-indigo);
  border-color: var(--tbc-indigo);
  color: var(--bo-barely-white);
}
.home-tbc .input:focus { border-color: var(--tbc-indigo); outline: none; }

/* ---------- 세 축 : 하는 일 / 결과 한 줄씩, 구분선 ---------- */

/* ---------- 매니페스토 ---------- */
.manifesto-title {
  font-size: clamp(2.25rem, 9.6vw, 3rem) !important;
  font-weight: 800;
  line-height: 1.12 !important;
  letter-spacing: -0.04em !important;
  color: var(--tbc-indigo) !important;
}
.section-head:has(.manifesto-title) { max-width: 1120px; margin-bottom: 40px; }
/* 매니페스토 본문 (2026-10-06 조합 A) — 첫 줄(작게) → 세 질문(크게, '왜'만 인디고, 가는 선으로 나눔) → 마지막 줄(작게). 사진 없음 */
.mf-body { max-width: 760px; margin: 0 auto; text-align: center; }
.mf-lead, .mf-close { margin: 0; font-size: 1rem; line-height: 1.7; letter-spacing: -0.04em; color: var(--bo-carbon-750); }
.mf-whys { list-style: none; margin: 32px 0; padding: 0; border-bottom: 1px solid var(--border); }
.mf-whys li {
  padding: 18px 0; border-top: 1px solid var(--border);
  font-size: min(2rem, calc((100vw - 48px) / 10.5)); font-weight: 900; line-height: 1.3; letter-spacing: -0.06em;
  color: var(--bo-carbon-black); white-space: nowrap;
}
/* 세 줄의 '왜'가 세로 한 줄로 서도록 — 가장 긴 줄 폭의 상자를 가운데 두고 안에서는 왼쪽 정렬 */
.mf-whys .q { display: inline-block; width: 9.8em; text-align: left; }   /* 9.8em = 가장 긴 "왜 이렇게 일해야 하는가."(실측 9.67em) */
.mf-whys em { font-style: normal; color: var(--tbc-indigo); margin-right: 0.12em; }
.mf-close { color: var(--bo-carbon-black); font-weight: 700; }
.form-note a { text-decoration: underline; text-underline-offset: 2px; }

@media (min-width: 900px) {
  .home-tbc .brand-wordmark { font-size: 1rem; }

  .manifesto-title { font-size: clamp(3.5rem, 5.4vw, 5.25rem) !important; }
  .section-head:has(.manifesto-title) { margin-bottom: 56px; }
  .mf-lead, .mf-close { font-size: 1.125rem; }
  .mf-whys { margin: 44px 0; }
  .mf-whys li { padding: 24px 0; font-size: clamp(2rem, 3vw, 2.75rem); }

  .home-tbc .process-step { padding: 40px 36px; }
  .home-tbc .process-step-title { font-size: 2rem; }

  .case-grid { grid-template-columns: repeat(3, 1fr); gap: 56px; }
  .case { position: relative; }
  .case + .case::before {
    content: "";
    position: absolute;
    left: -28px; top: 0; bottom: 0;
    border-left: 1px solid var(--border);
  }
}

/* ---------- /process 상세 ---------- */
.process-page { padding: 56px 0 96px; }
.process-page .container { max-width: 980px; }
.process-page .back { display: inline-block; font-size: 0.875rem; color: var(--muted-foreground); margin-bottom: 40px; }
.process-page .back:hover { color: var(--tbc-indigo); }
.process-page-head { text-align: center; margin-bottom: 56px; }
.pstep { border-top: 1px solid var(--bo-carbon-black); padding: 32px 0 40px; scroll-margin-top: 80px; }
.pstep-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; }
.pstep-num { font-family: var(--font-mono); font-size: 0.9375rem; color: var(--tbc-indigo); letter-spacing: 0.06em; }
.pstep-title { font-family: var(--font-heading); font-size: 2rem; font-weight: 700; letter-spacing: -0.03em; margin: 0; color: var(--bo-carbon-black); }
.pstep-en { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-foreground); }
.pstep-lead { font-size: 1.0625rem; line-height: 1.7; color: var(--bo-carbon-750); margin: 18px 0 24px; }
.pstep-cols { display: grid; gap: 24px; }
.pstep-cols h3 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em; color: var(--tbc-indigo); margin: 0 0 10px; }
.pstep-cols ul { list-style: none; margin: 0; padding: 0; }
.pstep-cols li { font-size: 0.9375rem; line-height: 1.6; padding: 10px 0; border-top: 1px solid var(--border); color: var(--bo-carbon-black); }
.process-cta { border-top: 1px solid var(--bo-carbon-black); padding-top: 48px; text-align: center; }
.process-cta p { font-size: 1.0625rem; line-height: 1.7; color: var(--bo-carbon-750); margin: 0 0 24px; }
@media (min-width: 900px) {
  .process-page { padding: 80px 0 140px; }
  .pstep { display: grid; grid-template-columns: 280px 1fr; gap: 40px; padding: 40px 0 56px; }
  .pstep-head { flex-direction: column; gap: 8px; }
  .pstep-title { font-size: 2.75rem; }
  .pstep-lead { margin-top: 0; }
  .pstep-cols { grid-template-columns: 1fr 1fr; gap: 32px; }
}

/* ---------- HERO : WE ARE THE BEAR. + BUILDERS OF CHOSEN BRANDS (2026-10-06: INTANGIBLE CREDIBILITY 신조 줄·배경 외곽선 글자 삭제 후 교체) ---------- */
.home-tbc .hero { min-height: calc(100vh - 60px); min-height: calc(100dvh - 60px); display: flex; flex-direction: column; padding: 64px 0 24px; }
.home-tbc .hero > .container { position: relative; z-index: 1; flex: 1 1 auto; display: flex; flex-direction: column; }
.home-tbc .hero-content { margin: auto 0; padding: 24px 0 40px; }

/* 배경에 겹친 외곽선 대형 글자 — 읽히기보다 '스며드는' 층 */
.hero-mark {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  font-family: var(--font-heading);
  font-weight: 800;
  line-height: 0.86;
  letter-spacing: -0.04em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(252, 250, 238, 0.16);
  user-select: none;
}
.hero-mark span {
  position: absolute;
  white-space: nowrap;
  font-size: 30vw;
}
.hero-mark-a { top: 6%; left: -4%; }
.hero-mark-b { bottom: 10%; right: -6%; }

.home-tbc .hero-title-en {
  font-size: clamp(3rem, 13.6vw, 5.25rem);
  font-weight: 800;
  line-height: 0.9;
  letter-spacing: -0.045em;
  margin: 0 0 22px;
}
.hero-credo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--font-heading);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.32em;
  color: var(--bo-barely-white);
}
.hero-credo::before,
.hero-credo::after {
  content: "";
  width: 28px;
  height: 1px;
  background: rgba(252, 250, 238, 0.5);
}
.home-tbc .hero-lead {
  color: rgba(252, 250, 238, 0.86);
  font-weight: 400;
  margin: 0 auto 32px;
}

.hero-meta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  padding-top: 14px;
  border-top: 1px solid rgba(252, 250, 238, 0.22);
  font-size: 0.75rem;
  color: rgba(252, 250, 238, 0.72);
}
.hero-meta b {
  font-family: var(--font-mono);
  font-weight: 500;
  color: var(--bo-barely-white);
  margin-right: 4px;
}
.hero-meta-end { display: none; letter-spacing: 0.14em; }
@media (max-width: 899px) { .hero-meta { display: none; } }

/* 등장 순서 : 라벨 → 제목 → 신조 → 문장 → 버튼 */
.hero-credo,
.hero-meta {
  opacity: 0;
  transform: translateY(14px);
  animation: tbnc-rise-in 1.4s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.hero-credo { animation-delay: 1.3s; }
.hero-meta  { animation-delay: 2.6s; }
.hero-mark { opacity: 0; animation: tbc-mark-in 2.4s ease 0.4s forwards; }
.hero-mark-a { animation: tbc-drift-a 48s linear infinite alternate; }
.hero-mark-b { animation: tbc-drift-b 48s linear infinite alternate; }
@keyframes tbc-mark-in { to { opacity: 1; } }
@keyframes tbc-drift-a { to { transform: translateX(6vw); } }
@keyframes tbc-drift-b { to { transform: translateX(-6vw); } }

@media (min-width: 900px) {
  .home-tbc .hero { padding: 80px 0 32px; }
  .home-tbc .hero-content { max-width: 1120px; }
  .home-tbc .hero-title-en { font-size: clamp(5.5rem, 10.5vw, 9rem); margin-bottom: 30px; }
  .hero-credo { font-size: 0.875rem; gap: 18px; margin-bottom: 22px; }
  .hero-credo::before,
  .hero-credo::after { width: 48px; }
  .home-tbc .hero-lead { font-size: 1.125rem; margin-bottom: 40px; }
  .hero-mark span { font-size: 19vw; }
  .hero-mark-a { top: 4%; left: -3%; }
  .hero-mark-b { bottom: 6%; right: -4%; }
  .hero-meta { justify-content: flex-start; gap: 32px; font-size: 0.8125rem; }
  .hero-meta-end { display: inline; margin-left: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-credo, .hero-meta, .hero-mark, .hero-mark-a, .hero-mark-b {
    animation: none; opacity: 1; transform: none;
  }
}

/* ============================================================
   서체 — Noto 2 : 한글 Noto Sans KR + 영문 디스플레이 Archivo Condensed
   (2026-10-05 사용자 확정. A2Z 는 이 두 페이지에서 쓰지 않는다)
   ============================================================ */
.home-tbc {
  --font-sans: 'Noto Sans KR', ui-sans-serif, system-ui, -apple-system, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-heading: var(--font-sans);
  --font-display: 'Archivo', 'Arial Narrow', 'Noto Sans KR', sans-serif;
}
body.home-tbc { font-family: var(--font-sans); letter-spacing: -0.01em; }

/* 영문 디스플레이 — 세로로 긴 압축 그로테스크 */
.home-tbc .hero-title-en,
.home-tbc .hero-title-en .w,
.home-tbc .hero-mark {
  font-family: var(--font-display);
  font-stretch: 68%;
  font-weight: 850;
  text-transform: uppercase;
}
.home-tbc .hero-title-en {
  font-size: clamp(3.75rem, 19vw, 6.5rem);
  line-height: 0.88;
  letter-spacing: -0.015em;
}
.home-tbc .hero-mark span { font-size: 40vw; }

/* 작은 영문 라벨 — 같은 가족의 조금 덜 압축된 폭 */
.home-tbc .eyebrow,
.home-tbc .hero-credo,
.home-tbc .hero-meta-end,
.home-tbc .reason-num {
  font-family: var(--font-display);
  font-stretch: 90%;
}
.home-tbc .brand-wordmark {
  font-family: var(--font-display);
  font-stretch: 100%;
  font-weight: 800;
  letter-spacing: 0.06em;
}

/* 한글 제목 — Noto Sans KR Black 으로 무게를 싣는다 */
.home-tbc .section-title,
.home-tbc .service-card-title,
.home-tbc .pstep-title { font-weight: 900; letter-spacing: -0.045em; }
.home-tbc .manifesto-title { font-weight: 900; }
.home-tbc .process-step-title,
.home-tbc .reason-title { font-weight: 700; letter-spacing: -0.03em; }
.home-tbc .aio-label { font-weight: 700; }

@media (min-width: 900px) {
  .home-tbc .hero-title-en { font-size: clamp(7rem, 13vw, 11.5rem); }
  .home-tbc .hero-mark span { font-size: 26vw; }
}

/* 티커 — 한글은 Black, 영문 외곽선은 압축 그로테스크 대문자 */
.home-tbc .ticker span { font-weight: 900; letter-spacing: -0.03em; }
.home-tbc .ticker span.ol {
  font-family: var(--font-display);
  font-stretch: 72%;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

/* 히어로 문장 — 모바일에서도 두 문장을 각각 한 줄로.
   자간 -0.05em 에서 긴 줄이 약 19.2em 이라 (화면폭 - 좌우 여백 48px) / 20.2 로 글자 크기를 맞추고 16px 에서 멈춘다 */
.lead-line { white-space: nowrap; }
.home-tbc .hero-lead { letter-spacing: -0.05em; }   /* 자간 좁게 (2026-10-05 요청, 기존 -0.01em) */
@media (max-width: 899px) {
  .home-tbc .hero-lead { font-size: min(calc((100vw - 48px) / 20.2), 1rem); line-height: 1.75; letter-spacing: -0.09em; }   /* 모바일은 더 좁게 (2026-10-05 요청) */
}

/* 히어로 영상 — 새벽의 한강(hero-dawn.mp4)은 기존 소재보다 밝고 안개가 끼는 구간이 있어
   밝기를 낮춰 작은 한글 문장 대비를 지킨다 (기존 1.32 → 1.05) */
.home-tbc .hero-bg-video { filter: brightness(1.05) saturate(0.9) contrast(1.02); }

/* ============================================================
   모바일 전체 자간 좁게 (2026-10-05 요청) — 900px 미만에서만.
   본문은 body 에서 상속, 자간을 따로 지정한 제목·라벨·폼만 개별로 덮는다.
   히어로 문장(-0.09em)은 위 규칙 그대로.
   ============================================================ */
@media (max-width: 899px) {
  body.home-tbc { letter-spacing: -0.05em; }
  .home-tbc input,
  .home-tbc textarea,
  .home-tbc button { letter-spacing: inherit; }

  /* 한글 제목 */
  .home-tbc .section-title,
  .home-tbc .service-card-title,
  .home-tbc .pstep-title { letter-spacing: -0.065em; }
  .home-tbc .manifesto-title { letter-spacing: -0.065em !important; }
  .home-tbc .process-step-title,
  .home-tbc .reason-title,
  .home-tbc .services-lead-emph,
  .home-tbc .ticker span { letter-spacing: -0.05em; }

  /* 영문 대문자 라벨 — 넓은 자간은 디자인 요소라 줄이되 남겨 둔다 */
  .home-tbc .eyebrow { letter-spacing: 0.12em; }
  .home-tbc .hero .eyebrow { letter-spacing: 0.08em; }
  .home-tbc .hero-credo { letter-spacing: 0.22em; }
  .home-tbc .reason-num { letter-spacing: 0.14em; }
  .home-tbc .brand-wordmark { letter-spacing: 0.04em; }
  .home-tbc .hero-title-en { letter-spacing: -0.025em; }
  .home-tbc .ticker span.ol { letter-spacing: 0.03em; }   /* 외곽선 글자는 붙어 보이지 않게 약간 남김 */
  .home-tbc .service-card-en,
  .home-tbc .pstep-en { letter-spacing: 0.06em; }
  .home-tbc .site-footer h4 { letter-spacing: 0.06em; }
}

/* ============================================================
   세 축 카드 정렬 (2026-10-05) — 브랜드 기획 · 사업 기획 · AX 기획
   ============================================================ */
/* 한두 단어만 다음 줄로 떨어지는 줄바꿈 방지 */
.service-item-desc { text-wrap: pretty; }
/* 영문 부제 — 고정폭 대신 사이트 공통 영문 서체 */
.home-tbc .service-card-en {
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 600;
  letter-spacing: 0.12em;
}
/* 가운뎃점 폭·여백 고정 — 기기·글꼴 대체와 무관하게 같은 간격 */
.sep {
  display: inline-block;
  width: 0.9em;
  text-align: center;
  font-family: var(--font-sans);
  letter-spacing: 0;
}
/* 목록 리듬 통일 + 카드 끝 링크를 바닥에 고정 → 세 카드 끝선 일치 */
.home-tbc .service-card-body { gap: 16px; }
.home-tbc .service-item { gap: 4px; }
.home-tbc .service-card-link { margin-top: auto; padding-top: 2px; }
@media (min-width: 900px) {
  .home-tbc .service-card-body { padding-bottom: 36px; }
  .home-tbc .service-card-link { margin-top: auto; }
  .home-tbc .service-card-body > .service-item:last-of-type { margin-bottom: 12px; }
}

/* 상담 섹션 설명 — 문장 대신 사명(社名) 서명 한 줄 */
.home-tbc .contact-sign {
  font-family: var(--font-display);
  font-stretch: 90%;
  font-weight: 700;
  font-size: 0.875rem;
  letter-spacing: 0.24em;
  color: var(--tbc-indigo);
  text-transform: uppercase;
}
@media (max-width: 899px) {
  .home-tbc .contact-sign { font-size: 0.8125rem; letter-spacing: 0.18em; }
}
/* 상담 제목 둘째 줄(약 12em)이 좁은 폰에서도 한 줄로 — 화면폭에 맞춰 최대 26px */
@media (max-width: 899px) {
  .home-tbc #contact .section-title { font-size: min(1.625rem, calc((100vw - 48px) / 12.5)); }
  .home-tbc #contact .section-title .accent { white-space: nowrap; }
}
/* 작은 폰에서 관심 축 칩 세 개가 한 줄에 */
@media (max-width: 420px) {
  .home-tbc .chip-row { gap: 6px; }
  .home-tbc .chip-row .chip { padding-left: 12px; padding-right: 12px; }
}

/* ============================================================
   세 축 (2026-10-05) — 인디고 띠의 열이 그대로 아래로 이어져 세부 항목이 된다.
   외곽선 숫자 + 꿰뚫는 가로선 + 열 경계 화살표(띠) → 숫자 아래 세로 실선이 띠를 뚫고 내려와 항목 점을 꿴다(세부).
   영상 없이 글·선만. 카드 상자·중복 제목 없음.
   ============================================================ */
.home-tbc .section-band { padding-top: 0; }
.axis-band { --ab-cream: 252, 250, 238; background: var(--tbc-indigo); color: var(--bo-barely-white); padding: 48px 0 56px; overflow: hidden; }
.ab-top { margin-bottom: 30px; }
.home-tbc .ab-eyebrow { color: rgba(var(--ab-cream), 0.75); justify-content: flex-start; }
.home-tbc .ab-eyebrow::before, .home-tbc .ab-eyebrow::after { background: rgba(var(--ab-cream), 0.5); }
.ab-title span { white-space: nowrap; }
.ab-title { margin: 14px 0 0; font-size: 1.125rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.5; color: rgba(var(--ab-cream), 0.92); }
.ab-rail { display: none; }
.ab-col { position: relative; }
.ab-col + .ab-col { margin-top: 30px; }
/* 모바일: 숫자 열(가운데 34px)을 세로선이 꿰뚫고 세부 항목까지 계속 내려간다 */
.ab-col::before { content: ""; position: absolute; left: 34px; top: -30px; bottom: 0; width: 1px; background: rgba(var(--ab-cream), 0.55); }
.ab-col:first-of-type::before { top: 8px; }
.ab-head { display: grid; grid-template-columns: 68px 1fr; column-gap: 18px; align-items: center; }
.ab-num {
  grid-row: span 3; position: relative; font-family: var(--font-display); font-stretch: 68%; font-weight: 700; font-size: 4.5rem; line-height: 0.9;
  letter-spacing: -0.02em; color: transparent; -webkit-text-stroke: 1.5px var(--bo-barely-white); text-align: center;
  background: var(--tbc-indigo);   /* 세로선이 숫자 뒤로 숨게 */
}
/* 축마다 역할 한 단어 (2026-10-06 사용자 요청) — 01 CREATOR · 02 BUILDER · 03 ADVISOR */
.ab-role { font-family: var(--font-display); font-stretch: 90%; font-weight: 700; font-size: 0.6875rem; letter-spacing: 0.26em; line-height: 1; color: rgba(var(--ab-cream), 0.72); align-self: end; margin-bottom: 6px; }
.ab-name { margin: 0; font-family: var(--font-sans); font-size: 1.375rem; font-weight: 900; letter-spacing: -0.045em; line-height: 1.3; color: #fff; }
.ab-line { margin: 2px 0 0; font-size: 0.9375rem; line-height: 1.5; color: rgba(var(--ab-cream), 0.82); letter-spacing: -0.03em; align-self: start; }

/* 세부 — 점은 세로선 위에, 글은 이름과 같은 칸에서 시작 */
.ab-detail { --tx: 34px; --ti: 86px; display: flex; flex-direction: column; padding-top: 18px; }
.ab-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; position: relative; }
.ab-items li { position: relative; display: flex; flex-direction: column; gap: 2px; padding-left: var(--ti); }
.ab-items li::before { content: ""; position: absolute; left: calc(var(--tx) - 3.5px); top: 0.62em; width: 7px; height: 7px; background: var(--bo-barely-white); }
.ab-items strong { font-size: 0.9375rem; font-weight: 700; letter-spacing: -0.04em; line-height: 1.45; color: #fff; }
.ab-items li > span { font-size: 0.8125rem; line-height: 1.55; letter-spacing: -0.03em; color: rgba(var(--ab-cream), 0.72); text-wrap: pretty; }
.item-more {
  align-self: flex-start; margin: 4px 0 0 calc(var(--ti) - 6px); padding: 2px 6px;
  font-family: var(--font-display); font-size: 1.375rem; font-weight: 700; line-height: 1; letter-spacing: 0.18em;
  color: var(--bo-barely-white); opacity: .6;
}
.ab-link {
  align-self: flex-start; margin: 14px 0 0 var(--ti); padding-bottom: 3px; border-bottom: 1px solid currentColor;
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.03em; color: #fff; text-decoration: none;
}
.home-tbc .axis-sub { margin: 28px 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--muted-foreground); }
.home-tbc .axis-sub strong { color: var(--bo-carbon-black); font-weight: 700; margin-right: 4px; }

@media (min-width: 900px) {
  /* 한 격자: 1행 제목 · 2행 머리 · 3행 세부. 인디고는 1~2행에만 깔리고(::after) 세부는 섹션 바탕 위 */
  .axis-band { background: none; color: inherit; padding: 64px 0 0; }
  .ab-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 20px; position: relative; isolation: isolate; }
  .ab-grid::after { content: ""; grid-row: 1 / 3; grid-column: 1 / -1; margin: -64px calc(50% - 50vw) 0; background: var(--tbc-indigo); z-index: -1; }
  .ab-top { grid-column: 1 / -1; grid-row: 1; display: flex; justify-content: space-between; align-items: baseline; gap: 32px; margin-bottom: 44px; }
  .ab-title { margin: 0; font-size: 1.0625rem; font-weight: 500; text-align: right; color: rgba(var(--ab-cream), 0.8); }
  /* 띠 전체를 가로지르는 선 — 숫자 가운데 */
  .ab-rail { display: block; grid-row: 2; grid-column: 1 / -1; align-self: start; height: 1px; margin: 68px calc(50% - 50vw) 0; background: rgba(var(--ab-cream), 0.7); }
  .ab-col { grid-row: 2 / span 2; display: grid; grid-template-rows: subgrid; }
  .ab-col:nth-of-type(1) { grid-column: 1; } .ab-col:nth-of-type(2) { grid-column: 2; } .ab-col:nth-of-type(3) { grid-column: 3; }
  .ab-col + .ab-col { margin-top: 0; }
  .ab-col::before { display: none; }
  .ab-head { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 0 32px 64px; }
  .ab-num { font-size: 9.5rem; text-align: left; margin-bottom: 22px; background: transparent; }
  .ab-role { font-size: 0.8125rem; margin-bottom: 12px; align-self: auto; }
  .ab-name { font-size: 2rem; align-self: auto; }
  .ab-line { font-size: 1.0625rem; margin-top: 10px; align-self: auto; }
  /* 열 경계선 — 띠 안은 크림, 세부 쪽은 옅은 인디고로 이어진다 */
  .ab-col + .ab-col .ab-head::before { content: ""; position: absolute; left: -10px; top: -8px; bottom: 0; width: 1px; background: rgba(var(--ab-cream), 0.35); }
  .ab-col + .ab-col .ab-detail::before { content: ""; position: absolute; left: -10px; top: 0; bottom: 0; width: 1px; background: rgba(6, 13, 170, 0.14); }
  /* 열 오른쪽 끝(다음 열 경계) 화살촉 */
  .ab-col:not(:last-of-type) .ab-head::after { content: ""; position: absolute; right: -6px; top: 63px; border-left: 9px solid var(--bo-barely-white); border-top: 5.5px solid transparent; border-bottom: 5.5px solid transparent; }
  /* 세로 실선: 한 줄 설명 아래에서 띠 끝까지(크림) → 세부 항목 점까지(인디고) */
  .ab-line { position: relative; }
  .ab-line::after { content: ""; position: absolute; left: 3px; top: calc(100% + 18px); height: 46px; width: 1px; background: rgba(var(--ab-cream), 0.55); }
  .ab-detail { --tx: 3.5px; --ti: 24px; position: relative; padding: 0 32px 8px; }
  .ab-items { gap: 18px; padding-top: 40px; }
  .ab-items::before { content: ""; position: absolute; left: 3px; top: 0; bottom: 6px; width: 1px; background: var(--tbc-indigo); }
  .ab-items li::before { background: var(--tbc-indigo); }
  .ab-items strong { font-size: 1.0625rem; color: var(--bo-carbon-black); }
  .ab-items li > span { font-size: 0.875rem; color: var(--muted-foreground); }
  .item-more { margin-top: 6px; color: var(--tbc-indigo); opacity: .55; }
  .ab-link { margin-top: auto; padding-top: 28px; padding-bottom: 4px; border-bottom: 0; color: var(--tbc-indigo); }
  .ab-link { background: linear-gradient(currentColor, currentColor) left bottom / 100% 1px no-repeat; }
  .home-tbc .axis-sub { margin: 56px 0 0; padding-top: 28px; border-top: 1px solid var(--border); font-size: 1.0625rem; }
  /* 진입: 가로선이 왼쪽부터 그어지고 → 열이 차례로 → 세로 실선이 아래로 내려온다 */
  .axis-band[data-reveal] { transform: none; opacity: 1; }
  .axis-band[data-reveal] .ab-rail { transform: scaleX(0); transform-origin: left; transition: transform 1.4s cubic-bezier(.65,0,.35,1) .2s; }
  .axis-band.in .ab-rail { transform: scaleX(1); }
  .axis-band[data-reveal] .ab-head > *, .axis-band[data-reveal] .ab-detail { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1); }
  .axis-band.in .ab-head > *, .axis-band.in .ab-detail { opacity: 1; transform: none; }
  .axis-band[data-reveal] .ab-items::before, .axis-band[data-reveal] .ab-line::after { transform: scaleY(0); transform-origin: top; transition: transform .7s cubic-bezier(.65,0,.35,1); }
  .axis-band.in .ab-items::before, .axis-band.in .ab-line::after { transform: scaleY(1); }
  .axis-band.in .ab-col:nth-of-type(1) .ab-head > * { transition-delay: .25s; }
  .axis-band.in .ab-col:nth-of-type(2) .ab-head > * { transition-delay: .7s; }
  .axis-band.in .ab-col:nth-of-type(3) .ab-head > * { transition-delay: 1.15s; }
  .axis-band.in .ab-col:nth-of-type(1) .ab-line::after { transition-delay: .7s; }
  .axis-band.in .ab-col:nth-of-type(2) .ab-line::after { transition-delay: 1.15s; }
  .axis-band.in .ab-col:nth-of-type(3) .ab-line::after { transition-delay: 1.6s; }
  .axis-band.in .ab-col:nth-of-type(1) .ab-items::before, .axis-band.in .ab-col:nth-of-type(1) .ab-detail { transition-delay: 1.1s; }
  .axis-band.in .ab-col:nth-of-type(2) .ab-items::before, .axis-band.in .ab-col:nth-of-type(2) .ab-detail { transition-delay: 1.55s; }
  .axis-band.in .ab-col:nth-of-type(3) .ab-items::before, .axis-band.in .ab-col:nth-of-type(3) .ab-detail { transition-delay: 2s; }
}
@media (prefers-reduced-motion: reduce) {
  .axis-band[data-reveal] *, .axis-band[data-reveal] *::before, .axis-band[data-reveal] *::after { transition: none !important; }
}

/* 세 축 모바일 토글 (2026-10-06 사용자 요청) — 900px 미만에선 세부 항목·링크를 접어 두고 머리를 터치해야 펼친다. 데스크톱은 항상 펼침 */
.ab-toggle { display: none; }
@media (max-width: 899px) {
  .ab-head { position: relative; padding-right: 44px; cursor: pointer; -webkit-tap-highlight-color: transparent; }
  .ab-head:focus-visible { outline: 2px solid rgba(var(--ab-cream), 0.8); outline-offset: 6px; }
  .ab-toggle { display: block; position: absolute; right: 0; top: 50%; width: 30px; height: 30px; margin-top: -15px; border: 1px solid rgba(var(--ab-cream), 0.55); }
  .ab-toggle::before, .ab-toggle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 12px; height: 1.5px; margin: -0.75px 0 0 -6px; background: var(--bo-barely-white); transition: transform .3s ease; }
  .ab-toggle::after { transform: rotate(90deg); }
  .ab-col.open .ab-toggle::after { transform: rotate(0deg); }        /* + → − */
  .ab-detail { max-height: 0; overflow: hidden; opacity: 0; padding-top: 0; transition: max-height .45s ease, opacity .3s ease, padding-top .45s ease; }
  .ab-col.open .ab-detail { max-height: 560px; opacity: 1; padding-top: 18px; }
}
@media (max-width: 899px) and (prefers-reduced-motion: reduce) {
  .ab-detail, .ab-toggle::before, .ab-toggle::after { transition: none; }
}

/* 카톡 상담 삭제(2026-10-05) — 하단 고정 바는 상담 신청 한 개만, 폭 전체 */
.home-tbc .floating-cta-inner { grid-template-columns: 1fr; }

/* 매니페스토 제목 (2026-10-06 사용자 문구 "Brands exist to be chosen.", 한글 번역 줄 없음) — 히어로 WE ARE THE BEAR. 와 같은 영문 압축체 대문자 */
.home-tbc .manifesto-title.mf-en {
  font-family: var(--font-display); font-stretch: 68%; font-weight: 850; text-transform: uppercase;
  font-size: min(5rem, calc((100vw - 48px) / 6)) !important; line-height: 0.9 !important;   /* 두 줄 고정 — 긴 줄 "TO BE CHOSEN." 실측 5.7em */
  white-space: nowrap; letter-spacing: -0.01em !important;
}
@media (min-width: 900px) {
  .home-tbc .manifesto-title.mf-en { font-size: clamp(5.5rem, 8.4vw, 8.5rem) !important; }
}

/* 브랜드 필름 (2026-10-06) — 매니페스토 끝, 회의실 사진이 있던 자리. 16:9 포스터 + 인디고 정사각 재생 버튼(모서리 0) */
.mf-film { max-width: 1120px; margin: 48px auto 0; }
.mf-film-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; background: #000; overflow: hidden; }
.mf-film-btn { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: pointer; }
.mf-film-btn img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .3s ease; }
.mf-film-btn:hover img, .mf-film-btn:focus-visible img { opacity: .86; }
.mf-film-btn:focus-visible { outline: 3px solid var(--tbc-indigo); outline-offset: 4px; }
.mf-play { position: absolute; left: 3%; bottom: 4%; width: 48px; height: 48px; background: var(--tbc-indigo); }   /* 포스터 가운데 제목을 가리지 않게 왼쪽 아래 */
.mf-play::after { content: ""; position: absolute; left: 50%; top: 50%; margin: -8px 0 0 -5px; border-left: 14px solid var(--bo-barely-white); border-top: 8px solid transparent; border-bottom: 8px solid transparent; }
.mf-film-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.mf-film figcaption { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; margin-top: 12px; font-size: 0.8125rem; color: var(--muted-foreground); }
.mf-film figcaption span { font-family: var(--font-display); font-stretch: 90%; font-weight: 700; letter-spacing: 0.22em; color: var(--tbc-indigo); }
.mf-film figcaption a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 900px) {
  .mf-film { margin-top: 72px; }
  .mf-play { width: 72px; height: 72px; }
  .mf-play::after { margin: -12px 0 0 -7px; border-left-width: 20px; border-top-width: 12px; border-bottom-width: 12px; }
}

/* ============================================================
   언어 전환 링크 + 영문판(/en, body.lang-en) 덧칠 (2026-10-08)
   한글판은 자간을 좁히고 한 줄 고정(nowrap)으로 맞춰 두었으므로
   영문판에서는 자간을 기본값 가까이 되돌리고 줄바꿈을 허용한다.
   ============================================================ */
.lang-link {
  margin-left: auto;
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 40px; height: 40px; padding: 0 6px;
  font-family: var(--font-display); font-stretch: 90%; font-weight: 700;
  font-size: 0.75rem; letter-spacing: 0.16em; text-indent: 0.16em;
  color: var(--bo-carbon-750); text-decoration: none;
}
.lang-link:hover { color: var(--tbc-indigo); }
.home-tbc .site-header-inner { gap: 8px; }
@media (min-width: 900px) { .home-tbc .site-header-inner { gap: 16px; } }

body.home-tbc.lang-en { letter-spacing: 0; }
.lang-en .hero-lead { letter-spacing: 0; }
.lang-en .section-title,
.lang-en .ab-name { letter-spacing: -0.02em; }
.lang-en .manifesto-title { letter-spacing: -0.03em !important; }
.lang-en .ab-title,
.lang-en .ab-line,
.lang-en .ab-items strong,
.lang-en .ab-items li > span,
.lang-en .ab-link,
.lang-en .mf-lead,
.lang-en .mf-close { letter-spacing: 0; }
.lang-en .mf-whys li { letter-spacing: -0.03em; }
.lang-en .mf-whys .q { width: 9.2em; }   /* 가장 긴 "Why this company."(실측 9.1em) 기준 */
.lang-en .ticker span { letter-spacing: -0.01em; }
@media (max-width: 899px) {
  body.home-tbc.lang-en { letter-spacing: 0; }
  .lang-en .lead-line { white-space: normal; }
  .lang-en .hero-lead { font-size: 0.9375rem; line-height: 1.6; letter-spacing: 0; }
  .lang-en .lead-line { display: inline-block; text-wrap: balance; }
  .lang-en .ab-line { text-wrap: balance; }
  .lang-en .section-title { letter-spacing: -0.025em; }
  .lang-en .manifesto-title { letter-spacing: -0.03em !important; }
  .lang-en .ab-title span { white-space: normal; }
  .lang-en #contact .section-title { font-size: min(1.625rem, calc((100vw - 48px) / 14)); }
  .lang-en .ticker span { letter-spacing: -0.01em; }
}