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

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

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

/* 공통 섹션 타이틀 — "요즘 우리가 생각하는 것들 / 다른 아티클" */
.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, italic, bold, lh 160%, ls -0.64px */
.journal-list-item__vol {
  font-family: 'Inter', sans-serif;
  font-size: 32px;
  font-style: italic;
  font-weight: 700;
  line-height: 160%;
  letter-spacing: -0.64px;
  color: #000;
}

/* 저자 — Figma: 18px, normal, 500, lh 100%, ls -0.36px */
.journal-list-item__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: 18px, normal, 500, lh 145%, ls -0.09px */
.journal-list-item__excerpt {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-style: normal;
  font-weight: 500;
  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: var(--spacing-32);
  border-top: 1px solid #000;
}

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

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

/* 아이템 링크 */
.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;
}

/* 제목 — Figma: 20px, normal, 700, lh 100%, ls -0.4px */
.journal-index__name {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.4px;
  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 var(--spacing-32);
}

/* subtitle 한 줄 (sub + vol) */
.journal-detail__subtitle {
  margin-bottom: var(--spacing-md);
}

/* "요즘 우리가 생각하는 것들" — 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);
}

/* 저자 — Figma: center, 18px, weight 500, lh 145%, ls -0.09px */
.journal-detail__meta {
  font-size: 18px;
  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-list-item {
    flex-direction: column;
    gap: var(--spacing-md);
  }

  .journal-list-item__thumb {
    width: 100%;
    height: 200px;
  }

  .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: 16px;
  }

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

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

  .journal-detail__title {
    font-size: var(--fs-32);
  }

  .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) {
  .journal-list-item__thumb {
    height: 180px;
  }

  .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-pagination__item,
  .journal-pagination__num {
    font-size: 18px;
  }

  .journal-index__vol,
  .journal-index__name {
    font-size: 14px;
  }

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

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

  .journal-detail__title {
    font-size: var(--fs-24);
  }

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

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