/* =========================================================================
   layout.css — 2단 sticky 셸 / 섹션 리듬 / 반응형
   패턴 G-1 (brittanychiang.com 검증) — 좌측 고정, 우측만 스크롤.
   스크롤 어디에서든 이름과 연락 경로가 보이는 것이 목적이다.
   ========================================================================= */

/* 3:7. %가 아니라 fr을 쓰는 이유 — %는 gap을 빼기 전 폭을 기준으로 계산해서
   두 번째 트랙이 gap만큼 밀려 비율이 어긋난다. fr은 gap을 제외하고 나눈다. */
.shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--gutter);
  display: grid;
  grid-template-columns: minmax(0, 3fr) minmax(0, 7fr);
  gap: 56px;
}

/* --- 1. 좌측 고정 레일 --------------------------------------------------- */
.rail {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  max-height: 100vh;
  padding: 96px 0 64px;
}
.rail-top {
  min-width: 0;
}

.name {
  font-size: clamp(38px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.name .en {
  display: block;
  margin-top: 6px;
  font-family: var(--mono);
  font-size: 13px;
  font-weight: 400;
  letter-spacing: 0.14em;
  color: var(--ink-dim);
}
.role {
  margin-top: 18px;
  font-size: 19px;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--ink);
}
.pitch {
  margin-top: 14px;
  max-width: 30ch;
  font-size: 15px;
  line-height: 1.8;
  color: var(--ink-2);
}

/* 섹션 네비 — 현재 위치를 막대 길이로 표시한다 */
.nav {
  margin-top: 44px;
  display: none;
}
.nav a {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 9px 0;
  border: 0;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  transition: color var(--dur) var(--ease);
}
.nav a .tick {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition:
    width var(--dur) var(--ease),
    background-color var(--dur) var(--ease);
}
.nav a:hover,
.nav a.on {
  color: var(--ink);
}
.nav a.on .tick {
  width: 58px;
  background: var(--accent);
}

.rail-bottom {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-top: 32px;
}
.social {
  display: flex;
  gap: 16px;
}
.social a {
  border: 0;
  color: var(--ink-dim);
  transition: color var(--dur) var(--ease);
}
.social a:hover {
  color: var(--accent);
}
.social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

.theme-btn {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border: 1px solid var(--line);
  border-radius: 5px;
  color: var(--ink-dim);
  transition:
    background-color var(--dur) var(--ease),
    color var(--dur) var(--ease);
}
.theme-btn:hover {
  background: var(--panel-2);
  color: var(--ink);
}
.theme-btn svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
}

/* --- 2. 우측 스크롤 ------------------------------------------------------ */
.flow {
  padding: 96px 0 120px;
  min-width: 0;
}

.sec {
  margin-bottom: 104px;
  scroll-margin-top: 80px;
}
.sec:last-child {
  margin-bottom: 0;
}

.sec-head {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 28px;
  font-family: var(--mono);
  font-size: 11.5px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sec-head .n {
  color: var(--accent);
  font-weight: 500;
}
.sec-head .rule {
  flex: 1 1 auto;
  height: 1px;
  background: var(--line);
  transform: translateY(-3px);
}

.sec h2 {
  font-size: clamp(22px, 2.4vw, 28px);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.4;
}
.sec p {
  font-size: 16px;
  line-height: 1.9;
  color: var(--ink-2);
}
.sec p + p {
  margin-top: 16px;
}

/* 모바일에서만 보이는 상단 바 */
.topbar {
  display: none;
}

/* --- 3. 등장 ------------------------------------------------------------- */
.js .rv {
  opacity: 0;
  transform: translateY(16px);
  transition:
    opacity 520ms var(--ease),
    transform 520ms var(--ease);
  transition-delay: var(--d, 0ms);
}
.js .rv.in {
  opacity: 1;
  transform: none;
}

/* --- 4. 반응형 -----------------------------------------------------------
   1024px 아래에서는 레일 고정을 풀고 한 줄로 세운다.                     */
@media (min-width: 1025px) {
  .nav {
    display: block;
  }
}

@media (max-width: 1024px) {
  :root {
    --gutter: 32px;
  }
  .shell {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .rail {
    position: static;
    max-height: none;
    padding: 72px 0 0;
    display: block;
  }
  .rail-bottom {
    padding-top: 28px;
  }
  .flow {
    padding: 56px 0 96px;
  }
  .sec {
    margin-bottom: 80px;
  }
}

@media (max-width: 640px) {
  :root {
    --gutter: 20px;
  }
  body {
    font-size: 16px;
  }
  .rail {
    padding: 56px 0 0;
  }
  .name {
    font-size: 34px;
  }
  .role {
    font-size: 17px;
  }
  .pitch {
    max-width: none;
  }
  .sec {
    margin-bottom: 64px;
  }
  .flow {
    padding: 44px 0 72px;
  }
}