/* TASK:T1682 — 페이지 유형별 레이아웃 템플릿(다래울교회 wprch2).
   기존 t1617-style.css 의 토큰(--color-*, --fs-*, --space-*, --radius)은
   그대로 쓴다. 다만 "header,section{ 전부 흰 카드 }" 규칙이 게시판형
   단일 카드 문제의 원인이라, 이 파일은 페이지 유형별 클래스를 새로 정의하고
   해당 요소에는 그 흰 카드 규칙이 겹쳐 붙지 않도록 배경/테두리를 명시적으로
   재정의한다. */

.tpl-hero{background:none;border:none;box-shadow:none;padding:0;margin-top:0;
  position:relative;border-radius:calc(var(--radius)*1.3);overflow:hidden;
  min-height:340px;display:flex;align-items:flex-end;color:#fff}
.tpl-hero img.tpl-hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0}
.tpl-hero::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.12));z-index:1}
.tpl-hero-inner{position:relative;z-index:2;padding:calc(var(--space-unit)*4) calc(var(--space-unit)*4.5)}
.tpl-eyebrow{font-size:var(--fs-caption);letter-spacing:.1em;opacity:.92}
.tpl-hero h1{color:#fff;margin:8px 0;border:none;padding:0}
.tpl-hero p{color:#fff;opacity:.95;max-width:34em}
.tpl-btn{display:inline-block;background:var(--color-primary);color:var(--color-on-primary);
  padding:11px 18px;border-radius:var(--radius);text-decoration:none;margin:8px 8px 0 0;font-size:var(--fs-body)}
.tpl-btn.tpl-light{background:#fff;color:var(--color-primary-dark)}

.tpl-quick{background:none;border:none;box-shadow:none;padding:0;margin-top:calc(var(--space-unit)*2.5*var(--space-density));
  display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.tpl-quick a{text-decoration:none;color:var(--color-text-heading);background:var(--color-surface);
  border:1px solid var(--color-border);border-radius:var(--radius);padding:18px;display:block}
.tpl-quick a strong{display:block;font-size:var(--fs-body)}
.tpl-quick a span{display:block;color:var(--color-text-muted);font-size:var(--fs-caption);margin-top:4px}

.tpl-section{background:var(--color-surface);border:1px solid var(--color-border);
  border-top:2px solid var(--color-primary);border-radius:calc(var(--radius)*1.3);
  box-shadow:var(--shadow-card);padding:calc(var(--space-unit)*4*var(--space-density));
  margin-top:calc(var(--space-unit)*2.5*var(--space-density))}
.tpl-section.tpl-flush{background:none;border:none;box-shadow:none;padding:calc(var(--space-unit)*3) 0;text-align:center}
.tpl-lead{font-size:var(--fs-body-lg);line-height:var(--lh-body)}
.tpl-rule{width:44px;height:3px;background:var(--color-primary);margin:16px auto}

.tpl-info-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin:16px 0}
.tpl-info-grid > div{padding:16px;border-left:3px solid var(--color-primary);background:var(--color-secondary);border-radius:0 var(--radius) var(--radius) 0}
.tpl-info-grid strong{display:block;color:var(--color-text-heading);font-size:var(--fs-body-lg);margin-bottom:4px}

.tpl-mini-list{border-top:1px solid var(--color-border);margin-top:16px}
.tpl-mini-list a{display:flex;justify-content:space-between;gap:12px;padding:12px 0;
  border-bottom:1px solid var(--color-border);text-decoration:none;color:var(--color-text-body)}
.tpl-mini-list em{font-style:normal;color:var(--color-text-muted);font-size:var(--fs-caption);white-space:nowrap}

.tpl-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}
.tpl-gallery img{width:100%;height:120px;object-fit:cover;border-radius:var(--radius)}

.tpl-cta{background:var(--color-primary-dark);color:#fff;text-align:center;
  border:none;box-shadow:none}
.tpl-cta h2{color:#fff}
.tpl-cta p{color:#fff;opacity:.95}

.tpl-zig{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:22px;margin:20px 0}
.tpl-zig.tpl-reverse img{order:2}
.tpl-zig img{width:100%;height:200px;object-fit:cover;border-radius:var(--radius)}
.tpl-quote{font-size:var(--fs-body-lg);color:var(--color-primary-dark);font-weight:700;margin:10px 0 0}

table.tpl-table{width:100%;border-collapse:collapse;margin:16px 0}
table.tpl-table th,table.tpl-table td{text-align:left;padding:12px;border-bottom:1px solid var(--color-border)}
table.tpl-table th{background:var(--color-secondary);color:var(--color-text-heading)}

.tpl-map{padding:20px;background:var(--color-secondary);border:1px solid var(--color-border);
  border-radius:var(--radius);color:var(--color-text-muted);text-align:center;margin-top:16px}

.tpl-post-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.tpl-post{border:1px solid var(--color-border);border-radius:var(--radius);overflow:hidden;background:#fff}
.tpl-post img{width:100%;height:140px;object-fit:cover}
.tpl-post-body{padding:16px}
.tpl-post-date{font-size:var(--fs-caption);color:var(--color-text-muted)}
.tpl-post h3{font-size:var(--fs-h3);margin:6px 0 4px}
.tpl-post p{margin:0;font-size:var(--fs-body)}

@media (max-width:720px){
  .tpl-hero{min-height:280px}
  .tpl-hero-inner{padding:24px 20px}
  .tpl-quick,.tpl-info-grid,.tpl-zig,.tpl-post-grid{grid-template-columns:1fr}
  .tpl-zig.tpl-reverse img{order:0}
  .tpl-gallery img{height:96px}
}