/* 순인테리어 도배 · font_id=0(30apt 명조+Pretendard) · hero_id=0(오버레이카드) · palette_id=2(보르도) */

:root{
  --accent:#5A2433;
  --accent-soft:#F3E8EB;
  --accent-btn-text:#FFFFFF;
  --hero-tint:#F7F2F3;
  --text:#1A1214;
  --muted:#6B565C;
  --line:#E8E0E2;
  --ink:var(--text);
  --desc:var(--muted);
  --bar-chrome:#ECEEF1;
  --bg-service:#F3E8EB;
  --bg-intro:#FDFCFC;
  --bg-areas:#EFE6E8;
  --bg-faq:#F5EEF0;
  --font-body:"Noto Serif KR", serif;
  --font-btn:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}

*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:#FFFFFF;
  line-height:1.7;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px;}
section{padding:88px 0;}

/* ---------- Header (B-22 : 흰 헤더 고정 시작, 스크롤시 연회색+그림자) ---------- */
.site-header{
  position:sticky;top:0;left:0;right:0;z-index:100;
  background:#FFFFFF;
  border-bottom:1px solid transparent;
  transition:background .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.site-header.is-scrolled{
  background:var(--bar-chrome);
  box-shadow:0 1px 16px rgba(0,0,0,0.06);
  border-bottom-color:#E5E7EB;
}
.header-inner{
  max-width:1200px;margin:0 auto;padding:0 24px;
  height:76px;display:flex;align-items:center;justify-content:space-between;
}
.logo{font-family:var(--font-body);font-weight:700;font-size:22px;color:var(--ink);display:flex;align-items:baseline;gap:8px;}
.logo-sub{font-family:var(--font-btn);font-size:12px;font-weight:600;color:var(--accent);border:1px solid var(--accent);padding:2px 8px;border-radius:3px;}
.nav-menu{display:flex;align-items:center;gap:36px;}
.nav-menu a{font-family:var(--font-body);font-size:15px;color:var(--ink);}
.nav-menu a.nav-cta{
  font-family:var(--font-btn);font-weight:600;font-size:14px;
  background:var(--accent);color:var(--accent-btn-text);
  padding:11px 22px;border-radius:3px;
}
.nav-toggle{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;}
.nav-toggle span{width:22px;height:2px;background:var(--ink);display:block;}

/* ---------- Hero (hero_id=0 오버레이카드) ---------- */
.hero{padding:28px 20px 40px;background:#fff;}
.hero__inner{
  position:relative;max-width:1280px;margin:0 auto;
  min-height:560px;border-radius:26px;overflow:hidden;
  background:var(--hero-tint);
  display:flex;align-items:flex-end;justify-content:flex-end;
  padding:56px;
}
.hero-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0;}
.hero__inner::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(to left,
    rgba(26,18,20,.72) 0%, rgba(26,18,20,.45) 42%, rgba(26,18,20,.05) 72%);
}
.hero-text-box{position:relative;z-index:2;max-width:540px;}
.hero-eyebrow{
  display:inline-block;padding:6px 14px;border-radius:999px;
  background:rgba(255,255,255,.16);color:#fff;font-family:var(--font-btn);
  font-size:13px;font-weight:600;letter-spacing:.4px;margin:0 0 18px;
}
.hero h1{
  font-family:var(--font-body);font-weight:700;font-size:clamp(32px,4.4vw,44px);
  color:#fff;letter-spacing:-.3px;line-height:1.32;margin:0 0 14px;
}
.hero-sub{font-size:16px;line-height:28px;color:rgba(255,255,255,.85);max-width:440px;margin:0 0 24px;}
.hero-cta{display:flex;gap:12px;margin:0 0 24px;flex-wrap:wrap;}
.hero .btn-fill{
  height:48px;padding:14px 26px;border-radius:999px;
  background:var(--accent);color:#fff;font-family:var(--font-btn);
  font-size:15px;font-weight:600;display:inline-flex;align-items:center;
}
.hero .btn-line{
  height:48px;padding:14px 26px;border-radius:999px;
  background:transparent;color:#fff;border:1px solid #fff;font-family:var(--font-btn);
  font-size:15px;font-weight:600;display:inline-flex;align-items:center;
}
.hero-checks{
  display:flex;gap:20px;flex-wrap:wrap;padding:18px 0 0;margin:0;
  font-size:14px;color:rgba(255,255,255,.85);list-style:disc inside;
}
@media(max-width:767px){
  .hero__inner{min-height:420px;padding:28px 24px;}
  .hero-text-box{max-width:100%;}
}
.btn{
  font-family:var(--font-btn);font-weight:600;font-size:15px;
  padding:15px 28px;border-radius:3px;display:inline-block;
}
.btn-primary{background:var(--accent);color:var(--accent-btn-text);}
.btn-outline{border:1px solid #fff;color:#fff;}
.btn-outline-ink{border:1px solid var(--ink);color:var(--ink);}

/* ---------- Section label ---------- */
.sec-label{font-family:var(--font-btn);font-weight:600;font-size:13px;color:var(--accent);margin-bottom:14px;letter-spacing:.04em;}
.sec-title{font-family:var(--font-body);font-weight:700;font-size:clamp(26px,3.4vw,36px);margin-bottom:16px;white-space:nowrap;}
.sec-head{margin-bottom:48px;}
@media(max-width:640px){.sec-title{white-space:normal;}}

/* ---------- #cases : 디자인1 4장 2x2 원그로브 호버 (메인 전용) ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:20px;max-width:1240px;margin:0 auto;}
.case-card{
  position:relative;width:100%;aspect-ratio:590/396;border-radius:6px;overflow:hidden;
  display:block;
}
.case-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;}
.case-face{
  position:absolute;inset:0;background:#fff;display:flex;flex-direction:column;justify-content:flex-end;
  padding:28px;transform:translateY(100%);transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.case-card:hover .case-face{transform:translateY(0);}
.case-face .region{font-family:var(--font-btn);font-size:12px;color:var(--accent);font-weight:600;margin-bottom:8px;}
.case-face h3{font-family:var(--font-body);font-size:19px;font-weight:700;margin-bottom:10px;}
.case-face p{font-size:13.5px;color:var(--desc);line-height:1.6;}
.case-tag{
  position:absolute;left:20px;bottom:20px;color:#fff;font-family:var(--font-btn);font-weight:600;font-size:15px;
  text-shadow:0 2px 10px rgba(0,0,0,.5);transition:opacity .3s ease;
}
.case-card:hover .case-tag{opacity:0;}
.cases-more{text-align:center;margin-top:44px;}

/* ---------- #service ---------- */
.service-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.service-card{background:#fff;border-radius:8px;padding:34px 26px;border:1px solid #EDEDEA;}
.service-icon{width:46px;height:46px;color:var(--accent);margin-bottom:20px;}
.service-card h3{font-family:var(--font-body);font-size:18px;font-weight:700;margin-bottom:10px;}
.service-card p{font-size:14px;color:var(--desc);line-height:1.65;}

/* ---------- one-line intro ---------- */
.intro-line{text-align:center;}
.intro-line p{font-family:var(--font-body);font-weight:600;font-size:clamp(18px,2.6vw,26px);white-space:nowrap;}
@media(max-width:640px){.intro-line p{white-space:normal;font-size:19px;}}

/* ---------- areas / regions ---------- */
.areas-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;}
.area-card{background:#fff;border:1px solid #E7ECF1;border-radius:8px;padding:26px;text-align:center;transition:border-color .2s ease;}
.area-card:hover{border-color:var(--accent);}
.area-card .label{font-family:var(--font-btn);font-size:12px;color:var(--accent);margin-bottom:8px;}
.area-card h3{font-family:var(--font-body);font-size:19px;font-weight:700;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid #E5E5E5;padding:22px 0;}
.faq-q{font-family:var(--font-body);font-weight:700;font-size:16.5px;display:flex;gap:12px;}
.faq-q .mark{color:var(--accent);font-family:var(--font-btn);}
.faq-a{margin-top:10px;font-size:14.5px;color:var(--desc);padding-left:26px;}

/* ---------- Closing (B-25) ---------- */
.closing{position:relative;height:650px;background-size:cover;background-position:center;display:flex;align-items:center;justify-content:center;}
.closing-overlay{position:absolute;inset:0;background:rgba(19,19,19,0.55);}
.closing-inner{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;}
.closing-head{font-family:var(--font-body);font-weight:700;font-size:clamp(24px,3.6vw,36px);margin-bottom:18px;}
.closing-quote{font-family:var(--font-body);font-size:15.5px;color:#EDEDEE;margin-bottom:30px;}
.closing-btn{
  display:inline-block;border:1px solid #fff;color:#fff;font-family:var(--font-btn);
  font-weight:600;padding:14px 34px;border-radius:0;font-size:14.5px;letter-spacing:.03em;
}

/* ---------- Footer (흰 배경) ---------- */
.site-footer{background:#FFFFFF;color:var(--text);padding:56px 0 26px;border-top:1px solid var(--line);}
.footer-inner{max-width:1200px;margin:0 auto;padding:0 24px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:28px;}
.footer-brand{font-family:var(--font-body);font-weight:700;font-size:18px;margin-bottom:12px;}
.footer-line{font-size:13.5px;color:var(--muted);line-height:1.9;}
.mobile-br{display:none;}
.footer-actions{display:flex;gap:12px;align-items:flex-start;}
.footer-btn{font-family:var(--font-btn);font-weight:600;font-size:13.5px;padding:12px 20px;border-radius:3px;background:var(--accent);color:#fff;}
.footer-btn-outline{background:transparent;border:1px solid var(--line);color:var(--text);}
.footer-copy{text-align:center;font-size:12px;color:var(--muted);margin-top:34px;}

/* ---------- Bottom sticky bar (B-23) ---------- */
.bottom-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:90;
  background:var(--bar-chrome);border-top:1px solid #E5E7EB;
  box-shadow:0 -6px 22px rgba(0,0,0,0.08);
  padding:12px 16px;display:flex;justify-content:center;
  transform:translateY(100%);opacity:0;transition:transform .3s ease, opacity .3s ease;
}
.bottom-bar.show{transform:translateY(0);opacity:1;}
.bottom-bar-btn{
  width:100%;max-width:520px;text-align:center;
  background:var(--accent);color:#fff;font-family:var(--font-btn);font-weight:600;
  padding:14px;border-radius:3px;font-size:15px;min-height:48px;display:flex;align-items:center;justify-content:center;
}

/* ---------- Sub page hero (blurred bg) ---------- */
.page-hero{position:relative;min-height:38vh;display:flex;align-items:center;background-size:cover;background-position:center;}
.page-hero-overlay{position:absolute;inset:0;background:rgba(255,255,255,0.32);backdrop-filter:blur(1.5px);}
.page-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:0 24px;}
.page-hero .eyebrow{font-family:var(--font-btn);font-size:13px;color:var(--accent);font-weight:700;margin-bottom:12px;text-shadow:0 1px 6px rgba(255,255,255,.7);}
.page-hero h1{font-family:var(--font-body);font-weight:700;font-size:clamp(28px,4vw,44px);color:var(--ink);text-shadow:0 1px 8px rgba(255,255,255,.6);}

/* ---------- Portfolio list (영림형) ---------- */
.pf-grid{display:flex;flex-wrap:wrap;gap:22px;padding:70px 0;}
.pf-item{display:block;}
.pf-item .pf-thumb{width:100%;overflow:hidden;border-radius:0;}
.pf-item .pf-thumb img{width:100%;height:100%;object-fit:cover;}
.pf-item .pf-meta{padding-top:14px;}
.pf-item .pf-region{font-family:var(--font-btn);font-size:12px;color:var(--accent);font-weight:600;margin-bottom:6px;}
.pf-item h3{font-family:var(--font-body);font-weight:700;font-size:18px;}
.pf-w30{width:calc(30% - 15px);} .pf-w30 .pf-thumb{aspect-ratio:5/6;}
.pf-w68{width:calc(68% - 7px);} .pf-w68 .pf-thumb{aspect-ratio:9.45/5;}
.pf-w49{width:calc(49% - 11px);} .pf-w49 .pf-thumb{aspect-ratio:7/6;}
@media(max-width:820px){.pf-w30,.pf-w68,.pf-w49{width:100%;}}

/* ---------- Case detail / region body (필수 550x410 규칙) ---------- */
.case-body{padding:70px 0;max-width:760px;margin:0 auto;}
.case-body .case-photo{width:550px;height:410px;max-width:100%;object-fit:cover;border-radius:18px;margin:0 auto 40px;}
@media(max-width:640px){.case-body .case-photo{width:100%;aspect-ratio:550/410;height:auto;}}
.case-body .label01{font-family:var(--font-btn);font-size:11px;color:#9AA0AA;letter-spacing:.05em;margin-bottom:10px;}
.case-body h1, .case-body h2.body-title{font-family:var(--font-body);font-weight:700;font-size:26px;margin-bottom:20px;}
.case-body p{font-size:15.5px;color:#4B5563;margin-bottom:16px;}
.case-body strong{color:var(--ink);}
.case-gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:8px;}
.case-gallery img{width:100%;aspect-ratio:550/410;object-fit:cover;border-radius:14px;}
@media(max-width:640px){.case-gallery{grid-template-columns:repeat(2,1fr);}}
.case-nav{display:flex;justify-content:space-between;max-width:760px;margin:0 auto 20px;font-family:var(--font-btn);font-size:14px;}
.case-nav a{color:var(--accent);font-weight:600;}

/* ---------- 시공전/중/후 ---------- */
.compare-row{
  display:grid !important;
  gap:10px;width:100%;max-width:760px;margin:24px auto 0;
}
.compare-row.count-3{grid-template-columns:repeat(3,1fr);}
.compare-row.count-2{grid-template-columns:1fr 1fr;}
.compare-row.count-1{grid-template-columns:1fr;}
.compare-row figure{margin:0;}
.compare-row img{width:100%;height:180px;object-fit:cover;display:block;border-radius:10px;}
.compare-row figcaption{text-align:center;font-family:var(--font-btn);font-size:13px;color:var(--desc);margin-top:8px;}

/* ---------- 다른 시공사례 (2장 1줄) ---------- */
.related-row{
  display:grid !important;
  grid-template-columns:1fr 1fr;
  gap:12px;width:100%;max-width:760px;margin:14px auto 0;
}
.related-row.count-3{grid-template-columns:repeat(3,1fr);}
.related-card{display:block;}
.related-card img{width:100%;height:180px;object-fit:cover;display:block;border-radius:10px;}
.related-card span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.8em;line-height:1.4;margin-top:10px;font-family:var(--font-body);font-weight:700;font-size:14.5px;color:var(--ink);}
@media(max-width:640px){.related-row{grid-template-columns:1fr !important;}}

/* ---------- Guide hub ---------- */
.guide-hero-desc{font-size:15.5px;color:var(--desc);max-width:640px;margin-top:-8px;}
.guide-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;max-width:1120px;margin:0 auto;}
.guide-card{display:block;background:#fff;border:1px solid #E7ECF1;border-radius:10px;overflow:hidden;transition:border-color .2s ease;}
.guide-card:hover{border-color:var(--accent);}
.guide-card .guide-thumb{width:100%;aspect-ratio:4/3;overflow:hidden;}
.guide-card .guide-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.guide-card-body{padding:20px 22px 24px;}
.guide-card .guide-label{font-family:var(--font-btn);font-size:12px;color:var(--accent);font-weight:600;margin-bottom:8px;}
.guide-card h3{font-family:var(--font-body);font-size:18px;font-weight:700;margin-bottom:8px;}
.guide-card p{font-size:13.5px;color:var(--desc);line-height:1.6;margin-bottom:12px;}
.guide-card .guide-more{font-family:var(--font-btn);font-weight:600;font-size:13px;color:var(--accent);}
@media(max-width:900px){.guide-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:640px){.guide-grid{grid-template-columns:1fr;}}

.mt-cta-center{text-align:center;margin:50px auto 0;max-width:760px;}
.mt-cta-center .btn-outline{border-color:var(--accent);color:var(--accent);}

/* ---------- About / Contact ---------- */
.simple-body{padding:70px 0;max-width:760px;margin:0 auto;}
.simple-body p{font-size:15.5px;color:#4B5563;margin-bottom:16px;}
.contact-phone{font-family:var(--font-btn);font-weight:700;font-size:34px;color:var(--accent);margin:22px 0;display:inline-block;}
.info-table{width:100%;border-collapse:collapse;margin-top:30px;}
.info-table th{width:140px;text-align:left;font-family:var(--font-btn);font-weight:600;font-size:14px;color:var(--ink);padding:14px 0;border-bottom:1px solid #eee;}
.info-table td{font-size:14.5px;color:var(--desc);padding:14px 0;border-bottom:1px solid #eee;}

/* ---------- Sitemap page ---------- */
.sitemap-list{padding:70px 0;max-width:760px;margin:0 auto;}
.sitemap-list h2{font-family:var(--font-body);font-size:19px;margin:26px 0 12px;}
.sitemap-list ul li{padding:8px 0;border-bottom:1px solid #eee;}
.sitemap-list ul li a{font-size:14.5px;color:var(--accent);}

/* ---------- Responsive ---------- */
@media(max-width:900px){
  .service-grid{grid-template-columns:repeat(2,1fr);}
  .areas-grid{grid-template-columns:1fr;}
  .cases-grid{grid-template-columns:1fr;}
}
@media(max-width:760px){
  .nav-menu{
    position:fixed;top:76px;left:0;right:0;background:#fff;flex-direction:column;
    align-items:flex-start;gap:0;padding:10px 24px 24px;
    transform:translateY(-8px);opacity:0;pointer-events:none;transition:all .2s ease;
    border-bottom:1px solid #eee;
  }
  .nav-menu.open{transform:translateY(0);opacity:1;pointer-events:auto;}
  .nav-menu a{padding:14px 0;width:100%;border-bottom:1px solid #f2f2f2;}
  .nav-menu a.nav-cta{margin-top:10px;text-align:center;}
  .nav-toggle{display:flex;}
  .service-grid{grid-template-columns:1fr;}
  .footer-inner{flex-direction:column;}
  .mobile-br{display:inline;}
  .footer-hours{white-space:nowrap;}
  .pf-item h3{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:2.6em;line-height:1.3;}
  .related-card span{min-height:2.6em;}
}

/* ---------- Bottom bar: PC 숨김 · 모바일 항상 표시 ---------- */
@media(min-width:768px){
  .bottom-bar{display:none !important;}
}
@media(max-width:767px){
  .bottom-bar{transform:translateY(0) !important;opacity:1 !important;}
}