ul, li {
  margin: 0;
  padding: 0;
  list-style: none;
}
img { border: 0; }
a { text-decoration: none; }

/* 공통 */
#submn {
  position: relative;
  width: 100%;
  bottom: 0;
  left: 0;
  clear: both;
  height: 76px;
  text-align: center;
}

#submn ul {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  font-size: 16pt;
  padding: 0;
  display: inline-block;
}

#submn li {
  float: left;
  vertical-align: middle;
  line-height: 76px;
  height: 76px;
  margin-left: -2px !important;
  padding: 0;
  margin: 0;
  border: 0 solid transparent;
  transition: all 0.2s ease-in-out;
}

/* ✅ PC: 반투명 배경 적용 */
@media (min-width: 768px) {
  #submn li {
    background-color: rgba(6, 42, 62, 0.85);
  }
  #submn li.on,
  #submn li.on:hover {
    background-color: rgba(0, 83, 129, 0.9);
    border: 0 solid rgba(0, 83, 129, 0.9);
  }
  #submn li:hover {
    cursor: pointer;
    background-color: rgba(6, 42, 62, 0.9);
    border: 0 solid rgba(0, 83, 129, 0.9);
  }
  #submn li:hover + li {
    border-left-color: rgba(0, 83, 129, 0.9);
  }
}

/* =========================================================
   SUB MENU (#submn) - PC/모바일 통합 최종본
   ✅ 모바일에서 2줄/3줄 자동 분할 정상 동작 (flex-wrap 적용)
   ✅ PC는 기존 float 기반 유지 + 반투명 배경 유지
   ✅ 모바일 비침/틈/깨짐 방지 + 줄바꿈 지원
========================================================= */

ul, li { margin:0; padding:0; list-style:none; }
img { border:0; }
a { text-decoration:none; }

/* =========================
   공통
========================= */
#submn{
  position:relative;
  width:100%;
  bottom:0;
  left:0;
  clear:both;
  height:76px;
  text-align:center;
}

#submn ul{
  width:100%;
  max-width:1280px;
  margin:0 auto;
  font-size:16pt;
  padding:0;
  display:inline-block;
}

#submn li{
  float:left;
  vertical-align:middle;
  line-height:76px;
  height:76px;
  margin-left:-2px !important;
  padding:0;
  margin:0;
  border:0 solid transparent;
  transition:all 0.2s ease-in-out;
}

/* 링크 공통 스타일 */
#submn a{
  display:inline-block;
  width:100%;
  height:100%;
  font-size:15pt;
  color:#eeeeee;
  font-weight:500;
  transition:all 0.2s ease-in-out;
}
#submn a:hover{
  color:#ffffff;
  text-decoration:underline;
}
#submn li.on a,
#submn li.on a:hover,
#submn li:hover a{
  color:#ffffff !important;
}

/* 열 분할 (PC/공통) */
#submn ul.col-2 li { width:49.99999%; }
#submn ul.col-3 li { width:33.33333%; }
#submn ul.col-4 li { width:25%; }
#submn ul.col-5 li { width:20%; }
#submn ul.col-6 li { width:16.666666%; }
#submn ul.col-7 li { width:14.28%; }
#submn ul.col-8 li { width:12%; }
#submn ul.col-9 li { width:11.1%; }
#submn ul.col-10 li{ width:9.9%; }

/* =========================
   ✅ PC: 반투명 배경
========================= */
@media (min-width:768px){
  #submn li{
    background-color:rgba(6, 42, 62, 0.85);
  }
  #submn li.on,
  #submn li.on:hover{
    background-color:rgba(0, 83, 129, 0.9);
    border:0 solid rgba(0, 83, 129, 0.9);
  }
  #submn li:hover{
    cursor:pointer;
    background-color:rgba(6, 42, 62, 0.9);
    border:0 solid rgba(0, 83, 129, 0.9);
  }
  #submn li:hover + li{
    border-left-color:rgba(0, 83, 129, 0.9);
  }
}

/* =========================
   ✅ 모바일: 2줄/3줄 자동 분할 (핵심)
   - 기존 float/width 방식 + 마지막 flex 패치 충돌 해결
   - 모바일에서는 float 제거하고 flex-wrap으로 줄바꿈
========================= */
@media (max-width:767.98px){

  /* 컨테이너 */
  #submn{
    position:relative;
    float:left;
    width:100%;
    height:auto;          /* ✅ 고정높이 제거 (줄바꿈/틈 방지) */
    margin:0;
    background:#062a3e;   /* ✅ 비침 차단 */
    overflow:hidden;
    text-align:center;
  }

  /* ul: wrap 허용 */
  #submn ul{
    display:flex;         /* ✅ flex로 안정화 */
    flex-wrap:wrap;       /* ✅ 핵심: 줄바꿈 */
    width:100%;
    max-width:none;
    margin:0;
    padding:0;
    justify-content:flex-start;
    align-items:stretch;
    font-size:0;          /* ✅ inline-gap/공백 이슈 방지 */
  }

  /* li: float 제거 */
  #submn li{
    float:none;
    height:45px;
    line-height:45px;
    margin:0 !important;  /* ✅ -2px 보정 제거 */
    padding:0;
    background:#062a3e;   /* ✅ 불투명 유지 */
    border:0;
    font-size:16px;       /* ul font-size:0 보정 */
  }

  /* 상태/호버 */
  #submn li.on,
  #submn li.on:hover{
    background-color:#005381;
    border:0 solid #005381;
  }
  #submn li:hover{
    background-color:#062a3e;
  }
  #submn li:hover + li{
    border-left-color:#005381;
  }

  /* 링크 */
  #submn a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    font-size:16px;
    color:#eeeeee;
  }

  /* ✅ 모바일 줄 분할 규칙 (원하던 2줄/3줄 구현) */

  /* 기본값(안전) */
  #submn ul[class^="col-"] li{ flex:0 0 50%; }

  /* 2개: 1줄 2개 */
  #submn ul.col-2 li{ flex:0 0 50%; }

  /* 3개: 1줄 3개 */
  #submn ul.col-3 li{ flex:0 0 33.33333%; }

  /* 4개: 2줄(2+2) */
  #submn ul.col-4 li{ flex:0 0 50%; }

  /* 5개: 2줄(3+2) */
  #submn ul.col-5 li{ flex:0 0 33.33333%; }
  #submn ul.col-5 li:nth-child(n+4){ flex-basis:50%; }

  /* 6개: 2줄(3+3) */
  #submn ul.col-6 li{ flex:0 0 33.33333%; }

  /* 7~9개: 2줄(4개씩) */
  #submn ul.col-7 li,
  #submn ul.col-8 li,
  #submn ul.col-9 li{
    flex:0 0 25%;
    letter-spacing:-0.8pt;
  }

  /* 10개: 2줄(5+5) */
  #submn ul.col-10 li{
    flex:0 0 20%;
    letter-spacing:-0.8pt;
  }

  /* 안전빵 */
  #submn *{ box-sizing:border-box; }
}