/* 구축사례 상세 — 시안 CaseDetail / CaseDetail-M */

.cd-top { display: flex; flex-direction: column; gap: 32px; padding-top: 40px; }
.cd-crumb { display: flex; gap: 8px; font-size: 14px; line-height: 1.2; color: var(--gray-500); }
.cd-crumb a { color: var(--gray-500); text-decoration: none; }
.cd-crumb a:hover { color: var(--black); text-decoration: underline; }
.cd-crumb a[aria-current] { color: var(--black); font-weight: 600; }
.cd-head { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.cd-badges { display: flex; gap: 8px; }
.badge { display: inline-flex; align-items: center; gap: 6px; padding: 6px 14px; border-radius: var(--radius-pill); font-size: 14px; font-weight: 600; line-height: 1.2; }
.badge--cat { background: var(--vermilion-100); color: var(--vermilion-700); }
.badge--live { background: var(--white); border: 1px solid var(--border); color: var(--charcoal); }
.badge--live i { width: 8px; height: 8px; border-radius: 50%; background: var(--live); }
.badge--ended { background: var(--white); border: 1px solid var(--border); color: var(--gray-500); }
.cd-title { font-size: clamp(40px, 4.8vw, 68px); line-height: 1.26; letter-spacing: -.02em; }
.cd-hero { aspect-ratio: 16 / 7; overflow: hidden; border-radius: var(--radius-card); background: var(--sand-pale); }
.cd-hero img { width: 100%; height: 100%; object-fit: cover; }

/* 접속 줄: QR + 주소 ‖ 기본 정보 2×2 */
.cd-access { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); border-top: 1.5px solid var(--black); border-bottom: 1px solid var(--border); }
.cd-access--noqr { grid-template-columns: 1fr; }
.cd-access__qr { display: flex; align-items: center; gap: 28px; min-width: 0; padding: 24px 40px 24px 0; }
.cd-qr { flex: 0 0 132px; width: 132px; height: 132px; mix-blend-mode: multiply; }
.cd-qr svg { width: 100%; height: 100%; }
.cd-access__text { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd-access__hint { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--vermilion-700); }
.cd-access__url { display: flex; align-items: center; gap: 14px; min-width: 0; }
.cd-access__url b { font-size: 24px; line-height: 1.2; letter-spacing: -.01em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cd-access__go:hover, .cd-access__go:focus-visible { transform: rotate(45deg); }
.cd-access__go { transition: background .3s ease, transform .3s ease; }
.cd-info { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-left: 1px solid var(--border); }
.cd-access--noqr .cd-info { border-left: 0; grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cd-info > div { display: flex; flex-direction: column; gap: 6px; padding: 24px 0 24px 40px; }
.cd-info > div:nth-child(-n+2):nth-last-child(n+3) { border-bottom: 1px solid var(--border); }
.cd-access--noqr .cd-info > div { border-bottom: 0; padding-left: 0; }
.cd-info dt { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--gray-500); }
.cd-info dd { font-size: 18px; font-weight: 600; line-height: 1.4; }

/* 섹션 공통 */
.cd-sec { display: flex; flex-direction: column; gap: 28px; padding-top: 96px; }
.cd-sec--about { gap: 40px; padding-top: 120px; }
.cd-sec__head { display: flex; flex-direction: column; gap: 16px; }
.cd-sec__head .section-label { margin: 0; }
.cd-tags { display: flex; flex-wrap: wrap; gap: 10px; }
.cd-tags .tag { padding: 0 24px; font-size: 16px; line-height: 1.2; }

.cd-intro { display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
.cd-venue { align-self: flex-start; padding: 6px 14px; border: 1px solid #E6E1D8; border-radius: var(--radius-pill); background: var(--white); font-size: 14px; font-weight: 600; line-height: 1.2; }
.cd-intro p { font-size: 20px; line-height: 1.7; color: var(--charcoal); }

/* 현장 사진 0~3장: 1장 16:7 / 2장 4:3 반반 / 3장 큰 1 + 작은 2 */
.cd-photos { display: grid; gap: 16px; }
.cd-photo { display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.cd-photo__img { overflow: hidden; border-radius: 20px; background: var(--sand-pale); }
.cd-photo__img img { width: 100%; height: 100%; object-fit: cover; }
.cd-photo figcaption { font-size: 14px; line-height: 1.4; color: var(--gray-700); }
.cd-photos--1 .cd-photo__img { aspect-ratio: 16 / 7; }
.cd-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cd-photos--2 .cd-photo__img { aspect-ratio: 4 / 3; }
.cd-photos--3 { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); grid-template-rows: 1fr 1fr; height: 520px; }
.cd-photos--3 .cd-photo:first-child { grid-row: span 2; }
.cd-photos--3 .cd-photo__img { flex: 1; min-height: 0; }

/* 서비스 화면 */
.cd-screens { margin-top: 120px; background: var(--sand-pale); }
.cd-screens__inner { display: flex; flex-direction: column; gap: 40px; padding-top: 96px; padding-bottom: 96px; }
.cd-screens .section-label { color: var(--vermilion-700); }
.cd-phones { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 24px; }
.cd-phones figure { display: flex; flex-direction: column; gap: 12px; }
.phone { aspect-ratio: 300 / 600; overflow: hidden; border: 6px solid var(--black); border-radius: 24px; background: var(--white); }
.phone img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.cd-phones figcaption { font-size: 14px; line-height: 1.4; color: var(--gray-700); }

/* 성과 · 소감 */
.cd-results { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1px; overflow: hidden; border: 1px solid var(--border); border-radius: 20px; background: var(--border); }
.cd-results li { display: flex; flex-direction: column; gap: 6px; padding: 32px; background: var(--white); }
.cd-results b { font-size: 48px; line-height: 1.2; letter-spacing: -.02em; }
.cd-results b.is-accent { color: var(--vermilion); }
.cd-results small { margin-left: 4px; font-size: 20px; color: var(--gray-500); letter-spacing: 0; }
.cd-results span { font-size: 15px; line-height: 1.4; color: var(--gray-700); }
.cd-quote { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; padding: 8px 0 8px 28px; border-left: 3px solid var(--vermilion); }
.cd-quote blockquote { margin: 0; }
.cd-quote p { font-size: 24px; line-height: 1.6; }
.cd-quote figcaption { font-size: 15px; color: var(--gray-500); }

/* CTA 뒤에 관련 사례가 이어지므로 */
.cta-band-wrap--tight { padding-bottom: 0; }

/* 관련 사례 · 이전/다음 */
.cd-related { display: flex; flex-direction: column; gap: 32px; padding-top: 120px; padding-bottom: 96px; }
.cd-related__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 16px; }
.cd-related__title { font-size: clamp(28px, 2.8vw, 40px); line-height: 1.2; letter-spacing: -.015em; }
.cd-related .text-link { align-self: auto; margin: 0; padding-bottom: 4px; border-bottom: 1.5px solid var(--black); color: var(--black); font-size: 16px; font-weight: 600; text-decoration: none; }
.cd-related .text-link:hover { color: var(--vermilion-600); border-color: var(--vermilion-600); }
.cd-related__list { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 24px; }
.rel { display: flex; flex-direction: column; gap: 12px; color: var(--black); text-decoration: none; }
.rel__th { display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: var(--sand-pale); }
.rel__th img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.rel:hover .rel__th img { transform: scale(1.04); }
.rel__text { display: flex; flex-direction: column; gap: 12px; }
.rel__text b { font-size: 20px; line-height: 1.3; transition: color .2s ease; }
.rel:hover b, .rel:focus-visible b { color: var(--vermilion-600); }
.cd-pager { display: grid; grid-template-columns: 1fr 1fr; margin-top: 32px; border-top: 1.5px solid var(--black); }
.cd-pager a { display: flex; flex-direction: column; gap: 6px; padding: 28px 0; color: var(--black); text-decoration: none; }
.cd-pager a span { font-size: 13px; font-weight: 600; line-height: 1.2; color: var(--gray-500); }
.cd-pager a b { font-size: 18px; line-height: 1.3; }
.cd-pager a:hover b { color: var(--vermilion-600); }
.cd-pager__next { grid-column: 2; text-align: right; border-left: 1px solid var(--border); }

@media (max-width: 1023px) {
  .cd-access { grid-template-columns: 1fr; }
  .cd-access__qr { padding-right: 0; border-bottom: 1px solid var(--border); }
  .cd-info { border-left: 0; }
  .cd-info > div { padding-left: 0; }
  .cd-access--noqr .cd-info { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .cd-top { gap: 16px; padding-top: 20px; }
  .cd-crumb { font-size: 13px; }
  .cd-head { gap: 12px; }
  .badge { padding: 5px 12px; font-size: 12px; }
  .cd-title { font-size: 32px; line-height: 1.3; }
  .cd-hero { aspect-ratio: 4 / 3; margin-top: 4px; border-radius: 18px; }
  .cd-access__qr { gap: 16px; padding: 16px 0; }
  .cd-qr { flex-basis: 84px; width: 84px; height: 84px; }
  .cd-access__text { flex: 1; gap: 6px; }
  .cd-access__hint { font-size: 12px; }
  .cd-access__url { gap: 10px; }
  .cd-access__url b { font-size: 17px; }
  .cd-access__go { width: 40px; height: 40px; }
  .cd-info > div { padding: 14px 0; gap: 4px; }
  .cd-info > div:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--border); }
  .cd-info dt { font-size: 12px; }
  .cd-info dd { font-size: 15px; }

  .cd-sec { gap: 16px; padding-top: 64px; }
  .cd-sec--about { padding-top: 72px; }
  .cd-sec__head { gap: 12px; }
  .cd-sec__head .h2 { font-size: 28px; line-height: 1.35; }
  .cd-tags { gap: 8px; }
  .cd-tags .tag { height: 40px; padding: 0 16px; font-size: 14px; }
  .cd-intro p { font-size: 16px; }
  .cd-photos { gap: 10px; }
  .cd-photo__img { border-radius: 14px; }
  .cd-photos--1 .cd-photo__img { aspect-ratio: 4 / 3; }
  .cd-photos--2 .cd-photo__img { aspect-ratio: 3 / 4; }
  .cd-photos--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-template-rows: none; height: auto; }
  .cd-photos--3 .cd-photo:first-child { grid-column: span 2; grid-row: auto; }
  .cd-photos--3 .cd-photo__img { aspect-ratio: 1; }
  .cd-photos--3 .cd-photo:first-child .cd-photo__img { aspect-ratio: 4 / 3; }

  .cd-screens { margin-top: 72px; }
  .cd-screens__inner { gap: 20px; padding: 56px 0 56px var(--gutter); }
  .cd-phones { display: flex; gap: 12px; overflow-x: auto; padding-right: var(--gutter); scrollbar-width: none; }
  .cd-phones::-webkit-scrollbar { display: none; }
  .cd-phones li { flex: 0 0 170px; }
  .cd-phones figure { gap: 10px; }
  .phone { border-width: 5px; border-radius: 20px; }
  .cd-phones figcaption { font-size: 13px; }

  .cd-results li { padding: 20px; }
  .cd-results b { font-size: 36px; }
  .cd-quote { margin-top: 16px; padding: 4px 0 4px 18px; }
  .cd-quote p { font-size: 18px; }
  .cd-quote figcaption { font-size: 13px; }

  .cd-related { gap: 16px; padding-top: 64px; padding-bottom: 72px; }
  .cd-related__title { font-size: 24px; }
  .cd-related .text-link { display: none; }
  .cd-related__list { grid-template-columns: 1fr; gap: 0; }
  .rel { display: grid; grid-template-columns: 96px 1fr; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border); }
  .rel__th { border-radius: 8px; }
  .rel__text { gap: 2px; }
  .rel__text b { font-size: 16px; }
  .cd-pager { margin-top: 8px; }
  .cd-pager a { padding: 18px 0; }
  .cd-pager a span { font-size: 12px; }
  .cd-pager a b { font-size: 14px; }
  .cd-pager__next { padding-left: 16px !important; }
}