/* =====================================================================
   OMU navigation v4 (2026-10-11)
   Desktop sidebar (.am-sidebar.am-side, ≥1024px), mobile bottom bar (.mn-bottom), 만들기 sheet (#omuCreateSheet)
   and the 전체 메뉴 body (#omuUnifiedPublicMenu .mn-*).
   Markup: public/includes/omu_design.php + mobile_navigation.php. Items: public/includes/omu_nav.php.
   Loaded after css/omu-am.css / omu-am-studio.css, so equal-specificity rules here win.
   ===================================================================== */

:root {
  --nv-key: var(--omu-primary, #6D3BE8);
  --nv-key-rgb: var(--omu-primary-rgb, 109, 59, 232);
  --nv-key-ink: var(--omu-primary-ink, #572FBA);
  --nv-key-soft: var(--omu-primary-soft, #F5F1FD);
  --nv-key-soft-2: var(--omu-primary-soft-strong, #EBE4FC);
  --nv-key-2: color-mix(in srgb, var(--nv-key) 62%, #f0569b);
  --nv-text: #1c1b22;
  --nv-text-2: #5b5a63;
  --nv-text-3: #8d8c95;
  --nv-line: rgba(28, 24, 48, .08);
  --nv-fill: rgba(28, 24, 48, .045);
  --nv-fill-2: rgba(28, 24, 48, .075);
  --nv-surface: #fff;
  --nv-font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", system-ui, sans-serif;
  --nv-ease: cubic-bezier(.32, .72, 0, 1);
}

/* Tones of the 스페셜 creations (omu_nav.php → special[].tone). */
[data-tone="sun"] { --tone-a: #ffbf4d; --tone-b: #ff7652; --tone-soft: #fff4e6; --tone-soft-2: #ffe7cf; --tone-ink: #b0461a; }
[data-tone="mint"] { --tone-a: #3fd9a6; --tone-b: #149dc6; --tone-soft: #e8f9f3; --tone-soft-2: #cff2e6; --tone-ink: #0b7363; }
[data-tone="sky"] { --tone-a: #6fc0ff; --tone-b: #4a66ff; --tone-soft: #edf4ff; --tone-soft-2: #d9e6ff; --tone-ink: #2c49c4; }
[data-tone="rose"] { --tone-a: #ff93b8; --tone-b: #ec4a86; --tone-soft: #fff0f5; --tone-soft-2: #ffdbe8; --tone-ink: #ad2559; }
[data-tone="lilac"] { --tone-a: #bc98ff; --tone-b: #7448ee; --tone-soft: #f4efff; --tone-soft-2: #e6dcff; --tone-ink: #5530bd; }
[data-tone="lime"] { --tone-a: #c2e35a; --tone-b: #3fae55; --tone-soft: #f1f9e4; --tone-soft-2: #e0f2c8; --tone-ink: #357219; }

/* ---------------------------------------------------------------------
   1. Desktop sidebar
   --------------------------------------------------------------------- */
@media (min-width: 1024px) {
  html.omu-am .am-sidebar.am-side {
    gap: 0;
    padding: 0 12px;
    background:
      radial-gradient(120% 60% at 0% 0%, rgba(var(--nv-key-rgb), .07), transparent 60%),
      linear-gradient(180deg, #faf9fd 0%, #f5f4f8 100%);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-right: 1px solid var(--nv-line);
    font-family: var(--nv-font);
    color: var(--nv-text);
    scroll-padding-block: 80px 120px;
  }
}
/* The sidebar is a scrolling flex column: its parts keep their full height (site CSS gives <section> overflow:hidden,
   which would otherwise let flex shrink them) and the sidebar scrolls instead. */
html.omu-am .am-sidebar.am-side > * { flex-shrink: 0; }
html.omu-am .am-side .am-side__section { overflow: visible; }
html.omu-am .am-side .am-sidebar__brand {
  position: sticky; top: 0; z-index: 3;
  margin: 0 -12px; padding: 18px 20px 10px;
  background: linear-gradient(180deg, #faf9fd 72%, rgba(250, 249, 253, 0));
}
html.omu-am .am-side .am-search { margin: 2px 2px 14px; }
html.omu-am .am-side .am-search input { height: 36px !important; min-height: 36px !important; border-radius: 11px !important; background: var(--nv-surface) !important; border-color: var(--nv-line) !important; box-shadow: 0 1px 2px rgba(28, 24, 48, .04) !important; padding-right: 34px !important; }
html.omu-am .am-side .am-search__key {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  display: grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border: 1px solid var(--nv-line); border-radius: 6px; background: var(--nv-bg, #f7f7fa);
  color: var(--nv-text-3); font: 600 11px/1 var(--nv-font); pointer-events: none;
}
html.omu-am .am-side .am-search input:focus ~ .am-search__key { opacity: 0; }

/* Plain rows: 듣기, 보관함 */
html.omu-am .am-side .am-side__nav { display: flex; flex-direction: column; gap: 2px; margin: 0; padding: 0; }
html.omu-am .am-side .am-side__link {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  width: 100%; min-height: 37px; padding: 7px 10px;
  border: 0; border-radius: 10px; background: transparent;
  color: var(--nv-text); font: 560 14px/1.25 var(--nv-font); letter-spacing: -.015em;
  text-align: left; text-decoration: none; cursor: pointer;
  transition: background .16s, color .16s, box-shadow .16s;
}
html.omu-am .am-side .am-side__link .am-ico { width: 19px; height: 19px; flex: none; color: var(--nv-text-2); transition: color .16s; }
html.omu-am .am-side .am-side__link:hover { background: var(--nv-fill); }
html.omu-am .am-side .am-side__link:hover .am-ico { color: var(--nv-key-ink); }
html.omu-am .am-side .am-side__link[aria-current="page"] {
  background: var(--nv-surface); color: var(--nv-key-ink); font-weight: 700;
  box-shadow: 0 1px 2px rgba(28, 24, 48, .06), 0 0 0 1px rgba(28, 24, 48, .045);
}
html.omu-am .am-side .am-side__link[aria-current="page"] .am-ico { color: var(--nv-key); }
html.omu-am .am-side .am-side__link[aria-current="page"]::before {
  content: ""; position: absolute; left: -12px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--nv-key);
}

/* Section scaffolding */
html.omu-am .am-side .am-side__section { margin-top: 20px; }
html.omu-am .am-side .am-side__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 22px; margin: 0 0 7px; padding: 0 10px; }
html.omu-am .am-side .am-side__label { margin: 0; font: 700 11.5px/1.3 var(--nv-font); letter-spacing: .02em; color: var(--nv-text-3); }
html.omu-am .am-side .am-member-badge {
  display: inline-flex; align-items: center; gap: 3px; min-height: 20px; padding: 2px 7px 2px 5px;
  border: 0; border-radius: 999px; background: var(--nv-fill); color: var(--nv-text-2);
  font: 650 10.5px/1.3 var(--nv-font); letter-spacing: -.01em; white-space: nowrap;
}
html.omu-am .am-side .am-member-badge svg { width: 12px; height: 12px; flex: none; }

/* 노래 제작 */
html.omu-am .am-side .am-side__hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 11px;
  padding: 11px 12px; border-radius: 15px;
  background-color: var(--nv-key);
  background-image: linear-gradient(135deg, var(--nv-key) 0%, var(--nv-key-2) 100%);
  color: #fff; text-decoration: none;
  box-shadow: 0 10px 22px -12px rgba(var(--nv-key-rgb), .85), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform .22s var(--nv-ease), box-shadow .22s var(--nv-ease);
}
html.omu-am .am-side .am-side__hero::before {
  content: ""; position: absolute; z-index: -1; right: -26px; top: -34px; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .34), rgba(255, 255, 255, 0) 68%);
}
html.omu-am .am-side .am-side__hero::after {
  content: ""; position: absolute; z-index: -1; left: 44px; bottom: -30px; width: 70px; height: 70px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}
html.omu-am .am-side .am-side__hero:hover { transform: translateY(-1px); box-shadow: 0 14px 26px -12px rgba(var(--nv-key-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .24); }
html.omu-am .am-side .am-side__hero:active { transform: translateY(0) scale(.99); }
html.omu-am .am-side .am-side__hero[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--nv-key-rgb), .32), 0 10px 22px -12px rgba(var(--nv-key-rgb), .85); }
html.omu-am .am-side .am-side__hero-ico { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 11px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
html.omu-am .am-side .am-side__hero-ico .am-ico { width: 20px; height: 20px; color: #fff; stroke-width: 1.9; }
html.omu-am .am-side .am-side__hero-text { min-width: 0; }
html.omu-am .am-side .am-side__hero strong { display: block; font: 760 14.5px/1.2 var(--nv-font); letter-spacing: -.025em; }
html.omu-am .am-side .am-side__hero small { display: block; margin-top: 3px; font: 520 11px/1.3 var(--nv-font); color: rgba(255, 255, 255, .84); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.omu-am .am-side .am-side__hero-go { margin-left: auto; flex: none; width: 16px; height: 16px; opacity: .85; transition: transform .22s var(--nv-ease); }
html.omu-am .am-side .am-side__hero:hover .am-side__hero-go { transform: translateX(2px); }

/* 스페셜 제작 */
html.omu-am .am-side .am-side__special {
  margin-top: 10px; padding: 10px 6px 6px; border-radius: 16px;
  background: var(--nv-surface);
  box-shadow: 0 1px 2px rgba(28, 24, 48, .05), 0 0 0 1px rgba(28, 24, 48, .05);
}
html.omu-am .am-side .am-side__special-head { display: flex; align-items: center; gap: 5px; margin: 0 6px 5px; font: 760 12.5px/1.2 var(--nv-font); letter-spacing: -.02em; color: var(--nv-text); }
html.omu-am .am-side .am-side__special-head .am-ico { width: 15px; height: 15px; color: #f2a516; fill: rgba(242, 165, 22, .18); }
html.omu-am .am-side .am-side__special-head small { margin-left: auto; font: 520 10.5px/1.2 var(--nv-font); color: var(--nv-text-3); letter-spacing: -.01em; }
html.omu-am .am-side .am-side__sp {
  display: flex; align-items: center; gap: 10px; padding: 7px 7px; border-radius: 12px;
  color: var(--nv-text); text-decoration: none; transition: background .16s;
}
html.omu-am .am-side .am-side__sp + .am-side__sp { margin-top: 1px; }
html.omu-am .am-side .am-side__sp:hover, html.omu-am .am-side .am-side__sp[aria-current="page"] { background: var(--tone-soft); }
html.omu-am .am-side .am-side__sp-ico {
  position: relative; display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b)); color: #fff;
  box-shadow: 0 6px 14px -8px var(--tone-b), inset 0 1px 0 rgba(255, 255, 255, .38);
}
html.omu-am .am-side .am-side__sp-ico .am-ico { width: 19px; height: 19px; stroke-width: 1.9; }
html.omu-am .am-side .am-side__sp-badge {
  position: absolute; top: -6px; right: -9px; padding: 1px 5px; border-radius: 999px;
  background: #fff; color: var(--tone-ink); box-shadow: 0 0 0 1.5px var(--tone-soft-2);
  font: 820 8.5px/1.45 var(--nv-font); font-style: normal; letter-spacing: .04em;
}
html.omu-am .am-side .am-side__sp-text { min-width: 0; }
html.omu-am .am-side .am-side__sp strong { display: block; font: 700 13.5px/1.2 var(--nv-font); letter-spacing: -.02em; }
html.omu-am .am-side .am-side__sp small { display: block; margin-top: 2px; font: 520 11px/1.25 var(--nv-font); color: var(--nv-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html.omu-am .am-side .am-side__sp[aria-current="page"] strong { color: var(--tone-ink); }

/* 내 목소리 음반: four steps */
html.omu-am .am-side .am-side__steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
html.omu-am .am-side .am-side__step {
  display: flex; align-items: center; gap: 7px; min-height: 40px; padding: 6px 8px;
  border-radius: 11px; background: var(--nv-fill);
  color: var(--nv-text); text-decoration: none; font: 620 12.5px/1.2 var(--nv-font); letter-spacing: -.02em;
  transition: background .16s, box-shadow .16s;
}
html.omu-am .am-side .am-side__step:hover { background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line), 0 2px 6px rgba(28, 24, 48, .05); }
html.omu-am .am-side .am-side__step-no {
  display: grid; place-items: center; flex: none; width: 20px; height: 20px; border-radius: 50%;
  background: var(--nv-surface); color: var(--nv-key-ink); box-shadow: 0 0 0 1.5px var(--nv-key-soft-2);
  font: 800 10.5px/1 var(--nv-font);
}
html.omu-am .am-side .am-side__step span:last-child { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html.omu-am .am-side .am-side__step[aria-current="page"] { background: var(--nv-key-soft); color: var(--nv-key-ink); }
html.omu-am .am-side .am-side__step[aria-current="page"] .am-side__step-no { background: var(--nv-key); color: #fff; box-shadow: none; }

/* Foot: utilities + account */
html.omu-am .am-side .am-side__foot {
  position: sticky; bottom: 0; z-index: 3;
  margin: auto -12px 0; padding: 18px 12px 14px;
  display: grid; gap: 8px;
  background: linear-gradient(180deg, rgba(245, 244, 248, 0), #f5f4f8 34%);
}
html.omu-am .am-side .am-side__utils { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
html.omu-am .am-side .am-side__util {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 34px; padding: 0 8px;
  border-radius: 10px; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line);
  color: var(--nv-text-2); font: 620 12.5px/1 var(--nv-font); letter-spacing: -.015em; text-decoration: none;
  transition: color .16s, box-shadow .16s;
}
html.omu-am .am-side .am-side__util .am-ico { width: 16px; height: 16px; color: var(--nv-key-ink); }
html.omu-am .am-side .am-side__util:hover, html.omu-am .am-side .am-side__util[aria-current="page"] { color: var(--nv-key-ink); box-shadow: 0 0 0 1px rgba(var(--nv-key-rgb), .35); }
html.omu-am .am-side .am-account { padding: 5px; border-radius: 14px; background: var(--nv-surface); box-shadow: 0 0 0 1px var(--nv-line); }
html.omu-am .am-side .am-account__link { font: 650 13px/1.2 var(--nv-font); }
html.omu-am .am-side .am-signin {
  height: 40px; border-radius: 12px; font: 680 13.5px/1 var(--nv-font);
  background-color: var(--nv-key); background-image: linear-gradient(135deg, var(--nv-key), var(--nv-key-2));
  box-shadow: 0 8px 18px -10px rgba(var(--nv-key-rgb), .9);
}
html.omu-am .am-side .am-side__join { margin: 0; padding: 0 4px; font: 520 11px/1.45 var(--nv-font); color: var(--nv-text-3); text-align: center; word-break: keep-all; }

html.omu-am .am-side :is(a, button, input):focus-visible { outline: 2px solid var(--nv-key); outline-offset: 2px; }

/* ---------------------------------------------------------------------
   2. Mobile bottom bar (public + studio documents)
   --------------------------------------------------------------------- */
@media (max-width: 1023.98px) {
  html body.omu-interface-v2 .omu-unified-bottom.mn-bottom {
    padding: 0 6px env(safe-area-inset-bottom) !important;
    background: rgba(255, 255, 255, .9) !important;
    -webkit-backdrop-filter: saturate(180%) blur(22px);
    backdrop-filter: saturate(180%) blur(22px);
    border-top: 1px solid var(--nv-line) !important;
    box-shadow: 0 -8px 24px -18px rgba(28, 24, 48, .25);
  }
  html body.omu-interface-v2 .mn-bottom .omu-mobile-bottom-nav__inner { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 0 !important; padding: 4px 0 !important; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__item {
    position: relative; display: flex !important; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
    min-height: 56px; padding: 0 2px; border-radius: 14px;
    color: #6c6b74 !important; font: 650 10.5px/1.1 var(--nv-font) !important; letter-spacing: -.02em !important;
    text-decoration: none; -webkit-tap-highlight-color: transparent;
  }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__item svg { width: 22px !important; height: 22px !important; stroke-width: 1.8; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__item[aria-current="page"] { color: var(--nv-key-ink) !important; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__item[aria-current="page"] .omu-mobile-bottom-nav__icon::after {
    content: ""; position: absolute; left: 50%; bottom: -5px; width: 4px; height: 4px; margin-left: -2px; border-radius: 50%; background: var(--nv-key);
  }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__item:active .omu-mobile-bottom-nav__icon { transform: scale(.92); }
  html body.omu-interface-v2 .mn-bottom .omu-mobile-bottom-nav__icon { position: relative; display: grid; place-items: center; transition: transform .15s; }
  /* studio/css/omu-design-system.css fixes the icon box at 23×23; the 만들기 pill is taller, so let it size itself. */
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__create .omu-mobile-bottom-nav__icon { width: auto; height: auto; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__create .mn-bottom__fab {
    display: grid; place-items: center; width: 50px; height: 32px; border-radius: 12px;
    background-color: var(--nv-key); background-image: linear-gradient(135deg, var(--nv-key), var(--nv-key-2));
    color: #fff; box-shadow: 0 8px 16px -9px rgba(var(--nv-key-rgb), .95), inset 0 1px 0 rgba(255, 255, 255, .25);
  }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__create .mn-bottom__fab svg { width: 20px !important; height: 20px !important; stroke-width: 2.2; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__create[aria-current="page"] .omu-mobile-bottom-nav__icon::after { bottom: -6px; }
  html body.omu-interface-v2 .mn-bottom a.mn-bottom__create[aria-expanded="true"] .mn-bottom__fab { transform: rotate(45deg); }
  html body.omu-interface-v2 .mn-bottom .mn-bottom__fab { transition: transform .25s var(--nv-ease); }
}

/* ---------------------------------------------------------------------
   3. 만들기 sheet (mobile, bottom sheet dialog)
   --------------------------------------------------------------------- */
#omuCreateSheet {
  box-sizing: border-box; position: fixed; inset: auto 0 0 0;
  width: 100%; max-width: 560px; max-height: min(90dvh, 780px); margin: 0 auto;
  padding: 0; border: 0; border-radius: 26px 26px 0 0;
  background: #fff; color: var(--nv-text); font-family: var(--nv-font);
  box-shadow: 0 -24px 64px rgba(20, 14, 48, .22); overflow: hidden;
}
#omuCreateSheet[open] { display: flex; flex-direction: column; animation: mnSheetUp .32s var(--nv-ease); }
#omuCreateSheet::backdrop { background: rgba(20, 16, 40, .44); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
#omuCreateSheet *, #omuUnifiedPublicMenu .mn-wrap * { box-sizing: border-box; }
#omuCreateSheet .mn-sheet__grab { flex: none; width: 40px; height: 5px; margin: 8px auto 0; border-radius: 3px; background: #dddce3; }
#omuCreateSheet .mn-sheet__head { flex: none; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; padding: 12px 20px 8px; }
#omuCreateSheet .mn-sheet__head h2 { margin: 0; font: 800 21px/1.3 var(--nv-font); letter-spacing: -.035em; color: var(--nv-text); }
#omuCreateSheet .mn-sheet__head p { margin: 3px 0 0; font: 520 12.5px/1.45 var(--nv-font); color: var(--nv-text-3); }
#omuCreateSheet .mn-sheet__close { flex: none; display: grid; place-items: center; width: 40px; height: 40px; border: 0; border-radius: 50%; background: var(--nv-fill); color: var(--nv-text-2); cursor: pointer; }
#omuCreateSheet .mn-sheet__body { overflow-y: auto; overscroll-behavior: contain; padding: 6px 16px calc(20px + env(safe-area-inset-bottom)); }

@keyframes mnSheetUp { from { transform: translateY(40px); opacity: .4; } to { transform: translateY(0); opacity: 1; } }

/* ---------------------------------------------------------------------
   4. Shared sheet/menu components (.mn-*)
   --------------------------------------------------------------------- */
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; align-items: center; gap: 14px; padding: 16px;
  border-radius: 20px; text-decoration: none; color: #fff;
  background-color: var(--nv-key); background-image: linear-gradient(135deg, var(--nv-key) 0%, var(--nv-key-2) 100%);
  box-shadow: 0 14px 28px -16px rgba(var(--nv-key-rgb), .9), inset 0 1px 0 rgba(255, 255, 255, .2);
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero::before { content: ""; position: absolute; z-index: -1; right: -40px; top: -50px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 255, 255, .3), rgba(255, 255, 255, 0) 68%); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__ico { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: rgba(255, 255, 255, .2); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .26); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__ico svg { width: 24px; height: 24px; color: #fff; stroke-width: 1.9; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__text { min-width: 0; flex: 1; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero strong { display: block; font: 800 17px/1.25 var(--nv-font); letter-spacing: -.03em; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero small { display: block; margin-top: 3px; font: 520 12px/1.4 var(--nv-font); color: rgba(255, 255, 255, .86); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__chips { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 9px; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__chips span { padding: 3px 8px; border-radius: 999px; background: rgba(255, 255, 255, .17); font: 600 10.5px/1.35 var(--nv-font); color: #fff; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero__go { flex: none; width: 20px; height: 20px; opacity: .9; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-hero[aria-current="page"] { box-shadow: 0 0 0 2px #fff, 0 0 0 4px rgba(var(--nv-key-rgb), .3); }

:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec { margin: 22px 0 0; padding: 0; overflow: visible; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head { display: flex; align-items: center; gap: 6px; margin: 0 2px 10px; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec .mn-sec__head .mn-h { margin: 0; font: 780 14.5px/1.3 var(--nv-font) !important; letter-spacing: -.025em !important; color: var(--nv-text) !important; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head > svg { width: 16px; height: 16px; color: #f2a516; fill: rgba(242, 165, 22, .18); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head small { margin-left: auto; font: 520 11.5px/1.3 var(--nv-font); color: var(--nv-text-3); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head .omu-menu-member-badge,
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head .am-member-badge { margin-left: auto; display: inline-flex; align-items: center; gap: 3px; min-height: 22px; padding: 2px 8px 2px 6px; border: 0; border-radius: 999px; background: var(--nv-fill); color: var(--nv-text-2); font: 650 11px/1.3 var(--nv-font); white-space: nowrap; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head .omu-menu-member-badge svg,
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-sec__head .am-member-badge svg { width: 13px; height: 13px; }

/* 스페셜 tiles */
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile {
  position: relative; isolation: isolate; overflow: hidden;
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: 124px; padding: 14px 14px 13px; border-radius: 20px;
  background: var(--tone-soft); color: var(--nv-text); text-decoration: none;
  box-shadow: inset 0 0 0 1px var(--tone-soft-2);
  transition: transform .18s var(--nv-ease);
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile::after {
  content: ""; position: absolute; z-index: -1; right: -28px; bottom: -34px; width: 104px; height: 104px; border-radius: 50%;
  background: radial-gradient(circle, color-mix(in srgb, var(--tone-a) 38%, transparent), transparent 70%);
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile:active { transform: scale(.98); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile__ico {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 10px; border-radius: 14px;
  background: linear-gradient(145deg, var(--tone-a), var(--tone-b)); color: #fff;
  box-shadow: 0 8px 16px -9px var(--tone-b), inset 0 1px 0 rgba(255, 255, 255, .4);
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile__ico svg { width: 22px; height: 22px; stroke-width: 1.9; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile strong { font: 780 15.5px/1.25 var(--nv-font); letter-spacing: -.03em; color: var(--nv-text); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile small { font: 560 12px/1.35 var(--nv-font); color: var(--tone-ink); word-break: keep-all; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile__badge { position: absolute; top: 13px; right: 12px; padding: 2px 7px; border-radius: 999px; background: #fff; color: var(--tone-ink); font: 820 10px/1.4 var(--nv-font); font-style: normal; letter-spacing: .04em; box-shadow: 0 0 0 1px var(--tone-soft-2); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-tile[aria-current="page"] { box-shadow: inset 0 0 0 2px var(--tone-b); }

/* 내 목소리 음반 steps */
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 0; padding: 0; list-style: none; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-steps a {
  display: flex; align-items: center; gap: 10px; min-height: 58px; padding: 10px 12px;
  border-radius: 16px; background: #f6f5f9; color: var(--nv-text); text-decoration: none;
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-steps a:active { background: var(--nv-fill-2); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-step__no { display: grid; place-items: center; flex: none; width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--nv-key-ink); box-shadow: 0 0 0 1.5px var(--nv-key-soft-2); font: 820 12px/1 var(--nv-font); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-step__text { min-width: 0; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-step__text strong { display: block; font: 720 14px/1.25 var(--nv-font); letter-spacing: -.025em; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-step__text small { display: block; margin-top: 2px; font: 520 11.5px/1.3 var(--nv-font); color: var(--nv-text-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-steps a[aria-current="page"] { background: var(--nv-key-soft); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-steps a[aria-current="page"] .mn-step__no { background: var(--nv-key); color: #fff; box-shadow: none; }

/* Rows */
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-rows { display: flex; flex-direction: column; margin: 0; padding: 0; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-row {
  display: flex !important; align-items: center; gap: 12px; min-height: 50px; padding: 10px 4px !important;
  border-bottom: 1px solid var(--nv-line); color: var(--nv-text) !important; text-decoration: none;
  font: 580 15px/1.3 var(--nv-font) !important; letter-spacing: -.02em;
}
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-rows > :last-child { border-bottom: 0; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-row svg { width: 20px; height: 20px; flex: none; color: var(--nv-key-ink); }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-row i { margin-left: auto; font-style: normal; font-size: 20px; font-weight: 300; color: #a3a2ab; }
:is(#omuCreateSheet, #omuUnifiedPublicMenu) .mn-row[aria-current="page"] { color: var(--nv-key-ink) !important; font-weight: 720 !important; }

/* 듣기 feature cards (menu) */
#omuUnifiedPublicMenu .mn-listen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 4px; }
#omuUnifiedPublicMenu .mn-listen a {
  position: relative; display: flex !important; flex-direction: column; align-items: flex-start; gap: 2px;
  padding: 14px 13px 13px !important; border-radius: 18px; background: #f6f5f9; color: var(--nv-text) !important; text-decoration: none;
}
#omuUnifiedPublicMenu .mn-listen a:first-child { background: var(--nv-key-soft); color: var(--nv-key-ink) !important; }
#omuUnifiedPublicMenu .mn-listen svg { width: 22px; height: 22px; margin-bottom: 10px; color: var(--nv-key-ink); }
#omuUnifiedPublicMenu .mn-listen strong { font: 760 15px/1.25 var(--nv-font); letter-spacing: -.03em; }
#omuUnifiedPublicMenu .mn-listen small { font: 520 11.5px/1.3 var(--nv-font); color: var(--nv-text-3); }

/* Menu shell overrides for the new body */
#omuUnifiedPublicMenu .mn-wrap { padding-bottom: 6px; }
#omuUnifiedPublicMenu .mn-wrap > .mn-sec:first-child { margin-top: 4px; }
#omuUnifiedPublicMenu .mn-join { margin: 22px 0 0; padding: 16px; border-radius: 18px; background: linear-gradient(135deg, var(--nv-key-soft), #fff4fa); }
#omuUnifiedPublicMenu .mn-join strong { display: block; font: 760 15px/1.35 var(--nv-font); letter-spacing: -.03em; color: var(--nv-text); }
#omuUnifiedPublicMenu .mn-join p { margin: 5px 0 12px; font: 520 12px/1.6 var(--nv-font); color: var(--nv-text-2); word-break: keep-all; }
#omuUnifiedPublicMenu .mn-join a { display: flex !important; align-items: center; justify-content: space-between; min-height: 46px; padding: 0 16px !important; border-radius: 14px; background-color: var(--nv-key); background-image: linear-gradient(135deg, var(--nv-key), var(--nv-key-2)); color: #fff !important; font: 700 14px/1 var(--nv-font); text-decoration: none; }

:is(#omuCreateSheet, #omuUnifiedPublicMenu) :is(a, button):focus-visible { outline: 2px solid var(--nv-key); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  #omuCreateSheet[open] { animation: none; }
  html.omu-am .am-side .am-side__hero, html.omu-am .am-side .am-side__hero-go, .mn-bottom .mn-bottom__fab { transition: none !important; }
}