/* ---------- 웹폰트 ----------
   원본 TTF 는 한글 완성형 11,172자를 모두 담아 한 벌에 2MB 가 넘었고,
   두 굵기를 preload 하느라 첫 방문에만 4.2MB 를 먼저 받았다.
   실제로 쓰이는 글자만 남긴 woff2 서브셋으로 바꿔 5,149KB -> 375KB(-93%).

   서브셋에는 사이트가 지금 쓰는 512자보다 훨씬 넉넉한 5,929자를 넣었다:
   ASCII 전체 · 문장부호/기호 · 한글 자모 · 받침이 흔한 한글 음절 약 5,300자.
   그래서 한글 문구를 새로 넣어도 대부분 그대로 표시된다.
   ※ 원본 TTF 는 Fonts/ 에 그대로 두었다. 혹시 서브셋에 없는 글자가
     필요해지면 그 파일로 다시 만들면 된다. */
@font-face {
  font-family: "Esamanru";
  src: url("Fonts/esamanru-Light.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Esamanru";
  src: url("Fonts/esamanru-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* 서명 전용 손글씨체. 프로필·Dear Father 의 "Michael Chun" 한 곳에만 쓴다.
   쓰는 글자가 정해져 있어 라틴 알파벳만 남겨 967KB -> 49KB. */
@font-face {
  font-family: "Golden Plains";
  src: url("Fonts/GoldenPlains-Signature.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* "Noto Sans KR" 웹폰트(@font-face)는 제거했다.
   Esamanru 가 한글을 포함하고 있어 이 사이트에 쓰인 문자 407자를 모두
   커버하므로, 렌더링에는 한 번도 쓰이지 않으면서 6MB 파일만 매번
   내려받고 있었다(캔버스 픽셀 비교로 weight 600·700 에서도 결과가
   Esamanru 와 동일함을 확인).
   font-family 목록에는 이름을 남겨 둔다 — 웹폰트가 아니라, 혹시 없는
   글리프가 생겼을 때 시스템에 설치된 한글 폰트로 넘어가는 안전장치다. */

:root {
  --bg: #060608;
  --bg-soft: #101014;
  --panel: #131318;
  --text: #f5f5f7;
  --muted: #9d9da8;
  --line: rgba(180, 140, 255, 0.28);
  --purple: #b98bff;
  --cyan: #5be8e8;
  --pink: #ff6fd8;
  /* 액센트 위계:
     purple = 구조(페이지·섹션 제목, 링크) — 주 액센트
     pink   = 콘텐츠의 핵심(프로젝트명) — 시선이 가장 먼저 닿아야 할 곳
     cyan   = 보조 메타데이터(분류 라벨). 목록에서 매 행마다 반복되므로
              풀채도로 쓰면 핑크와 경쟁해 초점이 흩어진다. 톤 다운한
              --cyan-dim 을 쓰고, 풀채도 --cyan 은 호버 등 순간적인
              강조에만 남겨둔다. */
  --cyan-dim: #4f9a9d;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* 모든 페이지에 항상 세로 스크롤바를 표시해 좌우 폭을 통일한다
     (스크롤 유무에 따라 콘텐츠 폭이 달라지는 문제 방지 — 전 브라우저 호환). */
  overflow-y: scroll;
}

/* ---------- 페이지 전환(View Transitions) — 제거됨 ----------
   과거에 @view-transition { navigation: auto } 로 페이지 이동 시 크로스페이드를
   넣어 커스텀 커서가 잠깐 기본 커서로 깜빡이는 현상을 가렸었다. 하지만
   카카오톡 등 인앱 브라우저(구형 WebView)에서는 크로스도큐먼트 View Transition
   의 "새 페이지로 전환" 단계가 끝나지 않아 이전 페이지 스냅샷에 멈춘 채
   먹통이 되는 문제가 있었다(크롬은 정상). 실사용자 차단이 커서 깜빡임보다
   훨씬 치명적이라 이 기능을 완전히 제거한다. 이동은 모든 브라우저에서
   평범한 즉시 로드로 동작한다. */

body {
  margin: 0;
  font-family: "Esamanru", "Noto Sans KR", "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 300;
  font-synthesis: none;
  background-color: var(--bg);
  background-image:
    radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 22px 22px;
  color: var(--text);
  line-height: 1.6;
  /* 한글은 기본값(word-break: normal)에서 어절 중간이든 아무 글자 사이에서나
     줄이 바뀐다("소개 및 경력 정보 페 / 이지"처럼). keep-all 은 띄어쓰기에서만
     줄을 바꿔 어절이 통째로 유지된다.
     overflow-wrap 은 안전장치다. 한 어절이 칸보다 넓은 극단적인 경우
     (좁은 카드의 긴 단어)에만 예외적으로 쪼개 넘침을 막는다. */
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* 폼 컨트롤은 body 의 글꼴을 상속하지 않고 브라우저 기본값(Arial 등)을
   쓴다. 그래서 갤러리 필터 버튼의 한글이 Esamanru 가 아니라 시스템
   한글 폰트로 떨어졌고, 세로 지표가 달라 글자가 버튼 중앙보다 아래로
   내려가 보였다. 사이트 글꼴을 그대로 물려받게 한다. */
button,
input,
select,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  width: 100%;
  height: auto;
}

.container {
  width: min(1200px, calc(100% - 2rem));
  margin: 0 auto;
}

/* ---------- Hatch decoration (diagonal stripes) ---------- */
.hatch {
  display: inline-block;
  width: 64px;
  height: 14px;
  background-image: repeating-linear-gradient(
    -45deg,
    var(--text) 0,
    var(--text) 2px,
    transparent 2px,
    transparent 8px
  );
}

/* ---------- Header ----------
   .sticky-head 가 스크롤 고정을 담당하는 바깥 껍데기이고, 그 안의
   .site-header 가 로고·메뉴·(모바일에서는) 국기 버튼을 모두 담는다. */
.sticky-head {
  position: sticky;
  top: 0;
  z-index: 20;
}

.site-header {
  background: rgba(6, 6, 8, 0.65);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line);
  padding: 0.55rem 0;
}

/* 홈 히어로 인트로: 메뉴바가 위에서 아래로 내려오며 2초간 페이드인 된다
   (타이틀 이미지와 동시에 시작).
   fill 은 backwards 로 둔다: forwards 로 두면 애니메이션 종료 후에도
   최종 키프레임의 transform(=translateY(0), 즉 항등 행렬)이 남아 .site-header 가
   stacking context/backdrop-root 가 되고, 그 자식인 모바일 메뉴 드롭다운
   (.site-nav)의 backdrop-filter 블러가 깨진다. backwards 로 두면 시작 전에는
   from 상태(숨김)를 적용하되, 종료 후에는 요소 본래 스타일(transform 없음)로
   정착해 블러가 정상 동작한다. */
body[data-page="home"] .site-header {
  animation: header-slide-fade 2s ease backwards;
}

@keyframes header-slide-fade {
  from { opacity: 0; transform: translateY(-100%); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .site-header {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* PC 전용 헤더/로고 확대 규칙은 파일 하단(모바일 브레이크포인트 옆)에 있다
   (base .logo-img 등 뒤에 와야 소스 순서상 우선 적용된다). */

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.logo-row {
  display: flex;
  align-items: center;
  position: relative;
}

.logo-link {
  display: block;
  position: relative;
  width: 72px;
  line-height: 0;
}

.logo-img {
  width: 72px;
  filter: drop-shadow(0 0 10px rgba(185, 139, 255, 0.35));
  transition: opacity 0.2s ease;
}

/* 호버 시 Logo ↔ Logo1 이 번갈아 깜박인다.
   커서 시스템(cursor-trail.js)이 이미 html.cur-alt 를 130ms 간격으로
   토글하고 있으므로 같은 리듬을 그대로 재사용한다. */
.logo-hover {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

.logo-link:hover .logo-normal {
  opacity: 1;
}

.logo-link:hover .logo-hover {
  opacity: 0;
}

html.cur-alt .logo-link:hover .logo-normal {
  opacity: 0;
}

html.cur-alt .logo-link:hover .logo-hover {
  opacity: 1;
}

.menu-toggle {
  display: none;
  position: absolute;
  right: 0;
  background: transparent;
  border: 0;
  padding: 0.25rem;
  cursor: pointer;
}

.menu-toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: white;
  margin: 5px 0;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

.menu-toggle[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}

.menu-toggle[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 1.75rem;
  justify-content: flex-end;
}

.site-nav a {
  position: relative;
  color: var(--muted);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.4rem 0;
  transition: color 0.2s ease;
}

/* 하단 라인 바: 평소 폭 0 → 호버/선택 시 왼쪽에서 오른쪽으로 100% */
.site-nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 0;
  height: 2px;
  background: var(--purple);
  transition: width 0.25s ease;
}

.site-nav a:hover {
  color: var(--purple);
}

.site-nav a:hover::after {
  width: 100%;
}

.site-nav a.active {
  color: var(--purple);
}

.site-nav a.active::after {
  width: 100%;
}

/* ---------- Hero (home) ---------- */
.hero {
  /* 아래 여백은 바로 뒤 .home-intro 의 위 여백과 더해져 간격이 된다 */
  padding: 3rem 0 1rem;
}

.hero-frame {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hero-image {
  width: 100%;
  display: block;
}

/* ---------- 히어로 CRT 글리치 ----------
   .hero-frame-box 는 아웃라인 + 클리핑만 담당하는 "고정 액자"다.
   이 요소 자체는 절대 움직이거나 스케일되지 않는다(틀 고정).
   .hero-logo-mark(코너 로고)도 이 안에 있지만 글리치 대상이 아니다.
   .hero-glitch 만 지터/스케일 대상이며, 액자 안에서 클리핑되어
   흔들려도 가장자리가 액자 밖으로 새어나오지 않는다. */
.hero-frame-box {
  position: relative;
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 4px;
  overflow: hidden;
  opacity: 0;
  animation: hero-intro-fade 2s ease forwards;
  animation-delay: 2s;
}

@keyframes hero-intro-fade {
  from { opacity: 0; }
  to { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-frame-box {
    animation: none;
    opacity: 1;
  }
}

.hero-glitch {
  position: relative;
  width: 100%;
}

.hero-glitch-frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;              /* JS 가 버스트 순간에만 1로 켠다 */
  pointer-events: none;
}

/* 타이틀 이미지에 그려진 우측 하단 로고와 같은 위치에 고정되는 별도 레이어.
   hero-glitch 바깥(hero-frame-box 의 형제)에 있어 글리치 지터의 영향을 받지 않는다.
   타이틀 이미지(부모 hero-frame-box) 페이드인이 끝난 뒤(2s 지연 + 2s 재생 = 4s 시점)
   살짝 늦게 자체적으로 한 번 더 페이드인 된다. */
.hero-logo-mark {
  position: absolute;
  right: 2.4%;
  bottom: calc(3.6% - 5px);
  width: 9.3%;
  height: auto;
  z-index: 3;
  pointer-events: none;
  opacity: 0;
  animation: hero-intro-fade 1s ease forwards;
  animation-delay: 4.2s;
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo-mark {
    animation: none;
    opacity: 1;
  }
}

/* ---------- 홈 소개 블록 ----------
   타이틀 이미지 바로 아래. "누구인지 → 지금 무엇을 하는지 → 어떻게 일하는지"
   순서로 읽히게 세 줄을 한 덩어리로 묶는다.

   가운데 정렬이지만 아래 "작업 컬렉션" 블록과 단조롭게 겹치지 않도록
   글자 크기 대비를 크게 두고(직함이 가장 크다), 인용문은 얇은 구분선
   아래로 내려 성격이 다른 문장임을 드러낸다. */
/* 위 간격은 .hero 의 아래 여백과 여기 위 여백이 합쳐진 값이다(34px).
   아래 여백은 크게 둔다 — 구분선을 없앤 대신 이 여백이 소개 블록과
   "작업 컬렉션" 섹션을 갈라 주는 역할을 한다. */
.home-intro {
  padding: 1.15rem 0 3.25rem;
  text-align: center;
}

/* 직함은 보라로 두어, 서명체 이름 아래에 붙는 라벨 성격임을 색으로도
   드러낸다(이름은 화이트, 직함은 보라, 인용문은 회색). */
.home-intro-role {
  margin: 0.35rem 0 0;
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.35;
  color: var(--purple);
}

/* 블록의 첫 줄. 이름을 서명체로 먼저 보여 주고 그 아래로 직함·현재 일이
   이어진다. 손글씨는 같은 px 에서도 산세리프보다 작아 보여, 아래 직함
   (23.2px)보다 크게 잡아야 무게가 맞는다. */
.home-intro-name {
  margin: 0;
  font-size: 3.125rem;
  line-height: 1.15;
}

/* 인용문. 이름·직함과 한 덩어리로 붙여 읽히게 두고, 구분은 아래
   "작업 컬렉션"과의 넉넉한 간격이 대신한다(예전엔 여기에 얇은 구분선을
   뒀지만 블록을 불필요하게 갈라 놓았다). */
.home-intro-quote {
  margin: 0.6rem auto 0;
  max-width: 34rem;
  font-size: 1.125rem;
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  color: var(--muted);
}

/* ---------- 소개 문구 등장 ----------
   페이지 인트로 순서는 헤더(0~2s) → 타이틀 이미지(2~4s) → 갤러리 섹션(4~6s) 이다.
   소개 문구를 이미지 "다음"에 줄 세우면 4초가 지나서야 나오는데, 이 사이트에서
   가장 먼저 읽혀야 할 정보가 가장 늦게 도착하는 셈이라 이미지가 아직 떠오르는
   중인 3초에 겹쳐 시작한다. 순서가 뒤집히지는 않으면서(이미지가 먼저 뜨기
   시작한다) 정보는 1초 일찍 도착한다.

   세 줄은 0.15초씩 어긋나게 두어 읽는 순서대로 흐르게 하되, 간격이 좁아
   개별 동작이 아니라 한 덩어리의 움직임으로 읽힌다.
   본문 글자라 기존 2초 페이드는 늘어지므로 1.4초로 짧게 잡았다.

   fill 은 backwards — forwards 로 두면 끝난 뒤에도 최종 키프레임의 transform 이
   남아 불필요한 쌓임 맥락을 만든다(헤더에서 같은 문제를 겪었다). */
.home-intro-name,
.home-intro-role,
.home-intro-quote {
  animation: section-fade-up 1.4s ease backwards;
}

/* 읽는 순서(이름 → 직함 → 인용문)대로 어긋나게 등장한다 */
.home-intro-name  { animation-delay: 3s; }
.home-intro-role  { animation-delay: 3.12s; }
.home-intro-quote { animation-delay: 3.27s; }

@media (prefers-reduced-motion: reduce) {
  .home-intro-name,
  .home-intro-role,
  .home-intro-quote {
    animation: none;
  }
}

/* 버스트 동안 강도별 지터 + 밝기/채도 명멸.
   살짝 확대(overscan)를 항상 유지해 지터로 가장자리 틈이 보이지 않게 한다. */
.hero-glitch.glitching.g-low {
  animation: hero-jitter-low 0.09s steps(2, jump-none) infinite;
}

.hero-glitch.glitching.g-medium {
  animation: hero-jitter-medium 0.07s steps(2, jump-none) infinite;
}

.hero-glitch.glitching.g-strong {
  animation: hero-jitter-strong 0.055s steps(2, jump-none) infinite;
}

@keyframes hero-jitter-low {
  0%   { transform: scale(1.005) translate(0, 0); filter: brightness(1); }
  50%  { transform: scale(1.005) translate(-1px, 1px); filter: brightness(1.06); }
  100% { transform: scale(1.005) translate(1px, 0); filter: brightness(1); }
}

@keyframes hero-jitter-medium {
  0%   { transform: scale(1.016) translate(0, 0); filter: brightness(1); }
  25%  { transform: scale(1.016) translate(-3px, 1px); filter: brightness(1.15) contrast(1.06); }
  50%  { transform: scale(1.016) translate(2px, -1px); filter: brightness(0.95); }
  75%  { transform: scale(1.016) translate(-1px, 2px); filter: brightness(1.1) saturate(1.22); }
  100% { transform: scale(1.016) translate(1px, -1px); filter: brightness(1); }
}

@keyframes hero-jitter-strong {
  0%   { transform: scale(1.022) translate(0, 0); filter: brightness(1); }
  20%  { transform: scale(1.022) translate(-5px, 2px); filter: brightness(1.25) contrast(1.1); }
  40%  { transform: scale(1.022) translate(4px, -2px); filter: brightness(0.88) hue-rotate(4deg); }
  60%  { transform: scale(1.022) translate(-3px, 3px); filter: brightness(1.2) saturate(1.35); }
  80%  { transform: scale(1.022) translate(3px, -1px); filter: brightness(0.95); }
  100% { transform: scale(1.022) translate(-1px, 1px); filter: brightness(1); }
}

/* 접근성: 모션 최소화 선호 시 글리치를 끈다 (JS 도 동작하지 않음) */
@media (prefers-reduced-motion: reduce) {
  .hero-glitch.glitching.g-low,
  .hero-glitch.glitching.g-medium,
  .hero-glitch.glitching.g-strong {
    animation: none;
  }
}

/* ---------- Featured category cards ---------- */
.featured-section {
  padding: 1rem 0 4rem;
}

.section-title {
  margin-bottom: 0.75rem;
  text-align: center;
}

/* 홈 히어로 인트로: 타이틀 이미지가 2초간 페이드인 된 직후,
   PORTFOLIO CATEGORIES 탭이 살짝 위로 올라오며 2초간 페이드인 된다. */
body[data-page="home"] .section-title {
  opacity: 0;
  animation: section-fade-up 2s ease forwards;
  animation-delay: 4s;
}

@keyframes section-fade-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .section-title {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

/* 갤러리 섹션의 이름(Explore / 둘러보기). 아래에 부제를 두지 않고 이 한 줄만
   쓰므로, 넓은 자간과 화이트로 섹션의 시작임을 알린다. */
.eyebrow {
  color: var(--text);
  letter-spacing: 0.3em;
  font-size: 1.3rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

h1,
h2,
h3 {
  margin: 0 0 0.75rem;
  font-weight: 500;
  font-family: "Esamanru", "Noto Sans KR", sans-serif;
  letter-spacing: 0.02em;
}

h1 {
  font-size: clamp(2rem, 3vw, 3rem);
}

/* 한글도 영문과 같은 Esamanru 로 렌더링되지만, 한글 글자는 네모틀을 꽉 채워
   같은 font-size 에서도 영문보다 크고 무겁게 보인다. 한 단계 낮춰 맞춘다. */
html[lang="ko"] .eyebrow {
  font-size: 1.15rem;
  letter-spacing: 0.32em;
}

.page-hero p,
.resume-card p,
.card-copy p {
  color: var(--muted);
}

.card-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.25rem;
}

/* 홈 히어로 인트로: 카테고리 카드 4개도 PORTFOLIO CATEGORIES 탭과
   동시에(같은 타이밍으로) 살짝 위로 올라오며 페이드인 된다. */
body[data-page="home"] .card-grid {
  opacity: 0;
  animation: section-fade-up 2s ease forwards;
  animation-delay: 4s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .card-grid {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.category-card {
  display: flex;
  flex-direction: column;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  border-color: var(--purple);
}

.category-card img {
  height: 190px;
  width: 100%;
  object-fit: cover;
}

.card-copy {
  position: relative;
  /* 그리드가 카드를 같은 높이로 늘릴 때, 설명이 짧은 카드(PROFILE 등)도
     card-copy 가 남은 높이를 채우도록 해서 스캔라인(::before)이 패널
     하단까지 빈틈없이 덮이게 한다. */
  flex: 1 1 auto;
  padding: 1rem 1.1rem 1.25rem;
  transition: background 0.2s ease;
}

/* 호버 시 설명란 배경에 아주 연한 보라 틴트 */
.category-card:hover .card-copy {
  background: rgba(185, 139, 255, 0.06);
}

/* 설명란 그레이 배경 질감: 깔끔한 가로 스캔라인.
   단일 주기로 균일하게 반복되는 선명한 1px 라인(하드 스톱이라 흐림 없음). */
.card-copy::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 5px,
    rgba(185, 139, 255, 0.09) 5px,
    rgba(185, 139, 255, 0.09) 6px
  );
}

/* 텍스트는 텍스처 위로 */
.card-copy h3,
.card-copy p {
  position: relative;
  z-index: 1;
}

.card-copy h3 {
  font-size: 1.05rem;
  letter-spacing: 0.08em;
  color: var(--text);
  transition: color 0.2s ease;
  margin-bottom: calc(0.75rem - 7px);
}

/* 설명은 제목의 보조 정보다. 이전에는 제목과 같은 1rem 이라 카드 안에서
   위계가 없었다. 한 단계 낮춰 제목이 먼저 읽히게 한다.
   (스캔라인 텍스처 위라 색은 --muted 보다 밝게 유지) */
.card-copy p {
  font-size: 0.875rem;
  line-height: 1.5;
  color: #c7c7d2;
  margin: 0;
}

.category-card:hover .card-copy h3 {
  color: var(--purple);
}

/* ---------- Gallery pages ---------- */
.page-hero {
  padding: 3rem 0 2.5rem;
  text-align: center;
}

/* 3D/2D ART, RESUME, DEAR FATHER: 좌측 정렬 타이틀만 짧게 두고 바로 본문으로
   이어지도록 여백 최소화 */
.page-hero-compact {
  padding: 2rem 0 1rem;
  text-align: left;
}

/* 타이틀 바로 다음에 오는 섹션은 위쪽 여백을 줄여 붙여준다 */
.page-hero-compact + .resume-hero {
  padding-top: 0;
}

.page-hero-compact + .df-video-section {
  padding-top: 0;
}

/* 페이지 상단 타이틀: 각 페이지에서 가장 큰 활자이자 이 사이트의 시그니처.
   타입 스케일의 최상단(디스플레이)으로 페이지의 시작점을 분명히 한다.

   색수차(chromatic aberration): 렌즈가 파장별로 초점을 달리 맺어 생기는
   시안/마젠타 프린지를 흉내낸다. 헤더 로고(Logo.webp)가 이미 같은 처리라
   페이지 제목이 로고와 한 가족으로 읽힌다.
   - 글자 본체는 밝게 두고 좌우로만 어긋난 복사본을 겹친다. 어두운 배경에서
     프린지가 선명하게 분리되려면 본체가 밝아야 한다.
   - blur 는 0. 실제 색수차는 번짐이 아니라 "어긋남"이고, 흐리게 하면
     글자가 굵어 보여 서체 본래의 획을 해친다.
   - 오프셋은 em 이라 글자 크기를 줄여도 프린지 비율이 유지된다. */
.page-title {
  color: var(--text);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: clamp(1.6rem, 2.9vw, 2.25rem);
  line-height: 1.15;
  margin: 0;
  text-shadow:
    -0.028em 0 0 rgba(255, 111, 216, 0.9),
    -0.055em 0 0 rgba(255, 111, 216, 0.45),
    -0.083em 0 0 rgba(255, 111, 216, 0.18),
    0.028em 0 0 rgba(91, 232, 232, 0.9),
    0.055em 0 0 rgba(91, 232, 232, 0.45),
    0.083em 0 0 rgba(91, 232, 232, 0.18);
}

.gallery-section {
  padding: 1rem 0 4rem;
}

/* 갤러리 분류 필터(All / Professional / Personal) */
.gallery-filter {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}

.filter-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  /* 한글은 같은 font-size 에서도 줄 높이가 더 크게 잡힌다. height 를
     고정해 언어를 바꿔도 버튼 높이가 흔들리지 않게 한다. */
  height: 30px;
  background: rgba(10, 10, 13, 0.55);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 0 1rem;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--muted);
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.filter-btn:hover,
.filter-btn:active,
.filter-btn.active {
  background: rgba(185, 139, 255, 0.15);
  color: var(--purple);
}

/* 썸네일에서 라벨을 없애고 아웃라인 색으로만 분류를 표시하므로, 이 버튼들이
   "어떤 색이 어떤 분류인지" 알려주는 범례가 된다.

   세 버튼은 색만 다르고 규칙은 완전히 같다:
   평소엔 자기 색을 알파 0.45 로 두르고, 선택/호버 시 그 색으로 테두리와
   글자가 또렷해지며 배경이 옅게(0.15) 깔린다.
   ('전체'는 분류가 아니라 보라를 쓰지만, 형태는 동일하게 맞춘다 —
    예전에는 테두리가 --line(0.28)이라 혼자 흐렸고, 선택돼도 테두리가
    밝아지지 않아 다른 둘과 달라 보였다) */
.filter-btn[data-filter="all"] {
  border-color: rgba(185, 139, 255, 0.45);
}

.filter-btn[data-filter="professional"] {
  border-color: rgba(91, 232, 232, 0.45);
}

.filter-btn[data-filter="personal"] {
  border-color: rgba(255, 111, 216, 0.45);
}

.filter-btn[data-filter="all"]:hover,
.filter-btn[data-filter="all"]:active,
.filter-btn[data-filter="all"].active {
  background: rgba(185, 139, 255, 0.15);
  border-color: var(--purple);
  color: var(--purple);
}

.filter-btn[data-filter="professional"]:hover,
.filter-btn[data-filter="professional"]:active,
.filter-btn[data-filter="professional"].active {
  background: rgba(91, 232, 232, 0.15);
  border-color: var(--cyan);
  color: var(--cyan);
}

.filter-btn[data-filter="personal"]:hover,
.filter-btn[data-filter="personal"]:active,
.filter-btn[data-filter="personal"].active {
  background: rgba(255, 111, 216, 0.15);
  border-color: var(--pink);
  color: var(--pink);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

/* 점진 렌더링의 끝점 표시 겸 "더 보기" 버튼.
   스크롤이 닿으면 JS 가 자동으로 다음 묶음을 잇기 때문에 평소엔 진행
   표시("560장 중 120장")로 읽히고, 자동 로딩이 동작하지 않는 환경에서는
   눌러서 이어볼 수 있는 버튼으로 기능한다. 다 그리면 hidden 으로 사라진다. */
.gallery-more {
  display: block;
  margin: 1.75rem auto 0;
  padding: 0.6rem 1.5rem;
  background: rgba(10, 10, 13, 0.55);
  border: 1px solid var(--line);
  border-radius: 6px;
  color: var(--muted);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  letter-spacing: 0.06em;
  transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}

.gallery-more:hover,
.gallery-more:focus-visible {
  background: rgba(185, 139, 255, 0.15);
  border-color: var(--purple);
  color: var(--purple);
}

.gallery-more[hidden] {
  display: none;
}

.gallery-item {
  position: relative;
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.gallery-item:hover {
  transform: translateY(-3px);
  border-color: var(--cyan);
}

.gallery-item img {
  aspect-ratio: 4 / 5;
  object-fit: cover;
}

.gallery-meta {
  padding: 0.8rem 0.9rem 1rem;
  color: var(--muted);
  font-size: 0.9rem;
}

.calm-hero {
  background: linear-gradient(135deg, rgba(185, 139, 255, 0.06), rgba(91, 232, 232, 0.03));
}

/* ---------- Dear Father page ---------- */
.df-video-section {
  padding: 2.5rem 0 1.5rem;
}

.df-video-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: #000;
}

.df-video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.df-intro {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 2.5rem;
  padding: 1.5rem 0 2.5rem;
  align-items: start;
}

.df-collab {
  font-size: 1.15rem;
  line-height: 1.5;
  margin: 0 0 1.5rem;
  color: var(--text);
}

.df-collab .accent {
  color: var(--purple);
}

.df-credit-item {
  margin: 0 0 1.25rem;
  line-height: 1.7;
  color: var(--muted);
}

.df-credit-item .label {
  color: var(--purple);
  font-weight: 500;
}

.df-credit-item strong {
  color: var(--text);
  font-weight: 500;
}

.df-credit-item a {
  color: var(--text);
  text-decoration: none;
  word-break: break-all;
  transition: color 0.2s ease;
}

.df-credit-item a:hover {
  color: var(--purple);
}

.df-story {
  color: var(--muted);
}

.df-story p {
  margin: 0 0 1.35rem;
  line-height: 1.85;
}

.df-sign-date {
  text-align: right;
  margin: 2.5rem 0 0.25rem !important;
  color: var(--muted);
}

/* 서명 "Michael Chun" — 홈·프로필·Dear Father 세 곳에서 같은 모습이어야 하므로
   글꼴과 색수차를 여기 한 곳에 모아 둔다. 위치·크기만 각자 정한다.
   색수차는 페이지 제목과 같은 방식이다: 마젠타를 왼쪽, 시안을 오른쪽으로
   어긋나게 겹치고 blur 는 0(번짐이 아니라 "어긋남"이라 획이 굵어지지 않는다).
   오프셋이 em 이라 두 페이지의 글자 크기가 달라도 프린지 비율은 같다.
   손글씨 획이 얇아 프린지가 묻히지 않도록 본체는 밝게 둔다. */
.resume-intro .signature,
.df-sign,
.home-intro-name {
  font-family: "Golden Plains", cursive;
  font-weight: 400;
  color: var(--text);
  text-shadow:
    -0.028em 0 0 rgba(255, 111, 216, 0.9),
    -0.055em 0 0 rgba(255, 111, 216, 0.45),
    -0.083em 0 0 rgba(255, 111, 216, 0.18),
    0.028em 0 0 rgba(91, 232, 232, 0.9),
    0.055em 0 0 rgba(91, 232, 232, 0.45),
    0.083em 0 0 rgba(91, 232, 232, 0.18);
}

.df-sign {
  text-align: right;
  font-size: 2.1rem;
  margin: 0 !important;
}

/* 작품 이미지 시퀀스: 차분하게 전폭 단일 열, 크롭·캡션 없음 */
.df-gallery-section {
  padding-top: 0;
}

/* 16:9 칸은 정사각형보다 높이가 낮아, 6열을 유지하면 한 칸이 108px 높이의
   납작한 띠가 된다. 열을 줄여 칸을 넓히면 한 장당 면적은 오히려 커지고
   (193x193 -> 294x165), 행 높이는 낮아져 화면당 보이는 행 수는 유지된다. */
body[data-page="dear-father"] .gallery-grid,
body[data-page="3d-art"] .gallery-grid,
body[data-page="2d-art"] .gallery-grid {
  grid-template-columns: repeat(4, 1fr);
  gap: 0.5rem;
}

body[data-page="dear-father"] .gallery-item,
body[data-page="3d-art"] .gallery-item,
body[data-page="2d-art"] .gallery-item {
  border: 1px solid var(--line);
  background: var(--panel);
  border-radius: 6px;
  overflow: hidden;
}

/* 틀은 유지한 채 이미지만 살짝 확대 + 아웃라인만 조금 더 밝은 보라색 */
body[data-page="dear-father"] .gallery-item:hover,
body[data-page="3d-art"] .gallery-item:hover,
body[data-page="2d-art"] .gallery-item:hover {
  transform: none;
  border-color: rgba(185, 139, 255, 0.6);
}

/* 칸 비율을 작품 비율에 맞춘다.
   표본 조사 결과 3D 갤러리는 90%가 가로 이미지이고 69%가 16:9 이상인데,
   정사각형 칸에 cover 로 넣는 동안 평균 45%(40장 중 39장이 30% 이상)가
   좌우로 잘려나가고 있었다. 16:9 로 두면 대부분이 거의 원본 구도 그대로
   보인다. 세로 이미지 소수(약 4%)는 반대로 잘리지만, 전체적으로는
   잘림이 크게 줄어든다. */
body[data-page="dear-father"] .gallery-item img,
body[data-page="3d-art"] .gallery-item img,
body[data-page="2d-art"] .gallery-item img {
  aspect-ratio: 16 / 9;
  object-fit: cover;
  width: 100%;
  transition: transform 0.3s ease;
}

body[data-page="dear-father"] .gallery-item:hover img,
body[data-page="3d-art"] .gallery-item:hover img,
body[data-page="2d-art"] .gallery-item:hover img {
  transform: scale(1.08);
}

body[data-page="dear-father"] .gallery-meta,
body[data-page="3d-art"] .gallery-meta,
body[data-page="2d-art"] .gallery-meta {
  display: none;
}

/* ---------- 분류 표시: 썸네일 아웃라인 색 ----------
   예전에는 썸네일 위에 "실무/개인" 칩을 얹었는데, 작품 위에 글자가 올라가
   시선을 뺏었다. 이제 라벨을 없애고 카드 테두리 색으로만 구분한다.
   실무=시안 / 개인=핑크 — 페이지 제목·히어로 문구의 색수차에 쓰인 사이트
   고유 조합이라 겉돌지 않고, 색상환에서 정반대라 얇은 선으로도 구분된다.

   글자가 사라진 만큼 "무슨 색이 무슨 분류인지"를 알 곳이 필요한데,
   갤러리 위 필터 버튼이 같은 색을 달고 있어 그것이 범례 역할을 한다. */
body[data-page="3d-art"] .gallery-item.type-professional,
body[data-page="2d-art"] .gallery-item.type-professional {
  border-color: rgba(91, 232, 232, 0.45);
}

body[data-page="3d-art"] .gallery-item.type-personal,
body[data-page="2d-art"] .gallery-item.type-personal {
  border-color: rgba(255, 111, 216, 0.45);
}

/* 호버한 카드만 해당 색이 또렷해진다 */
body[data-page="3d-art"] .gallery-item.type-professional:hover,
body[data-page="2d-art"] .gallery-item.type-professional:hover {
  border-color: var(--cyan);
}

body[data-page="3d-art"] .gallery-item.type-personal:hover,
body[data-page="2d-art"] .gallery-item.type-personal:hover {
  border-color: var(--pink);
}

@media (max-width: 760px) {
  /* 모바일은 한 화면에 더 많이 훑어볼 수 있도록 3열을 유지한다.
     16:9 칸이라 높이는 낮아지지만, 넘겨보며 고르는 용도에는 밀도가 낫다.
     (한 장을 크게 보고 싶으면 2열로 낮추면 된다) */
  body[data-page="dear-father"] .gallery-grid,
  body[data-page="3d-art"] .gallery-grid,
  body[data-page="2d-art"] .gallery-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 760px) {
  .df-intro {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
}

/* ---------- Resume page ---------- */
.resume-profile {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2.5rem;
  align-items: start;
  text-align: left;
}

.resume-photo {
  border-radius: 6px;
  border: 1px solid var(--line);
}

.social-links {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

.social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 6px;
  border: 1px solid var(--line);
  color: var(--muted);
  transition: color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
}

.social-link svg {
  width: 20px;
  height: 20px;
}

.social-link:hover {
  color: var(--purple);
  border-color: var(--purple);
  transform: translateY(-2px);
}

.resume-intro .signature {
  font-size: 2rem;
  margin-bottom: 0.35rem;
}

/* PC: 필기체 서명 + 소개글 전체를 살짝 위로 올려준다(모바일은 별도 간격 규칙 적용) */
@media (min-width: 861px) {
  .resume-intro {
    margin-top: -15px;
  }
}

.resume-intro p {
  color: var(--muted);
  margin: 0 0 0.9rem;
}

.resume-intro strong {
  color: var(--purple);
  font-weight: 600;
}

.resume-content {
  display: grid;
  grid-template-columns: 1.6fr 1fr;
  gap: 3rem;
  padding-bottom: 3rem;
  align-items: start;
}

/* 섹션 헤딩: 페이지 타이틀(디스플레이)과 본문 사이 단계 */
.resume-main h2,
.resume-side h3 {
  color: var(--purple);
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-size: 1.3rem;
  border-bottom: 1px solid var(--line);
  padding-bottom: 0.75rem;
  margin-bottom: 1.25rem;
}

.experience-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.experience-item {
  padding: 1.1rem 0;
  border-bottom: 1px dashed var(--line);
}

.experience-item:first-child {
  padding-top: 0;
}

/* 분류 라벨: 매 행 반복되는 메타데이터라 톤 다운한 시안을 쓴다.
   호버 시에만 풀채도로 살아나 "지금 보고 있는 항목"을 표시한다. */
.exp-category {
  color: var(--cyan-dim);
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  margin: 0 0 0.3rem;
  transition: color 0.2s ease;
}

.experience-item:hover .exp-category {
  color: var(--cyan);
}

/* 각 행의 앵커. 본문보다 한 단계 크게 두어 목록을 훑을 때
   프로젝트명이 먼저 잡히게 한다. */
.exp-title {
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1.45;
  margin: 0 0 0.3rem;
}

.exp-title span {
  color: var(--pink);
}

.exp-company {
  font-size: 0.95rem;
  font-weight: 300;
  color: var(--muted);
  margin: 0;
}

.exp-period {
  color: var(--muted);
  font-size: 0.88rem;
  margin: 0.15rem 0 0;
}

/* ---------- 경력 프로젝트 호버 썸네일 (PC 전용) ----------
   프로젝트 박스에 마우스를 올리면 커서 우하단을 따라다니는 작은 썸네일이
   뜬다. JS(script.js)가 body 에 .exp-thumb 하나를 만들어 위치/내용만 갱신한다.
   Summoners War 2 처럼 비공개 프로젝트는 이미지 대신 스캔라인 패턴 위에
   CONFIDENTIAL 문구를 보여준다. */
.exp-thumb {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 60;
  width: 420px;
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  border-radius: 6px;
  overflow: hidden;
  background: var(--panel);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.55);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px) scale(0.98);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.exp-thumb.show {
  opacity: 1;
  transform: none;
}

.exp-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* 비공개 프로젝트: 스캔라인 패턴 + CONFIDENTIAL */
.exp-thumb-confidential {
  position: absolute;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: var(--panel);
  background-image: repeating-linear-gradient(
    0deg,
    transparent 0,
    transparent 5px,
    rgba(185, 139, 255, 0.09) 5px,
    rgba(185, 139, 255, 0.09) 6px
  );
}

.exp-thumb-confidential span {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.28em;
  color: #c7c7d2;
  padding: 0.28rem 0.7rem;
  border: 1px solid var(--line);
  border-radius: 4px;
  background: rgba(6, 6, 8, 0.6);
}

.exp-thumb.confidential img {
  display: none;
}

.exp-thumb.confidential .exp-thumb-confidential {
  display: flex;
}

/* 모바일에서는 호버 썸네일 자체를 쓰지 않는다 */
@media (max-width: 860px) {
  .exp-thumb {
    display: none !important;
  }
}

.resume-side {
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
}

.side-block ul {
  list-style: none;
  margin: 0;
  padding: 0;
  color: var(--muted);
}

.side-block li {
  padding: 0.25rem 0;
}

.side-block p {
  color: var(--muted);
  margin: 0.25rem 0;
}

.award-frame {
  margin-top: 0.75rem;
  max-width: 200px;
  border-radius: 6px;
  border: 1px solid var(--line);
  overflow: hidden;
}

.award-image {
  width: 100%;
  transition: transform 0.3s ease;
}

.award-frame:hover .award-image {
  transform: scale(1.08);
}

.resume-contact {
  padding-bottom: 4rem;
}

.resume-contact a {
  transition: color 0.2s ease;
}

/* ---------- Footer ---------- */
/* 푸터는 타입 스케일의 최하단(캡션). 이전에는 본문과 같은 1rem 이라
   페이지 마지막에서 시선을 불필요하게 붙잡았다. */
.site-footer {
  border-top: 1px solid var(--line);
  padding: 1.75rem 0 2rem;
  color: var(--muted);
  text-align: center;
  font-size: 0.85rem;
}

/* 홈 히어로 인트로: 푸터(Copyright 영역)도 PORTFOLIO CATEGORIES 탭과
   동시에(같은 타이밍으로) 살짝 위로 올라오며 페이드인 된다. */
body[data-page="home"] .site-footer {
  opacity: 0;
  animation: section-fade-up 2s ease forwards;
  animation-delay: 4s;
}

@media (prefers-reduced-motion: reduce) {
  body[data-page="home"] .site-footer {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.footer-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.75rem;
  align-items: center;
}

/* 카피라이트: 보라색, 위쪽 줄 */
.footer-copyright {
  margin: 0;
  color: var(--purple);
}

/* Contact + 양옆 빗금: 아래쪽 줄, 화이트 */
.footer-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.footer-contact a {
  color: var(--text);
  transition: color 0.2s ease;
}

.footer-contact a:hover,
.resume-contact a:hover {
  color: var(--purple);
}

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.9);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  z-index: 40;
}

.lightbox.open {
  display: flex;
}

.lightbox-content {
  max-width: 92vw;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lightbox img {
  max-width: 100%;
  max-height: 78vh;
  width: auto;
  height: auto;
  margin: 0;
  object-fit: contain;
}

.lightbox-caption {
  text-align: center;
  margin-top: 1rem;
  color: var(--muted);
}

.lightbox-close,
.lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  color: white;
  border: 0;
  font-size: 3.4rem;
  transition: color 0.2s ease;
  /* cursor 는 커서 시스템(cursor-trail.css)의 button 규칙에 맡긴다
     (여기서 pointer 를 지정하면 호버 커서가 손가락↔보라색으로 깜박임) */
}

.lightbox-close svg,
.lightbox-nav svg {
  width: 1em;
  height: 1em;
}

.lightbox-close:hover,
.lightbox-nav:hover {
  color: var(--purple);
}

.lightbox-close {
  top: 3.25rem;
  right: 3.25rem;
}

.lightbox-nav {
  top: 50%;
  transform: translateY(-50%);
  font-size: 4.25rem;
}

.lightbox-nav.prev {
  left: 3.75rem;
}

.lightbox-nav.next {
  right: 3.75rem;
}

@media (max-width: 640px) {
  .lightbox-close,
  .lightbox-nav {
    font-size: 2.4rem;
  }

  .lightbox-close {
    top: 2.25rem;
    right: 2.25rem;
  }

  .lightbox-nav.prev {
    left: 2.25rem;
  }

  .lightbox-nav.next {
    right: 2.25rem;
  }
}

/* PC 전용: 메뉴바를 25px 더 키우고 로고를 145% 확대.
   모바일(max-width:860px)은 원본 그대로 유지한다.
   header-inner 가 이미 align-items:center 라 높이가 늘어나도
   버튼/로고는 자동으로 세로 가운데 재정렬된다. */
@media (min-width: 861px) {
  .site-header {
    padding: calc(0.55rem + 12.5px) 0;
  }

  .logo-link {
    width: 104px;
  }

  .logo-img {
    width: 104px;
  }
}

@media (max-width: 860px) {
  /* 모바일 전역 축소 레버.
     기준 글자 크기를 16px -> 14px 로 낮추면 rem 으로 잡힌 모든 글자와
     여백이 한 번에 12.5% 줄어든다. 폰트를 하나씩 재정의하는 것보다
     비율이 무너지지 않고, 여백까지 같이 줄어 화면이 늘어지는 느낌도 함께
     잡힌다. 한 줄에 들어가는 글자 수가 늘어 줄바꿈도 줄어든다.
     이미 10px 이하로 작은 요소(카드 문구, 푸터)는 아래에서 rem 값을 키워
     기존 픽셀 크기를 유지한다. */
  html {
    font-size: 84%;
  }

  /* 메뉴 드롭다운(.site-nav, 헤더의 자식)이 로컬라이징 배지보다 항상 위에
     그려지도록, 형제 요소인 헤더/배지에 명시적 쌓임 순서를 준다.
     (둘 다 backdrop-filter 로 스태킹 컨텍스트가 생겨 DOM 순서대로
     그려지던 것이 원인 — z-index 는 positioned 요소에만 적용된다.) */
  .site-header {
    position: relative;
    z-index: 2;
    /* 헤더 자체의 backdrop-filter 를 없애고 ::before 로 옮긴다.
       조상에 backdrop-filter 가 있으면 자식(.site-nav 드롭다운)의
       backdrop-filter 가 무시되어 블러가 렌더링되지 않기 때문. */
    background: transparent;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }

  .site-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(6, 6, 8, 0.65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
  }

  /* 모바일 상단 여백.
     국기 버튼이 헤더 안으로 들어가면서 고정 헤더가 약 120px → 66px 로
     낮아졌다. 예전의 -20px 음수 마진은 그 큰 헤더를 전제로 한 보정이라,
     지금 그대로 두면 콘텐츠가 헤더 밑으로 파고든다(프로필 제목이 실제로
     7px 가려졌다). 값을 줄여 헤더 바로 아래에 붙되 가리지는 않게 한다. */
  .hero {
    padding-top: 0.65rem;
    margin-top: -8px;
  }

  /* .page-hero-compact 만 페이지 최상단 제목 블록이다. (.page-hero 단독은
     프로필 본문 .resume-hero 뿐이라, 여기에 음수 마진을 주면 본문이 제목
     위로 끌려 올라가 겹친다 — 실제로 6px 겹쳐 있었다.) */
  .page-hero-compact {
    padding-top: 1rem;
    margin-top: 0;
  }

  /* 프로필: 제목과 사진이 붙지 않도록 본문 블록에 여백을 준다 */
  .page-hero-compact + .resume-hero {
    padding-top: 0.75rem;
  }

  /* 타이틀 이미지와 ARTWORK COLLECTION 사이 간격 확보(기존 18px → 약 2.5배) */
  .featured-section {
    margin-top: -12px;
  }

  /* 좁은 화면에서 영문 eyebrow(ARTWORK COLLECTION)는 자간이 넓어 두 줄로
     넘칠 만큼 커 보인다. 한 단계 더 줄인다.
     html[lang="ko"] .eyebrow 가 명시도가 높아 한글도 같이 재정의해야
     실제로 적용된다. */
  .eyebrow {
    font-size: 0.95rem;
    letter-spacing: 0.22em;
  }

  html[lang="ko"] .eyebrow {
    font-size: 0.95rem;
    letter-spacing: 0.26em;
  }

  body[data-page="home"] .site-footer {
    margin-top: -20px;
  }

  /* 4개 카테고리 카드는 모바일에서도 한 줄에 나오도록 유지하고,
     좁은 폭에 맞춰 이미지/여백/글자 크기를 줄인다. */
  .card-grid {
    gap: 0.35rem;
  }

  /* 홈 소개 블록: 위 여백은 좁히되, 아래는 "작업 컬렉션"과 구분되도록
     PC 와 마찬가지로 넉넉히 남긴다. */
  .home-intro {
    padding: 0.8rem 0 2.25rem;
  }

  /* PC(50/20/18px)의 비율을 유지하며 좁은 화면에 맞춰 줄인다.
     직함과 인용문은 크기 차이가 크지 않고 색(보라 vs 회색)이 둘을 갈라준다. */
  .home-intro-name {
    font-size: 2.4rem;
  }

  .home-intro-role {
    font-size: 1.05rem;
  }

  .home-intro-quote {
    font-size: 0.95rem;
    margin-top: 0.5rem;
  }

  /* 모바일에서만 우측 하단 로고를 살짝 키운다(PC는 9.3% 그대로) */
  .hero-logo-mark {
    width: 11%;
  }

  .category-card img {
    height: 100px;
  }

  .card-copy {
    padding: 0.5rem 0.5rem 0.65rem;
  }

  /* 모바일은 카드가 훨씬 작아 6px 주기 그대로면 상대적으로 라인이 듬성듬성해
     보인다. PC와 비슷한 밀도로 보이도록 주기를 절반(3px)으로 좁힌다. */
  .card-copy::before {
    background-image: repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(185, 139, 255, 0.09) 2px,
      rgba(185, 139, 255, 0.09) 3px
    );
  }

  /* 카드 4개를 한 줄에 유지해야 해서 이미 10px 내외다. 루트 축소분만큼
     rem 을 키워 기존 크기를 지킨다(여기서 더 줄면 판독 불가). */
  .card-copy h3 {
    font-size: 0.74rem;
    letter-spacing: 0.03em;
  }

  .card-copy p {
    font-size: 0.72rem;
    line-height: 1.3;
  }

  .resume-profile,
  .resume-content {
    grid-template-columns: 1fr;
  }

  /* 모바일: 프로필 사진 행과 소개글 행 사이 간격을 10px로 좁힌다 */
  .resume-profile {
    row-gap: 10px;
  }

  .resume-photo {
    width: 140px;
  }

  /* 모바일: 링크드인/페이스북 아이콘을 프로필 사진 우측 옆, 사진 하단에 맞춰 배치 */
  .resume-photo-col {
    display: flex;
    align-items: flex-end;
    gap: 1rem;
  }

  .social-links {
    margin-top: 0;
  }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.25rem;
    background: rgba(6, 6, 8, 0.65);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    padding: 0.75rem;
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 14px 14px;
    box-shadow: 0 16px 32px rgba(0, 0, 0, 0.45);
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-8px);
    pointer-events: none;
    transition: max-height 0.3s ease, opacity 0.25s ease, transform 0.25s ease;
    z-index: 30;
  }

  .site-nav.open {
    max-height: 24rem;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
  }

  .site-nav a {
    width: 100%;
    text-align: center;
    padding: 0.85rem 1rem;
    border-radius: 8px;
  }

  /* 모바일 드롭다운에서는 하단 라인 대신 배경 필로 강조 */
  .site-nav a::after {
    content: none;
  }

  .site-nav a.active {
    background: rgba(185, 139, 255, 0.16);
  }

  /* 기본 규칙의 position:absolute 를 푼다. 그래야 flex 흐름에 들어가
     국기 버튼 다음에(오른쪽 끝에) 자연스럽게 놓인다. */
  .menu-toggle {
    display: block;
    position: static;
  }

  .logo-row {
    width: 100%;
    justify-content: space-between;
  }
}

@media (max-width: 560px) {
  .hero {
    padding-top: 2rem;
  }

  .footer-wrap {
    flex-direction: column;
  }

  /* 카드 이미지/문구가 4칸을 채우기엔 여전히 넓어, 좁은 화면에서 한 번 더 줄인다.
     설명 문구는 그대로 두되 아주 작게 줄여 카드 폭 안에서 줄바꿈되게 한다. */
  .category-card img {
    height: 68px;
  }

  .card-copy {
    padding: 0.35rem 0.3rem 0.45rem;
  }

  .card-copy h3 {
    font-size: 0.615rem;
    margin-bottom: 2px;
  }

  .card-copy p {
    font-size: 0.573rem;
    line-height: 1.25;
  }

  /* 카피라이트/컨택트 문구는 각각 한 줄에 들어와야 해 이미 9~10px 다.
     루트 축소분만큼 rem 을 키워 기존 크기를 유지한다. */
  .footer-copyright,
  .footer-contact {
    font-size: 0.72rem;
  }

  .footer-copyright {
    white-space: nowrap;
  }

  .footer-contact {
    flex-wrap: nowrap;
  }

  .footer-contact a {
    white-space: nowrap;
  }

  .footer-contact .hatch {
    width: 32px;
  }
}