/* ============================================================
   HIARC — work-detail.css
   작품 상세 페이지 (아카이브 뷰 디자인)
   ============================================================ */

/* ── 페이지 래퍼 ─────────────────────────────────────────── */
.work-view {
  padding-bottom: var(--spacing-60);
}

/* ── 대표 이미지 (히어로, 최대 1152px) ───────────────────── */
.work-view__hero {
  max-width: 1152px;
  margin-inline: auto;
  background: var(--color-gray-50);
}

.work-view__hero a {
  display: block;
  cursor: zoom-in;
}

.work-view__hero img {
  width: 100%;
  height: auto;
  display: block;
}

/* ── 헤더: 제목(좌) + 목록보기(우) ───────────────────────── */
.work-view__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--spacing-32);
  padding-top: var(--spacing-32);
  padding-bottom: var(--spacing-sm);
}

.work-view__titles {
  flex: 1;
  min-width: 0;
}

/* 영문 제목 (위) */
.work-view__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 100%;
  letter-spacing: -0.72px;
  color: #000;
}

/* 한글 제목 (아래, 영문 있을 때) */
.work-view__title-ko {
  font-size: 27px;
  font-weight: 400;
  line-height: 100%;
  letter-spacing: -0.27px;
  color: #000;
  margin-top: 8px;
}

.work-view__header-actions {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-shrink: 0;
  padding-top: 8px;
}

.work-view__list-link {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-text);
  text-decoration: none;
  white-space: nowrap;
}

.work-view__list-link:hover {
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ── 수상 내역 ───────────────────────────────────────────── */
.work-view__awards {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs);
  padding-bottom: var(--spacing-sm);
}

.work-view__award {
  font-size: var(--fs-12);
  font-weight: var(--fw-semibold);
  padding: 3px 10px;
  background: var(--color-accent);
  color: var(--color-black);
}

/* ── 학생이름, 스튜디오 ──────────────────────────────────── */
.work-view__meta {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 200%;
  letter-spacing: -0.4px;
  padding-bottom: var(--spacing-32);
}

.work-view__meta-name {
  color: #000;
}

.work-view__meta-studio {
  color: #BCBABA;
  margin-left: 8px;
}

/* ── 섹션 공통 (Ideas, Drawings, Tag) ────────────────────── */
.work-view__section {
  margin-bottom: var(--spacing-xl);
}

.work-view__section-title {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  color: #000;
  line-height: 100%;
  letter-spacing: -0.48px;
  margin-bottom: var(--spacing-md);
}

/* Ideas — 좌우 배치 (타이틀 왼쪽, 본문 오른쪽) */
.work-view__section--ideas {
  display: flex;
  gap: var(--spacing-200);
  align-items: flex-start;
}

.work-view__section-title--ideas {
  font-weight: 600;
  line-height: 160%;
  letter-spacing: -0.12px;
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* Ideas — 설명 텍스트 영역 */
.work-view__description {
  flex: 1;
  min-width: 0;
}

/* Ideas — 소제목 (01. 02. …) */
.work-view__desc-heading {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 160%;
  letter-spacing: -0.1px;
  color: #000;
  margin: 0;
  padding-top: var(--spacing-20);
}

.work-view__desc-heading:first-child {
  padding-top: 0;
}

/* Ideas — 본문 */
.work-view__desc-body {
  font-size: var(--fs-16);
  font-weight: 400;
  line-height: 160%;
  letter-spacing: -0.08px;
  color: #000;
  margin: var(--spacing-sm) 0 0;
}

/* Drawings — 타이틀 아래 여백 */
.work-view__section--drawings .work-view__section-title {
  margin-bottom: 40px;
}

/* Drawings — 이미지 그리드 */
.work-view__drawings {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-20);
}

.work-view__drawing {
  display: block;
  cursor: zoom-in;
  overflow: hidden;
  background: var(--color-gray-50);
}

.work-view__drawing img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.3s ease;
}

.work-view__drawing:hover img {
  transform: scale(1.02);
}

/* Tag — 좌우 배치 (타이틀 왼쪽, 태그 오른쪽) */
.work-view__section--tag {
  display: flex;
  gap: var(--spacing-50);
  align-items: flex-start;
  padding-top: 50px;
}

.work-view__section--tag .work-view__section-title {
  margin-bottom: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

.work-view__tags {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1;
  min-width: 0;
}

.work-view__tag {
  font-size: var(--fs-20);
  font-weight: var(--fw-bold);
  line-height: 100%;
  letter-spacing: -0.4px;
  color: #000;
  text-decoration: none;
}

.work-view__tag-sep {
  color: var(--color-gray-200);
}

/* ── 좋아요 / 찜 — 아이콘만 ──────────────────────────────── */
.work-view__action-icon {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text);
  cursor: pointer;
  font-size: var(--fs-14);
  font-family: var(--font-base);
  font-weight: var(--fw-medium);
  transition: opacity 0.15s;
}

.work-view__action-icon:hover {
  opacity: 0.6;
}

.work-view__action-icon.is-liked svg,
.work-view__action-icon.is-bookmarked svg {
  fill: currentColor;
}

/* ── 관련 작품 (공통 컴포넌트) ────────────────────────────── */
.related-works {
  padding-top: var(--spacing-48);
  border-top: 1px solid var(--color-gray-200);
}

.related-works__title-section {
  font-size: 24px;
  font-weight: 700;
  font-style: italic;
  color: #000;
  line-height: 100%;
  letter-spacing: -0.48px;
  margin-bottom: 40px;
}

.related-works__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-20);
}

.related-works__card {
  display: block;
  text-decoration: none;
  color: var(--color-text);
}

.related-works__thumb {
  width: 100%;
  aspect-ratio: 300 / 240;
  overflow: hidden;
  background: var(--color-gray-50);
  margin-bottom: var(--spacing-sm);
}

.related-works__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.related-works__card:hover .related-works__thumb img {
  transform: scale(1.03);
}

.related-works__title {
  font-size: var(--fs-16);
  font-weight: var(--fw-bold);
  line-height: var(--lh-snug);
  color: var(--color-text);
  margin-bottom: 2px;
}

.related-works__student {
  font-size: var(--fs-14);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}

/* ── 태블릿 ──────────────────────────────────────────────── */
@media (max-width: 800px) {
  .work-view__header {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .work-view__section--ideas,
  .work-view__section--tag {
    flex-direction: column;
    gap: var(--spacing-sm);
  }

  .work-view__drawings {
    grid-template-columns: 1fr;
  }

  .related-works__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── 모바일 ──────────────────────────────────────────────── */
@media (max-width: 375px) {
  .work-view__title {
    font-size: var(--fs-24);
  }

  .related-works__grid {
    grid-template-columns: 1fr;
  }
}