@ihabdevteam/core 0.9.11 → 0.10.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-infoLink:#2f7fd1;--color-uiAccent:#32bbae;--color-success:#2fae9e;--color-warn:#e6b94e;--color-warn-a10:#e6b94e1a;--color-error:#d9534f;--color-error-a10:#d9534f1a;--color-like:#e06b68;--color-disabled:#bfc7d1;--color-pureWhite:#fff;--color-white:#fbfdff;--color-white-a10:#fbfdff1a;--color-white-a30:#fbfdff4d;--color-white-a60:#fbfdff99;--color-white-a80:#fbfdffcc;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-lightGray-a10:#96a4b81a;--color-lightGray-a80:#96a4b8cc;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-gray-a10:#64748b1a;--color-gray-a60:#64748b99;--color-gray-a80:#64748bcc;--color-deepGray:#546170;--color-darkGray:#434d56;--color-darkGray-a10:#434d561a;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-popupBlock:rgba(16,24,32,.6);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-overlay:var(--color-popupBlock);--shadow-popup:20px 20px 20px rgba(0,0,0,.05);--shadow-tooltip:8px 8px 8px rgba(0,0,0,.05);--shadow-button:4px 4px 4px rgba(0,0,0,.05);--shadow-menu:20px 20px 20px rgba(0,0,0,.05);--shadow-card:2px 2px 8px rgba(0,0,0,.06);--shadow-dropdown:8px 8px 24px rgba(0,0,0,.06);--shadow-panel:4px 4px 20px rgba(0,0,0,.06);--font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--text-h0-size:40px;--text-h0-line:52px;--text-h0-spacing:-1px;--text-h0-weight:700;--text-h0-weight-bold:800;--text-h1-size:32px;--text-h1-line:44px;--text-h1-spacing:-0.5px;--text-h1-weight:700;--text-h1-weight-bold:800;--text-h2-size:24px;--text-h2-line:34px;--text-h2-spacing:-0.25px;--text-h2-weight:500;--text-h2-weight-bold:600;--text-h3-size:20px;--text-h3-line:30px;--text-h3-spacing:normal;--text-h3-weight:500;--text-h3-weight-bold:600;--text-h4-size:17px;--text-h4-line:26px;--text-h4-spacing:normal;--text-h4-weight:500;--text-h4-weight-bold:600;--text-h5-size:15px;--text-h5-line:23px;--text-h5-spacing:normal;--text-h5-weight:500;--text-h5-weight-bold:600;--text-body-1-size:18px;--text-body-1-line:28px;--text-body-1-weight:400;--text-body-1-weight-bold:600;--text-body-2-size:16px;--text-body-2-line:26px;--text-body-2-weight:400;--text-body-2-weight-bold:600;--text-body-3-size:14px;--text-body-3-line:22px;--text-body-3-weight:400;--text-body-3-weight-bold:600;--text-button-1-size:14px;--text-button-1-line:20px;--text-button-1-weight:500;--text-button-2-size:13px;--text-button-2-line:18px;--text-button-2-weight:400;--text-caption-1-size:12px;--text-caption-1-line:17px;--text-caption-1-weight:400;--text-caption-1-weight-bold:600;--text-caption-2-size:11px;--text-caption-2-line:15px;--text-caption-2-weight:400;--text-caption-2-weight-bold:600;--spacing-xs:8px;--spacing-s:12px;--spacing-m:16px;--spacing-l:20px;--spacing-xl:24px;--spacing-page:60px;--spacing-content:20px;--container-page:1920px;--margin-page:var(--spacing-page);--margin-content:var(--spacing-content);--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.22,0.9,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--bp-tablet:768px;--bp-desktop:1024px;--radius-xs:4px;--radius-sm:8px;--radius-s:10px;--radius-card:12px;--radius-m:20px;--radius-l:40px;--radius-full:999px;--radius-dialog:var(--radius-m);--z-base:0;--z-content:1;--z-dropdown:200;--z-sticky:500;--z-nav:1000;--z-sidebar:1100;--z-overlay:2000;--z-page-popup:2100;--z-fab:2150;--z-modal:2200;--focus-ring:var(--color-main);--z-popover:2300;--z-tooltip:3000;--z-alert:3100;--z-toast:3200}@media (min-width:768px) and (max-width:1023px){:where(.ihabdevteam-core-scope){--spacing-page:40px;--spacing-content:15px;--text-h0-size:32px;--text-h0-line:44px;--text-h0-spacing:-0.75px;--text-h1-size:28px;--text-h1-line:40px;--text-h1-spacing:-0.4px;--text-h2-size:22px;--text-h2-line:32px;--text-h2-spacing:-0.2px;--text-h3-size:18px;--text-h3-line:28px;--text-h4-size:16px;--text-h4-line:24px;--text-h5-size:14px;--text-h5-line:21px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:24px;--text-body-3-size:14px;--text-body-3-line:22px}}@media (max-width:767px){:where(.ihabdevteam-core-scope){--spacing-page:20px;--spacing-content:10px;--text-h0-size:28px;--text-h0-line:38px;--text-h0-spacing:-0.5px;--text-h1-size:24px;--text-h1-line:34px;--text-h1-spacing:-0.3px;--text-h2-size:20px;--text-h2-line:29px;--text-h2-spacing:-0.2px;--text-h3-size:17px;--text-h3-line:26px;--text-h4-size:15px;--text-h4-line:23px;--text-h5-size:13px;--text-h5-line:20px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:23px;--text-body-3-size:13px;--text-body-3-line:21px}}.ihabdevteam-core-scope [data-font-scale=large1]{--text-h4-size:19px;--text-h4-line:29px;--text-h5-size:17px;--text-h5-line:26px;--text-body-1-size:20px;--text-body-1-line:31px;--text-body-2-size:18px;--text-body-2-line:28px;--text-body-3-size:16px;--text-body-3-line:25px;--text-button-1-size:16px;--text-button-1-line:23px;--text-button-2-size:15px;--text-button-2-line:21px;--text-caption-1-size:14px;--text-caption-1-line:20px;--text-caption-2-size:12px;--text-caption-2-line:17px}.ihabdevteam-core-scope [data-font-scale=large2]{--text-h4-size:21px;--text-h4-line:32px;--text-h5-size:19px;--text-h5-line:29px;--text-body-1-size:23px;--text-body-1-line:36px;--text-body-2-size:20px;--text-body-2-line:31px;--text-body-3-size:18px;--text-body-3-line:28px;--text-button-1-size:18px;--text-button-1-line:26px;--text-button-2-size:16px;--text-button-2-line:23px;--text-caption-1-size:15px;--text-caption-1-line:21px;--text-caption-2-size:14px;--text-caption-2-line:19px}.ihabdevteam-core-scope [data-font-scale=large3]{--text-h4-size:23px;--text-h4-line:35px;--text-h5-size:21px;--text-h5-line:32px;--text-body-1-size:25px;--text-body-1-line:39px;--text-body-2-size:22px;--text-body-2-line:34px;--text-body-3-size:19px;--text-body-3-line:30px;--text-button-1-size:19px;--text-button-1-line:27px;--text-button-2-size:18px;--text-button-2-line:26px;--text-caption-1-size:17px;--text-caption-1-line:24px;--text-caption-2-size:15px;--text-caption-2-line:21px}.ihabdevteam-core-scope [data-theme=dark]{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}@media (prefers-color-scheme:dark){.ihabdevteam-core-scope :root:not([data-theme=light]):not([data-theme=dark]),.ihabdevteam-core-scope [data-theme=auto]{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.ihabdevteam-core-scope .force-light-scheme{color-scheme:light;--color-pureWhite:#fff;--color-white:#fbfdff;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-deepGray:#546170;--color-darkGray:#434d56;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-disabled:#bfc7d1}@media (hover:none){.ihabdevteam-core-scope [role=button]:hover,.ihabdevteam-core-scope a:hover,.ihabdevteam-core-scope button:hover{opacity:1}}.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{box-sizing:border-box}.ihabdevteam-core-scope{margin:0}.ihabdevteam-core-scope button,.ihabdevteam-core-scope input,.ihabdevteam-core-scope select,.ihabdevteam-core-scope textarea{font-family:inherit}.ihabdevteam-core-scope .h0,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h1,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h2,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h3,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h4,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h5,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .h0{font-weight:700;font-weight:var(--text-h0-weight)}.ihabdevteam-core-scope .h1{font-weight:700;font-weight:var(--text-h1-weight)}.ihabdevteam-core-scope .h2{font-weight:500;font-weight:var(--text-h2-weight)}.ihabdevteam-core-scope .h3{font-weight:500;font-weight:var(--text-h3-weight)}.ihabdevteam-core-scope .h4{font-weight:500;font-weight:var(--text-h4-weight)}.ihabdevteam-core-scope .h5{font-weight:500;font-weight:var(--text-h5-weight)}.ihabdevteam-core-scope .h0b{font-weight:800;font-weight:var(--text-h0-weight-bold)}.ihabdevteam-core-scope .h1b{font-weight:800;font-weight:var(--text-h1-weight-bold)}.ihabdevteam-core-scope .h2b{font-weight:600;font-weight:var(--text-h2-weight-bold)}.ihabdevteam-core-scope .h3b{font-weight:600;font-weight:var(--text-h3-weight-bold)}.ihabdevteam-core-scope .h4b{font-weight:600;font-weight:var(--text-h4-weight-bold)}.ihabdevteam-core-scope .h5b{font-weight:600;font-weight:var(--text-h5-weight-bold)}.ihabdevteam-core-scope .body-1,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .body-2,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .body-3,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .body-1b{font-weight:600;font-weight:var(--text-body-1-weight-bold)}.ihabdevteam-core-scope .body-2b{font-weight:600;font-weight:var(--text-body-2-weight-bold)}.ihabdevteam-core-scope .body-3b{font-weight:600;font-weight:var(--text-body-3-weight-bold)}.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .caption-1,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .caption-2,.ihabdevteam-core-scope .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}.ihabdevteam-core-scope .caption-1b{font-weight:600;font-weight:var(--text-caption-1-weight-bold)}.ihabdevteam-core-scope .caption-2b{font-weight:600;font-weight:var(--text-caption-2-weight-bold)}.ihabdevteam-core-scope ::-webkit-scrollbar{height:6px;width:6px}.ihabdevteam-core-scope ::-webkit-scrollbar-track{background:transparent}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb{background:#eef2f6;background:var(--color-darkWhite);border-radius:3px}.ihabdevteam-core-scope ::-webkit-scrollbar-thumb:hover{background:#96a4b8;background:var(--color-lightGray)}.ihabdevteam-core-scope *{scrollbar-color:#eef2f6 transparent;scrollbar-color:var(--color-darkWhite) transparent;scrollbar-width:thin}@keyframes sub-to-main{0%{background-color:#4dcdc0;background-color:var(--color-sub)}to{background-color:#499cdf;background-color:var(--color-main)}}.ihabdevteam-core-scope .safearea{margin:0 auto;max-width:1920px;max-width:var(--container-page);width:100%}.ihabdevteam-core-scope{color:#111;color:var(--color-black);font-family:Pretendard Variable,Pretendard,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;font-family:var(--font-family);overflow-wrap:anywhere;white-space:normal;word-break:keep-all}.ihabdevteam-core-scope :focus-visible{outline:2px solid #499cdf;outline:2px solid var(--focus-ring);outline-offset:2px}@media (prefers-reduced-motion:reduce){.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{animation-duration:.01ms!important;animation-iteration-count:1!important;scroll-behavior:auto!important;transition-duration:.01ms!important}}
+:where(.ihabdevteam-core-scope){color-scheme:light;--brand-main:#499cdf;--brand-sub:#4dcdc0;--color-lightMain:var(--brand-lightMain,#d2e2ef);--color-softMain:var(--brand-softMain,#8bbce4);--color-main:var(--brand-main);--color-main-a10:color-mix(in srgb,var(--color-main) 10%,transparent);--color-main-a20:color-mix(in srgb,var(--color-main) 20%,transparent);--color-deepMain:var(--brand-deepMain,#418ecd);--color-darkMain:var(--brand-darkMain,#1e5a8f);--color-lightSub:var(--brand-lightSub,#d5ecea);--color-softSub:var(--brand-softSub,#92ddd5);--color-sub:var(--brand-sub);--color-sub-a10:color-mix(in srgb,var(--color-sub) 10%,transparent);--color-deepSub:var(--brand-deepSub,#45bbaf);--color-darkSub:var(--brand-darkSub,#257e76);--color-infoLink:#2f7fd1;--color-uiAccent:#32bbae;--color-success:#2fae9e;--color-warn:#e6b94e;--color-warn-a10:#e6b94e1a;--color-error:#d9534f;--color-error-a10:#d9534f1a;--color-like:#e06b68;--color-disabled:#bfc7d1;--color-pureWhite:#fff;--color-white:#fbfdff;--color-white-a10:#fbfdff1a;--color-white-a30:#fbfdff4d;--color-white-a60:#fbfdff99;--color-white-a80:#fbfdffcc;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-lightGray-a10:#96a4b81a;--color-lightGray-a80:#96a4b8cc;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-gray-a10:#64748b1a;--color-gray-a60:#64748b99;--color-gray-a80:#64748bcc;--color-deepGray:#546170;--color-darkGray:#434d56;--color-darkGray-a10:#434d561a;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-popupBlock:rgba(16,24,32,.6);--color-text-primary:var(--color-black);--color-text-secondary:var(--color-gray);--color-text-muted:var(--color-lightGray);--color-text-on-brand:var(--color-pureWhite);--color-surface:var(--color-white);--color-surface-raised:var(--color-deepWhite);--color-surface-sunken:var(--color-darkWhite);--color-border:var(--color-whiteLine);--color-overlay:var(--color-popupBlock);--shadow-popup:20px 20px 20px rgba(0,0,0,.05);--shadow-tooltip:8px 8px 8px rgba(0,0,0,.05);--shadow-button:4px 4px 4px rgba(0,0,0,.05);--shadow-menu:20px 20px 20px rgba(0,0,0,.05);--shadow-card:2px 2px 8px rgba(0,0,0,.06);--shadow-dropdown:8px 8px 24px rgba(0,0,0,.06);--shadow-panel:4px 4px 20px rgba(0,0,0,.06);--font-family:"Pretendard Variable","Pretendard",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;--text-display-1-size:clamp(44px,6.6vw,72px);--text-display-1-line:1.05;--text-display-1-spacing:-0.04em;--text-display-1-weight:800;--text-display-1-weight-bold:900;--text-display-2-size:clamp(38px,5.2vw,56px);--text-display-2-line:1.12;--text-display-2-spacing:-0.03em;--text-display-2-weight:700;--text-display-2-weight-bold:800;--text-display-3-size:clamp(34px,4.1vw,44px);--text-display-3-line:1.2;--text-display-3-spacing:-0.02em;--text-display-3-weight:700;--text-display-3-weight-bold:800;--text-h0-size:40px;--text-h0-line:52px;--text-h0-spacing:-1px;--text-h0-weight:700;--text-h0-weight-bold:800;--text-h1-size:32px;--text-h1-line:44px;--text-h1-spacing:-0.5px;--text-h1-weight:700;--text-h1-weight-bold:800;--text-h2-size:24px;--text-h2-line:34px;--text-h2-spacing:-0.25px;--text-h2-weight:500;--text-h2-weight-bold:600;--text-h3-size:20px;--text-h3-line:30px;--text-h3-spacing:normal;--text-h3-weight:500;--text-h3-weight-bold:600;--text-h4-size:17px;--text-h4-line:26px;--text-h4-spacing:normal;--text-h4-weight:500;--text-h4-weight-bold:600;--text-h5-size:15px;--text-h5-line:23px;--text-h5-spacing:normal;--text-h5-weight:500;--text-h5-weight-bold:600;--text-body-1-size:18px;--text-body-1-line:28px;--text-body-1-weight:400;--text-body-1-weight-bold:600;--text-body-2-size:16px;--text-body-2-line:26px;--text-body-2-weight:400;--text-body-2-weight-bold:600;--text-body-3-size:14px;--text-body-3-line:22px;--text-body-3-weight:400;--text-body-3-weight-bold:600;--text-button-1-size:14px;--text-button-1-line:20px;--text-button-1-weight:500;--text-button-2-size:13px;--text-button-2-line:18px;--text-button-2-weight:400;--text-caption-1-size:12px;--text-caption-1-line:17px;--text-caption-1-weight:400;--text-caption-1-weight-bold:600;--text-caption-2-size:11px;--text-caption-2-line:15px;--text-caption-2-weight:400;--text-caption-2-weight-bold:600;--spacing-xs:8px;--spacing-s:12px;--spacing-m:16px;--spacing-l:20px;--spacing-xl:24px;--spacing-page:60px;--spacing-content:20px;--container-page:1920px;--margin-page:var(--spacing-page);--margin-content:var(--spacing-content);--duration-fast:120ms;--duration-base:200ms;--duration-slow:320ms;--ease-out:cubic-bezier(0.22,0.9,0.3,1);--ease-in-out:cubic-bezier(0.4,0,0.2,1);--bp-tablet:768px;--bp-desktop:1024px;--radius-xs:4px;--radius-sm:8px;--radius-s:10px;--radius-card:12px;--radius-m:20px;--radius-l:40px;--radius-full:999px;--radius-dialog:var(--radius-m);--z-base:0;--z-content:1;--z-dropdown:200;--z-sticky:500;--z-nav:1000;--z-sidebar:1100;--z-overlay:2000;--z-page-popup:2100;--z-fab:2150;--z-modal:2200;--focus-ring:var(--color-main);--z-popover:2300;--z-tooltip:3000;--z-alert:3100;--z-toast:3200}@media (min-width:768px) and (max-width:1023px){:where(.ihabdevteam-core-scope){--spacing-page:40px;--spacing-content:15px;--text-h0-size:32px;--text-h0-line:44px;--text-h0-spacing:-0.75px;--text-h1-size:28px;--text-h1-line:40px;--text-h1-spacing:-0.4px;--text-h2-size:22px;--text-h2-line:32px;--text-h2-spacing:-0.2px;--text-h3-size:18px;--text-h3-line:28px;--text-h4-size:16px;--text-h4-line:24px;--text-h5-size:14px;--text-h5-line:21px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:24px;--text-body-3-size:14px;--text-body-3-line:22px}}@media (max-width:767px){:where(.ihabdevteam-core-scope){--spacing-page:20px;--spacing-content:10px;--text-h0-size:28px;--text-h0-line:38px;--text-h0-spacing:-0.5px;--text-h1-size:24px;--text-h1-line:34px;--text-h1-spacing:-0.3px;--text-h2-size:20px;--text-h2-line:29px;--text-h2-spacing:-0.2px;--text-h3-size:17px;--text-h3-line:26px;--text-h4-size:15px;--text-h4-line:23px;--text-h5-size:13px;--text-h5-line:20px;--text-body-1-size:17px;--text-body-1-line:27px;--text-body-2-size:15px;--text-body-2-line:23px;--text-body-3-size:13px;--text-body-3-line:21px}}.ihabdevteam-core-scope [data-font-scale=large1]{--text-h4-size:19px;--text-h4-line:29px;--text-h5-size:17px;--text-h5-line:26px;--text-body-1-size:20px;--text-body-1-line:31px;--text-body-2-size:18px;--text-body-2-line:28px;--text-body-3-size:16px;--text-body-3-line:25px;--text-button-1-size:16px;--text-button-1-line:23px;--text-button-2-size:15px;--text-button-2-line:21px;--text-caption-1-size:14px;--text-caption-1-line:20px;--text-caption-2-size:12px;--text-caption-2-line:17px}.ihabdevteam-core-scope [data-font-scale=large2]{--text-h4-size:21px;--text-h4-line:32px;--text-h5-size:19px;--text-h5-line:29px;--text-body-1-size:23px;--text-body-1-line:36px;--text-body-2-size:20px;--text-body-2-line:31px;--text-body-3-size:18px;--text-body-3-line:28px;--text-button-1-size:18px;--text-button-1-line:26px;--text-button-2-size:16px;--text-button-2-line:23px;--text-caption-1-size:15px;--text-caption-1-line:21px;--text-caption-2-size:14px;--text-caption-2-line:19px}.ihabdevteam-core-scope [data-font-scale=large3]{--text-h4-size:23px;--text-h4-line:35px;--text-h5-size:21px;--text-h5-line:32px;--text-body-1-size:25px;--text-body-1-line:39px;--text-body-2-size:22px;--text-body-2-line:34px;--text-body-3-size:19px;--text-body-3-line:30px;--text-button-1-size:19px;--text-button-1-line:27px;--text-button-2-size:18px;--text-button-2-line:26px;--text-caption-1-size:17px;--text-caption-1-line:24px;--text-caption-2-size:15px;--text-caption-2-line:21px}.ihabdevteam-core-scope [data-theme=dark]{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}@media (prefers-color-scheme:dark){.ihabdevteam-core-scope :root:not([data-theme=light]):not([data-theme=dark]),.ihabdevteam-core-scope [data-theme=auto]{color-scheme:dark;--color-white:#1e2227;--color-deepWhite:#252a30;--color-darkWhite:#2d3238;--color-whiteLine:hsla(0,0%,100%,.08);--color-black:#f0f2f5;--color-softBlack:#dde1e7;--color-lightBlack:#cbd1da;--color-darkGray:#b8c0cc;--color-deepGray:#a1aab7;--color-gray:#8b95a1;--color-softGray:#737f90;--color-lightGray:#60697a;--color-pureWhite:#0f1215;--color-pureBlack:#f0f2f5;--color-disabled:#3f4650}}.ihabdevteam-core-scope .force-light-scheme{color-scheme:light;--color-pureWhite:#fff;--color-white:#fbfdff;--color-deepWhite:#f8fafc;--color-darkWhite:#eef2f6;--color-whiteLine:#dde3ec;--color-lightGray:#96a4b8;--color-softGray:#7b8ca3;--color-gray:#64748b;--color-deepGray:#546170;--color-darkGray:#434d56;--color-lightBlack:#32393f;--color-softBlack:#222528;--color-black:#111;--color-pureBlack:#000;--color-disabled:#bfc7d1}@media (hover:none){.ihabdevteam-core-scope [role=button]:hover,.ihabdevteam-core-scope a:hover,.ihabdevteam-core-scope button:hover{opacity:1}}.ihabdevteam-core-scope *,.ihabdevteam-core-scope :after,.ihabdevteam-core-scope :before{box-sizing:border-box}.ihabdevteam-core-scope{margin:0}.ihabdevteam-core-scope button,.ihabdevteam-core-scope input,.ihabdevteam-core-scope select,.ihabdevteam-core-scope textarea{font-family:inherit}:where(.ihabdevteam-core-scope) :where(.display-1),:where(.ihabdevteam-core-scope) :where(.display-1b){font-size:clamp(44px,6.6vw,72px);font-size:var(--text-display-1-size);letter-spacing:-.04em;letter-spacing:var(--text-display-1-spacing);line-height:1.05;line-height:var(--text-display-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-2),:where(.ihabdevteam-core-scope) :where(.display-2b){font-size:clamp(38px,5.2vw,56px);font-size:var(--text-display-2-size);letter-spacing:-.03em;letter-spacing:var(--text-display-2-spacing);line-height:1.12;line-height:var(--text-display-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-3),:where(.ihabdevteam-core-scope) :where(.display-3b){font-size:clamp(34px,4.1vw,44px);font-size:var(--text-display-3-size);letter-spacing:-.02em;letter-spacing:var(--text-display-3-spacing);line-height:1.2;line-height:var(--text-display-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.display-1){font-weight:800;font-weight:var(--text-display-1-weight)}:where(.ihabdevteam-core-scope) :where(.display-2){font-weight:700;font-weight:var(--text-display-2-weight)}:where(.ihabdevteam-core-scope) :where(.display-3){font-weight:700;font-weight:var(--text-display-3-weight)}:where(.ihabdevteam-core-scope) :where(.display-1b){font-weight:900;font-weight:var(--text-display-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-2b){font-weight:800;font-weight:var(--text-display-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.display-3b){font-weight:800;font-weight:var(--text-display-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h0),:where(.ihabdevteam-core-scope) :where(.h0b){font-size:40px;font-size:var(--text-h0-size);letter-spacing:-1px;letter-spacing:var(--text-h0-spacing);line-height:52px;line-height:var(--text-h0-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h1),:where(.ihabdevteam-core-scope) :where(.h1b){font-size:32px;font-size:var(--text-h1-size);letter-spacing:-.5px;letter-spacing:var(--text-h1-spacing);line-height:44px;line-height:var(--text-h1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h2),:where(.ihabdevteam-core-scope) :where(.h2b){font-size:24px;font-size:var(--text-h2-size);letter-spacing:-.25px;letter-spacing:var(--text-h2-spacing);line-height:34px;line-height:var(--text-h2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h3),:where(.ihabdevteam-core-scope) :where(.h3b){font-size:20px;font-size:var(--text-h3-size);letter-spacing:normal;letter-spacing:var(--text-h3-spacing);line-height:30px;line-height:var(--text-h3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h4),:where(.ihabdevteam-core-scope) :where(.h4b){font-size:17px;font-size:var(--text-h4-size);letter-spacing:normal;letter-spacing:var(--text-h4-spacing);line-height:26px;line-height:var(--text-h4-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h5),:where(.ihabdevteam-core-scope) :where(.h5b){font-size:15px;font-size:var(--text-h5-size);letter-spacing:normal;letter-spacing:var(--text-h5-spacing);line-height:23px;line-height:var(--text-h5-line);margin:0}:where(.ihabdevteam-core-scope) :where(.h0){font-weight:700;font-weight:var(--text-h0-weight)}:where(.ihabdevteam-core-scope) :where(.h1){font-weight:700;font-weight:var(--text-h1-weight)}:where(.ihabdevteam-core-scope) :where(.h2){font-weight:500;font-weight:var(--text-h2-weight)}:where(.ihabdevteam-core-scope) :where(.h3){font-weight:500;font-weight:var(--text-h3-weight)}:where(.ihabdevteam-core-scope) :where(.h4){font-weight:500;font-weight:var(--text-h4-weight)}:where(.ihabdevteam-core-scope) :where(.h5){font-weight:500;font-weight:var(--text-h5-weight)}:where(.ihabdevteam-core-scope) :where(.h0b){font-weight:800;font-weight:var(--text-h0-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h1b){font-weight:800;font-weight:var(--text-h1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h2b){font-weight:600;font-weight:var(--text-h2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h3b){font-weight:600;font-weight:var(--text-h3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h4b){font-weight:600;font-weight:var(--text-h4-weight-bold)}:where(.ihabdevteam-core-scope) :where(.h5b){font-weight:600;font-weight:var(--text-h5-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-1),:where(.ihabdevteam-core-scope) :where(.body-1b){font-size:18px;font-size:var(--text-body-1-size);font-weight:400;font-weight:var(--text-body-1-weight);line-height:28px;line-height:var(--text-body-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-2),:where(.ihabdevteam-core-scope) :where(.body-2b){font-size:16px;font-size:var(--text-body-2-size);font-weight:400;font-weight:var(--text-body-2-weight);line-height:26px;line-height:var(--text-body-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-3),:where(.ihabdevteam-core-scope) :where(.body-3b){font-size:14px;font-size:var(--text-body-3-size);font-weight:400;font-weight:var(--text-body-3-weight);line-height:22px;line-height:var(--text-body-3-line);margin:0}:where(.ihabdevteam-core-scope) :where(.body-1b){font-weight:600;font-weight:var(--text-body-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-2b){font-weight:600;font-weight:var(--text-body-2-weight-bold)}:where(.ihabdevteam-core-scope) :where(.body-3b){font-weight:600;font-weight:var(--text-body-3-weight-bold)}:where(.ihabdevteam-core-scope) :where(.button-1){font-size:14px;font-size:var(--text-button-1-size);font-weight:500;font-weight:var(--text-button-1-weight);line-height:20px;line-height:var(--text-button-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.button-2){font-size:13px;font-size:var(--text-button-2-size);font-weight:400;font-weight:var(--text-button-2-weight);line-height:18px;line-height:var(--text-button-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1),:where(.ihabdevteam-core-scope) :where(.caption-1b){font-size:12px;font-size:var(--text-caption-1-size);font-weight:400;font-weight:var(--text-caption-1-weight);line-height:17px;line-height:var(--text-caption-1-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-2),:where(.ihabdevteam-core-scope) :where(.caption-2b){font-size:11px;font-size:var(--text-caption-2-size);font-weight:400;font-weight:var(--text-caption-2-weight);line-height:15px;line-height:var(--text-caption-2-line);margin:0}:where(.ihabdevteam-core-scope) :where(.caption-1b){font-weight:600;font-weight:var(--text-caption-1-weight-bold)}:where(.ihabdevteam-core-scope) :where(.caption-2b){font-weight:600;font-weight:var(--text-caption-2-weight-bold)}.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

@@ -4255,6 +4255,111 @@ export declare function removeItem<T>(draft: readonly DraftItem<T>[], key: strin
 /** @public 배열에서 from 위치 요소를 to 위치로 옮긴 새 배열을 반환한다(원본 불변). 드래그 재정렬 등에 사용. */
 export declare function reorderArray<T>(arr: readonly T[], from: number, to: number): T[];
 
+/** @public */
+export declare interface ReportBlock {
+    /** 블록을 가리키는 값. 같은 목록 안에서 겹치지 않아야 한다. */
+    id: string;
+    /** 그 블록이 그리는 내용. */
+    content: ReactNode;
+    /**
+     * 문서의 갈래. 값이 바뀌는 자리에서 반드시 새 장이 시작하고, 그 장의 머리
+     * 제목도 이 값으로 고른다(`sectionTitles`). 한 장에 "검사 결과" 제목을 달고
+     * 응답 데이터가 이어지는 일을 막는다.
+     */
+    section?: string;
+    /**
+     * 쪽을 나눌 때 한 덩어리로 다룰 묶음. 표 머리와 그 행들처럼 갈라지면 읽을 수
+     * 없는 것들에 같은 값을 준다 — 남은 자리가 모자라면 통째로 다음 장으로 간다.
+     * 묶음 하나가 한 장보다 크면 어쩔 수 없이 블록 단위로 쪼갠다.
+     */
+    group?: string;
+}
+
+/**
+ * 인쇄물처럼 쪽이 나뉘는 보고서 문서.
+ *
+ * 넘긴 블록들을 숨겨서 한 번 그려 높이를 재고, 한 장에 담기는 높이에 맞춰
+ * 순서대로 채우다 넘치면 다음 장으로 넘긴다. 장마다 머리(제목 + 로고)와
+ * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
+ *
+ * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
+ * 그 경우 `blocks` 를 그대로 두고 다시 그리면 다시 잰다.
+ *
+ * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
+ * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.
+ *
+ * @example
+ * ```tsx
+ * <ReportDocument
+ *   logo={<img src={logoApeb} alt="APEB" className="report-doc__logo" />}
+ *   sectionTitles={{ result: '검사 결과', answer: '응답 데이터' }}
+ *   blocks={[
+ *     { id: 'info', section: 'result', content: <ReportInfoPanel title="피검사자 정보" fields={fields} /> },
+ *     { id: 'tbl-head', section: 'result', group: 'screening', content: <TableHead /> },
+ *     { id: 'tbl-body', section: 'result', group: 'screening', content: <TableBody /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * @public
+ */
+export declare function ReportDocument({ blocks, sectionTitles, logo, footer, pageLabel, pageWidth, pageHeight, margin, className, style, }: ReportDocumentProps): JSX.Element;
+
+/** @public */
+export declare interface ReportDocumentProps {
+    /** 문서에 실을 내용. 준 순서 그대로 채운다. */
+    blocks: ReportBlock[];
+    /** `section` 값 → 그 장의 머리 제목. 없으면 머리 제목 자리를 비운다. */
+    sectionTitles?: Record<string, ReactNode>;
+    /** 매 장 오른쪽 위. 제품 로고를 넣는다. */
+    logo?: ReactNode;
+    /**
+     * 매 장 왼쪽 아래.
+     * @defaultValue IHAB 로고 + `© IHAB, Inc. All rights reserved.`
+     */
+    footer?: ReactNode;
+    /**
+     * 매 장 오른쪽 아래.
+     * @defaultValue `1 / 6` 꼴
+     */
+    pageLabel?: (page: number, total: number) => ReactNode;
+    /** @defaultValue `'210mm'` */
+    pageWidth?: string;
+    /** @defaultValue `'297mm'` */
+    pageHeight?: string;
+    /** 네 변 여백. @defaultValue `'14mm'` */
+    margin?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+
+/** @public */
+export declare interface ReportInfoField {
+    label: ReactNode;
+    value: ReactNode;
+}
+
+/**
+ * 보고서 첫머리의 대상자 정보 패널 — 이름표와 값이 짝지어 격자로 놓인다.
+ *
+ * 값에 무엇이 들어갈지는 제품이 정한다. 값이 없을 때 `-` 를 넣을지 빈칸으로
+ * 둘지도 부르는 쪽에서 정해 넘긴다(보고서는 빈칸보다 `-` 가 읽기 좋다).
+ *
+ * @public
+ */
+export declare function ReportInfoPanel({ title, fields, columns, className, style, }: ReportInfoPanelProps): JSX.Element;
+
+/** @public */
+export declare interface ReportInfoPanelProps {
+    /** 패널 제목. 없으면 제목 줄을 그리지 않는다. */
+    title?: ReactNode;
+    fields: ReportInfoField[];
+    /** 한 줄에 놓을 칸 수. @defaultValue 4 */
+    columns?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+
 /**
  * 에셋 경로를 절대 URL 또는 베이스 URL 기준의 경로로 변환합니다.
  *

package/dist/packages/core/src/components/Report/ReportDocument.css

@@ -0,0 +1,127 @@
+/* ── 바깥 스크롤 상자 ───────────────────────────────────────
+   A4(210mm ≈ 794px)는 좁은 화면보다 넓다. 그냥 `center` 로 두면 넘친 양이
+   좌우로 갈리는데, 왼쪽으로 넘친 부분은 스크롤로 닿지 않는다(브라우저가
+   스크롤 폭을 실제보다 짧게 잡는다). `safe center` 는 들어갈 때는 가운데,
+   넘칠 때는 왼쪽 맞춤이라 전체를 훑어볼 수 있다. */
+.report-doc {
+  --report-page-w: 210mm;
+  --report-page-h: 297mm;
+  --report-margin: 14mm;
+
+  display: flex;
+  width: 100%;
+  /* flex·grid 안에 놓이면 자동 최소 크기가 한 장의 폭(A4 794px)이라 줄어들지
+     않는다. 그대로 두면 좁은 부모를 뚫고 나가 바깥에서 잘리고, 여기 걸어 둔
+     가로 스크롤은 쓰이지도 않는다. */
+  min-width: 0;
+  max-width: 100%;
+  justify-content: safe center;
+  overflow-x: auto;
+  padding-block: var(--spacing-s);
+}
+
+.report-doc__pages {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--spacing-l);
+}
+
+/* ── 한 장 ─────────────────────────────────────────────────
+   종이는 언제나 흰 바탕에 검은 글씨다. 화면 테마를 따라가지 않는다. */
+.report-doc__page {
+  display: flex;
+  flex-direction: column;
+  flex-shrink: 0;
+  width: var(--report-page-w);
+  min-height: var(--report-page-h);
+  padding: var(--report-margin);
+  background: #fff;
+  color: #000;
+  box-shadow: var(--shadow-card);
+}
+
+.report-doc__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: var(--spacing-s);
+}
+
+.report-doc__title {
+  margin: 0;
+}
+
+.report-doc__footer {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: auto;
+  padding-top: var(--spacing-s);
+  color: var(--color-gray);
+}
+
+.report-doc__footer-left {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-s);
+}
+
+.report-doc__page-no {
+  font-variant-numeric: tabular-nums;
+}
+
+.report-doc__logo {
+  height: 28px;
+  width: auto;
+}
+
+/* ── 측정용(화면에 보이지 않음) ─────────────────────────────
+   실제 장과 같은 안쪽 폭·같은 레이아웃으로 한 번 그려 높이를 잰다.
+
+   `display: flex; flex-direction: column` 이 폭만큼이나 중요하다. 실제 장이
+   flex 컬럼이라 블록 래퍼가 각자 서식 문맥을 만들어 자식의 아래 마진을 자기
+   높이에 품는데, 측정 쪽을 일반 블록으로 두면 그 마진이 밖으로 병합돼 블록마다
+   십수 px 씩 작게 잡힌다. 그만큼 한 장에 더 담기는 것으로 계산돼 넘친다. */
+.report-doc__measure {
+  position: absolute;
+  z-index: -10;
+  display: flex;
+  flex-direction: column;
+  width: calc(var(--report-page-w) - var(--report-margin) * 2);
+  opacity: 0;
+  pointer-events: none;
+}
+
+/* 실제 장과 같은 flex 컬럼이라야 블록 높이가 같게 잡힌다(위 설명 참조). */
+.report-doc__measure-blocks {
+  display: flex;
+  flex-direction: column;
+}
+
+/* 한 장에서 본문이 쓸 수 있는 높이를 브라우저에게 직접 물어보기 위한 자.
+   mm→px 환산을 코드에 박지 않으므로 페이지 규격을 바꿔도 따라온다. */
+.report-doc__ruler {
+  height: calc(var(--report-page-h) - var(--report-margin) * 2);
+}
+
+@media print {
+  .report-doc {
+    display: block;
+    overflow: visible;
+    padding-block: 0;
+  }
+
+  .report-doc__pages {
+    display: block;
+  }
+
+  .report-doc__page {
+    box-shadow: none;
+    break-after: page;
+  }
+
+  .report-doc__page:last-child {
+    break-after: auto;
+  }
+}

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

@@ -0,0 +1,77 @@
+import { type CSSProperties, type ReactNode } from 'react';
+import './ReportDocument.css';
+/** @public */
+export interface ReportBlock {
+    /** 블록을 가리키는 값. 같은 목록 안에서 겹치지 않아야 한다. */
+    id: string;
+    /** 그 블록이 그리는 내용. */
+    content: ReactNode;
+    /**
+     * 문서의 갈래. 값이 바뀌는 자리에서 반드시 새 장이 시작하고, 그 장의 머리
+     * 제목도 이 값으로 고른다(`sectionTitles`). 한 장에 "검사 결과" 제목을 달고
+     * 응답 데이터가 이어지는 일을 막는다.
+     */
+    section?: string;
+    /**
+     * 쪽을 나눌 때 한 덩어리로 다룰 묶음. 표 머리와 그 행들처럼 갈라지면 읽을 수
+     * 없는 것들에 같은 값을 준다 — 남은 자리가 모자라면 통째로 다음 장으로 간다.
+     * 묶음 하나가 한 장보다 크면 어쩔 수 없이 블록 단위로 쪼갠다.
+     */
+    group?: string;
+}
+/** @public */
+export interface ReportDocumentProps {
+    /** 문서에 실을 내용. 준 순서 그대로 채운다. */
+    blocks: ReportBlock[];
+    /** `section` 값 → 그 장의 머리 제목. 없으면 머리 제목 자리를 비운다. */
+    sectionTitles?: Record<string, ReactNode>;
+    /** 매 장 오른쪽 위. 제품 로고를 넣는다. */
+    logo?: ReactNode;
+    /**
+     * 매 장 왼쪽 아래.
+     * @defaultValue IHAB 로고 + `© IHAB, Inc. All rights reserved.`
+     */
+    footer?: ReactNode;
+    /**
+     * 매 장 오른쪽 아래.
+     * @defaultValue `1 / 6` 꼴
+     */
+    pageLabel?: (page: number, total: number) => ReactNode;
+    /** @defaultValue `'210mm'` */
+    pageWidth?: string;
+    /** @defaultValue `'297mm'` */
+    pageHeight?: string;
+    /** 네 변 여백. @defaultValue `'14mm'` */
+    margin?: string;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 인쇄물처럼 쪽이 나뉘는 보고서 문서.
+ *
+ * 넘긴 블록들을 숨겨서 한 번 그려 높이를 재고, 한 장에 담기는 높이에 맞춰
+ * 순서대로 채우다 넘치면 다음 장으로 넘긴다. 장마다 머리(제목 + 로고)와
+ * 바닥(로고·저작권 + 쪽 번호)이 반복된다.
+ *
+ * 재는 방식이라 글꼴이 늦게 오거나 이미지가 나중에 뜨면 쪽이 밀릴 수 있다.
+ * 그 경우 `blocks` 를 그대로 두고 다시 그리면 다시 잰다.
+ *
+ * 화면에 그린 쪽 수는 다른 도구로 만든 PDF 와 다를 수 있다. 같은 내용을 그리는
+ * 높이가 서로 달라서인데, 쪽 수까지 맞춰야 하면 양쪽 본문 높이를 견줘야 한다.
+ *
+ * @example
+ * ```tsx
+ * <ReportDocument
+ *   logo={<img src={logoApeb} alt="APEB" className="report-doc__logo" />}
+ *   sectionTitles={{ result: '검사 결과', answer: '응답 데이터' }}
+ *   blocks={[
+ *     { id: 'info', section: 'result', content: <ReportInfoPanel title="피검사자 정보" fields={fields} /> },
+ *     { id: 'tbl-head', section: 'result', group: 'screening', content: <TableHead /> },
+ *     { id: 'tbl-body', section: 'result', group: 'screening', content: <TableBody /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * @public
+ */
+export default function ReportDocument({ blocks, sectionTitles, logo, footer, pageLabel, pageWidth, pageHeight, margin, className, style, }: ReportDocumentProps): import("react").JSX.Element;

package/dist/packages/core/src/components/Report/ReportInfoPanel.css

@@ -0,0 +1,42 @@
+.report-info {
+  margin-bottom: var(--spacing-l);
+  padding: var(--spacing-s) var(--spacing-m);
+  border: 1px solid var(--color-border);
+  border-radius: var(--radius-card);
+}
+
+.report-info__title {
+  margin: 0 0 var(--spacing-s);
+  color: var(--color-darkGray);
+}
+
+.report-info__grid {
+  display: grid;
+  grid-template-columns: repeat(var(--report-info-cols, 4), minmax(0, 1fr));
+  gap: var(--spacing-xs) var(--spacing-l);
+}
+
+/* 좁은 화면에서는 두 칸으로 접는다 — 인쇄물은 늘 넓지만 화면 미리보기가
+   좁아질 수 있다. */
+@media (max-width: 640px) {
+  .report-info__grid {
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+}
+
+.report-info__field {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-s);
+}
+
+.report-info__label {
+  width: 3.5rem;
+  flex-shrink: 0;
+  color: var(--color-gray);
+}
+
+.report-info__value {
+  color: var(--color-darkGray);
+  white-space: nowrap;
+}

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

@@ -0,0 +1,26 @@
+import type { CSSProperties, ReactNode } from 'react';
+import './ReportInfoPanel.css';
+/** @public */
+export interface ReportInfoField {
+    label: ReactNode;
+    value: ReactNode;
+}
+/** @public */
+export interface ReportInfoPanelProps {
+    /** 패널 제목. 없으면 제목 줄을 그리지 않는다. */
+    title?: ReactNode;
+    fields: ReportInfoField[];
+    /** 한 줄에 놓을 칸 수. @defaultValue 4 */
+    columns?: number;
+    className?: string;
+    style?: CSSProperties;
+}
+/**
+ * 보고서 첫머리의 대상자 정보 패널 — 이름표와 값이 짝지어 격자로 놓인다.
+ *
+ * 값에 무엇이 들어갈지는 제품이 정한다. 값이 없을 때 `-` 를 넣을지 빈칸으로
+ * 둘지도 부르는 쪽에서 정해 넘긴다(보고서는 빈칸보다 `-` 가 읽기 좋다).
+ *
+ * @public
+ */
+export default function ReportInfoPanel({ title, fields, columns, className, style, }: ReportInfoPanelProps): import("react").JSX.Element;

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

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cx } from '../../utils/cx';
+import './ReportInfoPanel.css';
+/**
+ * 보고서 첫머리의 대상자 정보 패널 — 이름표와 값이 짝지어 격자로 놓인다.
+ *
+ * 값에 무엇이 들어갈지는 제품이 정한다. 값이 없을 때 `-` 를 넣을지 빈칸으로
+ * 둘지도 부르는 쪽에서 정해 넘긴다(보고서는 빈칸보다 `-` 가 읽기 좋다).
+ *
+ * @public
+ */
+export default function ReportInfoPanel({ title, fields, columns = 4, className, style, }) {
+    return (_jsxs("div", { className: cx('report-info', className), style: { ['--report-info-cols']: String(columns), ...style }, children: [title && _jsx("p", { className: "report-info__title h5b", children: title }), _jsx("div", { className: "report-info__grid", children: fields.map((f, i) => (_jsxs("div", { className: "report-info__field body-2", children: [_jsx("span", { className: "report-info__label body-3", children: f.label }), _jsx("span", { className: "report-info__value", children: f.value })] }, i))) })] }));
+}

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

@@ -295,6 +295,10 @@ export type { PanelRowToggle, PanelRowSegmented, DropdownItem, PanelRowDropdown,
 export { default as Section } from './components/Section';
 export type { SectionProps, SectionType } from './components/Section';
 export { default as Pagination } from './components/Pagination';
+export { default as ReportDocument } from './components/Report/ReportDocument';
+export type { ReportDocumentProps, ReportBlock } from './components/Report/ReportDocument';
+export { default as ReportInfoPanel } from './components/Report/ReportInfoPanel';
+export type { ReportInfoPanelProps, ReportInfoField } from './components/Report/ReportInfoPanel';
 export { default as UpdateAlert } from './components/UpdateAlert';
 export { default as TrainingCard } from './components/Training/TrainingCard';
 export type { TrainingCardProps } from './components/Training/TrainingCard';

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

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

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

@@ -54,47 +54,79 @@ textarea {
 
 /* ── 타이포그래피 헬퍼 (전역) ────────────────────────────── */
 /* 값은 전부 tokens.css의 --text-* 변수에서 온다(반응형·글자 크기 스케일 포함).
-   여기서는 "어떤 변수를 쓰는지"만 정의한다 — 수치를 바꾸려면 tokens.css를 고친다. */
+   여기서는 "어떤 변수를 쓰는지"만 정의한다 — 수치를 바꾸려면 tokens.css를 고친다.
+
+   **왜 전부 :where() 로 감쌌나 — 이것은 기본값이지 강제가 아니다.**
+   이 번들은 소비자 앱과 섞이지 않게 모든 셀렉터에 `.ihabdevteam-core-scope` 를
+   붙여 내보낸다. 그러면 `.h0` 이 `.ihabdevteam-core-scope .h0`(특이도 0-2-0)이
+   되어, 앱이 `.lp-hero-sub`(0-1-0) 한 겹으로 적은 여백·크기를 **통째로 눌러
+   이긴다.** 바로 아래 "margin은 0 기본, 필요 시 컴포넌트에서 override" 라고 적어
+   두고도 그 override 가 성립하지 않았다.
+
+   실측으로 확인한 피해 — 회원앱 랜딩 한 화면에서 다섯 자리가 눌렸고, 그중 셋은
+   **코어 자신의 컴포넌트**였다(payment-plan__quote · payment-plan__subtitle ·
+   site-footer__copyright). 히어로에서는 `margin-bottom: 32px` 가 0px 이 되어 제목·
+   본문·단추가 맞붙었고, 모바일에서 앱이 정한 26px 제목이 h0 의 28px 로 되돌아갔다.
+
+   `:where()` 는 안에 무엇이 들어 있든 특이도가 0 이다. postcss 설정이 프리픽스도
+   `:where(.ihabdevteam-core-scope)` 로 감싸므로(postcss.config.cjs 참고) 최종
+   특이도가 0-0-0 이 되어, 앱의 어떤 클래스 규칙이든 이 기본값을 덮을 수 있다.
+   타이포 헬퍼는 **바탕**이고 화면이 그 위에 자기 판단을 얹는다 — 그것이 원래
+   의도였고, 이제 실제로 그렇게 된다. */
+
+/* Display — h0 위의 세 단. 랜딩·히어로처럼 크게 외치는 자리 전용이다.
+   h 단과 달리 크기가 뷰포트를 따라 연속으로 변한다(tokens.css 의 clamp) — 까닭은
+   그쪽 주석에 적어 두었다. 앱 화면 제목에는 h0~h5 를 쓴다. */
+:where(.display-1), :where(.display-1b) { font-size: var(--text-display-1-size); line-height: var(--text-display-1-line); letter-spacing: var(--text-display-1-spacing); margin: 0; }
+:where(.display-2), :where(.display-2b) { font-size: var(--text-display-2-size); line-height: var(--text-display-2-line); letter-spacing: var(--text-display-2-spacing); margin: 0; }
+:where(.display-3), :where(.display-3b) { font-size: var(--text-display-3-size); line-height: var(--text-display-3-line); letter-spacing: var(--text-display-3-spacing); margin: 0; }
+
+:where(.display-1)  { font-weight: var(--text-display-1-weight); }
+:where(.display-2)  { font-weight: var(--text-display-2-weight); }
+:where(.display-3)  { font-weight: var(--text-display-3-weight); }
+:where(.display-1b) { font-weight: var(--text-display-1-weight-bold); }
+:where(.display-2b) { font-weight: var(--text-display-2-weight-bold); }
+:where(.display-3b) { font-weight: var(--text-display-3-weight-bold); }
 
 /* Heading — margin은 0 기본, 필요 시 컴포넌트에서 override */
-.h0, .h0b { font-size: var(--text-h0-size); line-height: var(--text-h0-line); letter-spacing: var(--text-h0-spacing); margin: 0; }
-.h1, .h1b { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-spacing); margin: 0; }
-.h2, .h2b { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-spacing); margin: 0; }
-.h3, .h3b { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-spacing); margin: 0; }
-.h4, .h4b { font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--text-h4-spacing); margin: 0; }
-.h5, .h5b { font-size: var(--text-h5-size); line-height: var(--text-h5-line); letter-spacing: var(--text-h5-spacing); margin: 0; }
+:where(.h0), :where(.h0b) { font-size: var(--text-h0-size); line-height: var(--text-h0-line); letter-spacing: var(--text-h0-spacing); margin: 0; }
+:where(.h1), :where(.h1b) { font-size: var(--text-h1-size); line-height: var(--text-h1-line); letter-spacing: var(--text-h1-spacing); margin: 0; }
+:where(.h2), :where(.h2b) { font-size: var(--text-h2-size); line-height: var(--text-h2-line); letter-spacing: var(--text-h2-spacing); margin: 0; }
+:where(.h3), :where(.h3b) { font-size: var(--text-h3-size); line-height: var(--text-h3-line); letter-spacing: var(--text-h3-spacing); margin: 0; }
+:where(.h4), :where(.h4b) { font-size: var(--text-h4-size); line-height: var(--text-h4-line); letter-spacing: var(--text-h4-spacing); margin: 0; }
+:where(.h5), :where(.h5b) { font-size: var(--text-h5-size); line-height: var(--text-h5-line); letter-spacing: var(--text-h5-spacing); margin: 0; }
 
 /* Weight */
-.h0  { font-weight: var(--text-h0-weight); }
-.h1  { font-weight: var(--text-h1-weight); }
-.h2  { font-weight: var(--text-h2-weight); }
-.h3  { font-weight: var(--text-h3-weight); }
-.h4  { font-weight: var(--text-h4-weight); }
-.h5  { font-weight: var(--text-h5-weight); }
-.h0b { font-weight: var(--text-h0-weight-bold); }
-.h1b { font-weight: var(--text-h1-weight-bold); }
-.h2b { font-weight: var(--text-h2-weight-bold); }
-.h3b { font-weight: var(--text-h3-weight-bold); }
-.h4b { font-weight: var(--text-h4-weight-bold); }
-.h5b { font-weight: var(--text-h5-weight-bold); }
+:where(.h0)  { font-weight: var(--text-h0-weight); }
+:where(.h1)  { font-weight: var(--text-h1-weight); }
+:where(.h2)  { font-weight: var(--text-h2-weight); }
+:where(.h3)  { font-weight: var(--text-h3-weight); }
+:where(.h4)  { font-weight: var(--text-h4-weight); }
+:where(.h5)  { font-weight: var(--text-h5-weight); }
+:where(.h0b) { font-weight: var(--text-h0-weight-bold); }
+:where(.h1b) { font-weight: var(--text-h1-weight-bold); }
+:where(.h2b) { font-weight: var(--text-h2-weight-bold); }
+:where(.h3b) { font-weight: var(--text-h3-weight-bold); }
+:where(.h4b) { font-weight: var(--text-h4-weight-bold); }
+:where(.h5b) { font-weight: var(--text-h5-weight-bold); }
 
 /* Body — weight 명시 */
-.body-1,  .body-1b { font-size: var(--text-body-1-size); line-height: var(--text-body-1-line); margin: 0; font-weight: var(--text-body-1-weight); }
-.body-2,  .body-2b { font-size: var(--text-body-2-size); line-height: var(--text-body-2-line); margin: 0; font-weight: var(--text-body-2-weight); }
-.body-3,  .body-3b { font-size: var(--text-body-3-size); line-height: var(--text-body-3-line); margin: 0; font-weight: var(--text-body-3-weight); }
+:where(.body-1), :where(.body-1b) { font-size: var(--text-body-1-size); line-height: var(--text-body-1-line); margin: 0; font-weight: var(--text-body-1-weight); }
+:where(.body-2), :where(.body-2b) { font-size: var(--text-body-2-size); line-height: var(--text-body-2-line); margin: 0; font-weight: var(--text-body-2-weight); }
+:where(.body-3), :where(.body-3b) { font-size: var(--text-body-3-size); line-height: var(--text-body-3-line); margin: 0; font-weight: var(--text-body-3-weight); }
 
-.body-1b { font-weight: var(--text-body-1-weight-bold); }
-.body-2b { font-weight: var(--text-body-2-weight-bold); }
-.body-3b { font-weight: var(--text-body-3-weight-bold); }
+:where(.body-1b) { font-weight: var(--text-body-1-weight-bold); }
+:where(.body-2b) { font-weight: var(--text-body-2-weight-bold); }
+:where(.body-3b) { font-weight: var(--text-body-3-weight-bold); }
 
 /* Button / Caption — button에 weight 추가, caption과 크기 차별화 */
-.button-1 { font-size: var(--text-button-1-size); line-height: var(--text-button-1-line); font-weight: var(--text-button-1-weight); margin: 0; }
-.button-2 { font-size: var(--text-button-2-size); line-height: var(--text-button-2-line); font-weight: var(--text-button-2-weight); margin: 0; }
-.caption-1, .caption-1b { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); font-weight: var(--text-caption-1-weight); margin: 0; }
-.caption-2, .caption-2b { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); font-weight: var(--text-caption-2-weight); margin: 0; }
+:where(.button-1) { font-size: var(--text-button-1-size); line-height: var(--text-button-1-line); font-weight: var(--text-button-1-weight); margin: 0; }
+:where(.button-2) { font-size: var(--text-button-2-size); line-height: var(--text-button-2-line); font-weight: var(--text-button-2-weight); margin: 0; }
+:where(.caption-1), :where(.caption-1b) { font-size: var(--text-caption-1-size); line-height: var(--text-caption-1-line); font-weight: var(--text-caption-1-weight); margin: 0; }
+:where(.caption-2), :where(.caption-2b) { font-size: var(--text-caption-2-size); line-height: var(--text-caption-2-line); font-weight: var(--text-caption-2-weight); margin: 0; }
 /* b 계열 — 크기·행간은 같고 굵기만 다르다(body-*b와 동일한 규칙) */
-.caption-1b { font-weight: var(--text-caption-1-weight-bold); }
-.caption-2b { font-weight: var(--text-caption-2-weight-bold); }
+:where(.caption-1b) { font-weight: var(--text-caption-1-weight-bold); }
+:where(.caption-2b) { font-weight: var(--text-caption-2-weight-bold); }
 
 /* ── 전역 스크롤바 ──────────────────────────────────────── */
 ::-webkit-scrollbar { width: 6px; height: 6px; }