/* ===== default theme — AS-IS homewindows 룩 재현 ===== */
/* brand #741925 딥버건디 · Pretendard(Freesentation 폴백) */

/* ----------------------------------------------------------
   0. 폰트 — Pretendard (Freesentation 미배포시 폴백)
   ---------------------------------------------------------- */
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-display: swap;
  font-style: normal;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/Pretendard-ExtraBold.woff2') format('woff2');
  font-weight: 800;
  font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('/fonts/pretendard/Pretendard-Black.woff2') format('woff2');
  font-weight: 900;
  font-display: swap;
}

/* ----------------------------------------------------------
   1. 디자인 토큰 (AS-IS homewindows 값)
   ---------------------------------------------------------- */
:root {
  /* 브랜드 */
  --brand:         #741925;   /* 딥 버건디 — 주색 */
  --brand-2:       #8d1b2a;   /* 버건디 보조 */
  --brand-dark:    #5a0f1c;   /* 호버용 더 어두운 버건디 */

  /* 네이비 (푸터·짙은 강조) */
  --navy:          #0d213e;
  --navy-2:        #0a3356;

  /* 배경 */
  --bg:            #ffffff;
  --bg-alt:        #faf5f1;   /* 크림 — 섹션 교차 */
  --bg-soft:       #f8f8f8;
  --bg-hero:       #faf5f1;

  /* 라인 */
  --line:          #d4d5dc;   /* 네비 보더 (AS-IS 관찰) */
  --line-2:        #ececec;
  --line-3:        #e0e4eb;
  --line-soft:     #ecdfd0;   /* 따뜻한 카드 보더 */

  /* 텍스트 */
  --text:          #222222;
  --text-2:        #444444;
  --muted:         #777777;
  --muted-2:       #888888;

  /* 위험 */
  --danger:        #c0392b;

  /* 폰트 스택 */
  --font-base: 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* 반경 */
  --radius:        10px;
  --radius-sm:     6px;
  --radius-lg:     16px;

  /* 그림자 */
  --shadow:        0 2px 14px rgba(0,0,0,.07);
  --shadow-md:     0 6px 28px rgba(0,0,0,.10);

  /* 레이아웃 */
  --maxw:          1140px;
  --space:         64px;     /* 섹션 기본 상하 여백 */
}

/* ----------------------------------------------------------
   2. 기본 리셋 / 바디
   AS-IS 실측: html font-size 1.198vw · line-height 1.7 · color #231815
   ★ vw 기반 스케일 + 모바일 클램프(≤768px)
   ---------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* AS-IS: 1.198vw @ 1920px ≈ 23px. 하한 16px(폰), 상한 20px 클램프 */
  font-size: clamp(16px, 1.198vw, 20px);
  line-height: 1.7;
  color: #231815;
  word-break: keep-all;
}

body {
  font-family: var(--font-base);
  /* base.css가 body{font-size:17px} 선언 — default.css가 후로드되므로 1rem 상속으로 재정의 */
  font-size: 1rem;   /* html 기반 clamp(16px,1.198vw,20px) em 체계 활성화 */
  line-height: 1.7;
  color: #231815;
  background: var(--bg);
  margin: 0;
}

/* 제목 — em 기반 (AS-IS 측정치) */
h1 { font-size: 2em;   line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: 1.6em; line-height: 1.3;  margin: 0 0 .5em; }
h3 { font-size: 1.3em; line-height: 1.35; margin: 0 0 .4em; }
h4 { font-size: 1.2em; line-height: 1.4;  margin: 0 0 .4em; }

/* 모바일 (≤768px): vw 1.198vw → 폰에서 너무 작아지므로 px 기반으로 전환 */
@media (max-width: 768px) {
  html { font-size: 16px; }
}
@media (max-width: 480px) {
  html { font-size: 15px; }
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; height: auto; }

/* .container override — AS-IS 59.375vw ~ 1140px */
.container {
  width: min(92vw, var(--maxw));
  margin-left: auto;
  margin-right: auto;
  padding-left: 0;
  padding-right: 0;
}

/* ----------------------------------------------------------
   3. 헤더 — 로고 단독 중앙 블록 (네비와 분리)
   ---------------------------------------------------------- */
.site-header {
  background: #fff;
  /* 헤더 자체는 sticky 해제 — nav가 sticky 처리 */
  position: relative;
  z-index: 10;
  border-bottom: none;
}

.header-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 브랜드 블록 */
.brand-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-decoration: none;
  padding: 18px 0 10px;
  gap: 3px;
}
.brand-block:hover { text-decoration: none; }

.brand-tagline {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--brand);
  opacity: 0.75;
}

.brand-name {
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  letter-spacing: -0.04em;
  line-height: 1.1;
}

.brand-logo {
  max-height: 52px;
  max-width: 220px;
  object-fit: contain;
}

/* 헤더-네비 사이 구분선 제거 (nav 자체 보더로 대체) */
.header-line { display: none; }

/* ----------------------------------------------------------
   4. 네비 — ★핵심: 흰 배경 + 위아래 #d4d5dc 보더 + sticky
   ---------------------------------------------------------- */
.nav-row {
  /* nav-row가 sticky 역할 수행 */
  background: #fff;
  border-top: 1px solid var(--line);      /* #d4d5dc */
  border-bottom: 1px solid var(--line);   /* #d4d5dc */
  position: sticky;
  top: 0;
  z-index: 100;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0;
}

/* 모바일에서 햄버거 숨김 — 항상 가로 3메뉴 */
.hamburger { display: none !important; }

/* 메인 네비 — 항상 가로 flex */
.main-nav {
  display: flex !important;
  flex-direction: row !important;
  position: static !important;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0 !important;
  width: 100%;
  max-width: var(--maxw);
  justify-content: center;
  gap: 0;
}

.main-nav a {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  padding: 14px 10px;
  /* 네비: 크기 한 단계 업 + 굵기 강화 */
  font-size: clamp(16px, 1.95vw, 25px);
  font-weight: 700;
  color: var(--text);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  text-align: center;
  position: relative;
  transition: color 0.15s;
  min-height: 48px;  /* 터치 친화 44px+ */
}
.main-nav a:hover {
  color: var(--brand);
  text-decoration: none;
}
.main-nav a.active {
  color: var(--brand);
  font-weight: 800;
}
/* active 하단 accent 선 */
.main-nav a.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 20%;
  right: 20%;
  height: 2px;
  background: var(--brand);
  border-radius: 2px 2px 0 0;
}

/* 상담신청 CTA 버튼형 (첫 메뉴) */
.main-nav a.nav-cta,
.main-nav a.nav-cta.active {
  color: var(--brand);
  font-weight: 700;
  background: none;
  border-radius: 0;
  padding: 14px 10px;
  margin: 0;
}
.main-nav a.nav-cta:hover {
  color: var(--brand-dark);
  background: rgba(116,25,37,.05);
  text-decoration: none;
}
.main-nav a.nav-cta::after { display: none !important; }

/* 모바일 (≤768px): 4메뉴 균등 배치 유지 — vw clamp 오버라이드 */
@media (max-width: 768px) {
  .main-nav a {
    font-size: 15px;   /* html 16px 기준 — 4메뉴 균등 유지 */
    font-weight: 700;
    padding: 12px 4px;
    min-height: 46px;
    letter-spacing: -0.01em;  /* 4메뉴 넘침 방지 */
  }
  .brand-name { font-size: 22px; }
}

@media (max-width: 480px) {
  .main-nav a { font-size: 16px; font-weight: 800; padding: 13px 1px; letter-spacing: -0.04em; }
  .brand-name { font-size: 20px; }
  .brand-block { padding: 14px 0 8px; }
}

/* 데스크톱: clamp(16px, 1.95vw, 25px) 이 대부분 처리 — 큰 화면 패딩만 확장 */
@media (min-width: 769px) {
  .main-nav a { padding: 15px 28px; flex: none; }
  .main-nav { justify-content: center; }
}
@media (min-width: 1024px) {
  /* 1024px+ 에서 1.719vw ≈ 17~22px; padding만 확장 */
  .main-nav a { padding: 16px 36px; }
  .brand-name { font-size: 28px; }
}

/* ----------------------------------------------------------
   5. 버튼 시스템
   ---------------------------------------------------------- */
.btn {
  display: inline-block;
  font-family: var(--font-base);
  font-size: 15px;
  font-weight: 600;
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  cursor: pointer;
  text-align: center;
  transition: opacity .15s, transform .12s, box-shadow .15s;
  text-decoration: none;
  line-height: 1.4;
}
.btn:hover { text-decoration: none; opacity: .9; }

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 3px 10px rgba(116,25,37,.22);
}
.btn-primary:hover {
  background: var(--brand-dark);
  opacity: 1;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(116,25,37,.28);
}

.btn-outline {
  background: transparent;
  border: 2px solid var(--brand);
  color: var(--brand);
}
.btn-outline:hover {
  background: rgba(116,25,37,.06);
  opacity: 1;
}

.btn-light {
  background: #fff;
  color: var(--brand);
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(0,0,0,.12);
}
.btn-light:hover {
  background: #f8f4f4;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0,0,0,.16);
  text-decoration: none;
  opacity: 1;
}

.btn-lg {
  padding: 14px 30px;
  font-size: 17px;
  border-radius: var(--radius);
}
.btn-xl {
  padding: 16px 36px;
  font-size: 18px;
  font-weight: 700;
  border-radius: var(--radius);
}
.btn-sm { padding: 6px 12px; font-size: 13px; }

.btn-kakao { background: #FAE100; color: #3a1d1d; border-color: #FAE100; }
.btn-kakao:hover { background: #e8cf00; color: #3a1d1d; text-decoration: none; opacity: 1; }

.btn-outline-warm {
  background: transparent;
  border: 2px solid var(--line-soft);
  color: var(--text);
  font-size: 17px;
  font-weight: 600;
  border-radius: var(--radius);
  display: inline-block;
  padding: 14px 30px;
  transition: border-color .15s, color .15s;
}
.btn-outline-warm:hover {
  border-color: var(--brand);
  color: var(--brand);
  text-decoration: none;
}

/* ----------------------------------------------------------
   6. 섹션 공통
   ---------------------------------------------------------- */
.section { padding: var(--space) 0; }
.section-alt { background: var(--bg-alt); }

.section-title {
  /* AS-IS: 2.344vw @ 1920px ≈ 45px 색상 #741925. 클램프 22~36px */
  font-size: clamp(22px, 2.344vw, 36px);
  font-weight: 800;
  letter-spacing: -0.04em;
  margin: 0 0 28px;
  color: var(--brand);  /* AS-IS: 섹션 타이틀 #741925 = var(--brand) */
  position: relative;
}
.section-title::after {
  content: '';
  display: block;
  width: 32px;
  height: 3px;
  background: var(--brand);
  border-radius: 2px;
  margin-top: 10px;
}

.section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 20px; flex-wrap: wrap; gap: 8px; }
.more-link { font-size: 15px; color: var(--brand); font-weight: 600; }
.more-link:hover { text-decoration: underline; }

/* ----------------------------------------------------------
   7. 히어로 — 풀블리드 따뜻한 크림 배경
   ---------------------------------------------------------- */
.hero, .hero-main {
  background: var(--bg-hero);
  padding: clamp(48px, 7.8vw, 96px) 0;
  border-bottom: 1px solid var(--line-soft);
}
/* 배경 동영상 있을 때: 높이 더 크게 */
.hero-has-video {
  padding: 0;
  min-height: 420px;
  border-bottom: none;
}
.hero-has-video .hero-main-inner {
  min-height: 420px;
  padding: clamp(40px, 7vw, 96px) clamp(16px, 3vw, 40px);
}
@media (min-width: 768px) {
  .hero-has-video { min-height: 520px; }
  .hero-has-video .hero-main-inner { min-height: 520px; }
}

/* 히어로 내 카피 블록 */
.hero-copy-block {
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
}

.hero-label {
  display: inline-block;
  background: rgba(116,25,37,.1);
  color: var(--brand);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 6px 18px;
  border-radius: 100px;
  margin-bottom: 18px;
}

.hero-headline {
  font-size: clamp(32px, 6vw, 60px);
  font-weight: 900;
  line-height: 1.1;
  letter-spacing: -0.04em;
  margin: 0 0 16px;
  color: var(--text);
}
.hero-hl-brand { color: var(--brand); }

.hero-sub-text {
  font-size: clamp(16px, 2vw, 18px);
  color: var(--muted);
  margin: 0 0 22px;
  line-height: 1.6;
}

.hero-badges {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}
.hero-badge-item {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 100px;
  padding: 7px 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  box-shadow: 0 2px 8px rgba(0,0,0,.06);
}

/* 배너 이미지 히어로 */
.hero-main-inner {
  position: relative;
  min-height: 300px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(32px, 5vw, 80px) clamp(16px, 3vw, 40px);
}
@media (min-width: 768px) { .hero-main-inner { min-height: 400px; } }

.hero-banner-img {
  display: block;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-md);
}
.hero-banner-img img { width: 100%; height: auto; display: block; }
.hero-banner-img:hover { text-decoration: none; }

/* 히어로 2단 레이아웃 (텍스트 + 신뢰카드) */
.hero-text-layout { display: flex; flex-direction: column; gap: 36px; }
.hero-copy { display: flex; flex-direction: column; gap: 20px; }
.hero-trust-col { display: flex; align-items: flex-start; justify-content: center; }
.hero-trust-card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: 20px;
  box-shadow: 0 8px 36px rgba(116,25,37,.08);
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 340px;
}
.trust-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 4px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--line-soft);
}
.trust-stat-num { font-size: clamp(32px,5vw,50px); font-weight: 800; color: var(--brand); letter-spacing:-.04em; line-height:1; }
.trust-stat-plus { font-size:.6em; vertical-align:super; }
.trust-stat-label { font-size:14px; color:var(--muted); font-weight:500; margin-top:2px; }
.trust-badges { display:flex; flex-direction:column; gap:8px; }
.trust-badge-box { display:flex; align-items:center; justify-content:center; text-align:center; border:1px solid var(--line); border-radius:10px; padding:10px 16px; font-size:14px; font-weight:600; color:var(--text); background:var(--bg-alt); }

@media (min-width: 768px) {
  .hero-text-layout { flex-direction:row; align-items:flex-start; gap:48px; }
  .hero-copy { flex:1; }
  .hero-trust-col { flex-shrink:0; width:280px; }
  .hero-trust-card { max-width:100%; }
}
@media (min-width: 1024px) {
  .hero-trust-col { width:320px; }
}

/* Hero pill, guarantee strip */
.hero-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,233,168,.45);
  border: 1px solid #f0d080;
  border-radius: 100px;
  padding: 6px 18px;
  font-size: 14px;
  font-weight: 600;
  color: #7a5200;
  width: fit-content;
}
.hero-pill-dot { width:7px; height:7px; border-radius:50%; background:var(--brand); flex-shrink:0; }

.hero-guarantee-strip {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  background: #fff4e6;
  border: 1px solid #f0d998;
  border-radius: 12px;
  padding: 12px 20px;
  font-size: 14px;
  color: #7a5200;
  width: fit-content;
  max-width: 100%;
}
.hero-guarantee-strip strong { font-weight:700; }
.guarantee-check { display:inline-flex; align-items:center; width:18px; height:18px; color:#c07a00; flex-shrink:0; }
.guarantee-check svg { width:18px; height:18px; }
.guarantee-sep { color:#d4b97a; font-weight:300; font-size:13px; }

.hero-cta-group { display:flex; gap:12px; flex-wrap:wrap; align-items:center; }
.hero-cta-below { justify-content:center; align-items:center; gap:12px; margin-top:20px; flex-wrap:wrap; }
.hero-counter-inline { font-size:15px; color:var(--muted); display:inline-flex; align-items:baseline; gap:5px; }
.hero-counter-inline .counter-num { font-size:22px; font-weight:800; color:var(--brand); }
.counter-num { font-size:28px; font-weight:700; color:var(--brand); }

/* ----------------------------------------------------------
   8. CTA 3버튼 섹션 (상담/카톡/전화) — 버건디 배경
   ---------------------------------------------------------- */
.cta-3btn-section { background: var(--brand); padding: 28px 0; }
.cta-3btn-grid { display:grid; grid-template-columns:1fr; gap:12px; }
.cta-3btn {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  border-radius: 12px;
  text-decoration: none;
  transition: transform .16s, box-shadow .16s;
  font-weight: 700;
}
.cta-3btn:hover { text-decoration:none; transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.18); }
.cta-primary { background:#fff; color:var(--brand); }
.cta-primary:hover { color:var(--brand); }
.cta-kakao { background:#FAE100; color:#3a1d1d; }
.cta-kakao:hover { color:#3a1d1d; }
.cta-tel { background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.4); color:#fff; }
.cta-tel:hover { color:#fff; background:rgba(255,255,255,.22); }
.cta-inactive { opacity:.6; cursor:default; pointer-events:none; }
.cta-3btn svg { width:30px; height:30px; flex-shrink:0; }
.cta-3btn-label { font-size:clamp(18px,1.6vw,23px); font-weight:800; line-height:1.2; display:block; }
.cta-3btn-desc { font-size:clamp(13px,1.05vw,15px); font-weight:500; opacity:.8; line-height:1.2; display:block; }
.cta-3btn > div { display:flex; flex-direction:column; gap:2px; }
@media (min-width:600px) { .cta-3btn-grid { grid-template-columns:repeat(3,1fr); } }
@media (min-width:768px) { .cta-3btn { flex-direction:column; align-items:center; text-align:center; padding:22px 16px; } }

/* ----------------------------------------------------------
   9. 금융혜택 배너
   ---------------------------------------------------------- */
.finance-section { background: linear-gradient(135deg, var(--navy) 0%, var(--brand) 100%); color:#fff; }
.finance-section .section-title { color:#fff; }
.finance-section .section-title::after { background:#fff; opacity:.5; }
.finance-banner { border-radius:16px; overflow:hidden; }
.finance-items { display:grid; grid-template-columns:1fr; gap:16px; padding:32px 24px; background:rgba(255,255,255,.06); }
.finance-item { display:flex; align-items:center; gap:16px; padding:16px 18px; background:rgba(255,255,255,.1); border-radius:12px; border:1px solid rgba(255,255,255,.18); }
.finance-icon { font-size:28px; flex-shrink:0; width:44px; text-align:center; }
.finance-item-body { display:flex; flex-direction:column; gap:3px; }
.finance-item-body strong { font-size:16px; font-weight:800; color:#fff; }
.finance-item-body span { font-size:14px; color:rgba(255,255,255,.75); }
/* AS-IS 버튼: ~1.354vw ≈ 26px; 혜택버튼 radius 2.604vw; 클램프 13~20px */
.finance-cta-btn { display:inline-block; margin:20px 24px 24px; background:#fff; color:var(--brand); font-weight:700; font-size:clamp(13px,1.354vw,20px); padding:12px 28px; border-radius:clamp(8px,2.604vw,28px); text-decoration:none; transition:opacity .15s; }
.finance-cta-btn:hover { opacity:.9; text-decoration:none; }
@media (min-width:600px) { .finance-items { grid-template-columns:repeat(3,1fr); } }

/* ----------------------------------------------------------
   10. 직영시공 강점
   ---------------------------------------------------------- */
.strength-section { background:var(--bg); }
.strength-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:24px; }
.strength-item { padding:24px; border:1px solid var(--line-soft); border-radius:14px; background:#fff; transition:box-shadow .18s,transform .18s; }
.strength-item:hover { box-shadow:0 8px 28px rgba(116,25,37,.09); transform:translateY(-3px); }
.strength-icon { font-size:32px; margin-bottom:12px; line-height:1; }
.strength-item h3 { margin:0 0 8px; font-size:16px; font-weight:700; }
.strength-item p { margin:0; color:var(--muted); font-size:15px; line-height:1.65; }
@media (min-width:600px) { .strength-grid { grid-template-columns:repeat(4,1fr); } }

/* ----------------------------------------------------------
   11. 카드 그리드
   ---------------------------------------------------------- */
.card-grid { display:grid; grid-template-columns:1fr; gap:16px; }
@media (min-width:540px) { .card-grid { grid-template-columns:repeat(2,1fr); } }
@media (min-width:768px) { .card-grid { grid-template-columns:repeat(3,1fr); } }

.card {
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow .18s, transform .18s;
}
.card:hover { box-shadow: 0 10px 36px rgba(116,25,37,.10); transform: translateY(-3px); }
.card-body { padding: 18px 18px 20px; }
.card-body h3 { font-size:16px; font-weight:700; margin:0 0 8px; letter-spacing:-.02em; }
.card-img { height:180px; object-fit:cover; width:100%; display:block; }

/* 포트폴리오 before/after 카드 */
.portfolio-card { display:block; text-decoration:none; color:var(--text); }
.portfolio-card:hover { text-decoration:none; }
.ba-wrap { display:grid; grid-template-columns:1fr 1fr; gap:0; overflow:hidden; }
.ba-img { position:relative; overflow:hidden; }
.ba-img img { width:100%; height:160px; object-fit:cover; display:block; transition:transform .28s ease; }
.portfolio-card:hover .ba-img img { transform:scale(1.05); }
.ba-label { position:absolute; top:8px; left:8px; background:rgba(0,0,0,.58); color:#fff; font-size:12px; padding:3px 9px; border-radius:20px; font-weight:700; letter-spacing:.03em; z-index:1; }
.after-label { background:var(--brand); }
.tag-row { display:flex; gap:6px; flex-wrap:wrap; margin-top:10px; }
.tag { display:inline-block; font-size:12px; padding:3px 9px; background:var(--bg-alt); border:1px solid var(--line); border-radius:20px; color:var(--muted); font-weight:500; }

/* 제품 카드 */
.product-card { display:block; text-decoration:none; color:var(--text); }
.product-card:hover { text-decoration:none; }
.product-card .card-img { height:200px; transition:transform .28s ease; }
.product-card:hover .card-img { transform:scale(1.04); }
.product-summary { color:var(--muted); font-size:14px; margin:6px 0 0; line-height:1.5; }
.card-img-placeholder { width:100%; height:160px; background:var(--bg-alt); display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; border-bottom:1px solid var(--line); }
.product-placeholder { height:200px; }

/* ----------------------------------------------------------
   12. 공지사항 리스트
   ---------------------------------------------------------- */
.notice-list { list-style:none; margin:0; padding:0; }
.notice-list li { display:flex; align-items:center; gap:8px; padding:12px 0; border-bottom:1px solid var(--line-soft); }
.notice-list li a { flex:1; color:var(--text); font-size:15px; }
.notice-list .date { color:var(--muted); font-size:13px; white-space:nowrap; }
.badge { background:var(--brand); color:#fff; font-size:13px; padding:2px 7px; border-radius:4px; }

/* ----------------------------------------------------------
   13. CTA 밴드 (하단)
   ---------------------------------------------------------- */
.cta-band {
  background: linear-gradient(120deg, var(--brand) 0%, var(--brand-dark) 100%);
  color: #fff;
  padding: 56px 0;
  text-align: center;
}
.cta-band h2 {
  font-size: clamp(22px,3vw,36px);
  font-weight: 800;
  margin: 0 0 20px;
  letter-spacing: -0.03em;
  color: #fff;
}

/* ----------------------------------------------------------
   14. 상태 게시판 (상담현황) — 티커 스타일
   ---------------------------------------------------------- */
/* 헤더 레이블 영역 */
.status-section { padding-top: 36px; padding-bottom: 36px; }
.status-section-label { display:flex; align-items:center; gap:10px; }
/* 라이브 펄스 닷 */
.status-live-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: #2ecc71;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(46,204,113,.2);
  animation: livePulse 1.6s ease-in-out infinite;
}
@keyframes livePulse {
  0%,100% { box-shadow: 0 0 0 3px rgba(46,204,113,.2); }
  50%      { box-shadow: 0 0 0 7px rgba(46,204,113,.05); }
}

/* 티커 컬럼 공용 */
.stk-col { display:inline-block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.stk-status { width:56px; flex-shrink:0; }
.stk-region { width:120px; flex-shrink:0; font-size:14px; color:var(--text-2); }
.stk-type   { width:90px;  flex-shrink:0; font-size:14px; color:var(--text-2); }
.stk-name   { width:52px;  flex-shrink:0; font-weight:700; font-size:14px; color:var(--text); }
.stk-date   { flex:1; text-align:right; font-size:13px; color:var(--muted); }

/* 헤더 바 */
.status-ticker-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius) var(--radius) 0 0;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--muted);
  text-transform: uppercase;
}

/* 티커 래퍼 — 고정 높이·overflow:hidden */
.status-ticker-wrap {
  height: 260px;
  overflow: hidden;
  border: 1px solid var(--line-soft);
  border-top: none;
  border-radius: 0 0 var(--radius) var(--radius);
  background: #fff;
  position: relative;
}
/* 상/하 페이드 마스크 */
.status-ticker-wrap::before,
.status-ticker-wrap::after {
  content: '';
  position: absolute;
  left: 0; right: 0;
  height: 36px;
  z-index: 2;
  pointer-events: none;
}
.status-ticker-wrap::before { top: 0;    background: linear-gradient(to bottom, #fff 0%, transparent 100%); }
.status-ticker-wrap::after  { bottom: 0; background: linear-gradient(to top,    #fff 0%, transparent 100%); }

/* 트랙 — JS로 translateY 애니 */
.status-ticker-track {
  display: flex;
  flex-direction: column;
}
/* 각 행 */
.status-ticker-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--line-soft);
  font-size: 14px;
  transition: background .12s;
}
.status-ticker-row:last-child { border-bottom: none; }
.status-ticker-row:hover { background: var(--bg-alt); }

.status-badge { display:inline-flex; align-items:center; font-size:12px; padding:2px 8px; border-radius:20px; font-weight:700; gap:4px; white-space:nowrap; }
.status-badge.req  { background:#fff8e6; color:#7a5b00; border:1px solid #f5d78a; }
.status-badge.done { background:#e7f5ec; color:#1a7f37; border:1px solid #9fdbb7; }

/* 샘플 안내 */
.status-sample-note { font-size:13px; color:var(--muted); margin:6px 0 0; }

/* 기존 table 스타일도 유지 (status 별도 페이지용) */
.status-table-wrap { overflow-x:auto; -webkit-overflow-scrolling:touch; border-radius:var(--radius); border:1px solid var(--line); }
.status-table { width:100%; border-collapse:collapse; font-size:14px; min-width:360px; }
.status-table th { background:var(--bg-alt); font-weight:700; padding:10px 12px; border-bottom:2px solid var(--line); text-align:left; white-space:nowrap; font-size:13px; letter-spacing:.02em; color:var(--muted); }
.status-table td { padding:10px 12px; border-bottom:1px solid var(--line-soft); vertical-align:middle; }
.status-table tr:last-child td { border-bottom:none; }
.status-table tbody tr:hover { background:var(--bg-alt); }
.masked-name { font-weight:700; }
.col-date { color:var(--muted); white-space:nowrap; font-size:13px; }

/* reduced-motion: 티커 정지 */
@media (prefers-reduced-motion: reduce) {
  .status-live-dot { animation: none; }
}

/* ----------------------------------------------------------
   15. 타임라인 (프로세스)
   ---------------------------------------------------------- */
.timeline { display:flex; flex-direction:column; gap:0; max-width:720px; margin:0 auto; }
.timeline-item { display:flex; gap:18px; padding-bottom:28px; position:relative; }
.timeline-item:not(:last-child)::before { content:''; position:absolute; left:20px; top:44px; bottom:0; width:2px; background:linear-gradient(to bottom, var(--brand), var(--line)); }
.timeline-num { flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; z-index:1; box-shadow:0 3px 10px rgba(116,25,37,.2); }
.timeline-body { padding-top:8px; }
.timeline-body h3 { margin:0 0 6px; font-size:16px; font-weight:700; letter-spacing:-.02em; color:var(--text); }
.timeline-body p { color:var(--muted); font-size:15px; margin:0; line-height:1.65; }
.timeline-icon { font-size:22px; margin-bottom:5px; line-height:1; }

@media (min-width:600px) {
  .timeline { flex-direction:row; flex-wrap:nowrap; max-width:100%; justify-content:center; align-items:flex-start; gap:0; }
  .timeline-item { flex-direction:column; align-items:center; text-align:center; flex:1; min-width:0; padding-bottom:0; padding:0 8px; position:relative; }
  .timeline-item::before { display:none; }
  .timeline-item:not(:last-child)::after { content:''; position:absolute; top:20px; left:calc(50% + 21px); width:calc(100% - 42px - 8px); height:2px; background:linear-gradient(to right, var(--brand), var(--line)); }
  .timeline-num { margin:0 auto 12px; }
  .timeline-body { padding-top:0; }
}

/* ----------------------------------------------------------
   16. 전시장 섹션
   ---------------------------------------------------------- */
.showroom-section { background:var(--bg-alt); }
.showroom-wrap { display:grid; grid-template-columns:1fr; gap:28px; margin-top:24px; }
.showroom-name { font-size:20px; font-weight:800; color:var(--text); margin-bottom:14px; }
.showroom-list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.showroom-list li { display:flex; align-items:flex-start; gap:10px; font-size:15px; color:var(--text); }
.showroom-list li svg { width:18px; height:18px; color:var(--brand); flex-shrink:0; margin-top:2px; }
.showroom-list li a { color:var(--brand); }
.showroom-map { border-radius:12px; overflow:hidden; box-shadow:0 4px 18px rgba(0,0,0,.10); }
.showroom-map-placeholder { height:280px; background:var(--bg-alt); border:2px dashed var(--line); border-radius:12px; display:flex; align-items:center; justify-content:center; color:var(--muted); font-size:14px; text-align:center; line-height:1.6; }
@media (min-width:768px) { .showroom-wrap { grid-template-columns:1fr 1.4fr; } }

/* ----------------------------------------------------------
   17. 영상 / 블로그 CTA
   ---------------------------------------------------------- */
.video-section { background:var(--bg); }
.video-grid { display:grid; grid-template-columns:1fr; gap:24px; margin-top:20px; }
@media (min-width:768px) { .video-grid { grid-template-columns:1fr 1fr; } }
.video-wrap { position:relative; width:100%; padding-bottom:56.25%; border-radius:var(--radius); overflow:hidden; max-width:800px; margin:0 auto; box-shadow:0 8px 36px rgba(0,0,0,.14); }
.video-wrap iframe { position:absolute; top:0; left:0; width:100%; height:100%; border:0; }

.blog-cta-section { background:var(--bg-alt); border-top:1px solid var(--line-soft); }
.blog-cta-wrap { display:flex; align-items:center; justify-content:space-between; gap:20px; flex-wrap:wrap; padding:16px 0; }
.blog-cta-text h3 { margin:0 0 6px; font-size:18px; font-weight:700; }
.blog-cta-text p { margin:0; color:var(--muted); font-size:14px; }
.blog-cta-btn { white-space:nowrap; flex-shrink:0; }

/* ----------------------------------------------------------
   18. 하단 CTA (상세 페이지)
   ---------------------------------------------------------- */
.detail-cta-band { background:var(--bg-alt); border:1px solid var(--line-soft); border-radius:16px; padding:32px 24px; margin:36px 0; text-align:center; }
.detail-cta-band h3 { margin:0 0 8px; font-size:20px; font-weight:800; }
.detail-cta-band p { margin:0 0 20px; color:var(--muted); font-size:15px; }
.detail-cta-btns { display:flex; gap:12px; justify-content:center; flex-wrap:wrap; }

/* ----------------------------------------------------------
   19. 이전/다음 포스트 네비
   ---------------------------------------------------------- */
.post-nav { display:grid; grid-template-columns:1fr auto 1fr; gap:8px; align-items:center; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); }
.post-nav-item { display:flex; flex-direction:column; gap:3px; text-decoration:none; color:var(--text); padding:12px; border:1px solid var(--line); border-radius:8px; background:var(--bg); transition:background .14s,border-color .14s; max-width:100%; overflow:hidden; }
.post-nav-item:hover { background:var(--bg-alt); border-color:var(--brand); text-decoration:none; }
.post-nav-empty { border:1px dashed var(--line); min-height:48px; border-radius:8px; pointer-events:none; }
.post-nav-prev { text-align:left; }
.post-nav-next { text-align:right; }
.post-nav-label { font-size:13px; color:var(--muted); font-weight:600; letter-spacing:.04em; }
.post-nav-title { font-size:14px; font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--text); }
.post-nav-list { background:var(--bg-alt); border:1px solid var(--line); border-radius:8px; padding:10px 14px; color:var(--muted); text-align:center; font-size:14px; font-weight:600; text-decoration:none; white-space:nowrap; }
.post-nav-list:hover { background:var(--brand); color:#fff; border-color:var(--brand); text-decoration:none; }
@media (max-width:480px) {
  .post-nav { grid-template-columns:1fr 1fr; grid-template-rows:auto auto; }
  .post-nav-list { grid-column:1/-1; order:3; }
  .post-nav-next { text-align:left; }
}

/* ----------------------------------------------------------
   20. 페이징 (브랜드색 강조)
   ---------------------------------------------------------- */
.paging { display:flex; align-items:center; justify-content:center; gap:4px; flex-wrap:wrap; margin-top:28px; padding:8px 0; }
.paging-num, .paging-btn { display:inline-flex; align-items:center; justify-content:center; min-width:36px; height:36px; padding:0 10px; border:1px solid var(--line); border-radius:8px; font-size:14px; color:var(--text); text-decoration:none; background:var(--bg); transition:background .14s,border-color .14s,color .14s; }
.paging-num:hover, .paging-btn:hover { background:var(--bg-alt); text-decoration:none; border-color:var(--brand); color:var(--brand); }
.paging-current { background:var(--brand); color:#fff; border-color:var(--brand); font-weight:700; pointer-events:none; }
.paging-disabled { color:var(--muted); cursor:default; opacity:.5; pointer-events:none; }
.paging-ellipsis { padding:0 4px; color:var(--muted); font-size:14px; line-height:36px; }

/* ----------------------------------------------------------
   21. FAQ
   ---------------------------------------------------------- */
.faq-cat-title { font-size:17px; margin:28px 0 12px; padding:0 0 8px; border-bottom:2px solid var(--brand); color:var(--brand); font-weight:700; letter-spacing:-.02em; }
.faq-list { display:flex; flex-direction:column; gap:4px; }
.faq-item { border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; transition:box-shadow .18s; }
.faq-item:hover { box-shadow:0 2px 10px rgba(0,0,0,.06); }
.faq-item:has([aria-expanded="true"]) { border-color:var(--brand); box-shadow:0 3px 14px rgba(116,25,37,.08); }
.faq-q { width:100%; display:flex; align-items:flex-start; gap:12px; padding:15px 18px; background:var(--bg); border:none; cursor:pointer; text-align:left; font-size:15px; font-family:inherit; transition:background .14s; }
.faq-q:hover { background:var(--bg-alt); }
.faq-qmark { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:var(--brand); color:#fff; display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px; }
.faq-qtext { flex:1; font-weight:600; line-height:1.55; color:var(--text); }
.faq-arrow { margin-left:10px; flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--bg-alt); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:14px; color:var(--muted); transition:transform .22s,background .15s; line-height:1; font-weight:700; }
.faq-q[aria-expanded="true"] .faq-arrow { transform:rotate(135deg); background:var(--brand); color:#fff; border-color:var(--brand); }
.faq-a { display:flex; gap:12px; padding:14px 18px 16px; background:var(--bg-alt); border-top:1px solid var(--line); animation:faqOpen .2s ease; }
@keyframes faqOpen { from{opacity:0;transform:translateY(-4px)} to{opacity:1;transform:none} }
.faq-amark { flex-shrink:0; width:26px; height:26px; border-radius:50%; background:rgba(0,0,0,.07); color:var(--muted); display:flex; align-items:center; justify-content:center; font-size:12px; font-weight:800; margin-top:1px; }
.faq-atext { flex:1; font-size:15px; color:var(--text); line-height:1.75; white-space:pre-wrap; }

/* ----------------------------------------------------------
   22. 플로팅 버튼
   ---------------------------------------------------------- */
.floating-btns { position:fixed; right:18px; bottom:88px; display:flex; flex-direction:column; gap:12px; z-index:100; }
.float-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: #fff;
  box-shadow: 0 4px 18px rgba(116,25,37,.30);
  transition: transform .18s, box-shadow .18s;
  text-decoration: none;
  font-size: 10px;
  gap: 3px;
  min-width: 44px;
  min-height: 44px;
  border: 2px solid rgba(255,255,255,.15);
}
.float-btn:hover { transform:scale(1.1) translateY(-2px); box-shadow:0 8px 28px rgba(116,25,37,.35); text-decoration:none; }
.float-btn svg { width:22px; height:22px; flex-shrink:0; }
.float-btn span { font-size:11px; line-height:1; font-weight:600; }
.float-quote { background:var(--brand); width:60px; height:60px; }
.float-tel { background:#16a34a; box-shadow:0 4px 18px rgba(22,163,74,.25); }
.float-kakao { background:#FAE100; color:#3A1D1D; border-color:rgba(0,0,0,.06); box-shadow:0 4px 18px rgba(0,0,0,.12); }
.float-naver { background:#03C75A; color:#fff; }
.float-blog { background:#ff6f1f; color:#fff; }

@media (max-width:600px) {
  .floating-btns { right:0; left:0; bottom:0; flex-direction:row; justify-content:stretch; gap:0; border-radius:0; background:#fff; box-shadow:0 -2px 16px rgba(0,0,0,.14); padding:0; padding-bottom:env(safe-area-inset-bottom); }
  .float-btn { width:auto; flex:1; height:56px; border-radius:0; box-shadow:none; border:none; border-right:1px solid rgba(0,0,0,.06); font-size:10px; }
  .float-btn:last-child { border-right:none; }
  .float-quote { width:auto; height:56px; border-radius:0; box-shadow:none; }
  .float-btn:hover { transform:none; box-shadow:none; opacity:.85; }
  .site-footer { padding-bottom:72px; }
}

/* ----------------------------------------------------------
   23. 팝업
   ---------------------------------------------------------- */
.popup-layer { position:fixed; inset:0; z-index:200; pointer-events:none; }
.popup-win { position:fixed; display:none; flex-direction:column; pointer-events:auto; background:#fff; border:1px solid var(--line); border-radius:14px; width:340px; max-width:calc(100vw - 16px); max-height:88vh; overflow:hidden; box-shadow:0 18px 60px rgba(0,0,0,.28); animation:popupIn .2s ease; }
@keyframes popupIn { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:none} }
.popup-win.popup-right-bottom { bottom:24px; right:24px; }
.popup-head { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:9px 12px; background:var(--brand); color:#fff; cursor:move; user-select:none; flex:none; touch-action:none; }
.popup-title { font-size:14px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.popup-close { background:rgba(255,255,255,.22); color:#fff; border:none; border-radius:50%; width:26px; height:26px; cursor:pointer; font-size:16px; line-height:1; display:flex; align-items:center; justify-content:center; flex:none; transition:background .15s; }
.popup-close:hover { background:rgba(255,255,255,.4); }
.popup-bodywrap { flex:1 1 auto; overflow-y:auto; }
.popup-img { width:100%; height:auto; display:block; max-height:60vh; object-fit:contain; background:#f4f5f7; }
.popup-text { padding:20px; font-size:15px; line-height:1.6; }
.popup-footer { padding:8px 14px; border-top:1px solid var(--line); background:#f8f9fb; display:flex; align-items:center; justify-content:space-between; flex:none; }
.popup-ignore { font-size:14px; color:var(--muted); cursor:pointer; display:flex; align-items:center; gap:7px; }
.popup-ignore input { width:15px; height:15px; cursor:pointer; accent-color:var(--brand); }
@media (max-width:480px) { .popup-win { width:calc(100vw - 16px); } .popup-win.popup-right-bottom { right:8px; bottom:8px; } }
.popup-rich-body { padding:16px 18px; line-height:1.7; font-size:15px; color:var(--text); }
.popup-rich-body img { max-width:100%; height:auto; display:block; margin:8px auto; border-radius:6px; }
.popup-link-row { padding:8px 22px 12px; text-align:right; }
.popup-link-btn { display:inline-block; padding:7px 18px; background:var(--brand); color:#fff; border-radius:8px; font-size:14px; text-decoration:none; transition:opacity .15s; }
.popup-link-btn:hover { opacity:.85; }

/* ----------------------------------------------------------
   24. 푸터 — 짙은 네이비 배경
   ---------------------------------------------------------- */
.site-footer {
  background: var(--navy);
  color: #c9d1d9;
  padding: 44px 0 28px;
  margin-top: 40px;
  /* AS-IS 푸터: 1.198vw ≈ body 기본 동일. 클램프 13~18px */
  font-size: clamp(13px, 1.198vw, 18px);
  line-height: 1.75;
}
.footer-cols { display:grid; grid-template-columns:1fr; gap:20px; margin-bottom:20px; }
.site-footer strong { color:#fff; }
.site-footer a { color:#9ecbff; }
.site-footer a:hover { color:#fff; text-decoration:none; }
.site-footer p { margin:4px 0; }
/* AS-IS 푸터 전화번호: 1.823vw ≈ 35px; 클램프 16~24px; font-weight:700 */
.footer-tel { font-size: clamp(16px, 1.823vw, 24px); font-weight: 700; color: #fff; letter-spacing: -0.02em; }
.copyright { color:#6b7280; border-top:1px solid #1e2a38; padding-top:16px; margin-top:16px; font-size:14px; }
.footer-sns { display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 4px; }
.sns-link { display:inline-flex; align-items:center; gap:7px; color:#9ecbff; font-size:14px; text-decoration:none; padding:6px 14px; border:1px solid #1e2a38; border-radius:24px; transition:background .16s,color .16s,border-color .16s; }
.sns-link:hover { background:#1f262d; color:#fff; text-decoration:none; border-color:#3a4455; }
.sns-link svg { width:15px; height:15px; flex-shrink:0; }

@media (min-width:600px) { .footer-cols { grid-template-columns:repeat(2,1fr); } }
@media (min-width:1024px) { .footer-cols { grid-template-columns:1.6fr 1fr; } }

/* ----------------------------------------------------------
   25. 배너 하단
   ---------------------------------------------------------- */
.banner-row { display:grid; grid-template-columns:1fr; gap:12px; }
.banner-item { display:block; border:1px solid var(--line-soft); border-radius:var(--radius); overflow:hidden; text-align:center; padding:14px; color:var(--text); text-decoration:none; transition:box-shadow .15s; }
.banner-item:hover { box-shadow:var(--shadow-md); text-decoration:none; }
@media (min-width:600px) { .banner-row { grid-template-columns:repeat(2,1fr); } }

/* ----------------------------------------------------------
   26. 폼 / 상담신청
   ---------------------------------------------------------- */
.form { max-width:640px; }
.form-row { margin-bottom:14px; display:flex; flex-direction:column; gap:6px; }
.form-row label { font-weight:600; font-size:15px; }
.form input, .form select, .form textarea {
  width:100%; padding:11px 14px; border:1px solid var(--line); border-radius:var(--radius-sm);
  font-size:15px; font-family:inherit; color:var(--text); background:#fff; transition:border-color .15s;
}
.form input:focus, .form select:focus, .form textarea:focus {
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(116,25,37,.12);
}
.form select { appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l7 8 7-8' stroke='%236b7280' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; background-size:12px; padding-right:36px; cursor:pointer; }
.form input[type=checkbox] { width:auto; margin-right:6px; }
.form input[type=color] { width:60px; height:40px; padding:2px; }
.form-actions { margin-top:18px; display:flex; gap:8px; flex-wrap:wrap; }
.req { color:var(--danger); }
.form-hint { font-size:14px; color:var(--muted); margin-top:2px; }
.form-hint a { color:var(--brand); }
.inline-form { display:inline-flex; gap:4px; align-items:center; margin:0; }
.inline-form select, .inline-form input { padding:5px 8px; font-size:13px; }

/* 동의 박스 */
.agree-box { padding:8px 0; }
.agree-label { display:flex; align-items:flex-start; gap:10px; font-size:15px; cursor:pointer; line-height:1.55; padding:10px 12px; border-radius:8px; border:1px solid var(--line); transition:background .13s,border-color .13s; }
.agree-label:hover { background:var(--bg-alt); }
.agree-label.required-agree { border-color:rgba(116,25,37,.3); }
.agree-label input[type=checkbox] { margin-top:2px; flex-shrink:0; width:16px; height:16px; accent-color:var(--brand); cursor:pointer; }
.agree-required-badge { font-size:12px; font-weight:700; color:var(--danger); padding:1px 6px; border-radius:4px; background:rgba(192,57,43,.08); }

/* 상담신청 폼 */
.counseling-form { max-width:540px; }
.page-desc { color:var(--muted); font-size:15px; margin-bottom:24px; line-height:1.6; }
.region-row { display:flex; gap:8px; }
.region-row select { flex:1; }
.radio-group { display:flex; gap:10px; flex-wrap:wrap; }
.radio-label { cursor:pointer; user-select:none; }
.radio-label input[type=radio] { position:absolute; opacity:0; width:0; height:0; }
.radio-box { display:inline-flex; align-items:center; justify-content:center; padding:10px 20px; border:2px solid var(--line); border-radius:10px; font-size:15px; font-weight:600; color:var(--text); background:var(--bg); cursor:pointer; transition:border-color .15s,background .15s,color .15s; min-width:80px; }
.radio-box.selected, .radio-label input[type=radio]:checked + .radio-box { border-color:var(--brand); background:rgba(116,25,37,.07); color:var(--brand); }
.radio-box:hover { border-color:var(--brand); background:var(--bg-alt); }
.counseling-notice { font-size:14px; color:var(--muted); margin:10px 0 0; line-height:1.6; padding:10px 14px; background:var(--bg-alt); border-radius:8px; border-left:3px solid var(--line); }
.counseling-submit { width:100%; justify-content:center; font-size:18px; padding:16px; }

/* ----------------------------------------------------------
   27. 알럿 / 상태
   ---------------------------------------------------------- */
.alert { padding:14px 16px; border-radius:var(--radius-sm); margin-bottom:18px; }
.alert-success { background:#e7f5ec; color:#1a7f37; border:1px solid #b7e1c4; }
.alert-error { background:#fde8e8; color:#b42318; border:1px solid #f5c2c0; }
.status { font-size:13px; padding:2px 8px; border-radius:10px; white-space:nowrap; }
.status.req { background:#fff3cd; color:#7a5b00; }
.status.done { background:#e7f5ec; color:#1a7f37; }

/* ----------------------------------------------------------
   28. 포트폴리오 상세 / 제품 상세
   ---------------------------------------------------------- */
.back-link { display:inline-flex; align-items:center; gap:4px; color:var(--muted); font-size:15px; margin-bottom:14px; transition:color .15s; }
.back-link:hover { color:var(--text); text-decoration:none; }
.portfolio-summary { font-size:16px; color:var(--muted); margin:10px 0 18px; line-height:1.7; }
.ba-detail { display:grid; grid-template-columns:1fr; gap:14px; margin-bottom:24px; }
.ba-box { position:relative; border-radius:var(--radius); overflow:hidden; box-shadow:0 2px 12px rgba(0,0,0,.08); }
.ba-box img { width:100%; display:block; border-radius:var(--radius); }
.ba-box .ba-label { top:10px; left:10px; font-size:12px; padding:4px 12px; }
@media (min-width:600px) { .ba-detail { grid-template-columns:1fr 1fr; } }

.product-detail-header { margin-bottom:24px; }
.product-detail-summary { font-size:18px; color:var(--muted); margin:6px 0 0; line-height:1.6; }
.product-detail-img { margin:24px 0; border-radius:12px; overflow:hidden; box-shadow:0 4px 20px rgba(0,0,0,.10); }
.product-detail-img img { width:100%; height:auto; display:block; }
.product-body { margin:24px 0; }
.product-list-cta { margin-top:36px; padding:28px; background:var(--bg-alt); border-radius:12px; text-align:center; border:1px solid var(--line-soft); }
.product-list-cta p { color:var(--muted); margin:0 0 16px; }
.example-thumb { overflow:hidden; }
.example-date { font-size:13px; color:var(--muted); display:block; margin-top:8px; }

/* ----------------------------------------------------------
   29. 리뷰 카드
   ---------------------------------------------------------- */
.review-card { position:relative; }
.review-card::before { content:'\201C'; position:absolute; top:14px; right:18px; font-size:48px; color:var(--line); font-family:Georgia,serif; line-height:1; pointer-events:none; }
.review-card .stars { font-size:17px; color:#f59e0b; margin-bottom:8px; letter-spacing:.05em; }
.review-card .stars .empty { color:#e5e7eb; }
.review-title { font-size:15px; margin:0 0 7px; font-weight:700; line-height:1.45; }
.review-content { color:var(--muted); font-size:15px; margin:0 0 12px; line-height:1.65; }
.review-meta { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.review-author { font-weight:700; color:var(--text); }
.review-sep { width:4px; height:4px; border-radius:50%; background:var(--line); display:inline-block; }
.ba-wrap-sm { display:grid; grid-template-columns:1fr 1fr; height:108px; overflow:hidden; }
.ba-img-sm { overflow:hidden; }
.ba-img-sm img { width:100%; height:108px; object-fit:cover; display:block; transition:transform .28s ease; }
.review-card:hover .ba-img-sm img { transform:scale(1.04); }
.review-card .rich-body { overflow:hidden; display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; font-size:15px; color:var(--muted); line-height:1.65; margin:0 0 12px; }
.review-card .rich-body img { display:none; }

/* ----------------------------------------------------------
   30. 이벤트 카드
   ---------------------------------------------------------- */
.event-card { display:block; color:var(--text); text-decoration:none; }
.event-card:hover { text-decoration:none; }
.event-card .card-img { transition:transform .28s ease; height:170px; }
.event-card:hover .card-img { transform:scale(1.04); }
.event-badge { display:inline-flex; align-items:center; background:var(--brand); color:#fff; font-size:13px; padding:3px 10px; border-radius:20px; margin-bottom:10px; font-weight:700; letter-spacing:.04em; }
.event-badge-ended { background:var(--muted); color:#fff; font-size:13px; padding:3px 10px; border-radius:20px; display:inline-flex; align-items:center; margin-bottom:10px; font-weight:600; }
.event-period { font-size:13px; margin-top:8px; color:var(--muted); display:flex; align-items:center; gap:4px; }

/* ----------------------------------------------------------
   31. 콘텐츠 카드 (rich body)
   ---------------------------------------------------------- */
.content-list { display:grid; grid-template-columns:1fr; gap:16px; padding:8px 0 32px; }
@media (min-width:600px) { .content-list { grid-template-columns:1fr 1fr; } }
.content-card { display:block; border:1px solid var(--line-soft); border-radius:12px; padding:20px 22px; color:var(--text); background:#fff; transition:box-shadow .15s,transform .15s; }
.content-card:hover { box-shadow:0 6px 20px rgba(116,25,37,.09); transform:translateY(-2px); text-decoration:none; }
.content-card-title { margin:0 0 8px; font-size:18px; font-weight:700; }
.content-card-snippet { margin:0 0 12px; color:var(--muted); font-size:15px; line-height:1.6; }
.content-card-more { font-size:15px; color:var(--brand); font-weight:600; }

.rich-body img { max-width:100%; height:auto; border-radius:4px; display:block; margin:8px 0; }
.rich-body p { margin:0 0 .6em; }
.rich-body ul, .rich-body ol { padding-left:1.5em; margin:0 0 .6em; }
.rich-body h1, .rich-body h2, .rich-body h3 { margin:.8em 0 .4em; line-height:1.3; }
.rich-body a { color:var(--brand); text-decoration:underline; }
.hero-rich { padding:32px 16px; text-align:left; max-width:860px; margin:0 auto; color:var(--text); }
.hero-rich img { max-width:100%; height:auto; border-radius:8px; }
.hero-rich h1, .hero-rich h2, .hero-rich h3 { margin:0 0 12px; line-height:1.3; }
.hero-rich p { margin:0 0 10px; line-height:1.7; }
@media (min-width:768px) { .hero-rich { padding:48px 24px; } }

/* Quill 에디터 정렬 */
.ql-align-center { text-align:center; }
.ql-align-right { text-align:right; }
.ql-align-justify { text-align:justify; }

/* ----------------------------------------------------------
   32. 게시판 / 포스트 공통
   ---------------------------------------------------------- */
.data-table { width:100%; border-collapse:collapse; font-size:14px; background:var(--bg); }
.data-table th, .data-table td { padding:10px 12px; border-bottom:1px solid var(--line); text-align:left; vertical-align:top; }
.data-table th { background:var(--bg-alt); font-weight:600; }
.data-table .col-num { text-align:right; white-space:nowrap; }
.data-table .col-date, .data-table .col-name { white-space:nowrap; color:var(--muted); }
.cell-wrap { max-width:280px; white-space:normal; word-break:break-word; }
.post { border-bottom:1px solid var(--line); padding-bottom:20px; margin-bottom:20px; }
.post-meta { color:var(--muted); font-size:14px; margin:6px 0 16px; }
.post-body { font-size:15px; line-height:1.7; }
.post-actions { display:flex; gap:10px; align-items:center; flex-wrap:wrap; }

/* ----------------------------------------------------------
   33. 관리자 (admin) — 기존 스타일 유지
   ---------------------------------------------------------- */
.admin-login-body { display:flex; align-items:center; justify-content:center; min-height:100vh; background:var(--bg-alt); }
.login-box { background:#fff; border:1px solid var(--line); border-radius:12px; padding:34px; width:100%; max-width:360px; box-shadow:0 8px 30px rgba(0,0,0,.06); }
.login-box h1 { font-size:20px; text-align:center; margin:0 0 22px; }
.admin-body { display:block; }
.admin-side { background:#11161b; color:#c9d1d9; padding:18px; }
.admin-brand a { color:#fff; font-weight:700; font-size:16px; }
.admin-menu { display:flex; flex-wrap:wrap; gap:2px; margin:16px 0; }
.admin-menu a { color:#c9d1d9; padding:7px 12px; border-radius:6px; font-size:14px; display:block; }
.admin-menu a:hover { background:#1f262d; text-decoration:none; }
.admin-menu-sep { color:#6b7280; font-size:11px; text-transform:uppercase; letter-spacing:.08em; padding:10px 12px 2px; margin-top:6px; }
.admin-logout { margin-top:4px; }
.admin-main { padding:24px 16px; max-width:1200px; margin:0 auto; }
.admin-title { font-size:22px; margin:0 0 18px; }
.admin-subtitle { font-size:16px; margin:26px 0 12px; padding-bottom:6px; border-bottom:1px solid var(--line); }
.admin-list-header { display:flex; align-items:center; justify-content:space-between; margin-bottom:16px; flex-wrap:wrap; gap:10px; }
.stat-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:10px; }
.stat-card { background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:18px; text-align:center; }
.stat-num { display:block; font-size:28px; font-weight:700; color:var(--brand); }
.stat-label { color:var(--muted); font-size:13px; }
.detail-box, .answer-box { background:var(--bg-alt); border:1px solid var(--line); border-radius:var(--radius-sm); padding:16px; margin-bottom:14px; }
.col-actions { white-space:nowrap; display:flex; gap:4px; align-items:center; flex-wrap:wrap; }
.admin-shortcuts { display:flex; flex-wrap:wrap; gap:8px; margin-top:24px; }
.shortcut-btn { padding:8px 14px; background:var(--bg-alt); border:1px solid var(--line); border-radius:6px; color:var(--text); font-size:13px; text-decoration:none; }
.shortcut-btn:hover { background:var(--brand); color:#fff; border-color:var(--brand); text-decoration:none; }

@media (min-width:600px) { .stat-grid { grid-template-columns:repeat(4,1fr); } }
@media (min-width:768px) {
  .admin-body { display:grid; grid-template-columns:220px 1fr; min-height:100vh; }
  .admin-side { min-height:100vh; }
  .admin-menu { flex-direction:column; flex-wrap:nowrap; }
  .stat-grid { grid-template-columns:repeat(4,1fr); }
}
@media (min-width:1024px) { .stat-grid { grid-template-columns:repeat(8,1fr); } }

/* ----------------------------------------------------------
   34. 제네릭 페이지
   ---------------------------------------------------------- */
.page { padding:30px 16px; min-height:50vh; }
.page-title { font-size:24px; margin:0 0 20px; font-weight:800; }
.benefit-section { background:var(--bg); }
.benefit-grid { display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.benefit-item { text-align:center; padding:20px 10px; }
.benefit-icon { width:60px; height:60px; margin:0 auto 12px; }
.benefit-icon svg { width:100%; height:100%; }
.benefit-item h3 { margin:0 0 8px; font-size:17px; font-weight:700; }
.benefit-item p { color:var(--muted); font-size:14px; margin:0; }
@media (min-width:600px) { .benefit-grid { grid-template-columns:repeat(4,1fr); } }

/* 문의 / 견적확인 */
.check-results { margin-top:28px; }
.inquiry-item { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:20px; overflow:hidden; }
.inquiry-header { display:flex; align-items:center; gap:10px; padding:12px 16px; background:var(--bg-alt); border-bottom:1px solid var(--line); flex-wrap:wrap; }
.inquiry-title { font-weight:600; flex:1; min-width:0; word-break:break-word; }
.inquiry-date { font-size:13px; color:var(--muted); white-space:nowrap; }
.inquiry-body { padding:14px 16px; border-bottom:1px solid var(--line); }
.inquiry-content { white-space:pre-wrap; word-break:break-word; margin:0; font-size:15px; line-height:1.7; }
.inquiry-answer { padding:14px 16px; background:#f6f9ff; border-top:1px solid var(--line); }
.inquiry-no-answer { background:var(--bg-alt); }
.answer-label { font-size:14px; font-weight:700; color:var(--brand); margin-bottom:8px; }
.answer-content { white-space:pre-wrap; word-break:break-word; margin:0; font-size:15px; line-height:1.7; }

/* 포커스 접근성 */
:focus-visible { outline:2px solid var(--brand); outline-offset:3px; }

/* ----------------------------------------------------------
   35. 모바일 하단 여백 보정
   ---------------------------------------------------------- */
@media (max-width:600px) {
  .hero, .hero-main { padding:36px 0 40px; }
  .section { padding:44px 0; }
  .cta-band { padding:48px 0; }
  .guarantee-sep { display:none; }
  .hero-trust-card { max-width:100%; }
  .hero-trust-col { width:100%; }
}