/* ============================================================
   범표집수리 — 디자인 시스템
   팔레트: C01 Quiet Slate (딥블루 #2B5F8B + 웜코퍼 #C8956D · 클린 오프화이트 배경)
============================================================ */
:root{
  --bg:#FAFAF9; --sub:#F4F4F2; --surface:#FFFFFF;
  --text:#1C2434; --muted:#6B7280;
  --primary:#2B5F8B; --primary-deep:#21496C;
  --accent:#C8956D; --accent-soft:#D6A886;
  --border:#E5E5E2; --border-soft:rgba(43,95,139,.10);

  --font:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --fs-xs:13px; --fs-sm:14.5px; --fs-base:16px; --fs-lead:18px;
  --sp-2xs:4px; --sp-xs:8px; --sp-sm:12px; --sp-md:16px; --sp-lg:24px;
  --sp-xl:32px; --sp-2xl:48px; --sp-3xl:72px; --sp-4xl:104px;
  --sec-pad:clamp(56px,9vw,104px);
  --radius:14px; --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(28,36,52,.04), 0 4px 14px rgba(28,36,52,.05);
  --shadow-md:0 8px 20px rgba(28,36,52,.08), 0 18px 44px rgba(28,36,52,.09);
  --shadow-lg:0 28px 64px rgba(28,36,52,.16);
  --ease:cubic-bezier(.22,1,.36,1);
  --trans:.35s;
}
*{box-sizing:border-box}
button,input{font-family:inherit; margin:0}
html{scroll-behavior:smooth}
body{
  margin:0; font-family:var(--font);
  background:var(--bg); color:var(--text); font-size:var(--fs-base); line-height:1.75;
  font-weight:400; letter-spacing:-.01em; word-break:keep-all; overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; text-rendering:optimizeLegibility;
}
img{max-width:100%; display:block}
a{color:inherit; text-decoration:none; transition:color var(--trans) var(--ease)}
::selection{background:var(--accent); color:#fff}
.wrap{max-width:1180px; margin:0 auto; padding:0 var(--sp-lg)}
.prose{max-width:70ch; margin:0 auto}

/* Header */
.site-header{
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,250,249,.82); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border-soft);
  transition:box-shadow var(--trans) var(--ease), background var(--trans) var(--ease);
}
.site-header .bar{display:flex; align-items:center; justify-content:space-between; height:72px}
.logo{display:flex; align-items:center; gap:var(--sp-xs)}
.logo-mark{display:block; flex-shrink:0}
.logo-wordmark{display:flex; flex-direction:column; line-height:1.15}
.logo-brand-name{font-size:17px; font-weight:800; letter-spacing:-.03em; color:var(--primary)}
.logo-sub{font-size:10px; font-weight:500; letter-spacing:.04em; color:var(--muted)}
.sr-only{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0}
.header-actions{display:flex; align-items:center; gap:var(--sp-md)}
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--sp-xs);
  min-height:52px; padding:0 var(--sp-xl); border-radius:999px; font-weight:600;
  font-size:var(--fs-base); letter-spacing:-.01em; border:1.5px solid transparent; cursor:pointer;
  transition:transform var(--trans) var(--ease), box-shadow var(--trans) var(--ease), background var(--trans) var(--ease), color var(--trans) var(--ease), border-color var(--trans) var(--ease);
}
.header-actions .btn{min-height:44px; padding:0 var(--sp-lg); font-size:var(--fs-sm)}
.btn-primary{background:var(--primary); color:#fff}
.btn-primary:hover{background:var(--primary-deep); transform:translateY(-2px); box-shadow:var(--shadow-md)}
.btn-accent{background:var(--accent); color:#fff; box-shadow:0 6px 18px rgba(200,149,109,.28)}
.btn-accent:hover{background:var(--accent-soft); transform:translateY(-2px); box-shadow:0 10px 28px rgba(200,149,109,.36)}
.btn-outline{background:transparent; color:var(--primary); border-color:var(--border)}
.btn-outline:hover{background:var(--primary); color:#fff; border-color:var(--primary); transform:translateY(-2px)}
.hamburger{display:none; background:none; border:0; font-size:24px; color:var(--primary); cursor:pointer}
.mobile-nav{display:none; position:fixed; inset:72px 0 0 0; background:var(--bg); z-index:99; padding:var(--sp-lg)}
.mobile-nav.open{display:block}
.mobile-nav a{display:block; padding:var(--sp-md) 0; border-bottom:1px solid var(--border); font-weight:600}

@media (max-width:768px){
  .header-cta{display:none}
  .hamburger{display:block}
  .logo-sub{display:none}
}

main{padding-top:72px}

section{padding:var(--sec-pad) 0}
.section-flush{padding-top:0}
.section-tight{padding-top:var(--sp-lg)}
.bg-sub{background:var(--sub)}
h1,h2,h3{line-height:1.3; letter-spacing:-.025em}
h1{font-size:clamp(28px,5vw,44px); margin:0 0 var(--sp-sm); font-weight:600}
h2{font-size:clamp(24px,3.6vw,33px); margin:0 0 var(--sp-md); font-weight:600}
h3{font-size:clamp(18px,3vw,20px); margin:0 0 var(--sp-xs); font-weight:700}
.section-lead{font-size:var(--fs-lead); line-height:1.7; color:var(--muted); margin-bottom:var(--sp-2xl); max-width:62ch; font-weight:400}
.kicker{display:inline-flex; align-items:center; gap:var(--sp-xs); font-size:11px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:var(--sp-md)}
.kicker::before{content:""; width:22px; height:1.5px; background:currentColor; display:inline-block; opacity:.85}
.meta-note{color:var(--muted); font-size:var(--fs-sm); margin-top:var(--sp-xs)}
.chip{display:inline-block; padding:var(--sp-xs) var(--sp-md); border:1px solid var(--border); border-radius:999px; font-size:var(--fs-sm); background:var(--surface); transition:all var(--trans) var(--ease)}
.chip:hover{border-color:var(--primary); color:var(--primary); transform:translateY(-1px)}
.chip-row{display:flex; flex-wrap:wrap; gap:var(--sp-xs)}
.sitemap-group{margin-top:var(--sp-lg)}
.footer-brand{font-weight:700; color:var(--text)}

/* Grid - 고정 열, auto-fit 사용 안 함 */
.grid-3{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--sp-lg)}
.grid-2{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-lg)}
@media (max-width:900px){
  .grid-3{grid-template-columns:repeat(2,1fr); gap:var(--sp-md)}
}
@media (max-width:520px){
  .grid-3{grid-template-columns:repeat(2,1fr); gap:var(--sp-sm)}
  .grid-2{grid-template-columns:repeat(2,1fr); gap:var(--sp-sm)}
}

.card{
  background:var(--surface); border:1px solid var(--border); border-radius:var(--radius);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow-sm);
  transition:transform var(--trans) var(--ease), box-shadow var(--trans) var(--ease);
}
a.card:hover{transform:translateY(-5px); box-shadow:var(--shadow-md)}
.card img{aspect-ratio:4/3; object-fit:cover; width:100%; transition:transform .6s var(--ease)}
a.card:hover img{transform:scale(1.05)}
.card .card-body{padding:var(--sp-lg)}
.card .card-body h3{font-size:16px; margin-bottom:var(--sp-2xs)}
.card .card-body p{margin:0; color:var(--muted); font-size:var(--fs-sm)}

.gallery-item{position:relative; border-radius:var(--radius); overflow:hidden; cursor:pointer; box-shadow:var(--shadow-sm)}
.gallery-item img{aspect-ratio:3/4; object-fit:cover; width:100%; transition:transform .6s var(--ease)}
.gallery-item:hover img{transform:scale(1.06)}
.gallery-item .cap{position:absolute; left:0; right:0; bottom:0; padding:var(--sp-sm) var(--sp-md); background:linear-gradient(transparent,rgba(0,0,0,.65)); color:#fff; font-size:var(--fs-xs); font-weight:500}

.faq-item{border-bottom:1px solid var(--border)}
.faq-q{width:100%; text-align:left; background:none; border:0; padding:var(--sp-lg) 0; font-weight:600; font-size:var(--fs-base); cursor:pointer; display:flex; justify-content:space-between; gap:var(--sp-sm); color:var(--text); transition:color var(--trans) var(--ease)}
.faq-q:hover{color:var(--primary)}
.faq-a{max-height:0; overflow:hidden; color:var(--muted); font-size:var(--fs-sm); transition:max-height var(--trans) var(--ease)}
.faq-item.open .faq-a{max-height:400px; padding-bottom:var(--sp-lg)}
.faq-q .mark{color:var(--accent); font-weight:700; display:inline-block; transition:transform var(--trans) var(--ease); flex-shrink:0}
.faq-item.open .faq-q .mark{transform:rotate(45deg)}

.cta-section{background:var(--primary); color:#fff; text-align:center; position:relative; overflow:hidden}
.cta-section::after{content:""; position:absolute; inset:0; background:radial-gradient(ellipse at 50% -20%, rgba(200,149,109,.18), transparent 60%); pointer-events:none}
.cta-section .wrap{position:relative; z-index:1}
.cta-section h2{color:#fff}
.cta-section p{color:rgba(255,255,255,.72)}

.hero-sub{padding:clamp(40px,6vw,64px) 0 var(--sp-xl); text-align:center}
.hero-sub--main{padding:clamp(40px,6vw,72px) 0 var(--sp-xs)}
.hero-sub--error{padding:var(--sp-4xl) 0}
.btn-row{display:flex; gap:var(--sp-sm); justify-content:center; margin-top:var(--sp-lg); flex-wrap:wrap}

/* Footer */
.site-footer{background:var(--primary-deep); color:rgba(255,255,255,.7); border-top:1px solid rgba(255,255,255,.08); padding:var(--sp-3xl) 0 var(--sp-lg)}
.site-footer .footer-brand{color:#fff}
.footer-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:var(--sp-2xl)}
.footer-grid h4{margin:0 0 var(--sp-md); font-size:var(--fs-xs); font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--accent-soft)}
.footer-grid a{display:block; padding:var(--sp-2xs) 0; font-size:var(--fs-sm); color:rgba(255,255,255,.7)}
.footer-grid a:hover{color:#fff}
.footer-grid p{color:rgba(255,255,255,.6)}
.footer-grid .phone-num,.footer-grid .ph-num{color:#fff}
.footer-bottom{margin-top:var(--sp-2xl); padding-top:var(--sp-lg); border-top:1px solid rgba(255,255,255,.12); font-size:var(--fs-xs); color:rgba(255,255,255,.5)}
@media (max-width:768px){
  .footer-grid{grid-template-columns:1fr; gap:var(--sp-xl)}
}

/* Floating */
.floating{position:fixed; right:var(--sp-lg); bottom:var(--sp-lg); z-index:90; display:flex; flex-direction:column; gap:var(--sp-sm); align-items:flex-end}
.fab{width:58px; height:58px; border-radius:999px; display:flex; align-items:center; justify-content:center; box-shadow:0 8px 24px rgba(28,36,52,.22); font-size:var(--fs-xs); font-weight:700; transition:transform var(--trans) var(--ease), box-shadow var(--trans) var(--ease)}
.fab:hover{transform:translateY(-3px) scale(1.04)}
.fab-top{background:var(--surface); color:var(--primary); border:1px solid var(--border); opacity:0; pointer-events:none; transition:opacity var(--trans), transform var(--trans) var(--ease)}
.fab-top.show{opacity:1; pointer-events:auto}

/* Lightbox */
.lightbox{position:fixed; inset:0; background:rgba(28,36,52,.9); z-index:200; display:none; align-items:center; justify-content:center; padding:var(--sp-lg); backdrop-filter:blur(4px)}
.lightbox.open{display:flex}
.lightbox img{max-width:100%; max-height:90vh; border-radius:var(--radius)}

.badge{display:inline-block; padding:var(--sp-2xs) var(--sp-sm); border-radius:999px; background:var(--accent); color:#fff; font-size:var(--fs-xs); font-weight:700}
.breadcrumb{font-size:var(--fs-xs); color:var(--muted); padding:var(--sp-md) 0}
.breadcrumb a{color:var(--muted)}
.breadcrumb a:hover{color:var(--primary)}

/* ============================================================
   메인페이지 전용 에디토리얼 스타일
   (참고: cnd.techhomecity.com — 레이아웃/타이포만 차용, 색상은 자체 팔레트)
============================================================ */
.serif-em{font-family:Georgia,'Times New Roman',serif; font-style:italic; color:var(--accent); font-weight:400; letter-spacing:0}

/* Split hero */
[id]{scroll-margin-top:88px}
.hero{padding:clamp(48px,8vw,104px) 0 clamp(48px,7vw,88px); overflow:hidden}
.hero__grid{display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center}
.hero__content{max-width:560px}
.hero__title{font-weight:300; letter-spacing:-.04em; line-height:1.08; font-size:clamp(40px,6.4vw,72px); margin:0 0 var(--sp-lg)}
.hero__lead{font-size:clamp(16px,1.4vw,19px); line-height:1.7; color:var(--muted); margin:0 0 var(--sp-xl); max-width:44ch}
.hero__features{list-style:none; margin:0 0 var(--sp-xl); padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-sm) var(--sp-xl)}
.hero__features li{position:relative; padding-left:24px; font-size:var(--fs-sm); font-weight:600; color:var(--text)}
.hero__features li::before{content:""; position:absolute; left:2px; top:4px; width:6px; height:11px; border:solid var(--accent); border-width:0 2px 2px 0; transform:rotate(45deg)}
.hero__cta{justify-content:flex-start; margin-top:0}
.hero__media{position:relative}
.hero__media::before{content:""; position:absolute; right:-22px; bottom:-22px; width:60%; height:66%; background:var(--accent); opacity:.14; border-radius:var(--radius-lg); z-index:0}
.hero__img{position:relative; z-index:1; aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.hero__img img{width:100%; height:100%; object-fit:cover}
@media (max-width:860px){
  .hero__grid{grid-template-columns:1fr; gap:var(--sp-2xl)}
  .hero__content{max-width:none}
  .hero__media::before{display:none}
  .hero__img{aspect-ratio:16/10; max-height:440px}
}

.section-editorial h2{font-weight:300}
.section-editorial .kicker{margin-bottom:var(--sp-lg)}

/* 시공 사례 하이라이트 (Before/After 슬라이더 + 설명, 2단 레이아웃) */
.case-block{padding:var(--sec-pad) 0}
.case-block--alt{background:var(--sub)}
.case-grid{display:grid; grid-template-columns:minmax(0,420px) 1fr; gap:clamp(32px,5vw,72px); align-items:center}
.case-grid--reverse .case-media{order:2}
.case-media{width:100%}
.case-label{display:flex; align-items:center; gap:var(--sp-sm); margin-bottom:var(--sp-lg)}
.case-divider{display:inline-block; width:40px; height:1px; background:var(--border)}
.case-tag{font-size:var(--fs-sm); font-weight:600}
.case-desc__title{font-size:clamp(22px,3vw,32px); font-weight:300; letter-spacing:-.03em; line-height:1.3; color:var(--text); margin-bottom:var(--sp-md)}
.case-desc__body{font-size:var(--fs-sm); color:var(--muted); line-height:2}
@media (max-width:800px){
  .case-grid, .case-grid--reverse{grid-template-columns:1fr; gap:var(--sp-xl)}
  .case-grid--reverse .case-media{order:0}
  .case-media{max-width:420px; margin-inline:auto}
}

/* Before/After 비교 슬라이더 (가운데 바 드래그 → 시공 전/후) */
.ba-slider{position:relative; aspect-ratio:3/4; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg); touch-action:none; user-select:none; cursor:ew-resize; --pos:50%; outline:none}
.ba-slider:focus-visible{box-shadow:var(--shadow-lg), 0 0 0 3px var(--accent)}
.ba-slider__img{position:absolute; inset:0}
.ba-slider__img img{width:100%; height:100%; object-fit:cover; display:block; pointer-events:none}
.ba-slider__img--before{clip-path:inset(0 calc(100% - var(--pos)) 0 0)}
.ba-slider__handle{position:absolute; top:0; bottom:0; left:var(--pos); width:2px; background:#fff; transform:translateX(-50%); pointer-events:none; box-shadow:0 0 0 1px rgba(0,0,0,.12)}
.ba-slider__grip{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:44px; height:44px; border-radius:999px; background:#fff; color:var(--primary); box-shadow:var(--shadow-md); display:flex; align-items:center; justify-content:center}
.ba-slider__label{position:absolute; bottom:var(--sp-md); padding:5px var(--sp-sm); font-size:11px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#fff; border-radius:999px; pointer-events:none}
.ba-slider__label--before{left:var(--sp-md); background:rgba(0,0,0,.5)}
.ba-slider__label--after{right:var(--sp-md); background:var(--accent)}

/* 시공사례 마퀴 (가로 스크롤 스트립, 기존 사진 재사용) */
.marquee-section{padding:var(--sec-pad) 0; overflow:hidden}
.marquee-head{text-align:center; margin-bottom:var(--sp-2xl); padding:0 var(--sp-lg)}
.marquee-title{font-size:clamp(24px,3vw,34px); font-weight:300; letter-spacing:-.03em; color:var(--text)}
.marquee-container{position:relative; width:100%; overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.marquee-track{display:flex; gap:var(--sp-sm); width:max-content; animation:marquee-scroll 45s linear infinite}
.marquee-track:hover{animation-play-state:paused}
@keyframes marquee-scroll{ 0%{transform:translateX(0)} 100%{transform:translateX(-50%)} }
.marquee-item{flex-shrink:0; width:260px; position:relative; overflow:hidden; border-radius:var(--radius)}
.marquee-item img{width:260px; height:186px; object-fit:cover; display:block; filter:grayscale(12%); transition:filter .5s, transform .6s var(--ease)}
.marquee-item:hover img{filter:grayscale(0); transform:scale(1.05)}
.marquee-item__label{position:absolute; bottom:0; left:0; right:0; padding:var(--sp-sm) var(--sp-md); background:linear-gradient(transparent,rgba(0,0,0,.6)); color:#fff; font-size:11px; font-weight:600}
@media (prefers-reduced-motion:reduce){ .marquee-track{animation:none} }

/* 핵심 원칙 2단 구성 (텍스트 + 이미지) */
.core-2col{display:grid; grid-template-columns:1fr 1fr; gap:clamp(40px,6vw,80px); align-items:center}
.core-2col__media{position:relative}
.core-2col__img{aspect-ratio:4/5; border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-lg)}
.core-2col__img img{width:100%; height:100%; object-fit:cover}
.core-2col__badge{position:absolute; bottom:-18px; left:-18px; background:var(--accent); padding:var(--sp-md) var(--sp-lg); border-radius:var(--radius); box-shadow:var(--shadow-md)}
.core-2col__badge-en{color:#fff; font-size:20px; font-weight:300; font-family:Georgia,'Times New Roman',serif; font-style:italic; line-height:1}
.core-2col__badge-sub{color:rgba(255,255,255,.85); font-size:9px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin-top:var(--sp-xs)}
@media (max-width:900px){
  .core-2col{grid-template-columns:1fr}
  .core-2col__badge{display:none}
}
.core-2col .principle-list{gap:var(--sp-lg)}

/* 원칙 리스트 */
.principle-list{display:flex; flex-direction:column; gap:var(--sp-xl)}
.principle{display:flex; gap:var(--sp-md); align-items:flex-start}
.principle__num{font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:24px; color:var(--accent); opacity:.55; flex-shrink:0; margin-top:2px; line-height:1}
.principle__title{font-size:17px; font-weight:700; margin-bottom:var(--sp-2xs); color:var(--text)}
.principle__desc{font-size:var(--fs-sm); color:var(--muted); line-height:1.85}

/* 진행 단계 */
.step-list{display:flex; flex-direction:column}
.step-row{display:flex; gap:var(--sp-lg); align-items:flex-start; padding:var(--sp-lg) 0; border-bottom:1px solid var(--border)}
.step-row:last-child{border-bottom:none}
.step-row__num{
  flex-shrink:0; width:46px; height:46px; border-radius:var(--radius);
  background:var(--primary); color:var(--accent-soft);
  display:flex; align-items:center; justify-content:center;
  font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:17px;
}
.step-row__title{font-size:16px; font-weight:700; margin-bottom:var(--sp-2xs); color:var(--text)}
.step-row__desc{font-size:var(--fs-sm); color:var(--muted); line-height:1.85}

/* 다크 섹션 오버라이드 */
.dark-section{background:var(--primary); color:#fff}
.dark-section .kicker{color:var(--accent-soft)}
.dark-section h2,.dark-section h3{color:#fff}
.dark-section .section-lead{color:rgba(255,255,255,.62)}
.dark-section .card{background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); box-shadow:none}
.dark-section a.card:hover{background:rgba(255,255,255,.09); box-shadow:0 16px 44px rgba(0,0,0,.28)}
.dark-section .card .card-body h3{color:#fff}
.dark-section .card .card-body p{color:rgba(255,255,255,.6)}
.dark-section .principle__title{color:#fff}
.dark-section .principle__desc{color:rgba(255,255,255,.6)}