/* ============================================================
   Drawer — ナビゲーションドロワー（横から）
   下からの Bottom Sheet に対し、これは横から滑り込むナビ面。
   scrim＋影（物理的に浮く面の例外）。現在地は署名色の左罫＝選択の核。
   Escape・scrim・項目選択で閉じる。配線は js/catalog.js。
   デモは枠内に収めるため、frame を相対配置の擬似ビューポートにする。
   ============================================================ */

.drawer-frame {
  position: relative; overflow: hidden;
  width: 320px; max-width: 100%; height: 360px;
  background: var(--paper); border: 1px solid var(--page-line);
  border-radius: var(--radius-surface);
}
.df-top { display: flex; align-items: center; padding: 15px 18px; border-bottom: 1px solid var(--page-line); }
.df-burger { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .1em; font-weight: 700; color: var(--cta); }
.df-burger svg { width: 18px; height: 18px; }
.df-body { padding: 16px 18px; font-size: 13px; color: var(--ash); line-height: 1.8; }

.drawer-scrim {
  position: absolute; inset: 0; z-index: 1;
  background: color-mix(in srgb, var(--ink) 30%, transparent);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-mid) var(--ease);
}
.drawer-frame.open .drawer-scrim { opacity: 1; pointer-events: auto; }

.drawer {
  position: absolute; top: 0; bottom: 0; left: 0; z-index: 2;
  width: 244px; max-width: 85%;
  background: var(--surface); border-right: 1px solid var(--line);
  box-shadow: var(--shadow-float);
  transform: translateX(-100%); transition: transform var(--dur-mid) var(--ease);
  display: flex; flex-direction: column; padding: 22px 0 12px;
}
.drawer-frame.open .drawer { transform: translateX(0); }

.drawer .dh { padding: 0 20px 14px; }
.drawer .dh .logo { font-family: var(--font-serif); font-size: 17px; font-weight: 600; letter-spacing: .06em; color: var(--ink); }
.drawer .dh .logo .dot { color: var(--brand); }
.drawer .dh .breath { width: 24px; height: 1.5px; background: var(--brand); margin-top: 9px; }

.drawer .di {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 12px 20px; font-size: 14px; color: var(--ink); text-align: left;
  transition: background var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.drawer .di:hover, .drawer .di:focus-visible { background: color-mix(in srgb, var(--ink) 5%, transparent); }
.drawer .di svg { width: 18px; height: 18px; color: var(--ash); flex: none; }
/* 現在地＝選択の核（署名色の左罫） */
.drawer .di[aria-current="page"] { color: var(--brand); font-weight: 700; box-shadow: inset 3px 0 0 var(--brand); }
.drawer .di[aria-current="page"] svg { color: var(--brand); }