/* Initial Storybook manager mapping from ui_viz. Manager-only; not runtime theme tokens. */
:root {
  --font-family-base: 'Noto Sans KR', 'Malgun Gothic', sans-serif;
  --hm-green-default: #123328;
  --hm-green-light-1: #205241;
  --hm-green-light-2: #266651;
  --hm-green-light-3: #249473;
  --hm-fg-on-green-secondary: #BDDFD4;
  --color-fg-on-green-primary: #FFFFFF;
  --color-action-primary: #123328;
  --color-action-accent-on-green: #FFC600;
  --color-bg-content: #F5F0E5;
  --color-bg-surface: #FFFFFF;
  --effect-text-border-color: rgba(0, 0, 0, .3);
  --overlay-black-20: rgba(0, 0, 0, .2);
  --overlay-black-30: rgba(0, 0, 0, .3);
}
/* Storybook 10.6 manager only. Source: docs/patterns/dashboard-composition.md §6.
   The 18px join / inset geometry follows the current LNB specimen, not a new token. */
@font-face {
  font-family: 'Hanmac Manager Noto Sans KR';
  src: url('/fonts/NotoSansKR-variable.ttf') format('truetype');
  font-weight: 100 900;
  font-display: swap;
}
/* Manager-only alias of the bundled Noto Sans KR asset, followed by the
   Foundation fallback chain (typography.css) instead of a bare sans-serif. */
:root {
  --hm-manager-font: 'Hanmac Manager Noto Sans KR', var(--font-family-base);
}

/* The Storybook layout panel, outside the sidebar landmark, has a separate
   border. Removing only the landmark's border leaves a one-device-pixel seam. */
#root div:has(> div > #storybook-sidebar-region) {
  border-right: 0;
}

#storybook-sidebar-region {
  --hm-manager-join: 18px;
  color: var(--color-fg-on-green-primary);
  background: linear-gradient(90deg,
    var(--hm-green-default) 0%, var(--hm-green-light-1) 30%,
    var(--hm-green-light-2) 50%, var(--hm-green-light-3) 90%,
    var(--hm-green-light-2) 100%);
  border-right: 0;
  font-family: var(--hm-manager-font);
}
#storybook-sidebar-region [data-radix-scroll-area-content] > div {
  padding: 28px 0 28px 20px;
}
/* Keep the native draggable scrollbar in the unused left gutter. The selected
   item must reach the content edge without a scroll thumb crossing its curves.
   Radix supplies left/right inline, so only those two positions need priority. */
#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] {
  left: 4px !important;
  right: auto !important;
  width: 6px;
  padding: 0;
}
#storybook-sidebar-region > [scrollbarsize] > [data-orientation='vertical'] > div {
  background: var(--hm-fg-on-green-secondary);
}
#storybook-sidebar-region .sidebar-header {
  margin: 0 20px 24px 0;
  padding: 0;
  color: var(--color-fg-on-green-primary);
}
#storybook-sidebar-region .sidebar-header > div a {
  color: var(--color-fg-on-green-primary);
  font: 700 20px/30px var(--hm-manager-font);
  white-space: normal;
  /* §6 Text Border: brand title keeps the original 1px (no shadow). */
  -webkit-text-stroke: 1px var(--effect-text-border-color);
  paint-order: stroke fill;
}
#storybook-sidebar-region .sidebar-header button {
  color: inherit;
}
#storybook-sidebar-region [role='search'] {
  margin-right: 20px;
  margin-bottom: 24px;
}
#storybook-sidebar-region .search-field {
  min-height: 44px;
  border: 1px solid var(--hm-fg-on-green-secondary);
  border-radius: 4px;
  background: var(--color-bg-surface);
  color: var(--color-action-primary);
}
#storybook-explorer-searchfield {
  color: var(--color-action-primary);
  font-family: inherit;
  font-size: 14px;
}
#storybook-sidebar-region [role='search'] > button {
  color: var(--color-fg-on-green-primary);
  background: transparent;
  border-color: var(--hm-fg-on-green-secondary);
  min-width: 32px;
  height: 44px;
}
#storybook-sidebar-region [role='search'] > button:hover {
  background: rgba(0, 0, 0, .10);
}
/* Storybook's named creation action only; search/filter remain available. */
#storybook-sidebar-region button[aria-label='Create a new story'] { display: none; }

#storybook-explorer-tree .sidebar-subheading {
  position: relative;
  margin: 0;
  padding: 0 20px 0 0;
  min-height: 56px;
  color: var(--hm-fg-on-green-secondary);
}
#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0']) {
  margin-top: 40px;
}
#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0'])::before {
  content: '';
  position: absolute;
  top: -20px;
  left: 0;
  right: 20px;
  height: 2px;
  background: linear-gradient(var(--overlay-black-30) 0 50%, rgba(255,255,255,.4) 50% 100%);
  mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
}
#storybook-explorer-tree .sidebar-subheading > button {
  min-height: 56px;
  color: inherit;
  font: 700 16px/28px var(--hm-manager-font);
  letter-spacing: 0;
  text-transform: none;
}
#storybook-explorer-tree .sidebar-item {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 56px;
  overflow: visible;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--color-fg-on-green-primary);
}
/* Manager-only expanded 2-depth branch face: Black 8%, independent of HM LNB CSS.
   The separate Black 20% mapping remains reserved for the selected item's inset depth. */
#storybook-explorer-tree .sidebar-item[data-hm-group='true'] {
  background: rgba(0, 0, 0, .08);
  box-shadow: inset 1px 0 var(--hm-green-light-2);
}
#storybook-explorer-tree .sidebar-item[data-hm-group-start='true'] {
  border-radius: 8px 0 0 0;
  box-shadow: inset 1px 1px var(--hm-green-light-2);
}
#storybook-explorer-tree .sidebar-item[data-hm-group-end='true'] {
  border-radius: 0 0 0 8px;
  padding-bottom: 8px;
  box-shadow: inset 1px -1px var(--hm-green-light-2);
}
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 56px;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 14px 32px 14px 18px;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: transparent;
  color: inherit;
  font: 700 18px/28px var(--hm-manager-font);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
#storybook-explorer-tree .sidebar-item[data-hm-depth='2'] > :is(a[id], button[id]:not([data-testid])) {
  margin-left: 32px;
  width: calc(100% - 32px);
}
#storybook-explorer-tree .sidebar-item[data-hm-depth='3'] > :is(a[id], button[id]:not([data-testid])),
#storybook-explorer-tree .sidebar-item[data-hm-depth='4'] > :is(a[id], button[id]:not([data-testid])) {
  margin-left: 44px;
  width: calc(100% - 44px);
}
#storybook-explorer-tree .hm-manager-label {
  min-width: 0;
  white-space: normal;
  word-break: keep-all;
  overflow-wrap: anywhere;
  overflow: visible;
  text-overflow: clip;
}
/* D-093 D-014 (§6 Text Border): non-selected labels, including hover and the
   yellow current parent, use the specimen's 1.5px border plus lower shadow.
   Thickness and offset are REVIEW VALUEs. Selected labels carry no effect. */
#storybook-explorer-tree .sidebar-item[data-selected='false'] .hm-manager-label {
  -webkit-text-stroke: 1.5px var(--effect-text-border-color);
  paint-order: stroke fill;
  text-shadow: 1px 2px 1px var(--effect-text-border-color);
}
/* The group chevron carries the same lower shadow (specimen .ref-sidebar-chevron). */
#storybook-explorer-tree .sidebar-item[data-selected='false'] > button[id]:not([data-testid]) > div:first-child > div > svg {
  filter: drop-shadow(1px 2px 1px var(--effect-text-border-color));
}
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child {
  position: static;
  flex: 0 0 auto;
  margin: 0;
  gap: 8px;
}
/* Storybook 10.6.1: the leading wrapper has a direct svg[type] for every
   menu type (group/component/story/docs), plus a nested untyped chevron
   only on expandable rows. Remove type glyphs at every depth. */
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child > svg[type] {
  display: none;
}
/* Leaves have no chevron. Remove the now-empty wrapper as a flex item so
   neither its width nor the row's flex gap reserves an icon slot.
   The existing depth margins and row padding still supply hierarchy indent. */
#storybook-explorer-tree .sidebar-item > :is(a[id], button[id]:not([data-testid])) > div:first-child:has(> svg[type]):not(:has(> div > svg)) {
  display: none;
}
/* First-depth leaves still sit inside their root label after losing the icon
   slot. Deeper rows retain their existing 32px / 44px depth margins. */
#storybook-explorer-tree .sidebar-item[data-hm-depth='1'] > :is(a[id], button[id]:not([data-testid])):has(> div:first-child > svg[type]):not(:has(> div:first-child > div > svg)) {
  padding-left: 32px;
}
#storybook-explorer-tree .sidebar-item[data-hm-current-parent='true'],
#storybook-explorer-tree .sidebar-subheading[data-hm-current-parent='true'] {
  color: var(--color-action-accent-on-green);
}
#storybook-explorer-tree .sidebar-item[data-selected='false'] > :is(a[id], button[id]:not([data-testid])):hover {
  background: rgba(0, 0, 0, .10);
}
#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id] {
  z-index: 1;
  background: var(--color-bg-content);
  color: var(--color-action-primary);
  border-radius: 8px 0 0 8px;
}
/* Keep the keyboard skip link without reserving a 1px flex column.
   That column exposed the green branch background at the selected item's end. */
#storybook-explorer-tree .sidebar-item > a[href='#storybook-preview-wrapper'] {
  position: absolute;
  right: 0;
  z-index: 4;
}
#storybook-explorer-tree .sidebar-item[data-selected='true'] > a[id]::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  box-shadow: inset 6px 0 8px -5px var(--overlay-black-30),
    inset 0 3px 5px -3px var(--overlay-black-20),
    inset 0 -2px 4px -3px var(--overlay-black-20);
  mask-image: linear-gradient(90deg, #000 75%, transparent 100%);
}
#storybook-explorer-tree .sidebar-item[data-selected='true']::before,
#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
  content: '';
  position: absolute;
  right: 0;
  width: var(--hm-manager-join);
  height: var(--hm-manager-join);
  z-index: 2;
  pointer-events: none;
}
#storybook-explorer-tree .sidebar-item[data-selected='true']::before {
  bottom: 100%;
  background: radial-gradient(circle at top left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
}
#storybook-explorer-tree .sidebar-item[data-selected='true']::after {
  top: 100%;
  background: radial-gradient(circle at bottom left, transparent calc(var(--hm-manager-join) - .5px), var(--color-bg-content) var(--hm-manager-join));
}
#storybook-explorer-tree .sidebar-item[data-selected='true'][data-hm-group-end='true']::after {
  top: calc(100% - 8px);
}
/* Auxiliary status/create actions are separate from selected row geometry.
   Hide only these controls; the Story link and native group toggles stay intact. */
#storybook-explorer-tree .sidebar-item[data-selected='true'] > :is([data-testid='tree-change-status-button'], [data-testid='context-menu']) {
  display: none;
}
#storybook-explorer-tree [data-testid='context-menu'] {
  color: inherit;
  right: 4px;
}
/* Storybook gives utility buttons an opaque background and a 5px halo.
   Keep their native behavior, with the same transparent / black-10% LNB states. */
#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action) {
  background: transparent;
  box-shadow: none;
}
#storybook-explorer-tree :is([data-testid='context-menu'], .sidebar-subheading-action):is(:hover, [aria-expanded='true']) {
  background: rgba(0, 0, 0, .10);
  box-shadow: none;
}
#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] {
  z-index: 3;
  color: var(--color-action-primary);
}
#storybook-explorer-tree .sidebar-item[data-selected='true'] > [data-testid='context-menu'] svg {
  color: var(--color-action-primary);
}
/* Keep the manager preview frame flush without consuming iframe width. */
main:has(#storybook-preview-wrapper) {
  border-left: 0;
}

@media (prefers-reduced-motion: reduce) {
  #storybook-sidebar-region * { scroll-behavior: auto; }
}