/* ================================================================
   찾아가는 안전체험차량 — styles.css
   마지막 수정: 2026-05
   ▶ 모바일 메뉴: 왼쪽에서 오른쪽으로 슬라이드 (Left Drawer)
   ▶ 야외 가독성 강화 색상 체계
   ▶ 단일 파일 / 중복 없음 / !important 최소화
================================================================ */

/* ──────────────────────────────
   1. CSS 변수 (디자인 토큰)
────────────────────────────── */
:root {
  /* 색상 */
  --c-bg:           #f5f7f9;
  --c-surface:      #ffffff;
  --c-primary:      #0d5c7a;
  --c-primary-d:    #083f55;
  --c-accent:       #ff6b00;       /* 주황 — 야외 고대비 */
  --c-accent-d:     #d45800;
  --c-text:         #111827;
  --c-text-muted:   #4b5e6b;
  --c-border:       rgba(13, 92, 122, 0.12);

  /* 타이포 */
  --font: 'Noto Sans KR', -apple-system, BlinkMacSystemFont, sans-serif;

  /* 그림자 */
  --sh-sm: 0 2px 8px rgba(0,0,0,0.08);
  --sh-md: 0 8px 24px rgba(0,0,0,0.13);

  /* 공간 */
  --radius:  12px;
  --header-h: 64px;

  /* ★ 모바일 메뉴 드로어 너비 */
  --drawer-w: 280px;
}

/* ──────────────────────────────
   2. 초기화
────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.65;
  color: var(--c-text);
  background: var(--c-bg);
}

/* ──────────────────────────────
   3. 헤더 (공통)
────────────────────────────── */
.header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 500;
  height: var(--header-h);
  background: rgba(255,255,255,0.97);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid var(--c-border);
  box-shadow: var(--sh-sm);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  padding: 0 1.25rem;
  gap: 2.5rem;
}

/* ──────────────────────────────
   4. 로고
────────────────────────────── */
.logo {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
  text-decoration: none;
  flex-shrink: 0;
}
.logo-sub {
  font-size: 0.72rem;
  font-weight: 600;
  color: #666;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.logo-main {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--c-text);
  letter-spacing: -0.04em;
  white-space: nowrap;
}
.logo-main em {
  font-style: normal;
  color: var(--c-accent);
}

/* ──────────────────────────────
   5. PC 내비게이션
────────────────────────────── */
.nav {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  position: static; /* 모바일에서 fixed로 override됨 */
}

.nav a {
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--c-text-muted);
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.18s;
}
.nav a:hover      { color: var(--c-primary); }
.nav a.accent     { color: var(--c-accent); font-weight: 700; }
.nav a.accent:hover { color: var(--c-accent-d); }

/* ──────────────────────────────
   6. 햄버거 버튼 (모바일 전용)
────────────────────────────── */
.menu-btn {
  display: none;           /* PC에서는 숨김 */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  background: var(--c-accent);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.18s, transform 0.12s;
}
.menu-btn:active { background: var(--c-accent-d); transform: scale(0.93); }

/* 햄버거 아이콘 (순수 CSS 3선) */
.menu-btn span,
.menu-btn span::before,
.menu-btn span::after {
  display: block;
  width: 22px;
  height: 2.5px;
  background: #fff;
  border-radius: 2px;
  transition: transform 0.25s, opacity 0.2s;
}
.menu-btn span { position: relative; }
.menu-btn span::before,
.menu-btn span::after {
  content: '';
  position: absolute;
  left: 0;
}
.menu-btn span::before { top: -7px; }
.menu-btn span::after  { top:  7px; }

/* 열렸을 때 X 아이콘 변환 */
.menu-btn.is-open span          { background: transparent; }
.menu-btn.is-open span::before  { transform: translateY(7px) rotate(45deg); }
.menu-btn.is-open span::after   { transform: translateY(-7px) rotate(-45deg); }

/* ──────────────────────────────
   7. ★ 모바일 드로어 메뉴 (Left-to-Right Slide)
────────────────────────────── */
/* 오버레이 (드로어 뒤 어두운 배경) */
.nav-overlay {
  display: none;
  position: fixed;
  inset: var(--header-h) 0 0 0;
  background: rgba(0,0,0,0.45);
  z-index: 400;
  opacity: 0;
  transition: opacity 0.28s;
}
.nav-overlay.is-open {
  display: block;
  opacity: 1;
}

/* ──────────────────────────────
   8. 컨테이너
────────────────────────────── */
.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1.25rem;
}

/* ──────────────────────────────
   9. 히어로
────────────────────────────── */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: calc(var(--header-h) + 2rem) 1.25rem 4rem;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  background: linear-gradient(145deg, #0d5c7a 0%, #0a4155 45%, #062a38 100%);
}
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0v60M0 30h60' stroke='rgba(255,255,255,0.04)' stroke-width='1' fill='none'/%3E%3C/svg%3E");
}
.hero-content {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 1200px;
  padding: 10px 20px 0 125px;
  display: flex;
  flex-direction: column;
  margin-top: -120px;
}
.hero-label {
  border-left: 4px solid var(--c-accent);
  padding-left: 15px;
  text-align: left;
  margin-bottom: 5rem;
}
.hero-label-year {
  font-size: 1.4rem;
  color: var(--c-accent);
  font-weight: 700;
  margin: 0 0 5px;
  line-height: 1;
}
.hero-label-org {
  color: rgba(255,255,255,0.95);
  font-size: 1.15rem;
  font-weight: 500;
  letter-spacing: -0.03em;
  margin: 0;
}
.hero-center { text-align: center; width: 100%; margin-left: -55px; }
.hero-title {
  font-size: clamp(2.25rem, 6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.03em;
  color: #fff;
  margin: 0 0 1.5rem;
}
.hero-desc {
  font-size: 1.1rem;
  color: rgba(255,255,255,0.85);
  max-width: 500px;
  margin: 0 auto 2rem;
}
.hero-scroll {
  position: absolute;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.8rem;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.1em;
}

/* ──────────────────────────────
   10. 버튼
────────────────────────────── */
.btn {
  display: inline-block;
  padding: 0.85rem 1.75rem;
  font-family: var(--font);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius);
  border: none;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, background 0.18s;
}
.btn:hover   { transform: translateY(-2px); box-shadow: var(--sh-md); }
.btn-primary { background: var(--c-accent); color: #fff; font-size: 1.1rem; font-weight: 700; padding: 12px 25px; }
.btn-primary:hover { background: var(--c-accent-d); color: #fff; }

/* ──────────────────────────────
   11. 섹션 공통
────────────────────────────── */
.section {
  padding: 4rem 0;
  scroll-margin-top: var(--header-h);
}
.section-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--c-primary);
  text-align: center;
  margin: 0 0 2rem;
  letter-spacing: -0.02em;
}

/* ──────────────────────────────
   12. 사업 소개
────────────────────────────── */
.intro { background: var(--c-surface); box-shadow: var(--sh-sm); }
.intro-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.intro-card {
  position: relative;
  padding: 3rem 1.5rem 2.5rem;
  background: #fff;
  border: 2px solid var(--c-accent);
  border-radius: var(--radius);
  text-align: center;
  cursor: pointer;
  transition: transform 0.25s, box-shadow 0.25s, background 0.2s;
  min-height: 200px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.intro-card:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 28px rgba(255,107,0,0.18);
  background: #fff8f3;
}
/* 플레이 아이콘 */
.intro-card::after {
  content: '';
  position: absolute;
  top: 14px; right: 14px;
  width: 26px; height: 26px;
  border: 2px solid var(--c-accent);
  border-radius: 50%;
  background: #fff;
  transition: background 0.2s;
}
.intro-card::before {
  content: '';
  position: absolute;
  top: 22px; right: 20px;
  z-index: 2;
  border-style: solid;
  border-width: 5px 0 5px 8px;
  border-color: transparent transparent transparent var(--c-accent);
  transition: border-color 0.2s;
}
.intro-card:hover::after  { background: var(--c-accent); }
.intro-card:hover::before { border-color: transparent transparent transparent #fff; }
.intro-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--c-primary); margin: 0 0 0.5rem; }
.intro-card p  { margin: 0; font-size: 0.92rem; color: var(--c-text-muted); line-height: 1.55; }

/* ──────────────────────────────
   13. 체험 프로그램
────────────────────────────── */
.programs { background: var(--c-bg); }
.program-list { list-style: none; margin: 0; padding: 0; }
.program-item {
  display: flex;
  align-items: flex-start;
  gap: 1.5rem;
  padding: 1.5rem 1.25rem;
  background: var(--c-surface);
  border-radius: var(--radius);
  margin-bottom: 0.75rem;
  box-shadow: var(--sh-sm);
  border-left: 5px solid var(--c-accent);
  cursor: pointer;
  transition: transform 0.2s, background 0.2s;
}
.program-item:hover { transform: translateX(8px); background: #fff8f3; }
.program-num { font-size: 1.2rem; font-weight: 700; color: var(--c-primary); opacity: 0.8; flex-shrink: 0; }
.program-item h3 { font-size: 1.05rem; font-weight: 600; margin: 0 0 0.25rem; color: var(--c-text); }
.program-item p  { margin: 0; font-size: 0.92rem; color: var(--c-text-muted); }

/* ──────────────────────────────
   14. 이용 안내
────────────────────────────── */
.guide { background: linear-gradient(180deg, rgba(13,92,122,0.06) 0%, transparent 100%); }
.guide-box {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.75rem 0.5rem;
  margin-bottom: 1.5rem;
}
.guide-step {
  background: var(--c-surface);
  padding: 1.25rem 1.5rem;
  border-radius: var(--radius);
  text-align: center;
  box-shadow: var(--sh-sm);
  min-width: 140px;
}
.guide-step-num {
  display: inline-block;
  width: 32px; height: 32px; line-height: 32px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 700;
  font-size: 0.95rem;
  margin-bottom: 0.5rem;
}
.guide-step p  { margin: 0; font-size: 0.95rem; font-weight: 500; }
.guide-arrow   { color: var(--c-primary); font-weight: 700; opacity: 0.7; }
.guide-note    { font-size: 0.9rem; color: var(--c-text-muted); margin: 0 0 0.75rem; text-align: center; }

/* ──────────────────────────────
   15. 문의
────────────────────────────── */
.contact-card {
  max-width: 400px;
  margin: 0 auto;
  padding: 2rem;
  background: var(--c-surface);
  border-radius: var(--radius);
  box-shadow: var(--sh-md);
  border: 1px solid var(--c-border);
}
.contact-card p         { margin: 0 0 0.5rem; color: var(--c-text); }
.contact-card strong    { color: var(--c-primary); }
.contact-address        { margin-top: 0.75rem; font-size: 0.92rem; color: var(--c-text-muted); }

/* ──────────────────────────────
   16. 푸터
────────────────────────────── */
.footer {
  padding: 2rem 0;
  background: var(--c-primary-d);
  color: rgba(255,255,255,0.9);
  text-align: center;
}
.footer-logo { font-weight: 700; font-size: 1rem; margin: 0 0 0.5rem; }
.footer-copy { font-size: 0.88rem; opacity: 0.8; margin: 0; }

/* ================================================================
   17. 반응형 — 모바일 (max-width: 768px)
================================================================ */
@media (max-width: 768px) {

  /* ── 헤더 내부 ── */
  .header-inner { padding: 0 0.75rem; }

  /* ── 햄버거 버튼 표시 ── */
  .menu-btn { display: flex; }

  /* ── 로고 폰트 조정 ── */
  .logo-sub  { font-size: 0.68rem; }
  .logo-main { font-size: clamp(0.9rem, 3.8vw, 1.1rem); }

  /* ────────────────────────────────────────────
     ★ 핵심: Left Drawer — 왼쪽에서 오른쪽으로 슬라이드
     기존 right:0 / translateX(100%) 방식을 완전히 제거하고
     left:0 / translateX(-100%) 방식으로 교체
  ──────────────────────────────────────────── */
  .nav {
    /* ★ position:fixed로 헤더 flex 컨텍스트에서 완전히 분리 */
    position: fixed;
    top: var(--header-h);
    left: 0;
    /* ★ height를 명시해야 bottom:0이 무시되는 문제 해결 */
    height: calc(100vh - var(--header-h));
    width: var(--drawer-w);
    /* ★ <nav style="margin-left:60px">(PC용 인라인 스타일)가 서랍 메뉴를
       완전히 숨기지 못하게 방해하므로 반드시 0으로 무력화 */
    margin-left: 0 !important;

    /* ★ display:flex를 명시적으로 재선언 (부모 flex 영향 차단) */
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;

    /* 기본 상태: 왼쪽으로 숨김 */
    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    /* 디자인 — 야외 고대비 다크 테마 */
    background: #062a38;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    z-index: 450;
    overflow-y: auto;
    overflow-x: hidden;
  }

  /* 열린 상태: translateX(0)으로 슬라이드 인 */
  .nav.nav-open {
    transform: translateX(0);
  }

  /* 메뉴 링크 스타일 — 야외 대비 강화 */
  .nav a {
    display: block;
    width: 100%;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
  }
  .nav a:hover  {
    background: rgba(255,255,255,0.1);
    color: #ffcc00;
    padding-left: 1.8rem;
  }
  /* 강조 링크 */
  .nav a.accent { color: #ff8c3a; }
  .nav a.accent:hover { color: #ffcc00; }

  /* ── 히어로 모바일 ── */
  .hero-content {
    padding: 10px 20px 0 20px;
    margin-top: -80px;
  }
  .hero-label {
    transform: none;
    margin-bottom: 2.5rem;
  }
  .hero-center { margin-left: 0; }

  /* ── 그리드 1열 ── */
  .intro-grid { grid-template-columns: 1fr; }

  /* ── 이용안내 세로 ── */
  .guide-box    { flex-direction: column; }
  .guide-arrow  { transform: rotate(90deg); }

  /* ── 프로그램 제목 ── */
  .intro-card h3,
  .program-item h3 { font-size: 1rem; word-break: keep-all; }
}

/* ── 작은 화면 추가 보정 ── */
@media (max-width: 400px) {
  .logo-main { font-size: clamp(0.82rem, 3.4vw, 0.95rem); }
  .logo-sub  { font-size: 0.62rem; }
}

/* styles.css 파일 맨 아래에 추가 또는 교체 */
@media (min-width: 769px) {
  /* 💻 화면 너비가 769px 이상(데스크톱)일 때만 작동 */

  .header-inner {
    justify-content: center; /* 좌우 끝으로 벌려진 요소를 정중앙으로 모음 */
    gap: 4rem;              /* 로고와 메뉴 항목 사이의 여백 (원하는 만큼 조절 가능) */
  }
}

/* ================================================================
   18. 반응형 — 태블릿 (769px ~ 1300px)
   ▶ 메뉴 항목이 9개라 한 줄에 다 들어가지 않아 겹치거나 잘리므로,
     이 구간에서도 폰과 동일한 드로어(햄버거) 메뉴를 그대로 사용한다.
   ▶ 실제 안드로이드 태블릿의 가로/세로 CSS px 폭이 대부분 이 구간에
     들어오므로, 가로·세로 모드 모두 자연스럽게 보인다.
================================================================ */
@media (min-width: 769px) and (max-width: 1300px) {
  .menu-btn { display: flex; }

  .nav {
    position: fixed;
    top: var(--header-h);
    left: 0;
    height: calc(100vh - var(--header-h));
    width: var(--drawer-w);
    margin-left: 0 !important; /* <nav style="margin-left:60px"> 무력화 */

    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0.5rem 0;

    transform: translateX(-100%);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);

    background: #062a38;
    box-shadow: 4px 0 24px rgba(0,0,0,0.35);
    z-index: 450;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .nav.nav-open { transform: translateX(0); }

  .nav a {
    display: block;
    width: 100%;
    padding: 0.9rem 1.4rem;
    font-size: 1rem;
    font-weight: 600;
    color: #ffffff;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    white-space: nowrap;
    transition: background 0.15s, color 0.15s, padding-left 0.15s;
  }
  .nav a:hover { background: rgba(255,255,255,0.1); color: #ffcc00; padding-left: 1.8rem; }
  .nav a.accent { color: #ff8c3a; }
  .nav a.accent:hover { color: #ffcc00; }
}

/* 태블릿 구간에서는 3열 그리드가 좁아 카드가 답답해 보이므로 2열로 완화 */
@media (min-width: 600px) and (max-width: 900px) {
  .intro-grid { grid-template-columns: repeat(2, 1fr); }
}