/* =========================================================
   HERO ON 공통 상단 바
   각 월드 페이지 맨 위에 붙는 "메인 홈" 이동 바입니다.
   페이지 고유 디자인과 겹치지 않도록 wo-bar 이름만 사용합니다.
   ========================================================= */
.wo-bar {
  position: relative;
  z-index: 60;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  height: 38px;
  margin: 0;
  padding: 0 clamp(16px, 4.5vw, 48px);
  background: #0a0a0b;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
  color: #f4f1ea;
  font: 500 11px/1 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
}
.wo-bar *, .wo-bar *::before, .wo-bar *::after { box-sizing: border-box; }
.wo-bar a { color: inherit; text-decoration: none; }

.wo-bar .wo-bar__brand {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif;
  font-size: 18px;
  font-weight: 800;
  font-synthesis: none;
  letter-spacing: .04em;
  line-height: 1;
}
.wo-bar .wo-bar__brand b { color: #f4f1ea; font-weight: inherit; }
.wo-bar .wo-bar__brand i { color: #d9ff43; font-style: normal; font-weight: inherit; }

.wo-bar .wo-bar__here {
  padding-left: 14px;
  border-left: 1px solid rgba(244, 241, 234, .2);
  color: rgba(244, 241, 234, .58);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .16em;
  white-space: nowrap;
}
.wo-bar .wo-bar__here b { color: #f4f1ea; font-weight: 700; }

.wo-bar .wo-bar__home {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  height: 26px;
  margin-left: auto;
  padding: 0 13px 0 10px;
  border: 1px solid rgba(244, 241, 234, .34);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  white-space: nowrap;
  transition: background-color .2s, border-color .2s, color .2s;
}
.wo-bar .wo-bar__home svg { display: block; flex: none; width: 13px; height: 13px; }
.wo-bar .wo-bar__home:hover,
.wo-bar .wo-bar__home:focus-visible { background: #d9ff43; border-color: #d9ff43; color: #0a0a0b; }
.wo-bar a:focus-visible { outline: 2px solid #d9ff43; outline-offset: 3px; }

@media (max-width: 560px) {
  .wo-bar { height: 36px; gap: 10px; }
  .wo-bar .wo-bar__here { display: none; }
  .wo-bar .wo-bar__brand { font-size: 16px; }
}
@media print { .wo-bar { display: none; } }

/* =========================================================
   월드 페이지 떠 있는 버튼 (js/worldon-float.js 가 만듭니다)
   ========================================================= */
.wo-float {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 900;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 12px;
  color: #f4f1ea;
  font: 500 14px/1.2 "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", Arial, sans-serif;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity .25s, transform .25s;
  -webkit-font-smoothing: antialiased;
}
.wo-float.is-visible { opacity: 1; pointer-events: auto; transform: none; }
.wo-float *, .wo-float *::before, .wo-float *::after { box-sizing: border-box; }
.wo-float a { color: inherit; text-decoration: none; }
.wo-float button { margin: 0; color: inherit; font: inherit; letter-spacing: inherit; cursor: pointer; -webkit-appearance: none; appearance: none; }
.wo-float svg { display: block; flex: none; }

.wo-float .wo-float__row { display: flex; align-items: center; gap: 10px; }
.wo-float .wo-float__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 50px;
  border: 1px solid rgba(244, 241, 234, .28);
  border-radius: 999px;
  background: rgba(10, 10, 11, .92);
  color: #f4f1ea;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .45);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  transition: border-color .2s, background-color .2s;
}
.wo-float .wo-float__btn:hover { border-color: rgba(244, 241, 234, .65); background: rgba(24, 24, 27, .95); }
.wo-float .wo-float__btn:focus-visible, .wo-float a:focus-visible { outline: 2px solid #d9ff43; outline-offset: 3px; }
.wo-float .wo-float__toggle { padding: 0 18px 0 16px; }
.wo-float .wo-float__logo { font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Narrow", sans-serif; font-size: 20px; font-weight: 800; font-synthesis: none; letter-spacing: .04em; line-height: 1; }
.wo-float .wo-float__logo i { color: #d9ff43; font-style: normal; font-weight: inherit; }
.wo-float .wo-float__toggle svg { width: 12px; height: 12px; transition: transform .2s; }
.wo-float.is-open .wo-float__toggle { border-color: #d9ff43; }
.wo-float.is-open .wo-float__toggle svg { transform: rotate(180deg); }
.wo-float .wo-float__top { width: 50px; padding: 0; }
.wo-float .wo-float__top svg { width: 18px; height: 18px; }

.wo-float .wo-float__panel {
  width: 330px;
  margin: 0;
  padding: 10px;
  border: 1px solid rgba(244, 241, 234, .16);
  border-radius: 18px;
  background: #0e0e10;
  box-shadow: 0 24px 60px rgba(0, 0, 0, .55);
}
.wo-float .wo-float__panel[hidden] { display: none; }
.wo-float .wo-float__home { display: flex; align-items: center; gap: 12px; padding: 13px 12px; border-radius: 12px; background: rgba(217, 255, 67, .1); font-size: 15px; font-weight: 800; transition: background-color .2s; }
.wo-float .wo-float__home:hover { background: rgba(217, 255, 67, .18); }
.wo-float .wo-float__home svg { width: 18px; height: 18px; color: #d9ff43; }
.wo-float .wo-float__home small { margin-left: auto; color: rgba(244, 241, 234, .55); font-size: 11px; font-weight: 700; letter-spacing: .12em; }
.wo-float .wo-float__label { margin: 14px 12px 6px; color: rgba(244, 241, 234, .45); font-size: 10px; font-weight: 800; letter-spacing: .2em; }
.wo-float .wo-float__list { margin: 0; padding: 0; list-style: none; }
.wo-float .wo-float__list li { margin: 0; padding: 0; }
.wo-float .wo-float__world { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 800; white-space: nowrap; transition: background-color .2s; }
.wo-float .wo-float__world:hover { background: rgba(244, 241, 234, .06); }
.wo-float .wo-float__world b { width: 22px; color: var(--c); font-family: Impact, Haettenschweiler, "Arial Narrow Bold", sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .04em; }
.wo-float .wo-float__world em { margin-left: auto; color: rgba(244, 241, 234, .5); font-size: 11.5px; font-style: normal; font-weight: 600; }
.wo-float .wo-float__world[aria-current] { background: rgba(244, 241, 234, .07); }
.wo-float .wo-float__world[aria-current] em { color: #d9ff43; font-weight: 800; }
.wo-float .wo-float__links { display: flex; gap: 6px; margin: 12px 4px 2px; padding-top: 12px; border-top: 1px solid rgba(244, 241, 234, .12); }
.wo-float .wo-float__links a { flex: 1; padding: 10px 0; border: 1px solid rgba(244, 241, 234, .16); border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .08em; text-align: center; transition: border-color .2s, color .2s; }
.wo-float .wo-float__links a:hover { border-color: #d9ff43; color: #d9ff43; }

@media (max-width: 600px) {
  .wo-float { right: 16px; bottom: 16px; }
  .wo-float .wo-float__panel { width: calc(100vw - 32px); }
}
@media (prefers-reduced-motion: reduce) {
  .wo-float, .wo-float .wo-float__toggle svg { transition: none; }
}
@media print { .wo-float { display: none; } }