/* 목업 37판 시트(<dialog class="sheet">)와 '예시' 알림 — 모든 화면 공용, 7번 계약 파일(에이전트는 고치지 않고 필요한 것은 보고).
   여는 단추: <a href="(스크립트 없을 때 갈 화면)" data-dialog-open="시트 id"> · 닫기: <button type="button" data-dialog-close>.
   예시 견본: 누를 수 있는 요소에 data-example → 누르면 '아직 예시예요' 알림만 뜨고 이동·저장하지 않는다(live.js). */
dialog.sheet { position: fixed; inset: auto 0 0 0; width: min(100%, 480px); max-width: none; max-height: 86vh; margin: 0 auto; border: 0; padding: 0 var(--sp-4, 16px) var(--sp-5, 24px); background: var(--bg, #fff); color: var(--ink, #111); border-radius: var(--radius, 12px) var(--radius, 12px) 0 0; box-shadow: var(--shadow-float, 0 8px 24px rgba(17,17,17,.12)); overflow-y: auto; }
dialog.sheet::backdrop { background: rgba(17, 17, 17, 0.4); }
dialog.sheet[open] { display: grid; gap: var(--sp-3, 12px); align-content: start; }
@media (prefers-reduced-motion: no-preference) { dialog.sheet[open] { animation: sheet-up .22s ease-out; } }
@keyframes sheet-up { from { transform: translateY(24px); opacity: 0; } }
.sheet-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2, 8px); background: var(--bg, #fff); padding: var(--sp-3, 12px) 0 var(--sp-2, 8px); }
.sheet-h { font-size: var(--fs-title, 1.125rem); font-weight: var(--fw-bold, 700); margin: 0; }
.sheet-h:focus { outline: none; }
.example-toast { position: fixed; left: 50%; bottom: var(--sp-5, 24px); transform: translateX(-50%); z-index: 50; max-width: calc(100% - 32px); padding: var(--sp-3, 12px) var(--sp-4, 16px); border-radius: var(--radius, 12px); background: var(--ink, #111); color: var(--bg, #fff); font-size: var(--fs-caption, .8125rem); }

/* 반응형 웹(RW1): 휴대폰(767px 이하)은 위의 '아래에서 올라오는 시트' 그대로. 태블릿 768px 이상은 화면 가운데 뜨는 창(최대 560px, 모서리 사방 둥글게). */
@media (min-width: 768px) {
  dialog.sheet { inset: 0; width: min(560px, calc(100% - 2 * var(--page-gutter, 24px))); height: fit-content; max-height: min(86vh, 720px); margin: auto; padding: 0 var(--sp-5, 24px) var(--sp-5, 24px); border-radius: var(--radius, 12px); }
}