/* =========================================================
   스타건설 — 에어컨 실외기실 환풍기 설치 랜딩페이지
   1. Tokens      2. Base        3. Utilities   4. Buttons
   5. Header      6. Hero        7. Feature     8. Problem
   9. Service    10. Process    11. Portfolio  12. About
  13. Review     14. FAQ        15. CTA        16. Footer
  17. Mobile CTA 18. Responsive
   ========================================================= */

/* ---------- 1. TOKENS ---------- */
:root{
  --navy-900:#0B1826;
  --navy-800:#0F1E2E;
  --navy-700:#16293C;
  --navy-600:#1F3648;
  --ink:#141C24;
  --ink-70:#48545F;
  --ink-50:#6B7681;
  --line:#E4E7EB;
  --line-soft:#EDEFF2;
  --gray-50:#F7F8FA;
  --gray-100:#F1F3F5;
  --white:#FFFFFF;
  --accent:#2B6CA3;
  --accent-dark:#1F5482;

  --r-sm:10px;
  --r-md:14px;
  --r-lg:20px;

  --shadow-sm:0 1px 2px rgba(15,30,46,.04), 0 2px 8px rgba(15,30,46,.04);
  --shadow-md:0 4px 12px rgba(15,30,46,.06), 0 12px 32px rgba(15,30,46,.07);
  --shadow-lg:0 12px 28px rgba(15,30,46,.10), 0 32px 64px rgba(15,30,46,.10);

  --pad:clamp(20px, 5vw, 80px);
  --sect:clamp(72px, 9vw, 140px);
  --ease:cubic-bezier(.22,.61,.36,1);

  --font:"Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont,
         "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
}

/* ---------- 2. BASE ---------- */
*,*::before,*::after{box-sizing:border-box;}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px;}
body{
  margin:0;
  font-family:var(--font);
  color:var(--ink);
  background:var(--white);
  line-height:1.7;
  letter-spacing:-.015em;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
  word-break:keep-all;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
button{font:inherit;color:inherit;}
h1,h2,h3,h4{margin:0;line-height:1.32;letter-spacing:-.035em;font-weight:700;}
p{margin:0;}
ul,ol,dl,dd{margin:0;padding:0;list-style:none;}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:4px;}

.skip-link{
  position:absolute;left:-9999px;top:0;z-index:200;
  background:var(--navy-800);color:#fff;padding:12px 20px;border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{left:0;}

/* ---------- 3. UTILITIES ---------- */
.container{width:100%;max-width:1280px;margin-inline:auto;padding-inline:var(--pad);}
.section{padding-block:var(--sect);}
.section--tight{padding-block:clamp(48px,6vw,80px);}

.eyebrow{
  font-size:12px;font-weight:700;letter-spacing:.22em;
  color:var(--accent);text-transform:uppercase;margin-bottom:18px;
}

.shead{margin-bottom:clamp(40px,5vw,64px);max-width:760px;}
.shead h2{font-size:clamp(28px,4vw,46px);}
.shead__sub{margin-top:20px;color:var(--ink-50);font-size:clamp(15px,1.4vw,17px);line-height:1.85;}
.shead--center{margin-inline:auto;text-align:center;}
.shead--invert .eyebrow{color:#7FB0D9;}
.shead--invert h2{color:#fff;}
.shead--invert .shead__sub{color:rgba(255,255,255,.62);}
.shead--split{
  max-width:none;display:flex;justify-content:space-between;
  align-items:flex-end;gap:32px;flex-wrap:wrap;
}
.shead--split .shead__sub{margin-top:0;max-width:360px;}
.faq .shead .btn{margin-top:28px;}

.tag{
  display:inline-block;font-size:12px;font-weight:700;letter-spacing:.14em;
  color:var(--accent);margin-bottom:12px;
}
.tag--soft{
  background:var(--gray-100);color:var(--ink-70);letter-spacing:0;
  padding:5px 12px;border-radius:999px;font-size:12.5px;
}

/* image placeholder fallback */
img[data-ph]{background:var(--gray-100);}
.ph{
  position:relative;display:flex;align-items:center;justify-content:center;
  background:
    
    linear-gradient(140deg,#13243a 0%,#25415c 100%);
  background-blend-mode:normal;
  color:rgba(255,255,255,.5);
  font-size:12.5px;letter-spacing:.06em;text-align:center;padding:16px;
  overflow:hidden;
}
.ph::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px);
  background-size:28px 28px;
}
.ph::after{
  content:"";position:absolute;width:120px;height:120px;border-radius:50%;
  border:1px dashed rgba(255,255,255,.16);
}
.ph span{position:relative;z-index:1;}

/* ---------- 4. BUTTONS ---------- */
.btn{
  --bh:52px;
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  height:var(--bh);padding-inline:26px;border:1px solid transparent;
  border-radius:var(--r-sm);font-size:15px;font-weight:600;letter-spacing:-.02em;
  cursor:pointer;white-space:nowrap;
  transition:background .25s var(--ease), color .25s var(--ease),
             border-color .25s var(--ease), transform .25s var(--ease),
             box-shadow .25s var(--ease);
}
.btn--sm{--bh:42px;padding-inline:18px;font-size:14px;}
.btn--lg{--bh:58px;padding-inline:32px;font-size:16px;}
.btn--xl{--bh:62px;padding-inline:38px;font-size:16.5px;}
.btn--block{width:100%;}
.btn .arr{transition:transform .28s var(--ease);}
.btn:hover .arr{transform:translateX(4px);}

.btn--primary{background:var(--navy-800);color:#fff;box-shadow:var(--shadow-sm);}
.btn--primary:hover{background:var(--accent-dark);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.btn--dark{background:var(--navy-800);color:#fff;}
.btn--dark:hover{background:var(--navy-700);transform:translateY(-2px);}
.btn--white{background:#fff;color:var(--navy-800);}
.btn--white:hover{background:#EAF1F7;transform:translateY(-2px);}
.btn--line{background:rgba(255,255,255,.9);color:var(--navy-800);border-color:rgba(15,30,46,.16);}
.btn--line:hover{background:#fff;border-color:var(--navy-800);transform:translateY(-2px);}
.btn--ghost{background:transparent;color:var(--ink);border-color:transparent;padding-inline:12px;}
.btn--ghost:hover{color:var(--accent);}

.ico-phone{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--phone-mask) center/contain no-repeat;
  mask:var(--phone-mask) center/contain no-repeat;
  --phone-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.5 19.5 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z'/%3E%3C/svg%3E");
}
.ico-chat{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 11.5a8.4 8.4 0 0 1-9 8.4 9.9 9.9 0 0 1-2.8-.4L3 21l1.9-4.6A8.2 8.2 0 0 1 3.6 11.5 8.4 8.4 0 0 1 12 3.1a8.4 8.4 0 0 1 9 8.4Z'/%3E%3C/svg%3E");
}
.ico-blog{
  width:16px;height:16px;flex:none;background:currentColor;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat;
  --m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='18' height='18' rx='3'/%3E%3Cpath d='M8 8h5M8 12h8M8 16h6'/%3E%3C/svg%3E");
}

/* ---------- 5. HEADER ---------- */
.header{
  position:fixed;inset:0 0 auto;z-index:100;
  background:rgba(255,255,255,.86);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color .3s var(--ease), box-shadow .3s var(--ease);
}
.header.is-stuck{border-bottom-color:var(--line);box-shadow:0 2px 20px rgba(15,30,46,.05);}
.header__inner{display:flex;align-items:center;gap:24px;height:76px;}

.brand{display:flex;align-items:center;gap:11px;flex:none;}
.brand__mark{
  width:42px;height:42px;flex:none;border-radius:11px;
  display:grid;place-items:center;background:var(--gray-100);color:var(--navy-800);
}
.brand__mark svg{width:26px;height:26px;}
.brand__text{display:flex;flex-direction:column;line-height:1.25;}
.brand__text strong{font-size:17px;font-weight:700;letter-spacing:-.04em;}
.brand__text em{font-style:normal;font-size:11px;color:var(--ink-50);letter-spacing:-.01em;}

.nav{display:flex;align-items:center;gap:6px;margin-left:auto;}
.nav a{
  position:relative;padding:10px 16px;font-size:15px;font-weight:500;color:var(--ink-70);
  transition:color .22s var(--ease);
}
.nav a::after{
  content:"";position:absolute;left:16px;right:16px;bottom:4px;height:1.5px;
  background:var(--navy-800);transform:scaleX(0);transform-origin:left;
  transition:transform .28s var(--ease);
}
.nav a:hover{color:var(--ink);}
.nav a:hover::after{transform:scaleX(1);}

.header__actions{display:flex;align-items:center;gap:8px;margin-left:auto;}
.nav + .header__actions{margin-left:0;}
.header__tel{font-weight:600;}
.nav__blog{color:var(--accent) !important;font-weight:600;}

.hamburger{
  display:none;width:44px;height:44px;border:0;background:transparent;
  padding:0;cursor:pointer;position:relative;
}
.hamburger span{
  position:absolute;left:11px;width:22px;height:1.8px;background:var(--ink);
  border-radius:2px;transition:transform .3s var(--ease), opacity .2s var(--ease);
}
.hamburger span:nth-child(1){top:15px;}
.hamburger span:nth-child(2){top:21px;}
.hamburger span:nth-child(3){top:27px;}
.hamburger.is-open span:nth-child(1){transform:translateY(6px) rotate(45deg);}
.hamburger.is-open span:nth-child(2){opacity:0;}
.hamburger.is-open span:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

.nav-backdrop{
  position:fixed;inset:0;z-index:98;background:rgba(11,24,38,.42);
  opacity:0;transition:opacity .3s var(--ease);
}
.nav-backdrop.is-on{opacity:1;}

/* ---------- 6. HERO ---------- */
.hero{position:relative;padding-top:76px;isolation:isolate;}
.hero__media{position:absolute;inset:0;z-index:-1;overflow:hidden;}
.hero__media img,.hero__media .ph{width:100%;height:100%;object-fit:cover;}
.hero__scrim{
  position:absolute;inset:0;
  background:
    /* 왼쪽 글자 영역을 확실히 덮고, 아래쪽은 다음 섹션으로 자연스럽게 이어지도록 */
    linear-gradient(100deg, rgba(255,255,255,.97) 0%, rgba(255,255,255,.93) 32%,
                    rgba(255,255,255,.55) 58%, rgba(255,255,255,.12) 100%),
    linear-gradient(180deg, rgba(255,255,255,0) 62%, rgba(255,255,255,.5) 100%);
}
.hero__inner{display:flex;align-items:center;min-height:min(88vh,760px);padding-block:clamp(56px,8vw,96px);}
.hero__copy{max-width:640px;}
.hero__title{font-size:clamp(32px,5.2vw,62px);line-height:1.24;letter-spacing:-.045em;}
.hero__desc{margin-top:24px;font-size:clamp(15.5px,1.5vw,18px);color:var(--ink-70);line-height:1.8;}
.hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:40px;}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:12px 40px;margin-top:52px;
  padding-top:28px;border-top:1px solid rgba(15,30,46,.12);
}
.hero__meta li{display:flex;flex-direction:column;gap:2px;}
.hero__meta strong{font-size:15px;font-weight:700;}
.hero__meta span{font-size:13px;color:var(--ink-50);}

.hero__scroll{
  position:absolute;left:50%;bottom:26px;translate:-50% 0;
  width:24px;height:38px;border:1.5px solid rgba(15,30,46,.28);border-radius:14px;
  display:grid;place-items:start center;padding-top:7px;
}
.hero__scroll span{width:3px;height:7px;border-radius:2px;background:var(--navy-800);animation:scrollDot 1.9s var(--ease) infinite;}
@keyframes scrollDot{0%{opacity:0;transform:translateY(-3px);}40%{opacity:1;}100%{opacity:0;transform:translateY(11px);}}

/* ---------- 7. FEATURE ---------- */
.feature__grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--gray-50);border:1px solid var(--line-soft);border-radius:var(--r-lg);
  overflow:hidden;
}
.fcard{
  padding:clamp(28px,3vw,44px) clamp(20px,2.4vw,32px);
  border-right:1px solid var(--line-soft);
  transition:background .3s var(--ease);
}
.fcard:last-child{border-right:0;}
.fcard:hover{background:#fff;}
.fcard__ico{
  display:grid;place-items:center;width:52px;height:52px;margin-bottom:22px;
  border-radius:14px;background:#fff;border:1px solid var(--line);color:var(--navy-800);
  box-shadow:var(--shadow-sm);
}
.fcard__ico svg{width:24px;height:24px;}
.fcard h3{font-size:17px;margin-bottom:10px;}
.fcard p{font-size:14.5px;color:var(--ink-50);line-height:1.75;}

/* ---------- 8. PROBLEM ---------- */
.problem{background:var(--navy-800);color:#fff;}
.problem__grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;}
.pcard{
  background:rgba(255,255,255,.035);border:1px solid rgba(255,255,255,.09);
  border-radius:var(--r-md);overflow:hidden;
  transition:transform .35s var(--ease), border-color .35s var(--ease), background .35s var(--ease);
}
.pcard:hover{transform:translateY(-6px);border-color:rgba(255,255,255,.24);background:rgba(255,255,255,.06);}
.pcard__thumb{aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.05);}
.pcard__thumb img,.pcard__thumb .ph{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease);}
.pcard:hover .pcard__thumb img{transform:scale(1.06);}
.pcard__body{padding:22px 20px 26px;}
.pcard__no{font-size:12px;font-weight:700;letter-spacing:.16em;color:#7FB0D9;}
.pcard h3{font-size:16px;margin:8px 0 10px;color:#fff;}
.pcard p{font-size:13.5px;line-height:1.7;color:rgba(255,255,255,.55);}
.problem__note{
  margin-top:44px;text-align:center;font-size:15px;color:rgba(255,255,255,.6);
}
.problem__note a{color:#fff;font-weight:600;border-bottom:1px solid rgba(255,255,255,.4);padding-bottom:2px;}
.problem__note a:hover{border-color:#fff;}

/* ---------- 9. SERVICE ---------- */
.service__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(20px,2.2vw,28px);}
.scard{
  grid-column:auto;
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease);
}
.scard--wide{grid-column:1/-1;flex-direction:row;}
/* 두 번째 가로형 카드는 좌우를 뒤집어 리듬을 준다 */
.scard--rev{flex-direction:row-reverse;}
.scard:hover{transform:translateY(-6px);box-shadow:var(--shadow-md);border-color:#D8DDE3;}
.scard__thumb{aspect-ratio:16/10;overflow:hidden;background:var(--gray-100);}
.scard--wide .scard__thumb{aspect-ratio:auto;flex:1 1 56%;min-height:320px;}
.scard__thumb img,.scard__thumb .ph{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.scard:hover .scard__thumb img{transform:scale(1.05);}
.scard__body{padding:clamp(22px,2.4vw,32px);}
.scard--wide .scard__body{flex:1 1 44%;display:flex;flex-direction:column;justify-content:center;padding:clamp(28px,3.5vw,56px);}
.scard h3{font-size:clamp(17px,1.7vw,20px);margin-bottom:12px;}
.scard--wide h3{font-size:clamp(21px,2.4vw,28px);}
.scard p{font-size:14.5px;color:var(--ink-50);line-height:1.8;}
.scard--wide p{font-size:15.5px;}

/* ---------- 10. PROCESS ---------- */
.process{background:var(--gray-50);border-block:1px solid var(--line-soft);}
.process__list{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;counter-reset:step;}
.pstep{
  position:relative;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-md);padding:30px 24px 32px;overflow:hidden;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.pstep::before{
  content:"";position:absolute;top:-1px;left:0;width:36%;height:2px;background:var(--navy-800);
  border-radius:2px;transition:width .45s var(--ease);
}
.pstep:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.pstep:hover::before{width:100%;}
.pstep__no{font-size:11.5px;font-weight:700;letter-spacing:.18em;color:var(--accent);}
.pstep h3{font-size:16.5px;margin:12px 0 10px;}
.pstep p{font-size:13.5px;color:var(--ink-50);line-height:1.75;}

/* ---------- 11. PORTFOLIO ---------- */
.portfolio__grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(24px,2.6vw,36px);}
.wcard{
  border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;background:#fff;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.wcard:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);}
.wcard__gallery{
  display:grid;grid-template-columns:1.55fr 1fr;grid-template-rows:1fr 1fr;
  gap:2px;background:var(--line-soft);aspect-ratio:16/10;
}
.wcard__gallery figure{position:relative;margin:0;overflow:hidden;background:var(--gray-100);min-height:0;}
.wcard__gallery figure:first-child{grid-row:span 2;}
.wcard__gallery img,.wcard__gallery .ph{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease);}
.wcard:hover .wcard__gallery img{transform:scale(1.05);}
.wcard__gallery figcaption{
  position:absolute;left:12px;top:12px;z-index:2;
  background:rgba(11,24,38,.72);color:#fff;font-size:10.5px;font-weight:700;
  letter-spacing:.14em;padding:5px 10px;border-radius:6px;
  backdrop-filter:blur(4px);
}
/* 홀수 개일 때 마지막 사례는 전체 폭 가로형으로 배치 */
.wcard--wide{grid-column:1/-1;display:grid;grid-template-columns:1.35fr 1fr;align-items:center;}
.wcard--wide .wcard__gallery{aspect-ratio:16/9;}
.wcard--wide .wcard__body{padding:clamp(28px,3.4vw,52px);}
.wcard--wide h3{font-size:clamp(21px,2.4vw,28px);}
.wcard--wide p{font-size:15.5px;}

.wcard__body{padding:clamp(24px,2.6vw,34px);}
.wcard h3{font-size:clamp(19px,2vw,23px);margin:6px 0 12px;}
.wcard p{font-size:14.5px;color:var(--ink-50);line-height:1.8;}

/* 블로그 연동 배너 */
.blogbar{
  margin-top:clamp(28px,3vw,44px);
  display:flex;align-items:center;justify-content:space-between;gap:28px;flex-wrap:wrap;
  padding:clamp(26px,3vw,40px) clamp(24px,3vw,48px);
  background:var(--gray-50);border:1px solid var(--line);border-radius:var(--r-lg);
}
.blogbar__badge{
  display:inline-block;font-size:11px;font-weight:700;letter-spacing:.16em;
  color:#fff;background:#03C75A;padding:5px 10px;border-radius:6px;margin-bottom:14px;
}
.blogbar h3{font-size:clamp(19px,2.1vw,25px);margin-bottom:10px;}
.blogbar p{font-size:14.5px;color:var(--ink-50);line-height:1.8;}
.blogbar .btn{flex:none;}

/* ---------- 11-2. SERVICE AREA ---------- */
.area__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(16px,1.8vw,22px);}
.acard{
  padding:clamp(24px,2.6vw,32px);border:1px solid var(--line);border-radius:var(--r-md);
  background:#fff;transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.acard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.acard h3{
  font-size:17px;margin-bottom:14px;padding-bottom:12px;
  border-bottom:2px solid var(--navy-800);display:inline-block;
}
.acard p{font-size:14px;color:var(--ink-50);line-height:1.85;}
.area__note{
  margin-top:clamp(32px,3.5vw,48px);text-align:center;font-size:15px;color:var(--ink-50);
}
.area__note strong{color:var(--ink);}
.area__note a{font-weight:700;color:var(--navy-800);border-bottom:1px solid var(--line);}
.area__note a:hover{border-color:var(--navy-800);}

/* ---------- 12. ABOUT ---------- */
.about{background:var(--gray-50);border-block:1px solid var(--line-soft);}
.about__inner{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(36px,5vw,80px);align-items:center;}
.about__media{position:relative;border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--shadow-lg);}
.about__media img,.about__media .ph{width:100%;aspect-ratio:4/3.4;object-fit:cover;}
.about__badge{
  position:absolute;left:24px;bottom:24px;right:24px;
  background:rgba(11,24,38,.82);backdrop-filter:blur(10px);
  color:#fff;padding:20px 24px;border-radius:var(--r-md);
  display:flex;flex-direction:column;gap:2px;
}
.about__badge strong{font-size:17px;}
.about__badge span{font-size:13.5px;color:rgba(255,255,255,.62);}
.about__copy h2{font-size:clamp(28px,3.6vw,44px);}
.about__lead{margin-top:22px;font-size:clamp(15.5px,1.5vw,17.5px);color:var(--ink-70);line-height:1.85;}
.about__list{margin:36px 0 40px;display:grid;gap:22px;}
.about__list div{padding-left:22px;border-left:2px solid var(--line);}
.about__list dt{font-size:16px;font-weight:700;margin-bottom:6px;}
.about__list dd{font-size:14.5px;color:var(--ink-50);line-height:1.75;}

/* ---------- 12-2. GUIDE (정보성) ---------- */
.guide{background:var(--gray-50);border-block:1px solid var(--line-soft);}
.guide__list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.gitem{
  display:grid;grid-template-columns:auto 1fr;gap:clamp(24px,4vw,64px);
  padding:clamp(32px,3.6vw,48px) 0;border-bottom:1px solid var(--line);
}
.gitem__no{
  font-size:clamp(28px,3.2vw,40px);font-weight:700;letter-spacing:-.04em;
  color:var(--line);line-height:1;padding-top:4px;
}
.gitem__body{max-width:72ch;}
.gitem h3{font-size:clamp(18px,2vw,23px);margin-bottom:16px;}
.gitem p{font-size:15.5px;line-height:1.9;color:var(--ink-70);}
.gitem p + p{margin-top:14px;}
.gitem:hover .gitem__no{color:var(--accent);transition:color .3s var(--ease);}

/* ---------- 13. REVIEW ---------- */
.review__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(20px,2.2vw,28px);}
.rcard{
  margin:0;background:#fff;border:1px solid var(--line);border-radius:var(--r-lg);
  padding:clamp(28px,3vw,38px);display:flex;flex-direction:column;
  transition:transform .35s var(--ease), box-shadow .35s var(--ease);
}
.rcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-md);}
.stars{color:#E8A33D;font-size:15px;letter-spacing:.14em;}
.rcard p{margin:18px 0 26px;font-size:15.5px;line-height:1.85;color:var(--ink-70);flex:1;}
.rcard footer{display:flex;flex-direction:column;gap:3px;padding-top:20px;border-top:1px solid var(--line-soft);}
.rcard footer strong{font-size:14.5px;}
.rcard footer span{font-size:13px;color:var(--ink-50);}

/* ---------- 14. FAQ ---------- */
.faq__inner{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(36px,5vw,80px);align-items:start;}
.faq .shead{margin-bottom:0;position:sticky;top:110px;}
.faq__list{display:flex;flex-direction:column;border-top:1px solid var(--line);}
.acc{border-bottom:1px solid var(--line);}
.acc__q{
  width:100%;display:flex;align-items:center;justify-content:space-between;gap:20px;
  background:none;border:0;padding:26px 4px;text-align:left;cursor:pointer;
  font-size:clamp(15.5px,1.6vw,17.5px);font-weight:600;letter-spacing:-.025em;
  transition:color .25s var(--ease);
}
.acc__q:hover{color:var(--accent);}
.acc__q i{
  position:relative;width:20px;height:20px;flex:none;
}
.acc__q i::before,.acc__q i::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--ink-70);
  translate:-50% -50%;border-radius:2px;transition:transform .32s var(--ease), opacity .25s var(--ease);
}
.acc__q i::before{width:14px;height:1.8px;}
.acc__q i::after{width:1.8px;height:14px;}
.acc.is-open .acc__q i::after{transform:rotate(90deg);opacity:0;}
.acc.is-open .acc__q{color:var(--navy-800);}
.acc__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .38s var(--ease);}
.acc.is-open .acc__a{grid-template-rows:1fr;}
.acc__a > div{overflow:hidden;}
.acc__a p{padding:0 4px 28px;font-size:15px;line-height:1.85;color:var(--ink-50);max-width:60ch;}

/* ---------- 15. CTA ---------- */
.cta{
  background:
    radial-gradient(120% 90% at 82% 8%, rgba(43,108,163,.28) 0%, transparent 58%),
    var(--navy-900);
  color:#fff;padding-block:var(--sect);
}
.cta__inner{display:grid;grid-template-columns:1fr 1fr;gap:clamp(40px,5vw,88px);align-items:center;}
.cta .eyebrow{color:#7FB0D9;}
.cta h2{font-size:clamp(30px,4.2vw,50px);}
.cta__sub{margin-top:22px;font-size:clamp(15.5px,1.5vw,17.5px);color:rgba(255,255,255,.62);line-height:1.85;}
.cta__tel{margin-top:34px;}
.cta__tel a{
  display:inline-flex;align-items:center;gap:12px;
  font-size:clamp(28px,3.4vw,40px);font-weight:700;letter-spacing:-.03em;color:#fff;
}
.cta__tel .ico-phone{width:.7em;height:.7em;}
.cta__hours{margin-top:8px;font-size:14.5px;color:#9CCBEE;}

/* 문의 수단 카드 */
.cta__cards{display:grid;gap:14px;}
.ccard{
  display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;
  column-gap:18px;align-items:center;
  padding:24px 26px;border-radius:var(--r-md);
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  transition:background .28s var(--ease), border-color .28s var(--ease), transform .28s var(--ease);
}
.ccard:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.3);transform:translateY(-3px);}
.ccard__ico{grid-row:1/3;width:26px;height:26px;color:#9CCBEE;}
.ccard strong{font-size:17.5px;color:#fff;}
.ccard__desc{font-size:13.5px;color:rgba(255,255,255,.55);}

/* ---------- 16. FOOTER ---------- */
.footer{background:var(--navy-800);color:rgba(255,255,255,.6);padding-top:clamp(56px,6vw,80px);}
.footer__inner{display:grid;grid-template-columns:1fr 1.4fr;gap:clamp(32px,4vw,72px);padding-bottom:48px;}
.footer__brand strong{display:block;color:#fff;font-size:20px;font-weight:700;letter-spacing:-.04em;}
.footer__tagline{margin-top:6px;font-size:13.5px;color:rgba(255,255,255,.5);}
.footer__desc{margin-top:20px;font-size:14px;line-height:1.8;}
.footer__bloglink{
  display:inline-block;margin-top:18px;font-size:14px;font-weight:600;color:#fff;
  border-bottom:1px solid rgba(255,255,255,.35);padding-bottom:3px;
}
.footer__bloglink:hover{border-color:#fff;}
.footer__info{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:28px;}
.footer__info dt{font-size:12px;font-weight:700;letter-spacing:.14em;color:rgba(255,255,255,.42);margin-bottom:10px;}
.footer__info dd{font-size:14px;line-height:1.75;color:rgba(255,255,255,.72);}
.footer__info dd a{font-size:19px;font-weight:700;color:#fff;letter-spacing:-.02em;}
.footer__bottom{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:14px;
  padding-block:22px;border-top:1px solid rgba(255,255,255,.1);
}
.footer__links{display:flex;align-items:center;gap:12px;font-size:13.5px;}
.footer__links a:hover{color:#fff;}
.footer__copy{font-size:13px;color:rgba(255,255,255,.42);}

/* ---------- 17. MOBILE STICKY CTA ---------- */
.mcta{
  position:fixed;left:0;right:0;bottom:0;z-index:95;display:none;gap:1px;
  background:rgba(255,255,255,.14);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(11,24,38,.18);
}
.mcta__btn{
  flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
  height:58px;font-size:15.5px;font-weight:700;letter-spacing:-.02em;
}
.mcta__btn--tel{background:var(--navy-800);color:#fff;}
.mcta__btn--sms{background:var(--accent);color:#fff;}
.mcta__btn:active{filter:brightness(.92);}

/* ---------- SCROLL REVEAL ---------- */
[data-reveal]{opacity:0;transform:translateY(22px);}
.reveal-ready [data-reveal]{transition:opacity .7s var(--ease), transform .7s var(--ease);}
[data-reveal].is-in{opacity:1;transform:none;}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *,*::before,*::after{animation-duration:.001ms !important;transition-duration:.001ms !important;}
  [data-reveal]{opacity:1;transform:none;}
}

/* =========================================================
   18. RESPONSIVE
   ========================================================= */

/* --- ≤1180px : 태블릿 가로 --- */
@media (max-width:1180px){
  .nav{display:none;}
  .feature__grid{grid-template-columns:repeat(2,1fr);}
  .fcard{border-bottom:1px solid var(--line-soft);}
  .fcard:nth-child(2n){border-right:0;}
  .fcard:last-child{grid-column:1/-1;border-right:0;border-bottom:0;}
  .problem__grid{grid-template-columns:repeat(3,1fr);}
  .process__list{grid-template-columns:repeat(3,1fr);}
  .area__grid{grid-template-columns:repeat(2,1fr);}
  .faq .shead{position:static;}
}

/* --- ≤1024px : 태블릿 --- */
@media (max-width:1024px){
  html{scroll-padding-top:68px;}
  .header__inner{height:68px;}
  .hero{padding-top:68px;}
  /* 태블릿·모바일은 글자가 사진 위에 세로로 얹히므로 아래쪽까지 덮어준다 */
  .hero__scrim{
    background:linear-gradient(180deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.93) 52%,
                    rgba(255,255,255,.8) 76%, rgba(255,255,255,.45) 100%);
  }
  .scard--wide,.scard--rev{flex-direction:column;}
  .scard--wide .scard__thumb{min-height:0;aspect-ratio:16/9;}
  .about__inner{grid-template-columns:1fr;}
  .faq__inner{grid-template-columns:1fr;}
  .cta__inner{grid-template-columns:1fr;}
  .footer__inner{grid-template-columns:1fr;}
}

/* --- ≤900px : 모바일 내비게이션 --- */
@media (max-width:1180px){
  .hamburger{display:block;}
  .nav{
    display:flex;position:fixed;top:0;right:0;bottom:0;width:min(320px,86vw);
    z-index:99;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;padding:88px 24px 32px;margin:0;
    box-shadow:-12px 0 40px rgba(11,24,38,.14);
    transform:translateX(100%);transition:transform .38s var(--ease);
    overflow-y:auto;
  }
  .nav.is-open{transform:translateX(0);}
  .nav a{padding:18px 4px;font-size:17px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--line-soft);}
  .nav a::after{display:none;}
  body.nav-lock{overflow:hidden;}
}

/* --- ≤768px : 모바일 --- */
@media (max-width:768px){
  :root{--sect:clamp(64px,11vw,86px);}
  .header__tel{display:none;}
  .brand__mark{width:38px;height:38px;border-radius:10px;}
  .brand__mark svg{width:23px;height:23px;}
  .brand__text strong{font-size:16px;}

  .hero__inner{min-height:0;padding-block:44px 56px;}
  .hero__title{font-size:clamp(27px,7.6vw,36px);line-height:1.32;}
  .hero__desc{margin-top:18px;font-size:15px;}
  .hero__cta{margin-top:30px;flex-direction:column;align-items:stretch;}
  .hero__cta .btn{width:100%;}
  .hero__meta{margin-top:36px;gap:14px 28px;}
  .hero__scroll{display:none;}

  .feature__grid{grid-template-columns:1fr;}
  .fcard{border-right:0;border-bottom:1px solid var(--line-soft);}
  .fcard:last-child{border-bottom:0;}

  .problem__grid{grid-template-columns:1fr;}
  .pcard{display:flex;align-items:stretch;}
  .pcard__thumb{flex:0 0 38%;aspect-ratio:auto;}
  .pcard__body{padding:18px 18px 20px;}
  .pcard h3{font-size:15.5px;}
  .pcard p{font-size:13px;}

  .service__grid{grid-template-columns:1fr;}
  .scard,.scard--wide{grid-column:auto;}

  .process__list{grid-template-columns:1fr;gap:12px;}
  .pstep{display:grid;grid-template-columns:auto 1fr;gap:4px 18px;padding:22px 20px;}
  .pstep::before{width:100%;height:2px;}
  .pstep__no{grid-row:1/3;align-self:start;padding-top:3px;white-space:nowrap;}
  .pstep h3{margin:0 0 6px;}

  .portfolio__grid{grid-template-columns:1fr;}
  .wcard--wide{display:block;}
  .wcard--wide .wcard__gallery{aspect-ratio:4/3;}
  .wcard__gallery{grid-template-columns:1fr 1fr;grid-template-rows:1.5fr 1fr;aspect-ratio:4/3;}
  .wcard__gallery figure:first-child{grid-row:auto;grid-column:1/-1;}

  .review__grid{grid-template-columns:1fr;}
  .area__grid{grid-template-columns:1fr;}
  .gitem{grid-template-columns:1fr;gap:10px;}
  .gitem__no{font-size:22px;padding-top:0;}

  .about__badge{left:16px;right:16px;bottom:16px;padding:16px 18px;}
  .about__list{margin:28px 0 32px;}
  .about__copy .btn{width:100%;}

  .shead--split{flex-direction:column;align-items:flex-start;gap:16px;}
  .shead--split .shead__sub{max-width:none;}

  .cta__tel a{font-size:clamp(26px,7.4vw,32px);}
  .blogbar{flex-direction:column;align-items:flex-start;gap:20px;}
  .blogbar .btn{width:100%;}

  .footer{padding-bottom:0;}
  .footer__bottom{flex-direction:column;align-items:flex-start;gap:10px;}

  .mcta{display:flex;}
  body{padding-bottom:calc(58px + env(safe-area-inset-bottom));}
  html{scroll-padding-top:60px;}
}

/* --- ≤430px : 소형 모바일 --- */
@media (max-width:430px){
  :root{--pad:18px;}
  .btn--lg,.btn--xl{--bh:54px;font-size:15.5px;padding-inline:22px;}
  .hero__title{font-size:26px;}
  .hero__meta{display:grid;grid-template-columns:1fr 1fr;gap:14px 16px;}
  .hero__meta li:last-child{grid-column:1/-1;}
  .pcard{display:block;}
  .pcard__thumb{aspect-ratio:2/1;}
  /* 소형 화면에서 헤더가 빽빽해지지 않도록 브랜드·버튼을 함께 줄임 */
  .header__inner{gap:12px;}
  /* 브랜드 영역이 남는 폭만큼만 차지하고, 설명 문구는 두 줄로 접힘 */
  .brand{flex:1 1 auto;min-width:0;}
  .brand__text{min-width:0;}
  .brand__text em{font-size:10px;line-height:1.3;}
  .header__quote{--bh:38px;padding-inline:13px;font-size:13px;}
  .acc__q{padding:22px 2px;font-size:15px;}
  .footer__info{grid-template-columns:1fr;}
}