/* ============================================================
   대한운수 — 커스텀 스타일 (Tailwind 위에 얹는 레이어)
   에디토리얼 × 산업/물류 · 크림 / 네이비 / 앰버
   ============================================================ */

:root {
  --cream: #f4efe3;
  --paper: #fbf8f1;
  --navy: #0e1e3a;
  --navy-deep: #0a1730;
  --amber: #f2a100;
  --taupe: #6e6557;
  --line: #e0d8c7;
}

html { scroll-behavior: smooth; scroll-padding-top: 88px; }

body {
  background: #ffffff;
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* 종이 질감 그레인 오버레이 */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* 윤곽선 텍스트 (배경 장식용 대형 워드) */
.outline {
  -webkit-text-stroke: 2px rgba(14, 30, 58, .14);
  color: transparent;
}
.outline-amber {
  -webkit-text-stroke: 2px rgba(242, 161, 0, .45);
  color: transparent;
}

/* ============================================================
   헤더 — 투명 → 스크롤 시 네이비
   ============================================================ */
.hd { position: fixed; transition: background .35s ease, box-shadow .35s ease, backdrop-filter .35s; }
.hd::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(10, 23, 48, .55), rgba(10, 23, 48, 0));
  pointer-events: none;
  transition: opacity .35s ease;
  z-index: -1;
}
.hd.is-scrolled::before { opacity: 0; }
.hd__logo { text-shadow: 0 2px 12px rgba(10, 23, 48, .45); }
.hd.is-scrolled .hd__logo { text-shadow: none; }
.hd.is-scrolled {
  background: rgba(10, 23, 48, .92);
  backdrop-filter: blur(10px);
  box-shadow: 0 14px 40px rgba(0, 0, 0, .28);
}
.hd.is-scrolled .hd__logo { color: var(--cream); }
.hd.is-scrolled .hd__logo .accent { color: var(--amber); }
.hd.is-scrolled .hd__sub { color: rgba(244, 239, 227, .65); }
.hd.is-scrolled .hd__nav a { color: rgba(244, 239, 227, .85); }
.hd.is-scrolled .hd__nav a:hover { color: #fff; }
.hd.is-scrolled .hd__toggle span { background: var(--cream); }

/* 햄버거 */
.hd__toggle span { transition: transform .3s, opacity .3s, background .3s; }
.hd__toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hd__toggle.is-active span:nth-child(2) { opacity: 0; }
.hd__toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* 모바일 패널 */
.mnav { max-height: 0; overflow: hidden; transition: max-height .4s cubic-bezier(.4, 0, .2, 1); }
.mnav.is-open { max-height: 420px; }

/* 네비 언더라인 */
.hd__nav a { position: relative; }
.hd__nav a::after {
  content: ""; position: absolute; left: 0; bottom: -6px;
  width: 0; height: 2px; background: var(--amber); transition: width .25s;
}
.hd__nav a:hover::after { width: 100%; }

/* ============================================================
   마퀴 (흐르는 띠)
   ============================================================ */
.marquee { overflow: hidden; }
.marquee__track {
  display: flex;
  width: max-content;
  animation: marquee 32s linear infinite;
}
.marquee:hover .marquee__track { animation-play-state: paused; }
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ============================================================
   서비스 리스트 — 넘버링 에디토리얼
   ============================================================ */
.svc { transition: background .3s ease, color .3s ease, padding .3s ease; }
.svc:hover { background: var(--navy); color: var(--cream); }
.svc:hover .svc__no { color: var(--amber); -webkit-text-stroke-color: transparent; }
.svc:hover .svc__desc { color: rgba(244, 239, 227, .75); }
.svc:hover .svc__arrow { opacity: 1; transform: translateX(0); color: var(--amber); }
.svc__arrow { opacity: 0; transform: translateX(-12px); transition: opacity .3s, transform .3s; }
.svc__no { -webkit-text-stroke: 1.5px rgba(14, 30, 58, .25); color: transparent; transition: color .3s, -webkit-text-stroke-color .3s; }

/* ============================================================
   등장 애니메이션
   ============================================================ */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1);
}
.reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .marquee__track { animation: none; }
  html { scroll-behavior: auto; }
}