/* ONTHEVOYAGE
   THESIS: 이 회사는 크리에이터를 관리하지 않고 항로를 같이 그린다. 그래서 화면은 광고가 아니라
           항해도다. 업종의 기본값인 네온 발광과 똑같은 카드 세 장을 거부한다.
   OWN-WORLD: 잉크 인디고 바탕 위의 성도. 좌표 격자, 눈금이 새겨진 골드 자,
              별처럼 찍히는 마름모 표식, 어긋난 높이로 놓인 성좌. 액센트는 골드 하나.
              숫자와 라벨은 등폭 글꼴로 적는다. 해도의 주기가 그렇게 적히기 때문이다.
   STORY: 방문자는 자기 활동이 어디쯤 있고 다음 점이 어디인지 읽고, 상담을 신청한다.
   FIRST VIEWPORT: 좌표 격자 위에 표제와 두 액션, 우측에서 골드 모노그램이 궤적을 그리며 나간다.
   FORM: 사용자가 성도 방향을 지정했다. 주사위를 굴리지 않았다. */

/* ── tokens ─────────────────────────────────────────────────────── */

:root {
  color-scheme: dark;

  --void: #080d1a;   /* 페이지 바탕. 순검정이 아닌 잉크 인디고 */
  --field: #0c1426;  /* 교차 섹션 */
  --deep: #050912;   /* 가장 깊은 구간. 선언문과 마무리 */
  --ink: #eef1f7;    /* 별빛에 가까운 차가운 오프화이트 */
  --dim: #94a0b8;    /* 바탕에서 뽑은 푸른 기 있는 보조색 */
  --gold: #c89a4a;   /* 브랜드 골드 */
  --gold-lit: #e8c784;
  --hair: rgba(200, 154, 74, 0.32);
  --hair-faint: rgba(200, 154, 74, 0.14);
  --mesh: rgba(148, 160, 184, 0.07);

  --radius: 2px;
  --shell: 1200px;
  --pad: 20px;

  --sans: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont,
    "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", sans-serif;
  /* 해도의 주기는 등폭으로 적힌다. 좌표, 배분율, 항목 번호에만 쓴다. */
  --mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

  /* 12 / 15 / 19 / 24 / 34 / 48px. 인접 단계 최소 1.25배.
     유동 크기는 각 규칙에 clamp 을 직접 쓴다. var 로 감싸면 정적 분석이 값을 못 읽는다. */
  --t-label: 0.75rem;
  --t-small: 0.9375rem;
  --t-body: 1.1875rem;
  --t-title: 1.5rem;
}

@media (min-width: 900px) {
  :root { --pad: 40px; }
}

/* ── base ───────────────────────────────────────────────────────── */

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

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  margin: 0;
  background: var(--void);
  color: var(--ink);
  font-family: var(--sans);
  font-size: var(--t-body);
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.38;
  text-wrap: balance;
}

p, ul, ol, dl, dd, figure, blockquote { margin: 0; }
ul, ol { list-style: none; padding: 0; }

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

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: 12px 18px;
  background: var(--gold);
  color: #140f06;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
}
.skip:focus { left: 0; }

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-left: var(--pad);
  padding-right: var(--pad);
}

/* ── chart apparatus: this world's signature ────────────────────── */

/* 좌표 격자. 해도의 바탕이다. */
.mesh { position: relative; isolation: isolate; }
.mesh::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    repeating-linear-gradient(to right, var(--mesh) 0 1px, transparent 1px 88px),
    repeating-linear-gradient(to bottom, var(--mesh) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(ellipse 78% 68% at 46% 42%, #000 28%, transparent 100%);
  mask-image: radial-gradient(ellipse 78% 68% at 46% 42%, #000 28%, transparent 100%);
}

/* 별. 성도에는 별이 있어야 한다. 이미지가 아니라 좌표를 찍은 그라데이션이다.
   발광 효과가 아니라 점이다. 화면을 밝히지 않고 깊이만 만든다. */
.stars { position: relative; isolation: isolate; }
.stars::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.72;
  background-image:
    radial-gradient(1.4px 1.4px at 12% 18%, rgba(238, 241, 247, 0.9), transparent),
    radial-gradient(1px 1px at 27% 62%, rgba(238, 241, 247, 0.7), transparent),
    radial-gradient(1.6px 1.6px at 41% 28%, rgba(232, 199, 132, 0.85), transparent),
    radial-gradient(1px 1px at 55% 74%, rgba(238, 241, 247, 0.6), transparent),
    radial-gradient(1.2px 1.2px at 68% 15%, rgba(238, 241, 247, 0.8), transparent),
    radial-gradient(1px 1px at 79% 48%, rgba(232, 199, 132, 0.7), transparent),
    radial-gradient(1.5px 1.5px at 88% 80%, rgba(238, 241, 247, 0.75), transparent),
    radial-gradient(1px 1px at 33% 90%, rgba(238, 241, 247, 0.55), transparent),
    radial-gradient(1px 1px at 62% 36%, rgba(238, 241, 247, 0.5), transparent),
    radial-gradient(1.3px 1.3px at 8% 72%, rgba(232, 199, 132, 0.6), transparent),
    radial-gradient(1px 1px at 95% 24%, rgba(238, 241, 247, 0.6), transparent),
    radial-gradient(1px 1px at 47% 8%, rgba(238, 241, 247, 0.45), transparent);
}

/* 항로. 화면을 가로지르는 아주 옅은 궤적 한 줄. */
.wash { position: relative; isolation: isolate; overflow: hidden; }
.wash::before {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  left: -20%;
  right: -20%;
  top: 50%;
  height: 150%;
  translate: 0 -50%;
  border-radius: 50%;
  border: 1px solid rgba(200, 154, 74, 0.11);
  rotate: -7deg;
}

/* ── icons ──────────────────────────────────────────────────────── */

/* Phosphor 아이콘. 직접 SVG 를 그리지 않는다. 손으로 그린 아이콘은 티가 난다. */
.ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  color: var(--gold);
  font-size: 30px;
  line-height: 1;
  transition: color 0.45s ease, scale 0.45s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.ico--sm { font-size: 21px; }
.ico--bare {
  width: auto;
  height: auto;
  border: 0;
  background: none;
  font-size: 20px;
}

/* 눈금이 새겨진 자. 로고 태그라인의 선을 해도의 눈금선으로 바꾼 것이다. */
.tick {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.tick::after {
  content: "";
  flex: 1 1 auto;
  height: 7px;
  background:
    repeating-linear-gradient(to right, var(--hair) 0 1px, transparent 1px 11px)
      left bottom / 100% 5px no-repeat,
    linear-gradient(var(--hair), var(--hair)) left bottom / 100% 1px no-repeat;
}

/* ── buttons ────────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  padding: 15px 28px;
  border-radius: var(--radius);
  border: 1px solid transparent;
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, transform 0.12s ease;
}
/* #c89a4a 위의 #140f06 은 대비 8.7:1. */
.btn--solid { background: var(--gold); color: #140f06; }
.btn--solid:hover { background: var(--gold-lit); }
.btn--ghost { border-color: var(--hair); color: var(--ink); background: transparent; }
.btn--ghost:hover { border-color: var(--gold); color: var(--gold-lit); }
.btn:active { transform: translateY(1px); }

.link {
  display: inline-block;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--hair);
  color: var(--gold);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease;
}
.link:hover { border-color: var(--gold-lit); color: var(--gold-lit); }

/* ── top bar ────────────────────────────────────────────────────── */

.topbar {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(8, 13, 26, 0.9);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--hair-faint);
}
@supports not (backdrop-filter: blur(1px)) {
  .topbar { background: var(--void); }
}

.topbar__inner {
  min-height: 72px;
  display: flex;
  align-items: center;
  gap: 20px;
}

.brand {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 11px;
  text-decoration: none;
}
.brand img { width: auto; height: 26px; }
/* 로고 락업을 26px 로 줄이면 워드마크가 6px 이 되어 읽히지 않는다.
   모노그램만 이미지로 쓰고 워드마크는 살아있는 글자로 짠다. */
.brand span {
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: 0.2em;
  color: var(--ink);
}

.nav {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: clamp(14px, 2.2vw, 26px);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.nav a { text-decoration: none; color: var(--dim); transition: color 0.25s ease; }
.nav a:hover { color: var(--ink); }
.nav a[aria-current="page"] { color: var(--gold); }

.topbar__cta { padding: 10px 20px; }
/* nav 에서 Contact 를 뺐으므로, 현재 위치 표시는 이 버튼이 이어받는다. */
.topbar__cta[aria-current="page"] { border-color: var(--gold); color: var(--gold); }

/* 모바일 메뉴. 체크박스만으로 여닫는다. */
.menu-toggle { position: absolute; width: 1px; height: 1px; opacity: 0; }
.menu-btn { display: none; }

@media (max-width: 899px) {
  .topbar__inner { min-height: 64px; flex-wrap: wrap; gap: 12px; }
  .brand span { display: none; }
  .menu-btn {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 9px 15px;
    border: 1px solid var(--hair);
    border-radius: var(--radius);
    font-family: var(--mono);
    font-size: var(--t-label);
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--ink);
    cursor: pointer;
  }
  .menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--gold-lit); outline-offset: 2px; }
  .nav {
    order: 3;
    flex-basis: 100%;
    margin-left: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    font-size: var(--t-small);
    letter-spacing: 0.06em;
  }
  .nav a { padding-top: 15px; padding-bottom: 15px; border-top: 1px solid var(--hair-faint); }
  .menu-toggle:checked ~ .nav { display: flex; }
  .menu-toggle:checked ~ .topbar__cta { display: inline-flex; }
  .topbar__cta { display: none; order: 4; flex-basis: 100%; margin-bottom: 16px; }
}

/* ── hero ───────────────────────────────────────────────────────── */

.hero { position: relative; overflow: hidden; padding-top: 72px; padding-bottom: 72px; }
/* 지평선 근처의 옅은 빛. 발광 테두리가 아니라 배경의 밀도다. */
.hero::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(42% 44% at 74% 49%, rgba(200, 154, 74, 0.22), transparent 66%),
    radial-gradient(70% 55% at 16% 96%, rgba(148, 160, 184, 0.06), transparent 74%),
    radial-gradient(125% 105% at 50% 46%, transparent 52%, rgba(2, 4, 10, 0.6) 100%);
}
@media (min-width: 900px) {
  .hero { padding-top: 132px; padding-bottom: 148px; }
}

/* 로고의 궤적을 확대해 화면 밖으로 흘려보낸다. */
.hero__mark {
  position: absolute;
  z-index: -1;
  right: 5.5%;
  top: 49%;
  width: min(40vw, 540px);
  translate: 0 -50%;
  opacity: 0.78;
  filter: drop-shadow(0 34px 80px rgba(2, 4, 10, 0.85));
  animation: drift 78s ease-in-out infinite;
}
@keyframes drift {
  0%, 100% { transform: rotate(-1.6deg); }
  50% { transform: rotate(1.6deg); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; }
}

.hero__title {
  margin-top: 34px;
  font-size: clamp(2.4rem, 5vw, 4rem);
  letter-spacing: -0.035em;
  line-height: 1.24;
  max-width: 15em;
}
.hero__lede { margin-top: 30px; max-width: 28em; color: var(--dim); }
.hero__actions { margin-top: 42px; display: flex; flex-wrap: wrap; gap: 12px; }

@media (max-width: 899px) {
  .hero__mark {
    right: -24%;
    top: auto;
    bottom: -3%;
    width: 94vw;
    translate: 0;
    opacity: 0.15;
  }
}

/* 신뢰 뱃지. 히어로 안이 아니라 바로 아래 별도 띠로 둔다. */
.badges {
  padding-top: 14px;
  padding-bottom: 14px;
  border-top: 1px solid var(--hair-faint);
  border-bottom: 1px solid var(--hair-faint);
  background: var(--field);
}
.badges ul { display: grid; gap: 0; }
@media (min-width: 700px) {
  .badges ul { grid-template-columns: repeat(4, 1fr); }
}
.badges li {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-top: 20px;
  padding-bottom: 20px;
  font-size: var(--t-small);
}
.badges li .ico { color: var(--gold); }
@media (max-width: 699px) {
  .badges li + li { border-top: 1px solid var(--hair-faint); }
}

/* ── bands ──────────────────────────────────────────────────────── */

.band { padding-top: 80px; padding-bottom: 80px; border-top: 1px solid var(--hair-faint); }
@media (min-width: 900px) {
  .band { padding-top: 184px; padding-bottom: 184px; }
}
.band--field { background: var(--field); }
.band--deep {
  position: relative;
  background: var(--deep);
}
/* 가장자리를 눌러 시선을 글로 모은다. */
.band--deep::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(105% 85% at 50% 50%, transparent 46%, rgba(2, 4, 10, 0.72) 100%);
}
.band--deep > .shell { position: relative; }

.lead { max-width: 40em; }
.lead--center { max-width: 36em; margin-inline: auto; text-align: center; }
.lead--center .tick { justify-content: center; }
.lead--center .tick::after { display: none; }

.lead__title {
  margin-top: 30px;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
  line-height: 1.3;
}
.lead__body { margin-top: 22px; max-width: 34em; color: var(--dim); }
.lead--center .lead__body { margin-inline: auto; }

/* ── manifesto ──────────────────────────────────────────────────── */

.manifesto { max-width: 780px; margin-inline: auto; text-align: center; }
.manifesto__star {
  width: 54px;
  height: 54px;
  margin: 0 auto 52px;
  background: url("images/compass.png") center / contain no-repeat;
  opacity: 0.9;
  animation: arc-spin 150s linear infinite;
}
@media (prefers-reduced-motion: reduce) { .manifesto__star { animation: none; } }
.manifesto blockquote {
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: -0.03em;
}
.manifesto strong { color: var(--gold); font-weight: 600; white-space: nowrap; }
.manifesto p { margin-top: 32px; color: var(--dim); }

/* ── constellation: three plotted points at uneven heights ──────── */

.constel { margin-top: 64px; display: grid; gap: 52px; }
@media (min-width: 900px) {
  .constel { grid-template-columns: repeat(3, 1fr); gap: 0 44px; }
  /* 세 점이 같은 높이에 있으면 카드 세 장이 된다. 어긋나게 둔다. */
  .constel > li:nth-child(2) { margin-top: 54px; }
  .constel > li:nth-child(3) { margin-top: 108px; }
}
.constel > li {
  position: relative;
  padding-top: 34px;
  border-top: 1px solid var(--hair);
  transition: transform 0.35s ease;
}
@media (hover: hover) {
}
.constel .ico { margin-bottom: 22px; }
.constel > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -5px;
  width: 9px;
  height: 9px;
  background: var(--gold);
  rotate: 45deg;
}
/* .constel p 가 뒤에 오면서 이 규칙을 덮고 있었다. 부모를 붙여 되찾는다. */
.constel .constel__en {
  margin-top: 0;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.constel h3 { margin-top: 14px; font-size: var(--t-title); }
.constel p { margin-top: 16px; color: var(--dim); font-size: var(--t-small); }

/* ── mark field: the brand symbol plotted among its words ───────── */

.plot { display: grid; gap: 48px; align-items: center; }
@media (min-width: 900px) {
  .plot { grid-template-columns: 0.8fr 1fr; gap: 76px; }
}
.plot__mark { width: 100%; max-width: 300px; opacity: 0.55; }
.plot__tags { margin-top: 34px; display: flex; flex-wrap: wrap; gap: 10px; }
.tag {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 8px 15px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--dim);
}
.tag > .ph { font-size: 15px; color: var(--gold); }
.tag--dot::before { content: ""; width: 5px; height: 5px; background: var(--gold); rotate: 45deg; }
.plot__body { color: var(--dim); }
.plot__close { margin-top: 28px; font-weight: 600; color: var(--ink); }

/* ── programs: chart entries, not equal cards ───────────────────── */

.programs { margin-top: 64px; border-top: 1px solid var(--hair); }
.programs > li {
  display: grid;
  gap: 20px 44px;
  padding-top: 42px;
  padding-bottom: 42px;
  border-bottom: 1px solid var(--hair-faint);
  transition: background-color 0.35s ease;
}
@media (hover: hover) {
  .programs > li:hover { background: rgba(200, 154, 74, 0.035); }
}
@media (min-width: 900px) {
  .programs > li { grid-template-columns: 11rem 1fr 17rem; align-items: start; }
}
.programs__key {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 14px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
@media (min-width: 900px) {
  .programs__key { flex-direction: column; align-items: flex-start; gap: 18px; }
}
.programs h3 { font-size: var(--t-title); }
.programs__desc { margin-top: 14px; color: var(--dim); font-size: var(--t-small); }
.programs .link { margin-top: 20px; }

.terms { display: grid; gap: 11px; }
.terms li { position: relative; padding-left: 19px; color: var(--dim); font-size: var(--t-small); }
.terms li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 5px;
  height: 5px;
  background: var(--hair);
  rotate: 45deg;
}

/* ── catalogue: numbered chart entries ──────────────────────────── */

.cat { margin-top: 64px; display: grid; gap: 1px; background: var(--hair-faint); border: 1px solid var(--hair-faint); }
@media (min-width: 760px) {
  .cat { grid-template-columns: repeat(2, 1fr); }
}
/* 홀수 개일 때 마지막 칸이 비지 않도록 가로로 편다. 빈 칸은 계획 실패로 읽힌다. */
@media (min-width: 760px) {
  .cat > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

.cat > li {
  position: relative;
  background: var(--void);
  padding: 34px 30px 38px;
  transition: background-color 0.35s ease, transform 0.35s ease, box-shadow 0.35s ease;
}
.band--field .cat > li { background: var(--field); }
.band--deep .cat > li { background: var(--deep); }
/* 위쪽 가장자리에 골드 실선 한 줄. 호버하면 그 줄이 살아난다. */
.cat > li::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, var(--gold), transparent 62%);
  opacity: 0;
  transition: opacity 0.35s ease;
}
@media (hover: hover) {
  .cat > li:hover::after { opacity: 1; }
}
.cat__head { display: flex; align-items: center; gap: 16px; }
.cat__no { font-family: var(--mono); font-size: var(--t-label); letter-spacing: 0.14em; color: var(--gold); }
.cat h3 { margin-top: 20px; font-size: var(--t-title); }
.cat__sub { margin-top: 9px; color: var(--gold); font-size: var(--t-small); }
.cat__body { margin-top: 16px; color: var(--dim); font-size: var(--t-small); }
.cat .terms { margin-top: 18px; }

/* ── roster: 소속 크리에이터 프로필 ─────────────────────────────── */

.roster { margin-top: 64px; display: grid; gap: 44px 32px; }
@media (min-width: 640px) { .roster { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 960px) { .roster { grid-template-columns: repeat(3, 1fr); } }

.person__shot {
  aspect-ratio: 3 / 4;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 24px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  text-align: center;
  /* 사진이 도착하기 전까지의 자리. 임의의 스톡 사진으로 채우지 않는다. */
  background: repeating-linear-gradient(-45deg, rgba(200, 154, 74, 0.05) 0 2px, transparent 2px 11px);
}
.person__shot img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius); }
@media (hover: hover) {
  .person:hover .person__shot { border-color: var(--hair); }
}
.person__slot {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.person__spec { color: var(--dim); font-size: var(--t-small); line-height: 1.6; }

.person__name { margin-top: 22px; font-size: var(--t-title); }
.person__tag { margin-top: 8px; color: var(--dim); font-size: var(--t-small); }
.person .link { margin-top: 16px; }

/* ── course: a plotted route ────────────────────────────────────── */

.course { margin-top: 64px; display: grid; border-top: 1px solid var(--hair); }
@media (min-width: 900px) {
  .course { grid-template-columns: repeat(4, 1fr); }
}
.course > li { position: relative; padding-top: 38px; padding-right: 30px; padding-bottom: 20px; }
.course > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: -4px;
  width: 7px;
  height: 7px;
  background: var(--gold);
  rotate: 45deg;
}
@media (max-width: 899px) {
  .course { border-top: 0; }
  .course > li { padding-left: 30px; padding-right: 0; border-left: 1px solid var(--hair); }
  .course > li::before { left: -4px; top: 36px; }
}
.course .course__step {
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.14em;
  color: var(--gold);
}
/* 배분율처럼 숫자 자체가 내용일 때는 크게 세운다. */
.course .course__step--big {
  font-size: clamp(2.8rem, 5.5vw, 4rem);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--gold);
}
.course > li:has(.course__step--big) h3 { margin-top: 18px; }
.course__head { display: flex; align-items: center; gap: 13px; }
.course h3 { margin-top: 14px; font-size: var(--t-title); }
.course p { margin-top: 12px; color: var(--dim); font-size: var(--t-small); }

/* ── closing ────────────────────────────────────────────────────── */

.closing { text-align: center; }
.closing blockquote {
  max-width: 720px;
  margin-inline: auto;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  font-weight: 600;
  line-height: 1.48;
  letter-spacing: -0.03em;
}
.closing .btn { margin-top: 46px; }

.partner {
  padding-top: 46px;
  padding-bottom: 46px;
  border-top: 1px solid var(--hair-faint);
  background: var(--field);
}
.partner__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.partner p { max-width: 30em; color: var(--dim); font-size: var(--t-small); }

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

.faq { margin-top: 64px; border-top: 1px solid var(--hair); }
.faq > li { padding-top: 32px; padding-bottom: 32px; border-bottom: 1px solid var(--hair-faint); }
@media (min-width: 900px) {
  .faq > li { display: grid; grid-template-columns: 1fr 1.35fr; gap: 44px; }
}
.faq__q { display: flex; align-items: flex-start; gap: 14px; }
.faq h3 { font-size: var(--t-title); }
.faq p { color: var(--dim); font-size: var(--t-small); }
@media (max-width: 899px) {
  .faq p { margin-top: 14px; }
}

/* ── page head (sub pages) ──────────────────────────────────────── */

.pagehead { padding-top: 64px; padding-bottom: 64px; border-bottom: 1px solid var(--hair-faint); }
@media (min-width: 900px) {
  .pagehead { padding-top: 140px; padding-bottom: 140px; }
}
.pagehead h1 {
  margin-top: 30px;
  font-size: clamp(2.1rem, 3.9vw, 3.2rem);
  letter-spacing: -0.03em;
  line-height: 1.28;
  max-width: 16em;
}
.pagehead p { margin-top: 24px; max-width: 32em; color: var(--dim); }

/* ── contact: three tabs on :target, no script, no :has() ───────
   DOM 순서는 agent, partner, creator, 탭바. 화면 순서는 order 가 되돌린다.
   형제 선택자만 쓰므로 :has() 를 지원하지 않는 브라우저에서도 그대로 동작한다. */

.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-partner { order: 3; }

.tabs__bar a {
  padding: 18px 24px 15px;
  border-bottom: 2px solid transparent;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--dim);
  text-decoration: none;
  transition: color 0.3s ease, border-color 0.3s ease;
}
.tabs__bar a:hover { color: var(--ink); }

.tabs__panel { display: none; padding-top: 64px; }
/* 해시가 없을 때의 기본 탭 */
#panel-creator { display: block; }
.tabs__panel:target { display: block; }
/* 다른 탭이 지정되면 기본 탭을 접는다. 아이디 두 개라 위 규칙을 이긴다. */
#panel-agent: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-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-partner:target ~ .tabs__bar a[href="#panel-partner"] {
  color: var(--gold);
  border-bottom-color: var(--gold);
}

/* ── form ───────────────────────────────────────────────────────── */

.form { display: grid; gap: 28px; max-width: 46em; }
.row { display: grid; gap: 28px; }
@media (min-width: 700px) {
  .row { grid-template-columns: repeat(2, 1fr); }
}

.field { display: grid; gap: 9px; }
.field > label { font-size: var(--t-small); font-weight: 600; color: var(--ink); }
.req { color: var(--gold); font-family: var(--mono); }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  background: var(--void);
  color: var(--ink);
  font-family: inherit;
  font-size: var(--t-small);
  line-height: 1.6;
}
.band--field .field input, .band--field .field textarea { background: var(--deep); }
.field textarea { min-height: 152px; resize: vertical; }
/* 자리표시자는 라벨을 대신하지 않는다. 힌트만 담고 대비를 지킨다. */
.field ::placeholder { color: var(--dim); opacity: 1; }
.field input:focus, .field textarea:focus {
  outline: 2px solid var(--gold-lit);
  outline-offset: 1px;
  border-color: transparent;
}
.hint { font-size: var(--t-label); color: var(--dim); }

.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks label {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 15px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  font-size: var(--t-small);
  color: var(--dim);
  cursor: pointer;
}
.checks input { accent-color: var(--gold); width: 15px; height: 15px; }
.checks label:has(input:checked) { border-color: var(--hair); color: var(--ink); }

.consent {
  padding: 24px;
  border: 1px solid var(--hair-faint);
  border-radius: var(--radius);
  color: var(--dim);
  font-size: var(--t-small);
}
.consent__agree { display: flex; align-items: center; gap: 11px; margin-top: 18px; color: var(--ink); cursor: pointer; }
.consent__agree input { accent-color: var(--gold); width: 16px; height: 16px; }

.form__note { padding-top: 18px; border-top: 1px solid var(--hair-faint); color: var(--dim); font-size: var(--t-label); }

/* ── footer ─────────────────────────────────────────────────────── */

.foot { padding-top: 64px; padding-bottom: 56px; border-top: 1px solid var(--hair-faint); background: var(--deep); }
.foot__top { display: grid; gap: 44px; }
@media (min-width: 900px) {
  .foot__top { grid-template-columns: 1fr 1.15fr; }
}
.foot__logo { width: auto; height: 84px; opacity: 0.9; }

.biz { display: grid; gap: 13px; font-size: var(--t-small); }
.biz > div { display: flex; flex-wrap: wrap; gap: 3px 18px; }
.biz dt {
  flex: 0 0 auto;
  min-width: 8rem;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.1em;
  color: var(--dim);
}
.biz dd { color: var(--ink); }
.biz a { color: var(--gold); text-decoration: none; }
.biz a:hover { color: var(--gold-lit); }

.foot__base {
  margin-top: 48px;
  padding-top: 26px;
  border-top: 1px solid var(--hair-faint);
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  align-items: center;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.04em;
  color: var(--dim);
}
.foot__base .tagline { color: var(--gold); }

/* ── one authored entrance, scroll-driven, CSS only ─────────────── */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .band .lead,
    .constel > li,
    .programs > li,
    .cat > li,
    .course > li,
    .faq > li,
    .manifesto,
    .plot,
    .closing {
      animation: rise linear both;
      animation-timeline: view();
      animation-range: entry 4% entry 55%;
    }
  }
}

@keyframes rise {
  from { opacity: 0; translate: 0 20px; }
  to { opacity: 1; translate: 0 0; }
}

/* ── depth: 마우스 방향으로 기우는 판 ───────────────────────────
   각도는 script.js 가 --rx / --ry 로 넣어준다. 스크립트가 없으면 0도, 즉 평면이다. */

.cat > li,
.constel > li,
.person,
.programs > li {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  transform-style: preserve-3d;
  transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.3, 1), box-shadow 0.4s ease;
}

/* 기운 판 위로 커서를 따라 빛이 지나간다. */
.cat > li::before,
.person__shot::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
  background: radial-gradient(
    260px circle at var(--mx, 50%) var(--my, 50%),
    rgba(200, 154, 74, 0.13),
    transparent 68%
  );
}
.person__shot { position: relative; overflow: hidden; }

@media (hover: hover) {
  .cat > li:hover .ico,
  .constel > li:hover .ico,
  .programs > li:hover .ico { color: var(--gold-lit); scale: 1.08; }
  .cat > li:hover::before,
  .person:hover .person__shot::before { opacity: 1; }
  .cat > li:hover {
    box-shadow:
      0 24px 50px rgba(2, 5, 12, 0.6),
      inset 0 1px 0 rgba(238, 241, 247, 0.06);
  }
  .person:hover .person__shot { border-color: var(--gold); }
}

/* 자석 버튼. 끌림 값은 script.js 가 넣는다. */
.btn--solid {
  transform: translate(var(--pull-x, 0), var(--pull-y, 0));
  transition:
    transform 0.35s cubic-bezier(0.2, 0.8, 0.3, 1),
    background-color 0.25s ease;
}
.btn--solid:active { transform: translate(var(--pull-x, 0), var(--pull-y, 0)) scale(0.97); }

/* ── dock: 스크롤하면 나타나는 문의 버튼 ────────────────────── */

.dock {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 40;
  opacity: 0;
  translate: 0 16px;
  pointer-events: none;
  transition: opacity 0.4s ease, translate 0.4s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.dock.is-on { opacity: 1; translate: 0 0; pointer-events: auto; }

.dock a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: var(--radius);
  border: 1px solid var(--hair);
  background: rgba(12, 20, 38, 0.92);
  backdrop-filter: blur(12px);
  color: var(--ink);
  font-size: var(--t-small);
  font-weight: 600;
  text-decoration: none;
  transition: border-color 0.25s ease, color 0.25s ease, background-color 0.25s ease;
}
.dock a:hover {
  border-color: var(--gold);
  color: var(--gold-lit);
  background: rgba(18, 28, 50, 0.95);
}
.dock .ph { font-size: 18px; color: var(--gold); }

@media (min-width: 900px) { .dock { right: 32px; bottom: 32px; } }

@media (prefers-reduced-motion: reduce) {
  .dock { transition: none; }
}

/* ── cursor ─────────────────────────────────────────────────────
   세 겹이 서로 다른 속도로 따라온다. 그 시차가 무게감을 만든다.
   위치와 늘어남은 script.js 가 translate / rotate / scale 로 넣고,
   회전은 안쪽 겹이 CSS 로 맡는다. 두 변형을 한 요소에 걸면 서로 덮는다.
   커서 숨김은 has-cursor 아래에만 둔다. 스크립트가 실패하면 기본 커서가 그대로 남는다. */

.has-cursor,
.has-cursor body,
.has-cursor a,
.has-cursor button,
.has-cursor label,
.has-cursor input,
.has-cursor textarea,
.has-cursor summary { cursor: none; }

.cursor-aura,
.cursor-reticle,
.cursor-core {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 90;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.cursor-ready .cursor-aura,
.cursor-ready .cursor-reticle,
.cursor-ready .cursor-core { opacity: 1; }
.cursor-off .cursor-aura,
.cursor-off .cursor-reticle,
.cursor-off .cursor-core { opacity: 0; }

/* 가장 느린 겹. 지나간 자리에 온기만 남긴다. */
.cursor-aura {
  width: 240px;
  height: 240px;
  margin: -120px 0 0 -120px;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgba(200, 154, 74, 0.11), rgba(200, 154, 74, 0.03) 42%, transparent 70%);
  transition: opacity 0.35s ease, scale 0.6s cubic-bezier(0.2, 0.8, 0.3, 1);
}
.cursor-hot .cursor-aura { scale: 1.3; }

/* 바깥 겹. 속도에 따라 늘어난다. 크기 변화도 여기서 맡는다. */
.cursor-reticle {
  width: 46px;
  height: 46px;
  margin: -23px 0 0 -23px;
  transition:
    width 0.45s cubic-bezier(0.2, 0.8, 0.3, 1),
    height 0.45s cubic-bezier(0.2, 0.8, 0.3, 1),
    margin 0.45s cubic-bezier(0.2, 0.8, 0.3, 1),
    opacity 0.35s ease;
}

/* 안쪽 겹. 브랜드의 나침반 마크 그 자체다. 인쇄용 벡터 원본에서 뽑았다.
   CSS mask 를 쓰면 색을 자유롭게 바꿀 수 있지만, file:// 로 열었을 때 브라우저가 막는다.
   사장님이 파일을 직접 열어 보시므로 색을 파일에 구워 넣고 배경 이미지로 쓴다. */
.cursor-reticle__arc {
  position: absolute;
  inset: 0;
  background: url("images/compass.png") center / contain no-repeat;
  opacity: 0.8;
  animation: arc-spin 24s linear infinite;
  transition: opacity 0.45s ease;
}
@keyframes arc-spin { to { rotate: 360deg; } }

/* 누를 수 있는 것 위에서는 나침반이 커지고 또렷해진다. */
.cursor-hot .cursor-reticle {
  width: 74px;
  height: 74px;
  margin: -37px 0 0 -37px;
}
.cursor-hot .cursor-reticle__arc {
  background-image: url("images/compass-lit.png");
  opacity: 1;
  animation-duration: 60s;
}
.cursor-down .cursor-reticle {
  width: 34px;
  height: 34px;
  margin: -17px 0 0 -17px;
}

/* 글을 쓸 수 있는 자리에서는 세로 막대가 된다. */
.cursor-text .cursor-reticle {
  width: 2px;
  height: 30px;
  margin: -15px 0 0 -1px;
}
.cursor-text .cursor-reticle__arc {
  border-radius: 1px;
  background: var(--gold-lit);
  opacity: 1;
  animation: none;
}
.cursor-text .cursor-core { scale: 0; }
.cursor-text .cursor-aura { scale: 0.7; }

/* 즉시 따라오는 작은 마름모. 로고의 별과 같은 형태다. */
.cursor-core {
  width: 5px;
  height: 5px;
  margin: -2.5px 0 0 -2.5px;
  background: var(--gold-lit);
  rotate: 45deg;
  transition: scale 0.3s cubic-bezier(0.2, 0.8, 0.3, 1), opacity 0.35s ease;
}
.cursor-hot .cursor-core { scale: 0.45; }

@media (hover: none), (pointer: coarse) {
  .cursor-aura, .cursor-reticle, .cursor-core { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .cursor-reticle__arc { animation: none; }
}

/* ── orbits: 히어로 뒤의 궤도 ───────────────────────────────────
   로고의 궤적을 화면 크기로 키운 것. 세 겹이 각자 다른 속도로 돈다. */
.orbits {
  position: absolute;
  z-index: -1;
  right: -2%;
  top: 49%;
  width: min(52vw, 700px);
  aspect-ratio: 1;
  translate: 0 -50%;
  pointer-events: none;
}
.orbits span {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 1px solid rgba(200, 154, 74, 0.16);
}
.orbits span:nth-child(1) { scale: 1 0.34; rotate: -18deg; animation: orbit-a 96s linear infinite; }
.orbits span:nth-child(2) { scale: 0.78 0.26; rotate: 12deg; border-color: rgba(200, 154, 74, 0.1); animation: orbit-b 134s linear infinite; }
.orbits span:nth-child(3) { scale: 1.18 0.44; rotate: -34deg; border-color: rgba(148, 160, 184, 0.09); animation: orbit-a 170s linear infinite reverse; }

@keyframes orbit-a { to { rotate: 342deg; } }
@keyframes orbit-b { to { rotate: 372deg; } }

@media (max-width: 899px) {
  .orbits { right: -22%; top: auto; bottom: 2%; width: 96vw; translate: 0; opacity: 0.55; }
}

/* ── 마무리 손질 ────────────────────────────────────────────────── */

/* 판 위쪽 안쪽 하이라이트. 두께가 생긴다. */
.cat > li { box-shadow: inset 0 1px 0 rgba(238, 241, 247, 0.045); }
.badges { box-shadow: inset 0 1px 0 rgba(238, 241, 247, 0.035); }

/* 섹션 표제가 들어올 때 흐림에서 또렷해진다. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 섹션 마크가 스크롤에 따라 떠오른다. */
    .plot__mark {
      animation: floaty linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes floaty {
  from { translate: 0 44px; }
  to { translate: 0 -44px; }
}

/* ── sub pages: 머리에도 같은 빛과 로고 ─────────────────────────── */

.pagehead {
  position: relative;
  overflow: hidden;
}
.pagehead::after {
  content: "";
  position: absolute;
  z-index: -2;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(40% 60% at 84% 50%, rgba(200, 154, 74, 0.14), transparent 68%),
    radial-gradient(120% 110% at 50% 45%, transparent 54%, rgba(2, 4, 10, 0.55) 100%);
}
.pagehead__mark {
  position: absolute;
  z-index: -1;
  right: 4%;
  top: 50%;
  width: min(28vw, 340px);
  translate: 0 -50%;
  opacity: 0.5;
  filter: drop-shadow(0 26px 60px rgba(2, 4, 10, 0.8));
}
.pagehead .shell { position: relative; }

@media (max-width: 899px) {
  .pagehead__mark { right: -14%; width: 66vw; opacity: 0.16; }
}

/* ── faq: 물음표 아이콘 대신 표식 하나 ──────────────────────────── */

.faq > li { position: relative; padding-left: 26px; }
.faq > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2.6em;
  width: 6px;
  height: 6px;
  background: var(--gold);
  rotate: 45deg;
}
@media (min-width: 900px) {
  .faq > li::before { top: 3.1em; }
}

/* ── form: 손으로 채우는 자리를 격에 맞게 ───────────────────────── */

.form { gap: 32px; }
.field > label { letter-spacing: -0.005em; }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field input[type="url"],
.field textarea {
  padding: 16px 18px;
  font-size: var(--t-small);
  transition: border-color 0.3s ease, background-color 0.3s ease;
}
.field input:hover,
.field textarea:hover { border-color: var(--hair); }
.field input:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--gold);
  background: rgba(200, 154, 74, 0.04);
}
.field textarea { min-height: 168px; }

fieldset.field { border: 0; padding: 0; margin: 0; }
fieldset.field legend {
  padding: 0;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--ink);
}

.checks label { padding: 12px 17px; transition: border-color 0.3s ease, color 0.3s ease; }
.checks label:hover { border-color: var(--hair); color: var(--ink); }

.consent { padding: 28px; line-height: 1.75; }
.consent__agree { margin-top: 22px; font-weight: 600; }

.form button[type="submit"] { padding: 17px 40px; }

/* ── roster: 비어 있는 자리도 의도로 보이게 ─────────────────────── */

.person__shot { border-color: var(--hair-faint); }
.person__slot { letter-spacing: 0.22em; }
.person__name { color: var(--dim); font-weight: 500; }
.person__tag { color: rgba(148, 160, 184, 0.65); }

/* ── pillars: 수익 시스템의 원칙 ────────────────────────────────
   같은 페이지의 지원 항목이 이미 타일 격자(.cat)를 쓰고 있다.
   한 페이지에서 같은 레이아웃을 두 번 쓰면 읽는 사람이 두 섹션을 구분하지 못한다.
   그래서 여기는 타일 없이 눈금선으로만 세운다. */

.pillars {
  margin-top: 76px;
  display: grid;
  gap: 56px 72px;
}
@media (min-width: 760px) {
  .pillars { grid-template-columns: repeat(2, 1fr); }
}

.pillars > li { padding-top: 32px; border-top: 1px solid var(--hair); }
.pillars__key {
  display: flex;
  align-items: center;
  gap: 16px;
  font-family: var(--mono);
  font-size: var(--t-label);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--gold);
}
.pillars h3 { margin-top: 22px; font-size: var(--t-title); }
.pillars__sub { margin-top: 10px; color: var(--gold); font-size: var(--t-small); }
.pillars p:last-child { margin-top: 16px; color: var(--dim); font-size: var(--t-small); }

@media (hover: hover) {
  .pillars > li:hover .ico { color: var(--gold-lit); scale: 1.08; }
}
.pillars .ico { transition: color 0.45s ease, scale 0.45s cubic-bezier(0.2, 0.8, 0.3, 1); }

/* ── inquiry: 폼 옆에 준비물을 붙인다 ───────────────────────────
   빈 칸만 잔뜩 있는 폼은 부담스럽다. 무엇을 적어야 하는지 옆에 두면 이탈이 준다. */

.inquiry { display: grid; gap: 56px; }
@media (min-width: 1040px) {
  .inquiry { grid-template-columns: 1fr 20rem; gap: 80px; align-items: start; }
  .inquiry__aside { position: sticky; top: 104px; }
}

.inquiry__lead { max-width: 40em; margin-bottom: 48px; color: var(--dim); }

.inquiry__aside {
  padding-top: 30px;
  border-top: 1px solid var(--hair);
}
.inquiry__aside h3 {
  font-family: var(--mono);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--gold);
}
.inquiry__aside ul { margin-top: 22px; display: grid; gap: 14px; }
.inquiry__aside li {
  position: relative;
  padding-left: 19px;
  color: var(--dim);
  font-size: var(--t-small);
}
.inquiry__aside li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  background: var(--hair);
  rotate: 45deg;
}
.inquiry__aside p {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--hair-faint);
  color: var(--dim);
  font-size: var(--t-small);
}

.lead-more { margin-top: 56px; }

/* 탭바는 페이지 머리 바로 아래 붙는 조작 요소다. 섹션 여백을 그대로 주면 붕 뜬다. */
.band--tabs { padding-top: 64px; }
@media (min-width: 900px) { .band--tabs { padding-top: 88px; } }

/* ── rose: 나침반을 배경 재료로 ─────────────────────────────────
   로고를 작게 한 번 보여주고 마는 대신, 화면 크기로 키워 섹션의 바탕으로 쓴다.
   인쇄용 벡터에서 뽑은 마크라 크게 키워도 가장자리가 무너지지 않는다. */

.rose { position: relative; isolation: isolate; overflow: hidden; }
.rose::after {
  content: "";
  position: absolute;
  z-index: -1;
  pointer-events: none;
  background: url("images/compass.png") center / contain no-repeat;
  opacity: 0.05;
  animation: arc-spin 220s linear infinite;
}
/* 왼쪽 아래에서 화면 밖으로 걸치게 둔다. 가운데 두면 배경이 아니라 그림이 된다. */
.rose--left::after {
  width: min(78vw, 900px);
  aspect-ratio: 1;
  left: -22%;
  bottom: -34%;
}
.rose--right::after {
  width: min(66vw, 760px);
  aspect-ratio: 1;
  right: -18%;
  top: -26%;
}
@media (prefers-reduced-motion: reduce) { .rose::after { animation: none; } }

/* ── band--split: 제목을 옆에 세운다 ────────────────────────────
   모든 섹션이 "제목 위, 내용 아래" 로만 흐르면 발표 자료처럼 읽힌다.
   한 섹션은 제목을 왼쪽에 고정해 두고 내용만 지나가게 한다. */

@media (min-width: 1000px) {
  .split-lead { display: grid; grid-template-columns: 22rem 1fr; gap: 80px; align-items: start; }
  .split-lead > .lead { position: sticky; top: 108px; max-width: none; }
  .split-lead > .lead .lead__title { margin-top: 24px; }
  .split-lead > .cat { margin-top: 0; }
}

/* 스팸 봇만 채우는 칸. 사람 눈에도 보조기기에도 노출되지 않아야 한다. */
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── done: 접수 완료 화면 ────────────────────────────────────────
   폼을 보낸 직후에 보는 유일한 화면이다. 여기서 끊기면 불안해진다.
   무엇이 진행되는지와 다른 연락 방법을 같이 둔다. */

.done { min-height: 72vh; display: flex; align-items: center; }
.done__title {
  margin-top: 8px;
  font-size: clamp(1.9rem, 3.4vw, 2.75rem);
  letter-spacing: -0.03em;
}
.done__body {
  margin: 26px auto 0;
  max-width: 30em;
  color: var(--dim);
}
.done__next {
  margin: 44px auto 48px;
  display: grid;
  gap: 16px;
  max-width: 34em;
  padding-top: 30px;
  border-top: 1px solid var(--hair-faint);
  text-align: left;
}
.done__next li {
  display: flex;
  align-items: center;
  gap: 14px;
  color: var(--dim);
  font-size: var(--t-small);
}

/* ── 카카오톡 ───────────────────────────────────────────────────
   폼을 쓰기 부담스러운 방문자에게 가장 문턱이 낮은 경로다.
   다만 주 행동(상담 신청)을 밀어내지 않도록 골드는 쓰지 않는다. */

.dock { display: flex; gap: 10px; }
.dock__kakao .ph { color: var(--ink); }
.dock__kakao:hover .ph { color: var(--gold-lit); }

.inquiry__kakao {
  margin-top: 22px;
  padding-top: 20px;
  border-top: 1px solid var(--hair-faint);
  color: var(--dim);
  font-size: var(--t-small);
}

@media (max-width: 639px) {
  .dock { right: 16px; left: 16px; justify-content: center; }
  .dock a { flex: 1 1 auto; justify-content: center; }
}