@ihabdevteam/core 0.10.0 → 0.11.1

package/dist/ihabdevteam-core.css

@@ -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-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]{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-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]{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-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.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}@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)}.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}}
+: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-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]{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-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]{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-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.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}@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}}

package/dist/ihabdevteam-core.d.ts

@@ -5329,6 +5329,55 @@ export declare function summarize(marks: Record<string, ScoreMark | null | undef
  */
 export declare function summarizeMisses(records: readonly TrainingResultRecord[]): MissSummary;
 
+/**
+ * 화면 위쪽에 놓이는 한 줄 요약 — "지금 다루고 있는 대상"을 이름표와 값으로 늘어놓는다.
+ *
+ * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다.
+ *
+ * 값의 서식은 부르는 쪽이 정해 넘긴다 — 빈 값을 `-` 로 적을지, 날짜를 어떻게 쓸지,
+ * 여러 값을 한 칸에 묶을지(`오른손 / NC / 연구실 내`)는 화면마다 다르다.
+ *
+ * 붙박이(sticky)로 두려면 감싸는 쪽에서 건다 — 이 컴포넌트는 자리를 정하지 않는다.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStrip
+ *   items={[
+ *     { label: '이름', value: patient.name },
+ *     { label: '생년월일', value: patient.birthDate },
+ *     { label: '환자번호', value: patient.chartNo ?? '-' },
+ *   ]}
+ *   actions={<Button size={32} type="dot" icon="pencil" ariaLabel="정보 수정" onClick={onEdit} />}
+ * />
+ * ```
+ *
+ * @public
+ */
+export declare function SummaryStrip({ items, actions, columns, className, style, }: SummaryStripProps): JSX.Element;
+
+/** @public */
+export declare interface SummaryStripItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+
+/** @public */
+export declare interface SummaryStripProps {
+    items: SummaryStripItem[];
+    /**
+     * 오른쪽 끝에 붙는 버튼들. 정보 옆에 두는 편이 찾기 쉬워 별도 줄로 빼지 않는다.
+     */
+    actions?: ReactNode;
+    /**
+     * 가장 넓은 화면(1280px 이상)에서 한 줄에 놓을 칸 수.
+     * 좁아지면 4 → 3 → 2 로 접히는 것은 고정이다.
+     * @defaultValue 항목 수
+     */
+    columns?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
 /** 지원 언어 목록 — 새 언어 추가 시 여기에도 추가 */
 export declare const SUPPORTED_LOCALES: {
     code: string;

package/dist/packages/core/src/components/SummaryStrip.css

@@ -0,0 +1,69 @@
+/* 화면 위쪽에 놓이는 한 줄 요약 — 이름표 위, 값 아래로 여러 칸을 늘어놓는다.
+   오른쪽 끝에 버튼(수정·종료 등)이 붙는다. */
+.summary-strip {
+  width: 100%;
+  padding: var(--spacing-m) var(--spacing-l);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+  background: var(--color-surface);
+  box-shadow: var(--shadow-card);
+}
+
+.summary-strip__row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-l);
+}
+
+/* 값 길이가 제각각이라 그냥 나열하면 칸 간격이 들쭉해진다. 균등 그리드로
+   같은 폭에 앉히고, 좁아지면 칸 수를 줄여 접는다. */
+.summary-strip__items {
+  display: grid;
+  flex: 1;
+  min-width: 0;
+  grid-template-columns: repeat(2, minmax(0, 1fr));
+  gap: var(--spacing-s) var(--spacing-l);
+}
+
+@media (min-width: 640px) {
+  .summary-strip__items {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+}
+
+@media (min-width: 1024px) {
+  .summary-strip__items {
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+  }
+}
+
+/* 가장 넓을 때만 칸 수를 부르는 쪽이 정한 값으로 편다(기본은 항목 수). */
+@media (min-width: 1280px) {
+  .summary-strip__items {
+    grid-template-columns: repeat(var(--summary-strip-cols, 4), minmax(0, 1fr));
+  }
+}
+
+/* min-width: 0 이라야 긴 값이 칸을 밀어내지 않고 말줄임된다. */
+.summary-strip__item {
+  min-width: 0;
+}
+
+.summary-strip__label {
+  margin: 0;
+  color: var(--color-gray);
+}
+
+.summary-strip__value {
+  margin: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.summary-strip__actions {
+  display: flex;
+  flex-shrink: 0;
+  align-items: center;
+  gap: var(--spacing-xs);
+}

package/dist/packages/core/src/components/SummaryStrip.d.ts

@@ -0,0 +1,48 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './SummaryStrip.css';
+/** @public */
+export interface SummaryStripItem {
+    label: ReactNode;
+    value: ReactNode;
+}
+/** @public */
+export interface SummaryStripProps {
+    items: SummaryStripItem[];
+    /**
+     * 오른쪽 끝에 붙는 버튼들. 정보 옆에 두는 편이 찾기 쉬워 별도 줄로 빼지 않는다.
+     */
+    actions?: ReactNode;
+    /**
+     * 가장 넓은 화면(1280px 이상)에서 한 줄에 놓을 칸 수.
+     * 좁아지면 4 → 3 → 2 로 접히는 것은 고정이다.
+     * @defaultValue 항목 수
+     */
+    columns?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 화면 위쪽에 놓이는 한 줄 요약 — "지금 다루고 있는 대상"을 이름표와 값으로 늘어놓는다.
+ *
+ * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다.
+ *
+ * 값의 서식은 부르는 쪽이 정해 넘긴다 — 빈 값을 `-` 로 적을지, 날짜를 어떻게 쓸지,
+ * 여러 값을 한 칸에 묶을지(`오른손 / NC / 연구실 내`)는 화면마다 다르다.
+ *
+ * 붙박이(sticky)로 두려면 감싸는 쪽에서 건다 — 이 컴포넌트는 자리를 정하지 않는다.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStrip
+ *   items={[
+ *     { label: '이름', value: patient.name },
+ *     { label: '생년월일', value: patient.birthDate },
+ *     { label: '환자번호', value: patient.chartNo ?? '-' },
+ *   ]}
+ *   actions={<Button size={32} type="dot" icon="pencil" ariaLabel="정보 수정" onClick={onEdit} />}
+ * />
+ * ```
+ *
+ * @public
+ */
+export default function SummaryStrip({ items, actions, columns, className, style, }: SummaryStripProps): import("react").JSX.Element;

package/dist/packages/core/src/components/SummaryStrip.js

@@ -0,0 +1,31 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './SummaryStrip.css';
+/**
+ * 화면 위쪽에 놓이는 한 줄 요약 — "지금 다루고 있는 대상"을 이름표와 값으로 늘어놓는다.
+ *
+ * 값 길이가 제각각이라 균등 그리드에 앉힌다. 긴 값은 칸을 밀어내지 않고 말줄임된다.
+ *
+ * 값의 서식은 부르는 쪽이 정해 넘긴다 — 빈 값을 `-` 로 적을지, 날짜를 어떻게 쓸지,
+ * 여러 값을 한 칸에 묶을지(`오른손 / NC / 연구실 내`)는 화면마다 다르다.
+ *
+ * 붙박이(sticky)로 두려면 감싸는 쪽에서 건다 — 이 컴포넌트는 자리를 정하지 않는다.
+ *
+ * @example
+ * ```tsx
+ * <SummaryStrip
+ *   items={[
+ *     { label: '이름', value: patient.name },
+ *     { label: '생년월일', value: patient.birthDate },
+ *     { label: '환자번호', value: patient.chartNo ?? '-' },
+ *   ]}
+ *   actions={<Button size={32} type="dot" icon="pencil" ariaLabel="정보 수정" onClick={onEdit} />}
+ * />
+ * ```
+ *
+ * @public
+ */
+export default function SummaryStrip({ items, actions, columns, className, style, }) {
+    const cols = columns ?? items.length;
+    return (_jsx("section", { className: cx('summary-strip', className), style: { ['--summary-strip-cols']: String(cols), ...style }, children: _jsxs("div", { className: "summary-strip__row", children: [_jsx("div", { className: "summary-strip__items", children: items.map((item, i) => (_jsxs("div", { className: "summary-strip__item", children: [_jsx("p", { className: "summary-strip__label caption-1", children: item.label }), _jsx("p", { className: "summary-strip__value body-3b", children: item.value })] }, i))) }), actions && _jsx("div", { className: "summary-strip__actions", children: actions })] }) }));
+}

package/dist/packages/core/src/components.d.ts

@@ -295,6 +295,8 @@ export type { PanelRowToggle, PanelRowSegmented, DropdownItem, PanelRowDropdown,
 export { default as Section } from './components/Section';
 export type { SectionProps, SectionType } from './components/Section';
 export { default as Pagination } from './components/Pagination';
+export { default as SummaryStrip } from './components/SummaryStrip';
+export type { SummaryStripProps, SummaryStripItem } from './components/SummaryStrip';
 export { default as ReportDocument } from './components/Report/ReportDocument';
 export type { ReportDocumentProps, ReportBlock } from './components/Report/ReportDocument';
 export { default as ReportInfoPanel } from './components/Report/ReportInfoPanel';

package/dist/packages/core/src/components.js

@@ -230,6 +230,7 @@ export { default as Popup } from './components/Popup/Popup';
 export { default as Panel, PanelRow, PanelGrid, PanelRowDevice } from './components/Panel';
 export { default as Section } from './components/Section';
 export { default as Pagination } from './components/Pagination';
+export { default as SummaryStrip } from './components/SummaryStrip';
 export { default as ReportDocument } from './components/Report/ReportDocument';
 export { default as ReportInfoPanel } from './components/Report/ReportInfoPanel';
 export { default as UpdateAlert } from './components/UpdateAlert';

package/dist/packages/core/src/styles.css

@@ -128,6 +128,61 @@ textarea {
 :where(.caption-1b) { font-weight: var(--text-caption-1-weight-bold); }
 :where(.caption-2b) { font-weight: var(--text-caption-2-weight-bold); }
 
+
+/* ── 제목 태그 보호 (리셋이 지우는 두 속성만 되돌린다) ────────
+   위 헬퍼는 특이도 0 이라 **태그 선택자에도 진다.** Tailwind preflight 가
+   `h1, h2, h3, h4, h5, h6 { font-size: inherit; font-weight: inherit }` (0-0-1)
+   를 깔면, `<h1 class="h1">` 이 32px/700 이 아니라 본문값(16px/400)으로 나온다.
+   preflight 가 건드리지 않는 line-height 만 헬퍼 값이 남아 "작고 안 굵은데
+   행간만 큰" 제목이 된다 — kscan 의 모든 화면 제목이 그랬다(PageTitle 이 h1 을
+   그린다).
+
+   그래서 **제목 태그일 때만** 클래스의 :where() 를 벗어 0-1-0 으로 올린다.
+
+     0-0-1  리셋의 h1              → 진다
+     0-1-0  여기                    → 이긴다
+     0-1-0  앱의 `.lp-hero-title`   → 동점, 나중에 선언된 쪽이 이긴다
+
+   앱 CSS 는 디자인 시스템 뒤에 실리므로 앱이 계속 이긴다. 한 겹으로 덮을 수
+   있다는 원래 성질이 제목에서도 유지된다 — 다만 순서에 기대므로, 앱 CSS 를
+   코어보다 **먼저** 싣는 곳이라면 두 겹으로 적어야 한다.
+
+   되돌리는 것은 리셋이 지우는 font-size·font-weight 둘뿐이다. margin·
+   line-height·letter-spacing 은 특이도 0 그대로 둔다 — 회원앱 히어로의
+   `margin-bottom: 32px` 이 눌리던 문제는 그대로 고쳐진 채로 남는다.
+
+   제목 태그가 아닌 곳(p·div·span)은 이 블록에 걸리지 않아 완전히 예전과 같다. */
+:where(h1, h2, h3, h4, h5, h6).display-1  { font-size: var(--text-display-1-size); font-weight: var(--text-display-1-weight); }
+:where(h1, h2, h3, h4, h5, h6).display-1b { font-size: var(--text-display-1-size); font-weight: var(--text-display-1-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).display-2  { font-size: var(--text-display-2-size); font-weight: var(--text-display-2-weight); }
+:where(h1, h2, h3, h4, h5, h6).display-2b { font-size: var(--text-display-2-size); font-weight: var(--text-display-2-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).display-3  { font-size: var(--text-display-3-size); font-weight: var(--text-display-3-weight); }
+:where(h1, h2, h3, h4, h5, h6).display-3b { font-size: var(--text-display-3-size); font-weight: var(--text-display-3-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h0  { font-size: var(--text-h0-size); font-weight: var(--text-h0-weight); }
+:where(h1, h2, h3, h4, h5, h6).h0b { font-size: var(--text-h0-size); font-weight: var(--text-h0-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h1  { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight); }
+:where(h1, h2, h3, h4, h5, h6).h1b { font-size: var(--text-h1-size); font-weight: var(--text-h1-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h2  { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight); }
+:where(h1, h2, h3, h4, h5, h6).h2b { font-size: var(--text-h2-size); font-weight: var(--text-h2-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h3  { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight); }
+:where(h1, h2, h3, h4, h5, h6).h3b { font-size: var(--text-h3-size); font-weight: var(--text-h3-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h4  { font-size: var(--text-h4-size); font-weight: var(--text-h4-weight); }
+:where(h1, h2, h3, h4, h5, h6).h4b { font-size: var(--text-h4-size); font-weight: var(--text-h4-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).h5  { font-size: var(--text-h5-size); font-weight: var(--text-h5-weight); }
+:where(h1, h2, h3, h4, h5, h6).h5b { font-size: var(--text-h5-size); font-weight: var(--text-h5-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).body-1  { font-size: var(--text-body-1-size); font-weight: var(--text-body-1-weight); }
+:where(h1, h2, h3, h4, h5, h6).body-1b { font-size: var(--text-body-1-size); font-weight: var(--text-body-1-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).body-2  { font-size: var(--text-body-2-size); font-weight: var(--text-body-2-weight); }
+:where(h1, h2, h3, h4, h5, h6).body-2b { font-size: var(--text-body-2-size); font-weight: var(--text-body-2-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).body-3  { font-size: var(--text-body-3-size); font-weight: var(--text-body-3-weight); }
+:where(h1, h2, h3, h4, h5, h6).body-3b { font-size: var(--text-body-3-size); font-weight: var(--text-body-3-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).caption-1  { font-size: var(--text-caption-1-size); font-weight: var(--text-caption-1-weight); }
+:where(h1, h2, h3, h4, h5, h6).caption-1b { font-size: var(--text-caption-1-size); font-weight: var(--text-caption-1-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).caption-2  { font-size: var(--text-caption-2-size); font-weight: var(--text-caption-2-weight); }
+:where(h1, h2, h3, h4, h5, h6).caption-2b { font-size: var(--text-caption-2-size); font-weight: var(--text-caption-2-weight-bold); }
+:where(h1, h2, h3, h4, h5, h6).button-1  { font-size: var(--text-button-1-size); font-weight: var(--text-button-1-weight); }
+:where(h1, h2, h3, h4, h5, h6).button-2  { font-size: var(--text-button-2-size); font-weight: var(--text-button-2-weight); }
+
 /* ── 전역 스크롤바 ──────────────────────────────────────── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }
 ::-webkit-scrollbar-track { background: transparent; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ihabdevteam/core",
-  "version": "0.10.0",
+  "version": "0.11.1",
   "private": false,
   "main": "dist/ihabdevteam-core.cjs.js",
   "module": "dist/ihabdevteam-core.esm.js",