:root {
  /* color */
  --neutral-black: #000000;
  --neutral-gray-100: #e5e5e5;
  --neutral-gray-200: #cccccc;
  --neutral-gray-300: #b2b2b2;
  --neutral-gray-400: #999999;
  --neutral-gray-420: #949494;
  --neutral-gray-50: #f2f2f2;
  --neutral-gray-500: #7f7f7f;
  --neutral-gray-536: #767676;
  --neutral-gray-600: #666666;
  --neutral-gray-700: #4c4c4c;
  --neutral-gray-800: #333333;
  --neutral-gray-900: #191919;
  --neutral-white: #ffffff;
  --primitive-indigo-50: #e6edf5;
  --primitive-indigo-100: #ccdcea;
  --primitive-indigo-200: #99b8d5;
  --primitive-indigo-250: #80a6cb;
  --primitive-indigo-300: #6695c1;
  --primitive-indigo-400: #3371ac;
  --primitive-indigo-500: #004e97;
  --primitive-indigo-600: #003e79;
  --primitive-indigo-700: #002f5b;
  --primitive-indigo-800: #001f3c;
  --primitive-indigo-900: #00101e;

  --semantic-fill-brand-primary-light: var(--primitive-indigo-50);
  --semantic-fill-primary: var(--neutral-gray-50);
  --semantic-fill-brand-primary: var(--primitive-indigo-500);
  --semantic-fill-on-accent: var(--neutral-white);
  --semantic-stroke-primary: var(--neutral-gray-200);
  --semantic-stroke-brand-primary: var(--primitive-indigo-500);
  --semantic-text-primary: var(--neutral-black);
  --semantic-text-secondary: var(--neutral-gray-700);
  --semantic-text-brand-primary: var(--primitive-indigo-500);

  --icon-arrow-right-circle: url(/share_refact/images/sonota/icon-arrow-right-circle.svg);
  --icon-arrow-right-fill-circle: url(/share_refact/images/sonota/icon-arrow-right-fill-circle.svg);
}



:where(main, .sb-show-main, .category-navigation, .bottom-local-nav) > *:not(dialog), nav:has(> .breadcrumb) {
  width: var(--content-max-width);
  padding-inline: var(--content-side-space);
  margin-inline: auto;
}

:where(:root, :host, sa-theme[data-theme]) {
  --container-actual-width: 990px;
  --content-side-space: var(--spacing-5-px);
  --content-max-width: min(100%, 1030px);

  /* border */
  --border-width-level-1: 1px;
  --border-width-default: var(--border-width-level-1);
  --border-width-level-2: 2px;
  --border-width-level-3: 4px;

  /* font */
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-size-10: 0.625rem;
  --font-size-11: 0.6875rem;
  --font-size-12: 0.75rem;
  --font-size-13: 0.8125rem;
  --font-size-14: 0.875rem;
  --font-size-15: 0.9375rem;
  --font-size-16: 1rem;
  --font-size-17: 1.0625rem;
  --font-size-18: 1.125rem;
  --font-size-19: 1.1875rem;
  --font-size-20: 1.25rem;
  --font-size-24: 1.5rem;
  --font-size-28: 1.75rem;
  --font-size-32: 2rem;
  --font-size-36: 2.25rem;
  --font-size-40: 2.5rem;
  --font-size-44: 2.75rem;
  --font-size-48: 3rem;
  --font-size-body-xs: var(--font-size-12);
  --font-size-body-sm: var(--font-size-14);
  --font-size-body-md: var(--font-size-16);
  --font-size-button-lg: var(--font-size-16);
  --font-size-button-md: var(--font-size-16);
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --heading-level-1: var(--font-size-16);
  --heading-level-2: var(--font-size-17);
  --heading-level-3: var(--font-size-18);
  --heading-level-4: var(--font-size-20);
  --heading-level-5: var(--font-size-24);
  --heading-level-6: var(--font-size-28);
  --line-height-lg: 1.75;
  --line-height-md: 1.5;
  --line-height-sm: 1.25;
  --line-height-one: 1;

  /* radius */
  --radius-none: 0;
  --radius-xs: 2px;
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --radius-full: calc(infinity * 1px);

  /* spacing */
  --spacing-0: 0;
  --spacing-scale-0-5: 2;
  --spacing-scale-1: 4;
  --spacing-scale-2: 8;
  --spacing-scale-3: 12;
  --spacing-scale-4: 16;
  --spacing-scale-5: 20;
  --spacing-scale-6: 24;
  --spacing-scale-8: 32;
  --spacing-scale-10: 40;
  --spacing-scale-12: 48;
  --spacing-scale-14: 56;
  --spacing-scale-16: 64;
  --spacing-scale-20: 80;
  --spacing-scale-24: 96;
  --spacing-scale-28: 112;
  --spacing-scale-32: 128;

  --clamp-root-font-size: 16;
  --spacing-0: 0;
  --spacing-scale-0-5: 2;
  --spacing-scale-1: 4;
  --spacing-scale-2: 8;
  --spacing-scale-3: 12;
  --spacing-scale-4: 16;
  --spacing-scale-5: 20;
  --spacing-scale-6: 24;
  --spacing-scale-8: 32;
  --spacing-scale-10: 40;
  --spacing-scale-12: 48;
  --spacing-scale-14: 56;
  --spacing-scale-16: 64;
  --spacing-scale-20: 80;
  --spacing-scale-24: 96;
  --spacing-scale-28: 112;
  --spacing-scale-32: 128;

  --spacing-0-5: calc(var(--spacing-scale-0-5) * (1rem / var(--clamp-root-font-size))) /* 0.125rem*/;
  --spacing-1: calc(var(--spacing-scale-1) * (1rem / var(--clamp-root-font-size)));
  --spacing-2: calc(var(--spacing-scale-2) * (1rem / var(--clamp-root-font-size)));
  --spacing-3: calc(var(--spacing-scale-3) * (1rem / var(--clamp-root-font-size)));
  --spacing-4: calc(var(--spacing-scale-4) * (1rem / var(--clamp-root-font-size)));
  --spacing-5: calc(var(--spacing-scale-5) * (1rem / var(--clamp-root-font-size)) /* 1.25rem 20px */);
  --spacing-6: calc(var(--spacing-scale-6) * (1rem / var(--clamp-root-font-size)));
  --spacing-8: calc(var(--spacing-scale-8) * (1rem / var(--clamp-root-font-size)));
  --spacing-10: calc(var(--spacing-scale-10) * (1rem / var(--clamp-root-font-size)));
  --spacing-12: calc(var(--spacing-scale-12) * (1rem / var(--clamp-root-font-size)));
  --spacing-14: calc(var(--spacing-scale-14) * (1rem / var(--clamp-root-font-size)));
  --spacing-16: calc(var(--spacing-scale-16) * (1rem / var(--clamp-root-font-size)));
  --spacing-20: calc(var(--spacing-scale-20) * (1rem / var(--clamp-root-font-size)));
  --spacing-24: calc(var(--spacing-scale-24) * (1rem / var(--clamp-root-font-size)));
  --spacing-28: calc(var(--spacing-scale-28) * (1rem / var(--clamp-root-font-size)));
  --spacing-32: calc(var(--spacing-scale-32) * (1rem / var(--clamp-root-font-size)));

  --spacing-0-5-px: calc(var(--spacing-scale-0-5) * 1px);
  --spacing-1-px: calc(var(--spacing-scale-1) * 1px);
  --spacing-2-px: calc(var(--spacing-scale-2) * 1px);
  --spacing-3-px: calc(var(--spacing-scale-3) * 1px);
  --spacing-4-px: calc(var(--spacing-scale-4) * 1px);
  --spacing-5-px: calc(var(--spacing-scale-5) * 1px);
  --spacing-6-px: calc(var(--spacing-scale-6) * 1px);
  --spacing-8-px: calc(var(--spacing-scale-8) * 1px);
  --spacing-10-px: calc(var(--spacing-scale-10) * 1px);
  --spacing-12-px: calc(var(--spacing-scale-12) * 1px);
  --spacing-14-px: calc(var(--spacing-scale-14) * 1px);
  --spacing-16-px: calc(var(--spacing-scale-16) * 1px);
  --spacing-20-px: calc(var(--spacing-scale-20) * 1px);
  --spacing-24-px: calc(var(--spacing-scale-24) * 1px);
  --spacing-28-px: calc(var(--spacing-scale-28) * 1px);
  --spacing-32-px: calc(var(--spacing-scale-32) * 1px);

  --spacing-component-block: var(--spacing-1);
  --spacing-gap-stack: var(--spacing-4);
  --spacing-gap-stack-lg: var(--spacing-6);

  @media (width > 40.1rem) {
    --font-size-body-xs: var(--font-size-12);
    --font-size-body-sm: var(--font-size-14);
    --font-size-body-md: var(--font-size-16);
    --font-size-button-md: var(--font-size-16);
    --font-size-button-lg: var(--font-size-18);
    --heading-level-1: var(--font-size-16);
    --heading-level-2: var(--font-size-20);
    --heading-level-3: var(--font-size-24);
    --heading-level-4: var(--font-size-28);
    --heading-level-5: var(--font-size-32);
    --heading-level-6: var(--font-size-36);
    --spacing-component-block: var(--spacing-2);
    --spacing-gap-stack: var(--spacing-6);
    --spacing-gap-stack-lg: var(--spacing-8);
    --spacing-component-block: var(--spacing-2);
    --spacing-gap-stack: var(--spacing-6);
    --spacing-gap-stack-lg: var(--spacing-8);
  }
}

:where(main) > section, section:has(> .heading-level2, > .heading-level3), aside.box-border-with-heading[data-layout="section-layout"] {
  display: grid;
  gap: var(--spacing-gap-stack);
}

:where(section, .nested-toc) {
  .heading-level1 {
    margin-top: var(--spacing-10);

    @media screen and (min-width: 40.01em) {
      margin-top: var(--spacing-14);
    }
  }

  &:not(:first-of-type) > .heading-level1 {
    margin-top: var(--spacing-16);

    @media screen and (min-width: 40.01em) {
      margin-top: var(--spacing-28);
    }
  }
}



main {
  margin-bottom: var(--spacing-20);

  @media screen and (min-width: 40.01em) {
    margin-bottom: var(--spacing-32);
  }
}



/*---------------------------------
 component 
---------------------------------*/
.page-title {
  display: grid;
  align-content: center;
  row-gap: var(--spacing-3);
  background: var(--semantic-fill-brand-primary-light);
  min-height: 156px;
  padding: var(--spacing-5) var(--spacing-5-px);
  text-wrap: wrap;

  @media screen and (min-width: 40.01em) {
    column-gap: var(--spacing-8-px);
    max-width: var(--container-actual-width);
    min-height: 200px;
    padding: var(--spacing-8) var(--spacing-10-px);
    border-radius: var(--radius-md);
  }

  > :where(h1, h2) {
    font-size: var(--heading-level-4);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-md);
  }

  > :where(p) {
    font-size: var(--font-size-body-md);
  }

  + :where(section, div) {
    margin-top: var(--spacing-6);

    @media screen and (min-width: 40.01em) {
      margin-top: var(--spacing-10);
    }
  }
}


.heading-level1 {
  --ui-decorative-vertical-bar-inline-size: 4px;
  position: relative;
  padding: var(--spacing-4) var(--spacing-4-px);
  padding-inline-start: calc(var(--spacing-4-px) + var(--ui-decorative-vertical-bar-inline-size));
  background-color: var(--semantic-fill-primary);
  font-size: var(--heading-level-4);
  line-height: var(--line-height-md);
  font-weight: var(--font-weight-bold);
  scroll-margin-block-start: 3.75rem;

  &.heading-level1::before {
    content: "";
    display: block;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    inline-size: var(--ui-decorative-vertical-bar-inline-size);
    background-color: var(--semantic-fill-brand-primary);
  }
}



.card-grid {
  --_card-grid-columns: repeat(auto-fill, minmax(max(250px, min(300px, 25cqi)), 1fr));
  --_card-grid-gap: var(--spacing-4);
  display: grid;
  grid-template-columns: var(--_card-grid-columns);
  gap: var(--_card-grid-gap);
  list-style: none;
  padding: 0;
  margin: 0;

  @media screen and (min-width: 40.01em) {
    --_card-grid-gap: var(--spacing-8);
  }

  > li {
    display: contents;
  }
}

.card[data-direction=vertical]:has(>img) {
  grid-template-rows: auto 1fr;
}

.card {
  --card-body-padding: var(--spacing-6);
  --card-ooutline-color: var(--semantic-stroke-brand-primary);
  --_card-outline-offset: -1px;
  --_card-stroke: var(--semantic-stroke-primary);
  --card-arrow-icon: var(--icon-arrow-right-circle);
  --_card-border-width: var(--border-width-level-1);
  --_card-radius: var(--radius-lg);
  --_card-fill: var(--semantic-fill-on-accent);

  display: grid;
  grid-template-columns: minmax(0, 1fr);
  overflow: clip;
  border: var(--_card-border-width) solid var(--_card-stroke);
  border-radius: var(--_card-radius);
  background-color: var(--_card-fill);
  text-decoration: none;
  color: inherit;
  transition: border-color .2s ease;
  outline-color: var(--card-ooutline-color);
  outline-offset: var(--_card-outline-offset);
  outline-style: solid;
  outline-width: var(--card-outline-width, 0);

  > .card-body {
    --_card-body-gap: var(--spacing-2);
    display: flex;
    flex-direction: column;
    gap: var(--_card-body-gap);
    padding: var(--card-body-padding);

    > .card-arrow {
      --_card-arrow-size: 32px;
      align-self: flex-end;
      margin-block-start: auto;
      flex-shrink: 0;
      inline-size: var(--_card-arrow-size);
      block-size: var(--_card-arrow-size);
      background-image: var(--card-arrow-icon);
      background-size: contain;
      background-repeat: no-repeat;
      background-position: center;
    }
  }
}

.card[data-direction=vertical]>img {
  --_card-media-aspect: 800 / 450;
  aspect-ratio: var(--_card-media-aspect);
  inline-size: 100%;
  object-fit: cover;
}

:is(.card>.card-body)>:where(h2,h3,h4,h5) {
  --_card-title-size: var(--font-size-20);
  --_card-title-weight: var(--font-weight-bold);
  --_card-title-line-height: var(--line-height-md);
  --_card-title-color: var(--semantic-text-primary);
  font-size: var(--_card-title-size);
  font-weight: var(--_card-title-weight);
  line-height: var(--_card-title-line-height);
  letter-spacing: .02em;
  color: var(--_card-title-color);
  text-align: left;
  white-space: normal;

  @media screen and (min-width: 40.01em) {
    --_card-title-size: var(--font-size-24);
  }
}

:is(.card>.card-body)>small {
  --_card-text-size: var(--font-size-14);
  --_card-text-weight: var(--font-weight-normal);
  --_card-text-line-height: var(--line-height-md);
  --_card-text-color: var(--semantic-text-secondary);
  font-size: var(--_card-text-size);
  font-weight: var(--_card-text-weight);
  line-height: var(--_card-text-line-height);
  letter-spacing: .02em;
  color: var(--_card-text-color);
}

:is(.card>.card-body)>p {
  --_card-text-size: var(--font-size-16);
  --_card-text-weight: var(--font-weight-normal);
  --_card-text-line-height: var(--line-height-md);
  --_card-text-color: var(--semantic-text-primary);
  font-size: var(--_card-text-size);
  font-weight: var(--_card-text-weight);
  line-height: var(--_card-text-line-height);
  letter-spacing: .02em;
  color: var(--_card-text-color);
}

@media (any-hover: hover) {
  .card:where(a):hover {
    --card-arrow-icon: var(--icon-arrow-right-fill-circle);
    --card-outline-width: var(--border-width-level-2);
  }
  .card:where(a):hover>.card-body>:where(h2,h3,h4,h5) {
    --_card-title-color: var(--semantic-text-brand-primary);
    text-decoration: underline;
  }
}



:not(section) > * + .note-list {
  margin-top: var(--spacing-2);
}

.note-list {
  /* grid-area: note; */
  font-size: var(--font-size-12);
  line-height: var(--line-height-md);

   > [data-annotation] {
    --annotation-size: 1em;
    --annotation-spacing: var(--spacing-1);
    --annotation-total-width: calc(var(--annotation-size) + var(--annotation-spacing));
    padding-left: var(--annotation-total-width);
    text-indent: calc(var(--annotation-total-width) * -1);
    color: var(--semantic-text-secondary);

    &::before {
      margin-right: var(--annotation-spacing);
      content: attr(data-annotation);
    }
  }
}

.author-note {
  margin-block-start: 14px;
  font-size: var(--font-size-14);
}