@charset "utf-8";
/* ==========================================================================
   muktimoon mobile.css (FOOTER ONLY)
   - Scope: <= 991.98px
   ========================================================================== */

@media (max-width: 991.98px) {
  .mm-footer__brand {
    justify-content: center;
  }

  /* Header tuning (<= 991.98px) */
  .mm-brand__logo {
    height: 30px;
    max-width: 200px;
  }

  .mm-site-header__top-inner {
    padding: 10px 0;
  }

  .mm-site-nav__inner {
    padding: 8px 0;
  }

  .mm-navlink {
    height: 38px;
    padding: 0 9px;
    font-size: 14px;
  }

  .mm-menubtn {
    padding: 10px 12px;
  }

  .mm-footer__brand {
    justify-content: center;
  }

  /* header touch & logo size (<=991) */
  .mm-hd__logo img {
    height: 40px;
  }

  .mm-hd__iconbtn {
    width: 40px;
    height: 40px;
    border-radius: 14px;
  }

  .mm-hd__allbtn {
    height: 40px;
    border-radius: 14px;
    padding: 0 12px;
  }

  .mm-nav__link {
    padding: 14px 12px;
  }

  .mm-account {
    justify-content: flex-start;
    /* 유지: 991 이하에서 우측 밖으로 밀리는 리스크 방지 */
    gap: 10px;
  }

  /* ============================================================
     Header (<= 991.98px) : 로고 확대 + 1단 메뉴/계정 숨김
     ============================================================ */

  /* 로고 더 크게 */
  .mm-hd__logo img {
    height: 54px;
    /* 기존 40px대 → 체감 크게 */
    width: auto;
  }

  /* 상단 버튼 터치 영역/라운드 정리 */
  .mm-hd__iconbtn {
    width: 44px;
    height: 44px;
    border-radius: 999px;
  }

  .mm-hd__allbtn {
    height: 44px;
    border-radius: 999px;
    padding: 0 14px;
  }

  /* 요청사항: 로고 밑 1단 메뉴바 제거(드로어로만 접근) */
  .mm-nav,
  #mm-nav-subrow {
    display: none !important;
  }

  /* 요청사항: 회원가입/로그인(계정 링크) 영역은 당장 숨김 */
  .mm-hd__account {
    display: none !important;
  }

  /* ============================================================
     Drawer (<= 991.98px) : 전체 화면 패널 + 항상 펼친 메뉴(그리드)
     ============================================================ */

  /* 전체 화면 패널 형태 */
  .mm-drawer__panel {
    width: 100%;
    max-width: none;
  }

  /* 헤더 스타일(벤치마킹처럼 타이틀 강조) */
  .mm-drawer__head {
    border-bottom: 2px solid var(--mm-brand-primary);
  }

  .mm-drawer__title {
    color: var(--mm-brand-primary);
  }

  /* 드로어 내 계정 링크도 숨김(요청사항) */
  .mm-drawer__account {
    display: none !important;
  }

  /* “펼치기 버튼”은 모바일에서는 숨김(항상 펼쳐 보여줄 것이므로) */
  .mm-drawer__expander {
    display: none !important;
  }

  /* 1단 항목을 섹션 헤더처럼 */
  .mm-drawer__line {
    align-items: stretch;
  }

  .mm-drawer__link {
    display: block;
    width: 100%;
    padding: 12px 12px;
    border-radius: 12px;
    background: rgba(15, 23, 42, 0.04);
  }

  /* 2단(서브) 메뉴를 3열 그리드로(벤치마킹의 테이블 느낌 대체) */
  .mm-drawer__sub {
    border-left: 0;
    padding: 10px 0 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .mm-drawer__sub a {
    display: block;
    text-align: center;
    padding: 10px 10px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #ffffff;
  }

  /* ============================================================
    Header top row (<= 991.98px)
    - [전체][로고][검색]
    - 로고 높이 72px
    - 버튼: 라운드 사각형
    ============================================================ */

  .mm-hd__top {
    padding: 8px 0;
  }

  /* 좌/중/우 균형 잡아서 로고가 중앙에 오도록 */
  .mm-hd__row {
    gap: 10px;
  }

  .mm-hd__allbtn,
  .mm-hd__iconbtn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: 14px;
    /* 원형(999px) 금지 */
    justify-content: center;
  }

  /* 전체 버튼: 텍스트 제거했으므로 아이콘-only 사이즈 고정 */
  .mm-hd__allbtn {
    min-width: 44px;
  }

  /* 로고를 가운데로 “시각적으로” 고정 */
  .mm-hd__logo {
    flex: 1 1 auto;
    display: flex;
    justify-content: center;
  }

  .mm-hd__logo img {
    height: 72px;
    width: auto;
    max-width: 100%;
  }

  /* ============================================================
     Header ↔ Content separator (<= 991.98px)
     - 2줄(헤더 border + hr) → 1줄로 정리
     - Primary 컬러로 약간 굵게
     ============================================================ */

  /* 헤더 하단 구분선을 2px Primary로 */
  .mm-hd {
    border-bottom: 2px solid var(--mm-brand-primary);
  }

  /* 헤더 바로 뒤의 hr는 숨겨서 “2줄” 현상 제거 */
  #hd+hr {
    display: none !important;
  }

  /* ============================================================
     Mobile bottom fixed nav + full-screen login layer
     - font-weight: 400 이하만 사용(요구사항)
     ============================================================ */

  :root {
    --mm-mnav-h: 72px;
    --mm-primary: var(--mm-brand-primary, #1d4ed8);
  }

  body {
    padding-bottom: var(--mm-mnav-h);
  }

  /* PC/콘텐츠 하단에 보이던 aside(outlogin) 기본 숨김 */
  #aside {
    display: none;
  }

  /* 하단 고정 네비 */
  .mm-mnav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--mm-mnav-h);
    z-index: 9000;

    background: rgba(255, 255, 255, 0.98);
    border-top: 1px solid rgba(15, 23, 42, 0.10);
    box-shadow: 0 -10px 26px rgba(15, 23, 42, 0.08);

    display: grid;
    grid-template-columns: repeat(5, 1fr);
    align-items: stretch;
  }

  .mm-mnav__item {
    appearance: none;
    border: 0;
    background: transparent;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;

    text-decoration: none;
    color: rgba(15, 23, 42, 0.72);

    font-size: 12px;
    font-weight: 400;
    line-height: 1;
    cursor: pointer;
  }

  .mm-mnav__item i {
    font-size: 18px;
    color: rgba(15, 23, 42, 0.62);
  }

  /* 홈 버튼 강조(벤치마킹 톤) */
  .mm-mnav__item--home {
    position: relative;
    transform: translateY(-12px);
  }

  .mm-mnav__item--home i {
    width: 56px;
    height: 56px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    background: var(--mm-primary);
    color: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.18);
  }

  .mm-mnav__item--home span {
    margin-top: 2px;
    color: rgba(15, 23, 42, 0.72);
    font-weight: 400;
  }

  /* ============================================================
   Mobile login layer (single source of truth)
   - X 버튼 복구
   - 배경 클릭/ESC 닫기 동작을 위해 backdrop가 클릭을 받게 구성
   ============================================================ */

  /* 기본(모바일 평상시): 헬퍼 숨김 */
  #aside .mm-loginlayer__bg,
  #aside .mm-loginlayer__close {
    display: none;
  }

  /* 로그인 레이어 오픈 시 스크롤 락 */
  html.mm-login-open,
  body.mm-login-open {
    overflow: hidden !important;
  }

  /* 로그인 레이어 오픈 시 #aside를 풀스크린 레이어로 */
  html.mm-login-open #aside {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 9999;
    /* 하단 고정 네비보다 위 */
  }

  /* backdrop: 실제 클릭 타겟(닫기) */
  html.mm-login-open #aside .mm-loginlayer__bg {
    display: block;
    position: absolute;
    inset: 0;
    z-index: 0;
    background: rgba(15, 23, 42, 0.55);
  }

  /* 닫기(X): 모바일에서만 노출 */
  html.mm-login-open #aside .mm-loginlayer__close {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;

    width: 44px;
    height: 44px;
    border-radius: 14px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(255, 255, 255, 0.92);
    color: rgba(15, 23, 42, 0.70);

    font-weight: 400;
  }

  /* 설문은 레이어에서 숨김 */
  html.mm-login-open #mm-aside-poll {
    display: none;
  }

  /* 컨테이너는 “클릭 투명”, 카드만 클릭 가능하게 만들어 backdrop 클릭(닫기) 보장 */
  html.mm-login-open #mm-aside-outlogin {
    position: relative;
    z-index: 1;

    height: 100%;
    overflow: auto;
    padding: 72px 16px calc(var(--mm-mnav-h, 64px) + 18px);

    background: transparent;
    /* 배경은 backdrop가 담당 */
    display: flex;
    align-items: flex-start;
    justify-content: center;

    pointer-events: none;
    /* 바깥 클릭은 backdrop로 */
  }

  /* outlogin 카드만 실제 클릭 가능 */
  html.mm-login-open #mm-aside-outlogin .ol {
    pointer-events: auto;
    width: min(360px, 100%);
    margin: 0 auto;
  }

  /* (요구사항) 레이어 안 폰트 weight 400 이하 유지 */
  html.mm-login-open #mm-aside-outlogin,
  html.mm-login-open #mm-aside-outlogin * {
    font-weight: 400 !important;
  }

  /* ============================================================
   (UI Restore) Mobile login layer card + tabs + form
   - 배경(흰 카드) 복원
   - 로그인/회원가입 탭 flex 정렬 복원
   - fieldset 기본 테두리(회색 박스) 제거
   - 요소 폭/높이/간격을 사이트 톤에 맞춤
   ============================================================ */

  /* 레이어 내부 박스사이징 안정화 */
  html.mm-login-open #mm-aside-outlogin,
  html.mm-login-open #mm-aside-outlogin * {
    box-sizing: border-box;
  }

  /* 카드(ol) : 흰 배경/라운드/섀도우 복원 */
  html.mm-login-open #mm-aside-outlogin .ol {
    background: #ffffff;
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    overflow: hidden;
  }

  /* ★ 핵심: fieldset 기본 테두리 제거(현재 첨부의 회색 박스 원인) */
  html.mm-login-open #mm-aside-outlogin #ol_before fieldset {
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    min-inline-size: 0;
  }

  /* 상단 탭(#ol_be_cate) : float/고정폭 제거하고 flex로 1:1 정렬 */
  html.mm-login-open #mm-aside-outlogin #ol_be_cate {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid rgba(15, 23, 42, 0.10);
  }

  /* 기존 스킨(.ol h2 / .ol .join)의 float/width를 확실히 무력화 */
  html.mm-login-open #mm-aside-outlogin #ol_be_cate h2,
  html.mm-login-open #mm-aside-outlogin #ol_be_cate .join {
    float: none !important;
    width: auto !important;

    flex: 1 1 50%;
    margin: 0;
    padding: 16px 12px;
    text-align: center;

    background: #ffffff;
    text-decoration: none;
  }

  /* “로그인” 탭을 활성처럼 보이게(아래 라인) */
  html.mm-login-open #mm-aside-outlogin #ol_be_cate h2 {
    color: rgba(15, 23, 42, 0.85);
    border-bottom: 2px solid var(--mm-primary, #1d4ed8);
  }

  /* “회원가입”은 링크 톤 */
  html.mm-login-open #mm-aside-outlogin #ol_be_cate .join {
    color: var(--mm-primary, #1d4ed8);
  }

  /* 폼 패딩/간격 정리 */
  html.mm-login-open #mm-aside-outlogin #ol_before form {
    padding: 16px;
  }

  /* 입력/버튼 사이즈를 카드 톤에 맞춤 */
  html.mm-login-open #mm-aside-outlogin #ol_id,
  html.mm-login-open #mm-aside-outlogin #ol_pw {
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border-radius: 12px;
    border: 1px solid rgba(15, 23, 42, 0.14);
    background: #ffffff;
    font-size: 14px;
  }

  html.mm-login-open #mm-aside-outlogin #ol_submit {
    width: 100%;
    height: 42px;
    border: 0;
    border-radius: 12px;
    background: var(--mm-primary, #1d4ed8);
    color: #ffffff;
    font-size: 14px;
  }

  /* 자동로그인 / ID/PW 찾기 : 한 줄 정렬 + 길이 맞춤 */
  html.mm-login-open #mm-aside-outlogin #ol_before .ol_auto_wr {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-top: 10px;
  }

  html.mm-login-open #mm-aside-outlogin #ol_auto,
  html.mm-login-open #mm-aside-outlogin #ol_svc {
    float: none !important;
    margin: 0 !important;
    line-height: 1.2;
  }

  /* ID/PW 찾기 톤(요구사항: 얇게, 작게) */
  html.mm-login-open #mm-aside-outlogin #ol_svc a {
    display: inline-flex;
    align-items: center;
    height: 30px;
    padding: 0 10px;

    font-size: 13px;
    font-weight: 400 !important;

    border-radius: 10px;
    border: 1px solid rgba(15, 23, 42, 0.12);
    background: rgba(15, 23, 42, 0.03);
    color: rgba(15, 23, 42, 0.70);
    text-decoration: none;
  }

  /* mobile: never show aside banner (even in full-screen login layer) */
  #mm-aside-banner{
    display: none !important;
  }

  html.mm-login-open #mm-aside-banner{
    display: none !important;
  }

  /* mobile: never show newposts widget (even in full-screen login layer) */
  #mm-aside-newposts{
    display: none !important;
  }
  html.mm-login-open #mm-aside-newposts{
    display: none !important;
  }

    /* ============================================================
     Mobile bottom widgets (<= 991.98px)
     - show at bottom (above footer/copyright)
     ============================================================ */
  #mm-mobile-bottom-widgets{
    display: block;
    padding: 14px 16px;
  }

  /* banner */
  #mm-mobile-bottom-widgets .mm-mbw__banner{
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
  }
  #mm-mobile-bottom-widgets .mm-mbw__banner img{
    display: block;
    width: 100%;
    height: auto;
  }

  /* spacing between banner and list */
  #mm-mobile-bottom-widgets .mm-mbw__newposts{
    margin-top: 12px;
  }

  /* newposts card inherits existing classes; just ensure no underline/clean look */
  #mm-mobile-bottom-widgets #mm-aside-newposts,
  #mm-mobile-bottom-widgets .mm-aside-newposts{
    border-radius: 18px;
  }
  #mm-mobile-bottom-widgets .mm-aside-newposts__link:hover,
  #mm-mobile-bottom-widgets .mm-aside-newposts__link:focus{
    text-decoration: none !important;
  }

    /* ============================================================
     Mobile bottom widgets (<= 991.98px)
     - banner + newposts card styling
     ============================================================ */

  #mm-mobile-bottom-widgets{
    display: block;
    padding: 14px 16px;
  }

  /* banner */
  #mm-mobile-bottom-widgets .mm-mbw__banner{
    display: block;
    border-radius: 18px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.16);
    border: 1px solid rgba(15, 23, 42, 0.10);
    background: #fff;
  }
  #mm-mobile-bottom-widgets .mm-mbw__banner img{
    display: block;
    width: 100%;
    height: auto;
  }

  #mm-mobile-bottom-widgets .mm-mbw__newposts{
    margin-top: 12px;
  }

  /* newposts card (모바일용) */
  #mm-mobile-bottom-widgets .mm-aside-newposts{
    border: 1px solid rgba(15, 23, 42, 0.10);
    border-radius: 18px;
    background: #ffffff;
    box-shadow: 0 18px 44px rgba(15, 23, 42, 0.10);
    overflow: hidden;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__head{
    padding: 14px;
    border-bottom: 1px solid rgba(15, 23, 42, 0.08);
    background: #ffffff;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__title{
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #0f172a;

    display: inline-block;
    padding-bottom: 8px;
    border-bottom: 3px solid #e11d2e; /* 빨강 밑줄(탭 느낌) */
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__list{
    list-style: none;
    margin: 0;
    padding: 10px 14px 14px;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__item{
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding: 8px 0;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__item + .mm-aside-newposts__item{
    border-top: 1px solid rgba(15, 23, 42, 0.06);
  }

  /* 링크(불릿/기본 파란색/언더라인 제거) */
  #mm-mobile-bottom-widgets .mm-aside-newposts__link{
    flex: 1 1 auto;
    min-width: 0;

    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;

    text-decoration: none;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__link:hover,
  #mm-mobile-bottom-widgets .mm-aside-newposts__link:focus{
    text-decoration: none !important;
  }

  /* “게시판명은 빨강 / 제목은 검정” (스플릿 적용된 경우) */
  #mm-mobile-bottom-widgets .mm-aside-newposts__label{
    color: #e11d2e;
    font-weight: 700;
  }

  #mm-mobile-bottom-widgets .mm-aside-newposts__subject{
    color: #0f172a;
    font-weight: 400;
  }

  /* 시간은 녹색 */
  #mm-mobile-bottom-widgets .mm-aside-newposts__time{
    flex: 0 0 auto;
    color: #16a34a;
    font-size: 12px;
    font-weight: 700;
  }

}