/* ============================================
   VENTRILOC-INSPIRED DESIGN SYSTEM
   Editorial · 따뜻한 종이 · 무채색 + 단일 앰버 강조
   ============================================ */

/* RESET */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* DESIGN TOKENS */
:root {
  /* ---- Ink (텍스트) ---- */
  --graphite:   #202020;  /* 제목·본문 — 타이포그래피 앵커 */
  --steel:      #4d4d4d;  /* 보조 본문 */
  --slate:      #828282;  /* 캡션·비활성 */

  /* ---- Surface (서피스) — paper↔Ash 교대로 섹션을 구분한다.
         카드는 흰색 하나뿐이며 배경 위에 떠 보이는 대비를 만든다. ---- */
  --paper:      #f7f6f3;  /* 페이지·섹션 배경 — 따뜻한 오프화이트. 지배적인 면 */
  --canvas:     #ffffff;  /* 카드 전용 — paper 위에 뜬다 */
  --ash:        #efefef;  /* 교대 밴드, 네비 pill */
  --fog:        #f5f5f5;  /* 중첩 서피스 — 태그 배경 */
  --ivory:      #ebe6dd;  /* 피처 블록 — 종이 질감 */
  --mist:       #e8e8e8;  /* 헤어라인 */

  /* ---- Accent — 페이지의 5% 이내로 제한 ---- */
  --ember:      #ff682c;  /* 밑줄·링크·포인트. CTA 배경으로 승격 금지 */
  --brass:      #816729;  /* 보조 강조 — eyebrow 캡션·태그 텍스트 */

  --on-dark:    #ffffff;  /* Graphite 배경 위 텍스트 */

  /* ---- Radius — 시그니처는 피처 카드의 비대칭 하나다.
         버튼은 실제 Ventriloc 사이트 기준으로 pill (스펙 문구의 0px은 실제와 다름). ---- */
  --r-btn:    200px;        /* 버튼 — pill */
  --r-card:     8px;        /* 일반 카드 */
  --r-feature:  6px 0 0 0;  /* 피처 카드 — 시그니처 비대칭 */
  --r-tag:     20px;        /* 태그 */
  --r-pill:   200px;        /* 네비 pill */

  /* ---- Spacing (4px base) ---- */
  --sp-8:     8px;
  --sp-12:   12px;
  --sp-16:   16px;
  --sp-20:   20px;   /* element gap */
  --sp-36:   36px;
  --sp-40:   40px;   /* card padding */
  --sp-60:   60px;
  --sp-80:   80px;   /* section gap */
  --sp-140: 140px;

  /* ---- Layout ---- */
  --page-max: 1200px;
  /* 섹션 상하 여백. 스펙의 80px보다 키웠다 —
     섹션 수가 적은 포트폴리오에서는 더 넓은 호흡이 필요하다. */
  --sp-section: 100px;

  /* ---- Type ---- */
  --font: 'Pretendard', 'Inter', system-ui, -apple-system, sans-serif;
  --tracking-display: -0.02em;  /* 디스플레이 전역 트래킹 */

  /* 로고 워드마크 전용 필기체. 순수 라틴 문구(Jayson.B)에만 쓴다 —
     본문처럼 한·영이 섞이는 곳에는 절대 쓰지 않는다(baseline이 어긋난다). */
  --font-script: 'Sacramento', cursive;

  --ease: cubic-bezier(0.4, 0, 0.2, 1);

  /* 스크롤 등장 전환 시간 */
  --reveal-dur: 1.3s;
}

/* BASE */
html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font);
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--graphite);
  background: var(--paper);
  font-feature-settings: "ss01";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  /* hidden이면 CSS 스펙상 overflow-y가 auto로 밀려 body가 별도 스크롤 컨테이너가 되고,
     scrollIntoView({behavior:'smooth'})가 어느 박스를 스크롤할지 갈피를 못 잡아 멈춰버린다.
     clip은 그 부수 규칙에서 예외라 가로 오버플로만 막고 스크롤 컨테이너를 만들지 않는다. */
  overflow-x: clip;
  /* 한글은 어절 단위로 끊는다 — 기본값은 글자 중간에서 잘린다 */
  word-break: keep-all;
  overflow-wrap: break-word;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }

/* LAYOUT */
.container {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-20);
}

/* ============================================
   SCROLL REVEAL
   ============================================ */
/* 기본 — Fade Up. 읽기 흐름과 같은 방향으로 올라온다. */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--reveal-dur) var(--ease),
              transform var(--reveal-dur) var(--ease);
}
.reveal.visible { opacity: 1; transform: none; }

/* 섹션 성격별 변형 3종.
   전환 시간과 이징은 기본과 공유해 리듬을 통일한다.
   이동 폭을 작게 잡은 이유 — 크게 움직이면 값싸 보인다. */

/* 큰 타이포는 움직이면 산만하다 → 이동 없이 밝기만 */
.reveal-fade  { transform: none; }

/* 카드는 "떠오르는" 면이므로 살짝 확대되며 자리를 잡는다 */
.reveal-scale { transform: scale(0.98); }

/* 타임라인 — 시간 축의 진행 방향을 암시한다 */
.reveal-slide { transform: translateX(-16px); }

.reveal-fade.visible,
.reveal-scale.visible,
.reveal-slide.visible { transform: none; }

/* 순차 등장 — 그리드 밖(Hero·Stats)에서 손으로 지정할 때 */
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }

/* 그리드 안에서는 자동 계산 — 카드가 9개, 6개로 늘어도 손댈 필요가 없다.
   행이 바뀌면 지연이 초기화되어 한 행씩 훑고 지나가는 리듬이 된다. */
.skills-grid > .reveal:nth-child(3n + 2) { transition-delay: 0.08s; }
.skills-grid > .reveal:nth-child(3n + 3) { transition-delay: 0.16s; }

/* 강점 그리드는 2열 */
.strengths-grid > .reveal:nth-child(2n) { transition-delay: 0.08s; }

/* 모션 최소화 설정을 존중한다 — 등장 효과는 즉시 완료 상태로 둔다.
   변형 클래스는 특정도가 .reveal보다 높으므로 반드시 함께 나열해야 한다.
   (.reveal 하나만 두면 .reveal-scale 등이 무시된다) */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  .reveal,
  .reveal-fade,
  .reveal-scale,
  .reveal-slide { opacity: 1; transform: none; }
}

/* ============================================
   COMMON COMPONENTS
   ============================================ */

/* Section eyebrow — pill 배지 대신 Brass 대문자 캡션 */
.section-badge {
  display: block;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: var(--sp-16);
}

/* 좌측 정렬 — 중앙 정렬은 SaaS 랜딩 문법, Editorial은 좌측에서 시작한다 */
.section-header {
  margin-bottom: var(--sp-60);
  max-width: 720px;
}

.section-title {
  font-size: clamp(32px, 4.4vw, 40px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
  color: var(--graphite);
  margin-bottom: var(--sp-16);
}

.section-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.5;
  font-feature-settings: "ss01";
}

/* 강조 키워드 밑줄 — 페이지당 한두 곳에만 쓴다.
   레퍼런스의 밑줄은 선명한 주홍이 아니라 탁한 황토색이라 Brass를 쓴다. */
.u-underline {
  background-image: linear-gradient(var(--brass), var(--brass));
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: 0 calc(100% - 0.08em);
  padding-bottom: 0.1em;
}

/* BUTTONS — pill (실제 Ventriloc 사이트 기준).
   그림자 없음, 리프트 없음 — hover는 색 반전으로만 반응한다. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-8);
  padding: 12px 22px;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.0;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
  font-family: var(--font);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.2s var(--ease), color 0.2s var(--ease),
              border-color 0.2s var(--ease);
  white-space: nowrap;
  text-decoration: none;
}

.btn-lg { padding: 15px 28px; }

/* Primary — Graphite 채움. Ember는 CTA 배경으로 쓰지 않는다. */
.btn-primary {
  background: var(--graphite);
  color: var(--on-dark);
  border-color: var(--graphite);
}
.btn-primary:hover  { background: #000000; border-color: #000000; }
.btn-primary:active { background: var(--steel); border-color: var(--steel); }

/* Secondary — 1px 아웃라인, hover 시 반전 */
.btn-secondary {
  background: transparent;
  color: var(--graphite);
  border-color: var(--graphite);
}
.btn-secondary:hover { background: var(--graphite); color: var(--on-dark); }

/* Ghost — 최소 강조 */
.btn-ghost {
  background: transparent;
  color: var(--steel);
  border-color: var(--mist);
}
.btn-ghost:hover { color: var(--graphite); border-color: var(--graphite); }

/* 키보드 포커스 링 — Ember를 기능적으로 쓰는 몇 안 되는 자리 */
.btn:focus-visible,
.nav-link:focus-visible,
.nav-cta:focus-visible,
.contact-card:focus-visible,
.scroll-fab-btn:focus-visible,
.skip-link:focus {
  outline: 2px solid var(--ember);
  outline-offset: 2px;
}

/* 플로팅 섹션 이동 버튼 — 배경만 반투명하게 하고 아이콘은 항상 또렷한 검정으로 둔다.
   전체를 opacity로 흐리면 아이콘까지 회색으로 씻겨나가 버린다.
   그림자 없음 — 배경 반투명도와 헤어라인만으로 다양한 배경(paper/ash/ivory) 위에서 떠 보인다. */
.scroll-fab {
  position: fixed;
  right: var(--sp-20);
  bottom: var(--sp-20);
  z-index: 90;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.scroll-fab-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(32, 32, 32, 0.14);
  border-radius: 50%;
  color: var(--graphite);
  cursor: pointer;
  transition: background 0.2s var(--ease), border-color 0.2s var(--ease);
}
.scroll-fab-btn:hover,
.scroll-fab-btn:focus-visible {
  background: var(--canvas);
  border-color: var(--graphite);
}
.scroll-fab-btn:disabled {
  color: var(--slate);
  background: rgba(255, 255, 255, 0.3);
  cursor: default;
  pointer-events: none;
}

@media (max-width: 520px) {
  .scroll-fab     { right: var(--sp-16); bottom: var(--sp-16); }
  .scroll-fab-btn { width: 40px; height: 40px; }
}

/* 스킵 링크 — 키보드 사용자가 네비를 건너뛰도록 */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--graphite);
  color: var(--on-dark);
  padding: 12px 20px;
  font-size: 15px;
}
.skip-link:focus {
  left: var(--sp-16);
  top: var(--sp-16);
}

/* ============================================
   NAVIGATION
   ============================================ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: var(--paper);
  border-bottom: 1px solid transparent;
  transition: border-color 0.3s var(--ease);
}

/* 스크롤 시 헤어라인만 — 그림자로 띄우지 않는다 */
.nav.scrolled { border-bottom-color: var(--mist); }

.nav-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-20);
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
}

/* 로고 — 필기체 워드마크. 박스·아이콘 없이 텍스트 하나로 서명처럼 읽힌다.
   line-height를 넉넉히 잡아 필기체 특유의 하강 플로리시(y, g 등)가 잘리지 않게 한다. */
.nav-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-script);
  font-size: 34px;
  font-weight: 400;
  line-height: 1;
  color: var(--graphite);
  letter-spacing: 0.01em;
  flex-shrink: 0;
  padding-bottom: 4px;
}
.nav-logo .logo-dot { color: var(--brass); }

/* 네비 링크 묶음 — Ash 배경의 완전 둥근 pill 컨테이너.
   3단 radius 리듬의 반대편 극단(200px). */
.nav-links {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  background: var(--ash);
  border-radius: var(--r-pill);
  padding: 8px 18px;
}

.nav-link {
  padding: 4px 10px;
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  color: var(--steel);
  border-radius: var(--r-pill);
  transition: color 0.2s var(--ease);
  font-feature-settings: "ss01";
}
.nav-link:hover { color: var(--graphite); }

/* 활성 상태 — 배경 대신 Ember 밑줄로 표시한다 */
.nav-link.active {
  color: var(--graphite);
  box-shadow: inset 0 -1px 0 0 var(--brass);
  border-radius: 0;
}

/* 헤더 CTA — 본문 버튼과 같은 0px 직각 */
.nav-cta {
  background: var(--graphite);
  color: var(--on-dark);
  padding: 10px 20px;
  border-radius: var(--r-btn);
  font-size: 16px;
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
  transition: background 0.2s var(--ease);
  flex-shrink: 0;
}
.nav-cta:hover { background: #000000; }

.nav-hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--steel);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
}

.nav-mobile {
  display: none;
  flex-direction: column;
  background: var(--canvas);
  border-bottom: 1px solid var(--mist);
  padding: var(--sp-8) var(--sp-20) var(--sp-20);
}
.nav-mobile.open { display: flex; }
.nav-mobile a {
  padding: 12px 0;
  color: var(--steel);
  font-size: 15px;
  font-weight: 400;
  border-bottom: 1px solid var(--mist);
  transition: color 0.2s;
  font-feature-settings: "ss01";
}
.nav-mobile a:last-child { border-bottom: none; }
.nav-mobile a:hover { color: var(--graphite); }

/* ============================================
   HERO
   ============================================ */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
  background: var(--paper);
}

/* 그라디언트 메시 제거 — 배경은 순수 캔버스.
   요소를 유지하되 시각적으로 비워 두어 마크업 변경을 최소화한다. */
.hero-mesh { display: none; }

.hero-inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1fr 480px;
  gap: var(--sp-60);
  align-items: center;
  min-height: 100vh;
  padding-top: 72px;
  padding-bottom: var(--sp-80);
}

/* Hero eyebrow — pill 배지 대신 Brass 캡션 + 상태 점 */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-8);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-feature-settings: "ss01";
  color: var(--brass);
  margin-bottom: var(--sp-20);
  width: fit-content;
}

.badge-dot {
  width: 5px;
  height: 5px;
  background: var(--brass);
  border-radius: 50%;
  animation: badgePulse 2s ease-in-out infinite;
}

@keyframes badgePulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.3; }
}

/* Hero name — 66px 디스플레이. weight 400 고정, 굵히지 않는다.
   line-height 0.91의 타이트한 리딩이 포스터 같은 밀도를 만든다. */
.hero-name {
  margin-bottom: var(--sp-20);
  line-height: 1;
}

.name-en {
  display: block;
  font-size: clamp(44px, 6.6vw, 66px);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  line-height: 0.91;
  color: var(--graphite);
  font-feature-settings: "ss01";
}

/* 타이핑 역할 — 밑줄 없이 텍스트만. 커서도 무채색이라 시선을 뺏지 않는다. */
.hero-role {
  display: flex;
  align-items: center;
  font-size: clamp(20px, 2.4vw, 26px);
  font-weight: 400;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
  color: var(--graphite);
  margin-bottom: var(--sp-20);
  height: 2.4rem;
  overflow: hidden;
  white-space: nowrap;
}

.cursor {
  display: inline-block;
  width: 2px;
  height: 1.1em;
  background: var(--graphite);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: cursorBlink 1s step-end infinite;
}

@keyframes cursorBlink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.hero-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.6;
  margin-bottom: var(--sp-36);
  font-feature-settings: "ss01";
}

/* 강조는 굵기가 아니라 색으로 — weight를 올리면 편집적 절제가 깨진다 */
.hero-desc strong {
  color: var(--graphite);
  font-weight: 400;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-12);
  align-items: center;
}

/* Hero visual — 데이터 카드 클러스터.
   창 크롬(타이틀바·신호등 점)은 이 디자인 언어에 없는 요소라 쓰지 않는다. */
.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.data-cards {
  width: 100%;
  max-width: 480px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}

/* paper 배경 위에 뜨는 흰 카드. 그림자 없이 색 대비로만 깊이를 만든다. */
.data-card {
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: 20px;
  padding: var(--sp-20);
  display: flex;
  flex-direction: column;
  gap: var(--sp-12);
}

/* 넓은 카드는 2열 전체를 쓰고 살짝 밀어 올려 겹침을 만든다 */
.data-card-wide {
  grid-column: 1 / -1;
}

/* 카드 캡션 — 섹션 eyebrow와 동일한 규격이라 선택자를 합쳐 중복을 없앤다 */
.data-label,
.skill-group-label {
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: "ss01";
  color: var(--brass);
}

.data-value {
  font-size: 40px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "tnum", "ss01";
  color: var(--graphite);
}

.data-unit {
  font-size: 0.5em;
  color: var(--brass);
  margin-left: 2px;
}

.data-caption {
  font-size: 13px;
  color: var(--steel);
  line-height: 1.4;
}

/* 경력 구간 막대 — 실제 재직 기간을 2001~2026 축에 그린다 */
.data-chart { display: block; width: 100%; height: auto; }

.data-ring-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-12);
}

/* Scroll indicator */
.scroll-indicator {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  z-index: 1;
}

.scroll-line {
  width: 1px;
  height: 40px;
  background: linear-gradient(to bottom, transparent, var(--slate));
  animation: scrollAnim 2.2s ease-in-out infinite;
  transform-origin: top;
}

@keyframes scrollAnim {
  0%   { transform: scaleY(0); opacity: 1; }
  60%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1); opacity: 0; }
}

.scroll-indicator span {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--slate);
  font-weight: 500;
  font-feature-settings: "ss01";
}

/* ============================================
   STATS
   ============================================ */
/* 수치 요약 — Contact 직전에서 마지막 ash 구간을 맡는다.
   eyebrow 하나만 얹은 압축 밴드라 상하 여백을 좁게 유지한다. */
.stats {
  padding: var(--sp-60) 0;
  background: var(--ash);
}

/* 라벨이 작으므로 헤더 아래 간격도 줄인다 — 기본 60px는 과하다 */
.stats .section-header { margin-bottom: var(--sp-36); }

.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-20);
}

/* Ash 배경 위의 카드 — 배경만 보랏빛이 살짝 도는 회색으로.
   팔레트의 "무채색+Brass/Ember만" 원칙을 벗어나는 의도적 예외이며 이 카드 하나에만 국한한다. */
/* --fog(#f5f5f5)로 채운다 — Ash 섹션 배경(#efefef)보다 한 단계 밝은,
   이미 팔레트에 있는 톤이라 새 색을 만들지 않는다. */
.stat-item {
  text-align: center;
  padding: var(--sp-36) var(--sp-20);
  background: var(--fog);
  /* --mist는 fog/ash와 명도차가 거의 없어 안 보인다(타임라인 구분선과 같은 문제).
     slate에 알파를 줘서 mist보다는 진하고 slate 원색보다는 연한 중간 톤을 만든다. */
  border: 1px solid rgba(130, 130, 130, 0.32);
  border-radius: var(--r-card);
}

.stat-number {
  font-size: clamp(36px, 4.5vw, 48px);
  font-weight: 400;
  line-height: 1;
  margin-bottom: var(--sp-8);
  letter-spacing: var(--tracking-display);
  font-feature-settings: "tnum", "ss01";
  color: var(--graphite);
}

.stat-unit {
  font-size: 0.5em;
  color: var(--brass);
  margin-left: 2px;
}

.stat-label {
  font-size: 14px;
  font-weight: 400;
  color: var(--steel);
  font-feature-settings: "tnum";
}

/* ============================================
   ABOUT
   ============================================ */
.about {
  padding: var(--sp-section) 0;
  background: var(--ash);
}

/* 인용구 — 좌측 정렬 + Ember 세로 규칙. 거대 따옴표는 장식 과잉이라 제거했다. */
.about-quote {
  margin-bottom: var(--sp-60);
  max-width: 860px;
}

.about-quote blockquote {
  display: block;
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 400;
  color: var(--graphite);
  line-height: 1.2;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
  position: relative;
  padding-left: var(--sp-20);
  border-left: 1px solid var(--brass);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-60);
  align-items: start;
}

.about-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-20);
}

.about-text p {
  font-size: 17px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.75;
  font-feature-settings: "ss01";
}

/* 강조는 색으로만 — 굵기를 올리지 않는다 */
.about-text p strong {
  color: var(--graphite);
  font-weight: 400;
}

/* 강점 카드 — 시그니처 비대칭 radius를 쓰는 자리.
   Ash 배경 + 테두리 없음, 깊이는 서피스 대비로만. */
.strengths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-12);
}

.strength-card {
  padding: var(--sp-20);
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: var(--r-feature);
  transition: background 0.2s var(--ease);
}

.strength-card:hover { background: #fefcf0; }

.strength-icon {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  margin-bottom: var(--sp-12);
}

.strength-card h3 {
  font-size: 16px;
  font-weight: 400;
  color: var(--graphite);
  margin-bottom: 6px;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
}

.strength-card p {
  font-size: 14px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.6;
  font-feature-settings: "ss01";
}

/* ============================================
   SKILLS
   ============================================ */
.skills {
  padding: var(--sp-section) 0;
  background: var(--paper);
}

.skills-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-20);
}

/* 흰 카드 + 헤어라인 — paper/ash 어느 배경 위에서도 같은 세기로 읽힌다 */
.skill-group {
  padding: var(--sp-36);
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  transition: background 0.2s var(--ease);
}
.skill-group:hover { background: #fefcf0; }

/* 공통 규격은 .data-label과 함께 위에서 정의한다 — 여기서는 간격만 */
.skill-group-label { margin-bottom: var(--sp-16); }

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

/* 태그 — 20px radius. 3단 리듬 중 중간 단계. */
.skill-tag {
  padding: 5px 12px;
  font-size: 14px;
  font-weight: 400;
  background: var(--fog);
  border-radius: var(--r-tag);
  color: var(--steel);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
  font-feature-settings: "ss01";
}
.skill-tag:hover {
  background: var(--mist);
  color: var(--graphite);
}

/* 대표 기술 — 채우지 않고 테두리로만 구분 */
.skill-tag-primary {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--graphite);
  color: var(--graphite);
}

/* AI 도구 — Ember를 쓰는 몇 안 되는 자리 */
.skill-tag-accent {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--brass);
  color: var(--brass);
}

/* ============================================
   CAREER TIMELINE
   ============================================ */
.career {
  padding: var(--sp-section) 0;
  background: var(--ash);
}

.timeline { position: relative; }

/* 구분선은 반투명 Graphite로 — 배경이 paper든 ash든 같은 세기로 읽힌다.
   불투명 --mist를 쓰면 ash(#efefef) 위에서 사라진다. */
.timeline::before {
  content: '';
  position: absolute;
  left: 180px;
  top: 0; bottom: 0;
  width: 1px;
  background: linear-gradient(to bottom,
    transparent 0%, rgba(32, 32, 32, 0.10) 8%, rgba(32, 32, 32, 0.10) 92%, transparent 100%);
}

.timeline-item {
  display: grid;
  grid-template-columns: 180px 40px 1fr;
  padding: var(--sp-40) 0;
  border-bottom: 1px solid rgba(32, 32, 32, 0.10);
  position: relative;
}
.timeline-item:last-child { border-bottom: none; }

.timeline-left {
  padding-right: var(--sp-20);
  padding-top: 4px;
  text-align: right;
}

.timeline-period {
  font-size: 14px;
  font-weight: 500;
  color: var(--graphite);
  margin-bottom: 4px;
  font-feature-settings: "tnum";
}

.timeline-duration {
  font-size: 13px;
  font-weight: 400;
  color: var(--slate);
  font-feature-settings: "tnum";
}

.timeline-connector {
  display: flex;
  justify-content: center;
  padding-top: 8px;
}

.timeline-dot {
  width: 7px;
  height: 7px;
  background: var(--graphite);
  border-radius: 50%;
  flex-shrink: 0;
}

/* 최신 경력만 Ember로 — 현재 위치를 한 점으로 표시한다 */
.timeline-item:first-child .timeline-dot { background: var(--ember); }

.timeline-right { padding-left: var(--sp-16); }

.timeline-company {
  font-size: 24px;
  font-weight: 400;
  color: var(--graphite);
  margin-bottom: 4px;
  letter-spacing: var(--tracking-display);
  font-feature-settings: "ss01";
}

.timeline-position {
  font-size: 15px;
  font-weight: 400;
  color: var(--brass);
  margin-bottom: var(--sp-12);
  font-feature-settings: "ss01";
}

.timeline-desc {
  font-size: 16px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.75;
  margin-bottom: var(--sp-16);
  font-feature-settings: "ss01";
}

.timeline-desc strong {
  color: var(--graphite);
  font-weight: 400;
}

.timeline-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-8);
}

.timeline-tags span {
  padding: 4px 11px;
  font-size: 13px;
  font-weight: 400;
  background: var(--fog);
  border-radius: var(--r-tag);
  color: var(--steel);
  font-feature-settings: "ss01";
}

/* ============================================
   WORK — 제작 레퍼런스
   ============================================ */
.work {
  padding: var(--sp-section) 0;
  background: var(--paper);
}

/* 서술형 항목이라 태그 칩이 아닌 목록으로 낸다 */
.ref-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: var(--sp-8);
}

.ref-list li {
  font-size: 14px;
  color: var(--steel);
  line-height: 1.6;
  padding-left: var(--sp-12);
  position: relative;
  font-feature-settings: "ss01";
}

.ref-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--brass);
}

/* ============================================
   CONTACT
   ============================================ */
/* Ivory 밴드 — 종이 질감의 피처 블록. 페이지에서 유일하게 따뜻한 면. */
.contact {
  padding: var(--sp-section) 0;
  background: var(--ivory);
  position: relative;
  overflow: hidden;
}

.contact-inner {
  position: relative;
  z-index: 1;
  max-width: 760px;
}

.contact-title {
  font-size: clamp(32px, 4.4vw, 40px);
  font-weight: 400;
  color: var(--graphite);
  letter-spacing: var(--tracking-display);
  line-height: 1.2;
  margin-bottom: var(--sp-16);
  font-feature-settings: "ss01";
}

.contact-desc {
  font-size: 18px;
  font-weight: 400;
  color: var(--steel);
  line-height: 1.6;
  margin-bottom: var(--sp-40);
  font-feature-settings: "ss01";
}

.contact-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--sp-12);
  margin-bottom: var(--sp-36);
  max-width: 560px;
}

.contact-card {
  display: flex;
  align-items: center;
  gap: var(--sp-16);
  padding: var(--sp-20);
  background: var(--canvas);
  border: 1px solid var(--mist);
  border-radius: var(--r-card);
  text-align: left;
  transition: background 0.2s var(--ease);
}

.contact-card:hover { background: var(--fog); }

.contact-card-icon {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--graphite);
  flex-shrink: 0;
}

.contact-card-body { flex: 1; min-width: 0; }

.contact-card-label {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--brass);
  margin-bottom: 3px;
  font-feature-settings: "ss01";
}

.contact-card-value {
  font-size: 15px;
  font-weight: 400;
  color: var(--graphite);
  font-feature-settings: "tnum";
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.contact-card-arrow {
  color: var(--slate);
  flex-shrink: 0;
  transition: color 0.2s var(--ease), transform 0.2s var(--ease);
}
.contact-card:hover .contact-card-arrow {
  color: var(--brass);
  transform: translateX(3px);
}

.contact-actions {
  display: flex;
  gap: var(--sp-12);
  flex-wrap: wrap;
}

/* ============================================
   FOOTER
   ============================================ */
.footer {
  border-top: 1px solid var(--mist);
  padding: var(--sp-60) var(--sp-20);
  background: var(--paper);
}

.footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--sp-20);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-20);
}

.footer-logo {
  display: flex;
  align-items: center;
  font-family: var(--font-script);
  font-size: 26px;
  font-weight: 400;
  line-height: 1;
  color: var(--steel);
  letter-spacing: 0.01em;
  padding-bottom: 3px;
}
.footer-logo .logo-dot { color: var(--brass); }

/* GitHub 링크 제거 후 남은 두 항목(로고/카피라이트)을 space-between이 양끝에 배치한다 —
   카피라이트가 자연히 우측 정렬된다. */
.footer-text {
  font-size: 14px;
  font-weight: 400;
  color: var(--slate);
  font-feature-settings: "tnum";
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 1024px) {
  /* 좌측 정렬 유지 — 중앙 정렬하면 Ember 밑줄이 화면 폭으로 늘어나고
     Editorial 톤이 SaaS 랜딩 문법으로 되돌아간다. */
  .hero-inner {
    grid-template-columns: 1fr;
    padding-top: 96px;
    padding-bottom: var(--sp-60);
    min-height: auto;
    gap: var(--sp-40);
  }

  .hero-visual { justify-content: flex-start; }
  .data-cards  { max-width: 520px; }

  .about-content { grid-template-columns: 1fr; gap: var(--sp-40); }

  .stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-36) var(--sp-20); }

  .skills-grid { grid-template-columns: repeat(2, 1fr); }

  .timeline::before { left: 0; }
  .timeline-item {
    grid-template-columns: 1fr;
    padding-left: var(--sp-20);
  }
  .timeline-left {
    text-align: left;
    padding-right: 0;
    margin-bottom: 6px;
    padding-top: 0;
  }
  .timeline-connector { display: none; }
  .timeline-right { padding-left: 0; }
  .timeline-item::before {
    content: '';
    position: absolute;
    left: 0; top: 46px;
    width: 7px; height: 7px;
    background: var(--graphite);
    border-radius: 50%;
  }
  .timeline-item:first-child::before { background: var(--ember); }
}

@media (max-width: 768px) {
  :root { --sp-section: 72px; }

  .nav-links    { display: none; }
  .nav-cta      { display: none; }
  .nav-hamburger{ display: flex; }
  .nav-inner    { height: 64px; }
  .nav-logo     { font-size: 28px; }

  .skills-grid    { grid-template-columns: 1fr; }
  .strengths-grid { grid-template-columns: 1fr; }

  .section-header { margin-bottom: var(--sp-40); }

  .footer-inner { flex-direction: column; gap: var(--sp-12); text-align: center; }
}

@media (max-width: 520px) {
  .hero-actions .btn { width: 100%; }
  .hero-actions { flex-direction: column; width: 100%; align-items: stretch; }

  .stats-grid { grid-template-columns: repeat(2, 1fr); }

  .contact-cards  { max-width: 100%; }
  .contact-actions .btn { width: 100%; }
}