/* 040201.css — 뉴스룸 / 회사행사 상세
   수치는 design/040201_회사행사.svg(1920×2847) 좌표 실측 기준.
   히어로는 목록(0402)과 픽셀 단위로 동일하므로 common.css 의 .hero 를 그대로 쓴다.

   세로 좌표
     히어로 밴드   64 ~ 520
     기사 제목     잉크 592 ~ 624
     분류/날짜     배지 649 ~ 671
     구분선        712 (1px)
     사진          752 ~ 1616 (1152×864)
     본문          첫 줄 잉크 1685 ~ 마지막 줄 2401 (줄간 28 / 문단 간 56)
     목록 버튼     2448.5 ~ 2488.5
     푸터          2648 */

.event-view__inner {
  max-width: var(--container);
  margin: 0 auto;
  padding: 89px var(--gutter-pc) 160px; /* 히어로 끝 503 → 제목 592 / 버튼 끝 2488.5 → 푸터 2648 */
}

.event-view__title {
  font-size: 36px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
}

/* 분류 배지(384,649 57×22 rx11) + 날짜 */
.event-view__meta {
  margin-top: 21px; /* 제목 박스 하단 628 → 배지 상단 649 */
  display: flex;
  align-items: center;
  gap: 17px; /* 배지 우측 441 → 날짜 잉크 458 */
}

.event-view__cat {
  min-width: 57px;
  height: 22px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  background: var(--color-icon-bg);
  font-size: 12px;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-primary);
}

.event-view__date {
  font-size: 16px;
  letter-spacing: -0.3px; /* 시안 잉크폭 87 (자간 0 이면 90) */
  line-height: 1;
  color: var(--color-text-sub);
}

/* 구분선 712 : 배지 하단 671 → 41 */
.event-view__content {
  margin-top: 41px;
  padding-top: 39px; /* 구분선 713 → 사진 752 */
  border-top: 1px solid var(--color-line);
}

.event-view__figure img {
  display: block;
  width: 100%;
  height: auto;
}

.event-view__content img {
  display: block;
  width: 100%;
  height: auto;
  margin: 15px auto;
}

/* 본문 : 줄간 28, 문단 간격 28(= 문단 첫 줄끼리 56).
   줄바꿈 지점은 1152 폭에서의 자동 wrap 이 시안과 같아지므로 <br> 를 넣지 않는다 */
.event-view__content p {
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 28px;
  color: var(--color-text-sub);
}

.event-view__content p + p {
  margin-top: 28px;
}

/* 사진 하단 1616 → 첫 줄 잉크 1685 */
.event-view__content .event-view__figure + p {
  margin-top: 64px;
}

.event-view__foot {
  margin-top: 40px; /* 본문 마지막 줄 박스 하단 → 버튼 상단 2448.5 */
  display: flex;
  justify-content: center;
}

/* stroke rect 105×39 rx5.5 → 바깥 106×40, radius 6 */
.event-view__list-btn {
  width: 106px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--color-line);
  border-radius: 6px;
  background: var(--color-bg);
  font-size: 14px;
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.5px;
  color: var(--color-text);
  transition: border-color .2s ease, color .2s ease;
}

.event-view__list-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

/* ── 반응형 : 모바일 시안이 없으므로 1단 + 좌우 20 규칙을 따른다 ── */
@media (max-width: 1023px) {
  .event-view__inner {
    padding: 64px var(--gutter-pc) 100px;
  }

  .event-view__title {
    font-size: 30px;
    line-height: 40px;
  }

  .event-view__content {
    padding-top: 32px;
  }

  .event-view__content .event-view__figure + p {
    margin-top: 40px;
  }
}

@media (max-width: 767px) {
  .event-view__inner {
    padding: 40px var(--gutter-mo) 60px;
  }

  .event-view__title {
    font-size: 22px;
    line-height: 32px;
  }

  .event-view__meta {
    margin-top: 16px;
    gap: 12px;
  }

  .event-view__date {
    font-size: 14px;
  }

  .event-view__content {
    margin-top: 24px;
    padding-top: 24px;
  }

  .event-view__content p {
    font-size: 15px;
    line-height: 24px;
  }

  .event-view__content p + p {
    margin-top: 24px;
  }

  .event-view__content .event-view__figure + p {
    margin-top: 28px;
  }

  .event-view__foot {
    margin-top: 32px;
  }
}