/* ==========================================================
   지역 랜딩 페이지 전용 스타일
   (columns/assets/column.css 를 먼저 불러온 뒤 덧입힘)
   ========================================================== */

/* ---------- 히어로 ---------- */
.lhero{position:relative;overflow:hidden;background:var(--ink)}
.lhero-bg{position:absolute;inset:0}
.lhero-bg img{width:100%;height:100%;object-fit:cover;opacity:.5}
.lhero:after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(20,19,16,.55),rgba(20,19,16,.88))}
.lhero-in{position:relative;z-index:2;max-width:820px;margin:0 auto;
  padding:64px 20px 58px;color:#fff}
.lhero-kicker{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;
  letter-spacing:.22em;font-weight:700;color:#e5cf9f;margin-bottom:16px}
.lhero-kicker:before{content:"";width:30px;height:1px;background:#e5cf9f}
.lhero h1{font-family:'Noto Serif KR',serif;font-size:clamp(26px,6.4vw,40px);
  font-weight:700;line-height:1.42;letter-spacing:-.025em;word-break:keep-all;
  margin-bottom:18px;color:#fff}
.lhero p{font-size:16px;line-height:1.9;color:rgba(255,255,255,.84);
  word-break:keep-all;margin-bottom:30px}
.lhero p b{color:#e5cf9f;font-weight:700}
.lhero-btns{display:flex;gap:10px;flex-wrap:wrap}
.lhero-btns a{display:inline-flex;align-items:center;justify-content:center;
  font-size:15px;font-weight:700;border-radius:100px;padding:14px 28px;transition:.25s}
.lhero-btns .lb1{background:var(--accent);color:#fff}
.lhero-btns .lb1:hover{background:#c9a267}
.lhero-btns .lb2{border:1px solid rgba(255,255,255,.45);color:#fff}
.lhero-btns .lb2:hover{background:#fff;color:var(--ink)}

/* ---------- 섹션 ---------- */
main section{margin:0 0 52px}
main section > h2{font-family:'Noto Serif KR',serif;font-size:clamp(20px,4.6vw,25px);
  font-weight:600;margin:0 0 18px;letter-spacing:-.025em;word-break:keep-all;
  padding-left:13px;border-left:3px solid var(--accent);line-height:1.5}
main section > p{font-size:16.5px;color:var(--soft);margin-bottom:22px;word-break:keep-all}
main section > p b{color:var(--ink);font-weight:700}
main section > ul{list-style:none;margin:0 0 22px}
main section > ul li{font-size:16px;color:var(--soft);padding:7px 0 7px 22px;
  position:relative;word-break:keep-all}
main section > ul li:before{content:"";position:absolute;left:3px;top:17px;
  width:6px;height:6px;border-radius:50%;background:var(--accent)}
main section > ol{list-style:none;counter-reset:n;margin:0 0 22px}
main section > ol li{font-size:16px;color:var(--soft);padding:8px 0 8px 34px;
  position:relative;word-break:keep-all;counter-increment:n}
main section > ol li:before{content:counter(n);position:absolute;left:0;top:10px;
  width:23px;height:23px;border-radius:50%;background:var(--accent);color:#fff;
  font-size:12px;font-weight:700;display:flex;align-items:center;justify-content:center}

/* ---------- 시공사례 카드 ---------- */
.lcases{display:grid;gap:14px}
.lcase{background:#fff;border:1px solid var(--line);border-radius:11px;
  overflow:hidden;display:block;transition:.28s}
.lcase:hover{transform:translateY(-3px);box-shadow:0 16px 40px rgba(27,26,23,.09);
  border-color:#ddd2bd}
.lcase-img{aspect-ratio:4/3;overflow:hidden;background:#eceae4}
.lcase-img img{width:100%;height:100%;object-fit:cover}
.lcase-body{padding:18px 20px}
.lcase-body b{display:block;font-size:16.5px;font-weight:700;letter-spacing:-.02em;
  margin-bottom:6px;word-break:keep-all}
.lcase-body p{font-size:14px;color:var(--muted);line-height:1.7;word-break:keep-all}
.lcase-price{display:inline-block;margin-top:10px;font-size:13px;font-weight:700;
  color:var(--accent);background:#f5eedd;border-radius:100px;padding:5px 13px}
@media(min-width:640px){.lcases{grid-template-columns:1fr 1fr}}

.more-link{font-size:15px;font-weight:700;color:var(--accent);
  border-bottom:1.5px solid var(--accent);padding-bottom:3px}

/* ---------- 지역 태그 ---------- */
.area-tags{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:14px}
.area-tags span{font-size:13.5px;font-weight:600;color:var(--soft);
  background:#fff;border:1px solid var(--line);border-radius:100px;padding:8px 15px}

/* ---------- 반응형 ---------- */
@media(min-width:640px){
  .lhero-in{padding:84px 20px 76px}
}