@ihabdevteam/core 0.211.0 → 0.213.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-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}}
+: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;--font-mono:ui-monospace,SFMono-Regular,Menlo,Monaco,"Roboto Mono","Courier New",monospace;--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}}

package/dist/ihabdevteam-core.d.ts

@@ -1626,7 +1626,7 @@ export declare function copyText(text: string): Promise<boolean>;
  *
  * 값은 손으로 적고 `test/coreVersion.test.ts` 가 package.json 과 어긋나면 운다.
  */
-export declare const CORE_VERSION = "0.211.0";
+export declare const CORE_VERSION = "0.213.0";
 
 /** @public */
 declare const coreDefault: Record<string, unknown>;
@@ -10360,7 +10360,7 @@ export declare interface WordSearchResultWord {
  * 표시(items)·편집(editCells) 두 모드를 지원한다.
  * @public
  */
-export declare function WordTable({ title, titleIcon, disc, className, orientation, contentTypes, cutLine, showOutline, showDivLine, items, editCells, count, activeCell, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd, contentRef, buttonSize, pageNumber, pageNumberPosition, fitHeight, scoring, marks, onMarkClick, scoreIndexOffset, }: WordTableProps): JSX.Element;
+export declare function WordTable({ title, titleIcon, disc, className, orientation, contentTypes, cutLine, showOutline, showDivLine, items, editCells, count, activeCell, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd, contentRef, buttonSize, brand, code, pageNumber, pageNumberPosition, fitHeight, scoring, marks, onMarkClick, scoreIndexOffset, }: WordTableProps): JSX.Element;
 
 export declare function WordTableBlock({ title, titleIcon, disc, filterTitle, filterCollapsible, filterDefaultCollapsed, filterCollapsed, onFilterCollapsedChange, filterHeaderSummary, items, onSaveComplete, onLoad, onRemoveItem, onReset, resetLabel, saveButtonLabel, secondarySaveButtonLabel, onReorder, showCellCount, onAddItem, className, renderSavePopup, renderWordSearch, hideControls, saveOnly, tableName, nameValue, onNameChange, descriptionValue, onDescriptionChange, namePlaceholder, descriptionPlaceholder, existingNames, editingName, onCancel, initialItemsPerPage, renderCellAction, actionsLeftExtra }: WordTableBlockProps): JSX.Element;
 
@@ -10513,7 +10513,7 @@ export declare interface WordTableBlockProps {
  * @public 단어표를 '문서형' 미리보기 카드로 표현하는 컴포넌트.
  * 내용 썸네일(WordTableThumbnail) + 이름 + 날짜 + (발행 배지 / 더보기 / 스토어 푸터).
  */
-export declare function WordTableButton({ items, name, description, createdAt, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }: WordTableButtonProps): JSX.Element;
+export declare function WordTableButton({ items, name, description, createdAt, code, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }: WordTableButtonProps): JSX.Element;
 
 /** @public */
 export declare interface WordTableButtonProps {
@@ -10525,6 +10525,23 @@ export declare interface WordTableButtonProps {
     description?: string;
     /** 생성일(ISO) — 메타(날짜)에 표시. */
     createdAt?: string;
+    /**
+     * 짧은 **식별 글** — 표 번호처럼 이 표를 가리키는 이름(예: `1043-E`).
+     *
+     * 배지가 아니다. `published`·`shared` 는 **상태**를 말하는 자리라 색과 모양이 붙어 있는데,
+     * 이것은 상태가 아니라 이름에 가깝다(말귀 요청 ㉚, 2026-09-30).
+     *
+     * 등록일과 같은 줄 **왼쪽 끝**에 선다 — 그 줄은 카드 바닥에 붙어 있어(`margin-top: auto`)
+     * 제목이 한 줄이든 두 줄이든, 설명이 있든 없든 **자리가 안 움직인다.** 종이에 찍힌 번호를
+     * 들고 카드를 훑어 찾는 일이라 자리가 고정인 것이 요점이다. 제목 곁에 두면 제목 길이와
+     * 설명 유무에 따라 오르내려 훑기 어렵다.
+     *
+     * **고정폭으로 그린다**(`--font-mono`) — 글자마다 폭이 다르면 종이의 번호와 화면의 번호를
+     * 눈으로 견줄 때 자릿수를 세기 어렵다.
+     *
+     * 카드의 읽히는 이름에도 함께 실린다(`이름 (번호)`) — 낭독기로 훑는 사람도 번호로 찾는다.
+     */
+    code?: string;
     /** 스토어 발행 배지 표시 */
     published?: boolean;
     /** 발행 배지 라벨. 없으면 사전 `myWordTable.publishedBadge`(기본 '발행됨'). */
@@ -10724,6 +10741,40 @@ export declare interface WordTableProps {
      * 쪽의 시작 번호를 받아 표 전체에서 유일한 번호로 만든다.
      */
     scoreIndexOffset?: number;
+    /**
+     * **종이 위·아래에 띠를 두르고** 로고·표 번호·주소·쪽 번호를 담는다(사용자 지시 2026-09-30).
+     *
+     * 자리는 넷이다 — 위 왼쪽 말귀 로고 · 위 오른쪽 `code` · 아래 왼쪽 ihab 로고와 저작권 ·
+     * 아래 오른쪽 주소와 쪽 번호.
+     *
+     * **안 주면 종이가 한 픽셀도 안 바뀐다.** 띠는 격자 위아래를 비워 만드는 것이라(쪽 번호가
+     * 쓰던 방식과 같다) 칸이 그만큼 낮아진다 — 안 쓰는 표까지 낮아지면 안 된다.
+     *
+     * 띠는 **격자 안**에 있다(자리만 절대 배치로 잡는다). 인쇄는 격자 하나만 복사해 가므로
+     * (`contentRef` → `printWordTableElements`) 격자 밖에 두면 **종이에는 안 찍힌다** —
+     * 화면에서는 멀쩡해 보이고 종이에서만 사라지는 꼴이라 눈치채기 어렵다.
+     */
+    brand?: {
+        /** 로고와 저작권을 세운다. 나머지 자리는 각자 값이 있을 때만 선다. */
+        show?: boolean;
+        /**
+         * 아래 오른쪽 — **이 표로 가는 주소**. 회사 홈 주소가 아니라 그 표의 공유 링크다
+         * (사용자 지시 2026-09-30). 종이를 든 사람이 이 주소로 같은 표를 화면에서 연다.
+         *
+         * 종이라 누를 수 없으니 글자 그대로 찍는다 — 그래서 **사람이 옮겨 칠 수 있는 길이**
+         * 여야 한다. 긴 주소를 그대로 주면 넘쳐 …로 잘리고, 잘린 주소는 옮겨 칠 수 없다.
+         * 짧은 주소를 쓰거나, 표 번호로 찾는 길을 함께 두는 편이 낫다.
+         */
+        link?: string;
+        /** 저작권 글월 — 안 주면 `© IHAB, Inc. All rights reserved.` */
+        copyright?: string;
+    };
+    /**
+     * **짧은 식별 글** — 표 번호(`1043-E`). `brand` 를 줬을 때 위 오른쪽에 선다.
+     * 종이에 찍힌 번호로 나중에 그 표를 찾는다(`WordTableButton` 의 같은 이름 프롭과 짝이다).
+     * 종이 글씨는 전부 한 글꼴이라 여기서는 고정폭을 안 쓴다 — 목록 카드 쪽은 고정폭이다.
+     */
+    code?: string;
     /** 페이지 분할 시 현재/전체 페이지 — 지정하면 종이 안에 페이지 번호를 찍는다 */
     pageNumber?: {
         current: number;

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

@@ -32,7 +32,7 @@
   padding: 8px 0 0;
   margin: 0;
   overflow-x: auto;
-  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
+  font-family: var(--font-mono);
   font-size: 13px;
   color: var(--color-code-text, #042233);
   line-height: 1.6;

package/dist/packages/core/src/components/Word/WordTableButton.css

@@ -106,6 +106,31 @@
 }
 .word-table-button__meta { color: var(--color-gray); }
 
+/* 등록일 줄 왼쪽 덩이 — 표 번호와 등록일이 나란히 선다 */
+.word-table-button__meta-left {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+  min-width: 0;
+}
+
+/* 표 번호 — 종이에 찍힌 것과 **눈으로 맞춰 보는** 글이라 고정폭이다(자릿수를 센다).
+   등록일보다 색을 올려 둔다: 둘 다 회색이면 한 줄에 같은 무게로 놓여 훑을 때 안 걸린다.
+   줄이지 않는다 — 번호는 잘리면 뜻이 없다. 좁으면 등록일이 먼저 양보한다. */
+.word-table-button__code {
+  font-family: var(--font-mono);
+  /* 역할 이름을 쓴다 — `--color-black` 은 다크에서 이름과 실제 색이 뒤집히는 '밝기 이름'이다
+     (tokens.css 가 새 코드는 역할 이름을 쓰라고 적어 두었다). */
+  color: var(--color-text-primary);
+  flex-shrink: 0;
+  white-space: nowrap;
+}
+.word-table-button__meta-left .word-table-button__meta {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 /* 등록일 + 상태 배지 한 줄 — 왼쪽 끝에 등록일, 오른쪽 끝에 배지. */
 .word-table-button__meta-row {
   display: flex;

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

@@ -11,6 +11,23 @@ export interface WordTableButtonProps {
     description?: string;
     /** 생성일(ISO) — 메타(날짜)에 표시. */
     createdAt?: string;
+    /**
+     * 짧은 **식별 글** — 표 번호처럼 이 표를 가리키는 이름(예: `1043-E`).
+     *
+     * 배지가 아니다. `published`·`shared` 는 **상태**를 말하는 자리라 색과 모양이 붙어 있는데,
+     * 이것은 상태가 아니라 이름에 가깝다(말귀 요청 ㉚, 2026-09-30).
+     *
+     * 등록일과 같은 줄 **왼쪽 끝**에 선다 — 그 줄은 카드 바닥에 붙어 있어(`margin-top: auto`)
+     * 제목이 한 줄이든 두 줄이든, 설명이 있든 없든 **자리가 안 움직인다.** 종이에 찍힌 번호를
+     * 들고 카드를 훑어 찾는 일이라 자리가 고정인 것이 요점이다. 제목 곁에 두면 제목 길이와
+     * 설명 유무에 따라 오르내려 훑기 어렵다.
+     *
+     * **고정폭으로 그린다**(`--font-mono`) — 글자마다 폭이 다르면 종이의 번호와 화면의 번호를
+     * 눈으로 견줄 때 자릿수를 세기 어렵다.
+     *
+     * 카드의 읽히는 이름에도 함께 실린다(`이름 (번호)`) — 낭독기로 훑는 사람도 번호로 찾는다.
+     */
+    code?: string;
     /** 스토어 발행 배지 표시 */
     published?: boolean;
     /** 발행 배지 라벨. 없으면 사전 `myWordTable.publishedBadge`(기본 '발행됨'). */
@@ -45,4 +62,4 @@ export interface WordTableButtonProps {
  * @public 단어표를 '문서형' 미리보기 카드로 표현하는 컴포넌트.
  * 내용 썸네일(WordTableThumbnail) + 이름 + 날짜 + (발행 배지 / 더보기 / 스토어 푸터).
  */
-export default function WordTableButton({ items, name, description, createdAt, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }: WordTableButtonProps): import("react").JSX.Element;
+export default function WordTableButton({ items, name, description, createdAt, code, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }: WordTableButtonProps): import("react").JSX.Element;

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

@@ -11,7 +11,7 @@ import './WordTableButton.css';
  * @public 단어표를 '문서형' 미리보기 카드로 표현하는 컴포넌트.
  * 내용 썸네일(WordTableThumbnail) + 이름 + 날짜 + (발행 배지 / 더보기 / 스토어 푸터).
  */
-export default function WordTableButton({ items, name, description, createdAt, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }) {
+export default function WordTableButton({ items, name, description, createdAt, code, published, publishedLabel, shared, sharedLabel, isNew, publisherName, publishedAt, likeCount, downloadCount, onPublisherClick, selected, onClick, onMore, titleNode, className, }) {
     const { t } = useTranslation();
     const renaming = titleNode != null;
     const hasStoreFooter = publisherName != null || publishedAt != null || likeCount != null || downloadCount != null;
@@ -24,8 +24,8 @@ export default function WordTableButton({ items, name, description, createdAt, p
             onClick?.();
         }
     };
-    return (_jsxs("div", { className: cx('word-table-button', selected ? 'word-table-button--selected' : '', !hasStoreFooter ? 'word-table-button--no-footer' : '', className), role: "button", tabIndex: 0, "aria-label": name, onClick: renaming ? undefined : onClick, onKeyDown: handleKey, children: [isNew && _jsx("span", { className: "word-table-button__new-dot", "aria-label": t('myWordTable.newBadge', '새로 만든 표') }), _jsx(WordTableThumbnail, { items: items, className: "word-table-button__thumb" }), _jsxs("div", { className: "word-table-button__info", children: [_jsxs("div", { className: "word-table-button__info-text", children: [titleNode ?? _jsx("div", { className: "word-table-button__title h4", children: name }), description && _jsx("div", { className: "word-table-button__desc body-3", children: description })] }), onMore && !renaming && (_jsx(Button, { htmlType: "button", className: "word-table-button__more", size: 32, type: "dot", variant: "transparent-gray", useBorder: false, icon: "ellipsis", 
+    return (_jsxs("div", { className: cx('word-table-button', selected ? 'word-table-button--selected' : '', !hasStoreFooter ? 'word-table-button--no-footer' : '', className), role: "button", tabIndex: 0, "aria-label": code ? `${name} (${code})` : name, onClick: renaming ? undefined : onClick, onKeyDown: handleKey, children: [isNew && _jsx("span", { className: "word-table-button__new-dot", "aria-label": t('myWordTable.newBadge', '새로 만든 표') }), _jsx(WordTableThumbnail, { items: items, className: "word-table-button__thumb" }), _jsxs("div", { className: "word-table-button__info", children: [_jsxs("div", { className: "word-table-button__info-text", children: [titleNode ?? _jsx("div", { className: "word-table-button__title h4", children: name }), description && _jsx("div", { className: "word-table-button__desc body-3", children: description })] }), onMore && !renaming && (_jsx(Button, { htmlType: "button", className: "word-table-button__more", size: 32, type: "dot", variant: "transparent-gray", useBorder: false, icon: "ellipsis", 
                         /* 하드코딩 '더보기'였다(영어 화면에서도 한국어로 남았다). 목록에 표가
                            여러 개면 이름이 같은 버튼이 여러 개이기도 해서 이름을 함께 넣는다. */
-                        ariaLabel: t('common.moreFor', { name }), onClick: (e) => { e.stopPropagation(); onMore(e); } }))] }), (createdAt || published || shared) && (_jsxs("div", { className: "word-table-button__meta-row", children: [_jsx("span", { className: "word-table-button__meta caption-1", children: createdAt ? formatRelativeTime(createdAt, t) : '' }), _jsxs("span", { className: "word-table-button__badges", children: [published && (_jsx(Badge, { className: "word-table-button__badge", size: "small", variant: "main", fill: "soft", iconLeft: "book-marked", label: publishedLabel ?? t('myWordTable.publishedBadge', '발행됨') })), shared && (_jsx(Badge, { className: "word-table-button__badge", size: "small", fill: "soft", iconLeft: "link", label: sharedLabel ?? t('myWordTable.sharedBadge', '공유 중') }))] })] })), hasStoreFooter && (_jsxs("div", { className: "word-table-button__footer", children: [_jsxs("span", { className: "word-table-button__store-by", children: [publisherName && (_jsx("button", { className: "training-card__publisher body-4", type: "button", onClick: (e) => { e.stopPropagation(); onPublisherClick?.(); }, children: publisherName })), publishedAt && _jsx("span", { className: "training-card__date body-4", children: formatRelativeTime(publishedAt, t) })] }), _jsxs("span", { className: "word-table-button__store-stats", children: [likeCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "like", iconLeft: "heart", label: String(likeCount) }), downloadCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "main", iconLeft: "download", label: String(downloadCount) })] })] }))] }));
+                        ariaLabel: t('common.moreFor', { name }), onClick: (e) => { e.stopPropagation(); onMore(e); } }))] }), (code || createdAt || published || shared) && (_jsxs("div", { className: "word-table-button__meta-row", children: [_jsxs("span", { className: "word-table-button__meta-left", children: [code && _jsx("span", { className: "word-table-button__code caption-1", children: code }), _jsx("span", { className: "word-table-button__meta caption-1", children: createdAt ? formatRelativeTime(createdAt, t) : '' })] }), _jsxs("span", { className: "word-table-button__badges", children: [published && (_jsx(Badge, { className: "word-table-button__badge", size: "small", variant: "main", fill: "soft", iconLeft: "book-marked", label: publishedLabel ?? t('myWordTable.publishedBadge', '발행됨') })), shared && (_jsx(Badge, { className: "word-table-button__badge", size: "small", fill: "soft", iconLeft: "link", label: sharedLabel ?? t('myWordTable.sharedBadge', '공유 중') }))] })] })), hasStoreFooter && (_jsxs("div", { className: "word-table-button__footer", children: [_jsxs("span", { className: "word-table-button__store-by", children: [publisherName && (_jsx("button", { className: "training-card__publisher body-4", type: "button", onClick: (e) => { e.stopPropagation(); onPublisherClick?.(); }, children: publisherName })), publishedAt && _jsx("span", { className: "training-card__date body-4", children: formatRelativeTime(publishedAt, t) })] }), _jsxs("span", { className: "word-table-button__store-stats", children: [likeCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "like", iconLeft: "heart", label: String(likeCount) }), downloadCount != null && _jsx(Badge, { size: "small", fill: "soft", variant: "main", iconLeft: "download", label: String(downloadCount) })] })] }))] }));
 }

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

@@ -105,6 +105,13 @@ export function captureHtml(els, paperW, paperH, autoPrint = false, fileName = '
            아무도 opacity 를 되돌리지 않아 **빈칸으로 인쇄**되고, 새 창·내려받은 HTML 에서는 스피너가 영영 돈다(말귀 내 단어표
            '인쇄' 는 열자마자 100ms 뒤 인쇄해 처음 보는 표는 거의 늘 이랬다). */
         clone.querySelectorAll('.word-table-cell__spinner').forEach(s => s.remove());
+        /* **머리·바닥 띠의 배율 되돌림을 걷는다.**
+           화면의 표는 미리보기 상자에 맞춰 줄어 있고, 띠가 그만큼 줄지 않도록 격자에
+           `--wt-unscale`(1/배율)이 **인라인으로** 박혀 있다. 이 문서는 그 격자를 인라인 스타일째
+           복사해 오는데 여기서는 종이가 제 크기다 — 그대로 두면 미리보기가 좁았을수록 로고와
+           글씨가 그 배수만큼 커진다(0.5 로 보고 있었으면 두 배). CSS 로 덮으려면 인라인을
+           이겨야 해 `!important` 가 필요하니, 아예 지운다. */
+        clone.style.removeProperty('--wt-unscale');
         /* 불러오는 중이던 그림은 opacity 를 **그대로 두고** 받아지면 보이고 실패하면 숨게 한다 — 지우기만 하면 없는 그림(404, 화면에서는
            onError 로 칸이 사라짐)이 인쇄 문서에서 깨진 그림 아이콘과 alt 글자로 찍혔다. autoPrint 는 그림 로드를 기다린 뒤 인쇄한다. */
         clone.querySelectorAll('img').forEach(i => {

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

@@ -63,6 +63,100 @@
     pointer-events: none;
 }
 
+/* ── 종이 머리·바닥 띠 ────────────────────────────────────────────────
+   쪽 번호가 쓰던 수를 위아래로 넓힌 것이다. 격자가 그만큼 비우고 띠는 그 빈 자리에
+   절대 배치로 선다 — **격자 안**이라 인쇄가 격자만 복사해 가도 함께 간다. */
+.word-table-block__content--brand {
+    /* 띠 높이에 딱 붙인다 — 남는 틈은 4px 뿐이다(사용자 지시 2026-09-30: 여백이 많다).
+       비운 자리가 띠보다 크면 로고와 칸 사이가 벌어져 종이가 헐거워 보인다. */
+    padding-top: calc(32px * var(--wt-unscale, 1));
+    padding-bottom: calc(24px * var(--wt-unscale, 1));
+}
+/* 절취선 바탕·외곽선은 칸이 있는 데까지만 — 띠까지 두르면 로고가 표 안에 든 것처럼 보인다
+   (쪽 번호 때와 같은 까닭). 아래는 쪽 번호 규칙과 겹치므로 여기서 다시 적어 이긴다. */
+.word-table-block__content--brand.word-table-block__content--cut-show {
+    background-clip: content-box;
+}
+.word-table-block__content--brand.word-table-block__content--outline::after {
+    top: calc(32px * var(--wt-unscale, 1));
+    bottom: calc(24px * var(--wt-unscale, 1));
+}
+
+.word-table__band {
+    position: absolute;
+    left: 0;
+    right: 0;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: calc(12px * var(--wt-unscale, 1));
+    z-index: 2;
+    pointer-events: none;
+    color: var(--color-gray);
+    /* **body-3 급**이다(사용자 지시 2026-09-30) — 손으로 적은 13px 대신 디자인 시스템 값을
+       쓴다. 클래스(`.body-3`)를 그냥 붙이면 크기가 고정돼 배율 되돌림이 안 먹으므로,
+       같은 토큰에 되돌림만 곱한다.
+       **이 토큰은 보는 사람 쪽 설정을 탄다** — 좁은 화면이면 13px, 큰 글씨 설정이면 16~18px
+       이라 종이 글씨가 그만큼 달라진다. 화면과 종이를 한 급으로 맞추기로 한 값이다. */
+    font-size: calc(var(--text-body-3-size, 14px) * var(--wt-unscale, 1));
+    line-height: calc(var(--text-body-3-line, 22px) * var(--wt-unscale, 1));
+    font-weight: var(--text-body-3-weight, 400);
+}
+/* 비워 둔 44px 안에 든다 */
+.word-table__band--top    { top: 0;    height: calc(28px * var(--wt-unscale, 1)); }
+.word-table__band--bottom { bottom: 0; height: calc(20px * var(--wt-unscale, 1)); }
+
+.word-table__brand-logo {
+    height: calc(28px * var(--wt-unscale, 1));
+    width: auto;
+    display: block;
+    /* 말귀 로고는 컬러다 — 브라우저 인쇄 기본값은 바탕·색을 빼므로 그대로 두면 종이에서
+       흐려지거나 사라진다(절취선 바탕이 쓰는 것과 같은 수다). */
+    print-color-adjust: exact;
+    -webkit-print-color-adjust: exact;
+}
+/* 만든 곳 로고 — 저작권 글씨와 같은 무게로 물러나 있는다 */
+.word-table__brand-logo--small { height: calc(14px * var(--wt-unscale, 1)); }
+
+/* 만든 곳 — 로고와 저작권이 한 줄로 붙는다 */
+.word-table__brand-by {
+    display: flex;
+    align-items: center;
+    gap: calc(8px * var(--wt-unscale, 1));
+    min-width: 0;
+}
+.word-table__copyright {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+/* 바닥 오른쪽 — 이 표의 주소와 쪽 번호. 주소가 길면(짧은 주소가 아닐 때) 먼저 양보한다. */
+.word-table__band-end {
+    display: flex;
+    align-items: center;
+    gap: calc(12px * var(--wt-unscale, 1));
+    min-width: 0;
+}
+
+/* 표 번호·주소 — **종이 글씨는 전부 한 글꼴이다**(사용자 지시 2026-09-30). 고정폭으로
+   찍어 봤는데 한 장 안에 글꼴이 둘 섞여 보였다. 종이가 한 벌로 읽히는 쪽을 골랐다 —
+   목록 카드(`WordTableButton`)의 번호는 청한 대로 고정폭 그대로다. */
+.word-table__code {
+    color: var(--color-text-primary);
+    flex-shrink: 0;
+    white-space: nowrap;
+}
+/* 이 표로 가는 주소 — 길 수 있으므로 넘치면 …로 자른다(쪽 번호는 안 밀린다) */
+.word-table__link {
+    color: var(--color-gray);
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+.word-table__page-count { flex-shrink: 0; white-space: nowrap; }
+
 .word-table__page-number--left   { left: 12px; }
 .word-table__page-number--right  { right: 12px; }
 .word-table__page-number--center { left: 50%; transform: translateX(-50%); }
@@ -456,6 +550,13 @@
         transform: none !important;
     }
 
+    /* 표가 제 크기로 돌아오니 띠의 배율 되돌림도 끈다 — 안 끄면 화면에서 좁게 보던 만큼
+       로고와 글씨가 커져 찍힌다. 인라인으로 박힌 값이라 `!important` 라야 이긴다
+       (위 `transform` 과 같은 까닭). */
+    .word-table-block__content {
+        --wt-unscale: 1 !important;
+    }
+
     .word-table-block__card-close,
     .word-table-block__card-actions,
     .word-table-block__card-handle { display: none; }

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

@@ -83,6 +83,40 @@ export interface WordTableProps {
      * 쪽의 시작 번호를 받아 표 전체에서 유일한 번호로 만든다.
      */
     scoreIndexOffset?: number;
+    /**
+     * **종이 위·아래에 띠를 두르고** 로고·표 번호·주소·쪽 번호를 담는다(사용자 지시 2026-09-30).
+     *
+     * 자리는 넷이다 — 위 왼쪽 말귀 로고 · 위 오른쪽 `code` · 아래 왼쪽 ihab 로고와 저작권 ·
+     * 아래 오른쪽 주소와 쪽 번호.
+     *
+     * **안 주면 종이가 한 픽셀도 안 바뀐다.** 띠는 격자 위아래를 비워 만드는 것이라(쪽 번호가
+     * 쓰던 방식과 같다) 칸이 그만큼 낮아진다 — 안 쓰는 표까지 낮아지면 안 된다.
+     *
+     * 띠는 **격자 안**에 있다(자리만 절대 배치로 잡는다). 인쇄는 격자 하나만 복사해 가므로
+     * (`contentRef` → `printWordTableElements`) 격자 밖에 두면 **종이에는 안 찍힌다** —
+     * 화면에서는 멀쩡해 보이고 종이에서만 사라지는 꼴이라 눈치채기 어렵다.
+     */
+    brand?: {
+        /** 로고와 저작권을 세운다. 나머지 자리는 각자 값이 있을 때만 선다. */
+        show?: boolean;
+        /**
+         * 아래 오른쪽 — **이 표로 가는 주소**. 회사 홈 주소가 아니라 그 표의 공유 링크다
+         * (사용자 지시 2026-09-30). 종이를 든 사람이 이 주소로 같은 표를 화면에서 연다.
+         *
+         * 종이라 누를 수 없으니 글자 그대로 찍는다 — 그래서 **사람이 옮겨 칠 수 있는 길이**
+         * 여야 한다. 긴 주소를 그대로 주면 넘쳐 …로 잘리고, 잘린 주소는 옮겨 칠 수 없다.
+         * 짧은 주소를 쓰거나, 표 번호로 찾는 길을 함께 두는 편이 낫다.
+         */
+        link?: string;
+        /** 저작권 글월 — 안 주면 `© IHAB, Inc. All rights reserved.` */
+        copyright?: string;
+    };
+    /**
+     * **짧은 식별 글** — 표 번호(`1043-E`). `brand` 를 줬을 때 위 오른쪽에 선다.
+     * 종이에 찍힌 번호로 나중에 그 표를 찾는다(`WordTableButton` 의 같은 이름 프롭과 짝이다).
+     * 종이 글씨는 전부 한 글꼴이라 여기서는 고정폭을 안 쓴다 — 목록 카드 쪽은 고정폭이다.
+     */
+    code?: string;
     /** 페이지 분할 시 현재/전체 페이지 — 지정하면 종이 안에 페이지 번호를 찍는다 */
     pageNumber?: {
         current: number;
@@ -114,4 +148,4 @@ export interface WordTableProps {
  * 표시(items)·편집(editCells) 두 모드를 지원한다.
  * @public
  */
-export default function WordTable({ title, titleIcon, disc, className, orientation, contentTypes, cutLine, showOutline, showDivLine, items, editCells, count, activeCell, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd, contentRef, buttonSize, pageNumber, pageNumberPosition, fitHeight, scoring, marks, onMarkClick, scoreIndexOffset, }: WordTableProps): import("react").JSX.Element;
+export default function WordTable({ title, titleIcon, disc, className, orientation, contentTypes, cutLine, showOutline, showDivLine, items, editCells, count, activeCell, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd, contentRef, buttonSize, brand, code, pageNumber, pageNumberPosition, fitHeight, scoring, marks, onMarkClick, scoreIndexOffset, }: WordTableProps): import("react").JSX.Element;

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

@@ -14,6 +14,12 @@ import { getPronunciationResolver } from '../utils/pronunciationConfig';
 import { useWordImage } from '../hooks/useWordImage';
 import useMediaQuery from '../hooks/useMediaQuery';
 import { isTouchPointer, recentlyTouched, useTouchToggle } from '../hooks/touchToggle';
+/* `Footer` 가 하듯 곧장 가져온다 — 묶개가 알아서 옮겨 주고, 인쇄 창은 `<img>` 가 다 받아진
+   뒤에 인쇄한다. 말귀는 **컬러 판**이다(사용자 지시 2026-09-30) — 종이에서도 색으로 나가야
+   하므로 아래 CSS 가 `print-color-adjust: exact` 를 준다. 만든 곳(ihab)은 검정 판이라
+   글씨와 같은 무게로 물러나 있는다. */
+import 말귀로고 from '../logo/Logo_speechear_kr.svg';
+import ihab로고 from '../logo/Logo_IHAB_en_black.svg';
 import { WORD_TABLE_PAPER, gridFor, CUT_CLASS, POS_LABEL, WORD_TYPE_LABEL, expandSlashLabel, dotDashStyle, REF_W_BOTH, REF_W_TEXT_ONLY, REF_W_IMAGE_ONLY, REF_H_BOTH, REF_H_TEXT_ONLY, REF_H_IMAGE_ONLY, } from './wordTableLayout';
 import { useFitScale } from './useFitScale';
 import { claimSound } from './Training/currentSound';
@@ -184,7 +190,7 @@ function 어종이름(t) {
  * 표시(items)·편집(editCells) 두 모드를 지원한다.
  * @public
  */
-export default function WordTable({ title, titleIcon, disc, className, orientation = 'landscape', contentTypes = ['이미지', '단어', '표준 발음'], cutLine = '표시', showOutline = true, showDivLine = true, items, editCells, count, activeCell = null, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd = false, contentRef, buttonSize = 40, pageNumber, pageNumberPosition = 'right', fitHeight = false, scoring = false, marks, onMarkClick, scoreIndexOffset = 0, }) {
+export default function WordTable({ title, titleIcon, disc, className, orientation = 'landscape', contentTypes = ['이미지', '단어', '표준 발음'], cutLine = '표시', showOutline = true, showDivLine = true, items, editCells, count, activeCell = null, onActivateCell, onRemoveCell, onRemoveItem, onReorder, renderCellAction, showFillerAdd = false, contentRef, buttonSize = 40, brand, code, pageNumber, pageNumberPosition = 'right', fitHeight = false, scoring = false, marks, onMarkClick, scoreIndexOffset = 0, }) {
     const clickMark = useCallback((cellIndex, clicked) => {
         onMarkClick?.(scoreIndexOffset + cellIndex, clicked);
     }, [onMarkClick, scoreIndexOffset]);
@@ -363,9 +369,16 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
     const hasPairs = isEdit
         ? (editCells ?? []).some(c => c !== null && c.length > 1)
         : (items ?? []).some(item => (item.words ?? []).length > 1);
+    /* 로고를 세우기로 한 때만 띠를 두른다. `code`·`link` 만 주고 `show` 를 안 주면 띠가 없으니
+       그 값들도 설 자리가 없다 — 켜는 스위치를 하나로 둔다. */
+    const 띠쓰나 = Boolean(brand?.show);
+    const 저작권 = brand?.copyright ?? '© IHAB, Inc. All rights reserved.';
     const contentClass = cx('word-table-block__content', CUT_CLASS[cutLine], showOutline && 'word-table-block__content--outline', showDivLine && hasPairs && 'word-table-block__content--div-line', 
     /* 번호가 설 자리를 비운다 — 번호가 없으면 비우지 않는다(표가 공연히 낮아지지 않게) */
-    pageNumber && pageNumberPosition !== 'none' && 'word-table-block__content--page-number');
+    pageNumber && pageNumberPosition !== 'none' && 'word-table-block__content--page-number', 
+    /* 띠가 설 자리를 위아래로 비운다 — 같은 까닭으로 띠가 없으면 안 비운다.
+       바닥 띠가 쪽 번호 자리를 겸하므로 둘이 겹쳐도 아래는 한 번만 비운다(CSS 가 덮어쓴다). */
+    띠쓰나 && 'word-table-block__content--brand');
     // 빈칸(추가버튼)은 스케일 역보정으로 실제 크기 유지
     const counterScale = { transform: `scale(${1 / scale})`, transformOrigin: 'center center' };
     /* **채점 단추는 표와 함께 줄어들면 안 된다.**
@@ -378,7 +391,16 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
     const 채점되돌림 = Math.max(1, Math.min(1 / scale, (width / cols) / 채점행폭));
     const grid = (_jsxs("div", { ref: scalerRef, className: "word-table__scaler", style: { height: height * scale }, children: [_jsx("div", { 
                 /* title 로 Section 에 감쌀 때는 className 을 바깥 한 곳에만 — 두 곳에 붙어 소비자 스타일이 두 번 걸렸다 */
-                className: cx('word-table', !wrapped && className), style: { width, height, transform: `scale(${scale})`, transformOrigin: 'top left', marginLeft: offset }, children: _jsxs("div", { ref: 내용ref, className: contentClass, style: { gridTemplateColumns: `repeat(${cols}, 1fr)`, gridTemplateRows: `repeat(${rows}, 1fr)` }, children: [isEdit ? (_jsx(_Fragment, { children: (editCells ?? []).map((cell, i) => (_jsx("div", { className: cx('word-table-block__edit-cell', cell ? 'word-table-block__edit-cell--filled' : 'word-table-block__edit-cell--empty', activeCell === i ? 'word-table-block__edit-cell--active' : ''), style: dotDashStyle(i, cols, rows, cutLine), children: cell ? (_jsxs(_Fragment, { children: [cell.map((e, wi) => (_jsxs(Fragment, { children: [wi > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: e.word, subLabel: e.pronunciation, 
+                className: cx('word-table', !wrapped && className), style: { width, height, transform: `scale(${scale})`, transformOrigin: 'top left', marginLeft: offset }, children: _jsxs("div", { ref: 내용ref, className: contentClass, style: {
+                        gridTemplateColumns: `repeat(${cols}, 1fr)`,
+                        gridTemplateRows: `repeat(${rows}, 1fr)`,
+                        /* **띠는 표와 함께 줄지 않는다**(사용자 지시 2026-09-30). 종이는 미리보기 상자에
+                           맞춰 통째로 줄어드는데(`scale`), 그러면 로고와 글씨가 상자 폭마다 달라 보인다.
+                           띠 안의 치수를 배율로 나눠 두면 줄어든 만큼 되돌아와 **화면 크기가 한결같다.**
+                           자리를 비우는 여백도 같이 나눠야 띠가 칸을 안 침범한다.
+                           배율이 1인 종이(인쇄)에서는 1 이라 아무것도 안 달라진다. */
+                        ...(띠쓰나 ? { ['--wt-unscale']: String(1 / (scale || 1)) } : {}),
+                    }, children: [isEdit ? (_jsx(_Fragment, { children: (editCells ?? []).map((cell, i) => (_jsx("div", { className: cx('word-table-block__edit-cell', cell ? 'word-table-block__edit-cell--filled' : 'word-table-block__edit-cell--empty', activeCell === i ? 'word-table-block__edit-cell--active' : ''), style: dotDashStyle(i, cols, rows, cutLine), children: cell ? (_jsxs(_Fragment, { children: [cell.map((e, wi) => (_jsxs(Fragment, { children: [wi > 0 && _jsx("div", { className: "word-table-block__pair-divider" }), _jsx(WordCell, { label: e.word, subLabel: e.pronunciation, 
                                                     // 편집 칸도 구어체 발음을 넘긴다 — 빠져 있어 '구어체 발음'을 켜도 편집 모드에서만 비었다.
                                                     colloquialLabel: e.colloquialPronunciation, homonum: e.homonum, showWord: show.word, showImage: show.image, showPronunciation: show.pron, showColloquial: show.colloq, buttonSize: buttonSize })] }, wi))), scoring && renderScore(i, cell.map(e => e.word).join(' / ')), onRemoveCell && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: cell.length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveCell(i) }) }))] })) : (onActivateCell && (_jsx("div", { style: counterScale, children: _jsx(Button, { htmlType: "button", size: "48", type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell(i) }) }))) }, i))) })) : (_jsxs(_Fragment, { children: [(items ?? []).map((item, index) => (_jsxs("div", { "data-wordtable-cell": onReorder ? index : undefined, className: `word-table-block__card${onReorder ? ' word-table-block__card--draggable' : ''}${dragOver === index ? ' word-table-block__card--drag-over' : ''}${끌기 === index ? ' word-table-block__card--dragging' : ''}`, style: dotDashStyle(index, cols, rows, cutLine), draggable: !!onReorder, onPointerDown: onReorder ? (e) => 길게눌러끌기(e, index) : undefined, onKeyDown: onReorder ? (e) => 키로옮기기(e, index) : undefined, onDragStart: onReorder ? () => { dragIndex.current = index; } : undefined, onDragOver: onReorder ? (e) => { e.preventDefault(); setDragOver(index); } : undefined, onDragLeave: onReorder ? () => setDragOver(null) : undefined, onDrop: onReorder ? (e) => { e.preventDefault(); if (dragIndex.current !== null && dragIndex.current !== index) {
                                         onReorder(dragIndex.current, index);
@@ -397,7 +419,7 @@ export default function WordTable({ title, titleIcon, disc, className, orientati
                                         _jsxs("div", { className: "word-table-block__card-actions", children: [renderCellAction?.(index, item), onRemoveItem && (_jsx("div", { className: "word-table-block__card-close", children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "dot", icon: "x", variant: "transparent-lightGray", useBorder: false, showTooltipInfo: (item.words ?? []).length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), ariaLabel: (item.words ?? []).length > 1 ? t('wordPrint.removePair', '대립쌍 빼기') : t('wordPrint.removeWord', '단어 빼기'), onClick: () => onRemoveItem(item.id) }) }))] }))] }, item.id))), Array.from({ length: Math.max(0, cols * rows - (items?.length ?? 0)) }).map((_, i) => {
                                     const isWithinCount = (items?.length ?? 0) + i < cellCount;
                                     return (_jsx("div", { className: "word-table-block__card word-table-block__card--filler", children: showFillerAdd && onActivateCell && isWithinCount && (_jsx("div", { style: counterScale, children: _jsx(Button, { htmlType: "button", size: buttonSize, type: "bar", icon: "plus", label: t('wordTable.addWord', '추가하기'), onClick: () => onActivateCell((items?.length ?? 0) + i) }) })) }, `filler-${i}`));
-                                })] })), pageNumber && pageNumberPosition !== 'none' && (_jsx("span", { className: `word-table__page-number body-3 word-table__page-number--${pageNumberPosition}`, children: t('wordTable.filter.pageIndicator', { current: pageNumber.current, total: pageNumber.total }) }))] }) }), onReorder && _jsx("span", { role: "status", style: 보이지않게, children: 옮김알림 })] }));
+                                })] })), 띠쓰나 && (_jsxs(_Fragment, { children: [_jsxs("div", { className: "word-table__band word-table__band--top", children: [_jsx("img", { className: "word-table__brand-logo", src: 말귀로고, alt: "\uB9D0\uADC0" }), code && _jsx("span", { className: "word-table__code", children: code })] }), _jsxs("div", { className: "word-table__band word-table__band--bottom", children: [_jsxs("span", { className: "word-table__brand-by", children: [_jsx("img", { className: "word-table__brand-logo word-table__brand-logo--small", src: ihab로고, alt: "IHAB" }), _jsx("span", { className: "word-table__copyright", children: 저작권 })] }), _jsxs("span", { className: "word-table__band-end", children: [brand?.link && _jsx("span", { className: "word-table__link", children: brand.link }), pageNumber && pageNumberPosition !== 'none' && (_jsx("span", { className: "word-table__page-count", children: t('wordTable.filter.pageIndicator', { current: pageNumber.current, total: pageNumber.total }) }))] })] })] })), !띠쓰나 && pageNumber && pageNumberPosition !== 'none' && (_jsx("span", { className: `word-table__page-number body-3 word-table__page-number--${pageNumberPosition}`, children: t('wordTable.filter.pageIndicator', { current: pageNumber.current, total: pageNumber.total }) }))] }) }), onReorder && _jsx("span", { role: "status", style: 보이지않게, children: 옮김알림 })] }));
     /* 담는 틀 — 높이를 받은 자리에서만 두른다. `useFitScale` 은 **스케일러의 부모**를 재므로
        이 틀이 곧 그 자(척도)가 된다. 가운데 맞춤은 남는 세로를 위아래로 나눈다 — 표가 상자보다
        납작할 때 아래로만 쏠려 보이지 않게. */

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

@@ -157,6 +157,9 @@
      매칭돼 정상처럼 보여, 일반 사용자에게만 다른 폰트가 나가는 형태가 된다.
      두 번째 'Pretendard'는 정적(static) 빌드를 쓰거나 로컬 설치된 경우의 후보다. */
   --font-family: 'Pretendard Variable', 'Pretendard', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
+  /* 자릿수를 **눈으로 맞춰 보는** 글에만 쓴다(코드 상자, 표 번호 같은 짧은 식별 글).
+     글자마다 폭이 다르면 종이에 찍힌 것과 화면의 것을 견주기 어렵다. */
+  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, 'Roboto Mono', 'Courier New', monospace;
 
   /* ── 타입 스케일 ──────────────────────────────────────────
      클래스(.display-1~3 / .h0~.h5 / .body-* / .button-* / .caption-*)는 styles.css에 있고 값은 전부

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

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