/* ==========================================================================
   신지호 — 사운드 디자이너 포트폴리오
   토큰 · 레이아웃 · 반응형
   외부 CDN 참조 없음. 폰트는 ../fonts/ 에서 자체 호스팅.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 자체 호스팅 폰트
   -------------------------------------------------------------------------- */

/* Pretendard 는 배포자가 만든 공식 한글 서브셋(.subset.woff2)을 그대로 쓴다.
   한글 2780자를 담고 있고, 우리 쪽에서 다시 가공하지 않는다. */
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Regular.subset.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('../fonts/Pretendard-Bold.subset.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('../fonts/JetBrainsMono-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   2. 디자인 토큰
   accent 는 재생 버튼 · 활성 상태 · 링크 호버에만. 제목/배경에 쓰지 않는다.
   -------------------------------------------------------------------------- */

:root {
  --bg: #0d0f11;
  --surface: #16191d;
  --line: #262b31;
  --text: #e6e8ea;
  --muted: #8b939c;
  --accent: #d8563a;
  --ok: #4a9d7f;

  /* 자체 호스팅분은 한글 2780자 서브셋이다. 그 범위를 벗어난 드문 한글은
     뒤따르는 시스템 한글 폰트가 글리프 단위로 메운다. */
  --font-body: 'Pretendard', -apple-system, BlinkMacSystemFont,
    'Segoe UI', 'Malgun Gothic', 'Apple SD Gothic Neo', 'Noto Sans KR', sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'Cascadia Mono', Consolas,
    'D2Coding', monospace;

  --wrap: 1100px;
  --pad: 20px;
  --rule: 1px solid var(--line);
}

/* --------------------------------------------------------------------------
   3. 리셋 · 기본
   -------------------------------------------------------------------------- */

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

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.7;
  font-weight: 400;
  overflow-wrap: break-word;
}

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

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

button {
  font: inherit;
  color: inherit;
  cursor: pointer;
}

h1,
h2,
h3,
h4 {
  margin: 0;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

p,
ul,
ol {
  margin: 0;
}

ul {
  padding: 0;
  list-style: none;
}

[hidden] {
  display: none !important;
}

/* 키보드 초점은 항상 보여야 한다 — 토글·복사 버튼이 전부 키보드로 눌린다 */
:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* 눈에서만 감춘다. 스크린리더는 그대로 읽는다. display:none 이 아니다. */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 var(--pad);
}

.mono {
  font-family: var(--font-mono);
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   4. 헤더
   -------------------------------------------------------------------------- */

.site-head {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--bg);
  border-bottom: var(--rule);
}

.site-head__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px 24px;
  min-height: 64px;
  padding-top: 12px;
  padding-bottom: 12px;
}

.brand {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
}

.brand__name {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.brand__role {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 400;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

.site-head__right {
  display: flex;
  align-items: center;
  gap: 10px 22px;
  flex-wrap: wrap;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 4px 20px;
  flex-wrap: wrap;
}

.site-nav__link {
  font-family: var(--font-mono);
  font-size: 12.5px;
  letter-spacing: 0.1em;
  color: var(--muted);
  padding: 6px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.site-nav__link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* 언어 토글 */
.lang {
  display: flex;
  align-items: stretch;
  border: var(--rule);
}

.lang__btn {
  appearance: none;
  background: none;
  border: 0;
  padding: 6px 11px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.12em;
  color: var(--muted);
  transition: color 0.12s linear, background-color 0.12s linear;
}
.lang__btn + .lang__btn {
  border-left: var(--rule);
}
.lang__btn:hover {
  color: var(--text);
}
.lang__btn[aria-pressed='true'] {
  color: var(--accent);
  background: var(--surface);
}

/* --------------------------------------------------------------------------
   4-B. 히어로 — 이름 · 직함 · 서문. 페이지의 유일한 h1 이 여기 있다.
   -------------------------------------------------------------------------- */

.hero {
  padding: 48px 0 0;
}

.hero__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.hero__name {
  font-size: 34px;
  letter-spacing: -0.02em;
}

.hero__role {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 서문 리드 문단. 본문(16px/1.7)보다 한 눈금 크고 행간을 넓힌다.
   폭은 랩(1100px)까지 늘리지 않는다 — 한 줄이 길어지면 다음 줄 첫머리를
   눈이 못 찾는다. max-width 로 읽기 폭을 끊는다. */
/* 서문 리드. 문장마다 한 줄이고 줄을 어디서 끊을지는 글쓴이가 정한다.
   그래서 읽기 폭(max-width)으로 다시 자르지 않는다 — 자르면 문장이 중간에서
   접혀 의도한 리듬이 무너진다. 폭은 wrap(1100px)이 잡아 주고, 화면이 그보다
   좁을 때만 부득이하게 접힌다. */
.hero__intro {
  margin-top: 8px;
  font-size: 17px;
  line-height: 1.75;
  color: var(--text);
}

/* 문장 사이는 문단 간격이 아니라 연(聯) 간격이다. 넓히면 세 문장이 각각
   다른 이야기처럼 보인다. */
.hero__intro p + p {
  margin-top: 4px;
}

/* 좌우명. 산문과 다른 층위라 글꼴부터 바꾼다 — mono 로 두면 사이트의
   계측기 라벨과 같은 언어가 되어 '개인 서명'처럼 읽힌다. */
.hero__motto {
  margin-top: 22px;
  font-family: var(--font-mono);
  font-size: 13px;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.hero__motto::before {
  content: '— ';
  color: var(--accent);
}

/* --------------------------------------------------------------------------
   5. 섹션 머리 — 계측기 모티프 (번호 + mono 라벨 + 1px 괘선)
   -------------------------------------------------------------------------- */

.section {
  padding: 56px 0 8px;
}
.section:last-of-type {
  padding-bottom: 56px;
}

.sec-head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
}

.sec-head__num {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--accent);
}

.sec-head__title {
  font-family: var(--font-mono);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text);
  white-space: nowrap;
}

.sec-head__rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 16px;
  background: var(--line);
}

/* --------------------------------------------------------------------------
   6. 유튜브 파사드 — iframe 은 재생 버튼을 누른 뒤에만 주입된다
   -------------------------------------------------------------------------- */

.facade {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border: var(--rule);
  overflow: hidden;
}

.facade__thumb {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.facade__play {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: rgba(13, 15, 17, 0.34);
  transition: background-color 0.12s linear;
}
.facade__play:hover {
  background: rgba(13, 15, 17, 0.14);
}

.facade__disc {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 58px;
  height: 58px;
  background: var(--accent);
}
.facade__disc svg {
  width: 20px;
  height: 20px;
  fill: #0d0f11;
}

/* .facade__label 은 .sr-only 로만 존재한다 — 썸네일 위에 얹힌 작은 글자는
   읽히지도 않고 디스크 밖으로 삐져나왔다. 시각적으로만 걷어냈고, 버튼의
   aria-label 과 이 라벨로 스크린리더 쪽은 그대로다. */

.facade__frame {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* --------------------------------------------------------------------------
   7. Featured Work
   -------------------------------------------------------------------------- */

.fw-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
}

.fw__body {
  padding-top: 16px;
}

.badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 3px 9px;
  border: 1px solid var(--accent);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--accent);
}

.fw__title {
  font-size: 21px;
  margin-bottom: 10px;
}
.fw__title a {
  border-bottom: 1px solid transparent;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.fw__title a:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.fw__meta {
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin-bottom: 6px;
}

.fw__more {
  display: inline-block;
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 2px;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.fw__more:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   8. Credits
   -------------------------------------------------------------------------- */

.cr-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  /* 카드를 같은 줄의 최대 높이로 늘리지 않는다. 한 장을 펼쳤을 때 옆 카드가
     따라 늘어나 빈 상자가 되는 것을 막는다. 이미지 영역은 16:9 고정이라
     어느 쪽이든 윗선은 그대로 맞는다. */
  align-items: start;
}

.cr {
  display: flex;
  flex-direction: column;
  border: var(--rule);
  background: var(--bg);
  transition: border-color 0.12s linear;
}
/* 카드는 넷 다 펼쳐진다. 그래서 hover 강조도 예외 없이 준다. */
.cr:hover {
  border-color: #38404a;
}

.cr__media {
  aspect-ratio: 16 / 9;
  background: var(--surface);
  border-bottom: var(--rule);
  overflow: hidden;
}
.cr__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 로고 카드 — 잘라 채우지 않는다. 어두운 판 위에 가운데 정렬 + 여백을 주고
   원본 크기(314×221)를 넘겨 늘리지 않는다. 높이는 다른 카드와 같다. */
.cr__media--contain {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
  background: #12151a;
}
.cr__media--contain img {
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* 대표 이미지가 없는 카드 — 괘선 + 프로젝트 이니셜 */
.cr__media--initial {
  display: flex;
  align-items: center;
  justify-content: center;
  background: repeating-linear-gradient(
    135deg,
    var(--surface) 0,
    var(--surface) 9px,
    #12151a 9px,
    #12151a 18px
  );
}
.cr__initial {
  font-size: 40px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--muted);
}

.cr__body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 18px;
}

.cr__title {
  font-size: 18px;
}

.cr__title-sub {
  margin-top: 3px;
  font-size: 13px;
  color: var(--muted);
}

.cr__desc {
  font-size: 15px;
  line-height: 1.65;
}

.cr__facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 5px 14px;
  margin: 0;
  font-size: 14px;
}
.cr__facts dd {
  margin: 0;
}
.cr__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  padding-top: 4px;
  white-space: nowrap;
}
.cr__val {
  color: var(--text);
}

.cr__notes {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 12px;
  border-top: var(--rule);
  font-size: 14px;
  color: var(--muted);
}
.cr__notes li {
  padding-left: 14px;
  position: relative;
}
.cr__notes li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 11px;
  width: 6px;
  height: 1px;
  background: var(--muted);
}

.cr__disclosure {
  padding-top: 12px;
  border-top: var(--rule);
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

/* 아직 쓸 내용이 없는 카드의 패널 한 줄. 이 줄이 뜨는 카드는 패널 안이
   이것뿐이라 위쪽 구분선을 두지 않는다 — 토글 밑선과 겹친다. */
.cr__pending {
  font-size: 13px;
  line-height: 1.6;
  color: var(--muted);
}

.cr__links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding-top: 12px;
  border-top: var(--rule);
}
.cr__link {
  padding: 5px 10px;
  border: var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color 0.12s linear, border-color 0.12s linear;
}
.cr__link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

/* 확장 토글 — 펼칠 내용이 있는 카드에만 붙는다 (app.js 가 판단) */
.cr__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: 2px;
  padding: 10px 0 0;
  appearance: none;
  background: none;
  border: 0;
  border-top: var(--rule);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  transition: color 0.12s linear;
}
.cr__toggle:hover {
  color: var(--accent);
}

.cr__chev {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: square;
  transition: transform 0.16s ease;
}
.cr__toggle[aria-expanded='true'] .cr__chev {
  transform: rotate(180deg);
}

.cr__panel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  animation: cr-open 0.18s ease-out;
}

@keyframes cr-open {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.cr__video {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.cr__video-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}

/* 기여 범위 같은 문장형 부연. 라벨과 달리 대문자화·자간 확대를 하지 않는다 —
   문장에 걸면 읽히지 않는다. */
.cr__video-note {
  margin: 2px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--muted);
}

.cr__shot img {
  width: 100%;
  height: auto;
  border: var(--rule);
}

/* 열고 닫는 움직임은 장식이다. 꺼도 기능은 그대로다. */
@media (prefers-reduced-motion: reduce) {
  .cr__panel {
    animation: none;
  }
  .cr__chev {
    transition: none;
  }
}

/* --------------------------------------------------------------------------
   9. About
   -------------------------------------------------------------------------- */

.about {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

/* 사진이 4:3 가로다. 예전 증명사진 자리(168px 정사각)에 그대로 넣으면
   우표만 해지므로 폭을 실제로 쓰게 둔다. 비율은 손대지 않는다 —
   width 만 주고 height:auto(전역 img 규칙)에 맡겨 왜곡을 원천 차단한다. */
.about__photo {
  width: 100%;
  max-width: 520px;
  border: var(--rule);
}

/* 사진 오른쪽 칸. 소개 산문과 이력이 세로로 쌓인다. 한쪽이 비어도
   남은 하나가 그대로 칸을 채운다. */
.about__aside {
  display: flex;
  flex-direction: column;
  gap: 20px;
  min-width: 0;
}

.about__body {
  font-size: 16px;
  color: var(--text);
}

/* 이력 — 연도(dt)는 credits 의 mono 라벨(cr__key)을 그대로 물려받는다.
   여기서는 본문 스케일에 맞춰 간격과 크기만 조정한다. */
.about__timeline {
  gap: 10px 20px;
  font-size: 15px;
}

/* --------------------------------------------------------------------------
   10. Contact
   -------------------------------------------------------------------------- */

.contact-list {
  display: grid;
  grid-template-columns: 1fr;
  border-top: var(--rule);
}

.contact-row {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 18px;
  padding: 14px 0;
  border-bottom: var(--rule);
}

.contact-row__key {
  flex: 0 0 auto;
  min-width: 108px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}

.contact-row__val {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 12px;
  min-width: 0;
}

.contact-val {
  font-size: 16px;
  overflow-wrap: anywhere;
}

/* 값 + 복사 힌트를 한 덩어리로 묶는다. 힌트는 평소 감춰 두고 hover · focus
   때만 드러낸다 — 상시 노출하면 주소 옆에 문구가 붙어 값과 뒤섞인다. */
.copy {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  min-width: 0;
}

.copy-btn {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 1px dashed var(--line);
  padding: 0 0 2px;
  font-size: 16px;
  color: var(--text);
  overflow-wrap: anywhere;
  text-align: left;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.copy-btn:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

.copy-hint {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.12s linear;
}
.copy:hover .copy-hint,
.copy:focus-within .copy-hint {
  opacity: 1;
}
/* 복사 결과 문구는 hover 를 벗어나도 보여야 한다 */
.copy-hint--live {
  opacity: 1;
}
.copy-hint--done {
  color: var(--ok);
}

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

/* 값이 아니라 동작 — 칩 모양으로 위계를 갈라 둔다 */
.act-link {
  padding: 4px 9px;
  border: var(--rule);
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  white-space: nowrap;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.act-link:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.ext-link {
  font-size: 15px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  padding-bottom: 1px;
  overflow-wrap: anywhere;
  transition: color 0.12s linear, border-color 0.12s linear;
}
.ext-link:hover {
  color: var(--accent);
  border-bottom-color: var(--accent);
}

/* --------------------------------------------------------------------------
   11. 케이스 스터디
   -------------------------------------------------------------------------- */

.backlink {
  display: inline-block;
  margin: 32px 0 24px;
  font-family: var(--font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  color: var(--muted);
  transition: color 0.12s linear;
}
.backlink:hover {
  color: var(--accent);
}

.case {
  padding-bottom: 56px;
}

.case__head {
  margin-bottom: 24px;
}

.case__title {
  font-size: 26px;
  margin-top: 4px;
}

.case__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: 10px 28px;
  margin: 24px 0;
  padding: 14px 0;
  border-top: var(--rule);
  border-bottom: var(--rule);
}
.case__meta-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.case__meta dd {
  margin: 0;
}
.case__meta-key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.case__meta-val {
  font-size: 15px;
}

.case__block {
  margin-top: 40px;
}

/* 머리글이 없는 블록(facts). 라벨 자체가 이름 노릇을 하므로 제목을 지어내지
   않고, 앞 블록과는 위 괘선으로만 갈라 둔다 — 다른 블록의 제목 밑선과
   같은 1px 이라 리듬이 어긋나지 않는다. */
.case__block--bare {
  padding-top: 16px;
  border-top: var(--rule);
}

/* 케이스 페이지의 facts 는 카드보다 본문 스케일에 맞춘다. 라벨(cr__key)의
   mono 스타일은 그대로 물려받는다 — 새 스타일 언어를 만들지 않는다. */
.case__facts {
  gap: 8px 20px;
  font-size: 16px;
}

/* 작업 노트 — 불릿이 아니라 단락이다 */
.case__prose {
  display: flex;
  flex-direction: column;
  gap: 14px;
  font-size: 16px;
}

.case__block-title {
  font-family: var(--font-mono);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--muted);
  padding-bottom: 8px;
  margin-bottom: 16px;
  border-bottom: var(--rule);
}

.case__text {
  font-size: 16px;
}

.case__ul {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 16px;
}
.case__ul li {
  position: relative;
  padding-left: 16px;
}
.case__ul li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 13px;
  width: 8px;
  height: 1px;
  background: var(--accent);
}

.meter {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px 32px;
}
.meter__item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 10px 12px;
  background: var(--surface);
  border: var(--rule);
}
.meter__key {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
}
.meter__val {
  font-family: var(--font-mono);
  font-size: 16px;
  font-weight: 500;
  color: var(--text);
}

.case__notice {
  margin-top: 40px;
  padding: 14px 16px;
  border: var(--rule);
  border-left: 2px solid var(--accent);
  background: var(--surface);
  font-size: 14px;
  line-height: 1.65;
  color: var(--muted);
}

.case__watch {
  margin-top: 16px;
}

/* --------------------------------------------------------------------------
   12. 푸터
   -------------------------------------------------------------------------- */

.site-foot {
  border-top: var(--rule);
  padding: 24px 0 40px;
}

.site-foot__inner {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.site-foot__mark {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* 저작권·귀속 고지. 본문보다 작고 대비를 낮추되 읽히는 선은 지킨다 —
   --muted(#8b939c) 대 --bg(#0d0f11) 는 6.17:1 로 WCAG AA(4.5:1)를 넘는다.
   여기서 더 어둡게 내리면 고지가 고지 노릇을 못 한다.
   본문 폰트를 쓴다. 11px 모노 + 자간 0.12em 로는 이 길이가 읽히지 않는다. */
.site-foot__legal {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-width: 80ch;
}

.site-foot__line {
  font-size: 12px;
  line-height: 1.65;
  color: var(--muted);
}

/* --------------------------------------------------------------------------
   13. 반응형 — 360 / 768 / 1440
   -------------------------------------------------------------------------- */

@media (min-width: 560px) {
  .meter {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 768px) {
  :root {
    --pad: 32px;
  }
  .hero {
    padding-top: 64px;
  }
  .hero__name {
    font-size: 46px;
  }
  .hero__intro {
    margin-top: 14px;
    font-size: 18px;
  }
  .section {
    padding-top: 72px;
  }
  .section:last-of-type {
    padding-bottom: 72px;
  }
  /* 사진과 이력을 2단으로 가른다. 두 칸을 똑같이 나누는 이유 — 사진 칸을
     520px 로 못박으면 이 폭에서 오른쪽 칸이 140px 아래로 눌려 연도와 내용이
     다 무너진다. 사진의 상한은 .about__photo 의 max-width 가 지킨다.
     이보다 좁으면 2단을 만들지 않고 이력이 사진 아래로 떨어진다. */
  .about {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 32px;
  }
  .cr-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 28px;
  }
  .case__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .case__title {
    font-size: 32px;
  }
  .fw__title {
    font-size: 23px;
  }
}

@media (min-width: 1024px) {
  .fw-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 44px 36px;
  }
}

@media (max-width: 400px) {
  .site-head__inner {
    gap: 10px;
  }
  .site-nav {
    gap: 4px 14px;
  }
  .contact-row__key {
    min-width: 100%;
  }
}