@font-face {
  font-family: 'NotoSansKR';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/NotoSansKR-Regular.woff2') format('woff2'), url('fonts/NotoSansKR-Regular.woff') format('woff');
}
@font-face {
  font-family: 'NotoSansKR';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/NotoSansKR-Bold.woff2') format('woff2'), url('fonts/NotoSansKR-Bold.woff') format('woff');
}
@font-face {
  font-family: 'NotoSerifKR';
  font-style: normal; font-weight: 400; font-display: swap;
  src: url('fonts/NotoSerifKR-Regular.woff2') format('woff2'), url('fonts/NotoSerifKR-Regular.woff') format('woff');
}
@font-face {
  font-family: 'NotoSerifKR';
  font-style: normal; font-weight: 700; font-display: swap;
  src: url('fonts/NotoSerifKR-Bold.woff2') format('woff2'), url('fonts/NotoSerifKR-Bold.woff') format('woff');
}

@font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSansKR-Medium.woff2') format('woff2'); }
@font-face { font-family: 'NotoSansKR'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/NotoSansKR-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'NotoSerifKR'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/NotoSerifKR-Medium.woff2') format('woff2'); }
@font-face { font-family: 'NotoSerifKR'; font-style: normal; font-weight: 600; font-display: swap; src: url('fonts/NotoSerifKR-SemiBold.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('fonts/JetBrainsMono-Regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('fonts/JetBrainsMono-Medium.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('fonts/JetBrainsMono-Bold.woff2') format('woff2'); }


/* ============================================================
   DESIGN SYSTEM v3.0 — 박종혁 Combat Designer Portfolio 2026
   실무 문서형 (Documentary, not Game UI)
   
   원칙:
   - "예뻐지는" 게 아니라 "덜 보이는" 것
   - 한 화면당 시선 정착 지점은 1개
   - 게임처럼 보이는 것보다 전투를 설계하는 사람처럼 보이는 것
   ============================================================ */

:root {
  /* === 배경 (3단계, 단순화) === */
  --bg-base:     #0d0d0d;   /* 거의 검정, 약간의 회색 */
  --bg-card:     #161616;   /* 카드 / 박스 배경 */
  --bg-card-hi:  #1c1c1c;   /* 호버 시 미세 변화 (거의 안 보이는 정도) */

  /* === 보더 (2단계, 모두 단색) === */
  --line:        #262626;   /* 기본 보더 */
  --line-hi:     #3a3a3a;   /* 강조 보더 (제한적 사용) */

  /* === 텍스트 (3단계 화이트) === */
  --text:        #e8e8e8;   /* 순백보다 약간 부드러운 (#fff는 너무 강함) */
  --text-mid:    #a0a0a0;   /* 본문 */
  --text-dim:    #8a8a8a;   /* 캡션 / 라벨 / 보조 — 가독성 위해 상향(#5e5e5e→#8a8a8a, 대비 2.9→5.6) */

  /* === 강조색 (desaturated copper, 매우 제한적 사용) === */
  --accent:        #a86b48;   /* 메인 강조 */
  --accent-hi:     #c4825a;   /* 호버 (거의 안 씀) */
  --accent-soft:   rgba(168, 107, 72, 0.08);   /* 박스 배경 (거의 안 씀) */
  
  /* === 호환성을 위한 alias (페이지별 강조색 클래스가 모두 같은 색으로) === */
  --blue:        var(--accent);
  --blue-hi:     var(--accent-hi);
  --blue-deep:   var(--accent);
  --blue-soft:   var(--accent-soft);
  --blue-glow:   transparent;  /* 글로우 제거 */
  --accent-deep: var(--accent);
  --accent-glow: transparent;

  /* === 폰트 === */
  --serif:    'NotoSerifKR', serif;
  --sans:     'NotoSansKR', sans-serif;
  --display:  'NotoSansKR', sans-serif;
  --mono:     'JetBrains Mono', monospace;
}

/* ============================================================
   페이지 강조색 클래스 — 모든 페이지 동일한 톤
   ============================================================ */
body.accent-gold, body.accent-steel, body.accent-amber,
body.accent-holy, body.accent-amethyst, body.accent-cyan,
body.accent-electric, body.accent-blue, body.accent-copper {
  /* 강조색은 모두 copper로 통일, 페이지별 차별화는 색이 아닌 컨텐츠로 */
}

/* ============================================================
   기본 리셋 및 베이스
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  background: var(--bg-base);
  color: var(--text);
  font-family: var(--sans);
  font-weight: 400;
  line-height: 1.75;  /* 줄 간격 넉넉하게 */
  overflow-x: hidden;
  /* 배경 그라데이션 제거 — 순수 단색 */
}

::selection {
  background: var(--accent);
  color: var(--bg-base);
}


/* ============================================================
   컨테이너
   ============================================================ */
.container {
  max-width: 1100px;  /* 1280 → 1100, 여백 늘림 */
  margin: 0 auto;
  padding: 0 56px;  /* 좌우 여백 확대 */
  position: relative;
}


/* ============================================================
   메타바 — 매우 단순하게
   ============================================================ */
.meta-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 56px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-base);
  /* backdrop-filter 제거, sticky 제거 — 스크롤 시 따라오지 않음 */
}
.meta-bar .left {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  text-transform: none;
}
.meta-bar .center {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
}
.meta-bar .right {
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.15em;
}


/* ============================================================
   페이지 네비 — 제거 (스크롤 인덱스 불필요)
   기존 .page-nav는 display:none 처리해서 사라지게 함
   ============================================================ */
.page-nav {
  display: none;
}


/* ============================================================
   HERO — 단순한 페이지 헤더로 격하
   거대한 활자와 글로우 모두 제거
   ============================================================ */
.hero, .cover-hero {
  padding: 80px 0 60px;
  border-bottom: 1px solid var(--line);
  position: relative;
}
/* hero::before의 글로우 모두 제거 */
.hero::before, .hero::after,
.cover-hero::before, .cover-hero::after {
  display: none;
}

.hero-eyebrow {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.15em;
  color: var(--text-dim);
  margin-bottom: 24px;
  text-transform: none;
}
/* hero-eyebrow의 ::before 선 장식 제거 */
.hero-eyebrow::before {
  display: none;
}

.hero h1, .cover-hero h1 {
  font-family: var(--serif);
  font-weight: 700;  /* 900 → 700, 더 차분 */
  font-size: 38px;   /* 64 → 38, 대폭 축소 */
  line-height: 1.4;
  color: var(--text);
  margin-bottom: 24px;
  letter-spacing: -0.01em;
}
.hero h1 .accent, .hero h1 .em,
.cover-hero h1 .accent, .cover-hero h1 .em {
  /* 이탤릭 + 글로우 제거 → 단순 색 강조만 */
  color: var(--accent);
  font-style: normal;
  text-shadow: none;
  font-weight: 700;
}

.hero-sub {
  font-family: var(--sans);  /* serif → sans, 더 건조 */
  font-size: 16px;           /* 18 → 15, 본문에 가깝게 */
  color: var(--text-mid);
  line-height: 1.75;
  max-width: 720px;
  margin-bottom: 0;  /* 하단 stat-grid 제거되므로 마진 불필요 */
}
.hero-sub strong {
  color: var(--text);
  font-weight: 500;
}
.hero-sub em {
  /* 이탤릭 거의 금지 — em 사용 시에도 그냥 강조만 */
  color: var(--text);
  font-style: normal;
  font-weight: 500;
}


/* ============================================================
   STAT GRID — 거의 안 보이게 (제거 권장)
   페이지 작업 시 직접 삭제할 수 있도록 비활성화
   ============================================================ */
.stat-grid {
  display: none;  /* 완전 제거 */
}


/* ============================================================
   섹션 — 단순한 구분
   ============================================================ */
section {
  padding: 64px 0;  /* 90 → 64, 좀 더 조밀하게 */
  border-bottom: 1px solid var(--line);
}

.section-head {
  /* flex 분할 구조 폐기 — 단순 세로 배치 */
  display: block;
  margin-bottom: 40px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.section-num {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
  text-transform: none;
}
.section-title {
  font-family: var(--serif);
  font-size: 24px;  /* 40 → 24, 대폭 축소 */
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-top: 8px;
}
.section-kicker {
  /* 섹션 head의 우측 부가 텍스트 — 거의 안 보이게 */
  display: none;
}


/* ============================================================
   푸터 — 매우 단순하게
   ============================================================ */
footer {
  padding: 32px 0;  /* 60 → 32 */
  border-top: 1px solid var(--line);
  background: var(--bg-base);
}
footer .container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
}
footer .credit {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
footer .name {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 400;
  color: var(--text-dim);
  margin-top: 0;  /* 블록 → 인라인 정렬 */
}
footer .nav-mini {
  margin-top: 0;
  font-family: var(--mono);
  font-size: 11px;
  color: var(--text-dim);
  letter-spacing: 0.1em;
}
footer .nav-mini a {
  color: var(--text-dim);
  text-decoration: none;
  transition: color 0.15s;
}
footer .nav-mini a:hover { color: var(--accent); }
footer .nav-mini span { margin: 0 8px; color: var(--line); }

/* ============================================================
   전체 페이지 탐색 (footer)
   ============================================================ */
.page-jump { flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 2px; margin-top: 6px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.page-jump a { color: var(--text-dim); text-decoration: none; padding: 3px 8px; transition: color 0.15s; }
.page-jump a:hover { color: var(--accent); }
.page-jump .pj-toc { color: var(--text-mid); margin-right: 6px; }
.page-jump .cur { color: var(--accent); padding: 3px 8px; border: 1px solid var(--accent); }

/* ============================================================
   통합 하단 내비게이션 — NEXT + 현재 페이지 + 전체 이동
   ============================================================ */
footer.site-footer {
  padding: 0;
  border-top: 1px solid var(--line-hi);
}
footer.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  flex-wrap: nowrap;
  gap: 0;
}
.footer-next {
  order: 2;
  display: flex;
  justify-content: flex-end;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 40px 0 36px;
  border-bottom: 0;
  color: var(--text);
  text-decoration: none;
}
.footer-next .fn-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: var(--accent);
}
.footer-next .fn-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.45;
  color: var(--text);
  transition: color .15s;
}
.footer-next .fn-arrow {
  font-family: var(--mono);
  font-size: 24px;
  color: var(--accent);
  text-align: right;
  transition: transform .15s;
}
.footer-next:hover .fn-title { color: var(--accent); }
.footer-next:hover .fn-arrow { transform: translateX(4px); }
.footer-meta {
  order: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  padding: 24px 0;
  border-bottom: 1px solid var(--line);
}
.footer-meta .page-jump {
  flex-basis: auto;
  justify-content: flex-end;
  margin-top: 0;
}


/* ============================================================
   애니메이션 모두 제거
   ============================================================ */
.fade-up,
.fade-up.delay-1,
.fade-up.delay-2,
.fade-up.delay-3,
.fade-up.delay-4 {
  animation: none;
  opacity: 1;
  transform: none;
}


/* ============================================================
   기본 강조 — 이탤릭 사용 억제
   ============================================================ */
strong {
  color: var(--text);
  font-weight: 500;
}
em {
  /* 이탤릭 → 단순 색 강조 (페이지당 1-2번만 사용 권장) */
  color: var(--accent);
  font-style: normal;
  font-weight: 500;
}


/* ============================================================
   카드 — 매우 절제된 형태 (사용 시에만)
   border-radius: 0, 그림자 없음, 호버 효과 거의 없음
   ============================================================ */
.simple-card {
  background: var(--bg-card);
  border: 1px solid var(--line);
  padding: 32px 36px;
  /* border-radius: 0 (기본) */
}


/* ============================================================
   표 — 비교 도구로 사용
   ============================================================ */
.compare-table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}
.compare-table th,
.compare-table td {
  padding: 14px 20px;
  border: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
}
.compare-table th {
  background: var(--bg-card);
  font-family: var(--mono);
  font-weight: 400;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--text-dim);
}
.compare-table td {
  background: var(--bg-base);
  color: var(--text-mid);
  line-height: 1.6;
}
.compare-table td.intended {
  color: var(--text-dim);
}
.compare-table td.actual {
  color: var(--text);
}


/* ============================================================
   판단 박스 — 페이지의 왕 (강조 최대)
   하지만 시각적으로도 절제됨
   ============================================================ */
.judgment {
  margin: 56px 0;
  padding: 48px 56px;
  background: var(--bg-base);
  border-left: 3px solid var(--accent);
  /* 다른 보더, 배경, 그림자 모두 없음 */
}
.judgment .label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--accent);
  margin-bottom: 20px;
  text-transform: none;
}
.judgment .statement {
  font-family: var(--serif);
  font-size: 20px;
  font-weight: 500;
  color: var(--text);
  line-height: 1.6;
  letter-spacing: -0.005em;
}
.judgment .statement .emphasis {
  color: var(--accent);
  font-weight: 700;
}


/* ============================================================
   원인 리스트 — 번호 매겨진 평면 구조
   카드 없이 순수 리스트
   ============================================================ */
.cause-list {
  margin: 32px 0;
  list-style: none;
  padding: 0;
}
.cause-list li {
  display: grid;
  grid-template-columns: 60px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.cause-list li:last-child {
  border-bottom: none;
}
.cause-list .num {
  font-family: var(--mono);
  font-size: 13px;
  color: var(--accent);
  letter-spacing: 0.1em;
}
.cause-list .text {
  color: var(--text);
  font-size: 16px;
  line-height: 1.75;
}
.cause-list .text .detail {
  display: block;
  color: var(--text-mid);
  font-size: 14px;
  margin-top: 6px;
}


/* ============================================================
   반응형
   ============================================================ */
@media (max-width: 900px) {
  .container { padding: 0 24px; }
  .meta-bar { padding: 14px 24px; }
  .hero, .cover-hero { padding: 56px 0 40px; }
  .hero h1, .cover-hero h1 { font-size: 28px; }
  .hero-sub { font-size: 14px; }
  .section-title { font-size: 20px; }
  .judgment { padding: 32px 28px; }
  .judgment .statement { font-size: 18px; }
  footer .container { flex-direction: column; align-items: flex-start; gap: 8px; }
  footer.site-footer .container { display: flex; }
  .footer-meta { align-items: flex-start; flex-direction: column; gap: 12px; }
  .footer-meta .page-jump { justify-content: flex-start; }
}

@media (max-width: 600px) {
  .hero h1, .cover-hero h1 { font-size: 24px; }
  .section-title { font-size: 18px; }
  .judgment .statement { font-size: 16px; }
  .cause-list li { grid-template-columns: 40px 1fr; gap: 16px; }
  .footer-next { gap: 8px 14px; padding: 30px 0 28px; }
  .footer-next .fn-title { font-size: 18px; }
  .footer-next .fn-arrow { font-size: 20px; }
  .page-jump a, .page-jump .cur { padding: 4px 7px; }
}

.backtop{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:12px;letter-spacing:0.12em;color:var(--text-mid);text-decoration:none;}
.backtop:hover{color:var(--accent);}


/* =========================================================
   UNIFIED SITE HEADER / FOOTER  — 전 페이지 공통 상·하단바
   (표지 · 01 · 10 과 동일한 디자인을 모든 페이지에 적용)
   ========================================================= */
.site-head { position: sticky; top: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 13px 32px; border-bottom: 1px solid var(--line); background: var(--bg-base); }
.site-head .nav-home { display: inline-flex; align-items: center; color: var(--text-mid); text-decoration: none; }
.site-head .nav-home svg { display: block; }
.site-head .nav-home:hover { color: var(--accent); }
.site-head .nav-home.is-current { color: var(--text); }
.site-head .sh-name { font-family: var(--serif); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.01em; line-height: 1.15; }
.site-head .sh-email { display: inline-block; margin-top: 1px; font-family: var(--mono); font-size: 12px; color: var(--text-mid); text-decoration: none; letter-spacing: 0.02em; line-height: 1.2; }
.site-head .sh-email:hover { color: var(--accent); }
.site-nav { display: flex; gap: 30px; align-items: center; }
.site-nav .nav-top { display: inline-flex; align-items: center; gap: 5px; line-height: 1; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-mid); text-decoration: none; cursor: pointer; white-space: nowrap; }
.site-nav .nav-top:hover, .site-nav .nav-item:hover .nav-top { color: var(--accent); }
.site-nav .nav-top.is-current { color: #fff; font-weight: 700; }
.site-nav .caret { font-size: 10px; }
.site-nav .nav-item { position: relative; display: inline-flex; align-items: center; }
.site-nav .nav-item::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 18px; }
.site-nav .dropdown { position: absolute; top: calc(100% + 12px); right: 0; min-width: 190px; background: var(--bg-card); border: 1px solid var(--line-hi); padding: 6px 0; opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .15s, transform .15s; z-index: 60; }
.site-nav .nav-item:hover .dropdown, .site-nav .nav-item:focus-within .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.site-nav .dropdown .dd-head { padding: 9px 20px 8px; margin-bottom: 5px; border-bottom: 1px solid var(--line); font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-align: right; color: var(--text-dim); white-space: nowrap; }
.site-nav .dropdown a { display: block; padding: 11px 20px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; text-align: right; color: var(--text-mid); text-decoration: none; white-space: nowrap; }
.site-nav .dropdown a:hover { background: var(--bg-card-hi); color: var(--accent); }
.site-nav .dropdown a.is-current { color: var(--accent); }

.site-foot { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 12px 24px; padding: 22px 32px; border-top: 1px solid var(--line); margin-top: 0; }
.site-foot .sf-copy { order: 1; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--text-dim); }
.site-foot .sf-top { order: 2; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--text-mid); text-decoration: none; display: inline-flex; align-items: center; gap: 8px; }
.site-foot .sf-top:hover { color: var(--accent); }
.site-foot .sf-top .arr { font-size: 13px; }
.site-foot .sf-jump { order: 3; flex-basis: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 2px; margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; }
.site-foot .sf-jump a { color: var(--text-dim); text-decoration: none; padding: 3px 8px; transition: color .15s; }
.site-foot .sf-jump a:hover { color: var(--accent); }
.site-foot .sf-jump .pj-toc { color: var(--text-mid); margin-right: 6px; }
.site-foot .sf-jump .cur { color: var(--accent); padding: 3px 8px; border: 1px solid var(--accent); }
@media (max-width: 720px) {
  .site-head { padding: 12px 18px; gap: 16px; }
  .site-nav { gap: 18px; }
  .site-foot { padding: 18px 20px; }
}

/* floating back-to-top file tab */

/* compact page dots */
.page-list { border-top: 1px solid var(--line); position: relative; }
/* next-page hint — the dot for the next page stays lit (card below is the main cue) */
.page-list .pl-dot-next { color: var(--accent); }
.page-list .pl-dot-next::before { opacity: 1; transform: scale(1.15); }

/* next-project card — end-of-body wayfinding, above the page dots */
.next-card { display: block; text-decoration: none; border-top: 1px solid var(--line); background: var(--bg-base);
  transition: background .2s ease; }
.next-card:hover { background: var(--bg-card); }
.next-card .container { display: flex; align-items: center; justify-content: center; gap: 12px; padding-top: 14px; padding-bottom: 14px; }
.next-card .nc-thumb, .next-card .nc-thumb.nc-sil { display: none; }
.next-card .nc-kicker { font-family: var(--mono); font-size: 10px; letter-spacing: .16em; color: var(--text-dim); }
.next-card .nc-title { text-align: center; font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--text-mid); line-height: 1.3;
  transition: color .2s ease; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.next-card:hover .nc-kicker { color: var(--accent); }
.next-card:hover .nc-title { color: var(--text); }
.next-card .nc-arrow { display: inline-flex; align-items: center; justify-content: center;
  color: var(--text-dim); transition: transform .2s ease, color .2s ease; }
.next-card .nc-arrow svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.next-card:hover .nc-arrow { color: var(--accent); transform: translateX(4px); }
.page-list .container { display: flex; flex-direction: column; align-items: center; justify-content: center; padding-top: 28px; padding-bottom: 30px; }
.page-list .pl-dots { display: flex; align-items: center; justify-content: center; gap: 12px; }
.page-list .pl-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-family: var(--mono); font-size: 10px; letter-spacing: .04em; color: var(--text-dim); text-decoration: none; transition: color .2s ease, background .2s ease; }
.page-list .pl-dot::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .65; transition: transform .2s ease, opacity .2s ease; }
.page-list .pl-dot::after { content: attr(data-title); position: absolute; left: 50%; bottom: calc(100% + 8px); transform: translate(-50%, 3px); padding: 6px 9px; background: rgba(10,10,10,.92); border: 1px solid var(--line-hi); color: #fff; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; white-space: nowrap; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .08s ease, transform .08s ease, visibility .08s; }
.page-list .pl-dot .pl-num { display: none; }
.page-list .pl-dot:hover { color: var(--accent); background: rgba(168,107,72,.08); }
.page-list .pl-dot:hover::before { opacity: 1; transform: scale(1.25); }
.page-list .pl-dot:hover::after { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.page-list .pl-dot.is-current { color: #fff; background: rgba(255,255,255,.06); }
.page-list .pl-dot.is-current::before { width: 7px; height: 7px; opacity: 1; box-shadow: 0 0 10px rgba(255,255,255,.42); }
.page-list .pl-dot.is-current .pl-current-label { position: absolute; top: calc(100% + 4px); left: 50%; transform: translateX(-50%); font-family: var(--mono); font-size: 10px; letter-spacing: .18em; color: #fff; text-transform: uppercase; white-space: nowrap; }
.page-list .pl-dot.is-current:hover { color: var(--accent); background: rgba(168,107,72,.08); }
.page-list .pl-dot.is-current:hover::before { box-shadow: 0 0 10px rgba(168,107,72,.45); }
.page-list .pl-dot.is-current:hover .pl-current-label { color: var(--accent); }
/* 페이지 리스트 카테고리 구분선 — 점 한 칸 자리를 차지하는 세로선 */
.page-list .pl-sep { display: inline-block; width: 30px; height: 30px; position: relative; flex: 0 0 auto; }
.page-list .pl-sep::before { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 1px; height: 14px; background: var(--line-hi); }
@media (max-width: 560px) { .page-list .pl-dots { gap: 6px; } .page-list .pl-dot { width: 28px; height: 28px; } .page-list .pl-sep { width: 20px; } }


/* 상단바 현재 페이지 강조: 흰색, 호버 시 강조색 (nav-top.is-current 흰색) */
.site-nav .nav-top.is-current { color: #fff; font-weight: 700; }
.site-nav .nav-top.is-current:hover { color: var(--accent); }
.site-nav .nav-item:hover .nav-top.is-current { color: var(--accent); }
.site-nav .dropdown a.is-current { color: #fff; }
.site-nav .dropdown a.is-current:hover { color: var(--accent); }

/* 앵커 점프 시 상단 sticky 헤더에 가리지 않도록 */
section[id], .blk[id], [id].sec { scroll-margin-top: 74px; }


/* 판단의 이유 — 문제→판단 리드 문장 (문제 → 왜 → 판단 → 구조 → 사례) */
.sec .why { font-family: var(--sans); font-size: 14px; color: var(--text-mid); line-height: 1.75; margin: 6px 0 28px; padding-left: 16px; border-left: 2px solid var(--accent); max-width: 780px; }
.sec .why b { color: var(--accent); font-weight: 600; }


/* ========== 프로젝트 페이지 공통 히어로 (표지형) ========== */
.proj-hero { position:relative; height:520px; overflow:hidden; border-bottom:1px solid var(--line); background:#0a0a0a; }
.proj-hero .ph-media { position:absolute; inset:0; overflow:hidden; background:#0a0a0a; }
.proj-hero .ph-media video, .proj-hero .ph-media img { position:absolute; top:50%; left:50%; min-width:100%; min-height:100%; width:auto; height:auto; transform:translate(-50%,-50%); object-fit:cover; filter:brightness(.8) saturate(.95); }
@keyframes phZoom { from{ transform:scale(1);} to{ transform:scale(1.08);} }
.proj-hero .ph-dim { position:absolute; inset:0; z-index:1; background:radial-gradient(92% 100% at 14% 100%, rgba(6,6,6,.9) 0%, rgba(6,6,6,.35) 46%, transparent 72%), linear-gradient(to top, #0a0a0a 0%, rgba(10,10,10,.45) 28%, transparent 60%); }
.proj-hero .ph-caption { position:absolute; left:0; top:0; z-index:3; display:flex; flex-direction:column; align-items:stretch; gap:0; padding:32px 0 0 44px; text-align:left; text-shadow:0 3px 22px rgba(0,0,0,.9); }
.proj-hero .hero-tag { font-family:var(--mono); font-size:clamp(13px,1.5vw,18px); letter-spacing:.1em; line-height:1.5; color:rgba(255,255,255,.72); margin-bottom:4px; }
.proj-hero .hero-tag .hl { color:#cf9b6e; }
.proj-hero .hero-portfolio { margin-top:2px; font-family:var(--mono); font-size:56px; font-weight:600; color:rgba(255,255,255,.9); display:flex; justify-content:space-between; }
.proj-hero .hero-portfolio .sp { flex:0 0 .5em; }
.proj-hero .hero-divline { height:2px; background:var(--accent); margin:12px 0; }
.proj-hero .hero-name { margin:0; font-family:var(--serif); font-size:clamp(24px,3vw,38px); font-weight:700; letter-spacing:-.02em; line-height:1.05; color:#fff; white-space:nowrap; }
.proj-hero .ph-spec { position:absolute; right:44px; bottom:36px; z-index:3; display:grid; grid-template-columns:auto auto; column-gap:16px; row-gap:5px; text-shadow:0 2px 12px rgba(0,0,0,.88); }
.proj-hero .ph-spec .ehs-row { display:contents; }
.proj-hero .ph-spec .k { justify-self:end; text-align:right; font-family:var(--mono); font-size:10px; letter-spacing:.12em; color:var(--accent-hi); text-transform:uppercase; }
.proj-hero .ph-spec .v { justify-self:start; text-align:left; font-family:var(--mono); font-size:12px; color:rgba(255,255,255,.9); }
@media(max-width:720px){ .proj-hero { height:340px; } .proj-hero .ph-caption { padding:0 20px 28px; } }
@media(prefers-reduced-motion:reduce){ .proj-hero .ph-media { animation:none; } }

@media(max-width:640px){ .proj-hero .ph-spec { right:20px; bottom:18px; column-gap:10px; } .proj-hero .ph-spec .v { font-size:11px; } .proj-hero .ph-spec .k { font-size:10px; } }

@keyframes btBounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }

/* ============================================================
   PAGE PAGER — 하단 이전/다음 페이지 이동
   각 페이지 <footer class="site-foot"> 바로 위에 삽입
   ============================================================ */
.pager {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  align-items: stretch;
  border-top: 1px solid var(--line);
  margin-top: 0;
}
.pager-div { background: var(--line); }
.pager-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 9px;
  padding: 40px 52px;
  min-height: 124px;
  text-decoration: none;
  transition: background .28s ease;
}
.pager-cell:hover { background: var(--bg-card); }
.pager-cell.is-empty { pointer-events: none; }
.pager-dir {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .18em;
  color: var(--text-dim);
  transition: color .28s ease;
}
.pager-cell:hover .pager-dir { color: var(--accent); }
.pager-arr {
  display: inline-block;
  font-size: 12px;
  transition: transform .3s cubic-bezier(.22,1,.36,1);
}
.pager-title {
  font-family: var(--sans);
  font-size: 20px;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text);
  transition: color .28s ease;
}
.pager-cell:hover .pager-title { color: var(--accent-hi); }
.pager-sub {
  font-family: var(--sans);
  font-size: 12px;
  color: var(--text-mid);
  letter-spacing: .01em;
}
/* 방향별 정렬 */
.pager-prev { align-items: flex-start; text-align: left; }
.pager-next { align-items: flex-end;   text-align: right; }
.pager-next .pager-dir { flex-direction: row-reverse; }
.pager-prev:hover .pager-arr { transform: translateX(-5px); }
.pager-next:hover .pager-arr { transform: translateX(5px); }
/* 끝 페이지: NEXT 자리에 안내 */
.pager-end { align-items: flex-end; text-align: right; justify-content: center; }
.pager-end .pager-dir { color: var(--text-dim); }
.pager-end .pager-title { font-size: 16px; font-weight: 400; color: var(--text-dim); }

@media (max-width: 720px) {
  .pager { grid-template-columns: 1fr; }
  .pager-div { height: 1px; width: 100%; }
  .pager-cell { padding: 26px 20px; min-height: 0; }
  .pager-next, .pager-end { align-items: flex-start; text-align: left; }
  .pager-next .pager-dir { flex-direction: row; }
}

/* ===== BACK TO TOP ===== */
.backtab { position: fixed; right: 0; top: min(calc(72vh + 80px), calc(100vh - 110px)); z-index: 200; transform: translateY(-50%) translateX(105%); display: flex; align-items: center; opacity: 0; transition: transform .32s ease, opacity .32s ease; }
.backtab.show { transform: translateY(-50%) translateX(0); opacity: 1; }
.backtab .bt-label { overflow: hidden; max-width: 0; opacity: 0; white-space: nowrap; color: #fff; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; margin-right: 0; padding: 0; background: rgba(10,10,10,.82); border-radius: 3px; text-shadow: 0 1px 4px rgba(0,0,0,.7); transition: max-width .3s ease, opacity .26s ease, margin-right .3s ease, padding .3s ease; }
.backtab:hover .bt-label { max-width: 170px; opacity: 1; margin-right: 12px; padding: 7px 12px; }
.backtab .bt-body { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 58px; background: var(--accent); color: #0d0d0d; text-decoration: none; cursor: pointer; clip-path: polygon(0 12%, 100% 0, 100% 100%, 0 88%); box-shadow: -5px 0 20px rgba(0,0,0,.45); transition: background .15s; }
.backtab:hover .bt-body { background: var(--accent-hi); }
.backtab .bt-body svg { display: block; }
.backtab .bt-body .bt-arr { transform-box: fill-box; transform-origin: center; }
.backtab:hover .bt-body .bt-arr { animation: btBounce .6s ease-in-out infinite; }
@media (max-width: 720px) { .backtab { display: none; } }