@ihabdevteam/core 0.195.0 → 0.196.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +61 -0
- package/dist/components.cjs.js +1 -1
- package/dist/components.esm.css +1 -1
- package/dist/hooks.cjs.js +1 -1
- package/dist/i18n.cjs.js +1 -1
- package/dist/ihabdevteam-core.cjs.js +3 -3
- package/dist/ihabdevteam-core.css +1 -1
- package/dist/ihabdevteam-core.d.ts +16 -4
- package/dist/packages/core/src/components/Popup/Popup.d.ts +15 -3
- package/dist/packages/core/src/components/SideNav.css +9 -4
- package/dist/packages/core/src/gameShell.css +17 -3
- package/dist/packages/core/src/version.d.ts +1 -1
- package/dist/packages/core/src/version.js +1 -1
- package/dist/utils.cjs.js +1 -1
- package/package.json +1 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
:where(.ihabdevteam-core-scope){color-scheme:light;--brand-main:#499cdf;--brand-sub:#4dcdc0;--color-lightMain:var(--brand-lightMain,#d2e2ef);--color-softMain:var(--brand-softMain,#8bbce4);--color-main:var(--brand-main);--color-main-a10:color-mix(in srgb,var(--color-main) 10%,transparent);--color-main-a20:color-mix(in srgb,var(--color-main) 20%,transparent);--color-deepMain:var(--brand-deepMain,#418ecd);--color-darkMain:var(--brand-darkMain,#1e5a8f);--color-lightSub:var(--brand-lightSub,#d5ecea);--color-softSub:var(--brand-softSub,#92ddd5);--color-sub:var(--brand-sub);--color-sub-a10:color-mix(in srgb,var(--color-sub) 10%,transparent);--color-deepSub:var(--brand-deepSub,#45bbaf);--color-darkSub:var(--brand-darkSub,#257e76);--color-text-main:var(--color-darkMain);--color-text-sub:var(--color-darkSub);--color-infoLink:#2f7fd1;--color-uiAccent:#32bbae;--color-success:#2fae9e;--color-warn:#e6b94e;--color-warn-a10:#e6b94e1a;--color-error:#d9534f;--color-error-a10:#d9534f1a;--color-like:#e06b68;--color-disabled:#bfc7d1;--color-pureWhite:#fff;--color-white:#fbfdff;--color-white-a10:#fbfdff1a;--color-white-a30:#fbfdff4d;--color-white-a60:#fbfdff99;--color-white-a80:#fbfdffcc;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-lightGray-a10:#96a4b81a;--color-lightGray-a80:#96a4b8cc;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-gray-a10:#64748b1a;--color-gray-a60:#64748b99;--color-gray-a80:#64748bcc;--color-deepGray:#546170;--color-darkGray:#434d56;--color-darkGray-a10:#434d561a;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-popupBlock:rgba(16,24,32,.6);--color-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)}.ihabdevteam-core-scope .game-overlay{align-items:center;background:rgba(0,0,0,.5);background:var(--game-overlay-bg,rgba(0,0,0,.5));display:flex;inset:0;justify-content:center;position:fixed;z-index:2200;z-index:var(--z-modal)}@media (max-width:767px){.ihabdevteam-core-scope .game-overlay:has(.game-sheet--play){padding:0}.ihabdevteam-core-scope .game-sheet.game-sheet--play{border:none;border-radius:0;box-shadow:none;height:100%;justify-content:center;max-height:none;max-width:none;padding:calc(28px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));width:100%}}@media (max-height:500px){.ihabdevteam-core-scope .game-sheet.game-sheet--play{gap:6px;padding-bottom:calc(10px + env(safe-area-inset-bottom));padding-top:calc(10px + env(safe-area-inset-top))}.ihabdevteam-core-scope .game-sheet--play .game-play-header{gap:8px}.ihabdevteam-core-scope .game-sheet--play .game-play-header__icon{font-size:18px;height:32px;width:32px}}.ihabdevteam-core-scope .game-play-header,.ihabdevteam-core-scope .game-timer{align-items:center;display:flex;gap:10px}.ihabdevteam-core-scope .game-timer__label{min-width:30px;text-align:right;transition:color .3s}.ihabdevteam-core-scope .game-timer-slider-wrap{display:flex;flex:1}.ihabdevteam-core-scope .game-rounds{align-items:center;display:flex;gap:7px}.ihabdevteam-core-scope .game-rounds__dot{background:hsla(0,0%,100%,.14);background:var(--game-dot-bg,hsla(0,0%,100%,.14));border-radius:50%;height:8px;transition:background .25s,transform .25s,box-shadow .25s;width:8px}.ihabdevteam-core-scope .game-rounds__dot--correct{background:#34d399;background:var(--game-dot-correct,#34d399)}.ihabdevteam-core-scope .game-rounds__dot--wrong{background:#f87171;background:var(--game-dot-wrong,#f87171)}.ihabdevteam-core-scope .game-rounds__label{color:hsla(0,0%,100%,.45);color:var(--game-muted,hsla(0,0%,100%,.45));margin-left:auto}.ihabdevteam-core-scope .game-feedback{align-items:center;border-radius:10px;border-radius:var(--radius-s);display:flex;justify-content:center;padding:12px 16px;text-align:center}.ihabdevteam-core-scope .game-feedback--hidden{visibility:hidden}.ihabdevteam-core-scope .game-result{align-items:center;display:flex;flex-direction:column;gap:8px;gap:var(--spacing-xs)}.ihabdevteam-core-scope .game-result__emoji{font-size:42px}.ihabdevteam-core-scope .game-result__item{align-items:center;border-radius:8px;border-radius:var(--radius-sm);box-sizing:border-box;display:flex;gap:10px;padding:8px 12px;width:100%}.ihabdevteam-core-scope .game-result__status{flex-shrink:0;width:18px}.ihabdevteam-core-scope .game-result__pct-row{align-items:center;display:flex;flex-direction:column;gap:6px;margin-bottom:8px;margin-bottom:var(--spacing-xs);width:100%}.ihabdevteam-core-scope .game-result__footer{display:flex;gap:10px;margin-top:4px;width:100%}@media (max-height:700px){.ihabdevteam-core-scope .game-result{gap:10px}.ihabdevteam-core-scope .game-result__emoji-ring{font-size:30px;height:64px;width:64px}}@media (max-height:500px) and (min-width:520px){.ihabdevteam-core-scope .game-result{align-content:center;align-items:center;display:grid;grid-template-columns:auto minmax(190px,1fr);grid-column-gap:20px;grid-column-gap:var(--spacing-l);-moz-column-gap:20px;column-gap:20px;-moz-column-gap:var(--spacing-l);column-gap:var(--spacing-l);grid-row-gap:4px;height:100%;min-height:0;padding-right:44px;row-gap:4px;width:100%}.ihabdevteam-core-scope .game-result__emoji-ring{font-size:24px;height:52px;width:52px}.ihabdevteam-core-scope .game-result__list{align-self:stretch;grid-column:2;grid-row:1/span 5;max-height:100%;min-height:0}.ihabdevteam-core-scope .game-result__footer{background:none;grid-column:2;grid-row:6;margin-top:0;padding-top:0;position:static}}@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}}
|
|
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-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)}.ihabdevteam-core-scope .game-overlay{align-items:center;background:rgba(0,0,0,.5);background:var(--game-overlay-bg,rgba(0,0,0,.5));display:flex;inset:0;justify-content:center;position:fixed;z-index:2200;z-index:var(--z-modal)}@media (max-width:767px){.ihabdevteam-core-scope .game-overlay:has(.game-sheet--play){padding:0}.ihabdevteam-core-scope .game-sheet.game-sheet--play{border:none;border-radius:0;box-shadow:none;height:100%;justify-content:center;max-height:none;max-width:none;padding:calc(28px + env(safe-area-inset-top)) 20px calc(16px + env(safe-area-inset-bottom));width:100%}}@media (max-height:500px){.ihabdevteam-core-scope .game-sheet.game-sheet--play{gap:6px;padding-bottom:calc(10px + env(safe-area-inset-bottom));padding-top:calc(10px + env(safe-area-inset-top))}.ihabdevteam-core-scope .game-sheet--play .game-play-header{gap:8px}.ihabdevteam-core-scope .game-sheet--play .game-play-header__icon{font-size:18px;height:32px;width:32px}}.ihabdevteam-core-scope .game-play-header,.ihabdevteam-core-scope .game-timer{align-items:center;display:flex;gap:10px}.ihabdevteam-core-scope .game-timer__label{min-width:30px;text-align:right;transition:color .3s}.ihabdevteam-core-scope .game-timer-slider-wrap{display:flex;flex:1}.ihabdevteam-core-scope .game-rounds{align-items:center;display:flex;gap:7px}.ihabdevteam-core-scope .game-rounds__dot{background:hsla(0,0%,100%,.14);background:var(--game-dot,var(--game-dot-bg,hsla(0,0%,100%,.14)));border-radius:50%;height:8px;transition:background .25s,transform .25s,box-shadow .25s;width:8px}.ihabdevteam-core-scope .game-rounds__dot--correct{--game-dot:var(--game-dot-correct,#34d399)}.ihabdevteam-core-scope .game-rounds__dot--wrong{--game-dot:var(--game-dot-wrong,#f87171)}.ihabdevteam-core-scope .game-rounds__label{color:hsla(0,0%,100%,.45);color:var(--game-muted,hsla(0,0%,100%,.45));margin-left:auto}.ihabdevteam-core-scope .game-feedback{align-items:center;border-radius:10px;border-radius:var(--radius-s);display:flex;justify-content:center;padding:12px 16px;text-align:center}.ihabdevteam-core-scope .game-feedback--hidden{visibility:hidden}.ihabdevteam-core-scope .game-result{align-items:center;display:flex;flex-direction:column;gap:8px;gap:var(--spacing-xs)}.ihabdevteam-core-scope .game-result__emoji{font-size:42px}.ihabdevteam-core-scope .game-result__item{align-items:center;border-radius:8px;border-radius:var(--radius-sm);box-sizing:border-box;display:flex;gap:10px;padding:8px 12px;width:100%}.ihabdevteam-core-scope .game-result__status{flex-shrink:0;width:18px}.ihabdevteam-core-scope .game-result__pct-row{align-items:center;display:flex;flex-direction:column;gap:6px;margin-bottom:8px;margin-bottom:var(--spacing-xs);width:100%}.ihabdevteam-core-scope .game-result__footer{display:flex;gap:10px;margin-top:4px;width:100%}@media (max-height:700px){.ihabdevteam-core-scope .game-result{gap:10px}.ihabdevteam-core-scope .game-result__emoji-ring{font-size:30px;height:64px;width:64px}}@media (max-height:500px) and (min-width:520px){.ihabdevteam-core-scope .game-result{align-content:center;align-items:center;display:grid;grid-template-columns:auto minmax(190px,1fr);grid-column-gap:20px;grid-column-gap:var(--spacing-l);-moz-column-gap:20px;column-gap:20px;-moz-column-gap:var(--spacing-l);column-gap:var(--spacing-l);grid-row-gap:4px;height:100%;min-height:0;padding-right:44px;row-gap:4px;width:100%}.ihabdevteam-core-scope .game-result__emoji-ring{font-size:24px;height:52px;width:52px}.ihabdevteam-core-scope .game-result__list{align-self:stretch;grid-column:2;grid-row:1/span 5;max-height:100%;min-height:0}.ihabdevteam-core-scope .game-result__footer{background:none;grid-column:2;grid-row:6;margin-top:0;padding-top:0;position:static}}@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}}
|
|
@@ -1626,7 +1626,7 @@ export declare function copyText(text: string): Promise<boolean>;
|
|
|
1626
1626
|
*
|
|
1627
1627
|
* 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
|
|
1628
1628
|
*/
|
|
1629
|
-
export declare const CORE_VERSION = "0.
|
|
1629
|
+
export declare const CORE_VERSION = "0.196.0";
|
|
1630
1630
|
|
|
1631
1631
|
/** @public */
|
|
1632
1632
|
declare const coreDefault: Record<string, unknown>;
|
|
@@ -4814,9 +4814,21 @@ export declare interface PopupProps {
|
|
|
4814
4814
|
* 세로는 이제 늘 가운데다(0.179.0) — 소비자 셋이 이 자리를 각자 칠하고 있었다. */
|
|
4815
4815
|
footerLayout?: 'center' | 'fill' | 'between';
|
|
4816
4816
|
onClose?: () => void;
|
|
4817
|
-
/**
|
|
4818
|
-
*
|
|
4819
|
-
*
|
|
4817
|
+
/**
|
|
4818
|
+
* true 면 닫는 길을 통째로 잠근다 — **✕ · ESC · 바깥 누르기 셋 다**. 이미 시작된 서버 요청이
|
|
4819
|
+
* 도는 동안 "취소했다고 믿었는데 요청은 계속 진행돼 완료 후 결과가 반영되는" 사고를 막는다.
|
|
4820
|
+
* 바닥 `buttons` 의 개별 `disabled` 와는 별개다.
|
|
4821
|
+
*
|
|
4822
|
+
* **✕ 의 `.disabled` 를 재면 `false` 가 나온다 — 그래도 안 닫힌다.** 창이 열리면 초점이 ✕ 로
|
|
4823
|
+
* 가는데, 초점을 쥔 단추에 native `disabled` 를 걸면 브라우저가 초점을 body 로 빼앗아 키보드로
|
|
4824
|
+
* 창 안을 돌아다니던 사람이 창 밖으로 튕긴다. 그래서 그동안은 `aria-disabled` 로만 막는다
|
|
4825
|
+
* (`Button` 의 `hasFocus`). 초점을 잃으면 native 로 돌아간다.
|
|
4826
|
+
*
|
|
4827
|
+
* 이 값이 도는지 **확인할 때는 속성이 아니라 결과를 본다** — 눌러 보고 `onClose` 가 안 불리는지.
|
|
4828
|
+
* 그때 **닫기 애니메이션(260ms)을 넘겨서** 재야 한다: 누르자마자 재면 "안 닫혔다" 가 늘 참이다.
|
|
4829
|
+
* `test/closeDisabledAfterOpen0925.test.tsx` 가 그 꼴로 세 길을 모두 못 박아 두었다
|
|
4830
|
+
* (말귀가 `.disabled` 를 보고 "✕ 는 한 번도 잠긴 적이 없다" 로 읽은 뒤 적는다 — 2026-09-25).
|
|
4831
|
+
*/
|
|
4820
4832
|
closeDisabled?: boolean;
|
|
4821
4833
|
/**
|
|
4822
4834
|
* 닫기 직전에 불린다. false를 반환하면 닫기를 중단한다(닫힘 애니메이션도 시작하지 않음).
|
|
@@ -79,9 +79,21 @@ export interface PopupProps {
|
|
|
79
79
|
* 세로는 이제 늘 가운데다(0.179.0) — 소비자 셋이 이 자리를 각자 칠하고 있었다. */
|
|
80
80
|
footerLayout?: 'center' | 'fill' | 'between';
|
|
81
81
|
onClose?: () => void;
|
|
82
|
-
/**
|
|
83
|
-
*
|
|
84
|
-
*
|
|
82
|
+
/**
|
|
83
|
+
* true 면 닫는 길을 통째로 잠근다 — **✕ · ESC · 바깥 누르기 셋 다**. 이미 시작된 서버 요청이
|
|
84
|
+
* 도는 동안 "취소했다고 믿었는데 요청은 계속 진행돼 완료 후 결과가 반영되는" 사고를 막는다.
|
|
85
|
+
* 바닥 `buttons` 의 개별 `disabled` 와는 별개다.
|
|
86
|
+
*
|
|
87
|
+
* **✕ 의 `.disabled` 를 재면 `false` 가 나온다 — 그래도 안 닫힌다.** 창이 열리면 초점이 ✕ 로
|
|
88
|
+
* 가는데, 초점을 쥔 단추에 native `disabled` 를 걸면 브라우저가 초점을 body 로 빼앗아 키보드로
|
|
89
|
+
* 창 안을 돌아다니던 사람이 창 밖으로 튕긴다. 그래서 그동안은 `aria-disabled` 로만 막는다
|
|
90
|
+
* (`Button` 의 `hasFocus`). 초점을 잃으면 native 로 돌아간다.
|
|
91
|
+
*
|
|
92
|
+
* 이 값이 도는지 **확인할 때는 속성이 아니라 결과를 본다** — 눌러 보고 `onClose` 가 안 불리는지.
|
|
93
|
+
* 그때 **닫기 애니메이션(260ms)을 넘겨서** 재야 한다: 누르자마자 재면 "안 닫혔다" 가 늘 참이다.
|
|
94
|
+
* `test/closeDisabledAfterOpen0925.test.tsx` 가 그 꼴로 세 길을 모두 못 박아 두었다
|
|
95
|
+
* (말귀가 `.disabled` 를 보고 "✕ 는 한 번도 잠긴 적이 없다" 로 읽은 뒤 적는다 — 2026-09-25).
|
|
96
|
+
*/
|
|
85
97
|
closeDisabled?: boolean;
|
|
86
98
|
/**
|
|
87
99
|
* 닫기 직전에 불린다. false를 반환하면 닫기를 중단한다(닫힘 애니메이션도 시작하지 않음).
|
|
@@ -10,8 +10,13 @@
|
|
|
10
10
|
예전에는 오른쪽 여백을 '스크롤바 자리(gutter)'가 만든다고 보고 padding-right 를
|
|
11
11
|
0 으로 뒀다. 스크롤바가 자리를 차지하는 환경(윈도우 등)에서는 맞았지만, macOS
|
|
12
12
|
오버레이 스크롤바(마우스 없음·"스크롤할 때만 보기")는 gutter 가 **0** 이라
|
|
13
|
-
오른쪽이 테두리 1px 만 남았다(실측: 활성 항목 좌 12 / 우 1).
|
|
14
|
-
|
|
13
|
+
오른쪽이 테두리 1px 만 남았다(실측: 활성 항목 좌 12 / 우 1).
|
|
14
|
+
|
|
15
|
+
12px 이던 것을 **8px 으로 낮춘다**(사장님 지시 2026-09-25). 수 대신 토큰을 쓰므로
|
|
16
|
+
여백이 움직일 때 한 자리에서 움직인다 — `--spacing-xs` 는 토큰 파일에서 한 번만
|
|
17
|
+
정해지고 끊는 자리마다 다시 정하는 곳이 없다(`--spacing-content`·`--spacing-page` 와
|
|
18
|
+
다른 점이다). */
|
|
19
|
+
padding: 0 var(--spacing-xs);
|
|
15
20
|
/* 스크롤바는 padding 바깥·border 안쪽에 그려진다 — 투명 테두리를 두면 그만큼
|
|
16
21
|
안쪽으로 들어와, 콘텐츠 영역과 맞닿은 경계선에 딱 붙지 않는다. 왼쪽에도 같은
|
|
17
22
|
폭을 둬 짝을 맞춘다. */
|
|
@@ -23,8 +28,8 @@
|
|
|
23
28
|
/* 스크롤바 자리를 늘 비워둔다 — 메뉴 수나 창 높이에 따라 스크롤이 생겼다 없어지면
|
|
24
29
|
그때마다 메뉴가 좌우로 밀려 흔들린다. **양쪽에 똑같이** 비워, 자리가 0 인
|
|
25
30
|
환경(오버레이)이든 몇 px 인 환경(클래식)이든 좌우가 같게 한다.
|
|
26
|
-
실측(1400px, 스크롤이 서든 안 서든 같다): 오버레이 좌
|
|
27
|
-
클래식 11px 좌
|
|
31
|
+
실측(1400px, 스크롤이 서든 안 서든 같다): 오버레이 좌 9 / 우 9,
|
|
32
|
+
클래식 11px 좌 20 / 우 20. 클래식에서는 항목 폭이 그만큼(196 → 180) 줄지만
|
|
28
33
|
글자가 들어가기에 넉넉하다.
|
|
29
34
|
접힌 72px 레일은 그 폭을 못 버틴다 — Header.css 에서 따로 다룬다. */
|
|
30
35
|
scrollbar-gutter: stable both-edges;
|
|
@@ -90,17 +90,31 @@
|
|
|
90
90
|
align-items: center;
|
|
91
91
|
gap: 7px;
|
|
92
92
|
}
|
|
93
|
+
/* **빛깔은 `background` 가 아니라 변수로 정한다.**
|
|
94
|
+
껍데기의 바탕 규칙과 게임이 쥔 상태 규칙(예: '지금 이 판' 은 하늘빛에 글로우)이 둘 다 클래스
|
|
95
|
+
하나(0,1,0)면, **나중에 읽히는 쪽이 이긴다** — 코어 CSS 가 앱보다 뒤라 게임의 상태 빛깔이
|
|
96
|
+
껍데기 바탕에 덮였다(말귀 실측 2026-09-25, 0.195.0 갈아타기).
|
|
97
|
+
|
|
98
|
+
특이도를 올려도 반만 풀린다. 코어가 모르는 상태(`--current` 같은 것)는 여전히 지기 때문이다.
|
|
99
|
+
그래서 **서로 다른 성질을 쓴다**: 껍데기는 `--game-dot` 을 *읽고*, 상태는 그 변수를 *쓴다*.
|
|
100
|
+
두 규칙이 부딪히지 않으니 차례도 특이도도 상관없다.
|
|
101
|
+
|
|
102
|
+
게임 쪽에서는 이렇게 얹는다:
|
|
103
|
+
```css
|
|
104
|
+
.tg-rounds__dot--current { --game-dot: #7dd3fc; transform: scale(1.3); box-shadow: 0 0 8px …; }
|
|
105
|
+
``` */
|
|
93
106
|
.game-rounds__dot {
|
|
94
107
|
width: 8px;
|
|
95
108
|
height: 8px;
|
|
96
109
|
border-radius: 50%;
|
|
97
|
-
background: var(--game-dot-bg, rgba(255, 255, 255, 0.14));
|
|
110
|
+
background: var(--game-dot, var(--game-dot-bg, rgba(255, 255, 255, 0.14)));
|
|
98
111
|
transition: background 0.25s, transform 0.25s, box-shadow 0.25s;
|
|
99
112
|
}
|
|
100
|
-
.game-rounds__dot--correct {
|
|
101
|
-
.game-rounds__dot--wrong {
|
|
113
|
+
.game-rounds__dot--correct { --game-dot: var(--game-dot-correct, #34d399); }
|
|
114
|
+
.game-rounds__dot--wrong { --game-dot: var(--game-dot-wrong, #f87171); }
|
|
102
115
|
.game-rounds__label {
|
|
103
116
|
margin-left: auto;
|
|
117
|
+
/* 위와 같은 까닭 — 게임이 제 빛깔을 얹으려면 `--game-muted` 를 쓴다 */
|
|
104
118
|
color: var(--game-muted, rgba(255, 255, 255, 0.45));
|
|
105
119
|
}
|
|
106
120
|
|