/* ================= Responsive ================= */
@media (max-width: 960px){
  .hero-title{ font-size:34px; }
  .hero-slider{ height:420px; }
}
@media (max-width: 760px){
	.hero-title{font-size:20px;}
}

@media (max-width: 760px){
  .grid-2{ grid-template-columns:1fr; }

  .nav-toggle{ display:inline-block; }

  .header-inner{ position:relative; }

  .nav{
    display:none;
    position:absolute;
    left:12px;
    right:12px;
    top:64px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:16px;
    padding:10px;
    box-shadow:var(--shadow);
    flex-direction:column;
    align-items:stretch;
    gap:6px;
  }

  .nav.open{ display:flex; }

  .nav a,
  .dropdown-toggle{
    padding:12px;
    text-align:left;
    width:100%;
  }

  /* 모바일에서 밑줄 인디케이터는 과해질 수 있어 비활성 */
  .nav a::after,
  .dropdown-toggle::after{
    display:none;
  }

  /* ✅ 모바일 드롭다운: 아코디언(open 클래스 기반) */
  .dropdown-menu{
    position:static;
    display:none;
    border:none;
    box-shadow:none;
    padding:0;
    margin:0 0 6px 0;
    gap:4px;
    opacity:1;
    visibility:visible;
    transform:none;
    pointer-events:auto;
    flex-direction:column;
  }

  /* open 상태에서만 펼침 */
  .nav-item.dropdown.open .dropdown-menu{
    display:flex;
  }

  .dropdown-menu a{
    padding:10px 12px;
  }

  /* ✅ 공지사항/리스트 페이지 상단: 모바일 정렬 */
  .page-head{
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .page-head > div{ width: 100%; }

  .h1{
    width: 100%;
    white-space: nowrap;
  }

  .page-head form{
    width: 100%;
    display:flex;
    flex-wrap:wrap;
    gap:8px;
  }

  .page-head form select{ flex:0 0 auto; }

  .page-head form input{
    width:100% !important;
    flex:1 1 100%;
    min-width:0;
  }

  .page-head form button{ flex:0 0 auto; }

  .container{
    padding:24px 16px 110px;
  }

  .footer-inner{
    flex-direction:column;
    gap:12px;
    padding:0 16px;
  }
}

/* ================= Tablet (768px) Layout Fix ================= */
@media (max-width: 820px){
  .grid-2{
    grid-template-columns: 1fr !important;
  }
}

/* =========================
   Mobile Hero Slider Height
   ========================= */
@media (max-width: 768px) {
  .hero-slider {
    height: 300px !important;
  }

  .hero {
    max-height: 300px;
  }
}