/* ==========================================================================
   VERTICAL RESCUE / 수직구조대 — keyword detail page style variants
   loaded after style.css. Each keyword page picks ONE hero-*, ONE story
   layout, ONE archive-*, ONE keypoints-* so no two pages look the same.
   ========================================================================== */

/* --------------------------------------------------------------------
   HERO variants
   -------------------------------------------------------------------- */

.dp-hero { position: relative; overflow: hidden; }

/* 1. center — fullscreen photo, centered text */
.dp-hero-center {
  height: 100svh; min-height: 560px; display: flex; align-items: center; justify-content: center;
  text-align: center; --ph: linear-gradient(150deg,#5a3b22,#241207 70%); color: #fff;
}
.dp-hero-center::after { content: ''; position: absolute; inset: 0; background: rgba(35,20,8,.55); }
.dp-hero-center-inner { position: relative; z-index: 2; max-width: 720px; padding: 0 24px; }
.dp-hero-center-inner h1 { font-size: clamp(44px, 7vw, 88px); margin-top: 14px; }
.dp-hero-center-inner .sub { margin-top: 18px; font-size: 16px; color: #eee; }
.dp-hero-center-inner .btn-row { margin-top: 30px; justify-content: center; }

/* 2. split — text panel left, photo right */
.dp-hero-split { display: grid; grid-template-columns: 1fr 1.2fr; min-height: 100svh; }
.dp-hero-split-text { display: flex; flex-direction: column; justify-content: center; padding: 60px 48px; background: var(--bg-alt); }
.dp-hero-split-text h1 { font-size: clamp(38px, 5vw, 64px); margin-top: 14px; }
.dp-hero-split-text .sub { margin-top: 16px; color: var(--text-dim); max-width: 420px; }
.dp-hero-split-text .btn-row { margin-top: 30px; }
.dp-hero-split-photo { --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); min-height: 320px; }
@media (max-width: 900px) { .dp-hero-split { grid-template-columns: 1fr; } .dp-hero-split-photo { aspect-ratio: 4/3; min-height: 0; } }

/* 3. mosaic — 3-photo grid backdrop, centered panel */
.dp-hero-mosaic { position: relative; height: 100svh; min-height: 560px; overflow: hidden; }
.dp-hero-mosaic-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 4px; }
.dp-hero-mosaic-grid .photo { --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); filter: brightness(.55); }
.dp-hero-mosaic-panel { position: relative; z-index: 2; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; background: rgba(35,20,8,.35); padding: 0 24px; color: #fff; }
.dp-hero-mosaic-panel h1 { font-size: clamp(42px, 6.5vw, 80px); margin-top: 14px; }
.dp-hero-mosaic-panel .sub { margin-top: 16px; color: #eee; max-width: 560px; }
@media (max-width: 720px) { .dp-hero-mosaic-grid { grid-template-columns: 1fr; } }

/* 4. diagonal — full photo + clipped dark panel */
.dp-hero-diagonal { position: relative; height: 100svh; min-height: 560px; --ph: linear-gradient(150deg,#5a3b22,#241207 70%); color: #fff; }
.dp-hero-diagonal-panel { position: absolute; inset: 0; width: 58%; background: rgba(40,22,10,.86); clip-path: polygon(0 0, 100% 0, 78% 100%, 0 100%); display: flex; flex-direction: column; justify-content: center; padding: 60px; color: #fff; }
.dp-hero-diagonal-panel h1 { font-size: clamp(36px, 5.5vw, 64px); margin-top: 14px; }
.dp-hero-diagonal-panel .sub { margin-top: 16px; color: rgba(255,255,255,.75); max-width: 380px; }
@media (max-width: 720px) { .dp-hero-diagonal-panel { width: 100%; clip-path: none; background: rgba(40,22,10,.72); } }

/* 5. frame — editorial: title block, then framed inset photo */
.dp-hero-frame { padding: 150px 0 0; }
.dp-hero-frame .container { max-width: 800px; }
.dp-hero-frame h1 { font-size: clamp(34px, 5vw, 56px); margin-top: 14px; }
.dp-hero-frame .sub { margin-top: 14px; color: var(--text-dim); }
.dp-hero-frame-photo { margin: 44px 24px 0; aspect-ratio: 21/9; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
@media (min-width: 1280px) { .dp-hero-frame-photo { margin-left: calc((100vw - var(--container)) / 2 + 24px); margin-right: calc((100vw - var(--container)) / 2 + 24px); } }
@media (max-width: 720px) { .dp-hero-frame-photo { aspect-ratio: 4/3; } }

/* 6. strip — title block, then wide short photo banner below */
.dp-hero-strip { padding: 170px 0 40px; background: var(--bg-alt); }
.dp-hero-strip h1 { font-size: clamp(36px, 5.5vw, 60px); margin-top: 14px; }
.dp-hero-strip .sub { margin-top: 14px; color: var(--text-dim); max-width: 520px; }
.dp-hero-strip-photo { height: 38vh; min-height: 260px; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }

/* 7. stacked-caption — fullscreen photo, title top, caption bottom-right */
.dp-hero-stackedcap { position: relative; height: 100svh; min-height: 560px; display: flex; flex-direction: column; justify-content: space-between; --ph: linear-gradient(150deg,#5a3b22,#241207 70%); color: #fff; }
.dp-hero-stackedcap::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, rgba(35,20,8,.6), rgba(35,20,8,.1) 40%, rgba(35,20,8,.65)); }
.dp-hero-stackedcap-top, .dp-hero-stackedcap-bottom { position: relative; z-index: 2; padding: 110px 24px 0; }
.dp-hero-stackedcap-top h1 { font-size: clamp(40px, 6vw, 76px); margin-top: 12px; }
.dp-hero-stackedcap-bottom { padding: 0 24px 60px; text-align: right; }
.dp-hero-stackedcap-bottom .sub { margin-left: auto; max-width: 420px; color: #eee; }

/* --------------------------------------------------------------------
   FIELD OVERVIEW — shared (reuses .intro / .intro-head / .intro-photos
   from style.css so this section stays consistent across all pages)
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   VISUAL STORY variants
   (zigzag reuses .service-block, numbered reuses .process — from style.css)
   -------------------------------------------------------------------- */

.story { padding: 100px 0; }
.story.alt { background: var(--bg-alt); }

/* stack — full-width photos, caption overlay bottom-left */
.dp-story-stack { display: flex; flex-direction: column; gap: var(--gap); }
.dp-story-stack .story-item { position: relative; overflow: hidden; aspect-ratio: 16/9; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-story-stack .story-item .cap { position: relative; z-index: 2; padding: 22px 26px; margin-top: -1px; }
.dp-story-stack .story-item .cap .en { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.dp-story-stack .story-item .cap p { margin-top: 6px; font-size: 15px; color: #f2f2f0; font-weight: 600; }
.dp-story-stack .story-item .cap { position: absolute; left: 0; bottom: 0; }
@media (max-width: 720px) { .dp-story-stack .story-item { aspect-ratio: 4/3; } }

/* timeline — vertical line with numbered dots */
.dp-timeline { position: relative; padding-left: 40px; }
.dp-timeline::before { content: ''; position: absolute; left: 11px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.dp-timeline-item { position: relative; display: grid; grid-template-columns: 220px 1fr; gap: 28px; padding: 30px 0; align-items: center; }
.dp-timeline-dot { position: absolute; left: -40px; top: 50%; transform: translateY(-50%); width: 24px; height: 24px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 11px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.dp-timeline-photo { aspect-ratio: 4/3; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-timeline-text .en { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.dp-timeline-text p { margin-top: 8px; color: var(--text-dim); font-size: 14px; }
@media (max-width: 720px) { .dp-timeline { padding-left: 28px; } .dp-timeline-item { grid-template-columns: 1fr; } .dp-timeline-dot { left: -28px; width: 20px; height: 20px; font-size: 10px; } }

/* filmstrip — horizontal scroll-snap cards */
.dp-filmstrip { display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; -webkit-overflow-scrolling: touch; }
.dp-filmstrip .film-item { position: relative; flex: 0 0 auto; width: 280px; aspect-ratio: 3/4; scroll-snap-align: start; overflow: hidden; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-filmstrip .film-item .cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 16px 18px; }
.dp-filmstrip .film-item .cap .en { font-size: 10.5px; letter-spacing: .12em; color: var(--accent); font-weight: 700; }
.dp-filmstrip .film-item .cap p { margin-top: 6px; font-size: 13.5px; color: #f2f2f0; font-weight: 600; }

/* mosaic — irregular grid with small caption chips */
.dp-story-mosaic { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 140px; gap: 12px; }
.dp-story-mosaic .photo { position: relative; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-story-mosaic .sm-a { grid-column: span 2; grid-row: span 2; }
.dp-story-mosaic .sm-b { grid-column: span 2; grid-row: span 1; }
.dp-story-mosaic .sm-c { grid-column: span 1; grid-row: span 1; }
.dp-story-mosaic .sm-d { grid-column: span 1; grid-row: span 1; }
.dp-story-mosaic .sm-e { grid-column: span 2; grid-row: span 1; }
.dp-story-mosaic .sm-f { grid-column: span 2; grid-row: span 2; }
.dp-story-mosaic .chip { position: absolute; left: 10px; bottom: 10px; z-index: 2; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff; background: rgba(35,20,8,.6); padding: 5px 10px; }
@media (max-width: 720px) { .dp-story-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 120px; } .dp-story-mosaic .sm-a, .dp-story-mosaic .sm-f { grid-column: span 2; grid-row: span 2; } .dp-story-mosaic .sm-b, .dp-story-mosaic .sm-e { grid-column: span 2; grid-row: span 1; } }

/* split-caption — big photo + 2 stacked side photos, alternating */
.dp-split-story { display: flex; flex-direction: column; gap: 56px; }
.dp-split-group { display: grid; grid-template-columns: 1.6fr 1fr; gap: 12px; }
.dp-split-group.rev { direction: rtl; }
.dp-split-group.rev > * { direction: ltr; }
.dp-split-main { aspect-ratio: 4/3; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-split-side { display: flex; flex-direction: column; gap: 12px; }
.dp-split-side .photo { flex: 1; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-split-cap { margin-top: 14px; }
.dp-split-cap .en { font-size: 11px; letter-spacing: .14em; color: var(--accent); font-weight: 700; }
.dp-split-cap p { margin-top: 6px; color: var(--text-dim); font-size: 14px; }
@media (max-width: 720px) { .dp-split-group { grid-template-columns: 1fr; } .dp-split-side { flex-direction: row; } .dp-split-side .photo { aspect-ratio: 1/1; } }

/* --------------------------------------------------------------------
   KEY POINTS variants
   -------------------------------------------------------------------- */

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

.dp-kp-list { display: flex; flex-direction: column; }
.dp-kp-row { display: flex; gap: 24px; align-items: flex-start; padding: 26px 0; border-top: 1px solid var(--border); }
.dp-kp-row:last-child { border-bottom: 1px solid var(--border); }
.dp-kp-num { font-size: 32px; font-weight: 800; color: var(--text-faint); flex: 0 0 60px; }
.dp-kp-row h3 { font-size: 18px; }
.dp-kp-row p { margin-top: 8px; color: var(--text-dim); font-size: 14px; }

.dp-kp-overlay { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.dp-kp-overlay .kp-item { position: relative; aspect-ratio: 3/4; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-kp-overlay .kp-item .cap { position: absolute; left: 0; bottom: 0; z-index: 2; padding: 20px; }
.dp-kp-overlay .kp-item .cap h3 { font-size: 16px; }
.dp-kp-overlay .kp-item .cap p { margin-top: 6px; font-size: 12.5px; color: #ddd; }
@media (max-width: 720px) { .dp-kp-overlay { grid-template-columns: 1fr; } }

/* --------------------------------------------------------------------
   PHOTO ARCHIVE variants
   (masonry reuses .archive / .archive-grid from style.css)
   -------------------------------------------------------------------- */

.dp-archive-uniform { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.dp-archive-uniform .photo { aspect-ratio: 1/1; cursor: zoom-in; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
@media (max-width: 720px) { .dp-archive-uniform { grid-template-columns: repeat(2, 1fr); } }

.dp-archive-featured { display: grid; grid-template-columns: 1.4fr 1fr; gap: 12px; }
.dp-archive-featured .af-main { aspect-ratio: 4/5; cursor: zoom-in; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
.dp-archive-featured .af-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.dp-archive-featured .af-grid .photo { aspect-ratio: 1/1; cursor: zoom-in; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }
@media (max-width: 900px) { .dp-archive-featured { grid-template-columns: 1fr; } .dp-archive-featured .af-main { aspect-ratio: 16/9; } }

.dp-archive-strip { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 12px; }
.dp-archive-strip .photo { flex: 0 0 auto; width: 240px; aspect-ratio: 3/4; scroll-snap-align: start; cursor: zoom-in; --ph: linear-gradient(150deg,#f3e3ca,#e8cfa8); }

/* --------------------------------------------------------------------
   RELATED ACTIVITIES / CTA — shared (reuse .case-grid/.case-card and
   .cta-band from style.css so navigation chrome stays consistent)
   -------------------------------------------------------------------- */

/* --------------------------------------------------------------------
   3차(설치/점검/유지관리 등) 키워드 페이지 공통 — AEO(표/체크리스트/FAQ/신선도)
   -------------------------------------------------------------------- */

/* freshness tag — "2026년 9월 기준 · 최종수정일 ..." */
.dp-freshness { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; color: var(--text-dim); border: 1px solid var(--border); padding: 6px 12px; margin-top: 18px; }

/* SPEC TABLE — 비용/기준/절차/비교표 (AI가 표를 우선 인용) */
.dp-table-section { padding: 100px 0; }
.dp-table-section.alt { background: var(--bg-alt); }
.dp-table-wrap { overflow-x: auto; border: 1px solid var(--border); }
.dp-table { width: 100%; border-collapse: collapse; font-size: 14.5px; background: var(--surface); }
.dp-table caption { text-align: left; font-size: 12px; color: var(--text-dim); padding: 10px 16px; caption-side: top; }
.dp-table th, .dp-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); text-align: left; }
.dp-table th { background: var(--bg-alt); font-weight: 700; }
.dp-table tbody tr:last-child td { border-bottom: none; }

/* CHECKLIST — 체크리스트/기준 항목 */
.dp-checklist { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 32px; list-style: none; padding: 0; margin: 0; }
.dp-checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: 15px; color: var(--text); }
.dp-checklist li::before { content: '✓'; flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; background: var(--accent); color: #fff; font-size: 12px; font-weight: 800; display: flex; align-items: center; justify-content: center; }
@media (max-width: 720px) { .dp-checklist { grid-template-columns: 1fr; } }

/* FAQ — 본문 FAQPage 스키마와 1:1 매칭되는 실제 질문 4~6개 */
.dp-faq { padding: 100px 0; }
.dp-faq.alt { background: var(--bg-alt); }
.dp-faq-list { display: flex; flex-direction: column; max-width: 820px; }
.dp-faq-list details { border-top: 1px solid var(--border); padding: 22px 0; }
.dp-faq-list details:last-child { border-bottom: 1px solid var(--border); }
.dp-faq-list summary { cursor: pointer; font-size: 17px; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.dp-faq-list summary::-webkit-details-marker { display: none; }
.dp-faq-list summary::after { content: '+'; flex: 0 0 auto; font-weight: 400; color: var(--text-dim); }
.dp-faq-list details[open] summary::after { content: '−'; }
.dp-faq-list details p { margin-top: 12px; color: var(--text-dim); font-size: 14.5px; line-height: 1.7; }

/* ==========================================================================
   2026-10 image-first detail layout
   - hero no longer fills the whole viewport (photos reach first screen)
   - .dp-quad: 4 field photos right after the hero (row / grid / feat variants)
   - overflow fixes (grid min-width blowout), compact related cards
   ========================================================================== */
.dp-hero-center, .dp-hero-mosaic, .dp-hero-diagonal, .dp-hero-stackedcap { height: clamp(480px, 72svh, 720px); min-height: 0; }
.dp-hero-split { min-height: clamp(440px, 70svh, 680px); grid-template-columns: minmax(0,1fr) minmax(0,1.2fr); }
.dp-hero-split-text, .dp-hero-split-text > * { min-width: 0; }
[class*="dp-hero-"] h1 { overflow-wrap: break-word; word-break: keep-all; }
@media (max-width: 720px) {
  .dp-hero-center, .dp-hero-mosaic, .dp-hero-diagonal, .dp-hero-stackedcap { height: clamp(380px, 56svh, 480px); }
  .dp-hero-split { min-height: 0; grid-template-columns: minmax(0,1fr); }
  .dp-hero-split-text { padding: 96px 20px 32px; }
  .dp-hero-split-photo { aspect-ratio: 16/10; }
  .dp-hero-center-inner h1, .dp-hero-mosaic-panel h1, .dp-hero-diagonal-panel h1, .dp-hero-stackedcap-top h1, .dp-hero-split-text h1 { font-size: clamp(30px, 8.6vw, 44px); line-height: 1.2; }
  .dp-hero-stackedcap-top { padding-top: 96px; } .dp-hero-stackedcap-bottom { padding-bottom: 28px; }
  .dp-hero-diagonal-panel { padding: 90px 20px 24px; }
}
.dp-archive-featured { grid-template-columns: minmax(0,1.4fr) minmax(0,1fr); }
.dp-archive-featured .af-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
@media (max-width: 900px) { .dp-archive-featured { grid-template-columns: minmax(0,1fr); } }

/* 4 field photos */
.dp-quad { padding: 56px 0 24px; }
.dp-quad .section-head { margin-bottom: 24px; }
.dp-quad-grid { display: grid; gap: 12px; }
.dp-qph { margin: 0; overflow: hidden; background: #e8cfa8; cursor: zoom-in; aspect-ratio: 4/3; min-width: 0; }
.dp-qph img { width: 100%; height: 100%; object-fit: cover; display: block; }
.dp-quad-row .dp-quad-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.dp-quad-grid .dp-qph { aspect-ratio: 4/3; }
.dp-quad-grid { grid-template-columns: repeat(2, minmax(0,1fr)); }
.dp-quad-feat .dp-quad-grid { grid-template-columns: minmax(0,2fr) minmax(0,1fr); }
.dp-quad-feat .dp-qph:first-child { grid-row: span 3; aspect-ratio: auto; min-height: 100%; }
.dp-quad-feat .dp-qph:not(:first-child) { aspect-ratio: 16/10; }
.dp-quad + .intro { padding-top: 56px; }
.intro-head:last-child { margin-bottom: 0; }
@media (max-width: 900px) { .dp-quad-row .dp-quad-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 600px) {
  .dp-quad { padding: 36px 0 8px; }
  .dp-quad-grid, .dp-quad-row .dp-quad-grid, .dp-quad-feat .dp-quad-grid { grid-template-columns: minmax(0,1fr); }
  .dp-quad-feat .dp-qph:first-child, .dp-quad-feat .dp-qph:not(:first-child) { grid-row: auto; aspect-ratio: 4/3; min-height: 0; }
}

/* related-service cards: compact */
.cases .case-card .photo { aspect-ratio: 16/9; }
.cases .case-card .body { padding: 14px 16px; }
.cases .case-card p { margin-top: 8px; font-size: 13px; }
@media (max-width: 560px) {
  .cases .case-grid { grid-template-columns: minmax(0,1fr); gap: 10px; }
  .cases .case-card { display: grid; grid-template-columns: 112px minmax(0,1fr); }
  .cases .case-card .photo { aspect-ratio: 1/1; height: 100%; }
}