/* ==========================================================================
   모노하우스 · 타일크랙보수 — 공통 스타일시트
   font_id=1(Inter/Pretendard) + hero_id=7(Barlow Condensed 타이틀/내비)
   header_variant=1(joseon-center) · palette accent #2E3A48 · 흰 푸터
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&display=swap');
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Regular.woff2') format('woff2');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Medium.woff2') format('woff2');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-SemiBold.woff2') format('woff2');
  font-weight: 600; font-display: swap;
}
@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/woff2/Pretendard-Bold.woff2') format('woff2');
  font-weight: 700; font-display: swap;
}

:root{
  --font: "Inter","Pretendard",sans-serif;
  --font-display: "Barlow Condensed","Inter","Pretendard",sans-serif;
  --accent: #2E3A48;
  --accent-soft: #EBEEF2;
  --accent-text: #FFFFFF;
  --ink: #17191C;
  --ink-soft: #55595F;
  --line: #E5E5E5;
  --header-scrolled-bg: #E8EAED;
  --header-scrolled-border: #E5E7EB;
  --wrap: 1280px;
}

*{box-sizing:border-box;}
html,body,h1,h2,h3,h4,p,a,li,button,input,textarea{font-family:var(--font);}
html{scroll-behavior:smooth;}
body{margin:0;color:var(--ink);background:#fff;line-height:1.65;-webkit-font-smoothing:antialiased;}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{margin:0;padding:0;list-style:none;}
h1,h2,h3,h4{margin:0;line-height:1.3;}
p{margin:0 0 1em;}
.wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;}
button{font:inherit;cursor:pointer;}

/* ── Header (joseon-center) ───────────────────────────────────── */
.site-header{
  position:sticky; top:0; z-index:100;
  background:#fff;
  border-bottom:1px solid #000;
  transition:background .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.site-header.is-scrolled{
  background:var(--header-scrolled-bg);
  border-bottom:1px solid var(--header-scrolled-border);
  box-shadow:0 1px 16px rgba(0,0,0,0.06);
}
.header-inner{
  max-width:var(--wrap); margin:0 auto; padding:0 24px;
  display:grid; grid-template-columns:1fr auto 1fr; align-items:center;
  min-height:76px;
}
.header-nav{display:flex; align-items:center; gap:28px;}
.header-nav a{
  font-family:var(--font-display);
  font-weight:600; font-size:17px; letter-spacing:.02em;
  color:var(--ink); padding:6px 0; position:relative;
}
.header-nav a::after{
  content:""; position:absolute; left:0; right:100%; bottom:-2px; height:2px;
  background:var(--accent); transition:right .25s ease;
}
.header-nav a:hover::after,
.header-nav a.is-active::after{ right:0; }
.header-logo{ justify-self:center; text-align:center; }
.header-logo a{
  font-family:var(--font-display); font-weight:800; font-size:24px;
  letter-spacing:.03em; color:var(--ink);
}
.header-utility{ justify-self:end; display:flex; align-items:center; gap:8px; }
.btn-tel{
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent); color:var(--accent-text);
  padding:10px 18px; border-radius:999px; font-weight:700; font-size:14px;
  white-space:nowrap;
}
.btn-tel:hover{ background:#232C37; }
.header-menu-toggle{ display:none; background:none; border:0; padding:8px; }
.header-menu-toggle span{ display:block; width:22px; height:2px; background:var(--ink); margin:5px 0; }

/* mobile nav */
@media (max-width:900px){
  .header-inner{ grid-template-columns:auto 1fr auto; min-height:64px; }
  .header-logo{ justify-self:start; }
  .header-logo a{ font-size:20px; }
  .header-nav{
    position:fixed; inset:64px 0 0 0; background:#fff; flex-direction:column;
    align-items:flex-start; padding:24px; gap:0; transform:translateX(100%);
    transition:transform .3s ease; z-index:90; overflow-y:auto;
  }
  .header-nav.is-open{ transform:translateX(0); }
  .header-nav a{ width:100%; padding:16px 0; border-bottom:1px solid var(--line); font-size:20px; }
  .header-menu-toggle{ display:block; }
  .header-utility .btn-tel span.tel-label{ display:none; }
}

/* ── Hero (hero_id=7 풀폭대제목우측카피) ──────────────────────── */
.hero7{
  position:relative; background:#0F1115; color:#fff; overflow:hidden;
  min-height:520px; display:flex; align-items:flex-end;
}
.hero7 .hero7-bg{
  position:absolute; inset:0; background-size:cover; background-position:center;
  opacity:.55;
}
.hero7 .hero7-bg::after{ content:""; }
.hero7-overlay{
  position:absolute; inset:0;
  background:linear-gradient(180deg, rgba(15,17,21,.35) 0%, rgba(15,17,21,.55) 55%, rgba(15,17,21,.88) 100%);
}
.hero7-inner{
  position:relative; z-index:2; width:100%; max-width:var(--wrap); margin:0 auto;
  padding:120px 24px 56px; display:flex; justify-content:space-between; align-items:flex-end; gap:40px;
}
.hero7-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(28px,4.4vw,64px); line-height:1.15; letter-spacing:-.01em;
  text-transform:uppercase; max-width:none; white-space:nowrap;
}
.hero7-side{ max-width:280px; text-align:right; padding-bottom:10px; }
.hero7-side p{ font-size:15px; color:#E7E9EC; margin-bottom:14px; }
.hero7-side .btn-tel{ font-size:15px; padding:12px 22px; }
@media (max-width:760px){
  .hero7-inner{ flex-direction:column; align-items:flex-start; padding:80px 20px 40px; }
  .hero7-side{ text-align:left; max-width:100%; }
  .hero7{ min-height:420px; }
  .hero7-title{ font-size:clamp(22px,7vw,34px); white-space:normal; }
}

/* page hero (내부 페이지 공통) */
.page-hero{
  background:var(--accent); color:#fff; padding:64px 0 40px;
}
.page-hero .wrap{ text-align:left; }
.page-hero h1{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,5vw,52px); }
.page-hero .breadcrumb{ margin-bottom:14px; font-size:13px; color:#C9D0D8; }
.page-hero .breadcrumb a{ color:#C9D0D8; }
.page-hero .breadcrumb a:hover{ color:#fff; }
.page-hero .lead{ margin-top:14px; max-width:760px; color:#E7EAEE; font-size:16px; }

/* ── Sections ──────────────────────────────────────────────────── */
.section{ padding:72px 0; }
.section-head{ margin-bottom:36px; max-width:720px; }
.section-head .eyebrow{ color:var(--accent); font-weight:700; font-size:13px; letter-spacing:.08em; text-transform:uppercase; margin-bottom:10px; display:block; }
.section-head h2{ font-size:clamp(24px,3.4vw,34px); font-weight:700; }
.section-head p{ margin-top:12px; color:var(--ink-soft); font-size:15.5px; }

/* 30apt 카드형 시공사례 (3열, 395 1:1, 흰박스, hover scale) */
.case-grid{
  display:grid; grid-template-columns:repeat(3,1fr); gap:28px;
}
.pagination{
  display:flex; align-items:center; justify-content:center; gap:10px;
  margin-top:48px;
}
.pg-num, .pg-arrow{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; border-radius:50%;
  font-size:14px; font-weight:600; color:var(--ink,#111);
  text-decoration:none; transition:background .2s,color .2s;
}
.pg-num:hover, .pg-arrow:hover{ background:#F0F0F0; }
.pg-num.is-current{ background:#111; color:#fff; }
.pg-arrow.is-disabled{ color:#CCC; pointer-events:none; }
@media (max-width:480px){
  .pg-num, .pg-arrow{ width:32px; height:32px; font-size:13px; }
  .pagination{ gap:6px; }
}
.case-card{ background:#fff; }
.case-card .thumb{
  aspect-ratio:1/1; overflow:hidden; border-radius:4px; background:#eee;
}
.case-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .45s ease; }
.case-card:hover .thumb img{ transform:scale(1.05); }
.case-card .cap{ padding:16px 4px 4px; }
.case-card .cap .region{ font-size:12px; color:var(--accent); font-weight:700; letter-spacing:.04em; }
.case-card .cap h3{ font-size:16.5px; font-weight:600; margin-top:6px; }
@media (max-width:900px){ .case-grid{ grid-template-columns:repeat(2,1fr); gap:18px; } }
@media (max-width:560px){ .case-grid{ grid-template-columns:1fr; } }

/* /portfolio 카드 — 챔피언스시티 박스 호버(1px 검정 테두리가 그려짐) */
.portfolio-card{ position:relative; background:#fff; padding:0; }
.portfolio-card .thumb{ position:relative; aspect-ratio:1/1; overflow:hidden; background:#eee; }
.portfolio-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.portfolio-card:hover .thumb img{ transform:scale(1.05); }
.portfolio-card .frame{ position:absolute; inset:0; pointer-events:none; }
.portfolio-card .frame span{ position:absolute; background:#000; }
.portfolio-card .frame .t,.portfolio-card .frame .b{ height:1px; width:0; left:0; transition:width .3s ease; }
.portfolio-card .frame .l,.portfolio-card .frame .r{ width:1px; height:0; top:0; transition:height .3s ease .3s; }
.portfolio-card .frame .t{ top:0; } .portfolio-card .frame .b{ bottom:0; transition-delay:.15s; }
.portfolio-card .frame .l{ left:0; } .portfolio-card .frame .r{ right:0; }
.portfolio-card:hover .frame .t,.portfolio-card:hover .frame .b{ width:100%; }
.portfolio-card:hover .frame .l,.portfolio-card:hover .frame .r{ height:100%; }
.portfolio-card .cap{ padding:16px 2px 6px; }
.portfolio-card .cap .region{ font-size:12px; color:var(--accent); font-weight:700; }
.portfolio-card .cap h3{ font-size:16.5px; font-weight:600; margin-top:6px; }
.portfolio-card .cap .space{ font-size:13px; color:var(--ink-soft); margin-top:4px; }

/* catalog-wide (section_variant=2): 넓은 이미지 + 우측 타이틀/설명/태그/CTA 2단 */
.catalog-wide{ display:grid; grid-template-columns:1.15fr 1fr; gap:0; align-items:stretch; background:#fff; border-radius:6px; overflow:hidden; }
.catalog-wide .img{ min-height:360px; background-size:cover; background-position:center; }
.catalog-wide .body{ padding:48px; display:flex; flex-direction:column; justify-content:center; }
.catalog-wide .body h2{ font-size:clamp(22px,3vw,30px); font-weight:700; margin-bottom:16px; }
.catalog-wide .body p{ color:var(--ink-soft); font-size:15.5px; margin-bottom:20px; }
.catalog-wide .tags{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:24px; }
.catalog-wide .tags span{ background:var(--accent-soft); color:var(--accent); font-size:12.5px; font-weight:600; padding:6px 12px; border-radius:999px; }
@media (max-width:860px){ .catalog-wide{ grid-template-columns:1fr; } .catalog-wide .img{ min-height:240px; } .catalog-wide .body{ padding:32px 24px; } }

/* 버튼 */
.btn{ display:inline-flex; align-items:center; gap:8px; padding:13px 26px; border-radius:999px; font-weight:700; font-size:15px; }
.btn-primary{ background:var(--accent); color:#fff; }
.btn-primary:hover{ background:#232C37; }
.btn-outline{ background:#fff; color:var(--accent); border:1.5px solid var(--accent); }
.btn-outline:hover{ background:var(--accent-soft); }
.btn-lg{ padding:16px 34px; font-size:16px; }

/* FAQ */
.faq-list{ display:flex; flex-direction:column; gap:0; border-top:1px solid var(--line); }
.faq-item{ border-bottom:1px solid var(--line); padding:22px 4px; }
.faq-item h3{ font-size:16.5px; font-weight:600; display:flex; gap:12px; }
.faq-item h3 .q-mark{ color:var(--accent); font-family:var(--font-display); font-weight:800; font-size:20px; flex-shrink:0; }
.faq-item .a{ margin-top:10px; color:var(--ink-soft); font-size:15px; padding-left:32px; }

/* PROCESS 4단계 — accent 번호 + 세로 구분선 */
.process-row{ display:grid; grid-template-columns:repeat(4,1fr); gap:0; }
.process-step{ position:relative; padding:0 28px; }
.process-step + .process-step{ border-left:1px solid var(--line); }
.process-step .no{ font-family:var(--font-display); font-weight:800; font-size:40px; color:var(--accent); line-height:1; margin-bottom:14px; }
.process-step h3{ font-size:16px; font-weight:700; margin-bottom:10px; }
.process-step p{ font-size:14px; color:var(--ink-soft); margin:0; }
@media (max-width:860px){
  .process-row{ grid-template-columns:1fr; gap:24px; }
  .process-step + .process-step{ border-left:0; border-top:1px solid var(--line); padding-top:24px; }
}

/* 시공사례 상세 — 34aptr 스타일 (case_detail_variant=0) */
.detail-hero-photo{ width:550px; max-width:100%; height:410px; object-fit:cover; border-radius:4px; }
.detail-meta{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 6px; }
.detail-meta span{ background:var(--accent-soft); color:var(--accent); font-weight:600; font-size:13px; padding:6px 14px; border-radius:999px; }
.ba-row{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin:36px 0; }
.ba-col{ background:#F7F8F9; border-radius:6px; padding:16px; }
.ba-col .tag{ display:inline-block; font-weight:700; font-size:13px; color:#fff; background:var(--accent); padding:5px 12px; border-radius:999px; margin-bottom:12px; }
.ba-col img{ width:100%; height:auto; border-radius:4px; }
@media (max-width:700px){ .ba-row{ grid-template-columns:1fr; } }

.gallery-strip{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin:28px 0; }
.gallery-strip img{ width:100%; height:auto; border-radius:4px; }
@media (max-width:700px){ .gallery-strip{ grid-template-columns:repeat(2,1fr); } }

.related-row{ display:grid; grid-template-columns:repeat(2,1fr); gap:24px; }
.related-card{ display:flex; gap:16px; background:#F7F8F9; border-radius:6px; padding:14px; align-items:center; }
.related-card img{ width:180px; height:180px; object-fit:cover; border-radius:4px; flex-shrink:0; }
.related-card .region{ font-size:12px; color:var(--accent); font-weight:700; }
.related-card h3{ font-size:15.5px; font-weight:600; margin-top:6px; }
@media (max-width:640px){ .related-row{ grid-template-columns:1fr; } .related-card img{ width:120px; height:120px; } }

/* 표 (비용요인/절차/비교) */
table.info-table{ width:100%; border-collapse:collapse; font-size:14.5px; }
table.info-table th,table.info-table td{ border:1px solid var(--line); padding:12px 16px; text-align:left; }
table.info-table th{ background:var(--accent-soft); color:var(--accent); font-weight:700; width:30%; }

/* Closing */
.closing{ background:var(--accent); color:#fff; padding:80px 0; text-align:center; }
.closing h2{ font-family:var(--font-display); font-weight:800; font-size:clamp(28px,4.5vw,44px); margin-bottom:16px; }
.closing p{ color:#DDE3E9; font-size:16px; margin-bottom:30px; }
.closing .btns{ display:flex; gap:14px; justify-content:center; flex-wrap:wrap; }
.closing .btn-outline{ background:transparent; color:#fff; border-color:rgba(255,255,255,.6); }
.closing .btn-outline:hover{ background:rgba(255,255,255,.1); }
.closing .btn-primary{ background:#fff; color:var(--accent); }
.closing .btn-primary:hover{ background:#E7EAEE; }

/* Footer (흰색 고정) */
.site-footer{ background:#FFFFFF; color:#17191C; border-top:1px solid #E5E5E5; padding:48px 0 100px; }
.footer-inner{ display:flex; justify-content:space-between; gap:40px; flex-wrap:wrap; }
.footer-nap{ font-size:13.5px; color:#55595F; line-height:1.9; }
.footer-nap strong{ color:#17191C; font-size:15px; }
.footer-links{ display:flex; gap:22px; flex-wrap:wrap; font-size:13.5px; }
.footer-links a:hover{ color:var(--accent); }
.footer-bottom{ margin-top:28px; font-size:12.5px; color:#8B9096; }
@media (max-width:640px){ .site-footer{ padding-bottom:110px; } }

/* Mobile bottom bar */
.mobile-bar{
  display:none; position:fixed; left:0; right:0; bottom:0; z-index:200;
  background:#fff; border-top:1px solid var(--line); box-shadow:0 -2px 14px rgba(0,0,0,.08);
}
.mobile-bar-inner{ display:grid; grid-template-columns:1fr 1fr; }
.mobile-bar a{ display:flex; align-items:center; justify-content:center; gap:8px; padding:16px 0; font-weight:700; font-size:15px; }
.mobile-bar a.call{ background:var(--accent); color:#fff; }
.mobile-bar a.sms{ background:var(--accent-soft); color:var(--accent); }
@media (max-width:760px){ .mobile-bar{ display:block; } }

/* Region page / about / contact 공통 */
.prose{ max-width:820px; font-size:16px; color:var(--ink); }
.prose p{ margin-bottom:1.1em; }
.prose h2{ font-size:22px; font-weight:700; margin:40px 0 14px; }
.two-col{ display:grid; grid-template-columns:1fr 1fr; gap:40px; }
@media (max-width:820px){ .two-col{ grid-template-columns:1fr; } }

.contact-card{ background:var(--accent-soft); border-radius:10px; padding:40px; text-align:center; }
.contact-tel{ font-family:var(--font-display); font-weight:800; font-size:clamp(32px,6vw,52px); color:var(--accent); letter-spacing:.02em; margin:14px 0 22px; }

/* 사이트맵 페이지 */
.sitemap-list{ display:grid; grid-template-columns:repeat(2,1fr); gap:10px 40px; }
.sitemap-list a{ display:block; padding:10px 0; border-bottom:1px solid var(--line); }
@media (max-width:640px){ .sitemap-list{ grid-template-columns:1fr; } }

/* 유틸 */
.mt-0{margin-top:0;} .mb-0{margin-bottom:0;}
.section-alt{ }
.skip-link{ position:absolute; left:-9999px; top:0; background:#fff; padding:10px 16px; z-index:999; }
.skip-link:focus{ left:12px; top:12px; }