@charset "utf-8";
/* ============================================================
   경인에프엘티 · 김포경인중기 기업 홈페이지
   색은 회사 기존 광고물(청록 그라데이션)에 맞췄습니다.
   ============================================================ */

:root{
  --brand:        #0f9c74;
  --brand-dk:     #0a7a5a;
  --brand-lt:     #23c79c;
  --brand-pale:   #eaf6f1;
  --brand-pale2:  #f4faf7;

  --ink:          #14232c;
  --ink-2:        #3d5460;
  --ink-3:        #6b8391;
  --line:         #e2ebe7;

  --bg:           #ffffff;
  --dark:         #0d2b23;

  --wrap:        1180px;
  --r:            14px;
  --r-lg:         22px;
  --shadow:       0 1px 2px rgba(16,42,34,.05), 0 12px 30px -14px rgba(16,42,34,.18);
  --shadow-lg:    0 2px 6px rgba(16,42,34,.06), 0 26px 60px -22px rgba(16,42,34,.30);

  --sans: "Noto Sans KR", Pretendard, -apple-system, BlinkMacSystemFont,
          "Apple SD Gothic Neo", "Malgun Gothic", "맑은 고딕", system-ui, sans-serif;

  color-scheme: light;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:82px; -webkit-text-size-adjust:100%; }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:17px;
  line-height:1.72;
  font-weight:400;
  word-break:keep-all;
  overflow-wrap:break-word;
  -webkit-font-smoothing:antialiased;
}

img,svg,picture{ max-width:100%; display:block; }
img{ height:auto; }
a{ color:inherit; }

.wrap{ width:100%; max-width:var(--wrap); margin-inline:auto; padding-inline:22px; }
.wrap-narrow{ max-width:820px; }

.skip{
  position:absolute; left:-9999px; top:0; z-index:200;
  background:var(--brand); color:#fff; padding:12px 18px; border-radius:0 0 10px 0;
}
.skip:focus{ left:0; }

:focus-visible{ outline:3px solid var(--brand-lt); outline-offset:3px; border-radius:6px; }

/* ── 나타나는 효과 ─────────────────────────── */
.rise{ opacity:0; transform:translateY(18px); transition:opacity .6s ease, transform .6s cubic-bezier(.2,.7,.3,1); }
.rise.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){ .rise{ opacity:1; transform:none; transition:none; } }

/* ============================================================
   헤더
   ============================================================ */
.hdr{
  position:sticky; top:0; z-index:100;
  background:rgba(255,255,255,.92);
  backdrop-filter:saturate(180%) blur(12px);
  border-bottom:1px solid transparent;
  transition:border-color .2s, box-shadow .2s;
}
.hdr.stuck{ border-bottom-color:var(--line); box-shadow:0 6px 24px -18px rgba(16,42,34,.5); }

.hdr-in{ display:flex; align-items:center; gap:20px; height:72px; }

.logo{ display:flex; align-items:center; gap:10px; text-decoration:none; flex-shrink:0; }
.logo-mark{ color:var(--brand); display:flex; }
.logo-txt{ display:flex; flex-direction:column; line-height:1.15; }
.logo-txt b{ font-size:19px; font-weight:900; letter-spacing:-.02em; }
.logo-txt em{ font-size:10.5px; font-style:normal; color:var(--ink-3); letter-spacing:.14em; font-weight:500; }

.nav{ display:flex; gap:4px; margin-left:auto; }
.nav a{
  padding:9px 13px; border-radius:9px; text-decoration:none;
  font-size:15.5px; font-weight:500; color:var(--ink-2);
  transition:background .16s, color .16s; white-space:nowrap;
}
.nav a:hover{ background:var(--brand-pale); color:var(--brand-dk); }

.hdr-tel{
  display:flex; flex-direction:column; align-items:flex-end; line-height:1.2;
  text-decoration:none; padding:7px 16px; border-radius:11px;
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-lt) 100%);
  color:#fff; flex-shrink:0;
  box-shadow:0 8px 20px -10px rgba(15,156,116,.8);
}
.hdr-tel-lb{ font-size:10.5px; opacity:.85; letter-spacing:.05em; }
.hdr-tel strong{ font-size:18px; font-weight:900; letter-spacing:-.01em; }

.burger{ display:none; }

/* ============================================================
   히어로
   ============================================================ */
.hero{ position:relative; isolation:isolate; color:#fff; overflow:hidden; }
.hero-bg{ position:absolute; inset:0; z-index:-2; }
.hero-bg img{ width:100%; height:100%; object-fit:cover; object-position:center 58%; }
.hero::after{
  content:""; position:absolute; inset:0; z-index:-1;
  background:
    linear-gradient(105deg, rgba(9,54,42,.94) 0%, rgba(10,74,57,.86) 42%, rgba(12,90,70,.55) 72%, rgba(15,120,92,.34) 100%);
}
.hero-in{ padding:104px 22px 96px; max-width:var(--wrap); }

.hero-eyebrow{
  margin:0 0 18px; font-size:13.5px; font-weight:700; letter-spacing:.16em;
  color:#8ff0cd; text-transform:uppercase;
}
.hero-eyebrow::before{
  content:""; display:inline-block; width:26px; height:2px; background:#8ff0cd;
  vertical-align:middle; margin-right:11px; border-radius:2px;
}
.hero-h1{
  margin:0 0 22px; font-size:clamp(34px,5.6vw,60px); font-weight:900;
  line-height:1.22; letter-spacing:-.035em;
}
.hero-h1 span{
  background:linear-gradient(100deg,#7df0c6 0%,#c8fbe6 100%);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
.hero-sub{
  margin:0 0 34px; font-size:clamp(16px,1.9vw,19.5px); line-height:1.78;
  color:rgba(255,255,255,.9); max-width:33em; font-weight:400;
}
.hero-cta{ display:flex; flex-wrap:wrap; gap:12px; margin-bottom:26px; }
.hero-note{ margin:0; font-size:14px; color:rgba(255,255,255,.66); }

.br-pc{ display:inline; }

/* ── 버튼 ─────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:13px 24px; border-radius:12px; border:0;
  font-family:inherit; font-size:16px; font-weight:700; text-decoration:none;
  cursor:pointer; transition:transform .14s, box-shadow .18s, background .18s;
}
.btn-lg{ padding:16px 30px; font-size:17.5px; }
.btn-full{ width:100%; }
.btn-call{
  background:linear-gradient(135deg,var(--brand-lt) 0%,var(--brand) 100%);
  color:#fff; box-shadow:0 14px 30px -12px rgba(15,156,116,.85);
}
.btn-call:hover{ transform:translateY(-2px); box-shadow:0 20px 38px -14px rgba(15,156,116,.95); }
.btn-ghost{
  background:rgba(255,255,255,.1); color:#fff;
  border:1.5px solid rgba(255,255,255,.42); backdrop-filter:blur(4px);
}
.btn-ghost:hover{ background:rgba(255,255,255,.2); transform:translateY(-2px); }

/* ============================================================
   신뢰 지표
   ============================================================ */
.facts{ background:var(--dark); color:#fff; }
.facts-in{ display:grid; grid-template-columns:repeat(4,1fr); }
.fact{
  padding:34px 26px;
  display:flex; flex-direction:column; gap:8px;
  border-left:1px solid rgba(255,255,255,.11);
}
.fact:first-child{ border-left:0; }
.fact b{
  font-size:clamp(30px,3.6vw,42px); font-weight:900; line-height:1;
  letter-spacing:-.03em; color:#5ee3b6;
}
.fact b i{ font-size:.5em; font-style:normal; font-weight:700; margin-left:2px; }
.fact span{ font-size:15px; font-weight:700; line-height:1.5; }
.fact em{ font-style:normal; font-weight:400; font-size:13.5px; color:rgba(255,255,255,.6); }

/* ============================================================
   섹션 공통
   ============================================================ */
.sec{ padding:104px 0; }
.sec-soft{ background:var(--brand-pale2); }
.sec-dark{ background:var(--dark); color:#fff; }

.eyebrow{
  margin:0 0 12px; font-size:12.5px; font-weight:700; letter-spacing:.18em;
  color:var(--brand); text-transform:uppercase;
}
.sec-dark .eyebrow{ color:#5ee3b6; }

.h2{
  margin:0 0 18px; font-size:clamp(27px,3.7vw,42px); font-weight:900;
  line-height:1.28; letter-spacing:-.035em;
}
.lead{
  margin:0 0 20px; font-size:clamp(16px,1.55vw,18.5px);
  color:var(--ink-2); line-height:1.8; max-width:44em;
}
.sec-dark .lead{ color:rgba(255,255,255,.82); }
.lead b{ color:var(--ink); font-weight:700; }
.sec-dark .lead b{ color:#fff; }

/* ── 체크 목록 ─────────────────────────────── */
.ticks{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:9px; }
.ticks li{ position:relative; padding-left:27px; font-size:15.5px; color:var(--ink-2); line-height:1.62; }
.ticks li::before{
  content:""; position:absolute; left:0; top:.5em;
  width:17px; height:17px; border-radius:50%;
  background:var(--brand-pale) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%230f9c74' d='M9.6 17.2 4.4 12l1.7-1.7 3.5 3.5 8.3-8.3L19.6 7z'/></svg>") center/12px no-repeat;
}
.ticks-lg li{ font-size:17px; padding-left:31px; }
.sec-dark .ticks li{ color:rgba(255,255,255,.86); }
.sec-dark .ticks li::before{
  background:rgba(94,227,182,.16) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path fill='%235ee3b6' d='M9.6 17.2 4.4 12l1.7-1.7 3.5 3.5 8.3-8.3L19.6 7z'/></svg>") center/12px no-repeat;
  top:.55em;
}

/* ============================================================
   사업 영역 카드
   ============================================================ */
.cards{
  margin-top:46px; display:grid; gap:22px;
  grid-template-columns:repeat(auto-fit,minmax(258px,1fr));
}
.card{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 28px 30px; box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s, border-color .22s;
}
.card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); border-color:#cfe6dc; }
.card-ico{
  width:52px; height:52px; border-radius:15px; margin-bottom:19px;
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(135deg,var(--brand-lt) 0%,var(--brand) 100%);
  box-shadow:0 10px 22px -10px rgba(15,156,116,.8);
}
.card-ico svg{ width:26px; height:26px; }
.card h3{ margin:0 0 11px; font-size:20.5px; font-weight:900; letter-spacing:-.02em; }
.card p{ margin:0 0 17px; font-size:15.5px; color:var(--ink-2); line-height:1.72; }

/* ============================================================
   좌우 분할
   ============================================================ */
.split{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; }
.split-rev .split-txt{ order:2; }
.split-rev .split-img{ order:1; }

.split-img{ margin:0; }
.split-img picture{ display:block; border-radius:var(--r-lg); overflow:hidden; box-shadow:var(--shadow-lg); }
.split-img img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.split-img figcaption{
  margin-top:13px; font-size:13.5px; color:var(--ink-3); text-align:center;
}
.sec-dark .split-img figcaption{ color:rgba(255,255,255,.55); }

/* 정의 목록 */
.deflist{ margin:30px 0 0; display:grid; gap:1px; background:var(--line); border-radius:var(--r); overflow:hidden; }
.deflist > div{ background:#fff; padding:18px 22px; display:grid; grid-template-columns:100px 1fr; gap:16px; align-items:baseline; }
.deflist dt{ font-weight:900; font-size:15px; color:var(--brand-dk); }
.deflist dd{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.65; }

/* ============================================================
   취급 장비
   ============================================================ */
.brands{
  margin:38px 0 44px; display:flex; flex-wrap:wrap; gap:10px;
}
.brands span{
  display:inline-flex; flex-direction:column; line-height:1.25;
  padding:11px 19px; border-radius:11px;
  background:var(--brand-pale); border:1px solid #d5eae1;
  font-size:15px; font-weight:900; letter-spacing:.02em; color:var(--brand-dk);
}
.brands i{ font-style:normal; font-size:12px; font-weight:500; color:var(--ink-3); letter-spacing:0; }

.lineup{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(262px,1fr)); }
.lu{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  overflow:hidden; box-shadow:var(--shadow);
  transition:transform .22s, box-shadow .22s;
}
.lu:hover{ transform:translateY(-5px); box-shadow:var(--shadow-lg); }
.lu img{ width:100%; aspect-ratio:16/10; object-fit:cover; }
.lu-txt{ padding:22px 24px 26px; }
.lu-txt h3{ margin:0 0 9px; font-size:19px; font-weight:900; letter-spacing:-.02em; }
.lu-txt h3 span{
  display:inline-block; margin-left:5px; padding:2px 9px; border-radius:7px;
  background:var(--brand-pale); color:var(--brand-dk); font-size:13px; font-weight:700;
  vertical-align:2px;
}
.lu-txt p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.7; }

/* 입승식 vs 좌승식 */
.compare{
  margin-top:56px; padding:38px 34px 34px;
  background:var(--brand-pale2); border:1px solid var(--line); border-radius:var(--r-lg);
}
.compare-h{ margin:0 0 24px; font-size:21px; font-weight:900; letter-spacing:-.02em; }
.compare-grid{ display:grid; grid-template-columns:1fr 1fr; gap:20px; }
.cmp{ background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:24px 26px; }
.cmp h4{ margin:0 0 14px; font-size:17.5px; font-weight:900; }
.cmp h4 em{
  font-style:normal; font-size:12px; font-weight:700; letter-spacing:.1em;
  color:var(--brand); margin-left:7px; vertical-align:1px;
}
.compare-tip{
  margin:22px 0 0; font-size:15px; color:var(--ink-2); line-height:1.7;
  padding:16px 20px; background:#fff; border-radius:var(--r); border:1px dashed #c7e2d7;
}
.compare-tip b{
  display:inline-block; margin-right:9px; padding:2px 10px; border-radius:20px;
  background:var(--brand); color:#fff; font-size:12px; font-weight:900; letter-spacing:.06em;
  vertical-align:1px;
}

/* ============================================================
   렌탈 절차
   ============================================================ */
.steps{
  list-style:none; margin:46px 0 0; padding:0;
  display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(272px,1fr));
  counter-reset:step;
}
.steps li{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--r-lg); padding:30px 28px 28px; box-shadow:var(--shadow);
}
.steps li::before{
  content:""; position:absolute; left:0; top:0; width:100%; height:4px;
  background:linear-gradient(90deg,var(--brand-lt),var(--brand));
  border-radius:var(--r-lg) var(--r-lg) 0 0;
}
.step-no{
  display:inline-block; margin-bottom:13px; padding:5px 13px; border-radius:20px;
  background:var(--brand-pale); color:var(--brand-dk);
  font-size:12px; font-weight:900; letter-spacing:.1em;
}
.steps h3{ margin:0 0 10px; font-size:19px; font-weight:900; letter-spacing:-.02em; }
.steps p{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.72; }

/* ============================================================
   서비스 지역
   ============================================================ */
.area{ margin-top:42px; display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); }
.area-grp{ background:#fff; border:1px solid var(--line); border-radius:var(--r-lg); padding:28px 26px; box-shadow:var(--shadow); }
.area-grp h3{
  margin:0 0 13px; font-size:17px; font-weight:900;
  padding-bottom:11px; border-bottom:2px solid var(--brand-pale); color:var(--brand-dk);
}
.area-grp p{ margin:0; font-size:15px; color:var(--ink-2); line-height:1.95; }

/* ============================================================
   연혁
   ============================================================ */
.hist{ list-style:none; margin:32px 0 0; padding:0 0 0 4px; }
.hist li{
  position:relative; padding:0 0 22px 30px; border-left:2px solid var(--line);
  display:grid; grid-template-columns:88px 1fr; gap:16px; align-items:baseline;
}
.hist li:last-child{ border-left-color:transparent; padding-bottom:0; }
.hist li::before{
  content:""; position:absolute; left:-7px; top:.55em; width:12px; height:12px;
  border-radius:50%; background:#fff; border:3px solid var(--brand);
}
.hist li:last-child::before{ background:var(--brand); }
.hist b{ font-size:14.5px; font-weight:900; color:var(--brand-dk); white-space:nowrap; }
.hist span{ font-size:15.5px; color:var(--ink-2); }
.hist i{ display:block; font-style:normal; font-size:13px; color:var(--ink-3); }

/* ============================================================
   FAQ
   ============================================================ */
.faq{ margin-top:38px; display:grid; gap:12px; }
.faq details{
  background:#fff; border:1px solid var(--line); border-radius:var(--r);
  overflow:hidden; transition:border-color .18s, box-shadow .18s;
}
.faq details[open]{ border-color:#bfe0d2; box-shadow:var(--shadow); }
.faq summary{
  cursor:pointer; list-style:none; padding:20px 56px 20px 24px; position:relative;
  font-size:17px; font-weight:700; line-height:1.55; letter-spacing:-.015em;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{
  content:""; position:absolute; right:22px; top:50%; width:11px; height:11px;
  margin-top:-7px; border-right:2.5px solid var(--brand); border-bottom:2.5px solid var(--brand);
  transform:rotate(45deg); transition:transform .22s;
}
.faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-3px; }
.faq summary:hover{ color:var(--brand-dk); }
.faq p{ margin:0; padding:0 24px 22px; font-size:15.5px; color:var(--ink-2); line-height:1.78; }
.faq p b{ color:var(--brand-dk); font-weight:700; }

/* ============================================================
   문의
   ============================================================ */
.contact{ margin-top:44px; display:grid; grid-template-columns:1fr 1.05fr; gap:36px; align-items:start; }

.callbox{
  display:block; text-decoration:none; padding:28px 30px; border-radius:var(--r-lg);
  background:linear-gradient(135deg,var(--brand) 0%,var(--brand-lt) 100%);
  color:#fff; box-shadow:0 18px 40px -18px rgba(15,156,116,.9);
  transition:transform .18s, box-shadow .2s;
}
.callbox:hover{ transform:translateY(-3px); box-shadow:0 24px 50px -20px rgba(15,156,116,1); }
.callbox span{ font-size:13px; opacity:.86; letter-spacing:.06em; }
.callbox strong{ display:block; font-size:clamp(32px,4.4vw,42px); font-weight:900; line-height:1.15; letter-spacing:-.02em; margin:2px 0 4px; }
.callbox em{ font-style:normal; font-size:13.5px; opacity:.82; }

.infolist{ margin:22px 0 0; display:grid; gap:1px; background:var(--line); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
.infolist > div{ background:#fff; padding:19px 22px; display:grid; grid-template-columns:82px 1fr; gap:14px; }
.infolist dt{ font-weight:900; font-size:14.5px; color:var(--brand-dk); }
.infolist dd{ margin:0; font-size:15.5px; color:var(--ink-2); line-height:1.7; }
.infolist dd b{ color:var(--ink); }

.maplinks{ display:flex; gap:8px; margin-top:11px; }
.maplinks a{
  padding:6px 14px; border-radius:8px; background:var(--brand-pale);
  color:var(--brand-dk); font-size:13.5px; font-weight:700; text-decoration:none;
  border:1px solid #d5eae1; transition:background .16s;
}
.maplinks a:hover{ background:#ddf0e8; }

/* 폼 */
.form{
  background:#fff; border:1px solid var(--line); border-radius:var(--r-lg);
  padding:32px 30px 30px; box-shadow:var(--shadow);
}
.form-h{ margin:0 0 7px; font-size:21px; font-weight:900; letter-spacing:-.02em; }
.form-note{ margin:0 0 22px; font-size:14.5px; color:var(--ink-3); line-height:1.6; }
.form-note a{ color:var(--brand-dk); font-weight:700; }

.f-row{ margin-bottom:15px; }
.f-2{ display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.f-row label{ display:block; margin-bottom:7px; font-size:14px; font-weight:700; color:var(--ink-2); }
.f-row label b{ color:#e5484d; margin-left:2px; }
.f-row input, .f-row select, .f-row textarea{
  width:100%; padding:12px 14px; border:1.5px solid var(--line); border-radius:10px;
  font-family:inherit; font-size:15.5px; color:var(--ink); background:#fff;
  transition:border-color .16s, box-shadow .16s;
}
.f-row textarea{ resize:vertical; min-height:110px; line-height:1.65; }
.f-row input::placeholder, .f-row textarea::placeholder{ color:#a8bcc4; }
.f-row input:focus, .f-row select:focus, .f-row textarea:focus{
  outline:none; border-color:var(--brand-lt); box-shadow:0 0 0 3px rgba(35,199,156,.16);
}
.form .btn{ margin-top:8px; }
.form-priv{ margin:14px 0 0; font-size:12.5px; color:var(--ink-3); text-align:center; line-height:1.6; }

/* ============================================================
   푸터
   ============================================================ */
.ft{ background:var(--dark); color:rgba(255,255,255,.7); padding:64px 0 30px; font-size:14.5px; }
.ft-top{
  display:grid; grid-template-columns:1.15fr 1fr 1fr 1fr; gap:36px;
  padding-bottom:38px; border-bottom:1px solid rgba(255,255,255,.1);
}
.ft-brand .logo-mark{ color:#5ee3b6; margin-bottom:14px; }
.ft-slogan{ margin:0; font-size:17px; font-weight:700; color:#fff; line-height:1.55; letter-spacing:-.02em; }
.ft-corp h3{ margin:0 0 12px; font-size:15px; font-weight:900; color:#fff; }
.ft-corp p{ margin:0 0 6px; line-height:1.65; }
.ft-corp a{ text-decoration:none; color:#5ee3b6; font-weight:700; }
.ft-corp a:hover{ text-decoration:underline; }
.ft-copy{ margin:24px 0 0; font-size:13px; color:rgba(255,255,255,.42); }

/* ============================================================
   모바일 전화 버튼
   ============================================================ */
.fab-call{
  display:none; position:fixed; left:16px; right:16px; bottom:16px; z-index:90;
  align-items:center; justify-content:center; gap:9px;
  padding:16px; border-radius:14px; text-decoration:none;
  background:linear-gradient(135deg,var(--brand-lt) 0%,var(--brand) 100%);
  color:#fff; font-size:17px; font-weight:900;
  box-shadow:0 12px 34px -10px rgba(10,60,45,.7);
}

/* ============================================================
   반응형
   ============================================================ */
@media (max-width:1080px){
  .nav a{ padding:9px 10px; font-size:14.5px; }
  .split{ gap:44px; }
}

@media (max-width:900px){
  .facts-in{ grid-template-columns:1fr 1fr; }
  .fact:nth-child(odd){ border-left:0; }
  .fact:nth-child(n+3){ border-top:1px solid rgba(255,255,255,.11); }
  .split{ grid-template-columns:1fr; gap:38px; }
  .split-rev .split-txt{ order:1; }
  .split-rev .split-img{ order:2; }
  .contact{ grid-template-columns:1fr; gap:28px; }
}

@media (max-width:860px){
  html{ scroll-padding-top:70px; }
  .hdr-in{ height:64px; gap:12px; }
  .hdr-tel{ padding:6px 13px; }
  .hdr-tel strong{ font-size:16px; }

  .burger{
    display:flex; flex-direction:column; justify-content:center; gap:5px;
    width:42px; height:42px; padding:0 9px; border:0; background:none; cursor:pointer;
  }
  .burger span{ display:block; height:2.5px; border-radius:2px; background:var(--ink); transition:transform .22s, opacity .18s; }
  .burger.on span:nth-child(1){ transform:translateY(7.5px) rotate(45deg); }
  .burger.on span:nth-child(2){ opacity:0; }
  .burger.on span:nth-child(3){ transform:translateY(-7.5px) rotate(-45deg); }

  .nav{
    position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0; margin:0; padding:8px 14px 16px;
    background:#fff; border-bottom:1px solid var(--line);
    box-shadow:0 18px 32px -20px rgba(16,42,34,.5);
    display:none;
  }
  .nav.open{ display:flex; }
  .nav a{ padding:14px 12px; font-size:16.5px; border-radius:10px; }
}

@media (max-width:720px){
  body{ font-size:16.5px; }
  .sec{ padding:72px 0; }
  .hero-in{ padding:76px 22px 82px; }
  .br-pc{ display:none; }
  .hero-cta .btn{ width:100%; }
  .compare{ padding:28px 22px 26px; }
  .compare-grid{ grid-template-columns:1fr; }
  .deflist > div, .infolist > div{ grid-template-columns:1fr; gap:5px; }
  .hist li{ grid-template-columns:1fr; gap:3px; padding-left:26px; }
  .ft-top{ grid-template-columns:1fr 1fr; gap:30px; }
  .fab-call{ display:flex; }
  body{ padding-bottom:82px; }
  .f-2{ grid-template-columns:1fr; gap:0; }
}

@media (max-width:520px){
  .facts-in{ grid-template-columns:1fr; }
  .fact{ padding:26px 24px; flex-direction:row; align-items:baseline; gap:16px; border-left:0; }
  .fact:nth-child(n+2){ border-top:1px solid rgba(255,255,255,.11); }
  .fact b{ flex-shrink:0; min-width:112px; }
  .ft-top{ grid-template-columns:1fr; gap:26px; }
  .form{ padding:26px 22px 24px; }
  .logo-txt b{ font-size:17px; }
  .hdr-tel-lb{ display:none; }
}

/* ============================================================
   인쇄
   ============================================================ */
@media print{
  .hdr,.fab-call,.hero-cta,.form,.burger{ display:none !important; }
  .hero{ color:#000; }
  .hero::after,.hero-bg{ display:none; }
  .sec,.facts,.ft{ background:#fff !important; color:#000 !important; }
  .rise{ opacity:1 !important; transform:none !important; }
}