
/* ===============================
   Mobile Styles (max-width: 800px)
   =============================== */

@media (max-width: 900px){
img {
  max-width: 100%;
  height: auto;
}
.mb_ft {font-size:0.95rem; line-height:1.3rem;}
.sub-title2 {
	font-size:2rem;
	margin:10px;
	line-height:2.5rem;
}
.container {padding:25px 15px;}
.mb_off {display:none;}

/* Responsive */
  .banner-row{grid-template-columns:1fr}
  .grid-2{grid-template-columns:1fr}
  .cheer-item{grid-template-columns: 42px 1fr 78px}
  h2.section-title{font-size:28px; margin-top:30px !important; margin-bottom:15px !important;}
  .audio-grid{ grid-template-columns: repeat(3, 1fr); }

/* --- Cheer list mobile: two-line layout --- */
  .cheer-item{  gap:6px 10px;}
.cheer-avatar{ grid-row:1; grid-column:1; }
.cheer-user{ grid-row:1; grid-column:2; align-self:center; }
.cheer-text{ grid-row:2; grid-column:1 / -1; }
.cheer-item > div:last-child{ grid-row:1; grid-column:3; justify-self:end; }

/* ========== Mobile main menu: keep current dropdown open ========== */
  .dropdown{ display:none; }
  .nav-btn{ 
	font-size:18px; padding:10px 10px; 
	font-weight:600 !important;
  }

 /* ========== Learning board title mobile size ========== */
  .board-title{ font-size:20px; }

/* ===== Mobile header layout: top menu on top row, logo below ===== */
  .top-menu{
    order:1;
    width:100%;
    justify-content:flex-start;
    gap:8px;
    flex-wrap:nowrap;
    overflow:auto;
    -webkit-overflow-scrolling:touch;
    padding:8px 10px;
  }
  .top-link{
    font-size:13px;
    padding:5px 8px;
    white-space:nowrap;
  }

/* ===== Audio download: 3 per row on mobile ===== */
  .audio-grid{ grid-template-columns: repeat(3, 1fr) !important; }

  /* mobile main menu: bigger, centered, one-line */
  .main-nav{
	  justify-content: space-around !important;
    overflow:hidden !important;
    flex-wrap:nowrap !important;
    gap:0px !important;
  }
  .brand img{ height:45px; }
  .header-toprow{
    flex-direction: row;
    align-items: center;
  }
  .site-header{ position:sticky; top:0; z-index:999; }
  .header-toprow{
    position:relative;
    width:100%;
    display:flex;
    align-items:flex-start;
  }
  /* Reserve height for fixed logo + hamburger */
  body{ padding-top: 50px; }
  body.scrolled .nav-inner{
    margin-top: 50px;   /* 로고 높이에 맞게 조절 */
  }
  .nav-item {padding:10px 0px 12px 0px;}
  .nav-item .dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
  }
  .nav-item:hover .dropdown{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
  }

  .board-card {
	 flex-direction: column;
	 gap:25px;
	
  }
  .board-card div {
	width:95%;
	margin:0 auto 15px;
}
.word_card {display:none;}
.word_card_mb_wrp {display:block;}

.sub-card{border-top:1px solid var(--line);background:#fff;box-shadow:var(--shadow);padding:10px;box-sizing: border-box;}

}


/* =====max-width: 500px =======*/
@media (max-width: 500px){
  .nav-btn{
	font-size:15px !important;
	padding:10px 4px !important;
	font-weight:600 !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
  }
  .icon-pick {width:100%;}
  }

/* ===== Consolidated mobile overrides (max-width: 800px) ===== */
@media (max-width: 900px){
 .banner-arrow{
  width:38px;
  height:38px;
  font-size:30px;
  margin-top:-10px;
}

  .header-inner{
    flex-direction: column;
    align-items: stretch;
    gap:10px;
    padding:9px 16px;
  }

  /* Mobile header fixed elements */
  .brand{
    justify-content:flex-start !important;
    position:fixed;
    top:12px;
    left:12px;
    z-index:900;
    background:transparent;
  }

  .mobile-menu-btn{
    display:block;
    align-self:flex-end;
    margin-left:auto;
    position:fixed;
    top:12px;
    right:12px;
    z-index:1001;
  }

  /* Hide top menu row on mobile (use drawer) */
  .top-menu{ display:none !important; }
  .board-view-content {font-size:16px;}

}


/* =====================================
   PC 서브메뉴 가로형 + fade-in 효과
   ===================================== */
@media (min-width: 901px){
  
  .main-nav{ overflow: visible; }
  .nav-item{
    position:relative;
  }

  /* 기본 상태 */
  .nav-item .dropdown{
    position:absolute;
    top:100%;
    left:0;
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:10px;
    padding:10px 14px;
    background:#fff;
    border:1px solid var(--line);
    border-radius:12px;
    box-shadow:var(--shadow);
    white-space:nowrap;
    z-index:1000;

    /* 애니메이션 준비 상태 */
    opacity:0;
    transform:translateY(8px);
    visibility:hidden;
    transition:all .25s ease;
  }

  /* hover 시 노출 */
  .nav-item:hover .dropdown{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
  }

    /* 현재 페이지 메뉴는 기본으로 열린 상태 (PC 전용) */
  .nav-btn.is-current + .dropdown{
    opacity:1;
    transform:translateY(0);
    visibility:visible;
  }
.dropdown a{
    display:inline-block;
    font-size:16px;
    padding:8px 14px;
  }
}


/* ===== Mobile Styles (max-width: 520px) ===== */
@media (max-width: 520px){
  .audio-grid{ grid-template-columns: repeat(2, 1fr); }
  .cheer-input {min-width:60%; width:95% !important;}
}


@media (max-width: 600px){
  .view_title{flex-direction: column !important;}
}