/* =====================================================================
   Curriculum Bridge 公開サイト 共通テーマ
   公式DS（panolabo-ds.css, data-world="panolabo" data-scheme="light"）への
   上書き＋公開サイト用の共通パーツ。
   ===================================================================== */

/* world=panolabo の primary を紺に（accent橙 #ea580c はDS既定のまま） */
[data-world="panolabo"][data-scheme="light"]{ --c-primary:#1e3a8a; }

/* お知らせバー（最上部固定・準備中の明示） */
.site-notice{position:fixed;top:0;left:0;right:0;height:30px;display:flex;align-items:center;justify-content:center;background:var(--c-primary);color:#fff;font-size:11px;letter-spacing:.08em;font-weight:700;z-index:50;overflow:hidden;white-space:nowrap;}
@media(max-width:640px){.site-notice{font-size:9px;letter-spacing:0;}}

/* 橙アクセント拡張（公式DS本体外の拡張・1箇所に集約） */
.ds-btn-accent{background:var(--c-accent);color:#fff;border-color:var(--c-accent);}
.ds-btn-accent:hover{opacity:.9;color:#fff;}
.ds-badge-accent{background:color-mix(in srgb,var(--c-accent) 14%,transparent);color:var(--c-accent);}

/* ===== レイアウト共通 ===== */
.ds-app{padding-top:0;}
.ds-sidebar{top:30px;}
.ds-topbar{top:30px;}
section[id]{scroll-margin-top:96px;margin-bottom:36px;}
h2.sec{font-size:var(--w-font-size-xl);font-weight:800;color:var(--c-primary);margin:0 0 6px;border-left:4px solid var(--c-accent);padding-left:12px;line-height:1.4;}
.sec-lead{color:var(--c-text-muted);font-size:var(--w-font-size-sm);margin:0 0 14px;}
.card-title{font-size:var(--w-font-size-lg);font-weight:700;margin:4px 0;}
.card-desc{color:var(--c-text-muted);font-size:var(--w-font-size-sm);margin:6px 0 12px;line-height:1.7;}
.card-links{display:flex;gap:16px;align-items:center;flex-wrap:wrap;}
.ds-card{margin-bottom:12px;}
.note{background:color-mix(in srgb,var(--c-primary) 6%,transparent);border-left:3px solid var(--c-primary);border-radius:0 8px 8px 0;padding:12px 16px;font-size:var(--w-font-size-sm);margin:0 0 22px;line-height:1.7;}
.note.accent{background:color-mix(in srgb,var(--c-accent) 7%,transparent);border-left-color:var(--c-accent);}
.note b{color:var(--c-primary);}

/* ===== 横長テーブルの溢れ対策 ===== */
.ds-table-wrap{overflow-x:auto;}
/* ===== 防御線: 擬似要素はみ出し等で水平スクロールが出ないように ===== */
html,body{overflow-x:hidden;}

@media print{
  @page{size:A4 portrait;margin:14mm;}
  .site-notice,.ds-sidebar,.ds-topbar{display:none !important;}
  .ds-main{margin-left:0;}
  .ds-card{break-inside:avoid;}
}

/* ===== サイドバーなし・単一ページ構成 ===== */
.ds-sidebar { display: none !important; }
.ds-main { margin-left: 0 !important; }

/* カード型メニュー */
.menu-cat { margin-top: 26px; }
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.menu-card { display: block; border: 1px solid var(--c-border); border-radius: 10px; padding: 12px 14px; background: var(--c-bg-card); text-decoration: none; transition: border-color .12s, background .12s; }
.menu-card:hover { border-color: var(--c-accent); background: var(--c-bg-hover); }
.menu-card .mc-t { font-size: 13.5px; font-weight: 700; color: var(--c-primary); margin-bottom: 3px; }
.menu-card .mc-d { font-size: 11.5px; color: var(--c-text-muted); line-height: 1.55; }
.menu-featured { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 12px; margin: 18px 0 10px; }
.mf-card { position: relative; display: flex; flex-direction: column; border: 1px solid var(--c-border); border-radius: 14px; padding: 18px; background: linear-gradient(152deg, color-mix(in srgb, var(--c-primary) 7%, transparent), color-mix(in srgb, var(--c-accent) 6%, transparent)); text-decoration: none; transition: border-color .12s, transform .12s, box-shadow .12s; }
.mf-card:hover { border-color: var(--c-accent); transform: translateY(-2px); box-shadow: 0 6px 20px color-mix(in srgb, var(--c-primary) 10%, transparent); }
.mf-eyebrow { font-size: 10px; letter-spacing: .14em; font-weight: 700; color: var(--c-accent); text-transform: uppercase; margin-bottom: 6px; }
.mf-title { font-size: 16.5px; font-weight: 800; color: var(--c-primary); line-height: 1.35; margin-bottom: 7px; }
.mf-desc { font-size: 12px; color: var(--c-text-muted); line-height: 1.6; }
.menu-cat > h3 { display: flex; align-items: center; gap: 11px; font-size: 15.5px; color: var(--c-primary); font-weight: 800; margin: 0 0 2px; }
.menu-cat > h3 .num { display: inline-flex; align-items: center; justify-content: center; width: 27px; height: 27px; border-radius: 8px; background: var(--c-accent); color: #fff; font-size: 14px; font-weight: 800; flex: none; }
.menu-cat .cat-why { font-size: 11.5px; color: var(--c-text-muted); margin: 0 0 11px 38px; }

/* ヘッダ */
.ds-topbar { min-height: 54px; height: auto; gap: 0; backdrop-filter: saturate(1.1); flex-wrap: wrap; align-items: center; padding-top: 8px; padding-bottom: 8px; row-gap: 0; }
.ds-brand { display: inline-flex; align-items: baseline; gap: 8px; text-decoration: none; margin-right: 16px; padding-right: 16px; border-right: 1px solid var(--c-border); white-space: nowrap; }
.ds-brand .bd-name { font-size: 13.5px; font-weight: 800; letter-spacing: .04em; color: var(--c-primary); }
.ds-brand .bd-sub { font-size: 10px; color: var(--c-text-muted); letter-spacing: .02em; }
.ds-brand:hover .bd-name { color: var(--c-accent); }
@media (max-width: 680px) { .ds-brand .bd-sub { display: none; } .ds-brand { padding-right: 12px; margin-right: 12px; } }
.ds-topbar .ds-brand { order: 1; }
.ds-topbar .ds-topbar-title { order: 2; }
.ds-topbar .ds-topbar-right { order: 3; margin-left: auto; }

/* トップへ戻る（固定） */
.to-top { position: fixed; right: 22px; bottom: 22px; z-index: 60; display: inline-flex; align-items: center; gap: 6px; background: var(--c-accent); color: #fff; text-decoration: none; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 10px 16px; box-shadow: 0 6px 18px color-mix(in srgb, var(--c-primary) 22%, transparent); transition: transform .12s, box-shadow .12s; }
.to-top:hover { transform: translateY(-2px); box-shadow: 0 9px 24px color-mix(in srgb, var(--c-primary) 30%, transparent); }
@media print { .to-top { display: none !important; } }