@ihabdevteam/core 0.36.0 → 0.37.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/components.cjs.js +1 -1
- package/dist/components.esm.css +4 -4
- package/dist/hooks.cjs.js +1 -1
- package/dist/ihabdevteam-core-tokens.css +1 -1
- package/dist/ihabdevteam-core.cjs.js +7 -7
- package/dist/ihabdevteam-core.css +1 -1
- package/dist/ihabdevteam-core.d.ts +1 -1
- package/dist/packages/core/src/components/ActionCard.css +3 -11
- package/dist/packages/core/src/components/Badge.css +2 -15
- package/dist/packages/core/src/components/BulkBar.css +1 -3
- package/dist/packages/core/src/components/Button.css +2 -6
- package/dist/packages/core/src/components/Calendar.css +9 -21
- package/dist/packages/core/src/components/CodeBox.css +6 -18
- package/dist/packages/core/src/components/DatePicker.css +1 -3
- package/dist/packages/core/src/components/Dropdown.css +1 -3
- package/dist/packages/core/src/components/FileUpload.css +1 -3
- package/dist/packages/core/src/components/HearingDeviceInfo.css +1 -2
- package/dist/packages/core/src/components/LandingHeader.css +3 -4
- package/dist/packages/core/src/components/Panel.css +3 -8
- package/dist/packages/core/src/components/Popup/DeviceListPopup.css +1 -2
- package/dist/packages/core/src/components/RingChart.css +1 -3
- package/dist/packages/core/src/components/SearchSummary.css +2 -4
- package/dist/packages/core/src/components/Slider.css +2 -5
- package/dist/packages/core/src/components/StatChart.css +2 -7
- package/dist/packages/core/src/components/SummaryStrip.css +0 -5
- package/dist/packages/core/src/components/Table.css +2 -5
- package/dist/packages/core/src/components/Tabs.css +1 -3
- package/dist/packages/core/src/components/TextField.css +2 -6
- package/dist/packages/core/src/components/Toolbar.css +1 -1
- package/dist/packages/core/src/components/Word/PhonemeSelectBlock.css +1 -2
- package/dist/packages/core/src/tokens.css +2 -8
- package/dist/packages/core/src/version.d.ts +1 -1
- package/dist/packages/core/src/version.js +1 -1
- package/dist/utils.cjs.js +1 -1
- package/package.json +1 -4
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.ihabdevteam-core-scope){color-scheme:light;--brand-main:#499cdf;--brand-sub:#4dcdc0;--color-lightMain:var(--brand-lightMain,#d2e2ef);--color-softMain:var(--brand-softMain,#8bbce4);--color-main:var(--brand-main);--color-main-a10:color-mix(in srgb,var(--color-main) 10%,transparent);--color-main-a20:color-mix(in srgb,var(--color-main) 20%,transparent);--color-deepMain:var(--brand-deepMain,#418ecd);--color-darkMain:var(--brand-darkMain,#1e5a8f);--color-lightSub:var(--brand-lightSub,#d5ecea);--color-softSub:var(--brand-softSub,#92ddd5);--color-sub:var(--brand-sub);--color-sub-a10:color-mix(in srgb,var(--color-sub) 10%,transparent);--color-deepSub:var(--brand-deepSub,#45bbaf);--color-darkSub:var(--brand-darkSub,#257e76);--color-text-main:var(--color-darkMain);--color-text-sub:var(--color-darkSub);--color-infoLink:#2f7fd1;--color-uiAccent:#32bbae;--color-success:#2fae9e;--color-warn:#e6b94e;--color-warn-a10:#e6b94e1a;--color-error:#d9534f;--color-error-a10:#d9534f1a;--color-like:#e06b68;--color-disabled:#bfc7d1;--color-pureWhite:#fff;--color-white:#fbfdff;--color-white-a10:#fbfdff1a;--color-white-a30:#fbfdff4d;--color-white-a60:#fbfdff99;--color-white-a80:#fbfdffcc;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-lightGray-a10:#96a4b81a;--color-lightGray-a80:#96a4b8cc;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-gray-a10:#64748b1a;--color-gray-a60:#64748b99;--color-gray-a80:#64748bcc;--color-deepGray:#546170;--color-darkGray:#434d56;--color-darkGray-a10:#434d561a;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-popupBlock:rgba(16,24,32,.6);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-overlay:var(--color-popupBlock);--shadow-popup:20px 20px 20px rgba(0,0,0,.05);--shadow-tooltip:8px 8px 8px rgba(0,0,0,.05);--shadow-button:4px 4px 4px rgba(0,0,0,.05);--shadow-menu:20px 20px 20px rgba(0,0,0,.05);--shadow-card:2px 2px 8px rgba(0,0,0,.06);--shadow-dropdown:8px 8px 24px rgba(0,0,0,.06);--shadow-panel:4px 4px 20px rgba(0,0,0,.06);--font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--text-display-1-size:clamp(44px,6.6vw,72px);--text-display-1-line:1.05;--text-display-1-spacing:-0.04em;--text-display-1-weight:800;--text-display-1-weight-bold:900;--text-display-2-size:clamp(38px,5.2vw,56px);--text-display-2-line:1.12;--text-display-2-spacing:-0.03em;--text-display-2-weight:700;--text-display-2-weight-bold:800;--text-display-3-size:clamp(34px,4.1vw,44px);--text-display-3-line:1.2;--text-display-3-spacing:-0.02em;--text-display-3-weight:700;--text-display-3-weight-bold:800;--text-h0-size:40px;--text-h0-line:52px;--text-h0-spacing:-1px;--text-h0-weight:700;--text-h0-weight-bold:800;--text-h1-size:32px;--text-h1-line:44px;--text-h1-spacing:-0.5px;--text-h1-weight:700;--text-h1-weight-bold:800;--text-h2-size:24px;--text-h2-line:34px;--text-h2-spacing:-0.25px;--text-h2-weight:500;--text-h2-weight-bold:600;--text-h3-size:20px;--text-h3-line:30px;--text-h3-spacing:normal;--text-h3-weight:500;--text-h3-weight-bold:600;--text-h4-size:17px;--text-h4-line:26px;--text-h4-spacing:normal;--text-h4-weight:500;--text-h4-weight-bold:600;--text-h5-size:15px;--text-h5-line:23px;--text-h5-spacing:normal;--text-h5-weight:500;--text-h5-weight-bold:600;--text-body-1-size:18px;--text-body-1-line:28px;--text-body-1-weight:400;--text-body-1-weight-bold:600;--text-body-2-size:16px;--text-body-2-line:26px;--text-body-2-weight:400;--text-body-2-weight-bold:600;--text-body-3-size:14px;--text-body-3-line:22px;--text-body-3-weight:400;--text-body-3-weight-bold:600;--text-button-1-size:14px;--text-button-1-line:20px;--text-button-1-weight:500;--text-button-2-size:13px;--text-button-2-line:18px;--text-button-2-weight:400;--text-caption-1-size:12px;--text-caption-1-line:17px;--text-caption-1-weight:400;--text-caption-1-weight-bold:600;--text-caption-2-size:11px;--text-caption-2-line:15px;--text-caption-2-weight:400;--text-caption-2-weight-bold:600;--spacing-xs:8px;--spacing-s:12px;--spacing-m:16px;--spacing-l:20px;--spacing-xl:24px;--spacing-page:60px;--spacing-content:20px;--container-page:1920px;--margin-page:var(--spacing-page);--margin-content:var(--spacing-content);--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.22,0.9,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--bp-tablet:768px;--bp-desktop:1024px;--radius-xs:4px;--radius-sm:8px;--radius-s:10px;--radius-card:12px;--radius-m:20px;--radius-l:40px;--radius-full:999px;--radius-dialog:var(--radius-m);--z-base:0;--z-content:1;--z-dropdown:200;--z-sticky:500;--z-nav:1000;--z-sidebar:1100;--z-overlay:2000;--z-page-popup:2100;--z-fab:2150;--z-modal:2200;--focus-ring:var(--color-deepMain);--z-popover:2300;--z-tooltip:3000;--z-alert:3100;--z-toast:3200}@media (min-width:768px) and (max-width:1023px){:where(.ihabdevteam-core-scope){--spacing-page:40px;--spacing-content:15px;--text-h0-size:32px;--text-h0-line:44px;--text-h0-spacing:-0.75px;--text-h1-size:28px;--text-h1-line:40px;--text-h1-spacing:-0.4px;--text-h2-size:22px;--text-h2-line:32px;--text-h2-spacing:-0.2px;--text-h3-size:18px;--text-h3-line:28px;--text-h4-size:16px;--text-h4-line:24px;--text-h5-size:14px;--text-h5-line:21px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:24px;--text-body-3-size:14px;--text-body-3-line:22px}}@media (max-width:767px){:where(.ihabdevteam-core-scope){--spacing-page:20px;--spacing-content:10px;--text-h0-size:28px;--text-h0-line:38px;--text-h0-spacing:-0.5px;--text-h1-size:24px;--text-h1-line:34px;--text-h1-spacing:-0.3px;--text-h2-size:20px;--text-h2-line:29px;--text-h2-spacing:-0.2px;--text-h3-size:17px;--text-h3-line:26px;--text-h4-size:15px;--text-h4-line:23px;--text-h5-size:13px;--text-h5-line:20px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:23px;--text-body-3-size:13px;--text-body-3-line:21px}}.ihabdevteam-core-scope [data-font-scale=large1]{--text-h4-size:19px;--text-h4-line:29px;--text-h5-size:17px;--text-h5-line:26px;--text-body-1-size:20px;--text-body-1-line:31px;--text-body-2-size:18px;--text-body-2-line:28px;--text-body-3-size:16px;--text-body-3-line:25px;--text-button-1-size:16px;--text-button-1-line:23px;--text-button-2-size:15px;--text-button-2-line:21px;--text-caption-1-size:14px;--text-caption-1-line:20px;--text-caption-2-size:12px;--text-caption-2-line:17px}.ihabdevteam-core-scope [data-font-scale=large2]{--text-h4-size:21px;--text-h4-line:32px;--text-h5-size:19px;--text-h5-line:29px;--text-body-1-size:23px;--text-body-1-line:36px;--text-body-2-size:20px;--text-body-2-line:31px;--text-body-3-size:18px;--text-body-3-line:28px;--text-button-1-size:18px;--text-button-1-line:26px;--text-button-2-size:16px;--text-button-2-line:23px;--text-caption-1-size:15px;--text-caption-1-line:21px;--text-caption-2-size:14px;--text-caption-2-line:19px}.ihabdevteam-core-scope [data-font-scale=large3]{--text-h4-size:23px;--text-h4-line:35px;--text-h5-size:21px;--text-h5-line:32px;--text-body-1-size:25px;--text-body-1-line:39px;--text-body-2-size:22px;--text-body-2-line:34px;--text-body-3-size:19px;--text-body-3-line:30px;--text-button-1-size:19px;--text-button-1-line:27px;--text-button-2-size:18px;--text-button-2-line:26px;--text-caption-1-size:17px;--text-caption-1-line:24px;--text-caption-2-size:15px;--text-caption-2-line:21px}.ihabdevteam-core-scope [data-theme=dark],.ihabdevteam-core-scope[data-theme=dark],[data-theme=dark] .ihabdevteam-core-scope{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-text-main:var(--color-softMain);--color-text-sub:var(--color-softSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}@media (prefers-color-scheme:dark){.ihabdevteam-core-scope :root:not([data-theme=light]):not([data-theme=dark]),.ihabdevteam-core-scope [data-theme=auto],.ihabdevteam-core-scope[data-theme=auto],[data-theme=auto] .ihabdevteam-core-scope{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-text-main:var(--color-softMain);--color-text-sub:var(--color-softSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.force-light-scheme .ihabdevteam-core-scope,.ihabdevteam-core-scope .force-light-scheme,.ihabdevteam-core-scope.force-light-scheme{color-scheme:light;--color-pureWhite:#fff;--color-white:#fbfdff;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-deepGray:#546170;--color-darkGray:#434d56;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-disabled:#bfc7d1;--color-text-main:var(--color-darkMain);--color-text-sub:var(--color-darkSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine)}@media (hover:none){.ihabdevteam-core-scope [role=button]:hover,.ihabdevteam-core-scope a:hover,.ihabdevteam-core-scope button:hover{opacity:1}}.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{box-sizing:border-box}.ihabdevteam-core-scope{margin:0}.ihabdevteam-core-scope button,.ihabdevteam-core-scope input,.ihabdevteam-core-scope select,.ihabdevteam-core-scope textarea{font-family:inherit}:where(.ihabdevteam-core-scope) :where(.display-1),:where(.ihabdevteam-core-scope) :where(.display-1b){font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);letter-spacing:-.04em;letter-spacing:var(--text-display-1-spacing);line-height:1.05;line-height:var(--text-display-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-2),:where(.ihabdevteam-core-scope) :where(.display-2b){font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);letter-spacing:-.03em;letter-spacing:var(--text-display-2-spacing);line-height:1.12;line-height:var(--text-display-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-3),:where(.ihabdevteam-core-scope) :where(.display-3b){font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);letter-spacing:-.02em;letter-spacing:var(--text-display-3-spacing);line-height:1.2;line-height:var(--text-display-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-1){font-weight:800;font-weight:var(--text-display-1-weight)}:where(.ihabdevteam-core-scope) :where(.display-2){font-weight:700;font-weight:var(--text-display-2-weight)}:where(.ihabdevteam-core-scope) :where(.display-3){font-weight:700;font-weight:var(--text-display-3-weight)}:where(.ihabdevteam-core-scope) :where(.display-1b){font-weight:900;font-weight:var(--text-display-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-2b){font-weight:800;font-weight:var(--text-display-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-3b){font-weight:800;font-weight:var(--text-display-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h0),:where(.ihabdevteam-core-scope) :where(.h0b){font-size:40px;font-size:var(--text-h0-size);letter-spacing:-1px;letter-spacing:var(--text-h0-spacing);line-height:52px;line-height:var(--text-h0-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h1),:where(.ihabdevteam-core-scope) :where(.h1b){font-size:32px;font-size:var(--text-h1-size);letter-spacing:-.5px;letter-spacing:var(--text-h1-spacing);line-height:44px;line-height:var(--text-h1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h2),:where(.ihabdevteam-core-scope) :where(.h2b){font-size:24px;font-size:var(--text-h2-size);letter-spacing:-.25px;letter-spacing:var(--text-h2-spacing);line-height:34px;line-height:var(--text-h2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h3),:where(.ihabdevteam-core-scope) :where(.h3b){font-size:20px;font-size:var(--text-h3-size);letter-spacing:normal;letter-spacing:var(--text-h3-spacing);line-height:30px;line-height:var(--text-h3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h4),:where(.ihabdevteam-core-scope) :where(.h4b){font-size:17px;font-size:var(--text-h4-size);letter-spacing:normal;letter-spacing:var(--text-h4-spacing);line-height:26px;line-height:var(--text-h4-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h5),:where(.ihabdevteam-core-scope) :where(.h5b){font-size:15px;font-size:var(--text-h5-size);letter-spacing:normal;letter-spacing:var(--text-h5-spacing);line-height:23px;line-height:var(--text-h5-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h0){font-weight:700;font-weight:var(--text-h0-weight)}:where(.ihabdevteam-core-scope) :where(.h1){font-weight:700;font-weight:var(--text-h1-weight)}:where(.ihabdevteam-core-scope) :where(.h2){font-weight:500;font-weight:var(--text-h2-weight)}:where(.ihabdevteam-core-scope) :where(.h3){font-weight:500;font-weight:var(--text-h3-weight)}:where(.ihabdevteam-core-scope) :where(.h4){font-weight:500;font-weight:var(--text-h4-weight)}:where(.ihabdevteam-core-scope) :where(.h5){font-weight:500;font-weight:var(--text-h5-weight)}:where(.ihabdevteam-core-scope) :where(.h0b){font-weight:800;font-weight:var(--text-h0-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h1b){font-weight:800;font-weight:var(--text-h1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h2b){font-weight:600;font-weight:var(--text-h2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h3b){font-weight:600;font-weight:var(--text-h3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h4b){font-weight:600;font-weight:var(--text-h4-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h5b){font-weight:600;font-weight:var(--text-h5-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-1),:where(.ihabdevteam-core-scope) :where(.body-1b){font-size:18px;font-size:var(--text-body-1-size);font-weight:400;font-weight:var(--text-body-1-weight);line-height:28px;line-height:var(--text-body-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-2),:where(.ihabdevteam-core-scope) :where(.body-2b){font-size:16px;font-size:var(--text-body-2-size);font-weight:400;font-weight:var(--text-body-2-weight);line-height:26px;line-height:var(--text-body-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-3),:where(.ihabdevteam-core-scope) :where(.body-3b){font-size:14px;font-size:var(--text-body-3-size);font-weight:400;font-weight:var(--text-body-3-weight);line-height:22px;line-height:var(--text-body-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-1b){font-weight:600;font-weight:var(--text-body-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-2b){font-weight:600;font-weight:var(--text-body-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-3b){font-weight:600;font-weight:var(--text-body-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.button-1){font-size:14px;font-size:var(--text-button-1-size);font-weight:500;font-weight:var(--text-button-1-weight);line-height:20px;line-height:var(--text-button-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.button-2){font-size:13px;font-size:var(--text-button-2-size);font-weight:400;font-weight:var(--text-button-2-weight);line-height:18px;line-height:var(--text-button-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1),:where(.ihabdevteam-core-scope) :where(.caption-1b){font-size:12px;font-size:var(--text-caption-1-size);font-weight:400;font-weight:var(--text-caption-1-weight);line-height:17px;line-height:var(--text-caption-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-2),:where(.ihabdevteam-core-scope) :where(.caption-2b){font-size:11px;font-size:var(--text-caption-2-size);font-weight:400;font-weight:var(--text-caption-2-weight);line-height:15px;line-height:var(--text-caption-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1b){font-weight:600;font-weight:var(--text-caption-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.caption-2b){font-weight:600;font-weight:var(--text-caption-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-1{font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);font-weight:800;font-weight:var(--text-display-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-1b{font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);font-weight:900;font-weight:var(--text-display-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-2{font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);font-weight:700;font-weight:var(--text-display-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-2b{font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);font-weight:800;font-weight:var(--text-display-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-3{font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);font-weight:700;font-weight:var(--text-display-3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-3b{font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);font-weight:800;font-weight:var(--text-display-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h0{font-size:40px;font-size:var(--text-h0-size);font-weight:700;font-weight:var(--text-h0-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h0b{font-size:40px;font-size:var(--text-h0-size);font-weight:800;font-weight:var(--text-h0-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h1{font-size:32px;font-size:var(--text-h1-size);font-weight:700;font-weight:var(--text-h1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h1b{font-size:32px;font-size:var(--text-h1-size);font-weight:800;font-weight:var(--text-h1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h2{font-size:24px;font-size:var(--text-h2-size);font-weight:500;font-weight:var(--text-h2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h2b{font-size:24px;font-size:var(--text-h2-size);font-weight:600;font-weight:var(--text-h2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h3{font-size:20px;font-size:var(--text-h3-size);font-weight:500;font-weight:var(--text-h3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h3b{font-size:20px;font-size:var(--text-h3-size);font-weight:600;font-weight:var(--text-h3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h4{font-size:17px;font-size:var(--text-h4-size);font-weight:500;font-weight:var(--text-h4-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h4b{font-size:17px;font-size:var(--text-h4-size);font-weight:600;font-weight:var(--text-h4-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h5{font-size:15px;font-size:var(--text-h5-size);font-weight:500;font-weight:var(--text-h5-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h5b{font-size:15px;font-size:var(--text-h5-size);font-weight:600;font-weight:var(--text-h5-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-1{font-size:18px;font-size:var(--text-body-1-size);font-weight:400;font-weight:var(--text-body-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-1b{font-size:18px;font-size:var(--text-body-1-size);font-weight:600;font-weight:var(--text-body-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-2{font-size:16px;font-size:var(--text-body-2-size);font-weight:400;font-weight:var(--text-body-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-2b{font-size:16px;font-size:var(--text-body-2-size);font-weight:600;font-weight:var(--text-body-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-3{font-size:14px;font-size:var(--text-body-3-size);font-weight:400;font-weight:var(--text-body-3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-3b{font-size:14px;font-size:var(--text-body-3-size);font-weight:600;font-weight:var(--text-body-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-1{font-size:12px;font-size:var(--text-caption-1-size);font-weight:400;font-weight:var(--text-caption-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-1b{font-size:12px;font-size:var(--text-caption-1-size);font-weight:600;font-weight:var(--text-caption-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-2{font-size:11px;font-size:var(--text-caption-2-size);font-weight:400;font-weight:var(--text-caption-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-2b{font-size:11px;font-size:var(--text-caption-2-size);font-weight:600;font-weight:var(--text-caption-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).button-1{font-size:14px;font-size:var(--text-button-1-size);font-weight:500;font-weight:var(--text-button-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).button-2{font-size:13px;font-size:var(--text-button-2-size);font-weight:400;font-weight:var(--text-button-2-weight)}.ihabdevteam-core-scope ::-webkit-scrollbar{height:6px;width:6px}.ihabdevteam-core-scope ::-webkit-scrollbar-track{background:transparent}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb{background:#eef2f6;background:var(--color-darkWhite);border-radius:3px}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb:hover{background:#96a4b8;background:var(--color-lightGray)}.ihabdevteam-core-scope *{scrollbar-color:#eef2f6 transparent;scrollbar-color:var(--color-darkWhite) transparent;scrollbar-width:thin}@keyframes sub-to-main{0%{background-color:#4dcdc0;background-color:var(--color-sub)}to{background-color:#499cdf;background-color:var(--color-main)}}.ihabdevteam-core-scope .safearea{margin:0 auto;max-width:1920px;max-width:var(--container-page);width:100%}.ihabdevteam-core-scope{color:#111;color:var(--color-black);font-family:Pretendard Variable,Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-family:var(--font-family);overflow-wrap:anywhere;white-space:normal;word-break:keep-all}.ihabdevteam-core-scope :focus-visible{outline:2px solid #418ecd;outline:2px solid var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
|
1
|
+
:where(.ihabdevteam-core-scope){color-scheme:light;--brand-main:#499cdf;--brand-sub:#4dcdc0;--color-lightMain:var(--brand-lightMain,#d2e2ef);--color-softMain:var(--brand-softMain,#8bbce4);--color-main:var(--brand-main);--color-main-a10:color-mix(in srgb,var(--color-main) 10%,transparent);--color-main-a20:color-mix(in srgb,var(--color-main) 20%,transparent);--color-deepMain:var(--brand-deepMain,#418ecd);--color-darkMain:var(--brand-darkMain,#1e5a8f);--color-lightSub:var(--brand-lightSub,#d5ecea);--color-softSub:var(--brand-softSub,#92ddd5);--color-sub:var(--brand-sub);--color-sub-a10:color-mix(in srgb,var(--color-sub) 10%,transparent);--color-deepSub:var(--brand-deepSub,#45bbaf);--color-darkSub:var(--brand-darkSub,#257e76);--color-text-main:var(--color-darkMain);--color-text-sub:var(--color-darkSub);--color-infoLink:#2f7fd1;--color-uiAccent:#32bbae;--color-success:#2fae9e;--color-warn:#e6b94e;--color-warn-a10:#e6b94e1a;--color-error:#d9534f;--color-error-a10:#d9534f1a;--color-like:#e06b68;--color-disabled:#bfc7d1;--color-pureWhite:#fff;--color-white:#fbfdff;--color-white-a10:#fbfdff1a;--color-white-a30:#fbfdff4d;--color-white-a60:#fbfdff99;--color-white-a80:#fbfdffcc;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-lightGray-a10:#96a4b81a;--color-lightGray-a80:#96a4b8cc;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-gray-a10:#64748b1a;--color-gray-a60:#64748b99;--color-gray-a80:#64748bcc;--color-deepGray:#546170;--color-darkGray:#434d56;--color-darkGray-a10:#434d561a;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-popupBlock:rgba(16,24,32,.6);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-overlay:var(--color-popupBlock);--shadow-popup:20px 20px 20px rgba(0,0,0,.05);--shadow-tooltip:8px 8px 8px rgba(0,0,0,.05);--shadow-button:4px 4px 4px rgba(0,0,0,.05);--shadow-menu:20px 20px 20px rgba(0,0,0,.05);--shadow-card:2px 2px 8px rgba(0,0,0,.06);--shadow-dropdown:8px 8px 24px rgba(0,0,0,.06);--shadow-panel:4px 4px 20px rgba(0,0,0,.06);--font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--text-display-1-size:clamp(44px,6.6vw,72px);--text-display-1-line:1.05;--text-display-1-spacing:-0.04em;--text-display-1-weight:800;--text-display-1-weight-bold:900;--text-display-2-size:clamp(38px,5.2vw,56px);--text-display-2-line:1.12;--text-display-2-spacing:-0.03em;--text-display-2-weight:700;--text-display-2-weight-bold:800;--text-display-3-size:clamp(34px,4.1vw,44px);--text-display-3-line:1.2;--text-display-3-spacing:-0.02em;--text-display-3-weight:700;--text-display-3-weight-bold:800;--text-h0-size:40px;--text-h0-line:52px;--text-h0-spacing:-1px;--text-h0-weight:700;--text-h0-weight-bold:800;--text-h1-size:32px;--text-h1-line:44px;--text-h1-spacing:-0.5px;--text-h1-weight:700;--text-h1-weight-bold:800;--text-h2-size:24px;--text-h2-line:34px;--text-h2-spacing:-0.25px;--text-h2-weight:500;--text-h2-weight-bold:600;--text-h3-size:20px;--text-h3-line:30px;--text-h3-spacing:normal;--text-h3-weight:500;--text-h3-weight-bold:600;--text-h4-size:17px;--text-h4-line:26px;--text-h4-spacing:normal;--text-h4-weight:500;--text-h4-weight-bold:600;--text-h5-size:15px;--text-h5-line:23px;--text-h5-spacing:normal;--text-h5-weight:500;--text-h5-weight-bold:600;--text-body-1-size:18px;--text-body-1-line:28px;--text-body-1-weight:400;--text-body-1-weight-bold:600;--text-body-2-size:16px;--text-body-2-line:26px;--text-body-2-weight:400;--text-body-2-weight-bold:600;--text-body-3-size:14px;--text-body-3-line:22px;--text-body-3-weight:400;--text-body-3-weight-bold:600;--text-button-1-size:14px;--text-button-1-line:20px;--text-button-1-weight:500;--text-button-2-size:13px;--text-button-2-line:18px;--text-button-2-weight:400;--text-caption-1-size:12px;--text-caption-1-line:17px;--text-caption-1-weight:400;--text-caption-1-weight-bold:600;--text-caption-2-size:11px;--text-caption-2-line:15px;--text-caption-2-weight:400;--text-caption-2-weight-bold:600;--spacing-xs:8px;--spacing-s:12px;--spacing-m:16px;--spacing-l:20px;--spacing-xl:24px;--spacing-page:60px;--spacing-content:20px;--container-page:1920px;--margin-page:var(--spacing-page);--margin-content:var(--spacing-content);--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.22,0.9,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--bp-tablet:768px;--bp-desktop:1024px;--radius-xs:4px;--radius-sm:8px;--radius-s:10px;--radius-card:12px;--radius-m:20px;--radius-l:40px;--radius-full:999px;--radius-dialog:var(--radius-m);--z-base:0;--z-content:1;--z-dropdown:200;--z-sticky:500;--z-nav:1000;--z-sidebar:1100;--z-overlay:2000;--z-page-popup:2100;--z-fab:2150;--z-modal:2200;--focus-ring:var(--color-main);--z-popover:2300;--z-tooltip:3000;--z-alert:3100;--z-toast:3200}@media (min-width:768px) and (max-width:1023px){:where(.ihabdevteam-core-scope){--spacing-page:40px;--spacing-content:15px;--text-h0-size:32px;--text-h0-line:44px;--text-h0-spacing:-0.75px;--text-h1-size:28px;--text-h1-line:40px;--text-h1-spacing:-0.4px;--text-h2-size:22px;--text-h2-line:32px;--text-h2-spacing:-0.2px;--text-h3-size:18px;--text-h3-line:28px;--text-h4-size:16px;--text-h4-line:24px;--text-h5-size:14px;--text-h5-line:21px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:24px;--text-body-3-size:14px;--text-body-3-line:22px}}@media (max-width:767px){:where(.ihabdevteam-core-scope){--spacing-page:20px;--spacing-content:10px;--text-h0-size:28px;--text-h0-line:38px;--text-h0-spacing:-0.5px;--text-h1-size:24px;--text-h1-line:34px;--text-h1-spacing:-0.3px;--text-h2-size:20px;--text-h2-line:29px;--text-h2-spacing:-0.2px;--text-h3-size:17px;--text-h3-line:26px;--text-h4-size:15px;--text-h4-line:23px;--text-h5-size:13px;--text-h5-line:20px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:23px;--text-body-3-size:13px;--text-body-3-line:21px}}.ihabdevteam-core-scope [data-font-scale=large1]{--text-h4-size:19px;--text-h4-line:29px;--text-h5-size:17px;--text-h5-line:26px;--text-body-1-size:20px;--text-body-1-line:31px;--text-body-2-size:18px;--text-body-2-line:28px;--text-body-3-size:16px;--text-body-3-line:25px;--text-button-1-size:16px;--text-button-1-line:23px;--text-button-2-size:15px;--text-button-2-line:21px;--text-caption-1-size:14px;--text-caption-1-line:20px;--text-caption-2-size:12px;--text-caption-2-line:17px}.ihabdevteam-core-scope [data-font-scale=large2]{--text-h4-size:21px;--text-h4-line:32px;--text-h5-size:19px;--text-h5-line:29px;--text-body-1-size:23px;--text-body-1-line:36px;--text-body-2-size:20px;--text-body-2-line:31px;--text-body-3-size:18px;--text-body-3-line:28px;--text-button-1-size:18px;--text-button-1-line:26px;--text-button-2-size:16px;--text-button-2-line:23px;--text-caption-1-size:15px;--text-caption-1-line:21px;--text-caption-2-size:14px;--text-caption-2-line:19px}.ihabdevteam-core-scope [data-font-scale=large3]{--text-h4-size:23px;--text-h4-line:35px;--text-h5-size:21px;--text-h5-line:32px;--text-body-1-size:25px;--text-body-1-line:39px;--text-body-2-size:22px;--text-body-2-line:34px;--text-body-3-size:19px;--text-body-3-line:30px;--text-button-1-size:19px;--text-button-1-line:27px;--text-button-2-size:18px;--text-button-2-line:26px;--text-caption-1-size:17px;--text-caption-1-line:24px;--text-caption-2-size:15px;--text-caption-2-line:21px}.ihabdevteam-core-scope [data-theme=dark],.ihabdevteam-core-scope[data-theme=dark],[data-theme=dark] .ihabdevteam-core-scope{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-text-main:var(--color-softMain);--color-text-sub:var(--color-softSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}@media (prefers-color-scheme:dark){.ihabdevteam-core-scope :root:not([data-theme=light]):not([data-theme=dark]),.ihabdevteam-core-scope [data-theme=auto],.ihabdevteam-core-scope[data-theme=auto],[data-theme=auto] .ihabdevteam-core-scope{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-text-main:var(--color-softMain);--color-text-sub:var(--color-softSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.force-light-scheme .ihabdevteam-core-scope,.ihabdevteam-core-scope .force-light-scheme,.ihabdevteam-core-scope.force-light-scheme{color-scheme:light;--color-pureWhite:#fff;--color-white:#fbfdff;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-deepGray:#546170;--color-darkGray:#434d56;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-disabled:#bfc7d1;--color-text-main:var(--color-darkMain);--color-text-sub:var(--color-darkSub);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine)}@media (hover:none){.ihabdevteam-core-scope [role=button]:hover,.ihabdevteam-core-scope a:hover,.ihabdevteam-core-scope button:hover{opacity:1}}.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{box-sizing:border-box}.ihabdevteam-core-scope{margin:0}.ihabdevteam-core-scope button,.ihabdevteam-core-scope input,.ihabdevteam-core-scope select,.ihabdevteam-core-scope textarea{font-family:inherit}:where(.ihabdevteam-core-scope) :where(.display-1),:where(.ihabdevteam-core-scope) :where(.display-1b){font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);letter-spacing:-.04em;letter-spacing:var(--text-display-1-spacing);line-height:1.05;line-height:var(--text-display-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-2),:where(.ihabdevteam-core-scope) :where(.display-2b){font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);letter-spacing:-.03em;letter-spacing:var(--text-display-2-spacing);line-height:1.12;line-height:var(--text-display-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-3),:where(.ihabdevteam-core-scope) :where(.display-3b){font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);letter-spacing:-.02em;letter-spacing:var(--text-display-3-spacing);line-height:1.2;line-height:var(--text-display-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-1){font-weight:800;font-weight:var(--text-display-1-weight)}:where(.ihabdevteam-core-scope) :where(.display-2){font-weight:700;font-weight:var(--text-display-2-weight)}:where(.ihabdevteam-core-scope) :where(.display-3){font-weight:700;font-weight:var(--text-display-3-weight)}:where(.ihabdevteam-core-scope) :where(.display-1b){font-weight:900;font-weight:var(--text-display-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-2b){font-weight:800;font-weight:var(--text-display-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-3b){font-weight:800;font-weight:var(--text-display-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h0),:where(.ihabdevteam-core-scope) :where(.h0b){font-size:40px;font-size:var(--text-h0-size);letter-spacing:-1px;letter-spacing:var(--text-h0-spacing);line-height:52px;line-height:var(--text-h0-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h1),:where(.ihabdevteam-core-scope) :where(.h1b){font-size:32px;font-size:var(--text-h1-size);letter-spacing:-.5px;letter-spacing:var(--text-h1-spacing);line-height:44px;line-height:var(--text-h1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h2),:where(.ihabdevteam-core-scope) :where(.h2b){font-size:24px;font-size:var(--text-h2-size);letter-spacing:-.25px;letter-spacing:var(--text-h2-spacing);line-height:34px;line-height:var(--text-h2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h3),:where(.ihabdevteam-core-scope) :where(.h3b){font-size:20px;font-size:var(--text-h3-size);letter-spacing:normal;letter-spacing:var(--text-h3-spacing);line-height:30px;line-height:var(--text-h3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h4),:where(.ihabdevteam-core-scope) :where(.h4b){font-size:17px;font-size:var(--text-h4-size);letter-spacing:normal;letter-spacing:var(--text-h4-spacing);line-height:26px;line-height:var(--text-h4-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h5),:where(.ihabdevteam-core-scope) :where(.h5b){font-size:15px;font-size:var(--text-h5-size);letter-spacing:normal;letter-spacing:var(--text-h5-spacing);line-height:23px;line-height:var(--text-h5-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h0){font-weight:700;font-weight:var(--text-h0-weight)}:where(.ihabdevteam-core-scope) :where(.h1){font-weight:700;font-weight:var(--text-h1-weight)}:where(.ihabdevteam-core-scope) :where(.h2){font-weight:500;font-weight:var(--text-h2-weight)}:where(.ihabdevteam-core-scope) :where(.h3){font-weight:500;font-weight:var(--text-h3-weight)}:where(.ihabdevteam-core-scope) :where(.h4){font-weight:500;font-weight:var(--text-h4-weight)}:where(.ihabdevteam-core-scope) :where(.h5){font-weight:500;font-weight:var(--text-h5-weight)}:where(.ihabdevteam-core-scope) :where(.h0b){font-weight:800;font-weight:var(--text-h0-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h1b){font-weight:800;font-weight:var(--text-h1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h2b){font-weight:600;font-weight:var(--text-h2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h3b){font-weight:600;font-weight:var(--text-h3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h4b){font-weight:600;font-weight:var(--text-h4-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h5b){font-weight:600;font-weight:var(--text-h5-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-1),:where(.ihabdevteam-core-scope) :where(.body-1b){font-size:18px;font-size:var(--text-body-1-size);font-weight:400;font-weight:var(--text-body-1-weight);line-height:28px;line-height:var(--text-body-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-2),:where(.ihabdevteam-core-scope) :where(.body-2b){font-size:16px;font-size:var(--text-body-2-size);font-weight:400;font-weight:var(--text-body-2-weight);line-height:26px;line-height:var(--text-body-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-3),:where(.ihabdevteam-core-scope) :where(.body-3b){font-size:14px;font-size:var(--text-body-3-size);font-weight:400;font-weight:var(--text-body-3-weight);line-height:22px;line-height:var(--text-body-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-1b){font-weight:600;font-weight:var(--text-body-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-2b){font-weight:600;font-weight:var(--text-body-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-3b){font-weight:600;font-weight:var(--text-body-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.button-1){font-size:14px;font-size:var(--text-button-1-size);font-weight:500;font-weight:var(--text-button-1-weight);line-height:20px;line-height:var(--text-button-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.button-2){font-size:13px;font-size:var(--text-button-2-size);font-weight:400;font-weight:var(--text-button-2-weight);line-height:18px;line-height:var(--text-button-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1),:where(.ihabdevteam-core-scope) :where(.caption-1b){font-size:12px;font-size:var(--text-caption-1-size);font-weight:400;font-weight:var(--text-caption-1-weight);line-height:17px;line-height:var(--text-caption-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-2),:where(.ihabdevteam-core-scope) :where(.caption-2b){font-size:11px;font-size:var(--text-caption-2-size);font-weight:400;font-weight:var(--text-caption-2-weight);line-height:15px;line-height:var(--text-caption-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1b){font-weight:600;font-weight:var(--text-caption-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.caption-2b){font-weight:600;font-weight:var(--text-caption-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-1{font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);font-weight:800;font-weight:var(--text-display-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-1b{font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);font-weight:900;font-weight:var(--text-display-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-2{font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);font-weight:700;font-weight:var(--text-display-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-2b{font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);font-weight:800;font-weight:var(--text-display-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-3{font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);font-weight:700;font-weight:var(--text-display-3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).display-3b{font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);font-weight:800;font-weight:var(--text-display-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h0{font-size:40px;font-size:var(--text-h0-size);font-weight:700;font-weight:var(--text-h0-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h0b{font-size:40px;font-size:var(--text-h0-size);font-weight:800;font-weight:var(--text-h0-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h1{font-size:32px;font-size:var(--text-h1-size);font-weight:700;font-weight:var(--text-h1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h1b{font-size:32px;font-size:var(--text-h1-size);font-weight:800;font-weight:var(--text-h1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h2{font-size:24px;font-size:var(--text-h2-size);font-weight:500;font-weight:var(--text-h2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h2b{font-size:24px;font-size:var(--text-h2-size);font-weight:600;font-weight:var(--text-h2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h3{font-size:20px;font-size:var(--text-h3-size);font-weight:500;font-weight:var(--text-h3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h3b{font-size:20px;font-size:var(--text-h3-size);font-weight:600;font-weight:var(--text-h3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h4{font-size:17px;font-size:var(--text-h4-size);font-weight:500;font-weight:var(--text-h4-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h4b{font-size:17px;font-size:var(--text-h4-size);font-weight:600;font-weight:var(--text-h4-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h5{font-size:15px;font-size:var(--text-h5-size);font-weight:500;font-weight:var(--text-h5-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).h5b{font-size:15px;font-size:var(--text-h5-size);font-weight:600;font-weight:var(--text-h5-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-1{font-size:18px;font-size:var(--text-body-1-size);font-weight:400;font-weight:var(--text-body-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-1b{font-size:18px;font-size:var(--text-body-1-size);font-weight:600;font-weight:var(--text-body-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-2{font-size:16px;font-size:var(--text-body-2-size);font-weight:400;font-weight:var(--text-body-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-2b{font-size:16px;font-size:var(--text-body-2-size);font-weight:600;font-weight:var(--text-body-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-3{font-size:14px;font-size:var(--text-body-3-size);font-weight:400;font-weight:var(--text-body-3-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).body-3b{font-size:14px;font-size:var(--text-body-3-size);font-weight:600;font-weight:var(--text-body-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-1{font-size:12px;font-size:var(--text-caption-1-size);font-weight:400;font-weight:var(--text-caption-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-1b{font-size:12px;font-size:var(--text-caption-1-size);font-weight:600;font-weight:var(--text-caption-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-2{font-size:11px;font-size:var(--text-caption-2-size);font-weight:400;font-weight:var(--text-caption-2-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).caption-2b{font-size:11px;font-size:var(--text-caption-2-size);font-weight:600;font-weight:var(--text-caption-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).button-1{font-size:14px;font-size:var(--text-button-1-size);font-weight:500;font-weight:var(--text-button-1-weight)}:where(.ihabdevteam-core-scope) :where(h1,h2,h3,h4,h5,h6).button-2{font-size:13px;font-size:var(--text-button-2-size);font-weight:400;font-weight:var(--text-button-2-weight)}.ihabdevteam-core-scope ::-webkit-scrollbar{height:6px;width:6px}.ihabdevteam-core-scope ::-webkit-scrollbar-track{background:transparent}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb{background:#eef2f6;background:var(--color-darkWhite);border-radius:3px}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb:hover{background:#96a4b8;background:var(--color-lightGray)}.ihabdevteam-core-scope *{scrollbar-color:#eef2f6 transparent;scrollbar-color:var(--color-darkWhite) transparent;scrollbar-width:thin}@keyframes sub-to-main{0%{background-color:#4dcdc0;background-color:var(--color-sub)}to{background-color:#499cdf;background-color:var(--color-main)}}.ihabdevteam-core-scope .safearea{margin:0 auto;max-width:1920px;max-width:var(--container-page);width:100%}.ihabdevteam-core-scope{color:#111;color:var(--color-black);font-family:Pretendard Variable,Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-family:var(--font-family);overflow-wrap:anywhere;white-space:normal;word-break:keep-all}.ihabdevteam-core-scope :focus-visible{outline:2px solid #499cdf;outline:2px solid var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
|
|
@@ -1268,7 +1268,7 @@ export declare function copyText(text: string): Promise<boolean>;
|
|
|
1268
1268
|
*
|
|
1269
1269
|
* 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
|
|
1270
1270
|
*/
|
|
1271
|
-
export declare const CORE_VERSION = "0.
|
|
1271
|
+
export declare const CORE_VERSION = "0.37.0";
|
|
1272
1272
|
|
|
1273
1273
|
/** @public */
|
|
1274
1274
|
declare const coreDefault: Record<string, unknown>;
|
|
@@ -1,14 +1,8 @@
|
|
|
1
1
|
/* 큰 정사각형 선택 카드 — 아이콘 · 제목 · 설명 · 행선지(CTA) */
|
|
2
2
|
.action-card {
|
|
3
|
-
/* tone 색: main 이 기본, sub 는 modifier 에서
|
|
4
|
-
**면과 글자를 가른다.** --ac-color 는 면을 칠하는 브랜드색이라 흰 카드 위
|
|
5
|
-
글자로 쓰면 안 읽힌다(main 2.90 · sub 1.91, 본문 기준 4.5). 바닥 행선지
|
|
6
|
-
글씨는 16px/600 이라 4.5 가 걸리므로 짙은 짝을 따로 둔다.
|
|
7
|
-
카드 색을 갈아 끼우는 쪽은 **둘 다** 덮어야 한다 — --ac-color 만 바꾸면
|
|
8
|
-
테두리·칩만 따라오고 글씨는 그대로다. 일부러 그렇게 두었다. */
|
|
3
|
+
/* tone 색: main 이 기본, sub 는 modifier 에서 덮는다 */
|
|
9
4
|
--ac-color: var(--color-main);
|
|
10
5
|
--ac-color-a10: var(--color-main-a10);
|
|
11
|
-
--ac-color-text: var(--color-text-main);
|
|
12
6
|
|
|
13
7
|
display: block;
|
|
14
8
|
width: 100%;
|
|
@@ -28,7 +22,6 @@
|
|
|
28
22
|
.action-card--sub {
|
|
29
23
|
--ac-color: var(--color-sub);
|
|
30
24
|
--ac-color-a10: var(--color-sub-a10);
|
|
31
|
-
--ac-color-text: var(--color-text-sub);
|
|
32
25
|
}
|
|
33
26
|
|
|
34
27
|
.action-card:focus-visible {
|
|
@@ -88,8 +81,7 @@
|
|
|
88
81
|
font-size: var(--text-body-2-size);
|
|
89
82
|
line-height: var(--text-body-2-line);
|
|
90
83
|
font-weight: var(--text-body-2-weight);
|
|
91
|
-
|
|
92
|
-
color: var(--color-gray);
|
|
84
|
+
color: var(--color-lightGray);
|
|
93
85
|
}
|
|
94
86
|
|
|
95
87
|
/* 바닥 행선지 — tone 색, 우측 정렬, 호버에서 화살표가 앞으로 */
|
|
@@ -104,7 +96,7 @@
|
|
|
104
96
|
font-size: var(--text-body-2-size);
|
|
105
97
|
line-height: var(--text-body-2-line);
|
|
106
98
|
font-weight: var(--text-body-2-weight-bold);
|
|
107
|
-
color: var(--ac-color
|
|
99
|
+
color: var(--ac-color);
|
|
108
100
|
}
|
|
109
101
|
|
|
110
102
|
.action-card__arrow {
|
|
@@ -11,18 +11,6 @@
|
|
|
11
11
|
background: var(--badge-color, var(--color-main));
|
|
12
12
|
color: var(--badge-on-color, #ffffff);
|
|
13
13
|
box-shadow: var(--badge-shadow, none);
|
|
14
|
-
|
|
15
|
-
/* **면 색을 글자에 그대로 쓰면 안 읽힌다.** soft·outline 은 변형 색을 글자에
|
|
16
|
-
쓰는데, 그 색들은 면을 칠하라고 있는 것이라 흰 지면에서 1.91~3.89 다
|
|
17
|
-
(sub 1.91 · default 2.48 · main 2.90 · like 3.18 · danger 3.89, 전부 14px).
|
|
18
|
-
|
|
19
|
-
`--color-text-primary` 쪽으로 반쯤 섞어 끌어온다. 그 토큰은 **테마를 따라
|
|
20
|
-
뒤집히므로**(밝은 곳에선 검정 쪽, 어두운 곳에선 흰 쪽) 한 줄이 두 테마를
|
|
21
|
-
모두 맞춘다. 색조는 절반 남는다 — 실측 라이트 4.96~8.08, 다크 5.53~8.86.
|
|
22
|
-
|
|
23
|
-
갈아 끼우려면 `--badge-text-color` 를 덮는다. 면(`--badge-color`)만 바꾸면
|
|
24
|
-
글자는 안 따라온다 — ActionCard 와 같은 뜻으로 일부러 갈라 두었다. */
|
|
25
|
-
--badge-text-color: color-mix(in srgb, var(--badge-color) 50%, var(--color-text-primary));
|
|
26
14
|
}
|
|
27
15
|
|
|
28
16
|
/* sizes */
|
|
@@ -79,8 +67,7 @@
|
|
|
79
67
|
/* ── outline — transparent bg, variant color border + text ── */
|
|
80
68
|
.badge--outline {
|
|
81
69
|
background: transparent;
|
|
82
|
-
color: var(--badge-
|
|
83
|
-
/* 테두리는 그림이라 3.0 기준이고, 글자와 달리 변형 색을 그대로 쓴다 */
|
|
70
|
+
color: var(--badge-color);
|
|
84
71
|
border: 1px solid var(--badge-color);
|
|
85
72
|
box-shadow: none;
|
|
86
73
|
}
|
|
@@ -88,7 +75,7 @@
|
|
|
88
75
|
/* ── soft — variant color text + 20% tinted bg ── */
|
|
89
76
|
.badge--soft {
|
|
90
77
|
background: color-mix(in srgb, var(--badge-color) 10%, transparent);
|
|
91
|
-
color: var(--badge-
|
|
78
|
+
color: var(--badge-color);
|
|
92
79
|
box-shadow: none;
|
|
93
80
|
}
|
|
94
81
|
|
|
@@ -32,10 +32,8 @@
|
|
|
32
32
|
min-width: 0;
|
|
33
33
|
flex: 1;
|
|
34
34
|
}
|
|
35
|
-
/* 고른 개수 — 굵게 세운 것은 읽으라는 뜻인데, 면을 칠하는 --color-main 이라
|
|
36
|
-
16px 에서 2.96 이었다. 테마를 따라 뒤집히는 짝을 쓴다. */
|
|
37
35
|
.bulk-bar__count b {
|
|
38
|
-
color: var(--color-
|
|
36
|
+
color: var(--color-main);
|
|
39
37
|
}
|
|
40
38
|
.bulk-bar__actions {
|
|
41
39
|
display: flex;
|
|
@@ -78,8 +78,7 @@
|
|
|
78
78
|
|
|
79
79
|
.button__count {
|
|
80
80
|
margin-left: 4px;
|
|
81
|
-
|
|
82
|
-
color: var(--color-text-main);
|
|
81
|
+
color: var(--color-main);
|
|
83
82
|
font-weight: 700;
|
|
84
83
|
}
|
|
85
84
|
|
|
@@ -333,12 +332,9 @@
|
|
|
333
332
|
--button-subLabel-color: var(--color-lightGray);
|
|
334
333
|
}
|
|
335
334
|
|
|
336
|
-
/* 아래 lightGray 변형과 같은 처리다 — 값이 아니라 **알파**가 문제다.
|
|
337
|
-
--color-gray 는 흰 지면에서 4.67 로 통과하는데, a80 을 얹어 #828fa2 로 합성되면
|
|
338
|
-
3.20 으로 떨어진다. 전경만 불투명하게 올리고 테두리의 연한 인상은 그대로 둔다. */
|
|
339
335
|
.button--variant-transparent-gray {
|
|
340
336
|
background: transparent;
|
|
341
|
-
color: var(--color-gray);
|
|
337
|
+
color: var(--color-gray-a80);
|
|
342
338
|
--button-subLabel-color: var(--color-gray-a60);
|
|
343
339
|
border: var(--button-border, 1px solid var(--color-gray-a80));
|
|
344
340
|
}
|
|
@@ -67,16 +67,12 @@
|
|
|
67
67
|
.calendar-day-header {
|
|
68
68
|
text-align: center;
|
|
69
69
|
font-weight: 600;
|
|
70
|
-
|
|
71
|
-
color: var(--color-text-secondary);
|
|
70
|
+
color: var(--color-lightGray);
|
|
72
71
|
padding: 6px 0;
|
|
73
72
|
}
|
|
74
73
|
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
그냥 두면 3.89 / 2.90 이다. */
|
|
78
|
-
.calendar-day-header:first-child { color: color-mix(in srgb, var(--color-error) 50%, var(--color-text-primary)); }
|
|
79
|
-
.calendar-day-header:last-child { color: color-mix(in srgb, var(--color-main) 50%, var(--color-text-primary)); }
|
|
74
|
+
.calendar-day-header:first-child { color: var(--color-error); }
|
|
75
|
+
.calendar-day-header:last-child { color: var(--color-main); }
|
|
80
76
|
|
|
81
77
|
.calendar-cell {
|
|
82
78
|
min-width: 118px;
|
|
@@ -121,8 +117,8 @@
|
|
|
121
117
|
}
|
|
122
118
|
|
|
123
119
|
/* Sunday = 1st col, Saturday = 7th col */
|
|
124
|
-
.calendar-cell:nth-child(7n+8) .calendar-cell__number { color:
|
|
125
|
-
.calendar-cell:nth-child(7n+14) .calendar-cell__number { color:
|
|
120
|
+
.calendar-cell:nth-child(7n+8) .calendar-cell__number { color: var(--color-error); }
|
|
121
|
+
.calendar-cell:nth-child(7n+14) .calendar-cell__number { color: var(--color-main); }
|
|
126
122
|
|
|
127
123
|
.calendar-cell__badges {
|
|
128
124
|
display: flex;
|
|
@@ -131,9 +127,7 @@
|
|
|
131
127
|
}
|
|
132
128
|
|
|
133
129
|
.calendar-visit-badge {
|
|
134
|
-
|
|
135
|
-
아래 --scheduled·--no-visit 갈래도 같은 처방을 쓴다. */
|
|
136
|
-
color: color-mix(in srgb, var(--color-main) 50%, var(--color-text-primary));
|
|
130
|
+
color: var(--color-main);
|
|
137
131
|
background: var(--color-main-a10);
|
|
138
132
|
border-radius: var(--radius-xs);
|
|
139
133
|
padding: 0 8px;
|
|
@@ -161,24 +155,18 @@
|
|
|
161
155
|
|
|
162
156
|
.calendar-visit-badge--scheduled {
|
|
163
157
|
background: var(--color-sub-a10);
|
|
164
|
-
|
|
165
|
-
color: color-mix(in srgb, var(--color-sub) 50%, var(--color-text-primary));
|
|
158
|
+
color: var(--color-sub);
|
|
166
159
|
}
|
|
167
160
|
|
|
168
161
|
.calendar-visit-badge--no-visit {
|
|
169
162
|
background: color-mix(in srgb, var(--color-disabled) 15%, white);
|
|
170
|
-
|
|
171
|
-
흐리게 보이라고 만든 것이지 **안 보이라고** 만든 것은 아니다. 흐린 인상은
|
|
172
|
-
틴트 배경이 이미 내고 있으므로 글자만 끌어올린다. */
|
|
173
|
-
color: color-mix(in srgb, var(--color-disabled) 50%, var(--color-text-primary));
|
|
163
|
+
color: var(--color-disabled);
|
|
174
164
|
}
|
|
175
165
|
|
|
176
166
|
.calendar-visit-badge__no-visit {
|
|
177
167
|
flex-shrink: 0;
|
|
178
168
|
background: var(--color-disabled);
|
|
179
|
-
|
|
180
|
-
비활성 컨트롤이 아니므로 예외가 아니다. 지면색을 따라가는 글자색을 쓴다. */
|
|
181
|
-
color: var(--color-text-primary);
|
|
169
|
+
color: #ffffff;
|
|
182
170
|
border-radius: var(--radius-xs);
|
|
183
171
|
padding: 1px 5px;
|
|
184
172
|
line-height: 1.4;
|
|
@@ -50,25 +50,13 @@
|
|
|
50
50
|
|
|
51
51
|
.code-box--small .code-box__inner { font-size: 12px; }
|
|
52
52
|
|
|
53
|
-
/* 토큰 색상 (단순 하이라이트)
|
|
54
|
-
이 값들은 **토큰이 아니라 박힌 색**이라, 면 토큰을 글자에 쓰는지 보는
|
|
55
|
-
audit:surface-as-text 가 못 본다. `--color-code-bg`(#eff8ff) 위 12px 기준으로
|
|
56
|
-
재어 넷이 모자랐다 — string 3.27 · number 2.96 · command 4.23 · operator 4.49.
|
|
57
|
-
색조는 그대로 두고 검정 쪽으로 조금씩만 끌었다.
|
|
58
|
-
comment 는 4.50 으로 선에 딱 걸려 있어 여유를 주었다.
|
|
59
|
-
|
|
60
|
-
**평지면만 보고 정했다가 한 번 모자랐다.** 강조 줄에는 --color-main 10% 틴트가
|
|
61
|
-
한 겹 더 얹혀 지면이 #deeffc 가 되고, 거기서는 값이 0.4 쯤 떨어진다. 브라우저로
|
|
62
|
-
재어 그 겹을 발견했고(손 계산은 그 겹을 몰랐다), 틴트 지면에서 4.6 을 넘도록
|
|
63
|
-
다시 잡았다. 평지면에서는 5.0 을 넘는다.
|
|
64
|
-
audit:contrast 가 이 값들을 **평지면 기준으로** 잰다 — 틴트 겹은 그려 봐야
|
|
65
|
-
알 수 있어 브라우저 훑기의 몫이다. */
|
|
53
|
+
/* 토큰 색상 (단순 하이라이트) */
|
|
66
54
|
.code-token { white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; }
|
|
67
55
|
.code-token.keyword { color: #6b46ff; font-weight: 600; }
|
|
68
|
-
.code-token.string { color: #
|
|
69
|
-
.code-token.comment { color: #
|
|
70
|
-
.code-token.command { color: #
|
|
71
|
-
.code-token.number { color: #
|
|
72
|
-
.code-token.operator { color: #
|
|
56
|
+
.code-token.string { color: #0a9d58; }
|
|
57
|
+
.code-token.comment { color: #6b7280; font-style: italic; }
|
|
58
|
+
.code-token.command { color: #0b78d1; }
|
|
59
|
+
.code-token.number { color: #d97706; }
|
|
60
|
+
.code-token.operator { color: #dc2626; }
|
|
73
61
|
.code-token.punctuation { color: var(--color-code-text, #042233); }
|
|
74
62
|
.code-token.identifier { color: var(--color-code-text, #042233); }
|
|
@@ -34,9 +34,7 @@
|
|
|
34
34
|
cursor: not-allowed;
|
|
35
35
|
}
|
|
36
36
|
|
|
37
|
-
|
|
38
|
-
Dropdown 의 같은 자리와 짝을 맞춘다(0.25.0). */
|
|
39
|
-
.date-picker__placeholder { color: var(--color-text-secondary); white-space: nowrap; }
|
|
37
|
+
.date-picker__placeholder { color: var(--color-lightGray); white-space: nowrap; }
|
|
40
38
|
.date-picker__value { color: var(--color-darkGray); white-space: nowrap; }
|
|
41
39
|
|
|
42
40
|
.date-picker__icon {
|
|
@@ -79,10 +79,8 @@
|
|
|
79
79
|
text-overflow: ellipsis;
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
/* 자리표시 글씨도 읽혀야 한다 — 테두리색(--color-lightGray, 2.42)이 아니라
|
|
83
|
-
글자용 회색을 쓴다. WCAG 는 placeholder 를 예외로 두지 않는다(비활성만 예외다). */
|
|
84
82
|
.dropdown__trigger-label--placeholder {
|
|
85
|
-
color: var(--color-
|
|
83
|
+
color: var(--color-lightGray);
|
|
86
84
|
}
|
|
87
85
|
|
|
88
86
|
.dropdown__chevron {
|
|
@@ -52,9 +52,7 @@
|
|
|
52
52
|
border: 1px solid var(--color-whiteLine);
|
|
53
53
|
border-radius: var(--radius-sm);
|
|
54
54
|
background: var(--color-pureWhite);
|
|
55
|
-
|
|
56
|
-
테두리는 그림이라 그대로 둔다. */
|
|
57
|
-
color: var(--color-text-main);
|
|
55
|
+
color: var(--color-main);
|
|
58
56
|
padding: var(--spacing-xs) var(--spacing-m);
|
|
59
57
|
cursor: pointer;
|
|
60
58
|
}
|
|
@@ -39,8 +39,7 @@
|
|
|
39
39
|
.hearing-device-info__device-name { font-weight: 700; color: var(--color-darkGray); }
|
|
40
40
|
.hearing-device-info__device-detail { font-size: 12px; color: var(--color-gray); }
|
|
41
41
|
.hearing-device-info__device-product { font-size: 12px; color: var(--color-darkGray); }
|
|
42
|
-
|
|
43
|
-
.hearing-device-info__device-date { font-size: 11px; color: var(--color-text-secondary); margin-top: 2px; }
|
|
42
|
+
.hearing-device-info__device-date { font-size: 11px; color: var(--color-lightGray); margin-top: 2px; }
|
|
44
43
|
.hearing-device-info__actions {
|
|
45
44
|
display: flex;
|
|
46
45
|
flex-direction: row;
|
|
@@ -6,8 +6,7 @@
|
|
|
6
6
|
--landing-header-border 아래 경계선 (기본 rgba(15,18,60,.05), transparent 로 끌 수 있음)
|
|
7
7
|
--landing-header-height 높이 (기본 72px)
|
|
8
8
|
--landing-header-link-color 가운데 링크 색 (기본 --color-deepGray)
|
|
9
|
-
--landing-header-link-hover 링크 hover 색 (기본 --color-
|
|
10
|
-
— 면을 칠하는 --color-main 은 밝은 지면에서 2.83 이라 글자로 못 쓴다
|
|
9
|
+
--landing-header-link-hover 링크 hover 색 (기본 --color-main)
|
|
11
10
|
═══════════════════════════════════════════════════════════ */
|
|
12
11
|
|
|
13
12
|
.landing-header {
|
|
@@ -83,7 +82,7 @@
|
|
|
83
82
|
}
|
|
84
83
|
|
|
85
84
|
.landing-header__links a:hover {
|
|
86
|
-
color: var(--landing-header-link-hover, var(--color-
|
|
85
|
+
color: var(--landing-header-link-hover, var(--color-main));
|
|
87
86
|
}
|
|
88
87
|
|
|
89
88
|
/* hover 시 왼쪽에서 오른쪽으로 차오르는 밑줄 */
|
|
@@ -178,7 +177,7 @@
|
|
|
178
177
|
|
|
179
178
|
.landing-header__drawer-item a:hover,
|
|
180
179
|
.landing-header__drawer-item a[aria-current='page'] {
|
|
181
|
-
color: var(--landing-header-link-hover, var(--color-
|
|
180
|
+
color: var(--landing-header-link-hover, var(--color-main));
|
|
182
181
|
}
|
|
183
182
|
|
|
184
183
|
/* 좁은 화면 — 가운데 링크를 접고 햄버거로 연다 */
|
|
@@ -142,8 +142,7 @@
|
|
|
142
142
|
/* ── Panel row state (loading / empty) ──────────────────────────────── */
|
|
143
143
|
.panel-row--empty {
|
|
144
144
|
justify-content: center;
|
|
145
|
-
|
|
146
|
-
color: var(--color-text-secondary);
|
|
145
|
+
color: var(--color-lightGray);
|
|
147
146
|
}
|
|
148
147
|
|
|
149
148
|
.panel-row--loading {
|
|
@@ -373,11 +372,8 @@
|
|
|
373
372
|
.panel-row__device-date { color: var(--color-lightGray); margin-top: 2px; }
|
|
374
373
|
.panel-row__device-empty { flex: 1; display: flex; align-items: center; justify-content: center; text-align: center; color: var(--color-lightGray); }
|
|
375
374
|
|
|
376
|
-
/* **필수 표시는 뜻을 지닌 글자**다 — 별표 하나로 "이 칸은 비울 수 없다" 를
|
|
377
|
-
말한다. 면을 칠하는 --color-main 이라 2.90 이었다. 파란 기를 절반 남기고
|
|
378
|
-
읽히게 끌어온다(Badge·Calendar 와 같은 처방). */
|
|
379
375
|
.required-mark {
|
|
380
|
-
color:
|
|
376
|
+
color: var(--color-main);
|
|
381
377
|
margin-left: 2px;
|
|
382
378
|
}
|
|
383
379
|
|
|
@@ -387,8 +383,7 @@
|
|
|
387
383
|
}
|
|
388
384
|
|
|
389
385
|
.panel-row__helper {
|
|
390
|
-
|
|
391
|
-
color: var(--color-text-secondary);
|
|
386
|
+
color: var(--color-lightGray);
|
|
392
387
|
margin-top: 4px;
|
|
393
388
|
}
|
|
394
389
|
|
|
@@ -29,10 +29,8 @@
|
|
|
29
29
|
color: var(--color-darkGray);
|
|
30
30
|
}
|
|
31
31
|
|
|
32
|
-
/* 고리 옆 이름표는 그 고리가 무엇인지 알려 주는 글이다 —
|
|
33
|
-
테두리색(--color-lightGray, 2.48)이 아니라 글자용 회색을 쓴다 */
|
|
34
32
|
.ring-chart__label {
|
|
35
|
-
color: var(--color-
|
|
33
|
+
color: var(--color-lightGray);
|
|
36
34
|
}
|
|
37
35
|
|
|
38
36
|
/* size='medium'에서만 숫자-% 간격을 2px 더 좁힘 */
|
|
@@ -32,10 +32,8 @@
|
|
|
32
32
|
|
|
33
33
|
/* 강조 구절 — 본문은 중립색, 핵심 자모만 상태 강조색 (굵기는 body-2b 클래스가 담당)
|
|
34
34
|
(문장 전체가 한 색이면 길수록 가독성이 떨어지므로) */
|
|
35
|
-
/* **강조하려고 있는 글**이다 — 면을 칠하는 --color-main 은 흰 지면에서 2.90 이라
|
|
36
|
-
강조가 되레 덜 읽힌다. 테마를 따라 뒤집히는 짝을 쓴다. */
|
|
37
35
|
.search-summary__em {
|
|
38
|
-
color: var(--color-
|
|
36
|
+
color: var(--color-main);
|
|
39
37
|
}
|
|
40
38
|
|
|
41
39
|
/* ── 준비 완료: 현재 조건 요약 ── 본문·아이콘은 진회색, 강조 구절만 main ── */
|
|
@@ -44,7 +42,7 @@
|
|
|
44
42
|
color: var(--color-deepGray);
|
|
45
43
|
}
|
|
46
44
|
.search-summary--ready .search-summary__em {
|
|
47
|
-
color: var(--color-
|
|
45
|
+
color: var(--color-main);
|
|
48
46
|
}
|
|
49
47
|
|
|
50
48
|
/* ── 안내: 조건이 부족해 다음 행동을 유도(중립) ── */
|
|
@@ -147,9 +147,7 @@
|
|
|
147
147
|
|
|
148
148
|
.slider-wrap__value {
|
|
149
149
|
flex-shrink: 0;
|
|
150
|
-
|
|
151
|
-
--color-main 은 흰 지면에서 2.90 이라 테마 따라 뒤집히는 짝을 쓴다. */
|
|
152
|
-
color: var(--color-text-main);
|
|
150
|
+
color: var(--color-main);
|
|
153
151
|
/* 숫자 폭을 고정한다 — 9→10으로 바뀔 때 라벨이 흔들리면 트랙도 함께 움직인다 */
|
|
154
152
|
font-variant-numeric: tabular-nums;
|
|
155
153
|
white-space: nowrap;
|
|
@@ -180,8 +178,7 @@
|
|
|
180
178
|
|
|
181
179
|
.slider-wrap__minmax {
|
|
182
180
|
flex-shrink: 0;
|
|
183
|
-
|
|
184
|
-
color: var(--color-text-secondary);
|
|
181
|
+
color: var(--color-lightGray);
|
|
185
182
|
font-variant-numeric: tabular-nums;
|
|
186
183
|
white-space: nowrap;
|
|
187
184
|
}
|
|
@@ -73,13 +73,8 @@
|
|
|
73
73
|
margin-top: 1px;
|
|
74
74
|
min-width: 0;
|
|
75
75
|
}
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
Badge 의 soft·outline 과 같은 처방: --color-text-primary 쪽으로 절반 섞어
|
|
79
|
-
끌어온다. 그 토큰이 테마를 따라 뒤집히므로 한 줄이 두 테마를 다 맞추고,
|
|
80
|
-
오름은 청록·내림은 빨강이라는 뜻은 절반 남는다. */
|
|
81
|
-
.manager-stat-card__change--up { color: color-mix(in srgb, var(--color-sub) 50%, var(--color-text-primary)); }
|
|
82
|
-
.manager-stat-card__change--down { color: color-mix(in srgb, var(--color-error) 50%, var(--color-text-primary)); }
|
|
76
|
+
.manager-stat-card__change--up { color: var(--color-sub); }
|
|
77
|
+
.manager-stat-card__change--down { color: var(--color-error); }
|
|
83
78
|
.manager-stat-card__change--neutral { color: var(--color-gray); }
|
|
84
79
|
|
|
85
80
|
@media (max-width: 767px) {
|
|
@@ -54,12 +54,7 @@
|
|
|
54
54
|
color: var(--color-gray);
|
|
55
55
|
}
|
|
56
56
|
|
|
57
|
-
/* **지면을 칠하는 컴포넌트는 글자색도 스스로 정해야 한다.** 값 쪽에 색이 없어
|
|
58
|
-
바깥에서 물려받고 있었는데, 그 색은 앱이 **밝은 지면을 보고 고른 것**이라
|
|
59
|
-
다크에서 지면만 뒤집히고 글자는 안 따라왔다 — 실측 1.02, 사실상 안 보인다.
|
|
60
|
-
이름표는 --color-gray 라 테마를 따라가고 있었다(4.67 / 5.26). */
|
|
61
57
|
.summary-strip__value {
|
|
62
|
-
color: var(--color-text-primary);
|
|
63
58
|
margin: 0;
|
|
64
59
|
overflow: hidden;
|
|
65
60
|
text-overflow: ellipsis;
|
|
@@ -46,10 +46,8 @@
|
|
|
46
46
|
color: var(--color-darkGray);
|
|
47
47
|
}
|
|
48
48
|
|
|
49
|
-
/* 개수는 **글자**다 — 면을 칠하는 --color-main(흰 지면 2.90)이 아니라 짙은 짝을 쓴다.
|
|
50
|
-
바로 위 __icon 은 그림이라 --color-main 그대로 둔다. */
|
|
51
49
|
.table-header__count {
|
|
52
|
-
color: var(--color-
|
|
50
|
+
color: var(--color-main);
|
|
53
51
|
flex-shrink: 0;
|
|
54
52
|
}
|
|
55
53
|
|
|
@@ -165,8 +163,7 @@
|
|
|
165
163
|
justify-content: center;
|
|
166
164
|
align-items: center;
|
|
167
165
|
padding: 0 20px;
|
|
168
|
-
|
|
169
|
-
color: var(--color-text-secondary);
|
|
166
|
+
color: var(--color-lightGray);
|
|
170
167
|
}
|
|
171
168
|
.table-wrap--small .table-row--empty { min-height: 48px; }
|
|
172
169
|
.table-wrap--medium .table-row--empty { min-height: 56px; }
|
|
@@ -19,11 +19,8 @@
|
|
|
19
19
|
gap: 4px;
|
|
20
20
|
}
|
|
21
21
|
/* 필수 표시는 경고가 아니라 라벨의 일부다 — 오류색 대신 메인 컬러를 쓴다 */
|
|
22
|
-
/* **필수 표시는 뜻을 지닌 글자**다 — 별표 하나로 "이 칸은 비울 수 없다" 를
|
|
23
|
-
말한다. 면을 칠하는 --color-main 이라 2.90 이었다. 파란 기를 절반 남기고
|
|
24
|
-
읽히게 끌어온다(Badge·Calendar 와 같은 처방). */
|
|
25
22
|
.text-field__required {
|
|
26
|
-
color:
|
|
23
|
+
color: var(--color-main);
|
|
27
24
|
line-height: 1;
|
|
28
25
|
}
|
|
29
26
|
|
|
@@ -230,8 +227,7 @@
|
|
|
230
227
|
}
|
|
231
228
|
.text-field__helper {
|
|
232
229
|
flex: 1;
|
|
233
|
-
|
|
234
|
-
color: var(--color-text-secondary);
|
|
230
|
+
color: var(--color-lightGray);
|
|
235
231
|
}
|
|
236
232
|
.text-field--error .text-field__helper {
|
|
237
233
|
color: var(--color-error);
|
|
@@ -192,9 +192,8 @@
|
|
|
192
192
|
min-width: 96px;
|
|
193
193
|
}
|
|
194
194
|
|
|
195
|
-
/* 필수 표시 — TextField·Panel 의 같은 자리와 짝을 맞춘다(2.90) */
|
|
196
195
|
.phoneme-select-block__required {
|
|
197
|
-
color:
|
|
196
|
+
color: var(--color-main);
|
|
198
197
|
line-height: 1;
|
|
199
198
|
margin-left: 2px;
|
|
200
199
|
}
|