/*
Theme Name: Factory Roof
Description: 공장지붕보수 서비스 사이트
Version: 1.0
*/

/* ---------- reset & scale ---------- */
*,*::before,*::after{box-sizing:border-box}
body{margin:0}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
ul{list-style:none;margin:0;padding:0}
h1,h2,h3,p{margin:0 0 1em}
table{max-width:100%}

:root{
  --fs-h1: clamp(1.875rem, 5vw, 3.25rem);
  --fs-h2: clamp(1.4rem, 3vw, 2.125rem);
  --fs-h3: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --lh-body: 1.8;
  --ls-heading: -0.02em;
  --font-body: 'Pretendard', sans-serif;
  --font-heading: 'Pretendard', sans-serif;
  --bg: #F4F6F8;
  --fg: #16212B;
  --accent: #1F5F8B;
}

body{
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  background: var(--bg);
  color: var(--fg);
  overflow-x: hidden;
}
h1,h2,h3{font-family: var(--font-heading); letter-spacing: var(--ls-heading); line-height:1.15; font-weight:800}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2); margin-top:2em}
h3{font-size:var(--fs-h3)}
main a{color:var(--accent); text-decoration-thickness:1px}

.wrap{max-width:1120px; margin:0 auto; padding:0 20px}

/* ---------- header ---------- */
header.site-header{position:sticky; top:0; z-index:50; background:#fff; border-bottom:4px solid var(--accent)}
.header-inner{display:flex; align-items:center; justify-content:space-between; height:64px; max-width:1120px; margin:0 auto; padding:0 20px}
.logo{font-weight:800; font-size:1.15rem; letter-spacing:.02em; text-decoration:none; color:var(--accent)}
nav.primary-nav{display:flex; align-items:center; gap:4px}
nav.primary-nav>ul{display:flex; align-items:center; gap:4px}
nav.primary-nav a{display:block; padding:10px 14px; text-decoration:none; font-size:.92rem; font-weight:600; border-radius:3px; color:#1a1a1a}
.dropdown-toggle{color:#1a1a1a}
nav.primary-nav>ul>li>a:hover, nav.primary-nav>ul>li>a[aria-expanded="true"]{background:rgba(0,0,0,.06)}
.nav-item{position:relative}
.dropdown-toggle{display:flex; align-items:center; gap:4px; background:none; border:none; font:inherit; font-weight:600; cursor:pointer; padding:10px 14px; border-radius:3px}
.dropdown-toggle:hover,.dropdown-toggle[aria-expanded="true"]{background:rgba(0,0,0,.06)}
.dropdown-menu{position:absolute; top:100%; left:0; min-width:240px; background:#fff; border:1.5px solid rgba(0,0,0,.15); border-top:3px solid var(--accent); border-radius:0 0 4px 4px; box-shadow:0 8px 20px rgba(0,0,0,.1); padding:6px; display:none; margin-top:4px}
.dropdown-menu.open{display:block}
.dropdown-menu a{padding:10px 12px; border-radius:3px; font-size:.9rem}
.dropdown-menu a:hover{background:rgba(0,0,0,.06)}
.header-actions{display:flex; align-items:center; gap:8px}
.nav-phone{min-height:38px; padding:0 16px; font-size:.9rem}
.hamburger{display:none; background:none; border:none; padding:8px; cursor:pointer}
.hamburger span{display:block; width:22px; height:2px; background:var(--fg); margin:5px 0}

/* mobile nav */
@media (max-width:860px){
  .hamburger{display:block}
  nav.primary-nav{position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column; align-items:stretch; padding:12px; overflow-y:auto; display:none; gap:0}
  nav.primary-nav.open{display:flex}
  nav.primary-nav>ul{flex-direction:column; align-items:stretch; width:100%}
  .dropdown-menu{position:static; box-shadow:none; border:none; margin:0 0 0 12px; display:none}
  .dropdown-menu.open{display:block}
}

/* ---------- hero ---------- */
section.hero{padding:56px 0 40px; background:color-mix(in srgb, var(--accent) 22%, var(--bg)); border-bottom:1px solid rgba(0,0,0,.1)}
.hero-inner{max-width:1120px; margin:0 auto; padding:0 20px}
.hero-lead{font-size:1.1rem; max-width:640px; margin-bottom:1.5em}
.hero-media{border-radius:4px; overflow:hidden; margin-bottom:1.5em; aspect-ratio:16/9; background:#dde3e7; border:2px solid rgba(0,0,0,.15)}
.hero-media img{width:100%; height:100%; object-fit:cover}
.cta-buttons{display:flex; gap:12px; flex-wrap:wrap}
.btn{display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border-radius:4px; font-weight:800; letter-spacing:.02em; text-decoration:none; font-size:1rem; border:2px solid transparent}
.btn-primary{background:var(--accent); color:#fff; border-color:var(--accent)}
.btn-secondary{background:transparent; color:var(--fg); border-color:var(--fg)}

/* ---------- carousel ---------- */
.carousel{margin:32px 0}
.carousel-track{display:flex; gap:16px; overflow-x:auto; scroll-snap-type:x mandatory; padding-bottom:8px; scrollbar-width:none}
.carousel-track::-webkit-scrollbar{display:none}
.carousel-track:focus-visible{outline:2px solid var(--accent)}
.carousel-card{scroll-snap-align:start; flex:0 0 100%; background:#fff; border-radius:4px; border:1.5px solid rgba(0,0,0,.15); border-top:5px solid var(--accent); overflow:hidden; text-decoration:none; color:var(--fg); display:block}
@media (min-width:640px){.carousel-card{flex-basis:calc(50% - 8px)}}
@media (min-width:960px){.carousel-card{flex-basis:calc(33.333% - 11px)}}
.carousel-card img{width:100%; aspect-ratio:4/3; object-fit:cover}
.carousel-card-body{padding:16px}
.carousel-card-body h3{font-size:1.05rem; margin:0 0 .4em}
.carousel-card-body p{font-size:.9rem; color:#586472; margin:0}
.carousel-controls{display:flex; align-items:center; gap:10px; margin-top:12px}
.carousel-controls button{width:40px; height:40px; border-radius:4px; border:2px solid var(--fg); background:#fff; cursor:pointer; font-size:1.1rem}
.carousel-dots{display:flex; gap:6px; margin-left:auto}
.carousel-dots button{width:8px; height:8px; padding:0; border-radius:1px; border:none; background:rgba(0,0,0,.25)}
.carousel-dots button[aria-current="true"]{background:var(--accent); width:20px; border-radius:1px}

/* ---------- cta section ---------- */
section.cta{padding:48px 0; margin-top:40px; background:rgba(0,0,0,.04); border-top:2px solid rgba(0,0,0,.1)}
section.cta .wrap{text-align:center}
section.cta p{font-size:1.15rem; font-weight:800; margin-bottom:1.2em}
section.cta .cta-buttons{justify-content:center}

/* ---------- footer ---------- */
footer.site-footer{background:#12181d; color:#c7cfd6; padding:48px 0 28px; margin-top:0; border-top:4px solid var(--accent)}
footer.site-footer a{color:#e7ecef; text-decoration:none}
.footer-row{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; gap:24px}
.footer-nav{display:flex; flex-direction:column; gap:10px; font-size:.95rem; padding-top:20px}
.footer-biz{flex:1 1 380px; padding-top:20px; font-size:.85rem; line-height:2}
.footer-biz .biz-rule{border:none; border-top:1px dashed rgba(255,255,255,.25); margin:0 0 12px}
.footer-copy{margin-top:16px; font-size:.8rem; color:#8b96a1}

/* ---------- main content ---------- */
main{padding:8px 0 8px}
main .wrap{padding-top:8px; padding-bottom:8px}
main h2{border-top:2px solid rgba(0,0,0,.12); padding-top:1em}
main h2:first-of-type{border-top:none; padding-top:0}
main h2::after{content:""; display:block; width:40px; height:4px; background:var(--accent); margin-top:.5em}
figure.content-figure{margin:1.5em 0}
figure.content-figure figcaption{font-size:var(--fs-small); color:#65707a; margin-top:.5em}

/* toc sidebar layout (panel-replacement) */
.with-toc{display:grid; grid-template-columns:220px 1fr; gap:40px; align-items:start}
.toc-sidebar{position:sticky; top:80px; background:#fff; border-radius:4px; padding:16px; border:1.5px solid rgba(0,0,0,.15); border-left:4px solid var(--accent)}
.toc-sidebar p{font-size:.8rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#8a94a0; margin:0 0 8px}
.toc-sidebar a{display:block; padding:6px 0; font-size:.9rem; text-decoration:none; border-bottom:1px solid rgba(0,0,0,.06)}
@media (max-width:860px){.with-toc{grid-template-columns:1fr} .toc-sidebar{position:static}}

/* timeline (gutter) */
ol.timeline{list-style:none; margin:1.5em 0; padding:0; position:relative}
ol.timeline::before{content:"";position:absolute; left:15px; top:6px; bottom:6px; width:2px; background:rgba(0,0,0,.12)}
ol.timeline li{position:relative; padding:0 0 24px 44px}
ol.timeline li::before{content:counter(step); counter-increment:step; position:absolute; left:0; top:0; width:32px; height:32px; border-radius:4px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800}
ol.timeline{counter-reset:step}

/* stage grid (rust) */
.stage-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; margin:1.5em 0}
@media (min-width:760px){.stage-grid{grid-template-columns:repeat(4,1fr)}}
.stage-grid>div{background:#fff; border:1.5px solid rgba(0,0,0,.15); border-top:4px solid var(--accent); border-radius:4px; padding:18px}
.stage-grid>div .step-no{font-size:.8rem; font-weight:700; color:var(--accent); margin-bottom:8px; display:block}

/* accordion (cost) */
.accordion-item{border:1.5px solid rgba(0,0,0,.15); border-left:4px solid var(--accent); border-radius:4px; margin-bottom:10px; overflow:hidden}
.accordion-item summary{cursor:pointer; padding:14px 16px; font-weight:800; list-style:none; display:flex; justify-content:space-between; align-items:center}
.accordion-item summary::-webkit-details-marker{display:none}
.accordion-item summary::after{content:"+"; font-weight:400; font-size:1.3rem}
.accordion-item[open] summary::after{content:"–"}
.accordion-item .accordion-body{padding:0 16px 16px; font-size:.95rem; color:#4a5560}

.table-scroll{overflow-x:auto; margin:1.5em 0; border:1.5px solid rgba(0,0,0,.15); border-radius:4px}
.table-scroll table{width:100%; border-collapse:collapse; font-size:.92rem; min-width:520px}
.table-scroll th,.table-scroll td{padding:12px 14px; text-align:left; border-bottom:1px solid rgba(0,0,0,.1)}
.table-scroll th{background:rgba(0,0,0,.05); font-weight:800}

/* 현장시공사진 grid */
.photo-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin:1.5em 0}
@media (min-width:640px){.photo-grid{grid-template-columns:repeat(4,1fr)}}
.photo-grid figure{margin:0; border-radius:4px; overflow:hidden; border:1.5px solid rgba(0,0,0,.15); aspect-ratio:4/3; background:#dde3e7}
.photo-grid figure img{width:100%; height:100%; object-fit:cover}

/* card grids (services / areas hubs) */
.card-grid{display:grid; grid-template-columns:1fr; gap:18px; margin:1.5em 0}
@media (min-width:640px){.card-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:960px){.card-grid{grid-template-columns:repeat(3,1fr)}}
.card-grid a.card{display:block; background:#fff; border:1.5px solid rgba(0,0,0,.15); border-top:5px solid var(--accent); border-radius:4px; padding:20px; text-decoration:none; color:var(--fg)}
.card-grid a.card h3{margin:0 0 .5em; color:var(--accent)}
.card-grid a.card p{margin:0; font-size:.92rem; color:#4a5560}

/* home zigzag */
.zigzag{display:flex; flex-direction:column; gap:40px; margin:1.5em 0}
.zigzag>div{display:flex; flex-direction:column; gap:16px}
@media (min-width:760px){
  .zigzag>div{flex-direction:row; align-items:center; gap:32px}
  .zigzag>div:nth-child(even){flex-direction:row-reverse}
  .zigzag>div>*{flex:1}
}
.zigzag figure{margin:0; border-radius:4px; overflow:hidden; aspect-ratio:4/3; background:#dde3e7; border:2px solid rgba(0,0,0,.15)}
.zigzag figure img{width:100%; height:100%; object-fit:cover}

/* breadcrumb */
.breadcrumb{font-size:.82rem; color:#6b7580; padding:14px 0 0}
.breadcrumb a{text-decoration:none}
.breadcrumb a:hover{text-decoration:underline}

/* sitemap tree */
.tree-list ul{padding-left:22px; border-left:1px dashed rgba(0,0,0,.15); margin-top:8px}
.tree-list li{margin:10px 0}
.tree-list a{font-weight:700; text-decoration:none}
.tree-list a:hover{text-decoration:underline}
.tree-list p{font-size:.88rem; color:#586472; margin:.3em 0 0}

/* consult steps */
.step-list{counter-reset:s; display:grid; gap:14px; margin:1.5em 0}
.step-list li{list-style:none; counter-increment:s; position:relative; padding:16px 16px 16px 56px; background:rgba(255,255,255,.06); border-radius:4px; border-left:4px solid var(--accent)}
.step-list li::before{content:counter(s); position:absolute; left:16px; top:16px; width:28px; height:28px; border-radius:4px; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:.85rem; font-weight:800}

@media (max-width:480px){
  .card-grid a.card{padding:16px}
}