/* ============================================================
   세움환경 (theme/44) — 보조 스타일
   업종: 철거·폐기물처리·종합청소 종합환경기업 (원본 개별 흡수).
   Tailwind v4 utility 중심, 여기서는 utility로 안 되는 것만:
   아이콘 정렬, 히어로 슬라이더, 카드 컴포넌트, 마퀴, FAQ, 드로어.
   ============================================================ */

:root { --brand: #0e7c66; --brand-dark: #0a3d37; --line: #e5e7eb; }

html { scroll-behavior: smooth; }
html, body { max-width: 100%; overflow-x: hidden; }
body { -webkit-font-smoothing: antialiased; word-break: keep-all; }
img { max-width: 100%; height: auto; }
a, button { -webkit-tap-highlight-color: transparent; }

/* ---- 아이콘 크기/정렬 고정 (Lucide SVG + FontAwesome 혼용) ---- */
.ic { width: 1.25rem; height: 1.25rem; display: inline-block; flex: 0 0 auto; vertical-align: middle; stroke-width: 2; }
.ic-xs { width: 0.85rem; height: 0.85rem; }
.ic-sm { width: 1rem; height: 1rem; }
.ic-lg { width: 1.6rem; height: 1.6rem; }
[class^="fa-"], [class*=" fa-"] { line-height: 1; vertical-align: middle; }

/* h-13 (Tailwind 기본 미존재) */
.h-13 { height: 3.25rem; }

/* 헤더 스크롤 그림자 */
#header.is-scrolled { box-shadow: 0 6px 24px -12px rgba(0,0,0,.18); }

/* ============ 공통 버튼 ============ */
.btn-primary {
  display:inline-flex; align-items:center; gap:.5rem;
  height:3.25rem; padding:0 1.75rem; border-radius:.85rem;
  background:var(--brand); color:#fff; font-weight:700; font-size:1rem;
  box-shadow:0 12px 24px -12px rgba(14,124,102,.6); transition:.2s;
}
.btn-primary:hover { background:var(--brand-dark); }
.btn-primary:active { transform:scale(.98); }
.btn-ghost {
  display:inline-flex; align-items:center; gap:.5rem;
  height:3.25rem; padding:0 1.75rem; border-radius:.85rem;
  background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.4);
  color:#fff; font-weight:700; font-size:1rem; transition:.2s;
}
.btn-ghost:hover { background:rgba(255,255,255,.2); }
.btn-ghost:active { transform:scale(.98); }

/* ============ HERO SLIDER ============ */
.hero-slide { position:absolute; inset:0; opacity:0; visibility:hidden; transition:opacity 1s ease; z-index:0; }
.hero-slide.is-active { opacity:1; visibility:visible; z-index:1; }
.hero-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform 8s ease; }
.hero-slide.is-active .hero-bg { transform:scale(1.08); }
.hero-scrim { position:absolute; inset:0; background:linear-gradient(120deg, rgba(8,20,17,.9) 0%, rgba(8,20,17,.62) 55%, rgba(8,20,17,.25) 100%); }
.hero-inner { position:absolute; inset:0; display:flex; align-items:center; z-index:2; }
.hero-inner > div { width:100%; max-width:1380px; margin:0 auto; padding:0 1rem 9rem; }
.hero-copy { opacity:0; transform:translateY(28px); transition:opacity .8s ease .35s, transform .8s ease .35s; }
.hero-slide.is-active .hero-copy { opacity:1; transform:translateY(0); }
.hero-badge { display:inline-flex; align-items:center; gap:.5rem; margin-bottom:1.1rem;
  border:1px solid rgba(94,234,212,.6); color:#5eead4; padding:.4rem .85rem; border-radius:9999px;
  font-size:.7rem; font-weight:700; letter-spacing:.22em; }
.hero-title { color:#fff; font-weight:900; font-size:2rem; line-height:1.18; margin-bottom:1rem; }
.hero-desc { color:rgba(255,255,255,.82); font-size:1rem; line-height:1.65; margin-bottom:1.75rem; max-width:34rem; }
.hero-actions { display:flex; flex-wrap:wrap; gap:.75rem; }
.hero-dot { width:2rem; height:3px; border-radius:2px; background:rgba(255,255,255,.3); transition:.4s; cursor:pointer; }
.hero-dot.is-active { width:3rem; background:var(--brand); }
@media (min-width:768px){ .hero-inner > div { padding:0 2rem 11rem; } .hero-title{ font-size:3rem; line-height:1.12; } }
@media (max-width:360px){ .hero-title{ font-size:1.7rem; } .hero-desc{ font-size:.9rem; } }

/* ============ WHY 카드 ============ */
.why-card { padding:1.25rem; border-radius:1rem; border:1px solid rgba(255,255,255,.1);
  background:rgba(255,255,255,.05); transition:.25s; }
.why-card:hover { border-color:rgba(14,124,102,.55); background:rgba(255,255,255,.1); transform:translateY(-2px); }
.why-ic { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:.7rem;
  margin-bottom:1rem; background:rgba(14,124,102,.32); color:#5eead4; transition:.25s; }
.why-card:hover .why-ic { background:var(--brand); color:#fff; }
.why-ic .ic { width:1.05rem; height:1.05rem; }
.why-card h3 { color:#fff; font-weight:700; font-size:1rem; margin-bottom:.4rem; }
.why-card p { color:rgba(255,255,255,.55); font-size:.85rem; line-height:1.6; }

/* ============ 서비스 세로 이미지 카드 ============ */
.svc-card { position:relative; border-radius:1rem; overflow:hidden; aspect-ratio:3/4; }
.svc-card img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.svc-card:hover img { transform:scale(1.07); }
.svc-scrim { position:absolute; inset:0; background:linear-gradient(to top, rgba(0,0,0,.9) 0%, rgba(0,0,0,.18) 52%, rgba(0,0,0,0) 100%); }
.svc-body { position:absolute; inset:auto 0 0 0; padding:1rem; z-index:2; }
.svc-body h3 { color:#fff; font-weight:900; font-size:1rem; margin-bottom:.35rem; }
.svc-body p { color:rgba(255,255,255,.6); font-size:.8rem; line-height:1.55; margin-bottom:.7rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; }
.svc-link { display:inline-flex; align-items:center; gap:.3rem; color:#5eead4; font-size:.78rem; font-weight:700; transition:gap .2s; }
.svc-card:hover .svc-link { gap:.55rem; }
@media (min-width:1024px){ .svc-body h3 { font-size:1.1rem; } .svc-body{ padding:1.25rem; } }

/* ============ WORK PROCESS 스텝 ============ */
.step-card { display:flex; gap:1rem; align-items:flex-start; padding:1.5rem;
  border-radius:1rem; border:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04); transition:.25s; }
.step-card:hover { border-color:rgba(94,234,212,.4); background:rgba(255,255,255,.07); }
.step-no { font-family:Inter,sans-serif; font-weight:900; font-size:1.9rem; line-height:1; color:rgba(94,234,212,.85); flex:0 0 auto; }
.step-card h3 { color:#fff; font-weight:700; font-size:1.02rem; margin-bottom:.35rem; }
.step-card p { color:rgba(255,255,255,.55); font-size:.85rem; line-height:1.55; }

/* ============ A/S 카드 ============ */
.as-card { position:relative; padding:1.75rem 1.5rem; border-radius:1.1rem; border:1px solid var(--line);
  background:#fff; box-shadow:0 16px 40px -28px rgba(0,0,0,.25); transition:.25s; }
.as-card:hover { border-color:var(--brand); transform:translateY(-3px); }
.as-no { position:absolute; top:1.25rem; right:1.5rem; font-family:Inter,sans-serif; font-weight:900;
  font-size:2.5rem; line-height:1; color:rgba(14,124,102,.12); }
.as-title { display:flex; align-items:center; gap:.5rem; font-weight:800; font-size:1.05rem; margin-bottom:.6rem; }
.as-card > p { color:#6b7280; font-size:.88rem; line-height:1.6; }
.as-list { margin-top:1rem; padding-top:1rem; border-top:1px dashed var(--line); display:flex; flex-direction:column; gap:.45rem; }
.as-list li { position:relative; padding-left:1.15rem; font-size:.83rem; color:#4b5563; }
.as-list li::before { content:"✓"; position:absolute; left:0; color:var(--brand); font-weight:900; }

/* ============ PARTNERS 마퀴 ============ */
.marquee { width:100%; overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); }
.marquee-track { display:inline-flex; gap:.75rem; white-space:nowrap; will-change:transform; }
.marquee-track[data-dir="ltr"] { animation:marqueeLTR 34s linear infinite; }
.marquee-track[data-dir="rtl"] { animation:marqueeRTL 30s linear infinite; }
.marquee:hover .marquee-track { animation-play-state:paused; }
.marquee-track span { flex:0 0 auto; padding:.6rem 1.4rem; border-radius:9999px; background:#fff;
  border:1px solid var(--line); color:#475569; font-weight:700; font-size:.9rem; }
@keyframes marqueeLTR { from{transform:translateX(0)} to{transform:translateX(-50%)} }
@keyframes marqueeRTL { from{transform:translateX(-50%)} to{transform:translateX(0)} }

/* ============ FAQ 아코디언 ============ */
.faq-item { border:1px solid var(--line); border-radius:.9rem; overflow:hidden; background:#fff; }
.faq-q { width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.1rem 1.25rem; font-weight:700; font-size:1rem; text-align:left; color:#1f2937; transition:.2s; cursor:pointer; }
.faq-q:hover { color:var(--brand); }
.faq-ic { color:#9ca3af; transition:transform .3s ease, color .2s; flex:0 0 auto; }
.faq-item.is-open .faq-q { color:var(--brand); }
.faq-item.is-open .faq-ic { transform:rotate(45deg); color:var(--brand); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .35s ease; }
.faq-a p { padding:0 1.25rem 1.15rem; color:#6b7280; font-size:.9rem; line-height:1.7; }

/* ============ 견적 폼 ============ */
.est-input { width:100%; height:3rem; padding:0 .9rem; border:1px solid var(--line); border-radius:.7rem;
  font-size:.92rem; background:#fff; color:#1f2937; transition:.2s; }
textarea.est-input { height:auto; padding:.7rem .9rem; }
.est-input:focus { outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(14,124,102,.15); }
.est-input::placeholder { color:#9ca3af; }

/* ============ 푸터 셀렉트 ============ */
.ft-select { width:100%; height:2.75rem; padding:0 .85rem; border-radius:.6rem;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.12); color:#cbd5e1; font-size:.85rem; }
.ft-select:focus { outline:none; box-shadow:0 0 0 2px rgba(14,124,102,.5); }
.ft-select option { color:#1f2937; }

/* ============ Mobile Drawer (Tailwind translate 함정 회피) ============ */
.drawer { transform:translateX(100%); transition:transform .35s cubic-bezier(.4,0,.2,1); will-change:transform; }
.drawer.is-open { transform:translateX(0); }
body.nav-lock { overflow:hidden; }

/* ============ 카운트업 안정 폭 ============ */
.count { font-variant-numeric:tabular-nums; }

/* ============ AOS 폴백 (CDN stale 대비) ============ */
.no-aos [data-aos] { opacity:1 !important; transform:none !important; }