/* ============================================
   GearCrew Design Tokens
   ============================================ */
:root {
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F7F2EE;
  --color-background-tertiary: #EFE7E0;
  --color-text-primary: #1F1714;
  --color-text-secondary: #6B5C54;
  --color-text-tertiary: #A99B91;
  --color-border-primary: #1F1714;
  --color-border-secondary: #6B5C54;
  --color-border-tertiary: #DCD2CA;
  --color-accent: #D85A30;
  --color-accent-dark: #B84A24;
  --color-accent-light: #FAECE7;
  --color-accent-text: #712B13;

  --color-success-bg: #E1F5EE;
  --color-success-fg: #085041;
  --color-warning-bg: #FAEEDA;
  --color-warning-fg: #633806;
  --color-info-bg: #E6F1FB;
  --color-info-fg: #0C447C;
  --color-purple-bg: #EEEDFE;
  --color-purple-fg: #3C3489;

  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;

  --shadow-sm: 0 1px 2px rgba(31,23,20,0.04);
  --shadow-md: 0 4px 12px rgba(31,23,20,0.06);
  --shadow-lg: 0 8px 28px rgba(31,23,20,0.08);
}

* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  background: var(--color-background-secondary);
  color: var(--color-text-primary);
  -webkit-font-smoothing: antialiased;
  font-size: 14px;
  line-height: 1.5;
}

a { color: var(--color-accent); text-decoration: none; }
a:hover { text-decoration: underline; }

input, select, textarea, button { font-family: inherit; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ============================================
   ログイン画面
   ============================================ */
.auth-wrap {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-background-primary);
}

.auth-left {
  background: linear-gradient(140deg, #FAECE7 0%, #F7E5C9 60%, #EFE7E0 100%);
  padding: 60px 70px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  overflow: hidden;
}
.auth-left::before {
  content: '';
  position: absolute;
  top: -120px; right: -120px;
  width: 380px; height: 380px;
  border-radius: 50%;
  background: rgba(216,90,48,0.10);
  filter: blur(20px);
}
.auth-left::after {
  content: '';
  position: absolute;
  bottom: -100px; left: -80px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(8,80,65,0.08);
  filter: blur(20px);
}

.auth-brand {
  display: flex; align-items: center; gap: 10px;
  margin-bottom: 60px; position: relative; z-index: 1;
}
.brand-mark {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-name { font-weight: 700; font-size: 20px; color: var(--color-text-primary); }

.auth-hero {
  font-size: 44px;
  font-weight: 700;
  line-height: 1.25;
  margin: 0 0 20px;
  position: relative;
  z-index: 1;
  letter-spacing: -0.01em;
}
.auth-hero .accent { color: var(--color-accent); }

.auth-lead {
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-text-secondary);
  max-width: 460px;
  margin: 0 0 32px;
  position: relative;
  z-index: 1;
}

.auth-points {
  list-style: none;
  padding: 0; margin: 0 0 36px;
  position: relative; z-index: 1;
}
.auth-points li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0;
  font-size: 13px;
  color: var(--color-text-primary);
}
.auth-points i { color: var(--color-accent); width: 20px; }

.auth-stats {
  display: flex; gap: 32px;
  padding-top: 24px;
  border-top: 1px solid rgba(31,23,20,0.10);
  position: relative; z-index: 1;
}
.auth-stats > div { display: flex; flex-direction: column; }
.auth-stats strong { font-size: 22px; font-weight: 700; color: var(--color-text-primary); }
.auth-stats span { font-size: 11px; color: var(--color-text-secondary); }

.auth-right {
  padding: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.auth-card {
  width: 100%;
  max-width: 400px;
}
.auth-tabs {
  display: flex;
  border-bottom: 1px solid var(--color-border-tertiary);
  margin-bottom: 28px;
}
.auth-tab {
  flex: 1; text-align: center;
  padding: 12px 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text-tertiary);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.auth-tab.active {
  color: var(--color-accent);
  border-bottom-color: var(--color-accent);
}
.auth-tab:hover { text-decoration: none; color: var(--color-text-primary); }

.auth-title {
  font-size: 26px;
  font-weight: 700;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.auth-sub {
  color: var(--color-text-secondary);
  font-size: 13px;
  margin: 0 0 24px;
}

.sso-group { display: flex; flex-direction: column; gap: 8px; }
.sso-btn {
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--border-radius-md);
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  color: var(--color-text-primary);
  transition: all .15s ease;
}
.sso-btn:hover { box-shadow: var(--shadow-sm); transform: translateY(-1px); }
.sso-google {}
.sso-line {
  background: #06C755; color: white; border-color: #06C755;
}
.sso-line:hover { background: #05B14C; }
.sso-icon { display: flex; align-items: center; }

.auth-divider {
  display: flex; align-items: center; gap: 12px;
  margin: 22px 0;
  font-size: 11px;
  color: var(--color-text-tertiary);
}
.auth-divider::before, .auth-divider::after {
  content: ''; flex: 1; height: 1px;
  background: var(--color-border-tertiary);
}

.auth-form { display: flex; flex-direction: column; gap: 14px; }
.form-row { display: flex; flex-direction: column; gap: 6px; }
.form-row label { font-size: 12px; font-weight: 500; color: var(--color-text-primary); }
.form-row input {
  padding: 10px 12px;
  border-radius: var(--border-radius-md);
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  font-size: 14px;
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-row input:focus {
  border-color: var(--color-accent);
  box-shadow: 0 0 0 3px rgba(216,90,48,0.12);
}

/* パスワード入力＋表示切替トグル */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; padding-right: 44px; width: 100%; }
.password-toggle {
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  color: var(--color-text-tertiary);
  cursor: pointer;
  font-size: 15px;
  padding: 0;
  transition: color .15s;
}
.password-toggle:hover { color: var(--color-accent); }

.form-aux {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; flex-wrap: wrap; gap: 6px;
}
.checkbox-inline {
  display: flex; align-items: center; gap: 6px;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.checkbox-inline input { accent-color: var(--color-accent); }
.link-muted { color: var(--color-text-secondary); text-decoration: none; }
.link-muted:hover { color: var(--color-accent); text-decoration: underline; }

.auth-submit {
  margin-top: 4px;
  padding: 12px;
  border: none;
  background: var(--color-accent);
  color: white;
  font-weight: 600;
  font-size: 14px;
  border-radius: var(--border-radius-md);
  cursor: pointer;
  transition: background .15s, transform .05s;
}
.auth-submit:hover { background: var(--color-accent-dark); }
.auth-submit:active { transform: scale(0.99); }

.auth-error {
  padding: 10px 12px;
  background: var(--color-accent-light);
  color: var(--color-accent-text);
  border-radius: var(--border-radius-md);
  font-size: 12px;
}

.auth-foot {
  margin-top: 20px; text-align: center;
  font-size: 13px; color: var(--color-text-secondary);
}

/* ============================================
   メインアプリ
   ============================================ */
.app-shell {
  width: 100%;
  min-height: 100vh;
  /* スマホで子要素が画面幅を超えても横スクロール（左端見切れ）が起きないようにする保険 */
  overflow-x: hidden;
}

.app-frame {
  background: var(--color-background-primary);
  min-height: 100vh;
  overflow-x: hidden;
  max-width: 100%;
}
#web-screen { display: block; overflow-x: hidden; max-width: 100%; }

/* ヘッダー（全幅・上部固定） */
.w-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 0 28px;
  height: 60px;
  border-bottom: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  position: sticky; top: 0; z-index: 50;
  box-shadow: var(--shadow-sm);
}
.w-logo {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 16px;
  flex-shrink: 0;
}
.w-logo-mark {
  width: 30px; height: 30px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.w-logo-mark img {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.w-header-center {
  display: flex; align-items: center; gap: 16px;
  flex: 1; justify-content: center; max-width: 720px; margin: 0 auto;
}
.w-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }

.w-nav { display: flex; gap: 4px; font-size: 13px; flex-shrink: 0; }
.w-nav-item {
  padding: 6px 12px; border-radius: var(--border-radius-md);
  color: var(--color-text-secondary); cursor: pointer;
  transition: all .12s;
}
.w-nav-item.active {
  background: var(--color-accent-light);
  color: var(--color-accent-text); font-weight: 600;
}
.w-nav-item:hover { background: var(--color-background-secondary); }

.w-search {
  flex: 1; min-width: 200px; max-width: 420px; padding: 8px 14px;
  border: 1px solid var(--color-border-tertiary);
  border-radius: 999px;
  font-size: 13px;
  background: var(--color-background-secondary);
  outline: none;
  transition: all .12s;
}
.w-search:focus { border-color: var(--color-accent); background: var(--color-background-primary); }
/* textareaは複数行入力。pill型(999px)だと縦に伸ばした際に丸い角がテキストを隠すため、
   控えめな角丸＋上下余白でテキスト先頭が切れないようにする */
textarea.w-search {
  border-radius: 18px;
  padding: 12px 16px;
  line-height: 1.6;
  max-width: 100%;
}

.w-userbox {
  display: flex; align-items: center; gap: 8px;
  padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
  transition: background .12s;
}
.w-userbox:hover { background: var(--color-background-secondary); }
.w-userbox-name { font-size: 12px; color: var(--color-text-secondary); font-weight: 500; }
.w-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--color-accent-light); color: var(--color-accent-text);
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; flex-shrink: 0;
}
.w-logout {
  width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  color: var(--color-text-secondary); cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; transition: all .12s;
}
.w-logout:hover { background: var(--color-accent-light); color: var(--color-accent-text); border-color: var(--color-accent-light); }

/* グリッド（全幅・全高） */
.w-grid-3 {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr) 300px;
  min-height: calc(100vh - 60px);
}
.w-grid-2 {
  display: grid;
  grid-template-columns: 232px minmax(0, 1fr);
  min-height: calc(100vh - 60px);
}
.w-side {
  background: var(--color-background-secondary);
  padding: 18px 12px;
  border-right: 1px solid var(--color-border-tertiary);
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); overflow-y: auto;
}
.w-side-section {
  font-size: 10px; color: var(--color-text-tertiary);
  text-transform: uppercase; letter-spacing: 0.05em;
  padding: 14px 8px 4px;
}
.w-side-section:first-child { padding-top: 2px; }
.w-side-item {
  padding: 8px 12px; font-size: 13px; margin-bottom: 1px;
  border-radius: var(--border-radius-md);
  cursor: pointer; color: var(--color-text-secondary);
  display: flex; align-items: center; justify-content: space-between;
  transition: background .1s;
}
.w-side-item.active {
  background: var(--color-background-primary);
  color: var(--color-accent); font-weight: 600;
  box-shadow: var(--shadow-sm);
}
.w-side-item:hover { background: var(--color-background-primary); }
.w-side-badge {
  background: var(--color-accent); color: white;
  font-size: 9px; padding: 1px 6px; border-radius: 999px;
  font-weight: 600;
}

/* ===== その他機能メニュー（スマホ用） ===== */
.more-menu { display: flex; flex-direction: column; gap: 22px; }
.more-group-title {
  font-size: 13px; font-weight: 700; color: var(--color-text-secondary);
  margin-bottom: 10px; display: flex; align-items: center; gap: 7px;
}
.more-group-title i { color: var(--color-accent); opacity: .9; }
.more-grid {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.more-card {
  display: flex; align-items: center; gap: 12px; text-align: left;
  background: var(--color-background-secondary, #fff);
  border: 1px solid var(--color-border, #e5e7eb);
  border-radius: 12px; padding: 13px 14px; cursor: pointer;
  width: 100%; transition: background .15s ease, border-color .15s ease, transform .05s ease;
}
.more-card:hover { background: var(--color-background-primary); border-color: var(--color-accent); }
.more-card:active { transform: scale(.98); }
.more-card-ico {
  position: relative; flex: none;
  width: 40px; height: 40px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-background-primary, #f3f4f6);
  color: var(--color-accent); font-size: 17px;
}
.more-card-badge {
  position: absolute; top: -5px; right: -5px;
  background: var(--color-accent); color: #fff;
  font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 17px; height: 17px; padding: 0 4px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}
.more-card-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.more-card-label { font-size: 13.5px; font-weight: 600; color: var(--color-text-primary); line-height: 1.3; }
.more-card-sub { font-size: 11px; color: var(--color-text-tertiary); }
.more-card-arrow { color: var(--color-text-tertiary); font-size: 12px; flex: none; opacity: .55; }
.more-logout-wrap { margin-top: 4px; }
.more-logout {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: transparent; border: 1px solid var(--color-border, #e5e7eb);
  color: var(--color-danger-fg, #d6455d); border-radius: 12px;
  padding: 13px; font-size: 13.5px; font-weight: 600; cursor: pointer;
}
.more-logout:hover { background: var(--color-danger-bg, rgba(214,69,93,.08)); border-color: var(--color-danger-fg, #d6455d); }
@media (max-width: 480px) {
  .more-grid { grid-template-columns: 1fr; }
}
.w-main {
  padding: 28px 36px; overflow-y: auto;
  max-width: 1080px; width: 100%; margin: 0 auto;
}
.w-rail {
  background: var(--color-background-secondary);
  padding: 20px 16px;
  border-left: 1px solid var(--color-border-tertiary);
  position: sticky; top: 60px; align-self: start;
  height: calc(100vh - 60px); overflow-y: auto;
}

/* ===== 終了案件のクローズ誘導 ===== */
.rail-close-banner {
  background: linear-gradient(135deg, #fff7ed, #ffedd5);
  border: 1px solid #fbbf24;
  border-radius: 12px;
  padding: 12px 13px;
  margin-bottom: 16px;
}
.rail-close-head { font-size: 12.5px; font-weight: 700; color: #92400e; margin-bottom: 5px; }
.rail-close-head i { margin-right: 4px; }
.rail-close-sub { font-size: 10.5px; color: #b45309; line-height: 1.6; margin-bottom: 10px; }
.rail-close-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 6px; }
.rail-close-title { font-size: 11.5px; font-weight: 600; color: #7c2d12; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.rail-close-more { font-size: 10px; color: #b45309; margin-top: 6px; text-align: center; }
.rail-close-btn {
  flex: 0 0 auto;
  background: #f59e0b; color: #fff; border: none;
  border-radius: 7px; padding: 5px 10px;
  font-size: 11px; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s;
}
.rail-close-btn:hover { background: #d97706; }
.rail-close-btn i { margin-right: 3px; }
.rail-close-btn-full { width: 100%; margin-top: 7px; padding: 6px; }

/* 案件カードの状態バッジ */
.rail-state { font-size: 9px; font-weight: 700; padding: 2px 6px; border-radius: 5px; white-space: nowrap; flex: 0 0 auto; }
.rail-state-open { background: #dbeafe; color: #1d4ed8; }
.rail-state-finished { background: #fef3c7; color: #b45309; }
.rail-state-closed { background: #e5e7eb; color: #6b7280; }

/* 案件掲示板のサブタブ（すべての案件 / 募集中案件） */
.board-tab {
  border: none;
  background: transparent;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text-secondary);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color .15s, border-color .15s;
}
.board-tab:hover { color: var(--color-text-primary); }
.board-tab-active { color: var(--color-accent); border-bottom-color: var(--color-accent); }
.board-tab-badge {
  display: inline-block;
  min-width: 16px;
  padding: 0 5px;
  font-size: 10px;
  line-height: 16px;
  text-align: center;
  border-radius: 8px;
  background: var(--color-accent);
  color: #fff;
  font-weight: 700;
}
.board-tab-badge:empty { display: none; }

.w-h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.w-sub { font-size: 13px; color: var(--color-text-secondary); margin: 0 0 20px; }
.w-h2 { font-size: 15px; font-weight: 600; margin: 22px 0 10px; }

.w-stat-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 10px; margin-bottom: 16px;
}
.w-stat {
  background: var(--color-background-secondary);
  padding: 10px 12px; border-radius: var(--border-radius-md);
}
.w-stat-label { font-size: 11px; color: var(--color-text-secondary); }
.w-stat-value { font-size: 18px; font-weight: 600; margin-top: 2px; }
.w-stat-trend { font-size: 10px; margin-top: 1px; }

.w-card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  padding: 12px 14px; margin-bottom: 10px;
  transition: box-shadow .12s;
  box-sizing: border-box; max-width: 100%;
}
/* フォーム入力(.w-search)は padding を含めて幅100%に収める（枠外防止） */
input.w-search, textarea.w-search, select.w-search { box-sizing: border-box; }
.w-card:hover { box-shadow: var(--shadow-sm); }

.w-pill {
  display: inline-block; font-size: 10px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-background-secondary);
  color: var(--color-text-secondary);
  margin-right: 4px;
  font-weight: 500;
}
.w-pill-coral { background: var(--color-accent-light); color: var(--color-accent-text); }
.w-pill-teal { background: var(--color-success-bg); color: var(--color-success-fg); }
.w-pill-blue { background: var(--color-info-bg); color: var(--color-info-fg); }
.w-pill-amber { background: var(--color-warning-bg); color: var(--color-warning-fg); }
.w-pill-purple { background: var(--color-purple-bg); color: var(--color-purple-fg); }
.w-pill-gray { background: var(--color-background-primary); color: var(--color-text-tertiary); border: 1px solid var(--color-border-tertiary); }

/* ===== ダッシュボード右レール：応募中/メッセージ/投稿案件 ===== */
.dash-rail-section { margin-bottom: 22px; }
.dash-rail-section:last-child { margin-bottom: 0; }
.dash-rail-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px; font-weight: 600; color: var(--color-text-primary);
  margin-bottom: 10px;
}
.dash-rail-more {
  font-size: 10px; font-weight: 500; color: var(--color-info-fg);
  cursor: pointer; text-decoration: none;
}
.dash-rail-more:hover { text-decoration: underline; }
.dash-rail-card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md);
  padding: 10px; margin-bottom: 8px; cursor: pointer;
  transition: border-color .15s, box-shadow .15s;
}
.dash-rail-card:last-child { margin-bottom: 0; }
.dash-rail-card:hover {
  border-color: var(--color-info-fg);
  box-shadow: 0 1px 4px rgba(0,0,0,.06);
}
.w-pill-priority {
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 8px; border-radius: 999px;
  background: linear-gradient(135deg, #f6c453, #e8a317);
  color: #5a3c00; font-weight: 700; white-space: nowrap;
  box-shadow: 0 1px 2px rgba(232,163,23,0.35);
}
.w-pill-priority i { font-size: 0.85em; }

.w-btn-primary {
  background: var(--color-accent); color: white; border: none;
  padding: 7px 14px; border-radius: var(--border-radius-md);
  font-size: 12px; font-weight: 600; cursor: pointer;
  transition: background .12s;
}
.w-btn-primary:hover { background: var(--color-accent-dark); }

.w-btn-outline {
  background: transparent;
  border: 1px solid var(--color-border-tertiary);
  padding: 6px 12px; border-radius: var(--border-radius-md);
  font-size: 12px; cursor: pointer;
  color: var(--color-text-primary);
  transition: background .12s;
}
.w-btn-outline:hover { background: var(--color-background-secondary); }

.w-row { display: flex; justify-content: space-between; align-items: center; }

.w-search-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
}
.w-result-card {
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s, box-shadow .12s;
}
.w-result-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.w-result-img {
  aspect-ratio: 4/3;
  background: var(--color-background-secondary);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; color: var(--color-text-tertiary);
}

/* ===== ダッシュボード新着機材：グリッド／リスト表示 ===== */
.dash-view-toggle .dash-view-btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
  color: var(--color-text-tertiary);
  border-radius: 8px; cursor: pointer; font-size: 13px;
  transition: all .12s;
}
.dash-view-toggle .dash-view-btn:hover { color: var(--color-text-secondary); }
.dash-view-toggle .dash-view-btn.active {
  background: var(--color-accent); color: #fff; border-color: var(--color-accent);
}
/* グリッド：1画面に複数枚見える小型カード（自動列数） */
.dash-grid-wrap {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px;
}
.dash-grid-img { aspect-ratio: 16/10; }
/* リスト：横並びコンパクト行 */
.dash-list-wrap { display: flex; flex-direction: column; gap: 8px; }
.dash-list-row {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px;
  background: var(--color-background-primary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 10px; cursor: pointer;
  transition: background .12s, box-shadow .12s;
}
.dash-list-row:hover { box-shadow: var(--shadow-sm); background: var(--color-background-secondary); }
.dash-list-thumb {
  flex: 0 0 auto; width: 56px; height: 56px;
  border-radius: 8px; overflow: hidden;
  background: var(--color-background-secondary);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-tertiary); font-size: 16px;
}

/* ===== 探す：検索結果リスト行（新構造・スマホ最適化） ===== */
.srch-row {
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px;
  padding: 12px 14px;
  margin-bottom: 10px;
  background: var(--color-background-primary);
  cursor: pointer;
  transition: box-shadow .12s, background .12s;
}
.srch-row:hover { box-shadow: var(--shadow-sm); background: var(--color-background-secondary); }
.srch-row-top { display: flex; align-items: flex-start; gap: 12px; }
.srch-thumb {
  flex: 0 0 auto; width: 72px; height: 72px;
  border-radius: 10px; overflow: hidden;
  background: var(--color-background-secondary);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-tertiary); font-size: 20px;
}
.srch-body { flex: 1 1 auto; min-width: 0; }
.srch-pills { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.srch-title {
  font-weight: 700; font-size: 14px; line-height: 1.4;
  margin-bottom: 3px;
  /* タイトルは最大2行で省略（縦積み防止＋読める） */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.srch-meta { font-size: 11px; color: var(--color-text-secondary); line-height: 1.5; }
.srch-skills { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 5px; }
/* 価格バー：本文の下に全幅で配置（左：機材のみ／右：オペ込） */
.srch-price {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  margin-top: 10px; padding-top: 9px;
  border-top: 1px solid var(--color-border-tertiary);
}
.srch-price-only { font-size: 11px; color: var(--color-text-secondary); }
.srch-price-only strong { font-weight: 700; color: var(--color-text-primary); font-size: 12px; }
.srch-price-op { font-size: 16px; font-weight: 700; color: var(--color-accent); white-space: nowrap; }
.srch-price-op-label { font-size: 10px; color: var(--color-text-tertiary); font-weight: 400; }

.w-filter-section {
  padding: 10px 4px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.w-filter-title {
  font-size: 11px; font-weight: 600;
  margin-bottom: 8px;
}
.w-checkbox {
  display: flex; align-items: center; gap: 6px;
  font-size: 11px; padding: 3px 0;
  color: var(--color-text-secondary);
  cursor: pointer;
}
.w-checkbox input { accent-color: var(--color-accent); }
/* 詳細検索トグルボタン */
.w-filter-detail-btn {
  display: flex; align-items: center; gap: 6px;
  width: 100%; margin-top: 10px; padding: 8px 10px;
  background: var(--color-bg-tertiary, #f5f3ef); border: 1px solid var(--color-border-tertiary, #e5e1d8);
  border-radius: 10px; font-size: 12px; font-weight: 600;
  color: var(--color-text-secondary, #666); cursor: pointer; transition: all .15s;
}
.w-filter-detail-btn:hover { border-color: var(--color-accent, #e2583e); color: var(--color-accent, #e2583e); }
.w-filter-detail-btn .fa-chevron-down, .w-filter-detail-btn .fa-chevron-up { margin-left: auto; font-size: 10px; }

.w-cal-grid {
  display: grid; grid-template-columns: repeat(7, 1fr);
  gap: 4px;
}
.w-cal-cell {
  aspect-ratio: 4/3;
  border-radius: var(--border-radius-md);
  padding: 6px; font-size: 11px;
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-primary);
}
.w-cal-free { background: var(--color-success-bg); border-color: #9FE1CB; color: #04342C; }
.w-cal-busy { background: var(--color-accent-light); border-color: #F5C4B3; color: #4A1B0C; }
.w-cal-tent { background: var(--color-warning-bg); border-color: #FAC775; color: #412402; }

/* ===== メッセージ画面レイアウト（LINE風：画面の高さいっぱい・入力欄を最下部固定） ===== */
.msg-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  /* ヘッダー(60px)を除いた画面の高さいっぱい */
  height: calc(100vh - 60px);
  min-height: 480px;
  overflow: hidden;
}
.msg-chat-pane {
  display: flex;
  flex-direction: column;
  min-height: 0;        /* flex子のはみ出し防止（スクロールを効かせる） */
  overflow: hidden;
}
/* 相手情報ヘッダー（固定） */
.msg-chat-header {
  flex-shrink: 0;
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
/* メッセージ一覧（残りの高さをすべて使ってスクロール） */
.msg-chat-window {
  flex: 1 1 auto;
  min-height: 0;
  padding: 14px 16px;
  overflow-y: auto;
}
/* 入力欄（最下部固定） */
.msg-chat-input {
  flex-shrink: 0;
  padding: 10px 16px;
  border-top: 1px solid var(--color-border-tertiary);
}
/* メッセージ入力フィールドは .w-search の max-width:420px 制限を解除して
   送信ボタン以外の残り幅をすべて使う（入力幅を広く） */
.msg-input-field { flex: 1 1 auto; max-width: 100%; min-width: 0; }

/* チャットの「戻る」ボタン（スマホのみ表示） */
.msg-back-btn {
  display: none;
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-primary); font-size: 18px;
  width: 40px; height: 40px; border-radius: 50%;
  flex-shrink: 0; margin-right: 4px;
  align-items: center; justify-content: center;
}
.msg-back-btn:active { background: var(--color-background-secondary); }
.msg-chat-header { display: flex; align-items: center; }
.msg-chat-header > .w-row { flex: 1 1 auto; min-width: 0; }

.w-msg-list {
  border-right: 1px solid var(--color-border-tertiary);
  overflow-y: auto;
  min-height: 0;
}
.w-msg-item {
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border-tertiary);
  cursor: pointer;
}
.w-msg-item.active { background: var(--color-background-secondary); }
.w-msg-item:hover { background: var(--color-background-secondary); }

/* チャット一覧の「…」管理ボタン（ホバーで表示） */
.w-msg-menu-btn {
  border: none;
  background: transparent;
  color: var(--color-text-tertiary);
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1;
  opacity: 0;
  transition: opacity .15s, background .15s, color .15s;
}
.w-msg-item:hover .w-msg-menu-btn { opacity: 1; }
.w-msg-menu-btn:hover { background: var(--color-border-tertiary); color: var(--color-text-primary); }
/* タッチデバイスでは常時表示（ホバーが効かないため） */
@media (hover: none) {
  .w-msg-menu-btn { opacity: 1; }
}

/* 管理メニュー（ポップオーバー） */
.gc-thread-menu {
  position: absolute;
  z-index: 1000;
  width: 200px;
  background: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-secondary, #d0d7de);
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.gc-tm-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  border: none;
  background: transparent;
  padding: 9px 10px;
  border-radius: 7px;
  font-size: 13px;
  color: var(--color-text-primary, #1f2328);
  cursor: pointer;
}
.gc-tm-item i { width: 16px; text-align: center; color: var(--color-text-secondary); }
.gc-tm-item:hover { background: var(--color-background-secondary, #f6f8fa); }
.gc-tm-item.gc-tm-danger { color: var(--color-danger-fg, #cf222e); }
.gc-tm-item.gc-tm-danger i { color: var(--color-danger-fg, #cf222e); }
.gc-tm-item.gc-tm-danger:hover { background: var(--color-danger-bg, #ffebe9); }

/* アーカイブ一覧の各行 */
.gc-arch-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 8px;
  border-bottom: 1px solid var(--color-border-tertiary);
}
.gc-arch-item:last-child { border-bottom: none; }

/* ===== Slack風メッセージ通知トースト ===== */
.gc-notify-box {
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: 360px;
  pointer-events: none;
}
.gc-notify-card {
  pointer-events: auto;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-secondary, #d0d7de);
  border-left: 4px solid var(--color-info-fg, #0969da);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.20);
  padding: 12px 14px;
  cursor: pointer;
  animation: gcNotifyIn .28s cubic-bezier(.2,.9,.3,1.2);
  transition: opacity .25s, transform .25s;
}
.gc-notify-card:hover { background: var(--color-background-secondary, #f6f8fa); }
.gc-notify-card.gc-notify-out { opacity: 0; transform: translateX(20px); }
.gc-notify-avatar {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--color-info-bg, #ddf4ff);
  color: var(--color-info-fg, #0969da);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  font-weight: 700;
}
.gc-notify-body { min-width: 0; flex: 1; }
.gc-notify-title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-primary, #1f2328);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 2px;
}
.gc-notify-text {
  font-size: 12px;
  color: var(--color-text-secondary, #57606a);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.gc-notify-close {
  flex-shrink: 0;
  border: none;
  background: transparent;
  color: var(--color-text-tertiary, #8c959f);
  cursor: pointer;
  font-size: 13px;
  padding: 2px 4px;
  border-radius: 6px;
  line-height: 1;
}
.gc-notify-close:hover { background: var(--color-border-tertiary, #eaeef2); color: var(--color-text-primary); }
@keyframes gcNotifyIn {
  from { opacity: 0; transform: translateX(30px); }
  to   { opacity: 1; transform: translateX(0); }
}
@media (max-width: 480px) {
  .gc-notify-box { left: 12px; right: 12px; max-width: none; }
}

/* メッセージ1件の行（吹き出し＋メタ情報をまとめる） */
.msg-row { display: flex; flex-direction: column; margin-bottom: 10px; max-width: 100%; }
.msg-row.me { align-items: flex-end; }
.msg-row.them { align-items: flex-start; }

.msg-them {
  background: var(--color-background-secondary);
  padding: 8px 12px; border-radius: 14px 14px 14px 2px;
  width: fit-content; max-width: 100%;     /* wrap内で伸縮（実際の上限はwrapのmax-width） */
  font-size: 12px; line-height: 1.5;
  white-space: pre-wrap;                   /* 改行はそのまま・行内は自然に折り返す */
  overflow-wrap: break-word; word-break: normal;
}
.msg-me {
  background: var(--color-accent); color: white;
  padding: 8px 12px; border-radius: 14px 14px 2px 14px;
  width: fit-content; max-width: 100%;     /* wrap内で伸縮（実際の上限はwrapのmax-width） */
  font-size: 12px; line-height: 1.5;
  white-space: pre-wrap;                   /* 改行はそのまま・行内は自然に折り返す */
  overflow-wrap: break-word; word-break: normal;
}
/* 送信日時・既読の表示 */
.msg-meta {
  font-size: 9px; color: var(--color-text-tertiary);
  margin-top: 2px; display: flex; gap: 6px; align-items: center;
}
.msg-meta .msg-read { color: var(--color-accent); font-weight: 600; }
.msg-meta .msg-edited { color: var(--color-text-tertiary); font-style: italic; }

/* 取り消し（論理削除）されたメッセージのプレースホルダ */
.msg-deleted {
  background: transparent !important; color: var(--color-text-tertiary) !important;
  border: 1px dashed var(--color-border-tertiary);
  padding: 8px 12px; border-radius: 14px;
  max-width: 85%; width: fit-content;
  font-size: 12px; font-style: italic; line-height: 1.5;
  white-space: normal; overflow-wrap: break-word; word-break: normal;
}

/* グループ：システムメッセージ（入退室など）の中央表示 */
.msg-system { text-align: center; margin: 10px 0; }
.msg-system span {
  display: inline-block; background: var(--color-border-tertiary);
  color: var(--color-text-secondary); font-size: 11px;
  padding: 4px 12px; border-radius: 12px; line-height: 1.4;
}

/* グループ：相手の発言上に表示する送信者名 */
.msg-sender-name {
  font-size: 11px; color: var(--color-text-secondary);
  margin: 0 0 2px 2px; font-weight: 600;
}

/* グループ作成・メンバー追加の選択肢行 */
.gc-member-opt {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 8px; cursor: pointer;
}
.gc-member-opt:hover { background: var(--color-border-tertiary); }
.gc-member-opt input[type=checkbox] { width: 16px; height: 16px; cursor: pointer; }

/* 吹き出し＋操作メニューの横並びラッパ（LINE風に横幅を広く＝最大85%） */
.msg-bubble-wrap { display: flex; align-items: center; gap: 4px; max-width: 85%; min-width: 0; }
.msg-row.me .msg-bubble-wrap { flex-direction: row; }   /* メニューを吹き出しの左に */
.msg-row.them .msg-bubble-wrap { flex-direction: row; }

/* 操作メニュー（⋯ボタン＋ポップアップ） */
.msg-menu { position: relative; flex-shrink: 0; }
.msg-menu-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-tertiary); font-size: 16px; line-height: 1;
  padding: 2px 6px; border-radius: 6px; opacity: 0;
  transition: opacity .15s, background .15s;
}
.msg-row:hover .msg-menu-btn { opacity: .7; }
.msg-menu-btn:hover { opacity: 1; background: var(--color-background-secondary); }
.msg-menu-pop {
  display: none; position: absolute; top: 100%; right: 0; z-index: 30;
  background: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 8px; box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 130px; padding: 4px; margin-top: 2px;
}
.msg-menu-pop.open { display: block; }
.msg-menu-pop button {
  display: block; width: 100%; text-align: left;
  border: none; background: transparent; cursor: pointer;
  font-size: 12px; padding: 7px 10px; border-radius: 6px;
  color: var(--color-text-primary);
}
.msg-menu-pop button:hover { background: var(--color-background-secondary); }
.msg-menu-pop button.danger { color: var(--color-danger-fg, #d33); }

/* ===== 添付ファイル ===== */
/* 本文吹き出し＋添付を縦に積むスタック */
.msg-bubble-stack { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.msg-row.me .msg-bubble-stack { align-items: flex-end; }
.msg-row.them .msg-bubble-stack { align-items: flex-start; }

/* 画像サムネ */
.msg-attach-img-link { display: inline-block; line-height: 0; }
.msg-attach-img {
  max-width: 220px; max-height: 220px; width: auto; height: auto;
  border-radius: 12px; cursor: pointer; object-fit: cover;
  border: 1px solid var(--color-border-tertiary);
}
/* ファイルカード（画像以外） */
.msg-attach {
  display: flex; align-items: center; gap: 8px;
  background: var(--color-background-secondary);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 12px; padding: 10px 12px;
  font-size: 12px; color: var(--color-text-primary);
  text-decoration: none; max-width: 260px; min-width: 180px;
}
.msg-attach:hover { background: var(--color-background-tertiary, #eee); }
.msg-attach i.fa-file { font-size: 18px; color: var(--color-accent); }
.msg-attach-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.msg-attach-size { color: var(--color-text-tertiary); font-size: 10px; flex-shrink: 0; }
.msg-attach-expired {
  background: transparent; border: 1px dashed var(--color-border-tertiary);
  color: var(--color-text-tertiary); font-style: italic; font-size: 11px;
  display: flex; align-items: center; gap: 6px; min-width: 0;
}

/* 添付ボタン（クリップ） */
.msg-attach-btn {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font-size: 16px;
  padding: 6px 8px; border-radius: 8px; flex-shrink: 0;
  transition: background .15s, color .15s;
}
.msg-attach-btn:hover { background: var(--color-background-secondary); color: var(--color-accent); }
/* 添付ファイルを一時保持中（プレビュー状態）はクリップアイコンを強調 */
.msg-attach-btn.has-file { color: var(--color-accent); background: var(--color-accent-light); }

/* ===== 添付ファイルのプレビュー（送信前の一時保持・複数可） ===== */
.msg-attach-preview {
  margin-bottom: 8px;
  background: var(--color-accent-light); border: 1px solid var(--color-accent);
  border-radius: 10px; padding: 8px 10px;
}
.msg-preview-head {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  margin-bottom: 6px;
}
.msg-preview-head span {
  font-size: 11px; font-weight: 600; color: var(--color-accent-text);
  display: inline-flex; align-items: center; gap: 5px;
}
.msg-preview-clearall {
  border: none; background: transparent; cursor: pointer; flex-shrink: 0;
  color: var(--color-accent-text); font-size: 11px; font-weight: 600;
  text-decoration: underline; padding: 2px 4px;
}
.msg-preview-clearall:hover { color: #dc2626; }
/* 複数添付は横スクロールのリスト */
.msg-preview-list {
  display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px;
}
.msg-preview-item {
  display: flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--color-border-tertiary);
  border-radius: 8px; padding: 6px 8px; flex: 0 0 auto; max-width: 220px;
}
.msg-preview-thumb {
  width: 40px; height: 40px; object-fit: cover; border-radius: 6px; flex-shrink: 0;
  border: 1px solid var(--color-border-tertiary); background: #fff;
}
.msg-preview-fileicon {
  width: 40px; height: 40px; flex-shrink: 0; border-radius: 6px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-light); border: 1px solid var(--color-border-tertiary);
  color: var(--color-accent); font-size: 18px;
}
.msg-preview-meta { flex: 1; min-width: 0; }
.msg-preview-name {
  font-size: 12px; font-weight: 600; color: var(--color-text-primary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 120px;
}
.msg-preview-size { font-size: 10.5px; color: var(--color-text-tertiary); margin-top: 2px; }
.msg-preview-remove {
  flex-shrink: 0; border: none; background: transparent; cursor: pointer;
  color: var(--color-text-secondary); font-size: 14px; padding: 4px 6px; border-radius: 6px;
  transition: background .15s, color .15s;
}
.msg-preview-remove:hover { background: var(--color-accent-light); color: #dc2626; }

/* ===== リアクション（既読代わりのスタンプ） ===== */
.msg-reacts { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 3px; align-items: center; }
.msg-row.me .msg-reacts { justify-content: flex-end; }
.msg-row.them .msg-reacts { justify-content: flex-start; }
.msg-react-chip {
  border: 1px solid var(--color-border-tertiary);
  background: var(--color-background-secondary);
  border-radius: 12px; padding: 1px 8px; font-size: 11px;
  cursor: pointer; line-height: 1.6; color: var(--color-text-secondary);
  transition: background .15s, border-color .15s;
}
.msg-react-chip:hover { background: var(--color-background-tertiary, #eee); }
.msg-react-chip.mine {
  background: var(--color-accent-bg, rgba(220,90,50,.12));
  border-color: var(--color-accent); color: var(--color-accent); font-weight: 600;
}
/* リアクション追加ボタン（顔アイコン） */
.msg-react-add {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-tertiary); font-size: 12px;
  padding: 1px 5px; border-radius: 10px; opacity: 0;
  transition: opacity .15s, background .15s;
}
.msg-row:hover .msg-react-add { opacity: .6; }
.msg-react-add:hover { opacity: 1; background: var(--color-background-secondary); }
/* リアクション選択パレット（浮動） */
.msg-react-pop {
  z-index: 50; display: flex; gap: 2px;
  background: var(--color-background-primary, #fff);
  border: 1px solid var(--color-border-tertiary);
  border-radius: 22px; padding: 4px 6px;
  box-shadow: 0 6px 24px rgba(0,0,0,.18);
}
.msg-react-pop button {
  border: none; background: transparent; cursor: pointer;
  font-size: 20px; line-height: 1; padding: 4px 6px; border-radius: 50%;
  transition: transform .1s, background .15s;
}
.msg-react-pop button:hover { transform: scale(1.25); background: var(--color-background-secondary); }

.w-table { width: 100%; font-size: 12px; border-collapse: collapse; }
.w-table th {
  text-align: left; font-weight: 600;
  padding: 8px 10px; font-size: 11px;
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-border-tertiary);
}
.w-table td {
  padding: 10px; border-bottom: 1px solid var(--color-border-tertiary);
}
.w-table tr:hover td { background: var(--color-background-secondary); }

/* ============================================
   レスポンシブ
   ============================================ */
@media (max-width: 1100px) {
  .auth-wrap { grid-template-columns: 1fr; }
  .auth-left { padding: 40px 30px; }
  .auth-right { padding: 30px; }
  .auth-hero { font-size: 32px; }
  /* 右レールはたたむ */
  .w-grid-3 { grid-template-columns: 200px minmax(0, 1fr); }
  .w-grid-2 { grid-template-columns: 200px minmax(0, 1fr); }
  .w-rail { display: none; }
  .w-main { padding: 24px 28px; }
  .w-search-grid { grid-template-columns: repeat(2, 1fr); }
  .w-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .w-header-center { display: none; }
}

/* ===== 機材/案件 詳細ページのレイアウト（PCは2カラム・スマホは1カラム）===== */
.w-detail-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 320px;
  gap: 24px;
  align-items: start;
}
.w-detail-main { min-width: 0; }          /* グリッド内ではみ出さないように */
.w-detail-side { min-width: 0; }
.w-detail-sticky { position: sticky; top: 0; }

@media (max-width: 768px) {
  /* ===== 機材/案件 詳細：スマホでは1カラム縦積み（料金・予約パネルを上に）===== */
  .w-detail-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
  }
  .w-detail-sticky { position: static; }

  /* 詳細ページ本体の左右余白を詰めてはみ出しを防ぐ */
  #detail-body, #jobdetail-body { padding: 14px 14px 24px !important; }

  /* ===== メッセージ画面：LINEアプリ風（一覧 or チャットのどちらかを全画面表示）===== */
  .msg-layout {
    display: block;            /* グリッド解除 */
    position: relative;
    /* 一覧表示時はヘッダー(60)＋下部タブバー(58)を除いた高さ */
    height: calc(100vh - 60px - 60px - max(env(safe-area-inset-bottom, 0px), 6px));
    height: calc(100dvh - 60px - 60px - max(env(safe-area-inset-bottom, 0px), 6px));
    overflow: hidden;
  }
  /* チャットを開いたら全画面（タブバーを隠す）→ ヘッダーぶんだけ引く */
  .msg-layout.chat-open { height: calc(100vh - 60px); height: calc(100dvh - 60px); }
  /* 既定：スレッド一覧を全画面表示、チャットは隠す */
  .w-msg-list {
    width: 100%; height: 100%;
    max-height: none;
    border-right: none; border-bottom: none;
  }
  .msg-chat-pane {
    position: absolute; inset: 0;
    background: var(--color-background-primary, #fff);
    transform: translateX(100%);          /* 画面外（右）に待機 */
    transition: transform .22s ease;
    z-index: 5;
  }
  /* スレッドを開いたら：チャットをスライドインして全画面表示 */
  .msg-layout.chat-open .msg-chat-pane { transform: translateX(0); }
  .msg-layout.chat-open .w-msg-list { display: none; }
  /* チャットの戻るボタンを表示 */
  .msg-back-btn { display: inline-flex; }
  /* チャットヘッダー内の「プロフィール」ボタンは省スペース化 */
  .msg-chat-header .w-btn-outline { font-size: 11px; padding: 6px 10px; }
  .msg-attach-img { max-width: 70vw; }
  /* スレッド一覧の各項目をタップしやすく＆文字を読みやすく */
  .w-msg-item { padding: 14px 14px; }
  .w-msg-item > .w-row > span:first-child { font-size: 15px !important; }
  .w-msg-item > div:nth-child(2) { font-size: 13px !important; }
  .w-msg-item .w-msg-menu-btn { opacity: .55; padding: 6px 8px; font-size: 16px; }
  /* 入力欄を押しやすく（最小44px） */
  .msg-chat-input { padding: 8px 10px; }
  .msg-input-field { min-height: 42px; font-size: 16px; } /* 16px=iOSズーム防止 */
  .msg-chat-input .w-btn-primary { min-height: 42px; padding: 0 16px; }
  .msg-attach-btn { min-width: 40px; min-height: 40px; }
  /* 吹き出しを少し広く＆文字を読みやすく */
  .msg-bubble-wrap { max-width: 90%; }
  .msg-me, .msg-them { font-size: 15px; padding: 9px 13px; }
  .msg-meta { font-size: 10px; }
  .msg-sender-name { font-size: 11px; }
  /* スマホでは操作メニュー（⋯）を常時うっすら表示（hoverが無いため） */
  .msg-menu-btn { opacity: .45; }
  /* 一覧ヘッダーのボタンを押しやすく */
  .w-msg-list .w-btn-outline { padding: 7px 12px !important; font-size: 12px !important; }

  /* ===== レイアウト：左サイドバーは廃止し、下部タブバーに集約 ===== */
  /* minmax(0,1fr) が重要：1fr 単体だと最小幅が min-content になり、
     中の広い要素（テーブル等）が列をviewport超に押し広げて左端見切れの原因になる */
  .w-grid-3, .w-grid-2 { grid-template-columns: minmax(0, 1fr); min-height: 0; min-width: 0; }
  .w-side { display: none; }       /* 横スクロールバーをやめてボトムナビへ */
  .w-rail { display: none; }
  .w-main { padding: 16px 14px; max-width: 100%; min-width: 0; box-sizing: border-box; }

  /* ヘッダー：検索バーを表示（ナビのテキストリンクは隠す＝ボトムナビへ） */
  .w-header { gap: 8px; }
  .w-header-center { display: flex; flex: 1 1 auto; min-width: 0; padding: 0 6px; }
  .w-header-center .w-nav { display: none; }
  /* 検索入力の min-width を解除して、ヘッダーが画面幅を超えないようにする */
  .w-header-center #global-search,
  .w-header-center .w-search { width: 100%; max-width: 100%; min-width: 0; font-size: 16px; }

  /* タップ操作性：主要ボタン・入力の最小高さ確保 */
  .w-btn-primary, .w-btn-outline { min-height: 40px; }
  .w-search { font-size: 16px; }   /* iOSの自動ズーム防止 */

  /* カードグリッドは1列 */
  .w-search-grid { grid-template-columns: 1fr; }

  /* ===== 案件掲示板：テーブルをスマホではカード表示に変換 ===== */
  /* thead を隠し、各 tr をカード、各 td を「ラベル: 値」の行にする */
  #board-list-view { display: block; width: 100%; border: none; }
  #board-list-view thead { display: none; }
  #board-list-view tbody { display: block; }
  #board-list-view tr {
    display: block;
    border: 1px solid var(--color-border-tertiary);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 12px;
    background: var(--color-background-primary);
    box-shadow: var(--shadow-sm);
  }
  #board-list-view tr:hover td { background: transparent; }
  #board-list-view td {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border: none;
    font-size: 13px;
    white-space: normal;
    word-break: break-word;
  }
  /* 各セルの先頭にラベルを表示（data-label） */
  #board-list-view td::before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--color-text-tertiary);
    min-width: 56px;
  }
  /* 案件タイトルセルは全幅・ラベル非表示・下線で区切る */
  #board-list-view td.bt-title {
    display: block;
    padding: 0 0 10px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--color-border-tertiary);
  }
  #board-list-view td.bt-title::before { display: none; }
  /* 値側を右寄せ・折返し可に */
  #board-list-view td > *:not(.bt-title) { text-align: right; }
  #board-list-view td.bt-title > * { text-align: left; }
  /* empty 行（colspan）はラベル不要 */
  #board-list-view td[colspan]::before { display: none; }
  #board-list-view td[colspan] { display: block; }

  /* 案件掲示板のパネル(グリッド)表示も1列に（inline minmax を上書き） */
  #board-panel-view > div { grid-template-columns: 1fr !important; }

  /* ===== ダッシュボード新着機材：リスト行をスマホ向けに再構成（価格を下段へ） ===== */
  .dash-list-row {
    flex-wrap: wrap;
    align-items: flex-start;
    padding: 12px 14px;
    gap: 12px;
  }
  .dash-list-thumb { width: 64px; height: 64px; }
  .dash-list-row > div:nth-child(2) { flex: 1 1 0; min-width: 0; }
  .dash-list-row > div:nth-child(2) > div:first-child span:last-child {
    white-space: normal !important;
    overflow: visible !important;
    text-overflow: clip !important;
    line-height: 1.4;
  }
  /* 価格列を全幅で本文の下へ。区切り線を入れて見やすく */
  .dash-list-row > div:last-child {
    flex: 1 0 100%;
    text-align: left !important;
    white-space: normal !important;
    display: flex;
    align-items: baseline;
    gap: 14px;
    padding-top: 8px;
    margin-top: 2px;
    border-top: 1px solid var(--color-border-tertiary);
  }

  /* 探す：サムネを少し小さく＆余白を詰める（スマホ） */
  .srch-row { padding: 11px 12px; }
  .srch-thumb { width: 64px; height: 64px; }
}

@media (max-width: 600px) {
  .auth-hero { font-size: 26px; }
  .auth-left { padding: 30px 20px; }
  .auth-right { padding: 20px; }
  .w-search-grid { grid-template-columns: 1fr; }
  .w-stat-grid { grid-template-columns: repeat(2, 1fr); }
  .w-header { padding: 0 14px; }
  .w-userbox-name { display: none; }
  .w-logo span { display: none; }
}

/* ===== 法的ページ ===== */
.legal-wrap { max-width: 880px; margin: 0 auto; padding: 0 20px 60px; color: var(--color-text-primary, #1a1a2e); }
.legal-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 20px 0; border-bottom: 1px solid #eaeaf0; margin-bottom: 24px; }
.legal-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-weight: 700; }
.legal-brand .brand-mark { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.legal-nav { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; }
.legal-nav a { color: #555; text-decoration: none; }
.legal-nav a.active { color: #6366f1; font-weight: 700; }
.legal-nav a.legal-back { color: #6366f1; }
.legal-notice { background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 12px 16px; font-size: 13px; color: #9a3412; margin-bottom: 28px; }
.legal-notice i { margin-right: 6px; }
.legal-article h1 { font-size: 24px; margin-bottom: 6px; }
.legal-article h2 { font-size: 16px; margin: 26px 0 8px; padding-top: 10px; border-top: 1px solid #f0f0f5; }
.legal-article p { line-height: 1.9; font-size: 14px; color: #333; margin: 4px 0; }
.legal-article ol, .legal-article ul { margin: 6px 0 6px 1.4em; padding: 0; }
.legal-article ol > li, .legal-article ul > li { line-height: 1.9; font-size: 14px; color: #333; margin: 2px 0; }
.legal-article ol { list-style: decimal; }
.legal-article ul { list-style: disc; }
.legal-article li ul { margin-top: 4px; margin-bottom: 4px; }
.legal-article strong { font-weight: 700; color: #1a1a2e; }
.legal-note { background: #f8f8fc; border-left: 3px solid #c7c7d8; border-radius: 6px; padding: 10px 16px; margin: 14px 0; }
.legal-note p { font-size: 13px; color: #555; line-height: 1.8; margin: 6px 0; }
.legal-updated { color: #999; font-size: 12px; margin-top: 28px; margin-bottom: 16px; }
.legal-table { width: 100%; border-collapse: collapse; margin-top: 12px; font-size: 14px; }
.legal-table th, .legal-table td { border: 1px solid #eaeaf0; padding: 10px 12px; text-align: left; vertical-align: top; }
.legal-table th { background: #f8f8fc; width: 30%; font-weight: 600; }
.legal-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid #eaeaf0; text-align: center; font-size: 12px; color: #999; }
.legal-footer a { color: #6366f1; text-decoration: none; }

/* ============================================================
   はじめての方向け 使い方ガイド（/guide マニュアルページ）
   ============================================================ */
.guide-wrap { max-width: 920px; margin: 0 auto; padding: 0 20px 80px; color: var(--color-text-primary, #1a1a2e); }
.guide-header { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding: 18px 0; border-bottom: 1px solid #eaeaf0; margin-bottom: 8px; position: sticky; top: 0; background: rgba(255,255,255,.92); backdrop-filter: blur(6px); z-index: 20; }
.guide-brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: inherit; font-weight: 800; font-size: 17px; }
.guide-brand .brand-mark { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; }
.guide-brand .brand-mark img { width: 100%; height: 100%; object-fit: contain; }
.guide-headnav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; font-size: 13px; }
.guide-headnav a { color: #555; text-decoration: none; }
.guide-headnav a.active { color: var(--color-primary, #f25c2a); font-weight: 700; }
.guide-headnav a.guide-back { color: #555; }
.guide-headnav a.guide-cta { background: var(--color-primary, #f25c2a); color: #fff; padding: 7px 14px; border-radius: 8px; font-weight: 700; }
.guide-headnav a.guide-cta:hover { filter: brightness(1.05); }

/* ヒーロー */
.guide-hero { text-align: center; padding: 40px 16px 28px; }
.guide-hero-badge { display: inline-flex; align-items: center; gap: 6px; background: #fff1ea; color: var(--color-primary, #f25c2a); font-weight: 700; font-size: 12.5px; padding: 6px 14px; border-radius: 999px; }
.guide-hero h1 { font-size: 30px; margin: 16px 0 12px; line-height: 1.3; }
.guide-hero > p { font-size: 15px; line-height: 1.95; color: #444; max-width: 720px; margin: 0 auto; }
.guide-hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 22px; }
.guide-btn-primary { display: inline-flex; align-items: center; gap: 8px; background: var(--color-primary, #f25c2a); color: #fff; font-weight: 700; padding: 12px 22px; border-radius: 10px; text-decoration: none; }
.guide-btn-primary:hover { filter: brightness(1.05); }
.guide-btn-ghost { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: #333; font-weight: 700; padding: 12px 22px; border-radius: 10px; text-decoration: none; border: 1.5px solid #e5e1d8; }
.guide-btn-ghost:hover { border-color: var(--color-primary, #f25c2a); color: var(--color-primary, #f25c2a); }
.guide-hero-note { font-size: 12.5px; color: #888; margin-top: 18px; }
.guide-hero-note i { margin-right: 5px; }

/* クイックスタート */
.guide-quickstart { background: linear-gradient(135deg, #fff4ef, #fff9f3); border: 1px solid #f7d9c9; border-radius: 14px; padding: 24px 26px; margin: 8px 0 14px; }
.guide-quickstart h2 { font-size: 18px; margin: 0 0 8px; display: flex; align-items: center; gap: 9px; }
.guide-quickstart h2 i { color: var(--color-primary, #f25c2a); }
.guide-quickstart-lead { font-size: 13.5px; line-height: 1.85; color: #555; margin: 0 0 16px; }
.guide-qs-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.guide-qs-step { display: flex; gap: 12px; align-items: flex-start; background: #fff; border: 1px solid #f0e3da; border-radius: 10px; padding: 14px; }
.guide-qs-num { width: 28px; height: 28px; border-radius: 50%; background: var(--color-primary, #f25c2a); color: #fff; font-weight: 800; font-size: 14px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.guide-qs-step strong { font-size: 14px; display: block; margin-bottom: 4px; }
.guide-qs-step p { font-size: 12.5px; line-height: 1.75; color: #555; margin: 0; }
.guide-qs-step b { font-weight: 700; color: #1a1a2e; }
.guide-qs-foot { font-size: 13px; color: #1e8e3e; font-weight: 600; margin: 16px 0 0; }
.guide-qs-foot i { margin-right: 6px; }

/* 目次 */
.guide-toc { background: #faf9f6; border: 1px solid #ece8df; border-radius: 12px; padding: 18px 22px; margin: 18px 0 32px; }
.guide-toc-title { font-weight: 800; font-size: 14px; margin-bottom: 10px; color: #333; }
.guide-toc-title i { margin-right: 6px; color: var(--color-primary, #f25c2a); }
.guide-toc ol { columns: 2; column-gap: 28px; margin: 0; padding: 0; list-style: none; counter-reset: gtoc; }
.guide-toc li { line-height: 1.6; font-size: 13.5px; break-inside: avoid; counter-increment: gtoc; padding: 4px 0; }
.guide-toc a { color: #444; text-decoration: none; display: flex; align-items: baseline; gap: 8px; }
.guide-toc a::before { content: counter(gtoc); display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; background: #fff; border: 1px solid #e3d6c9; border-radius: 5px; color: var(--color-primary, #f25c2a); font-weight: 700; font-size: 11px; flex-shrink: 0; }
.guide-toc a:hover { color: var(--color-primary, #f25c2a); }
.guide-toc a:hover::before { background: var(--color-primary, #f25c2a); color: #fff; border-color: var(--color-primary, #f25c2a); }

/* セクション共通 */
.guide-section { padding: 26px 0; border-top: 1px solid #f0eee8; scroll-margin-top: 80px; }
.guide-section h2 { font-size: 20px; margin: 0 0 14px; display: flex; align-items: center; gap: 10px; }
.guide-sec-no { display: inline-flex; align-items: center; justify-content: center; min-width: 30px; height: 30px; background: var(--color-primary, #f25c2a); color: #fff; border-radius: 8px; font-size: 14px; font-weight: 800; }
.guide-section > p { font-size: 14.5px; line-height: 1.95; color: #444; }
.guide-h3 { font-size: 15px; margin: 20px 0 8px; font-weight: 700; }

/* カードグリッド */
.guide-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 16px 0 8px; }
.guide-card { border: 1px solid #ece8df; border-radius: 12px; padding: 18px; background: #fff; }
.guide-card-ico { width: 44px; height: 44px; border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 20px; margin-bottom: 12px; }
.guide-ico-blue { background: #e8f0fe; color: #1a73e8; }
.guide-ico-green { background: #e6f4ea; color: #1e8e3e; }
.guide-ico-purple { background: #f3e8fd; color: #8430ce; }
.guide-card h3 { font-size: 15px; margin: 0 0 6px; }
.guide-card p { font-size: 13px; line-height: 1.8; color: #555; margin: 0; }

/* 2カラム種別カード */
.guide-twocol { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; }
.guide-typecard { border: 1px solid #ece8df; border-radius: 12px; padding: 18px; background: #fff; }
.guide-typecard-head { font-weight: 800; font-size: 15px; margin-bottom: 8px; display: flex; align-items: center; gap: 8px; color: #1a1a2e; }
.guide-typecard-head i { color: var(--color-primary, #f25c2a); }
.guide-typecard p { font-size: 13px; line-height: 1.85; color: #555; margin: 0; }

/* ステップ・リスト */
.guide-steps { margin: 10px 0 10px 0; padding-left: 1.4em; }
.guide-steps li { line-height: 1.95; font-size: 14px; color: #333; margin: 6px 0; }
.guide-list { margin: 10px 0; padding-left: 1.3em; list-style: disc; }
.guide-list li { line-height: 1.95; font-size: 14px; color: #333; margin: 6px 0; }
.guide-small { font-size: 12.5px; color: #888; }
.guide-small a, .guide-list a, .guide-section > p a, .guide-typecard a { color: var(--color-primary, #f25c2a); }

/* コールアウト（注意・ヒント） */
.guide-callout { display: flex; gap: 12px; align-items: flex-start; border-radius: 10px; padding: 14px 16px; margin: 16px 0; font-size: 13.5px; line-height: 1.85; }
.guide-callout i { font-size: 16px; margin-top: 2px; flex-shrink: 0; }
.guide-callout-info { background: #eef4ff; border: 1px solid #cfe0ff; color: #1d3a6b; }
.guide-callout-info i { color: #1a73e8; }
.guide-callout-tip { background: #fff8e8; border: 1px solid #ffe3a3; color: #7a5b00; }
.guide-callout-tip i { color: #d99a00; }
.guide-callout-warn { background: #fdeee9; border: 1px solid #f7c9b8; color: #8a3010; }
.guide-callout-warn i { color: var(--color-primary, #f25c2a); }
.guide-callout strong { font-weight: 800; }
.guide-callout a { color: inherit; text-decoration: underline; }

/* ナビ一覧テーブル風 */
.guide-nav-table { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.guide-nav-row { display: flex; gap: 14px; align-items: flex-start; border: 1px solid #ece8df; border-radius: 10px; padding: 14px 16px; background: #fff; }
.guide-nav-ico { width: 38px; height: 38px; border-radius: 9px; background: #faf3ef; color: var(--color-primary, #f25c2a); display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; }
.guide-nav-row strong { font-size: 14.5px; }
.guide-nav-row p { font-size: 13px; line-height: 1.8; color: #555; margin: 3px 0 0; }

/* フロー */
.guide-flow { display: flex; flex-direction: column; gap: 0; margin: 16px 0; }
.guide-flow-step { display: flex; gap: 16px; align-items: flex-start; padding: 0 0 18px; position: relative; }
.guide-flow-step:not(:last-child)::before { content: ""; position: absolute; left: 17px; top: 36px; bottom: 0; width: 2px; background: #f0d9cf; }
.guide-flow-num { width: 36px; height: 36px; border-radius: 50%; background: var(--color-primary, #f25c2a); color: #fff; font-weight: 800; display: flex; align-items: center; justify-content: center; flex-shrink: 0; z-index: 1; }
.guide-flow-step strong { font-size: 14.5px; }
.guide-flow-step p { font-size: 13px; line-height: 1.8; color: #555; margin: 3px 0 0; }

/* チェックリスト */
.guide-checklist { list-style: none; margin: 12px 0; padding: 0; }
.guide-checklist li { display: flex; gap: 10px; align-items: flex-start; line-height: 1.9; font-size: 14px; color: #333; margin: 8px 0; }
.guide-checklist li i { color: #1e8e3e; margin-top: 4px; flex-shrink: 0; }

/* FAQ */
.guide-faq { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }
.guide-faq details { border: 1px solid #ece8df; border-radius: 10px; background: #fff; overflow: hidden; }
.guide-faq summary { cursor: pointer; padding: 14px 16px; font-weight: 700; font-size: 14px; list-style: none; position: relative; padding-right: 40px; }
.guide-faq summary::-webkit-details-marker { display: none; }
.guide-faq summary::after { content: "\f067"; font-family: "Font Awesome 6 Free"; font-weight: 900; position: absolute; right: 16px; top: 14px; color: var(--color-primary, #f25c2a); font-size: 12px; transition: transform .2s; }
.guide-faq details[open] summary::after { content: "\f068"; }
.guide-faq details p { padding: 0 16px 14px; font-size: 13.5px; line-height: 1.85; color: #555; margin: 0; }

/* 用語集 */
.guide-glossary { margin: 14px 0; }
.guide-glossary dt { font-weight: 800; font-size: 14px; color: #1a1a2e; margin-top: 14px; padding-left: 14px; border-left: 3px solid var(--color-primary, #f25c2a); }
.guide-glossary dd { font-size: 13.5px; line-height: 1.8; color: #555; margin: 4px 0 0 17px; }

/* お問い合わせ */
.guide-contact { display: flex; flex-direction: column; gap: 8px; background: #faf9f6; border: 1px solid #ece8df; border-radius: 10px; padding: 16px 18px; margin: 12px 0; font-size: 14px; }
.guide-contact i { color: var(--color-primary, #f25c2a); margin-right: 8px; width: 16px; text-align: center; }
.guide-contact a { color: var(--color-primary, #f25c2a); }

/* CTAバンド */
.guide-cta-band { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; background: linear-gradient(135deg, #2a2a3e, #1a1a2e); color: #fff; border-radius: 14px; padding: 24px 28px; margin-top: 24px; }
.guide-cta-band strong { font-size: 17px; }
.guide-cta-band p { font-size: 13px; color: #c8c8d4; margin: 4px 0 0; }
.guide-cta-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.guide-cta-band .guide-btn-ghost { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.guide-cta-band .guide-btn-ghost:hover { border-color: #fff; color: #fff; }

/* フッター */
.guide-footer { margin-top: 48px; padding-top: 20px; border-top: 1px solid #eaeaf0; text-align: center; font-size: 12px; color: #999; }
.guide-footer a { color: var(--color-primary, #f25c2a); text-decoration: none; }

@media (max-width: 768px) {
  .guide-hero h1 { font-size: 23px; }
  .guide-toc ol { columns: 1; }
  .guide-cards { grid-template-columns: 1fr; }
  .guide-twocol { grid-template-columns: 1fr; }
  .guide-qs-steps { grid-template-columns: 1fr; }
  .guide-headnav a.guide-back { display: none; }
  .guide-cta-band { flex-direction: column; align-items: flex-start; }
}

/* ===== スマホ用 下部固定タブバー（ボトムナビ）===== */
/* PC（768px超）では非表示。スマホのみ表示する */
.mobile-tabbar { display: none; }
@media (max-width: 768px) {
  .mobile-tabbar {
    display: flex;
    position: fixed;
    left: 0; right: 0; bottom: 0;
    width: 100%; max-width: 100%;
    box-sizing: border-box;
    overflow: hidden;
    z-index: 60;
    background: var(--color-background-primary, #fff);
    border-top: 1px solid var(--color-border-tertiary, #e5e7eb);
    /* iPhoneのホームバー（セーフエリア）を考慮。
       viewport-fit=cover と併用。env が 0 の端末でも最低 6px は確保する */
    padding-bottom: max(env(safe-area-inset-bottom, 0px), 6px);
    box-shadow: 0 -2px 12px rgba(0,0,0,.06);
  }
  .mtab {
    flex: 1 1 0; min-width: 0;
    box-sizing: border-box;
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: 3px; padding: 8px 2px 7px;
    border: none; background: transparent; cursor: pointer;
    color: var(--color-text-tertiary, #8a8a99);
    font-size: 10px; line-height: 1.1;
    min-height: 52px;
    overflow: hidden;
    -webkit-tap-highlight-color: transparent;
  }
  .mtab.active { color: var(--color-accent, #6366f1); }
  .mtab-ico { position: relative; font-size: 19px; line-height: 1; }
  .mtab-label {
    font-size: 10px; white-space: nowrap;
    max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
  .mtab-badge {
    position: absolute; top: -6px; right: -10px;
    background: var(--color-danger-fg, #ef4444); color: #fff;
    font-size: 9px; line-height: 1; font-weight: 700;
    min-width: 16px; height: 16px; padding: 0 4px;
    border-radius: 9px; display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--color-background-primary, #fff);
  }
  /* タブバーの高さぶん、本体コンテンツの下に余白を確保（隠れ防止） */
  .app-frame { padding-bottom: calc(60px + max(env(safe-area-inset-bottom, 0px), 6px)); }
  /* チャット全画面中はタブバーを隠し、本体の下余白も無くす */
  body.gc-chat-open .mobile-tabbar { display: none; }
  body.gc-chat-open .app-frame { padding-bottom: 0; }
}

/* ===== トースト通知 ===== */
.gc-toast-box {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
}
.gc-toast {
  min-width: 220px;
  max-width: 360px;
  padding: 13px 18px;
  border-radius: 12px;
  background: #1a1a2e;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.5;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22);
  display: flex;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
  animation: gcToastIn 0.28s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.gc-toast i { font-size: 15px; }
.gc-toast-info { background: linear-gradient(135deg, #6366f1, #8b5cf6); }
.gc-toast-success { background: linear-gradient(135deg, #10b981, #059669); }
.gc-toast-error { background: linear-gradient(135deg, #ef4444, #dc2626); }
.gc-toast-out { animation: gcToastOut 0.3s ease forwards; }
@keyframes gcToastIn {
  from { opacity: 0; transform: translateX(24px) translateY(8px); }
  to { opacity: 1; transform: translateX(0) translateY(0); }
}
@keyframes gcToastOut {
  from { opacity: 1; transform: translateX(0); }
  to { opacity: 0; transform: translateX(24px); }
}

/* ===== モーダル ===== */
.gc-modal-back {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(15, 15, 35, 0.55);
  backdrop-filter: blur(3px);
  display: flex;
  align-items: center;
  justify-content: center;
  /* スクロールバー出現時でもモーダルが横にずれないよう中央軸を安定させる */
  scrollbar-gutter: stable both-edges;
  padding: 24px;
  animation: gcBackIn 0.2s ease;
}
.gc-modal {
  width: 100%;
  /* 左右余白を均等にしつつ入力しやすいよう幅を拡大 */
  max-width: 520px;
  margin: 0 auto;
  max-height: 90vh;
  overflow-y: auto;
  background: #fff;
  border-radius: 18px;
  padding: 30px 32px 26px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.3);
  animation: gcModalIn 0.26s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.gc-modal h3 {
  font-size: 18px;
  font-weight: 700;
  margin: 0 0 4px;
  color: #1a1a2e;
}
.gc-modal .gc-modal-sub {
  font-size: 13px;
  color: #777;
  margin: 0 0 16px;
}
.gc-modal .gc-modal-actions {
  display: flex;
  gap: 10px;
  margin-top: 18px;
}
.gc-modal .gc-modal-actions .w-btn-primary,
.gc-modal .gc-modal-actions .w-btn-outline {
  flex: 1;
  justify-content: center;
}
/* モーダル内の入力欄は .w-search の max-width:420px 制限を解除して
   フォーム幅いっぱいに広げる（右側に余白が出て左右非対称に見えるのを防ぐ） */
.gc-modal .w-search { max-width: 100%; min-width: 0; }

/* 発注書など項目数の多いフォーム向けの広幅モーダル */
.gc-modal-wide { max-width: 720px; }

/* 汎用フォーム入力（発注書フォーム等で使用） */
.w-input {
  border: 1px solid var(--color-border-tertiary, #e2e2ea);
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  font-family: inherit;
  color: #1a1a2e;
  background: #fff;
  box-sizing: border-box;
  outline: none;
  transition: border-color .15s;
}
.w-input:focus { border-color: var(--color-accent, #4a90e2); }

/* 発注書モーダルのタブ */
.po-tab { transition: color .15s, border-color .15s; }

/* ===== ポートフォリオ（実績）===== */
.pf-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
/* ===== プロフィール編集フォーム：活動エリア／電話番号の2カラム行 ===== */
.profile-row { display: flex; gap: 10px; }
.profile-field { flex: 1 1 0; min-width: 0; }
/* スマホでは縦2段に分ける（横並びだと重なるため） */
@media (max-width: 768px) {
  .profile-row { display: block; }
  .profile-field { margin-bottom: 4px; }
  .profile-field + .profile-field { margin-top: 8px; }
}

.pf-card {
  background: #fff;
  border: 1px solid var(--color-border-tertiary, #e2e2ea);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow .18s, transform .18s;
}
.pf-card:hover { box-shadow: 0 6px 20px rgba(0,0,0,.1); transform: translateY(-2px); }
.pf-thumb {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #111;
  overflow: hidden;
}
.pf-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-thumb-ph {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #aaa; font-size: 26px; background: linear-gradient(135deg,#2a2a3a,#1a1a2e);
}
.pf-thumb-link { text-decoration: none; }
.pf-thumb-link .pf-thumb-ph { background: linear-gradient(135deg,#3a4a5a,#2a3540); color: #cfe; }
.pf-play {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 46px; height: 46px; border-radius: 50%;
  background: rgba(0,0,0,.6); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 16px; padding-left: 3px; transition: background .15s;
}
.pf-thumb:hover .pf-play { background: var(--color-accent, #4a90e2); }
.pf-card-body { padding: 11px 13px 13px; display: flex; flex-direction: column; flex: 1; }
.pf-card-title { font-size: 13px; font-weight: 700; color: #1a1a2e; line-height: 1.4; margin-bottom: 3px; }
.pf-card-meta { font-size: 11px; color: #888; margin-bottom: 4px; }
.pf-card-desc {
  font-size: 11px; color: #666; line-height: 1.6;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
/* 応募者カード / 検索結果カードの「実績◯件」バッジ */
.pf-badge {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 10px; font-weight: 700; line-height: 1;
  padding: 3px 7px; border-radius: 999px; cursor: pointer;
  color: var(--color-accent, #2563eb);
  background: rgba(37, 99, 235, 0.10);
  border: 1px solid rgba(37, 99, 235, 0.25);
  transition: background 0.15s;
}
.pf-badge:hover { background: rgba(37, 99, 235, 0.20); }
/* 検索結果カード内の制作実績サムネ（グリッド表示用） */
.pf-search-thumb {
  position: relative; margin-top: 6px; border-radius: 7px; overflow: hidden;
  aspect-ratio: 16 / 9; cursor: pointer; background: #f1f1f1;
}
.pf-search-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pf-search-thumb-label {
  position: absolute; left: 6px; bottom: 6px;
  font-size: 10px; font-weight: 700; color: #fff;
  padding: 2px 7px; border-radius: 999px;
  background: rgba(0, 0, 0, 0.55); display: inline-flex; align-items: center; gap: 4px;
}
/* 検索結果リスト行内の制作実績サムネ（リスト表示用） */
.pf-list-thumb {
  flex: 0 0 auto; width: 64px; height: 40px; border-radius: 6px; overflow: hidden;
  cursor: pointer; background: #f1f1f1; align-self: center;
}
.pf-list-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* 案件投稿モーダル：左右パディングを完全に対称にし、幅も少し広げて窮屈さを解消。
   フォーム要素はすべて width:100% なので、外枠パディングを左右均等にすることで
   白枠の中身が左右対称に収まる。 */
.gc-modal-job {
  max-width: 480px;
  padding-left: 26px;
  padding-right: 26px;
}
.gc-modal-job * { box-sizing: border-box; }
@keyframes gcBackIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes gcModalIn {
  from { opacity: 0; transform: translateY(16px) scale(0.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ============================================================
   運営者専用 管理画面
   ============================================================ */
.adm-shell { display: flex; min-height: 100vh; background: #f4f5fa; font-family: 'Noto Sans JP', sans-serif; color: #1a1a2e; }

/* サイドバー */
.adm-sidebar { width: 240px; background: #15162b; color: #cdd0e0; display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; left: 0; }
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 20px 18px; border-bottom: 1px solid #26284a; }
.adm-brand-mark { width: 36px; height: 36px; display:flex; align-items:center; justify-content:center; }
.adm-brand-mark img { width: 100%; height: 100%; object-fit: contain; display: block; }
.adm-brand-name { font-weight: 700; color: #fff; font-size: 15px; }
.adm-brand-sub { font-size: 11px; color: #8a8db0; }
.adm-nav { flex: 1; padding: 12px 10px; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.adm-nav-item { display: flex; align-items: center; gap: 11px; width: 100%; text-align: left; background: none; border: none; color: #b6b9d4; padding: 11px 14px; border-radius: 9px; font-size: 13.5px; cursor: pointer; font-family: inherit; transition: background .15s, color .15s; }
.adm-nav-item i { width: 18px; text-align: center; font-size: 14px; }
.adm-nav-item:hover { background: #20223f; color: #fff; }
.adm-nav-item.active { background: linear-gradient(135deg,#6366f1,#8b5cf6); color: #fff; font-weight: 600; }
.adm-sidebar-foot { padding: 12px 10px 16px; border-top: 1px solid #26284a; display:flex; flex-direction: column; gap: 2px; }
.adm-foot-link { display:flex; align-items:center; gap:10px; background:none; border:none; color:#8a8db0; padding: 9px 14px; border-radius: 8px; font-size: 12.5px; cursor:pointer; text-decoration:none; font-family:inherit; }
.adm-foot-link:hover { background:#20223f; color:#fff; }

/* メイン */
.adm-main { flex: 1; margin-left: 240px; display: flex; flex-direction: column; }
.adm-topbar { height: 60px; background: #fff; border-bottom: 1px solid #e8e9f2; display: flex; align-items: center; justify-content: space-between; padding: 0 28px; position: sticky; top: 0; z-index: 10; }
.adm-topbar-title { font-size: 17px; font-weight: 700; }
.adm-whoami { font-size: 12.5px; color: #6b6e87; background:#f0f1f8; padding: 6px 12px; border-radius: 20px; }
.adm-whoami .adm-role-badge { margin-left: 6px; }
.adm-content { padding: 24px 28px 60px; }

/* KPIカード */
.adm-kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; }
.adm-kpi { background: #fff; border: 1px solid #ececf5; border-radius: 14px; padding: 16px 18px; }
.adm-kpi-label { font-size: 12px; color: #8a8db0; margin-bottom: 6px; display:flex; align-items:center; gap:6px; }
.adm-kpi-value { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.adm-kpi-sub { font-size: 11.5px; color: #9a9cb5; margin-top: 4px; }
.adm-kpi-accent .adm-kpi-value { color: #6366f1; }

/* セクション */
.adm-section { background:#fff; border:1px solid #ececf5; border-radius:14px; padding: 18px 20px; margin-bottom: 18px; }
.adm-section-title { font-size: 14px; font-weight: 700; margin-bottom: 14px; display:flex; align-items:center; gap: 8px; }
.adm-provider-grid { display:grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.adm-provider-card { border:1px solid #ececf5; border-radius:11px; padding: 14px; text-align:center; }
.adm-provider-card .pv-icon { font-size: 22px; margin-bottom: 6px; }
.adm-provider-card .pv-count { font-size: 22px; font-weight: 800; }
.adm-provider-card .pv-label { font-size: 12px; color:#8a8db0; }
.pv-google .pv-icon { color:#ea4335; }
.pv-line .pv-icon { color:#06c755; }
.pv-email .pv-icon { color:#6366f1; }

/* 簡易バーチャート */
.adm-chart { display:flex; align-items:flex-end; gap: 6px; height: 120px; padding-top: 10px; }
.adm-chart-bar { flex:1; background: linear-gradient(180deg,#8b5cf6,#6366f1); border-radius: 5px 5px 0 0; min-height: 3px; position: relative; }
.adm-chart-bar span { position:absolute; top:-18px; left:50%; transform:translateX(-50%); font-size:10px; color:#6b6e87; }
.adm-chart-labels { display:flex; gap:6px; margin-top:6px; }
.adm-chart-labels div { flex:1; text-align:center; font-size:9.5px; color:#9a9cb5; }

/* テーブル */
.adm-toolbar { display:flex; gap:10px; flex-wrap:wrap; align-items:center; margin-bottom: 14px; }
.adm-input { border:1px solid #d8d9e8; border-radius:9px; padding: 8px 12px; font-size: 13px; font-family:inherit; outline:none; }
.adm-input:focus { border-color:#6366f1; }
.adm-select { border:1px solid #d8d9e8; border-radius:9px; padding: 8px 12px; font-size: 13px; font-family:inherit; background:#fff; cursor:pointer; }
.adm-table-wrap { background:#fff; border:1px solid #ececf5; border-radius:14px; overflow:hidden; }
.adm-table { width:100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { background:#f7f8fc; text-align:left; padding: 11px 14px; font-weight:600; color:#6b6e87; font-size:12px; white-space:nowrap; border-bottom:1px solid #ececf5; }
.adm-table td { padding: 11px 14px; border-bottom:1px solid #f2f3f9; vertical-align: middle; }
.adm-table tr:last-child td { border-bottom:none; }
.adm-table tr:hover td { background:#fafbff; }
.adm-table .adm-row-click { cursor:pointer; }

/* バッジ */
.adm-badge { display:inline-block; padding: 2px 9px; border-radius: 20px; font-size: 11px; font-weight:600; }
.adm-badge-google { background:#fde8e6; color:#c5221f; }
.adm-badge-line { background:#e3f9ec; color:#04864b; }
.adm-badge-email { background:#eef0ff; color:#4f46e5; }
.adm-badge-admin { background:#fce8ff; color:#a21caf; }
.adm-badge-editor { background:#fff3da; color:#a15c00; }
.adm-badge-viewer { background:#eef1f6; color:#5b6172; }
.adm-badge-ok { background:#e3f9ec; color:#04864b; }
.adm-badge-warn { background:#fff3da; color:#a15c00; }
.adm-badge-muted { background:#eef1f6; color:#5b6172; }
.adm-badge-info { background:#e7ecfe; color:#3850c8; }

/* ===== 投稿内容の詳細モーダル ===== */
.adm-detail-head { border-bottom:1px solid #eef0f6; padding-bottom:12px; margin-bottom:14px; }
.adm-detail-body { font-size:13px; }
.adm-detail-label { font-size:11px; font-weight:700; color:#8a8da3; margin:14px 0 5px; text-transform:none; }
.adm-detail-label:first-child { margin-top:0; }
.adm-detail-text { font-size:13px; line-height:1.7; color:#3a3c4e; white-space:pre-wrap; word-break:break-word; }
.adm-detail-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.adm-detail-gallery { display:flex; flex-wrap:wrap; gap:8px; }
.adm-detail-thumb { width:84px; height:84px; object-fit:cover; border-radius:8px; cursor:pointer; border:1px solid #e6e8f0; transition:transform .12s; }
.adm-detail-thumb:hover { transform:scale(1.04); }
.adm-detail-file { width:84px; height:84px; border:1px solid #e6e8f0; border-radius:8px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:3px; text-decoration:none; color:#5b6172; font-size:11px; text-align:center; padding:4px; }
.adm-detail-file:hover { background:#f6f7fb; }
.adm-detail-file i { font-size:20px; color:#8b5cf6; }
.adm-detail-sched { margin:0; padding-left:18px; font-size:12.5px; line-height:1.9; color:#3a3c4e; }
.adm-detail-app { border:1px solid #eef0f6; border-radius:10px; padding:9px 11px; margin-bottom:7px; }
.adm-detail-foot { display:flex; gap:8px; justify-content:flex-end; margin-top:18px; padding-top:14px; border-top:1px solid #eef0f6; }
.adm-modal { max-width: 600px; }

/* ボタン */
.adm-btn { border:none; border-radius:9px; padding: 8px 14px; font-size: 13px; font-weight:600; cursor:pointer; font-family:inherit; }
.adm-btn-primary { background: linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }
.adm-btn-danger { background:#fee2e2; color:#dc2626; }
.adm-btn-danger:hover { background:#fecaca; }
.adm-btn-ghost { background:#f0f1f8; color:#4b4e63; }
.adm-btn-sm { padding: 5px 10px; font-size:12px; }

.adm-pill { display:inline-block; padding:5px 12px; border-radius:20px; font-size:12px; font-weight:600; background:#f0f1f8; color:#4b4e63; cursor:pointer; user-select:none; border:1px solid transparent; }
.adm-pill:hover { background:#e7e9f5; }
.adm-pill.active { background:linear-gradient(135deg,#6366f1,#8b5cf6); color:#fff; }

.adm-empty { text-align:center; padding: 40px; color:#9a9cb5; font-size: 13px; }
.adm-loading { text-align:center; padding: 40px; color:#9a9cb5; }
.adm-muted { color:#9a9cb5; font-size:12px; }

/* 詳細モーダル */
.adm-modal-back { position:fixed; inset:0; background:rgba(15,15,35,.55); backdrop-filter: blur(3px); z-index: 9000; display:flex; align-items:center; justify-content:center; padding: 20px; }
.adm-modal { background:#fff; border-radius:16px; width:100%; max-width: 560px; max-height: 88vh; overflow-y:auto; padding: 24px; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.adm-modal h3 { font-size: 17px; margin: 0 0 4px; }
.adm-modal-close { float:right; background:none; border:none; font-size:18px; color:#9a9cb5; cursor:pointer; }
.adm-detail-row { display:flex; justify-content:space-between; padding: 8px 0; border-bottom:1px solid #f2f3f9; font-size: 13px; }
.adm-detail-row .k { color:#8a8db0; }
.adm-detail-row .v { font-weight:600; text-align:right; }
/* ユーザー区分（個人/法人）切替トグル */
.adm-role-switch { display:inline-flex; gap:4px; }
.adm-roletoggle {
  display:inline-flex; align-items:center; gap:4px;
  padding:4px 12px; border:1px solid #d8d9e6; border-radius:999px;
  background:#fff; color:#8a8db0; font-size:12px; font-weight:700; cursor:pointer;
  transition: all .15s;
}
.adm-roletoggle:hover { border-color:#6366f1; color:#6366f1; }
.adm-roletoggle.active { background:#6366f1; border-color:#6366f1; color:#fff; }
.adm-roletoggle.active:hover { color:#fff; }
.adm-roletoggle-sm { padding:3px 9px; font-size:11px; }
.adm-roletoggle-sm i { font-size:10px; }
/* 区分バッジ（一覧表示用・変更不可。変更は名前クリック→詳細から） */
.adm-kind-badge {
  display:inline-flex; align-items:center; gap:5px;
  padding:3px 11px; border-radius:999px; font-size:12px; font-weight:700;
}
.adm-kind-badge i { font-size:10px; }
.adm-kind-owner { background:#eef0fb; color:#5b5fc7; }
.adm-kind-b2b { background:#fdeede; color:#c2761a; }
.adm-kind-client { background:#e6f6f0; color:#1f9d6b; }
/* ソート可能なテーブルヘッダー */
.adm-th-sort { cursor:pointer; user-select:none; white-space:nowrap; }
.adm-th-sort:hover { color:#6366f1; }
.adm-sort-icon { margin-left:3px; font-size:10px; color:#c2c4d8; }
.adm-sort-icon.active { color:#6366f1; }
.adm-sublist { margin-top: 8px; }
.adm-sublist-item { font-size:12.5px; padding:6px 10px; background:#f7f8fc; border-radius:8px; margin-bottom:5px; display:flex; justify-content:space-between; }

.adm-access-denied { max-width: 460px; margin: 80px auto; text-align:center; background:#fff; border:1px solid #ececf5; border-radius:16px; padding: 40px; }
.adm-access-denied i { font-size: 40px; color:#cbd0e0; margin-bottom: 16px; }
.adm-access-denied h2 { font-size: 18px; margin-bottom: 8px; }
.adm-access-denied p { color:#6b6e87; font-size: 13.5px; line-height: 1.7; }
.adm-access-denied a { color:#6366f1; }

@media (max-width: 820px) {
  .adm-sidebar { width: 64px; }
  .adm-brand-name, .adm-brand-sub, .adm-nav-item span, .adm-foot-link span { display:none; }
  .adm-nav-item { justify-content:center; }
  .adm-main { margin-left: 64px; }
  .adm-kpi-grid { grid-template-columns: repeat(2,1fr); }
  .adm-provider-grid { grid-template-columns: 1fr; }
}

/* ============================================
   空き枠カレンダー (Calendar)
   ============================================ */
.cal-monthnav { display:flex; align-items:center; gap:8px; }
.cal-navbtn {
  width:32px; height:32px; border:1px solid var(--color-border-tertiary);
  background:var(--color-background-primary); border-radius:var(--border-radius-md);
  cursor:pointer; color:var(--color-text-secondary); font-size:13px; transition:.15s;
}
.cal-navbtn:hover { background:var(--color-background-secondary); color:var(--color-text-primary); }
.cal-monthlabel { font-weight:700; font-size:15px; min-width:118px; text-align:center; }
.cal-todaybtn {
  margin-left:4px; padding:6px 12px; border:1px solid var(--color-border-tertiary);
  background:var(--color-background-primary); border-radius:var(--border-radius-md);
  cursor:pointer; font-size:12px; color:var(--color-text-secondary); transition:.15s;
}
.cal-todaybtn:hover { background:var(--color-background-secondary); color:var(--color-text-primary); }

.cal-legend { display:flex; flex-wrap:wrap; gap:16px; font-size:12px; margin-bottom:14px; color:var(--color-text-secondary); align-items:center; }
.cal-legend > span { display:inline-flex; align-items:center; gap:5px; }
.cal-swatch { display:inline-block; width:11px; height:11px; border-radius:3px; }
.cal-sw-available { background:#9FE1CB; }
.cal-sw-tentative { background:#FAC775; }
.cal-sw-confirmed { background:#F5A38B; }
.cal-legend-hint { color:var(--color-text-tertiary); margin-left:auto; }

.cal-weekhead { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; margin-bottom:6px; }
.cal-weekday { text-align:center; font-size:11px; font-weight:600; color:var(--color-text-secondary); padding:4px 0; }
.cal-weekday.cal-sun { color:#C2410C; }
.cal-weekday.cal-sat { color:#0C447C; }

.cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:6px; }
.cal-cell {
  min-height:78px; border:1px solid var(--color-border-tertiary);
  border-radius:var(--border-radius-md); padding:4px; background:var(--color-background-primary);
  cursor:pointer; transition:.12s; display:flex; flex-direction:column; overflow:hidden;
}
.cal-cell:hover { border-color:var(--color-accent); box-shadow:0 2px 8px rgba(216,90,48,.12); }
.cal-cell.cal-empty { border:none; background:transparent; cursor:default; }
.cal-cell.cal-empty:hover { box-shadow:none; }
.cal-cell.cal-today { border-color:var(--color-accent); border-width:2px; }
.cal-daynum { font-size:12px; font-weight:600; color:var(--color-text-primary); margin-bottom:3px; line-height:1; }
.cal-daynum.cal-sun { color:#C2410C; }
.cal-daynum.cal-sat { color:#0C447C; }

.cal-slots { display:flex; flex-direction:column; gap:3px; flex:1; }
.cal-slot { border-radius:4px; padding:2px 4px; font-size:9px; line-height:1.25; display:flex; flex-direction:column; gap:1px; overflow:hidden; }
.cal-slot-tag { font-size:8px; font-weight:700; opacity:.7; }
.cal-slot-txt { font-size:9px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.cal-half { flex:1; min-height:18px; }
.cal-allday { flex:1; justify-content:center; align-items:flex-start; min-height:46px; }
.cal-none { background:var(--color-background-secondary); color:var(--color-text-tertiary); }
.cal-available { background:#D6F2E8; color:#085041; }
.cal-tentative { background:#FCE7C5; color:#633806; }
.cal-confirmed { background:#FBD9CD; color:#9A2C0E; }
.cal-gmark { font-size:7px; margin-left:3px; opacity:.85; }

/* Googleカレンダー連携バー */
.gcal-bar { margin-bottom:14px; }
.gcal-card { display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  border:1px solid var(--color-border-tertiary); border-radius:var(--border-radius-md);
  background:var(--color-background-primary); padding:14px 16px; }
.gcal-card.gcal-connected { border-color:#bbf7d0; background:#f0fdf4; }
.gcal-card.gcal-muted { color:var(--color-text-tertiary); font-size:12px; justify-content:flex-start; }
.gcal-info { display:flex; align-items:flex-start; gap:12px; flex:1; min-width:200px; }
.gcal-gicon { font-size:20px; color:#4285F4; margin-top:2px; }
.gcal-title { font-weight:700; font-size:13px; color:var(--color-text-primary); margin-bottom:2px; display:flex; align-items:center; gap:6px; }
.gcal-desc { font-size:11px; color:var(--color-text-secondary); line-height:1.6; }
.gcal-actions { display:flex; gap:8px; flex-wrap:wrap; }
.gcal-btn { font-size:12px; padding:8px 14px; white-space:nowrap; }
.gcal-danger { color:#dc2626; }
.gcal-danger:hover { background:#fef2f2; }
.cal-gnote { font-size:11px; line-height:1.6; color:#1e40af; background:#eff6ff; border:1px solid #bfdbfe;
  border-radius:8px; padding:9px 12px; margin-bottom:14px; }

/* カレンダー編集モーダル */
/* 外枠(.gc-modal)のpaddingを打ち消し、ヘッダ/ボディ/フッタが全幅を使うようにする。
   これにより中身がはみ出して横スクロールが出るのを防ぐ。
   .gc-modal-cal クラス指定と :has() の両方で確実に効かせる */
.gc-modal-cal,
.gc-modal:has(.cal-modal) { padding: 0; max-width: 520px; overflow: hidden; }
.cal-modal { width: 100%; box-sizing: border-box; }
.gc-modal-head { display:flex; align-items:center; justify-content:space-between; padding:16px 20px; border-bottom:1px solid var(--color-border-tertiary); }
.gc-modal-x { background:none; border:none; cursor:pointer; font-size:18px; color:var(--color-text-tertiary); width:30px; height:30px; border-radius:6px; transition:.15s; }
.gc-modal-x:hover { background:var(--color-background-secondary); color:var(--color-text-primary); }
.cal-modal-body { padding:18px 20px; }
.cal-mode-tabs { display:flex; gap:0; margin-bottom:18px; border:1px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); overflow:hidden; }
.cal-mode-tab { flex:1; padding:8px; background:var(--color-background-primary); border:none; cursor:pointer; font-size:12px; color:var(--color-text-secondary); transition:.15s; }
.cal-mode-tab + .cal-mode-tab { border-left:1px solid var(--color-border-tertiary); }
.cal-mode-tab.active { background:var(--color-accent); color:#fff; font-weight:600; }
.cal-edit-row { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.cal-edit-label { font-size:13px; font-weight:600; color:var(--color-text-primary); display:flex; align-items:center; gap:6px; }
.cal-edit-label i { color:var(--color-text-tertiary); }
.cal-st-group { display:flex; gap:5px; flex-wrap:wrap; }
.cal-st-btn { padding:5px 10px; border:1px solid var(--color-border-tertiary); background:var(--color-background-primary); border-radius:16px; cursor:pointer; font-size:11px; color:var(--color-text-secondary); transition:.12s; }
.cal-st-btn:hover { border-color:var(--color-text-secondary); }
.cal-st-btn.active.cal-st-available { background:#D6F2E8; border-color:#085041; color:#085041; font-weight:600; }
.cal-st-btn.active.cal-st-tentative { background:#FCE7C5; border-color:#633806; color:#633806; font-weight:600; }
.cal-st-btn.active.cal-st-confirmed { background:#FBD9CD; border-color:#9A2C0E; color:#9A2C0E; font-weight:600; }
.cal-st-btn.active.cal-st-clear { background:var(--color-text-secondary); border-color:var(--color-text-secondary); color:#fff; font-weight:600; }
.cal-note { width:100%; box-sizing:border-box; padding:7px 10px; border:1px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); font-size:12px; margin-top:4px; }
.cal-note:focus { outline:none; border-color:var(--color-accent); }
.cal-modal-foot { display:flex; align-items:center; gap:8px; padding:14px 20px; border-top:1px solid var(--color-border-tertiary); flex-wrap:wrap; }

/* 時刻ベース編集UI */
.cal-modal-body { max-height:62vh; overflow-y:auto; }
.cal-quick { display:flex; flex-wrap:wrap; align-items:center; gap:6px; margin-bottom:14px; padding-bottom:14px; border-bottom:1px dashed var(--color-border-tertiary); }
.cal-quick-lbl { font-size:11px; color:var(--color-text-secondary); width:100%; margin-bottom:2px; }
/* クイック追加ボタンは折り返して常に枠内に収める（横はみ出し防止） */
.cal-quick-btn { flex:1 1 auto; min-width:0; white-space:nowrap; padding:6px 10px; border:1px solid var(--color-border-tertiary); background:var(--color-background-primary); border-radius:8px; cursor:pointer; font-size:11px; color:var(--color-text-secondary); transition:.12s; }
.cal-quick-btn:hover { border-color:var(--color-accent); color:var(--color-accent); }
.cal-quick-btn i { margin-right:3px; }
.cal-slot-row { border:1px solid var(--color-border-tertiary); border-radius:var(--border-radius-md); padding:10px 12px; margin-bottom:10px; background:var(--color-background-primary); }
.cal-slot-row-top { display:flex; align-items:center; gap:6px; margin-bottom:8px; flex-wrap:wrap; }
.cal-time { padding:5px 8px; border:1px solid var(--color-border-tertiary); border-radius:6px; font-size:13px; color:var(--color-text-primary); }
.cal-time:focus { outline:none; border-color:var(--color-accent); }
.cal-time-sep { color:var(--color-text-tertiary); font-size:13px; }
.cal-row-del { margin-left:auto; background:none; border:none; cursor:pointer; color:var(--color-text-tertiary); width:26px; height:26px; border-radius:6px; transition:.12s; }
.cal-row-del:hover { background:#fef2f2; color:#dc2626; }
.cal-grow-tag { font-size:10px; color:#4285F4; background:#e8f0fe; padding:2px 7px; border-radius:10px; white-space:nowrap; }
.cal-grow-tag i { margin-right:3px; }
.cal-add-btn { width:100%; padding:9px; border:1px dashed var(--color-border-tertiary); background:none; border-radius:var(--border-radius-md); cursor:pointer; font-size:12px; color:var(--color-text-secondary); transition:.12s; }
.cal-add-btn:hover { border-color:var(--color-accent); color:var(--color-accent); background:var(--color-background-secondary); }
.cal-add-btn i { margin-right:4px; }
.cal-empty-hint { font-size:12px; color:var(--color-text-tertiary); text-align:center; padding:18px 10px; line-height:1.6; }
/* セル: 複数スロットを縦に積む */
.cal-slot { margin-bottom:2px; }
.cal-slots { gap:2px; }
.w-btn-ghost { padding:8px 14px; border:1px solid var(--color-border-tertiary); background:var(--color-background-primary); border-radius:var(--border-radius-md); cursor:pointer; font-size:12px; color:var(--color-text-secondary); transition:.15s; }
.w-btn-ghost:hover { background:var(--color-background-secondary); color:var(--color-text-primary); }

@media (max-width: 820px) {
  .cal-cell { min-height:64px; }
  .cal-legend-hint { margin-left:0; width:100%; }
  .cal-monthnav { flex-wrap:wrap; }
}

/* ===== パスワード再設定モーダル / 完了表示 ===== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 18, 30, 0.55);
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.2rem;
  z-index: 1000;
}
.modal-card {
  position: relative;
  background: #fff;
  border-radius: 18px;
  padding: 2rem 1.8rem 1.8rem;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.22);
  animation: modal-pop 0.18s ease-out;
}
@keyframes modal-pop {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-close {
  position: absolute;
  top: 0.9rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: #9a9cb5;
  cursor: pointer;
  line-height: 1;
  padding: 0.2rem;
}
.modal-close:hover { color: #555; }
.forgot-done {
  text-align: center;
  padding: 1rem 0 0.4rem;
}

/* ============================================
   法人枠（B2B）スタイル
   ============================================ */
/* サイドメニューの法人項目 */
.w-side-b2b span i { color: var(--color-accent); }

/* プランバッジ */
.b2b-plan-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; padding: 5px 12px; border-radius: 999px;
}
.b2b-badge-basic { background: var(--color-background-tertiary); color: var(--color-text-secondary); }
.b2b-badge-pro { background: var(--color-accent-light); color: var(--color-accent-text); }
.b2b-badge-ent { background: var(--color-purple-bg); color: var(--color-purple-fg); }

/* ダッシュボードの2カラム */
.b2b-dash-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 8px; }
@media (max-width: 860px) { .b2b-dash-cols { grid-template-columns: 1fr; } }
.b2b-fav-mini {
  display: flex; gap: 10px; align-items: center; padding: 8px;
  border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md);
  margin-bottom: 8px; cursor: pointer; transition: background .15s;
}
.b2b-fav-mini:hover { background: var(--color-background-secondary); }

/* お気に入りグリッド */
.b2b-fav-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 14px; }
.b2b-fav-card { padding: 16px; }

/* お気に入り：ツールバー（タグフィルター＋表示切替） */
.fav-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  flex-wrap: wrap; margin-bottom: 14px;
}
.fav-filters { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; min-width: 0; }
.fav-filter-chip {
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border-tertiary); background: var(--color-background-secondary);
  color: var(--color-text-secondary); transition: .12s; white-space: nowrap;
}
.fav-filter-chip:hover { border-color: var(--color-accent); color: var(--color-accent); }
.fav-filter-chip.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; }
/* 表示切替トグル */
.fav-viewtoggle { display: inline-flex; border: 1px solid var(--color-border-tertiary); border-radius: 8px; overflow: hidden; flex-shrink: 0; }
.fav-view-btn {
  background: var(--color-background-secondary); border: none; cursor: pointer;
  padding: 7px 12px; font-size: 13px; color: var(--color-text-tertiary); transition: .12s;
}
.fav-view-btn + .fav-view-btn { border-left: 1px solid var(--color-border-tertiary); }
.fav-view-btn:hover { color: var(--color-text-primary); }
.fav-view-btn.active { background: var(--color-accent); color: #fff; }

/* タグチップ（一覧表示用） */
.fav-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.fav-tag {
  font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 999px;
  background: rgba(196, 92, 47, .1); color: var(--color-accent);
}
.fav-tag-sm { font-size: 9px; padding: 1px 6px; }

/* リスト表示 */
.fav-listview { display: flex; flex-direction: column; gap: 8px; }
.fav-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 14px;
  border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md);
  background: var(--color-background-primary);
}
.fav-row-main { display: flex; align-items: center; gap: 12px; flex: 1; min-width: 0; cursor: pointer; }
.fav-row-name { font-size: 13px; font-weight: 600; }
.fav-row-meta { font-size: 11px; font-weight: 400; color: var(--color-text-tertiary); margin-left: 4px; }
.fav-row-actions { display: flex; gap: 4px; flex-shrink: 0; }
.fav-iconbtn { font-size: 13px; padding: 6px 9px; }

/* タグ編集モーダル */
.fav-tag-editing { display: flex; flex-wrap: wrap; gap: 6px; min-height: 32px; padding: 8px; border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md); background: var(--color-background-secondary); }
.fav-tag-pill {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  padding: 4px 6px 4px 10px; border-radius: 999px; background: rgba(196, 92, 47, .12); color: var(--color-accent);
}
.fav-tag-pill button { background: none; border: none; color: var(--color-accent); cursor: pointer; font-size: 15px; line-height: 1; padding: 0 2px; }
.fav-tag-presets { display: flex; flex-wrap: wrap; gap: 6px; }
.fav-tag-preset {
  font-size: 12px; padding: 5px 12px; border-radius: 999px; cursor: pointer;
  border: 1px dashed var(--color-border-secondary); background: transparent; color: var(--color-text-secondary); transition: .12s;
}
.fav-tag-preset:hover { border-color: var(--color-accent); color: var(--color-accent); border-style: solid; }

/* 一斉送信 2カラム */
.b2b-bc-cols { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 920px) { .b2b-bc-cols { grid-template-columns: 1fr; } }
.b2b-bc-recipients {
  border: 1px solid var(--color-border-tertiary); border-radius: var(--border-radius-md);
  padding: 12px;
}

/* ロック表示（無料プランで一斉送信不可のとき） */
.b2b-locked {
  text-align: center; padding: 48px 24px; border: 2px dashed var(--color-border-tertiary);
  border-radius: var(--border-radius-lg); background: var(--color-background-secondary);
}
.b2b-locked i { font-size: 36px; color: var(--color-accent); opacity: .7; margin-bottom: 16px; }
.b2b-locked h2 { font-size: 17px; margin: 0 0 8px; color: var(--color-text-primary); }
.b2b-locked p { font-size: 13px; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 20px; }

/* 詳細分析レポート */
.analytics-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; }
@media (max-width: 900px) { .analytics-grid { grid-template-columns: 1fr; } }
.analytics-bar-row {
  display: flex; align-items: center; gap: 12px; padding: 9px 0;
  border-bottom: 1px solid var(--color-border-tertiary); cursor: pointer;
}
.analytics-bar-row:last-child { border-bottom: none; }
.analytics-bar-row:hover .analytics-bar-label { color: var(--color-accent); }
.analytics-bar-label {
  flex: 0 0 38%; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.analytics-bar-track { flex: 1; height: 8px; background: var(--color-background-secondary); border-radius: 999px; overflow: hidden; }
.analytics-bar-fill { height: 100%; background: linear-gradient(90deg, #f6c453, #e8a317); border-radius: 999px; }
.analytics-bar-val { flex: none; font-size: 12px; font-weight: 700; color: var(--color-text-secondary); min-width: 40px; text-align: right; }

/* チームメンバー */
.team-list { display: flex; flex-direction: column; gap: 10px; }
.team-row { display: flex; align-items: center; gap: 12px; }
.team-badge { font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 999px; }
.team-badge-active { background: var(--color-success-bg); color: var(--color-success-fg); }
.team-badge-pending { background: var(--color-warning-bg); color: var(--color-warning-fg); }

/* 料金カードグリッド */
.b2b-price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 8px; }
@media (max-width: 900px) { .b2b-price-grid { grid-template-columns: 1fr; } }
.b2b-price-card {
  position: relative; border: 1px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-lg); padding: 24px 20px; background: #fff;
  display: flex; flex-direction: column;
}
.b2b-price-hl { border: 2px solid var(--color-accent); box-shadow: 0 8px 24px rgba(216,90,48,.12); }
.b2b-price-current { background: var(--color-background-secondary); }
.b2b-price-ribbon {
  position: absolute; top: -11px; left: 50%; transform: translateX(-50%);
  background: var(--color-accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
}
.b2b-price-currenttag {
  position: absolute; top: 12px; right: 12px; background: var(--color-success-bg);
  color: var(--color-success-fg); font-size: 10px; font-weight: 700; padding: 3px 8px; border-radius: 999px;
}
.b2b-price-name { font-size: 14px; font-weight: 700; color: var(--color-text-primary); }
.b2b-price-amount { font-size: 28px; font-weight: 800; color: var(--color-accent); margin: 8px 0 2px; }
.b2b-price-tax { font-size: 12px; font-weight: 500; color: var(--color-text-tertiary); margin-left: 4px; }
.b2b-price-tagline { font-size: 12px; color: var(--color-text-secondary); line-height: 1.6; min-height: 38px; }
.b2b-price-perks { list-style: none; padding: 0; margin: 16px 0; flex: 1; }
.b2b-price-perks li { font-size: 12px; color: var(--color-text-primary); line-height: 1.6; margin-bottom: 8px; }
.b2b-price-perks li i { color: #2e9e5b; margin-right: 6px; }
.b2b-price-action { margin-top: auto; }

/* 機能比較表 */
.b2b-compare th, .b2b-compare td { padding: 10px 12px; }

/* ============================================
   サインアップ：アカウント種別トグル（個人/法人）
   ============================================ */
.acct-type-toggle { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.acct-type-btn {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  padding: 14px 10px; border: 1.5px solid var(--color-border-tertiary);
  border-radius: var(--border-radius-md); background: #fff; cursor: pointer;
  transition: all .15s; color: var(--color-text-secondary);
}
.acct-type-btn i { font-size: 18px; }
.acct-type-btn span { font-size: 13px; font-weight: 700; color: var(--color-text-primary); }
.acct-type-btn small { font-size: 10px; color: var(--color-text-tertiary); }
.acct-type-btn:hover { border-color: var(--color-accent); }
.acct-type-btn.active {
  border-color: var(--color-accent); background: var(--color-accent-light);
}
.acct-type-btn.active i, .acct-type-btn.active span { color: var(--color-accent-text); }

/* ===== 管理画面：料率シミュレーター ===== */
.fsim-controls { display: flex; flex-direction: column; gap: 20px; padding: 4px 0; }
.fsim-row { display: flex; flex-direction: column; gap: 8px; }
.fsim-label { font-size: 13px; color: #4b4e63; }
.fsim-label strong { color: var(--color-accent, #e2583e); font-size: 15px; margin: 0 2px; }
.fsim-row input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 6px; border-radius: 999px;
  background: #e7e9f5; outline: none; cursor: pointer;
}
.fsim-row input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.fsim-row input[type="range"]::-moz-range-thumb {
  width: 20px; height: 20px; border-radius: 50%;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: 2px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.25); cursor: pointer;
}
.fsim-table th, .fsim-table td { text-align: left; padding: 9px 12px; }
.fsim-table .adm-pill { padding: 2px 8px; font-size: 10px; }

/* ============================================================
   お気に入りカレンダービュー（Pro以上）
   ============================================================ */
.favcal-summary {
  display: flex; flex-wrap: wrap; gap: 16px; align-items: center;
  background: #fff; border: 1px solid var(--color-border-tertiary);
  border-radius: 10px; padding: 12px 16px; margin-bottom: 12px;
}
.favcal-stat { font-size: 13px; color: var(--color-text-secondary); }
.favcal-stat b { color: var(--color-text-primary); font-size: 15px; margin: 0 2px; }
.favcal-stat-muted { color: var(--color-text-tertiary); }

.favcal-tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 12px;
}
.favcal-tags-label { font-size: 12px; color: var(--color-text-secondary); margin-right: 2px; }
.favcal-tag {
  font-size: 12px; padding: 4px 11px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--color-border-tertiary); background: #fff; color: var(--color-text-secondary);
  transition: all .15s;
}
.favcal-tag:hover { border-color: var(--color-accent); color: var(--color-accent); }
.favcal-tag.active { background: var(--color-accent); border-color: var(--color-accent); color: #fff; font-weight: 700; }

.favcal-legend {
  display: flex; flex-wrap: wrap; gap: 14px; align-items: center;
  font-size: 12px; color: var(--color-text-secondary); margin-bottom: 10px;
}
.favcal-sw { display: inline-block; width: 13px; height: 13px; border-radius: 3px; vertical-align: -2px; margin-right: 3px; }
.favcal-sw-3 { background: #16a34a; }
.favcal-sw-1 { background: #bbf7d0; }
.favcal-sw-t { background: #fde68a; }
.favcal-legend-hint { color: var(--color-text-tertiary); }

/* 月グリッド（ヒートマップ） */
.favcal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.favcal-cell {
  position: relative; min-height: 64px; border-radius: 8px; padding: 5px 6px;
  border: 1px solid var(--color-border-tertiary); background: #fff; cursor: pointer;
  transition: transform .1s, box-shadow .1s; overflow: hidden;
}
.favcal-cell:hover { transform: translateY(-1px); box-shadow: 0 3px 10px rgba(0,0,0,.10); z-index: 1; }
.favcal-empty { background: transparent; border: none; cursor: default; }
.favcal-empty:hover { transform: none; box-shadow: none; }
.favcal-daynum { font-size: 12px; font-weight: 600; color: var(--color-text-secondary); }
.favcal-lvl-1 { background: #ecfdf5; border-color: #d1fae5; }
.favcal-lvl-2 { background: #d1fae5; border-color: #a7f3d0; }
.favcal-lvl-3 { background: #a7f3d0; border-color: #6ee7b7; }
.favcal-tentonly { background: #fffbeb; border-color: #fde68a; }
.favcal-today { outline: 2px solid var(--color-accent); outline-offset: -2px; }
.favcal-selected { outline: 2px solid #16a34a; outline-offset: -2px; box-shadow: 0 3px 10px rgba(22,163,74,.20); }
.favcal-count { margin-top: 4px; display: flex; align-items: baseline; gap: 3px; }
.favcal-c-avail { font-size: 20px; font-weight: 800; line-height: 1; color: #15803d; }
.favcal-c-tent { font-size: 12px; font-weight: 700; color: #b45309; }
.favcal-label { font-size: 9px; color: #15803d; opacity: .8; }
.favcal-cell .cal-sun { color: #dc2626; }
.favcal-cell .cal-sat { color: #2563eb; }

/* 日別パネル（ドリルダウン） */
.favcal-daypanel {
  margin-top: 14px; border: 1px solid var(--color-border-tertiary); border-radius: 12px;
  background: #fff; overflow: hidden;
}
.favcal-dayhead {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: var(--color-accent-light); font-weight: 700; font-size: 14px;
  color: var(--color-accent-text);
}
.favcal-close { background: none; border: none; cursor: pointer; font-size: 16px; color: var(--color-text-tertiary); }
.favcal-close:hover { color: var(--color-text-primary); }
.favcal-subhead {
  font-size: 12px; font-weight: 700; color: #15803d; padding: 10px 16px 4px;
}
.favcal-subhead-tent { color: #b45309; border-top: 1px dashed var(--color-border-tertiary); margin-top: 4px; }
.favcal-none { padding: 8px 16px 14px; font-size: 12px; color: var(--color-text-tertiary); }

.favcal-person {
  display: flex; align-items: center; gap: 11px; padding: 9px 16px;
  border-top: 1px solid var(--color-border-tertiary);
}
.favcal-person:first-of-type { border-top: none; }
.favcal-ava { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; flex: none; }
.favcal-ava-ph {
  width: 38px; height: 38px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-info-bg, #e0e7ff); color: var(--color-info-fg, #3730a3); font-weight: 700; font-size: 14px;
}
.favcal-person-main { flex: 1; min-width: 0; }
.favcal-person-name { font-weight: 700; font-size: 13px; cursor: pointer; }
.favcal-person-name:hover { color: var(--color-accent); }
.favcal-role { font-size: 10px; font-weight: 500; color: var(--color-text-tertiary); margin-left: 6px; }
.favcal-person-meta { display: flex; flex-wrap: wrap; gap: 10px; font-size: 11px; margin-top: 3px; }
.favcal-time { color: #15803d; font-weight: 600; }
.favcal-time-tent { color: #b45309; }
.favcal-msg-btn { font-size: 11px; padding: 5px 11px; flex: none; }

/* 予定未公開（要問い合わせ） */
.favcal-unsched {
  margin-top: 16px; border: 1px dashed var(--color-border-tertiary); border-radius: 10px;
  background: #fafafa; padding: 12px 14px;
}
.favcal-unsched-head { font-size: 12px; font-weight: 700; color: var(--color-text-secondary); margin-bottom: 8px; }
.favcal-unsched-hint { font-weight: 400; color: var(--color-text-tertiary); }
.favcal-unsched-list { display: flex; flex-wrap: wrap; gap: 7px; }
.favcal-unsched-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px;
  border-radius: 999px; background: #fff; border: 1px solid var(--color-border-tertiary);
  font-size: 12px; cursor: pointer; transition: border-color .15s;
}
.favcal-unsched-chip:hover { border-color: var(--color-accent); }
.favcal-unsched-chip img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
.favcal-unsched-ph {
  width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--color-info-bg, #e0e7ff); color: var(--color-info-fg, #3730a3); font-size: 11px; font-weight: 700;
}

/* スマホ対応：セルを少しコンパクトに */
@media (max-width: 640px) {
  .favcal-grid { gap: 3px; }
  .favcal-cell { min-height: 52px; padding: 3px 4px; }
  .favcal-c-avail { font-size: 16px; }
  .favcal-label { display: none; }
  .favcal-person { flex-wrap: wrap; }
}

/* ============================================================
   空き枠登録のすすめ（① フォロワー数 / ④ 催促 / ⑤ 一括登録 / ⑥ 鮮度）
   ============================================================ */

/* ① フォロワー数バッジ */
.cal-promo-follow {
  display: flex; align-items: center; gap: 12px;
  background: linear-gradient(90deg, #FAECE7 0%, #fff 100%);
  border: 1px solid var(--color-accent-light);
  border-left: 4px solid var(--color-accent);
  border-radius: 12px; padding: 12px 16px; margin-bottom: 10px;
}
.cal-promo-follow > i { font-size: 20px; color: var(--color-accent); flex-shrink: 0; }
.cal-promo-follow-txt { font-size: 13px; color: var(--color-text-primary); line-height: 1.6; }
.cal-promo-follow-txt strong { color: var(--color-accent); font-size: 16px; font-weight: 800; }
.cal-promo-follow-sub { display: block; font-size: 11px; color: var(--color-text-tertiary); margin-top: 2px; }

/* ④⑥ 催促・鮮度カード */
.cal-promo-card {
  display: flex; align-items: center; gap: 14px;
  border-radius: 12px; padding: 14px 16px; margin-bottom: 10px;
}
.cal-promo-urge { background: #FFF7ED; border: 1px solid #FED7AA; }
.cal-promo-stale { background: #FEFCE8; border: 1px solid #FEF08A; }
.cal-promo-card-icon { font-size: 22px; flex-shrink: 0; }
.cal-promo-urge .cal-promo-card-icon { color: #EA580C; }
.cal-promo-stale .cal-promo-card-icon { color: #CA8A04; }
.cal-promo-card-body { flex: 1; min-width: 0; }
.cal-promo-card-title { font-size: 13px; font-weight: 700; color: var(--color-text-primary); margin-bottom: 2px; }
.cal-promo-card-desc { font-size: 11.5px; color: var(--color-text-secondary); line-height: 1.6; }
.cal-promo-card-cta {
  flex-shrink: 0; background: var(--color-accent); color: #fff; border: none;
  border-radius: 8px; padding: 9px 14px; font-size: 12px; font-weight: 700; cursor: pointer;
  white-space: nowrap; transition: background .15s;
}
.cal-promo-card-cta:hover { background: var(--color-accent-dark); }

/* ⑤ かんたん一括登録バー */
.cal-bulkbar { margin-bottom: 10px; }

/* メイン導線：複数日を選んで一括編集（目立たせる） */
.cal-select-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.cal-selmode-btn {
  background: var(--color-accent); border: 1px solid var(--color-accent); color: #fff;
  border-radius: 10px; padding: 11px 20px; font-size: 14px; font-weight: 700; cursor: pointer;
  transition: all .15s; box-shadow: 0 2px 8px rgba(216,90,48,.22);
  display: inline-flex; align-items: center; gap: 8px;
}
.cal-selmode-btn i { font-size: 15px; }
.cal-selmode-btn:hover { background: var(--color-accent-dark); border-color: var(--color-accent-dark); box-shadow: 0 4px 12px rgba(216,90,48,.30); }
.cal-selmode-btn.active { background: var(--color-text-secondary); border-color: var(--color-text-secondary); box-shadow: none; }
.cal-select-reco { font-size: 12px; color: var(--color-accent-text); font-weight: 600; }
.cal-select-reco i { color: #16a34a; margin-right: 3px; }
.cal-selmode-hint { font-size: 11px; color: var(--color-text-tertiary); }

/* サブ導線：プリセット（コンパクトに） */
.cal-preset-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.cal-preset-lbl { font-size: 11px; font-weight: 600; color: var(--color-text-tertiary); }
.cal-preset-lbl i { color: var(--color-text-tertiary); margin-right: 2px; }
.cal-preset-btn {
  background: #fff; border: 1px solid var(--color-border); color: var(--color-text-secondary);
  border-radius: 999px; padding: 4px 11px; font-size: 11px; font-weight: 500; cursor: pointer;
  transition: all .15s;
}
.cal-preset-btn:hover { border-color: var(--color-accent); color: var(--color-accent); background: var(--color-accent-light); }

/* 選択バー */
.cal-selbar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--color-accent-light); border: 1px solid var(--color-accent);
  border-radius: 10px; padding: 10px 14px; margin-top: 8px;
}
.cal-selbar-count { font-size: 13px; font-weight: 700; color: var(--color-accent-text); }
.cal-selbar-count span { font-size: 16px; font-weight: 800; }
.cal-selbar-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.cal-selbar-btn {
  border: none; border-radius: 7px; padding: 7px 12px; font-size: 12px; font-weight: 600;
  cursor: pointer; color: #fff; transition: opacity .15s;
}
.cal-selbar-btn:hover { opacity: .88; }
.cal-selbar-avail { background: #16a34a; }
.cal-selbar-tent { background: #d97706; }
.cal-selbar-clear { background: #6b7280; }
.cal-selbar-cancel {
  margin-left: auto; background: transparent; border: none; color: var(--color-accent-text);
  font-size: 12px; font-weight: 600; cursor: pointer; text-decoration: underline;
}

/* 選択モード時のセル */
.cal-cell.cal-selectable { cursor: pointer; position: relative; }
.cal-cell.cal-selectable:hover { background: var(--color-accent-light); }
.cal-cell.cal-selected {
  background: var(--color-accent-light) !important;
  box-shadow: inset 0 0 0 2px var(--color-accent);
}
.cal-sel-check {
  position: absolute; top: 4px; right: 4px; font-size: 14px;
  color: var(--color-accent); z-index: 2;
}

@media (max-width: 640px) {
  .cal-promo-card { flex-direction: column; align-items: flex-start; gap: 8px; }
  .cal-promo-card-cta { width: 100%; }
  .cal-selbar-cancel { margin-left: 0; }
}

/* ============================================================
   お役立ちツール：ランチャー（アプリ選択UI）
   ============================================================ */
.tool-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 8px;
}
.tool-card {
  text-align: left;
  background: #fff;
  border: 1px solid var(--color-border, #e7e7ef);
  border-radius: 16px;
  padding: 20px 18px 16px;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: box-shadow .18s ease, transform .18s ease, border-color .18s ease;
  font-family: inherit;
}
.tool-card:hover { box-shadow: 0 10px 28px rgba(0,0,0,.10); transform: translateY(-3px); border-color: var(--color-primary, #f25c2a); }
.tool-card-ico {
  width: 48px; height: 48px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; color: #fff; margin-bottom: 12px;
  background: linear-gradient(135deg, #f97b4a, #f25c2a);
}
.tool-card-timer .tool-card-ico { background: linear-gradient(135deg, #5b6cff, #3a3f8f); }
.tool-card-cuepeg .tool-card-ico { background: linear-gradient(135deg, #ff7a59, #e0431f); }
.tool-card-title { font-size: 16px; font-weight: 800; color: #1a1a2e; margin-bottom: 6px; }
.tool-card-desc { font-size: 12.5px; color: #6b6b78; line-height: 1.6; flex: 1; }
.tool-card-go { margin-top: 12px; font-size: 12.5px; font-weight: 700; color: var(--color-primary, #f25c2a); display: flex; align-items: center; gap: 6px; }
.tool-card-soon { cursor: default; opacity: .62; }
.tool-card-soon:hover { box-shadow: none; transform: none; border-color: var(--color-border, #e7e7ef); }
.tool-card-soon .tool-card-ico { background: #c9c9d4; }
.tool-card-soon .tool-card-go { color: #9a9aa8; }

/* ============================================================
   お役立ちツール：タイマー＆時計
   ============================================================ */
body.gc-timer-open #mobile-tabbar { display: none !important; }
.timer-tool {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --tt-fg: #f5f6fa;
  --tt-bg: #0b0d12;
  --tt-panel: rgba(255,255,255,.08);
  --tt-panel-border: rgba(255,255,255,.16);
  background: var(--tt-bg);
  color: var(--tt-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
.timer-theme-light {
  --tt-fg: #14161c;
  --tt-bg: #ffffff;
  --tt-panel: rgba(0,0,0,.05);
  --tt-panel-border: rgba(0,0,0,.12);
}
.timer-back { position: absolute; top: 14px; left: 14px; z-index: 5; }
.timer-back-btn {
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.timer-back-btn:hover { background: var(--tt-panel-border); }

.timer-stage {
  position: relative;
  flex: 1;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  user-select: none;
  /* 数字が左右にはみ出さないよう、ステージ内に収める安全ネット */
  overflow: hidden;
  padding-left: clamp(8px, 2vw, 32px);
  padding-right: clamp(8px, 2vw, 32px);
  box-sizing: border-box;
}
/* 数字エリア（ランプ＋数字＋日付＋ヒント）。flex:1 で中央に置き、
   現在時刻(.timer-subclock)とは別ゾーンにして互いに重ならないようにする。 */
.timer-center {
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.timer-readout {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  font-weight: 800;
  letter-spacing: 0.01em;
  line-height: 1;
  /* 文字幅(vw)ベースだと "-00:00:20" のように桁が増えたとき横にはみ出すため、
     高さ(vh)も加味した min() で「画面に収まる最大サイズ」を選ぶ。
     係数は「画面の約80%」を埋める大きさに調整（8文字 HH:MM:SS 基準）。
     個人設定の --timer-scale（0.5〜1.5）を掛けてユーザーが大きさを調整できる。
     ただし拡大(>1.0)で横にはみ出さないよう、外側の min() に
     「桁数ぶんの横幅上限(vw・スケール非依存)」を入れて頭打ちにする。 */
  font-size: min(
    calc(min(19vw, 34vh, 360px) * var(--timer-scale, 1)),
    24vw
  );
  color: var(--tt-fg);
  transition: color .2s ease;
  /* はみ出し防止：1行・横幅を超えない */
  max-width: 100%;
  white-space: nowrap;
}
.timer-sub {
  margin-top: 18px;
  font-size: clamp(14px, 2.4vw, 30px);
  font-weight: 600;
  opacity: .6;
}
/* 現在時刻のサブ表示（数字エリアの「外」＝ステージ下部の独立ゾーン）。
   .timer-center（数字）とは別の flex 行なので、数字と時刻の両方を最大にしても
   絶対に重ならない。個人設定の --timer-subclock-scale（0.5〜2.0）でサイズを独立調整。 */
.timer-subclock {
  flex: 0 0 auto;
  width: 100%;
  padding: clamp(6px, 1.4vh, 16px) 12px clamp(10px, 2.2vh, 26px);
  font-size: calc(clamp(13px, 2vw, 26px) * var(--timer-subclock-scale, 1));
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: .03em;
  line-height: 1.1;
  opacity: .55;
  text-align: center;
  white-space: nowrap;
  box-sizing: border-box;
}
.timer-tool.timer-focus .timer-subclock { font-size: calc(clamp(15px, 2.6vw, 34px) * var(--timer-subclock-scale, 1)); opacity: .6; }
/* ベルとライトのタイミング用ランプ（タイマー数字の上に表示） */
.timer-lamps {
  display: flex;
  gap: clamp(18px, 3.6vw, 46px);
  align-items: center;
  justify-content: center;
  margin-bottom: clamp(22px, 3.6vw, 52px);
}
.timer-lamp {
  width: clamp(42px, 7vw, 104px);
  height: clamp(42px, 7vw, 104px);
  border-radius: 50%;
  background: rgba(127, 127, 127, .18);
  border: 2px solid rgba(127, 127, 127, .35);
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
  transition: background .25s ease, box-shadow .25s ease, border-color .25s ease, transform .25s ease;
  --lamp-color: #1ea84a; /* free ランプのデフォルト色（点灯時に上書き） */
}
.timer-lamp[data-lamp="green"].on  { background: #1ea84a; border-color: #1ea84a; box-shadow: 0 0 28px 7px rgba(30, 168, 74, .7); }
.timer-lamp[data-lamp="yellow"].on { background: #e9c61a; border-color: #e9c61a; box-shadow: 0 0 28px 7px rgba(233, 198, 26, .7); }
.timer-lamp[data-lamp="red"].on    { background: #e61b23; border-color: #e61b23; box-shadow: 0 0 28px 7px rgba(230, 27, 35, .7); }
.timer-lamp[data-lamp="free"].on   { background: var(--lamp-color); border-color: var(--lamp-color); box-shadow: 0 0 28px 7px color-mix(in srgb, var(--lamp-color) 65%, transparent); }
.timer-lamp.on { transform: scale(1.06); }
/* 自由ランプは消灯時にうっすら虹色のヒントを出して「自由色」と分かるように */
.timer-lamp-free:not(.on) {
  background: conic-gradient(from 0deg, #1f6fe6, #8b3fd6, #f08020, #1f6fe6);
  opacity: .25;
  border-color: rgba(127, 127, 127, .35);
}
/* 時計モードではランプは表示しない（タイマー用） */
.timer-tool.timer-mode-clock .timer-lamps { display: none; }
/* タイマーモードでもキューが無ければランプは隠す（誤解防止） */
.timer-tool.timer-mode-timer .timer-lamps.is-empty { display: none; }
/* 時計モードでは「現在時刻を表示」「時刻の文字サイズ」は不要なので隠す
   （時計モードは数字自体が現在時刻のため） */
.timer-subclock-opts { display: contents; }
.timer-tool.timer-mode-clock .timer-subclock-opts { display: none; }
/* 数字タップの注意書き（小さく・控えめ） */
.timer-stage-hint {
  margin-top: clamp(14px, 2.2vw, 26px);
  font-size: clamp(11px, 1.5vw, 14px);
  font-weight: 600;
  opacity: .42;
  text-align: center;
  letter-spacing: .02em;
}
/* 集中表示・全画面ではランプと注意書きはそのまま見せる／ヒントは集中表示で消す */
.timer-tool.timer-focus .timer-stage-hint { opacity: 0; }
/* ベルとライトのタイミングの上限注記 */
.timer-cues-note { font-weight: 600; font-size: 12px; opacity: .6; }
.timer-cues-desc {
  font-size: 12.5px; opacity: .78; margin-bottom: 10px; line-height: 1.6;
  background: var(--tt-panel); border: 1px solid var(--tt-panel-border);
  border-radius: 10px; padding: 8px 10px;
}
.timer-cues-desc strong { font-weight: 800; }
.timer-cue-add-label--full { color: #e9a21a; opacity: .85; }
/* キュー行の「残り/経過」ラベル */
.timer-cue-timelabel { font-size: 12.5px; font-weight: 700; opacity: .85; white-space: nowrap; }
/* 終了アラート：点滅させず赤くするだけ */
.timer-tool.timer-alert .timer-readout { color: #e61b23; }
.timer-tool.timer-alert .timer-sub { color: #e61b23; opacity: .9; }

/* 集中表示：操作UIを隠して数字を最大化（領域からも外してステージを画面中央に） */
.timer-tool.timer-focus .timer-controls {
  opacity: 0; pointer-events: none; transform: translateY(20px);
  position: absolute; bottom: 0; left: 0; right: 0;
}
/* 集中表示・全画面：操作UIが消えて領域が広がるぶん大きくするが、
   "-00:00:20" のように桁が増えても左右にはみ出さないよう
   幅(vw)と高さ(vh)の両方で頭打ちにする（min で小さい方を採用）。 */
.timer-tool.timer-focus .timer-readout { font-size: min(calc(min(17vw, 75vh, 560px) * var(--timer-scale, 1)), 24vw); }

/* ============================================================
   タイマー数字の「桁数フィット」：表示文字数が増えても左右にはみ出さないよう、
   data-len（マイナス記号含む文字数）に応じてフォント幅係数(vw)を段階的に縮める。
   通常 "HH:MM:SS" は8文字。"-HH:MM:SS" など9文字以上は係数を下げる。
   ※ JS の setTimerReadoutLen() が data-len を更新。
   ============================================================ */
/* 通常表示（操作パネルあり）。8文字=19vw 基準に、桁数ぶん係数を段階的に下げる。 */
.timer-readout[data-len="9"]  { font-size: min(calc(min(17.4vw, 34vh, 360px) * var(--timer-scale, 1)), 21.5vw); }
.timer-readout[data-len="10"] { font-size: min(calc(min(15.8vw, 34vh, 360px) * var(--timer-scale, 1)), 19.5vw); }
.timer-readout[data-len="11"] { font-size: min(calc(min(14.5vw, 34vh, 360px) * var(--timer-scale, 1)), 18vw); }
/* 集中表示・全画面（操作パネルなし＝より大きく）。8文字=17vw 基準。 */
.timer-tool.timer-focus .timer-readout[data-len="9"]  { font-size: min(calc(min(15.6vw, 75vh, 560px) * var(--timer-scale, 1)), 21.5vw); }
.timer-tool.timer-focus .timer-readout[data-len="10"] { font-size: min(calc(min(14.2vw, 75vh, 560px) * var(--timer-scale, 1)), 19.5vw); }
.timer-tool.timer-focus .timer-readout[data-len="11"] { font-size: min(calc(min(13vw, 75vh, 560px) * var(--timer-scale, 1)), 18vw); }

.timer-controls {
  width: 100%;
  max-width: 720px;
  margin: 0 auto;
  padding: 16px 18px calc(20px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: opacity .25s ease, transform .25s ease;
  max-height: 56vh;
  overflow-y: auto;
}
.timer-modes { display: flex; gap: 8px; justify-content: center; }
.timer-mode-btn {
  flex: 1; max-width: 160px;
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border);
  border-radius: 12px; padding: 10px 14px; font-size: 14px; font-weight: 700;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.timer-mode-btn.active { background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff; }

.timer-panel { display: flex; flex-direction: column; gap: 12px; }
.timer-field { display: flex; align-items: center; justify-content: center; gap: 6px; flex-wrap: wrap; }
.timer-field input {
  width: 64px; text-align: center;
  font-size: 22px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 10px; padding: 8px 6px;
  -moz-appearance: textfield;
}
.timer-field input::-webkit-outer-spin-button, .timer-field input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timer-field span { font-size: 14px; opacity: .7; font-weight: 600; }

.timer-presets { display: flex; gap: 7px; justify-content: center; flex-wrap: wrap; }
.timer-presets button {
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border);
  border-radius: 999px; padding: 6px 13px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.timer-presets button:hover { background: var(--tt-panel-border); }

.timer-actions { display: flex; gap: 8px; justify-content: center; }
.timer-act {
  flex: 1; max-width: 200px;
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border);
  border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 800;
  cursor: pointer; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.timer-act-start { background: #21c06b; border-color: #21c06b; color: #fff; }
.timer-act-start.timer-act-pause { background: #f0a020; border-color: #f0a020; }

.timer-options { display: flex; gap: 18px; justify-content: center; flex-wrap: wrap; }
.timer-opt-row { display: flex; align-items: center; gap: 10px; }
.timer-opt-label { font-size: 13px; font-weight: 700; opacity: .8; }
.timer-seg { display: inline-flex; border: 1px solid var(--tt-panel-border); border-radius: 999px; overflow: hidden; }
.timer-seg button {
  background: transparent; color: var(--tt-fg); border: none;
  padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.timer-seg button.active { background: var(--color-primary, #f25c2a); color: #fff; }
.timer-stepper { display: inline-flex; align-items: center; gap: 4px; }
.timer-stepper button {
  width: 32px; height: 32px; border-radius: 8px;
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border);
  font-size: 18px; font-weight: 800; cursor: pointer; line-height: 1;
}
.timer-stepper span { min-width: 28px; text-align: center; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }

.timer-bottom { display: flex; gap: 8px; justify-content: center; }
.timer-ghost {
  background: transparent; color: var(--tt-fg); opacity: .7;
  border: 1px solid var(--tt-panel-border);
  border-radius: 10px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.timer-ghost:hover { opacity: 1; background: var(--tt-panel); }

@media (max-width: 768px) {
  .timer-controls { max-width: 100%; gap: 10px; padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px)); }
  .timer-options { gap: 14px; }
  .timer-field input { width: 56px; font-size: 20px; }
}

/* ============================================================
   PC（Web）専用・タイマーモードのみ：操作パネルを左右2カラムに展開。
   ・時計/タイマー切替ボタンは「モードに関係なく」常に上部センター固定。
   ・時計モードは従来どおりの中央1カラム（2カラム化しない）。
   ・タイマーモードのときだけ、モードボタンの下を
       左カラム＝設定（カウント方向/プリセット/音/ベル/同期）
       右カラム＝スタート/リセット・表示オプション・集中/全画面
     の2カラムにして横幅を活かし、上部の数字＋現在時刻が隠れないよう縦を抑える。
   ・スマホ（768px以下）は従来どおり1カラム縦並びのまま。
   ============================================================ */
@media (min-width: 769px) {
  /* タイマーモードのときだけ2カラムグリッドにする */
  .timer-tool.timer-mode-timer .timer-controls {
    max-width: min(1100px, 94vw);
    /* 数字＋現在時刻を隠さないよう、操作パネルの高さ上限を下げる */
    max-height: 48vh;
    display: grid;
    grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr);
    grid-template-areas:
      "modes    modes"
      "settings actions"
      "settings options"
      "settings bottom";
    align-content: start;
    column-gap: 24px;
    row-gap: 14px;
  }
  /* モードボタンは横幅いっぱい＝センター固定（時計モードと同じ見た目） */
  .timer-tool.timer-mode-timer .timer-controls > .timer-modes { grid-area: modes; justify-content: center; }
  .timer-tool.timer-mode-timer .timer-controls > .timer-options { grid-area: options; }
  .timer-tool.timer-mode-timer .timer-controls > .timer-bottom  { grid-area: bottom; }
  /* .timer-panel は包むだけにして、中の設定/アクションを直接グリッドに並べる */
  .timer-tool.timer-mode-timer .timer-panel { display: contents; }
  .timer-tool.timer-mode-timer .timer-panel > .timer-settings { grid-area: settings; align-self: start; }
  .timer-tool.timer-mode-timer .timer-panel > .timer-actions  { grid-area: actions; }

  /* 左カラムの設定本体は、さらに内部を2カラムにして縦を圧縮 */
  .timer-tool.timer-mode-timer .timer-settings-body {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 16px;
    align-items: start;
  }
  /* 横幅を取りたい項目（音の行・ベル/同期）は2カラムぶち抜き */
  .timer-tool.timer-mode-timer .timer-settings-body > .timer-cues,
  .timer-tool.timer-mode-timer .timer-settings-body > .timer-sync { grid-column: 1 / -1; }

  /* 右カラムの各ブロックは横幅いっぱいに */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options,
  .timer-tool.timer-mode-timer .timer-controls > .timer-bottom { width: 100%; }
  /* 右カラムのスタート/リセットは大きめ＆押しやすく（使う頻度が最も高いので最上部） */
  .timer-tool.timer-mode-timer .timer-panel > .timer-actions { width: 100%; gap: 12px; }
  .timer-tool.timer-mode-timer .timer-panel > .timer-actions .timer-act {
    max-width: none; padding: 16px 16px; font-size: 16px; border-radius: 14px;
  }
  /* 表示オプションはカード状にまとめ、ラベル幅をそろえて縦並びで見やすく */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options {
    flex-direction: column; align-items: stretch; gap: 12px;
    background: var(--tt-panel); border: 1px solid var(--tt-panel-border);
    border-radius: 14px; padding: 14px 16px;
  }
  /* 「表示」見出しを擬似要素で付けてカードの役割を明確化 */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options::before {
    content: "表示の調整";
    font-size: 12.5px; font-weight: 800; opacity: .65; letter-spacing: .04em;
    margin-bottom: 2px;
  }
  /* ※ .timer-subclock-opts は display:contents のため、その中の行は
     セレクタ上は .timer-options の「子孫」として扱う（直下 > では当たらない）。 */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options .timer-opt-row {
    gap: 10px; flex-wrap: nowrap;
  }
  /* 各行の左ラベルを固定幅にしてスライダー類の開始位置をそろえる */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options .timer-opt-label {
    flex: 0 0 104px; width: 104px;
  }
  /* スライダーは余白を埋めて伸ばす（操作しやすく） */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options .timer-size-range { flex: 1 1 auto; width: auto; min-width: 80px; }
  /* ヒント文は折り返して下段へ（横並びを崩さない） */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options .timer-opt-hint {
    flex: 1 1 100%; width: 100%; margin-top: -4px;
  }
  /* 現在時刻の2行はカード内で1ブロックとして縦に積む */
  .timer-tool.timer-mode-timer .timer-controls > .timer-options .timer-subclock-opts {
    display: flex; flex-direction: column; gap: 10px;
  }
  /* 集中/全画面ボタンは右カラム下で中央寄せ */
  .timer-tool.timer-mode-timer .timer-controls > .timer-bottom { justify-content: center; }
}

/* ============================================================
   タイマー：設定パネル / 音 / ベルとライトのタイミング（追記）
   ============================================================ */
/* 終了後カウントアップ（マイナス表記）の見せ方：点滅させず赤くするだけ（背景は着色しない） */
.timer-tool.timer-alert .timer-readout { color: #e61b23; }

/* 全画面中は「ツール一覧」ボタンを隠す */
.timer-tool.timer-fs .timer-back { display: none; }

/* 設定パネル */
.timer-settings {
  background: var(--tt-panel);
  border: 1px solid var(--tt-panel-border);
  border-radius: 14px;
  padding: 12px 14px;
}
.timer-settings-head {
  display: flex; align-items: center; justify-content: space-between;
  font-size: 14px; font-weight: 800; opacity: .9; margin-bottom: 6px;
}
.timer-settings-toggle {
  background: transparent; border: none; color: var(--tt-fg);
  cursor: pointer; font-size: 14px; opacity: .8; padding: 4px 6px;
}
.timer-settings-body { display: flex; flex-direction: column; gap: 12px; }
.timer-settings-body.collapsed { display: none; }

/* カウントアップ/ダウン */
.timer-dir { display: flex; flex-direction: column; gap: 8px; }
.timer-radio { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; cursor: pointer; flex-wrap: wrap; }
.timer-radio input[type="radio"] { width: 17px; height: 17px; accent-color: var(--color-primary, #f25c2a); cursor: pointer; }
.timer-inline-time { display: inline-flex; align-items: center; gap: 5px; margin-left: 6px; }
.timer-inline-time input {
  width: 52px; text-align: center;
  font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 8px; padding: 5px 4px;
  -moz-appearance: textfield;
}
.timer-inline-time input::-webkit-outer-spin-button, .timer-inline-time input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timer-inline-time span { font-size: 13px; opacity: .7; font-weight: 600; }

/* 音の設定 */
.timer-sound-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.timer-select {
  background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 8px;
  padding: 7px 10px; font-size: 13px; font-weight: 600; cursor: pointer; min-width: 150px;
}
.timer-mini-btn {
  background: var(--tt-panel); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 8px;
  padding: 7px 11px; font-size: 12.5px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.timer-mini-btn:hover { background: var(--tt-panel-border); }

/* ---- 文字サイズ調整（個人設定） ---- */
.timer-opt-size { gap: 8px; }
.timer-size-btn { padding: 6px 9px; }
.timer-size-range {
  -webkit-appearance: none; appearance: none;
  width: 150px; height: 6px; border-radius: 999px;
  background: var(--tt-panel-border); cursor: pointer; outline: none;
}
.timer-size-range::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary, #f25c2a); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.timer-size-range::-moz-range-thumb {
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--color-primary, #f25c2a); border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.3); cursor: pointer;
}
.timer-size-val {
  min-width: 42px; text-align: center;
  font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; opacity: .85;
}

/* ---- ON/OFF トグルスイッチ（現在時刻表示の切替など） ---- */
.timer-switch { position: relative; display: inline-block; width: 44px; height: 24px; flex: none; cursor: pointer; }
.timer-switch input { opacity: 0; width: 0; height: 0; position: absolute; }
.timer-switch-slider {
  position: absolute; inset: 0; border-radius: 999px;
  background: var(--tt-panel-border); transition: background .2s ease;
}
.timer-switch-slider::before {
  content: ""; position: absolute; left: 3px; top: 3px;
  width: 18px; height: 18px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.3);
  transition: transform .2s ease;
}
.timer-switch input:checked + .timer-switch-slider { background: var(--color-primary, #f25c2a); }
.timer-switch input:checked + .timer-switch-slider::before { transform: translateX(20px); }
.timer-switch input:focus-visible + .timer-switch-slider { outline: 2px solid var(--color-primary, #f25c2a); outline-offset: 2px; }

/* オプション補足テキスト */
.timer-opt-hint { font-size: 11.5px; opacity: .55; line-height: 1.4; }

.timer-upload-btn { position: relative; }
.timer-del-sound { color: #e0606a; }
.timer-sound-note { font-size: 11px; opacity: .55; line-height: 1.5; }

/* ベルとライトのタイミング */
.timer-cues { border-top: 1px solid var(--tt-panel-border); padding-top: 12px; }
.timer-cues-title { font-size: 13.5px; font-weight: 800; opacity: .9; margin-bottom: 8px; }
.timer-cue-row {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  padding: 8px 0; border-bottom: 1px solid var(--tt-panel-border);
}
.timer-cue-addrow { border-bottom: none; padding-bottom: 0; }
.timer-cue-add-label { font-size: 12.5px; opacity: .6; margin: 8px 0 4px; font-weight: 600; }
.timer-color-pick { display: inline-flex; align-items: center; gap: 5px; }
.timer-color-swatch { width: 18px; height: 18px; border-radius: 4px; border: 1px solid rgba(128,128,128,.4); display: inline-block; flex: none; }
.timer-color-select {
  background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 7px;
  padding: 5px 6px; font-size: 12.5px; cursor: pointer;
}
.timer-cue-num {
  width: 46px; text-align: center;
  font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums;
  background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 7px; padding: 5px 3px;
  -moz-appearance: textfield;
}
.timer-cue-num::-webkit-outer-spin-button, .timer-cue-num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.timer-cue-unit { font-size: 12px; opacity: .65; font-weight: 600; }
.timer-cue-bell { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; }
.timer-cue-bell-label { opacity: .65; font-weight: 600; }
.timer-cue-bell label { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; }
.timer-cue-bell input[type="radio"] { width: 14px; height: 14px; accent-color: var(--color-primary, #f25c2a); cursor: pointer; }
.timer-cue-delbtn, .timer-cue-addbtn {
  margin-left: auto; width: 30px; height: 30px; border-radius: 7px;
  background: transparent; border: 1px solid var(--tt-panel-border); color: var(--tt-fg);
  cursor: pointer; opacity: .75; font-size: 13px;
}
.timer-cue-delbtn:hover { color: #e0606a; opacity: 1; }
.timer-cue-addbtn { background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff; opacity: 1; }

/* PC↔スマホ同期 */
.timer-sync { border-top: 1px solid var(--tt-panel-border); padding-top: 12px; margin-top: 12px; }
.timer-sync-desc {
  font-size: 12.5px; line-height: 1.7; opacity: .8;
  background: var(--tt-bg); border: 1px solid var(--tt-panel-border);
  border-radius: 9px; padding: 9px 11px; margin-bottom: 11px;
}
.timer-sync-desc strong { font-weight: 800; color: var(--color-primary, #f25c2a); }
.timer-sync-note-small { display: inline-block; margin-top: 5px; font-size: 11px; opacity: .7; }
.timer-sync-off, .timer-sync-on {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.timer-sync-start {
  background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff;
}
.timer-sync-start:hover { filter: brightness(1.06); background: var(--color-primary, #f25c2a); }
.timer-sync-stop { color: #e0606a; }
.timer-sync-stop:hover { background: rgba(224, 96, 106, .12); }
.timer-sync-join { display: inline-flex; align-items: center; gap: 6px; }
.timer-sync-input {
  width: 110px; background: var(--tt-bg); color: var(--tt-fg);
  border: 1px solid var(--tt-panel-border); border-radius: 8px;
  padding: 7px 10px; font-size: 14px; font-weight: 800;
  letter-spacing: 2px; text-transform: uppercase; text-align: center;
}
.timer-sync-input::placeholder { letter-spacing: 0; font-weight: 600; opacity: .5; }
.timer-sync-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 800; color: #2faf6a;
}
.timer-sync-status i { font-size: 9px; animation: timerSyncPulse 1.6s ease-in-out infinite; }
@keyframes timerSyncPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
.timer-sync-code-box {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; opacity: .85;
}
.timer-sync-code {
  font-size: 17px; font-weight: 800; letter-spacing: 3px;
  font-variant-numeric: tabular-nums; color: var(--color-primary, #f25c2a);
  background: var(--tt-bg); border: 1px solid var(--tt-panel-border);
  border-radius: 7px; padding: 3px 9px;
}

/* 集中表示中もタイマーは中央に保持（stage が flex:1 で中央寄せ済み）。controls を隠すだけ */
/* ESC：全画面解除トースト（3秒で消える） */
.timer-fs-toast {
  position: fixed;
  left: 50%; bottom: 40px;
  transform: translateX(-50%) translateY(16px);
  background: rgba(20,22,28,.92); color: #fff;
  border: 1px solid rgba(255,255,255,.18);
  padding: 11px 20px; border-radius: 999px;
  font-size: 14px; font-weight: 700;
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease, transform .3s ease;
  z-index: 5000;
}
.timer-fs-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

@media (max-width: 768px) {
  .timer-controls { max-height: 60vh; }
  .timer-cue-row { gap: 5px; }
  .timer-cue-bell { width: 100%; margin-top: 2px; }
  .timer-cue-num { width: 42px; }
  .timer-inline-time input { width: 46px; font-size: 16px; }
  .timer-sync-off, .timer-sync-on { gap: 7px; }
  .timer-sync-join { width: 100%; }
  .timer-sync-input { flex: 1; width: auto; font-size: 16px; }
}

/* ============================================================
   お役立ちツール：カンペ出し
   ============================================================ */
body.gc-cuepeg-open #mobile-tabbar { display: none !important; }
.cuepeg-tool {
  position: fixed;
  inset: 0;
  z-index: 4000;
  display: flex;
  flex-direction: column;
  --cp-fg: #14161c;
  --cp-bg: #ffffff;
  --cp-panel: rgba(0,0,0,.05);
  --cp-panel-border: rgba(0,0,0,.12);
  background: var(--cp-bg);
  color: var(--cp-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif;
  overflow: hidden;
}
.cuepeg-tool.cuepeg-theme-dark {
  --cp-fg: #ffffff;
  --cp-bg: #0b0d12;
  --cp-panel: rgba(255,255,255,.08);
  --cp-panel-border: rgba(255,255,255,.18);
}
.cuepeg-back { position: absolute; top: 14px; left: 14px; z-index: 5; }
.cuepeg-back-btn {
  background: var(--cp-panel); color: var(--cp-fg);
  border: 1px solid var(--cp-panel-border);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
}
.cuepeg-back-btn:hover { background: var(--cp-panel-border); }
.cuepeg-tool.cuepeg-fs .cuepeg-back { display: none; }

/* 表示ステージ（カンペが大きく出る領域） */
.cuepeg-stage {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: clamp(40px, 6vh, 70px) 16px 12px;
}
.cuepeg-board {
  flex: 1 1 auto;
  width: 100%;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  overflow: hidden;
}
.cuepeg-empty {
  font-size: clamp(15px, 3.4vw, 26px);
  font-weight: 700;
  opacity: .4;
  line-height: 1.7;
}
.cuepeg-stage-hint {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: .42;
  margin-top: 6px;
  text-align: center;
}

/* カンペ本体（fontSizeはJSが自動計算してインライン指定） */
.cuepeg-card {
  font-weight: 900;
  line-height: 1.12;
  letter-spacing: .01em;
  white-space: nowrap;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.cuepeg-line { white-space: nowrap; }
/* 時間系カンペ：数字を特大、「分前」を小さく（添付準拠） */
.cuepeg-kind-time { flex-direction: row; align-items: baseline; gap: 0.06em; }
.cuepeg-time-num { font-size: 1em; font-weight: 900; }
.cuepeg-time-unit { font-size: 0.34em; font-weight: 900; }
/* 2行カンペ：上行を小さめ、下行を大きく（強弱） */
.cuepeg-kind-two { gap: 0.12em; }
.cuepeg-line-small { font-size: 0.5em; font-weight: 800; }
.cuepeg-line-big { font-size: 1em; }
/* 下線強調 */
.cuepeg-underline {
  text-decoration: underline;
  text-decoration-thickness: 0.06em;
  text-underline-offset: 0.08em;
}

/* 操作パネル */
.cuepeg-controls {
  flex: 0 0 auto;
  width: min(900px, 96vw);
  margin: 0 auto;
  max-height: 52vh;
  overflow-y: auto;
  padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--cp-panel);
  border-top: 1px solid var(--cp-panel-border);
}
.cuepeg-tool.cuepeg-focus .cuepeg-controls { display: none; }
.cuepeg-tool.cuepeg-focus .cuepeg-stage-hint { display: none; }
.cuepeg-section { display: flex; flex-direction: column; gap: 9px; }
.cuepeg-section-head { font-size: 13px; font-weight: 800; opacity: .85; display: flex; align-items: center; gap: 7px; }
.cuepeg-section-head i { color: var(--color-primary, #f25c2a); }

/* タブ */
.cuepeg-tabs { display: flex; gap: 7px; flex-wrap: wrap; }
.cuepeg-tab {
  border: 1px solid var(--cp-panel-border); background: transparent; color: var(--cp-fg);
  border-radius: 999px; padding: 6px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cuepeg-tab:hover { background: var(--cp-panel-border); }
.cuepeg-tab.active { background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff; }

/* 定型カンペボタン */
.cuepeg-presets { display: flex; gap: 8px; flex-wrap: wrap; }
.cuepeg-preset-btn {
  border: 1px solid var(--cp-panel-border); background: var(--cp-panel); color: var(--cp-fg);
  border-radius: 12px; padding: 10px 16px; font-size: 15px; font-weight: 800; cursor: pointer;
  min-height: 46px;
}
.cuepeg-preset-btn:hover { background: var(--cp-panel-border); }
.cuepeg-preset-btn:active { transform: scale(.97); }

/* 自作カンペ */
.cuepeg-custom-input { display: flex; flex-direction: column; gap: 8px; }
.cuepeg-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid var(--cp-panel-border); background: var(--cp-bg); color: var(--cp-fg);
  border-radius: 10px; padding: 10px 12px; font-size: 16px; font-weight: 600; line-height: 1.5;
  font-family: inherit;
}
.cuepeg-textarea:focus { outline: 2px solid var(--color-primary, #f25c2a); outline-offset: 1px; }
.cuepeg-custom-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.cuepeg-mini-btn {
  border: 1px solid var(--cp-panel-border); background: var(--cp-panel); color: var(--cp-fg);
  border-radius: 999px; padding: 8px 14px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
}
.cuepeg-mini-btn:hover { background: var(--cp-panel-border); }
.cuepeg-show-now { background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff; }
.cuepeg-show-now:hover { filter: brightness(1.06); background: var(--color-primary, #f25c2a); }

/* 保存済み自作カンペ一覧 */
.cuepeg-saved { display: flex; flex-direction: column; gap: 7px; }
.cuepeg-saved-empty { font-size: 12px; opacity: .5; }
.cuepeg-saved-item { display: flex; align-items: stretch; gap: 7px; }
.cuepeg-saved-show {
  flex: 1 1 auto; text-align: left; border: 1px solid var(--cp-panel-border); background: var(--cp-panel); color: var(--cp-fg);
  border-radius: 10px; padding: 9px 13px; font-size: 14px; font-weight: 700; cursor: pointer;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cuepeg-saved-show:hover { background: var(--cp-panel-border); }
.cuepeg-saved-del {
  flex: 0 0 auto; border: 1px solid var(--cp-panel-border); background: transparent; color: var(--cp-fg);
  border-radius: 10px; padding: 0 13px; font-size: 13px; cursor: pointer; opacity: .65;
}
.cuepeg-saved-del:hover { color: #e0606a; opacity: 1; }

/* 表示設定 */
.cuepeg-display { border-top: 1px solid var(--cp-panel-border); padding-top: 12px; }
.cuepeg-opt-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.cuepeg-opt-label { font-size: 13px; font-weight: 700; opacity: .8; min-width: 44px; }
.cuepeg-theme-toggle { display: inline-flex; border: 1px solid var(--cp-panel-border); border-radius: 999px; overflow: hidden; }
.cuepeg-theme-toggle button {
  background: transparent; color: var(--cp-fg); border: none; padding: 7px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.cuepeg-theme-toggle button.active { background: var(--color-primary, #f25c2a); color: #fff; }

/* 集中表示・全画面 */
.cuepeg-bottom { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.cuepeg-ghost {
  background: transparent; color: var(--cp-fg); border: 1px dashed var(--cp-panel-border);
  border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px; opacity: .85;
}
.cuepeg-ghost:hover { opacity: 1; background: var(--cp-panel); }

/* 別ウィンドウ関連UI（手元の操作パネル内） */
.cuepeg-extwin { border-top: 1px solid var(--cp-panel-border); padding-top: 12px; }
.cuepeg-extwin-open { background: var(--color-primary, #f25c2a); border-color: var(--color-primary, #f25c2a); color: #fff; }
.cuepeg-extwin-open:hover { filter: brightness(1.06); background: var(--color-primary, #f25c2a); }
.cuepeg-extwin-close { color: #e0606a; }
.cuepeg-extwin-status { font-size: 12px; font-weight: 700; opacity: .75; display: inline-flex; align-items: center; gap: 6px; }
.cuepeg-extwin-status.is-on { color: #1f9d5b; opacity: 1; }

@media (max-width: 768px) {
  .cuepeg-controls { max-height: 56vh; width: 100%; }
  .cuepeg-preset-btn { font-size: 14px; padding: 9px 13px; }
}

/* ============================================================
   カンペ出し：演者用の表示専用ウィンドウ（/cuepeg-display）
   ============================================================ */
.cuepeg-display-body { margin: 0; padding: 0; }
.cuepeg-display-root {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  --cp-fg: #14161c;
  --cp-bg: #ffffff;
  background: var(--cp-bg);
  color: var(--cp-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif;
  overflow: hidden;
  cursor: none; /* 演者画面ではマウスカーソルを隠す */
  padding: 3vh 3vw;
  box-sizing: border-box;
}
.cuepeg-display-root.cuepeg-theme-dark { --cp-fg: #ffffff; --cp-bg: #0b0d12; }
.cuepeg-display-root .cuepeg-board {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center; text-align: center; overflow: hidden;
}
.cuepeg-display-root .cuepeg-empty { font-size: clamp(18px, 4vw, 36px); font-weight: 700; opacity: .35; line-height: 1.7; }

/* ============================================================
   タイマー＆時計：演者用／会場用の表示専用ウィンドウ（/timer-display）
   ============================================================ */
.timerdisp-body { margin: 0; padding: 0; }
.timerdisp-root {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  --td-fg: #ffffff;
  --td-bg: #0b0d12;
  background: var(--td-bg);
  color: var(--td-fg);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", "Hiragino Kaku Gothic ProN", "Noto Sans JP", Meiryo, Arial, sans-serif;
  overflow: hidden;
  cursor: none; /* 表示画面ではマウスカーソルを隠す */
  padding: 3vh 3vw;
  box-sizing: border-box;
}
.timerdisp-root.timerdisp-theme-light { --td-fg: #14161c; --td-bg: #ffffff; }
.timerdisp-root.timerdisp-theme-dark  { --td-fg: #ffffff; --td-bg: #0b0d12; }
.timerdisp-root.timerdisp-alert .timerdisp-readout { color: #e61b23; }
.timerdisp-root.timerdisp-alert .timerdisp-sub { color: #e61b23; opacity: .95; }

/* 上部のランプ列（緑・黄・赤・自由） */
.timerdisp-lamps {
  display: flex; gap: clamp(12px, 2vw, 28px);
  position: absolute; top: 4vh; left: 0; right: 0;
  justify-content: center; align-items: center;
}
.timerdisp-lamp {
  width: clamp(22px, 3.4vw, 60px); height: clamp(22px, 3.4vw, 60px);
  border-radius: 999px;
  background: rgba(255,255,255,.08);
  border: 2px solid rgba(255,255,255,.18);
  transition: background .15s ease, box-shadow .15s ease;
}
.timerdisp-theme-light .timerdisp-lamp { background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.14); }
.timerdisp-lamp.is-on { border-color: transparent; }

/* メイン表示エリア */
.timerdisp-stage {
  width: 100%; height: 100%;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; text-align: center;
  overflow: hidden;
}
.timerdisp-readout {
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: 0.01em;
  line-height: 1.0;
  white-space: nowrap;
}
.timerdisp-sub {
  margin-top: 1.4vh;
  font-size: clamp(16px, 2.6vw, 40px);
  font-weight: 600;
  opacity: .72;
}
.timerdisp-subclock {
  margin-top: 1.2vh;
  font-weight: 600;
  opacity: .6;
}
.timerdisp-wait {
  position: absolute; left: 0; right: 0; bottom: 5vh;
  text-align: center;
  font-size: clamp(13px, 1.8vw, 22px);
  font-weight: 600; opacity: .35;
}

/* ============================================================
   タイマーツール操作画面：表示画面ボタン＆音の出力先（.timer-extwin / .timer-sinkrow）
   ============================================================ */
.timer-extwin {
  border-top: 1px solid var(--color-border-tertiary, #e5e7eb);
  margin-top: 12px; padding-top: 12px;
}
.timer-extwin-actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px;
}
.timer-extwin-status {
  font-size: 12px; color: var(--color-text-tertiary, #94a3b8); display: inline-flex; align-items: center; gap: 6px;
}
.timer-extwin-status.is-on { color: #1ea84a; font-weight: 600; }
.timer-extwin-status.is-on i { color: #1ea84a; }
.timer-extwin-open i, .timer-extwin-close i { margin-right: 4px; }

.timer-sinkrow {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--color-border-tertiary, #e5e7eb);
}
.timer-sinkrow .timer-select { min-width: 180px; max-width: 100%; }
.timer-sink-note { font-size: 11px; color: var(--color-text-tertiary, #94a3b8); flex-basis: 100%; }

/* Notify-settings: status pills & recommended badge */
.w-pill-ok {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 999px;
  background: var(--color-success-bg, #E1F5EE);
  color: var(--color-success-fg, #085041);
  font-size: 13px; font-weight: 600;
}
.w-pill-ok i { color: var(--color-success-fg, #085041); }
.w-pill-warn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 14px; border-radius: 12px;
  background: var(--color-warning-bg, #FAEEDA);
  color: var(--color-warning-fg, #633806);
  font-size: 13px; font-weight: 600; line-height: 1.5;
}
.w-pill-warn i { color: var(--color-warning-fg, #633806); }
.w-badge-rec {
  display: inline-block;
  padding: 2px 9px; border-radius: 999px;
  background: var(--color-success-bg, #E1F5EE);
  color: var(--color-success-fg, #085041);
  font-size: 11px; font-weight: 700; vertical-align: middle;
}

/* ============================================================
   仕込み図作成（schematic editor）
   ============================================================ */
body.gc-schematic-open #mobile-tabbar { display: none !important; }

.sch-tool {
  display: flex; flex-direction: column;
  height: calc(100vh - 24px);
  min-height: 560px;
  background: #f4f5f8;
  border-radius: 14px; overflow: hidden;
  border: 1px solid #e3e6ee;
}

/* --- トップバー --- */
.sch-topbar {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; background: #fff;
  border-bottom: 1px solid #e6e8ee;
  flex-wrap: wrap;
}
.sch-back-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 9px;
  background: #f1f3f8; border: 1px solid #e1e4ee; color: #374151;
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.sch-back-btn:hover { background: #e8ebf3; }
.sch-title { font-weight: 800; color: #1f2430; font-size: 15px; display: inline-flex; align-items: center; gap: 7px; }
.sch-title i { color: #2563eb; }
.sch-name-input {
  flex: 1; min-width: 140px; max-width: 360px;
  padding: 7px 11px; border: 1px solid #d8dce8; border-radius: 9px;
  font-size: 14px; color: #1f2430;
}
.sch-name-input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.12); }
.sch-savestate { font-size: 12px; color: #8a93a6; margin-left: auto; white-space: nowrap; }

/* --- ツールバー --- */
.sch-toolbar {
  display: flex; align-items: center; gap: 6px;
  padding: 8px 12px; background: #fbfcfe;
  border-bottom: 1px solid #e6e8ee; flex-wrap: wrap;
}
.sch-tb-group { display: inline-flex; align-items: center; gap: 4px; }
.sch-tb-sep { width: 1px; height: 26px; background: #e1e4ee; margin: 0 6px; }
.sch-tb-spacer { flex: 1; }
.sch-tb-btn {
  display: inline-flex; align-items: center; gap: 6px;
  min-width: 36px; height: 36px; padding: 0 10px;
  border: 1px solid #e1e4ee; border-radius: 9px; background: #fff;
  color: #4b5563; font-size: 13px; font-weight: 600; cursor: pointer;
  justify-content: center;
}
.sch-tb-btn span { font-size: 12px; }
.sch-tb-btn:hover { background: #eef1f8; color: #1f2430; }
.sch-tb-btn.is-active { background: #2563eb; border-color: #2563eb; color: #fff; }
.sch-tb-btn:disabled { opacity: .4; cursor: default; }
.sch-zoom-label { font-size: 12px; color: #6b7280; min-width: 42px; text-align: center; font-weight: 700; }

/* --- 本体3カラム --- */
.sch-body { display: flex; flex: 1; min-height: 0; }

/* パレット */
.sch-palette {
  width: 196px; flex: none; background: #fff;
  border-right: 1px solid #e6e8ee; display: flex; flex-direction: column;
  min-height: 0;
}
.sch-palette-search { padding: 10px; border-bottom: 1px solid #eef0f5; }
.sch-palette-search input {
  width: 100%; padding: 7px 10px; border: 1px solid #d8dce8;
  border-radius: 8px; font-size: 13px;
}
.sch-palette-search input:focus { outline: none; border-color: #2563eb; }
.sch-palette-list { flex: 1; overflow-y: auto; padding: 8px; }
.sch-pal-group { margin-bottom: 12px; }
.sch-pal-grouphd { font-size: 11px; font-weight: 800; color: #9aa1b2; padding: 4px 4px 6px; text-transform: none; }
.sch-pal-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 8px; margin-bottom: 4px;
  border: 1px solid #eceef5; border-radius: 9px; background: #fff;
  cursor: grab; text-align: left;
}
.sch-pal-item:hover { background: #f4f7ff; border-color: #cdd9f5; }
.sch-pal-item:active { cursor: grabbing; }
.sch-pal-ico {
  width: 28px; height: 28px; flex: none; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  color: #fff; font-size: 13px;
}
.sch-pal-label { font-size: 13px; color: #374151; font-weight: 600; }
.sch-pal-empty, .sch-lib-empty { padding: 20px 12px; color: #9aa1b2; font-size: 13px; text-align: center; }

/* キャンバス */
.sch-canvas-wrap {
  flex: 1; position: relative; min-width: 0; overflow: hidden;
  background: #fff; touch-action: none;
}
.sch-canvas-wrap.sch-mode-select { cursor: default; }
.sch-canvas-wrap.sch-mode-wire { cursor: crosshair; }
.sch-canvas-wrap.sch-mode-text { cursor: text; }
.sch-canvas-wrap.sch-panning { cursor: grabbing; }
.sch-svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

.sch-node-box { stroke-width: 2; transition: stroke-width .1s; }
.sch-node { cursor: move; }
.sch-node .sch-node-label {
  font-family: -apple-system, "Segoe UI", "Hiragino Sans", sans-serif;
  font-size: 12px; font-weight: 700; fill: #1f2937; pointer-events: none;
}
.sch-node.is-selected .sch-node-box { stroke-width: 3; filter: drop-shadow(0 2px 8px rgba(37,99,235,.35)); }
.sch-port {
  fill: #fff; stroke: #2563eb; stroke-width: 2; cursor: crosshair;
}
.sch-port:hover { fill: #2563eb; }

.sch-edge { fill: none; stroke-width: 2.5; pointer-events: none; }
.sch-edge.is-selected { stroke-width: 4; }
.sch-edge-hit { fill: none; stroke: transparent; stroke-width: 14; cursor: pointer; }
.sch-edge-label { font-size: 11px; font-weight: 700; pointer-events: none; }
.sch-edge-labelbg { fill: #fff; stroke: #e1e4ee; stroke-width: .8; pointer-events: none; }
.sch-wire-preview { fill: none; stroke: #2563eb; stroke-width: 2; stroke-dasharray: 5 4; pointer-events: none; }

.sch-empty-hint {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  pointer-events: none; color: #aab0c0; text-align: center; padding: 20px;
}
.sch-empty-hint i { font-size: 48px; opacity: .5; }
.sch-empty-hint p { font-size: 14px; line-height: 1.7; margin: 0; }

/* プロパティ */
.sch-props {
  width: 234px; flex: none; background: #fff;
  border-left: 1px solid #e6e8ee; overflow-y: auto; min-height: 0;
}
.sch-props-empty { padding: 28px 18px; text-align: center; color: #9aa1b2; }
.sch-props-empty i { font-size: 30px; display: block; margin-bottom: 12px; opacity: .55; }
.sch-props-empty p { font-size: 13px; line-height: 1.7; margin: 0; }
.sch-props-body { padding: 16px; }
.sch-prop-head { font-size: 14px; font-weight: 800; color: #1f2430; margin-bottom: 14px; display: flex; align-items: center; gap: 8px; }
.sch-prop-head i { color: #2563eb; }
.sch-prop-route { font-size: 12px; color: #6b7280; margin-bottom: 12px; background: #f5f7fb; padding: 8px 10px; border-radius: 8px; }
.sch-prop-field { display: block; margin-bottom: 12px; }
.sch-prop-field > span { display: block; font-size: 12px; font-weight: 700; color: #6b7280; margin-bottom: 5px; }
.sch-prop-field input[type=text], .sch-prop-field select {
  width: 100%; padding: 8px 10px; border: 1px solid #d8dce8; border-radius: 8px; font-size: 13px;
}
.sch-prop-field input[type=text]:focus, .sch-prop-field select:focus { outline: none; border-color: #2563eb; }
.sch-prop-field input[type=color] {
  width: 100%; height: 38px; border: 1px solid #d8dce8; border-radius: 8px; padding: 3px; cursor: pointer;
}
.sch-prop-del {
  width: 100%; margin-top: 6px; padding: 9px;
  border: 1px solid #f3c6c6; border-radius: 9px; background: #fff5f5;
  color: #dc2626; font-size: 13px; font-weight: 700; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
.sch-prop-del:hover { background: #fee2e2; }

/* --- モーダル（ライブラリ／書き出し） --- */
.sch-modal-overlay {
  position: fixed; inset: 0; z-index: 4000;
  background: rgba(15,18,28,.5); display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.sch-modal {
  background: #fff; border-radius: 16px; width: 100%; max-width: 460px;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.sch-modal-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 18px; border-bottom: 1px solid #eef0f5; font-weight: 800; color: #1f2430;
}
.sch-modal-x { background: none; border: none; font-size: 18px; color: #9aa1b2; cursor: pointer; }
.sch-modal-x:hover { color: #1f2430; }
.sch-modal-bd { padding: 14px 18px; overflow-y: auto; }

.sch-lib-list { display: flex; flex-direction: column; gap: 8px; }
.sch-lib-row { display: flex; align-items: stretch; gap: 6px; }
.sch-lib-open {
  flex: 1; text-align: left; padding: 11px 13px;
  border: 1px solid #e6e8ee; border-radius: 10px; background: #fff; cursor: pointer;
}
.sch-lib-open:hover { background: #f4f7ff; border-color: #cdd9f5; }
.sch-lib-name { display: block; font-size: 14px; font-weight: 700; color: #1f2430; }
.sch-lib-name i { color: #2563eb; margin-right: 6px; }
.sch-lib-meta { display: block; font-size: 12px; color: #9aa1b2; margin-top: 3px; }
.sch-lib-del {
  flex: none; width: 42px; border: 1px solid #f3c6c6; border-radius: 10px;
  background: #fff5f5; color: #dc2626; cursor: pointer;
}
.sch-lib-del:hover { background: #fee2e2; }

.sch-export-menu { display: flex; flex-direction: column; gap: 10px; }
.sch-export-btn {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  border: 1px solid #e6e8ee; border-radius: 12px; background: #fff; cursor: pointer; text-align: left;
}
.sch-export-btn:hover { background: #f4f7ff; border-color: #cdd9f5; }
.sch-export-btn > i { font-size: 22px; color: #2563eb; width: 28px; text-align: center; }
.sch-export-btn strong { display: block; font-size: 14px; color: #1f2430; }
.sch-export-btn span { display: block; font-size: 12px; color: #9aa1b2; margin-top: 2px; }

/* --- スマホ対応 --- */
@media (max-width: 820px) {
  .sch-tool { height: calc(100vh - 110px); }
  .sch-palette { width: 150px; }
  .sch-props { width: 180px; }
  .sch-tb-btn span { display: none; }
  .sch-tb-btn.sch-tb-text span { display: none; }
}
@media (max-width: 560px) {
  .sch-palette { width: 116px; }
  .sch-pal-label { font-size: 12px; }
  .sch-props { width: 0; display: none; }
  .sch-props.is-open { display: block; position: absolute; right: 0; top: 0; bottom: 0; width: 200px; z-index: 10; box-shadow: -4px 0 16px rgba(0,0,0,.12); }
}