/* prc.jibsarepair.com — 부분리모델링업체 디자인 시스템
   컴포넌트/레이아웃/모션은 design.md("CHC 디자인 시스템", Architectural Mono) 사양을 그대로 이식.
   컬러만 기존 팔레트(쿨톤 슬레이트 + 딥블루 #2354C7) 유지, 섹션 내용/순서는 기존 그대로. */

:root{
  --bg:#F3F5F8;
  --surface:#FFFFFF;
  --surface-2:#EAEDF2;
  --ink:#14171F;
  --ink-soft:#4A505C;
  --ink-faint:#8A8F99;
  --line:#E1E4EA;
  --line-alt:#CDD2DB;
  --accent:#2354C7;
  --accent-dark:#173C94;
  --accent-soft:#E7EDFB;
  --accent-2:#0E9F6E;
  --panel:#10131C;
  --panel-2:#1A1F2C;
  --panel-text:#F3F5F8;
  --panel-text-muted:#9AA1B0;

  --radius:2px;       /* design.md: 버튼은 거의 각짐 */
  --radius-pill:999px; /* design.md: 배지·플로팅CTA는 완전 원형 */

  --maxw:1320px;
  --maxw-wide:1480px; /* 헤더/히어로/푸터/섹션 */
  --gutter:clamp(20px,4vw,48px);
  --section-pad:clamp(72px,11vw,140px);
  --ease:cubic-bezier(.22,1,.36,1);

  --font:'Pretendard Variable','Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --tracking-tight:-0.02em; /* 한글 완성형 글자는 라틴만큼 자간을 좁힐 수 없음 — -0.06em은 큰 사이즈에서 글자가 겹침 */
  --tracking-caps:0.14em;
}
@font-face{
  font-family:'Pretendard Variable';
  src:url('https://cdn.jsdelivr.net/npm/pretendard@1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
  font-weight:45 920; font-display:swap;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--font);font-weight:400;color:var(--ink);background:var(--bg);line-height:1.65;letter-spacing:-0.011em;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
h1,h2,h3,h4{margin:0;font-weight:900;letter-spacing:var(--tracking-tight);word-break:keep-all;overflow-wrap:anywhere}
p{margin:0}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{padding:var(--section-pad) 0}
.sec-alt{background:var(--surface)}
.sec-dark{background:var(--panel);color:var(--panel-text)}
.sec-invert{background:#F5F5F3;color:#0A0A0A}
.sec-invert .sec-desc{color:#4A473F}
.eyebrow{display:inline-block;font-size:.8rem;font-weight:700;letter-spacing:var(--tracking-caps);color:var(--accent);text-transform:uppercase;margin-bottom:12px}
.eyebrow.eyebrow-dash{padding-left:44px;position:relative}
.eyebrow.eyebrow-dash::before{content:'';position:absolute;left:0;top:50%;width:32px;height:1px;background:currentColor}
.sec-title{font-size:clamp(1.9rem,4.8vw,3.4rem);margin-bottom:14px}
.sec-desc{color:var(--ink-soft);font-size:1.02rem;max-width:640px}
.sec-dark .sec-desc{color:var(--panel-text-muted)}

/* 섹션 넘버 마커 — design.md 참고사이트(chc.standardhomerepair.com) "01 TRUST" 패턴 */
.sec-marker{display:flex;flex-wrap:wrap;gap:clamp(20px,4vw,60px);align-items:flex-start;padding-bottom:36px;margin-bottom:36px;border-bottom:1px solid var(--line)}
.sec-dark .sec-marker,.sec-invert .sec-marker{border-color:rgba(128,128,128,.3)}
.sec-marker-num{flex:none}
.sec-marker-num .num{display:block;font-size:clamp(3rem,7vw,5.5rem);font-weight:900;letter-spacing:var(--tracking-tight);line-height:1}
.sec-marker-num .label{display:block;font-size:.72rem;font-weight:700;letter-spacing:var(--tracking-caps);text-transform:uppercase;color:var(--ink-faint);margin-top:4px}
.sec-marker-body{flex:1 1 320px;padding-top:8px}
.sec-marker-body .sec-title{margin-bottom:10px}

/* 헤어라인 분할 그리드 — design.md 참고사이트 신뢰 그리드(01/03 카운터 + 언더라인) */
.divided-grid{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);border-left:1px solid var(--line)}
.sec-dark .divided-grid,.sec-invert .divided-grid{border-color:rgba(128,128,128,.3)}
.divided-col{padding:clamp(24px,3vw,36px);border-right:1px solid var(--line);border-bottom:1px solid var(--line)}
.sec-dark .divided-col,.sec-invert .divided-col{border-color:rgba(128,128,128,.3)}
.divided-col .counter{display:block;font-size:.78rem;color:var(--ink-faint);margin-bottom:16px}
.divided-col h3{font-size:1.3rem;font-weight:900;position:relative;padding-bottom:14px;margin-bottom:10px}
.divided-col h3::after{content:'';position:absolute;left:0;bottom:0;width:26px;height:2px;background:var(--accent)}
.divided-col p{font-size:.9rem;color:var(--ink-soft)}
.sec-dark .divided-col p,.sec-invert .divided-col p{color:inherit;opacity:.7}
@media (max-width:768px){.divided-grid{grid-template-columns:1fr}}

/* 마지막 CTA 배너 — design.md 참고사이트 "GET STARTED" 처리: main의 마지막 section은 항상 이 배너라 구조적으로 크게 */
main>section:last-of-type .sec-title{font-size:clamp(2.4rem,6.5vw,5rem);line-height:1.02}

/* 헤더 — 히어로 위에서는 design.md의 mix-blend-mode:difference로 투명하게 자동 반전.
   스크롤해서 히어로를 벗어나면(.hdr--solid) 항상 보이는 불투명 배경으로 전환 — 사라지지 않고 늘 떠 있음(script.js) */
.hdr{position:fixed;top:0;left:0;right:0;z-index:50;background:transparent;mix-blend-mode:difference;transition:background .3s var(--ease),border-color .3s var(--ease)}
.hdr.hdr--solid{background:rgba(243,245,248,.94);backdrop-filter:blur(10px);mix-blend-mode:normal;border-bottom:1px solid var(--line)}
.hdr-inner{max-width:var(--maxw-wide);margin:0 auto;padding:1.5rem var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:20px}
.hdr-logo span{font-size:1.15rem;font-weight:900;letter-spacing:var(--tracking-tight);color:#fff}
.hdr-logo b{color:#fff}
.hdr-nav{display:flex;gap:26px;font-size:.92rem;font-weight:600;color:#fff}
.hdr-phone{display:flex;align-items:center}
.hdr-nav a{transition:opacity .2s var(--ease)}
.hdr-nav a:hover{opacity:.7}
.hdr-cta{display:inline-block;padding:.7rem 1.3rem;border-radius:var(--radius-pill);background:#fff;color:#000;font-weight:700;font-size:.9rem;border:1px solid #fff;transition:background .25s var(--ease),color .25s var(--ease)}
.hdr-cta:hover{background:transparent;color:#fff}
.hdr-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:6px}
.hdr-burger span{width:22px;height:2px;background:#fff}
.hdr.hdr--solid .hdr-logo span,.hdr.hdr--solid .hdr-logo b,.hdr.hdr--solid .hdr-nav,.hdr.hdr--solid .hdr-burger span{color:var(--ink)}
.hdr.hdr--solid .hdr-cta{background:var(--accent);color:#fff;border-color:var(--accent)}
.hdr.hdr--solid .hdr-cta:hover{background:var(--accent-dark);color:#fff}
#mob-nav{position:fixed;inset:0;background:var(--panel);color:var(--panel-text);z-index:100;display:none;flex-direction:column;padding:80px 32px 32px;gap:22px;font-size:1.2rem;font-weight:700}
#mob-nav.active{display:flex}
#mob-nav-close{position:absolute;top:24px;right:28px;font-size:2rem;cursor:pointer;color:#fff}

/* 브레드크럼 — 고정 헤더(mix-blend)에 안 가리도록 상단 여백 확보 + 텍스트 나열이 아니라 디자인 요소로 */
.crumb{font-size:.78rem;font-weight:600;letter-spacing:.02em;color:var(--ink-faint);padding:100px 0 18px;display:flex;align-items:center;gap:8px}
.crumb a{color:var(--ink-faint);transition:color .2s var(--ease)}
.crumb a:hover{color:var(--accent)}
.crumb-sep{width:5px;height:5px;border-top:1.5px solid var(--ink-faint);border-right:1.5px solid var(--ink-faint);transform:rotate(45deg);flex:none}
.crumb-current{color:var(--ink);font-weight:700}

/* 히어로 — design.md: min-height 100vh, flex align-items:flex-end, 18s 슬로우줌 + 3단 그라디언트 */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;overflow:hidden;color:#fff;background:var(--panel)}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;animation:heroZoom 18s ease-in-out infinite alternate}
.hero-bg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(16,19,28,.05) 0%,rgba(16,19,28,.18) 55%,rgba(16,19,28,.62) 100%)}
@keyframes heroZoom{from{transform:scale(1.05)}to{transform:scale(1.14)}}
@media (prefers-reduced-motion:reduce){.hero-bg{animation:none}}

/* 히어로 슬라이드쇼 — 5장, 리듬감 있게 빠른 템포로 크로스페이드(겹치는 구간에 흰 배경 안 비치도록 다음 장 페이드인이 이전 장 페이드아웃과 정확히 겹침) */
.hero-slideshow .hero-bg{opacity:0;animation-name:heroSlide;animation-duration:12s;animation-timing-function:ease-in-out;animation-iteration-count:infinite}
.hero-slideshow .hero-bg:nth-child(1){animation-delay:0s}
.hero-slideshow .hero-bg:nth-child(2){animation-delay:2.4s}
.hero-slideshow .hero-bg:nth-child(3){animation-delay:4.8s}
.hero-slideshow .hero-bg:nth-child(4){animation-delay:7.2s}
.hero-slideshow .hero-bg:nth-child(5){animation-delay:9.6s}
@keyframes heroSlide{
  0%{opacity:0;transform:scale(1.12)}
  5%{opacity:1;transform:scale(1.08)}
  20%{opacity:1;transform:scale(1.02)}
  25%{opacity:0;transform:scale(1)}
  100%{opacity:0}
}
@media (prefers-reduced-motion:reduce){
  .hero-slideshow .hero-bg{animation:none;opacity:0}
  .hero-slideshow .hero-bg:first-child{opacity:1}
}
.hero-inner{position:relative;z-index:2;max-width:var(--maxw-wide);margin:0 auto;padding:0 var(--gutter) 60px;width:100%}
.hero-eyebrow{display:inline-block;padding:.4rem .9rem;border:1px solid rgba(255,255,255,.4);border-radius:var(--radius-pill);font-size:.8rem;font-weight:700;letter-spacing:var(--tracking-caps);margin-bottom:20px}
.hero h1{font-size:clamp(3.2rem,11vw,8.5rem);font-weight:900;letter-spacing:-0.01em;line-height:1.08;margin-bottom:20px;word-break:normal;overflow-wrap:anywhere;max-width:100%}
.hero-sub{font-size:1.05rem;color:rgba(255,255,255,.85);max-width:560px;margin-bottom:30px}

/* 버튼 — design.md: 2px 라운드, hover 시 반전 */
.btn-row{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-block;padding:1rem 1.6rem;min-height:54px;line-height:calc(54px - 2rem);border-radius:var(--radius);font-weight:700;font-size:.95rem;border:1px solid transparent;transition:.3s var(--ease)}
.btn-primary{background:var(--accent);color:#fff;border-color:var(--accent)}
.btn-primary:hover{background:transparent;color:var(--accent)}
.btn-outline{border:1px solid rgba(255,255,255,.5);color:#fff}
.btn-outline:hover{background:#fff;color:var(--ink)}
.sec:not(.sec-dark) .btn-outline{border-color:var(--line-alt);color:var(--ink)}
.sec:not(.sec-dark) .btn-outline:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* 카드 그리드 — design.md: 5col/3col/2col, 헤어라인 + 0 라운드 + hover 전체 반전 */
.grid{display:grid;gap:20px}
.grid-2{grid-template-columns:repeat(2,1fr)}
.grid-cta{grid-template-columns:2fr 1fr}
.grid-3{grid-template-columns:repeat(3,1fr)}
.grid-5{grid-template-columns:repeat(3,1fr)}
.card{background:var(--surface);border:1px solid var(--line);border-radius:0;padding:clamp(24px,3.2vw,40px);transition:background .35s var(--ease),color .35s var(--ease),border-color .35s var(--ease)}
.card:hover{background:var(--ink);color:#fff;border-color:var(--ink)}
.card:hover p,.card:hover a{color:rgba(255,255,255,.75)}
.card h3{font-size:1.08rem;font-weight:900;margin-bottom:8px}
.card p{color:var(--ink-soft);font-size:.92rem}

/* 링크 카드(썸네일) — 0 라운드, hover 반전 */
.link-card{display:block;border-radius:0;overflow:hidden;background:var(--surface);border:1px solid var(--line);transition:background .3s var(--ease),transform .3s var(--ease)}
.link-card:hover{transform:translateY(-4px)}
.link-card img{width:100%;aspect-ratio:4/3;object-fit:cover}
.link-card .lc-body{padding:16px 18px;height:94px;overflow:hidden;transition:background .3s var(--ease),color .3s var(--ease)}
.link-card:hover .lc-body{background:var(--ink);color:#fff}
.link-card .lc-body h4{font-size:.98rem;margin-bottom:4px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.link-card .lc-body span{font-size:.82rem;color:var(--ink-faint);display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.link-card:hover .lc-body span{color:rgba(255,255,255,.6)}
.link-card.lc-cta{display:flex;align-items:center;justify-content:center;background:var(--accent);color:#fff;text-align:center;padding:24px}
.link-card.lc-cta h4{font-size:1.05rem;color:#fff}
.link-card.lc-cta:hover{background:transparent;outline:1px solid var(--accent);color:var(--accent)}
.link-card.lc-cta:hover h4{color:var(--accent)}

/* 마퀴 — 시공현장 사진이 끊김 없이 계속 흐르는 가로 스크롤 */
.marquee{overflow:hidden;width:100%;-webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent)}
.marquee-track{display:flex;gap:16px;width:max-content;animation:marqueeScroll 36s linear infinite}
.marquee-track img{height:240px;width:auto;flex:none;object-fit:cover;border:1px solid var(--line)}
.marquee:hover .marquee-track{animation-play-state:paused}
@keyframes marqueeScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
@media (max-width:768px){.marquee-track img{height:160px}}

/* 프로세스 */
.steps{display:flex;flex-direction:column;gap:0}
.step{display:flex;gap:20px;padding:24px 0;border-bottom:1px solid var(--line)}
.step:last-child{border-bottom:0}
.step-num{flex:none;width:44px;height:44px;border-radius:var(--radius-pill);background:var(--accent-soft);color:var(--accent);display:flex;align-items:center;justify-content:center;font-weight:900}
.step h4{font-size:1.02rem;font-weight:900;margin-bottom:6px}
.step p{color:var(--ink-soft);font-size:.92rem}

/* 비교표 */
table.cmp{width:100%;border-collapse:collapse;background:var(--surface);border:1px solid var(--line)}
table.cmp th,table.cmp td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:.92rem}
table.cmp th{background:var(--surface-2);font-weight:700}

/* 체크리스트 */
.checklist{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.checklist li{display:flex;gap:12px;align-items:flex-start;font-size:.95rem;color:var(--ink-soft)}
.checklist li::before{content:'';flex:none;width:16px;height:16px;margin-top:3px;border-radius:0;background:var(--accent)}

/* FAQ — design.md: 네이티브 details/summary, +/× 토글 */
.faq-item{border-bottom:1px solid var(--line);padding:6px 0}
.faq-item summary{cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;padding:16px 4px;font-weight:700;font-size:1rem}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:'+';font-size:1.4rem;color:var(--accent);transition:transform .3s var(--ease)}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 4px 18px;color:var(--ink-soft);font-size:.94rem;line-height:1.7}
.sec-dark .faq-item{border-color:var(--panel-2)}
.sec-dark .faq-item .faq-a{color:var(--panel-text-muted)}
.sec-invert .faq-item{border-color:rgba(10,10,10,.15)}
.sec-invert .faq-item .faq-a{color:#4A473F}

/* 트러스트 밴드 — design.md: 큰 숫자 + 밑줄 액센트 */
.trust-band{display:flex;flex-wrap:wrap;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.trust-item{flex:1 1 200px;padding:22px var(--gutter);border-right:1px solid var(--line);position:relative}
.trust-item:last-child{border-right:0}
.trust-item h4{font-size:.98rem;font-weight:900;margin-bottom:10px;display:inline-block;position:relative}
.trust-item h4::after{content:'';position:absolute;left:0;bottom:-6px;width:32px;height:2px;background:var(--accent)}
.trust-item p{font-size:.85rem;color:var(--ink-soft);margin-top:8px}

/* 상담 카드 — design.md: 헤어라인 2열, hover 전체 반전 */
.consult-card{border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:0;padding:26px;background:var(--surface);transition:background .35s var(--ease),color .35s var(--ease)}
.consult-card:hover{background:var(--accent);color:#fff}
.consult-card:hover .consult-hint{color:rgba(255,255,255,.8)}
.consult-card .consult-label{font-size:.82rem;font-weight:700;letter-spacing:.06em;color:var(--accent);margin-bottom:8px}
.consult-card:hover .consult-label{color:#fff}
.consult-card .consult-value{font-size:1.3rem;font-weight:900;margin-bottom:6px}
.consult-hint{font-size:.86rem;color:var(--ink-soft)}

/* 전화/문자 카드 구분 — 아이콘(도형)+색상만 다르게, 너비는 동일(grid-2) */
.consult-icon{width:44px;height:44px;border-radius:var(--radius-pill);display:flex;align-items:center;justify-content:center;margin-bottom:14px;background:var(--accent);transition:background .35s var(--ease)}
.consult-icon::before{content:''}
.consult-card.sms{border-left-color:var(--accent-2)}
.consult-card.sms .consult-label{color:var(--accent-2)}
.consult-card.sms .consult-icon{background:var(--accent-2)}
.consult-card.sms:hover{background:var(--accent-2)}
.consult-card.phone .consult-icon::before{width:16px;height:16px;border-radius:50%;border:3px solid #fff;box-sizing:border-box}
.consult-card.sms .consult-icon::before{width:18px;height:3px;border-radius:2px;background:#fff;box-shadow:0 6px 0 #fff,0 -6px 0 #fff}

/* 리빌 애니메이션 — design.md: opacity 0→1, translateY 28px→0, .9s */
.reveal{opacity:0;transform:translateY(28px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}

/* 푸터 — design.md: 검은 배경, 상단 헤어라인, text-faint 저작권. 블록 구성(사업자정보/바로가기/카테고리)은 스펙 고정이라 유지 */
.ftr{background:var(--panel);color:var(--panel-text-muted);padding:60px 0 0;border-top:1px solid var(--panel-2)}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1.6fr;gap:40px;padding-bottom:40px}
.ftr h5{color:#fff;font-size:.9rem;font-weight:900;margin-bottom:14px;letter-spacing:.04em}
.ftr-biz p{font-size:.85rem;line-height:2}
.ftr-links{display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.ftr-links a:hover{color:#fff}
.ftr-cats{display:flex;flex-direction:column;gap:10px;font-size:.88rem}
.ftr-cats a:hover{color:#fff}
.ftr-bottom{border-top:1px solid var(--panel-2);padding:20px var(--gutter);text-align:center;font-size:.78rem;color:#444}

/* 모바일 스티키 바 & 플로팅 CTA — design.md: translateY(110%)→0 @600px, 999px pill + 펄스 */
#mob-bar{position:fixed;left:0;right:0;bottom:0;z-index:60;display:none;grid-template-columns:1fr 1fr;background:var(--panel);transform:translateY(110%);transition:transform .4s var(--ease)}
#mob-bar.show{transform:translateY(0)}
#mob-bar a{padding:16px;text-align:center;color:#fff;font-weight:700;font-size:.92rem}
#mob-bar .mb-call{background:var(--accent)}
#mob-bar .mb-text{background:var(--panel-2)}
#float-cta{position:fixed;right:28px;bottom:28px;z-index:60;display:none}
#float-cta a{position:relative;display:flex;align-items:center;gap:10px;padding:14px 22px;border-radius:var(--radius-pill);background:var(--accent);color:#fff;font-weight:700;box-shadow:0 12px 30px -8px rgba(35,84,199,.5)}
#float-cta a::before{content:'';width:8px;height:8px;border-radius:50%;background:#fff;animation:ctaPulse 2.2s ease-in-out infinite}
@keyframes ctaPulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.6)}}

@media (min-width:769px){#float-cta{display:block}}

@media (max-width:1150px){
  .grid-5{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:1024px){
  .grid-3{grid-template-columns:repeat(2,1fr)}
  .ftr-grid{grid-template-columns:1fr 1fr}
}
@media (max-width:768px){
  .hdr-nav{display:none}
  .hdr-cta{display:none}
  .hdr-burger{display:flex}
  .hero{min-height:90vh}
  .grid-2,.grid-cta,.grid-3,.grid-5{grid-template-columns:1fr}
  .trust-item{flex:1 1 50%;border-bottom:1px solid var(--line)}
  .ftr-grid{grid-template-columns:1fr;padding-bottom:100px}
  #mob-bar{display:grid}
}
@media (max-width:560px){
  .hero h1{font-size:2rem}
  .hdr{mix-blend-mode:normal;background:rgba(16,19,28,.92)}
  .hdr-logo span,.hdr-burger span{color:#fff}
}