Same content, different shape

내용은 같고 모양만 다르다

Switching packs never changes titles, descriptions or dates. Only the shape changes, so a pack can be swapped at any time.

···
html
<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=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;krds&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/krds/pack.css&quot;>
<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,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,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=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-bxkhhtcj> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-bxkhhtcj=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-bxkhhtcj> <article class=&quot;pc pc--list&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>알레르기·위생</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-dat744fk>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article> <article class=&quot;pc pc--list&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>재료·영양</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-dat744fk>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 4분</span>   </p> </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead&quot; data-astro-cid-dat744fk>   <div class=&quot;pc__body&quot; data-astro-cid-dat744fk> <p class=&quot;pc__cat&quot; data-astro-cid-dat744fk>단계별 이유식</p> <h3 class=&quot;pc__title&quot; data-astro-cid-dat744fk=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-dat744fk>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-dat744fk>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-dat744fk>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dat744fk>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-dat744fk>·</span> <span data-astro-cid-dat744fk>약 6분</span> <span aria-hidden=&quot;true&quot; 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&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>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=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;primer&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/primer/pack.css&quot;>
<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,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,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=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-nmb674xz> <div class=&quot;pl__box&quot; data-astro-cid-nmb674xz> <div class=&quot;pl__head&quot; data-astro-cid-nmb674xz> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-nmb674xz=&quot;true&quot;>함께 읽으면 좋은 글</h2> <span class=&quot;pl__counter num&quot; data-astro-cid-nmb674xz>2</span> </div> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-nmb674xz> <article class=&quot;pc pc--list&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-gluaejof>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>알레르기·위생</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;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&quot;></path><path d=&quot;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&quot;></path></g></svg>약 4분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article> <article class=&quot;pc pc--list&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-gluaejof>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>재료·영양</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;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&quot;></path><path d=&quot;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&quot;></path></g></svg>약 4분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span>  </p> </div>  </article>  </div> </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead&quot; data-astro-cid-gluaejof>  <div class=&quot;pc__body&quot; data-astro-cid-gluaejof> <h3 class=&quot;pc__title&quot; data-astro-cid-gluaejof=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-gluaejof>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-gluaejof>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-gluaejof> <span class=&quot;pc__label&quot; data-astro-cid-gluaejof>단계별 이유식</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;14&quot; height=&quot;14&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;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&quot;></path><path d=&quot;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&quot;></path></g></svg>약 6분
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof> <time datetime=&quot;2026-10-13&quot; data-astro-cid-gluaejof>2026.10.13</time> 업데이트
</span> <span class=&quot;pc__item&quot; data-astro-cid-gluaejof>기관 자료 6곳</span> </p> </div>  </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>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=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;carbon&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/carbon/pack.css&quot;>
<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,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,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=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pl&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-kq2jqgu2> <h2 class=&quot;pl__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-kq2jqgu2=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pl__list pl__list--list&quot; data-astro-cid-kq2jqgu2> <article class=&quot;pc pc--list&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>알레르기·위생</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-xcemhkav>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span>   </p>  </div> </article> <article class=&quot;pc pc--list&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>재료·영양</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-xcemhkav>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 4분</span>   </p>  </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pc pc--list pc--lead pc--tile&quot; data-astro-cid-xcemhkav>   <div class=&quot;pc__body&quot; data-astro-cid-xcemhkav> <p class=&quot;pc__cat&quot; data-astro-cid-xcemhkav>단계별 이유식</p> <h3 class=&quot;pc__title&quot; data-astro-cid-xcemhkav=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-xcemhkav>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pc__desc&quot; data-astro-cid-xcemhkav>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pc__meta num&quot; data-astro-cid-xcemhkav> <time datetime=&quot;2026-10-13&quot; data-astro-cid-xcemhkav>2026.10.13</time> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>약 6분</span> <span aria-hidden=&quot;true&quot; data-astro-cid-xcemhkav>·</span> <span data-astro-cid-xcemhkav>기관 자료 6곳</span> </p> <svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;20&quot; height=&quot;20&quot; viewBox=&quot;0 0 32 32&quot; fill=&quot;none&quot; class=&quot;pc__arrow&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;currentColor&quot;><path d=&quot;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&quot;></path></g></svg> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>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=&quot;&quot; lang=&quot;ko&quot; data-design-system=&quot;shadcn&quot;><head><meta charset=&quot;utf-8&quot;>
<meta name=&quot;viewport&quot; content=&quot;width=device-width,initial-scale=1&quot;>
<link rel=&quot;stylesheet&quot; href=&quot;/packs/shadcn/pack.css&quot;>
<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,&quot;Apple SD Gothic Neo&quot;,&quot;Malgun Gothic&quot;,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=&quot;dsx dsx--one&quot;><div class=&quot;container gx-measure&quot;> <section class=&quot;pls&quot; aria-labelledby=&quot;c-PostCard-list&quot; data-astro-cid-bqekhtub> <h2 class=&quot;pls__title&quot; id=&quot;c-PostCard-list&quot; data-astro-cid-bqekhtub=&quot;true&quot;>함께 읽으면 좋은 글</h2> <div class=&quot;pls__list pls__list--list&quot; data-astro-cid-bqekhtub> <article class=&quot;pk pk--list&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>알레르기·위생</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-allergy/&quot; data-astro-cid-dfgbqoqn>이유식 알레르기 반응, 증상과 대처법 한눈에</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식 알레르기 반응은 대개 먹고 몇 분에서 2시간 안에 두드러기·구토·입술 부기로 나타나요. 바로 119가 필요한 신호와 지켜보며 상담할 신호, 기록하는 법을 질병관리청·NHS 자료로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span>  </p>  </div> </article> <article class=&quot;pk pk--list&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>재료·영양</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-ingredient-order/&quot; data-astro-cid-dfgbqoqn>이유식 재료 순서와 시기, 한 가지씩 며칠 지켜봐요</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식 재료에 꼭 지켜야 할 순서는 없어요. 쌀미음으로 시작해 철분 식품을 일찍 더하고, 새 재료는 한 가지씩 며칠 지켜보면 돼요. 재료별 시기와 먹이는 형태를 표로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; data-astro-cid-dfgbqoqn>2026.10.13</time> <span data-astro-cid-dfgbqoqn>약 4분</span>  </p>  </div> </article>  </div> </section>  <div class=&quot;gx-lead&quot;><article class=&quot;pk pk--list pk--card pk--lead&quot; data-astro-cid-dfgbqoqn>   <div class=&quot;pk__body&quot; data-astro-cid-dfgbqoqn> <p class=&quot;pk__cat&quot; data-astro-cid-dfgbqoqn>단계별 이유식</p> <h3 class=&quot;pk__title&quot; data-astro-cid-dfgbqoqn=&quot;true&quot;> <a href=&quot;/baby-food-stages-guide/&quot; data-astro-cid-dfgbqoqn>이유식 단계별 가이드, 첫 숟가락부터 돌 이후까지 한눈에</a> </h3> <p class=&quot;pk__desc&quot; data-astro-cid-dfgbqoqn>이유식은 보통 생후 약 6개월에 시작해 12개월 무렵 가족 식사로 넘어가요. 단계별 횟수·질감·양, 재료 도입 순서와 위생 원칙을 질병관리청·WHO 자료로 정리했어요.</p> <p class=&quot;pk__meta num&quot; data-astro-cid-dfgbqoqn>  <time datetime=&quot;2026-10-13&quot; 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=&quot;pk__go&quot; aria-hidden=&quot;true&quot; data-astro-cid-dfgbqoqn>
읽어 보기
<svg xmlns=&quot;http://www.w3.org/2000/svg&quot; width=&quot;16&quot; height=&quot;16&quot; viewBox=&quot;0 0 24 24&quot; fill=&quot;none&quot; aria-hidden=&quot;true&quot; focusable=&quot;false&quot;><g fill=&quot;none&quot; stroke=&quot;currentColor&quot; stroke-width=&quot;2&quot; stroke-linecap=&quot;round&quot; stroke-linejoin=&quot;round&quot;><path d=&quot;M5 12h14&quot; ></path> <path d=&quot;m12 5 7 7-7 7&quot; ></path></g></svg> </p> </div> </article> </div> </div></main><script>document.addEventListener('click',function(e){var a=e.target.closest&amp;&amp;e.target.closest('a[href]');if(a&amp;&amp;a.getAttribute('href').charAt(0)!=='#')e.preventDefault();});</script><script type=&quot;module&quot;>try{document.documentElement.className=parent.document.documentElement.className}catch(e){}</script></body></html>"></iframe></div></figure></div><p class="legend">점선 안(제목과 설명)은 네 팩이 똑같은 글자예요. 달라지는 건 분류 이름의 자리, 구분 선, 간격, 글자 굵기 같은 모양이에요.</p>
css
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)}
js
const fit=()=>document.querySelectorAll('.fx-view').forEach(v=>{v.style.setProperty('--s',Math.min(1,v.clientWidth/390))});fit();new ResizeObserver(fit).observe(document.body);

The four packs draw the same 20 components in their own way, but a page never knows which pack it is built with. The page finishes the work of computing post lists, dates and links, and hands finished values to the pack. The pack only decides how to show what it receives.

A few rules keep that true. The shape of what each component receives lives in one place, the source contracts.ts, and registry.test.ts checks that every pack file uses that shape unchanged. One build contains only the chosen pack’s code, so styles from other packs never mix in. The demo above is the result: four packs drew the same post card, and the text inside the dotted lines is identical.

That is what makes picking a pack low-risk. If you dislike it, change one pack setting and rebuild; nothing has to be rewritten or moved. Content that appears in only one pack would break this promise.

When to use

Think of it when you notice text that appears in only one pack, or when you are adding a component and are tempted to put extra information in just one pack. Add information to all four packs or none.

Open as page ↗

Suggest an entry

Tell us about a missing component or variant, or something a pack should fix. We read every suggestion.