@stn-uiux/pub-ui 0.1.58 → 0.1.60

package/dist/index.js

@@ -3,7 +3,7 @@ import {
   STN_UI_COMPONENTS,
   STN_UI_FOUNDATIONS
 } from "./chunk-N46UQH6L.js";
-import "./chunk-LHV26PEP.js";
+import "./chunk-A5KLX6NX.js";
 import {
   STN_TOGGLE_BUTTON_PLAYGROUND_DEFAULT,
   STN_TOGGLE_BUTTON_PLAYGROUND_INTRO,
@@ -34,6 +34,9 @@ import {
   STN_SPACING_USECASE_INTRO,
   STN_SPACING_USECASE_ROWS
 } from "./chunk-AFDRRCY6.js";
+import {
+  STN_STATUS_DEMO_STEPS
+} from "./chunk-SQJPE6HH.js";
 import {
   STN_TEXT_COLOR_ROWS
 } from "./chunk-4HUY6TN4.js";
@@ -42,7 +45,7 @@ import {
   STN_SIDE_NAV_ITEM_INTRO,
   STN_SIDE_NAV_ITEM_STATES,
   STN_SIDE_NAV_SUB_ICON
-} from "./chunk-EDXSK54U.js";
+} from "./chunk-YMWHZNBT.js";
 import {
   STN_SIZE_INTRO,
   STN_SIZE_ROWS,
@@ -285,6 +288,16 @@ import {
   STN_GRADE_SEMANTIC_ROWS,
   STN_GRADE_SOURCE
 } from "./chunk-E26XJXQY.js";
+import {
+  STN_TOAST_DEMO_MSG,
+  STN_TOAST_ICON_SLUG,
+  STN_TOAST_INTRO,
+  STN_TOAST_KINDS,
+  STN_TOAST_REACT_USAGE,
+  STN_TOAST_SETUP,
+  STN_TOAST_TOKEN_ROWS,
+  STN_TOAST_USAGE_HTML
+} from "./chunk-SOEBXG3T.js";
 import {
   STN_TREE_DEMO,
   STN_TREE_FIGMA,
@@ -296,7 +309,7 @@ import {
   STN_TREE_SECTION_SIDE_FIGMA,
   STN_TREE_USAGE_HTML,
   describeTreePatternReact
-} from "./chunk-UPXSNRIJ.js";
+} from "./chunk-AOS3IX4T.js";
 import {
   STN_ALERT_CENTER_DASHBOARD_USAGE,
   STN_ALERT_CENTER_DASHBOARD_WIDGETS,
@@ -344,7 +357,7 @@ import {
   STN_TABLE_TH_CHECK_EXAMPLE,
   STN_TABLE_TH_CHECK_FIGMA,
   STN_TABLE_TH_LABEL_FIGMA
-} from "./chunk-DNMZJS65.js";
+} from "./chunk-IOBNIUK3.js";
 import {
   STN_TEXT_FIELD_FIGMA,
   STN_TEXT_FIELD_HTML,
@@ -353,16 +366,6 @@ import {
   STN_TEXT_FIELD_STATES,
   STN_TEXT_FIELD_USAGE
 } from "./chunk-NB4NJQYE.js";
-import {
-  STN_TOAST_DEMO_MSG,
-  STN_TOAST_ICON_SLUG,
-  STN_TOAST_INTRO,
-  STN_TOAST_KINDS,
-  STN_TOAST_REACT_USAGE,
-  STN_TOAST_SETUP,
-  STN_TOAST_TOKEN_ROWS,
-  STN_TOAST_USAGE_HTML
-} from "./chunk-SOEBXG3T.js";
 import {
   STN_SIDE_NAVIGATION_INTRO,
   STN_SIDE_NAVIGATION_USAGE,
@@ -374,7 +377,7 @@ import {
   STN_SCROLL_SPEC,
   STN_SCROLL_USAGE,
   STN_SCROLL_USAGE_HTML
-} from "./chunk-XNGYRPZI.js";
+} from "./chunk-CHJATVOT.js";
 import {
   STN_SEARCH_REQUIREMENT_DEMO_FIELDS,
   STN_SEARCH_REQUIREMENT_FIGMA,
@@ -452,7 +455,7 @@ import {
   applyLnbSideToModifiers,
   pubContentAreaClasses,
   pubLayoutRegionClass
-} from "./chunk-7ASY5YJ6.js";
+} from "./chunk-2ZYBBVBT.js";
 import {
   STN_LOADING_SKELETON_COLORS,
   STN_LOADING_SKELETON_INTRO,
@@ -478,7 +481,7 @@ import {
   STN_HEADER_USAGE_HTML,
   STN_HEADER_VARIANT_ROWS,
   STN_SYSTEM_CHIP_DEMO
-} from "./chunk-EQVFEZEQ.js";
+} from "./chunk-3RYAWLME.js";
 import {
   STN_FEEDBACK_BY_KIND,
   STN_FEEDBACK_SEMANTIC_ROWS,
@@ -528,17 +531,17 @@ import {
   STN_BREADCRUMB_ICON_SRC,
   STN_BREADCRUMB_INTRO,
   STN_BREADCRUMB_PARTS
-} from "./chunk-J46EPVSY.js";
+} from "./chunk-XQ7UUG7Y.js";
 import {
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,
   resolveSystemIconSrcFromName,
   systemIconPublicPath,
   systemIconSrc
-} from "./chunk-PVF77NHZ.js";
+} from "./chunk-Q4QXONXL.js";
 import {
   SYSTEM_ICON_DATA_URLS
-} from "./chunk-TDLGKV4C.js";
+} from "./chunk-NHYZ7AWK.js";
 import {
   STN_BREAKPOINT_INTRO,
   STN_BREAKPOINT_MEDIA,
@@ -828,6 +831,7 @@ export {
   STN_SPACING_USECASE_INTRO,
   STN_SPACING_USECASE_ROWS,
   STN_STATIC,
+  STN_STATUS_DEMO_STEPS,
   STN_SYSTEM_CHIP_DEMO,
   STN_SYSTEM_ICON_INTRO,
   STN_SYSTEM_ICON_ROWS,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@stn-uiux/pub-ui",
-  "version": "0.1.58",
+  "version": "0.1.60",
   "description": "STN Pub design system — tokens, specs, and CSS for product HTML / React apps",
   "type": "module",
   "sideEffects": [

package/styles/@assets/svg/system/line/chevron-left.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.55 5.4L8.45 12L15.55 18.6" stroke="#40474F" stroke-width="1.2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>

package/styles/components/stn-btn.css

@@ -185,6 +185,15 @@
   min-width: 0;
 }
 
+/* Width Presets (.w80 ~ .w200) — min-width 기반 */
+.stn-btn.w80  { min-width: var(--stn-size-80,  80px); }
+.stn-btn.w100 { min-width: var(--stn-size-100, 100px); }
+.stn-btn.w120 { min-width: var(--stn-size-120, 120px); }
+.stn-btn.w140 { min-width: var(--stn-size-140, 140px); }
+.stn-btn.w160 { min-width: var(--stn-size-160, 160px); }
+.stn-btn.w180 { min-width: var(--stn-size-180, 180px); }
+.stn-btn.w200 { min-width: var(--stn-size-200, 200px); }
+
 /* —— Shapes (Radius) —— */
 .stn-btn.square {
   border-radius: var(--stn-radius-btn-square);

package/styles/components/stn-dropdown.css

@@ -616,16 +616,23 @@
 }
 
 /* 9-2. Z-Index & Elevation Safeguards */
-.search_area:has(.stn-dropdown.on) {
+.search_area:has(.stn-dropdown.on),
+.stn-page-scaffold__search:has(.stn-dropdown.on) {
   position: relative;
   z-index: var(--stn-dropdown-menu-z, 150) !important;
 }
 
-.stn-search-requirement:has(.stn-dropdown.on) {
-  overflow: visible;
+.stn-search-requirement:has(.stn-dropdown.on),
+.stn-search-requirement__fields:has(.stn-dropdown.on),
+.stn-label-prefix:has(.stn-dropdown.on) {
+  overflow: visible !important;
+  position: relative;
+  z-index: var(--stn-dropdown-menu-z, 150) !important;
 }
 
-.stn-content-area>.stn-page-scaffold:has(> .search_area .stn-dropdown.on)>.content_box {
+.stn-content-area>.stn-page-scaffold:has(> .search_area .stn-dropdown.on)>.content_box,
+.stn-list-page-content-stack:has(.stn-dropdown.on) > .content_box,
+.stn-list-view__content-stack:has(.stn-dropdown.on) > .content_box {
   pointer-events: none;
 }
 

package/styles/components/stn-label-prefix.css

@@ -31,6 +31,7 @@
    1. Base Layout
    ========================================================================== */
 .stn-label-prefix {
+  position: relative;
   display: inline-flex;
   align-items: stretch;
   box-sizing: border-box;
@@ -40,6 +41,29 @@
   transition: border-color var(--stn-motion-duration-fast, 150ms) ease;
 }
 
+/* 팝업/드롭다운이 열렸을 때 overflow를 해제하여 메뉴 목록이 잘리지 않도록 보장 */
+.stn-label-prefix:has(.stn-dropdown.on),
+.stn-label-prefix:has(.stn-date-picker-popup),
+.stn-label-prefix:focus-within:has(.select_option) {
+  overflow: visible !important;
+}
+
+/* StnLabelPrefix 내부 드롭다운: 컨트롤 영역 기준으로 팝업 정렬 (방안 1) */
+.stn-label-prefix > .stn-label-prefix__control > .stn-dropdown {
+  position: relative;
+}
+
+.stn-label-prefix .stn-dropdown > .select_option {
+  top: 100%;
+  border-top: none;
+  border-radius: 0 0 var(--stn-radius-input-md, 4px) var(--stn-radius-input-md, 4px);
+}
+
+.stn-label-prefix:has(.stn-dropdown.on) {
+  border-bottom-left-radius: 0 !important;
+  border-bottom-right-radius: 0 !important;
+}
+
 /* ==========================================================================
    2. Label Area
    ========================================================================== */
@@ -57,6 +81,14 @@
   user-select: none;
 }
 
+.stn-label-prefix__checkbox {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  margin-inline-end: calc(-1 * var(--stn-space-8));
+}
+
 .stn-label-prefix__icon {
   display: inline-flex;
   align-items: center;
@@ -102,6 +134,7 @@
   width: 100%;
 }
 
+
 /* ==========================================================================
    5. Size (sm · md · lg)
    ========================================================================== */
@@ -253,6 +286,11 @@
   pointer-events: none;
 }
 
+.stn-label-prefix.is-control-disabled .stn-label-prefix__control {
+  opacity: var(--stn-input-disabled-opacity, 0.45);
+  pointer-events: none;
+}
+
 /* ==========================================================================
    12. Feedback / Status Colors & Error State
    ========================================================================== */

package/styles/components/stn-pagination.css

@@ -43,7 +43,9 @@
 
 .stn-pagination__page,
 .stn-pagination__prev,
-.stn-pagination__next {
+.stn-pagination__next,
+.stn-pagination__first,
+.stn-pagination__last {
   box-sizing: border-box;
   display: inline-flex;
   flex-direction: column;
@@ -55,7 +57,7 @@
   width: var(--stn-pagination-size);
   height: var(--stn-pagination-size);
   border: none;
-  border-radius: var(--stn-pagination-radius-idle);
+  border-radius: var(--stn-pagination-radius-active, var(--stn-radius-circle));
   background: transparent;
   color: var(--stn-pagination-color);
   font-family: var(--stn-font-body);
@@ -68,11 +70,14 @@
   -webkit-appearance: none;
   box-shadow: none !important;
   vertical-align: middle;
+  transition: all 0.15s ease;
 }
 
 .stn-pagination__page:hover:not(:disabled):not(.is-active),
 .stn-pagination__prev:hover:not(:disabled),
-.stn-pagination__next:hover:not(:disabled) {
+.stn-pagination__next:hover:not(:disabled),
+.stn-pagination__first:hover:not(:disabled),
+.stn-pagination__last:hover:not(:disabled) {
   background: color-mix(in srgb, var(--stn-pagination-active-bg) 70%, transparent);
   color: var(--stn-pagination-color);
 }
@@ -93,7 +98,9 @@
 }
 
 .stn-pagination__prev:disabled,
-.stn-pagination__next:disabled {
+.stn-pagination__next:disabled,
+.stn-pagination__first:disabled,
+.stn-pagination__last:disabled {
   opacity: var(--stn-pagination-disabled-opacity);
   cursor: default;
   color: var(--stn-pagination-color);
@@ -101,11 +108,88 @@
 }
 
 .stn-pagination__prev:disabled:hover,
-.stn-pagination__next:disabled:hover {
+.stn-pagination__next:disabled:hover,
+.stn-pagination__first:disabled:hover,
+.stn-pagination__last:disabled:hover {
   background: transparent;
   opacity: var(--stn-pagination-disabled-opacity);
 }
 
+/* Size variations (STN 규격: sm · md · lg) */
+.stn-pagination--sm {
+  --stn-pagination-size: var(--stn-size-28, 28px);
+  --stn-pagination-font-size: var(--stn-font-size-12, 12px);
+  --stn-pagination-gap: var(--stn-space-4, 4px);
+  --stn-pagination-arrow-gap: var(--stn-space-8, 8px);
+}
+
+.stn-pagination--md {
+  --stn-pagination-size: var(--stn-size-32, 32px);
+  --stn-pagination-font-size: var(--stn-font-size-13, 13px);
+  --stn-pagination-gap: var(--stn-space-8, 8px);
+  --stn-pagination-arrow-gap: var(--stn-space-12, 12px);
+}
+
+.stn-pagination--lg {
+  --stn-pagination-size: var(--stn-size-36, 36px);
+  --stn-pagination-font-size: var(--stn-font-size-14, 14px);
+  --stn-pagination-gap: var(--stn-space-8, 8px);
+  --stn-pagination-arrow-gap: var(--stn-space-16, 16px);
+}
+
+/* Variant: outlined (선택된 페이지만 outline 테두리 적용, 다른 번호 및 이동 버튼은 박스 없음) */
+.stn-pagination--outlined .stn-pagination__page,
+.stn-pagination--outlined .stn-pagination__prev,
+.stn-pagination--outlined .stn-pagination__next,
+.stn-pagination--outlined .stn-pagination__first,
+.stn-pagination--outlined .stn-pagination__last {
+  border: none;
+  background: transparent;
+}
+
+.stn-pagination--outlined .stn-pagination__page.is-active,
+.stn-pagination--outlined .stn-pagination__page[aria-current='page'] {
+  border: 1px solid var(--stn-pagination-active-bg, var(--stn-primary));
+  background: transparent;
+  color: var(--stn-pagination-active-bg, var(--stn-primary));
+}
+
+.stn-pagination--outlined .stn-pagination__page.is-active:hover,
+.stn-pagination--outlined .stn-pagination__page[aria-current='page']:hover {
+  background: color-mix(in srgb, var(--stn-pagination-active-bg, var(--stn-primary)) 10%, transparent);
+}
+
+/* outlined 기본(컬러 미지정) 활성 페이지 */
+.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
+.stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page[aria-current='page'] {
+  border: 1px solid var(--stn-gray-400, #94a3b8);
+  background: transparent;
+  color: var(--stn-text-primary, #ffffff);
+}
+
+[data-theme='light'] .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active,
+.light .stn-pagination--outlined:not(.stn-pagination--primary):not(.stn-pagination--secondary) .stn-pagination__page.is-active {
+  border-color: var(--stn-gray-500, #64748b);
+  color: var(--stn-gray-800, #1e293b);
+}
+
+/* Color variations */
+.stn-pagination--primary {
+  --stn-pagination-active-bg: var(--stn-primary, var(--stn-blue-500));
+  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+}
+
+.stn-pagination--secondary {
+  --stn-pagination-active-bg: var(--stn-secondary, var(--stn-purple-500));
+  --stn-pagination-active-color: var(--stn-static-white, #ffffff);
+}
+
+/* Disabled state */
+.stn-pagination.is-disabled {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
 .stn-pagination__icon {
   display: block;
   width: var(--stn-pagination-chevron-w);
@@ -140,3 +224,27 @@
   width: auto;
   flex: 0 0 auto;
 }
+
+/* 모바일 좁은 화면 컴팩트 최적화
+ * 브레이크포인트: --stn-pagination-compact-breakpoint (480px)
+ * CSS @media에서 var() 사용 불가이므로 리터럴 유지; 치수는 시멘틱 토큰 참조.
+ */
+@media (max-width: 480px) {
+  .stn-pagination {
+    gap: var(--stn-pagination-compact-gap);
+  }
+
+  .stn-pagination__list {
+    gap: var(--stn-pagination-compact-gap);
+  }
+
+  .stn-pagination__page,
+  .stn-pagination__prev,
+  .stn-pagination__next {
+    min-width: var(--stn-pagination-compact-size);
+    width: var(--stn-pagination-compact-size);
+    height: var(--stn-pagination-compact-size);
+    padding: var(--stn-pagination-compact-padding);
+    font-size: var(--stn-pagination-compact-font-size);
+  }
+}

package/styles/components/stn-popup.css

@@ -180,7 +180,7 @@
 }
 
 .stn-pop--xs {
-  --stn-pop-active-width: var(--stn-pop-width-xs, 400px);
+  --stn-pop-active-width: var(--stn-pop-width-xs);
 }
 
 .stn-pop--sm {

package/styles/components/stn-scroll.css

@@ -12,6 +12,13 @@
 :root {
   --stn-scroll-width: 8px;
   --stn-scroll-radius: 4px;
+  /* 두께 프리셋 (thin · default · thick) */
+  --stn-scroll-width-thin: 4px;
+  --stn-scroll-radius-thin: 2px;
+  --stn-scroll-width-default: 8px;
+  --stn-scroll-radius-default: 4px;
+  --stn-scroll-width-thick: 12px;
+  --stn-scroll-radius-thick: 6px;
 }
 
 /* ===== 2. Unified Scrollbar Base (.stn-scroll 단일화) ===== */
@@ -22,23 +29,19 @@
     scrollbar-color: var(--stn-scroll-thumb) var(--stn-scroll-track);
   }
 
-  .stn-scroll.thick,
-  .stn-scroll--thick {
+  .stn-scroll.thick {
     scrollbar-width: auto;
   }
 
-  .stn-scroll.primary,
-  .stn-scroll--primary {
+  .stn-scroll.primary {
     scrollbar-color: var(--stn-scroll-thumb-primary) var(--stn-scroll-track);
   }
 
-  .stn-scroll.secondary,
-  .stn-scroll--secondary {
+  .stn-scroll.secondary {
     scrollbar-color: var(--stn-scroll-thumb-secondary) var(--stn-scroll-track);
   }
 
-  .stn-scroll.muted,
-  .stn-scroll--muted {
+  .stn-scroll.muted {
     scrollbar-color: var(--stn-scroll-thumb-muted) var(--stn-scroll-track);
   }
 }
@@ -77,65 +80,55 @@
   overflow: hidden;
 }
 
-.stn-scroll.vertical,
-.stn-scroll--vertical {
+.stn-scroll.vertical {
   overflow-y: auto;
   overflow-x: hidden;
 }
 
-.stn-scroll.horizontal,
-.stn-scroll--horizontal {
+.stn-scroll.horizontal {
   overflow-x: auto;
   overflow-y: hidden;
 }
 
-.stn-scroll.both,
-.stn-scroll--both {
+.stn-scroll.both {
   overflow: auto;
 }
 
 /* ===== 4. Width Variants (너비) ===== */
 /* Thin (4px) */
-.stn-scroll.thin,
-.stn-scroll--thin {
+.stn-scroll.thin {
   --stn-scroll-width: 4px;
   --stn-scroll-radius: 2px;
 }
 
-.stn-scroll.thin::-webkit-scrollbar,
-.stn-scroll--thin::-webkit-scrollbar {
+.stn-scroll.thin::-webkit-scrollbar {
   width: 4px;
   height: 4px;
 }
 
-.stn-scroll.thin::-webkit-scrollbar-thumb,
-.stn-scroll--thin::-webkit-scrollbar-thumb {
+.stn-scroll.thin::-webkit-scrollbar-thumb {
   border-radius: 2px;
 }
 
 /* Default (8px) */
-.stn-scroll.default,
-.stn-scroll--default {
+.stn-scroll.default {
   --stn-scroll-width: 8px;
   --stn-scroll-radius: 4px;
 }
 
 /* Thick (12px) */
-.stn-scroll.thick,
-.stn-scroll--thick {
+.stn-scroll.thick {
   scrollbar-width: auto;
   --stn-scroll-width: 12px;
   --stn-scroll-radius: 6px;
 }
 
-.stn-scroll.thick::-webkit-scrollbar,
-.stn-scroll--thick::-webkit-scrollbar {
+.stn-scroll.thick::-webkit-scrollbar {
   width: 12px;
   height: 12px;
 }
 
-.stn-scroll.thick::-webkit-scrollbar-thumb,
-.stn-scroll--thick::-webkit-scrollbar-thumb {
+.stn-scroll.thick::-webkit-scrollbar-thumb {
   border-radius: 6px;
 }
 
@@ -147,19 +140,19 @@
 
 /* 화살표가 있는 스크롤 셸 내부 트랙:
    스크롤 썸(thumb)이 화살표 버튼을 덮지 않고, 화살표 바로 아래/사이에서만 움직이도록 트랙 상하/좌우에 margin 지정 */
-.stn-scroll-shell--vertical .stn-scroll::-webkit-scrollbar-track,
-.stn-scroll-shell:has(.stn-scroll__arrow--up) .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.vertical .stn-scroll::-webkit-scrollbar-track,
+.stn-scroll-shell:has(.stn-scroll__arrow.up) .stn-scroll::-webkit-scrollbar-track {
   margin-top: 17px;
   margin-bottom: 17px;
 }
 
-.stn-scroll-shell--horizontal .stn-scroll::-webkit-scrollbar-track,
-.stn-scroll-shell:has(.stn-scroll__arrow--left) .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.horizontal .stn-scroll::-webkit-scrollbar-track,
+.stn-scroll-shell:has(.stn-scroll__arrow.left) .stn-scroll::-webkit-scrollbar-track {
   margin-left: 17px;
   margin-right: 17px;
 }
 
-.stn-scroll-shell--both .stn-scroll::-webkit-scrollbar-track {
+.stn-scroll-shell.both .stn-scroll::-webkit-scrollbar-track {
   margin: 17px;
 }
 
@@ -204,83 +197,75 @@
 }
 
 /* 수직 스크롤 화살표 (위/아래) */
-.stn-scroll-shell--vertical .stn-scroll__arrow--up,
-.stn-scroll-shell--vertical .stn-scroll__arrow--down,
-.stn-scroll-shell--both .stn-scroll__arrow--up,
-.stn-scroll-shell--both .stn-scroll__arrow--down {
+.stn-scroll-shell.vertical .stn-scroll__arrow.up,
+.stn-scroll-shell.vertical .stn-scroll__arrow.down,
+.stn-scroll-shell.both .stn-scroll__arrow.up,
+.stn-scroll-shell.both .stn-scroll__arrow.down {
   right: 0;
   width: var(--stn-scroll-width, 8px);
   height: 14px;
 }
 
-.stn-scroll-shell--vertical .stn-scroll__arrow--up,
-.stn-scroll-shell--both .stn-scroll__arrow--up {
+.stn-scroll-shell.vertical .stn-scroll__arrow.up,
+.stn-scroll-shell.both .stn-scroll__arrow.up {
   top: 1px;
 }
 
-.stn-scroll-shell--vertical .stn-scroll__arrow--down,
-.stn-scroll-shell--both .stn-scroll__arrow--down {
+.stn-scroll-shell.vertical .stn-scroll__arrow.down,
+.stn-scroll-shell.both .stn-scroll__arrow.down {
   bottom: 1px;
 }
 
 /* 가로 스크롤 화살표 (좌/우) */
-.stn-scroll-shell--horizontal .stn-scroll__arrow--left,
-.stn-scroll-shell--horizontal .stn-scroll__arrow--right,
-.stn-scroll-shell--both .stn-scroll__arrow--left,
-.stn-scroll-shell--both .stn-scroll__arrow--right {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.left,
+.stn-scroll-shell.horizontal .stn-scroll__arrow.right,
+.stn-scroll-shell.both .stn-scroll__arrow.left,
+.stn-scroll-shell.both .stn-scroll__arrow.right {
   bottom: 0;
   width: 14px;
   height: var(--stn-scroll-width, 8px);
 }
 
-.stn-scroll-shell--horizontal .stn-scroll__arrow--left,
-.stn-scroll-shell--both .stn-scroll__arrow--left {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.left,
+.stn-scroll-shell.both .stn-scroll__arrow.left {
   left: 1px;
 }
 
-.stn-scroll-shell--horizontal .stn-scroll__arrow--right,
-.stn-scroll-shell--both .stn-scroll__arrow--right {
+.stn-scroll-shell.horizontal .stn-scroll__arrow.right,
+.stn-scroll-shell.both .stn-scroll__arrow.right {
   right: 1px;
 }
 
-/* ===== 5. Color Variants (색상) ===== */
+/* ===== 6. Color Variants (색상) ===== */
 /* Primary */
-.stn-scroll.primary::-webkit-scrollbar-thumb,
-.stn-scroll--primary::-webkit-scrollbar-thumb {
+.stn-scroll.primary::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-primary);
 }
-.stn-scroll.primary::-webkit-scrollbar-thumb:hover,
-.stn-scroll--primary::-webkit-scrollbar-thumb:hover {
+.stn-scroll.primary::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-primary-hover);
 }
 
 /* Secondary */
-.stn-scroll.secondary::-webkit-scrollbar-thumb,
-.stn-scroll--secondary::-webkit-scrollbar-thumb {
+.stn-scroll.secondary::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-secondary);
 }
-.stn-scroll.secondary::-webkit-scrollbar-thumb:hover,
-.stn-scroll--secondary::-webkit-scrollbar-thumb:hover {
+.stn-scroll.secondary::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-secondary-hover);
 }
 
 /* Muted */
-.stn-scroll.muted::-webkit-scrollbar-thumb,
-.stn-scroll--muted::-webkit-scrollbar-thumb {
+.stn-scroll.muted::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb-muted);
 }
-.stn-scroll.muted::-webkit-scrollbar-thumb:hover,
-.stn-scroll--muted::-webkit-scrollbar-thumb:hover {
+.stn-scroll.muted::-webkit-scrollbar-thumb:hover {
   background: var(--stn-scroll-thumb-muted-hover);
 }
 
 /* Fade on Hover */
-.stn-scroll.fade::-webkit-scrollbar-thumb,
-.stn-scroll--fade::-webkit-scrollbar-thumb {
+.stn-scroll.fade::-webkit-scrollbar-thumb {
   background: transparent;
   transition: background 0.2s ease;
 }
-.stn-scroll.fade:hover::-webkit-scrollbar-thumb,
-.stn-scroll--fade:hover::-webkit-scrollbar-thumb {
+.stn-scroll.fade:hover::-webkit-scrollbar-thumb {
   background: var(--stn-scroll-thumb);
 }