/* 디자인 값은 종류별 토큰 파일에서 한 번만 정의한다. */
:root {
  color-scheme: light;
  --color-white: 255 255 255;
  --color-gray-50: 250 250 250;
  --color-gray-100: 246 246 248;
  --color-gray-200: 230 230 234;
  --color-gray-300: 191 191 191;
  --color-gray-400: 156 156 158;
  --color-gray-500: 110 110 113;
  --color-gray-900: 20 20 24;
  --color-primary-start: 81 176 248;
  --color-primary-end: 180 166 255;
  --gradient-primary-vertical: linear-gradient(to top, rgb(var(--color-primary-start)), rgb(var(--color-primary-end)));
  --color-debug-coral: 255 89 94;
  --color-debug-cyan: 0 180 216;
  --color-debug-lime: 105 190 40;
  --color-debug-violet: 139 92 246;
  --color-debug-amber: 245 158 11;
  --color-debug-magenta: 236 72 153;
  --gradient-primary-horizontal: linear-gradient(to right, rgb(var(--color-primary-start)), rgb(var(--color-primary-end)));
  --color-library-phocaccia-start: 27 67 108;
  --color-library-phocaccia-middle: 82 153 202;
  --color-library-phocaccia-end: 153 133 192;
  --gradient-library-phocaccia: linear-gradient(var(--library-background-gradient-angle), rgb(var(--color-library-phocaccia-start)), rgb(var(--color-library-phocaccia-middle)), rgb(var(--color-library-phocaccia-end)));
  --color-library-ambassador-start: 60 166 180;
  --color-library-ambassador-end: 125 182 236;
  --color-library-illustella-start: 255 208 48;
  --color-library-illustella-end: 255 160 64;
  --color-status-success: 22 128 75;
  --color-status-warning: 250 204 21;
  --color-status-error: 190 55 55;
}

:root {
  --pagination-number-box-size: 1.5rem;
  --track-background-preview-inline-size: 20.25rem;
  --table-row-block-size: 4rem;
  --table-column-inline-size-xs: 8%;
  --table-column-inline-size-sm: 12%;
  --table-column-inline-size-md: 18%;
  --table-column-inline-size-lg: 26%;
  --table-inline-size-min: 60rem;
  --server-status-table-inline-size-min: 36rem;
  --table-inline-size-max: 80rem;
}

:root {
  --inner-glow-depth-top: var(--space-sm);
  --inner-glow-depth-right: var(--space-xl);
  --inner-glow-depth-bottom: var(--space-3xl);
  --inner-glow-depth-left: var(--space-2xl);
  --inner-glow-color-start: rgb(var(--color-primary-start));
  --inner-glow-color-end: rgb(var(--color-primary-end));
  --blur-backdrop: 0.75rem;
  --shadow-text: 0 0 var(--space-2xs) rgb(var(--color-gray-900));
}

:root {
  --debug-color-opacity: 0.38;
  --navigation-background-opacity-scrolled: 0.88;
  --photo-viewer-backdrop-opacity: 0.8;
  --library-overlay-opacity: 0.8;
  --library-overview-light-opacity: 0.5;
  --library-overview-accent-opacity: 0.35;
  --opacity-disabled: 0.45;
}

:root {
  --media-video-aspect-ratio: 16 / 9;
  --banner-title-font-size: 2rem;
  --banner-title-line-height: 2.5rem;
  --banner-title-line-count: 2;
  --banner-label-gap: var(--space-md);
  --banner-block-size: 13rem;
  --banner-list-inline-size: 12rem;
  --banner-list-gap: var(--space-xs);
  --banner-autoplay-interval: 5s;
  --banner-loading-timeout: 2s;
  --banner-reveal-duration: 500ms;
}

@media (max-width: 23.99rem) {
:root {
  --banner-block-size: 14rem;
}
}

@media (min-width: 48rem) {
:root {
  --banner-block-size: 15rem;
}
}

:root {
  --dropdown-background-color: rgb(var(--color-gray-50));
  --dropdown-border-color: rgb(var(--color-gray-200));
  --dropdown-border-color-active: rgb(var(--color-gray-300));
  --dropdown-text-color: rgb(var(--color-gray-500));
  --dropdown-border-radius: var(--radius-squircle-sm);
  --dropdown-item-block-size: var(--size-control-sm);
  --dropdown-list-block-size-max: calc(var(--dropdown-item-block-size) * 8 + var(--line-width-default));
  --dropdown-padding-inline: var(--space-xs);
  --dropdown-font-size: var(--font-size-sm);
  --dropdown-line-height: var(--font-line-height-sm);
  --dropdown-font-weight: var(--font-weight-medium);
  --dropdown-font-weight-selected: var(--font-weight-bold);
  --control-field-inline-size: 20rem;
}

:root {
  --library-name-line-height: var(--font-size-2xl);
  --library-description-section-gap: var(--space-xl);
  --library-info-label-font-size: var(--font-size-md);
  --library-info-label-line-height: var(--font-line-height-md);
  --library-info-value-font-size: var(--font-size-xl);
  --library-info-value-line-height: var(--font-line-height-xl);
  --library-info-compact-inline-size: 8rem;
  --library-background-gradient-angle: 115deg;
  --library-carousel-card-inline-size: 10.5rem;
  --library-carousel-card-inline-size-max: 44%;
  --library-carousel-card-aspect-ratio: 3 / 4;
  --library-carousel-card-inactive-scale: 0.84;
  --library-carousel-transition-duration: 480ms;
  --library-category-card-inline-size: 15rem;
  --library-category-card-block-size-min: 12rem;
  --library-category-perspective: 64rem;
  --library-category-side-angle: 12deg;
  --library-background-mobile-frame-inline-size: 24.5rem;
  --library-background-frame-aspect-ratio-desktop: 16 / 9;
  --library-background-frame-aspect-ratio-mobile: 9 / 16;
  --library-image-editor-inline-size: 24rem;
  --library-image-enter-duration: 320ms;
  --library-overview-card-shadow: 0 0 var(--space-2xs) rgb(var(--color-gray-900));
  --library-overview-color-transition-duration: 800ms;
  --library-overview-light-duration-max: 12s;
  --library-overview-light-duration-min: 6s;
  --library-overview-light-easing: ease-in-out;
  --library-overview-entry-duration: 640ms;
  --library-overview-entry-stagger-delay: 100ms;
  --library-overview-hover-duration: 480ms;
  --library-overview-hover-easing: cubic-bezier(0.22, 1.8, 0.36, 1);
  --library-overview-light-scale-max: 1.04;
  --library-overview-light-sway-angle-max: 6deg;
  --library-overview-light-origin: 50% -20cqw;
  --library-overview-light-direction-angle: 180deg;
  --library-overview-light-spread-angle: 48deg;
  --library-overview-entry-distance: var(--space-4xl);
  --library-overview-entry-depth: var(--space-3xl);
  --library-overview-entry-tilt-angle: 16deg;
  --library-overview-entry-scale-start: 0.88;
  --library-overview-entry-scale-overshoot: 1.024;
}

:root {
  --font-family-sans: "Pretendard Variable", Pretendard, Inter, -apple-system,
    BlinkMacSystemFont, system-ui, "Segoe UI", "Apple SD Gothic Neo",
    "Noto Sans KR", sans-serif;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-medium: 500;
  --font-size-xs: 0.75rem;
  --font-line-height-xs: 1rem;
  --font-size-sm: 0.875rem;
  --font-line-height-sm: 1.25rem;
  --font-size-md: 1rem;
  --font-line-height-md: 1.5rem;
  --font-size-lg: 1.25rem;
  --font-line-height-lg: 1.75rem;
  --font-size-xl: 1.75rem;
  --font-line-height-xl: 2.25rem;
  --font-size-2xl: 2.5rem;
  --font-line-height-2xl: 3rem;
}

:root {
  --space-3xs: 0.125rem;
  --space-2xs: 0.25rem;
  --space-xs: 0.5rem;
  --space-sm: 0.75rem;
  --space-md: 1rem;
  --space-lg: 1.25rem;
  --space-xl: 1.5rem;
  --space-2xl: 2rem;
  --space-3xl: 3rem;
  --space-4xl: 4.5rem;
}

:root {
  --category-bar-item-gap: var(--space-md);
  --category-bar-block-size: var(--size-control-lg);
  --header-main-row-padding-block: var(--space-md);
  --header-main-row-block-size: calc(var(--size-control-md) + var(--header-main-row-padding-block) * 2);
  --header-padding-block-end: var(--header-main-row-padding-block);
  --header-menu-block-size-fallback: calc(var(--size-control-md) + var(--space-xs) + var(--font-line-height-xs));
  --header-block-size: var(--runtime-header-block-size, calc(var(--header-main-row-block-size) + var(--header-menu-block-size-fallback) + var(--header-padding-block-end) + var(--line-width-default)));
  --header-side-inline-size-min: 12rem;
  --account-panel-inline-size-max: 20rem;
  --profile-avatar-size: calc(var(--size-control-lg) * 2);
  --profile-name-line-height: round(up, var(--font-line-height-md), var(--space-2xs));
  --profile-tag-block-size: calc(var(--font-line-height-xs) + var(--space-2xs) * 2);
  --account-action-gap: var(--space-xs);
  --header-search-inline-size-max: 26rem;
  --header-avatar-size: 2rem;
  --logo-block-size: 1.5rem;
}

body {
  --account-panel-inline-size: min(var(--account-panel-inline-size-max), calc(100% - var(--space-md) - var(--space-md)));
  --account-panel-viewport-gap: var(--space-md);
}

@media (min-width: 108rem) {
body {
  --account-panel-side-space: calc((100cqw - var(--layout-content-inline-size-max) + var(--layout-gutter-inline) + var(--layout-gutter-inline) - var(--layout-menu-reserved-inline-size)) / 2);
  --account-panel-inline-size: min(var(--account-panel-inline-size-max), calc(var(--account-panel-side-space) - var(--space-md) - var(--space-md)));
  --account-panel-viewport-gap: calc((var(--account-panel-side-space) - var(--account-panel-inline-size)) / 2);
}
}

@media (max-width: 23.99rem) {
:root {
  --header-menu-block-size-fallback: calc((var(--size-control-sm) + var(--space-xs) + var(--font-line-height-xs)) * 2 + var(--space-xs));
}
}

@media (min-width: 24rem) and (max-width: 39.99rem) {
:root {
  --header-menu-block-size-fallback: calc(var(--size-control-sm) + var(--space-xs) + var(--font-line-height-xs));
}
}

:root {
  --content-padding-block: var(--space-2xl);
  --layout-content-inline-size-max: 80rem;
  --layout-reading-inline-size-max: 40rem;
  --layout-side-menu-inline-size: 15rem;
  --layout-menu-reserved-inline-size: 0rem;
  --layout-gutter-inline: var(--space-md);
  --layout-section-gap: var(--space-3xl);
  --video-grid-columns: 1;
  --creator-grid-columns: 1;
}

html {
  font-size: clamp(100%, 100vw * 3 / 320, 125%);
}

body {
  --layout-frame-inline-size: min(calc(var(--layout-content-inline-size-max) - var(--layout-gutter-inline) - var(--layout-gutter-inline)), calc(100% - var(--layout-gutter-inline) - var(--layout-gutter-inline)));
}

@media (min-width: 40rem) {
:root {
  --layout-gutter-inline: var(--space-2xl);
  --video-grid-columns: 2;
  --creator-grid-columns: 2;
}
}

@media (min-width: 48rem) {
:root {
  --video-grid-columns: 1;
  --layout-section-gap: var(--space-4xl);
}
}

@media (min-width: 64rem) {
:root {
  --layout-gutter-inline: var(--space-2xl);
  --video-grid-columns: 2;
}
}

@media (min-width: 90rem) {
:root {
  --video-grid-columns: 4;
}
}

@media (min-width: 180rem) {
:root {
  --layout-gutter-inline: var(--space-3xl);
}
}

:root {
  --download-platform-label-gap: var(--space-xs);
  --download-platform-card-block-size-min: 7.75rem;
}

:root {
  --purchase-product-inline-size: 20.25rem;
  --purchase-product-image-aspect-ratio: 81 / 122;
  --purchase-product-padding: var(--space-md);
  --purchase-product-info-gap: var(--space-2xs);
  --purchase-grid-column-gap: var(--space-sm);
  --purchase-grid-row-gap: var(--space-lg);
  --checkout-inline-size: 48rem;
  --checkout-term-inline-size: 8rem;
  --checkout-result-block-size: 22rem;
}

:root {
  --nowtalk-composer-textarea-block-size-max: 12rem;
  --nowtalk-composer-textarea-block-size-min: calc(var(--font-line-height-md) * 2 + var(--space-2xs) * 2);
  --nowtalk-detail-back-gap: var(--space-3xs);
  --nowtalk-composer-label-gap: var(--space-3xs);
  --nowtalk-attachment-remove-inset: var(--space-2xs);
  --nowtalk-list-title-gap: var(--space-2xs);
  --nowtalk-list-comment-count-gap: var(--space-3xs);
  --nowtalk-message-meta-gap: var(--space-2xs);
  --nowtalk-message-gap: var(--space-xl);
  --nowtalk-message-media-size-max: 18rem;
}

:root {
  --new-item-indicator-size: var(--space-xs);
  --new-item-indicator-inset-inline: var(--space-3xs);
  --toast-pointer-gap: var(--space-md);
  --toast-viewport-gap: var(--space-xs);
}

:root {
  --size-icon-md: 1.25rem;
  --size-icon-sm: 1rem;
  --size-icon-xs: 0.75rem;
  --size-icon-2xs: 0.5rem;
  --size-icon-lg: 1.5rem;
  --size-control-md: 2.5rem;
  --size-control-sm: 2rem;
  --size-control-lg: 3rem;
  --size-avatar-md: 3.5rem;
}

:root {
  --line-width-default: 0.0625rem;
  --line-width-emphasis: 0.125rem;
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1.5rem;
  --radius-full: 624.75rem;
  --radius-squircle-sm: var(--radius-lg);
  --radius-squircle-md: var(--radius-xl);
  --radius-squircle-lg: 2rem;
  --corner-shape-squircle: squircle;
}

:root {
  --duration-ui-default: 180ms;
  --interaction-wheel-interval: 180ms;
  --easing-default: ease;
  --easing-out: ease-out;
  --video-thumbnail-emphasis-scale: 104%;
  --video-title-scroll-speed: 40;
  --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --icon-emphasis-scale: 108%;
}

:root {
  --service-playhead-duration: 8s;
}

:root {
  --z-index-background: -1;
  --z-index-base: 0;
  --z-index-content: 1;
  --z-index-indicator: 2;
  --z-index-category-bar: 8;
  --z-index-header: 10;
  --z-index-account: 24;
  --z-index-skip-link: 20;
}