/* LSHCORE unified page theme. Loaded LAST (after sll-admin-theme.css and any
   page-specific CSS) so its normalization wins. Owns the --sll-unified-* scale;
   the --sll-admin-* tokens are owned by sll-admin-theme.css. */

:root {
  --sll-unified-bg: #f6f8ff;
  --sll-unified-bg-2: #eef6ff;
  --sll-unified-surface: rgba(255, 255, 255, 0.94);
  --sll-unified-surface-strong: #ffffff;
  --sll-unified-surface-soft: #f7f9ff;
  --sll-unified-line: #dfe6f6;
  --sll-unified-line-strong: #cad5ed;
  --sll-unified-text: #293047;
  --sll-unified-muted: #6d7691;
  --sll-unified-primary: #8168f6;
  --sll-unified-primary-strong: #6751d8;
  --sll-unified-accent: #e65aa3;
  --sll-unified-blue: #287fd1;
  --sll-unified-green: #11845f;
  --sll-unified-amber: #b87509;
  --sll-unified-red: #c93652;
  --sll-unified-shadow: 0 18px 42px rgba(69, 83, 130, 0.14);
  --sll-unified-shadow-soft: 0 10px 24px rgba(69, 83, 130, 0.1);
  --sll-unified-radius: 18px;
  --sll-unified-radius-sm: 12px;
  --sll-unified-radius-lg: 24px;
  --sll-unified-font: "Inter", "IBM Plex Sans JP", "Noto Sans JP", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans", "Yu Gothic", sans-serif;
}

/* The --sll-admin-* tokens are intentionally NOT redefined here.
   They are the single source of truth in sll-admin-theme.css and already carry this
   exact palette, so the old alias block that lived here was a redundant second
   definition (the root cause of the "two theme files disagree" confusion). */

html {
  min-height: 100%;
  background: var(--sll-unified-bg);
  color-scheme: light;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  letter-spacing: 0 !important;
  background:
    radial-gradient(circle at 12% -10%, rgba(129, 104, 246, 0.16), transparent 30%),
    radial-gradient(circle at 88% 0%, rgba(40, 127, 209, 0.14), transparent 28%),
    linear-gradient(180deg, #fbfcff 0%, var(--sll-unified-bg) 54%, var(--sll-unified-bg-2) 100%) !important;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(103, 81, 216, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(103, 81, 216, 0.035) 1px, transparent 1px);
  background-size: 38px 38px;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0.78), transparent 72%);
}

a {
  color: var(--sll-unified-primary-strong);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}

body > main,
.page,
.shell,
.main,
.content,
.container,
.admin-shell,
.dashboard-shell,
.page-shell,
.os-page,
.aiapi-shell,
.assistant-shell,
.budget-shell,
.cap-shell,
.work-shell,
.profile-shell {
  width: min(100%, 1280px) !important;
  margin-inline: auto !important;
  padding: 22px clamp(14px, 2.2vw, 28px) 34px !important;
}

body > main,
.page,
.page-shell,
.os-page,
.aiapi-shell,
.assistant-shell,
.budget-shell,
.cap-shell,
.work-shell,
.profile-shell {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.top-bar,
.topbar,
.header,
.page-header,
.admin-header,
.os-header,
.aiapi-header,
.assistant-header,
.budget-header,
.cap-header,
.work-header,
.profile-header,
.page > header,
.shell > header,
.content > header,
.container > header,
main > header {
  min-height: 92px !important;
  padding: 18px 20px !important;
  border: 1px solid rgba(255, 255, 255, 0.9) !important;
  border-radius: var(--sll-unified-radius-lg) !important;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.96), rgba(250, 252, 255, 0.88)) !important;
  box-shadow: var(--sll-unified-shadow) !important;
  backdrop-filter: blur(18px);
}

.top-bar,
.topbar,
.header,
.page-header,
.admin-header,
.os-header,
.aiapi-header,
.assistant-header,
.budget-header,
.cap-header,
.work-header,
.profile-header,
main > header {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
}

.brand,
.brand-block,
.logo-block,
.os-brand,
.aiapi-brand,
.assistant-brand,
.budget-brand,
.cap-brand,
.work-brand,
.profile-brand {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  min-width: 0;
}

.brand-logo,
.os-mark,
.aiapi-logo,
.assistant-logo,
.budget-logo,
.cap-logo,
.work-logo,
.profile-logo {
  display: grid !important;
  place-items: center !important;
  width: 118px !important;
  min-width: 118px !important;
  height: 68px !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.brand-logo img,
.brand img,
.logo img,
.os-mark img,
.aiapi-logo img,
.assistant-logo img,
.budget-logo img,
.cap-logo img,
.work-logo img,
.profile-logo img {
  display: block !important;
  width: 100% !important;
  max-width: 118px !important;
  height: 100% !important;
  max-height: 68px !important;
  object-fit: contain !important;
}

h1,
.page-title,
.welcome,
.os-title,
.aiapi-header h1,
.assistant-header h1,
.budget-header h1,
.cap-header h1,
.work-header h1,
.profile-header h1,
.brand-block h1 {
  margin: 3px 0 0 !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: clamp(21px, 2vw, 30px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}

h2,
.section-title,
.panel h2,
.os-panel-title,
.aiapi-panel h2,
.assistant-panel h2,
.budget-panel h2,
.cap-panel h2 {
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-weight: 850 !important;
  letter-spacing: 0 !important;
}

.tag,
.eyebrow,
.page-label,
.label-chip,
.os-eyebrow,
.aiapi-kicker,
.aiapi-label,
.assistant-kicker,
.assistant-label,
.budget-kicker,
.budget-label,
.cap-kicker,
.cap-label {
  color: var(--sll-unified-primary-strong) !important;
  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 850 !important;
  letter-spacing: 0.1em !important;
  text-transform: uppercase;
}

p,
small,
.brand-text-sub,
.brand-meta p,
.page-subtitle,
.subtitle,
.description,
.card-desc,
.status,
.menu-desc,
.kpi-sub,
.loading-text,
.info-banner,
.muted,
.os-subtitle,
.os-stat-note,
.aiapi-subtitle,
.aiapi-status-card small,
.assistant-subtitle,
.budget-subtitle,
.cap-subtitle,
.work-subtitle,
.profile-subtitle {
  color: var(--sll-unified-muted) !important;
}

.user-block,
.os-user,
.aiapi-user,
.assistant-user,
.budget-user,
.cap-user,
.work-user,
.profile-user {
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  color: var(--sll-unified-muted) !important;
}

.user-pill,
.pill,
.badge-pill,
.menu-tag,
.kpi-pill,
.chip,
.os-chip,
.aiapi-chip,
.assistant-chip,
.budget-chip,
.cap-chip {
  min-height: 28px;
  border: 1px solid rgba(129, 104, 246, 0.18) !important;
  border-radius: 999px !important;
  background: #f6f4ff !important;
  color: var(--sll-unified-primary-strong) !important;
  font-weight: 800 !important;
}

button,
.btn,
.side-btn,
.action-btn,
.link-button,
.os-btn,
.aiapi-btn,
.assistant-btn,
.budget-btn,
.cap-btn {
  min-height: 36px;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: 999px !important;
  background: var(--sll-unified-surface-strong) !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  text-decoration: none !important;
  box-shadow: var(--sll-unified-shadow-soft) !important;
  transition: transform 0.16s ease, border-color 0.16s ease, box-shadow 0.16s ease, background 0.16s ease;
}

button:hover:not(:disabled),
.btn:hover,
.side-btn:hover,
.action-btn:hover,
.link-button:hover,
.os-btn:hover,
.aiapi-btn:hover,
.assistant-btn:hover,
.budget-btn:hover,
.cap-btn:hover {
  border-color: rgba(129, 104, 246, 0.42) !important;
  box-shadow: 0 14px 28px rgba(69, 83, 130, 0.14) !important;
  transform: translateY(-1px);
}

.btn-primary,
.side-btn.primary,
.primary,
button.primary,
.os-btn.primary,
.aiapi-btn-primary,
.assistant-btn-primary,
.budget-btn-primary,
.cap-btn-primary {
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sll-unified-primary), var(--sll-unified-accent)) !important;
  color: #fff !important;
  box-shadow: 0 16px 30px rgba(129, 104, 246, 0.24) !important;
}

button.secondary,
button.ghost,
.btn.secondary,
.btn.ghost,
.secondary,
.ghost {
  color: var(--sll-unified-primary-strong) !important;
  background: #f7f6ff !important;
  box-shadow: none !important;
}

button:disabled,
.btn:disabled {
  cursor: not-allowed;
  opacity: 0.48;
  transform: none !important;
  box-shadow: none !important;
}

.grid,
.kpi-row,
.stats,
.cards,
.menu-grid,
.dashboard-grid,
.os-stat-grid,
.aiapi-summary,
.aiapi-grid,
.assistant-grid,
.budget-grid,
.cap-grid {
  gap: 14px !important;
}

.menu-card,
.card,
.kpi-card,
.panel,
.list-panel,
.editor-panel,
.tools-panel,
.stat,
.stat-card,
.table-panel,
.form-panel,
.section-card,
.dashboard-card,
.summary-card,
.section,
.quick-panel,
.os-panel,
.os-stat,
.os-quick-nav,
.aiapi-panel,
.aiapi-status-card,
.assistant-panel,
.assistant-card,
.budget-panel,
.budget-card,
.cap-panel,
.cap-card,
.work-card,
.profile-card {
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius) !important;
  background: var(--sll-unified-surface) !important;
  box-shadow: var(--sll-unified-shadow) !important;
}

.menu-card,
.card,
.kpi-card,
.stat,
.stat-card,
.os-stat,
.aiapi-status-card {
  min-height: 112px;
}

.menu-title,
.card h3,
.panel h2,
.section-title,
.stat-value,
.kpi-value,
.os-stat-value,
.aiapi-status-card strong {
  color: var(--sll-unified-text) !important;
  font-weight: 900 !important;
}

input,
select,
textarea {
  min-height: 38px;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius-sm) !important;
  background: rgba(255, 255, 255, 0.96) !important;
  color: var(--sll-unified-text) !important;
  font-family: var(--sll-unified-font) !important;
  font-size: 13px !important;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}

input:focus,
select:focus,
textarea:focus {
  border-color: rgba(129, 104, 246, 0.6) !important;
  outline: 3px solid rgba(129, 104, 246, 0.14) !important;
}

label,
.form-label {
  color: var(--sll-unified-muted) !important;
  font-weight: 800 !important;
}

table {
  width: 100%;
  border: 1px solid var(--sll-unified-line) !important;
  border-collapse: separate !important;
  border-spacing: 0 !important;
  border-radius: var(--sll-unified-radius) !important;
  background: var(--sll-unified-surface-strong) !important;
  overflow: hidden;
  box-shadow: var(--sll-unified-shadow-soft) !important;
}

th {
  background: #f2f5ff !important;
  color: #56617c !important;
  font-size: 12px !important;
  font-weight: 850 !important;
}

td,
th {
  border-bottom: 1px solid #edf1fa !important;
}

tr:last-child td {
  border-bottom: 0 !important;
}

.tabs,
.tab-list,
.toolbar,
.filters,
.filter-row,
.top-right,
.aiapi-toolbar,
.assistant-toolbar,
.budget-toolbar,
.cap-toolbar,
.os-toolbar {
  gap: 8px !important;
}

.tabs,
.tab-list,
.toolbar,
.filters,
.filter-row {
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius) !important;
  background: rgba(255, 255, 255, 0.82) !important;
  box-shadow: var(--sll-unified-shadow-soft) !important;
}

.nav-item,
.tab,
.tab-button,
.filter-chip {
  border-radius: 999px !important;
}

.is-active,
.active,
[aria-current="page"] {
  color: var(--sll-unified-primary-strong) !important;
}

.error-banner,
.danger,
.message-error,
.aiapi-message.error,
.assistant-message.error {
  border-color: #ffc7d0 !important;
  background: #fff1f4 !important;
  color: var(--sll-unified-red) !important;
}

.success,
.message-success {
  border-color: #bcebd8 !important;
  background: #effbf6 !important;
  color: var(--sll-unified-green) !important;
}

.warning,
.message-warning {
  border-color: #f6d79c !important;
  background: #fff8ea !important;
  color: var(--sll-unified-amber) !important;
}

.sll-core-global-menu {
  width: min(100%, 1280px) !important;
  margin: 12px auto 18px !important;
  padding: 12px 14px !important;
  border: 1px solid var(--sll-unified-line) !important;
  border-radius: var(--sll-unified-radius-lg) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: var(--sll-unified-shadow) !important;
  overflow: hidden;
}

.sll-core-menu-scroll {
  display: flex !important;
  flex-wrap: wrap !important;
  align-items: center !important;
  gap: 8px !important;
  max-width: 100% !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  padding-bottom: 0 !important;
}

.sll-core-menu-link {
  min-width: 0 !important;
  max-width: 100% !important;
  border-color: var(--sll-unified-line) !important;
  color: #404a66 !important;
  background: #fff !important;
  white-space: normal !important;
  overflow-wrap: anywhere;
}

.sll-core-menu-link > span:last-child {
  min-width: 0;
}

.sll-core-menu-link.is-current {
  color: #fff !important;
  border-color: transparent !important;
  background: linear-gradient(135deg, var(--sll-unified-primary), var(--sll-unified-accent)) !important;
}

.sll-core-menu-icon {
  color: var(--sll-unified-primary-strong) !important;
  background: rgba(129, 104, 246, 0.12) !important;
}

@media (max-width: 900px) {
  .top-bar,
  .topbar,
  .header,
  .page-header,
  .admin-header,
  .os-header,
  .aiapi-header,
  .assistant-header,
  .budget-header,
  .cap-header,
  .work-header,
  .profile-header,
  main > header {
    align-items: flex-start !important;
    flex-direction: column !important;
    border-radius: 20px !important;
  }

  .user-block,
  .os-user,
  .aiapi-user,
  .assistant-user,
  .budget-user,
  .cap-user,
  .work-user,
  .profile-user {
    align-items: flex-start !important;
    justify-content: flex-start !important;
  }

  .brand-logo,
  .os-mark,
  .aiapi-logo,
  .assistant-logo,
  .budget-logo,
  .cap-logo,
  .work-logo,
  .profile-logo {
    width: 92px !important;
    min-width: 92px !important;
    height: 56px !important;
  }

  .brand-logo img,
  .brand img,
  .os-mark img,
  .aiapi-logo img,
  .assistant-logo img,
  .budget-logo img,
  .cap-logo img,
  .work-logo img,
  .profile-logo img {
    max-width: 92px !important;
    max-height: 56px !important;
  }
}

@media (max-width: 640px) {
  body > main,
  .page,
  .shell,
  .main,
  .content,
  .container,
  .admin-shell,
  .dashboard-shell,
  .page-shell,
  .os-page,
  .aiapi-shell,
  .assistant-shell,
  .budget-shell,
  .cap-shell,
  .work-shell,
  .profile-shell {
    padding: 12px 10px 24px !important;
  }

  h1,
  .page-title,
  .welcome,
  .os-title,
  .aiapi-header h1,
  .assistant-header h1,
  .budget-header h1,
  .cap-header h1,
  .work-header h1,
  .profile-header h1,
  .brand-block h1 {
    font-size: clamp(19px, 7vw, 24px) !important;
    overflow-wrap: anywhere;
  }

  .top-bar,
  .topbar,
  .header,
  .page-header,
  .admin-header,
  .os-header,
  .aiapi-header,
  .assistant-header,
  .budget-header,
  .cap-header,
  .work-header,
  .profile-header,
  main > header,
  .menu-card,
  .card,
  .panel,
  .section,
  .os-panel,
  .aiapi-panel,
  .assistant-panel,
  .budget-panel,
  .cap-panel {
    border-radius: 16px !important;
  }

  .sll-core-global-menu {
    width: calc(100% - 20px) !important;
    margin: 10px auto 14px !important;
    border-radius: 16px !important;
  }

  .sll-core-menu-scroll {
    gap: 7px !important;
  }

  .sll-core-menu-link {
    flex: 1 1 min(100%, 168px) !important;
    justify-content: flex-start !important;
  }
}

/* ===== LSHCORE ヘッダー統一 (2026-06-11) =====
   ページごとに top-bar / os-header / header / cap-header / mw-header と実装が分かれ、
   高さ(110〜164px)・ロゴ(118x68 / 118x30 / 190x48)・角丸(24/26)・タイトル(28/29.9px)が
   バラバラだったため、見た目トークンをここで強制統一する。 */
header.top-bar,
div.top-bar,
header.os-header,
header.header,
header.cap-header,
header.mw-header,
header.fi-header,
header.aiapi-header,
header.ai-header,
header.budget-header,
header.discord-header,
header.call-header,
header.mpe-header,
header.top,
header.topbar {
  border-radius: 24px !important;
  padding: 18px 20px !important;
  min-height: 104px;
  border: 1px solid rgba(255, 255, 255, 0.86) !important;
  background: rgba(255, 255, 255, 0.9) !important;
  box-shadow: 0 18px 42px rgba(79, 91, 140, 0.14) !important;
}
/* ロゴ: どのページでも同じ枠サイズ・はみ出しなしの contain */
header.top-bar img[src*="slllogo"],
div.top-bar img[src*="slllogo"],
header.os-header img[src*="slllogo"],
header.header img[src*="slllogo"],
header.cap-header img[src*="slllogo"],
header.mw-header img[src*="slllogo"],
header.fi-header img[src*="slllogo"],
header.aiapi-header img[src*="slllogo"],
header.ai-header img[src*="slllogo"],
header.budget-header img[src*="slllogo"],
header.discord-header img[src*="slllogo"],
header.call-header img[src*="slllogo"],
header.mpe-header img[src*="slllogo"],
header.top img[src*="slllogo"],
header.topbar img[src*="slllogo"] {
  width: 150px !important;
  height: 60px !important;
  max-width: none !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
}
/* タイトル: フォントサイズと行間を統一 */
header.top-bar h1,
div.top-bar h1,
header.os-header h1,
header.header h1,
header.cap-header h1,
header.mw-header h1,
header.fi-header h1,
header.aiapi-header h1,
header.ai-header h1,
header.budget-header h1,
header.discord-header h1,
header.call-header h1,
header.mpe-header h1,
header.top h1,
header.topbar h1 {
  font-size: clamp(21px, 2vw, 30px) !important;
  line-height: 1.25 !important;
  font-weight: 900 !important;
  letter-spacing: 0 !important;
}
/* ロゴの入れ箱（.os-mark 等）は固定幅だと統一ロゴ(150x60)がはみ出してタイトルに被るため、
   中身に合わせて自動伸縮させる */
header.os-header .os-mark,
header.top-bar .os-mark,
header .os-mark.has-sll-logo {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
/* 同様に、固定118px箱（.aiapi-logo/.cap-logo 等）も150pxロゴを内包すると
   はみ出してタイトルに被るので、ロゴを持つ箱は中身に合わせて自動伸縮させる。
   :has() で大ロゴを持つ箱だけ対象（top-bar系の .brand-logo は据え置き）。 */
header .aiapi-logo:has(img[src*="slllogo"]),
header .assistant-logo:has(img[src*="slllogo"]),
header .budget-logo:has(img[src*="slllogo"]),
header .cap-logo:has(img[src*="slllogo"]),
header .work-logo:has(img[src*="slllogo"]),
header .profile-logo:has(img[src*="slllogo"]) {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
header .aiapi-logo:has(img[src*="slllogo"]) img,
header .assistant-logo:has(img[src*="slllogo"]) img,
header .budget-logo:has(img[src*="slllogo"]) img,
header .cap-logo:has(img[src*="slllogo"]) img,
header .work-logo:has(img[src*="slllogo"]) img,
header .profile-logo:has(img[src*="slllogo"]) img {
  max-width: none !important;
}
/* pay-slips 等の汎用 .logo 箱（.brand > .logo）も固定幅で150pxロゴがはみ出すので自動伸縮 */
header.top .logo:has(img[src*="slllogo"]),
header .brand > .logo:has(img[src*="slllogo"]) {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
/* sll-global-logo.js が注入したロゴ（a.sll-logo-home > img）を内包する箱は、
   ページ側の固定幅(.brand-logo 118px 等)だと150pxロゴがはみ出してタイトルに被るので、
   注入ロゴを持つ箱だけ中身に合わせて自動伸縮（元からロゴを持つ .brand-logo は対象外）。 */
/* :only-child = ロゴだけを内包する「箱」に限定。.brand/.user 等（ロゴ＋タイトルを内包）は
   対象外にして flex 縮小を阻害しない（streaming-operations はロゴが .brand 直下のため誤爆していた） */
header *:has(> a.sll-logo-home:only-child > img[src*="slllogo"]) {
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  flex: 0 0 auto !important;
}
/* care-dashboard 等：header.top-bar 直下の .brand-block が flex-wrap:wrap で、
   header8b のブランド縮小と相まってテキスト塊がロゴの「下」へ回り込む。
   注入ロゴを持つ直下 brand-block は nowrap にし、テキストは min-width:0 で
   ロゴ右隣に留めて内部折返しさせる（グリッド変換ページや canonical は別構造で非対象）。 */
header.top-bar > .brand-block:has(a.sll-logo-home),
div.top-bar > .brand-block:has(a.sll-logo-home) {
  flex-wrap: nowrap !important;
}
header.top-bar > .brand-block:has(a.sll-logo-home) > :not(.brand-logo),
div.top-bar > .brand-block:has(a.sll-logo-home) > :not(.brand-logo) {
  min-width: 0 !important;
}
/* ヘッダー小見出し(kicker/eyebrow)の色を紫に統一（fi-kicker等は灰色だった） */
.fi-kicker, .page-kicker, .budget-kicker, .kicker {
  color: var(--sll-admin-primary, #8168f6) !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em;
}

/* my-work等のkickerも紫に統一 */
.mw-kicker { color: var(--sll-admin-primary, #8168f6) !important; font-weight: 800 !important; }

/* 旧テンプレ（ロゴが上段に積まれ、タイトルが下段になる）のヘッダーを
   他ページと同じ「ロゴ左・テキスト右」へ変換。
   対象 = .top-bar 直下の div が .brand-block と .page-title を直接の子に持つ構造のみ
   （ケア管理などロゴ内包型の brand-block は影響なし） */
header.top-bar > div:has(> .brand-block):has(> .page-title) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
header.top-bar > div:has(> .brand-block):has(> .page-title) > .brand-block {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  margin: 0 !important;
}
header.top-bar > div:has(> .brand-block):has(> .page-title) > .tag,
header.top-bar > div:has(> .brand-block):has(> .page-title) > .page-title,
header.top-bar > div:has(> .brand-block):has(> .page-title) > .page-subtitle {
  grid-column: 2;
  margin-left: 0 !important;
}
/* ロゴ画像と重複するブランドテキストは非表示 */
header.top-bar > div:has(> .brand-block):has(> .page-title) > .brand-block .brand-text-main,
header.top-bar > div:has(> .brand-block):has(> .page-title) > .brand-block .brand-text-sub {
  display: none !important;
}

/* 同上：ロゴが .brand-block ではなく .brand-logo を直接子に持つ旧テンプレ
   （vendors-master 等）も「ロゴ左・テキスト右」へ変換 */
header.top-bar > div:has(> .brand-logo):has(> .page-title) {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: 16px;
  align-items: center;
}
header.top-bar > div:has(> .brand-logo):has(> .page-title) > .brand-logo {
  grid-column: 1;
  grid-row: 1 / span 4;
  align-self: center;
  width: auto !important;
  min-width: 0 !important;
  height: auto !important;
  margin: 0 !important;
}
header.top-bar > div:has(> .brand-logo):has(> .page-title) > .tag,
header.top-bar > div:has(> .brand-logo):has(> .page-title) > .page-title,
header.top-bar > div:has(> .brand-logo):has(> .page-title) > .page-sub,
header.top-bar > div:has(> .brand-logo):has(> .page-title) > .page-subtitle {
  grid-column: 2;
  margin-left: 0 !important;
}

/* ===== ヘッダー統一 v2 (header6): 右側クラスタをダッシュボード仕様に ===== */
/* ユーザーチップ(.user-pill) → 素のテキスト表示（ダッシュボード .os-user と同じ見え方） */
header .user-pill,
div.top-bar .user-pill {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  min-height: 0 !important;
}

header .user-avatar,
div.top-bar .user-avatar {
  display: none !important;
}

header .user-name,
div.top-bar .user-name {
  color: #252944 !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

header .user-role,
div.top-bar .user-role {
  color: var(--sll-unified-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

/* ログアウトボタン → グラデーションピル（ダッシュボードの .os-btn.primary と同一） */
button.sll-logout-uni,
a.sll-logout-uni {
  border-color: transparent !important;
  color: #fff !important;
  background: linear-gradient(135deg, #8168f6, #e65aa3) !important;
  box-shadow: 0 10px 22px rgba(129, 104, 246, 0.28) !important;
}

/* ===== ヘッダー統一 v3 (header7): 右側クラスタのレイアウトを1行флексに統一 ===== */
/* 構成: [名前(太字) 役職(グレー)] [ページ固有ボタン] [My Work] [ログアウト] */
.mw-user,
.top-actions,
.fi-toolbar,
.top-bar .actions,
header .actions {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
}

/* 入れ子ラッパーを展開して、名前・役職をダッシュボード同様1行に並べる */
.mw-user-text {
  display: contents !important;
}

.mw-user-text strong {
  color: #252944 !important;
  font-size: 13px !important;
  white-space: nowrap !important;
}

.mw-user-text span {
  color: var(--sll-unified-muted) !important;
  font-size: 11px !important;
  white-space: nowrap !important;
}

header .user-pill,
div.top-bar .user-pill {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

header .user-pill > div:not(.user-avatar),
div.top-bar .user-pill > div:not(.user-avatar) {
  display: contents !important;
}

/* ===== ヘッダー統一 v4 (header8): どのテンプレでも「ブランド左・操作右上」を強制 =====
   旧テンプレ（.top-bar 直下が [ブランドラッパー][user-block] や [brand-block][top-right]）で
   操作ボタンが下段へ折り返していたのを、1行レイアウトに統一する。 */
header.top-bar,
div.top-bar {
  display: flex !important;
  align-items: flex-start !important;
  justify-content: space-between !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}
/* ブランド側（ロゴ＋タイトル）は伸縮、操作側は固定で右へ寄せる */
header.top-bar > div:has(> .brand-block),
header.top-bar > .brand-block,
div.top-bar > div:has(> .brand-block),
div.top-bar > .brand-block {
  flex: 1 1 360px !important;
  min-width: 0 !important;
}
header.top-bar > .user-block,
header.top-bar > .top-right,
header.top-bar > .actions,
header.top-bar > .top-actions,
div.top-bar > .user-block,
div.top-bar > .top-right,
div.top-bar > .actions,
div.top-bar > .top-actions {
  flex: 0 0 auto !important;
  align-self: center !important;
  margin-left: auto !important;
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  flex-wrap: wrap !important;
  justify-content: flex-end !important;
}

/* ===== header8b: 操作ボタンが多い（5個以上）混雑ヘッダーの折り返し対策 =====
   ボタンが4個以下のページは上の 0 0 auto（1行右寄せ）のまま。
   5個以上だと幅が足りず操作束が下段full幅へ落ちてレイアウトが崩れるので、
   その場合だけブランドと操作束を伸縮させ、操作束をブランド右隣で内部折り返しさせて
   「左ブランド／右アクション」の統一形を保つ。 */
:is(header.top-bar, div.top-bar):is(
    :has(> .user-block > :nth-child(5)),
    :has(> .top-right > :nth-child(5)),
    :has(> .top-actions > :nth-child(5)),
    :has(> .actions > :nth-child(5))
  ) > :is(.brand-block, div:has(> .brand-block)) {
  flex: 1 1 300px !important;
}
:is(header.top-bar, div.top-bar):is(
    :has(> .user-block > :nth-child(5)),
    :has(> .top-right > :nth-child(5)),
    :has(> .top-actions > :nth-child(5)),
    :has(> .actions > :nth-child(5))
  ) > :is(.user-block, .top-right, .top-actions, .actions) {
  flex: 1 1 250px !important;
  min-width: 0 !important;
}

/* ===== スマホ共通操作性 (2026-07-02 v2): iOSズーム根絶 + フォント底上げ + タップ44px + 誤タップ防止 ===== */
/* 監査(liver-mobile-ux-audit)最優先: 481行 input{font-size:13px!important} に勝つため !important 必須。*/
@media (max-width: 600px) {
  /* iOS入力ズーム根絶（フォーカスで画面が勝手に拡大する定番ストレス） */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]),
  select, textarea { font-size: 16px !important; max-width: 100% !important; }
  select { min-height: 42px !important; }
  /* 本文フォント底上げ（11〜12px系を読める大きさに） */
  label, .badge, .pill, .tag, .time, .chip, small { font-size: 13px !important; }
  th, td { font-size: 13px !important; }
  /* タップ領域44px（誤タップ・押しづらさ解消。共有 min-height:36px!important に勝つ） */
  button, .btn, .btn-sm, .os-btn { min-height: 44px !important; }
  /* ヘッダー操作群の間隔（ログアウト誤爆で入力喪失を防止） */
  .user-block, .userbox, .top-right, .os-toolbar, .os-user { gap: 10px !important; }
}

/* ===== スマホ テーブル (2026-07-02): 既存 .table-scroll/.table-wrapper を実際に横スクロールさせる ===== */
/* これらのラッパは markup で使われているが CSS 未定義で機能していなかった。多列テーブルが */
/* スマホで潰れて読めない問題を、横スクロール(指スワイプ)で解消する。未ラップtableには非干渉=安全。*/
@media (max-width: 600px) {
  .table-scroll, .table-wrapper { overflow-x: auto; -webkit-overflow-scrolling: touch; max-width: 100%; }
  .table-scroll table, .table-wrapper table { min-width: 520px; }
}

/* ===== スマホ 生テーブル (2026-07-02): 多列テーブルを横スクロール化（潰れ・縦折れ解消） ===== */
/* width:100%で潰れて氏名等が縦に折れ読みにくい問題を、display:block+overflow-xで横スワイプに。*/
/* harnessで安全確認済み。スマホのみ・デスクトップ不変・可逆。*/
@media (max-width: 600px) {
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; white-space: nowrap; box-shadow: none !important; }
  table td, table th { white-space: nowrap; }
}

/* ===== スマホ ヘッダー巨大空白バグ修正 (2026-07-02c) =====
   header8 の「ブランド伸縮 flex:1 1 360px(＋5ボタン時 300px/250px)」は横並び用の幅バジェットだが、
   ≤900px でヘッダーが flex-direction:column になると flex-basis が「高さ」として効き、
   brand-block が高さ360pxに膨らんでヘッダー内に巨大な余白を生んでいた（talent-schedule等で実測）。
   縦積み時は全て auto（内容なり）へ戻す。元の3ルールと同一セレクタで上書き（後勝ち）。 */
@media (max-width: 900px) {
  header.top-bar > div:has(> .brand-block),
  header.top-bar > .brand-block,
  div.top-bar > div:has(> .brand-block),
  div.top-bar > .brand-block {
    flex: 0 0 auto !important;
  }
  :is(header.top-bar, div.top-bar):is(
      :has(> .user-block > :nth-child(5)),
      :has(> .top-right > :nth-child(5)),
      :has(> .top-actions > :nth-child(5)),
      :has(> .actions > :nth-child(5))
    ) > :is(.brand-block, div:has(> .brand-block)) {
    flex: 0 0 auto !important;
  }
  :is(header.top-bar, div.top-bar):is(
      :has(> .user-block > :nth-child(5)),
      :has(> .top-right > :nth-child(5)),
      :has(> .top-actions > :nth-child(5)),
      :has(> .actions > :nth-child(5))
    ) > :is(.user-block, .top-right, .top-actions, .actions) {
    flex: 0 0 auto !important;
  }
  /* 統一ロゴ150x60が ≤900 の縮小箱(92x56, overflow:hidden)からはみ出して切れるので、
     ロゴ画像自体も箱に収まるサイズへ（基底の width:150px!important と同リストで上書き） */
  header.top-bar img[src*="slllogo"],
  div.top-bar img[src*="slllogo"],
  header.os-header img[src*="slllogo"],
  header.header img[src*="slllogo"],
  header.cap-header img[src*="slllogo"],
  header.mw-header img[src*="slllogo"],
  header.fi-header img[src*="slllogo"],
  header.aiapi-header img[src*="slllogo"],
  header.ai-header img[src*="slllogo"],
  header.budget-header img[src*="slllogo"],
  header.discord-header img[src*="slllogo"],
  header.call-header img[src*="slllogo"],
  header.mpe-header img[src*="slllogo"],
  header.top img[src*="slllogo"],
  header.topbar img[src*="slllogo"] {
    width: 92px !important;
    height: 37px !important;
  }
}

/* ===== スマホ 長大リスト/表の縦カット (2026-07-02d) =====
   my-workのフィード(≈2000px)や勤怠履歴表(≈850px)などがページを縦に引き伸ばして
   スクロールが辛いため、スマホではカード内スクロールに切り替える。デスクトップ不変。 */
@media (max-width: 768px) {
  .mwh-card .mwh-body { max-height: 62vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
  .table-scroll, .table-wrapper { max-height: 62vh; overflow-y: auto; }
}

/* ===== スマホ 横はみ出し修正 (2026-07-02f) =====
   実測(390px iframe監査)で見つかった横スクロール/はみ出しの根治。
   ①ページ側の @media で grid-template-columns:1fr(min=auto) に上書きされると minmax(0,…) が失われ、
     中の表(min-width:520)がトラックをビューポート超に押し広げる(勤怠 578px 等) → minmax(0,1fr) を強制。
   ②.toolbar(41ページ)内の select は内在幅(最長option)で flex子ごとはみ出す → 縮小可＋全幅化。 */
@media (max-width: 980px) {
  .section-grid, .work-grid, .stat-grid { grid-template-columns: minmax(0, 1fr) !important; }
  .table-scroll, .table-wrapper { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
}
@media (max-width: 768px) {
  .toolbar > * { min-width: 0 !important; }
  .toolbar select { width: 100% !important; max-width: 100% !important; }
}

/* ===== ボタン型リンクの高さ・縦位置統一 (2026-07-03) =====
   <a class="btn等"> は inline のため min-height/padding が縦に効かず、隣の <button> と
   高さ・縦位置がズレる（ダッシュボードの My Work/ログアウト等で顕在化、他ページにも多数）。
   :where()=詳細度0: ページ側の display 指定（display:none での非表示含む）が常に勝つため安全。 */
@media (max-width: 768px) {
  :where(a.btn, a.btn-sm, a.os-btn, a.secondary, a.ghost,
         a.srv-btn, a.fi-btn, a.ai-btn, a.aiapi-btn, a.mw-button, a.discord-btn,
         a.cd-btn, a.budget-btn, a.mpe-button, a.call-btn) {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1.2;
    box-sizing: border-box;
    text-align: center;
    vertical-align: middle;
  }
  /* 同一ツールバー内の button との高さ一致（44pxはスマホ共通操作性ルールと同値）。
     ここは a.クラス（詳細度0,1,1）でページ側の単一クラス定義(0,1,0)に勝たせる。 */
  a.btn, a.btn-sm, a.os-btn, a.secondary,
  a.srv-btn, a.fi-btn, a.ai-btn, a.aiapi-btn, a.mw-button, a.discord-btn,
  a.cd-btn, a.budget-btn, a.mpe-button, a.call-btn {
    min-height: 44px;
  }
}

/* ===== ヘッダー説明文（サブタイトル）を全ページ非表示・統一 (2026-07-03) =====
   「案件単価・マージンの合意書（覚書）を発行し…」のようなページヘッダーの説明文は
   不要（ユーザー要望）のため、ヘッダー系サブタイトルを一括非表示にして全ページ統一。
   ※カード/パネル内の .subtitle .panel-subtitle .card-subtitle 等は対象外。 */
.top-bar .subtitle,
.topbar .subtitle,
.page-header .subtitle,
.admin-header .subtitle,
.brand-meta .subtitle,
.page-subtitle,
.os-subtitle,
.brand-subtitle,
.srv-subtitle,
.mw-subtitle,
.fi-subtitle,
.discord-subtitle,
.cd-subtitle,
.budget-subtitle,
.ai-subtitle,
.aiapi-subtitle {
  display: none !important;
}

/* ============================================================================
   スマホ統一・底上げ  v3  (2026-07-10)  ── sll-unified-theme.css の末尾に追記
   ----------------------------------------------------------------------------
   目的 : 601〜768px の「継ぎ目」を解消し、タップ44px / 入力16px / 表 / 間隔 /
          ボタン・カード・見出し・戻る導線の見た目 / 下部セーフエリア をスマホで統一。
   原則 : すべて @media 幅限定。>768px（デスクトップ/タブレット横）は一切不変。
          本ファイルは最後に読み込まれるため、同詳細度でも「後勝ち」で既存を上書き。
          ページ側 !important に勝つ必要がある箇所だけ body 付き・複数クラスで強めている。
   注意 : segmented control（.seg / .taxseg の <button>）は角丸0/独自高さを意図的に
          維持したいので、pill 化は .btn 系クラス限定にし <button> 要素は含めない。
   ============================================================================ */

/* ── 1) 操作性コアを 768px へ一本化（既存は 600px のみ → 601〜768 を埋める） ── */
@media (max-width: 768px) {

  /* iOS 入力ズーム根絶：16px 未満をやめる（checkbox/radio/range/hidden は除外） */
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]),
  select,
  textarea {
    font-size: 16px !important;
    max-width: 100% !important;
  }

  /* 入力の最小タップ高さ 44px（select は 42→44、textarea・日付/数値入力も統一） */
  select,
  textarea,
  input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="hidden"]):not([type="color"]) {
    min-height: 44px !important;
  }

  /* チェックボックス/ラジオを 20px に拡大 ＋ 親ラベルのタップ高さ確保（誤タップ防止） */
  input[type="checkbox"],
  input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
    flex: 0 0 auto;
  }
  label:has(> input[type="checkbox"]),
  label:has(> input[type="radio"]) {
    min-height: 40px;
    gap: 10px !important;
    align-items: center;
  }

  /* ボタン：高さ44px（既存 min-height:44px の対象を icon-btn/close 等へ拡張） */
  button, .btn, .btn-sm, .os-btn, .action-btn, .link-button, .side-btn,
  .icon-btn, .icon-button, .close, .chip-close,
  .fi-btn, .budget-btn, .aiapi-btn, .assistant-btn, .cap-btn,
  .secondary, .ghost {
    min-height: 44px !important;
  }

  /* アイコンのみボタン（×/＋/並べ替え/ハンバーガー）の横幅も 44px（誤タップ解消） */
  button, .btn, .btn-sm, .os-btn, .action-btn, .link-button, .side-btn,
  .icon-btn, .icon-button, .close, .chip-close {
    min-width: 44px !important;
  }

  /* ボタン文字を 12px → 14px（押す前の判読性を上げる） */
  button, .btn, .btn-sm, .os-btn, .action-btn, .link-button, .side-btn,
  .fi-btn, .budget-btn, .secondary, .ghost {
    font-size: 14px !important;
  }

  /* ボタン角丸を pill に統一（ページ個別の 8/10/16px を吸収。<button>要素は除外＝seg安全） */
  .btn, .btn-sm, .os-btn, .action-btn, .link-button, .side-btn,
  .fi-btn, .budget-btn, .secondary, .ghost {
    border-radius: 999px !important;
  }

  /* ページ独自の極小ボタン（.btn.mini / .btn.sm 等、!important付き）にも勝たせて44px
     ── body 付き(0,2,1) でページ側 .btn.mini{...!important}(0,2,0) を上書きする */
  body .btn.mini, body .btn-mini,
  body .btn.sm,  body .btn-sm {
    min-height: 44px !important;
    min-width: 44px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
    font-size: 13px !important;
  }
  body td .btn.mini, body td .btn.sm { margin: 3px 4px; } /* 表内の破壊的操作の間隔確保 */

  /* .btn を持たない素の <a>（ナビ/タブ/パンくず/ページャ/戻る導線）もタップ44px確保 */
  nav a, .tabs a, .tab, .pagination a, .pager a, .breadcrumb a,
  a.back, .back-link, .back-hub, a.watch, .cd-cap-link {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 8px 10px;
  }

  /* <label class="btn">（CSV取込等）も min-height が縦に効くように */
  label.btn, label.btn-sm, label.os-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    box-sizing: border-box;
  }

  /* 極小テキストの下限を統一：admin の .eyebrow/.label-chip(11px) も 13px へ底上げ */
  label, .badge, .pill, .tag, .chip, .time, small,
  .eyebrow, .label-chip {
    font-size: 13px !important;
  }

  /* ヘッダー/操作群の間隔を 10px（ログアウト誤爆で入力喪失を防止：finance系ツールバー追加） */
  .user-block, .userbox, .top-right, .os-toolbar, .os-user,
  .actions, .fi-toolbar, .budget-toolbar, .top-actions, .budget-bar {
    gap: 10px !important;
  }

  /* .toolbar：select だけでなく input も全幅化（select だけ全幅の不揃いを全ページ一括解消） */
  .toolbar > * { min-width: 0 !important; }
  .toolbar input,
  .toolbar select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* ── 2) テーブル：横スクロール化を 768px まで拡張 ＋ 本文セルは折返し ── */
@media (max-width: 768px) {
  .table-scroll, .table-wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }
  .table-scroll table, .table-wrapper table { min-width: 520px; }

  /* 生テーブルも display:block で横スワイプ化（601〜768 も対象に） */
  table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: none !important;
  }
  table th { white-space: nowrap; }              /* 見出しは折返さず維持 */
  table td { white-space: normal !important; }   /* 長文セルは縦に折返し、横スワイプ量を激減 */
}

/* ── 3) 下部セーフエリア（iPhone ホームインジケータ）対応 ──
   body::after は「追加スペーサ」なので既存の body padding を上書きしない。
   viewport-fit=cover 未指定 / 非notch 端末では env()=0px → 完全に無影響。 */
@media (max-width: 768px) {
  body::after {
    content: "";
    display: block;
    height: env(safe-area-inset-bottom, 0px);
  }
  .bottom-bar, .fixed-bottom, .action-bar.fixed, .bulk-bar, .sticky-bottom {
    padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px)) !important;
  }
}