/* ═══ 구조·디자인 참고 출처 ═══
   참고 사이트: https://storeinterior.jibsarepair.com/
   메인 페이지 구조 패턴: 3.사례우선형 (직전 프로젝트: 없음 — 최초 프로젝트, 3종 중 무작위 선택)
   정보구조(IA, 참고 사이트 원본): Header → Hero(사진+H1) → STATEMENT(인용+사진) → TRUST(사업자정보)
     → INDEX(목차 카드) → EXPERIENCE(시공갤러리) → PROCESS(4단계) → GUIDE(안내링크) → EXPERTISE(업종별 체크)
     → FAQ(아코디언) → CTA → Footer
   레이아웃: idx-list 2열/모바일1열, tilt/case-grid 3열, trust-grid 4열, expertise 2x2, proc-list 가로 4단
     카드 radius 8px, pill 버튼 999px, 그림자 3단계(sm/md/lg) — 근거: storeinterior.jibsarepair.com/assets/css/style.css 원본 직접 확인
   타이포: 디스플레이 h1 clamp(2.3rem,5vw,3.6rem) 폰트웨이트300, 섹션제목 300/500 혼용, 좌측 고스트 넘버(counter) — 근거: 위와 동일 원본 CSS 확인
   폰트: 'Paperlogy','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif (jsdelivr CDN, 300/400/500만 사용) — 근거: 원본 CSS @font-face 직접 확인
   컬러: 참고 사이트 컬러 미반영(G-2) — 신규 배색(딥네이비 잉크 + 번트오렌지 단색 강조)로 새로 선정
   ═══════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}

@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-3Light.woff2') format('woff2');font-weight:300;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-4Regular.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Paperlogy';src:url('https://cdn.jsdelivr.net/gh/fonts-archive/Paperlogy/Paperlogy-5Medium.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}

:root{
  --bg:#f4f1ea;
  --paper:#ffffff;
  --ink:#15202b;
  --ink-2:#1e2c3a;
  --accent:#b5622a;
  --accent-dark:#8f4c1f;
  --accent-rgb:181,98,42;
  --accent-soft:#f4e3d3;
  --steel:#5b6570;
  --line:#e2ddd2;
  --line-dark:rgba(255,255,255,.14);
  --on-light:#15202b;
  --on-dark:#ffffff;
  --ff:'Paperlogy','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  --ff-mono:ui-monospace,'SF Mono',Menlo,Consolas,monospace;
  --max:1220px;
  --radius:8px;
  --radius-sm:6px;
  --radius-pill:999px;
  --shadow-sm:0 2px 4px rgba(21,32,43,.08),0 1px 3px rgba(21,32,43,.1);
  --shadow-md:0 8px 20px rgba(21,32,43,.12),0 3px 6px rgba(21,32,43,.08);
  --shadow-lg:0 24px 48px -12px rgba(21,32,43,.24),0 10px 20px rgba(21,32,43,.1);
}

html{scroll-behavior:smooth}
body,p,h1,h2,h3,h4,li,td,th,a,span,div{word-break:keep-all;overflow-wrap:break-word}
body{counter-reset:sec;font-family:var(--ff);font-weight:400;color:var(--on-light);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{text-decoration:none;color:inherit}
ul,ol{list-style:none}
button{font-family:var(--ff);border:none;background:none;cursor:pointer}
table{border-collapse:collapse;width:100%}
h1,h2,h3,h4{font-weight:500;letter-spacing:-.01em;line-height:1.25}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.wrap{max-width:var(--max);margin:0 auto;padding:0 24px}
.tbl-scroll{overflow-x:auto}
section{padding:80px 0}
.sec-cream{background:var(--paper)}
.sec-dark{background:var(--ink);color:var(--on-dark)}
@media(max-width:768px){section{padding:56px 0}}

/* 버튼 */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:15px 30px;border-radius:var(--radius-pill);font-weight:400;font-size:.95rem;box-shadow:var(--shadow-sm);transition:.18s}
.btn-primary{background:var(--accent);color:#fff}
.btn-outline{background:transparent;color:var(--on-dark);border:1px solid rgba(255,255,255,.32);box-shadow:none}
.btn-outline-dark{background:#fff;color:var(--ink);border:1.5px solid var(--ink)}
@media(hover:hover){
  .btn-primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-md)}
  .btn-outline:hover{border-color:rgba(255,255,255,.6);background:rgba(255,255,255,.08)}
  .btn-outline-dark:hover{border-color:var(--accent);color:var(--accent)}
}

/* 헤더 */
.hdr{position:sticky;top:0;z-index:100;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.hdr-inner{max-width:var(--max);margin:0 auto;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.hdr-logo{font-weight:500;font-size:1.05rem;color:var(--on-dark);display:inline-flex;align-items:center;gap:9px}
.hdr-logo::before{content:'';width:8px;height:8px;background:var(--accent);flex-shrink:0}
.hdr-nav{display:flex;gap:28px}
.hdr-nav a{color:rgba(244,241,234,.72);font-size:.88rem;font-weight:500;position:relative}
.hdr-nav a::after{content:'';position:absolute;left:0;bottom:-4px;width:100%;height:2px;background:var(--accent);transform:scaleX(0);transition:transform .25s}
@media(hover:hover){.hdr-nav a:hover{color:var(--on-dark)}.hdr-nav a:hover::after{transform:scaleX(1)}}
.hdr-cta{background:var(--accent);color:#fff;padding:10px 20px;border-radius:var(--radius-pill);font-weight:500;font-size:.85rem}
.hdr-burger{display:none;flex-direction:column;justify-content:center;align-items:center;gap:5px;width:44px;height:44px}
.hdr-burger span{display:block;width:24px;height:2px;background:var(--on-dark)}
#mob-nav{display:none}
@media(max-width:768px){
  .hdr-nav,.hdr-phone{display:none}
  .hdr-burger{display:flex}
  #mob-nav{position:fixed;top:0;right:-100%;width:78%;max-width:320px;height:100vh;background:var(--ink);z-index:200;padding:28px 24px;transition:right .3s;overflow-y:auto}
  #mob-nav.active{right:0}
  #mob-nav a{display:block;color:var(--on-dark);font-weight:500;padding:14px 0;border-bottom:1px solid var(--line-dark)}
  #mob-nav-close{color:var(--on-dark);font-size:1.6rem;padding:8px;display:inline-flex;width:44px;height:44px;align-items:center;justify-content:center;margin:-8px 0 4px -8px}
  body{padding-bottom:64px}
}

/* 히어로 밴드 — H1 + 답변형 리드 문단, 사진 배경 + 스크림 */
.hero{position:relative;background:var(--ink);color:var(--on-dark);isolation:isolate;padding:64px 0 56px}
.hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.32;z-index:-2}
.hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,32,43,.75),rgba(21,32,43,.94));z-index:-1}
.hero-badge{display:inline-flex;align-items:center;gap:8px;font-weight:500;color:rgba(244,241,234,.65);font-size:.82rem;letter-spacing:.06em;margin-bottom:16px;text-transform:uppercase}
.hero-badge::before{content:'';width:18px;height:2px;background:var(--accent)}
h1.hero-h1{font-size:clamp(2.1rem,4.6vw,3.4rem);font-weight:300;line-height:1.15;margin-bottom:18px;letter-spacing:-.01em}
.hero-lead{color:rgba(244,241,234,.88);font-size:1.05rem;line-height:1.75;max-width:640px;margin-bottom:26px}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
@media(max-width:768px){.hero{padding:44px 0 40px}}

/* 섹션 헤드 — 좌측 고스트 넘버 */
.sec-head{max-width:680px;margin:0 0 40px;position:relative;padding-left:78px;min-height:60px}
.sec-head::before{counter-increment:sec;content:counter(sec,decimal-leading-zero);position:absolute;left:0;top:-.28em;font-size:3.1rem;line-height:1;font-weight:300;color:rgba(21,32,43,.08)}
.sec-dark .sec-head::before{color:rgba(244,241,234,.08)}
.sec-eyebrow{font-weight:500;color:var(--accent);font-size:.8rem;letter-spacing:.08em;margin-bottom:10px;text-transform:uppercase}
.sec-title{font-size:clamp(1.4rem,2.5vw,1.95rem);font-weight:300;line-height:1.35;letter-spacing:-.015em}
.sec-title--bold{font-weight:500}
.sec-desc{color:var(--steel);margin-top:12px;font-size:.98rem;max-width:56ch}
.sec-dark .sec-desc{color:rgba(244,241,234,.7)}
@media(max-width:600px){
  .sec-head{padding-left:0}
  .sec-head::before{position:static;display:block;font-size:2rem;margin-bottom:6px}
}

/* 카드 그리드 공통 */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
@media(max-width:1024px){.g4{grid-template-columns:repeat(2,1fr)}}
@media(max-width:768px){.g2,.g3{grid-template-columns:1fr}}

.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:32px 28px;transition:.18s}
@media(hover:hover){.card:hover{box-shadow:var(--shadow-md);transform:translateY(-3px)}}
.card h3{font-size:1.05rem;font-weight:500;margin-bottom:10px}
.card p{color:var(--steel);font-size:.93rem}
.card-icon{font-family:var(--ff-mono);font-size:.9rem;font-weight:500;color:var(--accent);display:inline-flex;align-items:center;justify-content:center;width:34px;height:34px;background:var(--accent-soft);border-radius:var(--radius-sm);margin-bottom:16px}

/* 시공사례 그리드 (F섹션, 사례 우선형이므로 최상단 근처에 배치) */
.case-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:8px}
.case-card{position:relative;display:block;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line);box-shadow:var(--shadow-md);transition:.3s}
.case-card img{aspect-ratio:4/3;object-fit:cover;width:100%;transition:transform .5s}
.case-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 16px 12px;background:linear-gradient(to top,rgba(21,32,43,.88),transparent);color:#fff}
.case-cap .cc-num{font-family:var(--ff-mono);color:var(--accent);font-size:.76rem;font-weight:500;display:block;margin-bottom:4px}
.case-cap .cc-title{font-size:.92rem;font-weight:500;letter-spacing:-.01em}
@media(hover:hover){.case-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}.case-card:hover img{transform:scale(1.06)}}
@media(max-width:768px){.case-grid{grid-template-columns:repeat(2,1fr);gap:16px}}
@media(max-width:480px){.case-grid{grid-template-columns:1fr}}

/* 인덱스 목차 (NSEO 링크) */
.idx-list{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.idx-row{border:1px solid var(--line);border-radius:var(--radius);background:var(--paper);position:relative;overflow:hidden}
.idx-row::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--accent);transform:scaleY(0);transition:transform .25s}
.idx-row a{display:flex;align-items:center;gap:16px;padding:22px 20px}
.idx-num{font-family:var(--ff-mono);font-size:1.3rem;color:var(--accent);font-weight:500;flex-shrink:0}
.idx-cat{display:block;color:var(--steel);font-size:.76rem;font-weight:500;text-transform:uppercase;letter-spacing:.05em;margin-bottom:6px}
.idx-title{display:block;font-size:1.08rem;font-weight:500;letter-spacing:-.01em}
@media(hover:hover){.idx-row a:hover{background:rgba(var(--accent-rgb),.05)}.idx-row:hover::before{transform:scaleY(1)}}
@media(max-width:640px){.idx-list{grid-template-columns:1fr}}

/* 신뢰정보 */
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.trust-item{background:#fff;padding:24px 20px;display:flex;flex-direction:column;gap:8px}
.trust-label{font-size:.76rem;color:var(--steel);font-weight:500;text-transform:uppercase;letter-spacing:.04em}
.trust-value{font-size:1rem;font-weight:500;color:var(--ink)}
@media(max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.trust-grid{grid-template-columns:1fr}}

/* 프로세스 */
.proc-list{display:flex;border-top:1px solid var(--line);margin:0}
.proc-step{flex:1;padding:0 26px;position:relative}
.proc-step:first-child{padding-left:0}
.proc-step:not(:last-child){border-right:1px solid var(--line)}
.proc-step::before{content:'';position:absolute;left:0;top:-1px;width:32px;height:2px;background:var(--accent)}
.proc-num{display:block;font-family:var(--ff-mono);color:var(--accent);font-size:.76rem;font-weight:500;letter-spacing:.08em;margin:20px 0 10px}
.proc-step p{font-size:1rem;font-weight:500;line-height:1.5}
@media(max-width:768px){
  .proc-list{flex-direction:column;border-top:none}
  .proc-step{padding:0 0 22px 22px;border-left:1px solid var(--line)}
  .proc-step:not(:last-child){border-right:none}
  .proc-step::before{left:-1px;top:0;width:2px;height:32px}
  .proc-num{margin:0 0 8px}
}

/* 상황별 체크포인트 (2x2 십자 그리드) */
.check-cross{display:grid;grid-template-columns:repeat(2,1fr);max-width:900px;margin:0 auto}
.check-card{padding:38px 42px;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark)}
.check-cross .check-card:nth-child(even){border-right:none}
.check-cross .check-card:nth-child(3),.check-cross .check-card:nth-child(4){border-bottom:none}
.chk-tag{display:block;font-family:var(--ff-mono);color:rgba(244,241,234,.5);font-size:.84rem;font-weight:500;margin-bottom:12px}
.check-card h3{font-size:1.12rem;font-weight:500;margin-bottom:9px;color:var(--on-dark)}
.check-card p{color:rgba(244,241,234,.62);font-size:.92rem}
@media(max-width:768px){
  .check-cross{grid-template-columns:1fr;max-width:480px}
  .check-card{border-right:none!important;padding:26px 4px}
  .check-cross .check-card:nth-child(3){border-bottom:1px solid var(--line-dark)}
  .check-cross .check-card:last-child{border-bottom:none!important}
}

/* FAQ 아코디언 */
.faq-item{border-bottom:1px solid var(--line)}
.faq-q{display:flex;justify-content:space-between;align-items:center;padding:20px 4px;font-weight:500;cursor:pointer;gap:16px}
.faq-q .faq-plus{font-family:var(--ff-mono);color:var(--accent);font-size:1.2rem;transition:transform .25s;flex-shrink:0}
.faq-item.active .faq-plus{transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s ease;color:var(--steel);font-size:.94rem;padding:0 4px}
.faq-item.active .faq-a{padding-bottom:20px}

/* CTA 블록 */
.cta-block{background:var(--ink);padding:60px 32px;text-align:center;border-radius:var(--radius);border-top:3px solid var(--accent);box-shadow:var(--shadow-lg)}
.cta-block h3{color:#fff;font-size:clamp(1.4rem,3vw,1.9rem);font-weight:500;margin-bottom:14px;line-height:1.35}
.cta-block p{color:rgba(255,255,255,.72);margin-bottom:28px;line-height:1.6}

/* 사례 상세 — 인라인 블로그형 */
.story{max-width:760px;margin:0 auto}
.story p{font-size:1rem;line-height:1.85;margin-bottom:22px;color:var(--on-light)}
.story figure{margin:30px 0}
.story figure img{border-radius:var(--radius);box-shadow:var(--shadow-md);width:100%;aspect-ratio:4/3;object-fit:cover}
.story figcaption{margin-top:10px;font-size:.86rem;color:var(--steel);font-weight:500}
.story-summary{background:var(--paper);border:1px solid var(--line);border-left:3px solid var(--accent);border-radius:var(--radius);padding:26px 30px;margin:34px 0}
.story-summary h4{font-size:1rem;margin-bottom:14px}
.story-summary li{position:relative;padding-left:22px;font-size:.94rem;color:var(--steel);margin-bottom:10px;line-height:1.6}
.story-summary li::before{content:'✓';position:absolute;left:0;color:var(--accent);font-weight:700}
.story-quote{border-left:3px solid var(--accent);padding-left:22px;margin:34px 0;font-size:1.02rem;font-style:normal;color:var(--ink)}
.story-quote cite{display:block;margin-top:10px;font-size:.85rem;color:var(--steel);font-style:normal}
.case-meta{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 6px}
.case-meta span{background:var(--accent-soft);color:var(--accent-dark);font-size:.8rem;font-weight:500;padding:6px 14px;border-radius:var(--radius-pill)}
.related-links{display:flex;gap:16px;flex-wrap:wrap;margin-top:30px}
.related-links a{border:1px solid var(--line);border-radius:var(--radius-pill);padding:10px 20px;font-size:.88rem;font-weight:500}
@media(hover:hover){.related-links a:hover{border-color:var(--accent);color:var(--accent)}}

/* 비교표 */
.cmp-table{width:100%;border-collapse:collapse;margin-top:8px}
.cmp-table th,.cmp-table td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;font-size:.91rem}
.cmp-table th{background:var(--ink);color:var(--on-dark);font-weight:500;font-size:.83rem}

/* 페이지 히어로(세부페이지 상단) */
.page-hero{position:relative;background:var(--ink);color:#fff;padding-top:130px;padding-bottom:56px;isolation:isolate}
.page-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:-2}
.page-hero::before{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(21,32,43,.8),rgba(21,32,43,.94));z-index:-1}
@media(max-width:768px){.page-hero{padding-top:96px}}

/* 푸터 */
.ftr{background:var(--ink);color:rgba(244,241,234,.72);padding:52px 0 26px}
.ftr-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px}
.ftr h5{color:var(--on-dark);font-weight:500;margin-bottom:16px;font-size:.86rem;text-transform:uppercase;letter-spacing:.05em}
.ftr a{display:block;padding:5px 0;font-size:.9rem}
@media(hover:hover){.ftr a:hover{color:var(--on-dark)}}
.ftr-biz p{font-size:.86rem;line-height:1.9}
.ftr-bottom{max-width:var(--max);margin:30px auto 0;padding:20px 24px 0;border-top:1px solid var(--line-dark);font-size:.78rem;color:rgba(244,241,234,.42)}
@media(max-width:768px){.ftr-grid{grid-template-columns:1fr;gap:26px}}

/* 모바일 스티키 CTA */
#mob-bar{display:none}
@media(max-width:768px){
  #mob-bar{display:flex;position:fixed;bottom:0;left:0;right:0;z-index:150;background:var(--ink);padding:10px 16px;gap:10px;border-top:2px solid var(--accent)}
  #mob-bar a{flex:1;text-align:center;padding:12px;border-radius:var(--radius);font-weight:500;font-size:.9rem}
  #mob-bar .mb-call{background:var(--accent);color:#fff}
  #mob-bar .mb-text{background:transparent;border:1px solid rgba(244,241,234,.4);color:#fff}
}

/* 스크롤 리빌 */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .6s cubic-bezier(.16,1,.3,1),transform .6s cubic-bezier(.16,1,.3,1)}
.reveal.in{opacity:1;transform:translateY(0)}
.stagger>*{opacity:0;transform:translateY(16px);transition:opacity .5s,transform .5s}
.stagger.in>*{opacity:1;transform:translateY(0)}
.stagger.in>*:nth-child(1){transition-delay:.05s}
.stagger.in>*:nth-child(2){transition-delay:.1s}
.stagger.in>*:nth-child(3){transition-delay:.15s}
.stagger.in>*:nth-child(4){transition-delay:.2s}
.stagger.in>*:nth-child(5){transition-delay:.25s}
.stagger.in>*:nth-child(6){transition-delay:.3s}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}}