/* ============================================================
   HIARC — journal.css
   저널 목록 + 상세 페이지
   ============================================================ */

/* ── 공통 ─────────────────────────────────────────────────── */
.journal-page {
  padding-bottom: 0;
}

/* ── 히어로 영역 (about와 동일 규격) ──────────────────────── */
.journal-hero {
  margin: 0;
  padding-top: var(--spacing-48);
  margin-bottom: var(--spacing-48);
}

.journal-hero img,
.journal-hero__video {
  width: 100%;
  height: auto;
  display: block;
  aspect-ratio: 1152 / 648;
  object-fit: cover;
}

/* reduced-motion 사용자: 영상 only(이미지 없음)인 경우 영상 숨김 */
@media (prefers-reduced-motion: reduce) {
  .journal-hero--has-video:not(:has(img)) .journal-hero__video {
    display: none;
  }
}

/* ── 목록 페이지 ─────────────────────────────────────────── */
.journal-header {
  display: flex;
  align-items: flex-end;
  padding: 23px 0 40px;
  min-height: 176px;
}

/* 페이지 메인 타이틀 — Archive .archive-header__title 와 동일 규격 */
.journal-page-title {
  font-family: 'Inter', sans-serif;
  font-size: var(--fs-36);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: -0.9px;
  color: var(--color-text);
}

/* 공통 섹션 타이틀 — "요즘 우리가 생각하는 것들 / 다른 아티클" */
.journal-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  color: #000;
}

.journal-section-title__sub {
  font-weight: 400;
}

/* 저널 리스트 (수직 목록) */
.journal-list {
  display: flex;
  flex-direction: column;
}

.journal-list-item {
  display: flex;
  gap: var(--spacing-32);
  padding: var(--spacing-32) 0;
  text-decoration: none;
  color: var(--color-text);
  transition: opacity 0.15s;
}

.journal-list-item:hover {
  opacity: 0.75;
}

/* 썸네일 */
.journal-list-item__thumb {
  flex-shrink: 0;
  width: 360px;
  height: 240px;
  overflow: hidden;
  background: var(--color-gray-50);
}

.journal-list-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-list-item__thumb--empty {
  background: var(--color-gray-50);
}

/* 텍스트 영역 — Figma: flex, h240, col, gap 20 */
.journal-list-item__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
  align-self: stretch;
  height: 240px;
  min-width: 0;
  overflow: hidden;
}

/* Vol 타이틀 — Figma: 32px, bold, lh 160%, ls -0.64px (italic은 vol 번호 부분에만) */
.journal-list-item__vol {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: -0.64px;
  color: #000;
}

/* "Vol N." 부분만 italic */
.journal-list-item__vol-num {
  font-style: italic;
}

/* 제목 — 정자체 */
.journal-list-item__vol-title {
  font-style: normal;
}

/* 저자 — 20px, weight 600 (excerpt와 시각 구분 강조) */
.journal-list-item__author {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.36px;
  color: #000;
}

/* 발췌 — 16px, weight 400 (author와 구분되게 작고 얇게) */
.journal-list-item__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  font-style: normal;
  font-weight: 400;
  line-height: 145%;
  letter-spacing: -0.09px;
  color: #000;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* 하단 인덱스 목록 */
.journal-index {
  margin-top: var(--spacing-60);
  padding-top: 40px;
  padding-bottom: 14px;    /* 시각상 위/아래 균형 */
  border-top: 1px solid #000;
}

.journal-index__title {
  margin-bottom: 32px;
}

.journal-index__list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 아이템 링크 */
.journal-index__item {
  text-decoration: none;
  color: #000;
  transition: opacity 0.15s;
}

.journal-index__item:hover {
  opacity: 0.6;
}

/* vol N. — Figma: 20px, italic, 600, lh 100%, ls -0.4px */
.journal-index__vol {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-style: italic;
  font-weight: 600;
  line-height: 100%;
  letter-spacing: -0.4px;
  color: #000;
}

/* 제목 — vol(20px)보다 약간 크게 강조 */
.journal-index__name {
  font-family: 'Inter', sans-serif;
  font-size: 21px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  color: #000;
  margin-left: 14px;  /* vol N.과 제목 사이 간격 */
}

/* 구분자 '-' 전후 간격 */
.journal-index__sep {
  margin: 0 12px;
  color: #000;
}

/* 저자 — Figma: 18px, normal, 500, lh 100%, ls -0.36px */
.journal-index__author {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  line-height: 100%;
  letter-spacing: -0.36px;
  color: #000;
}

/* 페이지네이션 — Figma: flex, w520, h28, col, center */
.journal-pagination {
  display: flex;
  width: 520px;
  height: 28px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-inline: auto;
  padding-top: var(--spacing-48);
  gap: var(--spacing-md);
  flex-direction: row;
}

/* previous / next — Figma: 24px, italic, 600, lh 110% */
.journal-pagination__item {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-style: italic;
  font-weight: 600;
  line-height: 110%;
  color: #000;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s;
}

.journal-pagination__item:hover {
  opacity: 0.6;
}

/* 숫자 — Figma: 24px, normal, 600, lh 110% */
.journal-pagination__num {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-style: normal;
  font-weight: 600;
  line-height: 110%;
  color: #000;
  text-decoration: none;
  transition: opacity 0.15s;
}

.journal-pagination__num:hover {
  opacity: 0.6;
}

.journal-pagination__num.is-current {
  font-weight: 600;
  color: var(--color-text);
}

.journal-empty {
  color: var(--color-text-muted);
  font-size: var(--fs-16);
  padding-block: var(--spacing-xl);
}

/* ══════════════════════════════════════════════════════════════
   상세 페이지 — Figma 정확 값 적용
   ══════════════════════════════════════════════════════════════ */
.journal-detail {
  padding-bottom: 0;
}

/* 헤더 — 가운데 정렬 */
.journal-detail__header {
  text-align: center;
  padding: var(--spacing-48) 0 64px;  /* 아래 32 → 64 (이미지와의 간격 2배) */
}

/* subtitle 한 줄 (sub + vol) */
.journal-detail__subtitle {
  margin-bottom: var(--spacing-32);  /* 16 → 32 (제목과의 간격 2배) */
}

/* "요즘 우리가 생각하는 것들" — Figma: center, 24px, weight 200, lh 140%, ls -0.12px */
.journal-detail__sub {
  font-size: 24px;
  font-weight: 200;
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--color-text);
}

/* "vol 5." — Figma: 24px, italic, weight 200, lh 140%, ls -0.12px */
.journal-detail__vol {
  font-size: 24px;
  font-weight: 200;
  font-style: italic;
  line-height: 1.4;
  letter-spacing: -0.12px;
  color: var(--color-text);
}

/* 타이틀 — Figma: center, 54px, weight 700, lh 110%, ls -1.08px */
.journal-detail__title {
  font-size: 54px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -1.08px;
  color: var(--color-text);
  margin-bottom: var(--spacing-md);
}

/* 저자 — 18 → 20px (살짝 키움) */
.journal-detail__meta {
  font-size: 20px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.09px;
  color: var(--color-text);
}

/* 이미지+본문 wrapper — 800px 가운데, 내부 좌측 정렬 */
.journal-detail__content {
  max-width: 800px;
  margin-inline: auto;
}

/* 히어로 이미지 */
.journal-detail__hero {
  margin-bottom: var(--spacing-48);
  overflow: hidden;
}

.journal-detail__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* 이미지 주석 — Figma: right, rgba(0,0,0,0.50), 14px, weight 300, lh 400%, ls -0.28px */
.journal-detail__hero-caption {
  font-size: 14px;
  font-weight: 300;
  line-height: 4;
  letter-spacing: -0.28px;
  color: rgba(0, 0, 0, 0.50);
  text-align: right;
}

/* 본문 콘텐츠 */
.journal-detail__body {
  font-size: var(--fs-16);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
}

.journal-detail__body h2 {
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-top: var(--spacing-48);
  margin-bottom: var(--spacing-md);
}

.journal-detail__body h3 {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  margin-top: var(--spacing-32);
  margin-bottom: var(--spacing-sm);
}

.journal-detail__body p {
  margin-bottom: var(--spacing-20);
}

.journal-detail__body img {
  max-width: 100%;
  height: auto;
  margin-block: var(--spacing-32);
}

/* blockquote — 큰 볼드 인용문, 인용부호 */
.journal-detail__body blockquote {
  margin: var(--spacing-48) 0;
  padding: 0;
  border: none;
  font-size: var(--fs-24);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  letter-spacing: -0.48px;
  color: var(--color-text);
}

.journal-detail__body blockquote::before {
  content: '\201C';
  display: block;
  font-size: 48px;
  line-height: 1;
  margin-bottom: var(--spacing-sm);
}

.journal-detail__body blockquote::after {
  content: '\201D';
  display: block;
  font-size: 48px;
  line-height: 1;
  text-align: right;
  margin-top: var(--spacing-sm);
}

.journal-detail__body ul,
.journal-detail__body ol {
  padding-left: var(--spacing-20);
  margin-bottom: var(--spacing-20);
  list-style: revert;
}

.journal-detail__body li {
  margin-bottom: var(--spacing-sm);
}

.journal-detail__body a {
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* 관련 프로젝트 — 디자인: 3열 그리드, 32px gap, 8px radius */
.journal-related {
  margin-top: var(--spacing-60);
  padding-top: var(--spacing-32);
  border-top: var(--border-base) solid var(--color-text);
}

.journal-related__title {
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.4px;
  color: var(--color-text);
  margin-bottom: var(--spacing-lg);
}

.journal-related__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-32);
}

.journal-related__card {
  text-decoration: none;
  color: var(--color-text);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: var(--radius-sm);  /* 8px — 디자인 rx=8 */
  transition: opacity 0.15s;
}

.journal-related__card:hover {
  opacity: 0.75;
}

.journal-related__card-thumb {
  width: 100%;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  background: var(--color-gray-50);
  border-radius: var(--radius-sm);
}

.journal-related__card-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.journal-related__card-info {
  padding-top: var(--spacing-sm);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.journal-related__card-category {
  font-size: var(--fs-10);
  font-weight: var(--fw-semibold);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-related__card-title {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
}

/* 하단 네비게이션 — 디자인: HIARC 좌측, X 우측 */
.journal-nav {
  margin-top: var(--spacing-48);
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--spacing-32);
  border-top: var(--border-base) solid var(--color-text);
}

.journal-nav__brand {
  font-size: var(--fs-12);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.journal-nav__close {
  font-size: var(--fs-18);
  color: var(--color-text);
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  transition: opacity 0.15s;
}

.journal-nav__close:hover {
  opacity: 0.6;
}

/* ── 태블릿 ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .journal-header {
    padding: var(--spacing-32) 0;
    min-height: auto;
  }

  .journal-page-title {
    font-size: 20px;
    letter-spacing: -0.4px;
  }

  .journal-list-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .journal-list-item__thumb {
    width: 100%;
    height: auto;
    aspect-ratio: 3 / 2;  /* 원본 360×240 비율 유지 */
  }

  /* 인덱스 항목: 모바일에서 2줄 구조로 전환 (저자만 둘째 줄로 내림) */
  .journal-index__sep {
    display: none;
  }
  .journal-index__author {
    display: block;
    margin-top: 2px;
    margin-left: 0;
    font-size: 12px;
    font-weight: 400;
    letter-spacing: -0.24px;
    color: #555;
    line-height: 1.2;
  }
  /* 항목 사이 간격은 늘려서 항목 자체의 2줄 덩어리감 강조 */
  .journal-index__list {
    gap: 12px;
  }

  .journal-list-item__body {
    height: auto;
  }

  .journal-list-item__vol {
    font-size: 24px;
  }

  .journal-list-item__author {
    font-size: 16px;
  }

  .journal-list-item__excerpt {
    font-size: 16px;
  }

  .journal-pagination {
    width: 100%;
  }

  .journal-pagination__item,
  .journal-pagination__num {
    font-size: 20px;
  }

  .journal-index__vol,
  .journal-index__name {
    font-size: 19px;  /* 기존 16 × 1.2 — 모바일 저널 인덱스 윗줄 강조 */
  }

  .journal-index__author {
    font-size: 14px;
  }

  .journal-detail__sub,
  .journal-detail__vol {
    font-size: var(--fs-18);
  }

  .journal-detail__title {
    font-size: 48px;
  }

  .journal-detail__content {
    max-width: 100%;
  }

  .journal-detail__body blockquote {
    font-size: var(--fs-20);
  }

  .journal-related__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-md);
  }
}

/* ── 모바일 ───────────────────────────────────────────────── */
@media (max-width: 480px) {
  /* 썸네일 height 고정 제거 — 800px 미디어쿼리의 aspect-ratio가 그대로 적용되도록 */

  .journal-list-item__vol {
    font-size: 20px;
  }

  .journal-list-item__author {
    font-size: 14px;
  }

  .journal-list-item__excerpt {
    font-size: 14px;
    -webkit-line-clamp: 2;
  }

  .journal-section-title {
    font-size: 16px;
  }

  .journal-page-title {
    font-size: 18px;
  }

  .journal-pagination__item,
  .journal-pagination__num {
    font-size: 18px;
  }

  .journal-index__vol,
  .journal-index__name {
    font-size: 17px;  /* 기존 14 × 1.2 — 모바일 저널 인덱스 윗줄 강조 */
  }

  .journal-index__author {
    font-size: 12px;
  }

  .journal-detail__sub,
  .journal-detail__vol {
    font-size: var(--fs-16);
  }

  .journal-detail__title {
    font-size: 36px;
  }

  .journal-detail__body blockquote {
    font-size: var(--fs-18);
  }

  .journal-related__grid {
    grid-template-columns: 1fr;
    gap: var(--spacing-sm);
  }
}