/* ONTHEVOYAGE — 새 디자인 토대
 *
 * styles.css 를 복사하지 않았다. 색·서체·간격을 처음부터 다시 깔았다.
 * 지금은 뼈대다. 여기에 연출을 얹는다.
 *
 * 지키는 선 (CLAUDE.md):
 * - 순검정 · 순백 쓰지 않는다
 * - 모서리 반경은 2px 하나
 * - 보라/파랑 네온, 외곽 발광, 그라데이션 글자 없음
 * - 한글은 word-break: keep-all, 측정폭은 em
 */

/* ── 토대 ────────────────────────────────────────────────────── */

:root {
  /* 딥 로열 블루 다이얼 + 샴페인 골드 메탈 */
  --deep:  #061027;   /* 가장 어두운 바닥 */
  --void:  #0b1b3d;   /* 기본 바탕 */
  --field: #0e2249;   /* 빛 받는 면 */

  --ink:  #eef2f9;    /* 본문 */
  --dim:  #9aa8c4;    /* 보조 */
  --mute: #8593b0;    /* 가장 약한 글. 가장 밝은 바탕(--field)에서도 5.06:1 */

  --gold:     #c89a4a;
  --gold-lit: #e8c784;

  --hair:       rgba(154, 168, 196, 0.20);
  --hair-faint: rgba(154, 168, 196, 0.11);
  --gold-hair:  rgba(200, 154, 74, 0.34);

  --radius: 2px;

  --sans: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
          system-ui, "Segoe UI", Roboto, sans-serif;
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;

  /* 간격. 8 의 배수에서 크게 벗어나지 않는다. */
  --gap-1: 8px;
  --gap-2: 16px;
  --gap-3: 28px;
  --gap-4: 48px;
  --gap-5: 80px;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.72;
  font-weight: 400;
  /* 한글은 이게 없으면 "됩/니다" 처럼 단어 중간이 끊긴다 */
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, blockquote, dl, dd, figure { margin: 0; }
a { color: inherit; text-decoration: none; }

:focus-visible {
  outline: 2px solid var(--gold-lit);
  outline-offset: 3px;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--gold);
  color: var(--deep);
  padding: 12px 18px;
  z-index: 100;
}
.skip:focus { left: 12px; top: 12px; }

/* ── 타이포 ──────────────────────────────────────────────────── */

h1, h2, h3 {
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.015em;
}

/* 표제가 본문의 2.2배밖에 안 되던 것이 밋밋함의 가장 큰 원인이었다.
   큰 활자는 페이지를 디자인된 것처럼 보이게 하는 가장 값싼 방법이다. */
h1 { font-size: clamp(2.3rem, 6vw, 4.4rem); line-height: 1.16; letter-spacing: -0.03em; }
h2 { font-size: clamp(1.85rem, 4.4vw, 3.3rem); line-height: 1.22; letter-spacing: -0.028em; }
h3 { font-size: clamp(1.12rem, 1.8vw, 1.35rem); }

/* 라틴 대문자 라벨에만 자간을 넓게 준다. 한글에는 주지 않는다. */
.tick {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* 한 줄 30~40자. ch 가 아니라 em 으로 잡는다 — 한글은 글자당 약 1em */
.measure { max-width: 36em; }

/* ── 뼈대 ────────────────────────────────────────────────────── */

.shell {
  width: 100%;
  max-width: 1180px;
  margin-left: auto;
  margin-right: auto;
}

/* 좌우 여백은 구역이 갖는다. 폭 제한만 shell 이 한다. */
/* .hero 는 뺐다. 히어로의 여백은 안쪽 .hero__stage 가 갖는다 -
   .hero 가 가지면 영상이 좌우 36px 만큼 들어가 화면 끝까지 못 간다. */
.topbar, .status, .band, .partner, .foot {
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 760px) {
  .topbar, .status, .band, .partner, .foot {
    padding-left: 36px;
    padding-right: 36px;
  }
}

.band {
  position: relative;
  padding-top: clamp(72px, 9vw, 132px);
  padding-bottom: clamp(72px, 9vw, 132px);
  /* 1px 선을 뺐다. 그 선이 구역을 "쌓인 상자"로 보이게 하던 것이다.
     대신 위아래를 눌러 두 구역이 그림자 하나를 나눠 갖게 한다. */
  background:
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.42) 0%,
      rgba(6, 16, 39, 0) 18%,
      rgba(6, 16, 39, 0) 82%,
      rgba(6, 16, 39, 0.34) 100%),
    var(--void);
}
.band--deep {
  background:
    linear-gradient(to bottom,
      rgba(3, 8, 20, 0.5) 0%,
      rgba(3, 8, 20, 0) 20%,
      rgba(3, 8, 20, 0) 80%,
      rgba(3, 8, 20, 0.4) 100%),
    var(--deep);
}
.band--field {
  background:
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.46) 0%,
      rgba(6, 16, 39, 0) 20%,
      rgba(6, 16, 39, 0) 80%,
      rgba(6, 16, 39, 0.38) 100%),
    var(--field);
}

/* .lead 자체에는 폭 제한을 두지 않는다. 여기에 30em 을 주면 그 값이
   본문 글자(17px) 기준이라, 3.3rem 짜리 표제가 좁은 칸에 갇혀
   "3가지" 같은 조각이 혼자 줄바꿈된다.
   표제와 본문이 각자 자기 글자 크기로 폭을 갖게 한다. */
.lead { margin-bottom: var(--gap-5); }
.lead h2 { margin-top: 16px; max-width: 15em; }
.lead__body {
  margin-top: 22px;
  max-width: 32em;
  font-size: 1.06rem;
  color: var(--dim);
}

/* ── 상단 바 ─────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(6, 16, 39, 0.86);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--hair-faint);
}
.topbar__inner {
  display: flex;
  align-items: center;
  gap: var(--gap-3);
  height: 68px;
}
.brand { display: flex; align-items: center; gap: 11px; }
.brand img { width: 34px; }
.brand span {
  font-family: var(--mono);
  font-size: 0.86rem;
  letter-spacing: 0.17em;
}
.nav {
  margin-left: auto;
  display: flex;
  gap: 26px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--dim);
}
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--gold); }

.menu-toggle, .menu-btn { display: none; }

/* 스크롤 진행도를 보여주는 골드 항로. JS 없이 CSS 만으로 그린다.
   지원하지 않는 브라우저에서는 scaleX(0) 인 채로 남아 보이지 않는다. */
.topbar__route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform: scaleX(0);
  transform-origin: 0 50%;
  background: linear-gradient(90deg, var(--gold), var(--gold-lit));
}
@supports (animation-timeline: scroll()) {
  .topbar__route {
    animation: route-progress linear both;
    animation-timeline: scroll(root block);
  }
}
@keyframes route-progress { to { transform: scaleX(1); } }
@media (prefers-reduced-motion: reduce) { .topbar__route { display: none; } }

@media (max-width: 880px) {
  /* .btn { display: inline-flex } 가 이 파일 뒤쪽에 있어 특이도가 같으면
     그쪽이 이긴다. .topbar 를 붙여 확실히 이긴다. */
  .topbar .topbar__cta { display: none; }
  .menu-btn {
    display: block;
    margin-left: auto;
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    padding: 8px 14px;
    cursor: pointer;
    /* 손가락으로 누르는 것은 44px 이상 */
    min-height: 40px;
    display: inline-flex;
    align-items: center;
  }
  .nav {
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    /* 부모가 좌우 여백을 가지므로 메뉴는 화면 끝까지 되돌린다 */
    margin-right: 0;
    margin-left: 0;
    flex-direction: column;
    gap: 0;
    background: var(--deep);
    border-bottom: 1px solid var(--hair-faint);
    max-height: 0;
    overflow: hidden;
  }
  .nav a { padding: 15px 24px; border-top: 1px solid var(--hair-faint); }
  .menu-toggle:checked ~ .nav { max-height: 320px; }
}

/* ── 버튼 ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding: 12px 26px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
}
.btn--solid { background: var(--gold); color: var(--deep); }
.btn--solid:hover { background: var(--gold-lit); }
.btn--ghost { border-color: var(--hair); color: var(--ink); }
.btn--ghost:hover { border-color: var(--gold-hair); }

.link {
  font-size: 0.95rem;
  color: var(--gold);
  border-bottom: 1px solid var(--gold-hair);
  padding-bottom: 2px;
}
.link:hover { color: var(--gold-lit); }

/* ── 히어로 ────────────────────────────────────────────────────
 *
 * 기본은 한 화면짜리 평범한 히어로다. `.is-scrub` 은 scrub.js 만 붙인다.
 * 높이 300vh 를 여기에 박아 두면 스크립트가 실패했을 때
 * 아무것도 안 보이는 세 화면이 남는다. 그래서 조건부로만 켠다.
 */

.hero { background: var(--deep); }

/* 세로 여백은 **무대**가 갖는다. .hero 가 가지면 영상을 담은 무대가
   구역보다 작아져서, 영상이 안쪽 사각형으로만 깔린다. */
.hero__stage {
  position: relative;
  padding-top: clamp(90px, 13vw, 168px);
  padding-bottom: clamp(90px, 13vw, 168px);
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 760px) {
  .hero__stage { padding-left: 36px; padding-right: 36px; }
}

/* 되감기가 켜졌을 때 */
.hero.is-scrub {
  /* 300vh 는 메시지 하나에 비해 너무 길었다. 2.5 화면이면
     의도된 느림은 남고 지루함은 없다. */
  height: 250vh;
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 0;
  padding-right: 0;
}
.hero.is-scrub .hero__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* 되감기 때는 100vh 로 고정되므로 세로 여백을 되돌린다 */
  padding-top: 0;
  padding-bottom: 0;
  padding-left: 20px;
  padding-right: 20px;
}
@media (min-width: 760px) {
  .hero.is-scrub .hero__stage { padding-left: 36px; padding-right: 36px; }
}
.hero.is-scrub .shell { width: 100%; }

/* 글은 **사라지지 않는다.** 처음에 0 까지 걷었더니 히어로 끝에서
   아무것도 없는 한 화면이 남았다. VERTANT 는 그 자리를 콘텐츠 패널로
   채우지만 우리는 채울 것이 없다. 이야기는 뒤에서 영상이 한다.
   글은 살짝 물러나기만 한다. --p 는 scrub.js 가 넣는다. */
.hero.is-scrub .hero__title,
.hero.is-scrub .hero__lede,
.hero.is-scrub .hero__actions {
  opacity: calc(1 - var(--p, 0) * 0.12);
  transform: translateY(calc(var(--p, 0) * -20px));
}
.hero__title { max-width: 14em; }
.hero__lede {
  margin-top: 26px;
  max-width: 32em;
  font-size: 1.06rem;
  color: var(--dim);
}
.hero__actions {
  margin-top: var(--gap-4);
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

/* ── 항로 ────────────────────────────────────────────────────
 *
 * 브랜드의 중심 장치다. 얇은 골드 선 하나가 오른쪽 위로 오르고,
 * 그 위에 항목이 놓인다. viewBox 는 항상 1200 폭이고
 * preserveAspectRatio="none" 으로 늘린다. 그래서 노드의 x 값을
 * **열 가운데**에 맞춰 두면 어떤 화면 폭에서도 항목과 맞아떨어진다.
 *   3열 -> 200 / 600 / 1000
 *   4열 -> 150 / 450 / 750 / 1050
 * 이 값을 바꾸면 선과 항목이 어긋난다.
 */

.route { margin-bottom: var(--gap-3); }
.route svg { display: block; width: 100%; height: clamp(58px, 7vw, 96px); overflow: visible; }
.route__line {
  fill: none;
  stroke: var(--gold);
  stroke-width: 1.1;
  vector-effect: non-scaling-stroke;
  opacity: 0.55;
}
.route__node { fill: var(--gold); }
.route__star { fill: var(--gold-lit); }

/* 스크롤에 맞춰 그려진다. 지원하지 않으면 처음부터 그려진 채로 보인다. */
@supports (animation-timeline: view()) {
  .route__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: route-draw linear both;
    animation-timeline: view();
    animation-range: entry 15% cover 55%;
  }
  .route__node, .route__star {
    opacity: 0;
    animation: node-lit linear both;
    animation-timeline: view();
  }
  .route--3 .route__node:nth-of-type(1) { animation-range: entry 25% cover 30%; }
  .route--3 .route__node:nth-of-type(2) { animation-range: entry 35% cover 40%; }
  .route--3 .route__node:nth-of-type(3) { animation-range: entry 45% cover 50%; }
  /* 01 -> 04 순서로 켜진다 */
  .route--4 .route__node:nth-of-type(1) { animation-range: entry 22% cover 26%; }
  .route--4 .route__node:nth-of-type(2) { animation-range: entry 30% cover 34%; }
  .route--4 .route__node:nth-of-type(3) { animation-range: entry 38% cover 42%; }
  .route--4 .route__node:nth-of-type(4) { animation-range: entry 46% cover 50%; }
  .route--4 .route__star             { animation-range: entry 54% cover 58%; }
}
@keyframes route-draw { to { stroke-dashoffset: 0; } }
@keyframes node-lit   { to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .route__line { stroke-dashoffset: 0; animation: none; }
  .route__node, .route__star { opacity: 1; animation: none; }
}

/* 모바일에서는 노드를 감춘다. 노드의 x 좌표는 3열·4열의 **열 가운데**에
   맞춘 값인데, 좁은 화면에서는 항목이 한 줄로 쌓이므로 아무 데도 안 맞는다.
   선과 끝의 북극성은 남긴다 - 그건 열과 무관하게 뜻이 있다. */
@media (max-width: 760px) {
  .route svg { height: 44px; }
  .route__node { display: none; }
}

/* ── 관제 패널: 계약 조건 ────────────────────────────────────
   아이콘 나열이 아니라 계기판 판독값처럼 읽히게 한다. */

.status {
  background: var(--field);
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--hair-faint);
  padding-top: 20px;
  padding-bottom: 20px;
}
.status__inner { display: grid; gap: 18px; }
@media (min-width: 1040px) {
  .status__inner { grid-template-columns: max-content 1fr; gap: var(--gap-4); align-items: center; }
}
.status__label {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  gap: 12px;
  white-space: nowrap;
}
/* 로고 태그라인처럼 라벨 옆으로 선이 뻗는다 */
.status__label::after {
  content: "";
  width: 34px;
  height: 1px;
  background: var(--gold-hair);
}
.status ul {
  display: grid;
  gap: 12px var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.status li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.86rem;
  color: var(--dim);
}
.status i { color: var(--gold); font-size: 16px; }

/* ── 장면 영상 ───────────────────────────────────────────────
 *
 * 힉스필드로 뽑은 천체 항해 영상 3편이 구역 뒤에 깔린다.
 * 영상은 **배경이지 주인공이 아니다.** 글이 이기게 만드는 것은
 * 아래 .scene::after 의 그라데이션이다. 이걸 빼면 제목이 안 읽힌다.
 *
 * 영상이 없어도(파일 삭제, 네트워크 실패) poster 가 남고,
 * poster 마저 없으면 구역의 배경색이 그대로 보인다.
 */

.scene { position: relative; isolation: isolate; overflow: hidden; }
.scene__film {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  pointer-events: none;
}

/* 왼쪽을 덮는 그늘. 원본 영상의 격자선이 왼쪽까지 뻗어 있어서
   이게 없으면 표제 위로 선이 지나간다. */
.scene::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: -1;
  pointer-events: none;
  /* 왼쪽을 var(--deep) 로 **완전히** 덮고 있었다. 영상의 4분의 1이 지워졌다.
     글이 읽힐 만큼만 누르고 나머지는 보이게 둔다. */
  background:
    linear-gradient(100deg,
      rgba(6, 16, 39, 0.88) 0%,
      rgba(6, 16, 39, 0.78) 26%,
      rgba(6, 16, 39, 0.46) 50%,
      rgba(6, 16, 39, 0.12) 76%,
      rgba(6, 16, 39, 0) 100%),
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.45) 0%,
      rgba(6, 16, 39, 0) 24%,
      rgba(6, 16, 39, 0) 70%,
      rgba(6, 16, 39, 0.62) 100%);
}

/* 좁은 화면에서는 16:9 영상이 가로로 잘려 3분의 1만 보인다.
   390px 기준으로 818px 중 390px 만 남는다. */
@media (max-width: 760px) {
  /* **14% 로 되돌리지 말 것.** 예전 영상은 주체가 오른쪽 3분의 1에 있어서
     14% 로 자르면 비워 둔 왼쪽이 보였다. 지금 영상 세 편은 북극성과 항로가
     가로 64~76% 에 있어서, 14% 로 자르면 화면에 **아무것도 안 남는다** —
     별도 항로도 없는 남색 사각형만 보인다. 재서 확인했다.
     80% 로 자르면 셋 다 온전한 그림이 된다.
     글자 대비는 아래 스크림까지 얹어 최악 5.56:1 (기준 4.5:1). */
  .scene__film { object-position: 80% center; }
  /* 그래도 좁은 화면에서는 주체와 글자가 같이 살 수 없다.
     영상을 그림이 아니라 질감으로 낮춘다. 글이 이겨야 한다. */
  /* 0.93~0.95 는 너무 눌러서 영상이 아예 안 보였다.
     주체가 글자 위로 오는 건 자르는 위치(14%)로 이미 피했다. */
  .scene::after {
    background:
      linear-gradient(to bottom,
        rgba(6, 16, 39, 0.86) 0%,
        rgba(6, 16, 39, 0.62) 38%,
        rgba(6, 16, 39, 0.68) 72%,
        rgba(6, 16, 39, 0.88) 100%);
  }
}

/* ── 엠블럼: 배경으로만 ──────────────────────────────────────
 *
 * 북극성 + 배 운전대 + 지구가 하나로 그려진 회사 마크(images/compass.png).
 * 회사의 철학이지만 **앞으로 나오지 않는다.** 화면 밖으로 걸치게 두고 아주 흐리게 깐다.
 * 가운데에 또렷하게 두면 배경이 아니라 그림이 되고, 글을 이긴다.
 */

.rose { position: relative; isolation: isolate; overflow: hidden; }
.rose::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  width: min(76vw, 880px);
  aspect-ratio: 1;
  background: url("images/compass.png") center / contain no-repeat;
  opacity: 0.055;
}
/* 반대쪽 모서리에 하나씩. 같은 자리에 두 번 나오면 무늬가 된다. */
.rose--left::after  { left: -21%; bottom: -32%; }
.rose--right::after { right: -17%; top: -30%; }

/* ── 선언 ────────────────────────────────────────────────────── */

.manifesto {
  /* 24em 이면 마지막 줄이 영상 속 나침반 위로 올라탄다. 영상의 주체는
     오른쪽 절반에 있으므로 글은 왼쪽 절반 안에서 끝나야 한다. */
  max-width: 19em;
  font-size: clamp(1.35rem, 2.9vw, 2.05rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.manifesto strong { color: var(--gold-lit); font-weight: 600; }
.manifesto footer {
  margin-top: 30px;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.72;
  color: var(--dim);
}

/* ── 성공의 기준 3가지 ───────────────────────────────────────── */

.asks {
  display: grid;
  gap: var(--gap-5) var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
.asks > li { max-width: 26em; }
/* 항로의 노드는 왼쪽이 낮고 오른쪽이 높다. 항목도 같은 기울기로 올려서
   각 목적지가 자기 노드에서 같은 깊이로 매달린 것처럼 보이게 한다.
   세 개를 같은 높이로 두면 카드 세 장으로 되돌아간다. */
@media (min-width: 900px) {
  .asks { grid-template-columns: repeat(3, 1fr); align-items: start; }
  .asks > li:nth-child(1) { margin-top: 54px; }
  .asks > li:nth-child(2) { margin-top: 27px; }
  .asks > li:nth-child(3) { margin-top: 0; }
}
.asks i { font-size: 26px; color: var(--gold); }
.asks__en {
  margin-top: 20px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mute);
}
.asks h3 { margin-top: 8px; }
.asks p:last-child { margin-top: 14px; color: var(--dim); font-size: 0.95rem; }

/* ── 크리에이터의 성장 ─────────────────────────────────────
   두 단으로 나눴더니 오른쪽 글이 짧아 700px 짜리 빈 칸이 생겼다.
   한 단으로 모으고 글을 키운다. 내용이 적으면 억지로 벌리지 않는다. */

.claim__body {
  max-width: 30em;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.66;
  letter-spacing: -0.01em;
}
.claim__close {
  margin-top: 22px;
  max-width: 30em;
  font-size: clamp(1.12rem, 1.9vw, 1.42rem);
  line-height: 1.66;
  font-weight: 600;
  color: var(--gold-lit);
}

.tags {
  margin-top: var(--gap-5);
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
}
.tags li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  font-size: 0.86rem;
  letter-spacing: 0;
  color: var(--dim);
}
.tags i { font-size: 14px; color: var(--gold); }
/* 브리프의 "궤도형 타이포그래피" 대신. 한글은 네모 블록이라 원을 따라
   돌리면 글자가 깨지고, 원형 텍스트는 생성형 UI 의 대표적 흔적이다.
   글자는 똑바로 두고 자리만 항로처럼 오르게 한다. */
@media (min-width: 700px) {
  .tags--route { align-items: flex-end; }
  .tags--route > li:nth-child(2) { transform: translateY(-6px); }
  .tags--route > li:nth-child(3) { transform: translateY(-12px); }
  .tags--route > li:nth-child(4) { transform: translateY(-4px); }
  .tags--route > li:nth-child(5) { transform: translateY(-10px); }
  .tags--route > li:nth-child(6) { transform: translateY(-16px); }
}

/* ── 세 개의 문 ──────────────────────────────────────────────── */

.doors > li {
  display: grid;
  gap: var(--gap-2);
  padding-top: var(--gap-4);
  padding-bottom: var(--gap-4);
  border-top: 1px solid var(--hair-faint);
}
.doors > li:last-child { border-bottom: 1px solid var(--hair-faint); }
@media (min-width: 900px) {
  .doors > li {
    grid-template-columns: 13rem minmax(0, 1fr) 15rem;
    gap: var(--gap-4);
  }
}
.doors__key {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}
.doors__key i { font-size: 19px; }
/* 각 문은 항로가 도착하는 하나의 좌표다. 숫자는 지어내지 않는다 -
   있지도 않은 위경도를 적으면 그 순간 가짜가 된다. 표식만 둔다. */
.doors__node {
  position: relative;
  width: 24px;
  height: 1px;
  flex: 0 0 auto;
  background: linear-gradient(90deg, transparent, var(--gold));
}
.doors__node::after {
  content: "";
  position: absolute;
  right: -1px;
  top: -2px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--gold);
}
.doors__main p { margin-top: 12px; max-width: 30em; color: var(--dim); font-size: 0.95rem; }
.doors__main .link { display: inline-block; margin-top: 18px; }
.terms { display: grid; gap: 9px; align-content: start; }
.terms li {
  font-size: 0.86rem;
  color: var(--mute);
  padding-left: 15px;
  position: relative;
}
.terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--gold);
  rotate: 45deg;
}

/* ── 구조로 만든 이유 ────────────────────────────────────────── */

.rules {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
}
/* auto-fit 이면 3 + 1 로 깨져서 마지막 하나가 혼자 남는다. 2x2 로 고정한다. */
@media (min-width: 860px) {
  .rules { grid-template-columns: repeat(2, 1fr); }
}
.rules > li {
  position: relative;
  padding: var(--gap-3);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  background: rgba(6, 16, 39, 0.34);
}
/* 계기판처럼 읽히게 하는 모서리 브래킷.
   눈금을 그리지 않는 이유: 눈금은 수치를 뜻하는데 우리에겐 그 수치가 없다. */
.rules > li::before,
.rules > li::after {
  content: "";
  position: absolute;
  width: 13px;
  height: 13px;
  border: 0 solid var(--gold);
  opacity: 0.5;
}
.rules > li::before {
  left: -1px;
  top: -1px;
  border-left-width: 1px;
  border-top-width: 1px;
}
.rules > li::after {
  right: -1px;
  bottom: -1px;
  border-right-width: 1px;
  border-bottom-width: 1px;
}
.rules i { font-size: 24px; color: var(--gold); }
.rules h3 { margin-top: 16px; }
/* 한글이 들어가는 줄이다. 모노 + 넓은 자간을 주면 음절마다 칸이 벌어져
   읽기 나빠진다. 넓은 자간은 라틴 대문자 라벨에만 준다. */
.rules__term {
  margin-top: 7px;
  font-size: 0.86rem;
  letter-spacing: 0;
  color: var(--gold-lit);
}
.rules > li > p:last-child {
  margin-top: 14px;
  color: var(--dim);
  font-size: 0.95rem;
}

/* ── 네 걸음 ─────────────────────────────────────────────────── */

.steps {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
  counter-reset: step;
}
.steps > li {
  position: relative;
  padding-top: var(--gap-3);
  padding-right: 32px;
  border-top: 1px solid var(--gold-hair);
  counter-increment: step;
}
/* 01 ~ 04. 원래 내용에 있던 번호다. 항로의 노드가 켜지는 순서와 같다. */
.steps > li::before {
  content: "0" counter(step);
  position: absolute;
  right: 0;
  top: calc(var(--gap-3) - 2px);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold);
  opacity: 0.75;
}
.steps i { font-size: 21px; color: var(--gold); }
.steps h3 { margin-top: 12px; }
.steps p { margin-top: 8px; color: var(--dim); font-size: 0.95rem; }

/* ── 마무리 ──────────────────────────────────────────────────── */

/* .closing 은 .shell 이기도 하다. 여기에 max-width 를 주면 shell 의 1180px 을
   덮어써서 auto 여백이 블록을 가운데로 민다. 폭 제한은 안쪽 글에만 준다. */
.closing blockquote {
  max-width: 21em;
  font-size: clamp(1.3rem, 2.7vw, 1.95rem);
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: -0.015em;
}
.closing .btn { margin-top: var(--gap-4); }

.partner {
  background: var(--field);
  padding-top: var(--gap-3);
  padding-bottom: var(--gap-3);
  border-top: 1px solid var(--hair-faint);
}
.partner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap-2);
}
.partner p { color: var(--dim); font-size: 0.95rem; }

/* ── 바닥 ────────────────────────────────────────────────────── */

.foot {
  background: var(--deep);
  padding-top: var(--gap-5);
  padding-bottom: var(--gap-4);
  border-top: 1px solid var(--hair-faint);
  font-size: 0.86rem;
}
.foot__top { display: grid; gap: var(--gap-4); }
@media (min-width: 900px) {
  .foot__top { grid-template-columns: 220px 1fr; gap: var(--gap-5); }
}
.foot__logo { width: 176px; opacity: 0.62; }
.biz { display: grid; gap: 10px; }
.biz > div { display: flex; gap: 14px; }
.biz dt {
  flex: 0 0 8.5em;
  color: var(--mute);
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
}
.biz dd { margin: 0; color: var(--dim); }
.biz a:hover { color: var(--gold-lit); }
.foot__base {
  margin-top: var(--gap-4);
  padding-top: var(--gap-2);
  border-top: 1px solid var(--hair-faint);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--gap-1);
  color: var(--mute);
  font-size: 0.86rem;
}
.tagline {
  font-family: var(--mono);
  text-transform: uppercase;   /* 로고의 태그라인이 대문자다 */
  letter-spacing: 0.12em;
  color: var(--gold);
}

/* ═══════════════════════════════════════════════════════════════
   서브페이지 부품
   creator / agent / creators / contact / thanks 가 쓰는 것들.
   옛 styles.css 의 이름을 그대로 받되, 생김새는 새 언어로 다시 짰다.
   ═══════════════════════════════════════════════════════════════ */

/* ── 아이콘 ─────────────────────────────────────────────────── */

.ico { font-size: 25px; color: var(--gold); }
.ico--sm { font-size: 17px; }

/* ── 페이지 머리 ────────────────────────────────────────────── */

.pagehead {
  position: relative;
  overflow: hidden;
  background: var(--deep);
  padding-top: clamp(88px, 12vw, 150px);
  padding-bottom: clamp(64px, 8vw, 104px);
  padding-left: 20px;
  padding-right: 20px;
  border-bottom: 1px solid var(--hair-faint);
}
@media (min-width: 760px) {
  .pagehead { padding-left: 36px; padding-right: 36px; }
}
/* 마크는 오른쪽으로 걸쳐 둔다. 홈의 엠블럼과 같은 원칙 - 배경이지 그림이 아니다. */
.pagehead__mark {
  position: absolute;
  right: 4%;
  top: 50%;
  width: min(30vw, 260px);
  translate: 0 -50%;
  opacity: 0.13;
  pointer-events: none;
}
@media (max-width: 760px) { .pagehead__mark { display: none; } }
.pagehead h1 { max-width: 15em; }
.pagehead p {
  margin-top: 20px;
  max-width: 32em;
  font-size: 1.06rem;
  color: var(--dim);
}

/* ── cat: 지원 항목 (creator / agent) ───────────────────────── */

.cat {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(275px, 1fr));
}
/* creator 페이지는 항목이 8개다. 세 단으로 두면 작은 상자 여덟 개가
   격자로 늘어서서 사이트에서 가장 단조로운 배치가 된다.
   두 단으로 넓혀 각 항목에 읽을 자리를 준다. */
@media (min-width: 900px) {
  .cat {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-5) var(--gap-5);
  }
}
.cat > li {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--hair-faint);
}
.cat__head {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-bottom: 15px;
}
.cat__no {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--gold);
}
.cat__sub {
  margin-top: 7px;
  font-size: 0.86rem;
  color: var(--gold-lit);
}
/* 본문 문단에 클래스가 없는 페이지가 있다(creator/agent).
   클래스 있는 줄(__sub 등)은 건드리지 않도록 :not([class]) 로 고른다. */
.cat__body,
.cat > li > p:not([class]) {
  margin-top: 14px;
  font-size: 0.95rem;
  color: var(--dim);
}
.cat .terms { margin-top: 17px; }

/* ── faq ────────────────────────────────────────────────────── */

.faq { display: grid; gap: var(--gap-3); max-width: 46em; }
.faq > li {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--hair-faint);
}
.faq p { margin-top: 11px; font-size: 0.95rem; color: var(--dim); }

/* ── pillars ────────────────────────────────────────────────── */

.pillars {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
.pillars > li {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--gold-hair);
}
.pillars__key {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: clamp(1.08rem, 1.7vw, 1.28rem);
  font-weight: 700;
  letter-spacing: -0.015em;
}
.pillars__sub { margin-top: 10px; font-size: 0.86rem; color: var(--gold-lit); }
.pillars > li > p:not([class]) {
  margin-top: 13px;
  font-size: 0.95rem;
  color: var(--dim);
}

/* ── course: 단계 (agent 배분율 / creators 절차) ────────────── */

.course {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(195px, 1fr));
}
.course > li {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--gold-hair);
}
.course__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}
.course .course__step {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--gold);
}
/* 30 · 60 · 80% 은 숫자가 주인공이라 크게 간다. 모노가 아니라 본문 서체다. */
.course .course__step--big {
  font-family: var(--sans);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--gold-lit);
}
.course p:not([class]) { margin-top: 8px; font-size: 0.95rem; color: var(--dim); }

/* ── roster: 소속 크리에이터 ────────────────────────────────
   사진이 아직 없다. 자리를 비워 두고 필요한 비율과 크기를 적어 둔다.
   임의의 스톡 사진으로 채우지 않는다. */

.roster {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(225px, 1fr));
}
.person__shot {
  aspect-ratio: 3 / 4;
  display: grid;
  align-content: center;
  justify-items: center;
  gap: 7px;
  padding: var(--gap-2);
  text-align: center;
  border: 1px solid var(--gold-hair);
  border-radius: var(--radius);
  background: rgba(6, 16, 39, 0.42);
}
.person__slot { font-size: 0.86rem; color: var(--dim); }
.person__spec {
  font-family: var(--mono);
  font-size: 0.86rem;
  line-height: 1.6;
  color: var(--mute);
}
.person__name { margin-top: 17px; }
.person__tag { margin-top: 5px; font-size: 0.86rem; color: var(--gold); }
.person .link { display: inline-block; margin-top: 13px; }

.lead-more { margin-top: var(--gap-4); }

/* ── thanks ─────────────────────────────────────────────────── */

.done__title { font-size: clamp(1.9rem, 4vw, 2.7rem); }
.done__body { margin-top: 18px; color: var(--dim); }
.done__next { margin-top: var(--gap-4); display: grid; gap: 13px; }
.done__next li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.95rem;
  color: var(--dim);
}
.done .btn { margin-top: var(--gap-4); }
/* 엠블럼 한 점. 접수 완료라는 뜻을 브랜드 기호로 받는다. */
.manifesto__star {
  width: 46px;
  height: 46px;
  margin-bottom: var(--gap-3);
  background: url("images/compass.png") center / contain no-repeat;
  opacity: 0.8;
}

/* ── 떠 있는 문의 버튼 ──────────────────────────────────────
   옛 디자인은 스크롤해야 나타났고 그 토글을 script.js 가 했다.
   여기서는 늘 보이게 둔다. 스크립트 없이 동작한다. */

.dock {
  position: fixed;
  right: 16px;
  bottom: 16px;
  z-index: 60;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.dock a {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  min-height: 44px;
  padding: 11px 17px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: rgba(6, 16, 39, 0.92);
  backdrop-filter: blur(8px);
  font-size: 0.86rem;
  font-weight: 600;
}
.dock a:hover { border-color: var(--gold-hair); }
.dock .ph { font-size: 17px; color: var(--gold); }

/* ── contact: 탭 세 개. :target 과 형제 선택자만 쓴다 ────────
   DOM 순서는 agent, partner, creator, 탭바. 화면 순서는 order 가 되돌린다.
   :has() 를 쓰지 않으므로 오래된 브라우저에서도 그대로 돈다.
   이 논리는 옛 styles.css 에서 그대로 가져왔다. 잘 돌던 것을 새로 짓지 않는다. */

.tabs { display: flex; flex-direction: column; }
.tabs__bar {
  order: 0;
  display: flex;
  flex-wrap: wrap;
  border-bottom: 1px solid var(--hair-faint);
}
#panel-creator { order: 1; }
#panel-agent   { order: 2; }
#panel-brand   { order: 3; }
#panel-partner { order: 4; }

.tabs__bar a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 17px 22px 14px;
  border-bottom: 2px solid transparent;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--dim);
}
.tabs__bar a:hover { color: var(--ink); }

.tabs__panel { display: none; padding-top: var(--gap-5); }
#panel-creator { display: block; }            /* 해시가 없을 때의 기본 탭 */
.tabs__panel:target { display: block; }
/* 다른 탭이 지정되면 기본 탭을 접는다. 아이디 두 개라 위 규칙을 이긴다.
   `~` 는 앞선 형제만 본다. 그래서 #panel-creator 가 DOM 에서 맨 뒤에 있어야 한다. */
#panel-agent:target ~ #panel-creator,
#panel-brand:target ~ #panel-creator,
#panel-partner:target ~ #panel-creator { display: none; }

.tabs__bar a[href="#panel-creator"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}
#panel-agent:target ~ .tabs__bar a[href="#panel-creator"],
#panel-brand:target ~ .tabs__bar a[href="#panel-creator"],
#panel-partner:target ~ .tabs__bar a[href="#panel-creator"] {
  color: var(--dim);
  border-bottom-color: transparent;
}
#panel-agent:target ~ .tabs__bar a[href="#panel-agent"],
#panel-brand:target ~ .tabs__bar a[href="#panel-brand"],
#panel-partner:target ~ .tabs__bar a[href="#panel-partner"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── 문의 폼 ────────────────────────────────────────────────── */

/* 안내 문장과 폼 사이. 이게 없으면 진행 표시의 가로선이 문장 바로 밑에 붙는다. */
.inquiry { margin-top: var(--gap-4); display: grid; gap: var(--gap-5); }
@media (min-width: 980px) {
  .inquiry { grid-template-columns: minmax(0, 1fr) 290px; gap: var(--gap-5); }
}
.inquiry__lead { max-width: 34em; color: var(--dim); }

.form { display: grid; gap: var(--gap-3); max-width: 46em; }
/* 스팸 봇 덫. 사람에게는 보이지 않지만 화면낭독기에서도 건너뛰게 둔다. */
.hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  opacity: 0;
}
.row { display: grid; gap: var(--gap-3); }
@media (min-width: 700px) {
  .row { grid-template-columns: repeat(2, 1fr); }
}
.field { display: grid; gap: 9px; }
.field > label { font-size: 0.86rem; font-weight: 600; color: var(--ink); }
.req { color: var(--gold); font-family: var(--mono); }
/* 체크박스·라디오는 반드시 빼야 한다. 안 그러면 46px 짜리 흰 사각형이 된다. */
.field input:not([type="checkbox"]):not([type="radio"]),
.field select,
.field textarea {
  width: 100%;
  min-height: 46px;
  padding: 13px 15px;
  background: rgba(6, 16, 39, 0.55);
  color: var(--ink);
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
}
.field textarea { min-height: 148px; resize: vertical; }
.field input:not([type="checkbox"]):not([type="radio"]):focus,
.field select:focus,
.field textarea:focus {
  border-color: var(--gold-hair);
  outline: none;
}
.field input::placeholder,
.field textarea::placeholder { color: var(--mute); }
.hint { font-size: 0.86rem; color: var(--mute); }

/* 여러 개를 고르는 묶음. fieldset 의 기본 테두리를 우리 것으로 바꾼다. */
fieldset.field {
  margin: 0;
  padding: var(--gap-3);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
}
fieldset.field > legend {
  padding-left: 9px;
  padding-right: 9px;
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--ink);
}
fieldset.field > .hint { margin-bottom: var(--gap-2); }

.checks {
  display: grid;
  gap: 11px;
  grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.checks label {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 30px;
  font-size: 0.95rem;
  color: var(--dim);
  cursor: pointer;
}
.checks label:hover { color: var(--ink); }
input[type="checkbox"],
input[type="radio"] {
  flex: 0 0 auto;
  width: 17px;
  height: 17px;
  accent-color: var(--gold);
  cursor: pointer;
}
.consent {
  padding-top: var(--gap-3);
  border-top: 1px solid var(--hair-faint);
}
.consent__agree {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 0.86rem;
  color: var(--dim);
}
.consent__agree input { margin-top: 4px; flex: 0 0 auto; }

.inquiry__aside { align-self: start; }
.inquiry__aside ul { margin-top: 15px; display: grid; gap: 10px; }
.inquiry__aside li {
  position: relative;
  padding-left: 15px;
  font-size: 0.95rem;
  color: var(--dim);
}
.inquiry__aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 4px;
  height: 4px;
  background: var(--gold);
  rotate: 45deg;
}
.inquiry__aside > p { margin-top: 17px; font-size: 0.95rem; color: var(--dim); }
.inquiry__kakao {
  margin-top: var(--gap-3);
  padding: var(--gap-3);
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  background: rgba(6, 16, 39, 0.34);
  font-size: 0.95rem;
  color: var(--dim);
}

/* ── 항해 커서 ───────────────────────────────────────────────
 *
 * cursor.js 가 <html> 에 .has-cursor 를 붙였을 때만 켜진다.
 * 스크립트가 없으면 아래 규칙이 하나도 걸리지 않고 기본 커서가 남는다.
 *
 * 나침반은 compass.png 를 쓴다. emblem.svg 가 아니라 png 인 이유:
 * 외부 SVG 를 배경으로 쓰면 currentColor 가 안 먹어 검게 나오고,
 * CSS mask 로 색을 넣으면 file:// 로 열었을 때 브라우저가 막는다.
 * 사장님이 파일을 직접 열어 보시므로 색이 구워진 png 를 쓴다.
 */

.cursor { display: none; }

@media (hover: hover) and (pointer: fine) {
  .has-cursor,
  .has-cursor a,
  .has-cursor button,
  .has-cursor label,
  .has-cursor summary { cursor: none; }
  /* 글자를 고르는 곳은 예외. 여기선 기본 커서가 더 정확하다. */
  .has-cursor input,
  .has-cursor textarea,
  .has-cursor select { cursor: auto; }

  .cursor {
    display: block;
    position: fixed;
    left: 0;
    top: 0;
    width: 26px;
    height: 26px;
    margin-left: -13px;
    margin-top: -13px;
    border: 1px solid var(--gold-hair);
    border-radius: 50%;
    pointer-events: none;
    opacity: 0;
    z-index: 90;
    transition:
      width 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      height 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      margin 0.3s cubic-bezier(0.22, 1, 0.36, 1),
      border-color 0.3s ease,
      opacity 0.35s ease;
  }
  .cursor.is-live { opacity: 1; }

  .cursor__mark {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background: url("images/compass.png") center / 58% no-repeat;
    opacity: 0;
    transition: opacity 0.35s ease;
  }

  /* 누를 수 있는 것 위에서 열린다. */
  .cursor.is-hot {
    width: 48px;
    height: 48px;
    margin-left: -24px;
    margin-top: -24px;
    border-color: var(--gold);
  }
  .cursor.is-hot .cursor__mark {
    opacity: 0.55;
    animation: cursor-turn 40s linear infinite;
  }

  /* 누르는 순간 조인다. */
  .cursor.is-down {
    width: 19px;
    height: 19px;
    margin-left: -9.5px;
    margin-top: -9.5px;
  }
}

@keyframes cursor-turn { to { rotate: 360deg; } }

@media (prefers-reduced-motion: reduce) {
  .cursor { display: none; }
  .has-cursor { cursor: auto; }
}

/* ── 모바일 마무리 ───────────────────────────────────────────
   390px 짜리 iframe 으로 6개 페이지를 다 훑어 잡은 것들이다. */

@media (max-width: 760px) {
  /* 1. 사진 자리가 한 단이면 3:4 로 466px 짜리 빈 상자가 된다. 두 단으로. */
  .roster {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-3);
  }
  /* 크기는 건드리지 않는다. 0.72rem 은 한글에 작다 (앞서 0.86 으로 올린 값) */
  .person__name { margin-top: 13px; }

  /* 2. thanks 의 연락처 줄. 이메일·전화가 안 끊기는 한 덩어리라
        줄이 어색하게 갈라졌다. 아이콘 줄과 본문 줄을 분리한다. */
  .done__next li { flex-wrap: wrap; }
  .done__next .link { overflow-wrap: anywhere; }

  /* 3. 떠 있는 문의 버튼이 본문을 가린다. 작게 줄이고,
        바닥글이 가려지지 않도록 아래 여백을 준다. */
  .dock {
    right: 12px;
    bottom: 12px;
    gap: 7px;
  }
  .dock a {
    min-height: 40px;
    padding: 9px 13px;
    font-size: 0.86rem;
  }
  .dock .ph { font-size: 15px; }
  .foot { padding-bottom: 108px; }

  /* 4. 문의 탭이 두 줄로 접힐 때 좌우 여백이 과하다. */
  .tabs__bar a { padding-left: 0; padding-right: 20px; }
}

/* ── 페이지 전환 ─────────────────────────────────────────────
 *
 * 지금까지는 메뉴를 누르면 문서가 툭 끊기며 바뀌었다. 6개 페이지가
 * 하나의 세계로 느껴지지 않던 마지막 이유다.
 *
 * 문서 간 View Transition 은 CSS 만으로 된다. 지원하지 않는 브라우저
 * (2026년 8월 기준 Firefox)는 지금까지처럼 그냥 넘어간다. 깨지지 않는다.
 */

@view-transition { navigation: auto; }

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.4s;
  animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1);
}

/* 상단바와 바닥글은 넘어가는 동안 제자리에 남는다.
   이 둘이 고정되어야 "페이지가 바뀐 것"이 아니라 "안이 바뀐 것"으로 읽힌다. */
.topbar { view-transition-name: topbar; }
.foot   { view-transition-name: foot; }

@media (prefers-reduced-motion: reduce) {
  @view-transition { navigation: none; }
}

/* ── 서브페이지 머리에 도착하는 항로 ─────────────────────────
 *
 * 홈페이지만 연출을 받고 서브페이지 머리는 그냥 어두운 상자였다.
 * 항로가 왼쪽에서 들어와 이 페이지에 닿는 모습을 넣어,
 * 브랜드의 중심 장치가 6개 페이지를 꿰뚫게 한다. 영상은 쓰지 않는다.
 */

.pagehead > .shell { position: relative; z-index: 1; }
.pagehead__route {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 64%;
  z-index: 0;
  pointer-events: none;
}
.pagehead__route svg {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 페이지를 열자마자 보이는 자리라 스크롤 타임라인을 쓸 수 없다.
   한 번만 그려지고 끝난다. 이 페이지의 유일한 등장 연출이다. */
@media (prefers-reduced-motion: no-preference) {
  .pagehead__route .route__line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    animation: route-draw 1.7s cubic-bezier(0.22, 1, 0.36, 1) 0.3s forwards;
  }
  .pagehead__route .route__node {
    opacity: 0;
    animation: node-lit 0.55s ease 1.8s forwards;
  }
}

@media (max-width: 760px) {
  .pagehead__route { height: 52%; }
}

/* ── 깊이와 등장 ─────────────────────────────────────────────
 *
 * 지금까지 이 사이트에는 스크롤 등장 연출이 **하나도 없었다**.
 * 구역이 툭 나타나서 "쌓인 상자"처럼 보였다.
 *
 * 여기서 하는 일은 하나다: 화면에 들어올 때 항목이 **뒤에서 앞으로**
 * 아주 조금 일어선다. 기울기 4도, 깊이 40px. 그 이상은 멀미가 난다.
 *
 * 전부 CSS 스크롤 타임라인이다. JS 도 라이브러리도 쓰지 않는다.
 * 지원하지 않는 브라우저(Firefox)에서는 처음부터 보인다. 안전하다.
 */

@keyframes rise {
  from {
    opacity: 0;
    transform: perspective(1000px) translate3d(0, 42px, -70px) rotateX(6.5deg);
  }
  to {
    opacity: 1;
    transform: perspective(1100px) translate3d(0, 0, 0) rotateX(0);
  }
}

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {

    .lead,
    .manifesto,
    .claim__body,
    .claim__close,
    .tags,
    .status__inner,
    .asks > li,
    .doors > li,
    .rules > li,
    .steps > li,
    .cat > li,
    .pillars > li,
    .course > li,
    .faq > li,
    .roster .person,
    .closing blockquote,
    .closing .btn,
    .inquiry__aside,
    .done__next {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
      transform-origin: 50% 100%;
      backface-visibility: hidden;   /* 기울 때 글자가 흐려지는 것을 막는다 */
    }

    /* 나란히 놓인 것들은 조금씩 늦게 선다. 같은 높이에 있으면
       타임라인이 같아 한꺼번에 뜨는데, 그러면 싸구려처럼 보인다.
       뒤 항목일수록 범위를 밀어 순서를 만든다. */
    .asks > li:nth-child(2),
    .rules > li:nth-child(2),
    .steps > li:nth-child(2),
    .cat > li:nth-child(2),
    .pillars > li:nth-child(2),
    .course > li:nth-child(2),
    .roster .person:nth-child(2) { animation-range: entry 4% cover 33%; }

    .asks > li:nth-child(3),
    .rules > li:nth-child(3),
    .steps > li:nth-child(3),
    .cat > li:nth-child(3),
    .pillars > li:nth-child(3),
    .course > li:nth-child(3),
    .roster .person:nth-child(3) { animation-range: entry 4% cover 40%; }

    .rules > li:nth-child(4),
    .steps > li:nth-child(4),
    .cat > li:nth-child(4),
    .pillars > li:nth-child(4) { animation-range: entry 4% cover 47%; }

    /* 엠블럼은 본문보다 느리게 흐른다. 이게 깊이를 만드는 가장 값싼 방법이다. */
    .rose::after {
      animation: drift linear both;
      animation-timeline: view();
      animation-range: cover;
    }
  }
}

@keyframes drift {
  from { translate: 0 -7%; }
  to   { translate: 0 7%; }
}

/* ══════════════════════════════════════════════════════════════
 * 크리에이터 지원 페이지 (creator.html) - 2026년 8월 2일
 *
 * 여기 있는 규칙은 **크리에이터 페이지에서만 쓰는 클래스**에만 건다.
 * 공용 클래스(.band .lead .terms .route .status .closing)는 손대지 않는다.
 * 손대면 홈·에이전트·문의 세 페이지가 같이 흔들린다.
 *
 * 이전 판은 똑같이 생긴 블록 8개가 2×4 격자로 놓인 것이 페이지 구조였다.
 * 그래서 "정산금 100% 수령"이 "생일 이벤트"와 같은 무게로 읽혔다.
 * 다시 짜면서 구역마다 다른 리듬을 줬다 - 목록, 갈래, 서약, 항해도, 아코디언.
 * ══════════════════════════════════════════════════════════════ */

/* ── 영문 라벨 ───────────────────────────────────────────────
 * 이 페이지 전체에서 **두 개만** 쓴다. 히어로와 마지막 CTA.
 * 이전 판에는 여덟 개가 붙어 있었다. 늘리지 말 것. */
.eyebrow {
  margin-bottom: 18px;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold);
}

/* ── 히어로 ──────────────────────────────────────────────────
 * 홈과 달리 되감지 않는다. 여기는 조건을 찾아 읽으러 온 사람이 오는
 * 자리라 스크롤을 붙잡으면 안 된다. 대신 영상이 조용히 루프한다. */
.hero--creator .hero__stage {
  min-height: min(86vh, 760px);
  display: flex;
  align-items: center;
}
.hero--creator .hero__title { max-width: 13em; }
.hero--creator .hero__lede { max-width: 30em; }

/* ── 세 마디 신조 ────────────────────────────────────────────
 * 카드 세 장이 아니라 한 문장이 세 마디로 끊긴 것이다.
 * 그래서 상자를 두르지 않고 왼쪽 선 하나로만 묶는다. */
.creed {
  margin-top: var(--gap-4);
  display: grid;
  gap: 18px;
  max-width: 24em;
  list-style: none;
  counter-reset: none;
}
.creed li {
  position: relative;
  padding-left: 28px;
  font-size: clamp(1.05rem, 1.9vw, 1.32rem);
  line-height: 1.5;
  color: var(--dim);
}
.creed strong { color: var(--ink); font-weight: 600; }
/* 점이 아니라 항로 위의 경유점이다. 세로선이 이들을 잇는다. */
.creed li > span {
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 7px;
  height: 7px;
  border: 1px solid var(--gold);
  border-radius: 50%;
  background: var(--deep);
}
.creed li:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 3px;
  top: calc(0.62em + 7px);
  bottom: -18px;
  width: 1px;
  background: var(--gold-hair);
}

/* ── 지원 항목 ───────────────────────────────────────────────
 * 네 덩어리를 좌우로 나눈다. 왼쪽이 이름, 오른쪽이 내용.
 * 상자를 만들지 않아 여덟 개 격자였던 이전 판과 리듬이 달라진다. */
.kit {
  display: grid;
  gap: var(--gap-4);
}
.kit__row {
  display: grid;
  gap: var(--gap-2);
  padding-top: var(--gap-3);
  border-top: 1px solid var(--hair-faint);
}
@media (min-width: 900px) {
  .kit__row {
    grid-template-columns: minmax(0, 4fr) minmax(0, 8fr);
    gap: var(--gap-4);
    /* 이름은 줄의 맨 위에 붙는다. 기본값(stretch)이면 세로 가운데로
       밀려서 이름 위에 200px 짜리 빈 칸이 생긴다. */
    align-items: start;
  }
}
.kit__name {
  display: flex;
  align-items: center;
  gap: 11px;
  font-size: clamp(1.12rem, 2vw, 1.4rem);
  line-height: 1.35;
  color: var(--ink);
}
.kit__name .ph { font-size: 1.15em; color: var(--gold); }
/* 항목이 많은 덩어리는 두 단으로 흘린다. 한 단이면 세로로 너무 길어진다.
   **`display: block` 을 빼지 말 것.** 공용 `.terms` 는 `display: grid` 인데
   다단(`columns`)은 그리드 컨테이너에 먹지 않는다. 한 단으로 남는다. */
@media (min-width: 620px) {
  .kit__body .terms {
    display: block;
    columns: 2;
    column-gap: var(--gap-4);
  }
  .kit__body .terms li { break-inside: avoid; margin-bottom: 9px; }
}

/* ── 단서 ────────────────────────────────────────────────────
 * "협의 후 지원"처럼 **확정이 아닌 것**은 반드시 이 모양으로 적는다.
 * 확정 조건(.vows)과 눈으로 구분되지 않으면 과장 광고가 된다. */
.note {
  margin-top: var(--gap-2);
  padding-left: 15px;
  border-left: 2px solid var(--gold-hair);
  font-size: 0.9rem;
  line-height: 1.72;
  color: var(--mute);
}
.note--wide { margin-top: var(--gap-4); max-width: 42em; }

/* ── 네 갈래 항로 ────────────────────────────────────────────
 * 위의 .route--4 SVG 노드(x 150/450/750/1050)가 이 네 열의
 * 가운데 값이다. 열 수를 바꾸면 선과 항목이 어긋난다. */
.lanes {
  display: grid;
  gap: var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}
@media (min-width: 1000px) {
  .lanes { grid-template-columns: repeat(4, 1fr); gap: var(--gap-3); }
}
.lanes > li > h3 {
  margin-bottom: 15px;
  font-size: 1.05rem;
  color: var(--gold-lit);
}

/* ── 확정 조건 ───────────────────────────────────────────────
 * 이 페이지에서 유일하게 "무조건"이라고 말할 수 있는 목록이다.
 * 체크 표시는 장식이 아니라 위의 '개별 제안' 항목들과의 구분이다. */
.vows {
  margin-top: var(--gap-4);
  display: grid;
  gap: 13px var(--gap-3);
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.vows li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--ink);
}
.vows li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.42em;
  width: 9px;
  height: 5px;
  border-left: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  rotate: -45deg;
}

/* ── 수익 구조 ───────────────────────────────────────────────
 * 이 사업에서 가장 센 문장이다. 이전 판에서는 여덟 개 블록 중
 * 하나로 묻혀 있었다. 여기서는 혼자 서게 둔다. */
.payout {
  margin-top: var(--gap-5);
  padding: var(--gap-3) 0 var(--gap-3) clamp(20px, 3vw, 34px);
  border-left: 1px solid var(--gold-hair);
}
.payout__key {
  font-size: clamp(1.22rem, 2.6vw, 1.72rem);
  line-height: 1.5;
  color: var(--dim);
}
.payout__key strong { color: var(--gold-lit); font-weight: 600; }
.payout__sub {
  margin-top: 17px;
  max-width: 34em;
  font-size: 0.95rem;
  color: var(--mute);
}

/* ── 여섯 단계 ───────────────────────────────────────────────
 * 항해도 위에 단계가 놓인다. 지도는 배경이지 그림이 아니다. */
.voyage { position: relative; overflow: hidden; isolation: isolate; }
.voyage__map {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: -2;
  opacity: 0.5;
  pointer-events: none;
}
.voyage::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: linear-gradient(to bottom,
    rgba(14, 34, 73, 0.86) 0%,
    rgba(14, 34, 73, 0.62) 42%,
    rgba(14, 34, 73, 0.78) 100%);
}
.legs {
  display: grid;
  gap: var(--gap-3) var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(245px, 1fr));
  counter-reset: leg;
}
@media (min-width: 1000px) { .legs { grid-template-columns: repeat(3, 1fr); } }
.legs > li {
  position: relative;
  padding-top: 19px;
  border-top: 1px solid var(--gold-hair);
  counter-increment: leg;
}
/* 단계 번호. 장식용 섹션 번호가 아니라 순서가 뜻인 자리다. */
.legs > li::before {
  content: counter(leg);
  position: absolute;
  top: -0.72em;
  right: 0;
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--gold);
  background: var(--field);
  padding-left: 9px;
}
.legs h3 { margin-bottom: 9px; font-size: 1.06rem; color: var(--ink); }
.legs p { font-size: 0.94rem; line-height: 1.75; color: var(--dim); }

/* ── 찾는 사람 ───────────────────────────────────────────────
 * 목록이지만 조건표가 아니다. 읽는 사람이 자기를 찾는 자리라
 * 한 줄씩 넉넉하게 놓는다. */
.seek {
  display: grid;
  gap: 15px;
  max-width: 40em;
}
.seek li {
  position: relative;
  padding-left: 24px;
  font-size: clamp(1rem, 1.7vw, 1.12rem);
  line-height: 1.62;
  color: var(--dim);
}
.seek li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.66em;
  width: 11px;
  height: 1px;
  background: var(--gold);
}
.seek__close {
  margin-top: var(--gap-4);
  max-width: 34em;
  font-size: 1.06rem;
  line-height: 1.8;
  color: var(--ink);
}

/* ── 자주 묻는 질문 ──────────────────────────────────────────
 * details/summary 라서 스크립트가 없어도 열리고 닫힌다.
 * 확장 상태와 키보드 조작은 브라우저가 알려준다 - aria 를 손으로 달지 않는다.
 * 질문이 11개라 전부 펼쳐 두면 화면 세 개 분량이 된다. */
@media (min-width: 960px) {
  .qa {
    display: grid;
    grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
    gap: var(--gap-5);
    align-items: start;
  }
  /* 제목이 따라 내려온다. 이전 판은 오른쪽 절반이 통째로 비어 있었다. */
  .qa__lead { position: sticky; top: 108px; margin-bottom: 0; }
}
.qa__list { display: grid; }
.qa__list details {
  border-top: 1px solid var(--hair-faint);
}
.qa__list details:last-child { border-bottom: 1px solid var(--hair-faint); }
.qa__list summary {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 21px 0;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.qa__list summary::-webkit-details-marker { display: none; }
/* 여닫는 표시. 아이콘 폰트가 안 떠도 남도록 CSS 로 그린다. */
.qa__list summary::after {
  content: "";
  flex: 0 0 auto;
  width: 9px;
  height: 9px;
  margin-left: auto;
  margin-top: 0.42em;
  border-right: 1.5px solid var(--gold);
  border-bottom: 1.5px solid var(--gold);
  rotate: 45deg;
  transition: rotate 0.18s ease;
}
.qa__list details[open] summary::after { rotate: -135deg; }
.qa__list summary:hover { color: var(--gold-lit); }
.qa__list details > p {
  padding: 0 34px 24px 0;
  max-width: 40em;
  font-size: 0.95rem;
  line-height: 1.82;
  color: var(--dim);
}

/* ── 마무리 ──────────────────────────────────────────────────*/
.closing-scene .closing { text-align: left; }
.closing-scene .eyebrow { text-transform: uppercase; }
.closing-scene h2 { max-width: 14em; }
.closing__body {
  margin-top: 20px;
  max-width: 32em;
  font-size: 1.02rem;
  line-height: 1.8;
  color: var(--dim);
}
.closing-scene .hero__actions { margin-top: var(--gap-3); }

/* ── 등장 ────────────────────────────────────────────────────
 * 홈과 같은 규칙(rise)을 이 페이지의 새 목록에도 건다.
 * 지원하지 않는 브라우저에서는 처음부터 보인다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .creed li, .kit__row, .lanes > li, .legs > li, .seek li, .payout {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
      backface-visibility: hidden;
    }
    .lanes > li:nth-child(2), .legs > li:nth-child(2) { animation-range: entry 4% cover 31%; }
    .lanes > li:nth-child(3), .legs > li:nth-child(3) { animation-range: entry 4% cover 36%; }
    .lanes > li:nth-child(4), .legs > li:nth-child(4) { animation-range: entry 4% cover 41%; }
  }
}

/* ── 모바일 ──────────────────────────────────────────────────*/
@media (max-width: 760px) {
  .hero--creator .hero__stage { min-height: 0; }
  /* 항로 SVG 의 노드 x 좌표는 4열 기준이다. 한 단으로 접히면
     선과 항목이 어긋나므로 노드를 감춘다. 선과 별은 남긴다. */
  .route--4 .route__node { display: none; }
  .payout { padding-left: 17px; }
  .qa__list summary { font-size: 0.98rem; padding: 18px 0; }
  .qa__list details > p { padding-right: 0; }
}

/* ── 크리에이터 페이지 전용 스크림 ───────────────────────────
 *
 * 홈과 이 페이지는 **글자가 놓이는 자리가 다르다.**
 * 홈은 표제가 왼쪽에만 있어서 왼쪽만 누르는 방향성 그라데이션이 맞았다.
 * 이 페이지는 지원 목록과 네 갈래가 **화면 전폭**을 쓴다.
 * 같은 그라데이션을 쓰면 오른쪽 밝은 금속 위에 글자가 얹혀
 * 대비가 1.72:1 까지 떨어진다(기준 4.5:1). 재서 확인했다.
 *
 * 그래서 둘로 나눈다.
 *   히어로  - 글이 왼쪽에만 있으므로 방향성 유지. 영상이 그림으로 산다
 *   본문 구역 - 균일하게 눌러 영상을 질감으로 낮춘다. 글이 이겨야 한다
 *
 * 0.78 은 재서 정한 값이다. 이 값에서 네 구역 최악 대비가 9.66:1 이다.
 * 더 낮추면 4.5:1 밑으로 떨어진다.
 */

/* 히어로 - 방향성. 글은 왼쪽에만 있다 */
.hero--creator .scene--creator::after {
  background:
    linear-gradient(100deg,
      rgba(6, 16, 39, 0.94) 0%,
      rgba(6, 16, 39, 0.90) 26%,
      rgba(6, 16, 39, 0.76) 52%,
      rgba(6, 16, 39, 0.38) 78%,
      rgba(6, 16, 39, 0.10) 100%),
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.45) 0%,
      rgba(6, 16, 39, 0) 24%,
      rgba(6, 16, 39, 0) 70%,
      rgba(6, 16, 39, 0.62) 100%);
}

/* 본문 구역 - 균일. 글이 전폭을 쓴다 */
.band.scene--creator::after {
  background:
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.88) 0%,
      rgba(6, 16, 39, 0.78) 16%,
      rgba(6, 16, 39, 0.78) 84%,
      rgba(6, 16, 39, 0.90) 100%);
}

@media (max-width: 760px) {
  .hero--creator .scene--creator::after,
  .band.scene--creator::after {
    background:
      linear-gradient(to bottom,
        rgba(6, 16, 39, 0.90) 0%,
        rgba(6, 16, 39, 0.82) 38%,
        rgba(6, 16, 39, 0.84) 72%,
        rgba(6, 16, 39, 0.92) 100%);
  }
}

/* ══════════════════════════════════════════════════════════════
 * 에이전트 페이지 (agent.html) - 2026년 8월 2일
 *
 * creator.html 에서 만든 `.kit .vows .payout .voyage .legs .seek .qa
 * .lanes .note .eyebrow .scene--creator .hero--creator` 를 그대로 쓴다.
 * 여기에는 **에이전트에만 있는 것**만 적는다.
 *
 * 이전 판은 `.cat` 블록 5개가 격자로 놓인 것이 구조였고, 배분율 숫자
 * (30·60%)가 페이지에서 가장 큰 글자였다. 지금은 숫자를 아예 싣지 않는다.
 * 대신 **누가 무엇을 하는지**(.flow)가 가장 또렷해야 한다. 이 페이지에서
 * 가장 자주 생기는 오해가 "에이전트가 광고 영업까지 하나?" 이기 때문이다.
 * ══════════════════════════════════════════════════════════════ */

/* ── 다섯 역할 ───────────────────────────────────────────────
 * 발견 · 안내 · 연결 · 소통 · 성장.
 * 카드가 아니라 위쪽 헤어라인으로만 구분한다. 다섯 개를 같은 크기
 * 상자에 담으면 이전 판의 `.cat` 격자와 같아진다. */
.roles {
  display: grid;
  gap: var(--gap-3) var(--gap-4);
  grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
}
@media (min-width: 1040px) { .roles { grid-template-columns: repeat(5, 1fr); gap: var(--gap-3); } }
.roles > li {
  padding-top: 17px;
  border-top: 1px solid var(--gold-hair);
}
.roles h3 {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 11px;
  font-size: 1.04rem;
  color: var(--gold-lit);
}
.roles h3 .ph { font-size: 1.1em; color: var(--gold); }
.roles p { font-size: 0.93rem; line-height: 1.75; color: var(--dim); }

/* ── 누가 무엇을 하는가 ──────────────────────────────────────
 * 이 페이지의 핵심이다. 일곱 단계마다 주체를 라벨로 못 박는다.
 * 라벨 색이 셋으로 갈리는 것이 요점이다 - 골드(에이전트),
 * 회색(본사), 블루(크리에이터). 색이 하나면 구분이 안 된다. */
.flow {
  margin-top: var(--gap-4);
  display: grid;
  gap: 0;
  max-width: 46em;
  counter-reset: none;
}
.flow > li {
  display: flex;
  align-items: baseline;
  gap: 14px;
  padding: 15px 0;
  border-top: 1px solid var(--hair-faint);
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--dim);
}
.flow > li:last-child { border-bottom: 1px solid var(--hair-faint); }
.flow__who {
  flex: 0 0 auto;
  min-width: 5.4em;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--mute);
}
.flow__who--agent   { color: var(--gold-lit); }
.flow__who--creator { color: #8fb4e8; }

/* ── 하는 것 / 하지 않는 것 ──────────────────────────────────
 * 브리프가 "처벌 규정처럼 위협적으로 표현하지 말라"고 했다.
 * 그래서 붉은색을 쓰지 않고, 금지 목록도 같은 톤으로 나란히 둔다.
 * 다른 것은 표시 하나뿐이다 - 체크냐 가로줄이냐. */
.creed-pair {
  display: grid;
  gap: var(--gap-5);
}
@media (min-width: 900px) {
  .creed-pair { grid-template-columns: repeat(2, 1fr); gap: var(--gap-5); align-items: start; }
}
.creed-pair__name {
  margin-bottom: var(--gap-2);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gold-hair);
  font-size: 1.06rem;
  color: var(--ink);
}
.creed-pair__name--no { border-bottom-color: var(--hair); color: var(--dim); }
/* 짝을 이룰 때는 한 단으로. 두 단이면 좌우가 서로 어긋나 읽기 나쁘다. */
.creed-pair .vows { margin-top: 0; grid-template-columns: 1fr; gap: 12px; }

.nots { display: grid; gap: 12px; }
.nots li {
  position: relative;
  padding-left: 26px;
  font-size: 0.98rem;
  line-height: 1.6;
  color: var(--mute);
}
/* 가로줄 하나. X 표시나 붉은색은 쓰지 않는다. */
.nots li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: 0.74em;
  width: 11px;
  height: 1px;
  background: var(--mute);
}

/* ── 확장 항로의 본문 ───────────────────────────────────────*/
.lanes__body {
  margin-bottom: 13px;
  font-size: 0.93rem;
  line-height: 1.72;
  color: var(--dim);
}
.lanes--4 > li > h3 { color: var(--gold-lit); }

/* ── 히어로 아래 단서 ───────────────────────────────────────*/
.note--hero { margin-top: var(--gap-3); max-width: 32em; }

/* ── 여덟 단계 ───────────────────────────────────────────────
 * creator 는 여섯이라 3열이 딱 맞았다. 여기는 여덟이라 4열이어야
 * 두 줄로 떨어진다. 3열이면 마지막 줄에 두 개만 남아 빈다. */
@media (min-width: 1040px) { .legs--8 { grid-template-columns: repeat(4, 1fr); } }

/* ── 등장 ────────────────────────────────────────────────────*/
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .roles > li, .flow > li, .creed-pair section, .nots li {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% cover 26%;
      backface-visibility: hidden;
    }
    .roles > li:nth-child(2) { animation-range: entry 4% cover 30%; }
    .roles > li:nth-child(3) { animation-range: entry 4% cover 34%; }
    .roles > li:nth-child(4) { animation-range: entry 4% cover 38%; }
    .roles > li:nth-child(5) { animation-range: entry 4% cover 42%; }
  }
}

/* ── 모바일 ──────────────────────────────────────────────────*/
@media (max-width: 760px) {
  /* 주체 라벨이 문장 위로 올라간다. 옆에 두면 5.4em 을 빼앗겨
     본문이 서너 글자씩 끊긴다. */
  .flow > li { flex-direction: column; gap: 5px; }
  .flow__who { min-width: 0; }
  .creed-pair { gap: var(--gap-4); }
}

/* ── 에이전트 히어로 표제 ────────────────────────────────────
 * 이 페이지 h1 은 "가까운 사람의 가능성을 발견하는 것부터,
 * 에이전트의 여정은 시작됩니다." 로 홈·크리에이터보다 훨씬 길다.
 * 홈과 같은 크기(최대 4.4rem)로 두면 첫 줄이 한 번 더 접혀
 * "것부터," 가 혼자 떨어진다. 실제로 렌더링해서 확인한 값이다. */
.hero--agent .hero__title {
  font-size: clamp(1.72rem, 3.5vw, 2.75rem);
  max-width: 19em;
}
.hero--agent .hero__lede { max-width: 32em; }
@media (max-width: 760px) {
  .hero--agent .hero__title { font-size: clamp(1.5rem, 6.4vw, 1.95rem); }
}

/* ══════════════════════════════════════════════════════════════
 * 소속 크리에이터 페이지 (creators.html) - 2026년 8월 2일
 *
 * creator/agent 에서 만든 `.kit .vows .roles .legs .qa .voyage .note
 * .eyebrow .scene--creator .hero--creator` 를 그대로 쓴다.
 * 여기에는 **로스터에만 있는 것**만 적는다.
 *
 * 이 페이지의 성격이 다르다. 나머지 넷은 회사가 말하는 페이지지만
 * 여기는 **사람이 주인공**이다. 그래서 조금 더 에디토리얼하게 간다.
 * 다만 실제 등록된 크리에이터가 0명이라, 지금 화면에 실제로 보이는 것은
 * `.roster__empty` 하나뿐이다. 아래 카드·필터·상세 규칙은 데이터가
 * 들어오는 순간 바로 쓰이도록 미리 깔아 둔 것이다.
 * ══════════════════════════════════════════════════════════════ */

/* ── 히어로 아래 신뢰 줄 ─────────────────────────────────────*/
.trust {
  margin-top: var(--gap-3);
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
}
.trust li {
  position: relative;
  padding-left: 15px;
  font-size: 0.86rem;
  color: var(--mute);
}
.trust li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border: 1px solid var(--gold);
  border-radius: 50%;
}
.hero--roster .hero__title { max-width: 14em; }

/* ── 빈 상태 ─────────────────────────────────────────────────
 * **이 자리를 가짜 프로필 카드로 채우지 말 것.**
 * 이전 판에는 "활동명 / 분야 / 프로필 자리" 카드 세 장이 공개돼 있었다.
 * 광고주가 보는 페이지에 자리표시자가 떠 있는 것은 빈 화면보다 나쁘다.
 * 실제 사람이 등록되면 roster.js 가 이 블록을 숨기고 디렉터리를 켠다. */
.roster__empty {
  padding: var(--gap-5) clamp(20px, 4vw, 44px);
  border-top: 1px solid var(--gold-hair);
  border-bottom: 1px solid var(--hair-faint);
  max-width: 40em;
}
.roster__empty h3 {
  font-size: clamp(1.3rem, 2.8vw, 1.85rem);
  line-height: 1.4;
  color: var(--ink);
}
.roster__empty p {
  margin-top: 17px;
  font-size: 1rem;
  line-height: 1.85;
  color: var(--dim);
}
.roster__empty .hero__actions { margin-top: var(--gap-3); }

/* ── 필터 줄 ─────────────────────────────────────────────────*/
.roster__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--gap-2);
  padding-bottom: var(--gap-3);
  border-bottom: 1px solid var(--hair-faint);
}
.roster__field { display: grid; gap: 7px; }
.roster__field > span {
  font-size: 0.76rem;
  letter-spacing: 0.06em;
  color: var(--mute);
}
.roster__field input,
.roster__field select {
  min-height: 42px;
  min-width: 11em;
  padding: 0 13px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--deep);
  color: var(--ink);
  font: inherit;
  font-size: 0.95rem;
}
.roster__field input:focus-visible,
.roster__field select:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.roster__reset {
  min-height: 42px;
  padding: 0 17px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}
.roster__reset:hover { color: var(--ink); border-color: var(--gold-hair); }
.roster__count {
  margin: var(--gap-2) 0 var(--gap-3);
  font-size: 0.88rem;
  color: var(--mute);
}
.roster__none {
  padding: var(--gap-4) 0;
  font-size: 0.98rem;
  color: var(--dim);
}

/* ── 크리에이터 카드 ─────────────────────────────────────────
 * 사진이 주인공이다. 두꺼운 금테를 두르지 않고, 파란 필터로 덮지 않는다.
 * 사람마다 얼굴이 다른 것이 이 페이지의 유일한 장식이다. */
.roster__grid {
  display: grid;
  gap: var(--gap-3);
  grid-template-columns: repeat(auto-fill, minmax(232px, 1fr));
}
.pcard__hit {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.pcard__hit:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; }
.pcard__shot {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;      /* 사진 비율. 바꾸면 인물이 잘린다 */
  overflow: hidden;
  border-radius: var(--radius);
  background: var(--void);
}
.pcard__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: scale 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.pcard__hit:hover .pcard__shot img,
.pcard__hit:focus-visible .pcard__shot img { scale: 1.03; }
/* 사진이 없거나 못 불러왔을 때. 깨진 이미지 아이콘 대신 브랜드 마크가 남는다. */
.pcard__shot.is-fallback {
  background:
    radial-gradient(120% 90% at 50% 40%, rgba(200,154,74,0.10), transparent 62%),
    var(--void);
}
.pcard__shot.is-fallback::after {
  content: "";
  position: absolute;
  inset: 0;
  background: url("images/mark.png") center / 44% auto no-repeat;
  opacity: 0.22;
}
.pcard__body { display: block; padding-top: 15px; }
.pcard__name {
  display: block;
  font-size: 1.06rem;
  color: var(--ink);
}
.pcard__tag {
  display: block;
  margin-top: 6px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--dim);
}
.pcard__cats {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
  margin-top: 11px;
}
.pcard__cats li {
  font-size: 0.78rem;
  color: var(--gold-lit);
}
.pcard__plats {
  display: block;
  margin-top: 8px;
  font-size: 0.78rem;
  color: var(--mute);
}
.pcard__plats span + span::before { content: " · "; }
/* 모바일에는 hover 가 없다. 그래서 이 줄은 늘 보인다. 카드를 뒤집지 않는다. */
.pcard__more {
  display: inline-block;
  margin-top: 13px;
  padding-bottom: 3px;
  border-bottom: 1px solid var(--gold-hair);
  font-size: 0.84rem;
  color: var(--gold-lit);
}

/* ── 상세 ────────────────────────────────────────────────────
 * <dialog> 라 포커스 가둠과 ESC 닫기를 브라우저가 해준다.
 * 직접 만든 모달보다 접근성이 안전하다. */
.pdetail {
  width: min(920px, 92vw);
  max-height: 88vh;
  padding: 0;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: var(--void);
  color: var(--ink);
  overflow: auto;
}
.pdetail::backdrop { background: rgba(2, 7, 17, 0.82); }
.pdetail__inner { padding: clamp(24px, 4vw, 46px); }
.pdetail__close {
  float: right;
  min-height: 38px;
  padding: 0 15px;
  border: 1px solid var(--hair);
  border-radius: var(--radius);
  background: none;
  color: var(--dim);
  font: inherit;
  font-size: 0.86rem;
  cursor: pointer;
}
.pdetail__close:hover { color: var(--ink); }
.pdetail__head { display: grid; gap: var(--gap-3); }
@media (min-width: 720px) {
  .pdetail__head { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); align-items: start; }
}
.pdetail__shot {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: var(--radius);
}
.pdetail h2 {
  font-size: clamp(1.5rem, 3.4vw, 2.1rem);
  line-height: 1.25;
}
.pdetail h2:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; }
.pdetail__tag { margin-top: 11px; font-size: 1rem; line-height: 1.7; color: var(--dim); }
.pdetail__meta { display: block; margin-top: 9px; font-size: 0.84rem; color: var(--mute); }
.pdetail__links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 15px; }
.pdetail__head .btn { margin-top: var(--gap-2); }
.pdetail__block { margin-top: var(--gap-4); }
.pdetail__block h3 {
  margin-bottom: 13px;
  padding-bottom: 11px;
  border-bottom: 1px solid var(--hair-faint);
  font-size: 0.98rem;
  color: var(--gold-lit);
}
.pdetail__block p { font-size: 0.96rem; line-height: 1.85; color: var(--dim); }
/* 지표는 확인된 것만 온다. 없으면 이 구역 자체가 만들어지지 않는다. */
.pdetail__stats {
  display: grid;
  gap: var(--gap-2) var(--gap-3);
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
}
.pdetail__stats dt { font-size: 0.82rem; color: var(--mute); }
.pdetail__stats dd { margin-top: 5px; font-size: 1.24rem; color: var(--ink); }
.pdetail .note { margin-top: var(--gap-4); }

/* ── 다섯 갈래 협업 · 넓은 서약 ──────────────────────────────*/
@media (min-width: 1100px) { .roles--5 { grid-template-columns: repeat(5, 1fr); } }
.vows--wide { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.kit__text { font-size: 0.96rem; line-height: 1.8; color: var(--dim); }

/* ── 모바일 ──────────────────────────────────────────────────*/
@media (max-width: 760px) {
  .roster__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--gap-2); }
  .roster__field input, .roster__field select { min-width: 0; width: 100%; }
  .roster__field { flex: 1 1 46%; }
  .pdetail { width: 96vw; max-height: 92vh; }
}

/* ══════════════════════════════════════════════════════════════
 * 간결한 공통 푸터 + 법적 고지 페이지 - 2026년 8월 2일
 *
 * 푸터에서 대표자·사업장 주소·개인 이메일·휴대전화를 뺐다.
 * 이 사이트는 회사 소개와 무료 상담만 하고 결제를 받지 않아서
 * 전자상거래법상 초기화면 표시 의무 대상이 아니다. 사장님이 확인한 판단이다.
 * **사이트에서 결제나 통신판매를 시작하면 법정 표시사항을 다시 전부 넣어야 한다.**
 * 그때는 이 자리에 상호·대표자·주소·연락처·통신판매업 신고번호가 들어간다.
 *
 * 지금 그 정보들은 business.html 에 모아 두고 푸터에서 링크로 간다.
 * ══════════════════════════════════════════════════════════════ */

.foot__biz {
  font-size: 0.86rem;
  color: var(--mute);
  align-self: center;
}
.foot__links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.foot__links a {
  font-size: 0.86rem;
  color: var(--dim);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
.foot__links a:hover { color: var(--ink); border-bottom-color: var(--gold-hair); }
.foot__links a[aria-current="page"] { color: var(--gold-lit); }

/* ── 법적 고지 페이지 ────────────────────────────────────────
 * 읽으라고 만든 페이지다. 장식을 넣지 않고 글줄만 신경 쓴다. */
.doc .shell { max-width: 52em; }
.doc__block { margin-top: var(--gap-5); }
.doc__block h2 {
  margin-bottom: var(--gap-2);
  padding-bottom: 13px;
  border-bottom: 1px solid var(--gold-hair);
  font-size: clamp(1.1rem, 2.2vw, 1.34rem);
  color: var(--ink);
}
.doc__block h3 {
  margin-top: var(--gap-3);
  margin-bottom: 11px;
  font-size: 0.98rem;
  color: var(--gold-lit);
}
.doc__block p {
  margin-top: 15px;
  font-size: 0.98rem;
  line-height: 1.95;
  color: var(--dim);
}
.doc__block p strong { color: var(--ink); font-weight: 600; }
.doc__block .terms { margin-top: 13px; }
.doc__block .note { margin-top: var(--gap-2); }
/* 고지 페이지의 사업자 정보는 표처럼 읽혀야 한다. */
.biz--doc {
  margin-top: var(--gap-3);
  display: grid;
  gap: 15px;
}
.biz--doc > div {
  display: grid;
  gap: 4px;
  padding-bottom: 15px;
  border-bottom: 1px solid var(--hair-faint);
}
@media (min-width: 620px) {
  .biz--doc > div { grid-template-columns: 10em 1fr; gap: var(--gap-2); align-items: baseline; }
}
.biz--doc dt { font-size: 0.86rem; color: var(--mute); }
.biz--doc dd { font-size: 1rem; color: var(--ink); }

@media (max-width: 760px) {
  .foot__biz { align-self: start; margin-top: 13px; }
}

/* ══════════════════════════════════════════════════════════════
 * 문의 페이지 (contact.html) - 2026년 8월 2일
 *
 * 여기서 쓰는 것 대부분은 이미 있던 것이다. 새로 까는 것은 네 가지뿐:
 * 단계(.wiz), 진행 표시(.wiz__bar), 전송 결과(.form__status), 카카오톡 띠(.kakao).
 * ══════════════════════════════════════════════════════════════ */

/* ── 히어로 ──────────────────────────────────────────────────
 * 크리에이터·에이전트와 같은 형태다. 되감지 않고 조용히 루프한다. */
.hero--contact .hero__stage {
  min-height: min(72vh, 620px);
  display: flex;
  align-items: center;
}
.hero--contact .hero__title { max-width: 11em; }
.hero--contact .hero__lede { max-width: 31em; }

@media (max-width: 760px) {
  .hero--contact .hero__stage { min-height: 0; }
}

/* 히어로 스크림 - 방향성. 글은 왼쪽에만 있다.
   영상의 항로 네 줄이 화면을 가로지르므로 왼쪽을 크리에이터 히어로보다 조금 더 누른다. */
.hero--contact .scene--contact::after {
  background:
    linear-gradient(100deg,
      rgba(6, 16, 39, 0.95) 0%,
      rgba(6, 16, 39, 0.92) 28%,
      rgba(6, 16, 39, 0.78) 54%,
      rgba(6, 16, 39, 0.40) 80%,
      rgba(6, 16, 39, 0.12) 100%),
    linear-gradient(to bottom,
      rgba(6, 16, 39, 0.45) 0%,
      rgba(6, 16, 39, 0) 24%,
      rgba(6, 16, 39, 0) 70%,
      rgba(6, 16, 39, 0.62) 100%);
}

@media (max-width: 760px) {
  .hero--contact .scene--contact::after {
    background:
      linear-gradient(to bottom,
        rgba(6, 16, 39, 0.90) 0%,
        rgba(6, 16, 39, 0.82) 38%,
        rgba(6, 16, 39, 0.84) 72%,
        rgba(6, 16, 39, 0.92) 100%);
  }
}

/* ── 단계 ────────────────────────────────────────────────────
 * .is-wiz 는 **contact.js 가 붙인다.** 여기에 박아두면 스크립트가 실패했을 때
 * 2·3단계가 영영 숨어 폼을 못 쓰게 된다. 클래스가 없으면 전부 보인다. */
.wiz {
  display: grid;
  gap: var(--gap-4);
  list-style: none;
}
.wiz__step { display: grid; gap: var(--gap-3); }
.wiz__title {
  font-size: 1.02rem;
  color: var(--ink);
}
.wiz__title:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; }

.form.is-wiz .wiz { gap: 0; }
.form.is-wiz .wiz__step { display: none; }
.form.is-wiz .wiz__step.is-on { display: grid; }

/* 진행 표시. 네 걸음의 첫 걸음(유형 고르기)은 탭에서 이미 끝나 있다.
   장식용 점을 찍지 않는다 - 위에 놓인 선이 어디까지 왔는지 그대로 보여준다. */
.wiz__bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  list-style: none;
  margin-bottom: var(--gap-2);
}
.wiz__bar > li {
  padding-top: 10px;
  border-top: 2px solid var(--hair-faint);
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  color: var(--mute);
}
.wiz__bar > li.is-done {
  border-top-color: var(--gold);
  color: var(--dim);
}
.wiz__bar > li.is-now {
  border-top-color: var(--gold-lit);
  color: var(--gold-lit);
  font-weight: 600;
}

.wiz__nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: center;
}

.form__send {
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap-2);
  align-items: center;
}

/* ── 전송 결과 ───────────────────────────────────────────────
 * 비어 있을 때는 자리를 차지하지 않는다. 스크립트가 채울 때만 나타난다.
 * **서버가 성공이라고 답했을 때만 is-ok 가 붙는다.** */
.form__status {
  font-size: 0.93rem;
  line-height: 1.6;
  color: var(--dim);
}
.form__status:empty { display: none; }
.form__status.is-ok,
.form__status.is-bad,
.form__status.is-sending {
  padding: 14px 16px;
  border-left: 2px solid var(--hair-faint);
  background: rgba(14, 34, 73, 0.5);
}
.form__status.is-ok {
  border-left-color: var(--gold);
  color: var(--ink);
}
.form__status.is-ok strong { color: var(--gold-lit); }
.form__status.is-bad {
  border-left-color: #d68b6c;
  color: var(--ink);
}
.form__status.is-bad strong { color: #e2a184; }

.counter { text-align: right; }
.counter.is-full { color: var(--gold-lit); }
.hint--inline {
  margin-left: 8px;
  font-weight: 400;
}

/* ── 카카오톡 띠 ─────────────────────────────────────────────── */
.band--kakao { background: var(--void); }
.kakao {
  display: grid;
  gap: var(--gap-3);
  align-items: center;
}
.kakao__body { max-width: 34em; }
.kakao__body p { margin-top: 11px; color: var(--dim); }
.kakao .btn { justify-self: start; }
.kakao .btn i { margin-right: 9px; font-size: 18px; }

@media (min-width: 860px) {
  .kakao {
    grid-template-columns: 1fr auto;
    gap: var(--gap-5);
  }
  .kakao .btn { justify-self: end; }
}

/* 전송이 막혔을 때 나오는 되보내기 단추. 막다른 길을 만들지 않으려는 것이다. */
.form__retryrow { display: block; margin-top: 13px; }