/* ===================================================================================================
   <project-detail> 안으로 들어온 문서 본문을 kb-app 의 카드 규격에 맞춘다.

   좌우 여백과 세로 간격은 이 파일이 정하지 않는다 — 본문이 .pd-secs(kb-app 과 같은 밴드)
   안에 있으므로 그쪽 padding/gap 을 그대로 쓴다. 그래야 Overview 카드와 아래 섹션의
   여백·간격이 정확히 같다. 여기서는 그 밴드의 flex 자식이 되도록 다듬기만 한다.

   ⚠️ 문서의 style.css 보다 **먼저** 불러야 한다 (문서 고유 규칙이 이겨야 하는 곳이 있다).
   =================================================================================================== */

/* .work-container 의 박스를 지워서 그 안의 섹션들이 .pd-secs 의 직계 flex 자식이 되게 한다.
   그래야 섹션 사이에 밴드의 gap 이 그대로 적용된다 (래퍼가 남으면 gap 이 래퍼 하나에만 걸린다).
   DOM 에서 사라지는 게 아니라 박스만 없어지므로 .onnuri .section01 같은 자손 선택자는 그대로다. */
/* ⚠️ 클래스를 두 번 적어 특이도를 올린다 — dap 의 style.css 에 `.work-container.dap{display:flex}`
   가 있고, 이 파일이 style.css 보다 **먼저** 로드되므로 같은 특이도면 그쪽이 이긴다.
   실제로 dap 만 섹션 사이 간격이 0 이었다. */
.pd-secs > .work-container.work-container {
  display: contents;
}

/* 각 섹션을 kb-app 의 .pd-sec 과 같은 카드로 — 바깥 여백 제거 + 같은 라운드 */
.pd-secs > .work-container > * {
  margin: 0;
  border-radius: calc(16 * var(--p) + 5.7143 * var(--dt));
  overflow: hidden;
}
@media (max-width: 1023px) {
  .pd-secs > .work-container > * {
    border-radius: 16px;
  }
}

/* ⚠️ <img> 의 width/height 속성은 "표현 힌트(presentational hint)" 라서 CSS 처럼 먹는다.
   비율만 알려 주려고 넣었는데(자리 예약 → CLAUDE.md 23번의 lazy 교착 방지),
   문서 CSS 가 width 만 정해 둔 이미지에서는 height 힌트가 그대로 살아남아 늘어난다.
   실제로 onnuri 의 아이콘들이 48x48 -> 48x96 이 되면서 문서가 865px 길어졌다.

   그래서 힌트의 height 만 무력화한다. 문서 CSS 가 height 를 직접 정했다면
   선택자 특이도가 높아 그쪽이 이기므로 영향이 없다. */
img[width][height] {
  height: auto;
}