@charset "utf-8";
/* ==========================================================
   배네타 더 하이브 머리말만 — 공통 계정 화면(vp.css 사용)에 홈페이지와 같은 머리말을 붙일 때 사용.
   hive.css 의 머리말 규칙을 .hd 안으로 한정해 옮긴 것 (화면의 다른 요소에는 영향 없음).
   홈페이지 머리말을 고치면 이 파일도 같이 고친다.
   ========================================================== */
/* 2026-10-26 디자인 고도화: hive.css(+hive-vivid.css) 와 같은 글꼴·색·머리말·꼬리말 */
@font-face { font-family: "Cormorant Garamond"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Cormorant Garamond"; font-style: italic; font-weight: 400; font-display: swap; src: url("/assets/fonts/cormorant-garamond-latin-400-italic.woff2") format("woff2"); }
.hd {
  --ivory: #FFFAF6; --sand: #F6E4EC; --sand-line: #EEDCE6; --bronze: #A3266B; --bronze-d: #7A1E52; --bronze-l: #F08DB5;
  --espresso: #1B1225; --ink-2: #463A52; --muted: #6E6378; --r: 2px; --wrap: 1200px; --gutter: 32px;
  --serif: "Cormorant Garamond", "Pretendard Variable", Pretendard, serif;
  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  position: sticky; top: 0; z-index: 50; font-family: var(--font); font-size: 16px; line-height: 1.7; color: var(--espresso);
  background: rgba(255,250,246,.88); backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px);
  border-bottom: 1px solid var(--sand-line); transition: background-color .25s, box-shadow .25s; word-break: keep-all;
}
.hd *, .hd *::before, .hd *::after { box-sizing: border-box; }
.hd ul { margin: 0; padding: 0; list-style: none; }
.hd a { color: inherit; }
.hd :focus-visible { outline: 2px solid var(--bronze); outline-offset: 3px; }
.hd .sr-only { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hd .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
@media (max-width: 640px) { .hd { --gutter: 20px; } }
.hd.is-scrolled { background: rgba(255,250,246,.95); box-shadow: 0 12px 32px -28px rgba(29,24,19,.5); }
.hd .hd__in { display: flex; align-items: center; justify-content: space-between; height: 80px; gap: 24px; }
.hd .logo { display: inline-flex; flex-direction: column; align-items: center; text-decoration: none; line-height: 1; color: var(--espresso); }
.hd .logo__main { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .3em; margin-right: -.3em; }
.hd .logo__sub { position: relative; margin-top: 6px; padding-top: 6px; font-size: 9px; font-weight: 500; letter-spacing: .5em; margin-right: -.5em; color: var(--bronze); }
.hd .logo__sub::before { content: ""; position: absolute; top: 0; left: 50%; width: 22px; height: 1px; margin-left: -11px; background: linear-gradient(90deg, #F7C66B, #FF5E8A, #8B5CF6); }
.hd .gnb { display: flex; align-items: center; gap: 44px; }
.hd .gnb__list { display: flex; gap: 36px; }
.hd .gnb__list a { position: relative; display: block; padding: 8px 0; font-size: 15px; font-weight: 500; letter-spacing: -.01em; text-decoration: none; color: var(--ink-2); transition: color .2s; }
.hd .gnb__list a::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 4px; height: 4px; margin-left: -2px; background: var(--bronze-l); transform: rotate(45deg) scale(0); transition: transform .25s; }
.hd .gnb__list a:hover { color: var(--espresso); }
.hd .gnb__list a:hover::after, .hd .gnb__list a[aria-current="page"]::after { transform: rotate(45deg) scale(1); }
.hd .gnb__list a[aria-current="page"] { color: var(--espresso); font-weight: 600; }
.hd .gnb__util { display: flex; align-items: center; gap: 22px; }
.hd .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; padding: 0 20px; border: 1px solid transparent; border-radius: var(--r); font-size: 14px; font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color .2s; white-space: nowrap; background: linear-gradient(135deg, #2A1640, #1B1225); color: var(--ivory); box-shadow: 0 10px 30px -14px rgba(139,92,246,.7); }
.hd .btn:hover { background: linear-gradient(135deg, #A3266B, #6D28D9); color: var(--ivory); }
.hd .gnb__member { display: flex; align-items: center; gap: 18px; font-size: 14px; }
.hd .gnb__member a { color: var(--muted); text-decoration: none; white-space: nowrap; }
.hd .gnb__member a:hover { color: var(--espresso); }
.hd .gnb__logout { display: inline; margin: 0; }
.hd .gnb__logout button { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; white-space: nowrap; min-height: 0; }
.hd .gnb__logout button:hover { color: var(--espresso); }
.hd .menu-btn { display: none; position: relative; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; cursor: pointer; }
.hd .menu-btn__bar, .hd .menu-btn__bar::before, .hd .menu-btn__bar::after { position: absolute; left: 11px; width: 22px; height: 1px; background: var(--espresso); transition: transform .2s, opacity .2s; }
.hd .menu-btn__bar { top: 21px; }
.hd .menu-btn__bar::before, .hd .menu-btn__bar::after { content: ""; left: 0; }
.hd .menu-btn__bar::before { top: -7px; }
.hd .menu-btn__bar::after { top: 7px; }
.hd .menu-btn[aria-expanded="true"] .menu-btn__bar { background: transparent; }
.hd .menu-btn[aria-expanded="true"] .menu-btn__bar::before { transform: translateY(7px) rotate(45deg); }
.hd .menu-btn[aria-expanded="true"] .menu-btn__bar::after { transform: translateY(-7px) rotate(-45deg); }
@media (min-width: 961px) and (max-width: 1180px) { .hd .gnb { gap: 24px; } .hd .gnb__list { gap: 20px; } .hd .gnb__member { gap: 12px; font-size: 13px; } }
@media (max-width: 960px) {
  .hd .hd__in { height: 64px; }
  .hd .logo__main { font-size: 20px; }
  .hd .menu-btn { display: block; }
  .hd .gnb { position: fixed; top: 64px; left: 0; right: 0; bottom: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 32px; background: var(--ivory); overflow-y: auto; visibility: hidden; opacity: 0; transform: translateY(-8px); transition: opacity .2s, transform .2s, visibility .2s; }
  .hd .gnb.is-open { visibility: visible; opacity: 1; transform: none; }
  .hd .gnb__list { flex-direction: column; gap: 0; }
  .hd .gnb__list a { padding: 20px 0; font-size: 22px; font-weight: 400; letter-spacing: -.03em; color: var(--espresso); border-bottom: 1px solid var(--sand-line); }
  .hd .gnb__list a::after { display: none; }
  .hd .gnb__util { flex-direction: column-reverse; align-items: stretch; gap: 16px; margin-top: 28px; }
  .hd .gnb__util .btn { min-height: 54px; font-size: 16px; }
  .hd .gnb__member { justify-content: center; gap: 0; font-size: 15px; }
  .hd .gnb__member a, .hd .gnb__logout button { padding: 12px 16px; }
  .hd .gnb__member > * + * { border-left: 1px solid var(--sand-line); }
  body.menu-open { overflow: hidden; }
  body.menu-open .hd { backdrop-filter: none; -webkit-backdrop-filter: none; background: var(--ivory); }
}

/* ---------- 꼬리말 (.ft 안으로 한정) ---------- */
.ft { --ivory: #FFFAF6; --bronze-l: #F08DB5; --gold: #F7C66B; --gold-l: #FFE2A6; --dark: #0E0716; --dark-line: rgba(247,198,107,.2); --kakao: #FEE500; --wrap: 1200px; --gutter: 32px;
  --serif: "Cormorant Garamond", "Pretendard Variable", Pretendard, serif;
  margin-top: 72px; padding: 88px 0 44px; background: radial-gradient(600px 300px at 100% 0%, rgba(139,92,246,.18), transparent 70%), var(--dark); color: #C9BCD8; border-top: 3px solid #FF5E8A; border-image: linear-gradient(90deg, #F7C66B, #FF5E8A, #8B5CF6, #38BDF8) 1; font-size: 14px; line-height: 1.7;
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; }
@media (max-width: 640px) { .ft { --gutter: 20px; } }
.ft p, .ft ul { margin: 0; padding: 0; list-style: none; }
.ft .wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin: 0 auto; padding: 0 var(--gutter); }
.ft .logo { display: inline-flex; flex-direction: column; align-items: flex-start; text-decoration: none; line-height: 1; color: var(--ivory); }
.ft .logo__main { font-family: var(--serif); font-size: 25px; font-weight: 500; letter-spacing: .3em; margin-right: -.3em; }
.ft .logo__sub { position: relative; margin-top: 6px; padding-top: 6px; font-size: 9px; font-weight: 500; letter-spacing: .5em; color: var(--gold); }
.ft .logo__sub::before { content: ""; position: absolute; top: 0; left: 0; width: 22px; height: 1px; background: #7E6445; }
.ft__top { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end; gap: 32px; padding-bottom: 48px; border-bottom: 1px solid var(--dark-line); }
.ft__slogan { margin-top: 24px !important; font-family: var(--serif); font-style: italic; font-size: 17px; letter-spacing: .12em; color: var(--gold); }
.ft__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.ft__label { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.ft__tel { font-family: var(--serif); font-size: 34px; font-weight: 500; line-height: 1.2; color: var(--ivory); text-decoration: none; letter-spacing: .02em; margin-bottom: 12px; }
.ft .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 0 18px; border-radius: 2px; font-size: 14px; font-weight: 600; text-decoration: none; background: var(--kakao); color: #191600; }
.ft__links { display: flex; flex-wrap: wrap; gap: 8px 28px; padding: 32px 0 20px !important; }
.ft__links a { text-decoration: none; color: #E8DFD3; }
.ft__links a:hover { color: var(--gold-l); }
.ft__links strong { color: var(--ivory); font-weight: 700; }
.ft__info { display: flex; flex-wrap: wrap; gap: 4px 22px; padding-top: 24px; border-top: 1px solid var(--dark-line); font-style: normal; font-size: 13px; line-height: 1.9; color: #9C8F7E; }
.ft__copy { margin-top: 28px !important; font-family: var(--serif); font-size: 14px; letter-spacing: .08em; color: #8A7D6C; }
.ft__apps { padding-top: 0 !important; }
.ft__apps-label { font-family: var(--serif); font-size: 13px; letter-spacing: .2em; color: var(--gold); }
.hd .gnb__member a.gnb__admin { color: var(--bronze-d); font-weight: 700; }

/* 배네타 심볼 + 글자 로고 (2026-10-28) — 심볼(육각형 벌방 7개 V) 왼쪽, VANETA / THE HIVE 오른쪽 */
.hd .logo, .ft .logo { flex-direction: row; align-items: center; gap: 10px; }
.logo__mark { flex: none; width: 34px; height: auto; }
.logo__text { display: inline-flex; flex-direction: column; align-items: center; }
.ft__brand .logo__text { align-items: flex-start; }
@media (max-width: 640px) { .logo__mark { width: 28px; } .hd .logo, .ft .logo { gap: 8px; } }