@charset "utf-8";
/* ============================================================
   서브 상단 내비게이션(#sub_visual) 데스크톱 드롭다운 정비
   - 메뉴 폭을 콘텐츠(.scontents=1600px) 폭에 맞춤
   - 3차 메뉴(.left_subnav)를 해당 항목 아래 말풍선(꼬리) 드롭다운으로
   - 열림 제어는 JS(.is-open): 클릭 토글 + 마우스 이탈 1분 후 자동닫힘
   - #sub_visual 스코프 + 고유 파일(다른 개발자 CSS와 충돌 방지)
   작성: 코아시스템 2026-09-03
   ============================================================ */
@media (min-width: 1025px) {
  /* 상단 서브메뉴 바: 항목을 콘텐츠 폭(1600) 이내로 균형 배치 */
  #sub_visual .sub_left_menu > .left_subnav_ul{
    max-width: 1600px; margin: 0 auto; padding: 0 !important;
    flex-wrap: nowrap; /*justify-content: space-between;*/ gap: 4px;
  }
  #sub_visual .left_subnav_ul > li{
    width: auto !important; min-width: 0 !important; flex: 1 0 auto !important;  /* 고정폭 해제 → 내용 크기 */
    padding: 0 !important; margin: 0 !important;   /* 좌우 패딩(~70px) 제거 → 실제 내용 크기 */
    position: relative;              /* 드롭다운 기준점(핵심 수정) */
  }
  #sub_visual .left_subnav_ul > li > div{
    width: auto !important; height: 60px; line-height: 60px;
  }
  #sub_visual .left_subnav_ul .sub_link_btn{
    width: auto !important; min-width: 0 !important;
    white-space: nowrap;             /* '프로그램 조회' 한 줄 유지 */
    padding: 0 18px;
  }
  /* 하위메뉴 보유 표시: 화살표 위치·열림 시 회전/강조 */
  #sub_visual .left_subnav_ul > li > div > span.sub_arrow{
    margin-top: 0; top: 50%; transform: translateY(-50%); right: 6px;
  }
  /* 하위메뉴(화살표) 보유 항목은 라벨 오른쪽에 화살표 공간 확보 */
  #sub_visual .left_subnav_ul > li > div:has(> span.sub_arrow) > a.sub_link_btn{ padding-right: 34px; }
  #sub_visual .left_subnav_ul > li > div > span.sub_arrow i{ transition: transform .25s, color .15s; }
  #sub_visual .left_subnav_ul > li.is-open > div > span.sub_arrow i{ color:#fff; transform: rotate(180deg); }
  #sub_visual .left_subnav_ul > li.is-open > div > a.sub_link_btn{ color:#fff; }

  /* 3차 드롭다운: 마일리지 바로 아래, 말풍선(꼬리) 스타일 — .is-open일 때만 표시 */
  #sub_visual .sub_left .left_subnav{
    display: none !important;        /* 인라인 display:block(현재섹션 강제표시) 무력화 */
    position: absolute; top: calc(100% + 9px); left: 50%; transform: translateX(-50%);
    width: max-content; min-width: 180px; padding: 6px 0; margin: 0;
    background: #0d233b; border: 0; border-radius: 10px;
    box-shadow: 0 14px 30px rgba(7,30,52,.38); z-index: 130; text-align: left;
  }
  #sub_visual .left_subnav_ul > li.is-open .left_subnav{ display: block !important; }
  /* 말풍선 꼬리(위쪽, 마일리지 항목을 가리킴) */
  #sub_visual .sub_left .left_subnav::before{
    content: ''; position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%);
    border: 8px solid transparent; border-bottom-color: #0d233b;
  }
  /* 갭 브릿지: 항목과 드롭다운 사이 투명 영역(마우스 이동 시 닫힘 방지 보조) */
  #sub_visual .sub_left .left_subnav::after{
    content: ''; position: absolute; left: 0; right: 0; top: -13px; height: 13px;
  }
  /* 드롭다운 항목 */
  #sub_visual .sub_left .left_subnav li{
    width: 100%; padding: 0; background: transparent !important;   /* 외부 라벤더 배경 제거 */
    border-bottom: 1px solid rgba(255,255,255,.12);
  }
  #sub_visual .sub_left .left_subnav li:last-child{ border-bottom: 0; }
  #sub_visual .sub_left .left_subnav li.on{ background: rgba(255,255,255,.16) !important; }  /* 현재 페이지 강조 */
  #sub_visual .sub_left .left_subnav li a,
  #sub_visual .sub_left .left_subnav li a._depth3{
    display: block; width: 100%; color: #fff; font-size: 14px; font-weight: 500;
    line-height: 1.4; padding: 10px 20px; white-space: nowrap; text-indent: 0;
    transition: background .15s, padding-left .15s;
  }
  #sub_visual .sub_left .left_subnav li.on a,
  #sub_visual .sub_left .left_subnav li.on a._depth3{ font-weight: 700; color:#fff; }
  #sub_visual .sub_left .left_subnav li a:hover,
  #sub_visual .sub_left .left_subnav li a._depth3:hover{
    background: rgba(255,255,255,.14); color:#fff; padding-left: 26px; text-indent: 0;
  }
}