::view-transition-group(*),
::view-transition-old(*),
::view-transition-new(*) { animation: none; }

html[data-page-reveal-pending]::view-transition-new(root) { visibility: hidden; }

html {
  scrollbar-gutter: stable;
  scroll-padding-block-start: var(--header-block-size);
  /* 모든 스크롤 영역이 손잡이 색과 투명한 트랙을 상속한다. */
  scrollbar-color: rgb(var(--color-gray-200)) transparent;
}

body {
  display: grid;
  grid-template-rows: auto minmax(0, 1fr);
  grid-template-columns: minmax(0, 1fr);
  color: rgb(var(--color-gray-900));
  font-family: var(--font-family-sans);
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.session-loading {
  display: none;
}

html[data-session-pending]:not([data-header-preview]) :is(.header-login, .header-account-toggle) {
  visibility: hidden;
}

html[data-session-pending] .session-loading {
  display: block;
}

.session-recovery {
  align-items: flex-start;
}

.session-recovery .button {
  min-height: var(--size-control-md);
  height: auto;
  white-space: normal;
}

::selection {
  background: rgb(var(--color-gray-200));
  color: rgb(var(--color-gray-900));
}

::placeholder {
  color: rgb(var(--color-gray-300));
}

.site-header {
  position: sticky;
  inset-block-start: 0;
  grid-row: 1;
  width: 100%;
  padding-inline: calc((100% - var(--layout-frame-inline-size)) / 2);
}

.site-main {
  grid-row: 2;
  display: grid;
  grid-template-columns: var(--layout-menu-reserved-inline-size) minmax(0, 1fr);
}

.site-content {
  justify-self: center;
  width: var(--layout-frame-inline-size);
}

.site-content {
  min-width: 0;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  gap: var(--layout-section-gap);
  padding-block: var(--content-padding-block);
}

.site-main > .site-content { grid-row: 1; grid-column: 2; width: calc(100% - var(--layout-gutter-inline) - var(--layout-gutter-inline)); max-width: calc(var(--layout-content-inline-size-max) - var(--layout-gutter-inline) - var(--layout-gutter-inline)); }

.site-content:has(.category-bar) {
  padding-block: 0;
  gap: 0;
}

.category-content {
  min-width: 0;
  padding-block: var(--content-padding-block);
}

.category-content:has(> .empty-state:not([hidden])) {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.empty-state {
  display: flex;
  flex-direction: column;
  flex: 1;
  align-items: center;
  justify-content: center;
  min-width: 0;
  gap: var(--space-md);
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-md);
  line-height: var(--font-line-height-md);
  text-align: center;
  overflow-wrap: anywhere;
}

.page-heading {
  display: grid;
  gap: var(--space-sm);
  max-width: var(--layout-reading-inline-size-max);
}

.page-heading h1 {
  font-size: var(--font-size-2xl);
  line-height: var(--font-line-height-2xl);
}

.page-eyebrow {
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-sm);
}

.primary {
  background: var(--gradient-primary-vertical);
  color: rgb(var(--color-gray-900));
}

.page-note {
  color: rgb(var(--color-gray-500));
  font-size: var(--font-size-sm);
  line-height: var(--font-line-height-sm);
}

.section-title {
  margin-block-end: var(--space-2xl);
  font-size: var(--font-size-lg);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-line-height-lg);
}

@media (min-width: 48rem) {
.section-title {
    font-size: var(--font-size-xl);
    line-height: var(--font-line-height-xl);
  }
}

.inner-glow {
  position: relative;
  isolation: isolate;
}

.inner-glow::before {
  content: "";
  position: absolute;
  z-index: var(--z-index-background);
  inset: 0;
  border-radius: inherit;
  corner-shape: inherit;
  box-shadow:
    inset 0 var(--inner-glow-depth-top) calc(var(--inner-glow-depth-top) * 2) calc(var(--inner-glow-depth-top) * -1) var(--inner-glow-color-start),
    inset calc(var(--inner-glow-depth-right) * -1) 0 calc(var(--inner-glow-depth-right) * 2) calc(var(--inner-glow-depth-right) * -1) var(--inner-glow-color-end),
    inset 0 calc(var(--inner-glow-depth-bottom) * -1) calc(var(--inner-glow-depth-bottom) * 2) calc(var(--inner-glow-depth-bottom) * -1) var(--inner-glow-color-end),
    inset var(--inner-glow-depth-left) 0 calc(var(--inner-glow-depth-left) * 2) calc(var(--inner-glow-depth-left) * -1) var(--inner-glow-color-start),
    inset 0 0 var(--space-xs) var(--inner-glow-color-end);
  pointer-events: none;
}

.inner-glow--hover:not(:hover, :focus-visible)::before {
  content: none;
}

.text-shadow { text-shadow: var(--shadow-text); }

.skip-link {
  position: fixed;
  top: var(--space-xs);
  left: var(--space-xs);
  z-index: var(--z-index-skip-link);
  padding: var(--space-xs) var(--space-md);
  border-radius: var(--radius-md);
  background: rgb(var(--color-gray-900));
  color: rgb(var(--color-gray-100));
  transform: translateY(calc(-100% - var(--space-md)));
}

.skip-link:focus {
  transform: translateY(0);
}

.sr-only {
  position: absolute;
  width: var(--line-width-default);
  height: var(--line-width-default);
  margin: 0;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}