/* 상품 커스텀 사례(공개) 전용 스타일.
   레이아웃 뼈대(.nl-page/.nl-hero/.nl-subnav)는 newsletter.css 를 그대로 쓰고,
   이 파일에는 이 페이지에서만 쓰는 pc- 접두사 규칙만 둔다.
   본문(.ofx-detail) 스타일은 DB에 저장된 본문 CSS가 담당한다. */

/* 모바일에서는 상단 고정 헤더(72px)가 첫 줄을 덮으므로 이 페이지에서만 여백을 준다.
   (.nl-page 의 padding-top 56px 을 이 페이지 범위에서만 덮어쓴다) */
@media (max-width: 768px) {
   .pc-page {
      padding-top: calc(72px + 24px);
   }
}

/* ── 목록 ────────────────────────────────────────────── */
.pc-grid {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
   gap: 28px 24px;
}

@media (max-width: 1200px) {
   .pc-grid {
      grid-template-columns: repeat(3, 1fr);
   }
}

@media (max-width: 900px) {
   .pc-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 20px 16px;
   }
}

@media (max-width: 520px) {
   .pc-grid {
      grid-template-columns: repeat(2, 1fr);
      gap: 16px 12px;
   }
}

.pc-card {
   display: flex;
   flex-direction: column;
   text-decoration: none;
   color: inherit;
   border: 1px solid #ececf1;
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
   transition:
      border-color 0.2s ease,
      transform 0.2s ease,
      box-shadow 0.2s ease;
}

.pc-card:hover {
   border-color: #c9c7e8;
   transform: translateY(-2px);
   box-shadow: 0 10px 24px rgba(17, 17, 20, 0.08);
}

/* 이미지 비율과 간격을 항상 같게 유지한다 */
.pc-card__thumb {
   position: relative;
   aspect-ratio: 4 / 3;
   background: #f4f4f7;
   overflow: hidden;
}

.pc-card__thumb img {
   width: 100%;
   height: 100%;
   object-fit: cover;
   display: block;
}

.pc-card__body {
   padding: 14px 16px 18px;
   display: flex;
   flex-direction: column;
   gap: 6px;
}

.pc-card__category {
   font-size: 0.74rem;
   font-weight: 700;
   color: #463eea;
   letter-spacing: -0.01em;
}

.pc-card__title {
   font-size: 0.95rem;
   font-weight: 700;
   line-height: 1.4;
   color: #111114;
   word-break: keep-all;
}

.pc-empty {
   text-align: center;
   color: #8a8a93;
   padding: 60px 0;
}

/* ── 페이지 이동 ─────────────────────────────────────── */
.pc-pager {
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   gap: 6px;
   margin-top: 36px;
}

.pc-pager__item {
   min-width: 40px;
   min-height: 40px;
   display: inline-flex;
   align-items: center;
   justify-content: center;
   padding: 0 10px;
   border: 1px solid #e2e2e7;
   border-radius: 8px;
   color: #444;
   font-size: 0.86rem;
   font-weight: 600;
   text-decoration: none;
}

.pc-pager__item:hover {
   border-color: #463eea;
   color: #463eea;
}

.pc-pager__item.is-active {
   background: #463eea;
   border-color: #463eea;
   color: #fff;
}

/* ── 상세 ────────────────────────────────────────────── */
.pc-detail {
   max-width: 1240px;
   margin: 0 auto;
}

.pc-detail__head {
   margin-bottom: 24px;
}

.pc-detail__category {
   font-size: 0.8rem;
   font-weight: 700;
   color: #463eea;
   margin-bottom: 8px;
}

.pc-detail__title {
   font-size: clamp(1.4rem, 3vw, 2rem);
   font-weight: 800;
   line-height: 1.3;
   letter-spacing: -0.03em;
   color: #111114;
   margin: 0;
   word-break: keep-all;
}

/* 본문 영역 - 본문은 같은 도메인의 별도 문서를 iframe 으로 띄운다.
   사이트 CSS와 본문 CSS가 서로 닿지 않게 하기 위한 것이며,
   높이는 detail.html 의 스크립트가 본문 문서 높이에 맞춰 늘린다.
   스크립트가 동작하지 않으면 아래 기본 높이 안에서 본문이 자체 스크롤된다. */
.pc-detail__body {
   border: 1px solid #ececf1;
   border-radius: 14px;
   overflow: hidden;
   background: #fff;
}

.pc-detail__frame {
   display: block;
   width: 100%;
   height: 1400px;
   border: 0;
}

/* 스크립트가 높이를 맞춘 뒤에는 내부 스크롤이 생기지 않는다 */
.pc-detail__frame.is-sized {
   height: auto;
}

@media (max-width: 768px) {
   .pc-detail__frame {
      height: 1100px;
   }
}

.pc-detail__foot {
   margin-top: 28px;
   display: flex;
   flex-wrap: wrap;
   justify-content: center;
   gap: 10px;
}

/* 사례 문의 버튼 - 기존 문의 흐름(create_portfolio_request)으로 사례 제목·주소를 넘긴다 */
.pc-detail__consult {
   display: inline-flex;
   align-items: center;
   min-height: 48px;
   padding: 0 24px;
   border-radius: 999px;
   background: #463eea;
   color: #fff;
   font-size: 0.9rem;
   font-weight: 700;
   text-decoration: none;
}

.pc-detail__consult:hover {
   background: #362eca;
   color: #fff;
}

.pc-detail__back:focus-visible,
.pc-detail__consult:focus-visible {
   outline: 3px solid #463eea;
   outline-offset: 2px;
}

.pc-detail__back {
   display: inline-flex;
   align-items: center;
   min-height: 48px;
   padding: 0 24px;
   border: 1px solid #e2e2e7;
   border-radius: 999px;
   background: #fff;
   font-size: 0.9rem;
   font-weight: 600;
   color: #43434a;
   text-decoration: none;
   transition:
      border-color 0.2s ease,
      color 0.2s ease;
}

.pc-detail__back:hover {
   border-color: #111114;
   color: #111114;
}