@ihabdevteam/core 0.190.0 → 0.192.0

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-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-bulk-bar:600;--z-nav:1000;--z-sidebar:1100;--z-menu:1500;--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-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],.ihabdevteam-core-scope[data-font-scale=large1],[data-font-scale=large1] .ihabdevteam-core-scope{--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],.ihabdevteam-core-scope[data-font-scale=large2],[data-font-scale=large2] .ihabdevteam-core-scope{--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],.ihabdevteam-core-scope[data-font-scale=large3],[data-font-scale=large3] .ihabdevteam-core-scope{--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}}
+: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-onDark-title:var(--color-pureWhite);--color-onDark-text:hsla(0,0%,100%,.58);--color-onDark-muted:hsla(0,0%,100%,.5);--color-onDark-surface:hsla(0,0%,100%,.04);--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-bulk-bar:600;--z-nav:1000;--z-sidebar:1100;--z-menu:1500;--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-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],.ihabdevteam-core-scope[data-font-scale=large1],[data-font-scale=large1] .ihabdevteam-core-scope{--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],.ihabdevteam-core-scope[data-font-scale=large2],[data-font-scale=large2] .ihabdevteam-core-scope{--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],.ihabdevteam-core-scope[data-font-scale=large3],[data-font-scale=large3] .ihabdevteam-core-scope{--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}}

package/dist/ihabdevteam-core.d.ts

@@ -1617,7 +1617,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.190.0";
+export declare const CORE_VERSION = "0.192.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -2580,6 +2580,69 @@ export declare interface FormatYmdOptions {
     fallback?: string;
 }
 
+/**
+ * **게임 시작 화면의 속** — 그림 · 이름 · 설명 · 팁 묶음 · 시작 단추.
+ *
+ * 말귀의 게임 넷(낱말퀴즈 · 타자 · 순발력 · 단어 디펜스)이 **네 벌로 똑같이** 적고 있었다.
+ * 구조가 같은 정도가 아니라 CSS 선언이 **글자까지 같았고**, 팁 머리글의 대비를 고친 WCAG
+ * 주석까지 네 번 베껴져 있었다(2026-09-25). 한 자리를 고치면 셋이 남는 꼴이었다.
+ *
+ * **감싸개(오버레이 · 시트 · 닫기)는 부르는 쪽이 쥔다.** 시트의 바탕 그라디언트와 테두리
+ * 빛깔이 게임마다 다르고 **그것이 각 게임의 얼굴**이다 — 코어가 그것까지 들면 게임마다 색을
+ * 넘기느라 도로 네 벌이 된다. 여기 있는 것은 그 **안쪽뿐**이다.
+ *
+ * 색은 `--color-onDark-*` 를 쓴다 — 늘 어두운 면 위에 얹는 흰색 알파라 테마를 따르지 않는다.
+ *
+ * ```tsx
+ * <div className={내시트}>          // 오버레이·시트·닫기는 부르는 쪽 것
+ *   <GameIntro icon="🔠" title="낱말퀴즈" description={설명}
+ *     tipGroups={[{ title: '게임 방법', tips: [{ icon: '🔠', text: '…' }] }]}
+ *     start={{ label: '시작하기', color: '#10b981', onClick: 시작 }} />
+ * </div>
+ * ```
+ * @public
+ */
+export declare function GameIntro({ icon, iconSize, title, titleClass, description, tipGroups, start, className, }: GameIntroProps): JSX.Element;
+
+/** @public */
+export declare interface GameIntroProps {
+    /** 큰 그림 하나(대개 이모지) — 꾸밈이라 낭독기에는 안 읽힌다. 이름은 `title` 이 말한다 */
+    icon?: ReactNode;
+    /** 그림 크기(px). 기본 56 */
+    iconSize?: number;
+    title: ReactNode;
+    /** 제목의 글자 모양 클래스. 기본 `h2` */
+    titleClass?: string;
+    description?: ReactNode;
+    tipGroups?: GameIntroTipGroup[];
+    start?: GameIntroStart;
+    className?: string;
+}
+
+/** @public */
+export declare interface GameIntroStart {
+    label: ReactNode;
+    /** 그 게임의 빛깔 — 안 주면 주 색 */
+    color?: string;
+    disabled?: boolean;
+    /** 바닥에 붙여 두는 게임이 제 시트 색으로 둘레를 까는 자리 */
+    className?: string;
+    onClick?: () => void;
+}
+
+/** 팁 한 줄 — 왼쪽에 그림(대개 이모지), 오른쪽에 글 @public */
+export declare interface GameIntroTip {
+    /** 줄 왼쪽의 그림 — 꾸밈이라 낭독기에는 안 읽힌다 */
+    icon?: ReactNode;
+    text: ReactNode;
+}
+
+/** 팁 묶음 하나 — 머리글과 그 아래 줄들('게임 방법' · '점수' 처럼) @public */
+export declare interface GameIntroTipGroup {
+    title?: ReactNode;
+    tips: GameIntroTip[];
+}
+
 /** @public */
 export declare function getAssetBaseUrl(): string;
 
@@ -4006,6 +4069,10 @@ declare type PanelRowInput = Base & {
     /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
     onEnter?: () => void;
     placeholder?: string;
+    /** 비추기만 하는 추천값 — Tab(앞으로)·Space 로 받는다. 자세한 것은 `TextField` 의 `ghostText`. */
+    ghostText?: string;
+    /** 추천값 뒤 꼬리말 — 안 주면 코어 사전의 것 */
+    ghostHint?: string;
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: boolean;
     disabled?: boolean;
@@ -7179,6 +7246,27 @@ export declare interface TextFieldProps {
     required?: boolean;
     /** placeholder 텍스트 */
     placeholder?: string;
+    /**
+     * **비추기만 하는 추천값**(ghost-text) — 규칙으로 유도한 값을 자리표시로 비추고, 칸이 비어 있을 때
+     * **Tab(앞으로) · Space** 로 받아 적는다.
+     *
+     * 자동으로 채우지 않는다 — 규칙 변환은 완벽하지 않아 **사람이 보고 확정한다.** 그래서 값이 아니라
+     * 자리표시로만 있다가, 사람이 "받겠다" 는 키를 눌러야 값이 된다.
+     *
+     * 받는 때는 셋이 다 맞을 때뿐이다:
+     * - **Tab(앞으로) 이거나 Space.** `Shift+Tab` 은 안 받는다 — 뒤 칸으로 가려던 사람이 값을 얻는다.
+     * - **칸이 비어 있다**(공백만 친 것도 빈 것으로 본다). 손으로 적은 것을 덮지 않는다.
+     * - 비출 추천이 있다.
+     *
+     * 받은 키는 **이 칸이 먹는다**(`preventDefault`) — 그래서 그 Tab 으로 초점이 옮겨 가지 않고,
+     * 그 눌림은 `onKeyDown` 으로도 안 간다. 한 번 더 누르면 칸이 찼으므로 평소대로 넘어간다.
+     *
+     * 앱마다 이 세 줄이 손으로 적혀 있었다(말귀 두 자리 — 훈련 이름·표준 발음, 2026-09-25).
+     * 무엇을 비추고 어떻게 받는지는 **칸의 행동**이지 그 칸을 놓는 화면의 일이 아니다.
+     */
+    ghostText?: string;
+    /** 추천값 뒤에 붙는 꼬리말 — 안 주면 코어 사전의 " (Tab 또는 space 입력시 자동 입력)" */
+    ghostHint?: string;
     /** 입력 타입 */
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     /** 비활성 상태 */

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

@@ -0,0 +1,51 @@
+/* 게임 시작 화면의 속 — 까닭과 쓰는 법은 `GameIntro.tsx` 의 글에.
+   말귀의 게임 넷이 접두사만 다른 **글자까지 같은 선언**을 네 벌 들고 있던 것을 여기로 모았다
+   (2026-09-25). 값은 그때 쓰던 것 그대로이고, 색만 토큰(`--color-onDark-*`)으로 바꿔 적는다. */
+
+.game-intro {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 14px;
+  text-align: center;
+  padding: 0;
+}
+
+.game-intro__icon { font-size: var(--game-intro-icon, 56px); }
+
+.game-intro__title {
+  margin: 0;
+  color: var(--color-onDark-title);
+}
+
+.game-intro__description {
+  margin: 0;
+  color: var(--color-onDark-text);
+  line-height: 1.75;
+}
+
+.game-intro__tips {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  background: var(--color-onDark-surface);
+  border-radius: var(--radius-s);
+  padding: var(--spacing-l);
+  color: var(--color-onDark-text);
+  width: 100%;
+  box-sizing: border-box;
+  text-align: left;
+}
+
+/* 머리글은 본문보다 차분하되 WCAG AA 는 넘긴다 — 그 셈은 토큰 쪽에 적어 두었다 */
+.game-intro__tips-title {
+  color: var(--color-onDark-muted);
+  letter-spacing: 0.06em;
+  margin-bottom: 4px;
+}
+
+.game-intro__tip {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-xs);
+}

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

@@ -0,0 +1,60 @@
+import './GameIntro.css';
+import type { ReactNode } from 'react';
+/** 팁 한 줄 — 왼쪽에 그림(대개 이모지), 오른쪽에 글 @public */
+export interface GameIntroTip {
+    /** 줄 왼쪽의 그림 — 꾸밈이라 낭독기에는 안 읽힌다 */
+    icon?: ReactNode;
+    text: ReactNode;
+}
+/** 팁 묶음 하나 — 머리글과 그 아래 줄들('게임 방법' · '점수' 처럼) @public */
+export interface GameIntroTipGroup {
+    title?: ReactNode;
+    tips: GameIntroTip[];
+}
+/** @public */
+export interface GameIntroStart {
+    label: ReactNode;
+    /** 그 게임의 빛깔 — 안 주면 주 색 */
+    color?: string;
+    disabled?: boolean;
+    /** 바닥에 붙여 두는 게임이 제 시트 색으로 둘레를 까는 자리 */
+    className?: string;
+    onClick?: () => void;
+}
+/** @public */
+export interface GameIntroProps {
+    /** 큰 그림 하나(대개 이모지) — 꾸밈이라 낭독기에는 안 읽힌다. 이름은 `title` 이 말한다 */
+    icon?: ReactNode;
+    /** 그림 크기(px). 기본 56 */
+    iconSize?: number;
+    title: ReactNode;
+    /** 제목의 글자 모양 클래스. 기본 `h2` */
+    titleClass?: string;
+    description?: ReactNode;
+    tipGroups?: GameIntroTipGroup[];
+    start?: GameIntroStart;
+    className?: string;
+}
+/**
+ * **게임 시작 화면의 속** — 그림 · 이름 · 설명 · 팁 묶음 · 시작 단추.
+ *
+ * 말귀의 게임 넷(낱말퀴즈 · 타자 · 순발력 · 단어 디펜스)이 **네 벌로 똑같이** 적고 있었다.
+ * 구조가 같은 정도가 아니라 CSS 선언이 **글자까지 같았고**, 팁 머리글의 대비를 고친 WCAG
+ * 주석까지 네 번 베껴져 있었다(2026-09-25). 한 자리를 고치면 셋이 남는 꼴이었다.
+ *
+ * **감싸개(오버레이 · 시트 · 닫기)는 부르는 쪽이 쥔다.** 시트의 바탕 그라디언트와 테두리
+ * 빛깔이 게임마다 다르고 **그것이 각 게임의 얼굴**이다 — 코어가 그것까지 들면 게임마다 색을
+ * 넘기느라 도로 네 벌이 된다. 여기 있는 것은 그 **안쪽뿐**이다.
+ *
+ * 색은 `--color-onDark-*` 를 쓴다 — 늘 어두운 면 위에 얹는 흰색 알파라 테마를 따르지 않는다.
+ *
+ * ```tsx
+ * <div className={내시트}>          // 오버레이·시트·닫기는 부르는 쪽 것
+ *   <GameIntro icon="🔠" title="낱말퀴즈" description={설명}
+ *     tipGroups={[{ title: '게임 방법', tips: [{ icon: '🔠', text: '…' }] }]}
+ *     start={{ label: '시작하기', color: '#10b981', onClick: 시작 }} />
+ * </div>
+ * ```
+ * @public
+ */
+export default function GameIntro({ icon, iconSize, title, titleClass, description, tipGroups, start, className, }: GameIntroProps): import("react").JSX.Element;

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

@@ -0,0 +1,29 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../utils/cx';
+import './GameIntro.css';
+import Button from './Button';
+/**
+ * **게임 시작 화면의 속** — 그림 · 이름 · 설명 · 팁 묶음 · 시작 단추.
+ *
+ * 말귀의 게임 넷(낱말퀴즈 · 타자 · 순발력 · 단어 디펜스)이 **네 벌로 똑같이** 적고 있었다.
+ * 구조가 같은 정도가 아니라 CSS 선언이 **글자까지 같았고**, 팁 머리글의 대비를 고친 WCAG
+ * 주석까지 네 번 베껴져 있었다(2026-09-25). 한 자리를 고치면 셋이 남는 꼴이었다.
+ *
+ * **감싸개(오버레이 · 시트 · 닫기)는 부르는 쪽이 쥔다.** 시트의 바탕 그라디언트와 테두리
+ * 빛깔이 게임마다 다르고 **그것이 각 게임의 얼굴**이다 — 코어가 그것까지 들면 게임마다 색을
+ * 넘기느라 도로 네 벌이 된다. 여기 있는 것은 그 **안쪽뿐**이다.
+ *
+ * 색은 `--color-onDark-*` 를 쓴다 — 늘 어두운 면 위에 얹는 흰색 알파라 테마를 따르지 않는다.
+ *
+ * ```tsx
+ * <div className={내시트}>          // 오버레이·시트·닫기는 부르는 쪽 것
+ *   <GameIntro icon="🔠" title="낱말퀴즈" description={설명}
+ *     tipGroups={[{ title: '게임 방법', tips: [{ icon: '🔠', text: '…' }] }]}
+ *     start={{ label: '시작하기', color: '#10b981', onClick: 시작 }} />
+ * </div>
+ * ```
+ * @public
+ */
+export default function GameIntro({ icon, iconSize = 56, title, titleClass = 'h2', description, tipGroups, start, className, }) {
+    return (_jsxs("div", { className: cx('game-intro', className), children: [icon != null && (_jsx("span", { className: "game-intro__icon", "aria-hidden": "true", style: { '--game-intro-icon': `${iconSize}px` }, children: icon })), _jsx("h2", { className: cx('game-intro__title', titleClass), children: title }), description != null && _jsx("p", { className: "game-intro__description body-3", children: description }), tipGroups?.map((묶음, i) => (_jsxs("div", { className: "game-intro__tips", children: [묶음.title != null && _jsx("span", { className: "game-intro__tips-title body-3", children: 묶음.title }), 묶음.tips.map((팁, j) => (_jsxs("span", { className: "game-intro__tip body-3", children: [팁.icon != null && _jsx("span", { "aria-hidden": "true", children: 팁.icon }), _jsx("span", { children: 팁.text })] }, j)))] }, i))), start && (_jsx(Button, { htmlType: "button", className: start.className, variant: "main", color: start.color, size: 48, width: "100%", disabled: start.disabled, onClick: start.onClick, children: start.label }))] }));
+}

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

@@ -90,6 +90,10 @@ export type PanelRowInput = Base & {
     /** Enter로 확정(제출 등). TextField가 IME 조합 중 Enter는 걸러 주므로 한글 입력에서도 안전하다. */
     onEnter?: () => void;
     placeholder?: string;
+    /** 비추기만 하는 추천값 — Tab(앞으로)·Space 로 받는다. 자세한 것은 `TextField` 의 `ghostText`. */
+    ghostText?: string;
+    /** 추천값 뒤 꼬리말 — 안 주면 코어 사전의 것 */
+    ghostHint?: string;
     inputMode?: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';
     readOnly?: boolean;
     disabled?: boolean;

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

@@ -111,7 +111,7 @@ export function PanelRow(props) {
     }
     else if (variant === 'input') {
         const p = props;
-        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
+        right = (_jsxs("div", { className: `panel-row__input-wrap${useFullWidth ? ' panel-row__input-wrap--full' : ''}`, children: [_jsx(TextField, { value: p.value, onChange: p.onChange ?? noop, onKeyDown: p.onKeyDown, onEnter: p.onEnter, placeholder: p.placeholder, ghostText: p.ghostText, ghostHint: p.ghostHint, inputMode: p.inputMode, readOnly: p.readOnly, disabled: p.disabled, type: p.type, autoComplete: p.autoComplete, maxLength: p.maxLength, showCount: p.showCount, multiline: p.multiline, rows: p.rows, fullWidth: useFullWidth, error: error, ariaLabel: label, required: required }), p.helperText && _jsx("div", { className: "panel-row__helper caption-1", children: p.helperText })] }));
     }
     else if (variant === 'custom') {
         const p = props;

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

@@ -20,6 +20,27 @@ export interface TextFieldProps {
     required?: boolean;
     /** placeholder 텍스트 */
     placeholder?: string;
+    /**
+     * **비추기만 하는 추천값**(ghost-text) — 규칙으로 유도한 값을 자리표시로 비추고, 칸이 비어 있을 때
+     * **Tab(앞으로) · Space** 로 받아 적는다.
+     *
+     * 자동으로 채우지 않는다 — 규칙 변환은 완벽하지 않아 **사람이 보고 확정한다.** 그래서 값이 아니라
+     * 자리표시로만 있다가, 사람이 "받겠다" 는 키를 눌러야 값이 된다.
+     *
+     * 받는 때는 셋이 다 맞을 때뿐이다:
+     * - **Tab(앞으로) 이거나 Space.** `Shift+Tab` 은 안 받는다 — 뒤 칸으로 가려던 사람이 값을 얻는다.
+     * - **칸이 비어 있다**(공백만 친 것도 빈 것으로 본다). 손으로 적은 것을 덮지 않는다.
+     * - 비출 추천이 있다.
+     *
+     * 받은 키는 **이 칸이 먹는다**(`preventDefault`) — 그래서 그 Tab 으로 초점이 옮겨 가지 않고,
+     * 그 눌림은 `onKeyDown` 으로도 안 간다. 한 번 더 누르면 칸이 찼으므로 평소대로 넘어간다.
+     *
+     * 앱마다 이 세 줄이 손으로 적혀 있었다(말귀 두 자리 — 훈련 이름·표준 발음, 2026-09-25).
+     * 무엇을 비추고 어떻게 받는지는 **칸의 행동**이지 그 칸을 놓는 화면의 일이 아니다.
+     */
+    ghostText?: string;
+    /** 추천값 뒤에 붙는 꼬리말 — 안 주면 코어 사전의 " (Tab 또는 space 입력시 자동 입력)" */
+    ghostHint?: string;
     /** 입력 타입 */
     type?: 'text' | 'email' | 'password' | 'number' | 'tel' | 'url';
     /** 비활성 상태 */

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

@@ -13,7 +13,7 @@ import { useIsoLayoutEffect } from '../hooks/useIsoLayoutEffect';
 import './TextField.css';
 /** @public */
 export default function TextField(props) {
-    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, openOnFocus = false, } = props;
+    const { value, defaultValue, name, inputRef, onChange, label, ariaLabel, required, placeholder, ghostText, ghostHint, type = 'text', disabled = false, readOnly = false, error, helperText, maxLength, size = 48, variant = 'input', fullWidth = false, newline = false, multiline = false, rows = 3, leftIcon, rightIcon, clearable = false, list, showCount = true, className = '', onFocus, onBlur, onKeyDown, onEnter, inputMode, autoComplete, autoFocus, suggestions: suggestionsProp, openOnFocus = false, } = props;
     // 읽기 전용·꺼진 칸은 후보로 값을 바꾸지 못한다 — 전에는 ↓·Enter·후보 누름으로 onChange 가 나갔다
     const suggestions = readOnly || disabled ? undefined : suggestionsProp;
     const { t } = useTranslation();
@@ -93,6 +93,11 @@ export default function TextField(props) {
             inputRef.current = node;
     }, [inputRef]);
     /* eslint-enable react-hooks/immutability */
+    /* 추천이 있으면 자리표시가 **추천 + 받는 법**이 된다. 추천이 없으면 그 칸의 평소 자리표시로 물러선다.
+       (네이티브 자리표시는 칸이 비었을 때만 보이므로 "비었을 때만" 은 따로 가릴 것이 없다.) */
+    const 자리표시 = ghostText
+        ? `${ghostText}${ghostHint ?? t('wordTable.save.autoFillHint', ' (Tab 또는 space 입력시 자동 입력)')}`
+        : placeholder;
     const isControlled = value !== undefined;
     /* 비밀번호는 value 를 React 에 넘기지 않는다 — 위 useEffect 주석 참고 */
     const isPasswordControlled = isControlled && type === 'password';
@@ -141,7 +146,7 @@ export default function TextField(props) {
         // 단 비밀번호는 둘 다 넘기지 않는다 — 어느 쪽이든 HTML value 속성에 평문이 박힌다
         ...(isPasswordControlled ? {} : isControlled ? { value } : { defaultValue }),
         ref: setNodeRef,
-        placeholder,
+        placeholder: 자리표시,
         name,
         disabled,
         readOnly,
@@ -202,6 +207,21 @@ export default function TextField(props) {
             /* 후보를 가리킨 채 누른 Enter 는 **후보를 고르는** 키다(아래 combobox.handleKeyDown
                과 같은 조건). 예전에는 그 Enter 가 onEnter 까지 불러, 후보를 고르는 순간 검색·제출이
                한 번 더 나갔다. 고르는 Enter 는 폼 제출도 막는다. */
+            /* **비추던 추천을 받아 적는다.** Tab(앞으로)·Space 이고, 칸이 비었고(공백만 친 것도 빈 것),
+               비출 추천이 있을 때만. 받은 키는 이 칸이 먹으므로 초점이 옮겨 가지 않고 `onKeyDown` 으로도
+               안 간다 — 한 번 더 누르면 칸이 찼으니 평소대로 넘어간다. 조합 중(한글 중간 글자)에는 손대지
+               않는다: 그때의 Space 는 글자를 맺는 키다. */
+            const 추천받는키 = ((e.key === 'Tab' && !e.shiftKey) || e.key === ' ') && !e.nativeEvent.isComposing;
+            if (ghostText && 추천받는키 && !readOnly && !disabled && !(e.currentTarget.value ?? '').trim()) {
+                e.preventDefault();
+                const node = e.currentTarget;
+                if (!isControlled) {
+                    node.value = ghostText;
+                    setInnerLen(ghostText.length);
+                }
+                onChange?.(ghostText);
+                return;
+            }
             const 후보고르는엔터 = !!suggestions && e.key === 'Enter' && !e.nativeEvent.isComposing && combobox.activeIdx >= 0;
             if (후보고르는엔터)
                 e.preventDefault();
@@ -229,8 +249,8 @@ export default function TextField(props) {
     // variant="display"는 값과 placeholder 글자 크기가 크게 달라 네이티브 ::placeholder로는
     // 세로 중앙을 못 맞춘다. 전용 오버레이 div를 flex로 정중앙 정렬하고,
     // 값이 있으면(:placeholder-shown 해제) CSS로 숨긴다.
-    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!placeholder;
-    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: placeholder }))] }));
+    const showPlaceholderOverlay = variant === 'display' && !newline && !multiline && !!자리표시;
+    const renderInputArea = () => (_jsxs(_Fragment, { children: [renderInput(), showPlaceholderOverlay && (_jsx("span", { className: "text-field__placeholder", "aria-hidden": "true", children: 자리표시 }))] }));
     return (_jsxs("div", { ref: rootRef, className: cls, children: [label && (_jsxs("label", { htmlFor: inputId, className: "text-field__label caption-1", children: [label, required && _jsx("span", { className: "text-field__required", children: "*" })] })), _jsxs("div", { className: "text-field__wrap", children: [leftIcon && (_jsx("span", { className: "text-field__icon text-field__icon--left", children: _jsx(Icon, { icon: leftIcon, label: "", className: "", svgClassName: "text-field__icon-svg", size: iconSize }) })), renderInputArea(), maxLength != null && showCount && (_jsxs("span", { className: `text-field__count caption-2${isOver ? ' text-field__count--over' : ''}`, children: [len, "/", maxLength] })), showClear && (_jsx(Button, { size: 24, type: "dot", icon: "x", variant: "transparent-gray", useBorder: false, className: "text-field__clear", ariaLabel: t('textField.clearAriaLabel', '입력값 지우기'), 
                         // 폼 안에서 쓰일 때 기본값(submit)으로 눌려 폼이 제출되지 않도록.
                         htmlType: "button", 

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

@@ -140,12 +140,14 @@ export { useCalendarMonth } from './components/useCalendarMonth';
 export type { UseCalendarMonthResult } from './components/useCalendarMonth';
 export { default as BarChart, BarChartControls } from './components/BarChart';
 export { default as LineChart, LINE_CHART_HOVER_DELAY_MS } from './components/LineChart';
+export { default as GameIntro } from './components/GameIntro';
 export { useBarChartControl } from './components/useBarChartControl';
 export { buildMonthChartData } from './components/barChartData';
 export { getControlDateRange } from './components/barChartTypes';
 export type { ControlDateRange } from './components/barChartTypes';
 export type { BarChartProps, BarChartControl, BarChartSize, BarData, MonthBarData, ChartPoint } from './components/BarChart';
 export type { LineChartProps, LineChartPoint, LineChartScales } from './components/LineChart';
+export type { GameIntroProps, GameIntroTip, GameIntroTipGroup, GameIntroStart } from './components/GameIntro';
 export { default as RingChart } from './components/RingChart';
 export type { RingChartProps, RingChartSize, RingChartSegment } from './components/RingChart';
 export { default as ChartSection, ChartTotal, ChartLegend } from './components/ChartSection';

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

@@ -91,6 +91,7 @@ export { default as DatePicker } from './components/DatePicker';
 export { useCalendarMonth } from './components/useCalendarMonth';
 export { default as BarChart, BarChartControls } from './components/BarChart';
 export { default as LineChart, LINE_CHART_HOVER_DELAY_MS } from './components/LineChart';
+export { default as GameIntro } from './components/GameIntro';
 export { useBarChartControl } from './components/useBarChartControl';
 export { buildMonthChartData } from './components/barChartData';
 export { getControlDateRange } from './components/barChartTypes';

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

@@ -108,6 +108,23 @@
 
   --color-popupBlock: rgba(16, 24, 32, 0.6);
 
+  /* ── 어두운 면 위(on-dark) ───────────────────────────────
+     **제 바탕을 늘 어둡게 쥐는 면** 위에 얹는 흰색 알파다(게임 시트처럼 바탕 그라디언트를
+     스스로 정하는 자리). 그래서 **테마를 따르지 않는다** — 그 면은 라이트 모드에서도 어둡다.
+     위의 `--color-white-a*` 와 달리 다크 모드에서 뒤집히지 않는 것이 이 이름의 뜻이다.
+
+     `--color-onDark-muted` 가 0.5 인 데에는 까닭이 있다: 0.3 은 어두운 면 위에서 **2.6:1**
+     이라 소제목이 거의 안 보였다. 0.5 는 **5.3:1** 로 WCAG AA(일반 텍스트 4.5:1)를 넉넉히
+     넘기면서도 본문(0.58, 6.8:1)보다는 차분하다.
+
+     수는 실제 게임 시트 둘(`#0d0b1e` · `#070f09`) 위에서 다시 잰 값이다 — 말귀 주석에는
+     2.7:1 · 4.6:1 로 적혀 있었는데 어림한 값이었다(2026-09-25 실측). 그 셈이 네 게임의 CSS 에
+     **주석까지 똑같이 네 번** 베껴져 있었다 — 색 하나의 일이라 여기로 옮긴다. */
+  --color-onDark-title: var(--color-pureWhite);
+  --color-onDark-text: rgba(255, 255, 255, 0.58);
+  --color-onDark-muted: rgba(255, 255, 255, 0.5);
+  --color-onDark-surface: rgba(255, 255, 255, 0.04);
+
   /* ── 시맨틱 색 별칭 (역할 기반) ───────────────────────────
      --color-black/white 계열은 "밝기 이름"이라 다크 모드에서 이름과 실제 색이 뒤집힌다
      (다크에서 --color-black은 #f0f2f5, 즉 밝은 색). 새로 쓰는 코드는 아래 역할 이름을

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

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.190.0";
+export declare const CORE_VERSION = "0.192.0";

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

@@ -46,4 +46,4 @@
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export const CORE_VERSION = '0.190.0';
+export const CORE_VERSION = '0.192.0';