/* ============================================================
   detail.css — 프로젝트 상세 페이지 전용
   /projects/<slug>/index.html 에서만 읽는다.
   ============================================================ */

.detail {
  /* 상세는 읽는 문서다. 본문은 줄길이를 묶고, 도판과 숫자 카드만
     이 폭을 벗어나게 한다. */
  --measure: var(--measure-prose);
}

/* ============================================================
   1. 머리
   ============================================================ */

.detail-header {
  padding-block-end: var(--sp-4);
  margin-block-end: var(--sp-6);
  border-block-end: 2px solid var(--border-strong);
}

.detail-breadcrumb {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-xs);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
}

.detail-breadcrumb a {
  color: var(--text-faint);
  text-decoration: none;
  /* 44px 터치 타깃 — 글자 크기는 그대로 두고 영역만 넓힌다 */
  display: inline-flex;
  align-items: center;
  min-block-size: var(--tap);
}
/* inline-flex 라 content 안의 공백은 지워진다. 간격은 margin 으로 준다. */
.detail-breadcrumb a::before { content: "←"; margin-inline-end: 0.45em; }
.detail-breadcrumb a:hover { color: var(--text); }

/* 구 사이트의 .name 과 같은 단계다. 거기에는 자간이 없었다 —
   -0.03em 을 준 동안 한글 제목이 눌려 보였고, 같은 Pretendard 인데도
   글꼴이 다르게 느껴지던 가장 큰 원인이었다. 굵기도 구 .name 의 600. */
.detail-title {
  /* 제일 긴 제목(SoNA …)이 한 줄에 들어가는 크기로 묶는다. 본문 칸이
     872px 로 고정되는 넓은 화면에서 한계가 34.2px 이라 34px 을 상한으로
     두고, 화면이 좁아지면 칸 폭에 비례해 줄인다(3.9vw − 1.9px 이 그 비례식).
     790px 아래에서는 어떤 크기로도 한 줄에 못 넣으므로 1.8rem 에서 멈추고
     두 줄로 접는다 — 더 줄이면 13px 짜리 제목이 된다. */
  font-size: clamp(1.8rem, 3.9vw - 1.9px, 34px);
  font-weight: var(--fw-semi);
  letter-spacing: normal;
  /* 행간만 예외다. 구 .name 은 1.65 였지만 "Jongha Lee" 한 줄짜리라
     줄 사이가 보인 적이 없다. 41.6px 제목이 두 줄로 넘어가면 그 값은
     68.6px 이 되어 두 줄이 서로 다른 제목처럼 떨어져 보인다. */
  line-height: var(--lh-tight);
}

/* 구 사이트에서 "리드 문장"은 .about-lead 하나였고 0.95rem · 600 · 1.6 으로
   그려졌다. 여기도 같은 역할이므로 같은 값을 쓴다. 1.1rem · 400 으로
   크고 가늘게 뽑아 두었던 것이 구 사이트에 없던 목소리였다. */
.detail-oneline {
  margin-block-start: var(--sp-2);
  max-inline-size: var(--measure);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  color: var(--text);
}

/* ---- 기간 · 역할 (dl) ----------------------------------------- */
.detail-meta {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: var(--sp-1) var(--sp-4);
  align-items: baseline;
  margin-block-start: var(--sp-4);
  max-inline-size: var(--measure);
  font-size: var(--fs-sm);
}

/* 구 .info-label 과 같은 단계 — 라벨과 값이 같은 크기이고 굵기로만 갈린다 */
.detail-meta .meta-key,
.detail-meta dt {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  color: var(--text-faint);
  white-space: nowrap;
}

.detail-meta dd {
  margin: 0;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* ---- 링크 -----------------------------------------------------
   구 사이트는 프로젝트 링크를 "GitHub 보기 →" 처럼 테두리 없는 텍스트
   링크로 뒀다. 그 방식으로 되돌린다 — 바로 아래 기술 태그가 알약이라,
   링크까지 알약이면 같은 자리에 비슷한 것이 두 줄로 겹쳐 보인다.
   ---------------------------------------------------------------- */
.detail-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-block-start: var(--sp-4);
  padding: 0;
  list-style: none;
}
.detail-links li { margin-block-start: 0; }

.detail-links a {
  position: relative;
  display: inline-block;
  padding-block: 4px;
  font-size: var(--fs-sm);
  color: var(--text);
  text-decoration: none;
}

/* 텍스트 링크에 44px 높이를 그대로 주면 줄 사이가 빈 줄처럼 벌어진다.
   보이는 높이는 글줄에 맞추고, 터치 영역만 투명한 상자로 넓힌다. */
.detail-links a::before {
  content: "";
  position: absolute;
  inset-inline: -6px;
  inset-block-start: 50%;
  block-size: var(--tap);
  transform: translateY(-50%);
}

.detail-links a::after {
  content: "\2192";
  margin-inline-start: 0.35em;
  color: var(--text-muted);
}

@media (hover: hover) {
  .detail-links a:hover { text-decoration: underline; text-underline-offset: 0.18em; }
}

/* ---- 태그 ----------------------------------------------------- */
.detail-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-block-start: var(--sp-3);
  padding: 0;
  list-style: none;
}
.detail-tags li { margin-block-start: 0; }

/* ============================================================
   2. 섹션
   제목은 Impact / Background / Architecture / Contributions /
   Troubleshooting / Related 로 영어 고정.
   ============================================================ */

.detail-section {
  margin-block-end: var(--section-gap);
  scroll-margin-block-start: calc(var(--header-h) + var(--sp-4));
}

/* 구 사이트의 대문자 제목은 .category-title 하나뿐이었고
   0.95rem · 600 · 자간 0.1em · 본문색이었다. 0.8rem · 700 · 옅은 회색으로
   줄여 두었던 동안 섹션 제목이 "작은 라벨"로 읽혀, 구 사이트의 또렷한
   제목 목소리와 달랐다. 같은 값으로 되돌린다. */
.detail-section__title {
  margin-block-end: var(--sp-4);
  font-size: var(--fs-body);
  font-weight: var(--fw-semi);
  letter-spacing: var(--tracking-caps);
  text-transform: uppercase;
  color: var(--text);
}

/* 섹션 제목 왼쪽에 분야색 짧은 막대 — 어디가 새 섹션인지 표시 */
.detail-section__title::before {
  content: "";
  display: inline-block;
  inline-size: 1.5rem;
  block-size: 2px;
  margin-inline-end: var(--sp-3);
  vertical-align: 0.3em;
  background: var(--cat);
}

/* 항목 목록은 설명보다 확실히 작게. 문단은 읽는 글이고 목록은 훑는 글이다.
   한 단(15.2 → 14.4px)만 내렸더니 차이가 5%라 나란히 놓아야 겨우 보였다.
   두 단(→ 12.8px) 내려 16% 차이를 만든다. */
.detail-section li { font-size: var(--fs-xs); }

/* 상세 본문의 줄길이 제한. 도판·숫자 카드는 제외한다. */
.detail-section > p,
.detail-section > ul:not([class]),
.detail-section > ol:not([class]) {
  max-inline-size: var(--measure);
}

/* ============================================================
   3. Contributions
   ============================================================ */

/* 절 사이는 절 안의 어떤 간격보다 넓어야 한다 — 20px 이었을 때
   설명→항목(24px)이 절 사이보다 넓어 덩어리가 거꾸로 읽혔다. */
/* Troubleshooting 의 .ts-item 과 같은 방식 — 카드로 띄우지 않고 왼쪽 선 하나로
   묶는다. 절이 어디서 시작해 어디서 끝나는지가 여백만으로는 약했다. */
.contrib {
  margin-block-end: var(--sp-7);
  padding-inline-start: var(--sp-5);
  border-inline-start: var(--hairline) solid var(--border-strong);
}

.contrib__title {
  margin-block-end: var(--sp-2);
  font-size: var(--fs-h3);
  color: var(--text);
}

.contrib p { max-inline-size: var(--measure); }

/* ============================================================
   4. Troubleshooting
   ------------------------------------------------------------
   .ts-item__rows 는 <dl>. 키는 문제/원인/해결/결과 넷으로 고정이다.
   키를 왼쪽 고정폭 열에 세워 네 항목이 세로로 정렬되게 한다 —
   여러 트러블슈팅을 비교하며 읽을 때 같은 자리에서 같은 항목을 만난다.
   ============================================================ */

/* 카드로 띄우지 않고 왼쪽 선 하나로 묶는다 — 장식을 덜어내는 쪽. */
.ts-item {
  padding-inline-start: var(--sp-5);
  margin-block-end: var(--sp-8);
  border-inline-start: var(--hairline) solid var(--border-strong);
}

.ts-item__title {
  margin-block-end: var(--sp-3);
  font-size: var(--fs-h3);
}

.ts-item > p { max-inline-size: var(--measure); }

.ts-item__rows {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-1);
  margin: 0;
}

@media (min-width: 560px) {
  .ts-item__rows {
    grid-template-columns: 3.5rem minmax(0, 1fr);
    gap: var(--sp-4) var(--sp-5);   /* 행 사이를 벌려 네 항목이 따로 읽히게 */
  }
}

/* 키와 값이 붙어 한 덩어리로 보였다. 키는 더 작고 옅게, 대문자 간격을 줘서
   "라벨"로 읽히게 하고 값과의 대비를 키운다. */
/* 구 사이트의 같은 구조는 .info-row 였다 — 라벨 0.9rem · 600, 값 0.9rem,
   행간 1.7. 한글에 0.06em 자간을 준 것은 구 사이트에 없던 처리라 뺀다
   (구 사이트가 자간을 준 곳은 대문자 라틴 문자뿐이다). */
.ts-item__key {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semi);
  letter-spacing: normal;
  color: var(--text-faint);
  white-space: nowrap;
}

/* 좁은 화면에서는 키가 값 위로 올라가므로 위쪽 간격을 준다 */
@media (max-width: 559px) {
  .ts-item__key { margin-block-start: var(--sp-3); }
  .ts-item__rows > .ts-item__key:first-child { margin-block-start: 0; }
}

.ts-item__val {
  margin: 0;
  font-size: var(--fs-body);
  color: var(--text-muted);
  max-inline-size: var(--measure);
}

/* "미해결" 같은 강조가 본문에서 묻히지 않게 */
.ts-item__val strong { color: var(--text); }

.ts-note {
  margin-block-start: var(--sp-4);
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-sm);
  color: var(--text-muted);
  background: var(--surface-2);
  border-inline-start: 2px solid var(--border-strong);
  border-radius: var(--r-sm);
  max-inline-size: var(--measure);
}

/* ============================================================
   5. 상세에서만 쓰는 도판 여백
   ============================================================ */

.detail-section .figure:first-child { margin-block-start: 0; }
.detail-section .figure:last-child { margin-block-end: 0; }

/* ---- 글 옆에 세우는 도판 ---------------------------------------
   글이 짧은 절에서 도판을 아래에 깔면 사진만 덩그러니 남는다.
   좁아지면 글 아래로 내려간다 — 한 칸에 둘을 욱여넣으면 둘 다 못 읽는다.
   ---------------------------------------------------------------- */
/* 도판·수치 카드와 오른쪽 끝을 맞춘다. 읽는 폭(--measure)으로 묶어 두었더니
   글 옆에 세운 절만 172px 짧아서 오른쪽 가장자리가 계단처럼 어긋났다.
   글 칸은 어차피 사진 칸을 뺀 나머지라 읽는 폭을 넘지 않는다. */
.contrib-side {
  display: grid;
  gap: var(--sp-5);
  align-items: start;
}

.contrib-side__text > :first-child { margin-block-start: 0; }
.contrib-side__text .contrib__title { margin-block-end: var(--sp-3); }
.contrib-side .figure { margin-block: 0; }

/* 도판이 둘 이상이면 하나로 묶어 오른쪽 칸에 쌓는다.
   묶지 않으면 grid 자식이 셋이 되어 2단 배치가 깨진다. */
.contrib-side__figs { display: grid; gap: var(--sp-4); align-content: start; }

@media (min-width: 640px) {
  .contrib-side {
    /* 사진 칸 폭 = 글 높이 × 사진 비율 이어야 사진이 세로를 꽉 채운다.
       24% 였을 때는 폭이 먼저 걸려서 위아래에 18px 씩 빈 자리가 생겼다. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 32%);
    align-items: stretch;
  }

  /* 사진 높이를 옆 글 높이에 맞춘다. 절대 배치라 사진이 행 높이를 만들지
     않으므로, 행 높이는 글이 정하고 사진은 그 안에 비율을 지켜 들어간다. */
  .contrib-side .figure { position: relative; }
  .contrib-side .figure img {
    position: absolute;
    inset: 0;
    inline-size: 100%;
    block-size: 100%;
    max-inline-size: none;
    max-block-size: none;
    object-fit: contain;
  }

  /* 가로로 긴 사진은 글 높이를 채울 수 없다 — 칸을 넓히면 글 칸이 좁아져
     글이 더 길어지고, 사진은 또 모자란다. 늘리지 말고 제 비율대로 위에 붙인다. */
  .contrib-side--wide { grid-template-columns: minmax(0, 1fr) minmax(0, 42%); }
  .contrib-side--wide .figure { position: static; align-self: start; }
  .contrib-side--wide .figure img {
    position: static;
    inline-size: 100%;
    block-size: auto;
  }
}

/* ============================================================
   6. 아키텍처 도면도 본문 단 안에서
   ------------------------------------------------------------
   한동안 이 도면만 화면 폭(1400px)까지 내보냈다. archify 가 글자 크기를
   상수로 박아 두어 본문 단(872px)에서는 노드 제목이 8px 로 그려지기
   때문이었다. 대신 왼쪽 끝이 나머지 요소와 어긋났고, 그 어긋남이
   도면을 페이지에서 떼어 놓았다 — 본문 폭으로 되돌린다.

   폭은 .figure--wide 가 주는 100%(= 본문 단)면 되고, 세로 상한만
   따로 둔다. 거의 정사각형인 도면이라 760px 상한에 먼저 걸려 폭을
   다 쓰지 못하면, 단 안에서 또 한 번 작아진다.
   ============================================================ */
.detail-section .figure:has(.figure__img--arch) img.figure__img--arch {
  max-block-size: none;
}