/* widget_a_MC - 상단 메뉴(#hd) 홈바 위젯 (macOS Dock 스타일)
 * JS가 #hd를 찾았을 때만 body에 hdb-on 클래스를 붙이므로,
 * #hd가 없는 문서(또는 #hd를 숨긴 스킨)에서는 아무 영향이 없다.
 * 로고(#logo)는 항상 제자리에 두고, 메뉴와 로그인 영역은 접혀 있다가
 * 홈바를 누르면 화면 위쪽 가운데에 Dock 모양의 유리 패널로 펼쳐진다. */

body.hdb-on #hd {
  /* 색/크기는 여기서 바꾼다 */
  --hdb-tile: 46px;                         /* 아이콘 버튼 크기 */
  --hdb-gap: 24px;                         /* 화면 위쪽 가장자리에서 띄우는 거리 */
  --hdb-tint: 255 255 255;                  /* 패널에 입히는 틴트 색 (R G B). 색 없는 흰색 유리 */
  --hdb-panel-bg: rgb(var(--hdb-tint) / .1); /* 투명한 틴트 */
  --hdb-card-bg: rgb(var(--hdb-tint) / .14);
  --hdb-panel-line: rgba(255, 255, 255, .2);
  --hdb-panel-shadow: 0 8px 28px rgba(0, 0, 0, .25);
  --hdb-fg: #fff;
  --hdb-icon-alpha: .7;                     /* 폰트어썸 아이콘의 불투명도(1=완전 진함, 작을수록 투명) */
  position: fixed !important;
  top: 0 !important; /* 헤더 자체는 원래 위치 그대로 둔다(로고 위치 유지). 띄우기는 독(메뉴/로그인/패널)만 아래로 옮긴다 */
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 99990;
  background: transparent !important;
}

/* ===== 배치: 로고 | [ 메뉴 타일들 | 로그인 영역 ] (Dock은 로고 오른쪽 공간의 가운데) ===== */
/* 독(메뉴 + 로그인)은 화면 가운데에 둔다. 로고는 아래 PC 블록에서 흐름 밖(왼쪽 원래 자리)으로 빼서,
 * 로고 폭 때문에 독이 오른쪽으로 치우치지 않게 한다. */
body.hdb-on #hd_wrapper { justify-content: center; }
body.hdb-on #hd_menu {
  flex: 0 0 auto;
  height: auto;
  margin: 0;
  align-items: center;
}
/* 독 안쪽 여백과 간격은 타일의 개별 margin 이 아니라 flex gap 과 padding 으로만 정한다
 * (사이트 CSS가 마지막 항목의 margin 을 바꿔도 간격이 흐트러지지 않게):
 *  - 패널 가장자리 ~ 타일: 16px (위/아래/왼쪽/오른쪽 모두)
 *  - 타일 ~ 타일: 12px
 *  - 타일 ~ 구분선: 16px (양쪽 모두) */
body.hdb-on #main_menu_list { gap: 12px; padding: 16px; align-items: center; }
body.hdb-on #hd .hd_login {
  position: static;
  /* 사이트 CSS는 이 영역을 화면 오른쪽 위에 고정(top/right)해 두었다. 흐름 안에 놓을 때는 그 값을 없애야 위치가 밀리지 않는다 */
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 16px 16px 16px 0;
  color: var(--hdb-fg);
}
/* Dock의 구분선 */
body.hdb-on #hd .hd_login::before {
  content: '';
  flex: none;
  width: 1px;
  height: 34px;
  margin: 0 4px 0 0; /* 구분선 오른쪽: flex gap 12px + 4px = 16px */
  background: var(--hdb-panel-line);
}
body.hdb-on #hd .hd_login a,
body.hdb-on #hd .hd_login .connect { color: var(--hdb-fg); }
body.hdb-on #hd .menu-separator {
  width: 1px;
  height: 34px !important;
  margin: 0 4px; /* 메뉴 사이의 구분선: 양쪽 gap 12px + 4px = 16px */
  background: var(--hdb-panel-line);
}

/* ===== 접힘 / 살짝 / 펼침 ===== */
body.hdb-on #hd_wrapper > :not(#logo) {
  translate: var(--hdb-shift, 0px) var(--hdb-gap); /* 화면 위쪽 가장자리에서 띄우기 + 가로 가운데 보정(JS가 --hdb-shift 를 넣는다) (로고는 제외) */
  transform: translateY(-14px);
  opacity: 0;
  visibility: hidden; /* 접힌 동안은 Tab 키로도 안 잡히게 */
  transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .25s ease, visibility 0s linear .3s;
}
body.hdb-on.hdb-open #hd_wrapper > :not(#logo) {
  transform: none;
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ===== Dock 패널 (위치/크기는 JS가 메뉴 폭에 맞춰 --hdb-* 로 넣는다) ===== */
body.hdb-on #hd_wrapper::before {
  content: '';
  position: absolute;
  left: var(--hdb-left, 12px);
  right: var(--hdb-right, 12px);
  top: var(--hdb-top, 8px);
  height: var(--hdb-ph, 62px);
  z-index: -1;
  pointer-events: none;
  border-radius: 22px;
  background: var(--hdb-panel-bg);
  box-shadow: var(--hdb-panel-shadow); /* 테두리(border)는 없다 */
  -webkit-backdrop-filter: blur(24px) saturate(1.5);
  backdrop-filter: blur(24px) saturate(1.5);
  opacity: 0;
  translate: var(--hdb-shift, 0px) var(--hdb-gap);
  transform: translateY(-14px);
  transition: transform .3s cubic-bezier(.22, .8, .3, 1), opacity .25s ease;
}
body.hdb-on.hdb-open #hd_wrapper::before { opacity: 1; transform: none; }

/* ===== 메뉴 타일 (앱 아이콘처럼) ===== */
body.hdb-on #hd .main_me { margin: 0; }
body.hdb-on #hd .main_me_link,
body.hdb-on #hd .hd_login .hdb-t {
  box-sizing: border-box;
  display: flex;
  align-items: center;
  position: relative;
  width: var(--hdb-tile);
  height: var(--hdb-tile);
  padding: 0;
  gap: 0;
  justify-content: center;
  border-radius: 22%;
  font-size: 0; /* 이름은 말풍선으로만 보여준다 */
  color: #fff;
  /* 투명한 틴트 유리: 색 없이 흰빛만 반투명하게 깔고 뒤 화면은 블러로 비치게 한다 */
  background: linear-gradient(160deg, rgb(var(--t, 255 255 255) / .26), rgb(var(--t, 255 255 255) / .08));
  border: 1px solid rgba(255, 255, 255, .32);
  -webkit-backdrop-filter: blur(12px) saturate(1.6);
  backdrop-filter: blur(12px) saturate(1.6);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -8px 14px rgb(var(--t, 255 255 255) / .18);
  transform: none;
  transform-origin: 50% 0;
  transition: box-shadow .16s ease;
}
body.hdb-on #hd .main_me_link i,
body.hdb-on #hd .hd_login .hdb-t i { font-size: 22px; opacity: 1; transform: none; color: rgb(255 255 255 / var(--hdb-icon-alpha)); } /* 폰트어썸 아이콘은 글자색만 살짝 투명하게 */
body.hdb-on #hd .hdb-ini { font-size: 20px; font-weight: 600; line-height: 1; color: rgb(255 255 255 / var(--hdb-icon-alpha)); } /* 아이콘 없는 메뉴는 첫 글자 */
/* 아이콘 칸에 이미지 주소를 넣은 메뉴: 이미지가 아이콘 칸(타일) 전체를 채운다(채우기 방식, 비율 유지하며 넘치는 부분은 잘림).
 * 타일의 둥근 모서리와 얇은 테두리는 그대로 유지된다. */
body.hdb-on #hd .hdb-imgbox { line-height: 0; }
body.hdb-on #hd .hdb-imgbox img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) brightness(1.6) contrast(.95); /* 색 없이 회색조로, 밝은 효과를 살짝 준다 (brightness 숫자가 클수록 더 밝음) */
  opacity: .5;          /* 살짝 투명하게: 타일의 유리 질감(블러/하이라이트)이 비친다. 숫자가 작을수록 더 투명 */
  pointer-events: none;
  -webkit-user-drag: none;
}
body.hdb-on #hd .main_me_link > .hdb-imgbox {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
}
body.hdb-on #hd .sub_me_link > .hdb-imgbox { position: relative; overflow: hidden; } /* 폴더 창 안: 아이콘 칸 자체가 채워진다 */
body.hdb-on #hd .main_me_link::after { display: none; }
body.hdb-on #hd .main_me_link:hover,
body.hdb-on #hd .hd_login .hdb-t:hover { color: #fff; transform: none; filter: none; }
body.hdb-on #hd .main_me_link:hover i,
body.hdb-on #hd .hd_login .hdb-t:hover i { transform: none; }

/* 로그인 영역 타일: 정보수정/로그아웃 같은 글자 링크도 아이콘 타일로 바꾼다(JS가 아이콘과 이름표를 넣는다) */
body.hdb-on #hd .hd_login .hdb-tw { margin: 0; }
body.hdb-on #hd .hd_login .hdb-t { color: #fff !important; } /* 관리자 링크의 강조색도 타일에서는 흰색으로 */
/* 접속자 수 / 채팅 / 알림 배지: 앱 알림 배지처럼 아이콘 오른쪽 위에 빨간 알약으로 띄운다 */
body.hdb-on #hd .hd_login .hdb-t .notification-badge,
body.hdb-on #hd .hd_login .hdb-t .connect-num {
  position: absolute;
  top: -6px;
  right: -6px;
  left: auto;
  bottom: auto;
  display: block;
  box-sizing: border-box;
  min-width: 20px;
  width: auto;
  height: 20px;
  margin: 0;
  padding: 0 6px;
  border: 0;
  border-radius: 10px;
  background: #ff3b30;
  color: #fff;
  font-family: var(--content-font-family, inherit); /* 본문 폰트 */
  font-size: 12px;
  font-weight: 600;
  line-height: 20px;
  text-align: center;
  text-decoration: none;
  z-index: 1;
}

/* hover: 타일 크기는 그대로 두고 유리만 조금 더 밝아진다 */
@media (min-width: 769px) {
  body.hdb-on #hd .main_me:hover > .main_me_link,
  body.hdb-on #hd .hd_login .hdb-tw:hover > .hdb-t {
    background: linear-gradient(160deg, rgb(var(--t, 255 255 255) / .4), rgb(var(--t, 255 255 255) / .16));
  }
}

/* 이름 말풍선 (하위 메뉴가 있는 항목은 하위 메뉴 카드 제목으로 대신한다) */
body.hdb-on #hd .main_me::after,
body.hdb-on #hd .hd_login .hdb-tw::after {
  content: attr(data-label);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px); /* 타일 바로 위: 아이콘과 8px 떨어뜨린다 */
  transform: translateX(-50%);
  padding: 3px 10px;
  border-radius: 8px;
  background: var(--hdb-card-bg);
  border: 1px solid var(--hdb-panel-line);
  color: var(--hdb-fg);
  font-size: 12px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity .12s ease;
}
body.hdb-on #hd .main_me:hover::after,
body.hdb-on #hd .hd_login .hdb-tw:hover::after { opacity: 1; }
body.hdb-on #hd .hd_login .hdb-tw { position: relative; }
body.hdb-on #hd .main_me.has_submenu.hdb-fopen::after { display: none; } /* 폴더가 열려 있는 동안은 이름 말풍선을 숨긴다 */
/* 하위 메뉴가 있는 항목 표시: Dock의 실행 중 점 (PC에서는 폴더 미리보기가 대신하므로 아래 PC 블록에서 숨긴다) */
body.hdb-on #hd .main_me.has_submenu::before {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -5px;
  width: 4px;
  height: 4px;
  margin-left: -2px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .75);
}

/* ===== 폴더 (JS가 만드는 요소의 기본값: 모바일에서는 보이지 않거나 투명하게 둔다) ===== */
body.hdb-on #hd .hdb-fold,
body.hdb-on #hd .hdb-fbtn { display: none; }
body.hdb-on #hd .hdb-fpop { display: contents; }

/* ===== PC: 하위 메뉴와 로그인 영역을 아이폰/아이패드 앱 폴더처럼 =====
 * 폴더 타일에는 안에 든 항목의 미리보기(3x3)가 보이고, 누르면 이름이 위에 있는 큰 유리 창에
 * 항목이 앱 아이콘처럼(아이콘 아래에 이름) 열린다. 로그인 영역은 "내 메뉴" 폴더 하나로 묶인다. */
@media (min-width: 769px) {
  /* 폴더 타일: 큰 아이콘 대신 미리보기 */
  body.hdb-on #hd .main_me.has_submenu > .main_me_link > i,
  body.hdb-on #hd .main_me.has_submenu > .main_me_link > .hdb-ini { display: none; }
  body.hdb-on #hd .main_me.has_submenu::before { display: none; }
  /* 폴더 미리보기: 안에 든 항목 중 앞의 4개를 2x2 정사각형 칸으로 보여준다 */
  body.hdb-on #hd .hdb-fold {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr)); /* 칸 안 내용이 커도 칸이 늘어나 타일 밖으로 나가지 않게 한다 */
    align-content: center; /* 항목이 1~2개면 한 줄로, 정사각형 칸을 세로 가운데에 둔다 */
    gap: 3px;
    flex: none;
    width: 28px;
    height: 28px;
    overflow: hidden;
  }
  body.hdb-on #hd .hdb-fold b {
    display: grid;
    place-items: center;
    aspect-ratio: 1;
    min-width: 0;
    min-height: 0;
    overflow: hidden;
    border-radius: 3px;
    background: rgba(255, 255, 255, .34);
    color: #fff;
    font-size: 8px;
    font-weight: 600;
    line-height: 1;
  }
  body.hdb-on #hd .hdb-fold b.hdb-empty { background: rgba(255, 255, 255, .12); } /* 비어 있는 칸 */
  /* 메뉴 칸(li)이 글자 줄 높이 때문에 타일보다 커져서 로그인 폴더와 세로 위치가 어긋나던 것을 막는다 */
  body.hdb-on #hd .main_me { display: flex; align-items: center; }
  /* 로고는 원래 자리(왼쪽 안쪽 여백, 세로 가운데)에 그대로 두되 흐름 밖으로 빼서 독의 가운데 정렬에 영향을 주지 않게 한다 */
  body.hdb-on #hd_wrapper > #logo {
    position: absolute;
    left: var(--spacing-lg);
    top: 50%;
    transform: translateY(-50%);
  }
  /* 메뉴 줄과 로그인 줄을 각자 가운데 정렬하지 않고 같은 높이에서 시작하게 해, 두 줄의 타일이 같은 선 위에 놓이게 한다 */
  body.hdb-on #hd_wrapper > #hd_menu,
  body.hdb-on #hd_wrapper > .hd_login { align-self: flex-start; }
  /* 일반 아이콘 크기 규칙(.hdb-t i, .main_me_link i)보다 우선하도록 선택자를 더 길게 쓴다 */
  body.hdb-on #hd .hdb-fold b i,
  body.hdb-on #hd .main_me_link .hdb-fold b i,
  body.hdb-on #hd .hd_login .hdb-t .hdb-fold b i { width: auto; margin: 0; font-size: 8px; line-height: 1; opacity: 1; }

  /* 폴더 창: 하위 메뉴(.sub_me_list)와 로그인 폴더(.hdb-fpop) 공통 */
  body.hdb-on #hd .sub_me_box,
  body.hdb-on #hd .hdb-fpop {
    display: grid;
    grid-template-columns: repeat(var(--hdb-cols, 3), 72px);
    gap: 18px 14px;
    justify-content: center;
    width: auto;
    min-width: 0;
    margin: 0;
    padding: 18px 22px 22px;
    border: 1px solid var(--hdb-panel-line);
    border-radius: 32px;
    background: var(--hdb-card-bg);
    box-shadow: 0 18px 50px rgba(0, 0, 0, .35);
    -webkit-backdrop-filter: blur(32px) saturate(1.6);
    backdrop-filter: blur(32px) saturate(1.6);
    transform: none;
  }
  body.hdb-on #hd .sub_me_box::before,
  body.hdb-on #hd .hdb-fpop::before {
    content: attr(data-title);
    grid-column: 1 / -1;
    padding: 0 0 2px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    text-align: center;
  }

  /* 하위 메뉴 폴더: 타일을 눌러 열고(JS가 hdb-fopen 을 붙인다), 다시 누르거나 바깥을 누르거나 Esc 를 누를 때만 닫힌다.
   * (사이트 메뉴 스크립트는 다른 메뉴 위에 마우스를 올리면 main_me_on 을 지워 버리므로 그 클래스는 열림 판단에 쓰지 않는다)
   * 독과의 간격: 패널 아래쪽 끝(타일 아래 16px)에서 14px — "내 메뉴" 폴더와 같다 */
  body.hdb-on #hd .sub_me_list {
    position: absolute;
    top: calc(100% + 16px + 14px);
    left: 50%;
    translate: -50% 0;
    min-width: 0;
    max-height: none;
    padding-top: 0;
    overflow: visible;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: scale(.55);
    transform-origin: 50% 0;
    transition: transform .28s cubic-bezier(.2, .9, .3, 1.1), opacity .2s ease, visibility 0s linear .28s;
  }
  body.hdb-on #hd .main_me:not(.hdb-fopen) .sub_me_list { /* 눌러서 열기 전에는 hover 나 사이트 스크립트 상태만으로 열리지 않는다 */
    opacity: 0;
    visibility: hidden;
    transform: scale(.55);
    max-height: none;
  }
  body.hdb-on #hd .main_me.hdb-fopen > .sub_me_list {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }

  /* 폴더 안 항목: 앱 아이콘 + 아래에 이름 */
  body.hdb-on #hd .sub_me,
  body.hdb-on #hd .hdb-fpop .hdb-tw {
    width: 72px;
    margin: 0;
  }
  body.hdb-on #hd .sub_me { opacity: 1 !important; transform: none !important; animation: none; }
  body.hdb-on #hd .sub_me_link {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    width: 72px;
    padding: 0;
    border-radius: 0;
    overflow: visible;
    background: none;
    color: #fff;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
  }
  body.hdb-on #hd .sub_me_link::before { display: none; }
  body.hdb-on #hd .sub_me_link:hover { background: none; color: #fff; transform: none; }
  body.hdb-on #hd .sub_me_link > i,
  body.hdb-on #hd .sub_me_link > .hdb-ini {
    box-sizing: border-box;
    display: grid;
    place-items: center;
    width: 56px;
    height: 56px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 22%; /* 독 아이콘과 같은 투명한 틴트 유리 */
    background: linear-gradient(160deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .08));
    box-shadow: 0 2px 8px rgba(0, 0, 0, .2), inset 0 1px 0 rgba(255, 255, 255, .45);
    color: rgb(255 255 255 / var(--hdb-icon-alpha)); /* 아이콘(글리프)만 살짝 투명하게 — 타일 자체는 그대로 */
    font-size: 22px;
    font-weight: 600;
    opacity: 1;
    transform: none;
  }
  body.hdb-on #hd .sub_me_link:hover > i,
  body.hdb-on #hd .sub_me_link:hover > .hdb-ini { background: linear-gradient(160deg, rgba(255, 255, 255, .4), rgba(255, 255, 255, .16)); }
  /* 폴더 타일 미리보기의 이미지 아이콘: 작은 칸을 채운다 */
  body.hdb-on #hd .hdb-fold b { position: relative; }
  body.hdb-on #hd .hdb-fold b .hdb-imgbox { position: absolute; inset: 0; width: auto; height: auto; }
  body.hdb-on #hd .hdb-sl {
    display: block;
    max-width: 72px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* 로그인 영역: 폴더 하나("내 메뉴")로 묶는다 */
  body.hdb-on #hd .hd_login { position: relative; }
  body.hdb-on #hd .hd_login .hdb-fbtn { display: flex; }
  body.hdb-on #hd .hdb-fbtn .hdb-t { cursor: pointer; }
  body.hdb-on #hd .hdb-fbadge {
    position: absolute;
    top: -6px;
    right: -6px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    box-sizing: border-box;
    border-radius: 10px;
    background: #ff3b30;
    color: #fff;
    font-family: var(--content-font-family, inherit); /* 본문 폰트 */
    font-size: 12px;
    font-weight: 600;
    line-height: 20px;
    text-align: center;
  }
  body.hdb-on #hd .hd_login .hdb-fpop {
    position: absolute;
    top: 100%;
    left: 50%;
    translate: -50% 0;
    margin-top: 14px;
    z-index: 20;
    opacity: 0;
    visibility: hidden;
    transform: scale(.55);
    transform-origin: 50% 0;
    transition: transform .28s cubic-bezier(.2, .9, .3, 1.1), opacity .2s ease, visibility 0s linear .28s;
  }
  body.hdb-on #hd .hd_login.hdb-fopen .hdb-fpop {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
  }
  body.hdb-on #hd .hd_login.hdb-fopen .hdb-fbtn::after { display: none; }
  body.hdb-on #hd .hd_login .hdb-fpop .hdb-tw { display: flex; flex-direction: column; align-items: center; }
  body.hdb-on #hd .hd_login .hdb-fpop .hdb-t { width: 56px; height: 56px; }
  /* 폴더 안에서는 말풍선 대신 아이콘 아래에 이름을 늘 보여준다 */
  body.hdb-on #hd .hd_login .hdb-fpop .hdb-tw::after {
    position: static;
    display: block;
    max-width: 72px;
    padding: 7px 0 0;
    transform: none;
    border: 0;
    border-radius: 0;
    background: none;
    /* 접속자 칸(.connect)에 사이트가 따로 지정한 글꼴/굵기가 이름표에 섞이지 않도록 모든 칸에 같은 값을 직접 준다 */
    font-family: var(--header-font-family, inherit);
    font-weight: 400;
    font-size: 11px;
    line-height: 1.25;
    text-align: center;
    white-space: normal;
    opacity: 1;
  }
}

/* ===== 모바일(768px 이하): 사이트 CSS가 숨겨 둔 #hd를 이 위젯이 대신 보여준다 =====
 * 햄버거 버튼(.mobile_menu_btn)과 기존 사이드바는 숨기고, 유리 카드 한 장 안에
 * 메뉴를 세로 목록으로, 그 아래에 로그인 아이콘 줄을 보여준다(Dock 타일/돋보기는 쓰지 않는다). */
@media (max-width: 768px) {
  body.hdb-on .mobile_menu_btn,
  body.hdb-on .mobile_sidebar,
  body.hdb-on .mobile_overlay { display: none !important; }
  body.hdb-on #hd {
    display: block !important;
    --hdb-gap: 16px;
  }
  body.hdb-on #hd #hd_wrapper {
    height: auto;
    flex-direction: column;
    align-items: stretch;
    padding: 8px 10px;
  }
  /* 유리 카드는 JS가 잰 크기가 아니라 내용(메뉴 + 펼쳐진 하위 메뉴 + 로그인 줄)에 맞춰 늘어난다 */
  body.hdb-on #hd_wrapper::before {
    left: 10px;
    right: 10px;
    top: 8px;
    bottom: 8px;
    height: auto;
  }
  body.hdb-on #hd #hd_wrapper #hd_menu {
    display: flex !important;
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 170px); /* 하위 메뉴가 펼쳐져도 화면을 넘지 않게 */
    margin: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  body.hdb-on #hd #main_menu_list {
    flex-direction: column;
    align-items: stretch;
    gap: 0; /* PC 독의 타일 간격(gap)을 세로 목록에서는 쓰지 않는다 */
    width: 100%;
    padding: 8px 8px 6px;
  }
  body.hdb-on #hd .main_me { margin: 0; }
  /* 모바일 세로 목록에서는 구분선 메뉴(메뉴/하위 메뉴 모두)를 보이지 않게 한다 */
  body.hdb-on #hd .menu-separator,
  body.hdb-on #hd .header-submenu-separator { display: none !important; }

  /* 메뉴 한 줄: 아이콘 + 이름 */
  body.hdb-on #hd .main_me_link {
    width: auto;
    height: auto;
    min-height: 40px; /* 이미지 아이콘 줄(20px)과 글리프 아이콘 줄의 높이가 같아지도록 */
    padding: 10px 12px;
    gap: 12px;
    justify-content: flex-start;
    border: 0;
    border-radius: 14px;
    font-size: 14px;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    scale: none !important;
    transition: background-color .15s ease;
  }
  body.hdb-on #hd .main_me_link i { width: 20px; font-size: 16px; text-align: center; }
  /* 세로 목록의 이미지 아이콘: 20px 둥근 칸을 채운다 */
  body.hdb-on #hd .main_me_link > .hdb-imgbox,
  body.hdb-on #hd .sub_me_link > .hdb-imgbox {
    position: relative;
    inset: auto;
    flex: none;
    width: 20px;
    height: 20px;
    overflow: hidden;
    border-radius: 6px;
  }
  body.hdb-on #hd .hdb-ini { width: 20px; font-size: 14px; text-align: center; }
  body.hdb-on #hd .main_me_link:hover,
  body.hdb-on #hd .main_me.main_me_on > .main_me_link { background: rgba(255, 255, 255, .1); }
  /* 하위 메뉴가 있는 줄 오른쪽의 화살표(열리면 위쪽을 향한다) */
  body.hdb-on #hd .main_me.has_submenu > .main_me_link::after {
    display: block;
    content: '';
    position: static;
    width: 7px;
    height: 7px;
    margin: -3px 4px 0 auto;
    border: 0;
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    background: none;
    opacity: .6;
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  body.hdb-on #hd .main_me.main_me_on > .main_me_link::after { margin-top: 3px; transform: rotate(-135deg); }
  body.hdb-on #hd .main_me::after,
  body.hdb-on #hd .main_me.has_submenu::before,
  body.hdb-on #hd .hd_login .hdb-tw::after { display: none !important; } /* 말풍선/점은 PC 전용 */

  /* 하위 메뉴: 그 줄 아래로 들여써서 펼친다(눌러서 열고 닫는다) */
  body.hdb-on #hd .sub_me_list {
    display: none;
    position: static !important;
    translate: none !important;
    transform: none !important;
    width: auto !important;
    max-height: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    padding: 0 0 4px 32px;
    overflow: visible;
  }
  body.hdb-on #hd .main_me.main_me_on > .sub_me_list { display: block; }
  body.hdb-on #hd .sub_me_box {
    min-width: 0;
    padding: 0;
    gap: 0;
    border: 0;
    border-radius: 0;
    background: none;
    box-shadow: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    transform: none;
  }
  body.hdb-on #hd .sub_me_box::before { display: none; }
  body.hdb-on #hd .sub_me_box { width: 100%; } /* 사이트 기본값이 글자 폭(fit-content)이라 줄 전체로 넓힌다 */
  body.hdb-on #hd .sub_me { width: 100%; opacity: 1 !important; transform: none !important; animation: none; }
  body.hdb-on #hd .sub_me_link {
    box-sizing: border-box;
    width: 100%;
    padding: 9px 12px;
    border-radius: 12px;
    color: rgba(255, 255, 255, .78);
  }
  body.hdb-on #hd .sub_me_link:hover { background: rgba(255, 255, 255, .1); }
  body.hdb-on #hd .main_me_link { box-sizing: border-box; width: 100%; } /* 줄 어디를 눌러도 눌리게 */

  /* 로그인 영역: 카드 맨 아래 아이콘 한 줄 */
  body.hdb-on #hd .hd_login {
    display: flex !important;
    flex-wrap: nowrap;
    justify-content: space-between; /* 간격은 일정하게, 양 끝 아이콘은 양옆에 붙인다 */
    align-items: center;
    gap: 0;
    max-width: 100%;
    margin: 0;
    padding: 4px 8px; /* 높이는 아이콘 크기에 맞춘다 */
    border-top: 1px solid var(--hdb-panel-line);
  }
  body.hdb-on #hd .hd_login::before { display: none; }
  body.hdb-on #hd .hd_login .hdb-tw { flex: none; margin: 0; }
  body.hdb-on #hd .hd_login .hdb-t {
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    justify-content: center;
    background: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    box-shadow: none !important;
    scale: none !important;
  }
  body.hdb-on #hd .hd_login .hdb-t:hover { background: rgba(255, 255, 255, .1); }
  body.hdb-on #hd .hd_login .hdb-t i { font-size: 17px; }
}

/* 헤더가 원래 차지하던 높이 제거: 본문 위쪽 여백(padding-top)과,
 * 메인 컨테이너 높이에서 빼던 헤더 높이를 모두 없앤다(헤더가 본문 위에 떠 있는 구조이므로). */
body.hdb-on #hd ~ #wrapper { padding-top: 0 !important; }
@media (min-width: 769px) {
  body.hdb-on #container { height: 95vh; }
}

/* ===== 홈바(누르는 영역은 넉넉하게, 눈에 보이는 막대는 얇게) ===== */
#hdb-handle {
  position: fixed;
  top: 0;
  left: 50%;
  width: 160px;
  height: 26px;
  margin-left: -80px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  z-index: 99991;
  display: none;
  -webkit-tap-highlight-color: transparent;
  transition: opacity .2s ease;
}
body.hdb-on #hdb-handle { display: block; }
#hdb-handle::before {
  content: '';
  position: absolute;
  left: 50%;
  top: 7px;
  width: 110px;
  height: 5px;
  margin-left: -55px;
  border-radius: 3px;
  background: rgba(60, 60, 60, .55);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, .55);
  transition: background-color .2s ease, width .2s ease, margin-left .2s ease;
}
#hdb-handle:hover::before {
  background: rgba(60, 60, 60, .9);
  width: 130px;
  margin-left: -65px;
}
/* 메뉴가 열려 있는 동안 홈바는 숨긴다(패널 위에 겹치지 않도록).
 * 닫기: 메뉴 바깥 클릭 또는 Esc */
body.hdb-on.hdb-open #hdb-handle {
  opacity: 0;
  pointer-events: none;
}