/* =========================
   Base Reset
========================= */
:root{
    --bottomBarH: 92px;     /* 하단 고정 배너바 높이 */
    --heroW: 720px;         /* 상단 대표 배너 폭 기준 */
    --heroRatioW: 720;
    --heroRatioH: 133;
  }
  
  *{ margin: 0; padding: 0; box-sizing: border-box; }
  html, body{ height: 100%; }
  
  body{
    font-family: system-ui, -apple-system, Segoe UI, Roboto, "Apple SD Gothic Neo", "Noto Sans KR", Arial, sans-serif;
    background: #ffffff;
    color: #111;
    
    padding-bottom: 0; /* ✅ 더 이상 필요 없음 */
  }
  
  /* ✅ wrap을 flex로 만들어 "내용이 짧아도 footer를 하단으로" */
  #wrap{
    min-height: 100vh;
    display: flex;
    flex-direction: column;
  }
  
  #content{
    flex: 1;                /* footer를 아래로 밀어줌 */
    padding: 18px 0 10px;
  }
  
  /* =========================
     Hero (상단 대표 배너 2개)
     ※ 기존의 전역 img 규칙 제거 → heroImg로만 적용
  ========================= */
  .hero{
    width: 100%;
    display: grid;
    gap: 10px;
    justify-items: center;
    padding: 14px 12px;
  }
  
  .heroImg{
    border: 1px solid #3b63d1;
    border-radius: 8px;
  
    width: var(--heroW);
    max-width: 92vw;
  
    /* ✅ 반응형 안정: 비율 유지 + cover */
    aspect-ratio: calc(var(--heroRatioW) / var(--heroRatioH));
    height: auto;
    object-fit: cover;
  
    display: block;
    cursor: pointer;
  }
  
  /* =========================
     Login
  ========================= */
  .login{
    width: min(520px, 92vw);
    margin: 6px auto 18px;
    padding: 12px 10px 16px;
  }
  
  .login .row{
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 8px 0;
  }
  
  .login .row-center{
    justify-content: center;
  }
  
  .lbl{
    width: 42px;
    font-weight: 800;
    color: #222;
  }
  
  .login_input{
    width: min(360px, 70vw);
    border: 1px solid #5172ed;
    border-radius: 8px;
    font-size: 1rem;
    padding: 10px 12px;
  }
  
  .buttonStyle1{
    width: 200px;
    margin-top: 10px;
  
    background-color: #404663;
    color: #fff;
    border: 0;
    font-size: 1rem;
    font-weight: 600;
    padding: 0.7em 1.25em;
    border-radius: 0.7em;
  
    box-shadow:
      0px 1.7px 2.2px rgba(0, 0, 0, 0.02),
      0px 4px 5.3px rgba(0, 0, 0, 0.028),
      0px 7.5px 10px rgba(0, 0, 0, 0.035),
      0px 13.4px 17.9px rgba(0, 0, 0, 0.042),
      0px 25.1px 33.4px rgba(0, 0, 0, 0.05),
      0px 60px 80px rgba(0, 0, 0, 0.07);
  }
  
  .buttonStyle1:active{
    transform: scale(1.01);
  }
  
  .no-show{ display: none; }
  
  /* =========================
     Bottom Fixed Banner Bar
  ========================= */
  .bottom-bannerbar{
    position: relative;   /* ✅ fixed 제거 */
    left: auto; right: auto; bottom: auto;
    height: auto;
    z-index: 1;
  
    background: rgba(255,255,255,0.92);
    border-top: 1px solid rgba(0,0,0,0.08);
    border-bottom: 1px solid rgba(0,0,0,0.08);
  
    display: flex;
    align-items: center;
    padding: 10px 12px;
  }
  
  .banners{
    display: flex;
    gap: 10px;
    align-items: center;
  }
  
  .banners--bottom{
    width: 100%;
    overflow-x: auto;
    overflow-y: hidden;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-bottom: 2px;
  }
  
  .banners--bottom a{
    flex: 0 0 auto;
  }
  
  /* ✅ 하단 배너 이미지는 heroImg 전역 영향 없음 (별도 클래스) */
  .bannerImg{
    height: 54px;
    width: auto;
    display: block;
    border-radius: 12px;
  }
  
  /* =========================
     LMS Footer
  ========================= */
  #lms_ft{
    margin-top: auto; /* ✅ wrap flex에서 항상 하단으로 */
    background: #1f1f1f;
    color: #e9e9e9;
    border-top: 1px solid rgba(255,255,255,0.08);
  }
  
  .lms_ft_wrap{
    max-width: 1200px;
    margin: 0 auto;
    padding: 5px 7px;
  
    /* ✅ 컬럼 수가 바뀌어도 자연스럽게 */
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 22px;
  }
  
  .lms_ft_col{ min-width: 0; }
  
  .lms_ft_title{
    margin: 0 0 10px 0;
    font-size: 15px;
    font-weight: 900;
    letter-spacing: -0.2px;
    color: #ffffff;
  }
  
  .lms_ft_title_link{
    color: #ffffff;
    text-decoration: none;
  }
  .lms_ft_title_link:hover{
    text-decoration: underline;
  }
  
  .lms_ft_links{
    display: grid;
    gap: 8px;
  }
  
  #lms_ft a{
    color: #cfcfcf;
    text-decoration: none;
    font-size: 13px;
  }
  #lms_ft a:hover{
    color: #ffffff;
    text-decoration: underline;
  }
  
  .lms_ft_info{
    margin: 0;
    font-size: 13px;
    line-height: 1.7;
    color: #cfcfcf;
  }
  
  .lms_ft_badges{
    margin: 10px 0 0 0;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
  }
  .lms_ft_badges .badge{
    font-size: 12px;
    padding: 5px 8px;
    border-radius: 999px;
    background: rgba(255,255,255,0.10);
    border: 1px solid rgba(255,255,255,0.12);
    color: #f1f1f1;
  }
  
  /* 공지 */
  .lms_notice_list{
    margin: 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 8px;
  }
  
  .lms_notice_list li{
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    min-width: 0;
  }
  
  .lms_notice_list li a{
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 13px;
  }
  
  .lms_notice_list .date{
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    flex: 0 0 auto;
  }
  
  .lms_notice_list .empty{
    color: rgba(255,255,255,0.55);
    font-size: 13px;
  }
  
  /* 접속자 */
  .lms_visit{
    margin: 0;
    font-size: 13px;
    color: #cfcfcf;
  }
  .lms_visit .row{
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 7px 0;
    border-bottom: 1px dashed rgba(255,255,255,0.12);
  }
  .lms_visit .row:last-child{ border-bottom: 0; }
  .lms_visit dt, .lms_visit dd{ margin: 0; }
  .lms_visit strong{
    color: #ffffff;
    font-weight: 900;
  }
  
  .lms_ft_tip{
    margin: 10px 0 0 0;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
  }
  
  /* footer bottom line */
  .lms_ft_bottom{
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(0,0,0,0.18);
  }
  
  .lms_ft_bottom_inner{
    max-width: 1200px;
    margin: 0 auto;
    padding: 14px 18px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: rgba(255,255,255,0.65);
  }
  .lms_ft_bottom_inner .sep{ opacity: 0.5; }
  
  /* =========================
     Responsive small tweak
  ========================= */
  @media (max-width: 480px){
    .login_input{ width: min(320px, 70vw); }
    .bannerImg{ height: 50px; }
  }