@uniai-fe/ui-legacy 0.1.1

package/src/style-base/essentials/colors.scss

@@ -0,0 +1,195 @@
+@use "./palette.scss";
+
+// 치킨몽거 컬러 팔레트
+:root {
+  --theme-blue-main: var(--color-light-blue-600);
+  --b_02: var(--color-blue-500);
+
+  --color_90: var(--color-blue-gray-900);
+  --color_80: var(--color-blue-gray-800);
+  --color_70: var(--color-blue-gray-700);
+  --color_60: var(--color-blue-gray-600);
+  --color_50: var(--color-blue-gray-500);
+  --color_40: var(--color-blue-gray-400);
+  --color_30: var(--color-blue-gray-300);
+  --color_20: var(--color-blue-gray-200);
+  --color_10: var(--color-blue-gray-100);
+  --color_5: var(--color-blue-gray-50);
+  --color_1: var(--color-blue-gray-10);
+  --color_0: #fff;
+
+  --color_theme_dark_30: #2c333c;
+  --color_theme_dark_20: #212a36;
+  --color_theme_dark_10: #222934;
+  --color_theme_dark_5: #161d26;
+  --color_theme_dark_1: #171e26;
+  --color_theme_dark_0: #12181f;
+
+  --color_blue_dark_10: #1c242e;
+  --color_blue_dark_0: #101e35;
+
+  --color_bg_dark_10: #171e26;
+  --color_bg_dark_20: #161d26;
+  --color_bg_dark_30: #192330;
+  --color_bg_dark_40: #272d37;
+  --color_bg_dark_50: #1c242e;
+  --color_bg_dark_60: #222934;
+
+  --green: var(--color-green-500);
+  --orange: var(--color-orange-500);
+  --red: var(--color-red-500);
+  --magenta: var(--color-magenta-500);
+  --purple: var(--color-purple-500);
+  --yellow: var(--color-yellow-500);
+  --skyblue: #e6f2fc;
+
+  --color-light-blue-600-008: rgba(0, 124, 219, 0.08);
+
+  --color_text_dark: var(--color-blue-gray-200);
+
+  --divider: #a9acb0;
+
+  --text-color: var(--color_60);
+
+  --nav-bg: #222934;
+  --nav-border: transparent;
+  --nav-basic: var(--color_40);
+  --nav-active: var(--color_0);
+
+  --theme-background-10: var(--color-blue-gray-10); // #fcfcfd
+  --theme-background-20: var(--color-blue-gray-50); // #f9fAfB
+  --theme-background-30: var(--color-blue-10); // #f5f8fe
+  --theme-background-40: #f4f6f8;
+  --theme-background-50: #f7f9fd;
+  --theme-background-60: #e6f2fc;
+  --theme-background-70: #e5f0ff;
+
+  // --table-head-bg: var(--color-blue-10);
+  // --table-hover: var(--pale-skyblue);
+  // --table-today: #f7f9fd;
+  // --table-row-hover: #f7f9fd;
+  // --table-top: #000;
+  // --table-pager: rgba(255, 255, 255, 0.6);
+  // --table-head-util-bg: #e5f0ff;
+
+  --tab-menu: var(--color-blue-gray-600);
+
+  // feeding
+  --schedule-repeat-summary-bg: var(--color-blue-10);
+  --schedule-disease: var(--color-red-600);
+  --schedule-medicine: var(--color-magenta-600);
+  --schedule-cleanliness: var(--color-orange-600);
+  --schedule-facility: var(--color-lime-600);
+  --schedule-quarantine: var(--color-light-blue-700);
+  --schedule-feed: var(--color-purple-600);
+  // --produce-eggs-length-table-head: var(--theme-background-60);
+
+  // --spreadsheet-flock-finished: var(--color-red-200);
+  // --spreadsheet-bg: #fff;
+
+  --flatpickr-title: #020202;
+  --flatpickr-bg: #000;
+  --flatpickr-time: #fbfbfb;
+  --flatpickr-button-bg: #f3f5f6;
+
+  --cancel-info-bg: #fff6f7;
+  --cancel-info-color: var(--red);
+
+  --finish-button-bg: #000;
+
+  --summary-cage-bg: var(--color_60);
+  --cage-feeding-bg: #f4f6f8;
+
+  --gaugeTrack-bg: var(--color-blue-gray-200);
+  --gaugeEdgePoint-bg: #fff;
+
+  --dashboard-cage-border: var(--color-blue-gray-900);
+  --sensor-point-bg: #fff;
+
+  --spreadsheet-row-th: var(--color_1);
+  --chart-date-label: var(--color-blue-gray-600);
+  --farm-cage-select-device: var(--color-blue-gray-400);
+
+  &.dark-mode {
+    // 다크모드 컬러 셋
+    --b_02: var(--color-light-blue-600);
+    --color_90: #fff;
+    --color_80: var(--color-blue-gray-200);
+    --color_70: var(--color-blue-gray-300);
+    --color_60: var(--color-blue-gray-400);
+    --color_50: var(--color-blue-gray-500);
+    --color_40: var(--color-blue-gray-600);
+    --color_30: var(--color_theme_dark_30); // #2c333c
+    --color_20: var(--color_theme_dark_20); // #212a36
+    --color_10: var(--color_theme_dark_10); // #222934
+    --color_5: var(--color_theme_dark_5); // #161d26
+    --color_1: var(--color_theme_dark_1); // #171e26
+    --color_0: var(--color_theme_dark_0); // #12181f
+
+    --theme-background-10: var(--color_bg_dark_10); // #171e26
+    --theme-background-20: var(--color_bg_dark_20); // #161d26
+    --theme-background-30: var(--color_bg_dark_30); // #192330
+    --theme-background-40: var(--color_bg_dark_40); // #272d37
+    --theme-background-50: var(--color_bg_dark_50); // #1c242e
+    --theme-background-60: var(--color_bg_dark_30); // #192330
+    --theme-background-70: var(--color_bg_dark_60); // #222934
+
+    --input-text-color: var(--color-blue-gray-200);
+    --input-select-text-default: var(--color-blue-gray-200);
+    --nav-basic: var(--color_60);
+    --nav-active: var(--color_90);
+
+    --page-selected-item-bg: var(--pale-skyblue-dark);
+
+    --divider: var(--color-blue-gray-600);
+
+    // --table-header-amount-summary-bg: var(--color_theme_dark_10);
+    // --table-head-bg-basic: #171e26;
+
+    // --table-head-bg: var(--pale-skyblue-dark);
+    // --table-today: var(--color_blue_dark_0);
+    // --table-row-hover: var(--color_blue_dark_0);
+    // --table-top: #2c333c;
+    // --table-pager: rgba(18, 24, 31, 0.6);
+    // --table-head-util-bg: var(--color_theme_dark_10);
+
+    --tab-menu: var(--color-blue-gray-200);
+
+    --produce-eggs-length-table-head: var(--color_blue_dark_10);
+
+    // --spreadsheet-bg: #161d26;
+
+    --flatpickr-title: #fff;
+    --flatpickr-bg: #fff;
+    --flatpickr-time: #292d32;
+    --flatpickr-button-bg: #292d32;
+
+    --cancel-info-bg: rgba(186, 35, 28, 0.2);
+    --cancel-info-color: #fff;
+
+    --finish-button-bg: #272d37;
+
+    --dashboard-cage-list-bg: var(--color_5);
+    --summary-cage-bg: #272d37;
+    --cage-feeding-bg: #272d37;
+    --dashboard-feeds-meter-bg: #161d26;
+
+    --gaugeTrack-bg: #212a36;
+    --gaugeEdgePoint-bg: #212a36;
+
+    --dashboard-cage-border: var(--color-blue-gray-600);
+    --sensor-point-bg: #161d26;
+
+    // --spreadsheet-row-th: var(--color_blue_dark_10);
+    --chart-date-label: #343943;
+    --farm-cage-select-device: var(--color-blue-gray-600);
+
+    .modal-header .modal-header-close-button {
+      filter: invert(100%);
+    }
+
+    .dashboard-summary-item .dashboard-summary-item-icon img {
+      filter: invert(100%);
+    }
+  }
+}

package/src/style-base/essentials/document.scss

@@ -0,0 +1,14 @@
+:root {
+  --page-padding-default: 3rem;
+}
+
+html,
+body {
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 0;
+}

package/src/style-base/essentials/fonts.scss

@@ -0,0 +1,24 @@
+@import url("pretendard-jp/dist/web/variable/pretendardvariable-jp.css");
+@import url("pretendard/dist/web/variable/pretendardvariable.css");
+
+/*
+  웹 폰트 우선순위
+  1. Pretendard
+    - https://github.com/orioncactus/pretendard
+    - Next.js 폰트 설치 https://github.com/orioncactus/pretendard/issues/157
+  2. 안드로이드-Roboto / iOS-SF Pro
+    - 애플 기기의 특수성으로, SF Pro를 먼저 선언한 뒤, Roboto를 적용한다.
+    - SF Pro 적용을 위한 font-family 키워드는 "system-ui", "-apple-system"이 있다.
+    - 참조: https://developer.apple.com/forums/thread/127350
+    - SF Pro 다운로드: https://developer.apple.com/fonts/
+*/
+* {
+  font-family:
+    "Pretendard Variable", "Pretendard JP", Pretendard, system-ui,
+    "-apple-system", "Roboto", "BlinkMacSystemFont", "Apple SD Gothic Neo",
+    "Segoe UI", "Helvetica", "Helvetica Neue", "Apple Color Emoji",
+    "Segoe UI Emoji", "Segoe UI Symbol", "맑은 고딕", "Malgun Gothic", "돋움",
+    "dotum", "Oxygen", "Oxygen-Sans", "Ubuntu", "Cantarell", ui-sans-serif,
+    Arial, "Noto Sans", sans-serif, "Noto Color Emoji";
+  letter-spacing: -0.03em;
+}

package/src/style-base/essentials/icon.scss

@@ -0,0 +1,11 @@
+.delta-icon {
+  width: fit-content;
+  height: fit-content;
+  .delta-icon-dash {
+    display: flex;
+    font-size: 1.6rem;
+    color: var(--color_60);
+    line-height: 1.4rem;
+    font-weight: 700;
+  }
+}

package/src/style-base/essentials/palette.scss

@@ -0,0 +1,146 @@
+// LGU+ color set
+:root {
+  --color-red-10: #fef6f6;
+  --color-red-50: #fbdcda;
+  --color-red-100: #f8c6c3;
+  --color-red-200: #f39591;
+  --color-red-300: #ed615a;
+  --color-red-400: #e93d35;
+  --color-red-500: #e22a21;
+  --color-red-600: #ba231c;
+  --color-red-700: #8c1c17;
+  --color-red-800: #671714;
+  --color-red-900: #4d120f;
+
+  --color-magenta-10: #fefbfd;
+  --color-magenta-50: #fdedf6;
+  --color-magenta-100: #fbdaed;
+  --color-magenta-200: #f8bfe0;
+  --color-magenta-300: #ee96c9;
+  --color-magenta-400: #e667b1;
+  --color-magenta-500: #e30084;
+  --color-magenta-600: #b20068;
+  --color-magenta-700: #8a0050;
+  --color-magenta-800: #66003c;
+  --color-magenta-900: #47002a;
+
+  --color-orange-10: #fff9f5;
+  --color-orange-50: #ffe7d6;
+  --color-orange-100: #ffd3b3;
+  --color-orange-200: #ffbb8a;
+  --color-orange-300: #ff9d57;
+  --color-orange-400: #ff8024;
+  --color-orange-500: #f86800;
+  --color-orange-600: #e05e00;
+  --color-orange-700: #b84d00;
+  --color-orange-800: #8f3c00;
+  --color-orange-900: #662b00;
+
+  --color-yellow-10: #fffdf5;
+  --color-yellow-50: #fffae0;
+  --color-yellow-100: #fff6c2;
+  --color-yellow-200: #fff1a3;
+  --color-yellow-300: #ffe970;
+  --color-yellow-400: #ffdf33;
+  --color-yellow-500: #fdd600;
+  --color-yellow-600: #f0cb00;
+  --color-yellow-700: #e0be00;
+  --color-yellow-800: #d1b100;
+  --color-yellow-900: #b89b00;
+
+  --color-lime-10: #fcfef1;
+  --color-lime-50: #f7fbda;
+  --color-lime-100: #ebf2b0;
+  --color-lime-200: #e1eb8e;
+  --color-lime-300: #d6e36d;
+  --color-lime-400: #c9da49;
+  --color-lime-500: #bcd400;
+  --color-lime-600: #afc502;
+  --color-lime-700: #9db102;
+  --color-lime-800: #879801;
+  --color-lime-900: #738203;
+
+  --color-green-10: #e4fcf0;
+  --color-green-50: #cdf9cd;
+  --color-green-100: #a3f5a4;
+  --color-green-200: #6af66c;
+  --color-green-300: #3ae93c;
+  --color-green-400: #00cc02;
+  --color-green-500: #00aa02;
+  --color-green-600: #008502;
+  --color-green-700: #006601;
+  --color-green-800: #004d01;
+  --color-green-900: #003301;
+
+  --color-light-blue-10: #f5fbff;
+  --color-light-blue-50: #e6f4fe;
+  --color-light-blue-100: #c3e4fe;
+  --color-light-blue-200: #8accff;
+  --color-light-blue-300: #70c1ff;
+  --color-light-blue-400: #3dabff;
+  --color-light-blue-500: #0a95ff;
+  --color-light-blue-600: #007cdb;
+  --color-light-blue-700: #0065b2;
+  --color-light-blue-800: #004b85;
+  --color-light-blue-900: #003761;
+
+  --color-blue-10: #f5f8fe;
+  --color-blue-50: #e2ebfd;
+  --color-blue-100: #b1cafb;
+  --color-blue-200: #78a2f7;
+  --color-blue-300: #4580f7;
+  --color-blue-400: #1662f8;
+  --color-blue-500: #0146d0;
+  --color-blue-600: #013aad;
+  --color-blue-700: #002b80;
+  --color-blue-800: #001d57;
+  --color-blue-900: #001133;
+
+  --color-deep-blue-10: #f9f9fb;
+  --color-deep-blue-50: #e4e4f7;
+  --color-deep-blue-100: #becce9;
+  --color-deep-blue-200: #7d9ad4;
+  --color-deep-blue-300: #4f76c4;
+  --color-deep-blue-400: #16439c;
+  --color-deep-blue-500: #00308f;
+  --color-deep-blue-600: #002775;
+  --color-deep-blue-700: #001f5c;
+  --color-deep-blue-800: #001236;
+  --color-deep-blue-900: #000714;
+
+  --color-purple-10: #fcfaff;
+  --color-purple-50: #f8f5ff;
+  --color-purple-100: #efe7fe;
+  --color-purple-200: #e4d7fe;
+  --color-purple-300: #ccb4fd;
+  --color-purple-400: #af89fa;
+  --color-purple-500: #9e70fa;
+  --color-purple-600: #8b54f7;
+  --color-purple-700: #6d35de;
+  --color-purple-800: #5221b5;
+  --color-purple-900: #451d95;
+
+  --color-gray-10: #fafafa;
+  --color-gray-50: #f2f2f2;
+  --color-gray-100: #e9e9e9;
+  --color-gray-200: #d1d1d1;
+  --color-gray-300: #aeaeae;
+  --color-gray-400: #8e8e8e;
+  --color-gray-500: #636363;
+  --color-gray-600: #484848;
+  --color-gray-700: #383838;
+  --color-gray-800: #262626;
+  --color-gray-900: #1a1a1a;
+
+  --color-blue-gray-10: #fcfcfd;
+  --color-blue-gray-50: #f9fafb;
+  --color-blue-gray-100: #f3f5f6;
+  --color-blue-gray-200: #e7ebee;
+  --color-blue-gray-300: #dce0e5;
+  --color-blue-gray-400: #a8b3bd;
+  --color-blue-gray-500: #7f8a94;
+  --color-blue-gray-600: #66707a;
+  --color-blue-gray-700: #525960;
+  --color-blue-gray-800: #3b4044;
+  --color-blue-gray-900: #181a1b;
+}

package/src/style-base/essentials/reset.scss

@@ -0,0 +1,156 @@
+@charset "UTF-8";
+
+/* reset; ~ 2025. 08. */
+:root {-webkit-tap-highlight-color:transparent;  text-size-adjust: none; overflow-wrap:break-word; word-break:break-word;}
+*, *:before, *:after {border:0; margin:0; padding:0; box-sizing:border-box;}
+*:before, *:after {border:0; margin:0; padding:0; box-sizing:border-box;}
+* {letter-spacing:-.05em; flex-shrink:0; overscroll-behavior-y: none;/*iOS 스크롤 바운스 해제*/}
+*:focus, *:focus-within, *:focus-visible {outline:none;}
+
+/* Document */
+html {width:100%; font-size:10px; font-family: "Pretendard Variable", "Pretendard JP", "Pretendard", 'Noto Sans KR', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Segoe UI', Roboto, 'Helvetica', 'Helvetica Neue', 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', '맑은 고딕', 'Malgun Gothic', '돋움', 'dotum', Oxygen, 'Oxygen-Sans', 'Ubuntu', 'Cantarell', sans-serif; background-color:#fff; touch-action: manipulation;}
+body {width:100%; position:relative;  background:none;}
+
+/* Text */
+h1, h2, h3, h4, h5, h6 {font-weight:500; margin:0; padding:0; line-height: 1em;}
+strong, b {font-weight:700; line-height: 1em;}
+p, span, i, sup, sub, del, ins, s {word-break:keep-all; margin:0; padding:0;}
+span, i {word-break:keep-all; margin:0; padding:0;}
+i, address, cite, em, q {font-weight:400; font-style:normal;}
+span, i, sup, sub, del, ins, s, address, cite, em, q {line-height: 1em;}
+blockquote, abbr, dfn {font-weight:400;}
+pre, code, samp, kbd, var {font-family: 'Consolas', 'Monaco', 'Menlo', 'DejaVu Sans Mono', SFMono-Regular, 'Liberation Mono', 'Courier New', monospace;}
+blockquote, q {quotes:none;}
+blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
+
+/* Media */
+img, svg {perspective: 1; max-width:100%; object-fit: contain;}
+
+/* List */
+// ul, ol, dl {list-style:none;}
+li, dt, dd {list-style:none;}
+
+/* Table */
+table {border-collapse:collapse; border-spacing: 0; table-layout: fixed;}
+thead, tbody, tfoot {}
+tr {}
+th, td {}
+caption {display:none;}
+
+/* Form */
+form, fieldset {}
+label {display:block;}
+legend {display:none;}
+
+/* HTML5 - 일반 */
+article, aside, footer, header, main, nav, section, time {display:block;}
+/* HTML5 - Media */
+audio, canvas, figure, figcaption, video {display:block;}
+figure { position: relative; width: fit-content; height: fit-content; font-size: 0; }
+/* HTML5 - 게이지 형태 */
+meter, progress {display:block;}
+/* HTML5 - 기능이 포함된 태그 (특정 input 태그에 대해, 자동완성 기능 제공) */
+mark {display:inline;} /* highlight 기능, 텍스트에 배경칠을 하여 강조 */
+details, summary {display:block;}
+/* details - 아코디언 기법이 적용된 태그, 포함된 내용을 접었다 펴서 가릴 수 있음 */
+/* summary - details의 요약정보를 항상 보여줌, 아코디언 요소의 타이틀과 같은 역할 */
+datalist {} /* 특정 input 태그에 대해, 자동완성 기능 제공 */
+/* 미지원 또는 불필요 HTML 태그 목록 */
+/* command, embed, hgroup, keygen(암호화관련, form 내에서 활용), menu, output, ruby(,rt, rp; 한자/가나문자의 발음/훈독 등), wbr, acronym, applet, big, object */
+
+
+/* 인터렉션 요소 */
+a {display:block; color:#333; text-decoration:none; cursor: pointer;}
+input, select, button, textarea {display:block; max-width:100%; outline:none; background:transparent; box-shadow:none; border-radius:0; caret-color:transparent;}
+button {appearance:none; cursor:pointer; font-family:inherit; user-select: none;}
+textarea {resize:none;}
+select {appearance:none; user-select: none;}
+select::-ms-expand {
+  /* IE 8 */
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  /* IE 5-7 */
+  filter: alpha(opacity=0);
+  /* Good browsers :) */
+  opacity:0;
+}
+input::placeholder {opacity:1;  color:#959595;}
+input:focus::placeholder {color:transparent;}
+textarea::placeholder {opacity:1;  color:#959595;}
+textarea:focus::placeholder {color:transparent;}
+[type=button], [type=reset], [type=submit] {appearance: button;}
+[type=search] {appearance: textfield; outline-offset:-2px}
+:-webkit-inner-spin-button, ::-webkit-outer-spin-button {height:auto}
+::-webkit-search-decoration {appearance:none}
+::-webkit-search-cancel-button {caret-color: transparent; border-color: transparent; display: none;}
+::-webkit-file-upload-button {appearance: button;}
+input[type=text] {appearance:none;}
+input[type=date] {appearance:none;}
+input[type=date]::-webkit-inner-spin-button {display:none;}
+input[type=date]::-webkit-calendar-picker-indicator {opacity:0;}
+input[type=date]::-webkit-clear-button {display: none;}
+input[type=date]::-ms-clear {display: none;}
+input[type=number] {appearance:none;}
+input[type=number]::-webkit-inner-spin-button {display:none;}
+input[type=number]::-webkit-calendar-picker-indicator {opacity:0;}
+input[type=number]::-webkit-clear-button {display: none;}
+input[type=number]::-ms-clear {display: none;}
+input[type=range]::-webkit-slider-thumb { -webkit-appearance: none;  -moz-appearance:none;  appearance:none; }
+input[type=range]::-ms-track { cursor:pointer; background: transparent; border-color:transparent; color: transparent; }
+/*input[type=range]::-webkit-slider-runnable-track {} /*슬라이더 영역 스타일링*/
+/*input[type=range]::-webkit-slider-thumb { 
+  -webkit-appearance: none;
+  background: #fff;
+  cursor:pointer;
+  border-radius:50%;
+}*/
+/*input[type=range]::-moz-range-thumb { 
+  background: #fff;
+  cursor:pointer;
+  border-radius:50%;
+}*/
+/*input[type=range]::-ms-thumb { 
+  background: #fff;
+  cursor:pointer;
+  border-radius:50%;
+}*/
+input[type=checkbox] {appearance: checkbox;}
+input[type=time] {}
+input[type=button] {}
+input[type=email] {}
+input[type=password] {}
+input[type=reset] {}
+input[type=search] {}
+input[type=submit] {}
+input[type=tel] {}
+button:disabled {cursor:default;}
+progress { -webkit-appearance: none; border:1px solid #e1e1e1; }
+progress::-webkit-progress-bar { background-color:#fff }
+progress::-webkit-progress-value { background-color:grey; }
+
+// .readonly {display:none;}
+
+/* 텍스트 블록지정 선택 방지 */
+/*
+a {
+  -webkit-touch-callout: none;
+  -webkit-user-select: none;
+  -khtml-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+*/
+
+/* 스크롤바 */
+/* .box {-webkit-overflow-scrolling:touch;} /* 모바일에서 터치로 스크롤 */
+/* .box::-webkit-scrollbar {width:0; height:0;} */ /* 스크롤 영역 ; width(height), background 수정 가능 */
+/* .box::-webkit-scrollbar-thumb {background:transparent;} */ /* 스크롤 막대 ; border-radius, box-shadow, background 수정 가능 */
+/* .box::-webkit-scrollbar-track {background:transparent;} */ /* 스크롤 막대 영역 ; border-radius, background, box-shadow 수정 가능 */
+
+/* 모바일 */
+@media (orientation: landscape) {
+  html.mobile-device {font-size: 1vw;}
+}
+@media (orientation: portrait) {
+  html.mobile-device {font-size: 1vw;}
+}

package/src/style-base/mantine.css

@@ -0,0 +1,4 @@
+@import url("@mantine/core/styles/default-css-variables.css");
+@import url("@mantine/core/styles/global.css");
+@import url("@mantine/dates/styles.css");
+@import url("@mantine/tiptap/styles.css");

package/src/style-base/responsive.scss

@@ -0,0 +1,57 @@
+// 반응형 폰트 사이즈
+// - 기준 해상도: 1920x1080 (FHD) → 10px 고정
+// - FHD 미만: 과도한 확대 방지를 위해 높이/너비 중 더 작은 축을 기준으로 축소
+// - FHD 초과: 너무 작아 보이지 않도록 완만하게 확대 (상한 적용)
+// - Windows 노트북(디스플레이 배율 125%/150%)에서의 과대 확대를 보정하기 위한 DPI 계수 적용
+:root {
+  // 10px @ 1920x1080 기준 스케일
+  // 너비 기준: 10px = (10 / 1920) * 100vw = 0.520833vw
+  // 높이 기준: 10px = (10 / 1080) * 100vh = 0.925926vh
+  // 더 작은 축을 기준으로 스케일(노트북 저해상도/낮은 세로 해상도 환경 보정)
+  --responsive-axis-min: min(0.520833vw, 0.925926vh);
+
+  // 기본 크기 범위(하한/상한): FHD 미만에서 너무 커지는 문제 방지(하한 ↓),
+  // QHD 이상에서 너무 작아 보이는 문제 완화(상한 ↑). 필요 시 수치 미세 조정.
+  --responsive-size: clamp(7px, var(--responsive-axis-min), 14px);
+
+  // DPI 보정 계수: Windows + 125%/150% 배율에서 커지는 현상 완화용
+  // 기본 1.0 → 높은 배율에서 소폭 감소
+  --dpi-factor: 1;
+
+  // 화면 비율 보정 계수(울트라와이드/세로 확장형 등)
+  --aspect-factor: 1;
+
+  // 최종 표준 값: 설계상 기준 rem(=10px @ FHD)을 유지하되, 해상도/배율 보정 적용
+  --responsive-standard: calc(var(--responsive-size) * var(--dpi-factor) * var(--aspect-factor));
+
+  font-size: var(--responsive-standard);
+}
+
+// 고배율(배율 125% 이상 추정) 보정: 소폭 축소
+// DPI 보정: Mac Retina(2dppx)에는 영향이 없도록 범위를 제한
+@media (min-resolution: 1.25dppx) and (max-resolution: 1.49dppx) {
+  :root { --dpi-factor: 0.96; }
+}
+@media (min-resolution: 1.5dppx) and (max-resolution: 1.74dppx) {
+  :root { --dpi-factor: 0.92; }
+}
+
+// QHD 이상에서 상한을 점진적으로 상향해 4K와의 구분감 확보
+@media (min-width: 2560px) and (min-height: 1440px) {
+  :root { --responsive-size: clamp(9px, var(--responsive-axis-min), 15px); }
+}
+@media (min-width: 3200px) and (min-height: 1800px) {
+  :root { --responsive-size: clamp(10px, var(--responsive-axis-min), 15.5px); }
+}
+@media (min-width: 3840px) and (min-height: 2160px) {
+  :root { --responsive-size: clamp(11px, var(--responsive-axis-min), 16px); }
+}
+
+// 울트라와이드(21:9 이상)에서 UI가 상대적으로 작아보이는 현상 완화
+@media (min-aspect-ratio: 21/9) and (min-width: 2560px) {
+  :root { --aspect-factor: 1.04; }
+}
+// 세로 확장형(16:10 이하)에서 과도한 확대 방지
+@media (max-aspect-ratio: 16/10) and (max-width: 1920px) {
+  :root { --aspect-factor: 0.98; }
+}

package/src/style-config/index.ts

@@ -0,0 +1,5 @@
+import stylePostcssConfig from "./postcss/postcss-config";
+
+export const styleConfig = { postcss: stylePostcssConfig };
+
+// export default styleConfig;

package/src/style-config/postcss/postcss-config.ts

@@ -0,0 +1,9 @@
+const stylePostcssConfig = {
+  plugins: {
+    autoprefixer: {},
+    "postcss-preset-mantine": {},
+    "postcss-simple-vars": {},
+  },
+};
+
+export default stylePostcssConfig;

package/src/styled.components.tsx

@@ -0,0 +1,31 @@
+import StyledInput from "./form-field/input/styled";
+import StyledSelect from "./form-field/select/styled";
+import StyledButton from "./button/styled";
+import StyledChip from "./chip/styled";
+import StyledDropdown from "./dropdown/styled";
+import StyledScrollbar from "./scrollbar/styled";
+import StyledTooltipBase from "./tooltip/styled";
+import StyledFrame from "./frame/styled";
+import StyledIcon from "./icon/styled";
+import StyledModal from "./modal/styled";
+import StyledTabMenu from "./tab-menu/styled";
+import StyledTable from "./table/styled";
+import StyledWeather from "./weather/styled";
+import StyledTextEditor from "./text-editor/styled";
+
+export {
+  StyledInput,
+  StyledSelect,
+  StyledButton,
+  StyledChip,
+  StyledDropdown,
+  StyledScrollbar,
+  StyledTooltipBase as StyledTooltip,
+  StyledFrame,
+  StyledTable,
+  StyledIcon,
+  StyledModal,
+  StyledTabMenu,
+  StyledWeather,
+  StyledTextEditor,
+};

package/src/styled.template.tsx

@@ -0,0 +1,5 @@
+import StyledCompare from "./template/compare/styled";
+import StyledFilter from "./template/filter/styled";
+import StyledHealthScore from "./template/health-score/styled";
+
+export { StyledCompare, StyledHealthScore, StyledFilter };