/* KMK (業務・現場) テーマ — オレンジ系（工場・現場感） */
:root {
  --kmk-theme:  #ea580c;
  --kmk-deep:   #c2410c;
  --kmk-soft:   #fdba74;
  --kmk-bg:     #fff7ed;
}

body[data-app="kmk"] .sidebar-logo-text {
  background: linear-gradient(135deg, var(--kmk-deep), var(--kmk-theme), var(--kmk-soft));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  font-family: 'Orbitron', 'Audiowide', sans-serif;
  font-weight: 800;
  letter-spacing: 0.10em;
}
body[data-app="kmk"] #sidebar {
  border-right: 4px solid var(--kmk-theme) !important;
  background: linear-gradient(180deg, #fff7ed 0%, #ffffff 200px) !important;
  position: fixed !important;
  top: 0; left: 0; bottom: 0;
  width: 240px !important;
  z-index: 100;
  overflow-y: auto !important;
}
body[data-app="kmk"] {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif !important;
}
body[data-app="kmk"] .main-content {
  margin-left: 240px !important;
  min-height: 100vh !important;
  width: calc(100% - 240px) !important;
  padding: 0 !important;
}
body[data-app="kmk"] .stats-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
  gap: 12px;
  margin-bottom: 16px;
}
body[data-app="kmk"] .stat-card.is-violet  { border-left: 3px solid #7c3aed; }
body[data-app="kmk"] .stat-card.is-amber   { border-left: 3px solid #f59e0b; }
body[data-app="kmk"] .stat-card.is-emerald { border-left: 3px solid #10b981; }
body[data-app="kmk"] .stat-card.is-rose    { border-left: 3px solid #f43f5e; }
body[data-app="kmk"] .stat-icon-indigo  { color: #4f46e5 !important; background: rgba(99,102,241,0.12) !important; }
body[data-app="kmk"] .stat-icon-warning { color: #d97706 !important; background: rgba(245,158,11,0.12) !important; }
body[data-app="kmk"] .lp-quickbar { display: flex; gap: 8px; flex-wrap: wrap; padding: 12px; align-items: center; }
body[data-app="kmk"] .kbtn, body[data-app="kmk"] .kbtn-toggle {
  padding: 6px 12px; border: 1px solid #e5e7eb; background: white; border-radius: 6px;
  cursor: pointer; font-size: 13px; display: inline-flex; align-items: center; gap: 6px;
}
body[data-app="kmk"] .kbtn-blue { background: #1a73e8 !important; color: white !important; border-color: #1a73e8 !important; }
body[data-app="kmk"] .kbtn-light { background: #f8fafc; }
body[data-app="kmk"] .kbtn-toggle-dot, body[data-app="kmk"] .lp-sync-dot {
  display: inline-block !important; width: 8px !important; height: 8px !important;
  border-radius: 50% !important; background: #94a3b8 !important; flex-shrink: 0;
}
body[data-app="kmk"] .kbtn svg, body[data-app="kmk"] .kbtn-toggle svg {
  width: 14px !important; height: 14px !important;
}

/* 検索 / 並び替えパネルをデフォルト非表示 → ボタンで .open クラスが付くとポップアップ */
body[data-app="kmk"] #searchPanel {
  display: none !important;
}
body[data-app="kmk"] #searchPanel.open {
  display: block !important;
  position: fixed !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background: white !important;
  padding: 28px 32px !important;
  border-radius: 12px !important;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.3) !important;
  z-index: 1000 !important;
  width: min(820px, 92vw) !important;
  max-height: 82vh !important;
  overflow-y: auto !important;
}
/* 背景オーバーレイ (擬似要素) */
body[data-app="kmk"] #searchPanel.open::before {
  content: '';
  position: fixed; inset: 0;
  background: rgba(15, 23, 42, 0.35);
  z-index: -1;
}
/* バツボタン (検索パネル内の閉じる) */
body[data-app="kmk"] #searchPanel .panel-close,
body[data-app="kmk"] #searchPanel button[onclick*="searchPanel"] {
  position: absolute; top: 12px; right: 12px;
  width: 32px; height: 32px;
  background: transparent; border: 0; font-size: 22px;
  cursor: pointer; color: #6b7280;
}

/* 検索ボタンの SVG が巨大化する個別対策 */
body[data-app="kmk"] .kbtn svg,
body[data-app="kmk"] .kbtn-toggle svg,
body[data-app="kmk"] .lp-quickbar svg {
  width: 14px !important; height: 14px !important;
  flex-shrink: 0;
}

/* 既存 KMK テンプレート (cutting_list.html 等) は tablet.css 前提で
   SVG / アイコンが巨大化するため、上限を強制する */
body[data-app="kmk"] svg {
  max-width: 100% !important;
  width: 24px;
  height: 24px;
}
body[data-app="kmk"] .stat-icon {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 40px !important;
  height: 40px !important;
  border-radius: 8px;
  background: rgba(234, 88, 12, 0.1);
  color: var(--kmk-theme);
  flex-shrink: 0;
}
body[data-app="kmk"] .stat-icon svg {
  width: 22px !important;
  height: 22px !important;
}
body[data-app="kmk"] .stat-icon-success { background: rgba(34, 197, 94, 0.12); color: #16a34a; }
body[data-app="kmk"] .stat-icon-info    { background: rgba(244, 63, 94, 0.12);  color: #f43f5e; }
body[data-app="kmk"] .stat-card {
  display: flex; align-items: center; gap: 12px;
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body[data-app="kmk"] .stat-body { flex: 1; }
body[data-app="kmk"] .stat-label { font-size: 12px; color: #6b7280; }
body[data-app="kmk"] .stat-value { font-size: 24px; font-weight: 700; color: #111827; line-height: 1.2; }
body[data-app="kmk"] .stat-value-alert { color: #dc2626; }
body[data-app="kmk"] .stat-sub { font-size: 11px; color: #9ca3af; }

/* tablet.css にあった汎用クラスのフォールバック */
body[data-app="kmk"] .topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 0; border-bottom: 1px solid #e5e7eb; margin-bottom: 16px;
}
body[data-app="kmk"] .topbar-title { font-size: 20px; font-weight: 700; color: var(--kmk-deep); }
body[data-app="kmk"] .topbar-breadcrumb { font-size: 12px; color: #94a3b8; margin-bottom: 4px; }
body[data-app="kmk"] .topbar-breadcrumb-sep { margin: 0 6px; }
body[data-app="kmk"] .card {
  background: white; border: 1px solid #e5e7eb; border-radius: 12px;
  padding: 16px; box-shadow: 0 1px 3px rgba(0,0,0,.04); margin-bottom: 16px;
}
body[data-app="kmk"] .koin-nav-item:hover {
  background: rgba(234, 88, 12, 0.06);
}
body[data-app="kmk"] .koin-nav-item.active {
  background: linear-gradient(90deg, rgba(234,88,12,0.18), transparent);
  border-left: 3px solid var(--kmk-theme);
  font-weight: 600;
}

body[data-app="kmk"] .page-topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 24px; background: white; border-bottom: 2px solid var(--kmk-theme);
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
}
body[data-app="kmk"] .page-topbar-title {
  font-size: 18px; font-weight: 700; color: var(--kmk-deep);
}
body[data-app="kmk"] .page-topbar-user { display: flex; gap: 12px; align-items: center; font-size: 14px; color: #475569; }
body[data-app="kmk"] .page-topbar-user .dept { color: #94a3b8; }
body[data-app="kmk"] .logout-link { color: var(--kmk-theme); text-decoration: none; font-weight: 500; }
body[data-app="kmk"] .logout-link:hover { text-decoration: underline; }

body[data-app="kmk"] .welcome-section { padding: 32px 24px; max-width: 1080px; margin: 0 auto; }
body[data-app="kmk"] .welcome-section h1 { margin: 0 0 8px; font-size: 24px; color: var(--kmk-deep); }
body[data-app="kmk"] .muted { color: #64748b; margin: 0 0 16px; }
body[data-app="kmk"] .placeholder-card {
  background: white; border: 1px dashed #cbd5e1; border-radius: 12px;
  padding: 24px; color: #475569; line-height: 1.7;
}
body[data-app="kmk"] .placeholder-card strong { color: var(--kmk-theme); }

body[data-app="kmk"] .flash-area { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 1000; }
body[data-app="kmk"] .flash { padding: 10px 16px; border-radius: 8px; margin-bottom: 8px; background: white; border: 1px solid #e5e7eb; }
body[data-app="kmk"] .flash-danger { border-color: #ef4444; color: #991b1b; }

body[data-app="kmk"].page-login { background: linear-gradient(135deg, var(--kmk-bg) 0%, white 100%); }

/* ���O�C���O: �T�C�h�o�[��\���Ȃ̂� main-content ��S���� */
body[data-app="kmk"].no-auth .main-content {
  margin-left: 0 !important;
  width: 100% !important;
}
body[data-app="kmk"].no-auth { background: var(--kmk-bg, #f8fafc); }


/* ============================================================
   ログイン画面の共通スタイル (kmk)
   .login-wrap / .login-card / .login-logo / .login-form / 等
   ============================================================ */
body[data-app="kmk"].page-login {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
}
body[data-app="kmk"] .login-wrap {
  width: 100%;
  max-width: 560px;
  padding: 28px;
}
body[data-app="kmk"] .login-card {
  background: white;
  border-radius: 16px;
  padding: 56px 52px;
  box-shadow: 0 12px 40px rgba(15, 23, 42, 0.12),
              0 1px 0 rgba(0,0,0,0.02);
  border: 1px solid #e5e7eb;
  position: relative;
}
body[data-app="kmk"] .login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0;
  height: 5px; border-top-left-radius: 16px; border-top-right-radius: 16px;
  background: var(--kmk-theme);
}
body[data-app="kmk"] .login-logo {
  text-align: center;
  margin-bottom: 36px;
}
body[data-app="kmk"] .login-logo .login-logo-img {
  height: 64px;
  width: auto;
  max-width: 340px;
  object-fit: contain;
  margin-bottom: 14px;
  display: inline-block;
}
body[data-app="kmk"] .login-logo .logo-title {
  font-size: 42px;
  font-weight: 900;
  color: var(--kmk-theme);
  letter-spacing: 0.12em;
  line-height: 1;
  margin-bottom: 6px;
}
body[data-app="kmk"] .login-logo .logo-text {
  font-size: 18px;
  font-weight: 700;
  color: var(--kmk-deep);
  letter-spacing: 0.05em;
}
body[data-app="kmk"] .login-logo .logo-sub {
  font-size: 14px;
  color: #6b7280;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
body[data-app="kmk"] .login-form {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
body[data-app="kmk"] .login-form .field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
body[data-app="kmk"] .login-form { gap: 20px; }
body[data-app="kmk"] .login-form .field-label {
  font-size: 13px;
  color: #6b7280;
  font-weight: 600;
  letter-spacing: 0.04em;
}
body[data-app="kmk"] .login-form .field-input {
  padding: 14px 16px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 16px;
  background: white;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body[data-app="kmk"] .login-form .field-input:focus {
  border-color: var(--kmk-theme);
  box-shadow: 0 0 0 3px rgba(0,0,0,0.04);
}
body[data-app="kmk"] .login-form .btn-primary {
  background: var(--kmk-theme);
  color: white;
  border: 0;
  padding: 16px 16px;
  border-radius: 8px;
  font-size: 17px;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.08em;
  margin-top: 12px;
  transition: opacity .15s ease;
}
body[data-app="kmk"] .login-form .btn-primary:hover {
  opacity: 0.92;
}
body[data-app="kmk"] .login-hint {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  margin-top: 20px;
}


/* ログイン画面: main-content を flex center にしてカードを中央配置 */
body[data-app="kmk"].page-login .main-content,
body[data-app="kmk"].no-auth .main-content {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 0 !important;
}


/* sidebar の border-right が main-content との隙間を生まないように box-sizing 強制 */
body[data-app="kmk"] #sidebar {
  box-sizing: border-box !important;
}
body[data-app="kmk"] .main-content {
  padding: 0 !important;
}


/* CRM のサイドバーと完全に揃えるため border-right / 内側ゴールド線を撤去 */
body[data-app="kmk"] #sidebar {
  border-right: 1px solid #e5e7eb !important;  /* CRM と同じ薄ボーダー */
  box-shadow: none !important;
}
body[data-app="kmk"] #main-content {
  margin-left: var(--sidebar-w, 240px) !important;
  width: calc(100% - var(--sidebar-w, 240px)) !important;
  padding: 0 !important;
  /* margin-left は CRM 側に transition があるが width には無いため、
     折りたたみ切替時のズレ防止に width も同じカーブで遷移させる */
  transition: margin-left .2s ease, width .2s ease !important;
}

/* ══════════════════════════════════════════════════════════════
   サイドバー手動トグル
   - 上部ハンバーガーボタン (#hamburgerBtn) を全幅で表示
   - html.sidebar-collapsed が付与されたらサイドバーを 64px に圧縮
   - ラベル類は非表示、アイテムは中央寄せ
   - 状態は localStorage に保存 (cutting_list.html の同等処理を流用)
   ══════════════════════════════════════════════════════════════ */
body[data-app="kmk"] .topbar-hamburger {
  display: flex !important;
  align-items: center; justify-content: center;
}

/* 折りたたみ時: --sidebar-w を 64px に縮め、#main-content の margin が追従する */
html.sidebar-collapsed { --sidebar-w: 64px; }
html.sidebar-collapsed body[data-app="kmk"] #sidebar {
  width: 64px !important;
}
html.sidebar-collapsed body[data-app="kmk"] #main-content {
  margin-left: 64px !important;
  width: calc(100% - 64px) !important;
}
/* 折りたたみ時: ラベル類を非表示にしてアイコンだけ残す */
html.sidebar-collapsed body[data-app="kmk"] #sidebar .sidebar-logo-text,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-item > span,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-sub-label,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .bi-box-arrow-up-right,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-badge {
  display: none !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .sidebar-logo {
  justify-content: center !important;
  padding: 0 !important;
  gap: 0 !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .sidebar-logo-stack {
  align-items: center !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-item {
  justify-content: center !important;
  padding: 12px 0 !important;
  margin: 2px 6px !important;
  gap: 0 !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-item i {
  margin: 0 !important;
}
/* 折りたたみ時、開閉ボタンのアイコンを矢印に切替 (任意) */
html.sidebar-collapsed body[data-app="kmk"] .topbar-hamburger i::before {
  content: "\f284";  /* bi-list-nested 風: 視覚的に変化させる */
}

/* ══════════════════════════════════════════════════════════════
   サイドバー アコーディオン (CRM 由来)
   各セクションを koin-nav-section-btn (ボタン) + koin-nav-section (中身)
   で構成し、クリック / 該当ページの自動開閉で展開する。
   ══════════════════════════════════════════════════════════════ */
body[data-app="kmk"] .koin-nav-section-btn {
  display: flex; align-items: center; gap: 12px;
  width: calc(100% - 16px);
  margin: 1px 8px;
  padding: 9px 12px;
  border: none;
  background: transparent;
  border-radius: 8px;
  font-size: 13px; font-weight: 600;
  color: var(--c-text-2, #4b5563);
  cursor: pointer;
  text-align: left;
  transition: background .15s, color .15s;
  white-space: nowrap;
}
body[data-app="kmk"] .koin-nav-section-btn i:first-child {
  font-size: 16px; width: 22px; flex-shrink: 0; text-align: center;
}
body[data-app="kmk"] .koin-nav-section-btn > span { flex: 1; }
body[data-app="kmk"] .koin-nav-section-btn:hover {
  background: var(--kmk-bg, #fff7ed);
  color: var(--c-text, #111827);
}
body[data-app="kmk"] .koin-nav-section-btn.expanded {
  color: var(--c-text, #111827);
}
body[data-app="kmk"] .section-chevron {
  font-size: 11px !important;
  transition: transform .2s;
  color: var(--c-text-3, #9ca3af) !important;
  width: auto !important;
}
body[data-app="kmk"] .koin-nav-section-btn.expanded .section-chevron {
  transform: rotate(-180deg);
}
body[data-app="kmk"] .koin-nav-section {
  overflow: hidden;
  max-height: 0;
  transition: max-height .25s ease;
}
body[data-app="kmk"] .koin-nav-section.open {
  /* 子メニュー最大 12 件程度を見込んだ高さ。超える場合は overflow が効くため
     ピクセル指定でも実害は無い (内部スクロールはサイドバー全体の overflow:auto に委ねる) */
  max-height: 720px;
}
body[data-app="kmk"] .koin-nav-subhead {
  font-size: 10px; font-weight: 600;
  color: #94a3b8; letter-spacing: 0.06em;
  padding: 8px 12px 4px 28px;
  text-transform: uppercase;
}

/* 折りたたみ (sidebar-collapsed) 時の挙動:
   アコーディオンセクションの「ラベル / chevron / 中身」は全部隠して、
   セクションボタンのアイコンだけが横並びに見えるようにする */
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-section-btn > span,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .section-chevron,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-section,
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-subhead {
  display: none !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-section-btn {
  justify-content: center !important;
  padding: 12px 0 !important;
  margin: 2px 6px !important;
  gap: 0 !important;
}
html.sidebar-collapsed body[data-app="kmk"] #sidebar .koin-nav-section-btn i:first-child {
  margin: 0 !important;
}

/* ============================================================
   タッチデバイス向けスケール拡大 (タブレット最適化)
   ─ KMK のテンプレートは PC とタブレットで同じ HTML/CSS を使う設計
     (デバイス判定なし)。現状 px ベースで字が小さく、タブレット現場で
     読みづらいので、`pointer: coarse` を発火条件にして CSS zoom で
     全体を一段拡大する。
   ─ pointer:coarse は iPad / Android タブレット / Surface タッチで true。
     マウス PC では false なので PC の高密度表示は維持される。
   ─ zoom は iOS Safari / Chrome / Edge / Firefox 126+ で動作。
     未対応ブラウザ向けに body font-size の上書きも併用する。
   ─ ユーザー要望: 「現状だとタブレットで文字が小さすぎる」
   ============================================================ */
@media (pointer: coarse) {
  body[data-app="kmk"] {
    /* レイアウト計算ごと 1.12 倍 (約 +12%) — Modern Admin の左 sidebar /
       topbar / カードグリッド構造が崩れない範囲で最大化 */
    zoom: 1.12;
    /* fallback: zoom が効かないブラウザでも body 子要素の inherit に効く */
    font-size: 17px;
  }
  /* テーブル系の小さい text-muted / フッタ 等は zoom だけだと相対的に
     まだ小さく見えるので、もう一段 bump */
  body[data-app="kmk"] .text-muted,
  body[data-app="kmk"] .small,
  body[data-app="kmk"] small,
  body[data-app="kmk"] .stat-label,
  body[data-app="kmk"] .stat-sub,
  body[data-app="kmk"] .topbar-breadcrumb,
  body[data-app="kmk"] .lp-table-foot,
  body[data-app="kmk"] .table-foot,
  body[data-app="kmk"] .lp-pager-info,
  body[data-app="kmk"] .juchu-issue,
  body[data-app="kmk"] .th-sub,
  body[data-app="kmk"] .due-sub,
  body[data-app="kmk"] .qty-sub,
  body[data-app="kmk"] .shape-sub,
  body[data-app="kmk"] .cust-nounyu,
  body[data-app="kmk"] .alloc-badge {
    font-size: 13px !important;
  }
  /* 業務テーブルの本体テキスト */
  body[data-app="kmk"] .lp-table,
  body[data-app="kmk"] .lp-table td,
  body[data-app="kmk"] .lp-table th,
  body[data-app="kmk"] table.table td,
  body[data-app="kmk"] table.table th {
    font-size: 15px;
  }
  /* タッチターゲットを 44×44 以上に (Apple HIG / WCAG 2.5.5 推奨) */
  body[data-app="kmk"] .btn,
  body[data-app="kmk"] button.btn,
  body[data-app="kmk"] .form-control,
  body[data-app="kmk"] .form-select,
  body[data-app="kmk"] input[type="text"],
  body[data-app="kmk"] input[type="number"],
  body[data-app="kmk"] input[type="date"],
  body[data-app="kmk"] input[type="search"],
  body[data-app="kmk"] select,
  body[data-app="kmk"] textarea {
    min-height: 44px;
  }
  /* テーブル内の小ボタン (詳細遷移等) は min-height 緩和 — 親 zoom で
     十分大きくなるため、二重拡大すると行が崩れる */
  body[data-app="kmk"] td .btn,
  body[data-app="kmk"] td button.btn,
  body[data-app="kmk"] .lp-row .btn,
  body[data-app="kmk"] .row-machine-select {
    min-height: 0;
  }

  /* ──────────────────────────────────────────────────────────
     サイドバーを Overlay 化 (タブレット運用)
     ─ サイドバーは default 画面外にスライドアウト
     ─ ハンバーガークリックで .open が付き、画面に被さって表示
     ─ #main-content はサイドバーの幅に依存せず full 幅
     ─ ナビ項目クリックで自動 close (JS 側)
     ────────────────────────────────────────────────────────── */
  body[data-app="kmk"] #sidebar {
    position: fixed !important;
    top: 0; left: 0; bottom: 0;
    width: 260px !important;            /* オーバーレイ展開時の幅 */
    z-index: 1050 !important;
    transform: translateX(-100%);
    transition: transform 0.22s ease-out;
    box-shadow: none;
  }
  body[data-app="kmk"] #sidebar.open {
    transform: translateX(0);
    box-shadow: 2px 0 16px rgba(0, 0, 0, 0.25);
  }
  /* オーバーレイの暗幕 (sidebar.open と同期) */
  body[data-app="kmk"] .sidebar-overlay {
    position: fixed; inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 1040;
    display: none;
  }
  body[data-app="kmk"] .sidebar-overlay.active {
    display: block;
  }
  /* main-content をフル幅に (サイドバー幅マージン解除) */
  body[data-app="kmk"] #main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* topbar もフル幅に: polish.css で header.koin-header は
     position:fixed + left:var(--sidebar-w)(240px/畳み時64px) で固定される。
     オーバーレイ時はサイドバーが画面外なので left を 0 に戻さないと、
     上部に幅ぶんの空白帯が残る (本文は全幅なのに topbar だけ右にずれる)。 */
  body[data-app="kmk"] header.koin-header {
    left: 0 !important;
  }
  /* sidebar-collapsed クラスはタブレットでは効かせない (overlay モード優先) */
  html.sidebar-collapsed body[data-app="kmk"] #sidebar {
    width: 260px !important;
  }
  html.sidebar-collapsed body[data-app="kmk"] #main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  /* ハンバーガーを左上に常時可視 (画面幅問わず表示) */
  body[data-app="kmk"] .topbar-hamburger {
    display: inline-flex !important;
  }
}

/* ============================================================
   保険: 非タッチ端末で幅を狭めた場合 (<=768px, pointer:coarse でない)
   ------------------------------------------------------------
   上の overlay 化は @media (pointer: coarse) 限定なので、マウス機のブラウザを
   768px 以下に縮めた場合は効かない。その状態では共有CSSがサイドバーを
   引き出し式に隠すが、kmk は #main-content の margin-left:240px と
   topbar left:240px を !important で固定しているため、本文が右にずれて
   左に空白帯が残る。ここで本文と topbar を全幅・左端へ戻す。
   (デスクトップの折りたたみは --sidebar-w:64px 追従で対応済のため対象外) */
@media (max-width: 768px) {
  body[data-app="kmk"] #main-content {
    margin-left: 0 !important;
    width: 100% !important;
  }
  body[data-app="kmk"] header.koin-header {
    left: 0 !important;
  }
}