/* ══════════════════════════════════════════════
   양평공방 — 따뜻하고 포근한 재구축 스타일
   팔레트: 크림 / 밝은 베이지 / 딥브라운 / 테라코타 / 세이지 / 우드 브라운
   ══════════════════════════════════════════════ */

:root{
  --cream:#FAF6EF;        /* 기본 배경 */
  --beige:#F1E8DB;        /* 섹션 구분 배경 */
  --brown:#3B2F25;        /* 기본 글자 (검정 대신) */
  --brown-soft:#6B5D4F;   /* 보조 글자 */
  --terra:#D96F45;        /* 포인트 (버튼·강조) */
  --terra-deep:#C25A32;   /* 포인트 눌림/호버 */
  --sage:#7E8F6C;         /* 보조 포인트 */
  --wood:#4A3A2C;         /* 진한 배경 섹션 */
  --line:rgba(59,47,37,.14);
  --radius:18px;
  --ease:cubic-bezier(.22,.61,.21,1);
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,system-ui,sans-serif;
  font-size:17px;line-height:1.7;
  color:var(--brown);background:var(--cream);
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
img,video{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}

/* ── 고정 배경: 화면 뒤에 붙박이, 섹션들이 위를 덮으며 지나감 ── */
.fixed-bg{position:fixed;inset:0;z-index:-1;background:var(--wood)}
.fixed-bg img{width:100%;height:100%;object-fit:cover;filter:sepia(.25) saturate(1.05)}
.fixed-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(44,33,24,.78),rgba(59,47,37,.72) 50%,rgba(44,33,24,.82));
}

/* ── 공용 버튼 ─────────────────────────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-height:48px;padding:12px 26px;border-radius:999px;
  font-weight:700;font-size:1rem;letter-spacing:-.01em;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background .25s,color .25s,border-color .25s;
}
.btn-fill{background:var(--terra);color:#fff;box-shadow:0 8px 24px rgba(217,111,69,.35)}
.btn-fill:hover{background:var(--terra-deep);transform:translateY(-3px);box-shadow:0 14px 30px rgba(217,111,69,.45)}
.btn-ghost{border:1.5px solid rgba(250,246,239,.65);color:var(--cream);backdrop-filter:blur(4px)}
.btn-ghost:hover{border-color:#fff;background:rgba(250,246,239,.14);transform:translateY(-3px)}
.btn-big{min-height:56px;padding:15px 34px;font-size:1.06rem}

/* ══════════════════════════════════════════════
   상단 메뉴
   ══════════════════════════════════════════════ */
.gnb{
  position:fixed;inset:0 0 auto 0;z-index:100;
  transition:background .4s var(--ease),box-shadow .4s var(--ease);
}
.gnb-in{
  max-width:1200px;margin:0 auto;padding:0 20px;
  height:68px;display:flex;align-items:center;gap:28px;
}
.logo{
  font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:var(--cream);
  transition:color .35s;margin-right:auto;display:flex;align-items:center;gap:4px;
}
.logo-star{color:var(--terra);font-size:.9em}
.gnav{display:none;gap:6px}
.gnav-link{
  padding:10px 14px;border-radius:10px;font-weight:600;font-size:1rem;
  color:rgba(250,246,239,.92);transition:color .3s,background .3s;
}
.gnav-link:hover{color:#fff;background:rgba(250,246,239,.12)}
.gnb-cta{display:none;min-height:44px;padding:9px 20px;font-size:.95rem}

/* 스크롤 후: 크림 배경으로 전환 */
.gnb.solid{background:rgba(250,246,239,.92);backdrop-filter:blur(14px);box-shadow:0 1px 0 var(--line)}
.gnb.solid .logo{color:var(--brown)}
.gnb.solid .gnav-link{color:var(--brown-soft)}
.gnb.solid .gnav-link:hover{color:var(--brown);background:rgba(59,47,37,.06)}
.gnb.solid .burger span{background:var(--brown)}

/* 데스크톱 펼침 메뉴 */
.mega{
  display:none;position:absolute;inset:68px 0 auto 0;
  background:rgba(250,246,239,.97);backdrop-filter:blur(16px);
  border-top:1px solid var(--line);box-shadow:0 30px 60px rgba(59,47,37,.14);
  opacity:0;transform:translateY(-8px);pointer-events:none;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.mega.open{opacity:1;transform:none;pointer-events:auto}
.mega-in{
  max-width:1200px;margin:0 auto;padding:34px 20px 40px;
  display:grid;grid-template-columns:repeat(4,1fr);gap:28px;
}
.mega-head{
  display:block;font-weight:800;font-size:1.06rem;margin-bottom:14px;color:var(--brown);
  padding-bottom:10px;border-bottom:2px solid var(--terra);
}
.mega-link{
  display:flex;align-items:center;gap:8px;padding:9px 6px;border-radius:8px;
  color:var(--brown-soft);font-size:.97rem;transition:color .25s,background .25s,padding-left .25s;
}
.mega-link .arr{color:var(--terra);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.mega-link:hover{color:var(--brown);background:rgba(217,111,69,.08);padding-left:12px}
.mega-link:hover .arr{opacity:1;transform:none}

/* 햄버거 */
.burger{
  width:48px;height:48px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
}
.burger span{width:24px;height:2.5px;border-radius:2px;background:var(--cream);transition:transform .35s var(--ease),opacity .25s,background .35s}
.burger.open span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger.open span:nth-child(2){opacity:0}
.burger.open span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}
.mnav-open .burger span{background:var(--brown)}

/* 모바일 전체 화면 메뉴 */
.mnav{
  position:fixed;inset:0;z-index:90;background:var(--cream);
  padding:92px 24px 40px;overflow-y:auto;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease);
}
.mnav.open{opacity:1;pointer-events:auto}
.mnav-in{max-width:520px;margin:0 auto;display:flex;flex-direction:column;gap:4px}
.macc-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;
  padding:16px 8px;font-size:1.2rem;font-weight:800;color:var(--brown);
  border-bottom:1px solid var(--line);
}
.macc-caret{color:var(--terra);font-weight:700;transition:transform .35s var(--ease)}
.macc-btn[aria-expanded="true"] .macc-caret{transform:rotate(45deg)}
.macc-panel{
  overflow:hidden;max-height:0;transition:max-height .45s var(--ease);
}
.macc-panel>a{min-height:48px;display:flex;align-items:center;padding:0 14px;color:var(--brown-soft);border-radius:10px}
.macc-panel>a:active{background:var(--beige)}
.macc.open .macc-panel{max-height:480px}
.mnav-cta{margin-top:26px}

/* ══════════════════════════════════════════════
   히어로 (풀스크린)
   ══════════════════════════════════════════════ */
.hero{
  position:relative;min-height:100svh;
  display:flex;flex-direction:column;justify-content:center;
  color:var(--cream);overflow:hidden;
}

/* 배경 슬라이드 + 천천히 움직이는 배경 */
.hero-bg{position:absolute;inset:0;z-index:-1;background:var(--wood)}
.hbg{position:absolute;inset:0;opacity:0;transition:opacity .8s var(--ease)}
.hbg.on{opacity:1}
.hbg-media{
  width:100%;height:100%;object-fit:cover;
  filter:sepia(.18) saturate(1.05) brightness(.96);   /* 따뜻한 색감 보정 */
}
/* 그로스코드식 줌아웃: 살짝 확대된 상태로 시작해 천천히 원래 크기로 */
.hbg.on .hbg-media{animation:zoomout 5.5s var(--ease) forwards}
@keyframes zoomout{from{transform:scale(1.14)}to{transform:scale(1)}}

/* 따뜻한 어두운 덮개: 글자가 잘 읽히게 */
.hero-tint{
  position:absolute;inset:0;
  background:
    linear-gradient(180deg,rgba(59,47,37,.42) 0%,rgba(74,58,44,.30) 45%,rgba(59,47,37,.62) 100%),
    linear-gradient(100deg,rgba(59,47,37,.55) 0%,rgba(59,47,37,.12) 70%);
}

.hero-in{
  width:100%;max-width:1200px;margin:0 auto;
  padding:110px 24px 40px;
}

/* 작은 안내 배지 */
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 16px;border-radius:999px;
  background:rgba(250,246,239,.14);border:1px solid rgba(250,246,239,.28);
  backdrop-filter:blur(6px);
  font-size:.92rem;font-weight:600;letter-spacing:-.01em;
}

/* 큰 타이포 */
.hslider{position:relative;margin:26px 0 8px}
.hslide{display:none}
.hslide.on{display:block}
.hero-title{
  font-size:clamp(2.1rem,7.6vw,4.6rem);
  line-height:1.22;letter-spacing:-.035em;font-weight:800;
}
.hero-title em{font-style:normal;color:var(--terra);position:relative}
.hero-title .hl{display:block;overflow:hidden}
.hero-title .hl-in{display:inline-block;transform:translateY(110%)}
.hslide.on .hl-in{animation:riseup .9s var(--ease) forwards}
.hslide.on .hl:nth-child(2) .hl-in{animation-delay:.18s}
@keyframes riseup{to{transform:translateY(0)}}
.hero-sub{
  margin-top:20px;font-size:clamp(1rem,2.6vw,1.22rem);line-height:1.75;
  color:rgba(250,246,239,.88);
  opacity:0;transform:translateY(16px);
}
.hslide.on .hero-sub{animation:fadeup .8s var(--ease) .4s forwards}
@keyframes fadeup{to{opacity:1;transform:none}}

/* 등장 애니메이션 (히어로 로드 시) */
.up{opacity:0;transform:translateY(18px);animation:fadeup .8s var(--ease) forwards}
.d1{animation-delay:.15s}
.d4{animation-delay:.65s}
.d5{animation-delay:.85s}

.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}

/* 슬라이드 조작 */
.hctrl{display:flex;align-items:center;gap:14px;margin-top:44px}
.hbtn{
  width:48px;height:48px;border-radius:50%;
  border:1.5px solid rgba(250,246,239,.4);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
  transition:background .3s,border-color .3s,transform .3s var(--ease);
}
.hbtn:hover{background:rgba(250,246,239,.15);border-color:#fff;transform:scale(1.06)}
.hcount{font-size:.95rem;color:rgba(250,246,239,.75);letter-spacing:.06em}
.hcount b{color:#fff;font-weight:800}
.hbar{
  width:120px;height:2px;border-radius:2px;background:rgba(250,246,239,.25);overflow:hidden;
}
.hbar i{display:block;height:100%;width:0;background:var(--terra);transition:width .2s linear}

/* 스크롤 유도 */
.scrollcue{
  position:absolute;left:50%;bottom:22px;transform:translateX(-50%);
  display:flex;flex-direction:column;align-items:center;gap:4px;
  color:rgba(250,246,239,.8);min-width:48px;min-height:48px;justify-content:flex-end;
}
.scrollcue-txt{font-size:.82rem;letter-spacing:.12em}
.scrollcue svg{animation:bob 1.8s ease-in-out infinite}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(7px)}}

/* ══════════════════════════════════════════════
   섹션 공용
   ══════════════════════════════════════════════ */
.sec{padding:84px 0;background:var(--cream)}
.wrap{max-width:1200px;margin:0 auto;padding:0 24px}
.sec-head{margin-bottom:38px}
.sec-eyebrow{
  display:inline-block;margin-bottom:14px;padding:7px 14px;border-radius:999px;
  background:rgba(217,111,69,.12);color:var(--terra-deep);
  font-size:.9rem;font-weight:700;letter-spacing:-.01em;
}
.sec-title{
  font-size:clamp(1.75rem,5.4vw,2.9rem);
  line-height:1.3;letter-spacing:-.03em;font-weight:800;
}

.sec-sub{
  margin-top:16px;color:var(--brown-soft);
  font-size:1.02rem;line-height:1.75;
}
.sec-alt{background:var(--beige)}
/* 고정 배경이 비쳐 보이는 섹션 (그로스코드식 "창문") */
.sec-window{background:transparent;color:var(--cream)}
.sec-window .sec-title{color:var(--cream)}
.sec-window .sec-sub{color:rgba(250,246,239,.85)}
.sec-window .sec-eyebrow{background:rgba(250,246,239,.14);color:#F3C9B4}

/* ══════════════════════════════════════════════
   서비스 (카드 6장)
   ══════════════════════════════════════════════ */
.svcs{display:grid;gap:14px}
.svc{
  position:relative;display:block;padding:26px 24px 24px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.svc:hover{
  transform:translateY(-6px);border-color:transparent;
  box-shadow:0 18px 38px rgba(59,47,37,.13),0 0 26px rgba(217,111,69,.22);
}
/* 호버 시 반짝이며 흐르는 그라데이션 테두리 */
.svc::before{
  content:"";position:absolute;inset:-1.5px;border-radius:calc(var(--radius) + 1.5px);
  padding:3px;pointer-events:none;
  background:linear-gradient(115deg,var(--terra),#F3C9B4,var(--sage),#F3C9B4,var(--terra));
  background-size:280% 280%;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;mask-composite:exclude;
  opacity:0;transition:opacity .35s;
}
.svc:hover::before{opacity:1;animation:borderflow 2.4s linear infinite}
@keyframes borderflow{
  0%{background-position:0% 50%}
  100%{background-position:280% 50%}
}
.svc-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:54px;height:54px;border-radius:16px;margin-bottom:16px;
  background:var(--beige);font-size:1.6rem;
  transition:background .35s,transform .45s var(--ease);
}
.svc:hover .svc-ico{background:rgba(217,111,69,.16);transform:scale(1.08) rotate(-4deg)}
.svc-tit{
  display:block;font-size:1.14rem;font-weight:800;letter-spacing:-.02em;margin-bottom:6px;
}
.svc p{color:var(--brown-soft);font-size:.98rem}
.svc-arrow{
  position:absolute;right:22px;top:26px;
  color:var(--terra);font-size:1.2rem;font-weight:700;
  opacity:0;transform:translateX(-6px);
  transition:opacity .35s,transform .35s var(--ease);
}
.svc:hover .svc-arrow{opacity:1;transform:none}

/* ══════════════════════════════════════════════
   고민 공감 (그로스코드식 사진 슬라이스 3장)
   ══════════════════════════════════════════════ */
.woes-sec{
  position:relative;overflow:hidden;
  background:var(--wood);color:var(--cream);
}
/* 은은한 배경: 컴퓨터 작업 책상 사진 */
.woes-bg{position:absolute;inset:0}
.woes-bg img{
  width:100%;height:100%;object-fit:cover;
  opacity:.12;filter:sepia(.3) brightness(.9);
}
.woes-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(74,58,44,.5) 0%,rgba(74,58,44,0) 30%,rgba(74,58,44,0) 65%,rgba(74,58,44,.6) 100%);
}
.woes-sec .wrap{position:relative}
.woes-sec .sec-title{color:var(--cream)}
.woes-sec .sec-eyebrow{background:rgba(250,246,239,.14);color:#F3C9B4}

/* 슬라이스 패널 */
.slices{display:grid;gap:16px}
.slice{
  position:relative;display:block;overflow:hidden;border-radius:var(--radius);
  height:230px;
}
/* 등장: 아래에서 잘려 올라오며 펼쳐지는 슬라이스 효과 */
.slice.reveal{
  transform:translateY(26px);opacity:0;clip-path:inset(100% 0 0 0);
  transition:opacity .7s var(--ease),transform .7s var(--ease),clip-path .9s var(--ease);
  transition-delay:var(--d,0s);
}
.slice.reveal.in{opacity:1;transform:none;clip-path:inset(0 0 0 0)}
.slice-img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:sepia(.12) saturate(1.02);
  transition:transform .8s var(--ease);
}
.slice:hover .slice-img{transform:scale(1.06)}
/* 기본 상태: 아래쪽 어둡게 + 라벨 */
.slice-shade{
  position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(59,47,37,.05) 40%,rgba(35,27,20,.78) 100%);
  transition:opacity .4s;
}
.slice-label{
  position:absolute;left:0;right:0;bottom:20px;z-index:2;
  display:flex;flex-direction:column;gap:3px;align-items:center;text-align:center;
  font-size:1.15rem;font-weight:800;letter-spacing:-.02em;color:#fff;
  transition:opacity .25s,transform .4s var(--ease);
}
.slice-label small{font-size:.85rem;font-weight:400;color:rgba(250,246,239,.75)}
/* 마우스 올리면: 진하게 덮이고 설명이 떠오름 (그로스코드식) */
.slice-hover{
  position:absolute;inset:0;z-index:3;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;
  padding:20px;text-align:center;
  background:rgba(44,33,24,.86);
  opacity:0;transition:opacity .45s var(--ease);
}
.slice-hover .slice-tag{
  font-size:1.3rem;font-weight:800;letter-spacing:-.02em;color:#fff;
  transform:translateY(12px);transition:transform .45s var(--ease);
}
.slice-hover p{
  font-size:1rem;line-height:1.7;color:rgba(250,246,239,.85);
  transform:translateY(12px);transition:transform .45s var(--ease) .05s;
}
.slice-hover .slice-arrow{
  margin-top:6px;font-size:1.5rem;color:var(--terra);
  transform:translateY(12px);transition:transform .45s var(--ease) .1s,margin-left .3s;
}
.slice:hover .slice-hover,.slice:focus-visible .slice-hover{opacity:1}
.slice:hover .slice-hover .slice-tag,
.slice:hover .slice-hover p,
.slice:hover .slice-hover .slice-arrow,
.slice:focus-visible .slice-hover .slice-tag,
.slice:focus-visible .slice-hover p,
.slice:focus-visible .slice-hover .slice-arrow{transform:none}
.slice:hover .slice-label{opacity:0}

.woes-close{
  margin-top:44px;text-align:center;position:relative;
  font-size:clamp(1.25rem,3.6vw,1.8rem);font-weight:800;letter-spacing:-.02em;
  color:var(--cream);
}
.woes-close em{font-style:normal;color:var(--terra)}

/* ══════════════════════════════════════════════
   왜 양평공방
   ══════════════════════════════════════════════ */
.feats{display:grid;gap:16px}
.feat{border-radius:var(--radius);padding:30px 26px}
.feat-dark{
  background:var(--wood);color:var(--cream);
  box-shadow:0 16px 36px rgba(59,47,37,.18);
}
.feat-dark p{color:rgba(250,246,239,.86)}
.feat-light{
  background:#fff;color:var(--brown);
  border:1.5px solid var(--line);box-shadow:0 10px 28px rgba(59,47,37,.08);
}
.feat-light p{color:var(--brown-soft)}
.small-label{
  display:inline-block;margin-bottom:12px;padding:6px 13px;border-radius:999px;
  background:rgba(217,111,69,.16);color:var(--terra);font-size:.88rem;font-weight:700;
}
.feat-light .small-label{background:rgba(217,111,69,.12);color:var(--terra-deep)}
.feat .big{
  font-size:clamp(3.2rem,11vw,4.8rem);font-weight:800;letter-spacing:-.04em;
  line-height:1.1;color:var(--terra);margin-bottom:10px;
}
.feat h3{
  font-size:clamp(1.4rem,4.2vw,1.9rem);font-weight:800;letter-spacing:-.025em;
  line-height:1.4;margin-bottom:10px;
}
.feat h3 em{font-style:normal;color:var(--terra)}
.chiprow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.chip{
  padding:6px 13px;border-radius:999px;font-size:.88rem;font-weight:600;
  background:rgba(250,246,239,.14);border:1px solid rgba(250,246,239,.2);
}
.feat-light .chip{background:var(--beige);border-color:transparent;color:var(--brown)}
/* 자동차가 점선 위를 달리는 연출 */
.route{
  position:relative;height:36px;margin-top:18px;
  border-bottom:2px dashed rgba(59,47,37,.25);
}
.route .car{position:absolute;bottom:2px;left:0;font-size:1.3rem;animation:drive 7s linear infinite}
/* 🚗 이모지가 왼쪽을 보고 있어서: 오른쪽→왼쪽으로 달리고, 뒤집혀서 되돌아온다 */
@keyframes drive{
  0%{left:calc(100% - 26px);transform:scaleX(1)}
  49%{left:0;transform:scaleX(1)}
  50%{left:0;transform:scaleX(-1)}
  99%{left:calc(100% - 26px);transform:scaleX(-1)}
  100%{left:calc(100% - 26px);transform:scaleX(1)}
}
/* 약속 숫자 띠 */
.numband{
  display:grid;gap:22px;margin-top:44px;padding:30px 10px;text-align:center;
  border-top:1px solid rgba(59,47,37,.16);border-bottom:1px solid rgba(59,47,37,.16);
}
.numitem{display:flex;flex-direction:column;gap:4px}
.numval{font-size:clamp(2.1rem,6.5vw,3rem);font-weight:800;letter-spacing:-.03em;color:var(--brown)}
.numlab{color:var(--brown-soft);font-size:.95rem}
.feat-note{margin-top:30px;text-align:center;color:var(--brown-soft)}

/* ══════════════════════════════════════════════
   진행 과정 (여섯 걸음)
   ══════════════════════════════════════════════ */
.steps{display:grid;gap:14px;counter-reset:step}
.step{
  position:relative;display:block;padding:24px 22px 22px;
  background:#fff;border:1.5px solid var(--line);border-radius:var(--radius);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .35s;
}
.step:hover{
  transform:translateY(-6px);border-color:var(--terra);
  box-shadow:0 18px 38px rgba(59,47,37,.12);
}
.step-num{
  display:block;margin-bottom:8px;
  font-size:2.3rem;font-weight:800;letter-spacing:-.02em;line-height:1;
  color:rgba(217,111,69,.28);
  transition:color .35s;
}
.step:hover .step-num{color:var(--terra)}
.step-tit{display:block;font-size:1.12rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.step p{color:var(--brown-soft);font-size:.96rem}
/* 걸음 사이 연결선 느낌: 카드 왼쪽 아래 점선 */
.step::after{
  content:"";position:absolute;left:22px;right:22px;bottom:14px;height:0;
  border-bottom:2px dashed rgba(217,111,69,0);
  transition:border-color .35s;
}
.step:hover::after{border-color:rgba(217,111,69,.35)}

/* ══════════════════════════════════════════════
   작업 예시 (사진 카드 3장 + 제작 예시 배지)
   ══════════════════════════════════════════════ */
.worksg{display:grid;gap:22px}
.work{
  display:block;border-radius:var(--radius);overflow:hidden;
  background:#fff;border:1.5px solid var(--line);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
}
.work:hover{transform:translateY(-8px);box-shadow:0 22px 44px rgba(59,47,37,.15)}
.work-img{position:relative;display:block;height:200px;overflow:hidden}
.work-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)}
.work:hover .work-img img{transform:scale(1.06)}
.badge-demo{
  position:absolute;top:12px;left:12px;
  padding:5px 11px;border-radius:999px;
  background:rgba(59,47,37,.82);color:#fff;
  font-size:.8rem;font-weight:700;letter-spacing:.02em;
}
.work-body{display:block;padding:20px 22px 22px}
.work-tit{display:block;font-size:1.14rem;font-weight:800;letter-spacing:-.02em;margin-bottom:4px}
.work-body p{color:var(--brown-soft);font-size:.97rem}
.work-more{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;
  color:var(--terra-deep);font-weight:700;font-size:.95rem;
}
.work-more i{font-style:normal;transition:transform .35s var(--ease)}
.work:hover .work-more i{transform:translateX(5px)}

/* ══════════════════════════════════════════════
   자주 묻는 질문 (아코디언)
   ══════════════════════════════════════════════ */
.faqs{max-width:840px}
.faq{border-bottom:1px solid var(--line)}
.faq-btn{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:14px;
  padding:20px 6px;text-align:left;
  font-size:1.05rem;font-weight:700;letter-spacing:-.015em;color:var(--brown);
  transition:color .25s;
}
.faq-btn:hover{color:var(--terra-deep)}
.faq-caret{color:var(--terra);font-weight:700;transition:transform .35s var(--ease)}
.faq.open .faq-caret{transform:rotate(180deg)}
.faq-panel{overflow:hidden;max-height:0;transition:max-height .45s var(--ease)}
.faq-panel p{padding:0 6px 20px;color:var(--brown-soft)}
.faq.open .faq-panel{max-height:300px}

/* ══════════════════════════════════════════════
   상담 유도 띠 + 문의
   ══════════════════════════════════════════════ */
.ctaband{
  padding:76px 0;background:var(--wood);color:var(--cream);text-align:center;
}
.ctaband-tit{
  font-size:clamp(1.7rem,5.4vw,2.6rem);font-weight:800;letter-spacing:-.03em;margin-bottom:12px;
}
.ctaband p{color:rgba(250,246,239,.85);margin-bottom:26px}

.contact{display:grid;gap:26px}
.contact-info{display:flex;flex-direction:column;gap:14px}
.cinfo{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--radius);
  background:#fff;border:1.5px solid var(--line);
}
.cinfo-ico{font-size:1.4rem}
.cinfo b{display:block;font-size:1.08rem;letter-spacing:-.01em}
.cinfo small{color:var(--brown-soft);font-size:.9rem}
.btn-kakao{
  background:#FEE500;color:#191919;font-weight:800;min-height:52px;
}
.btn-kakao:hover{transform:translateY(-3px);box-shadow:0 12px 26px rgba(0,0,0,.14)}
.cform{
  display:flex;flex-direction:column;gap:8px;
  padding:26px 22px;border-radius:var(--radius);
  background:#fff;border:1.5px solid var(--line);box-shadow:0 14px 34px rgba(59,47,37,.08);
}
.cform label{font-weight:700;font-size:.95rem;margin-top:10px}
.cform input,.cform textarea{
  font:inherit;color:var(--brown);
  padding:13px 14px;border:1.5px solid var(--line);border-radius:12px;background:var(--cream);
  transition:border-color .25s,box-shadow .25s;
}
.cform input:focus,.cform textarea:focus{
  outline:none;border-color:var(--terra);box-shadow:0 0 0 3px rgba(217,111,69,.15);
}
.cform textarea{min-height:110px;resize:vertical}
.cform .btn{margin-top:16px}

/* ══════════════════════════════════════════════
   푸터
   ══════════════════════════════════════════════ */
.footer{
  padding:56px 0 120px;background:var(--wood);color:rgba(250,246,239,.78);
  font-size:.95rem;line-height:2;
}
.footer-logo{font-size:1.2rem;font-weight:800;color:var(--cream);margin-bottom:8px}
.footer-logo span{color:var(--terra)}
.footer a{text-decoration:underline;text-underline-offset:3px}
.footer-copy{margin-top:10px;font-size:.85rem;color:rgba(250,246,239,.5)}

/* ══════════════════════════════════════════════
   하단 고정 상담바
   ══════════════════════════════════════════════ */
.cbar{
  position:fixed;left:0;right:0;bottom:0;z-index:80;
  background:rgba(59,47,37,.96);backdrop-filter:blur(10px);
  transform:translateY(110%);transition:transform .5s var(--ease);
  box-shadow:0 -8px 30px rgba(0,0,0,.18);
}
.cbar.show{transform:none}
.cbar-in{
  max-width:1200px;margin:0 auto;padding:10px 14px;
  display:flex;align-items:center;gap:14px;
}
.cbar-txt{display:none;color:var(--cream);font-weight:700;white-space:nowrap}
.cbar form{display:none;flex:1;gap:8px}
.cbar input{
  flex:1;min-width:0;font:inherit;padding:11px 14px;
  border:1.5px solid rgba(250,246,239,.25);border-radius:12px;
  background:rgba(250,246,239,.1);color:var(--cream);
}
.cbar input::placeholder{color:rgba(250,246,239,.55)}
.cbar input:focus{outline:none;border-color:var(--terra)}
.cbar .btn{min-height:44px;padding:9px 20px;white-space:nowrap}
.cbar-links{display:flex;flex:1;gap:8px}
.cbar-links a{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:48px;border-radius:12px;
  background:rgba(250,246,239,.1);color:var(--cream);
  font-weight:700;font-size:.95rem;
  transition:background .25s;
}
.cbar-links a:active,.cbar-links a:hover{background:rgba(217,111,69,.4)}

/* ══════════════════════════════════════════════
   오른쪽 퀵메뉴 (데스크톱)
   ══════════════════════════════════════════════ */
.quick{
  display:none;position:fixed;right:22px;bottom:96px;z-index:80;
  flex-direction:column;gap:10px;
}
.quick-btn{
  width:52px;height:52px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;font-size:1.25rem;
  background:#fff;border:1.5px solid var(--line);color:var(--brown);
  box-shadow:0 8px 22px rgba(59,47,37,.16);
  transition:transform .3s var(--ease),box-shadow .3s,border-color .3s;
}
.quick-btn:hover{transform:translateY(-4px);border-color:var(--terra);box-shadow:0 14px 28px rgba(59,47,37,.22)}
.quick-top{font-weight:800;color:var(--terra-deep)}

/* ══════════════════════════════════════════════
   상세 페이지 공용
   ══════════════════════════════════════════════ */
.phero{
  position:relative;padding:150px 0 70px;overflow:hidden;
  background:var(--wood);color:var(--cream);
}
.phero-bg{position:absolute;inset:0}
.phero-bg img{width:100%;height:100%;object-fit:cover;opacity:.22;filter:sepia(.2) brightness(.85)}
.phero-bg::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(59,47,37,.55),rgba(74,58,44,.35) 55%,var(--wood) 100%);
}
.phero .wrap{position:relative}
.phero-tit{
  font-size:clamp(1.9rem,6.5vw,3.2rem);font-weight:800;letter-spacing:-.03em;line-height:1.3;
  margin-top:14px;
}
.phero-sub{margin-top:14px;color:rgba(250,246,239,.85);font-size:1.05rem}
.detail{
  padding:34px 26px;border-radius:var(--radius);
  background:#fff;border:1.5px solid var(--line);
  scroll-margin-top:90px;
}
.detail + .detail{margin-top:18px}
.detail-ico{font-size:1.9rem;display:block;margin-bottom:10px}
.detail h2{font-size:clamp(1.35rem,4.4vw,1.8rem);font-weight:800;letter-spacing:-.025em;margin-bottom:4px}
.detail-tag{display:block;color:var(--terra-deep);font-weight:700;margin-bottom:14px}
.detail p{color:var(--brown-soft);margin-top:10px}
.detail .step-num{margin-bottom:4px}
/* 고민 상세: 흐름 단계 */
.flow{display:grid;gap:10px;margin:16px 0 4px}
.flow-item{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;background:var(--beige);font-weight:700;
}
.flow-item .n{
  width:30px;height:30px;flex:none;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:var(--terra);color:#fff;font-size:.9rem;font-weight:800;
}
/* 미니 카드 (아이콘 + 한 줄) */
.minis{display:grid;gap:10px;margin-top:16px}
.mini{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-radius:14px;
  background:var(--beige);font-weight:600;
}
.mini .mi{font-size:1.3rem}
/* 칼럼(글) 페이지 */
.article{max-width:760px}
.article-date{color:var(--brown-soft);font-size:.95rem}
.article-img{border-radius:var(--radius);overflow:hidden;margin:26px 0}
.article h2{font-size:1.5rem;font-weight:800;letter-spacing:-.02em;margin:34px 0 10px}
.article p{color:var(--brown-soft);margin-top:10px}

/* ══════════════════════════════════════════════
   마우스 커서 연출 (마우스 쓰는 기기에서만)
   ══════════════════════════════════════════════ */
.cursor-dot,.cursor-ring{display:none}
@media (pointer:fine){
  body.has-cursor,
  body.has-cursor a,
  body.has-cursor button{cursor:none}
  .cursor-dot,.cursor-ring{
    display:block;position:fixed;top:0;left:0;z-index:9999;
    pointer-events:none;border-radius:50%;
    transform:translate(-100px,-100px);
  }
  .cursor-dot{
    width:8px;height:8px;background:var(--terra);
    margin:-4px 0 0 -4px;
  }
  .cursor-ring{
    width:38px;height:38px;margin:-19px 0 0 -19px;
    border:1.5px solid rgba(217,111,69,.75);
    transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s;
  }
  /* 링크·버튼 위에서는 링이 커지고 은은하게 차오름 */
  .cursor-ring.grow{
    width:64px;height:64px;margin:-32px 0 0 -32px;
    background:rgba(217,111,69,.14);border-color:var(--terra);
  }
}

/* ── 스크롤 등장 공용 (다음 섹션들에서 사용) ── */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0s)}
.reveal.in{opacity:1;transform:none}

/* ══════════════════════════════════════════════
   데스크톱 (768px~)
   ══════════════════════════════════════════════ */
@media (min-width:768px){
  .gnb-in{height:76px;padding:0 32px}
  .gnav{display:flex}
  .gnb-cta{display:inline-flex}
  .burger{display:none}
  .mnav{display:none}
  .mega{display:block}
  .hero-in{padding:140px 32px 60px}
  .hero-sub br{display:inline}
  .sec{padding:120px 0}
  .wrap{padding:0 32px}
  .slices{grid-template-columns:repeat(3,1fr);gap:22px}
  .slice{height:440px}
  .svcs{grid-template-columns:repeat(3,1fr);gap:20px}
  .feats{grid-template-columns:5fr 7fr;gap:22px}
  .feat{padding:38px 34px}
  .numband{grid-template-columns:repeat(3,1fr)}
  .steps{grid-template-columns:repeat(3,1fr);gap:20px}
  .worksg{grid-template-columns:repeat(3,1fr);gap:26px}
  .work-img{height:230px}
  .contact{grid-template-columns:5fr 7fr;gap:30px;align-items:start}
  .cbar-txt{display:inline}
  .cbar form{display:flex}
  .cbar-links{flex:none}
  .cbar-links a{padding:0 16px}
  .quick{display:flex}
  .footer{padding-bottom:90px}
  .detail{padding:44px 40px}
  .flow{grid-template-columns:repeat(3,1fr)}
  .minis{grid-template-columns:repeat(2,1fr)}
}

/* ══════════════════════════════════════════════
   움직임 줄이기 설정 존중
   ══════════════════════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hbg.on .hbg-media{animation:none}
  .hslide.on .hl-in,.hslide.on .hero-sub,.up{animation:none;opacity:1;transform:none}
  .scrollcue svg{animation:none}
  .reveal{opacity:1;transform:none;transition:none}
  .slice.reveal{opacity:1;transform:none;clip-path:none;transition:none}
  .svc:hover::before{animation:none}
  .route .car{animation:none}
}