:root{
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-kr: "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;

  --deep: #332218;
  --accent: #E6D3CF;
  --accent-soft: #F5EEEC;
  --bg: #FFFFFF;
  --bg-soft: #F7F5F6;
  --ink: #1A1A1A;
  --desc: #5B4650;
  --chrome: #E6E8EB;
  --line: #E5E7EB;
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0; font-family:var(--font-body); color:var(--ink); background:var(--bg);
  line-height:1.65; -webkit-font-smoothing:antialiased;
}
img{max-width:100%; display:block;}
a{color:inherit; text-decoration:none;}
h1,h2,h3,p{margin:0;}
.wrap{max-width:1120px; margin:0 auto; padding:0 24px;}

/* ---------- header (B-22) ---------- */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:transparent; transition:background .3s ease,box-shadow .3s ease,border-color .3s ease;
  border-bottom:1px solid transparent;
}
.site-header .hd-wrap{
  max-width:1120px; margin:0 auto; padding:18px 24px;
  display:flex; align-items:center; justify-content:space-between;
}
.site-header .logo{font-weight:700; font-size:19px; letter-spacing:-.02em; color:#fff; transition:color .3s ease;}
.site-header nav{display:flex; align-items:center; gap:28px;}
.site-header nav a.navlink{font-size:14.5px; font-weight:500; color:#fff; transition:color .3s ease;}
.site-header .btn-primary{padding:10px 20px; font-size:14px;}
.site-header.scrolled{
  background:var(--chrome); box-shadow:0 1px 16px rgba(0,0,0,.06); border-bottom-color:var(--line);
}
.site-header.scrolled .logo, .site-header.scrolled nav a.navlink{color:var(--ink);}
.no-hero .site-header{background:var(--chrome); box-shadow:0 1px 16px rgba(0,0,0,.06); border-bottom-color:var(--line);}
.no-hero .site-header .logo, .no-hero .site-header nav a.navlink{color:var(--ink);}
.hamburger{display:none;}

.btn-primary{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:var(--accent); color:var(--ink); border-radius:10px; font-weight:600;
  padding:13px 26px; font-size:15px; white-space:nowrap; border:none; cursor:pointer;
}
.btn-outline{
  display:inline-flex; align-items:center; justify-content:center; gap:6px;
  background:transparent; color:#fff; border:1.5px solid rgba(255,255,255,.7); border-radius:10px;
  padding:12px 24px; font-size:15px; font-weight:600; white-space:nowrap;
}

/* ---------- hero ---------- */
.hero{
  position:relative; min-height:640px; display:flex; align-items:center;
  background:#111 url('/assets/images/hero.webp') center/cover no-repeat;
  color:#fff;
}
.hero::before{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(51,34,24,.55) 0%, rgba(51,34,24,.30) 40%, rgba(51,34,24,.55) 100%);
}
.hero-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; animation:heroMove 18s ease-in-out infinite alternate;}
@keyframes heroMove{from{transform:scale(1.0) translateY(0);} to{transform:scale(1.08) translateY(-1.5%);}}
.hero-inner{position:relative; z-index:2; padding:150px 24px 90px; max-width:1120px; margin:0 auto; width:100%;}
.hero-eyebrow{font-size:13.5px; letter-spacing:.14em; color:var(--accent); font-weight:700; margin-bottom:18px;}
.hero h1{font-size:clamp(30px,4.6vw,52px); font-weight:800; line-height:1.28; letter-spacing:-.02em; max-width:640px;}
.hero .hero-desc{margin-top:20px; font-size:16.5px; color:rgba(255,255,255,.88); max-width:560px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.hero-actions{margin-top:34px; display:flex; gap:12px; flex-wrap:wrap;}

/* ---------- sub-page hero (blurred bg image + title) ---------- */
.sub-hero{
  position:relative; min-height:300px; display:flex; align-items:flex-end;
  background:#2a2018 center/cover no-repeat; color:#fff;
}
.sub-hero .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; filter:blur(1.5px) brightness(.62); transform:scale(1.04);}
.sub-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(26,18,12,.15) 0%, rgba(26,18,12,.72) 100%);}
.sub-hero .wrap{position:relative; z-index:2; padding-bottom:40px; padding-top:140px;}
.sub-hero .eyebrow{font-size:13px; font-weight:700; letter-spacing:.1em; color:var(--accent); margin-bottom:12px;}
.sub-hero h1{font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em;}
.sub-hero .lede{margin-top:10px; font-size:15px; color:rgba(255,255,255,.85); max-width:640px;}

/* ---------- gallery-case 풀블리드 밝은 히어로 (어둡게 덮지 않음) ---------- */
.case-hero{position:relative; min-height:360px; display:flex; align-items:flex-end; color:var(--ink);}
.case-hero .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.case-hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.58) 100%);}
.case-hero .wrap{position:relative; z-index:2; padding:150px 24px 44px;}
.case-hero .eyebrow{font-size:13px; font-weight:800; letter-spacing:.1em; color:var(--desc);}
.case-hero h1{font-size:clamp(26px,4vw,38px); font-weight:800; letter-spacing:-.02em; text-shadow:0 1px 16px rgba(255,255,255,.85);}

/* ---------- section shells ---------- */
section{padding:88px 0;}
section.tinted{background:var(--bg-soft);}
.sec-label{display:inline-block; font-size:13px; font-weight:800; letter-spacing:.12em; color:var(--desc); margin-bottom:14px;}
.sec-title{font-size:clamp(24px,3.2vw,34px); font-weight:800; letter-spacing:-.02em; line-height:1.35;}
.sec-title.one-line{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.sec-sub{margin-top:14px; color:#555; font-size:15.5px; max-width:640px;}
.sec-head{margin-bottom:48px;}
.sec-head.split{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap;}

/* ---------- service (text/checklist style, DNA-A: no numbered cards) ---------- */
.svc-list{display:flex; flex-direction:column; border-top:1px solid var(--line);}
.svc-row{display:grid; grid-template-columns:56px 1fr; gap:24px; padding:32px 0; border-bottom:1px solid var(--line); align-items:flex-start;}
.svc-row .ic{width:44px; height:44px; color:var(--desc);}
.svc-row .ic svg{width:100%; height:100%;}
.svc-row h3{font-size:19px; font-weight:700; margin-bottom:8px;}
.svc-row p{color:#555; font-size:14.5px; max-width:640px;}

/* ---------- guide summary cards ---------- */
.guide-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px;}
.guide-card{background:#fff; border:1px solid var(--line); border-radius:14px; padding:26px; transition:box-shadow .2s;}
.guide-card:hover{box-shadow:0 8px 24px rgba(0,0,0,.06);}
.guide-card .ic{width:30px; height:30px; color:var(--desc); margin-bottom:16px;}
.guide-card .ic svg{width:100%; height:100%;}
.guide-card h3{font-size:16px; font-weight:700; margin-bottom:8px; line-height:1.4;}
.guide-card p{font-size:13.5px; color:#666;}
.guide-more{margin-top:36px; text-align:center;}
.guide-grid.wide{max-width:1120px; margin:0 auto; gap:24px;}
.guide-grid.wide .guide-card{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.guide-card .gthumb{width:100%; height:200px; object-fit:cover; display:block;}
.guide-card .gbody{padding:20px 22px 22px;}
.guide-card .gmore{display:inline-block; margin-top:12px; font-size:13.5px; font-weight:700; color:var(--desc);}
.guide-more-d{margin-top:28px;}
.guide-more-d summary{cursor:pointer; text-align:center; font-weight:700; color:var(--desc); list-style:none; padding:10px;}
.guide-more-d summary::-webkit-details-marker{display:none;}
.guide-more-d .guide-grid{margin-top:20px;}
.rel-cases{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.rel-cases a{display:block; font-size:14px; font-weight:600; line-height:1.4;}
.rel-cases img{width:100%; height:170px; object-fit:cover; border-radius:10px; display:block; margin-bottom:8px;}

/* ---------- cases (big single-photo cards, DNA-A) ---------- */
.case-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.case-card{position:relative; border-radius:18px; overflow:hidden; aspect-ratio:4/5; background:#eee;}
.case-card img{width:100%; height:100%; object-fit:cover;}
.case-card::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,0) 45%, rgba(20,12,8,.82) 100%);}
.case-card .cc-inner{position:absolute; left:0; right:0; bottom:0; z-index:2; padding:26px; color:#fff;}
.case-card .cc-tag{font-size:12px; font-weight:700; letter-spacing:.08em; color:var(--accent); margin-bottom:8px;}
.case-card h3{font-size:19px; font-weight:700;}
.portfolio-more{margin-top:36px; text-align:center;}

/* ---------- FAQ ---------- */
.faq-list{border-top:1px solid var(--line);}
.faq-item{border-bottom:1px solid var(--line);}
.faq-item summary{list-style:none; cursor:pointer; padding:24px 4px; display:flex; gap:16px; align-items:center; font-weight:600; font-size:16px;}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::before{content:"Q"; color:var(--accent); background:var(--deep); width:26px; height:26px; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:12px; flex-shrink:0;}
.faq-item .faq-a{padding:0 4px 26px 42px; color:#555; font-size:14.5px; line-height:1.75;}

/* ---------- footer ---------- */
footer{background:#1F140D; color:rgba(255,255,255,.92); padding:64px 0 120px;}
footer .biz{font-size:14px; line-height:2; color:rgba(255,255,255,.78);}
footer .biz b{color:#fff; font-weight:700;}
footer .footer-top{display:flex; justify-content:space-between; gap:32px; flex-wrap:wrap; padding-bottom:36px; border-bottom:1px solid rgba(255,255,255,.12);}
footer .footer-cta{display:flex; gap:10px; flex-wrap:wrap;}
footer .sitemap-block{margin-top:32px; opacity:.38;}
footer .sitemap-block a{font-size:11.5px; color:rgba(255,255,255,.6); margin-right:14px; line-height:2.2;}
footer .sitemap-block .cat-title{font-size:11px; color:rgba(255,255,255,.5); margin-right:8px;}

/* ---------- closing CTA (full-bleed, FAQ 다음 · 푸터 직전) ---------- */
.closing-cta{position:relative; height:650px; display:flex; align-items:center; justify-content:center; overflow:hidden; color:#fff;}
.closing-cta .bgimg{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;}
.closing-cta::after{content:""; position:absolute; inset:0; background:rgba(19,19,19,.55);}
.closing-cta .cc-content{position:relative; z-index:2; text-align:center; padding:0 24px;}
.closing-cta .cc-copy{font-size:clamp(20px,3vw,30px); font-weight:700; letter-spacing:-.01em; line-height:1.5; margin-bottom:28px;}

/* ---------- bottom consult bar (B-23) ---------- */
.bottom-bar{
  position:fixed; left:0; right:0; bottom:0; z-index:90; background:var(--chrome);
  border-top:1px solid var(--line); box-shadow:0 -6px 22px rgba(0,0,0,.08);
  padding:12px 16px; display:flex; justify-content:center;
  transform:translateY(120%); opacity:0; transition:transform .3s ease, opacity .3s ease;
}
.bottom-bar.show{transform:translateY(0); opacity:1;}
.bottom-bar .bb-inner{width:100%; max-width:1120px; display:flex; align-items:center; justify-content:center; gap:12px;}
.bottom-bar .btn-primary{flex:1; max-width:420px; min-height:48px;}

/* ---------- gallery-case body layout (fixed spec) ---------- */
.case-body-wrap{max-width:680px; margin:0 auto; padding:70px 24px 100px; background:#fff;}
.case-body-photo{width:550px; height:410px; max-width:100%; aspect-ratio:550/410; object-fit:cover; border-radius:18px; margin:0 auto 34px; box-shadow:0 2px 10px rgba(0,0,0,.05);}
.case-body-label{font-size:11px; color:#8a8a8a; letter-spacing:.06em; margin-bottom:10px;}
.case-body-title{font-size:clamp(22px,3vw,28px); font-weight:700; letter-spacing:-.02em; margin-bottom:20px;}
.case-body-text{font-size:15.5px; color:#4B5563; line-height:1.9; white-space:pre-line;}
.case-body-text b{color:var(--ink); font-weight:700;}
.case-nav{display:flex; justify-content:space-between; margin-top:48px; padding-top:24px; border-top:1px solid var(--line); font-size:14px;}

/* ---------- region page body ---------- */
.region-body{max-width:760px; margin:0 auto; padding:70px 24px;}
.region-body p{font-size:15.5px; color:#444; margin-bottom:20px; line-height:1.9;}
.region-steps{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin:20px 0 40px;}
.region-step{background:var(--bg-soft); border-radius:14px; padding:22px 18px;}
.region-step .num{font-size:12px; font-weight:800; color:var(--desc); margin-bottom:8px;}
.region-step h4{font-size:15px; font-weight:700; margin-bottom:6px;}
.region-step p{font-size:13px; color:#666; margin:0;}
.region-adj{margin-top:40px; font-size:14px; color:#666;}
.region-adj a{color:var(--desc); font-weight:600; margin-right:10px;}

/* ---------- generic gallery (portfolio index) ---------- */
.gallery-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:18px;}
.gallery-card{border-radius:16px; overflow:hidden; background:#eee; aspect-ratio:4/3; position:relative;}
.gallery-card img{width:100%; height:100%; object-fit:cover;}
.gallery-card .gc-label{position:absolute; left:14px; bottom:14px; color:#fff; font-weight:700; font-size:14px; text-shadow:0 1px 6px rgba(0,0,0,.5);}

/* ---------- sitemap page ---------- */
.sm-group{margin-bottom:40px;}
.sm-group h2{font-size:14px; letter-spacing:.08em; color:var(--desc); margin-bottom:16px;}
.sm-links{display:flex; flex-wrap:wrap; gap:10px 18px;}
.sm-links a{font-size:14.5px; color:var(--ink); padding:6px 0;}

/* ---------- centered utility ---------- */
.center{text-align:center;}

@media (max-width:860px){
  .svc-row{grid-template-columns:44px 1fr;}
  .guide-grid{grid-template-columns:repeat(2,1fr);}
  .case-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:repeat(2,1fr);}
  .region-steps{grid-template-columns:repeat(2,1fr);}
  section{padding:60px 0;}
  .hero{min-height:560px;}
  .hero-inner{padding:130px 20px 70px;}
  footer .footer-top{text-align:center; justify-content:center; flex-direction:column; align-items:center;}
  footer{text-align:center;}
  footer .sitemap-block{text-align:center;}
  .case-nav{flex-direction:column; gap:10px; text-align:center;}
}
@media (max-width:767px){
  .rel-cases{grid-template-columns:1fr;}
  .rel-cases img{height:160px;}
}
@media (max-width:600px){
  body{word-break:keep-all;}
  .site-header .hd-wrap{flex-wrap:wrap; padding:12px 16px 8px; gap:6px;}
  .site-header nav{display:grid; grid-template-columns:repeat(4,1fr); width:100%; gap:4px; text-align:center;}
  .site-header nav a.navlink{font-size:13px; white-space:nowrap;}
  .site-header nav .btn-primary{padding:7px 4px; font-size:13px; white-space:nowrap;}
  .guide-grid{grid-template-columns:1fr;}
  .gallery-grid{grid-template-columns:1fr;}
  .case-body-wrap{padding:50px 18px 80px;}
  .closing-cta{height:420px;}
}