/* 스파이럴덕트 — font_id 3 (제목 Gowun Batang / 본문·메뉴·버튼 Pretendard), accent_id 11 테라코타 */
:root{
  --accent:#C45A32;
  --accent-soft:#F6E8E0;
  --accent-ink:#FFFFFF;
  --deep:#0E2F2A;
  --ink:#1A1A1A;
  --bar-chrome:#E9EBEE;
  --font-title:"Gowun Batang", serif;
  --font-body:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, sans-serif;
}
*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  letter-spacing:-0.02em;
  word-break:keep-all;
  -webkit-font-smoothing:antialiased;
  line-height:1.6;
  background:#fff;
}
h1,h2,h3,.hero-title,.section-title,.point-font{
  font-family:var(--font-title);
  font-weight:700;
  letter-spacing:-0.01em;
}
a{color:inherit;text-decoration:none;}
img{max-width:100%;display:block;}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px;}
button{font-family:var(--font-body);}

/* ---------- Header (B-22) ---------- */
.site-header{position:fixed;top:0;left:0;right:0;z-index:1000;background:transparent;transition:background .3s ease,box-shadow .3s ease;}
.header-inner{max-width:1280px;margin:0 auto;padding:18px 24px;display:flex;align-items:center;justify-content:space-between;}
.logo{font-family:var(--font-title);font-weight:700;font-size:22px;color:#fff;transition:color .3s ease;}
.main-nav{display:flex;align-items:center;gap:28px;}
.main-nav a{font-size:15px;font-weight:600;color:#fff;transition:color .3s ease;}
.btn-cta{background:var(--accent);color:var(--accent-ink)!important;padding:10px 20px;border-radius:3px;font-weight:700;}
.nav-toggle{display:none;background:none;border:0;cursor:pointer;flex-direction:column;gap:5px;}
.nav-toggle span{width:22px;height:2px;background:#fff;transition:background .3s ease;}

.site-header.is-scrolled{background:var(--bar-chrome);box-shadow:0 1px 16px rgba(0,0,0,.06);}
.site-header.is-scrolled .logo,
.site-header.is-scrolled .main-nav a{color:var(--ink);}
.site-header.is-scrolled .nav-toggle span{background:var(--ink);}

body.no-hero .site-header{background:var(--bar-chrome);box-shadow:0 1px 16px rgba(0,0,0,.06);}
body.no-hero .logo,body.no-hero .main-nav a{color:var(--ink);}
body.no-hero .nav-toggle span{background:var(--ink);}

/* ---------- Hero ---------- */
.hero{position:relative;min-height:640px;display:flex;align-items:center;background-size:cover;background-position:center;overflow:hidden;}
.hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(14,47,42,.55) 0%, rgba(14,47,42,.15) 45%, rgba(14,47,42,.35) 100%);}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:heroZoom 18s ease-in-out infinite alternate;}
@keyframes heroZoom{from{transform:scale(1);}to{transform:scale(1.06);}}
.hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:120px 24px 60px;width:100%;display:flex;flex-direction:column;align-items:flex-end;text-align:right;gap:18px;}
.hero-title{color:#fff;font-size:44px;line-height:1.25;white-space:nowrap;}
.hero-sub{color:#fff;font-size:16px;opacity:.92;white-space:nowrap;}
.hero-actions{display:flex;gap:12px;}
.hero-btn{padding:14px 26px;border-radius:3px;font-weight:700;font-size:15px;}
.hero-btn.primary{background:var(--accent);color:#fff;}
.hero-btn.ghost{border:1px solid #fff;color:#fff;}

.page-hero{position:relative;min-height:38vh;display:flex;align-items:center;background-size:cover;background-position:center;}
.page-hero::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg, rgba(255,255,255,.4) 0%, rgba(255,255,255,.28) 100%);}
.page-hero-inner{position:relative;z-index:2;max-width:1280px;margin:0 auto;padding:100px 24px 40px;width:100%;}
.page-eyebrow{color:var(--ink);font-size:13px;letter-spacing:.08em;opacity:.85;margin:0 0 10px;text-shadow:0 1px 14px rgba(255,255,255,.9),0 1px 2px rgba(255,255,255,.9);}
.page-title{color:var(--ink);font-size:34px;margin:0;text-shadow:0 2px 18px rgba(255,255,255,.9),0 1px 3px rgba(255,255,255,.9);}
.page-hero.dim{min-height:36vh;}
.page-hero-inner p, .page-hero-inner h1{white-space:nowrap;}

/* ---------- Sections ---------- */
section.block{padding:80px 0;}
.section-label{display:inline-block;font-size:13px;font-weight:700;color:var(--accent);margin-bottom:10px;}
.section-title{font-size:30px;margin:0 0 14px;white-space:nowrap;}
.section-desc{font-size:15px;color:#4B5563;max-width:640px;margin:0 0 40px;}

/* intro one-liner rule */
.intro-line{font-size:20px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* ---------- Service cards ---------- */
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;}
.svc-card{background:#fff;padding:30px 22px;border:1px solid #E5E7EB;}
.svc-card svg{width:40px;height:40px;color:var(--accent);margin-bottom:16px;}
.svc-card h3{font-size:18px;margin:0 0 8px;}
.svc-card p{font-size:14px;color:#4B5563;margin:0;}

/* ---------- Home #cases : design_id=1 (30apt) 3장 카드 ---------- */
.cases-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;max-width:1280px;margin:0 auto;}
.case-card{background:#fff;border:1px solid #ECECEC;position:relative;transition:transform .35s ease;}
.case-card:hover{transform:scale(1.05);}
.case-photo{width:100%;aspect-ratio:1/1;overflow:hidden;}
.case-photo img{width:100%;height:100%;object-fit:cover;}
.case-body{padding:20px;}
.case-hl{font-size:12px;color:var(--accent);font-weight:700;margin:0 0 6px;}
.case-body h3{font-size:17px;margin:0;}

/* draw_id=1 챔피언스시티 박스 호버: 검정 1px 네 변이 자라며 둘레 */
.hover-draw{position:relative;}
.hover-draw::before,.hover-draw::after{content:'';position:absolute;width:0;height:0;border:1px solid #000;pointer-events:none;transition:width .6s ease,height .6s ease;}
.hover-draw::before{top:0;left:0;border-right:none;border-bottom:none;}
.hover-draw::after{bottom:0;right:0;border-left:none;border-top:none;}
.hover-draw:hover::before,.hover-draw:hover::after{width:100%;height:100%;}

.cases-more{text-align:center;margin-top:44px;}
.link-more{display:inline-block;padding:12px 26px;border:1px solid var(--ink);border-radius:3px;font-weight:700;font-size:14px;}

/* ---------- Guide summary ---------- */
.guide-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:18px;}
.guide-card{background:#fff;border:1px solid #E5E7EB;padding:24px;}
.guide-card h3{font-size:16px;margin:0 0 8px;}
.guide-card p{font-size:13.5px;color:#4B5563;margin:0;}

/* ---------- FAQ ---------- */
.faq-list{max-width:820px;margin:0 auto;}
.faq-item{border-bottom:1px solid #E5E7EB;padding:20px 0;}
.faq-q{font-weight:700;font-size:16px;margin:0 0 8px;}
.faq-a{font-size:14.5px;color:#4B5563;margin:0;}

/* ---------- Portfolio list (B-11, 영림형) ---------- */
.pf-hero{min-height:38vh;}
.pf-grid{display:flex;flex-wrap:wrap;gap:20px;max-width:1280px;margin:60px auto;padding:0 24px;}
.pf-item{position:relative;}
.pf-item a{display:block;}
.pf-item img{width:100%;object-fit:cover;}
.pf-item .pf-cap{padding:14px 2px;font-size:14px;font-weight:600;}
.pf-item .pf-cap span{display:block;font-size:12px;color:var(--accent);font-weight:700;margin-bottom:4px;}

.pf-item:nth-child(12n+1) img,.pf-item:nth-child(12n+6) img,.pf-item:nth-child(12n+9) img{aspect-ratio:5/6;}
.pf-item:nth-child(12n+1),.pf-item:nth-child(12n+6),.pf-item:nth-child(12n+9){width:calc(30% - 20px);}
.pf-item:nth-child(12n+2) img,.pf-item:nth-child(12n+5) img,.pf-item:nth-child(12n+10) img{aspect-ratio:9.45/5;}
.pf-item:nth-child(12n+2),.pf-item:nth-child(12n+5),.pf-item:nth-child(12n+10){width:calc(68% - 20px);}
.pf-item:nth-child(12n+3),.pf-item:nth-child(12n+4),.pf-item:nth-child(12n+7),.pf-item:nth-child(12n+8),
.pf-item:nth-child(12n+11),.pf-item:nth-child(12n){width:calc(49% - 20px);}
.pf-item:nth-child(12n+3) img,.pf-item:nth-child(12n+4) img,.pf-item:nth-child(12n+7) img,.pf-item:nth-child(12n+8) img,
.pf-item:nth-child(12n+11) img,.pf-item:nth-child(12n) img{aspect-ratio:7/6;}

.pf-pagination{display:flex;justify-content:center;gap:10px;margin:20px 0 80px;}
.pf-pagination a{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;border:1px solid #E5E7EB;}
.pf-pagination a.current{background:var(--ink);color:#fff;border-color:var(--ink);}

/* ---------- Article body (시공사례 상세 / 지역 페이지 본문) ---------- */
.article-body{max-width:760px;margin:60px auto;padding:0 24px;}
.article-photo{width:550px;height:410px;border-radius:18px;overflow:hidden;margin:0 auto 40px;}
.article-photo img{width:100%;height:100%;object-fit:cover;}
.article-label{font-size:11px;color:#8A8A8A;margin:0 0 8px;letter-spacing:.05em;}
.article-title{font-size:26px;margin:0 0 22px;}
.article-text{font-size:15.5px;color:#3f3f3f;}
.article-text p{margin:0 0 18px;}
.article-points{display:grid;grid-template-columns:repeat(2,1fr);gap:14px;margin:30px 0;}
.article-point{background:#F9F7F3;padding:16px 18px;font-size:14px;}
.article-nav{display:flex;justify-content:space-between;font-size:14px;font-weight:600;margin-top:40px;padding-top:20px;border-top:1px solid #E5E7EB;}
.svc-table{width:100%;border-collapse:collapse;font-size:14px;margin:16px 0 30px;}
.svc-table th,.svc-table td{border:1px solid #E5E7EB;padding:10px 14px;text-align:left;}
.svc-table th{background:#F9F7F3;width:120px;}

/* ---------- Guide hub / 관련 사례 / 푸터 Guide ---------- */
.hub-grid{display:flex;flex-wrap:wrap;justify-content:center;gap:24px;max-width:1280px;margin:0 auto;}
.hub-card{background:#fff;border:1px solid #E5E7EB;display:block;width:calc(33.333% - 16px);}
.hub-card img{width:100%;aspect-ratio:4/3;object-fit:cover;}
.hub-body{padding:20px;}
.hub-body h2{font-size:18px;margin:0 0 8px;}
.hub-body p{font-size:14px;color:#4B5563;margin:0 0 12px;}
.hub-more{font-size:13px;font-weight:700;color:var(--accent);}
.rel-cases{margin-top:50px;}
.rel-cases h3{font-size:18px;margin:0 0 16px;}
.rel-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;}
.rel-card{border:1px solid #E5E7EB;display:block;}
.rel-card img{width:100%;height:170px;object-fit:cover;}
.rel-card span{display:block;padding:10px 12px;font-size:14px;font-weight:600;}
.footer-guide{margin:0 0 14px;font-size:13px;color:#555;}

/* ---------- Closing (B-25) ---------- */
.closing{position:relative;height:650px;background-size:cover;background-position:center;}
.closing-overlay{position:absolute;inset:0;background:rgba(19,19,19,.55);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;gap:16px;padding:0 20px;}
.closing-head{color:#fff;font-family:var(--font-title);font-size:28px;font-weight:700;margin:0;white-space:nowrap;}
.closing-quote{color:#f1f1f1;font-size:15px;margin:0;max-width:600px;}
.closing-btn{margin-top:10px;padding:14px 34px;border:1px solid #fff;color:#fff;font-weight:700;font-size:14px;border-radius:0;}

/* ---------- Footer + bottom bar (B-23) ---------- */
.site-footer{background:#FFFFFF;color:#000;border-top:1px solid #E5E5E5;padding:40px 0 100px;}
.footer-inner{max-width:1280px;margin:0 auto;padding:0 24px;text-align:center;}
.footer-biz{font-size:14px;font-weight:600;margin:0 0 6px;}
.footer-reg{font-size:13px;color:#555;margin:0 0 18px;}
.footer-actions{display:flex;justify-content:center;gap:14px;margin-bottom:18px;}
.footer-actions a{border:1px solid #ddd;padding:8px 18px;font-size:13px;border-radius:3px;}
.footer-copy{font-size:12px;color:#999;margin:0;}

.bottom-bar{position:fixed;left:0;right:0;bottom:0;z-index:900;background:var(--bar-chrome);border-top:1px solid #E5E7EB;box-shadow:0 -6px 22px rgba(0,0,0,.08);padding:12px 20px;text-align:center;transform:translateY(100%);opacity:0;transition:transform .3s ease,opacity .3s ease;}
.bottom-bar.show{transform:translateY(0);opacity:1;}
.bottom-bar-btn{display:inline-block;min-height:48px;line-height:48px;padding:0 28px;background:var(--accent);color:#fff;font-weight:700;border-radius:3px;font-size:15px;}

.crawl-img{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

/* ---------- misc ---------- */
.contact-phone{font-size:32px;font-weight:700;color:var(--accent);}
.biz-hours{white-space:nowrap;}

@media (max-width:900px){
  .svc-grid{grid-template-columns:repeat(2,1fr);}
  .cases-grid{grid-template-columns:1fr;}
  .article-points{grid-template-columns:1fr;}
  .pf-item,.pf-item:nth-child(12n+1),.pf-item:nth-child(12n+2),.pf-item:nth-child(12n+5),
  .pf-item:nth-child(12n+6),.pf-item:nth-child(12n+9),.pf-item:nth-child(12n+10){width:100%;}
  .pf-item img,.pf-item:nth-child(12n+1) img,.pf-item:nth-child(12n+2) img{aspect-ratio:4/3;}
}
@media (max-width:767px){
  .header-inner{flex-wrap:wrap;padding:10px 12px;row-gap:6px;}
  .main-nav{width:100%;display:grid;grid-template-columns:repeat(4,1fr);gap:4px;text-align:center;}
  .main-nav a{font-size:13px;white-space:nowrap;padding:6px 0;}
  .btn-cta{padding:6px 0;}
  .site-header:not(.is-scrolled) .main-nav a{color:#fff;}
  body.no-hero .main-nav a{color:var(--ink);}
  .main-nav .btn-cta{color:var(--accent-ink)!important;}
  .hero-title{font-size:28px;white-space:normal;}
  .hero-inner{align-items:flex-start;text-align:left;padding-top:130px;}
  .page-hero-inner{padding-top:120px;}
  h1,h2,h3,.btn-cta,.closing-btn,.hero-btn{word-break:keep-all;}
  .hub-card{width:100%;}
  .rel-grid{grid-template-columns:1fr;}
  .hero-sub{white-space:normal;}
  .section-title{white-space:normal;font-size:24px;}
  .intro-line{white-space:normal;}
  .article-photo{width:100%;max-width:550px;height:auto;aspect-ratio:550/410;}
  .closing-head{white-space:normal;font-size:22px;}
  .page-hero-inner p,.page-hero-inner h1{white-space:normal;}
}