/* 030201.css — 고객 / 성공 구축 사례 상세
   수치는 design/030201_성공구축사례.svg(1920×1919) 좌표 실측 기준.
   히어로는 목록(0302)과 픽셀 단위로 동일하므로 common.css 의 .hero 를 그대로 쓴다.

   기사 본문의 타이포·리듬은 040201(회사행사 상세)과 같은 템플릿이다.
   (제목 36/700, 본문 18/-0.4/줄간 28, 문단 간 28, 목록 버튼 106×40)
   분류 배지만 다르다 : 040201 은 57×22 rx11, 여기는 37×22 rx4.

   세로 좌표
     히어로 밴드  64 ~ 520 (다음 섹션은 503 부터)
     기사 제목    잉크 592 ~ 628
     분류/날짜    배지 649 ~ 671
     구분선       712 (1px)
     본문         첫 줄 잉크 757 ~ 마지막 줄 1473
     목록 버튼    1520.5 ~ 1559.5
     푸터         1720 */

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

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

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

.case-view__cat {
  width: 37px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  background: var(--color-icon-bg);
  font-size: 12px;
  line-height: 1;
  color: var(--color-primary);
}

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

/* 구분선 712 : 배지 하단 671 → 41 */
.case-view__content {
  margin-top: 41px;
  padding-top: 39px; /* 구분선 713 → 첫 줄 잉크 757 */
  border-top: 1px solid var(--color-line);
  font-size: 18px;
  font-weight: 400;
  letter-spacing: -0.4px;
  line-height: 28px;
  color: var(--color-text-sub);
}

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


/* DB 본문의 인라인 스타일(굴림체 10pt 등) 무력화 */
.case-view__content p,
.case-view__content span,
.case-view__content div,
.case-view__content font,
.case-view__content li {
  font-family: inherit !important;
  font-size: inherit !important;
  line-height: inherit !important;
  color: inherit !important;
  background-color: transparent !important;
}

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

.case-view__content table {
  max-width: 100%;
}

/* 관련URL·첨부파일 */
.urlFile {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--color-line);
}

.urlFile dd {
  margin-left: 0;
}

.urlFile a {
  font-size: 16px;
  line-height: 28px;
  color: var(--color-primary);
  text-decoration: underline;
}

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

/* stroke rect 105×39 rx5.5 → 바깥 106×40, radius 6 */
.case-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;
}

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

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

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

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

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

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

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

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

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

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

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