<div class="fx" style="--rw:390px;--h:560px"><figure class="fx-cell"><figcaption>KRDS</figcaption><div class="fx-view"><iframe title="KRDS PostCard list" srcdoc="<!doctype html><html class="" lang="ko" data-design-system="krds"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/packs/krds/pack.css">
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
font:13px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class="dsx dsx--one"><div class="container gx-measure"> <section class="pl" aria-labelledby="c-PostCard-list" data-astro-cid-bxkhhtcj> <h2 class="pl__title" id="c-PostCard-list" data-astro-cid-bxkhhtcj="true">함께 읽으면 좋은 글</h2> <div class="pl__list pl__list--list" data-astro-cid-bxkhhtcj> <article class="pc pc--list" data-astro-cid-dat744fk> <div class="pc__body" data-astro-cid-dat744fk> <p class="pc__cat" data-astro-cid-dat744fk>알레르기·위생</p> <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-allergy/" data-astro-cid-dat744fk>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-dat744fk>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-dat744fk> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span> </p> </div> </article> <article class="pc pc--list" data-astro-cid-dat744fk> <div class="pc__body" data-astro-cid-dat744fk> <p class="pc__cat" data-astro-cid-dat744fk>재료·영양</p> <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-dat744fk>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pc__desc" data-astro-cid-dat744fk>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-dat744fk> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span> </p> </div> </article> </div> </section> <div class="gx-lead"><article class="pc pc--list pc--lead" data-astro-cid-dat744fk> <div class="pc__body" data-astro-cid-dat744fk> <p class="pc__cat" data-astro-cid-dat744fk>단계별 이유식</p> <h3 class="pc__title" data-astro-cid-dat744fk="true"> <a href="/baby-food-stages-guide/" data-astro-cid-dat744fk>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-dat744fk>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-dat744fk> <time datetime="2026-10-13" data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 6분</span> <span aria-hidden="true" data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>기관 자료 6곳</span> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[href]');if(a&&a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type="module">try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>Primer</figcaption><div class="fx-view"><iframe title="Primer PostCard list" srcdoc="<!doctype html><html class="" lang="ko" data-design-system="primer"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/packs/primer/pack.css">
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
font:13px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class="dsx dsx--one"><div class="container gx-measure"> <section class="pl" aria-labelledby="c-PostCard-list" data-astro-cid-nmb674xz> <div class="pl__box" data-astro-cid-nmb674xz> <div class="pl__head" data-astro-cid-nmb674xz> <h2 class="pl__title" id="c-PostCard-list" data-astro-cid-nmb674xz="true">함께 읽으면 좋은 글</h2> <span class="pl__counter num" data-astro-cid-nmb674xz>2</span> </div> <div class="pl__list pl__list--list" data-astro-cid-nmb674xz> <article class="pc pc--list" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-allergy/" data-astro-cid-gluaejof>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>알레르기·위생</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> </p> </div> </article> <article class="pc pc--list" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-gluaejof>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>재료·영양</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 4분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> </p> </div> </article> </div> </div> </section> <div class="gx-lead"><article class="pc pc--list pc--lead" data-astro-cid-gluaejof> <div class="pc__body" data-astro-cid-gluaejof> <h3 class="pc__title" data-astro-cid-gluaejof="true"> <a href="/baby-food-stages-guide/" data-astro-cid-gluaejof>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-gluaejof>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-gluaejof> <span class="pc__label" data-astro-cid-gluaejof>단계별 이유식</span> <span class="pc__item" data-astro-cid-gluaejof> <svg xmlns="http://www.w3.org/2000/svg" width="14" height="14" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M12.5 7.25a.75.75 0 0 0-1.5 0v5.5c0 .27.144.518.378.651l3.5 2a.75.75 0 0 0 .744-1.302L12.5 12.315V7.25Z"></path><path d="M12 1c6.075 0 11 4.925 11 11s-4.925 11-11 11S1 18.075 1 12 5.925 1 12 1ZM2.5 12a9.5 9.5 0 0 0 9.5 9.5 9.5 9.5 0 0 0 9.5-9.5A9.5 9.5 0 0 0 12 2.5 9.5 9.5 0 0 0 2.5 12Z"></path></g></svg>약 6분
</span> <span class="pc__item" data-astro-cid-gluaejof> <time datetime="2026-10-13" data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> <span class="pc__item" data-astro-cid-gluaejof>기관 자료 6곳</span> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[href]');if(a&&a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type="module">try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>Carbon</figcaption><div class="fx-view"><iframe title="Carbon PostCard list" srcdoc="<!doctype html><html class="" lang="ko" data-design-system="carbon"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/packs/carbon/pack.css">
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
font:13px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class="dsx dsx--one"><div class="container gx-measure"> <section class="pl" aria-labelledby="c-PostCard-list" data-astro-cid-kq2jqgu2> <h2 class="pl__title" id="c-PostCard-list" data-astro-cid-kq2jqgu2="true">함께 읽으면 좋은 글</h2> <div class="pl__list pl__list--list" data-astro-cid-kq2jqgu2> <article class="pc pc--list" data-astro-cid-xcemhkav> <div class="pc__body" data-astro-cid-xcemhkav> <p class="pc__cat" data-astro-cid-xcemhkav>알레르기·위생</p> <h3 class="pc__title" data-astro-cid-xcemhkav="true"> <a href="/baby-food-allergy/" data-astro-cid-xcemhkav>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-xcemhkav>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-xcemhkav> <time datetime="2026-10-13" data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden="true" data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span> </p> </div> </article> <article class="pc pc--list" data-astro-cid-xcemhkav> <div class="pc__body" data-astro-cid-xcemhkav> <p class="pc__cat" data-astro-cid-xcemhkav>재료·영양</p> <h3 class="pc__title" data-astro-cid-xcemhkav="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-xcemhkav>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pc__desc" data-astro-cid-xcemhkav>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-xcemhkav> <time datetime="2026-10-13" data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden="true" data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span> </p> </div> </article> </div> </section> <div class="gx-lead"><article class="pc pc--list pc--lead pc--tile" data-astro-cid-xcemhkav> <div class="pc__body" data-astro-cid-xcemhkav> <p class="pc__cat" data-astro-cid-xcemhkav>단계별 이유식</p> <h3 class="pc__title" data-astro-cid-xcemhkav="true"> <a href="/baby-food-stages-guide/" data-astro-cid-xcemhkav>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pc__desc" data-astro-cid-xcemhkav>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pc__meta num" data-astro-cid-xcemhkav> <time datetime="2026-10-13" data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden="true" data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 6분</span> <span aria-hidden="true" data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>기관 자료 6곳</span> </p> <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32" fill="none" class="pc__arrow" aria-hidden="true" focusable="false"><g fill="currentColor"><path d="M18 6 16.57 7.393 24.15 15 4 15 4 17 24.15 17 16.57 24.573 18 26 28 16 18 6z"></path></g></svg> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[href]');if(a&&a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type="module">try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure><figure class="fx-cell"><figcaption>shadcn/ui</figcaption><div class="fx-view"><iframe title="shadcn/ui PostCard list" srcdoc="<!doctype html><html class="" lang="ko" data-design-system="shadcn"><head><meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="/packs/shadcn/pack.css">
<style>
html{scrollbar-width:none}html::-webkit-scrollbar{display:none}
.dsx-v{padding-bottom:28px}
.dsx-v+.dsx-v{border-top:1px dashed #a8a29e}
.dsx-label{display:flex;flex-wrap:wrap;gap:2px 10px;align-items:baseline;margin:0;padding:10px 16px;
font:13px/1.5 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:#6b645c;letter-spacing:0}
.dsx-label b{font:600 13px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#1c1917}
.dsx-label span{font-size:12px}
:root.dark .dsx-label{color:#a59c91}:root.dark .dsx-label b{color:#f3efe9}
.dsx--one{padding-block:12px}
@media (max-width:340px){.dsx-label{display:none}.dsx-v+.dsx-v{display:none}}
.pc__title,.pk__title,.pc__desc,.pk__desc{outline:2px dashed #c2410c;outline-offset:2px}</style></head>
<body><main class="dsx dsx--one"><div class="container gx-measure"> <section class="pls" aria-labelledby="c-PostCard-list" data-astro-cid-bqekhtub> <h2 class="pls__title" id="c-PostCard-list" data-astro-cid-bqekhtub="true">함께 읽으면 좋은 글</h2> <div class="pls__list pls__list--list" data-astro-cid-bqekhtub> <article class="pk pk--list" data-astro-cid-dfgbqoqn> <div class="pk__body" data-astro-cid-dfgbqoqn> <p class="pk__cat" data-astro-cid-dfgbqoqn>알레르기·위생</p> <h3 class="pk__title" data-astro-cid-dfgbqoqn="true"> <a href="/baby-food-allergy/" data-astro-cid-dfgbqoqn>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class="pk__desc" data-astro-cid-dfgbqoqn>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class="pk__meta num" data-astro-cid-dfgbqoqn> <time datetime="2026-10-13" data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span> </p> </div> </article> <article class="pk pk--list" data-astro-cid-dfgbqoqn> <div class="pk__body" data-astro-cid-dfgbqoqn> <p class="pk__cat" data-astro-cid-dfgbqoqn>재료·영양</p> <h3 class="pk__title" data-astro-cid-dfgbqoqn="true"> <a href="/baby-food-ingredient-order/" data-astro-cid-dfgbqoqn>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class="pk__desc" data-astro-cid-dfgbqoqn>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class="pk__meta num" data-astro-cid-dfgbqoqn> <time datetime="2026-10-13" data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span> </p> </div> </article> </div> </section> <div class="gx-lead"><article class="pk pk--list pk--card pk--lead" data-astro-cid-dfgbqoqn> <div class="pk__body" data-astro-cid-dfgbqoqn> <p class="pk__cat" data-astro-cid-dfgbqoqn>단계별 이유식</p> <h3 class="pk__title" data-astro-cid-dfgbqoqn="true"> <a href="/baby-food-stages-guide/" data-astro-cid-dfgbqoqn>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class="pk__desc" data-astro-cid-dfgbqoqn>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class="pk__meta num" data-astro-cid-dfgbqoqn> <time datetime="2026-10-13" data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 6분</span> <span data-astro-cid-dfgbqoqn>기관 자료 6곳</span> </p> <p class="pk__go" aria-hidden="true" data-astro-cid-dfgbqoqn>
읽어 보기
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" aria-hidden="true" focusable="false"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5 12h14" ></path> <path d="m12 5 7 7-7 7" ></path></g></svg> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&&e.target.closest('a[href]');if(a&&a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type="module">try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure></div><p class="legend">점선 안(제목과 설명)은 네 팩이 똑같은 글자예요. 달라지는 건 분류 이름의 자리, 구분 선, 간격, 글자 굵기 같은 모양이에요.</p>
body{display:block;place-items:stretch;overflow:auto;padding:12px}
.fx{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.fx-cell{margin:0;min-width:0}
.fx-cell figcaption{font:600 12px/1.4 ui-monospace,SFMono-Regular,Menlo,monospace;color:var(--muted);margin:0 0 6px}
.fx-view{position:relative;height:var(--h);overflow:hidden;border:1px solid var(--line);border-radius:6px;background:var(--surface)}
.fx-view iframe{position:absolute;top:0;left:0;width:var(--rw);height:calc(var(--h) / var(--s, 1));border:0;transform-origin:0 0;transform:scale(var(--s,1))}body{place-items:stretch}.legend{margin:12px 0 0;font:12px/1.6 -apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",system-ui,sans-serif;color:var(--muted)}