<!-- 자세히보기: HTML 네이티브 <details>/<summary> 접기/펼치기 -->
<!--
  📋 details-block
  ─────────────────
  용도: 상세 데이터(비교표, 스펙 등)를 접어서 표시. 클릭하면 펼침.
  슬롯: summary_text (필수), detail_content (필수), label (선택)
  원칙: 본문 흐름을 끊지 않으면서 상세 정보 제공
  인쇄: window.onbeforeprint에서 자동 펼침 (slide-base.html의 JS)
-->
<details class="block-details">
    <summary class="dt-summary">
        {% if label %}<span class="dt-label">{{ label }}</span>{% endif %}
        <span class="dt-summary-text">{{ summary_text }}</span>
    </summary>
    <div class="dt-content">{{ detail_content }}</div>
</details>

<style>
.block-details {
    background: var(--color-bg-subtle);
    border: var(--border-width) solid var(--color-border);
    border-left: var(--accent-border) solid var(--color-accent);
    border-radius: 0 var(--radius) var(--radius) 0;
    overflow: hidden;
}
.dt-summary {
    padding: var(--spacing-inner) var(--spacing-block);
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: var(--spacing-small);
    font-size: var(--font-body);
    font-weight: var(--weight-medium);
    color: var(--color-text);
    line-height: var(--line-height-ko);
    list-style: none;
}
.dt-summary::-webkit-details-marker {
    display: none;
}
.dt-summary::before {
    content: "▶";
    font-size: var(--font-caption);
    color: var(--color-accent);
    transition: none;
}
details[open] .dt-summary::before {
    content: "▼";
}
.dt-label {
    font-size: var(--font-caption);
    font-weight: var(--weight-bold);
    color: var(--color-accent);
    white-space: nowrap;
}
.dt-summary-text {
    word-break: keep-all;
}
.dt-content {
    padding: 0 var(--spacing-block) var(--spacing-inner) var(--spacing-block);
    font-size: var(--font-body);
    color: var(--color-text);
    line-height: var(--line-height-ko);
    word-break: keep-all;
    border-top: var(--border-width) solid var(--color-border);
}
</style>
