/* ============================================================
   코너스톤브라더스 — 공통 스타일
   토큰 · 헤더/푸터 · 모션 · 매트릭스 히어로

   Tailwind 유틸리티는 각 페이지 본문(정적 HTML)에서 사용하고,
   JS로 주입되는 헤더/푸터는 여기의 클래스만 사용한다.
   런타임 스캐너를 기다리지 않으므로 주입 직후 FOUC가 없다.
   ============================================================ */

:root {
  --ink-950: #0A0D16;
  --ink-900: #111827;
  --ink-800: #1F2937;
  --ink-700: #374151;
  --ink-500: #6B7280;
  --ink-400: #9CA3AF;
  --ink-200: #E5E7EB;
  --ink-100: #F3F4F6;
  --ink-50:  #F7F8FA;
  --paper:   #FFFFFF;
  --brand:   #EF2424;
  --brand-600: #D41F1F;

  --content: 1200px;
  --nav-h: 72px;

  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring:   cubic-bezier(0.32, 0.72, 0, 1);

  --icon-ext: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M14 3h7v7h-2V6.41l-9.29 9.3l-1.42-1.42l9.3-9.29H14zM5 5h5v2H7v10h10v-3h2v5H5z'/%3E%3C/svg%3E");
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  /* keep-all 만 건다. overflow-wrap:anywhere 를 같이 걸면 keep-all 이 무시되어
     한글 단어 중간에서 줄이 끊긴다 (자간이 깨져 보이는 원인). */
  word-break: keep-all;
  -webkit-font-smoothing: antialiased;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink-800);
}

/* URL 처럼 긴 라틴 문자열만 예외적으로 강제 줄바꿈 */
.break-url { word-break: break-all; }

/* ============================================================
   타이포그래피 스케일
   페이지에서는 아래 클래스만 쓴다. Tailwind 임의 크기값
   (text-[2.6rem] 등) 을 섞으면 페이지마다 크기가 어긋난다.

   한글 기준 원칙
   - font-weight 는 800 까지만. 900 은 한글 획이 뭉친다
   - letter-spacing 은 큰 제목에만 -0.02em. 본문은 0
   - line-height 는 라틴보다 넉넉하게 (제목 1.3, 본문 1.85)
   ============================================================ */
.t-display {
  font-size: clamp(2.25rem, 1.5rem + 3.3vw, 3.75rem);
  font-weight: 800; letter-spacing: -0.022em; line-height: 1.3;
}
.t-h2 {
  font-size: clamp(1.75rem, 1.35rem + 1.8vw, 2.5rem);
  font-weight: 800; letter-spacing: -0.018em; line-height: 1.36;
}
.t-h3 {
  font-size: clamp(1.25rem, 1.14rem + 0.5vw, 1.5rem);
  font-weight: 700; letter-spacing: -0.012em; line-height: 1.46;
}
.t-h4 { font-size: 1.1875rem; font-weight: 700; letter-spacing: -0.008em; line-height: 1.5; }
.t-lead { font-size: clamp(1.125rem, 1.05rem + 0.36vw, 1.375rem); line-height: 1.8; }
.t-body { font-size: 1.0625rem; line-height: 1.8; }
.t-small { font-size: 0.9375rem; line-height: 1.72; }
.t-label {
  font-size: 0.75rem; font-weight: 800;
  letter-spacing: 0.14em; text-transform: uppercase;
}
.t-num { font-size: clamp(2rem, 1.55rem + 1.7vw, 2.875rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1; }

.muted { color: var(--ink-500); }
.onDark .muted, .muted--onDark { color: rgba(255, 255, 255, .58); }

/* 본문 문단의 읽기 폭 제한 */
.measure { max-width: 62ch; }
.measure-sm { max-width: 46ch; }

.shell { max-width: var(--content); margin-inline: auto; padding-inline: 1rem; }
@media (min-width: 640px)  { .shell { padding-inline: 1.5rem; } }
@media (min-width: 1024px) { .shell { padding-inline: 2rem; } }

/* ── 워드마크 ──────────────────────────────────────────── */
.wordmark { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; }
.wordmark__mark { width: 26px; height: 26px; flex: none; display: block; }
.wordmark__text {
  font-weight: 800; letter-spacing: 0.01em; line-height: 1;
  font-size: 1.0625rem; white-space: nowrap;
}
/* 좁은 화면에서는 BROTHERS 를 감춰 심볼 + CORNERSTONE 만 남긴다 */
.wordmark__sub { font-weight: 500; letter-spacing: 0.06em; }
@media (max-width: 380px) { .wordmark__sub { display: none; } }

/* ============================================================
   HEADER
   ============================================================ */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: rgba(255, 255, 255, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--ink-200);
}
.nav__bar {
  height: var(--nav-h);
  display: flex; align-items: center; justify-content: space-between; gap: 1.5rem;
}
.nav .wordmark__text { color: var(--ink-950); }

.nav__menu { display: none; align-items: center; gap: .25rem; }
@media (min-width: 1024px) { .nav__menu { display: flex; } }

.nav__item { position: relative; }
.nav__link {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .5rem .85rem;
  font-size: .9375rem; font-weight: 700; color: var(--ink-700);
  text-decoration: none; border-radius: 6px;
  transition: color .18s var(--ease-out-expo), background-color .18s var(--ease-out-expo);
}
.nav__link:hover,
.nav__item:focus-within > .nav__link { color: var(--ink-950); background: var(--ink-50); }
.nav__link[aria-current="page"] { color: var(--brand); }

/* 드롭다운 — hover / focus-within 으로만 열리는 CSS 전용 구현 */
.nav__drop {
  position: absolute; left: 0; top: calc(100% + 6px); min-width: 224px;
  background: var(--paper); border: 1px solid var(--ink-200); border-radius: 12px;
  box-shadow: 0 18px 40px -18px rgba(10, 13, 22, .28);
  padding: .4rem; display: flex; flex-direction: column;
  opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .2s var(--ease-out-expo), transform .2s var(--ease-out-expo), visibility .2s;
}
.nav__item:hover > .nav__drop,
.nav__item:focus-within > .nav__drop { opacity: 1; visibility: visible; transform: translateY(0); }
.nav__drop a {
  padding: .6rem .75rem; border-radius: 8px;
  font-size: .875rem; font-weight: 600; color: var(--ink-700); text-decoration: none;
  display: flex; align-items: center; justify-content: space-between; gap: .75rem;
  transition: background-color .15s ease, color .15s ease;
}
.nav__drop a:hover { background: var(--ink-50); color: var(--ink-950); }
.nav__drop a[data-ext]::after {
  content: ''; width: 13px; height: 13px; flex: none; opacity: .4;
  background: currentColor;
  -webkit-mask: var(--icon-ext) center / contain no-repeat;
  mask: var(--icon-ext) center / contain no-repeat;
}

/* ── 버튼 ─────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  font-weight: 700; text-decoration: none; border-radius: 6px; cursor: pointer;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease,
              transform .25s var(--ease-out-expo);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: scale(.98); }
.btn--brand { background: var(--brand); color: #fff; padding: .85rem 1.5rem; font-size: .9375rem; border: 1px solid var(--brand); }
.btn--brand:hover { background: var(--brand-600); border-color: var(--brand-600); }
.btn--ghost {
  border: 1px solid var(--ink-200); color: var(--ink-900);
  padding: .85rem 1.5rem; font-size: .9375rem; background: var(--paper);
}
.btn--ghost:hover { border-color: var(--ink-950); }
.btn--onDark { border: 1px solid rgba(255,255,255,.22); color: #fff; padding: .85rem 1.5rem; font-size: .9375rem; }
.btn--onDark:hover { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.45); }
.btn--sm { padding: .6rem 1.1rem; font-size: .875rem; }

.nav__cta { display: none; }
@media (min-width: 1024px) { .nav__cta { display: inline-flex; } }

/* ── 모바일 토글 (햄버거 → X 모프) ───────────────────── */
.nav__toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 5px;
  width: 42px; height: 42px; padding: 0 10px; border: 0; background: transparent; cursor: pointer;
}
@media (min-width: 1024px) { .nav__toggle { display: none; } }
.nav__toggle span {
  display: block; height: 2px; width: 100%; background: var(--ink-950); border-radius: 2px;
  transition: transform .35s var(--ease-spring), opacity .2s ease;
}
.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ── 모바일 시트 (스태거 리빌) ──────────────────────── */
.nav__sheet {
  position: fixed; inset: var(--nav-h) 0 0; z-index: 39;
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px);
  overflow-y: auto; padding: 1.5rem 0 3rem;
  opacity: 0; visibility: hidden; transform: translateY(-8px);
  transition: opacity .3s var(--ease-out-expo), transform .3s var(--ease-out-expo), visibility .3s;
}
.nav__sheet[data-open="true"] { opacity: 1; visibility: visible; transform: translateY(0); }
@media (min-width: 1024px) { .nav__sheet { display: none; } }

.nav__sheet .shell > * {
  opacity: 0; transform: translateY(14px);
  transition: opacity .45s var(--ease-out-expo), transform .45s var(--ease-out-expo);
}
.nav__sheet[data-open="true"] .shell > * { opacity: 1; transform: translateY(0); }
.nav__sheet[data-open="true"] .shell > *:nth-child(1) { transition-delay: .06s; }
.nav__sheet[data-open="true"] .shell > *:nth-child(2) { transition-delay: .11s; }
.nav__sheet[data-open="true"] .shell > *:nth-child(3) { transition-delay: .16s; }
.nav__sheet[data-open="true"] .shell > *:nth-child(4) { transition-delay: .21s; }
.nav__sheet[data-open="true"] .shell > *:nth-child(5) { transition-delay: .26s; }
.nav__sheet[data-open="true"] .shell > *:nth-child(6) { transition-delay: .31s; }

.msheet__group { border-bottom: 1px solid var(--ink-200); padding: .35rem 0; }
.msheet__head {
  display: block; padding: .85rem .25rem;
  font-size: 1.1875rem; font-weight: 800; color: var(--ink-950);
  letter-spacing: -.02em; text-decoration: none;
}
.msheet__sub { display: flex; flex-wrap: wrap; gap: .4rem; padding: 0 .25rem .95rem; }
.msheet__sub a {
  font-size: .875rem; font-weight: 600; color: var(--ink-500); text-decoration: none;
  border: 1px solid var(--ink-200); border-radius: 999px; padding: .45rem .85rem;
}
.msheet__sub a:hover { color: var(--ink-950); border-color: var(--ink-950); }

body[data-lock="true"] { overflow: hidden; }

/* ============================================================
   레드버티컬 연계 브릿지 (푸터 위 상시 노출)
   ============================================================ */
.rvbridge { background: var(--ink-900); }
.rvbridge__inner { padding: 2.25rem 0; display: flex; flex-direction: column; gap: 1.25rem; }
@media (min-width: 768px) {
  .rvbridge__inner { flex-direction: row; align-items: center; justify-content: space-between; }
}
.rvbridge__label {
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255,255,255,.38); margin-bottom: .55rem;
}
.rvbridge__title { font-size: 1.1875rem; font-weight: 800; color: #fff; letter-spacing: -.02em; }
.rvbridge__title em { font-style: normal; color: var(--brand); }
.rvbridge__desc { font-size: .9375rem; color: rgba(255,255,255,.5); margin-top: .4rem; line-height: 1.7; }

/* ============================================================
   FOOTER
   ============================================================ */
.footer { background: var(--ink-950); color: #fff; }
.footer__inner { padding: 3.5rem 0 3rem; }
.footer__top {
  display: flex; flex-direction: column; gap: 1.25rem;
  padding-bottom: 2rem; border-bottom: 1px solid rgba(255,255,255,.1);
}
@media (min-width: 640px) {
  .footer__top { flex-direction: row; align-items: center; justify-content: space-between; }
}
.footer .wordmark__text { color: #fff; font-size: 1.1875rem; }

.footer__nav { display: flex; flex-wrap: wrap; gap: .35rem 1.35rem; }
.footer__nav a {
  font-size: .9375rem; font-weight: 600; color: rgba(255,255,255,.62);
  text-decoration: none; transition: color .15s ease;
}
.footer__nav a:hover { color: #fff; }

.footer__body { padding-top: 2rem; display: flex; flex-direction: column; gap: 2rem; }
@media (min-width: 768px) { .footer__body { flex-direction: row; justify-content: space-between; } }
.footer__biz p { font-size: .9375rem; color: rgba(255,255,255,.5); line-height: 1.85; }
.footer__biz strong { color: rgba(255,255,255,.82); font-weight: 700; }
.footer__biz a { color: inherit; text-decoration: none; }
.footer__biz a:hover { color: #fff; }
.footer__copy { font-size: .8125rem; line-height: 1.9; color: rgba(255,255,255,.32); padding-top: 1rem; }
.footer__copy a { color: rgba(255,255,255,.45); text-decoration: underline; text-underline-offset: 2px; }
.footer__copy a:hover { color: rgba(255,255,255,.8); }

.footer__channels { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.footer__channels a {
  display: inline-flex; align-items: center; gap: .45rem;
  font-size: .875rem; font-weight: 600; color: rgba(255,255,255,.62);
  text-decoration: none; padding: .55rem .9rem;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px;
  transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}
.footer__channels a:hover { color: #fff; border-color: rgba(255,255,255,.4); background: rgba(255,255,255,.06); }

/* ============================================================
   MOTION — 스크롤 진입 리빌
   ============================================================ */
/* 기본값은 "보임" 이다. JS 가 살아 있을 때만 숨겼다가 스크롤 진입 시 띄운다.
   스크립트가 실패해도 콘텐츠가 사라지지 않게 하기 위한 순서다. */
html.js .reveal {
  opacity: 0; transform: translateY(24px);
  transition: opacity .7s var(--ease-out-expo), transform .7s var(--ease-out-expo);
}
html.js .reveal.is-in { opacity: 1; transform: translateY(0); }
html.js .reveal[data-d="1"] { transition-delay: .08s; }
html.js .reveal[data-d="2"] { transition-delay: .16s; }
html.js .reveal[data-d="3"] { transition-delay: .24s; }
html.js .reveal[data-d="4"] { transition-delay: .32s; }
html.js .reveal[data-d="5"] { transition-delay: .40s; }

/* 히어로 마스크 리빌 — 한 줄씩 아래에서 밀려 올라온다 */
.line-mask { display: block; overflow: hidden; padding-bottom: .08em; }
.line-mask > span {
  display: block; transform: translateY(105%);
  animation: lineUp 1s var(--ease-out-expo) forwards;
}
.line-mask:nth-of-type(1) > span { animation-delay: .15s; }
.line-mask:nth-of-type(2) > span { animation-delay: .29s; }
.line-mask:nth-of-type(3) > span { animation-delay: .43s; }
@keyframes lineUp { to { transform: translateY(0); } }

.fade-up-slow { opacity: 0; animation: fadeUpSlow .9s var(--ease-out-expo) .62s forwards; }
.fade-up-slow[data-d="2"] { animation-delay: .74s; }
.fade-up-slow[data-d="3"] { animation-delay: .86s; }
@keyframes fadeUpSlow {
  from { opacity: 0; transform: translateY(18px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   HERO — 와이어프레임 도시
   고층 빌딩을 아래에서 올려다본 선 드로잉(SVG)이 배경이다.
   선이 순차적으로 그려지는 애니메이션은 SVG 파일 안에 들어 있다.
   ============================================================ */
.hero { position: relative; background: var(--ink-950); color: #fff; overflow: hidden; }

.hero__photo {
  position: absolute; right: 2%; bottom: 0; z-index: 0;
  width: min(42%, 620px); height: auto; max-height: 82%;
  object-fit: contain; object-position: 100% 100%;
  opacity: .85;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}

/* 본문 대비를 확보하는 스크림 */
.hero__scrim {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  /* 와이어프레임이 주인공이므로 좌측 카피 영역만 눌러 대비를 만든다 */
  background:
    linear-gradient(96deg, rgba(10,13,22,.94) 0%, rgba(10,13,22,.72) 38%,
                          rgba(10,13,22,.18) 66%, rgba(10,13,22,0) 100%),
    radial-gradient(80% 60% at 2% 100%, rgba(239,36,36,.12), transparent 60%);
}
.hero__content { position: relative; z-index: 3; }

/* ── 이미지 조각 ─────────────────────────────────────── */
.figure { position: relative; overflow: hidden; background: var(--ink-100); }
.figure img { display: block; width: 100%; height: 100%; object-fit: cover; }
.figure--ratio { aspect-ratio: 4 / 3; }
.figure--wide { aspect-ratio: 16 / 9; }
.figure__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.5rem 1.5rem 1.25rem;
  background: linear-gradient(to top, rgba(10,13,22,.92), transparent);
  color: #fff;
}

/* 풀블리드 이미지 밴드 */
.band { position: relative; overflow: hidden; background: var(--ink-950); }
.band img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; opacity: .18;
}
/* 사진 위 텍스트 가독성 확보. 인물 사진이라 얼굴이 글자 뒤로 비치지 않게 눌러준다 */
.band::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(92deg, rgba(10,13,22,.94) 0%, rgba(10,13,22,.72) 46%, rgba(10,13,22,.86) 100%);
}
.band__inner { position: relative; z-index: 1; }

/* ============================================================
   섹션 공통 조각
   ============================================================ */
.eyebrow {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .75rem; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--brand);
}
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--brand); flex: none; }

.rule { width: 44px; height: 3px; background: var(--brand); }

/* 카드 — 얇은 라인 + 좌측 레드 인디케이터 (PDF 톤) */
.card {
  position: relative; background: var(--paper);
  border: 1px solid var(--ink-200);
  transition: border-color .3s var(--ease-out-expo), transform .35s var(--ease-out-expo),
              box-shadow .35s var(--ease-out-expo);
}
.card::before {
  content: ''; position: absolute; left: -1px; top: -1px; bottom: -1px; width: 3px;
  background: var(--brand); transform: scaleY(0); transform-origin: top;
  transition: transform .4s var(--ease-out-expo);
}
.card:hover { border-color: var(--ink-400); transform: translateY(-3px); box-shadow: 0 22px 40px -28px rgba(10,13,22,.4); }
.card:hover::before { transform: scaleY(1); }

.card--dark { background: rgba(255,255,255,.03); border-color: rgba(255,255,255,.1); }
.card--dark:hover { border-color: rgba(255,255,255,.32); box-shadow: none; }

.numtag { font-size: .9375rem; font-weight: 800; color: var(--brand); letter-spacing: .04em; }

/* 프로세스 스텝 커넥터 */
.step { position: relative; }
@media (min-width: 1024px) {
  .step:not(:last-child)::after {
    content: ''; position: absolute; right: -15px; top: 30px;
    width: 9px; height: 9px;
    border-top: 2px solid var(--ink-200); border-right: 2px solid var(--ink-200);
    transform: rotate(45deg);
  }
}

/* 정의형 목록 */
.dl { border-top: 1px solid var(--ink-200); }
.dl > div {
  display: grid; grid-template-columns: 128px 1fr; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--ink-200); align-items: baseline;
}
.dl dt { font-size: .9375rem; font-weight: 800; color: var(--ink-500); }
.dl dd { font-size: 1.0625rem; color: var(--ink-900); line-height: 1.75; }
@media (max-width: 480px) { .dl > div { grid-template-columns: 84px 1fr; gap: .75rem; } }

/* 서브페이지 상단 */
.pagehead { background: var(--ink-950); color: #fff; position: relative; overflow: hidden; }

/* 헤드 배경의 스카이라인. 우측에만 깔고 제목 영역은 마스크로 비운다. */
.pagehead__art {
  position: absolute; right: 3%; bottom: 0; top: auto; z-index: 0;
  width: min(34%, 460px); height: auto; max-height: 86%;
  object-fit: contain; object-position: 100% 100%;
  opacity: .62; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 55%, transparent 100%);
          mask-image: linear-gradient(to left, #000 55%, transparent 100%);
}
.pagehead::before {
  content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(96deg, var(--ink-950) 0%, rgba(10,13,22,.86) 34%,
                              rgba(10,13,22,.42) 62%, rgba(10,13,22,.12) 100%);
}
.pagehead::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(72% 120% at 88% 0%, rgba(239,36,36,.18), transparent 58%);
  z-index: 2;
}
.pagehead__inner { position: relative; z-index: 3; padding: 4rem 0 3.25rem; }
@media (min-width: 768px) { .pagehead__inner { padding: 6rem 0 4.5rem; } }

.crumb { font-size: .75rem; font-weight: 600; color: rgba(255,255,255,.42); }
.crumb a { color: inherit; text-decoration: none; }
.crumb a:hover { color: #fff; }

/* 가로 스크롤 보호 — 넓은 표/다이어그램 전용 */
.scroll-x { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* 접근성 */
.skip {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--brand); color: #fff; padding: .75rem 1.25rem; font-weight: 700;
}
.skip:focus { left: 0; }

:where(a, button):focus-visible {
  outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 4px;
}

/* ============================================================
   모션 축소 설정 존중
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .line-mask > span { animation: none; transform: none; }
  .fade-up-slow { animation: none; opacity: 1; }
  html.js .reveal { opacity: 1; transform: none; transition: none; }
  .card:hover, .btn:hover { transform: none; }
}

/* ── 지도 브랜드 버튼 ───────────────────────────────────
   네이버·카카오는 각자 브랜드 색과 로고 사용 규정이 있다.
   카카오는 노란 바탕에 검은 글씨가 공식 조합이다. */
.btn--map {
  position: relative;
  width: 100%;
  justify-content: center;          /* 로고 + 문구를 버튼 가운데로 */
  gap: .6rem;
  padding: .85rem 2.6rem;           /* 좌우 여백을 화살표 폭만큼 확보 */
  font-size: .9375rem;
  border: 1px solid transparent;
}
.btn--map svg { width: 18px; height: 18px; flex: none; }
/* 화살표는 흐름에서 빼내 우측 끝에 고정한다. 가운데 정렬을 밀지 않는다 */
.btn--map .btn__ext {
  position: absolute; right: 1.1rem; top: 50%;
  transform: translateY(-50%); opacity: .55;
}

.btn--naver { background: #03C75A; color: #fff; }
.btn--naver:hover { background: #02B350; }

.btn--kakao { background: #FEE500; color: #191919; }
.btn--kakao:hover { background: #F2DA00; }