:root{
--drawer-width: 86vw;
--drawer-max: 420px;
--spx: 16px;
--radius: 12px;
--brand: #0c5abf;
--ink: #0e1220;
--muted: #6b7280;
--surface: #ffffff;
--shadow: 0 6px 24px rgba(0,0,0,.12);
}


/* コンテナ/オーバーレイ */
.drawer-container{position:fixed;inset:0;z-index:9999;visibility:hidden;opacity:0;transition:opacity .18s ease-out}
.drawer-overlay{position:absolute;inset:0;background:rgba(10,14,25,.28);backdrop-filter:blur(4px);}


/* パネル */
.drawer-menu{position:absolute;top:0;right:0;height:100%;width:var(--drawer-width);max-width:var(--drawer-max);background:var(--surface);box-shadow:var(--shadow);transform:translateX(8%);opacity:.98;display:flex;flex-direction:column;}


/* ヘッダー */
.drawer-header{display:flex;align-items:center;justify-content:space-between;padding:20px var(--spx) 12px;border-bottom:1px solid rgba(0,0,0,.06)}
.drawer-header h2{margin:0;font-size:18px;letter-spacing:.02em;color:var(--ink)}
.drawer-header-right{display:flex;gap:8px;align-items:center}
.drawer-close-btn{appearance:none;border:0;background:transparent;font-size:24px;line-height:1;padding:4px 6px;border-radius:10px}
.drawer-close-btn:active{transform:scale(.96)}


/* アクション */
.drawer-actions{display:flex;gap:10px;flex-wrap:wrap;padding:10px var(--spx)}
.action-chip{display:inline-flex;align-items:center;gap:8px;padding:10px 12px;border-radius:999px;border:1px solid #e5e7eb;background:#fff;font-size:13px}
.action-chip:active{transform:scale(.98)}
.action-chip .ico{font-size:16px}


/* コンテンツ */
.drawer-content{padding:8px var(--spx) 18px var(--spx);overflow:auto}
.drawer-section{background:#fff;border:1px solid #eef1f4;border-radius:var(--radius);padding:12px 12px;margin:0 0 14px 0}
.section-title{font-size:14px;margin:0 0 8px 0;color:var(--ink)}
.section-title .sub{color:var(--muted);font-weight:400;margin-left:6px}


.link-list{list-style:none;margin:0;padding:0}
.link-list li{display:block}
.link-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;border-radius:10px;text-decoration:none;color:var(--ink)}
.link-list a .ico{opacity:.8}
.link-list a:active{transform:scale(.99)}
.link-list a:hover{background:#f6f8fb}


/* フッター */
.drawer-footer{margin-top:6px;color:#64748b;font-size:12px;text-align:center;padding:6px 0}


/* オープン状態 */
.drawer-container.is-open{visibility:visible;opacity:1}
.drawer-container.is-open .drawer-menu{transform:translateX(0)}


/* 低モーション */
@media (prefers-reduced-motion: reduce){
.drawer-container{transition:none}
.drawer-menu{transition:none}
}

/* === QR Modal === */
.qr-modal{position:fixed;inset:0;z-index:10010;display:block}
.qr-modal[hidden]{display:none}
.qr-backdrop{position:absolute;inset:0;background:rgba(10,14,25,.38);backdrop-filter:blur(4px)}
.qr-dialog{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(92vw, 360px);background:#fff;border-radius:12px;
  box-shadow:0 10px 30px rgba(0,0,0,.18);padding:16px;text-align:center
}
.qr-title{margin:0 0 10px 0;font-size:16px}
.qr-image{width:217px;height:217px;display:block;margin:8px auto 12px auto}
.qr-close{appearance:none;border:1px solid #e5e7eb;background:#fff;border-radius:10px;padding:8px 12px}
.qr-close:active{transform:scale(.98)}

/* スムーズ化 */
.drawer-menu{
  /* 既存に追加 */
  transition: transform .28s cubic-bezier(.16,1,.3,1), opacity .2s ease-out;
  will-change: transform;
}
.drawer-overlay{
  /* 透過からふわっと */
  opacity: 0;
  transition: opacity .24s cubic-bezier(.2,.8,.2,1);
  pointer-events: none; /* 閉じてる時にクリックを拾わない */
}
.drawer-container.is-open .drawer-overlay{
  opacity: 1;
  pointer-events: auto;
}
/* 初期は少し押し戻した位置から → 開時0へ */
.drawer-menu{ transform: translateX(12%); opacity:.98; }
.drawer-container.is-open .drawer-menu{ transform: translateX(0); }

/* 中身のスクロールを滑らかに（iOS） */
.drawer-content{ -webkit-overflow-scrolling: touch; }

/* 低モーション対応（既存あればOK） */
@media (prefers-reduced-motion: reduce){
  .drawer-menu, .drawer-overlay{ transition: none !important; }
}