@font-face {
  font-family: "Pretendard Variable";
  src: url("/assets/fonts/PretendardVariable.woff2") format("woff2-variations");
  font-style: normal;
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --mwr-nav-height: 4.5rem;
  --mwr-dock-height: 4.35rem;
  --mwr-blue: #62b9e5;
  --mwr-blue-deep: #286b98;
  --mwr-blue-soft: #edf8ff;
  --mwr-violet: #8c7cdf;
  --mwr-violet-deep: #6555b7;
  --mwr-violet-soft: #f3f0ff;
  --mwr-ink: #18253a;
  --mwr-muted: #708095;
  --mwr-line: #dce7f1;
}

.mwr-navbar,
.mwr-navbar *,
.mwr-menu-panel,
.mwr-menu-panel *,
.mwr-mobile-dock,
.mwr-mobile-dock * { box-sizing: border-box; }
.mwr-navbar a,
.mwr-mobile-dock a { color: inherit; text-decoration: none; }
.mwr-navbar button { font: inherit; }
.mwr-navbar svg,
.mwr-menu-panel svg,
.mwr-mobile-dock svg { display: block; }
.mwr-navbar [hidden],
.mwr-menu-panel[hidden],
.mwr-menu-backdrop[hidden] { display: none !important; }

.mwr-navbar {
  position: sticky;
  z-index: 100;
  top: 0;
  width: 100%;
  min-height: calc(var(--mwr-nav-height) + env(safe-area-inset-top));
  padding-top: env(safe-area-inset-top);
  border-bottom: 1px solid rgba(207, 224, 239, .86);
  color: var(--mwr-ink);
  background: rgba(250, 253, 255, .9);
  box-shadow: 0 10px 32px rgba(52, 78, 115, .07);
  backdrop-filter: blur(20px) saturate(1.25);
  -webkit-backdrop-filter: blur(20px) saturate(1.25);
  font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
}

.mwr-navbar__inner {
  display: flex;
  width: min(82rem, calc(100% - 1.25rem));
  min-height: var(--mwr-nav-height);
  align-items: center;
  justify-content: space-between;
  gap: .8rem;
  margin-inline: auto;
}
.mwr-navbar__brand { display: inline-flex; min-width: 0; align-items: center; gap: .65rem; border-radius: .9rem; }
.mwr-navbar__mark { display: grid; width: 2.65rem; height: 2.65rem; flex: 0 0 auto; place-items: center; border: 1px solid rgba(255, 255, 255, .8); border-radius: .9rem; color: rgba(255, 255, 255, .3); background: linear-gradient(145deg, #77d0ed, #8c79df); box-shadow: 0 9px 22px rgba(87, 128, 188, .24), inset 0 1px rgba(255, 255, 255, .7); }
.mwr-navbar__mark svg { width: 1.9rem; height: 1.9rem; }
.mwr-navbar__wordmark { display: grid; min-width: 0; }
.mwr-navbar__wordmark strong { overflow: hidden; color: #24364c; font-size: 1rem; font-weight: 950; letter-spacing: -.035em; text-overflow: ellipsis; white-space: nowrap; }
.mwr-navbar__wordmark small { margin-top: .08rem; color: #8491a3; font-size: .52rem; font-weight: 900; letter-spacing: .1em; }

.mwr-navbar__desktop { display: none; align-items: center; gap: .15rem; }
.mwr-nav-link { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; gap: .42rem; padding: 0 .72rem; border: 1px solid transparent; border-radius: .82rem; color: #58687d !important; background: transparent; font-size: .81rem; font-weight: 850; white-space: nowrap; transition: color .16s ease, border-color .16s ease, background .16s ease, transform .16s ease; }
.mwr-nav-link:hover { color: var(--mwr-blue-deep) !important; background: var(--mwr-blue-soft); }
.mwr-nav-link.is-active { border-color: #cfe5f2; color: #356f98 !important; background: linear-gradient(135deg, var(--mwr-blue-soft), var(--mwr-violet-soft)); box-shadow: inset 0 1px rgba(255, 255, 255, .8); }
.mwr-nav-icon { width: 1.08rem; height: 1.08rem; flex: 0 0 auto; }
.mwr-nav-chevron { width: .9rem; height: .9rem; transition: transform .16s ease; }
[aria-expanded="true"] > .mwr-nav-chevron { transform: rotate(180deg); }

.mwr-navbar__actions { display: flex; min-width: 0; align-items: center; justify-content: flex-end; gap: .4rem; }
.mwr-auth-link,
.mwr-account-button { display: inline-flex; min-height: 2.8rem; align-items: center; justify-content: center; border: 1px solid #d7e3ed; border-radius: .82rem; padding: 0 .82rem; color: #526176; background: rgba(255, 255, 255, .92); font-size: .79rem; font-weight: 900; }
.mwr-auth-link.is-register { display: none; border-color: transparent; color: #fff; background: linear-gradient(135deg, #63b9e2, #8775d8); box-shadow: 0 8px 20px rgba(93, 113, 188, .2); }
.mwr-account-button { max-width: 13rem; gap: .5rem; padding: .35rem .55rem .35rem .38rem; }
.mwr-account-button__avatar,
.mwr-account-summary__avatar { display: grid; width: 2rem; height: 2rem; flex: 0 0 auto; place-items: center; border-radius: .65rem; color: #fff; background: linear-gradient(135deg, #72c9e9, #917ce0); box-shadow: 0 7px 16px rgba(106, 116, 195, .19); }
.mwr-account-button__avatar svg { width: 1.05rem; height: 1.05rem; }
.mwr-account-button__copy { display: none; min-width: 0; text-align: left; }
.mwr-account-button__copy small,
.mwr-account-button__copy strong { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.mwr-account-button__copy small { color: #8794a5; font-size: .53rem; font-weight: 800; }
.mwr-account-button__copy strong { margin-top: .03rem; color: #35485f; font-size: .76rem; font-weight: 950; }

.mwr-menu-panel { position: fixed; z-index: 140; inset: auto .55rem calc(var(--mwr-dock-height) + env(safe-area-inset-bottom) + .55rem); overflow: hidden auto; max-height: min(74dvh, 38rem); border: 1px solid var(--mwr-line); border-radius: 1.25rem; padding: .75rem; background: rgba(255, 255, 255, .985); box-shadow: 0 26px 70px rgba(34, 51, 82, .22); overscroll-behavior: contain; font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif; }
.mwr-menu-panel button { font: inherit; }
.mwr-panel-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .25rem .25rem .75rem; }
.mwr-panel-head > div { min-width: 0; }
.mwr-panel-head small,
.mwr-panel-head strong { display: block; }
.mwr-panel-head small { color: var(--mwr-violet-deep); font-size: .55rem; font-weight: 950; letter-spacing: .1em; }
.mwr-panel-head strong { margin-top: .15rem; color: var(--mwr-ink); font-size: 1.05rem; font-weight: 950; }
.mwr-panel-head > button { display: grid; width: 2.75rem; height: 2.75rem; flex: 0 0 auto; place-items: center; border: 1px solid #dce6ef; border-radius: .8rem; color: #66778d; background: #f8fbfd; cursor: pointer; }
.mwr-panel-head > button svg { transform: rotate(180deg); }
.mwr-service-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
.mwr-service-link,
.mwr-menu-link { display: grid; min-width: 0; min-height: 4.5rem; align-items: center; gap: .65rem; border: 1px solid #e1eaf2; border-radius: .9rem; color: #53657a; background: #fbfdff; text-decoration: none; }
.mwr-service-link { grid-template-columns: auto minmax(0, 1fr); padding: .75rem; }
.mwr-service-link > svg,
.mwr-menu-link > svg:first-child { width: 2.25rem; height: 2.25rem; padding: .52rem; border-radius: .7rem; color: #477b9e; background: var(--mwr-blue-soft); }
.mwr-service-link span,
.mwr-menu-link span { min-width: 0; }
.mwr-service-link strong,
.mwr-service-link small,
.mwr-menu-link strong,
.mwr-menu-link small { overflow: hidden; display: block; text-overflow: ellipsis; white-space: nowrap; }
.mwr-service-link strong,
.mwr-menu-link strong { color: #31445b; font-size: .76rem; font-weight: 950; }
.mwr-service-link small,
.mwr-menu-link small { margin-top: .16rem; color: #8592a3; font-size: .58rem; font-weight: 700; }
.mwr-service-link.is-active { border-color: #cfc8ef; background: linear-gradient(135deg, var(--mwr-blue-soft), var(--mwr-violet-soft)); }

.mwr-account-menu { padding: .65rem; }
.mwr-account-summary { justify-content: flex-start; padding: .55rem; border-radius: .9rem; background: linear-gradient(135deg, var(--mwr-blue-soft), var(--mwr-violet-soft)); }
.mwr-account-summary__avatar { width: 2.75rem; height: 2.75rem; }
.mwr-account-summary > div { flex: 1; min-width: 0; }
.mwr-account-summary strong { overflow: hidden; margin-top: .08rem; text-overflow: ellipsis; white-space: nowrap; }
.mwr-account-summary p { overflow: hidden; margin: .12rem 0 0; color: #718096; font-size: .65rem; font-weight: 750; text-overflow: ellipsis; white-space: nowrap; }
.mwr-account-links { display: grid; gap: .38rem; margin-top: .55rem; }
.mwr-menu-link { grid-template-columns: auto minmax(0, 1fr) auto; min-height: 4.35rem; padding: .6rem .7rem; }
.mwr-menu-link > svg:last-child { width: 1rem; height: 1rem; transform: rotate(-90deg); color: #9aa7b6; }
.mwr-menu-link.is-admin { border-color: #d8d1f2; background: linear-gradient(135deg, #f0f9ff, #f5f1ff); }
.mwr-menu-link.is-admin > svg:first-child { color: var(--mwr-violet-deep); background: #eeeaff; }
.mwr-account-menu__logout { margin: .55rem 0 0; padding-top: .55rem; border-top: 1px solid #e8eef4; }
.mwr-account-menu__logout button { display: flex; width: 100%; min-height: 3rem; align-items: center; justify-content: center; gap: .45rem; border: 0; border-radius: .82rem; color: #a23b56; background: #fff4f6; cursor: pointer; font-size: .78rem; font-weight: 900; }

.mwr-menu-backdrop { position: fixed; z-index: 130; inset: 0; background: rgba(20, 31, 50, .34); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); }
.mwr-mobile-dock { position: fixed; z-index: 110; inset: auto .55rem max(.55rem, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); min-height: var(--mwr-dock-height); padding: .38rem; border: 1px solid rgba(207, 222, 235, .95); border-radius: 1.15rem; background: rgba(255, 255, 255, .96); box-shadow: 0 16px 44px rgba(38, 56, 88, .2); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); font-family: "Pretendard Variable", Pretendard, "Apple SD Gothic Neo", system-ui, sans-serif; }
.mwr-mobile-dock a { display: flex; min-width: 0; min-height: 3.5rem; flex-direction: column; align-items: center; justify-content: center; gap: .24rem; border-radius: .82rem; color: #77869a; font-size: .59rem; font-weight: 900; }
.mwr-mobile-dock a svg { width: 1.18rem; height: 1.18rem; }
.mwr-mobile-dock a.is-active { color: var(--mwr-violet-deep); background: linear-gradient(145deg, var(--mwr-blue-soft), var(--mwr-violet-soft)); }
body.mwr-menu-open { overflow: hidden; }

:where(.mwr-navbar a, .mwr-navbar button, .mwr-mobile-dock a):focus-visible { outline: 3px solid rgba(103, 104, 205, .38); outline-offset: 2px; }

@media (max-width: 1099px) {
  body { padding-bottom: calc(var(--mwr-dock-height) + env(safe-area-inset-bottom) + 1.2rem); }
}
@media (min-width: 420px) {
  .mwr-account-button__copy { display: block; }
}
@media (min-width: 540px) {
  .mwr-auth-link.is-register { display: inline-flex; }
  .mwr-menu-panel { right: max(1rem, calc((100vw - 32rem) / 2)); left: auto; width: min(30rem, calc(100vw - 2rem)); }
}
@media (min-width: 1100px) {
  .mwr-navbar__inner { width: min(82rem, calc(100% - 3rem)); }
  .mwr-navbar__desktop { display: flex; }
  .mwr-mobile-dock { display: none; }
  .mwr-menu-backdrop { display: none !important; }
  .mwr-menu-panel { top: calc(var(--mwr-nav-height) + env(safe-area-inset-top) + .55rem); bottom: auto; max-height: min(72vh, 38rem); border-radius: 1rem; }
  .mwr-more-panel { right: max(1.5rem, calc((100vw - 82rem) / 2 + 11rem)); left: auto; width: 36rem; }
  .mwr-account-menu { right: max(1.5rem, calc((100vw - 82rem) / 2)); left: auto; width: 21rem; }
  .mwr-panel-head > button { display: none; }
  .mwr-service-link:hover,
  .mwr-menu-link:hover { border-color: #c9deec; background: var(--mwr-blue-soft); transform: translateY(-1px); }
}
@media (max-width: 370px) {
  :root { --mwr-nav-height: 4.15rem; }
  .mwr-navbar__inner { width: calc(100% - .8rem); }
  .mwr-navbar__mark { width: 2.4rem; height: 2.4rem; }
  .mwr-navbar__wordmark strong { font-size: .88rem; }
  .mwr-navbar__wordmark small { display: none; }
  .mwr-account-button { padding-right: .38rem; }
  .mwr-account-button__copy,
  .mwr-account-button > .mwr-nav-chevron { display: none; }
  .mwr-service-grid { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mwr-navbar *,
  .mwr-mobile-dock * { scroll-behavior: auto !important; transition: none !important; }
}
@media (prefers-contrast: more) {
  .mwr-navbar,
  .mwr-nav-link,
  .mwr-auth-link,
  .mwr-account-button,
  .mwr-menu-panel,
  .mwr-mobile-dock { border-width: 2px; }
}