:root{
  color-scheme: only light;
  /* 실측·도면 모티프 — 브라스(황동 하드웨어) 액센트 + 차가운 스톤 페이퍼 + 그래파이트 잉크 */
  --dp-primary:#A9793C; --dp-primary-2:#C79A5C; --dp-primary-3:#8C6531; --dp-primary-d:#16211D;
  --dp-accent:#A9793C; --dp-accent-soft:#EFE3CD;
  --dp-bg-soft:#EEF0EB; --dp-bg-warm:#E4E7DF; --dp-bg-dark:#16211D;
  --dp-border:#D3D6CC; --dp-border-soft:#E1E3DC;
  --dp-text:#14181A; --dp-text-sub:#454B47; --dp-text-muted:#767C77;
  --dp-radius:0px;
  --dp-space-1:4px; --dp-space-2:8px; --dp-space-3:12px; --dp-space-4:16px;
  --dp-space-5:24px; --dp-space-6:32px; --dp-space-7:48px; --dp-space-8:64px;
  --dp-space-9:96px; --dp-space-10:128px;
  --dp-sec-pad:clamp(56px,8vw,96px);
  --dp-gutter:clamp(20px,4vw,40px);
  --dp-container:1200px;
  --dp-ease:cubic-bezier(.22,1,.36,1);
  --sticky-h:0px;
  --dp-font-display:'IBM Plex Sans KR','Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --dp-font-body:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --dp-font-mono:'IBM Plex Mono',ui-monospace,'SFMono-Regular',Menlo,monospace;
}

*{box-sizing:border-box; min-width:0;}
html,body{max-width:100%; overflow-x:hidden;}
html{-webkit-text-size-adjust:100%;}
img,video,table,pre{max-width:100%;}
img{height:auto;}
body, p, h1, h2, h3, h4, h5, h6, li, td, th, a, span, div, button, label, figcaption{
  word-break: keep-all; overflow-wrap: break-word;
}
* { -webkit-tap-highlight-color: transparent; }
:where(a, button, [role="button"], summary) { touch-action: manipulation; }

body{
  margin:0; font-family: var(--dp-font-body);
  font-size:19px; line-height:1.7; color:var(--dp-text); background:#fff;
}
h1,h2,h3{font-family:var(--dp-font-display); font-weight:700; line-height:1.16; letter-spacing:-.01em; margin:0 0 var(--dp-space-3); color:var(--dp-text);}
h1{font-size:clamp(2.2rem,5.2vw,3.8rem); font-weight:700; letter-spacing:-.02em;}
h2{font-size:clamp(1.6rem,3.4vw,2.3rem);}
h3{font-size:clamp(1.1rem,1.8vw,1.3rem); margin-bottom:var(--dp-space-2); font-weight:600;}
p{margin:0 0 var(--dp-space-4);}
a{color:inherit;}

/* ---- 실측 도면 모티프: 섹션 상단 눈금 구분선(자 눈금) ---- */
.dp-section:not(:first-child)::before{
  content:''; display:block; height:14px; margin-bottom:var(--dp-space-4);
  background-image:
    repeating-linear-gradient(to right, var(--dp-border) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(to right, var(--dp-border-soft) 0 1px, transparent 1px 10px);
  background-size:100% 14px, 100% 7px;
  background-position:top left, bottom left;
  background-repeat:repeat-x;
}
.dp-section--dark::before, .dp-cta-banner::before{
  content:''; display:block; height:14px; margin-bottom:var(--dp-space-4);
  background-image:
    repeating-linear-gradient(to right, rgba(255,255,255,.32) 0 1px, transparent 1px 50px),
    repeating-linear-gradient(to right, rgba(255,255,255,.16) 0 1px, transparent 1px 10px);
  background-size:100% 14px, 100% 7px;
  background-position:top left, bottom left;
  background-repeat:repeat-x;
}
.dp-cta-banner--split::before{grid-column:1 / -1;}

/* ---- 실측 도면 모티프: 시공사진 코너 레지스트레이션 마크 ---- */
.hero-media, .dp-ba figure .img-wrap, .dp-cta-banner__media{position:relative; color:rgba(255,255,255,.85);}
.hero-media::after, .dp-ba figure .img-wrap::after, .dp-cta-banner__media::after{
  content:''; position:absolute; inset:12px; pointer-events:none;
  background-image:
    linear-gradient(to right, currentColor 2px, transparent 2px), linear-gradient(to bottom, currentColor 2px, transparent 2px),
    linear-gradient(to left,  currentColor 2px, transparent 2px), linear-gradient(to bottom, currentColor 2px, transparent 2px),
    linear-gradient(to right, currentColor 2px, transparent 2px), linear-gradient(to top,    currentColor 2px, transparent 2px),
    linear-gradient(to left,  currentColor 2px, transparent 2px), linear-gradient(to top,    currentColor 2px, transparent 2px);
  background-size:18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px, 18px 2px, 2px 18px;
  background-position:top left, top left, top right, top right, bottom left, bottom left, bottom right, bottom right;
  background-repeat:no-repeat;
}

:where(a, button, [role="button"], summary, input, textarea, select):focus-visible{
  outline:2px solid var(--dp-accent); outline-offset:2px;
}
:where(a, button, [role="button"], summary){min-height:44px; min-width:44px; display:inline-flex; align-items:center;}

@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important; scroll-behavior:auto !important;
  }
  .js [data-reveal], .js [data-reveal-stagger] > *{opacity:1 !important; transform:none !important;}
}

/* ---- header ---- */
.site-header{
  display:flex; align-items:center; justify-content:space-between; gap:var(--dp-space-4);
  padding: var(--dp-space-3) var(--dp-gutter); border-bottom:1px solid var(--dp-border-soft);
  position:sticky; top:0; background:#fff; z-index:100;
}
.hdr-logo{display:flex; align-items:center; gap:8px; min-width:0; text-decoration:none; color:var(--dp-text);}
.hdr-logo__text{display:flex; flex-direction:column; min-width:0;}
.hdr-logo__name{white-space:nowrap; font-size:1.05rem;}
.hdr-logo__tagline{font-size:.72rem; letter-spacing:.04em; color:var(--dp-text-muted); overflow:visible; white-space:normal;}
@media (max-width:480px){ .hdr-logo__tagline{display:none;} }
.hdr-nav a{
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--dp-primary); color:#fff; text-decoration:none;
  padding:10px 20px; border-radius:var(--dp-radius); font-weight:700; min-height:44px;
}

/* ---- image wraps ---- */
.img-wrap{aspect-ratio:16/9; overflow:hidden; background:var(--dp-bg-warm);}
.img-wrap img, .img-wrap svg{width:100%; height:100%; object-fit:cover; display:block;}
main :is(figure,.card,section) > img{aspect-ratio:16/9; width:100%; height:auto; object-fit:cover; display:block;}

/* ---- sections ---- */
.dp-section, .dp-cta-banner, .contact-actions, article[data-comp="hero"]{
  max-width:var(--dp-container); margin-inline:auto; padding: var(--dp-sec-pad) var(--dp-gutter);
}
.dp-section--soft{background:var(--dp-bg-soft);}
.dp-section--dark{background:var(--dp-bg-dark); color:#fff;}
.dp-section--dark h2, .dp-section--dark p{color:#fff;}
.dp-section--soft, .dp-section--dark{max-width:100%; }
.dp-section--soft > *, .dp-section--dark > *{max-width:var(--dp-container); margin-inline:auto;}
.dp-eyebrow{display:flex; align-items:center; gap:8px; letter-spacing:.1em; font-size:.78rem; font-weight:700; color:var(--dp-accent); margin-bottom:var(--dp-space-2); font-family:var(--dp-font-display);}
.dp-eyebrow::before{content:''; width:7px; height:7px; background:var(--dp-accent); flex:none;}
.dp-section--dark .dp-eyebrow, .dp-cta-banner .dp-eyebrow{color:var(--dp-primary-2);}
.dp-section--dark .dp-eyebrow::before, .dp-cta-banner .dp-eyebrow::before{background:var(--dp-primary-2);}

/* ---- hero ---- */
article[data-comp="hero"]{display:grid; grid-template-columns:1fr 1fr; gap:var(--dp-space-7); align-items:center;}
.hero-media{order:0;}
.hero-copy{order:1;}
.hero-sub{color:var(--dp-text-sub);}
.hero-actions{display:flex; gap:var(--dp-space-3); flex-wrap:wrap; margin-top:var(--dp-space-5);}
@media (max-width:768px){ article[data-comp="hero"]{grid-template-columns:1fr;} }

/* ---- 실측 스펙 스트립(실제 수치 3개 — 장식용 숫자 아님) ---- */
.spec-strip{display:flex; flex-wrap:wrap; margin:var(--dp-space-5) 0 0; border-top:1px solid var(--dp-border); border-bottom:1px solid var(--dp-border);}
.spec-strip__item{flex:1 1 33%; padding:var(--dp-space-3) var(--dp-space-4) var(--dp-space-3) 0; border-right:1px solid var(--dp-border);}
.spec-strip__item:last-child{border-right:0; padding-right:0;}
.spec-strip__num{display:block; font-family:var(--dp-font-mono); font-size:1.15rem; font-weight:600; color:var(--dp-primary); white-space:nowrap;}
.spec-strip__label{display:block; font-size:.76rem; color:var(--dp-text-muted); margin-top:2px;}
@media (max-width:560px){
  .spec-strip{flex-wrap:wrap;}
  .spec-strip__item{flex:1 1 50%; border-right:1px solid var(--dp-border); padding-right:var(--dp-space-3);}
  .spec-strip__item:nth-child(2){border-right:0;}
  .spec-strip__item:last-child{flex:1 1 100%; border-top:1px solid var(--dp-border); margin-top:var(--dp-space-3); padding-top:var(--dp-space-3);}
}

/* ---- CTA buttons ---- */
.dp-cta{
  display:inline-flex; align-items:center; justify-content:center; min-height:52px;
  padding:14px 32px; background:var(--dp-primary); color:#fff; text-decoration:none;
  font-weight:700; border-radius:var(--dp-radius); transition:transform .18s var(--dp-ease);
}
.dp-cta--outline{background:transparent; color:var(--dp-primary); border:2px solid var(--dp-primary);}
@media (hover:hover) and (pointer:fine){ .dp-cta:hover{transform:translateY(-2px);} }

/* ---- checklist / callout / compare / timeline / spec ---- */
.checklist{list-style:none; margin:var(--dp-space-4) 0; padding:0;}
.checklist li{padding-left:28px; position:relative; margin-bottom:var(--dp-space-2);}
.checklist li::before{content:"✓"; position:absolute; left:0; color:var(--dp-accent); font-weight:700;}

.callout{border-left:3px solid var(--dp-accent); background:var(--dp-bg-warm); padding:var(--dp-space-5); margin-bottom:var(--dp-space-6);}
.callout strong{display:block; margin-bottom:var(--dp-space-2);}

.compare{margin-top:var(--dp-space-6);}
.compare__cols{display:grid; grid-template-columns:1fr 1fr; gap:var(--dp-space-4);}
.compare__col{border:1px solid var(--dp-border); padding:var(--dp-space-4);}
@media (max-width:768px){ .compare__cols{grid-template-columns:1fr;} }

:root{ --proc-badge:48px; --proc-badge-radius:var(--dp-radius); --proc-line:2px; }
.proc-list{display:flex; flex-wrap:nowrap; list-style:none; margin:var(--dp-space-6) 0; padding:0;}
.proc-step{flex:1 1 0; min-width:0; position:relative; padding:0 var(--dp-space-3); text-align:center;}
.proc-step:not(:last-child)::after{
  content:''; position:absolute; z-index:0;
  top:calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
  left:50%; width:100%; height:var(--proc-line); background:var(--dp-border);
}
.proc-num{position:relative; z-index:1; width:var(--proc-badge); height:var(--proc-badge);
  margin:0 auto var(--dp-space-3); border-radius:var(--proc-badge-radius); background:var(--dp-primary);
  color:#fff; font-weight:700; display:flex; align-items:center; justify-content:center;}
.proc-step__meta{font-size:14px; color:var(--dp-text-muted); font-family:var(--dp-font-mono),var(--dp-font-body); letter-spacing:.02em;}
@media (max-width:1024px){
  .proc-list{flex-direction:column; gap:var(--dp-space-6);}
  .proc-step{padding:0 0 0 calc(var(--proc-badge) + var(--dp-space-4)); text-align:left;}
  .proc-num{position:absolute; left:0; top:0; margin:0;}
  .proc-step:not(:last-child)::after{
    top:var(--proc-badge); left:calc(var(--proc-badge) / 2 - var(--proc-line) / 2);
    width:var(--proc-line); height:calc(100% + var(--dp-space-6));
  }
}

.dp-spec{display:grid; gap:0;}
.dp-spec > div{display:grid; grid-template-columns:35% 65%; border-bottom:1px solid var(--dp-border-soft); padding:var(--dp-space-3) 0;}
.dp-spec dt{font-weight:700; color:var(--dp-text-sub);}
.dp-spec dd{margin:0;}

/* ---- cost table ---- */
.cost-table{overflow-x:auto; margin:var(--dp-space-5) 0;}
.cost-table table{width:100%; border-collapse:collapse;}
.cost-table th, .cost-table td{border:1px solid var(--dp-border-soft); padding:var(--dp-space-3); text-align:left;}
.cost-table th{background:var(--dp-bg-warm); font-family:var(--dp-font-display); font-weight:600;}
.cost-table td{font-family:var(--dp-font-mono),var(--dp-font-body); font-variant-numeric:tabular-nums;}
.cost-table tbody tr:nth-child(even){background:var(--dp-bg-soft);}
.cost-table caption{text-align:left; font-size:13px; color:var(--dp-text-muted); margin-bottom:var(--dp-space-2); font-family:var(--dp-font-mono),var(--dp-font-body);}

/* ---- before/after ---- */
.dp-ba{display:grid; grid-template-columns:1fr 1fr; gap:var(--dp-space-4); margin:var(--dp-space-5) 0;}
.dp-ba figure{margin:0; position:relative;}
.ba-label{position:absolute; top:8px; left:8px; z-index:2; background:var(--dp-primary-d); color:#fff; font-size:12px; padding:2px 10px; font-weight:700;}
@media (max-width:768px){ .dp-ba{grid-template-columns:1fr;} }

/* ---- FAQ ---- */
.faq-list{margin-top:var(--dp-space-5);}
.faq-item{border-bottom:1px solid var(--dp-border-soft);}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:var(--dp-space-4) 0; font-weight:700; font-size:1rem; cursor:pointer; min-height:52px;}
.faq-a{max-height:0; overflow:hidden; transition:max-height .3s var(--dp-ease);}
.faq-a p{padding-bottom:var(--dp-space-4); color:var(--dp-text-sub);}

/* ---- service grid / related grid ---- */
.dp-nseo-grid__list, section[data-comp="related-grid"] ul{
  list-style:none; margin:var(--dp-space-6) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr); gap:var(--dp-space-5);
  align-items:stretch; grid-auto-rows:1fr;
}
.dp-nseo-grid__list li, section[data-comp="related-grid"] li{display:flex;}
.dp-nseo-grid__list a, section[data-comp="related-grid"] a{
  display:flex; flex-direction:column; height:100%; width:100%; min-width:0;
  text-decoration:none; color:var(--dp-text); border:1px solid var(--dp-border-soft);
  transition:transform .2s var(--dp-ease);
}
.dp-nseo-grid__list a:hover, section[data-comp="related-grid"] a:hover{transform:translateY(-4px);}
.dp-nseo-grid__list h3, section[data-comp="related-grid"] h3{padding:0 var(--dp-space-4); margin-top:var(--dp-space-3);}
.dp-nseo-card__more, .related-card__more{margin-top:auto; padding:0 var(--dp-space-4) var(--dp-space-4); color:var(--dp-accent); font-weight:700; font-size:.9rem;}
.dp-nseo-card__cta{display:inline-block; background:var(--dp-primary); color:#fff; padding:6px 14px; margin:var(--dp-space-4) var(--dp-space-4) 0; font-weight:700; font-size:.85rem; align-self:flex-start;}
@media (max-width:1024px){ .dp-nseo-grid__list, section[data-comp="related-grid"] ul{grid-template-columns:repeat(2,1fr);} }
@media (max-width:768px){ .dp-nseo-grid__list, section[data-comp="related-grid"] ul{grid-template-columns:1fr;} }

/* ---- bottom CTA banner ---- */
.dp-cta-banner{background:var(--dp-bg-dark); color:#fff; max-width:100%;}
.dp-cta-banner--split{display:grid; grid-template-columns:1fr 1fr; gap:var(--dp-space-7); align-items:center; padding:var(--dp-sec-pad) var(--dp-gutter);}
.dp-cta-banner__body h2, .dp-cta-banner__body p, .dp-cta-banner__body small{color:#fff;}
.dp-cta-banner__actions{display:flex; gap:var(--dp-space-3); flex-wrap:wrap; margin:var(--dp-space-5) 0;}
.dp-cta-banner .dp-cta--outline{color:#fff; border-color:#fff;}
.dp-cta-banner small{opacity:.8;}
@media (max-width:768px){ .dp-cta-banner--split{grid-template-columns:1fr;} }

/* ---- back to main ---- */
.dp-back-main{max-width:var(--dp-container); margin:0 auto; padding:0 var(--dp-gutter) var(--dp-space-6);}
.dp-back-main a{color:var(--dp-text-muted); text-decoration:underline;}

/* ---- contact page ---- */
.contact-actions{display:grid; grid-template-columns:1fr 1fr; gap:var(--dp-space-5); align-items:stretch;}
.contact-card{
  min-height:360px; padding:48px 44px; display:flex; flex-direction:column; height:100%;
  text-decoration:none; color:#fff; background:var(--dp-primary); border:1px solid var(--dp-border-soft);
}
.contact-card--sms{background:var(--dp-primary-d);}
.contact-card__label{font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.85rem; opacity:.85;}
.contact-phone__num{
  font-family:var(--dp-font-mono); font-size:clamp(2.2rem,6.4vw,3.6rem); font-weight:600; letter-spacing:-0.01em; line-height:1.1;
  white-space:nowrap; word-break:keep-all; margin:var(--dp-space-4) 0;
}
.contact-card__big{font-size:clamp(1.8rem,5vw,2.6rem); font-weight:800; margin:var(--dp-space-4) 0;}
.contact-card__cta{margin-top:auto; font-weight:700;}
@media (max-width:480px){ .contact-phone__num{font-size:clamp(2rem,9vw,2.8rem);} }
@media (max-width:768px){ .contact-actions{grid-template-columns:1fr;} }

/* ---- footer ---- */
.site-footer{background:var(--dp-bg-dark); color:#fff; padding-block:var(--dp-space-8); margin-top:var(--dp-space-9);}
.ft-inner{max-width:var(--dp-container); margin-inline:auto; padding-inline:var(--dp-gutter);
  display:grid; grid-template-columns:1.6fr 1fr; gap:var(--dp-space-7); align-items:start; text-align:left;}
.ft-cluster__title{font-size:15px; font-weight:700; letter-spacing:.02em; margin-bottom:var(--dp-space-3); color:#fff;}
.ft-cluster ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--dp-space-2);}
.ft-cluster a{color:#fff;}
.ft-bottom{max-width:var(--dp-container); margin-inline:auto; padding-inline:var(--dp-gutter);
  margin-top:var(--dp-space-7); padding-top:var(--dp-space-4); border-top:1px solid rgba(255,255,255,.15);}
.ft-bottom small{opacity:.7;}
@media (max-width:768px){ .ft-inner{grid-template-columns:1fr; gap:var(--dp-space-6);} }

/* ---- floating CTA ---- */
.dp-float-cta{position:fixed; right:var(--dp-space-4); bottom:calc(var(--sticky-h) + var(--dp-space-4) + env(safe-area-inset-bottom)); z-index:80;}
.dp-float-cta__link{width:64px; height:64px; display:flex; align-items:center; justify-content:center;
  background:var(--dp-primary-d); color:#fff; border-radius:0; text-decoration:none;
  box-shadow:0 8px 24px rgba(0,0,0,.25);}