/* ===============================
   그리드, 모바일 내비까지 구조 중심 (정리본)
   - 데스크톱 헤더/서브메뉴/푸터 스타일은 components.css로 이관
   - 여기엔 '레이아웃/그리드/컨테이너/모바일 패널 틀'만 유지
   =============================== */

/* ===============================
   📦 Container & Section
   =============================== */
.container{
  max-width:1200px;
  margin:0 auto;
  padding:0 32px;
}
@media (max-width:768px){ .container{ padding:0 20px; } }
@media (max-width:640px){ .container{ padding:0 16px; } }

.content-section{
  padding: var(--section-padding);
  text-align:center;
}

/* ===============================
   🧱 Grid Utilities
   =============================== */
.grid-3{
  display:grid;
  grid-template-columns: repeat(3,1fr);
  gap:20px;
}
@media (max-width:1024px){ .grid-3{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .grid-3{ grid-template-columns: 1fr; } }

.grid-4{
  display:grid;
  grid-template-columns: repeat(4,1fr);
  gap:20px;
}
@media (max-width:1024px){ .grid-4{ grid-template-columns: repeat(3,1fr); } }
@media (max-width:768px){  .grid-4{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:480px){  .grid-4{ grid-template-columns: 1fr; } }

/* ===============================
   📱 Mobile Navigation (Base)
   - 데스크톱 헤더는 components.css에서 관리
   - 모바일 패널 '틀'은 레이아웃으로 유지
   =============================== */
.mobile-nav,
.mobile-menu-toggle,
.mobile-nav-backdrop{ display:none; }

@media (max-width:768px){

  /* 데스크톱 메뉴 숨김 + 모바일 요소 보이기 (데스크톱 .navbar는 components.css) */
  .navbar{ display:none !important; }
  .mobile-nav{ display:block; }
  .mobile-nav-backdrop{ display:block; }

  /* 햄버거 버튼(위치/크기 틀) */
  .mobile-menu-toggle{
    display:block !important;
    position:absolute; top:20px; right:20px;
    font-size:2rem; background:none; border:none;
    z-index:1010;
  }

  /* 패널(왼쪽 슬라이드) — 레이아웃/틀 */
  .mobile-nav{
    position:fixed; top:0; left:-100%;
    width:86%; max-width:380px; height:100svh;
    background:#f7faf7;
    border-right:1px solid #e2e8e2;
    border-top:6px solid var(--color-primary);
    border-radius:0 14px 14px 0;
    box-shadow:0 10px 30px rgba(0,0,0,.14);
    padding:14px;
    overflow-y:auto;
    z-index:1001;
    transition:left .28s ease;
  }
  .mobile-nav.open{ left:0; }

  /* 백드롭 */
  .mobile-nav-backdrop{
    position:fixed; inset:0;
    background:rgba(0,0,0,.32);
    opacity:0; pointer-events:none;
    z-index:1000; transition:opacity .25s ease;
  }
  .mobile-nav-backdrop.active{ opacity:1; pointer-events:auto; }

  /* 1뎁스 박스(색/테두리/간격은 UI 스타일로 봐도 되지만,
     모바일 패널 내부 기본 배치이므로 여기 유지) */
  .mobile-nav-links{ list-style:none; margin:0; padding:6px 4px; }
  .mobile-nav-links > li{ margin-bottom:14px; }

  .mobile-nav .has-submenu > a{
    display:flex; align-items:center; justify-content:space-between;
    background: var(--color-primary); color:#fff;
    border:1px solid rgba(0,0,0,.08);
    font-weight:800; font-size:1.05rem;
    padding:14px 16px; border-radius:10px;
    text-decoration:none;
    box-shadow:0 1px 0 rgba(255,255,255,.35) inset;
  }
  .mobile-nav .has-submenu > a::after{ content:none !important; display:none !important; }

  /* 서브메뉴 (모바일에선 패널 내부 흐름) */
  .mobile-nav .submenu{
    position:static; top:auto; left:auto; transform:none;
    display:block !important;
    padding:8px 2px 2px; margin-top:8px;
    background:transparent; box-shadow:none;
    text-align:left;
  }
  .mobile-nav .submenu a,
  .mobile-nav .submenu li > a{
    display:block;
    padding:12px 14px; margin:8px 0 0;
    background:#fff;
    color: var(--color-primary);
    border:1px solid var(--color-primary);
    border-radius:8px;
    font-size:1rem; line-height:1.4;
    text-decoration:none;
  }
  .mobile-nav .submenu a:hover,
  .mobile-nav .submenu li > a:hover{
    background:#eaf5ea;
    border-color: var(--color-primary);
    color: var(--color-primary);
  }
}

/* ===============================
   🧭 Layout Helpers
   =============================== */
body{
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
main{ flex:1; }

#toTop{
  position:fixed;
  bottom:2rem; right:1.5rem;
  width:48px; height:48px;
  background-color: var(--color-primary);
  color: var(--color-text-light);
  border:none; border-radius:50%;
  box-shadow: var(--box-shadow-md);
  font-size:20px; cursor:pointer;
  z-index:999;
  opacity:0; pointer-events:none;
  transition: background-color var(--transition-base), transform .2s ease;
}
#toTop.show{ opacity:1; pointer-events:all; }