/* /jobs/ 専用カラーオーバーライド (#E91E8C マゼンタ) */
#jobs-root {
  --color-primary: #e91e8c;
  --color-primary-dark: #b51568;
  --color-primary-light: #ffe0ee;
  --color-bg-jobs: #f5f5f5;
  min-height: calc(100vh - var(--nav-height) - 100px);
  background: var(--color-bg-jobs);
}
#jobs-root .btn-primary { background: var(--color-primary); }
#jobs-root .btn-primary:hover { background: var(--color-primary-dark); }
#jobs-root .gnav-link.active { color: var(--color-primary); }

/* ============ ヒーロー ============ */
.jobs-hero {
  background: linear-gradient(180deg, #fff 0%, var(--color-primary-light) 100%);
  padding: var(--space-7) var(--space-5) var(--space-6);
  border-bottom: 1px solid var(--color-border);
}
.jobs-hero-inner { max-width: var(--max-content); margin: 0 auto; text-align: center; }
.jobs-hero h1 { font-size: clamp(26px, 4vw, 40px); font-weight: 800; color: var(--color-dark); margin: 0 0 var(--space-3); }
.jobs-hero p { color: var(--color-text-muted); margin: 0 0 var(--space-5); font-size: 15px; }

.jobs-search-bar {
  display: flex;
  gap: var(--space-2);
  max-width: 720px;
  margin: 0 auto var(--space-4);
  background: #fff;
  padding: 8px;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow);
  border: 1px solid var(--color-border);
  flex-wrap: wrap;
}
.jobs-search-bar select, .jobs-search-bar input[type=search] {
  flex: 1;
  min-width: 140px;
  padding: 12px 14px;
  border: 0;
  border-right: 1px solid var(--color-border);
  font-size: 14px;
  background: transparent;
  font-family: inherit;
}
.jobs-search-bar select:last-of-type, .jobs-search-bar input[type=search]:last-of-type { border-right: 0; }
.jobs-search-bar button { border-radius: var(--radius); }
.jobs-hero-cta { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; }

/* ============ 2 カラム ============ */
.jobs-layout {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 24px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 16px;
  align-items: start;
}
.jobs-sidebar, .jobs-filter-sidebar {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
  position: sticky;
  top: 80px;
  max-height: calc(100vh - 100px);
  overflow-y: auto;
  overflow-x: hidden;
  border: 1px solid #f0f0f0;
  scrollbar-width: thin;
  scrollbar-color: #e0e0e0 transparent;
}
.jobs-sidebar::-webkit-scrollbar,
.jobs-filter-sidebar::-webkit-scrollbar { width: 4px; }
.jobs-sidebar::-webkit-scrollbar-track,
.jobs-filter-sidebar::-webkit-scrollbar-track { background: transparent; }
.jobs-sidebar::-webkit-scrollbar-thumb,
.jobs-filter-sidebar::-webkit-scrollbar-thumb { background: #e0e0e0; border-radius: 2px; }
.jobs-sidebar::-webkit-scrollbar-thumb:hover,
.jobs-filter-sidebar::-webkit-scrollbar-thumb:hover { background: #C2185B; }
.filter-toggle-btn { display: none; }
.filter-body { display: block; }
.sidebar-section { margin-bottom: var(--space-5); }
.sidebar-section h3 {
  font-size: 13px;
  font-weight: 800;
  color: var(--color-dark);
  margin: 0 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 2px solid var(--color-primary-light);
}
.filter-group { display: flex; flex-direction: column; gap: 8px; }
.filter-chk {
  display: flex; align-items: center; gap: 8px;
  font-size: 13px; cursor: pointer;
}
.filter-chk input { accent-color: var(--color-primary); width: 16px; height: 16px; }
.sidebar-section select, .sidebar-section input[type=range] {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  background: #fff;
  font-family: inherit;
}
.salary-range-display {
  text-align: center;
  font-weight: 700;
  color: var(--color-primary);
  margin-top: 6px;
  font-size: 14px;
}
.tag-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tag-chip {
  padding: 6px 12px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  cursor: pointer;
}
.tag-chip.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

/* ============ メイン ============ */
.jobs-main { min-width: 0; }
.jobs-main-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-4);
  flex-wrap: wrap;
  gap: var(--space-3);
}
.jobs-count { font-size: 14px; color: var(--color-text-muted); font-weight: 600; }
.jobs-sort {
  padding: 8px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: #fff;
  font-size: 13px;
  font-family: inherit;
}

/* 求人カードグリッド */
.jobs-list, .jobs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

/* ========== 求人カード ========== */
.job-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #efefef;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.2s, box-shadow 0.2s;
  padding: 0;
  color: inherit;
}
.job-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  border-color: #efefef;
}

/* 写真エリア */
.jc-photos {
  display: grid;
  width: 100%;
  flex-shrink: 0;
  overflow: hidden;
  background: #f5f5f5;
}
.jc-photos.two { grid-template-columns: 1fr 1fr; height: 150px; gap: 2px; }
.jc-photos.one { grid-template-columns: 1fr; height: 180px; }
.jc-photos img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jc-photos-placeholder {
  height: 64px;
  background: #f9f9f9;
  display: flex;
  align-items: center;
  justify-content: center;
  border-bottom: 1px solid #f0f0f0;
}
.jc-photos-placeholder span { font-size: 12px; color: #ccc; }

/* カード本文 */
.jc-body { padding: 14px 16px; flex: 1; display: flex; flex-direction: column; }
.jc-badges { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; }
.jc-badge { font-size: 11px; font-weight: 700; padding: 2px 7px; border-radius: 4px; line-height: 1.5; }
.jc-badge.pr   { background: #FFF8E1; color: #F57F17; border: 1px solid #FFE082; }
.jc-badge.new  { background: #E8F5E9; color: #2E7D32; border: 1px solid #A5D6A7; }
.jc-badge.type { background: #F5F5F5; color: #555;    border: 1px solid #E0E0E0; }
.jc-company { font-size: 12px; color: #999; margin: 0 0 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.jc-title {
  font-size: 14px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.45;
  margin: 0 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.jc-salary { font-size: 18px; font-weight: 800; color: #C2185B; margin: 0 0 6px; line-height: 1.2; }
.jc-meta { font-size: 12px; color: #777; margin: 0 0 10px; line-height: 1.6; }
.jc-tags { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; flex: 1; }
.jc-tag { font-size: 11px; background: #F5F5F5; color: #666; padding: 3px 9px; border-radius: 20px; border: 1px solid #E8E8E8; }

/* カードフッター (ボタン行) */
.jc-actions {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 8px;
  margin-top: auto;
  padding-top: 12px;
  border-top: 1px solid #f5f5f5;
}
.jc-bookmark {
  padding: 10px 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  color: #666;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  transition: 0.2s;
  white-space: nowrap;
}
.jc-bookmark.active { border-color: #C2185B; color: #C2185B; background: #fff0f5; }
.jc-bookmark:hover { border-color: #C2185B; color: #C2185B; }
.jc-detail-btn {
  padding: 10px 16px;
  background: #C2185B;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: background 0.2s;
  text-decoration: none;
}
.jc-detail-btn:hover { background: #ad1457; }

/* ========== 求人レスポンシブ ========== */
@media (max-width: 1024px) {
  .jobs-layout { grid-template-columns: 240px 1fr; gap: 16px; padding: 16px 12px; }
  .jobs-list, .jobs-grid { grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
}
@media (max-width: 768px) {
  .jobs-layout { grid-template-columns: 1fr; padding: 12px; }
  .jobs-sidebar, .jobs-filter-sidebar { position: static; padding: 12px; max-height: none; overflow: visible; }
  .filter-toggle-btn {
    display: flex;
    width: 100%;
    padding: 12px 16px;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
  }
  .filter-body { display: none; }
  .filter-body.open { display: block; }
  .jobs-list, .jobs-grid { grid-template-columns: 1fr; gap: 12px; }
  .jc-photos.two { height: 130px; }
  .jc-photos.one { height: 160px; }
}
@media (max-width: 480px) {
  .jobs-layout { padding: 8px; }
  .jobs-main-head, .jobs-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .jc-salary { font-size: 16px; }
  .jc-title { font-size: 13px; }
  .jc-photos.two { height: 110px; }
}

/* ============ ページネーション ============ */
.pagination { display: flex; justify-content: center; gap: var(--space-2); margin-top: var(--space-6); }
.page-btn {
  padding: 8px 14px;
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  color: var(--color-text);
}
.page-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.page-btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============ 求人詳細 ============ */
.back-link { display: inline-block; color: var(--color-text-muted); font-size: 13px; margin-bottom: var(--space-3); font-weight: 600; }
.back-link:hover { color: var(--color-primary); }

.job-detail-head {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-6) var(--space-5);
}
.job-detail-inner { max-width: var(--max-content); margin: 0 auto; }
.job-detail-head h1 { font-size: clamp(22px, 3vw, 32px); font-weight: 800; color: var(--color-dark); margin: 0 0 var(--space-2); }
.job-detail-company { font-size: 15px; color: var(--color-primary-dark); font-weight: 700; margin-bottom: var(--space-3); }
.job-detail-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--space-3); }
.job-detail-salary { font-size: 28px; font-weight: 800; color: var(--color-primary); margin: var(--space-3) 0; }

.job-detail-body {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: var(--space-5);
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--space-5);
}
.job-detail-main { min-width: 0; }
.job-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.job-section h2 { font-size: 18px; font-weight: 800; margin: 0 0 var(--space-3); }
.job-section .body-text { font-size: 14px; line-height: 1.85; white-space: pre-wrap; color: var(--color-text); }

.job-info-table { width: 100%; }
.job-info-table tr { border-bottom: 1px solid var(--color-border); }
.job-info-table th, .job-info-table td { padding: var(--space-3) 0; font-size: 13px; text-align: left; vertical-align: top; }
.job-info-table th { width: 110px; color: var(--color-text-muted); font-weight: 600; }
.job-info-table td { color: var(--color-text); }

.salon-reviews-card {
  background: linear-gradient(180deg, #fff, var(--color-primary-light));
  border: 2px solid var(--color-primary-light);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
}
.salon-reviews-card h3 {
  font-size: 14px;
  color: var(--color-primary-dark);
  margin: 0 0 var(--space-3);
  display: flex;
  align-items: center;
  gap: 6px;
}
.salon-reviews-rating { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-3); }
.salon-reviews-rating .item { font-size: 12px; }
.salon-reviews-rating .item .label { color: var(--color-text-muted); }
.salon-reviews-rating .item .stars { color: var(--color-primary); letter-spacing: 1px; }
.review-snippet { font-size: 12px; line-height: 1.7; color: var(--color-text); border-top: 1px solid var(--color-border); padding-top: var(--space-3); margin-top: var(--space-2); }

.apply-fixed-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  background: #fff;
  border-top: 1px solid var(--color-border);
  padding: var(--space-3) var(--space-5);
  display: flex;
  justify-content: center;
  gap: var(--space-3);
  z-index: 50;
  box-shadow: 0 -4px 20px rgba(0,0,0,0.08);
}
.apply-fixed-bar .btn { min-width: 200px; }

.gmap-frame { width: 100%; height: 280px; border: 0; border-radius: var(--radius); }

/* ============ モーダル ============ */
.modal { position: fixed; inset: 0; z-index: 100; display: flex; align-items: center; justify-content: center; }
.modal[hidden] { display: none; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(26, 17, 24, 0.55); backdrop-filter: blur(4px); }
.modal-card {
  position: relative;
  background: #fff;
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 520px;
  width: calc(100% - 32px);
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0,0,0,0.25);
}
.modal-card h3 { margin: 0 0 var(--space-4); font-size: 20px; font-weight: 800; }
.form-actions { display: flex; gap: var(--space-2); justify-content: flex-end; margin-top: var(--space-4); }

/* ============ 企業ダッシュボード ============ */
.dash-tabs {
  background: #fff;
  border-bottom: 1px solid var(--color-border);
  position: sticky;
  top: var(--nav-height);
  z-index: 10;
}
.dash-tabs-inner {
  max-width: var(--max-content);
  margin: 0 auto;
  display: flex;
  gap: var(--space-4);
  padding: 0 var(--space-5);
}
.dash-tab {
  padding: 16px 4px;
  background: transparent;
  border: 0;
  border-bottom: 3px solid transparent;
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
}
.dash-tab.active { color: var(--color-primary); border-bottom-color: var(--color-primary); }

.dash-body { max-width: var(--max-content); margin: 0 auto; padding: var(--space-5); }
.dash-body h2 { margin: 0 0 var(--space-4); font-size: 22px; font-weight: 800; }

.app-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  box-shadow: var(--shadow-sm);
}
.app-card-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-2); }
.app-status-badge {
  padding: 3px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  background: var(--color-surface-alt);
  color: var(--color-text-muted);
}
.app-status-badge.pending { background: #fff3cd; color: #8a6914; }
.app-status-badge.hired { background: #d4edda; color: #155724; }
.app-status-badge.rejected { background: #f8d7da; color: #721c24; }

.empty { text-align: center; padding: var(--space-7); color: var(--color-text-muted); font-size: 14px; }

@media (max-width: 860px) {
  .jobs-layout { grid-template-columns: 1fr; }
  .jobs-sidebar { position: static; }
  .job-detail-body { grid-template-columns: 1fr; }
  .jobs-search-bar select, .jobs-search-bar input[type=search] { border-right: 0; border-bottom: 1px solid var(--color-border); }
  .apply-fixed-bar { padding: var(--space-2) var(--space-3); }
  .apply-fixed-bar .btn { min-width: 0; flex: 1; }
}

/* ============ 追加: NEW バッジ / シェアボタン / 印刷 / ヒーロー dual CTA ============ */
.new-badge {
  display: inline-block;
  background: #ff5722;
  color: #fff;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 800;
  margin-left: 6px;
  letter-spacing: 0.5px;
}

.heart-btn {
  position: relative;
  background: transparent;
  border: 1px solid var(--color-border);
  width: 38px; height: 38px;
  border-radius: 50%;
  font-size: 18px;
  color: var(--color-text-muted);
  transition: all 0.2s ease;
  flex-shrink: 0;
}
.heart-btn:hover { transform: scale(1.1); border-color: var(--color-primary); color: var(--color-primary); }
.heart-btn.active { background: var(--color-primary); color: #fff; border-color: var(--color-primary); animation: heartPop 0.3s ease; }
@keyframes heartPop {
  0% { transform: scale(1); }
  50% { transform: scale(1.4); }
  100% { transform: scale(1); }
}

/* dual-cta 削除済: ヒーローは検索バーのみ */

.share-buttons { display: flex; gap: var(--space-2); margin-top: var(--space-3); }
.share-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px solid var(--color-border);
  background: #fff;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
  color: var(--color-text);
}
.share-btn.line { background: #06c755; color: #fff; border-color: #06c755; }
.share-btn.twitter { background: #1d9bf0; color: #fff; border-color: #1d9bf0; }
.share-btn:hover { transform: translateY(-1px); }

.advanced-toggle {
  background: transparent;
  border: 0;
  color: var(--color-primary);
  font-size: 13px;
  font-weight: 600;
  padding: var(--space-2) 0;
  cursor: pointer;
  width: 100%;
  text-align: left;
}
.advanced-panel { margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); }
.advanced-panel[hidden] { display: none; }

.similar-jobs-section {
  max-width: var(--max-content);
  margin: 0 auto;
  padding: 0 var(--space-5) var(--space-6);
}
.similar-jobs-section h2 { font-size: 18px; font-weight: 800; margin: 0 0 var(--space-4); }
.similar-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-3); }

/* ログイン画面 */
.jobs-login-wrap {
  max-width: 480px;
  margin: var(--space-7) auto;
  padding: 0 var(--space-5);
}
.jobs-login-card {
  background: #fff;
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  box-shadow: var(--shadow);
}
.jobs-login-tabs { display: flex; gap: var(--space-2); background: var(--color-surface-alt); padding: 4px; border-radius: var(--radius); margin-bottom: var(--space-5); }
.jobs-login-tab { flex: 1; padding: 12px; background: transparent; border: 0; font-size: 13px; font-weight: 700; color: var(--color-text-muted); border-radius: 6px; }
.jobs-login-tab.active { background: #fff; color: var(--color-primary); box-shadow: var(--shadow-sm); }

/* 企業ダッシュボード HOME */
.dash-home-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
.dash-stat-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.dash-stat-card h4 { font-size: 12px; color: var(--color-text-muted); margin: 0 0 var(--space-2); font-weight: 700; }
.dash-stat-num { font-size: 32px; font-weight: 800; color: var(--color-dark); line-height: 1; margin-bottom: 6px; }
.dash-stat-num.alert { color: var(--color-primary); }
.dash-stat-card .btn { width: 100%; margin-top: var(--space-2); padding: 6px 12px; font-size: 12px; }

.dash-section {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  margin-bottom: var(--space-4);
  box-shadow: var(--shadow-sm);
}
.dash-section h3 { margin: 0 0 var(--space-3); font-size: 16px; font-weight: 800; }

@media print {
  .global-nav, .footer, .apply-fixed-bar, .share-buttons, .similar-jobs-section, .jobs-sidebar, .pagination { display: none !important; }
  body { background: #fff; }
  .job-detail-body { grid-template-columns: 1fr !important; }
  .job-section { box-shadow: none !important; border: 1px solid #ccc !important; page-break-inside: avoid; }
}

@media (max-width: 720px) {
  .dash-home-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ============ 採用LP ビルダー ============ */
.recruit-builder { display:grid; grid-template-columns:55fr 45fr; height:calc(100vh - 220px); min-height:600px; border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.recruit-builder-preview { display:flex; flex-direction:column; border-right:1px solid #eee; background:#f5f5f5; }
.preview-toolbar { display:flex; justify-content:space-between; align-items:center; padding:10px 16px; background:#fff; border-bottom:1px solid #eee; flex-wrap:wrap; gap:8px; }
.device-btns { display:flex; gap:4px; }
.device-btn { padding:6px 10px; border:1px solid #ddd; border-radius:6px; background:#fff; cursor:pointer; font-size:13px; font-family:inherit; }
.device-btn.active { background:#c2185b; color:#fff; border-color:#c2185b; }
.preview-status { display:flex; align-items:center; gap:8px; }
.btn-outline-sm { padding:6px 12px; border:1px solid #ddd; border-radius:6px; font-size:12px; background:#fff; color:#333; text-decoration:none; }
.btn-outline-sm:hover { border-color:#c2185b; color:#c2185b; }
.preview-frame-wrap { flex:1; overflow:hidden; padding:16px; transition:max-width 0.3s; max-width:100%; }
.recruit-preview-frame { width:100%; height:100%; border:0; border-radius:8px; background:#fff; box-shadow:0 4px 20px rgba(0,0,0,0.1); }
.recruit-builder-panel { overflow-y:auto; background:#fff; }
.builder-tabs { display:flex; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:10; }
.builder-tab { flex:1; padding:14px 8px; border:0; background:none; cursor:pointer; font-size:13px; color:#666; border-bottom:2px solid transparent; font-family:inherit; }
.builder-tab.active { color:#c2185b; border-bottom-color:#c2185b; font-weight:600; }
.builder-tab-content { padding:20px; }
.builder-tab-content.hidden { display:none; }
.builder-section { margin-bottom:24px; }
.builder-label { display:block; font-weight:600; font-size:13px; margin-bottom:8px; color:#333; }
.builder-label .required { color:#c2185b; margin-left:4px; }
.builder-label .optional { color:#999; font-weight:400; font-size:11px; margin-left:4px; }
.builder-input { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; }
.builder-textarea { width:100%; padding:10px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; resize:vertical; font-family:inherit; }
.builder-input:focus, .builder-textarea:focus { border-color:#c2185b; outline:none; }

.theme-selector { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; }
.theme-option { border:2px solid #eee; border-radius:10px; padding:10px; cursor:pointer; text-align:center; transition:0.2s; }
.theme-option.active { border-color:#c2185b; }
.theme-swatch { height:40px; border-radius:6px; margin-bottom:6px; }
.theme-option span { font-size:12px; font-weight:600; }

.sections-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:12px; }
.section-list-item { display:flex; align-items:center; gap:10px; padding:12px; border:1px solid #eee; border-radius:8px; margin-bottom:6px; background:#fff; transition:0.15s; }
.section-list-item:hover { background:#fafafa; border-color:#ddd; }
.drag-handle { cursor:move; color:#ccc; font-size:18px; padding:0 4px; user-select:none; }
.section-type-icon { font-size:22px; flex-shrink:0; }
.section-info { flex:1; min-width:0; overflow:hidden; }
.section-type-label { font-size:13px; font-weight:600; display:block; }
.section-preview-text { font-size:11px; color:#999; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block; }
.section-actions { display:flex; align-items:center; gap:4px; flex-shrink:0; }
.btn-icon { background:none; border:0; cursor:pointer; padding:6px; font-size:14px; border-radius:4px; line-height:1; }
.btn-icon:hover { background:#f0f0f0; }

/* トグルスイッチ */
.toggle-switch { position:relative; display:inline-block; width:36px; height:20px; vertical-align:middle; }
.toggle-switch input { opacity:0; width:0; height:0; }
.toggle-slider { position:absolute; inset:0; background:#ddd; border-radius:20px; cursor:pointer; transition:0.3s; }
.toggle-slider:before { content:''; position:absolute; width:14px; height:14px; left:3px; top:3px; background:#fff; border-radius:50%; transition:0.3s; }
.toggle-switch input:checked + .toggle-slider { background:#c2185b; }
.toggle-switch input:checked + .toggle-slider:before { transform:translateX(16px); }

/* 公開設定 */
.publish-status-card { display:flex; align-items:center; gap:14px; padding:18px; border-radius:12px; margin-bottom:20px; }
.publish-status-card.published { background:#e8f5e9; }
.publish-status-card.unpublished { background:#f5f5f5; }
.publish-status-icon { font-size:24px; }
.publish-status-text { flex:1; }
.publish-status-text strong { font-size:15px; }
.publish-status-text p { font-size:12px; color:#666; margin-top:2px; }
.toggle-switch-lg { position:relative; display:inline-block; width:52px; height:28px; }
.toggle-switch-lg input { opacity:0; width:0; height:0; }
.toggle-slider-lg { position:absolute; inset:0; background:#ddd; border-radius:28px; cursor:pointer; transition:0.3s; }
.toggle-slider-lg:before { content:''; position:absolute; width:20px; height:20px; left:4px; top:4px; background:#fff; border-radius:50%; transition:0.3s; box-shadow:0 2px 4px rgba(0,0,0,0.2); }
.toggle-switch-lg input:checked + .toggle-slider-lg { background:#c2185b; }
.toggle-switch-lg input:checked + .toggle-slider-lg:before { transform:translateX(24px); }

/* QR */
.qr-section { display:flex; flex-direction:column; align-items:center; gap:12px; }
.qr-canvas { border:1px solid #eee; border-radius:8px; padding:8px; background:#fff; min-height:160px; min-width:160px; display:flex; align-items:center; justify-content:center; }
.url-copy-row { display:flex; gap:8px; }
.url-input { flex:1; background:#f9f9f9; font-size:12px; }

/* セクション追加モーダル */
.section-type-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; padding:8px 0; }
.section-type-card { border:1px solid #eee; border-radius:10px; padding:18px 12px; cursor:pointer; text-align:center; transition:0.2s; background:#fff; }
.section-type-card:hover { border-color:#c2185b; background:#fff0f5; transform:translateY(-2px); box-shadow:0 6px 16px rgba(194,24,91,0.12); }
.section-type-card-icon { font-size:32px; margin-bottom:8px; }
.section-type-card-name { font-weight:700; font-size:13px; }
.section-type-card-desc { font-size:11px; color:#999; margin-top:4px; line-height:1.5; }

/* オンボーディング */
.recruit-onboarding { padding:24px; }
.recruit-onboarding-hero { text-align:center; padding:48px 24px; background:linear-gradient(135deg,#fff0f5,#fce4ec); border-radius:16px; margin-bottom:32px; }
.recruit-onboarding-hero h2 { font-size:28px; font-weight:800; line-height:1.4; margin-bottom:16px; color:#1a1118; }
.recruit-onboarding-hero p { color:#666; margin-bottom:20px; font-size:14px; line-height:1.8; }
.recruit-features { display:flex; flex-wrap:wrap; gap:8px; justify-content:center; }
.recruit-features span { background:#fff; border:1px solid #c2185b; color:#c2185b; border-radius:20px; padding:6px 14px; font-size:13px; font-weight:600; }
.recruit-theme-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:16px; }
.recruit-theme-card { border:2px solid #eee; border-radius:14px; overflow:hidden; cursor:default; transition:0.2s; background:#fff; display:flex; flex-direction:column; }
.recruit-theme-card:hover { border-color:#c2185b; transform:translateY(-4px); box-shadow:0 12px 28px rgba(194,24,91,0.15); }
.recruit-theme-preview { height:240px; overflow:hidden; position:relative; background:#f5f5f5; }
.recruit-theme-preview iframe { width:200%; height:200%; transform:scale(0.5); transform-origin:0 0; border:0; pointer-events:none; }
.recruit-theme-info { padding:14px 16px; flex:1; }
.theme-badge { background:#c2185b; color:#fff; font-size:11px; padding:3px 10px; border-radius:12px; font-weight:700; }
.recruit-theme-info p { font-size:12px; color:#666; margin-top:8px; line-height:1.6; }
.recruit-theme-card .btn-accent, .recruit-theme-card .create-theme-btn { background:#c2185b; color:#fff; border:0; width:calc(100% - 32px); margin:0 16px 16px; padding:12px; border-radius:8px; font-size:14px; font-weight:700; cursor:pointer; font-family:inherit; }
.recruit-theme-card .create-theme-btn:hover { background:#8e0e42; }

/* 保存インジケーター */
.save-indicator { font-size:12px; transition:color 0.3s; }
.save-indicator.saving { color:#999; }
.save-indicator.saved { color:#4caf50; }
.save-indicator.error { color:#f44336; }

/* セクション編集スライドパネル */
.section-edit-panel { position:fixed; right:0; top:0; width:420px; height:100vh; background:#fff; box-shadow:-4px 0 24px rgba(0,0,0,0.15); z-index:200; transform:translateX(100%); transition:transform 0.3s cubic-bezier(0.4,0,0.2,1); overflow-y:auto; }
.section-edit-panel.open { transform:translateX(0); }
.section-edit-header { display:flex; justify-content:space-between; align-items:center; padding:18px 20px; border-bottom:1px solid #eee; position:sticky; top:0; background:#fff; z-index:1; }
.section-edit-body { padding:20px; }
.edit-form-group { margin-bottom:18px; }
.edit-form-group label { display:block; font-size:13px; font-weight:600; margin-bottom:6px; color:#333; }

@media (max-width:900px) {
  .recruit-builder { grid-template-columns:1fr; height:auto; }
  .recruit-builder-preview { display:none; }
  .recruit-theme-grid { grid-template-columns:1fr; }
  .section-type-grid { grid-template-columns:repeat(2,1fr); }
  .section-edit-panel { width:100%; }
}

/* ============ 画像アップロード共通 ============ */
.img-upload-wrap { display:flex; flex-direction:column; gap:8px; }
.img-upload-current { position:relative; }
.img-upload-current img { width:100%; max-height:200px; object-fit:cover; border-radius:8px; }
.img-upload-remove { position:absolute; top:8px; right:8px; background:rgba(0,0,0,0.7); color:#fff; border:0; padding:6px 12px; border-radius:6px; cursor:pointer; font-size:12px; }
.upload-dropzone { border:2px dashed #ddd; border-radius:10px; padding:24px; text-align:center; cursor:pointer; transition:all 0.15s; background:#fafafa; }
.upload-dropzone:hover, .upload-dropzone.dragover { border-color:#c2185b; background:#fff0f5; }
.upload-progress { height:4px; background:#eee; border-radius:2px; overflow:hidden; }
.upload-progress-bar { height:100%; background:#c2185b; transition:width 0.3s; width:0%; }

/* ============ 絵文字ピッカー ============ */
.emoji-picker-wrap { position:relative; display:inline-block; }
.emoji-trigger { background:#f5f5f5; border:1px solid #ddd; border-radius:8px; padding:8px 14px; cursor:pointer; display:flex; align-items:center; gap:8px; font-family:inherit; }
.emoji-trigger:hover { background:#eee; border-color:#c2185b; }
.current-emoji { font-size:24px; line-height:1; }
.emoji-change-hint { font-size:11px; color:#999; }
.emoji-palette { position:absolute; top:100%; left:0; z-index:300; background:#fff; border:1px solid #ddd; border-radius:10px; box-shadow:0 8px 24px rgba(0,0,0,0.15); padding:10px; width:280px; display:grid; grid-template-columns:repeat(8,1fr); gap:4px; margin-top:6px; }
.emoji-palette span { font-size:22px; line-height:1; text-align:center; cursor:pointer; padding:6px; border-radius:6px; display:block; user-select:none; }
.emoji-palette span:hover { background:#fff0f5; }

/* ============ セクション編集 専用 UI ============ */
.career-item, .voice-item, .faq-item, .flow-item { border:1px solid #eee; border-radius:8px; padding:14px; margin-bottom:10px; background:#fafafa; position:relative; }
.career-item-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px; }
.stage-num { font-size:12px; font-weight:700; color:#c2185b; background:#fff0f5; padding:3px 10px; border-radius:12px; }
.form-row-2 { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.faq-item .faq-q-label { font-size:11px; font-weight:700; color:#c2185b; margin-bottom:4px; }
.faq-item .faq-a-label { font-size:11px; font-weight:700; color:#666; margin:8px 0 4px; }
.flow-item { display:flex; gap:12px; align-items:flex-start; }
.flow-step-num { width:32px; height:32px; background:#c2185b; color:#fff; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:14px; font-weight:700; flex-shrink:0; margin-top:4px; }
.flow-item-body { flex:1; }
.remove-item-btn { background:none; border:0; cursor:pointer; color:#ccc; font-size:18px; padding:4px 8px; line-height:1; }
.remove-item-btn:hover { color:#e91e8c; }
.add-item-btn { width:100%; padding:12px; border:2px dashed #ddd; border-radius:8px; background:#fff; cursor:pointer; color:#666; font-size:13px; margin-top:8px; transition:0.2s; font-family:inherit; }
.add-item-btn:hover:not(:disabled) { border-color:#c2185b; color:#c2185b; background:#fff0f5; }
.add-item-btn:disabled { opacity:0.4; cursor:not-allowed; }

/* ============ 5タブ求人作成モーダル ============ */
.job-modal-overlay { position:fixed; inset:0; background:rgba(0,0,0,0.7); z-index:1000; display:flex; align-items:center; justify-content:center; }
.job-modal-fullscreen { background:#fff; width:min(960px,95vw); height:min(720px,95vh); border-radius:12px; display:flex; flex-direction:column; overflow:hidden; }
.job-modal-header { padding:20px 24px; border-bottom:1px solid #eee; display:flex; justify-content:space-between; align-items:center; }
.job-modal-header h2 { margin:0; font-size:18px; }
.job-modal-close { background:transparent; border:0; font-size:24px; cursor:pointer; color:#666; }
.tab-progress { display:flex; align-items:center; gap:4px; padding:14px 24px; border-bottom:1px solid #eee; background:#fafafa; overflow-x:auto; }
.tab-progress-item { display:flex; align-items:center; gap:6px; font-size:13px; color:#999; white-space:nowrap; flex-shrink:0; }
.tab-progress-item.active { color:#C2185B; font-weight:600; }
.tab-progress-item.done { color:#4CAF50; }
.tab-progress-dot { width:22px; height:22px; border-radius:50%; border:2px solid currentColor; display:flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; flex-shrink:0; }
.tab-progress-line { width:24px; height:2px; background:#ddd; flex-shrink:0; }
.tab-progress-line.done { background:#4CAF50; }
.job-modal-body { flex:1; overflow-y:auto; padding:28px 32px; }
.tab-pane { display:none; }
.tab-pane.active { display:block; }
.form-group { margin-bottom:24px; }
.form-group label { display:block; font-weight:600; margin-bottom:8px; font-size:14px; color:#333; }
.form-group label .required { color:#e91e8c; margin-left:4px; }
.form-group input, .form-group select, .form-group textarea { width:100%; padding:11px 14px; border:1px solid #ddd; border-radius:8px; font-size:14px; font-family:inherit; box-sizing:border-box; }
.form-group textarea { min-height:120px; resize:vertical; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.radio-group { display:flex; gap:16px; flex-wrap:wrap; align-items:center; }
.radio-group label { display:flex; align-items:center; gap:6px; white-space:nowrap; font-weight:400; cursor:pointer; font-size:14px; min-width:fit-content; }
.char-count { text-align:right; font-size:12px; color:#999; margin-top:4px; }
.char-count.warn { color:#e91e8c; }
.tag-input-container { border:1px solid #ddd; border-radius:8px; padding:8px; display:flex; flex-wrap:wrap; gap:6px; min-height:44px; cursor:text; }
.tag-chip-input { background:#f0f0f0; border-radius:20px; padding:4px 10px; font-size:13px; display:flex; align-items:center; gap:4px; }
.tag-chip-input .remove { cursor:pointer; color:#999; font-size:16px; line-height:1; }
.tag-input-field { border:none; outline:none; font-size:14px; flex:1; min-width:80px; background:transparent; }
.checkbox-grid { display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.checkbox-grid label { display:flex; align-items:center; gap:8px; font-weight:400; cursor:pointer; font-size:14px; }
.photo-dropzone-tab { border:2px dashed #ddd; border-radius:12px; padding:40px; text-align:center; cursor:pointer; transition:border-color 0.2s; }
.photo-dropzone-tab:hover, .photo-dropzone-tab.dragover { border-color:#c2185b; background:#fff0f5; }
.photo-grid-tab { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-top:16px; }
.photo-thumb-tab { position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; border:1px solid #eee; }
.photo-thumb-tab img { width:100%; height:100%; object-fit:cover; }
.photo-thumb-tab .main-badge { position:absolute; top:6px; left:6px; background:#c2185b; color:#fff; font-size:11px; padding:2px 6px; border-radius:4px; }
.photo-thumb-tab .delete-btn { position:absolute; top:6px; right:6px; background:rgba(0,0,0,0.6); color:#fff; border:none; border-radius:50%; width:24px; height:24px; cursor:pointer; font-size:16px; }
.upload-progress { height:4px; background:#eee; border-radius:2px; margin-top:8px; overflow:hidden; }
.upload-progress-bar { height:100%; background:#c2185b; transition:width 0.3s; }
.job-modal-footer { padding:16px 24px; border-top:1px solid #eee; display:flex; justify-content:space-between; align-items:center; gap:8px; flex-wrap:wrap; }
.ai-btn { background:linear-gradient(135deg,#667eea,#764ba2); color:#fff; border:none; padding:10px 20px; border-radius:8px; cursor:pointer; display:inline-flex; align-items:center; gap:8px; font-size:14px; font-weight:600; }
.ai-btn:disabled { opacity:0.6; cursor:not-allowed; }
.validation-error { color:#e91e8c; font-size:12px; margin-top:4px; display:none; }
.form-group.error input, .form-group.error select, .form-group.error textarea { border-color:#e91e8c; }
.form-group.error .validation-error { display:block; }

/* ============ 写真ギャラリー / ライトボックス ============ */
.gallery-main { position:relative; border-radius:12px; overflow:hidden; aspect-ratio:16/9; background:#f5f5f5; cursor:zoom-in; }
.gallery-main img { width:100%; height:100%; object-fit:cover; }
.gallery-prev, .gallery-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(0,0,0,0.5); color:#fff; border:none; width:40px; height:40px; border-radius:50%; cursor:pointer; font-size:20px; }
.gallery-prev { left:12px; }
.gallery-next { right:12px; }
.gallery-indicator { position:absolute; bottom:12px; left:50%; transform:translateX(-50%); display:flex; gap:6px; }
.gallery-indicator span { width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,0.6); }
.gallery-indicator span.active { background:#fff; }
.gallery-thumbs { display:flex; gap:8px; margin-top:10px; overflow-x:auto; padding-bottom:4px; }
.gallery-thumbs img { width:80px; height:60px; object-fit:cover; border-radius:6px; cursor:pointer; border:2px solid transparent; flex-shrink:0; }
.gallery-thumbs img.active { border-color:#c2185b; }
#lightbox { position:fixed; inset:0; z-index:2000; display:flex; align-items:center; justify-content:center; }
#lightbox[hidden] { display:none; }
.lightbox-overlay { position:absolute; inset:0; background:rgba(0,0,0,0.92); }
.lightbox-img { position:relative; max-width:90vw; max-height:85vh; object-fit:contain; border-radius:8px; }
.lightbox-close { position:absolute; top:20px; right:20px; background:rgba(255,255,255,0.2); color:#fff; border:none; width:44px; height:44px; border-radius:50%; cursor:pointer; font-size:24px; z-index:1; }
.lightbox-prev, .lightbox-next { position:absolute; top:50%; transform:translateY(-50%); background:rgba(255,255,255,0.2); color:#fff; border:none; width:50px; height:50px; border-radius:50%; cursor:pointer; font-size:28px; z-index:1; }
.lightbox-prev { left:20px; }
.lightbox-next { right:20px; }
.gallery-default { background:linear-gradient(135deg,#f8e8ef,#fce4ec); border-radius:12px; aspect-ratio:16/9; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.gallery-default img { width:80px; height:80px; opacity:0.85; }
.gallery-default p { color:#c2185b; margin-top:8px; font-size:14px; font-weight:600; }

/* ============ メッセージ 2 カラム UI ============ */
.msg-layout { display:flex; height:520px; border:1px solid #eee; border-radius:12px; overflow:hidden; background:#fff; }
.msg-list { width:35%; min-width:240px; border-right:1px solid #eee; overflow-y:auto; }
.msg-thread-item { padding:14px 16px; border-bottom:1px solid #f5f5f5; cursor:pointer; }
.msg-thread-item:hover, .msg-thread-item.active { background:#fff0f5; }
.msg-thread-name { font-weight:600; font-size:14px; }
.msg-thread-job { font-size:11px; color:#999; margin-top:2px; }
.msg-thread-preview { font-size:12px; color:#999; margin-top:4px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.msg-thread-meta { display:flex; justify-content:space-between; align-items:center; margin-top:4px; }
.msg-unread { background:#e14545; color:#fff; min-width:18px; height:18px; padding:0 5px; border-radius:9px; font-size:10px; font-weight:700; line-height:18px; text-align:center; display:inline-block; }
.msg-time { font-size:10px; color:#bbb; }
.msg-chat { flex:1; display:flex; flex-direction:column; }
.msg-chat-header { padding:14px 16px; border-bottom:1px solid #eee; }
.msg-chat-empty { flex:1; display:flex; align-items:center; justify-content:center; color:#999; font-size:14px; }
.msg-chat-body { flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px; background:#fafafa; }
.msg-bubble-wrap { display:flex; flex-direction:column; }
.msg-bubble-wrap.mine { align-items:flex-end; }
.msg-bubble { max-width:70%; padding:10px 14px; border-radius:18px; font-size:14px; line-height:1.5; word-break:break-word; white-space:pre-wrap; }
.msg-bubble.mine { background:#c2185b; color:#fff; border-bottom-right-radius:4px; }
.msg-bubble.theirs { background:#f0f0f0; color:#333; border-bottom-left-radius:4px; }
.msg-meta { font-size:11px; color:#999; margin-top:3px; }
.msg-chat-footer { padding:12px 16px; border-top:1px solid #eee; display:flex; gap:10px; align-items:flex-end; background:#fff; }
.msg-input { flex:1; border:1px solid #ddd; border-radius:20px; padding:10px 16px; resize:none; font-size:14px; max-height:100px; overflow-y:auto; font-family:inherit; }
.msg-send-btn { background:#c2185b; color:#fff; border:none; border-radius:50%; width:42px; height:42px; cursor:pointer; font-size:18px; flex-shrink:0; }

/* ============ YouTube 埋め込み ============ */
.job-youtube-section { margin-top: 24px; }
.job-youtube-section .section-subtitle { font-size: 16px; font-weight: 700; margin: 0 0 10px; color: #333; }
.job-youtube-wrap { border-radius: 12px; overflow: hidden; background: #000; }
.job-youtube-wrap iframe { width: 100%; aspect-ratio: 16/9; border: none; display: block; }

/* ============ Lucide アイコン統一スタイル ============ */
.nav-icon, .btn-icon-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}
.nav-icon svg, .btn-icon-wrap svg { display: block; flex-shrink: 0; }
.dash-tab { display: inline-flex; align-items: center; gap: 8px; }
.dash-tab .nav-icon svg { width: 16px; height: 16px; }
.jc-bookmark { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.jc-detail-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }

/* ============ 求人カード NO IMAGE プレースホルダー ============ */
.jc-no-image {
  height: 150px !important;
  background: #f5f5f5;
  display: flex !important;
  align-items: center;
  justify-content: center;
  grid-template-columns: 1fr !important;
}
.jc-no-image-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.jc-no-image-inner span {
  font-size: 11px;
  font-weight: 600;
  color: #bbb;
  letter-spacing: 0.08em;
}

/* ============ 求人詳細 スマホ対応 ============ */
@media (max-width: 768px) {
  .job-detail-body {
    grid-template-columns: 1fr !important;
    padding: 12px;
    gap: 16px;
  }
  .job-detail-body > aside { position: static; }
  .salon-reviews-card { display: block; margin-top: 0; }
  .salon-reviews-rating { grid-template-columns: 1fr 1fr; gap: 8px; }
  .salon-reviews-card h3 { font-size: 14px; }
}

/* ============ スコアヒント / Tips ============ */
.job-score-hint {
  font-size: 11px;
  color: #999;
  text-align: right;
  padding: 4px 8px 0;
}
.score-tips-card {
  background: #fff8f0;
  border: 1px solid #ffe0b2;
  border-radius: 10px;
  padding: 16px;
  margin-top: 16px;
  margin-bottom: 16px;
}
.score-tips-card h4 {
  font-size: 14px;
  font-weight: 700;
  color: #e65100;
  margin: 0 0 10px;
}
.score-tips-card ul { margin: 0; padding-left: 20px; }
.score-tips-card li {
  font-size: 13px;
  color: #555;
  padding: 4px 0;
  line-height: 1.5;
}

/* ============ 採用LPビルダー UI刷新 ============ */
/* テーマ10種カードグリッド */
.theme-grid-10 {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .theme-grid-10 { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 500px) {
  .theme-grid-10 { grid-template-columns: repeat(2, 1fr); }
}
.theme-card-10 {
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 10px 8px 8px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
}
.theme-card-10:hover {
  border-color: #C2185B;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(194, 24, 91, 0.12);
}
.theme-card-10.selected {
  border-color: #C2185B;
  background: #fff0f5;
  box-shadow: 0 0 0 1px #C2185B;
}
.theme-swatches-row {
  display: flex;
  gap: 3px;
  justify-content: center;
  margin-bottom: 6px;
}
.theme-swatch-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 1px solid rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}
.theme-card-name {
  font-size: 12px;
  font-weight: 700;
  color: #333;
  margin-bottom: 2px;
}
.theme-card-desc {
  font-size: 10px;
  color: #999;
  line-height: 1.3;
}

/* フォント8種 */
.font-selector-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}
@media (max-width: 900px) {
  .font-selector-grid { grid-template-columns: repeat(2, 1fr); }
}
.font-card {
  border: 2px solid #eee;
  border-radius: 10px;
  padding: 12px 8px 10px;
  cursor: pointer;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
}
.font-card:hover { border-color: #C2185B; transform: translateY(-1px); }
.font-card.selected { border-color: #C2185B; background: #fff0f5; }
.font-preview {
  font-size: 22px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
  line-height: 1.2;
}
.font-name {
  font-size: 11px;
  font-weight: 700;
  color: #444;
  margin-bottom: 2px;
}
.font-sample { font-size: 10px; color: #999; }

/* カラーピッカー */
.color-picker-wrap { margin-top: 8px; }
.color-picker-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  flex-wrap: wrap;
}
.color-input-wrap {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid #eee;
  flex-shrink: 0;
}
.color-input-wrap input[type="color"] {
  position: absolute;
  inset: -4px;
  width: calc(100% + 8px);
  height: calc(100% + 8px);
  opacity: 0;
  cursor: pointer;
  padding: 0;
  border: none;
}
.color-preview-swatch {
  display: block;
  width: 100%;
  height: 100%;
  border-radius: 8px;
  pointer-events: none;
}
.color-hex-input {
  flex: 1;
  min-width: 120px;
  padding: 9px 12px;
  border: 1px solid #ddd;
  border-radius: 8px;
  font-size: 13px;
  font-family: monospace;
}
.color-presets {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.color-preset-dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid transparent;
  cursor: pointer;
  transition: 0.15s;
  flex-shrink: 0;
  padding: 0;
}
.color-preset-dot:hover { transform: scale(1.2); }
.color-preset-dot.active {
  border-color: #333;
  box-shadow: 0 0 0 2px #fff, 0 0 0 4px #333;
}
.btn-text-sm {
  font-size: 12px;
  color: #999;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 8px;
  white-space: nowrap;
}
.btn-text-sm:hover { color: #C2185B; }
.builder-label-sub {
  font-size: 11px;
  font-weight: 400;
  color: #999;
  margin-left: 6px;
}

/* 詳細設定 */
.advanced-settings-toggle {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #f9f9f9;
  border-radius: 8px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #555;
  border: 1px solid #eee;
  user-select: none;
}
.advanced-settings-toggle:hover { background: #f0f0f0; }
#advanced-settings { margin-top: 12px; }
.global-settings-panel { display: flex; flex-direction: column; gap: 14px; }
.gs-row { display: flex; flex-direction: column; gap: 6px; }
.gs-label { font-size: 12px; font-weight: 600; color: #555; }
.gs-options { display: flex; gap: 6px; flex-wrap: wrap; }
.gs-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.gs-btn:hover { border-color: #C2185B; }
.gs-btn.active { background: #C2185B; color: #fff; border-color: #C2185B; }
.gs-toggles { display: flex; flex-direction: column; gap: 8px; }
.gs-toggle-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: #444;
}

/* 30種セクション追加モーダル */
.add-section-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1600;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-section-modal {
  background: #fff;
  border-radius: 16px;
  width: min(700px, 95vw);
  max-height: 85vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.add-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.add-section-header h3 { font-size: 16px; font-weight: 700; margin: 0; }
.modal-close-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: #f5f5f5;
  border-radius: 50%;
  cursor: pointer;
  font-size: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.add-section-cat-tabs {
  display: flex;
  gap: 4px;
  padding: 10px 16px;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
}
.cat-tab {
  padding: 6px 14px;
  border: 1px solid #eee;
  border-radius: 20px;
  background: #fff;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: 0.15s;
  color: #666;
}
.cat-tab:hover { border-color: var(--cat-color); color: var(--cat-color); }
.cat-tab.active { background: var(--cat-color); color: #fff; border-color: var(--cat-color); }
.add-section-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
}
.section-cat-panel { display: none; }
.section-cat-panel.active { display: block; }
.section-type-grid-30 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
@media (max-width: 500px) {
  .section-type-grid-30 { grid-template-columns: repeat(2, 1fr); }
}
.section-type-card-30 {
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.section-type-card-30:hover {
  border-color: #C2185B;
  background: #fff9fb;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.stc-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-size: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.stc-name { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 3px; }
.stc-desc { font-size: 11px; color: #999; line-height: 1.3; }

/* セクション背景エディタ */
.section-bg-editor {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
}
.bg-type-pills {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.bg-type-pill {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 20px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.bg-type-pill:hover { border-color: #C2185B; color: #C2185B; }
.bg-type-pill.active { background: #C2185B; color: #fff; border-color: #C2185B; }
.bg-type-icon { font-size: 14px; }
.bg-option-panel { margin-bottom: 14px; }
.gradient-editor { display: flex; gap: 12px; align-items: flex-start; }
.gradient-preview {
  width: 80px;
  height: 80px;
  border-radius: 10px;
  flex-shrink: 0;
  border: 1px solid #eee;
}
.gradient-controls { flex: 1; }
.gradient-color-row, .gradient-angle-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 8px;
}
.gradient-color-row label, .gradient-angle-row label {
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
}
.bg-img-preview {
  position: relative;
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
}
.bg-img-preview img {
  width: 100%;
  height: 80px;
  object-fit: cover;
  display: block;
}
.bg-img-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 22px;
  height: 22px;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.upload-dropzone-sm {
  border: 1px dashed #ddd;
  border-radius: 8px;
  padding: 14px;
  text-align: center;
  cursor: pointer;
  font-size: 12px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: 0.2s;
}
.upload-dropzone-sm:hover {
  border-color: #C2185B;
  color: #C2185B;
  background: #fff0f5;
}
.overlay-editor label { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.overlay-editor input[type="range"] { flex: 1; accent-color: #C2185B; }
.particle-type-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
}
.particle-type-btn {
  padding: 8px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  cursor: pointer;
  transition: 0.15s;
}
.particle-type-btn:hover { border-color: #C2185B; }
.particle-type-btn.active {
  background: #fff0f5;
  border-color: #C2185B;
  color: #C2185B;
  font-weight: 600;
}
.mesh-color-row { display: flex; gap: 12px; }
.mesh-color-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: #666;
}
.mesh-color-item input[type="color"] {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #eee;
  cursor: pointer;
}
.bg-text-color-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.text-color-btns { display: flex; gap: 6px; }
.text-color-btn {
  padding: 5px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.text-color-btn:hover { border-color: #C2185B; }
.text-color-btn.active { background: #C2185B; color: #fff; border-color: #C2185B; }
.padding-editor label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: #666;
}
.padding-editor input[type="range"] { width: 100%; accent-color: #C2185B; }
.padding-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

/* ============ オンボーディング 10テーマグリッド ============ */
.recruit-onboarding { padding: 32px 16px; max-width: 1200px; margin: 0 auto; }
.onboard-hero {
  text-align: center;
  padding: 40px 16px;
  background: linear-gradient(135deg, #fff0f5, #fce4ec);
  border-radius: 16px;
  margin-bottom: 16px;
}
.onboard-hero h2 {
  font-size: clamp(22px, 4vw, 32px);
  color: #1a1a1a;
  margin-bottom: 12px;
  line-height: 1.4;
}
.onboard-hero p { color: #666; font-size: 15px; margin-bottom: 16px; }
.onboard-features {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #555;
}
.onboard-theme-heading {
  font-size: 18px;
  font-weight: 700;
  margin-top: 28px;
  margin-bottom: 4px;
  text-align: center;
}
.onboard-theme-sub {
  font-size: 13px;
  color: #999;
  margin-bottom: 0;
  text-align: center;
}
.onboard-theme-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 16px;
  padding-bottom: 16px;
}
@media (max-width: 1000px) { .onboard-theme-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .onboard-theme-grid { grid-template-columns: repeat(2, 1fr); } }
.onboard-theme-card {
  border: 2px solid #eee;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
  background: #fff;
  display: flex;
  flex-direction: column;
}
.onboard-theme-card:hover {
  border-color: #C2185B;
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(194, 24, 91, 0.15);
}
.onboard-theme-iframe-wrap {
  height: 160px;
  overflow: hidden;
  position: relative;
  background: #f5f5f5;
}
.onboard-theme-iframe-wrap iframe {
  width: 250%;
  height: 250%;
  transform: scale(0.4);
  transform-origin: 0 0;
  border: none;
  pointer-events: none;
}
.onboard-theme-color-preview {
  height: 160px;
  display: grid;
  grid-template-rows: 60% 40%;
  grid-template-columns: 1fr 1fr;
  position: relative;
  overflow: hidden;
}
.onboard-swatch { display: block; }
.onboard-swatch.accent { grid-row: 1; grid-column: 1 / 3; }
.onboard-swatch.bg { grid-row: 2; grid-column: 1; }
.onboard-swatch.alt { grid-row: 2; grid-column: 2; }
.onboard-theme-name-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
  letter-spacing: 0.05em;
}
.onboard-theme-info { padding: 10px 12px 6px; flex: 1; }
.onboard-theme-name { font-size: 13px; font-weight: 700; color: #333; margin-bottom: 2px; }
.onboard-theme-desc { font-size: 11px; color: #999; line-height: 1.3; }
.onboard-theme-select-btn {
  margin: 0 12px 12px;
  width: calc(100% - 24px);
  padding: 8px;
  background: #C2185B;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s;
}
.onboard-theme-select-btn:hover { background: #ad1457; }

/* ============ D&D + トースト ============ */
.upload-dropzone.dragover,
.upload-dropzone-sm.dragover,
.dropzone.dragover,
.photo-dropzone-tab.dragover {
  border-color: #C2185B !important;
  background: #fff0f5 !important;
  transform: scale(1.01);
}
.upload-progress-inline {
  width: 100%;
  height: 6px;
  background: #eee;
  border-radius: 3px;
  overflow: hidden;
}
.upload-progress-bar-inline {
  height: 100%;
  background: #C2185B;
  width: 0;
  transition: width 0.3s;
  border-radius: 3px;
}
.ba-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(16px);
  padding: 12px 24px;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #fff;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.3s, transform 0.3s;
  pointer-events: none;
  white-space: nowrap;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}
.ba-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.ba-toast-success { background: #2E7D32; }
.ba-toast-error { background: #C62828; }
.ba-toast-info { background: #1565C0; }

/* ============ デザインバリアント選択 ============ */
.design-variant-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin-top: 8px;
}
@media (max-width: 800px) {
  .design-variant-grid { grid-template-columns: repeat(2, 1fr); }
}
.design-variant-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 10px 6px;
  border: 2px solid #eee;
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}
.design-variant-btn:hover { border-color: #C2185B; background: #fff9fb; }
.design-variant-btn.active { border-color: #C2185B; background: #fff0f5; }
.dv-label { font-size: 12px; font-weight: 700; color: #333; }
.dv-desc { font-size: 10px; color: #999; line-height: 1.2; }

/* ============ レイアウトモード切替 ============ */
.layout-mode-toggle-wrap {
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
  background: #fafafa;
  margin-bottom: 12px;
}
.layout-mode-toggle {
  display: flex;
  gap: 6px;
  background: #f0f0f0;
  border-radius: 10px;
  padding: 4px;
}
.lmt-btn {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 7px;
  background: transparent;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  cursor: pointer;
  transition: all 0.2s;
}
.lmt-btn.active {
  background: #fff;
  color: #C2185B;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.10);
}
.grid-mode-hint {
  font-size: 11px;
  color: #999;
  margin-top: 6px;
  text-align: center;
}
.grid-layout-btn {
  padding: 4px 10px;
  border: 1px solid #C2185B;
  border-radius: 6px;
  background: #fff;
  color: #C2185B;
  font-size: 11px;
  cursor: pointer;
  white-space: nowrap;
}

/* ============ グリッド配置モーダル ============ */
.grid-layout-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.grid-layout-modal {
  background: #fff;
  border-radius: 16px;
  width: min(520px, 95vw);
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.grid-layout-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}
.grid-layout-body { padding: 20px; }
.grid-layout-footer {
  padding: 16px 20px;
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
}
.grid-preview-wrap {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 12px;
  margin-bottom: 20px;
}
.grid-preview {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-template-rows: 30px 30px;
  gap: 2px;
  position: relative;
  min-height: 74px;
}
.grid-col-marker {
  background: #e0e0e0;
  border-radius: 4px;
  font-size: 10px;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  grid-row: 1;
}
.grid-selection-block {
  background: rgba(194, 24, 91, 0.3);
  border: 2px solid #C2185B;
  border-radius: 4px;
  grid-row: 1 / span 2;
  transition: all 0.2s;
  z-index: 1;
  position: relative;
}
.grid-controls { display: flex; flex-direction: column; gap: 14px; }
.grid-control-row { display: flex; flex-direction: column; gap: 4px; }
.grid-control-row label {
  font-size: 13px;
  color: #555;
  display: flex;
  justify-content: space-between;
}
.grid-control-row strong { color: #C2185B; }
.grid-control-row input[type="range"] { width: 100%; accent-color: #C2185B; }
.grid-presets { margin-top: 20px; }
.grid-preset-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.grid-preset-btns button {
  padding: 6px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  transition: 0.15s;
}
.grid-preset-btns button:hover { border-color: #C2185B; color: #C2185B; }

/* ============ 配列フィールドエディタ ============ */
.array-editor-wrap { margin-top: 12px; }
.array-editor-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.array-add-btn {
  padding: 6px 14px;
  background: #C2185B;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.array-add-btn:hover { background: #ad1457; }
.array-editor-items { display: flex; flex-direction: column; gap: 12px; }
.array-item-card {
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px;
  background: #fafafa;
}
.array-item-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.array-item-label { font-size: 12px; font-weight: 700; color: #666; }
.array-item-actions { display: flex; gap: 4px; }
.array-item-actions button {
  padding: 4px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  font-size: 11px;
  cursor: pointer;
}
.array-item-actions button:disabled { opacity: 0.4; cursor: not-allowed; }
.array-item-actions .array-del-btn { color: #C62828; border-color: #f0c0c0; }
.array-item-actions .array-del-btn:hover { background: #fff5f5; }
.array-item-body { display: flex; flex-direction: column; gap: 8px; }
.array-item-field { display: flex; flex-direction: column; gap: 4px; }
.array-field-label { font-size: 11px; color: #888; font-weight: 600; }

/* ============ インタラクティブグリッドプレビュー ============ */
.grid-ipreview-wrap {
  background: #f5f5f5;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 16px;
  user-select: none;
}
.grid-ipreview {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 3px;
  margin-bottom: 8px;
}
.grid-cell {
  background: #fff;
  border: 1px solid #e0e0e0;
  border-radius: 4px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  color: #999;
  cursor: pointer;
  transition: 0.1s;
}
.grid-cell:hover {
  background: #fff0f5;
  border-color: #C2185B;
}
.grid-cell.selected {
  background: rgba(194, 24, 91, 0.18);
  border-color: #C2185B;
  color: #C2185B;
  font-weight: 700;
}
.grid-cell.sel-start {
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  background: rgba(194, 24, 91, 0.3);
}
.grid-cell.sel-end {
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background: rgba(194, 24, 91, 0.3);
}
.grid-ipreview-label {
  font-size: 13px;
  font-weight: 700;
  color: #C2185B;
  text-align: center;
  margin-top: 6px;
}
.grid-ipreview-hint {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin-top: 2px;
}

/* ============ グリッドミニマップ (セクション一覧) ============ */
.grid-minimap-wrap {
  margin-top: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #eee;
  border-radius: 8px;
}
.grid-minimap-label {
  font-size: 11px;
  color: #888;
  margin-bottom: 6px;
  font-weight: 600;
}
.grid-minimap {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
}
.grid-minimap-block {
  background: rgba(194, 24, 91, 0.15);
  border: 1px solid #C2185B;
  border-radius: 3px;
  height: 16px;
  font-size: 9px;
  color: #C2185B;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

/* ============ 横並び設定 / レイアウトパターン ============ */
.grid-row-group-section {
  border-top: 1px solid #eee;
  margin-top: 16px;
  padding-top: 16px;
}
.row-group-current {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  margin-bottom: 10px;
}
.row-group-current strong {
  font-size: 22px;
  color: #C2185B;
  font-weight: 800;
}
.row-group-list {
  display: flex;
  flex-direction: column;
  gap: 5px;
  max-height: 160px;
  overflow-y: auto;
}
.row-group-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background: #fff;
  font-size: 12px;
  cursor: pointer;
  text-align: left;
  transition: 0.15s;
  color: #555;
}
.row-group-btn:hover { border-color: #C2185B; color: #C2185B; }
.row-group-btn.active { background: #fff0f5; border-color: #C2185B; color: #C2185B; font-weight: 700; }
.row-group-btn-sub { font-size: 10px; color: #999; margin-left: auto; }
.layout-pattern-section { margin-top: 14px; }
.layout-pattern-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.layout-pattern-btn {
  border: 1px solid #eee;
  border-radius: 10px;
  background: #fff;
  padding: 10px 8px 8px;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.layout-pattern-btn:hover { border-color: #C2185B; background: #fff9fb; }
.lp-preview {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 2px;
  width: 100%;
  height: 24px;
  background: #f5f5f5;
  border-radius: 4px;
  overflow: hidden;
  padding: 3px;
  box-sizing: border-box;
}
.lp-block {
  background: #e0e0e0;
  border-radius: 2px;
}
.lp-block.lp-selected { background: rgba(194, 24, 91, 0.5); }
.layout-pattern-btn span {
  font-size: 11px;
  color: #555;
  font-weight: 600;
}

/* ========== スカウト管理 ========== */
.scout-card { background: #fff; border: 1px solid #eee; border-radius: 12px; padding: 16px 20px; margin-bottom: 12px; transition: 0.2s; }
.scout-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); border-color: #C2185B; }
.scout-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.scout-message { font-size: 14px; color: #555; line-height: 1.6; margin-bottom: 12px; }
.scout-card-footer { display: flex; justify-content: space-between; align-items: center; }

/* ========== プラン管理 ========== */
.plan-management-page { padding: 16px 0; }
.plan-current-banner { display: flex; justify-content: space-between; align-items: center; background: linear-gradient(135deg,#fff0f5,#fce4ec); border: 1px solid #f8bbd0; border-radius: 12px; padding: 16px 24px; margin-bottom: 32px; }
.plan-current-label { font-size: 12px; color: #C2185B; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; display: block; margin-bottom: 4px; }
.plan-current-name { font-size: 20px; font-weight: 800; color: #1a1a1a; }
.plan-section-title { font-size: 18px; font-weight: 700; margin-bottom: 16px; color: #1a1a1a; }
.plan-cards-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 40px; }
@media (max-width: 1100px) { .plan-cards-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .plan-cards-grid { grid-template-columns: 1fr; } }
.plan-card { border: 1.5px solid #eee; border-radius: 16px; overflow: hidden; position: relative; transition: 0.2s; background: #fff; }
.plan-card:hover { box-shadow: 0 8px 24px rgba(0,0,0,0.10); transform: translateY(-3px); }
.plan-card.current { border-color: #C2185B; box-shadow: 0 0 0 2px #C2185B; }
.plan-card.popular { border-color: #C2185B; }
.plan-popular-badge { position: absolute; top: 0; right: 0; background: #C2185B; color: #fff; font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 0 0 0 10px; }
.plan-card-header { padding: 20px 20px 16px; }
.plan-name { font-size: 16px; font-weight: 800; margin: 0 0 10px; }
.plan-price-free, .plan-price-amount { font-size: 28px; font-weight: 800; color: #1a1a1a; }
.plan-price-unit { font-size: 14px; color: #666; margin-left: 2px; }
.plan-card-body { padding: 0 20px; }
.plan-features { list-style: none; padding: 0; margin: 0; }
.plan-feature { display: flex; align-items: flex-start; gap: 8px; font-size: 13px; color: #444; padding: 6px 0; border-bottom: 1px solid #f9f9f9; line-height: 1.4; }
.plan-feature:last-child { border-bottom: none; }
.plan-feature-check { font-weight: 700; flex-shrink: 0; }
.plan-feature-limit { color: #bbb; }
.plan-feature-x { color: #bbb; flex-shrink: 0; }
.plan-card-footer { padding: 16px 20px 20px; }
.plan-btn-upgrade { width: 100%; padding: 12px; color: #fff; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: pointer; transition: 0.2s; }
.plan-btn-upgrade:hover { opacity: 0.9; transform: translateY(-1px); }
.plan-btn-current { width: 100%; padding: 12px; background: #f0f0f0; color: #999; border: none; border-radius: 10px; font-size: 14px; font-weight: 700; cursor: not-allowed; }
.plan-faq { margin-top: 8px; }
.plan-faq-item { border-bottom: 1px solid #f0f0f0; padding: 16px 0; }
.plan-faq-q { font-size: 14px; font-weight: 700; color: #333; margin-bottom: 6px; }
.plan-faq-a { font-size: 13px; color: #666; line-height: 1.6; }

/* ========== 求人詳細の口コミボックス (BA-052) ========== */
.job-review-section { background: #fff; border-radius: 12px; border: 1px solid #eee; padding: 20px; margin-bottom: 16px; }
.job-review-title { font-size: 14px; font-weight: 700; color: #C2185B; margin: 0 0 16px; line-height: 1.5; border-bottom: 2px solid #C2185B; padding-bottom: 10px; }
.job-review-avg { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.job-review-score { font-size: 36px; font-weight: 900; color: #C2185B; line-height: 1; }
.job-review-stars { color: #F57C00; font-size: 16px; }
.job-review-count { font-size: 12px; color: #999; }
.job-review-scores-grid { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.job-review-score-item { display: flex; align-items: center; gap: 8px; font-size: 12px; }
.jrs-label { width: 36px; color: #666; flex-shrink: 0; }
.jrs-bar-wrap { flex: 1; height: 6px; background: #f0f0f0; border-radius: 3px; overflow: hidden; }
.jrs-bar { height: 100%; background: #C2185B; border-radius: 3px; transition: width 0.3s; }
.jrs-val { width: 28px; color: #333; font-weight: 700; text-align: right; }
.job-review-item { padding: 10px 0; border-top: 1px solid #f5f5f5; }
.jri-header { display: flex; justify-content: space-between; margin-bottom: 4px; }
.jri-stars { color: #F57C00; font-size: 13px; }
.jri-date { font-size: 11px; color: #bbb; }
.jri-comment { font-size: 13px; color: #555; line-height: 1.6; margin: 0; }
.job-review-more-link { display: block; text-align: center; margin-top: 12px; font-size: 13px; color: #C2185B; font-weight: 700; text-decoration: none; padding: 8px; border: 1px solid #C2185B; border-radius: 8px; }
.job-review-more-link:hover { background: #fff0f5; }
.review-box-empty { text-align: center; padding: 20px 0; color: #999; font-size: 13px; }
.review-box-link { display: inline-block; margin-top: 8px; color: #C2185B; font-size: 13px; text-decoration: none; }

/* ========== スカウト送信モーダル (BA-053) ========== */
.scout-modal-box { width: min(640px, 95vw); max-height: 88vh; background: #fff; border-radius: 16px; overflow: hidden; display: flex; flex-direction: column; }
.scout-modal-body { overflow-y: auto; padding: 20px 24px; flex: 1; }
.scout-modal-body .form-group { margin-bottom: 16px; }
.scout-modal-body .form-label { display: block; font-size: 13px; font-weight: 700; color: #333; margin-bottom: 8px; }
.scout-modal-body .required { color: #C2185B; }
.form-label-sub { font-size: 11px; color: #999; font-weight: 400; margin-left: 6px; }
.scout-modal-body .form-select, .scout-modal-body .form-textarea, .scout-modal-body .form-input { width: 100%; padding: 10px 12px; border: 1px solid #e0e0e0; border-radius: 8px; font-size: 14px; font-family: inherit; background: #fff; color: #333; box-sizing: border-box; }
.scout-modal-body .form-textarea { resize: vertical; min-height: 100px; }
.range-select-row { display: flex; align-items: center; gap: 10px; }
.range-select-row .form-select { flex: 1; }
.range-sep { font-size: 16px; color: #999; flex-shrink: 0; }
.checkbox-group { display: flex; flex-direction: column; gap: 6px; }
.checkbox-item { display: flex; align-items: center; gap: 8px; font-size: 14px; color: #444; cursor: pointer; padding: 6px 10px; border-radius: 6px; transition: 0.15s; }
.checkbox-item:hover { background: #f9f9f9; }
.checkbox-item input[type="checkbox"] { width: 16px; height: 16px; accent-color: #C2185B; flex-shrink: 0; }
.scout-match-preview { display: flex; align-items: center; gap: 10px; background: #fff0f5; border: 1px solid #f8bbd0; border-radius: 10px; padding: 14px 20px; margin-top: 16px; }
.smp-label { font-size: 13px; color: #C2185B; font-weight: 600; }
.smp-count { font-size: 28px; font-weight: 900; color: #C2185B; line-height: 1; }
.smp-hint { font-size: 13px; color: #C2185B; }
.profile-section-title { font-size: 16px; font-weight: 700; color: #1a1a1a; border-bottom: 2px solid #C2185B; padding-bottom: 8px; margin: 24px 0 16px; }

/* ========== スカウト 2ステップ (BA-054) ========== */
.scout-steps { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.scout-step { padding: 4px 14px; border-radius: 20px; font-weight: 600; color: #999; background: #f0f0f0; }
.scout-step.active { background: #C2185B; color: #fff; }
.scout-step.done { background: #E8F5E9; color: #388E3C; }
.scout-step-arrow { color: #ccc; font-size: 16px; }
.scout-candidates-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; padding-bottom: 10px; border-bottom: 1px solid #f0f0f0; }
.scout-candidates-count { font-size: 14px; font-weight: 700; color: #C2185B; }
.scout-candidates-list { display: flex; flex-direction: column; gap: 8px; max-height: 440px; overflow-y: auto; }
.scout-candidate-card { border: 1.5px solid #eee; border-radius: 10px; transition: 0.15s; }
.scout-candidate-card:hover:not(.already-scouted) { border-color: #C2185B; background: #fff9fb; }
.scout-candidate-card.already-scouted { opacity: 0.5; background: #f9f9f9; }
.scout-candidate-label { display: flex; align-items: flex-start; gap: 12px; padding: 12px 14px; cursor: pointer; width: 100%; }
.scout-candidate-label input[type="checkbox"] { width: 18px; height: 18px; accent-color: #C2185B; flex-shrink: 0; margin-top: 2px; }
.scout-candidate-info { display: flex; align-items: flex-start; gap: 12px; flex: 1; }
.sci-initial { width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(135deg,#C2185B,#E91E8C); color: #fff; font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.sci-details { flex: 1; }
.sci-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.sci-meta { font-size: 12px; color: #888; }
.sci-tag { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 600; }
.sci-jobtype { background: #fff0f5; color: #C2185B; }
.sci-emp { background: #f0f0f0; color: #666; }
.sci-license { background: #E8F5E9; color: #388E3C; }
.sci-scouted { background: #FFF3E0; color: #F57C00; }
.scout-no-candidates { text-align: center; padding: 48px 20px; }
.scout-no-candidates-icon { font-size: 48px; margin-bottom: 16px; }
.scout-no-candidates p { color: #666; font-size: 15px; margin: 4px 0; }
.scout-no-candidates-hint { font-size: 13px; color: #999; }
.checkbox-group-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
@media (max-width: 480px) { .checkbox-group-grid { grid-template-columns: 1fr; } }

/* ===================================================
   BA12 Beauty Assembly サロン管理画面 フラットデザイン
   =================================================== */
:root {
  --ba-primary:    #C2185B;
  --ba-primary-lt: #FCE4EC;
  --ba-primary-dk: #880E4F;
  --ba-text:       #1a1a1a;
  --ba-text-muted: #757575;
  --ba-border:     #E0E0E0;
  --ba-bg:         #F5F5F5;
  --ba-white:      #FFFFFF;
  --ba-success:    #2E7D32;
  --ba-warning:    #E65100;
  --ba-info:       #1565C0;
}

/* ---- BA19 サロン管理レイアウト変数 ---- */
:root { --salon-max: 1280px; }

/* ---- サロン専用ヘッダー（BA19: inner container で1280px中央寄せ） ---- */
.salon-header {
  display: flex; align-items: center; justify-content: center; height: 54px;
  background: var(--ba-white); border-bottom: 2px solid var(--ba-primary);
  padding: 0; position: sticky; top: 0; z-index: 200; gap: 0; width: 100%;
}
.salon-header-inner {
  width: 100%;
  max-width: var(--salon-max);
  padding: 0 24px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
  box-sizing: border-box;
}
.salon-header-left { display: flex; align-items: center; gap: 10px; flex-shrink: 0; min-width: 0; }
.salon-header-logo { font-size: 17px; font-weight: 900; color: var(--ba-text); text-decoration: none; letter-spacing: -0.02em; white-space: nowrap; }
.salon-header-logo span { color: var(--ba-primary); }
.salon-header-badge { font-size: 10px; font-weight: 700; background: var(--ba-primary-lt); color: var(--ba-primary); padding: 2px 8px; border-radius: 2px; border: 1px solid #F48FB1; white-space: nowrap; flex-shrink: 0; }
.salon-gnav { display: flex; align-items: stretch; flex: 1; height: 100%; margin: 0 16px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.salon-gnav::-webkit-scrollbar { height: 0; }
.salon-gnav-btn { display: inline-flex; align-items: center; gap: 5px; padding: 0 16px; height: 100%; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; white-space: nowrap; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.salon-gnav-btn:hover { color: var(--ba-primary); background: var(--ba-primary-lt); }
.salon-gnav-btn.active { color: var(--ba-primary); border-bottom-color: var(--ba-primary); font-weight: 700; }
.salon-header-right { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 0; }
.salon-header-admin-link { font-size: 12px; color: var(--ba-text-muted); text-decoration: none; padding: 5px 10px; border: 1px solid var(--ba-border); border-radius: 4px; transition: all 0.15s; }
.salon-header-admin-link:hover { border-color: var(--ba-primary); color: var(--ba-primary); }
.salon-header-user { display: flex; align-items: center; gap: 8px; }
.salon-header-avatar { width: 32px; height: 32px; border-radius: 4px; background: var(--ba-primary); color: var(--ba-white); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.salon-header-name { font-size: 13px; font-weight: 600; color: var(--ba-text); max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.salon-header-logout { padding: 7px 16px; background: var(--ba-white); border: 1.5px solid var(--ba-border); border-radius: 4px; font-size: 13px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; white-space: nowrap; transition: all 0.15s; }
.salon-header-logout:hover { border-color: var(--ba-primary); color: var(--ba-primary); }

/* ハンバーガー（SP） */
.salon-hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; border: none; background: none; cursor: pointer; padding: 6px; border-radius: 4px; transition: background 0.15s; }
.salon-hamburger:hover { background: var(--ba-primary-lt); }
.salon-hamburger span { display: block; height: 2px; background: var(--ba-text-muted); border-radius: 2px; transition: all 0.2s; transform-origin: center; }
.salon-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.salon-hamburger.open span:nth-child(2) { opacity: 0; }
.salon-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---- サロンモバイルメニュー ---- */
.salon-mobile-menu { position: fixed; inset: 0; z-index: 500; pointer-events: none; visibility: hidden; }
.salon-mobile-menu.open { pointer-events: auto; visibility: visible; }
.smm-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.4); opacity: 0; transition: opacity 0.25s; }
.salon-mobile-menu.open .smm-overlay { opacity: 1; }
.smm-inner { position: absolute; top: 0; right: 0; width: min(280px, 85vw); height: 100%; background: var(--ba-white); display: flex; flex-direction: column; transform: translateX(100%); transition: transform 0.25s ease; box-shadow: -4px 0 20px rgba(0,0,0,0.12); overflow-y: auto; }
.salon-mobile-menu.open .smm-inner { transform: translateX(0); }
.smm-user { display: flex; align-items: center; gap: 12px; padding: 20px 16px 16px; border-bottom: 1px solid var(--ba-border); background: var(--ba-bg); }
.smm-avatar { width: 40px; height: 40px; border-radius: 4px; background: var(--ba-primary); color: var(--ba-white); font-size: 18px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.smm-name { font-size: 15px; font-weight: 700; color: var(--ba-text); }
.smm-nav { display: flex; flex-direction: column; padding: 8px 0; flex: 1; }
.smm-nav-btn { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border: none; background: none; font-size: 15px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; text-align: left; border-left: 3px solid transparent; transition: all 0.15s; }
.smm-nav-btn:hover { background: var(--ba-bg); color: var(--ba-primary); }
.smm-nav-btn.active { color: var(--ba-primary); border-left-color: var(--ba-primary); background: var(--ba-primary-lt); font-weight: 700; }
.smm-footer { padding: 16px; border-top: 1px solid var(--ba-border); }
.smm-logout { width: 100%; padding: 12px; background: var(--ba-white); border: 1.5px solid var(--ba-border); border-radius: 4px; font-size: 14px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; transition: all 0.15s; }
.smm-logout:hover { border-color: var(--ba-primary); color: var(--ba-primary); }

/* レスポンシブ */
@media (max-width: 900px) {
  .salon-gnav { display: none; }
  .salon-hamburger { display: flex !important; }
  .salon-header-name { display: none; }
  .salon-header-logout { display: none; }
  .salon-header-inner { padding: 0 16px; }
}
@media (max-width: 600px) {
  .salon-header-inner { padding: 0 12px; }
  .salon-header-left { margin-right: 0; }
  .salon-header-badge { display: none; }
  .salon-header-logo { font-size: 16px; }
}

/* ---- グローバルナビ(レガシー互換) ---- */
.salon-global-nav { display: none; }
.sgn-btn { display: flex; align-items: center; gap: 6px; padding: 14px 22px; border: none; background: none; font-size: 14px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; white-space: nowrap; transition: background 0.15s, color 0.15s; border-bottom: 3px solid transparent; margin-bottom: -2px; }
.sgn-btn:hover { background: var(--ba-primary-lt); color: var(--ba-primary); }
.sgn-btn.active { color: var(--ba-primary); border-bottom-color: var(--ba-primary); background: var(--ba-primary-lt); }
.sgn-btn svg { opacity: 0.7; }
.sgn-btn.active svg { opacity: 1; }

/* ---- BA15 店舗選択バー ---- */
.store-selector {
  display: flex; gap: 4px; padding: 6px 24px;
  background: #FAFAFA; border-bottom: 1px solid var(--ba-border);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
.store-tab {
  padding: 6px 16px; border: 1.5px solid var(--ba-border); border-radius: 4px;
  background: var(--ba-white); font-size: 12px; font-weight: 600;
  color: var(--ba-text-muted); cursor: pointer; transition: all 0.15s; white-space: nowrap;
}
.store-tab.active {
  background: var(--ba-primary); border-color: var(--ba-primary); color: var(--ba-white);
}
.store-tab:hover:not(.active) { border-color: var(--ba-primary); color: var(--ba-primary); }
.store-add-btn { border-style: dashed; }

/* ---- BA15 欠勤アラートパネル ---- */
.absence-alert-panel {
  background: #FFF3E0; border: 1px solid #FFB74D; border-radius: 4px;
  margin-bottom: 16px; overflow: hidden;
}
.aap-header {
  padding: 10px 16px; font-size: 14px; font-weight: 700; color: #E65100;
  background: #FFE0B2; display: flex; align-items: center; gap: 8px;
}
.aap-body { padding: 8px 16px; }
.aap-item {
  display: flex; align-items: center; gap: 10px; padding: 6px 0;
  border-bottom: 1px solid #FFE0B2; font-size: 13px;
}
.aap-item:last-child { border-bottom: none; }
.aap-date { font-weight: 700; color: #E65100; white-space: nowrap; }
.aap-name { font-weight: 600; }
.aap-info { color: #888; font-size: 12px; }
.aap-more { font-size: 12px; color: #888; padding: 6px 0; }

/* ---- 経営管理 共通 ---- */
.mgmt-page { padding: 0; }
.mgmt-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; flex-wrap: wrap; gap: 10px; }
.mgmt-title { font-size: 20px; font-weight: 700; color: var(--ba-text); margin: 0; }
.mgmt-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.mgmt-section { margin-bottom: 24px; }
.mgmt-section-header { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; justify-content: space-between; }
.mgmt-section-title { font-size: 15px; font-weight: 700; color: var(--ba-text); flex: 1; margin: 0; padding-bottom: 8px; border-bottom: 1px solid var(--ba-border); }
.mgmt-table { width: 100%; border-collapse: collapse; font-size: 13px; background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; overflow: hidden; }
.mgmt-table th { background: #FAFAFA; padding: 10px 14px; text-align: left; font-size: 12px; font-weight: 700; color: var(--ba-text-muted); border-bottom: 1px solid var(--ba-border); white-space: nowrap; }
.mgmt-table td { padding: 11px 14px; border-bottom: 1px solid #F5F5F5; vertical-align: middle; }
.mgmt-table tr:last-child td { border-bottom: none; }
.mgmt-table tr:hover td { background: #FAFAFA; }
.mgmt-table tr.row-income td { background: #F1F8E9; }
.mgmt-table tr.row-expense td { background: #FFF8F7; }
.text-warning { color: var(--ba-warning); font-weight: 700; }
.amount-cell { font-weight: 700; text-align: right; }
.type-badge { font-size: 11px; padding: 2px 8px; border-radius: 2px; font-weight: 700; }
.type-badge.income { background: #E8F5E9; color: #2E7D32; }
.type-badge.expense { background: #FFEBEE; color: #C62828; }
.radio-item { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; cursor: pointer; padding: 8px 14px; border: 1.5px solid var(--ba-border); border-radius: 4px; transition: 0.15s; }
.radio-item input { accent-color: var(--ba-primary); }

/* ---- タイムカード ---- */
.tc-punch-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.tc-staff-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 14px; }
.tc-staff-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.tc-staff-icon { width: 36px; height: 36px; border-radius: 4px; background: var(--ba-primary); color: var(--ba-white); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-staff-name { font-size: 14px; font-weight: 700; }
.tc-staff-status { font-size: 12px; font-weight: 600; }
.tc-times { display: flex; gap: 10px; font-size: 12px; color: var(--ba-text-muted); margin-bottom: 10px; flex-wrap: wrap; }
.tc-punch-btns { display: flex; gap: 6px; }
.tc-btn { flex: 1; padding: 8px; border-radius: 4px; font-size: 13px; font-weight: 700; cursor: pointer; transition: all 0.15s; border: 1.5px solid; }
.tc-btn-in { border-color: #2E7D32; color: #2E7D32; background: var(--ba-white); }
.tc-btn-in:hover:not(:disabled) { background: #E8F5E9; }
.tc-btn-in.done { background: #E8F5E9; color: #BDBDBD; border-color: var(--ba-border); cursor: default; }
.tc-btn-break { border-color: var(--ba-warning); color: var(--ba-warning); background: var(--ba-white); }
.tc-btn-break.active { background: #FFF3E0; }
.tc-btn-break:hover:not(:disabled) { background: #FFF3E0; }
.tc-btn-out { border-color: var(--ba-primary); color: var(--ba-primary); background: var(--ba-white); }
.tc-btn-out:hover:not(:disabled) { background: var(--ba-primary-lt); }
.tc-btn-out.done { background: var(--ba-primary-lt); color: #BDBDBD; border-color: var(--ba-border); cursor: default; }
.tc-btn:disabled { opacity: 0.3; cursor: not-allowed; }

/* ---- 給与明細 ---- */
.payslip-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 20px; margin-bottom: 12px; }
.payslip-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px solid var(--ba-border); }
.payslip-name { font-size: 16px; font-weight: 800; color: var(--ba-text); }
.payslip-period { font-size: 12px; color: var(--ba-text-muted); margin-top: 3px; }
.payslip-net { text-align: right; font-size: 12px; color: var(--ba-text-muted); }
.payslip-net strong { font-size: 24px; font-weight: 900; color: var(--ba-primary); display: block; }
.payslip-body { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 14px; }
@media (max-width: 768px) { .payslip-body { grid-template-columns: 1fr; } }
.payslip-section-title { font-size: 11px; font-weight: 700; color: var(--ba-text-muted); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px; border-bottom: 1px solid var(--ba-border); padding-bottom: 4px; }
.payslip-row { display: flex; justify-content: space-between; padding: 5px 0; font-size: 13px; border-bottom: 1px solid #FAFAFA; }
.payslip-row:last-child { border-bottom: none; }
.payslip-row.total { font-weight: 700; border-top: 1.5px solid var(--ba-border); border-bottom: none; margin-top: 4px; }
.payslip-col-info { background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; padding: 10px; }

/* ---- 帳簿 ---- */
.bk-summary-cards { display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; margin-bottom: 20px; }
@media (max-width: 600px) { .bk-summary-cards { grid-template-columns: 1fr; } }
.bk-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 16px; text-align: center; border-left: 4px solid var(--ba-border); }
.bk-card.income { border-left-color: #2E7D32; }
.bk-card.expense { border-left-color: #C62828; }
.bk-card.profit { border-left-color: var(--ba-info); }
.bk-card.loss { border-left-color: var(--ba-warning); }
.bk-card-label { font-size: 12px; color: var(--ba-text-muted); margin-bottom: 6px; }
.bk-card-num { font-size: 22px; font-weight: 800; color: var(--ba-text); }

/* ---- 確定申告 ---- */
.tax-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .tax-layout { grid-template-columns: 1fr; } }
.tax-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 18px; margin-bottom: 14px; }
.tax-card-title { font-size: 14px; font-weight: 700; color: var(--ba-text); margin: 0 0 14px; padding-bottom: 8px; border-bottom: 1px solid var(--ba-border); }
.tax-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #FAFAFA; font-size: 13px; }
.tax-row:last-child { border-bottom: none; }
.tax-row.deduction strong { color: #C62828; }
.tax-row.result { font-weight: 700; font-size: 15px; border-top: 1.5px solid var(--ba-border); }
.tax-row.tax { background: #FFF8F7; border-radius: 4px; padding: 8px 10px; margin-top: 6px; }
.tax-category-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; }
.tax-bar-wrap { flex: 1; height: 5px; background: #F5F5F5; border-radius: 2px; overflow: hidden; }
.tax-bar { height: 100%; background: var(--ba-primary); border-radius: 2px; }
.tcl-category { margin-bottom: 14px; }
.tcl-cat-label { font-size: 11px; font-weight: 700; color: var(--ba-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 5px; }
.tcl-item { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 4px; cursor: pointer; transition: background 0.1s; font-size: 13px; }
.tcl-item:hover { background: #FAFAFA; }
.tcl-item input { width: 15px; height: 15px; accent-color: var(--ba-primary); }
.tcl-item:has(input:checked) .tcl-label { text-decoration: line-through; color: #BDBDBD; }
.tax-links { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
.tax-links h4 { font-size: 12px; font-weight: 700; color: var(--ba-text-muted); margin: 0 0 3px; }
.tax-link-btn { padding: 8px 14px; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; text-decoration: none; color: var(--ba-text-muted); font-size: 12px; font-weight: 600; transition: all 0.15s; display: block; }
.tax-link-btn:hover { border-color: var(--ba-primary); color: var(--ba-primary); background: var(--ba-primary-lt); }
.tax-disclaimer { margin-top: 14px; font-size: 11px; color: #BDBDBD; text-align: center; }
.tax-deadline { display: flex; flex-direction: column; gap: 6px; }
.tdl-item { display: flex; gap: 10px; align-items: center; font-size: 13px; padding: 7px 10px; border-radius: 4px; background: #FAFAFA; border: 1px solid var(--ba-border); }
.tdl-item.urgent { background: #FFF8F7; border-color: var(--ba-primary); }
.tdl-date { font-weight: 700; color: var(--ba-primary); white-space: nowrap; }

/* ========== BA-057 OCRパネル/チャート/ステータスバッジ ========== */
.ocr-panel { background: #fff9fb; border: 1.5px solid #f8bbd0; border-radius: 12px; padding: 16px; margin-bottom: 12px; }
.ocr-panel-label { font-size: 13px; font-weight: 700; color: #C2185B; margin-bottom: 10px; }
.ocr-upload-area { border: 2px dashed #f8bbd0; border-radius: 8px; padding: 24px; text-align: center; cursor: pointer; transition: 0.2s; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ocr-upload-area:hover { border-color: #C2185B; background: #fff0f5; }
.ocr-upload-area p { font-size: 13px; color: #666; margin: 0; }
.ocr-hint { font-size: 11px; color: #C2185B !important; }
.ocr-divider { display: flex; align-items: center; gap: 12px; color: #bbb; font-size: 12px; margin: 12px 0; }
.ocr-divider::before, .ocr-divider::after { content: ''; flex: 1; height: 1px; background: #eee; }
.bk-charts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 20px; }
@media (max-width: 768px) { .bk-charts { grid-template-columns: 1fr; } }
.bk-chart-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 16px; }
.tc-status-badge { font-size: 11px; padding: 2px 8px; border-radius: 4px; font-weight: 700; }
.tc-status-working { background: #E8F5E9; color: #388E3C; }
.tc-status-break { background: #FFF3E0; color: #F57C00; }
.tc-status-done { background: #E3F2FD; color: #1976D2; }
.tc-status-not-started { background: #f0f0f0; color: #999; }

/* ---- QRコード打刻パネル ---- */
.qr-panel { display: flex; gap: 16px; background: var(--ba-white); border: 1px solid var(--ba-border); border-left: 4px solid var(--ba-primary); border-radius: 4px; padding: 16px 20px; margin-bottom: 20px; align-items: flex-start; }
@media (max-width: 640px) { .qr-panel { flex-direction: column; } }
.qr-panel-left { flex: 1; }
.qr-panel-title { font-size: 14px; font-weight: 700; color: var(--ba-primary); margin-bottom: 4px; }
.qr-panel-desc { font-size: 12px; color: var(--ba-text-muted); line-height: 1.6; margin-bottom: 12px; }
.qr-panel-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.qr-url-wrap { margin-top: 8px; }
.qr-url-label { font-size: 11px; color: var(--ba-text-muted); font-weight: 700; margin-bottom: 3px; }
.qr-url-text { font-size: 11px; color: var(--ba-text-muted); word-break: break-all; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; padding: 5px 10px; margin-bottom: 5px; }
.qr-panel-right { flex-shrink: 0; }
.qr-placeholder { width: 110px; height: 110px; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; font-size: 12px; color: var(--ba-text-muted); flex-shrink: 0; }
.qr-modal-info { display: flex; flex-direction: column; gap: 10px; margin-bottom: 16px; }
.qr-info-step { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--ba-text-muted); background: #FAFAFA; border-radius: 4px; padding: 10px 14px; }
.qr-step-num { width: 24px; height: 24px; border-radius: 4px; background: var(--ba-primary); color: var(--ba-white); font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.qr-modal-url { display: flex; align-items: center; gap: 8px; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; padding: 8px 12px; }
.qr-url-small { font-size: 11px; color: var(--ba-text-muted); flex: 1; word-break: break-all; }

/* ---- タイムカード詳細 ---- */
.tc-period-btn { padding: 6px 14px; border: 1.5px solid var(--ba-border); border-radius: 4px; background: var(--ba-white); font-size: 13px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; transition: all 0.15s; }
.tc-period-btn.active, .tc-period-btn:hover { border-color: var(--ba-primary); color: var(--ba-primary); background: var(--ba-primary-lt); }

.tc-month-label { font-size: 13px; font-weight: 600; color: var(--ba-text-muted); margin-bottom: 12px; }
.tc-summary-cards { margin-bottom: 24px; }
.tc-summary-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px,1fr)); gap: 12px; }
.tc-summary-card { background: var(--ba-white); border: 1px solid var(--ba-border); border-radius: 4px; padding: 14px; }
.tc-sc-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.tc-sc-avatar { width: 36px; height: 36px; border-radius: 4px; background: var(--ba-primary); color: var(--ba-white); font-size: 16px; font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.tc-sc-info { flex: 1; min-width: 0; }
.tc-sc-name { font-size: 14px; font-weight: 700; color: var(--ba-text); }
.tc-sc-status { font-size: 12px; font-weight: 600; margin-top: 2px; }
.tc-sc-stats { display: grid; grid-template-columns: repeat(3,1fr); gap: 6px; text-align: center; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; padding: 8px; margin-bottom: 8px; }
.tc-sc-stat-num { font-size: 20px; font-weight: 800; color: var(--ba-text); }
.tc-sc-stat-num span { font-size: 12px; color: var(--ba-text-muted); font-weight: 400; }
.tc-sc-stat-label { font-size: 11px; color: var(--ba-text-muted); margin-top: 2px; }
.tc-sc-stat.over .tc-sc-stat-num { color: var(--ba-warning); }
.tc-sc-today { font-size: 12px; color: var(--ba-text-muted); background: #E3F2FD; border-radius: 4px; padding: 4px 8px; }

.tc-no-staff-guide { text-align: center; padding: 48px 20px; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; }
.tc-guide-icon { font-size: 48px; margin-bottom: 12px; }
.tc-no-staff-guide h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.tc-no-staff-guide p { font-size: 13px; color: var(--ba-text-muted); margin-bottom: 16px; }

.tc-view-tabs { display: flex; gap: 0; border-bottom: 2px solid var(--ba-border); margin-bottom: 16px; }
.tc-view-tab { padding: 9px 18px; border: none; background: none; font-size: 13px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; border-bottom: 3px solid transparent; margin-bottom: -2px; transition: all 0.15s; }
.tc-view-tab:hover { color: var(--ba-primary); }
.tc-view-tab.active { color: var(--ba-primary); border-bottom-color: var(--ba-primary); }

.tc-staff-tabs { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 12px; }
.tc-staff-tab { padding: 5px 14px; border: 1.5px solid var(--ba-border); border-radius: 4px; background: var(--ba-white); font-size: 12px; font-weight: 600; color: var(--ba-text-muted); cursor: pointer; transition: all 0.15s; }
.tc-staff-tab.active { background: var(--ba-primary); border-color: var(--ba-primary); color: var(--ba-white); }
.tc-staff-tab:hover:not(.active) { border-color: var(--ba-primary); color: var(--ba-primary); }

.tc-month-total { display: flex; gap: 20px; background: var(--ba-white); border: 1px solid var(--ba-border); border-left: 4px solid var(--ba-primary); border-radius: 4px; padding: 10px 16px; margin-bottom: 12px; flex-wrap: wrap; }
.tc-mt-item { display: flex; align-items: center; gap: 8px; }
.tc-mt-label { font-size: 12px; color: var(--ba-text-muted); }
.tc-mt-val { font-size: 16px; font-weight: 800; color: var(--ba-primary); }
.tc-mt-val.text-warning { color: var(--ba-warning); }

.tc-calendar-wrap { overflow-x: auto; }
.tc-calendar { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 560px; }
.tc-calendar th { padding: 8px; text-align: center; font-size: 12px; font-weight: 700; color: var(--ba-text-muted); background: #FAFAFA; border: 1px solid var(--ba-border); }
.tc-calendar th.sun { color: #C62828; }
.tc-calendar th.sat { color: #1565C0; }
.tc-cal-empty { border: 1px solid #F5F5F5; background: #FAFAFA; height: 80px; }
.tc-cal-cell { border: 1px solid var(--ba-border); padding: 4px 6px; height: 88px; vertical-align: top; cursor: pointer; transition: background 0.1s; background: var(--ba-white); }
.tc-cal-cell:hover { background: var(--ba-primary-lt); }
.tc-cal-cell.today { background: #FFF8F7; border: 2px solid var(--ba-primary); }
.tc-cal-cell.weekend { background: #FAFAFA; }
.tc-cal-cell.has-record { background: #F1F8E9; }
.tc-cal-cell.working { background: #E8F5E9; }
.tc-cal-day { font-size: 12px; font-weight: 700; color: var(--ba-text); margin-bottom: 2px; }
.tc-cal-cell.today .tc-cal-day { color: var(--ba-primary); }
.tc-cal-in { font-size: 10px; color: #2E7D32; font-weight: 600; }
.tc-cal-out { font-size: 10px; color: #1565C0; font-weight: 600; }
.tc-cal-out.night { color: #6A1B9A; font-weight: 700; }
.tc-cal-work { font-size: 11px; font-weight: 700; color: var(--ba-text); }
.tc-cal-over { font-size: 10px; color: var(--ba-warning); font-weight: 700; }
.tc-cal-absent { font-size: 11px; color: #E0E0E0; text-align: center; padding-top: 18px; }

.tc-day-detail { display: flex; flex-direction: column; gap: 0; }
.tc-dd-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid #F5F5F5; font-size: 13px; }
.tc-dd-row:last-child { border-bottom: none; }
.tc-dd-label { color: var(--ba-text-muted); }
.tc-dd-val { font-weight: 700; color: var(--ba-text); }
.tc-dd-row.total .tc-dd-val { color: var(--ba-info); font-size: 15px; }
.tc-dd-row.over .tc-dd-val { color: var(--ba-warning); }
.tc-edit-form-title { font-size: 13px; font-weight: 700; color: var(--ba-primary); }

.tc-status-badge { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 2px; }
.tc-status-working { background: #E8F5E9; color: #2E7D32; }
.tc-status-break { background: #FFF3E0; color: #E65100; }
.tc-status-done { background: #E3F2FD; color: #1565C0; }
.tc-status-not-started { background: #F5F5F5; color: #9E9E9E; }

/* ---- 給与明細 保険料自動計算バッジ ---- */
.payslip-auto-badge { font-size: 11px; background: #E8F5E9; color: #2E7D32; padding: 2px 8px; border-radius: 2px; margin-top: 4px; display: inline-block; }

/* ---- 保険料プレビュー ---- */
.insurance-preview-card { background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 4px; padding: 12px 14px; }
.ip-title { font-size: 12px; font-weight: 700; color: #1565C0; margin-bottom: 8px; }
.ip-grid { display: flex; flex-direction: column; gap: 4px; }
.ip-item { display: flex; justify-content: space-between; font-size: 12px; color: var(--ba-text-muted); }
.ip-item.total { border-top: 1px solid #90CAF9; margin-top: 4px; padding-top: 5px; font-weight: 700; }
.ip-item.net { color: var(--ba-primary); font-size: 14px; font-weight: 900; }
.ip-note { font-size: 11px; color: #9E9E9E; margin-top: 6px; }

.sales-input-grid { display: flex; flex-direction: column; gap: 8px; }
.sales-input-item { display: flex; align-items: center; gap: 10px; font-size: 13px; }

/* ---- 都道府県プレビュー ---- */
.pref-rate-info { font-size: 12px; color: var(--ba-text-muted); background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 4px; padding: 6px 10px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.pref-rate-label { color: #9E9E9E; }
.pref-rate-val { font-weight: 700; color: #1565C0; }
.pref-rate-updated { font-size: 11px; color: #BDBDBD; }

/* ---- 住民税モード ---- */
.resident-tax-modes { display: grid; grid-template-columns: repeat(3,1fr); gap: 8px; margin-bottom: 12px; }
@media(max-width:480px){ .resident-tax-modes{grid-template-columns:1fr;} }
.rtm-option { border: 1.5px solid var(--ba-border); border-radius: 4px; padding: 10px; cursor: pointer; transition: all 0.15s; display: flex; flex-direction: column; align-items: center; gap: 3px; text-align: center; }
.rtm-option input { display: none; }
.rtm-option:hover { border-color: var(--ba-primary); }
.rtm-option.active { border-color: var(--ba-primary); background: var(--ba-primary-lt); }
.rtm-icon { font-size: 20px; }
.rtm-label { font-size: 12px; font-weight: 700; color: var(--ba-text); }
.rtm-desc { font-size: 11px; color: var(--ba-text-muted); }
.resident-tax-result { background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 4px; padding: 10px 12px; }
.rtr-row { display: flex; justify-content: space-between; font-size: 12px; color: var(--ba-text-muted); padding: 3px 0; border-bottom: 1px solid #BBDEFB; }
.rtr-row:last-child { border-bottom: none; }
.rtr-row.total { font-weight: 700; border-top: 1px solid #90CAF9; margin-top: 3px; padding-top: 5px; }
.rtr-row.highlight { font-size: 14px; font-weight: 900; color: #1565C0; }
.resident-tax-calendar { display: flex; align-items: center; gap: 8px; margin-top: 10px; font-size: 13px; }
.rtc-item { padding: 6px 12px; background: #E3F2FD; border-radius: 4px; color: var(--ba-info); font-weight: 600; }
.rtc-item.current { background: var(--ba-primary-lt); color: var(--ba-primary); }
.rtc-arrow { color: #BDBDBD; font-size: 18px; }
.rates-status-card { display: flex; align-items: center; gap: 12px; border-radius: 4px; padding: 14px 16px; margin-bottom: 14px; }
.rates-status-card.up-to-date { background: #E8F5E9; border: 1px solid #A5D6A7; }
.rates-status-card.needs-update { background: #FFF3E0; border: 1px solid #FFCC80; }
.rsc-icon { font-size: 28px; flex-shrink: 0; }
.rsc-title { font-size: 14px; font-weight: 700; color: var(--ba-text); margin-bottom: 3px; }
.rsc-detail { font-size: 12px; color: var(--ba-text-muted); }

/* ---- 所定勤務時間プレビュー ---- */
.schedule-preview-card { background: #E3F2FD; border: 1px solid #90CAF9; border-radius: 4px; padding: 10px 14px; display: flex; align-items: center; gap: 12px; }
.spc-label { font-size: 12px; color: #1565C0; font-weight: 600; }
.spc-value { font-size: 16px; font-weight: 800; color: #1565C0; }

/* ---- 遅刻・早退バッジ ---- */
.tc-late-badge { font-size: 9px; background: #FFF3E0; color: #E65100; padding: 1px 4px; border-radius: 2px; font-weight: 700; display: inline-block; margin-top: 1px; }
.tc-early-badge { font-size: 9px; background: #E8EAF6; color: #3949AB; padding: 1px 4px; border-radius: 2px; font-weight: 700; display: inline-block; margin-top: 1px; }

/* ---- 控除プレビュー ---- */
.deduction-preview { font-size: 11px; color: #E65100; font-weight: 600; margin-top: 3px; background: #FFF3E0; border-radius: 4px; padding: 3px 8px; }

/* ---- 帳簿日別詳細 ---- */
.bk-day-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F5F5F5; }
.bk-day-item:last-of-type { border-bottom: none; }
.bk-di-type { font-size: 11px; font-weight: 700; padding: 3px 8px; border-radius: 2px; white-space: nowrap; }
.bk-di-type.income { background: #E8F5E9; color: #2E7D32; }
.bk-di-type.expense { background: #FFEBEE; color: #C62828; }
.bk-di-info { flex: 1; min-width: 0; }
.bk-di-name { font-size: 13px; font-weight: 600; color: var(--ba-text); }
.bk-di-cat { font-size: 11px; color: var(--ba-text-muted); }
.bk-di-amount { font-size: 14px; font-weight: 800; white-space: nowrap; }
.bk-di-amount.income { color: #2E7D32; }
.bk-di-amount.expense { color: #C62828; }

/* ===== BA14 シフト管理 ===== */
.shift-pattern-legend { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; font-size: 12px; }
.spl-item { display: flex; align-items: center; gap: 5px; color: #555; }
.spl-dot { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.shift-grid-wrap { overflow-x: auto; }
.shift-grid { border-collapse: collapse; white-space: nowrap; font-size: 12px; }
.shift-grid th, .shift-grid td { border: 1px solid var(--ba-border); padding: 4px; vertical-align: middle; }
.shift-grid th { background: #FAFAFA; font-size: 11px; font-weight: 700; color: var(--ba-text-muted); text-align: center; }
.shift-grid th.sun { color: #C62828; }
.shift-grid th.sat { color: #1565C0; }
.shift-grid-staff-col { min-width: 80px; position: sticky; left: 0; z-index: 2; background: #FAFAFA; }
.shift-grid-day { min-width: 52px; text-align: center; }
.shift-dow { font-size: 10px; color: #BDBDBD; }
.shift-grid-staff-cell { background: var(--ba-white); position: sticky; left: 0; z-index: 1; border-right: 2px solid var(--ba-border); }
.shift-staff-name { font-size: 12px; font-weight: 600; padding: 4px 6px; }
.shift-grid-cell { min-width: 52px; height: 48px; cursor: pointer; text-align: center; background: var(--ba-white); transition: background 0.1s; }
.shift-grid-cell:hover { background: var(--ba-primary-lt); }
.shift-grid-cell.weekend { background: #FAFAFA; }
.shift-cell-block { border-radius: 3px; padding: 2px 3px; font-size: 10px; line-height: 1.3; margin: 2px; }
.shift-cell-time { font-weight: 600; color: #333; }
.shift-cell-empty { color: #E0E0E0; font-size: 18px; line-height: 48px; }
.shift-grid-sum { min-width: 60px; position: sticky; right: 0; background: #FAFAFA; }
.shift-grid-sum-cell { text-align: center; font-size: 12px; font-weight: 700; color: var(--ba-primary); background: #FFF8F7; position: sticky; right: 0; }
.shift-pattern-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.shift-pattern-select-btn { padding: 8px 14px; border: 2px solid; border-radius: 4px; background: var(--ba-white); font-size: 12px; font-weight: 700; cursor: pointer; text-align: center; transition: all 0.15s; line-height: 1.4; }
.shift-pattern-select-btn:hover { opacity: 0.8; }
.pattern-list-item { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid #F5F5F5; }
.pli-color { width: 12px; height: 32px; border-radius: 2px; flex-shrink: 0; }
.pli-info { flex: 1; }
.pli-info strong { font-size: 13px; display: block; }
.pli-info span { font-size: 11px; color: #888; }
.dow-toggle { padding: 6px 10px; border: 1.5px solid var(--ba-border); border-radius: 4px; font-size: 13px; font-weight: 600; cursor: pointer; color: var(--ba-text-muted); background: var(--ba-white); transition: all 0.15s; display: flex; align-items: center; gap: 4px; }
.dow-toggle:has(input:checked) { border-color: var(--ba-primary); color: var(--ba-primary); background: var(--ba-primary-lt); }
.dow-toggle input { display: none; }
.bulk-shift-preview { background: #E8F5E9; border: 1px solid #A5D6A7; border-radius: 4px; padding: 12px; font-size: 13px; color: #2E7D32; }

/* ---- SPメニュー認証セクション ---- */
.sp-menu-auth { padding: 8px 0; border-top: 1px solid var(--ba-border, #E0E0E0); margin-top: 4px; }
.sp-menu-divider { font-size: 11px; font-weight: 700; color: #BDBDBD; padding: 8px 20px 4px; text-transform: uppercase; letter-spacing: 0.08em; }
.sp-menu-auth-btn { display: flex; align-items: center; gap: 10px; padding: 13px 20px; font-size: 14px; font-weight: 600; text-decoration: none; color: #555; transition: background 0.15s, color 0.15s; border-left: 3px solid transparent; }
.sp-menu-auth-btn:hover { background: #FAFAFA; }
.sp-menu-auth-btn.seeker { color: #1565C0; }
.sp-menu-auth-btn.seeker:hover { background: #E3F2FD; border-left-color: #1565C0; }
.sp-menu-auth-btn.salon { color: #C2185B; }
.sp-menu-auth-btn.salon:hover { background: #FCE4EC; border-left-color: #C2185B; }
.sp-menu-auth-btn.register { color: #2E7D32; }
.sp-menu-auth-btn.register:hover { background: #E8F5E9; border-left-color: #2E7D32; }

/* ---- SVGアイコン共通 ---- */
.mgmt-title svg, .ssn-btn svg, .sgn-btn svg, .btn-primary svg, .btn-outline svg, .btn-outline-sm svg,
.mgmt-section-title svg, .dashboard-section-title svg, .qr-panel-title svg, .payslip-auto-badge svg,
.tc-month-total svg, .btn-ghost svg, .tax-link-btn svg, .tc-view-tab svg, .dash-tab svg {
  display: inline-block; vertical-align: middle; flex-shrink: 0;
}
.mgmt-title svg { width: 20px; height: 20px; }
.mgmt-section-title svg { width: 16px; height: 16px; }

/* ===== BA10 ダブルワーク・深夜シフト ===== */
.punch-info-bar { display: flex; justify-content: space-between; align-items: center; padding: 10px 14px; background: #f9f9f9; border-radius: 8px; margin-bottom: 14px; font-size: 13px; color: #555; flex-wrap: wrap; gap: 8px; }
.tc-today-shifts { background: #f9f9f9; border-radius: 6px; padding: 6px 8px; margin: 6px 0 8px; display: flex; flex-direction: column; gap: 3px; }
.tc-shift-row { display: flex; align-items: center; gap: 6px; font-size: 11px; color: #666; }
.tc-shift-row.active { color: #388E3C; font-weight: 700; }
.tc-shift-label { background: #eee; border-radius: 3px; padding: 1px 5px; font-size: 10px; color: #888; }
.tc-cal-out.night { color: #7B1FA2; font-weight: 700; }

/* ===== BA16 スタッフ登録タブ / 権限 ===== */
.sr-empty { text-align: center; padding: 48px 20px; background: #FAFAFA; border: 1px solid var(--ba-border); border-radius: 4px; }
.sr-empty-icon { font-size: 32px; margin-bottom: 12px; color: #999; }
.sr-empty h3 { font-size: 18px; font-weight: 700; margin: 0 0 8px; }

.role-badge { font-size: 11px; font-weight: 700; padding: 2px 10px; border-radius: 2px; display: inline-block; }
.status-active { font-size: 11px; color: #2E7D32; font-weight: 700; }
.status-inactive { font-size: 11px; color: #BDBDBD; font-weight: 700; }

/* 権限選択グリッド */
.role-select-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (max-width: 480px) { .role-select-grid { grid-template-columns: 1fr; } }
.role-select-item { border: 2px solid var(--ba-border); border-radius: 4px; padding: 12px; cursor: pointer; transition: all 0.15s; display: block; }
.role-select-item input { display: none; }
.role-select-item:hover { border-color: var(--role-color, var(--ba-primary)); }
.role-select-item.active { border-color: var(--role-color, var(--ba-primary)); background: color-mix(in srgb, var(--role-color, var(--ba-primary)) 8%, white); }
.role-select-item.disabled { opacity: 0.3; cursor: not-allowed; pointer-events: none; }
.rsi-header { margin-bottom: 6px; }
.rsi-badge { display: inline-block; font-size: 12px; font-weight: 700; color: white; padding: 2px 10px; border-radius: 2px; }
.rsi-desc { font-size: 11px; color: #888; line-height: 1.5; }

/* ===== BA17 モバイルメニュー ドメイン表示 ===== */
.smm-domain { font-size: 11px; color: #888; margin-top: 2px; }

/* ===== BA17 ドメインバッジ ===== */
.salon-header-domain {
  font-size: 11px;
  color: #777;
  font-weight: 400;
  margin-left: 8px;
  padding: 2px 8px;
  background: #FAFAFA;
  border: 1px solid #E0E0E0;
  border-radius: 2px;
  white-space: nowrap;
}

/* ===== BA17 スタッフモバイルカード ===== */
.staff-mobile-card {
  background: #fff;
  border: 1px solid #E0E0E0;
  border-radius: 4px;
  padding: 12px;
  margin-bottom: 8px;
  cursor: pointer;
}
.staff-mobile-card-header {
  display: flex; align-items: center; gap: 10px; margin-bottom: 8px;
}
.staff-mobile-card-body {
  display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
  font-size: 12px; color: #777;
}
.staff-mobile-card-body strong { color: #333; }

/* ============================================
   BA17 レスポンシブ: タブレット (≤1200px)
   ============================================ */
@media (max-width: 1200px) {
  .dashboard-cards { grid-template-columns: repeat(3, 1fr); }
  .plan-cards-grid { grid-template-columns: repeat(2, 1fr); }
  .payslip-body { grid-template-columns: 1fr 1fr; }
  .tax-layout { grid-template-columns: 1fr; }
}

/* ============================================
   BA17 レスポンシブ: タブレット縦 / 大型スマホ (≤900px)
   ============================================ */
@media (max-width: 900px) {
  /* ヘッダー */
  .salon-gnav { display: none; }
  .salon-hamburger { display: flex !important; }
  .salon-header-name { display: none; }
  .salon-header-logout { display: none; }
  .salon-header-domain { display: none; }
  .salon-header { height: 50px; }
  .salon-header-inner { padding: 0 12px; height: 50px; }
  .salon-header-logo { font-size: 16px; }
  .salon-header-badge { font-size: 9px; padding: 1px 6px; }
  .salon-header-avatar { width: 28px; height: 28px; font-size: 12px; }

  /* サブナビ（ダッシュタブ）横スクロール */
  .dash-tabs-inner {
    display: flex;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    gap: 6px;
    padding: 6px 12px;
    min-height: 44px;
  }
  .dash-tabs-inner::-webkit-scrollbar { display: none; }
  .dash-tab { font-size: 12px; padding: 6px 12px; white-space: nowrap; flex: 0 0 auto; }

  /* コンテンツ */
  .mgmt-header { flex-direction: column; align-items: flex-start; gap: 8px; }
  .mgmt-title { font-size: 18px; }
  .mgmt-header-actions { width: 100%; flex-wrap: wrap; }

  /* ダッシュボード */
  .dashboard-cards, .dash-home-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .dash-card { padding: 14px; }
  .dash-card-num, .dash-stat-num { font-size: 26px; }
  .quick-actions { flex-direction: column; }
  .qa-btn { width: 100%; text-align: left; }

  /* タイムカード */
  .tc-summary-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .tc-summary-card { padding: 12px; }
  .tc-sc-stat-num { font-size: 18px; }
  .tc-month-total { flex-direction: column; gap: 8px; padding: 8px 12px; }
  .tc-view-tabs { overflow-x: auto; }
  .tc-calendar { font-size: 10px; }
  .tc-cal-cell { height: 70px; padding: 2px 3px; }
  .tc-cal-day { font-size: 11px; }
  .tc-cal-in, .tc-cal-out { font-size: 9px; }
  .tc-cal-work { font-size: 9px; }
  .tc-punch-grid { grid-template-columns: 1fr; }

  /* 給与明細 */
  .payslip-body { grid-template-columns: 1fr; gap: 10px; }
  .payslip-name { font-size: 15px; }
  .payslip-net strong { font-size: 20px; }

  /* 帳簿 */
  .bk-summary-cards { grid-template-columns: 1fr; gap: 8px; }
  .bk-charts { grid-template-columns: 1fr; }

  /* テーブル */
  .mgmt-table { font-size: 12px; }
  .mgmt-table th, .mgmt-table td { padding: 8px 10px; }

  /* シフト管理 */
  .shift-grid { font-size: 10px; }
  .shift-grid-staff-col { min-width: 60px; }
  .shift-grid-day { min-width: 44px; }
  .shift-grid-cell { min-width: 44px; height: 40px; }
  .shift-cell-time { font-size: 9px; }

  /* プラン */
  .plan-cards-grid { grid-template-columns: 1fr 1fr; gap: 8px; }

  /* モーダル */
  .modal-card, .modal-box { width: 95vw !important; max-height: 92vh; }

  /* 店舗セレクター */
  .store-selector { padding: 4px 12px; }
  .store-tab { font-size: 11px; padding: 4px 12px; }

  /* QRパネル */
  .qr-panel { flex-direction: column; padding: 14px; }
  .qr-placeholder { width: 100px; height: 100px; }
}

/* ============================================
   BA17 レスポンシブ: スマホ横 (≤640px)
   ============================================ */
@media (max-width: 640px) {
  /* ヘッダー更コンパクト */
  .salon-header { height: 46px; }
  .salon-header-inner { padding: 0 10px; height: 46px; }
  .salon-header-logo { font-size: 15px; }
  .salon-header-badge { display: none; }
  .salon-header-admin-link { display: none; }

  /* サブナビ */
  .dash-tabs-inner { padding: 4px 8px; gap: 4px; min-height: 40px; }
  .dash-tab { font-size: 11px; padding: 5px 10px; border-radius: 3px; }
  .dash-tab .nav-icon { display: none; }

  /* コンテンツ */
  .mgmt-title { font-size: 16px; }

  /* ダッシュボード */
  .dashboard-cards, .dash-home-grid { grid-template-columns: 1fr; gap: 6px; }
  .dash-card { flex-direction: row; align-items: center; gap: 12px; padding: 12px; }
  .dash-card-num, .dash-stat-num { font-size: 22px; }
  .dash-card-label { font-size: 11px; }
  .dash-card-btn { font-size: 12px; padding: 7px 10px; }

  /* タイムカード */
  .tc-summary-grid { grid-template-columns: 1fr; }
  .tc-summary-card { padding: 10px; }
  .tc-sc-header { gap: 8px; }
  .tc-sc-avatar { width: 32px; height: 32px; font-size: 14px; }
  .tc-sc-name { font-size: 13px; }
  .tc-sc-stats { gap: 4px; padding: 6px; }
  .tc-sc-stat-num { font-size: 16px; }
  .tc-sc-stat-label { font-size: 10px; }

  /* カレンダー小さく */
  .tc-calendar th { padding: 4px 2px; font-size: 10px; }
  .tc-cal-cell { height: 60px; padding: 2px; }
  .tc-cal-day { font-size: 10px; margin-bottom: 1px; }
  .tc-cal-in, .tc-cal-out { font-size: 8px; }
  .tc-cal-work { font-size: 8px; }
  .tc-cal-over { font-size: 8px; }

  /* 給与明細 */
  .payslip-card { padding: 14px; }
  .payslip-header { flex-direction: column; gap: 8px; }
  .payslip-net { text-align: left; }
  .payslip-net strong { font-size: 18px; }
  .payslip-row { font-size: 12px; padding: 4px 0; }
  .payslip-section-title { font-size: 10px; }

  /* テーブル */
  .mgmt-table { font-size: 11px; display: block; overflow-x: auto; }
  .mgmt-table th, .mgmt-table td { padding: 6px 8px; white-space: nowrap; }

  /* シフト管理 */
  .shift-grid-wrap { font-size: 9px; }
  .shift-grid-staff-col { min-width: 50px; font-size: 10px; }
  .shift-grid-day { min-width: 38px; }
  .shift-grid-cell { min-width: 38px; height: 36px; }
  .shift-cell-empty { font-size: 14px; line-height: 36px; }
  .shift-cell-time { font-size: 8px; }
  .shift-pattern-legend { font-size: 10px; }

  /* 帳簿 */
  .bk-card { padding: 12px; }
  .bk-card-num { font-size: 18px; }
  .bk-chart-card { padding: 12px; }

  /* 確定申告 */
  .tax-card { padding: 14px; }
  .tax-row { font-size: 12px; padding: 6px 0; }

  /* プラン */
  .plan-cards-grid { grid-template-columns: 1fr; }
  .plan-current-banner { flex-direction: column; gap: 8px; align-items: flex-start; }
  .plan-current-name { font-size: 16px; }

  /* フォーム */
  .form-input, .form-select, .form-textarea { font-size: 14px; padding: 10px 12px; }
  .form-label { font-size: 12px; }

  /* ボタン */
  .btn-primary { font-size: 13px; padding: 10px 16px; }
  .btn-ghost { font-size: 12px; padding: 8px 14px; }

  /* モーダル */
  .modal-card, .modal-box {
    border-radius: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    height: 100vh !important;
  }

  /* 権限選択 */
  .role-select-grid { grid-template-columns: 1fr; gap: 8px; }
  .role-select-item { padding: 10px; }

  /* 住民税モード */
  .resident-tax-modes { grid-template-columns: 1fr; }

  /* QRパネル */
  .qr-panel-title { font-size: 13px; }
  .qr-panel-desc { font-size: 11px; }

  /* 保険料プレビュー */
  .insurance-preview-card { padding: 10px; }
  .ip-title { font-size: 11px; }
}

/* ============================================
   BA17 レスポンシブ: スマホ縦 (≤480px)
   ============================================ */
@media (max-width: 480px) {
  /* ヘッダー最小 */
  .salon-header { height: 44px; }
  .salon-header-inner { padding: 0 8px; height: 44px; }
  .salon-header-logo { font-size: 14px; }
  .salon-header-avatar { width: 26px; height: 26px; font-size: 11px; }
  .salon-hamburger { width: 32px; height: 32px; gap: 4px; }
  .salon-hamburger span { height: 1.5px; }

  /* サブナビ最小 */
  .dash-tabs-inner { padding: 3px 6px; gap: 3px; min-height: 36px; }
  .dash-tab { font-size: 10px; padding: 4px 8px; }

  /* コンテンツ */
  .mgmt-title { font-size: 15px; }
  .mgmt-section-title { font-size: 13px; }

  /* タイムカードカレンダー更小さく */
  .tc-calendar th { font-size: 9px; padding: 3px 1px; }
  .tc-cal-cell { height: 50px; }
  .tc-cal-day { font-size: 9px; }
  .tc-cal-in, .tc-cal-out, .tc-cal-work, .tc-cal-over { font-size: 7px; }

  /* 給与明細 */
  .payslip-card { padding: 10px; }
  .payslip-name { font-size: 14px; }
  .payslip-net strong { font-size: 16px; }
  .payslip-body { gap: 8px; }
  .payslip-row { font-size: 11px; }

  /* フォーム（iOSズーム防止） */
  .form-input, .form-select, .form-textarea, input, select, textarea { font-size: 16px; }
}

/* ============================================
   BA17 スマホ: テーブル横スクロール補助
   ============================================ */
@media (max-width: 900px) {
  .table-scroll-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -12px;
    padding: 0 12px;
  }
}

/* ============================================
   BA19 salon-page レイアウト統一（1280px中央寄せ）
   ヘッダー・サブナビ・コンテンツを同じ max-width / padding で揃える
   BA21 強化版: .is-active-scope クラスと hidden 属性の併用で確実に1スコープのみ表示
   ============================================ */
body.salon-page .dash-tabs                     { display: none !important; }
body.salon-page .dash-tabs.is-active-scope     { display: flex !important; }
body.salon-page .dash-tabs[hidden]             { display: none !important; }
body.salon-page .dash-tab[hidden]              { display: none !important; }
body.salon-page .salon-header-inner { max-width: var(--salon-max); padding: 0 24px; }
body.salon-page .dash-tabs-inner    { max-width: var(--salon-max); margin: 0 auto; padding: 0 24px; }
body.salon-page .dash-body          { max-width: var(--salon-max); margin: 0 auto; padding: 24px; }

@media (max-width: 900px) {
  body.salon-page .salon-header-inner { padding: 0 12px; }
  body.salon-page .dash-tabs-inner    { padding: 6px 12px; }
  body.salon-page .dash-body          { padding: 16px 12px; }
}
@media (max-width: 640px) {
  body.salon-page .salon-header-inner { padding: 0 10px; }
  body.salon-page .dash-tabs-inner    { padding: 4px 8px; }
  body.salon-page .dash-body          { padding: 12px 8px; }
}
@media (max-width: 480px) {
  body.salon-page .salon-header-inner { padding: 0 8px; }
}

/* ============================================
   BA25 歩合タイプ切替スイッチ
   ============================================ */
.commission-type-switch { display: flex; gap: 8px; margin-bottom: 10px; }
.switch-btn {
  padding: 8px 16px;
  border: 2px solid #e0e0e0;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  transition: all 0.15s;
  flex: 1;
  text-align: center;
  background: #fff;
}
.switch-btn:hover { border-color: var(--ba-primary, #C2185B); color: var(--ba-primary, #C2185B); }
.switch-btn.active { background: var(--ba-primary, #C2185B); border-color: var(--ba-primary, #C2185B); color: #fff; }

/* ============================================
   BA24 汎用モーダル（.modal-overlay / .modal-box 系）
   BA15 以降の openAddStoreModal 等で使われるが CSS 未定義だった
   ============================================ */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  width: 100vw; height: 100vh;
  background: rgba(0,0,0,0.5);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
  animation: baModalFadeIn 0.15s ease;
}
@keyframes baModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.modal-box {
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0,0,0,0.25);
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  animation: baModalSlideUp 0.2s ease;
}
@keyframes baModalSlideUp {
  from { transform: translateY(20px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.modal-box .modal-header {
  padding: 14px 20px;
  border-bottom: 1px solid var(--ba-border, #e0e0e0);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}
.modal-box .modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 700;
}
.modal-box .modal-close {
  background: transparent;
  border: none;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  color: #999;
  padding: 4px 10px;
  border-radius: 4px;
}
.modal-box .modal-close:hover {
  background: #f5f5f5;
  color: #333;
}
.modal-box .modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}
.modal-box .modal-footer {
  padding: 12px 20px;
  border-top: 1px solid var(--ba-border, #e0e0e0);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
  background: #FAFAFA;
}
/* salon-page スコープ下でも確実に重なり順を確保 */
body.salon-page .modal-overlay {
  position: fixed !important;
  z-index: 99999 !important;
}
body.salon-page .modal-box {
  z-index: 100000 !important;
}
@media (max-width: 640px) {
  .modal-overlay { padding: 0; }
  .modal-box {
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    max-height: 100vh !important;
    border-radius: 0;
  }
}