@charset "UTF-8";
/* =========================================================================
   도장통 djt2026 — 모바일 내비게이션 (2026-07-01)
   -------------------------------------------------------------------------
   · 상단: Apple.com globalheader 참고 — 슬림 바 + 햄버거 3줄→X 모핑 +
     전체화면 메뉴 패널 안에 얇은 상단바(로고+닫기)를 붙여 "미니 헤더" 느낌.
     2026-07-01(2차): 햄버거를 GNB 파란 바에서 분리해 헤더 상단 좌측으로,
     로고는 중앙, 검색창은 우측에 여백을 두고 축소 배치(Apple 3분할 레이아웃).
   · 하단: Airbnb 모바일 반응형 하단 nav 참고 — 아이콘+라벨 5탭 고정 바,
     현재 위치 active 강조, iOS 세이프에어리어 대응.
   · 브레이크포인트는 djt-head.css와 동일한 Tailwind 기준(lg 1024 / md 768).
   ========================================================================= */

/* ===================================================================
   0) 모바일 컴팩트 헤더 행 (lg 1024px 미만)
   좌: 햄버거(.djt-allmenu-btn--mobile) / 중앙: 로고 / 우: 축소 검색창
   기존 GNB 파란 바의 햄버거·수평메뉴는 숨기고 바 자체도 접는다.
   =================================================================== */
#pc_header.djt-pc-header .djt-allmenu-btn--mobile{display:none;} /* 데스크톱(lg 이상)에서는 숨김 */
#pc_header.djt-pc-header .djt-search-toggle{display:none;} /* 데스크톱(lg 이상)에서는 숨김 — 검색은 기존 search-box 그대로 */

@media screen and (max-width:1023px){
  /* 좌우 트랙을 동일한 1fr로 둬야 가운데 auto 트랙(로고)이 콘텐츠 폭과 무관하게
     항상 화면 정중앙에 위치한다(auto 1fr auto 방식은 좌우 폭 차이만큼 로고가 밀림). */
  #pc_header.djt-pc-header .header-row{
    display:grid;
    grid-template-columns:1fr auto 1fr;
    align-items:center;
    gap:12px;
    flex-wrap:nowrap;
    height:auto;
    padding:10px 0;
    position:relative; /* 검색 오버레이(.search-box) 기준 컨테이너 */
  }
  #pc_header.djt-pc-header .header-row .djt-allmenu-btn--mobile{
    display:flex;align-items:center;justify-content:center;
    order:1;justify-self:start;
    height:36px;padding:0 16px;margin:0;
    background:none;border:none;cursor:pointer;
  }
  #pc_header.djt-pc-header .header-row .djt-allmenu-btn--mobile .djt-burger i{background:var(--djt-navy);} /* 흰 배경 위이므로 진한 색 아이콘 */
  #pc_header.djt-pc-header .header-row .djt-allmenu-btn--mobile[aria-expanded="true"] .djt-burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
  #pc_header.djt-pc-header .header-row .djt-allmenu-btn--mobile[aria-expanded="true"] .djt-burger i:nth-child(2){opacity:0;}
  #pc_header.djt-pc-header .header-row .djt-allmenu-btn--mobile[aria-expanded="true"] .djt-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

  #pc_header.djt-pc-header .header-row .logo{order:2;justify-self:center;min-width:0;}
  #pc_header.djt-pc-header .header-row .logo img{height:32px;}

  /* 검색 아이콘(우측 상단) — 탭하면 아래 오버레이 검색창이 좌측으로 펼쳐짐 */
  #pc_header.djt-pc-header .header-row .djt-search-toggle{
    display:flex;align-items:center;justify-content:center;
    order:3;justify-self:end;
    width:36px;height:36px;padding:0;margin:0;
    background:none;border:none;color:var(--djt-navy);font-size:17px;cursor:pointer;
    transition:opacity .15s ease;margin-right:16px;
  }
  #pc_header.djt-pc-header .header-row .djt-search-toggle[aria-expanded="true"]{opacity:0;pointer-events:none;}

  /* 검색창 오버레이 — 기본은 폭 0으로 접혀있다가 .is-open 시 헤더 행 전체를 덮으며 펼쳐짐 */
  #pc_header.djt-pc-header .header-row .search-box{
    position:absolute;top:0;right:0;height:100%;width:0;
    display:flex;align-items:center;overflow:hidden;
    margin:0;padding:0;max-width:none;
    background:#fff;border:1.5px solid var(--djt-line);border-radius:8px;
    opacity:0;visibility:hidden;
    transition:width .22s ease,opacity .18s ease,visibility 0s linear .22s;
    z-index:5;
  }
  #pc_header.djt-pc-header .header-row .search-box.is-open{
    width:100%;opacity:1;visibility:visible;transition-delay:0s; padding:0 16px;
  }
  #pc_header.djt-pc-header .header-row .search-box input{flex:1;min-width:0;height:100%;border:none;background:none;padding:0 4px 0 14px;font-size:14px;}
  #pc_header.djt-pc-header .header-row .search-box button[type="submit"]{flex:none;height:100%;padding:0 14px;font-size:13px;border:none;background:none;color:var(--djt-blue);font-weight:700;}
  #pc_header.djt-pc-header .header-row .djt-search-close{
    display:flex;align-items:center;justify-content:center;
    flex:none;width:36px;height:100%;border:none;background:none;
    font-size:20px;line-height:1;color:var(--djt-ink-60);cursor:pointer;
  }

  /* 기존 GNB 파란 바 — 햄버거가 헤더 행으로 옮겨갔으므로 접어서 숨김
     (자식 .djt-allmenu-panel은 position:fixed라 부모가 접혀도 정상 노출됨) */
  #pc_header.djt-pc-header nav.gnb{background:transparent;}
  #pc_header.djt-pc-header nav.gnb .wrap{display:none;}
}

/* ===================================================================
   1) 햄버거 아이콘 3줄→X 모핑 (lg 미만: 전체메뉴 트리거 = 미니 헤더의 메뉴 버튼)
   =================================================================== */
#pc_header.djt-pc-header .djt-burger{
  display:inline-flex;flex-direction:column;justify-content:center;gap:4px;
  width:20px;height:16px;flex:none;
}
#pc_header.djt-pc-header .djt-burger i{
  display:block;height:2px;width:100%;border-radius:2px;background:#fff;
  transform-origin:center;transition:transform .2s ease,opacity .2s ease,background-color .2s ease;
}
#pc_header.djt-pc-header .djt-allmenu-btn[aria-expanded="true"] .djt-burger i:nth-child(1){transform:translateY(6px) rotate(45deg);}
#pc_header.djt-pc-header .djt-allmenu-btn[aria-expanded="true"] .djt-burger i:nth-child(2){opacity:0;}
#pc_header.djt-pc-header .djt-allmenu-btn[aria-expanded="true"] .djt-burger i:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* ===================================================================
   2) 전체메뉴 패널 내부 — Apple 스타일 슬림 상단바(로고 + 닫기)
   데스크톱 드롭다운(lg 이상)에서는 굳이 필요 없으므로 숨기고,
   lg 미만 전체화면 모드에서만 노출한다.
   =================================================================== */
#pc_header.djt-pc-header .djt-allmenu-top{display:none;}

@media screen and (max-width:1023px){
  #pc_header.djt-pc-header .djt-allmenu-top{
    display:flex;align-items:center;justify-content:space-between;
    height:52px;padding:0 16px;border-bottom:1px solid var(--djt-line);
    position:sticky;top:0;background:#fff;z-index:2;
  }
  #pc_header.djt-pc-header .djt-allmenu-top .brand img{height:26px;width:auto;display:block;}
  #pc_header.djt-pc-header .djt-allmenu-close-top{
    width:36px;height:36px;border:none;background:var(--djt-bg);border-radius:50%;
    font-size:20px;line-height:1;color:var(--djt-ink-60);cursor:pointer;
    transition:background-color .12s ease,color .12s ease;
  }
  #pc_header.djt-pc-header .djt-allmenu-close-top:hover{background:var(--djt-blue);color:#fff;}
  /* 상단바가 생겼으므로 기존 우상단 닫기 버튼(X)은 모바일에서 숨김(중복 방지) */
  #pc_header.djt-pc-header .djt-allmenu-panel .djt-allmenu-close{display:none;}
  #pc_header.djt-pc-header .djt-allmenu-panel .inner{padding-top:24px;}
}

/* ===================================================================
   3) 하단 탭바 (Airbnb 참고) — xl(1280px) 미만 전체 구간(모바일~태블릿) 공통.
   768px~1023px, 1024px~1279px 구간 모두 모바일과 완전히 동일한 코드를 사용.
   =================================================================== */
.djt-bottom-nav{display:none;}

@media screen and (max-width:1279px){
  .djt-bottom-nav{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:150;
    background:#fff;border-top:1px solid var(--djt-line, #E3E8EF);
    box-shadow:0 -6px 16px -12px rgba(11,42,74,.25);
    padding-bottom:env(safe-area-inset-bottom, 0);
  }
  .djt-bottom-nav .bn-item{
    flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
    gap:3px;padding:10px 2px 9px;color:#9aa4b2;text-decoration:none;
    font-family:'Pretendard',-apple-system,BlinkMacSystemFont,'Malgun Gothic',sans-serif;
  }
  .djt-bottom-nav .bn-item i{font-size:20px;line-height:1;}
  .djt-bottom-nav .bn-item span{font-size:12px;font-weight:600;letter-spacing:-.01em;line-height:1;}
  .djt-bottom-nav .bn-item.is-active{color:var(--djt-blue, #1D5FBF);}
  .djt-bottom-nav .bn-item:active{opacity:.6;}

  /* 하단 탭바에 콘텐츠가 가려지지 않도록 여백 확보 */
  #wrapper.djt-wrapper-main,
  #wrapper.djt-wrapper-sub,
  #wrapper.bgc_f{
    padding-bottom:calc(56px + env(safe-area-inset-bottom, 0));
    box-sizing:border-box;
  }
  /* 우측 하단 "TOP" 버튼이 탭바와 겹치지 않도록 화면에 고정 + 위로 이동 */
  #footer.djt-footer #top_btn{
    position:fixed;top:auto;
    bottom:calc(56px + env(safe-area-inset-bottom, 0) + 14px);
  }
}