/* ============================================================
   아웃크래프트 보도블럭 | style.css  (grps layout)
   --cream:#F7F3EE  --sand:#EDE5D8  --accent:#5A7F5C  --primary:#4D3319
   ============================================================ */

/* ── 0. Reset ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --cream:   #F7F3EE;
  --sand:    #EDE5D8;
  --ink:     #1a1208;
  --inksoft: #5a4a38;
  --accent:  #5A7F5C;
  --accent-rgb: 90,127,92;
  --primary: #4D3319;
  --primary-dark: #3a2713;
  --rule:    #D9CBB4;
  --white:   #fff;
  --ff:      'Pretendard Variable',Pretendard,'Noto Sans KR',-apple-system,BlinkMacSystemFont,sans-serif;
  --ff-num:  'Manrope','Inter','Pretendard Variable',sans-serif;
  --max:     1120px;
}
html,body{
  background:var(--cream);color:var(--ink);
  font-family:var(--ff);-webkit-font-smoothing:antialiased;
  word-break:keep-all;overflow-wrap:break-word;overflow-x:hidden;
}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
address{font-style:normal}
button{cursor:pointer;border:none;background:none;font-family:inherit}

/* ── 1. Typography Utilities ── */
.kicker{
  font-family:var(--ff-num);font-weight:500;
  letter-spacing:.22em;text-transform:uppercase;
  font-size:11px;color:var(--inksoft);display:block;margin-bottom:14px;
}
.h-display{
  font-weight:700;letter-spacing:-.035em;line-height:1.04;
  word-break:keep-all;overflow-wrap:break-word;font-family:var(--ff);
}
.num-label{
  font-family:var(--ff-num);font-weight:400;
  color:var(--accent);font-size:42px;line-height:1;letter-spacing:.02em;
  display:block;margin-bottom:16px;
}
.dot-rule{
  display:inline-block;width:5px;height:5px;border-radius:50%;
  background:var(--accent);margin:0 8px;vertical-align:middle;
}
.rule-thin{border-top:1px solid var(--rule)}
.sec-sub{margin-top:14px;color:var(--inksoft);font-size:.97rem;line-height:1.75;max-width:520px;font-weight:400}

/* ── 2. Buttons ── */
.btn-primary{
  background:var(--primary);color:var(--cream);
  font-family:var(--ff);font-weight:600;font-size:.88rem;
  padding:14px 28px;border:none;cursor:pointer;
  border-radius:9999px;display:inline-block;
  letter-spacing:.02em;transition:background .22s,transform .2s;
  white-space:nowrap;
}
.btn-primary:hover{background:var(--primary-dark);transform:translateY(-1px)}
.btn-ghost{
  border:1px solid var(--ink);color:var(--ink);
  font-family:var(--ff);font-weight:600;font-size:.88rem;
  padding:13px 28px;border-radius:9999px;display:inline-block;
  letter-spacing:.02em;transition:background .2s,color .2s;
  white-space:nowrap;
}
.btn-ghost:hover{background:var(--ink);color:var(--cream)}
.btn-accent{
  background:var(--accent);color:var(--white);
  font-family:var(--ff);font-weight:700;font-size:.88rem;
  padding:14px 28px;border-radius:9999px;display:inline-block;
  letter-spacing:.02em;transition:background .2s;white-space:nowrap;
}
.btn-accent:hover{background:#456044}

/* ── 3. Animations ── */
.reveal-up{opacity:0;transform:translateY(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-up.in{opacity:1;transform:translateY(0)}
.reveal-left{opacity:0;transform:translateX(-40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-left.in{opacity:1;transform:translateX(0)}
.reveal-right{opacity:0;transform:translateX(40px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.reveal-right.in{opacity:1;transform:translateX(0)}
.reveal-mask{clip-path:inset(0 100% 0 0);transition:clip-path 1.1s cubic-bezier(.77,0,.18,1)}
.reveal-mask.in{clip-path:inset(0 0 0 0)}
.scale-in{opacity:0;transform:scale(.94);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)}
.scale-in.in{opacity:1;transform:scale(1)}
.stagger-children > *{
  opacity:0;transform:translateY(28px);
  transition:opacity .8s cubic-bezier(.16,1,.3,1),transform .8s cubic-bezier(.16,1,.3,1);
  transition-delay:calc(var(--i,0) * .09s);
}
.stagger-children.in > *{opacity:1;transform:translateY(0)}
@media(prefers-reduced-motion:reduce){
  .reveal-up,.reveal-left,.reveal-right,.reveal-mask,.scale-in,.stagger-children > *{opacity:1!important;transform:none!important;clip-path:none!important;transition:none!important}
}

/* ── 4. Trust Badge ── */
.trust-badge{
  display:inline-flex;align-items:center;gap:5px;
  font-size:11px;font-weight:500;letter-spacing:.02em;
  background:rgba(var(--accent-rgb),.1);border:1px solid rgba(var(--accent-rgb),.28);
  color:var(--inksoft);padding:5px 11px;border-radius:9999px;
}
.trust-badge-dark{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(var(--accent-rgb),.35);
  color:rgba(247,243,238,.55);
}

/* ── 5. Skip link ── */
.skip-link{position:absolute;left:-999px;top:0;background:var(--primary);color:var(--cream);padding:8px 16px;z-index:999}
.skip-link:focus{left:0}

/* ── 6. Header ── */
.site-header{
  position:sticky;top:0;z-index:200;
  background:var(--cream);border-bottom:1px solid var(--rule);
}
.header-inner{
  max-width:var(--max);margin:0 auto;padding:0 20px;
  height:64px;display:flex;align-items:center;justify-content:space-between;gap:20px;
}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink)}
.logo-svg{width:36px;height:36px;flex-shrink:0;display:block}
.logo-texts{display:flex;flex-direction:column;gap:2px}
.logo-name{font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;line-height:1.15}
.logo-sub{font-size:11px;font-weight:400;color:var(--inksoft);letter-spacing:.04em}
.site-nav{display:flex;align-items:center;gap:28px}
.site-nav a{font-size:13px;font-weight:500;color:var(--inksoft);transition:color .2s;white-space:nowrap}
.site-nav a:hover{color:var(--ink)}
.nav-cta{
  background:var(--accent)!important;color:var(--white)!important;
  padding:9px 22px!important;border-radius:9999px!important;
  font-weight:700!important;font-size:13px!important;
  letter-spacing:.01em!important;
  box-shadow:0 2px 12px rgba(var(--accent-rgb),.32)!important;
  transition:box-shadow .2s,filter .2s!important;margin-left:4px!important;
}
.nav-cta:hover{filter:brightness(1.07)!important;box-shadow:0 4px 20px rgba(var(--accent-rgb),.48)!important}
.mob-btn{background:none;border:none;cursor:pointer;padding:6px 8px;line-height:1;font-size:22px;color:var(--ink);display:none}

/* ── 7. Mobile Menu ── */
.mob-menu{display:none;background:var(--cream);border-top:1px solid var(--rule);padding:8px 20px 14px}
.mob-menu a{display:block;padding:11px 0;color:var(--ink);font-size:15px;border-bottom:1px solid rgba(var(--accent-rgb),.12)}
.mob-menu a:last-child{border-bottom:none}
.mob-menu .mob-cta-link{
  display:block;text-align:center;padding:12px;margin-top:10px;
  background:var(--primary);color:var(--cream);border-radius:9999px;
  font-weight:600;font-size:.88rem;
}

/* ── 8. Breadcrumb ── */
.breadcrumb-bar{background:var(--sand);border-bottom:1px solid var(--rule);padding:10px 20px}
.breadcrumb-inner{max-width:var(--max);margin:0 auto;display:flex;gap:8px;align-items:center;font-size:12px;color:var(--inksoft)}
.breadcrumb-inner a{color:var(--inksoft);transition:color .2s}
.breadcrumb-inner a:hover{color:var(--ink)}
.breadcrumb-inner .sep{opacity:.4}

/* ── 9. HERO (메인페이지) ── */
.hero-wrap{position:relative;overflow:hidden;background:var(--cream)}
.hero-slideshow{position:absolute;inset:0;overflow:hidden;z-index:0;pointer-events:none}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.5s ease-in-out}
.hero-slide.active{opacity:.65}
.hero-overlay{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(90deg,rgba(247,243,238,.92) 0%,rgba(247,243,238,.68) 55%,rgba(247,243,238,.15) 100%);
}
.hero-inner{
  position:relative;z-index:2;
  max-width:var(--max);margin:0 auto;padding:72px 20px 80px;
  display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;
}
.hero-h1{font-size:clamp(2.8rem,6vw,5.2rem);font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.04;margin-bottom:20px}
.hero-sub{font-size:.97rem;color:var(--inksoft);line-height:1.85;margin-bottom:32px;max-width:420px;font-weight:400}
.hero-btns{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.hero-trust{display:flex;flex-wrap:wrap;row-gap:8px;column-gap:20px}
.hero-trust li{display:flex;align-items:center;font-size:12px;color:var(--inksoft);letter-spacing:.01em}
.hero-img-wrap{overflow:hidden;aspect-ratio:4/5;border-radius:2px;background:var(--sand);position:relative}
.hero-img-wrap img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 8s ease-out;transform:scale(1.05)}
.hero-img-wrap.in img{transform:scale(1)}

/* ── 10. Marquee ── */
.marquee-sec{background:var(--cream);padding:56px 0 0;border-top:1px solid var(--rule)}
.marquee-header{max-width:var(--max);margin:0 auto;padding:0 20px 28px}
.marquee{
  overflow:hidden;width:100%;
  mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.marquee-track{display:flex;gap:14px;width:max-content;animation:mslide 50s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-item{flex:0 0 auto;width:280px;height:210px;overflow:hidden;border-radius:2px;background:var(--sand)}
.marquee-item img{width:100%;height:100%;object-fit:cover}
@keyframes mslide{from{transform:translateX(0)}to{transform:translateX(calc(-50% - 7px))}}
@media(min-width:768px){.marquee-item{width:340px;height:255px}}

/* ── 11. Process Section ── */
.process-sec{background:var(--sand);padding:88px 20px;border-top:1px solid var(--rule)}
.process-inner{max-width:var(--max);margin:0 auto}
.process-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--rule);margin-top:52px}
a.step-card{display:block;color:inherit;text-decoration:none;transition:transform .25s ease}
.step-card{background:var(--sand);padding:36px 28px}
a.step-card:hover{background:var(--cream)}
.step-card h3{font-size:1.05rem;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.3}
.step-card p{font-size:.83rem;color:var(--inksoft);line-height:1.75;font-weight:400}
.step-link{display:inline-flex;align-items:center;gap:4px;margin-top:14px;font-family:var(--ff-num);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--accent)}

/* ── 12. Before/After Case Grid (메인 2x2) ── */
.case-sec{background:var(--cream);padding:88px 20px;border-top:1px solid var(--rule)}
.case-inner{max-width:var(--max);margin:0 auto}
.case-grid-ba{display:grid;grid-template-columns:repeat(2,1fr);gap:2px;margin-top:52px;background:var(--rule)}
.case-pair{background:var(--cream);padding:20px 20px 16px;display:grid;grid-template-columns:1fr 1fr;gap:8px}
.case-col{}
.case-pair-label{margin:0;font-family:var(--ff-num);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;padding:7px 10px;display:block}
.case-pair-label--before{background:var(--ink);color:rgba(247,243,238,.55)}
.case-pair-label--after{background:var(--accent);color:var(--white)}
.case-pair figure{overflow:hidden;border-radius:0 0 2px 2px}
.case-pair figure img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.case-pair:hover figure img{transform:scale(1.04)}
.case-caption{grid-column:1/-1;font-size:.78rem;color:var(--inksoft);margin-top:4px;line-height:1.5}

/* ── 13. Trust/Company Section ── */
.trust-sec{background:var(--sand);padding:88px 20px;border-top:1px solid var(--rule)}
.trust-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:5fr 7fr;gap:56px;align-items:center}
.trust-img{overflow:hidden;border-radius:2px;aspect-ratio:4/5;background:var(--cream)}
.trust-img img{width:100%;height:100%;object-fit:cover}
.trust-dl{display:grid;grid-template-columns:1fr 1fr;gap:20px 32px;margin-top:32px;font-size:.88rem}
.trust-dl dt{color:var(--inksoft);margin-bottom:4px;font-size:.78rem}
.trust-dl dd{font-weight:700;color:var(--ink);font-size:1.05rem;letter-spacing:-.01em}

/* ── 14. FAQ (native details/summary) ── */
.faq-sec{background:var(--sand);padding:80px 24px}
.faq-inner{max-width:760px;margin:0 auto}
details.faq-item{border-bottom:1px solid var(--rule);padding:18px 0}
details.faq-item:first-of-type{border-top:1px solid var(--rule)}
details.faq-item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:flex-start;gap:16px}
details.faq-item summary::-webkit-details-marker{display:none}
.faq-q{font-weight:600;font-size:15px;color:var(--ink);line-height:1.5;flex:1}
.faq-q .qmark{color:var(--accent);margin-right:6px}
.faq-chev{transition:transform .25s;font-size:12px;color:var(--accent);flex-shrink:0;margin-top:4px}
details.faq-item[open] .faq-chev{transform:rotate(180deg)}
.faq-a{margin-top:14px;color:var(--inksoft);font-size:13px;line-height:1.75;display:flex;gap:8px}
.faq-a .amark{color:var(--accent);flex-shrink:0}

/* ── 15. CTA Band ── */
.cta-band{background:var(--primary);padding:80px 24px;text-align:center;border-top:3px solid var(--accent)}
.cta-band h2{font-size:clamp(1.6rem,3vw,2.2rem);font-weight:700;color:var(--cream);margin-bottom:12px;letter-spacing:-.03em;line-height:1.1}
.cta-band p{color:rgba(247,243,238,.55);margin-bottom:28px;max-width:440px;margin-left:auto;margin-right:auto;font-weight:300;line-height:1.75;font-size:.93rem}
.cta-pair{display:flex;justify-content:center;align-items:center;gap:14px;flex-wrap:wrap}
.cta-trust-row{display:flex;justify-content:center;flex-wrap:wrap;gap:16px;margin-top:28px}
.cta-trust-row span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:rgba(247,243,238,.4)}
.btn-ghost-light{
  border:1px solid rgba(247,243,238,.35);color:var(--cream);
  font-family:var(--ff);font-weight:600;font-size:.88rem;
  padding:13px 28px;border-radius:9999px;display:inline-block;
  letter-spacing:.02em;transition:background .2s,color .2s;white-space:nowrap;
}
.btn-ghost-light:hover{background:rgba(247,243,238,.1)}

/* ── 16. NSEO Card Grid ── */
.nseo-sec{background:var(--cream);padding:80px 24px;border-top:1px solid var(--rule)}
.nseo-inner{max-width:var(--max);margin:0 auto}
.nseo-header{display:flex;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.nseo-header-link{font-family:var(--ff-num);font-size:12px;font-weight:500;letter-spacing:.04em;color:var(--accent);white-space:nowrap}
.nseo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:0;background:var(--rule);border:1px solid var(--rule)}
.nseo-card{overflow:hidden;background:var(--cream);transition:background .2s;display:block;color:inherit}
.nseo-card:hover{background:var(--sand)}
.nseo-card-img{aspect-ratio:16/9;overflow:hidden;background:var(--sand)}
.nseo-card-img img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.2,.7,.2,1)}
.nseo-card:hover .nseo-card-img img{transform:scale(1.04)}
.nseo-card-body{padding:16px}
.nseo-card-kicker{font-family:var(--ff-num);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:7px}
.nseo-card-title{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:5px;line-height:1.3}
.nseo-card-desc{font-size:.79rem;color:var(--inksoft);line-height:1.55;margin-bottom:10px;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
.nseo-card-link{font-family:var(--ff-num);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--accent)}

/* ── 17. Mobile Sticky CTA Bar ── */
.mobile-cta-bar{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:300;
  background:var(--cream);border-top:1px solid var(--rule);
  padding:10px 16px;
}
.mobile-cta-bar-inner{display:flex;gap:8px}
.mobile-cta-bar a{flex:1;text-align:center;padding:12px 8px;font-size:.84rem;font-weight:700;border-radius:9999px;display:block}
.mob-consult{background:var(--primary);color:var(--cream)!important}
.mob-phone{background:transparent;color:var(--ink)!important;border:1px solid var(--rule)}

/* ── 18. Footer ── */
.site-footer{background:var(--primary);color:rgba(247,243,238,.42);padding:60px 24px 28px;font-size:.82rem}
.footer-inner{max-width:var(--max);margin:0 auto}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:48px;margin-bottom:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.07)}
.footer-col h4{font-family:var(--ff-num);font-size:10px;font-weight:600;color:var(--accent);letter-spacing:.22em;text-transform:uppercase;margin-bottom:16px}
.footer-col p,.footer-col li{line-height:2.1;color:rgba(247,243,238,.42)}
.footer-col a{color:rgba(247,243,238,.42);transition:color .2s}
.footer-col a:hover{color:var(--accent)}
.footer-nav{display:flex;flex-direction:column}
.footer-nav a{padding:4px 0;border-bottom:1px solid rgba(255,255,255,.05);font-size:.79rem}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px;font-size:.71rem;color:rgba(247,243,238,.2)}

/* ── 19. Sub-Hero (서비스/지역 페이지 공통) ── */
.sub-hero{background:var(--cream);padding:72px 24px 60px;border-bottom:1px solid var(--rule)}
.sub-hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sub-hero h1{font-size:clamp(2rem,4vw,3.2rem);font-weight:700;color:var(--ink);letter-spacing:-.035em;line-height:1.04;margin-bottom:16px}
.sub-lead{color:var(--inksoft);font-size:.95rem;line-height:1.85;margin-bottom:28px;font-weight:400}
.sub-hero-img{overflow:hidden;aspect-ratio:4/3;border-radius:2px;background:var(--sand)}
.sub-hero-img img{width:100%;height:100%;object-fit:cover;transition:transform 8s ease-out;transform:scale(1.04)}
.sub-hero-img.in img{transform:scale(1)}
.sub-trust{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.microcopy{font-size:.73rem;color:var(--inksoft);margin-top:10px;letter-spacing:.01em}

/* ── 20. Feature Cards (서비스 페이지) ── */
.feat-sec{background:var(--cream);padding:80px 20px;border-top:1px solid var(--rule)}
.feat-inner{max-width:var(--max);margin:0 auto}
.feat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:1px solid var(--rule);background:var(--rule)}
.feat-card{background:var(--cream);padding:36px 28px;transition:background .2s;border-bottom:1px solid var(--rule)}
.feat-card:hover{background:var(--sand)}
.feat-card h3{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:10px}
.feat-card p{font-size:.83rem;color:var(--inksoft);line-height:1.75}

/* ── 21. Process Cards (서비스 페이지) ── */
.proc-sec{background:var(--sand);padding:80px 20px;border-top:1px solid var(--rule)}
.proc-inner{max-width:var(--max);margin:0 auto}
.proc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--rule);margin-top:52px;border:1px solid var(--rule)}
.proc-card{background:var(--sand);padding:32px 24px}
.proc-card h3{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:10px;line-height:1.3}
.proc-card p{font-size:.83rem;color:var(--inksoft);line-height:1.75}

/* ── 22. Scope/Comparison Grid ── */
.scope-sec{background:var(--cream);padding:80px 20px;border-top:1px solid var(--rule)}
.scope-inner{max-width:var(--max);margin:0 auto}
.scope-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.scope-col{background:var(--cream);padding:40px 32px}
.scope-col:last-child{background:var(--sand)}
.scope-col h3{font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid var(--accent)}
.scope-list li{display:flex;align-items:flex-start;gap:8px;font-size:.86rem;color:var(--ink);line-height:1.6;padding:9px 0;border-bottom:1px solid var(--rule)}
.scope-list li:last-child{border-bottom:none}
.scope-list li::before{content:'';display:block;width:5px;height:5px;background:var(--accent);flex-shrink:0;margin-top:7px;border-radius:50%}

/* ── 23. Region Area Grid ── */
.area-sec{background:var(--cream);padding:80px 20px;border-top:1px solid var(--rule)}
.area-inner{max-width:var(--max);margin:0 auto}
.area-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.area-chip{background:var(--cream);padding:18px 16px;text-align:center;font-size:.83rem;font-weight:600;color:var(--ink);line-height:1.4;transition:background .2s;display:block}
.area-chip:hover{background:var(--sand);color:var(--primary)}
.area-chip small{display:block;font-size:.7rem;font-weight:400;color:var(--inksoft);margin-top:3px}

/* ── 24. Photo Grid (지역 페이지) ── */
.photo-sec{background:var(--sand);padding:80px 20px;border-top:1px solid var(--rule)}
.photo-inner{max-width:var(--max);margin:0 auto}
.photo-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.photo-grid a{display:block;overflow:hidden;aspect-ratio:4/3;background:var(--sand)}
.photo-grid img{width:100%;height:100%;object-fit:cover;transition:transform .4s;display:block}
.photo-grid a:hover img{transform:scale(1.04)}

/* ── 25. Case Cards (지역 페이지) ── */
.cases-sec{background:var(--cream);padding:80px 20px;border-top:1px solid var(--rule)}
.cases-inner{max-width:var(--max);margin:0 auto}
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.case-card{background:var(--cream);display:flex;flex-direction:column;overflow:hidden;transition:background .2s}
.case-card:hover{background:var(--sand)}
.case-card-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.case-card-img img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .4s}
.case-card:hover .case-card-img img{transform:scale(1.04)}
.case-card-body{padding:24px 22px;flex:1}
.c-loc{font-family:var(--ff-num);font-size:.68rem;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.case-card-body h4{font-size:.93rem;font-weight:700;color:var(--ink);margin-bottom:6px;line-height:1.4}
.case-card-body p{font-size:.82rem;color:var(--inksoft);line-height:1.65}
.case-card-link{display:block;font-family:var(--ff-num);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--accent);margin-top:14px;padding:0 22px 20px}

/* ── 26. Case Detail Hero (dark) ── */
.case-hero{background:var(--primary);padding:64px 24px 52px;border-bottom:3px solid var(--accent)}
.case-hero-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr 1fr;gap:52px;align-items:center}
.case-hero-text .kicker{color:rgba(247,243,238,.5)}
.case-hero-text h1{font-size:clamp(2rem,4vw,3rem);font-weight:700;color:var(--cream);letter-spacing:-.035em;line-height:1.04;margin-bottom:16px}
.case-hero-text .sub-lead{color:rgba(247,243,238,.65);font-size:.95rem;line-height:1.85;margin-bottom:28px;font-weight:400}
.case-hero-img{overflow:hidden;aspect-ratio:3/4;border-radius:2px;background:var(--primary-dark)}
.case-hero-img img{width:100%;height:100%;object-fit:cover}
.case-hero-back{display:inline-block;font-size:.78rem;color:rgba(247,243,238,.4);margin-bottom:18px;transition:color .2s}
.case-hero-back:hover{color:var(--accent)}

/* ── 27. Before/After Compare (케이스 상세) ── */
.ba-sec{background:var(--cream);padding:72px 24px;border-top:1px solid var(--rule)}
.ba-inner{max-width:var(--max);margin:0 auto}
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:2px;background:var(--rule);border-radius:2px;overflow:hidden;margin-top:36px}
.ba-col{background:var(--sand);overflow:hidden}
.ba-label{padding:10px 16px;font-family:var(--ff-num);font-size:11px;font-weight:600;letter-spacing:.2em;text-transform:uppercase}
.ba-label--before{background:var(--ink);color:rgba(247,243,238,.55)}
.ba-label--after{background:var(--accent);color:var(--white)}
.ba-col img,.ba-img{width:100%;aspect-ratio:3/4;object-fit:cover;display:block}

/* ── 27-b. 현장 사진 갤러리 ── */
.site-photos-sec{background:var(--cream);padding:72px 24px;border-top:1px solid var(--rule)}
.site-photos-inner{max-width:var(--max);margin:0 auto}
.site-photos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:36px}
.site-photo-main{grid-column:1 / -1}
.site-photo-main img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block;border-radius:2px}
.site-photo-thumb img{width:100%;aspect-ratio:4/3;object-fit:cover;display:block;border-radius:2px}
@media(max-width:600px){.site-photos-grid{grid-template-columns:1fr 1fr}}

/* ── 28. Info Grid (케이스 상세) ── */
.info-sec{background:var(--sand);padding:72px 24px;border-top:1px solid var(--rule)}
.info-inner{max-width:var(--max);margin:0 auto}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0;background:var(--rule);margin-top:36px;border:1px solid var(--rule)}
.info-cell{background:var(--cream);padding:28px 32px}
.info-cell:nth-child(odd){background:var(--cream)}
.info-cell:nth-child(even){background:var(--sand)}
.info-cell dt{font-family:var(--ff-num);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.info-cell dd{font-size:.93rem;color:var(--ink);line-height:1.7;font-weight:500}

/* ── 29. Extra Image / Mid CTA ── */
.extra-img-sec{background:var(--cream);padding:72px 24px;border-top:1px solid var(--rule)}
.extra-img-inner{max-width:640px;margin:0 auto;text-align:center}
.extra-img-inner img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:2px}
.mid-cta-sec{background:var(--sand);padding:52px 24px;border-top:1px solid var(--rule);text-align:center}
.mid-cta-sec p{font-size:.95rem;color:var(--inksoft);margin-bottom:20px;line-height:1.75}

/* ── 30. Consult Page ── */
.consult-sec{background:var(--cream);padding:80px 24px;border-top:1px solid var(--rule)}
.consult-inner{max-width:var(--max);margin:0 auto}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.contact-card{background:var(--cream);padding:44px 36px}
.contact-card .c-label{font-family:var(--ff-num);font-size:.65rem;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--accent);margin-bottom:18px;display:block}
.contact-card h2{font-size:1.25rem;font-weight:700;color:var(--ink);margin-bottom:10px;letter-spacing:-.025em}
.contact-card .c-desc{font-size:.87rem;color:var(--inksoft);line-height:1.75;margin-bottom:28px}
.phone-num{font-family:var(--ff-num);font-size:2rem;font-weight:700;color:var(--ink);letter-spacing:-.04em;margin-bottom:28px;display:block}
.c-btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn-call{display:inline-flex;align-items:center;gap:8px;background:var(--accent);color:var(--white);font-weight:700;font-size:.92rem;padding:14px 28px;border-radius:9999px;transition:opacity .2s;white-space:nowrap}
.btn-sms{display:inline-flex;align-items:center;gap:8px;background:var(--primary);color:var(--cream);font-weight:700;font-size:.92rem;padding:14px 28px;border-radius:9999px;transition:opacity .2s;white-space:nowrap}
.btn-call:hover,.btn-sms:hover{opacity:.85}
.c-hint{font-size:.75rem;color:var(--inksoft);margin-top:18px;line-height:1.65}
.prep-card{background:var(--sand);padding:44px 36px}
.prep-card h3{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:20px}
.prep-list{display:flex;flex-direction:column;gap:0}
.prep-list li{display:flex;align-items:flex-start;gap:12px;font-size:.86rem;color:var(--ink);line-height:1.6;padding:11px 0;border-bottom:1px solid var(--rule)}
.prep-list li:last-child{border-bottom:none}
.prep-list li::before{content:'';display:block;width:5px;height:5px;background:var(--accent);flex-shrink:0;margin-top:8px;border-radius:50%}
.prep-note{margin-top:20px;padding:16px 18px;background:rgba(var(--accent-rgb),.07);border-left:3px solid var(--accent)}
.prep-note p{font-size:.83rem;color:var(--ink);line-height:1.65}
.promise-sec{background:var(--sand);padding:80px 24px;border-top:1px solid var(--rule)}
.promise-inner{max-width:var(--max);margin:0 auto}
.promise-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.promise-card{background:var(--cream);padding:36px 28px;text-align:center}
.promise-card:nth-child(even){background:var(--sand)}
.promise-card h3{font-size:.93rem;font-weight:700;color:var(--accent);margin-bottom:8px}
.promise-card p{font-size:.82rem;color:var(--inksoft);line-height:1.65}
.biz-info-sec{background:var(--cream);padding:80px 24px;border-top:1px solid var(--rule)}
.biz-info-inner{max-width:var(--max);margin:0 auto}
.biz-grid{display:grid;grid-template-columns:1fr 1fr;gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.biz-info{background:var(--cream);padding:40px 36px}
.biz-table{width:100%;border-collapse:collapse;font-size:.85rem;margin-top:16px}
.biz-table tr{border-bottom:1px solid var(--rule)}
.biz-table tr:last-child{border-bottom:none}
.biz-table th{padding:11px 0;font-weight:600;color:var(--inksoft);text-align:left;width:7em;vertical-align:top;font-size:.78rem}
.biz-table td{padding:11px 0;color:var(--ink);line-height:1.6}
.biz-hours{background:var(--sand);padding:40px 36px}
.biz-hours h3{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--rule)}
.hours-list li{display:flex;justify-content:space-between;font-size:.85rem;color:var(--ink);padding:9px 0;border-bottom:1px solid var(--rule)}
.hours-list li:last-child{border-bottom:none}
.hours-list .day{color:var(--inksoft)}
.hours-list .time{font-weight:600}

/* ── 31. Gallery page ── */
.gallery-page-sec{background:var(--cream);padding:80px 20px;border-top:1px solid var(--rule)}
.gallery-page-inner{max-width:var(--max);margin:0 auto}
.gallery-page-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;background:var(--rule);border:1px solid var(--rule);margin-top:40px}
.gallery-page-card{background:var(--cream);overflow:hidden;display:block;color:inherit;transition:background .2s}
.gallery-page-card:hover{background:var(--sand)}
.gallery-page-card:hover .gallery-page-img img{transform:scale(1.04)}
.gallery-page-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.gallery-page-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s;display:block}
.gallery-page-body{padding:16px 20px 22px}
.gallery-page-cat{font-family:var(--ff-num);font-size:10px;font-weight:500;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:6px}
.gallery-page-body h3{font-size:.9rem;font-weight:700;color:var(--ink);margin-bottom:4px;line-height:1.3}
.gallery-page-meta{font-size:.78rem;color:var(--inksoft)}
.gallery-page-link{font-family:var(--ff-num);font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--accent);display:block;margin-top:8px}
.empty-notice{text-align:center;color:var(--inksoft);padding:4rem;font-size:1rem}

/* ── 32. 404 Page ── */
.error-sec{min-height:60vh;display:flex;align-items:center;background:var(--cream)}
.error-inner{text-align:center;max-width:480px;margin:0 auto;padding:60px 24px}
.error-inner h1{font-size:clamp(1.6rem,4vw,2.5rem);font-weight:700;color:var(--ink);margin-bottom:1rem}
.error-inner p{color:var(--inksoft);margin-bottom:2rem}
.error-btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* ── 33. Responsive ── */
@media(max-width:900px){
  .hero-inner{grid-template-columns:1fr;padding:56px 20px 64px}
  .hero-img-wrap{display:none}
  .hero-overlay{background:linear-gradient(180deg,rgba(247,243,238,.92) 0%,rgba(247,243,238,.7) 100%)}
  .process-grid{grid-template-columns:repeat(2,1fr)}
  .trust-inner{grid-template-columns:1fr}
  .trust-img{display:none}
  .case-grid-ba{grid-template-columns:1fr}
  .sub-hero-inner{grid-template-columns:1fr}
  .sub-hero-img{display:none}
  .feat-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:repeat(2,1fr)}
  .scope-grid{grid-template-columns:1fr}
  .case-hero-inner{grid-template-columns:1fr}
  .case-hero-img{display:none}
  .info-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:repeat(3,1fr)}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .cases-grid{grid-template-columns:repeat(2,1fr)}
  .biz-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .promise-grid{grid-template-columns:1fr}
  .gallery-page-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .site-nav{display:none}
  .mob-btn{display:block}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column;align-items:flex-start}
  .mobile-cta-bar{display:block!important}
  body{padding-bottom:70px}
}
@media(max-width:640px){
  .ba-grid{grid-template-columns:1fr}
  .ba-label--before{order:1}.ba-img--before{order:2}.ba-label--after{order:3}.ba-img--after{order:4}
  .case-pair{grid-template-columns:1fr}
  .cases-grid{grid-template-columns:1fr}
  .area-grid{grid-template-columns:repeat(2,1fr)}
  .gallery-page-grid{grid-template-columns:1fr}
}
@media(max-width:600px){
  .process-grid{grid-template-columns:1fr}
  .proc-grid{grid-template-columns:1fr}
  .hero-h1{font-size:2.6rem}
}
@media(max-width:480px){
  .btn-primary,.btn-ghost,.btn-accent,.btn-ghost-light{width:100%;text-align:center;justify-content:center;display:block}
  .cta-band{padding:44px 16px}
  .c-btn-row{flex-direction:column}
  .btn-call,.btn-sms{justify-content:center}
  .hero-btns{flex-direction:column}
  .cta-pair{flex-direction:column;width:100%}
  .cta-pair > *{width:100%;text-align:center}
}

/* ═══════════════════════════════════════════════
   SITEMAP PAGE
   ═══════════════════════════════════════════════ */

/* ── Hero ── */
.sm-hero{
  background:var(--ink);
  padding:clamp(3.5rem,7vw,6rem) 0;
}
.sm-hero-inner{
  display:flex;align-items:flex-end;justify-content:space-between;
  gap:2.5rem;flex-wrap:wrap;
}
.sm-hero-text .kicker{color:rgba(90,127,92,.9)}
.sm-h1{
  font-size:clamp(2.2rem,5.5vw,4rem);
  font-weight:700;color:var(--cream);
  letter-spacing:-.04em;line-height:1.05;
  margin-bottom:.6rem;
}
.sm-sub{
  font-size:clamp(.88rem,1.1vw,.97rem);
  color:rgba(247,243,238,.5);font-weight:400;
}
.sm-hero-stats{
  display:flex;align-items:center;gap:2rem;flex-shrink:0;
}
.sm-stat{
  display:flex;flex-direction:column;align-items:center;gap:.25rem;
}
.sm-stat-num{
  font-family:var(--ff-num);font-size:clamp(2rem,4vw,3rem);
  font-weight:700;color:var(--cream);letter-spacing:-.03em;line-height:1;
}
.sm-stat-label{
  font-size:.72rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  color:rgba(247,243,238,.4);
}
.sm-stat-divider{
  width:1px;height:50px;
  background:rgba(247,243,238,.12);
}

/* ── Sticky Bar ── */
.sm-bar{
  position:sticky;top:64px;z-index:100;
  background:var(--cream);border-bottom:1px solid var(--rule);
  transition:box-shadow .25s;
}
.sm-bar.scrolled{box-shadow:0 4px 20px rgba(0,0,0,.08)}
.sm-bar-inner{
  display:flex;align-items:center;
  padding-top:.85rem;padding-bottom:.85rem;
}
.sm-filters{
  display:flex;align-items:center;gap:.5rem;flex-wrap:wrap;
}
.sm-filter{
  padding:.45rem 1.1rem;
  border:1.5px solid var(--rule);
  background:transparent;
  font-family:var(--ff);font-size:.8rem;font-weight:600;color:var(--inksoft);
  border-radius:9999px;
  cursor:pointer;
  transition:background .2s,border-color .2s,color .2s;
  white-space:nowrap;
}
.sm-filter:hover{border-color:var(--primary);color:var(--primary)}
.sm-filter.active{
  background:var(--primary);border-color:var(--primary);color:var(--cream);
}

/* ── Body ── */
.sm-body{padding-top:clamp(2.5rem,5vw,4rem)!important}
.sm-empty{
  text-align:center;padding:3rem 0;color:var(--inksoft);
  font-size:.95rem;
}
.sm-total-count{
  text-align:right;font-size:.82rem;color:var(--inksoft);
  margin-top:2.5rem;padding-top:1.25rem;
  border-top:1px solid var(--rule);
}
.sm-total-count strong{color:var(--ink)}

/* ── Category Sections ── */
.sm-cat-section{
  margin-bottom:clamp(2rem,4vw,3.5rem);
}
.sm-cat-header{
  display:flex;align-items:center;gap:1rem;
  padding-bottom:.85rem;
  border-bottom:2px solid var(--ink);
  margin-bottom:1.25rem;
}
.sm-cat-icon{
  width:36px;height:36px;
  background:var(--ink);color:var(--cream);
  font-family:var(--ff-num);font-size:.75rem;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;letter-spacing:0;
  border-radius:4px;
}
.sm-cat-info{display:flex;flex-direction:column;gap:.15rem;flex:1}
.sm-cat-title{
  font-size:clamp(1rem,1.6vw,1.2rem);font-weight:700;
  color:var(--ink);letter-spacing:-.02em;
}
.sm-cat-label{
  font-size:.72rem;color:var(--inksoft);font-weight:400;letter-spacing:.04em;
}
.sm-cat-count{
  font-family:var(--ff-num);font-size:.75rem;font-weight:600;
  color:var(--white);background:var(--inksoft);
  padding:.2rem .65rem;border-radius:9999px;flex-shrink:0;letter-spacing:.03em;
}

/* ── Link grid ── */
.sm-links{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:.5rem;
}
.sm-link-wrap{list-style:none}
.sm-link{
  display:flex;align-items:center;justify-content:space-between;
  gap:.75rem;padding:.8rem 1rem;
  background:var(--white);border:1px solid var(--rule);
  color:var(--ink);
  transition:background .2s,border-color .2s,color .2s,transform .2s;
  border-radius:2px;
}
.sm-link:hover{
  background:var(--ink);border-color:var(--ink);color:var(--cream);
  transform:translateY(-2px);
}
.sm-link-title{
  font-size:clamp(.82rem,.96vw,.9rem);font-weight:500;
  line-height:1.4;word-break:keep-all;
}
.sm-link-arrow{
  flex-shrink:0;opacity:.4;
  transition:opacity .2s,transform .2s;
}
.sm-link:hover .sm-link-arrow{opacity:1;transform:translateX(3px)}

/* ── Sitemap Responsive ── */
@media(max-width:900px){
  .sm-hero-inner{flex-direction:column;align-items:flex-start}
  .sm-hero-stats{align-self:flex-start}
}
@media(max-width:640px){
  .sm-filters{width:100%;overflow-x:auto;flex-wrap:nowrap;padding-bottom:.25rem}
  .sm-links{grid-template-columns:1fr 1fr}
  .sm-hero-stats{flex-direction:row}
}
@media(max-width:400px){
  .sm-links{grid-template-columns:1fr}
}

/* ═══════════════════════════════════════════════
   GUIDE PAGE SYSTEM
   ═══════════════════════════════════════════════ */

/* ── Layout base ── */
.container{max-width:var(--max);margin:0 auto;padding:0 clamp(16px,4vw,48px)}
.section{padding:clamp(60px,8vw,110px) 0}
.bg-cream{background:var(--cream)}
.bg-sand {background:var(--sand)}
.bg-beige{background:#e8e0d6}
.section-title{margin-bottom:clamp(1.75rem,3.5vw,3rem);color:var(--ink);font-size:clamp(1.45rem,3.2vw,2.3rem);font-weight:700;letter-spacing:-.03em;line-height:1.2}
.intro-text{max-width:720px;font-size:clamp(.95rem,1.2vw,1.05rem);color:var(--inksoft);margin-bottom:clamp(2.25rem,4.5vw,3.75rem);line-height:1.85}
.section-cta{margin-top:clamp(1.75rem,3.5vw,2.75rem);text-align:center}
.td-note{font-size:.82rem;color:var(--inksoft);margin-top:1rem;font-style:italic}

/* ── Scroll reveal ── */
.rv{opacity:0;transform:translateY(28px);transition:opacity .75s cubic-bezier(.16,1,.3,1),transform .75s cubic-bezier(.16,1,.3,1)}
.rv.visible{opacity:1;transform:translateY(0)}

/* ── btn-outline (guide uses this) ── */
.btn-outline{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:clamp(.75rem,1.2vw,1rem) clamp(1.5rem,2.5vw,2rem);
  border:1.5px solid var(--primary);
  color:var(--primary);
  font-family:var(--ff);font-size:clamp(.84rem,1vw,.93rem);font-weight:700;
  background:transparent;
  border-radius:9999px;
  transition:background .22s,color .22s;
}
.btn-outline:hover{background:var(--primary);color:var(--cream)}

/* ── Guide Hero ── */
.guide-hero{background:var(--sand);padding:clamp(3rem,6vw,5.5rem) 0 clamp(2.5rem,5vw,4.5rem)}
.guide-breadcrumb{display:flex;align-items:center;gap:.4rem;font-size:.78rem;color:var(--inksoft);margin-bottom:1.25rem;flex-wrap:wrap}
.guide-breadcrumb a{color:var(--inksoft);transition:color .2s}
.guide-breadcrumb a:hover{color:var(--ink)}
.guide-breadcrumb-sep{opacity:.4;font-size:.7rem}
.guide-h1{font-size:clamp(1.9rem,4.5vw,3.2rem);font-weight:700;color:var(--ink);letter-spacing:-.04em;line-height:1.15;margin-bottom:1.25rem}

/* ── AEO Badge ── */
.aeo-badge{
  display:inline-flex;align-items:flex-start;gap:.6rem;
  background:rgba(90,127,92,.1);border:1px solid rgba(90,127,92,.25);
  padding:.75rem 1.1rem;border-radius:4px;
  margin-bottom:1.75rem;max-width:600px;
}
.aeo-icon{font-size:1rem;flex-shrink:0;margin-top:.1rem}
.aeo-text{font-size:.84rem;color:var(--inksoft);line-height:1.65}
.aeo-text strong{color:var(--ink)}

/* ── Stats ── */
.guide-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem);margin-top:2rem}
.guide-stat-card{background:var(--white);border:1px solid var(--rule);padding:clamp(1.1rem,2vw,1.5rem);text-align:center}
.guide-stat-num{display:block;font-family:var(--ff-num);font-size:clamp(1.5rem,3vw,2.2rem);font-weight:700;color:var(--primary);line-height:1.1;margin-bottom:.35rem}
.guide-stat-label{font-size:.78rem;color:var(--inksoft);font-weight:500;letter-spacing:.04em}

/* ── Overview cards ── */
.guide-overview-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.guide-overview-card{display:flex;align-items:flex-start;gap:1rem;background:var(--white);border:1px solid var(--rule);padding:clamp(1.25rem,2.5vw,1.75rem)}
.guide-ov-icon{font-size:1.5rem;flex-shrink:0;margin-top:.1rem}
.guide-overview-card h3{font-size:clamp(.93rem,1.2vw,1.05rem);font-weight:700;color:var(--ink);margin-bottom:.4rem}
.guide-overview-card p{font-size:clamp(.82rem,.95vw,.9rem);color:var(--inksoft);line-height:1.7}

/* ── Type cards (S2) ── */
.guide-type-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.guide-type-card{position:relative;background:var(--white);border:1px solid var(--rule);padding:clamp(1.4rem,2.5vw,2rem);transition:box-shadow .3s,transform .3s}
.guide-type-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.08)}
.guide-type-badge{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--accent);background:rgba(90,127,92,.1);padding:.25rem .7rem;margin-bottom:.85rem}
.guide-type-card h3{font-size:clamp(.95rem,1.3vw,1.1rem);font-weight:700;color:var(--ink);margin-bottom:.6rem}
.guide-type-card p{font-size:clamp(.82rem,.95vw,.88rem);color:var(--inksoft);line-height:1.75}
.guide-type-meta{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:1rem}
.guide-type-tag{font-size:.72rem;font-weight:600;color:var(--inksoft);background:var(--sand);padding:.25rem .65rem;border-radius:2px}

/* ── Table ── */
.guide-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
.guide-table{width:100%;border-collapse:collapse;font-size:.88rem}
.guide-table th{background:var(--primary);color:var(--cream);font-weight:600;padding:.85rem 1rem;text-align:left;font-size:.82rem;letter-spacing:.04em;white-space:nowrap}
.guide-table td{padding:.85rem 1rem;border-bottom:1px solid var(--rule);color:var(--inksoft);line-height:1.65}
.guide-table tr.highlight-row td{background:rgba(90,127,92,.06);font-weight:600;color:var(--ink)}
.guide-table tbody tr:hover td{background:var(--cream)}

/* ── Checklist (S2 alternate) ── */
.guide-checklist{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1rem,2vw,1.5rem)}
.guide-check-item{display:flex;align-items:flex-start;gap:1rem;background:var(--white);border:1px solid var(--rule);padding:clamp(1.1rem,2vw,1.5rem)}
.guide-check-icon{font-family:var(--ff-num);font-size:1.6rem;font-weight:700;color:var(--primary);opacity:.18;line-height:1;flex-shrink:0}
.guide-check-item strong{display:block;font-size:.95rem;font-weight:700;color:var(--ink);margin-bottom:.4rem}
.guide-check-item p{font-size:.85rem;color:var(--inksoft);line-height:1.7}

/* ── Steps (S3) ── */
.guide-steps{display:grid;grid-template-columns:1fr;gap:clamp(1rem,2vw,1.25rem);counter-reset:step}
.guide-step{background:var(--white);border:1px solid var(--rule);border-left:3px solid var(--primary);padding:clamp(1.4rem,2.5vw,2rem);counter-increment:step;position:relative}
.guide-step::before{content:counter(step,'0'counter(step));position:absolute;top:1.25rem;right:1.5rem;font-family:var(--ff-num);font-size:2.5rem;font-weight:700;color:var(--primary);opacity:.07;line-height:1}
.guide-step-body h3{font-size:clamp(1rem,1.4vw,1.15rem);font-weight:700;color:var(--ink);margin-bottom:.6rem}
.guide-step-body p{font-size:clamp(.84rem,1vw,.92rem);color:var(--inksoft);line-height:1.8}
.guide-step-tags{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.85rem}
.guide-step-tag{font-size:.72rem;font-weight:600;color:var(--accent);background:rgba(90,127,92,.09);padding:.25rem .65rem}

/* ── Info Boxes (S4) ── */
.info-box{display:flex;align-items:flex-start;gap:1rem;padding:clamp(1.1rem,2vw,1.5rem);margin-bottom:1rem;border-left:3px solid transparent}
.info-box-icon{font-size:1.25rem;flex-shrink:0;margin-top:.1rem}
.info-box-body h4{font-size:.92rem;font-weight:700;margin-bottom:.4rem}
.info-box-body p{font-size:.85rem;color:var(--inksoft);line-height:1.75}
.info-box-body ul{padding-left:1.25rem;list-style:disc}
.info-box-body li{margin-bottom:.3rem;font-size:.85rem;color:var(--inksoft)}
.info-box.tip{background:rgba(90,127,92,.07);border-left-color:var(--accent)}
.info-box.tip h4{color:#3d5e3f}
.info-box.warning{background:rgba(185,59,59,.05);border-left-color:#b93b3b}
.info-box.warning h4{color:#9b2424}
.info-box.notice{background:rgba(77,51,25,.06);border-left-color:var(--primary)}
.info-box.notice h4{color:var(--primary)}

/* ── Outcraft Points (S5) ── */
.outcraft-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.5rem)}
.outcraft-card{padding:clamp(1.5rem,2.5vw,2rem);background:var(--white);border:1px solid var(--rule);text-align:center;transition:transform .3s,box-shadow .3s;display:flex;flex-direction:column;align-items:center}
.outcraft-card:hover{transform:translateY(-4px);box-shadow:0 8px 32px rgba(0,0,0,.08)}
.outcraft-big-num{font-family:var(--ff-num);font-size:3rem;font-weight:700;color:var(--primary);opacity:.1;line-height:1;margin-bottom:.5rem}
.outcraft-card h3{font-size:clamp(.93rem,1.2vw,1.05rem);font-weight:700;color:var(--ink);margin-bottom:.5rem}
.outcraft-card p{font-size:clamp(.8rem,.93vw,.88rem);color:var(--inksoft);line-height:1.7}

/* ── FAQ (S6) ── */
.cc-faq-list{max-width:800px}
.cc-faq-item{border-bottom:1px solid var(--rule)}
.cc-faq-q{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1.2rem 0;
  font-size:clamp(.92rem,1.15vw,1rem);font-weight:600;color:var(--ink);
  text-align:left;background:none;border:none;cursor:pointer;
  transition:color .2s;
}
.cc-faq-q:hover{color:var(--primary)}
.cc-faq-icon{width:20px;height:20px;flex-shrink:0;position:relative}
.cc-faq-icon::before,.cc-faq-icon::after{content:'';position:absolute;background:currentColor;transition:transform .3s,opacity .3s}
.cc-faq-icon::before{width:12px;height:1.5px;top:50%;left:50%;transform:translate(-50%,-50%)}
.cc-faq-icon::after{width:1.5px;height:12px;top:50%;left:50%;transform:translate(-50%,-50%)}
.cc-faq-q[aria-expanded="true"] .cc-faq-icon::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.cc-faq-a{display:none;padding:0 0 1.2rem}
.cc-faq-a.open{display:block}
.cc-faq-a p{font-size:clamp(.85rem,1vw,.92rem);color:var(--inksoft);line-height:1.82}

/* ── Related Guides (S7) ── */
.guide-related-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(clamp(200px,30%,300px),1fr));gap:clamp(1rem,2vw,1.5rem)}
.guide-related-card{display:flex;align-items:center;justify-content:space-between;padding:1.25rem 1.5rem;background:var(--white);border:1px solid var(--rule);transition:transform .25s,box-shadow .25s,border-color .25s;color:var(--ink);gap:1rem}
.guide-related-card:hover{transform:translateY(-3px);box-shadow:0 6px 24px rgba(0,0,0,.07);border-color:var(--primary);color:var(--primary)}
.guide-related-card h3{font-size:clamp(.86rem,1.05vw,.96rem);font-weight:700}
.card-arrow{font-size:1rem;flex-shrink:0;transition:transform .25s}
.guide-related-card:hover .card-arrow{transform:translateX(4px)}

/* ═══════════════════════════════════════════════
   PHOTO CTA — SPLIT (S5.5)
   ═══════════════════════════════════════════════ */
.guide-split-cta{
  display:grid;
  grid-template-columns:1fr 1fr;
  min-height:500px;
}
.guide-split-cta-img{
  position:relative;
  overflow:hidden;
  min-height:360px;
}
.guide-split-cta-img img{
  width:100%;height:100%;
  object-fit:cover;
  display:block;
  transition:transform .65s cubic-bezier(.4,0,.2,1);
}
.guide-split-cta:hover .guide-split-cta-img img{transform:scale(1.04)}
.guide-split-badge{
  position:absolute;bottom:1.25rem;left:1.25rem;
  background:var(--primary);color:var(--cream);
  font-family:var(--ff-num);font-size:.68rem;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;
  padding:.35rem .9rem;
}
.guide-split-cta-content{
  background:var(--sand);
  padding:clamp(2.75rem,6vw,5.5rem) clamp(2rem,5vw,4.5rem);
  display:flex;flex-direction:column;justify-content:center;
}
.guide-split-h2{
  font-size:clamp(1.6rem,3vw,2.3rem);
  font-weight:700;color:var(--ink);
  letter-spacing:-.035em;line-height:1.2;
  margin-bottom:1.5rem;word-break:keep-all;
}
.guide-split-list{
  list-style:none;
  margin-bottom:2.25rem;
  display:flex;flex-direction:column;gap:.8rem;
}
.guide-split-list li{
  display:flex;align-items:center;gap:.75rem;
  font-size:clamp(.88rem,1.05vw,.97rem);color:var(--ink);font-weight:500;
}
.guide-split-check{color:var(--accent);font-weight:800;font-size:1rem;flex-shrink:0}
.guide-split-btns{display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.btn-tel-dark{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.8rem 1.5rem;border:1.5px solid var(--primary);
  color:var(--primary);font-family:var(--ff);font-size:.88rem;font-weight:700;
  background:transparent;border-radius:9999px;transition:background .22s,color .22s;
  white-space:nowrap;
}
.btn-tel-dark:hover{background:var(--primary);color:var(--cream)}

/* ═══════════════════════════════════════════════
   PHOTO CTA — HERO BAND (bottom)
   ═══════════════════════════════════════════════ */
.guide-photo-band{overflow:hidden}
.guide-photo-band-bg{
  position:relative;
  background-size:cover;
  background-position:center;
  background-attachment:fixed;
  padding:clamp(5rem,10vw,8rem) 0;
}
.guide-photo-band-overlay{
  position:absolute;inset:0;
  background:linear-gradient(135deg,rgba(28,16,4,.84) 0%,rgba(50,30,8,.70) 100%);
}
.guide-photo-band-inner{
  position:relative;z-index:1;
  display:flex;align-items:center;justify-content:space-between;
  gap:3rem;flex-wrap:wrap;
}
.guide-photo-band-text{flex:1;min-width:280px}
.guide-photo-band-kicker{
  display:inline-block;
  font-family:var(--ff-num);font-size:.68rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;
  color:var(--accent);background:rgba(90,127,92,.2);
  padding:.3rem .85rem;border-radius:2px;margin-bottom:1rem;
}
.guide-photo-band-h2{
  font-size:clamp(1.7rem,3.8vw,2.7rem);font-weight:700;
  color:var(--cream);letter-spacing:-.035em;line-height:1.2;margin-bottom:.85rem;
  word-break:keep-all;
}
.guide-photo-band-desc{
  color:rgba(247,243,238,.65);
  font-size:clamp(.88rem,1.1vw,1rem);font-weight:400;line-height:1.75;
}
.guide-photo-band-btns{
  display:flex;flex-direction:column;gap:.85rem;align-items:flex-start;flex-shrink:0;
}
.btn-white{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:clamp(.88rem,1.3vw,1.1rem) clamp(1.75rem,2.8vw,2.5rem);
  background:var(--cream);color:var(--primary);
  font-family:var(--ff);font-size:clamp(.88rem,1.05vw,.97rem);font-weight:800;
  border-radius:9999px;
  box-shadow:0 4px 24px rgba(0,0,0,.2);
  transition:background .22s,transform .22s,box-shadow .22s;
  white-space:nowrap;
}
.btn-white:hover{background:#fff;transform:translateY(-2px);box-shadow:0 8px 36px rgba(0,0,0,.25)}
.btn-tel-ghost{
  display:inline-flex;align-items:center;gap:.45rem;
  padding:.75rem 1.6rem;
  border:1.5px solid rgba(247,243,238,.45);
  color:rgba(247,243,238,.88);
  font-family:var(--ff);font-size:.88rem;font-weight:600;
  background:transparent;border-radius:9999px;
  transition:border-color .2s,color .2s,background .2s;
  white-space:nowrap;
}
.btn-tel-ghost:hover{border-color:var(--cream);color:var(--cream);background:rgba(247,243,238,.08)}

/* ── Guide Page Responsive ── */
@media(max-width:900px){
  .guide-type-grid{grid-template-columns:repeat(2,1fr)}
  .guide-split-cta{grid-template-columns:1fr}
  .guide-split-cta-img{min-height:280px}
  .guide-photo-band-bg{background-attachment:scroll}
  .guide-photo-band-inner{flex-direction:column;align-items:flex-start}
  .guide-photo-band-btns{flex-direction:row;flex-wrap:wrap}
}
@media(max-width:768px){
  .guide-stats{grid-template-columns:repeat(2,1fr)}
  .guide-overview-grid{grid-template-columns:1fr}
  .guide-type-grid{grid-template-columns:1fr 1fr}
  .outcraft-grid{grid-template-columns:1fr}
  .guide-related-grid{grid-template-columns:1fr}
  .guide-checklist{grid-template-columns:1fr}
}
@media(max-width:560px){
  .guide-stats{grid-template-columns:1fr}
  .guide-type-grid{grid-template-columns:1fr}
  .guide-split-btns{flex-direction:column;align-items:stretch}
  .btn-tel-dark,.btn-white,.btn-tel-ghost{text-align:center;justify-content:center;width:100%}
}

/* ============================================================
   Portfolio Detail v2
   ============================================================ */

/* Hero 정보 칩 */
.case-info-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.info-chip{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);color:rgba(247,243,238,.75);font-size:.76rem;padding:5px 13px;border-radius:40px;border:1px solid rgba(255,255,255,.18)}
.info-chip strong{font-weight:600;color:rgba(247,243,238,.45);font-size:.7rem;margin-right:2px}

/* 의뢰 배경 */
.bg-sec{background:#fff;padding:72px 24px;border-top:1px solid var(--rule)}
.bg-inner{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:220px 1fr;gap:52px;align-items:start}
.bg-label{font-family:var(--ff-num);font-size:10px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--accent);display:block;margin-bottom:12px}
.bg-title{font-size:clamp(1.2rem,2vw,1.5rem);font-weight:700;color:var(--ink);letter-spacing:-.025em}
.bg-story{font-size:.97rem;line-height:1.85;color:var(--inksoft)}

/* Before/After 불릿 */
.ba-bullets{margin:16px 16px 0;display:flex;flex-direction:column;gap:8px;padding:0}
.ba-bullets li{font-size:.86rem;color:var(--inksoft);line-height:1.55;padding-left:16px;position:relative}
.ba-bullets li::before{content:'';position:absolute;left:0;top:.55em;width:5px;height:5px;border-radius:50%;background:var(--accent)}

/* 시공 프로세스 (수직 리스트) */
.pd-proc-sec{background:var(--sand);padding:72px 24px;border-top:1px solid var(--rule)}
.pd-proc-inner{max-width:var(--max);margin:0 auto}
.pd-proc-list{margin-top:36px;list-style:none;display:flex;flex-direction:column;gap:0;padding:0}
.pd-proc-item{display:grid;grid-template-columns:56px 1fr;gap:0 16px;padding:24px 0;border-bottom:1px solid var(--rule);align-items:start}
.pd-proc-item:last-child{border-bottom:none}
.pd-proc-num{font-family:var(--ff-num);font-size:1.8rem;font-weight:800;color:var(--accent);line-height:1;letter-spacing:.02em}
.pd-proc-text h3{font-size:.97rem;font-weight:700;color:var(--ink);margin-bottom:5px}
.pd-proc-text p{font-size:.88rem;color:var(--inksoft);line-height:1.65;margin:0}

/* 핵심 포인트 */
.kp-sec{background:var(--cream);padding:72px 24px;border-top:1px solid var(--rule)}
.kp-inner{max-width:var(--max);margin:0 auto}
.kp-box{background:#fff;border-left:4px solid var(--accent);border-radius:0 8px 8px 0;padding:32px 36px;margin-top:32px}
.kp-box p{font-size:1.02rem;line-height:1.85;color:var(--ink);margin:0}

/* 시공 정보 테이블 */
.info-tbl-sec{background:var(--sand);padding:72px 24px;border-top:1px solid var(--rule)}
.info-tbl-inner{max-width:var(--max);margin:0 auto}
.info-tbl{width:100%;border-collapse:collapse;margin-top:32px;border:1px solid var(--rule)}
.info-tbl th,.info-tbl td{padding:15px 22px;font-size:.9rem;text-align:left;border-bottom:1px solid var(--rule)}
.info-tbl tr:last-child th,.info-tbl tr:last-child td{border-bottom:none}
.info-tbl th{width:130px;font-weight:600;color:var(--ink);background:var(--cream);font-family:var(--ff-num);font-size:.82rem;letter-spacing:.05em;white-space:nowrap}
.info-tbl td{color:var(--inksoft);background:#fff}

/* 연관 시공사례 */
.related-sec{background:#fff;padding:72px 24px;border-top:1px solid var(--rule)}
.related-inner{max-width:var(--max);margin:0 auto}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:8px}
.related-card{display:flex;flex-direction:column;border:1px solid var(--rule);border-radius:4px;overflow:hidden;transition:box-shadow .2s,transform .2s}
.related-card:hover{box-shadow:0 6px 24px rgba(0,0,0,.1);transform:translateY(-3px)}
.related-img{aspect-ratio:4/3;overflow:hidden;background:var(--sand)}
.related-img img{width:100%;height:100%;object-fit:cover;transition:transform .4s}
.related-card:hover .related-img img{transform:scale(1.04)}
.related-body{padding:18px 20px;flex:1;display:flex;flex-direction:column;gap:6px}
.related-cat{font-family:var(--ff-num);font-size:.7rem;font-weight:600;letter-spacing:.15em;text-transform:uppercase;color:var(--accent)}
.related-body h3{font-size:.95rem;font-weight:700;color:var(--ink);letter-spacing:-.015em;line-height:1.35}
.related-body p{font-size:.82rem;color:var(--inksoft);margin-top:auto;padding-top:4px}
.related-link{font-size:.82rem;font-weight:600;color:var(--accent);margin-top:8px}

/* Portfolio Detail 반응형 */
@media(max-width:900px){
  .bg-inner{grid-template-columns:1fr;gap:24px}
  .related-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .related-grid{grid-template-columns:1fr}
  .case-info-chips{gap:6px}
  .info-chip{font-size:.72rem;padding:4px 10px}
  .kp-box{padding:24px 22px}
  .info-tbl th,.info-tbl td{padding:12px 14px}
  .pd-proc-item{grid-template-columns:42px 1fr}
  .pd-proc-num{font-size:1.4rem}
}