/* 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.
   2026-11-13 compact 180px LNB: 14px side gutters, 40px / 36px rows, 6px selected radius and a 12px join
   (was 18px, the LNB specimen value) so the curves stay in proportion to the narrower column. 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: 12px;
  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: 20px 0 20px 14px;
}
/* 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 14px 0px 0;
  padding: 0;
  color: var(--color-fg-on-green-primary);
}
/* The Settings button is hidden, so the title uses the full header width. */
#storybook-sidebar-region .sidebar-header > div { margin-right: 0; }
#storybook-sidebar-region .sidebar-header > div a {
  /* 2026-11-13: centred on the 180px LNB (the header box is already symmetric, 14px each side);
     Storybook's -4px link inline margin is dropped so the link spans exactly that box. */
  justify-content: center;
  margin-inline: 0;
  color: var(--color-fg-on-green-primary);
  font: 700 16px/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;
}
#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 Settings menu trigger only; sidebar search, tag filter and expand/collapse remain. */
#storybook-sidebar-region .sidebar-header button[aria-label='Settings'] { display: none; }
/* Storybook sidebar search landmark (input, icon, shortcut hint, tag filter); the tree and header remain. */
#storybook-sidebar-region [role='search'] { display: none; }

#storybook-explorer-tree .sidebar-subheading {
  position: relative;
  margin: 0;
  padding: 0 14px 0 0;
  min-height: 40px;
  color: var(--hm-fg-on-green-secondary);
}
#storybook-explorer-tree .sidebar-subheading[data-hm-section]:not([data-hm-section='0']) {
  margin-top: 0;
}
/* 2026-11-13: the divider above each group was removed. */
#storybook-explorer-tree .sidebar-subheading > button {
  min-height: 40px;
  color: inherit;
  font: 700 14px/24px var(--hm-manager-font);
  letter-spacing: 0;
  text-transform: none;
}
#storybook-explorer-tree .sidebar-item {
  position: relative;
  margin: 0;
  padding: 0;
  min-height: 40px;
  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: 6px 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 6px;
  padding-bottom: 6px;
  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: 8px;
  min-height: 40px;
  height: auto;
  width: 100%;
  margin: 0;
  padding: 8px 14px 8px 10px;
  border: 0;
  border-radius: 4px 0 0 4px;
  background: transparent;
  color: inherit;
  font: 700 14px/24px var(--hm-manager-font);
  text-align: left;
  text-decoration: none;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}
/* Sub rows (depth 2+): 36px (6px + 24px line + 6px), shorter than the 40px top-level rows (2026-11-13 compact 180px LNB). */
#storybook-explorer-tree .sidebar-item:is([data-hm-depth='2'], [data-hm-depth='3'], [data-hm-depth='4']) {
  min-height: 36px;
}
#storybook-explorer-tree .sidebar-item:is([data-hm-depth='2'], [data-hm-depth='3'], [data-hm-depth='4']) > :is(a[id], button[id]:not([data-testid])) {
  min-height: 36px;
  padding-block: 6px;
}
#storybook-explorer-tree .sidebar-item[data-hm-depth='2'] > :is(a[id], button[id]:not([data-testid])) {
  margin-left: 26px;
  width: calc(100% - 26px);
}
#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: 36px;
  width: calc(100% - 36px);
}
/* Menu item labels and section heading labels (.sidebar-subheading) are both 14px / 700. */
#storybook-explorer-tree .sidebar-item .hm-manager-label {
  font-size: 14px;
}
#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.
   Section heading labels (Foundation, Components, ...) share this exact rule. */
#storybook-explorer-tree .sidebar-item[data-selected='false'] .hm-manager-label,
#storybook-explorer-tree .sidebar-subheading .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 26px / 36px 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: 26px;
}
#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: 6px 0 0 6px;
}
/* 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% - 6px);
}
/* 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; }
}