/* ========================================
   管理者ダッシュボード スタイルシート
======================================== */

/* ========================================
   共通設定
======================================== */
.admin-body {
  margin: 0;
  padding: 0;
  font-family: 'Noto Sans JP', sans-serif;
  background: #f1f5f9;
  min-height: 100vh;
}

/* ========================================
   ログイン画面
======================================== */
.login-screen {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  padding: 20px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  width: 100%;
  max-width: 400px;
  overflow: hidden;
}

.login-header {
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #fff;
  padding: 32px;
  text-align: center;
}

.login-header h1 {
  margin: 0 0 8px;
  font-size: 24px;
  font-weight: 700;
}

.login-header p {
  margin: 0;
  opacity: 0.8;
  font-size: 14px;
}

.login-form {
  padding: 32px;
}

.login-form .form-group {
  margin-bottom: 20px;
}

.login-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.login-form input {
  width: 100%;
  padding: 12px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 16px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.login-form input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.login-error {
  background: #fef2f2;
  color: #dc2626;
  padding: 12px;
  border-radius: 8px;
  font-size: 14px;
  margin-bottom: 16px;
}

.btn-login-submit {
  width: 100%;
  padding: 14px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-login-submit:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.login-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  color: #9ca3af;
  font-size: 13px;
}

.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

.login-divider span {
  padding: 0 12px;
}

.btn-google-login {
  width: 100%;
  padding: 12px 16px;
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  transition: background 0.2s, box-shadow 0.2s;
}

.btn-google-login:hover {
  background: #f9fafb;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.btn-google-login svg {
  flex-shrink: 0;
}

/* サービスサイトへのリンク */
.login-service-link {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.login-service-link p {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 8px;
}

.login-service-link a {
  color: #6366f1;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: opacity 0.2s;
}

.login-service-link a:hover {
  opacity: 0.7;
  text-decoration: underline;
}

/* ========================================
   ダッシュボードレイアウト
======================================== */
.admin-dashboard {
  display: flex;
  min-height: 100vh;
}

/* ========================================
   サイドバー
======================================== */
.admin-sidebar {
  width: 260px;
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  position: fixed;
  height: 100vh;
  z-index: 100;
}

.sidebar-header {
  padding: 24px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.sidebar-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
}

.sidebar-header p {
  margin: 4px 0 0;
  font-size: 12px;
  opacity: 0.7;
}

.sidebar-nav {
  flex: 1;
  padding: 16px 0;
  overflow-y: auto;
  min-height: 0;
}

/* サイドバースクロールバーのスタイル */
.sidebar-nav::-webkit-scrollbar {
  width: 6px;
}

.sidebar-nav::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar-nav::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 3px;
}

.sidebar-nav::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.3);
}

.sidebar-nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.sidebar-nav li {
  margin: 4px 12px;
}

.sidebar-nav a {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  color: rgba(255, 255, 255, 0.7);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s;
}

.sidebar-nav a:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.sidebar-nav li.active a {
  background: rgba(99, 102, 241, 0.3);
  color: #fff;
}

.nav-icon {
  font-size: 18px;
}

.nav-section {
  margin-bottom: 8px;
}

.nav-section-title {
  padding: 12px 24px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: rgba(255, 255, 255, 0.4);
  margin: 0;
}

.nav-section:first-child .nav-section-title {
  padding-top: 0;
}

.sidebar-footer {
  padding: 16px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.btn-back-top {
  display: block;
  width: 100%;
  padding: 12px;
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  text-align: center;
  text-decoration: none;
  margin-bottom: 8px;
  transition: background 0.2s, color 0.2s;
}

.btn-back-top:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.btn-logout {
  width: 100%;
  padding: 12px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-logout:hover {
  background: rgba(255, 255, 255, 0.2);
}

/* ========================================
   メインコンテンツ
======================================== */
.admin-main {
  flex: 1;
  margin-left: 260px;
  min-height: 100vh;
  padding-top: 73px; /* ヘッダーの高さ分 */
}

.admin-header {
  background: #fff;
  padding: 20px 32px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  left: 260px; /* サイドバーの幅分オフセット */
  right: 0;
  z-index: 50;
}

.admin-header h1 {
  margin: 0;
  font-size: 24px;
  color: #1e293b;
}

.header-actions {
  display: flex;
  gap: 16px;
  align-items: center;
}

/* 会社ビューモードセクション（サイドバー内） */
.company-view-section {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(99, 102, 241, 0.1);
}

.company-view-selector {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.company-view-selector .company-view-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.company-view-select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 6px;
  font-size: 13px;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
}

.company-view-select:focus {
  outline: none;
  border-color: #6366f1;
  background: rgba(255, 255, 255, 0.15);
}

.company-view-select option {
  background: #1e293b;
  color: #fff;
}

/* 会社ビューモード表示バー */
.company-view-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  color: #fff;
  padding: 10px 12px;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
}

.company-view-indicator {
  font-size: 14px;
}

.company-view-name {
  flex: 1;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.btn-exit-company-view {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  padding: 4px 10px;
  border-radius: 4px;
  font-size: 12px;
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}

.btn-exit-company-view:hover {
  background: rgba(255, 255, 255, 0.3);
}

.date-range-picker {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.date-range-picker label {
  font-size: 14px;
  color: #64748b;
  font-weight: 500;
}

.date-range-picker .date-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-range-picker .date-input {
  padding: 8px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 13px;
  background: #fff;
  width: 110px;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.date-range-picker .date-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.date-range-picker .date-separator {
  color: #94a3b8;
  font-size: 13px;
}

.date-range-picker .date-range-presets {
  display: flex;
  gap: 4px;
}

.date-range-picker .date-preset-btn {
  padding: 6px 10px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  font-size: 12px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.date-range-picker .date-preset-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
}

.date-range-picker .date-preset-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.btn-refresh {
  padding: 8px 16px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-refresh:hover {
  background: #4f46e5;
}

/* ========================================
   セクション
======================================== */
.admin-section {
  display: none;
  padding: 32px;
}

.admin-section.active {
  display: block;
}

/* ========================================
   統計カード
======================================== */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 32px;
}

.stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.stat-icon {
  width: 56px;
  height: 56px;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.stat-content {
  flex: 1;
}

.stat-card .stat-label {
  font-size: 13px;
  color: #64748b;
  margin: 0 0 4px;
}

.stat-card .stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
}

/* ========================================
   チャート
======================================== */
.chart-container {
  background: #fff;
  border-radius: 16px;
  padding: 24px;
  margin-bottom: 0;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  height: 100%;
}

.chart-container h3 {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  gap: 8px;
}

.chart-container h3::before {
  content: '';
  width: 4px;
  height: 16px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 2px;
}

.chart-placeholder {
  min-height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
}

.chart-placeholder:has(.vertical-bar-chart) {
  display: block;
  min-height: auto;
}

.simple-chart {
  width: 100%;
  overflow-x: auto;
}

.chart-bars {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 200px;
  padding: 0 8px;
}

.chart-bar-wrapper {
  flex: 1;
  min-width: 30px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
}

.chart-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px 4px 0 0;
  position: relative;
  min-height: 4px;
  transition: height 0.3s;
}

.chart-bar:hover {
  opacity: 0.8;
}

.bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 11px;
  color: #64748b;
  white-space: nowrap;
  display: none;
}

.chart-bar:hover .bar-value {
  display: block;
}

.bar-label {
  font-size: 10px;
  color: #94a3b8;
  margin-top: 8px;
  white-space: nowrap;
}

/* ========================================
   テーブル
======================================== */
.table-container {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.table-container h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #1e293b;
}

.admin-table {
  width: 100%;
  border-collapse: collapse;
}

.admin-table th,
.admin-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.admin-table th {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
}

.admin-table td {
  font-size: 14px;
  color: #374151;
}

.admin-table tbody tr:hover {
  background: #f8fafc;
}

.loading-cell {
  text-align: center;
  color: #94a3b8;
  padding: 40px !important;
}

.type-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
}

.type-badge.apply {
  background: #dcfce7;
  color: #15803d;
}

.type-badge.line {
  background: #d1fae5;
  color: #047857;
}

.type-badge.consult {
  background: #e0e7ff;
  color: #4f46e5;
}

/* ========================================
   フィルターバー
======================================== */
.filter-bar {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
}

.search-input {
  flex: 1;
  max-width: 300px;
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
}

.search-input:focus {
  outline: none;
  border-color: #6366f1;
}

.filter-bar select {
  padding: 10px 16px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

/* ========================================
   企業カード
======================================== */
.company-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.company-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.company-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.company-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 16px;
}

.company-card-header h4 {
  margin: 0;
  font-size: 16px;
  color: #1e293b;
}

.pattern-badge {
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
}

.pattern-badge.standard {
  background: #f1f5f9;
  color: #64748b;
}

.pattern-badge.modern {
  background: #1e293b;
  color: #fff;
}

.pattern-badge.classic {
  background: #1a365d;
  color: #c6a962;
}

.pattern-badge.minimal {
  background: #fff;
  color: #374151;
  border: 1px solid #e5e7eb;
}

.pattern-badge.colorful {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: #fff;
}

.company-card-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

.card-stat {
  text-align: center;
  padding: 12px 8px;
  background: #f8fafc;
  border-radius: 8px;
}

.card-stat .stat-value {
  display: block;
  font-size: 20px;
  font-weight: 700;
  color: #1e293b;
}

.card-stat .stat-label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 4px;
}

/* 企業カード LP/採用サイト分割指標 */
.company-card-page-split {
  margin-bottom: 12px;
  border-top: 1px solid #e5e7eb;
  padding-top: 12px;
}

.page-split-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 8px;
  border-radius: 6px;
  font-size: 12px;
}

.page-split-item + .page-split-item {
  margin-top: 4px;
}

.page-split-item.recruit {
  background: #eff6ff;
}

.page-split-item.lp {
  background: #f0fdf4;
}

.page-split-label {
  font-weight: 600;
  color: #1e293b;
  min-width: 64px;
  flex-shrink: 0;
}

.page-split-item.recruit .page-split-label {
  color: #2563eb;
}

.page-split-item.lp .page-split-label {
  color: #16a34a;
}

.page-split-stats {
  color: #64748b;
  font-size: 11px;
}

.btn-view-page {
  display: block;
  text-align: center;
  padding: 10px;
  background: #f1f5f9;
  color: #475569;
  text-decoration: none;
  border-radius: 8px;
  font-size: 14px;
  transition: background 0.2s;
}

.btn-view-page:hover {
  background: #e2e8f0;
}

.btn-view-status {
  display: block;
  width: 100%;
  text-align: center;
  padding: 10px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-view-status:hover {
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

.loading-placeholder {
  grid-column: 1 / -1;
  text-align: center;
  padding: 60px;
  color: #94a3b8;
}

/* ========================================
   分析タブ
======================================== */
.analytics-tabs {
  display: flex;
  gap: 4px;
  margin-bottom: 24px;
  background: #fff;
  padding: 6px;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-tab {
  padding: 10px 20px;
  background: transparent;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.analytics-tab:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.analytics-tab.active {
  background: #6366f1;
  color: #fff;
}

.analytics-tab-content {
  display: none;
}

.analytics-tab-content.active {
  display: block;
}

/* 統計グリッドのバリエーション */
.stats-grid-2 {
  grid-template-columns: repeat(2, 1fr);
}

.stats-grid-3 {
  grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 767px) {
  .stats-grid-2,
  .stats-grid-3 {
    grid-template-columns: 1fr;
  }
}

/* 分析レイアウト */
.analytics-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin-bottom: 24px;
}

.analytics-col {
  min-width: 0;
}

@media (max-width: 991px) {
  .analytics-row {
    grid-template-columns: 1fr;
  }
}

/* ファネルチャート */
.funnel-container {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.funnel-container h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #1e293b;
}

.funnel-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.funnel-stage {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px;
  background: linear-gradient(90deg, #e0e7ff 0%, #f1f5f9 100%);
  border-radius: 8px;
  position: relative;
}

.funnel-stage:nth-child(1) {
  background: linear-gradient(90deg, #c7d2fe 0%, #e0e7ff 100%);
}

.funnel-stage:nth-child(2) {
  background: linear-gradient(90deg, #a5b4fc 0%, #c7d2fe 100%);
  margin-left: 20px;
}

.funnel-stage:nth-child(3) {
  background: linear-gradient(90deg, #818cf8 0%, #a5b4fc 100%);
  margin-left: 40px;
}

.funnel-stage:nth-child(4) {
  background: linear-gradient(90deg, #6366f1 0%, #818cf8 100%);
  margin-left: 60px;
  color: #fff;
}

.funnel-stage-name {
  flex: 1;
  font-weight: 600;
  font-size: 14px;
}

.funnel-stage-count {
  font-size: 20px;
  font-weight: 700;
}

.funnel-stage-rate {
  font-size: 13px;
  opacity: 0.8;
  min-width: 60px;
  text-align: right;
}

/* ========================================
   採用管理タブ（admin専用）
   ======================================== */

/* アラートセクション */
.recruitment-alerts-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recruitment-alerts-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1e293b;
}

.section-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: #64748b;
}

.no-alerts {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 16px;
  background: #f0fdf4;
  border-radius: 8px;
  color: #15803d;
  font-weight: 500;
}

.alert-card {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  border-left: 4px solid #f59e0b;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.alert-card.alert-warning {
  background: #fffbeb;
  border-left-color: #f59e0b;
}

.alert-card.alert-danger {
  background: #fef2f2;
  border-left-color: #ef4444;
}

.alert-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 8px;
}

.alert-icon {
  font-size: 18px;
}

.alert-title {
  font-weight: 600;
  color: #1e293b;
}

.alert-body {
  padding-left: 26px;
  font-size: 14px;
  color: #475569;
}

.alert-body p {
  margin: 4px 0;
}

/* 採用ファネルセクション */
.recruitment-funnel-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.recruitment-funnel-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #1e293b;
}

.funnel-filter {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 20px;
}

.funnel-filter label {
  font-size: 14px;
  color: #64748b;
}

.funnel-filter select {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
}

.recruitment-funnel-chart .funnel-stages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruitment-funnel-chart .funnel-stage {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recruitment-funnel-chart .funnel-label {
  width: 60px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  text-align: right;
}

.recruitment-funnel-chart .funnel-bar-wrapper {
  flex: 1;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
}

.recruitment-funnel-chart .funnel-bar {
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  color: #fff;
  font-weight: 600;
  border-radius: 6px;
  transition: width 0.5s ease;
}

.recruitment-funnel-chart .funnel-count {
  font-size: 14px;
}

.recruitment-funnel-chart .funnel-rate {
  width: 60px;
  text-align: right;
  font-size: 14px;
  color: #64748b;
}

.funnel-stats-grid {
  display: flex;
  gap: 16px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e2e8f0;
}

.funnel-stat-card {
  flex: 1;
  text-align: center;
  padding: 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.funnel-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #6366f1;
}

.funnel-stat-label {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

/* リードタイムセクション */
.lead-time-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lead-time-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #1e293b;
}

.lead-time-section .stat-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

/* リードタイム分布グラフセクション */
.lead-time-distribution-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.lead-time-distribution-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1e293b;
}

.lead-time-distribution-section .section-note {
  margin: 0 0 20px;
  font-size: 13px;
  color: #64748b;
}

.distribution-chart {
  min-height: 200px;
}

.distribution-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-around;
  height: 180px;
  padding: 0 20px;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 12px;
}

.distribution-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 100px;
}

.distribution-bar {
  width: 50px;
  background: linear-gradient(180deg, #10b981 0%, #059669 100%);
  border-radius: 6px 6px 0 0;
  transition: height 0.5s ease;
  min-height: 4px;
  position: relative;
}

.distribution-bar.warning {
  background: linear-gradient(180deg, #f59e0b 0%, #d97706 100%);
}

.distribution-bar.danger {
  background: linear-gradient(180deg, #ef4444 0%, #dc2626 100%);
}

.distribution-bar-value {
  position: absolute;
  top: -24px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
}

.distribution-bar-label {
  margin-top: 8px;
  font-size: 13px;
  color: #64748b;
  text-align: center;
}

.distribution-legend {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid #e2e8f0;
}

.distribution-legend-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #64748b;
}

.distribution-legend-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.distribution-legend-color.good {
  background: #10b981;
}

.distribution-legend-color.warning {
  background: #f59e0b;
}

.distribution-legend-color.danger {
  background: #ef4444;
}

/* 担当者別パフォーマンスセクション */
.assignee-performance-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.assignee-performance-section h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: #1e293b;
}

#assignee-performance-table tbody td:nth-child(3),
#assignee-performance-table tbody td:nth-child(4),
#assignee-performance-table tbody td:nth-child(5) {
  text-align: right;
}

.performance-good {
  color: #10b981;
  font-weight: 600;
}

.performance-warning {
  color: #f59e0b;
  font-weight: 600;
}

.performance-danger {
  color: #ef4444;
  font-weight: 600;
}

/* 企業別採用状況セクション */
.company-recruitment-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.company-recruitment-section h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: #1e293b;
}

.company-recruitment-section .section-note {
  margin: 0 0 16px;
  font-size: 13px;
  color: #64748b;
}

/* クリック可能なテーブル行 */
.admin-table.clickable-rows tbody tr {
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.admin-table.clickable-rows tbody tr:hover {
  background-color: #f1f5f9;
}

.admin-table.clickable-rows tbody tr:active {
  background-color: #e2e8f0;
}

/* 企業別詳細ビュー */
.company-recruitment-detail {
  animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: translateY(0); }
}

.company-recruitment-detail .detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.company-recruitment-detail .detail-header h3 {
  margin: 0;
  font-size: 20px;
  color: #1e293b;
}

.company-recruitment-detail .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  color: #475569;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.15s ease;
}

.company-recruitment-detail .btn-back:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.company-recruitment-detail h4 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #334155;
}

.company-recruitment-detail .recruitment-funnel-section,
.company-recruitment-detail .lead-time-section,
.company-recruitment-detail .lead-time-distribution-section,
.company-recruitment-detail .assignee-performance-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* 横棒チャート */
.horizontal-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.bar-label {
  min-width: 100px;
  font-size: 13px;
  color: #64748b;
  text-align: right;
}

.bar-track {
  flex: 1;
  height: 24px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  transition: width 0.5s ease;
  min-width: 2px;
}

.bar-value {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

/* 横棒グラフ（曜日・時間帯共通） */
.horizontal-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 8px 0;
}

.h-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.h-bar-label {
  width: 32px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  text-align: right;
  flex-shrink: 0;
}

.h-bar-label.wide {
  width: 110px;
  font-size: 13px;
}

.h-bar-container {
  flex: 1;
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
}

.h-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 6px;
  min-width: 4px;
  transition: width 0.5s ease;
}

.h-bar.h-bar-green {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.h-bar-value {
  width: 50px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  text-align: right;
  flex-shrink: 0;
}

/* 縦棒グラフ（サンプルスタイル） */
.vertical-bar-chart {
  display: flex;
  gap: 12px;
  padding: 40px 16px 16px;
  background: #f8fafc;
  border-radius: 8px;
}

.vbar-y-axis {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-right: 8px;
  height: 160px;
}

.vbar-y-label {
  font-size: 11px;
  color: #94a3b8;
  text-align: right;
  min-width: 40px;
  line-height: 1;
}

.vbar-chart-area {
  flex: 1;
  position: relative;
  height: 160px;
}

.vbar-grid {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
}

.vbar-grid-line {
  position: absolute;
  left: 0;
  right: 0;
  border-top: 1px dashed #e2e8f0;
  height: 0;
}

.vbar-bars {
  height: 160px;
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 8px;
  position: relative;
  z-index: 1;
}

.vbar-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 60px;
}

.vbar-bar-wrap {
  height: 160px;
  width: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  position: relative;
}

.vbar-bar {
  width: 100%;
  max-width: 40px;
  min-height: 4px;
  max-height: 160px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px 4px 0 0;
  transition: height 0.5s ease;
  position: relative;
  cursor: pointer;
}

.vbar-bar:hover {
  opacity: 0.85;
}

.vbar-bar.vbar-green {
  background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
}

.vbar-tooltip {
  position: absolute;
  top: -28px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s, visibility 0.2s;
  z-index: 10;
}

.vbar-tooltip::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 4px solid transparent;
  border-top-color: #1e293b;
}

.vbar-bar:hover .vbar-tooltip {
  opacity: 1;
  visibility: visible;
}

.vbar-label {
  margin-top: 8px;
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  white-space: nowrap;
}

/* 旧縦棒グラフ（フォールバック用） */
.day-chart {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  gap: 12px;
  height: 180px;
  padding: 20px 16px 40px;
  background: #f8fafc;
  border-radius: 12px;
}

.day-bar {
  flex: 1;
  max-width: 50px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 6px 6px 0 0;
  min-height: 8px;
  position: relative;
  transition: all 0.3s ease;
  cursor: pointer;
}

.hour-chart {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 180px;
  padding: 20px 12px 40px;
  background: #f8fafc;
  border-radius: 12px;
}

.hour-bar {
  flex: 1;
  background: linear-gradient(180deg, #10b981 0%, #34d399 100%);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.2s ease;
  cursor: pointer;
}



/* ========================================
   企業詳細分析セクション
======================================== */
.detail-header {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
}

.detail-header h3 {
  flex: 1;
  margin: 0;
}

.btn-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-back:hover {
  background: #e2e8f0;
  color: #1e293b;
}

/* サマリー統計 */
.detail-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.detail-stat-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-stat-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 100%);
  border-radius: 12px;
}

.detail-stat-content {
  flex: 1;
}

.detail-stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  margin: 0;
  line-height: 1.2;
}

.detail-stat-label {
  font-size: 13px;
  color: #64748b;
  margin: 4px 0 0;
}

/* 企業詳細 採用サイト/LP比較 */
.detail-page-comparison {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.detail-page-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-page-card.recruit {
  border-left: 4px solid #2563eb;
}

.detail-page-card.lp {
  border-left: 4px solid #16a34a;
}

.detail-page-card h4 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 600;
}

.detail-page-card.recruit h4 {
  color: #2563eb;
}

.detail-page-card.lp h4 {
  color: #16a34a;
}

.detail-page-stats {
  display: flex;
  gap: 24px;
}

.detail-page-stat {
  text-align: center;
}

.detail-page-stat-value {
  display: block;
  font-size: 22px;
  font-weight: 700;
  color: #1e293b;
}

.detail-page-stat-label {
  display: block;
  font-size: 12px;
  color: #64748b;
  margin-top: 4px;
}

/* グラフエリア */
.detail-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
  margin-bottom: 24px;
}

.detail-chart-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-chart-container h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.detail-chart-wide {
  grid-column: 1 / -1;
}

.detail-chart {
  min-height: 200px;
  position: relative;
}

/* 日別チャート */
.detail-line-chart {
  display: flex;
  align-items: flex-end;
  gap: 4px;
  height: 180px;
  padding: 0 8px 24px;
}

.detail-line-bar {
  flex: 1;
  background: linear-gradient(180deg, #6366f1 0%, #818cf8 100%);
  border-radius: 3px 3px 0 0;
  min-height: 4px;
  position: relative;
  transition: all 0.3s;
  cursor: pointer;
}

.detail-line-bar:hover {
  background: linear-gradient(180deg, #4f46e5 0%, #6366f1 100%);
}

.detail-line-bar::after {
  content: attr(data-date);
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 10px;
  color: #94a3b8;
  white-space: nowrap;
}

.detail-line-bar:nth-child(7n)::after {
  display: block;
}

.detail-line-bar:not(:nth-child(7n))::after {
  display: none;
}

.detail-line-bar .bar-tooltip {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11px;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s;
}

.detail-line-bar:hover .bar-tooltip {
  opacity: 1;
}

/* 円グラフ風表示 */
.detail-pie-chart {
  display: flex;
  align-items: center;
  gap: 24px;
}

.pie-visual {
  width: 140px;
  height: 140px;
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}

.pie-legend {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.pie-legend-item {
  display: flex;
  align-items: center;
  gap: 10px;
}

.pie-color {
  width: 14px;
  height: 14px;
  border-radius: 3px;
  flex-shrink: 0;
}

.pie-color.male { background: #3b82f6; }
.pie-color.female { background: #ec4899; }
.pie-color.other { background: #94a3b8; }
.pie-color.organic { background: #10b981; }
.pie-color.direct { background: #6366f1; }
.pie-color.social { background: #f59e0b; }
.pie-color.referral { background: #8b5cf6; }
.pie-color.age-20s { background: #3b82f6; }
.pie-color.age-30s { background: #10b981; }
.pie-color.age-40s { background: #f59e0b; }
.pie-color.age-50s { background: #ef4444; }

.pie-label {
  font-size: 13px;
  color: #475569;
}

.pie-value {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-left: auto;
}

/* 横棒グラフ（求人別） */
.detail-bar-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.detail-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
}

.detail-bar-label {
  width: 120px;
  font-size: 12px;
  color: #475569;
  text-align: right;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.detail-bar-track {
  flex: 1;
  height: 28px;
  background: #f1f5f9;
  border-radius: 6px;
  overflow: hidden;
  position: relative;
}

.detail-bar-fill {
  height: 100%;
  border-radius: 6px;
  transition: width 0.5s ease;
  min-width: 4px;
}

.detail-bar-fill.job-1 { background: linear-gradient(90deg, #6366f1, #8b5cf6); }
.detail-bar-fill.job-2 { background: linear-gradient(90deg, #3b82f6, #60a5fa); }
.detail-bar-fill.job-3 { background: linear-gradient(90deg, #10b981, #34d399); }
.detail-bar-fill.job-4 { background: linear-gradient(90deg, #f59e0b, #fbbf24); }
.detail-bar-fill.job-5 { background: linear-gradient(90deg, #ef4444, #f87171); }

.detail-bar-value {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 600;
  color: #1e293b;
}

/* テーブルグリッド */
.detail-tables-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.detail-table-container {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.detail-table-container h4 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

/* レスポンシブ */
@media (max-width: 1200px) {
  .detail-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .modal-fullscreen {
    width: 98vw;
    height: 95vh;
  }

  .detail-charts-grid {
    grid-template-columns: 1fr;
  }

  .detail-tables-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 767px) {
  .detail-summary {
    grid-template-columns: 1fr;
  }

  .detail-stat-card {
    padding: 16px;
  }

  .detail-stat-value {
    font-size: 24px;
  }

  .detail-pie-chart {
    flex-direction: column;
  }
}

/* ========================================
   設定セクション
======================================== */
.settings-card {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.settings-card h3 {
  margin: 0 0 20px;
  font-size: 18px;
  color: #1e293b;
}

.settings-card .form-group {
  margin-bottom: 20px;
}

.settings-card label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.settings-card input {
  width: 100%;
  max-width: 400px;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.settings-card input:focus {
  outline: none;
  border-color: #6366f1;
}

.form-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #94a3b8;
}

.form-error {
  padding: 12px 16px;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 14px;
  margin-bottom: 16px;
}

.form-success {
  padding: 12px 16px;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  color: #16a34a;
  font-size: 14px;
  margin-bottom: 16px;
}

.config-value {
  display: block;
  background: #f8fafc;
  padding: 10px 14px;
  border-radius: 8px;
  font-family: 'SF Mono', Monaco, 'Cascadia Code', monospace;
  font-size: 13px;
  color: #475569;
  border: 1px solid #e2e8f0;
  max-width: 100%;
  overflow-x: auto;
}

.btn-save {
  padding: 10px 24px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-save:hover {
  background: #4f46e5;
}

/* 管理者ユーザー管理 */
.admin-users-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.admin-user-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.admin-user-info {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.admin-user-email {
  font-weight: 500;
  color: #1e293b;
}

.admin-user-badge {
  padding: 2px 8px;
  background: #6366f1;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
}

.admin-user-date {
  font-size: 12px;
  color: #94a3b8;
}

.btn-delete-admin {
  padding: 6px 12px;
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-delete-admin:hover {
  background: #fef2f2;
  border-color: #dc2626;
}

.btn-delete-admin:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.admin-users-notice {
  padding: 16px;
  background: #fffbeb;
  border: 1px solid #fcd34d;
  border-radius: 8px;
}

.admin-users-notice p {
  margin: 0 0 8px;
}

.admin-users-notice p:last-child {
  margin-bottom: 0;
}

.admin-user-form h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

/* ========================================
   レスポンシブ
======================================== */
@media (max-width: 1200px) {
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 991px) {
  .admin-sidebar {
    width: 80px;
  }

  .sidebar-header h2,
  .sidebar-header p,
  .sidebar-nav span:not(.nav-icon),
  .nav-section-title {
    display: none;
  }

  .nav-section {
    margin-bottom: 0;
  }

  .sidebar-header {
    padding: 16px;
  }

  .sidebar-nav a {
    justify-content: center;
    padding: 16px;
  }

  .admin-main {
    margin-left: 80px;
  }

  .admin-header {
    left: 80px;
  }
}

/* ========================================
   モバイルメニュー
======================================== */
.mobile-menu-btn {
  display: none;
  width: 44px;
  height: 44px;
  border: none;
  background: transparent;
  cursor: pointer;
  padding: 10px;
  border-radius: 8px;
  transition: background 0.2s;
}

.mobile-menu-btn:hover {
  background: #f1f5f9;
}

.hamburger-icon {
  display: block;
  width: 24px;
  height: 2px;
  background: #1e293b;
  position: relative;
  transition: background 0.2s;
}

.hamburger-icon::before,
.hamburger-icon::after {
  content: '';
  position: absolute;
  left: 0;
  width: 24px;
  height: 2px;
  background: #1e293b;
  transition: transform 0.3s;
}

.hamburger-icon::before {
  top: -7px;
}

.hamburger-icon::after {
  bottom: -7px;
}

/* オープン時のアニメーション */
.mobile-menu-btn.active .hamburger-icon {
  background: transparent;
}

.mobile-menu-btn.active .hamburger-icon::before {
  transform: translateY(7px) rotate(45deg);
}

.mobile-menu-btn.active .hamburger-icon::after {
  transform: translateY(-7px) rotate(-45deg);
}

/* モバイルオーバーレイ */
.mobile-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 99;
  opacity: 0;
  transition: opacity 0.3s;
}

.mobile-overlay.active {
  display: block;
  opacity: 1;
}

/* サイドバー閉じるボタン */
.sidebar-close-btn {
  display: none;
  position: absolute;
  top: 16px;
  right: 16px;
  width: 36px;
  height: 36px;
  border: none;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  font-size: 24px;
  border-radius: 50%;
  cursor: pointer;
  transition: background 0.2s;
  align-items: center;
  justify-content: center;
}

.sidebar-close-btn:hover {
  background: rgba(255, 255, 255, 0.2);
}

@media (max-width: 767px) {
  /* モバイルメニューボタン表示 */
  .mobile-menu-btn {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  /* サイドバーをスライドインに変更 */
  .admin-sidebar {
    display: flex;
    position: fixed;
    left: -280px;
    width: 280px;
    transition: left 0.3s ease;
  }

  .admin-sidebar.open {
    left: 0;
  }

  .sidebar-close-btn {
    display: flex;
  }

  .sidebar-header {
    position: relative;
    padding-right: 50px;
  }

  .admin-main {
    margin-left: 0;
    padding-top: 60px; /* モバイル時のヘッダー高さ */
  }

  .admin-header {
    padding: 12px 16px;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
    left: 0;
  }

  .admin-header h1 {
    flex: 1;
    font-size: 18px;
  }

  .header-actions {
    width: 100%;
    justify-content: space-between;
  }

  .admin-section {
    padding: 16px;
  }

  .stats-grid {
    grid-template-columns: 1fr;
  }

  .company-cards {
    grid-template-columns: 1fr;
  }

  .filter-bar {
    flex-direction: column;
  }

  .search-input {
    max-width: none;
  }

  .admin-table {
    font-size: 12px;
  }

  .admin-table th,
  .admin-table td {
    padding: 8px;
  }
}

/* ========================================
   会社管理セクション
======================================== */
.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h3 {
  margin: 0;
  font-size: 20px;
  color: #1e293b;
}

.btn-primary {
  padding: 10px 20px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-primary:hover {
  background: #4f46e5;
}

.btn-secondary {
  padding: 10px 20px;
  background: #f1f5f9;
  color: #475569;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-secondary:hover {
  background: #e2e8f0;
}

.info-box {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.info-box p {
  margin: 0 0 8px;
  font-size: 14px;
  color: #0369a1;
}

.info-box p:last-child {
  margin-bottom: 0;
}

.info-box .recruit-url {
  color: #0284c7;
  text-decoration: none;
  font-family: monospace;
  font-size: 13px;
  word-break: break-all;
}

.info-box .recruit-url:hover {
  text-decoration: underline;
}

.btn-link {
  display: inline-block;
  padding: 8px 16px;
  background: #0ea5e9;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  margin-top: 8px;
  transition: background 0.2s;
}

.btn-link:hover {
  background: #0284c7;
}

.badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  background: #f1f5f9;
  color: #64748b;
}

.badge.success {
  background: #dcfce7;
  color: #15803d;
}

.badge.warning {
  background: #fef3c7;
  color: #b45309;
}

.badge.modern {
  background: #dbeafe;
  color: #1d4ed8;
}

.badge.classic {
  background: #fef2f2;
  color: #dc2626;
}

.badge.minimal {
  background: #f3f4f6;
  color: #374151;
}

.badge.colorful {
  background: linear-gradient(135deg, #f0abfc, #c4b5fd);
  color: #6b21a8;
}

.action-buttons {
  display: flex;
  gap: 8px;
}

.btn-small {
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
}

.btn-edit {
  background: #f1f5f9;
  color: #475569;
}

.btn-edit:hover {
  background: #e2e8f0;
}

.btn-view {
  background: #dbeafe;
  color: #1d4ed8;
}

.btn-view:hover {
  background: #bfdbfe;
}

/* ========================================
   LP設定セクション
======================================== */
.lp-settings-form {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 24px;
}

.lp-settings-form .form-group {
  margin-bottom: 14px;
}

.lp-settings-form label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.lp-settings-form select,
.lp-settings-form input,
.lp-settings-form textarea {
  width: 100%;
  max-width: 500px;
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.lp-settings-form select:focus,
.lp-settings-form input:focus,
.lp-settings-form textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ========================================
   採用ページ設定フォーム
   ======================================== */
.recruit-settings-form {
  background: #f1f5f9;
  border-radius: 12px;
  padding: 24px;
}

.recruit-settings-form .form-group {
  margin-bottom: 20px;
}

.recruit-settings-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 8px;
}

.recruit-settings-form select,
.recruit-settings-form input,
.recruit-settings-form textarea {
  width: 100%;
  max-width: 500px;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.recruit-settings-form select:focus,
.recruit-settings-form input:focus,
.recruit-settings-form textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.recruit-settings-form textarea {
  min-height: 120px;
  resize: vertical;
}

.recruit-settings-form .form-hint,
.recruit-settings-form .form-description {
  margin-top: 6px;
  font-size: 13px;
  color: #6b7280;
}

.recruit-settings-form .form-actions {
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid #e5e7eb;
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.recruit-selected-company {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e5e7eb;
}

.recruit-selected-company h4 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

/* ========================================
   採用ページ設定 2カラムレイアウト + プレビュー
======================================== */
.recruit-editor-layout {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 32px;
  align-items: start;
}

.recruit-editor-form {
  min-width: 0;
}

.recruit-editor-preview {
  position: sticky;
  top: 24px;
  background: #f8fafc;
  border-radius: 16px;
  padding: 16px;
  border: 1px solid #e5e7eb;
}

.preview-panel-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.preview-panel-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.preview-device-label {
  font-size: 11px;
  color: #6b7280;
  background: #e5e7eb;
  padding: 2px 8px;
  border-radius: 4px;
}

.preview-panel-device {
  display: flex;
  justify-content: center;
}

.preview-phone-frame {
  width: 280px;
  height: 560px;
  background: #1f2937;
  border-radius: 32px;
  padding: 8px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

.preview-phone-notch {
  width: 80px;
  height: 24px;
  background: #1f2937;
  border-radius: 0 0 12px 12px;
  margin: 0 auto 4px;
  position: relative;
  z-index: 10;
}

.preview-phone-content {
  width: 100%;
  height: calc(100% - 28px);
  background: var(--preview-bg, #fff);
  border-radius: 24px;
  overflow: hidden;
  overflow-y: auto;
  /* デフォルトのCSS変数 */
  --preview-primary: #6366f1;
  --preview-accent: #8b5cf6;
  --preview-bg: #ffffff;
  --preview-text: #1f2937;
}

/* プレビュー内のスタイル */
.preview-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  min-height: 44px;
}

.preview-logo {
  max-height: 24px;
  max-width: 80px;
  object-fit: contain;
}

.preview-company-name {
  font-size: 12px;
  font-weight: 600;
  color: var(--preview-text, #1f2937);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-hero {
  height: 160px;
  background: linear-gradient(135deg, var(--preview-primary, #6366f1) 0%, var(--preview-accent, #8b5cf6) 100%);
  background-size: cover;
  background-position: center;
  position: relative;
  display: flex;
  align-items: flex-end;
}

.preview-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.2) 100%);
}

.preview-hero-content {
  position: relative;
  padding: 16px;
  color: #fff;
  z-index: 1;
}

.preview-hero-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  text-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.preview-hero-subtitle {
  margin: 0;
  font-size: 10px;
  opacity: 0.9;
  line-height: 1.4;
}

.preview-content,
.preview-sections-container {
  padding: 16px;
}

.preview-sections-container {
  display: flex;
  flex-direction: column;
}

.preview-section {
  margin-bottom: 16px;
}

.preview-reorderable {
  transition: opacity 0.2s ease;
}

.preview-section h3 {
  margin: 0 0 8px;
  font-size: 12px;
  font-weight: 600;
  color: var(--preview-text, #374151);
}

.preview-intro-text {
  margin: 0;
  font-size: 10px;
  color: var(--preview-text, #6b7280);
  opacity: 0.8;
  line-height: 1.5;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.preview-job-cards {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  padding: 4px 0;
  margin: 0 -8px;
  padding-left: 8px;
  padding-right: 8px;
}

.preview-job-cards::-webkit-scrollbar {
  display: none;
}

.preview-job-card {
  flex: 0 0 85%;
  scroll-snap-align: center;
  min-width: 140px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

.preview-job-img {
  width: 100%;
  height: 45px;
  background: linear-gradient(135deg, #e5e7eb 0%, #d1d5db 100%);
  position: relative;
}

.preview-job-img::after {
  content: "📷";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 12px;
  opacity: 0.4;
}

.preview-job-body {
  padding: 6px 8px;
}

.preview-job-title {
  font-size: 9px;
  font-weight: 600;
  color: #1f2937;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-job-info {
  font-size: 7px;
  color: #6b7280;
  margin-top: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.preview-job-more {
  font-size: 9px;
  color: var(--preview-primary, #6366f1);
  text-align: center;
  padding: 4px;
}

.preview-no-jobs {
  font-size: 9px;
  color: #9ca3af;
  text-align: center;
  padding: 12px;
}

/* プレビュー職種タブ */
.preview-job-tabs {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
  padding: 6px;
  background: #f3f4f6;
  border-radius: 8px;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: #d1d5db transparent;
}

.preview-job-tabs::-webkit-scrollbar {
  height: 4px;
}

.preview-job-tabs::-webkit-scrollbar-track {
  background: transparent;
}

.preview-job-tabs::-webkit-scrollbar-thumb {
  background: #d1d5db;
  border-radius: 2px;
}

.preview-job-tabs::-webkit-scrollbar-thumb:hover {
  background: #9ca3af;
}

.preview-job-tab {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  padding: 5px 10px;
  font-size: 9px;
  font-weight: 500;
  background: white;
  border: none;
  border-radius: 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

.preview-job-tab:hover {
  background: #e5e7eb;
}

.preview-job-tab.active {
  background: var(--preview-primary, #6366f1);
  color: white;
}

.preview-job-tab .tab-label {
  line-height: 1;
}

.preview-job-tab .tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 8px;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  line-height: 1;
}

.preview-job-tab.active .tab-count {
  background: rgba(255, 255, 255, 0.25);
}

.preview-cta {
  background: linear-gradient(135deg, var(--preview-primary, #6366f1) 0%, var(--preview-accent, #8b5cf6) 100%);
  border-radius: 12px;
  padding: 16px;
  text-align: center;
  margin-top: 16px;
}

.preview-cta h3 {
  margin: 0 0 12px;
  font-size: 11px;
  font-weight: 600;
  color: #fff;
}

.preview-cta-btn {
  background: var(--preview-bg, #fff);
  color: var(--preview-primary, #6366f1);
  border: none;
  padding: 8px 16px;
  border-radius: 6px;
  font-size: 10px;
  font-weight: 600;
  cursor: default;
}

/* カスタムセクションプレビュー */
.preview-custom-sections {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 8px;
}

.preview-custom-sections:empty {
  display: none;
}

.preview-custom-heading {
  text-align: center;
  padding: 8px 4px;
}

.preview-custom-heading h3 {
  font-size: 11px;
  font-weight: 600;
  color: var(--preview-text, #1f2937);
  margin: 0;
}

.preview-custom-text {
  padding: 6px 8px;
  background: #f9fafb;
  border-radius: 4px;
}

.preview-custom-text p {
  font-size: 9px;
  color: #6b7280;
  margin: 0;
  line-height: 1.4;
}

.preview-custom-template {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 8px;
  position: relative;
}

.preview-custom-template-header {
  margin-bottom: 4px;
}

.preview-custom-template-badge {
  display: inline-block;
  padding: 2px 6px;
  background: var(--preview-primary, #4AA7C0);
  color: #fff;
  border-radius: 8px;
  font-size: 7px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.preview-custom-template[data-type="about"] .preview-custom-template-badge { background: #6366f1; }
.preview-custom-template[data-type="business"] .preview-custom-template-badge { background: #10b981; }
.preview-custom-template[data-type="photos"] .preview-custom-template-badge { background: #f59e0b; }
.preview-custom-template[data-type="text"] .preview-custom-template-badge { background: #8b5cf6; }
.preview-custom-template[data-type="heading"] .preview-custom-template-badge { background: #ec4899; }

.preview-custom-template h4 {
  font-size: 10px;
  font-weight: 600;
  color: var(--preview-text, #1f2937);
  margin: 0 0 4px;
}

.preview-custom-template-image {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 30px;
  background: #f3f4f6;
  border-radius: 4px;
  font-size: 14px;
  margin-bottom: 4px;
}

.preview-custom-headline {
  font-size: 8px;
  color: #6b7280;
  margin: 0;
  line-height: 1.3;
}

.preview-note {
  margin: 12px 0 0;
  font-size: 11px;
  color: #9ca3af;
  text-align: center;
}

/* カラーテーマのプレビュー反映 */
.preview-phone-content[data-theme="blue"] .preview-hero,
.preview-phone-content[data-theme="blue"] .preview-cta {
  background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
}

.preview-phone-content[data-theme="green"] .preview-hero,
.preview-phone-content[data-theme="green"] .preview-cta {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.preview-phone-content[data-theme="orange"] .preview-hero,
.preview-phone-content[data-theme="orange"] .preview-cta {
  background: linear-gradient(135deg, #f97316 0%, #ea580c 100%);
}

.preview-phone-content[data-theme="red"] .preview-hero,
.preview-phone-content[data-theme="red"] .preview-cta {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.preview-phone-content[data-theme="black"] .preview-hero,
.preview-phone-content[data-theme="black"] .preview-cta {
  background: linear-gradient(135deg, #1f2937 0%, #111827 100%);
}

.preview-phone-content[data-theme="yellow"] .preview-hero,
.preview-phone-content[data-theme="yellow"] .preview-cta {
  background: linear-gradient(135deg, #eab308 0%, #ca8a04 100%);
}

.preview-phone-content[data-theme="yellow"] .preview-cta-btn {
  color: #ca8a04;
}

/* レイアウトスタイル別プレビュー */
.preview-phone-content[data-layout-style="yellow"] .preview-header {
  background: #fef3c7;
  color: #92400e;
}

.preview-phone-content[data-layout-style="yellow"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(251, 191, 36, 0.6) 0%, rgba(245, 158, 11, 0.7) 100%);
}

.preview-phone-content[data-layout-style="yellow"] .preview-cta {
  background: #fffbeb;
}

.preview-phone-content[data-layout-style="impact"] .preview-header {
  background: #1a1a1a;
  color: #fff;
}

.preview-phone-content[data-layout-style="impact"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(17, 24, 39, 0.6) 0%, rgba(0, 0, 0, 0.75) 100%);
}

.preview-phone-content[data-layout-style="impact"] .preview-hero-title {
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 1px;
}

.preview-phone-content[data-layout-style="impact"] .preview-cta {
  background: #1f2937;
  color: #fff;
}

.preview-phone-content[data-layout-style="impact"] .preview-cta h3 {
  color: #fff;
}

.preview-phone-content[data-layout-style="trust"] .preview-section h3 {
  border-bottom: 2px solid var(--preview-primary, #2563eb);
  padding-bottom: 4px;
}

.preview-phone-content[data-layout-style="bold"] .preview-hero-title {
  font-size: 16px;
  font-weight: 900;
  text-transform: uppercase;
}

.preview-phone-content[data-layout-style="elegant"] .preview-section h3 {
  font-style: italic;
  letter-spacing: 1px;
}

.preview-phone-content[data-layout-style="elegant"] .preview-content,
.preview-phone-content[data-layout-style="elegant"] .preview-sections-container {
  background: #fafaf9;
}

.preview-phone-content[data-layout-style="playful"] .preview-hero {
  border-radius: 0 0 24px 24px;
  overflow: hidden;
}

.preview-phone-content[data-layout-style="playful"] .preview-job-card {
  border-radius: 16px;
}

.preview-phone-content[data-layout-style="corporate"] .preview-header {
  background: #f1f5f9;
  border-bottom: 2px solid #3b82f6;
}

.preview-phone-content[data-layout-style="athome"] .preview-content,
.preview-phone-content[data-layout-style="athome"] .preview-sections-container {
  background: #fef7ee;
}

.preview-phone-content[data-layout-style="athome"] .preview-section h3 {
  color: #c2410c;
}

.preview-phone-content[data-layout-style="local"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(120, 53, 15, 0.5) 0%, rgba(146, 64, 14, 0.65) 100%);
}

.preview-phone-content[data-layout-style="local"] .preview-content,
.preview-phone-content[data-layout-style="local"] .preview-sections-container {
  background: #f5f5f4;
}

.preview-phone-content[data-layout-style="magazine"] .preview-hero-title {
  font-family: serif;
  font-weight: 400;
  font-style: italic;
}

/* ========================================
   新テンプレート別プレビュー（5種類）
   modern, athome, cute, trust, kenchiku
   ======================================== */

/* モダン: 洗練されたダークグレー + 青 */
.preview-phone-content[data-layout-style="modern"] .preview-header {
  background: #2d3436;
  color: #fff;
}

.preview-phone-content[data-layout-style="modern"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(45, 52, 54, 0.7) 0%, rgba(9, 132, 227, 0.6) 100%);
}

.preview-phone-content[data-layout-style="modern"] .preview-section h3 {
  color: #0984e3;
  border-left: 3px solid #0984e3;
  padding-left: 8px;
}

.preview-phone-content[data-layout-style="modern"] .preview-job-card {
  background: #fff;
  border: 1px solid #dfe6e9;
  border-left: 3px solid #0984e3;
}

.preview-phone-content[data-layout-style="modern"] .preview-job-img {
  background: linear-gradient(135deg, #dfe6e9 0%, #b2bec3 100%);
}

.preview-phone-content[data-layout-style="modern"] .preview-cta {
  background: linear-gradient(135deg, #2d3436 0%, #0984e3 100%);
  color: #fff;
}

.preview-phone-content[data-layout-style="modern"] .preview-cta h3 {
  color: #fff;
}

/* アットホーム: 温かみのあるオレンジ系 */
.preview-phone-content[data-layout-style="athome"] .preview-header {
  background: #fef9f3;
  color: #5d4037;
}

.preview-phone-content[data-layout-style="athome"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(230, 126, 34, 0.6) 0%, rgba(243, 156, 18, 0.5) 100%);
}

.preview-phone-content[data-layout-style="athome"] .preview-job-card {
  background: #fff;
  border: 1px solid #f8e0c8;
  border-radius: 12px;
}

.preview-phone-content[data-layout-style="athome"] .preview-job-img {
  background: linear-gradient(135deg, #fdebd0 0%, #f5cba7 100%);
  border-radius: 12px 12px 0 0;
}

.preview-phone-content[data-layout-style="athome"] .preview-job-title {
  color: #5d4037;
}

.preview-phone-content[data-layout-style="athome"] .preview-cta {
  background: linear-gradient(135deg, #e67e22 0%, #f39c12 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.preview-phone-content[data-layout-style="athome"] .preview-cta h3 {
  color: #fff;
}

/* キュート: ポップで可愛いパステル調 */
.preview-phone-content[data-layout-style="cute"] .preview-header {
  background: #fff5f7;
  color: #6d4c41;
}

.preview-phone-content[data-layout-style="cute"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(255, 143, 163, 0.5) 0%, rgba(250, 177, 160, 0.4) 100%);
}

.preview-phone-content[data-layout-style="cute"] .preview-content,
.preview-phone-content[data-layout-style="cute"] .preview-sections-container {
  background: #fff5f7;
}

.preview-phone-content[data-layout-style="cute"] .preview-section h3 {
  color: #ff8fa3;
}

.preview-phone-content[data-layout-style="cute"] .preview-job-card {
  background: #fff;
  border: 2px solid #ffc8d0;
  border-radius: 16px;
}

.preview-phone-content[data-layout-style="cute"] .preview-job-img {
  background: linear-gradient(135deg, #ffe4e8 0%, #ffc8d0 100%);
  border-radius: 14px 14px 0 0;
}

.preview-phone-content[data-layout-style="cute"] .preview-job-title {
  color: #d63384;
}

.preview-phone-content[data-layout-style="cute"] .preview-cta {
  background: linear-gradient(135deg, #ff8fa3 0%, #fab1a0 100%);
  color: #fff;
  border-radius: 20px 20px 0 0;
}

.preview-phone-content[data-layout-style="cute"] .preview-cta h3 {
  color: #fff;
}

/* 信頼: 誠実で堅実な印象 */
.preview-phone-content[data-layout-style="trust"] .preview-header {
  background: #1a2a3a;
  color: #fff;
}

.preview-phone-content[data-layout-style="trust"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(26, 42, 58, 0.75) 0%, rgba(0, 119, 194, 0.6) 100%);
}

.preview-phone-content[data-layout-style="trust"] .preview-content,
.preview-phone-content[data-layout-style="trust"] .preview-sections-container {
  background: #f0f8ff;
}

.preview-phone-content[data-layout-style="trust"] .preview-job-card {
  background: #fff;
  border: 1px solid #b8d4e8;
  border-left: 4px solid #0077c2;
}

.preview-phone-content[data-layout-style="trust"] .preview-job-img {
  background: linear-gradient(135deg, #cce5ff 0%, #b8d4e8 100%);
}

.preview-phone-content[data-layout-style="trust"] .preview-job-title {
  color: #1a2a3a;
}

.preview-phone-content[data-layout-style="trust"] .preview-cta {
  background: linear-gradient(135deg, #1a2a3a 0%, #0077c2 100%);
  color: #fff;
}

.preview-phone-content[data-layout-style="trust"] .preview-cta h3 {
  color: #fff;
}

/* 建築: 力強いオレンジ + ダーク */
.preview-phone-content[data-layout-style="kenchiku"] .preview-header {
  background: #1a1a1a;
  color: #fff;
  border-bottom: 3px solid #f39c12;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-hero-overlay {
  background: linear-gradient(135deg, rgba(0, 0, 0, 0.6) 0%, rgba(44, 62, 80, 0.7) 100%);
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-hero-title {
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-content,
.preview-phone-content[data-layout-style="kenchiku"] .preview-sections-container {
  background: #f2f2f2;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-section h3 {
  color: #2c3e50;
  border-left: 4px solid #f39c12;
  padding-left: 8px;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-job-card {
  background: #fff;
  border: none;
  box-shadow: 4px 4px 0 #f39c12;
  border-radius: 0;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-job-img {
  background: linear-gradient(135deg, #5d6d7e 0%, #34495e 100%);
  border-radius: 0;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-job-title {
  color: #1a1a1a;
  font-weight: 700;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-cta {
  background: #f39c12;
  color: #000;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-cta h3 {
  color: #000;
  font-weight: 900;
}

.preview-phone-content[data-layout-style="kenchiku"] .preview-cta-btn {
  background: #1a1a1a;
  color: #fff;
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .recruit-editor-layout {
    grid-template-columns: 1fr;
  }

  .recruit-editor-preview {
    position: static;
    max-width: 400px;
    margin: 0 auto 24px;
  }

  .preview-phone-frame {
    width: 240px;
    height: 480px;
  }
}

/* 設定画面 - ローディングオーバーレイ（採用ページ設定・LP設定共通） */
.recruit-loading-overlay,
.lp-loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 100;
  border-radius: 8px;
}

.recruit-loading-overlay .loading-spinner,
.lp-loading-overlay .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid rgba(99, 102, 241, 0.2);
  border-radius: 50%;
  border-top-color: #6366f1;
  animation: spin 0.8s linear infinite;
  margin-bottom: 12px;
}

.recruit-loading-overlay p,
.lp-loading-overlay p {
  color: #64748b;
  font-size: 14px;
  margin: 0;
}

.lp-preview-link {
  margin-bottom: 24px;
}

.lp-preview-actions {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.lp-preview-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s;
  border: none;
  cursor: pointer;
}

.lp-preview-actions .btn svg {
  flex-shrink: 0;
}

.lp-preview-actions .btn-secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.lp-preview-actions .btn-secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.lp-preview-actions .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.lp-preview-actions .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.form-section {
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e5e7eb;
}

.form-section:last-of-type {
  border-bottom: none;
}

.form-section h4 {
  margin: 0 0 16px;
  font-size: 16px;
  color: #1e293b;
}

/* デザインパターン選択 */
.design-pattern-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  max-width: 800px;
}

.pattern-option {
  cursor: pointer;
}

.pattern-option input {
  display: none;
}

.pattern-preview {
  height: 160px;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 12px;
  border: 3px solid transparent;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.pattern-preview:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);
}

.pattern-option input:checked + .pattern-preview {
  border-color: #6366f1;
  box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.25);
  transform: translateY(-2px);
}

.pattern-option input:checked + .pattern-preview::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
}

/* ミニLPプレビュー */
.pattern-mini-lp {
  width: 100%;
  height: 90px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 8px;
}

.mini-hero {
  height: 30px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.3);
}

.mini-section {
  height: 16px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.2);
}

.mini-cta {
  height: 14px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.4);
  width: 60%;
  margin: 0 auto;
}

.pattern-preview .pattern-name {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 2px;
}

.pattern-preview .pattern-desc {
  font-size: 10px;
  opacity: 0.8;
}

.pattern-preview.standard {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
}

.pattern-preview.modern {
  background: linear-gradient(180deg, #10b981, #059669);
  color: #fff;
}

.pattern-preview.classic {
  background: linear-gradient(135deg, #92400e, #78350f);
  color: #fff;
}

.pattern-preview.minimal {
  background: #1f2937;
  color: #fff;
}

.pattern-preview.minimal .pattern-mini-lp {
  background: rgba(255, 255, 255, 0.1);
}

.pattern-preview.colorful {
  background: linear-gradient(135deg, #ec4899, #8b5cf6, #06b6d4);
  color: #fff;
}

/* カスタムカラーセクション */
.custom-color-section {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
}

.custom-color-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
}

.custom-color-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.color-picker-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-picker-item > label {
  font-size: 12px;
  font-weight: 500;
  color: #64748b;
  margin: 0;
}

.color-input-wrapper {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 4px 8px;
}

.color-input-wrapper input[type="color"] {
  width: 32px;
  height: 32px;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  padding: 0;
  background: none;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 0;
}

.color-input-wrapper input[type="color"]::-webkit-color-swatch {
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}

.color-input-wrapper input[type="text"] {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 12px;
  font-family: monospace;
  color: #475569;
  padding: 4px;
  min-width: 0;
}

.color-input-wrapper input[type="text"]:focus {
  outline: none;
}

.btn-link {
  background: none;
  border: none;
  color: #6366f1;
  font-size: 13px;
  cursor: pointer;
  padding: 8px 0;
  margin-top: 8px;
}

.btn-link:hover {
  text-decoration: underline;
}

@media (max-width: 768px) {
  .custom-color-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ポイント入力 */
.point-inputs {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.point-input-group {
  display: grid;
  grid-template-columns: 56px 1fr 1.2fr auto;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
}

.point-input-group label {
  margin: 0;
  font-size: 12px;
  font-weight: 600;
  color: #475569;
}

.point-input-group input {
  max-width: none;
  padding: 6px 8px;
  font-size: 13px;
}

.btn-remove-point {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  transition: all 0.2s;
}

.btn-remove-point:hover {
  background: #fecaca;
}

/* ポイント画像行 */
.point-image-row {
  display: flex;
  align-items: center;
  gap: 4px;
  grid-column: 2 / -1;
}

.point-image-row .point-image {
  flex: 1;
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
}

.point-image-row .btn-point-img-upload,
.point-image-row .btn-point-img-gallery {
  padding: 4px 6px;
  font-size: 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background: #fff;
  cursor: pointer;
  white-space: nowrap;
  line-height: 1;
}

.point-image-row .btn-point-img-upload:hover,
.point-image-row .btn-point-img-gallery:hover {
  background: #f3f4f6;
}

.point-image-row .point-image-preview {
  width: 28px;
  height: 28px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #eee;
}

.btn-add-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  background: #fff;
  border: 1.5px dashed #d1d5db;
  border-radius: 8px;
  color: #6b7280;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-item:hover {
  border-color: #6366f1;
  color: #6366f1;
  background: #f5f3ff;
}

.btn-add-item:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-add-item span {
  font-size: 18px;
  font-weight: 600;
}

/* フォームアクション */
.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}

/* レイアウトスタイル選択（テンプレート） */
.layout-style-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  max-width: 800px;
}

.layout-option {
  cursor: pointer;
}

.layout-option input {
  display: none;
}

.layout-preview {
  padding: 16px;
  border-radius: 8px;
  border: 2px solid #e5e7eb;
  background: #fff;
  transition: all 0.2s ease;
  position: relative;
}

.layout-preview:hover {
  border-color: #c7d2fe;
  background: #f5f3ff;
}

.layout-option input:checked + .layout-preview {
  border-color: #6366f1;
  background: #eef2ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.layout-option input:checked + .layout-preview::after {
  content: "✓";
  position: absolute;
  top: 8px;
  right: 8px;
  width: 20px;
  height: 20px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

.layout-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 4px;
}

.layout-desc {
  display: block;
  font-size: 12px;
  color: #6b7280;
}

@media (max-width: 1024px) {
  .layout-style-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 767px) {
  .layout-style-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .design-pattern-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .pattern-preview {
    height: 140px;
  }
}

@media (max-width: 767px) {
  .design-pattern-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .pattern-preview {
    height: 130px;
  }

  .pattern-mini-lp {
    height: 70px;
  }

  .point-input-group {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .point-input-group label {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .btn-remove-point {
    width: 28px;
    height: 28px;
    font-size: 16px;
  }

  .form-actions {
    flex-direction: column;
  }

  .form-actions button {
    width: 100%;
  }
}

/* ========================================
   会社編集モーダル
======================================== */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  padding: 20px;
  overflow-y: auto;
}

.modal-content {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 640px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
  padding: 0;
}

.modal-content.modal-large {
  max-width: 700px;
}

.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: none;
  background: #4AA7C0;
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.modal-close:hover {
  opacity: 1;
}

.modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.modal-description {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.modal-body .form-group {
  margin-bottom: 16px;
}

.modal-body .form-group:last-child {
  margin-bottom: 0;
}

.modal-body .form-group label {
  display: block;
  margin-bottom: 6px;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.modal-body .form-group .required {
  color: #ef4444;
}

.modal-body .form-group input,
.modal-body .form-group select,
.modal-body .form-group textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.modal-body .form-group input:focus,
.modal-body .form-group select:focus,
.modal-body .form-group textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.modal-body .form-group input[readonly] {
  background: #f3f4f6;
  color: #6b7280;
  cursor: not-allowed;
}

.modal-body .form-hint,
.modal-body .form-description {
  font-size: 12px;
  color: #6b7280;
  margin-top: 4px;
}

.modal-body .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.modal-body .checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
}

.modal-body .checkbox-label input[type="checkbox"] {
  width: 18px;
  height: 18px;
  min-width: 18px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #6366f1;
}

.modal-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.modal-footer .btn-secondary,
.modal-footer .btn-cancel {
  padding: 10px 32px;
  background: #fff;
  color: #4AA7C0;
  border: 1px solid #4AA7C0;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-footer .btn-secondary:hover,
.modal-footer .btn-cancel:hover {
  background: #f0f9fb;
}

.modal-footer .btn-primary {
  padding: 10px 32px;
  background: #4AA7C0;
  border: none;
  border-radius: 20px;
  color: #fff;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-footer .btn-primary:hover {
  background: #3d8fa5;
}

.modal-footer .btn-danger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 24px;
  background: #fff;
  color: #dc2626;
  border: 1px solid #fca5a5;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-right: auto;
}

.modal-footer .btn-danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}

.modal-footer .btn-danger svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (max-width: 767px) {
  .modal-content.modal-large {
    max-width: 100%;
  }

  .modal-body .form-row {
    grid-template-columns: 1fr;
  }

  .modal-footer {
    flex-direction: column-reverse;
  }

  .modal-footer button {
    width: 100%;
  }
}

/* ========================================
   LP設定 2カラムレイアウト
======================================== */
.lp-editor-layout {
  display: grid;
  grid-template-columns: 1fr 400px;
  gap: 24px;
  align-items: start;
}

.lp-editor-form {
  min-width: 0;
}

.lp-preview-panel {
  position: sticky;
  top: 20px;
  height: calc(100vh - 120px);
  display: flex;
  flex-direction: column;
}

.lp-preview-panel .lp-preview-container {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-top: 0;
}

.lp-preview-panel .lp-preview-frame-wrapper {
  flex: 1;
  min-height: 0;
}

.lp-preview-panel .lp-preview-frame {
  height: 100%;
}

/* LP設定 カスタムカラーセクション */
.custom-color-section {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.custom-color-section .subsection-title {
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.color-pickers-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

.color-picker-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.color-picker-group label {
  font-size: 13px;
  font-weight: 500;
  color: #4b5563;
}

.color-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.color-input-row input[type="color"] {
  width: 40px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  background: #fff;
}

.color-input-row input[type="color"]::-webkit-color-swatch-wrapper {
  padding: 2px;
}

.color-input-row input[type="color"]::-webkit-color-swatch {
  border-radius: 3px;
  border: none;
}

.color-input-row input[type="text"] {
  flex: 1;
  height: 36px;
  padding: 0 10px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-family: 'SFMono-Regular', Menlo, Monaco, monospace;
  font-size: 13px;
  color: #374151;
  background: #fff;
}

.color-input-row input[type="text"]:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

#lp-reset-colors {
  margin-top: 8px;
}

@media (max-width: 640px) {
  .color-pickers-grid {
    grid-template-columns: 1fr;
  }
}

/* レスポンシブ対応 */
@media (max-width: 1200px) {
  .lp-editor-layout {
    grid-template-columns: 1fr;
  }

  .lp-preview-panel {
    position: static;
    height: auto;
    max-height: 600px;
  }
}

/* ========================================
   LPプレビュー
======================================== */
.lp-preview-container {
  display: flex;
  flex-direction: column;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.lp-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #1e293b;
  color: #fff;
}

.lp-preview-header h4 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.lp-preview-controls {
  display: flex;
  gap: 8px;
}

.preview-device-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 6px;
  padding: 6px 10px;
  cursor: pointer;
  font-size: 14px;
  transition: all 0.2s ease;
}

.preview-device-btn:hover {
  background: rgba(255, 255, 255, 0.1);
}

.preview-device-btn.active {
  background: #6366f1;
  border-color: #6366f1;
}

.btn-close-preview {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0 4px;
  line-height: 1;
  opacity: 0.7;
  transition: opacity 0.2s ease;
}

.btn-close-preview:hover {
  opacity: 1;
}

.lp-preview-frame-wrapper {
  position: relative;
  background: #e5e7eb;
  padding: 16px;
  display: flex;
  justify-content: center;
  min-height: 500px;
  transition: padding 0.3s ease;
}

.lp-preview-frame-wrapper[data-device="desktop"] {
  padding: 16px;
}

.lp-preview-frame-wrapper[data-device="tablet"] {
  padding: 16px 60px;
}

.lp-preview-frame-wrapper[data-device="mobile"] {
  padding: 16px 120px;
}

.lp-preview-frame {
  width: 100%;
  max-width: 100%;
  height: 600px;
  border: none;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  transition: max-width 0.3s ease;
}

.lp-preview-frame-wrapper[data-device="desktop"] .lp-preview-frame {
  max-width: 100%;
}

.lp-preview-frame-wrapper[data-device="tablet"] .lp-preview-frame {
  max-width: 768px;
}

.lp-preview-frame-wrapper[data-device="mobile"] .lp-preview-frame {
  max-width: 375px;
}

/* レスポンシブ対応 */
@media (max-width: 1024px) {
  .lp-preview-frame-wrapper[data-device="tablet"] {
    padding: 16px 30px;
  }

  .lp-preview-frame-wrapper[data-device="mobile"] {
    padding: 16px 60px;
  }
}

@media (max-width: 768px) {
  .lp-preview-frame-wrapper {
    padding: 8px !important;
  }

  .lp-preview-frame {
    max-width: 100% !important;
    height: 400px;
  }

  .lp-preview-controls {
    display: none;
  }
}

/* ========================================
   セクション並び替え（ドラッグ＆ドロップ）
======================================== */
.section-order-list {
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.section-order-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 8px;
  cursor: grab;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
  user-select: none;
  position: relative;
}

.section-order-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: #6366f1;
  border-radius: 10px 0 0 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.section-order-item:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transform: translateX(4px);
}

.section-order-item:hover::before {
  opacity: 1;
}

.section-order-item:active {
  cursor: grabbing;
}

.section-order-item.dragging {
  opacity: 0.6;
  background: #eef2ff;
  border-color: #6366f1;
  border-style: dashed;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
  z-index: 100;
}

.section-order-item.drag-over {
  transform: translateY(4px);
  border-color: #10b981;
}

.section-order-item .drag-handle {
  color: #94a3b8;
  font-size: 18px;
  cursor: grab;
  padding: 6px 4px;
  transition: color 0.2s ease;
  font-weight: bold;
  letter-spacing: 2px;
}

.section-order-item:hover .drag-handle {
  color: #6366f1;
}

.section-order-item label {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  flex: 1;
  margin: 0;
  font-weight: 500;
}

.section-order-item input[type="checkbox"] {
  width: 18px;
  height: 18px;
  cursor: pointer;
  accent-color: #6366f1;
}

.section-order-item input[type="checkbox"]:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

.section-order-item input[type="checkbox"]:not(:checked) + span {
  opacity: 0.5;
  text-decoration: line-through;
}

/* ドロップアニメーション */
@keyframes sortableDropped {
  0% {
    transform: scale(1.05);
    box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
  }
  50% {
    transform: scale(0.98);
  }
  100% {
    transform: scale(1);
    box-shadow: none;
  }
}

/* 編集モードトグル */
.edit-mode-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 6px;
  margin-right: 12px;
}

.edit-mode-toggle:hover {
  background: rgba(255, 255, 255, 0.2);
}

.edit-mode-toggle input {
  width: 14px;
  height: 14px;
  cursor: pointer;
}

/* フォームヒント改善 */
.form-section .form-hint,
.form-section .form-description {
  color: #64748b;
  font-size: 13px;
  margin-bottom: 12px;
}

/* ========================================
   ヒーロー画像プリセット
======================================== */
.hero-image-presets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 12px;
  margin-top: 8px;
}

.hero-image-preset {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.2s ease;
  aspect-ratio: 16 / 9;
}

.hero-image-preset:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
}

.hero-image-preset.selected {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.3);
}

.hero-image-preset img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.hero-image-preset .preset-name {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(0, 0, 0, 0.8));
  color: #fff;
  padding: 20px 8px 6px;
  font-size: 11px;
  font-weight: 500;
  text-align: center;
}

.hero-image-preset .preset-check {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: bold;
  opacity: 0;
  transform: scale(0.8);
  transition: all 0.2s ease;
}

.hero-image-preset.selected .preset-check {
  opacity: 1;
  transform: scale(1);
}

@media (max-width: 768px) {
  .hero-image-presets {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   会社編集専用ページ
======================================== */

/* ページ全体 */
.admin-container {
  min-height: 100vh;
  background: #f1f5f9;
}

/* 編集ページヘッダー */
.admin-container .admin-header {
  background: #fff;
  border-bottom: 1px solid #e5e7eb;
  padding: 16px 24px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 100;
}

.header-left {
  display: flex;
  align-items: center;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #6366f1;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: color 0.2s;
}

.back-link:hover {
  color: #4f46e5;
}

.back-link svg {
  transition: transform 0.2s;
}

.back-link:hover svg {
  transform: translateX(-4px);
}

.edit-mode-badge {
  background: #dcfce7;
  color: #16a34a;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 600;
}

.edit-mode-badge.edit {
  background: #fef3c7;
  color: #d97706;
}

/* メインコンテンツ */
.edit-page-main {
  max-width: 900px;
  margin: 0 auto;
  padding: 32px 24px;
}

.edit-page-header {
  margin-bottom: 32px;
}

.edit-page-header h1 {
  margin: 0 0 8px;
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
}

.page-description {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.required-note {
  color: #ef4444;
}

/* 編集フォーム */
.edit-form {
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.edit-form .form-section {
  padding: 24px 32px;
  border-bottom: 1px solid #f1f5f9;
  margin: 0;
}

.edit-form .form-section:last-of-type {
  border-bottom: none;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 20px;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.section-title svg {
  color: #6366f1;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.form-grid .form-group.full-width {
  grid-column: 1 / -1;
}

.edit-form .form-group {
  margin-bottom: 0;
}

.edit-form label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 4px;
}

.edit-form .required {
  color: #ef4444;
}

/* フォーム説明（ラベルの下、入力の上に表示） */
.form-description {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin: 0 0 8px 0;
  padding-left: 1px;
  line-height: 1.5;
}

/* フォーム通知・警告 */
.form-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 8px;
  font-size: 13px;
  line-height: 1.5;
  margin-bottom: 16px;
}

.form-notice svg {
  flex-shrink: 0;
  margin-top: 2px;
}

.form-notice.warning {
  background: #fef3c7;
  border: 1px solid #f59e0b;
  color: #92400e;
}

.form-notice.warning svg {
  color: #f59e0b;
}

.form-notice.info {
  background: #dbeafe;
  border: 1px solid #3b82f6;
  color: #1e40af;
}

.form-notice.info svg {
  color: #3b82f6;
}

.edit-form input[type="text"],
.edit-form input[type="url"],
.edit-form input[type="number"],
.edit-form select,
.edit-form textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 15px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}

.edit-form input:focus,
.edit-form select:focus,
.edit-form textarea:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.edit-form input.readonly {
  background: #f9fafb;
  color: #6b7280;
  cursor: not-allowed;
}

.form-hint {
  margin: 6px 0 0;
  font-size: 12px;
  color: #9ca3af;
}

/* チェックボックス */
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
}

.checkbox-label.large {
  padding: 16px;
  background: #f9fafb;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.checkbox-label.large:hover {
  border-color: #6366f1;
  background: #f5f3ff;
}

.checkbox-label input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  margin: 0;
  flex-shrink: 0;
  accent-color: #6366f1;
  vertical-align: middle;
}

.checkbox-text {
  font-weight: 500;
}

/* フォームアクション（編集ページ用） */
.edit-form + .form-actions,
.edit-form .form-actions {
  display: flex;
  gap: 12px;
  padding: 24px 32px;
  background: #f9fafb;
  border-top: 1px solid #e5e7eb;
  justify-content: flex-end;
}

.edit-form .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s;
  text-decoration: none;
}

.edit-form .btn-primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
}

.edit-form .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.edit-form .btn-secondary {
  background: #fff;
  color: #64748b;
  border: 1px solid #e5e7eb;
}

.edit-form .btn-secondary:hover {
  background: #f9fafb;
  color: #1e293b;
}

.edit-form .btn-danger {
  background: #fff;
  color: #dc2626;
  border: 1px solid #fecaca;
  margin-right: auto;
}

.edit-form .btn-danger:hover {
  background: #fef2f2;
  border-color: #f87171;
}

/* ロゴ入力コンテナ */
.logo-input-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.logo-input-row {
  display: flex;
  gap: 8px;
  align-items: center;
}

.logo-input-row input[type="url"] {
  flex: 1;
}

.btn-upload-logo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #6366f1;
  border-radius: 6px;
  background: white;
  color: #6366f1;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-upload-logo:hover {
  background: #6366f1;
  color: white;
}

.btn-upload-logo:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-upload-logo svg {
  flex-shrink: 0;
}

#jm-job-logo-preview {
  position: relative;
  width: 120px;
  height: 120px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  background: #f9fafb;
}

#jm-job-logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.btn-clear-logo {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  border: none;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  color: white;
  font-size: 14px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}

.btn-clear-logo:hover {
  background: rgba(220, 38, 38, 0.9);
}

.upload-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  border-radius: 6px;
  color: #0369a1;
  font-size: 14px;
}

.upload-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid #bae6fd;
  border-top-color: #0369a1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* ========================================
   リッチテキストエディタ
======================================== */

.rich-editor-container {
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rich-editor-container:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ツールバー */
.rich-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.15s;
}

.toolbar-btn:hover {
  background: #e5e7eb;
  color: #1e293b;
}

.toolbar-btn:active {
  background: #d1d5db;
}

.toolbar-btn strong {
  font-weight: 700;
}

.toolbar-btn em {
  font-style: italic;
}

.toolbar-btn u {
  text-decoration: underline;
}

.toolbar-separator {
  width: 1px;
  height: 20px;
  background: #e5e7eb;
  margin: 0 8px;
}

/* エディタ本体 */
.rich-editor {
  min-height: 150px;
  max-height: 400px;
  padding: 14px;
  font-size: 15px;
  line-height: 1.7;
  color: #1e293b;
  overflow-y: auto;
  background: #fff;
}

.rich-editor:focus {
  outline: none;
}

.rich-editor:empty:before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

.rich-editor b,
.rich-editor strong {
  font-weight: 700;
}

.rich-editor i,
.rich-editor em {
  font-style: italic;
}

.rich-editor u {
  text-decoration: underline;
}

.rich-editor ul,
.rich-editor ol {
  margin: 0.5em 0;
  padding-left: 1.5em;
}

.rich-editor li {
  margin: 0.25em 0;
}

/* 削除確認モーダル */
.modal-small {
  max-width: 420px;
}

.delete-warning {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px;
  background: #fef2f2;
  color: #dc2626;
  border-radius: 8px;
  margin-bottom: 16px;
  font-weight: 500;
}

.delete-warning svg {
  flex-shrink: 0;
}

/* ローディングスピナー（小） */
.loading-spinner-small {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid rgba(99, 102, 241, 0.3);
  border-radius: 50%;
  border-top-color: #6366f1;
  animation: spin 0.8s linear infinite;
}

/* ========================================
   求人フィード出力
======================================== */
.feed-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 16px;
}

.feed-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  gap: 16px;
}

.feed-info {
  flex: 1;
}

.feed-info strong {
  display: block;
  color: #1e293b;
  font-size: 14px;
  margin-bottom: 4px;
}

.feed-info .form-hint,
.feed-info .form-description {
  margin: 0;
  font-size: 12px;
}

.feed-item .btn-secondary {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.feed-item .btn-icon {
  font-size: 14px;
}

.feed-status {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: #eff6ff;
  border-radius: 8px;
  margin-top: 16px;
  color: #3b82f6;
  font-size: 14px;
}

@media (max-width: 767px) {
  .feed-item {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .feed-item .btn-secondary {
    width: 100%;
    justify-content: center;
  }
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* ========================================
   求人フィードエクスポートセクション（job-manage）
======================================== */
.feed-export-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.feed-export-header {
  margin-bottom: 16px;
}

.feed-export-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px;
}

.feed-export-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.btn-feed {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-feed:hover {
  background: #f8fafc;
  border-color: #6366f1;
  color: #6366f1;
}

.btn-feed:active {
  transform: scale(0.98);
}

.btn-feed .feed-icon {
  font-size: 16px;
}

.btn-feed .feed-label {
  white-space: nowrap;
}

.btn-feed:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

@media (max-width: 767px) {
  .feed-export-buttons {
    flex-direction: column;
  }

  .btn-feed {
    justify-content: center;
    width: 100%;
  }
}

/* ========================================
   ロゴアップローダー
======================================== */
.logo-uploader {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.logo-preview {
  width: 120px;
  height: 120px;
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.2s;
}

.logo-preview:hover {
  border-color: #6366f1;
  background: #f5f3ff;
}

.logo-preview.drag-over {
  border-color: #6366f1;
  background: #ede9fe;
}

.logo-preview img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.logo-preview .upload-placeholder {
  font-size: 12px;
  color: #9ca3af;
  text-align: center;
  padding: 8px;
}

.logo-preview.uploading {
  position: relative;
}

.logo-preview.uploading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(255, 255, 255, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

.logo-actions {
  display: flex;
  gap: 8px;
}

.btn-small {
  padding: 6px 12px;
  font-size: 12px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-small:hover {
  background: #e2e8f0;
}

.btn-small.btn-danger {
  background: #fef2f2;
  border-color: #fecaca;
  color: #dc2626;
}

.btn-small.btn-danger:hover {
  background: #fee2e2;
}

.btn-small.btn-primary {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.btn-small.btn-primary:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}

.btn-small.btn-secondary {
  background: #f1f5f9;
  border-color: #e2e8f0;
  color: #475569;
}

.btn-small.btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* リッチエディタ内の画像 */
.rich-editor img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
  margin: 8px 0;
  display: block;
}

.rich-editor img.uploading {
  opacity: 0.5;
  filter: blur(2px);
}

/* 画像アップロード中のオーバーレイ */
.image-upload-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.image-upload-overlay .upload-progress {
  background: #fff;
  padding: 32px 48px;
  border-radius: 16px;
  text-align: center;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.image-upload-overlay .loading-spinner {
  width: 48px;
  height: 48px;
  margin: 0 auto 16px;
}

.image-upload-overlay p {
  margin: 0;
  color: #475569;
  font-size: 14px;
}

/* レスポンシブ対応 */
@media (max-width: 768px) {
  .admin-container .admin-header {
    padding: 12px 16px;
  }

  .edit-page-main {
    padding: 24px 16px;
  }

  .edit-page-header h1 {
    font-size: 22px;
  }

  .form-grid {
    grid-template-columns: 1fr;
  }

  .edit-form .form-section {
    padding: 20px 16px;
  }

  .edit-form .form-actions {
    padding: 16px;
    flex-direction: column;
  }

  .edit-form .btn {
    justify-content: center;
    width: 100%;
  }

  .edit-form .btn-danger {
    margin-right: 0;
    order: 3;
  }

  .rich-editor-toolbar {
    flex-wrap: wrap;
    gap: 2px;
  }

  .toolbar-btn {
    width: 36px;
    height: 36px;
  }

  .logo-preview {
    width: 100px;
    height: 100px;
  }
}

/* ========================================
   レポートセクション
======================================== */

/* レポートヘッダー */
.report-header {
  margin-bottom: 24px;
}

.report-header h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

.section-description {
  margin: 0;
  font-size: 14px;
  color: #64748b;
}

/* レポートコントロール */
.report-controls {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-period-select {
  display: flex;
  align-items: center;
  gap: 8px;
}

.report-period-select label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.report-period-select select {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  min-width: 140px;
}

.report-period-select select:focus {
  outline: none;
  border-color: #6366f1;
}

.report-custom-dates {
  display: flex;
  align-items: center;
  gap: 12px;
}

.report-custom-dates .date-input {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.report-custom-dates label {
  font-size: 12px;
  color: #64748b;
}

.report-custom-dates input[type="date"] {
  padding: 8px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
}

.report-custom-dates input[type="date"]:focus {
  outline: none;
  border-color: #6366f1;
}

.date-separator {
  color: #94a3b8;
  font-size: 14px;
  margin-top: 20px;
}

/* レポートプレビュー */
.report-preview {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  margin-bottom: 24px;
  min-height: 200px;
}

.report-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.report-loading .loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid rgba(99, 102, 241, 0.2);
  border-radius: 50%;
  border-top-color: #6366f1;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

.report-loading p {
  margin: 0;
  color: #64748b;
  font-size: 14px;
}

.report-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: #94a3b8;
}

.report-empty .empty-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.report-empty p {
  margin: 0;
  font-size: 14px;
}

/* サマリーカード */
.report-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 32px;
}

.summary-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-radius: 12px;
  border: 1px solid #e2e8f0;
}

.summary-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.summary-content {
  display: flex;
  flex-direction: column;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.summary-value.positive {
  color: #16a34a;
}

.summary-value.negative {
  color: #dc2626;
}

.summary-label {
  font-size: 13px;
  color: #64748b;
  margin-top: 4px;
}

/* レポートセクション */
.report-section {
  margin-bottom: 32px;
}

.report-section:last-child {
  margin-bottom: 0;
}

.report-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
}

/* レポートテーブル */
.report-table-container {
  overflow-x: auto;
}

.report-table {
  width: 100%;
  border-collapse: collapse;
}

.report-table th,
.report-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #f1f5f9;
}

.report-table th {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.report-table td {
  font-size: 14px;
  color: #374151;
}

.report-table tbody tr:hover {
  background: #f8fafc;
}

.report-table tbody tr:last-child td {
  border-bottom: none;
}

/* レポートアクション */
.report-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.report-actions button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.report-actions .btn-icon {
  font-size: 16px;
}

/* レスポンシブ */
@media (max-width: 1200px) {
  .report-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .report-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .report-period-select {
    flex-direction: column;
    align-items: stretch;
  }

  .report-period-select select {
    width: 100%;
  }

  .report-custom-dates {
    flex-direction: column;
    gap: 8px;
  }

  .date-separator {
    display: none;
  }

  .report-summary {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: 16px;
  }

  .summary-value {
    font-size: 24px;
  }

  .report-actions {
    flex-direction: column;
  }

  .report-actions button {
    width: 100%;
    justify-content: center;
  }

  .report-table th,
  .report-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ========================================
   アクセス解析セクション
======================================== */

.analytics-header {
  margin-bottom: 24px;
}

.analytics-header h2 {
  margin: 0 0 8px;
  font-size: 20px;
  font-weight: 600;
  color: #1e293b;
}

.analytics-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 24px;
  padding: 16px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-period-select {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.analytics-period-select label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.analytics-period-select select {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  min-width: 160px;
  cursor: pointer;
}

.analytics-period-select select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 日付範囲選択 */
.analytics-date-range {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.analytics-date-range > label {
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
}

.date-range-inputs {
  display: flex;
  align-items: center;
  gap: 8px;
}

.date-range-inputs .date-input {
  padding: 10px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  min-width: 140px;
  cursor: pointer;
}

.date-range-inputs .date-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.date-separator {
  color: #64748b;
  font-size: 14px;
}

.date-range-presets {
  display: flex;
  gap: 6px;
}

.date-preset-btn {
  padding: 6px 12px;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  background: #fff;
  color: #64748b;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.2s;
}

.date-preset-btn:hover {
  border-color: #6366f1;
  color: #6366f1;
}

.date-preset-btn.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

/* メモセクション */
.memo-section {
  background: #fffbeb;
  border: 1px solid #fcd34d;
}

.memo-section .section-title {
  color: #b45309;
}

.memo-section textarea {
  background: #fff;
  border: 1px solid #fcd34d;
}

.memo-section textarea:focus {
  border-color: #f59e0b;
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.1);
}

.analytics-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.analytics-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-icon {
  font-size: 28px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #ede9fe 0%, #ddd6fe 100%);
  border-radius: 12px;
}

.analytics-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.analytics-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.analytics-label {
  font-size: 13px;
  color: #64748b;
}

.analytics-section {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-section h3 {
  margin: 0 0 16px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.analytics-table-container {
  overflow-x: auto;
}

.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.analytics-table th,
.analytics-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid #e2e8f0;
}

.analytics-table th {
  font-weight: 600;
  color: #64748b;
  background: #f8fafc;
  font-size: 13px;
}

.analytics-table td {
  color: #1e293b;
}

.analytics-table tbody tr:hover {
  background: #f8fafc;
}

.analytics-table tbody tr:last-child td {
  border-bottom: none;
}

.analytics-note {
  margin-top: 20px;
  padding: 12px 16px;
  background: #f1f5f9;
  border-radius: 8px;
}

.analytics-note p {
  margin: 0;
  font-size: 13px;
  color: #64748b;
}

/* ユーザー属性（男女比・年齢分布） */
.analytics-demographics {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-top: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.analytics-demographics h3 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.demographics-note {
  margin: 0 0 16px;
  font-size: 12px;
  color: #94a3b8;
}

.demographics-insufficient-notice {
  background: #fef3c7;
  border: 1px solid #fcd34d;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  text-align: center;
}

.demographics-insufficient-notice p {
  margin: 0;
  font-size: 14px;
  color: #92400e;
}

.demographics-insufficient-notice .notice-sub {
  margin-top: 6px;
  font-size: 12px;
  color: #a16207;
}

.demographics-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 20px;
}

.demographics-card {
  background: #f8fafc;
  border-radius: 8px;
  padding: 16px;
}

.demographics-card h4 {
  margin: 0 0 12px;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
}

/* 男女比チャート */
.gender-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.gender-bar-container {
  display: flex;
  height: 24px;
  border-radius: 12px;
  overflow: hidden;
  background: #e2e8f0;
}

.gender-bar {
  height: 100%;
  transition: width 0.5s ease;
}

.gender-bar.male {
  background: linear-gradient(135deg, #3b82f6, #60a5fa);
}

.gender-bar.female {
  background: linear-gradient(135deg, #ec4899, #f472b6);
}

.gender-labels {
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}

.gender-label {
  display: flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
}

.gender-label.male .gender-icon {
  color: #3b82f6;
}

.gender-label.female .gender-icon {
  color: #ec4899;
}

/* 年齢分布チャート */
.age-chart {
  min-height: 120px;
}

.age-bars {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 100px;
  gap: 8px;
  padding-top: 10px;
}

.age-bar-wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.age-bar {
  width: 100%;
  max-width: 40px;
  background: linear-gradient(180deg, #8b5cf6, #a78bfa);
  border-radius: 4px 4px 0 0;
  min-height: 4px;
  transition: height 0.5s ease;
}

.age-bar-label {
  font-size: 10px;
  color: #64748b;
  white-space: nowrap;
}

.age-bar-value {
  font-size: 11px;
  font-weight: 600;
  color: #475569;
}

@media (max-width: 767px) {
  .demographics-grid {
    grid-template-columns: 1fr;
  }
}

/* レスポンシブ */
@media (max-width: 1200px) {
  .analytics-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 767px) {
  .analytics-controls {
    flex-direction: column;
    align-items: stretch;
  }

  .analytics-period-select select {
    width: 100%;
  }

  .analytics-date-range {
    width: 100%;
  }

  .date-range-inputs {
    flex-direction: column;
    align-items: stretch;
  }

  .date-range-inputs .date-input {
    width: 100%;
  }

  .date-separator {
    text-align: center;
  }

  .date-range-presets {
    justify-content: center;
  }

  .analytics-summary {
    grid-template-columns: 1fr;
  }

  .analytics-card {
    padding: 16px;
  }

  .analytics-value {
    font-size: 24px;
  }

  .analytics-table th,
  .analytics-table td {
    padding: 10px 12px;
    font-size: 13px;
  }
}

/* ========================================
   企業別採用状況 - カード形式
======================================== */
.recruitment-company-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 16px;
  margin-top: 16px;
}

.recruitment-company-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.recruitment-company-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.recruitment-company-card.expanded {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.12);
}

/* カードヘッダー */
.recruitment-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s;
}

.recruitment-card-header:hover {
  background: #f8fafc;
}

.recruitment-card-title {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}

.recruitment-card-title .company-icon {
  font-size: 20px;
  flex-shrink: 0;
}

.recruitment-card-title h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.recruitment-card-toggle {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  color: #94a3b8;
  transition: transform 0.2s, color 0.2s;
  flex-shrink: 0;
}

.recruitment-card-toggle:hover {
  color: #6366f1;
}

.recruitment-card-toggle[aria-expanded="true"] .toggle-icon {
  transform: rotate(180deg);
}

.toggle-icon {
  display: inline-block;
  transition: transform 0.2s;
}

/* カード統計 */
.recruitment-card-stats {
  display: flex;
  gap: 8px;
  padding: 0 16px 16px;
  flex-wrap: wrap;
}

.recruitment-stat {
  text-align: center;
  padding: 8px 12px;
  background: #f8fafc;
  border-radius: 8px;
  min-width: 56px;
}

.recruitment-stat-value {
  display: block;
  font-size: 18px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.recruitment-stat-label {
  display: block;
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.recruitment-stat.highlight {
  background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
}

.recruitment-stat.highlight.high {
  background: linear-gradient(135deg, #dcfce7 0%, #bbf7d0 100%);
}

.recruitment-stat.highlight.high .recruitment-stat-value {
  color: #16a34a;
}

.recruitment-stat.highlight.medium {
  background: linear-gradient(135deg, #fef9c3 0%, #fef08a 100%);
}

.recruitment-stat.highlight.medium .recruitment-stat-value {
  color: #ca8a04;
}

.recruitment-stat.highlight.low {
  background: linear-gradient(135deg, #fee2e2 0%, #fecaca 100%);
}

.recruitment-stat.highlight.low .recruitment-stat-value {
  color: #dc2626;
}

/* カード詳細（アコーディオン） */
.recruitment-card-detail {
  border-top: 1px solid #f1f5f9;
  background: #fafbfc;
  padding: 16px;
}

.recruitment-detail-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.recruitment-detail-section h5 {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  margin: 0 0 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* ミニファネル */
.mini-funnel {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-funnel-stage {
  display: flex;
  align-items: center;
  gap: 8px;
}

.mini-funnel-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  border-radius: 6px;
  min-height: 32px;
  transition: width 0.3s ease;
}

.mini-funnel-name {
  font-size: 12px;
  font-weight: 500;
  color: #1e293b;
}

.mini-funnel-count {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.mini-funnel-rate {
  font-size: 11px;
  color: #64748b;
  min-width: 36px;
  text-align: right;
}

/* リードタイム（ミニ） */
.lead-time-mini-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.lead-time-mini-item {
  text-align: center;
  padding: 10px 6px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.lead-time-mini-item .mini-icon {
  display: block;
  font-size: 16px;
  margin-bottom: 4px;
}

.lead-time-mini-item .mini-value {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.lead-time-mini-item .mini-label {
  display: block;
  font-size: 10px;
  color: #64748b;
  margin-top: 2px;
}

/* 担当者別（ミニ） */
.mini-assignee-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.mini-assignee-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 12px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.mini-assignee-item .assignee-name {
  flex: 1;
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.mini-assignee-item .assignee-stat {
  font-size: 12px;
  color: #64748b;
}

/* カード形式 - レスポンシブ */
@media (max-width: 767px) {
  .recruitment-company-cards {
    grid-template-columns: 1fr;
  }

  .recruitment-card-stats {
    padding: 0 12px 12px;
  }

  .recruitment-stat {
    padding: 6px 8px;
    min-width: 48px;
  }

  .recruitment-stat-value {
    font-size: 16px;
  }

  .lead-time-mini-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   応募者管理 - 会社選択グリッド
======================================== */
.company-select-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 20px;
}

.company-select-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 20px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  text-decoration: none;
  color: inherit;
  transition: all 0.2s ease;
}

.company-select-card:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
  transform: translateY(-2px);
}

.company-select-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.company-select-info {
  flex: 1;
  min-width: 0;
}

.company-select-info h4 {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-select-info p {
  font-size: 13px;
  color: #64748b;
  margin: 0;
}

.company-select-arrow {
  font-size: 20px;
  color: #94a3b8;
  flex-shrink: 0;
}

.company-select-card:hover .company-select-arrow {
  color: #6366f1;
}

.section-description {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 8px;
}

/* ========================================
   会社ユーザー管理
======================================== */

/* 一括発行ボタンエリア */
.bulk-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* パスワード入力グループ */
.password-input-group {
  display: flex;
  gap: 8px;
}

.password-input-group input {
  flex: 1;
}

/* 発行情報表示 */
.credentials-display {
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 8px;
  padding: 16px;
  margin-top: 16px;
}

.credentials-display h4 {
  margin: 0 0 12px;
  color: #166534;
  font-size: 14px;
}

.credentials-box {
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  padding: 12px;
  margin-bottom: 12px;
}

.credentials-box p {
  margin: 0 0 8px;
  font-size: 14px;
}

.credentials-box p:last-child {
  margin-bottom: 0;
}

.credentials-box code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 13px;
  color: #1f2937;
}

.form-hint.warning,
.form-description.warning {
  color: #dc2626;
  font-weight: 500;
}

/* アクションボタン */
.action-buttons {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

/* バッジスタイル追加 */
.badge.warning {
  background: #fef3c7;
  color: #92400e;
}

.badge.info {
  background: #dbeafe;
  color: #1e40af;
}

/* テーブル内のコード表示 */
#company-users-table code {
  background: #f3f4f6;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 12px;
}

/* 編集・削除ボタン */
.btn-edit-user {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
}

.btn-edit-user:hover {
  background: #e5e7eb;
}

.btn-reset-password {
  background: #fef3c7;
  color: #92400e;
  border: 1px solid #fcd34d;
}

.btn-reset-password:hover {
  background: #fde68a;
}

.btn-issue-user {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
}

.btn-issue-user:hover {
  background: linear-gradient(135deg, #4f46e5, #7c3aed);
}

/* ========================================
   ログインタブ
======================================== */

.login-tabs {
  display: flex;
  border-bottom: 1px solid #e5e7eb;
}

.login-tab {
  flex: 1;
  padding: 12px 16px;
  background: none;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

.login-tab:hover {
  color: #374151;
  background: #f9fafb;
}

.login-tab.active {
  color: #6366f1;
}

.login-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: #6366f1;
}

/* ========================================
   セクションマネージャー（LP構成管理）
======================================== */

/* セクション管理ツールバー */
.section-manager-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.section-manager-toolbar .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.section-manager-toolbar .btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

.section-manager-toolbar .btn-primary span {
  font-size: 18px;
  font-weight: bold;
}

/* セクションリスト */
.sections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}

.section-item::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  border-radius: 10px 0 0 10px;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.section-item[data-type="hero"]::before { background: #f59e0b; }
.section-item[data-type="points"]::before { background: #10b981; }
.section-item[data-type="custom"]::before { background: #8b5cf6; }
.section-item[data-type="gallery"]::before { background: #3b82f6; }
.section-item[data-type="testimonial"]::before { background: #ec4899; }
.section-item[data-type="carousel"]::before { background: #0ea5e9; }
.section-item[data-type="video"]::before { background: #dc2626; }
.section-item[data-type="jobs"]::before { background: #6366f1; }
.section-item[data-type="details"]::before { background: #14b8a6; }
.section-item[data-type="faq"]::before { background: #f97316; }
.section-item[data-type="apply"]::before { background: #ef4444; }

.section-item:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
  transform: translateX(4px);
}

.section-item:hover::before {
  opacity: 1;
}

.section-item.dragging {
  opacity: 0.6;
  background: #eef2ff;
  border-color: #6366f1;
  border-style: dashed;
  transform: scale(1.02) rotate(1deg);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
  z-index: 100;
}

.section-item.drag-over {
  transform: translateY(4px);
  border-color: #10b981;
}

.section-item.hidden {
  opacity: 0.5;
  background: #f9fafb;
}

.section-item.hidden .section-name {
  text-decoration: line-through;
  color: #94a3b8;
}

/* ドラッグハンドル */
.section-drag-handle {
  color: #94a3b8;
  font-size: 18px;
  cursor: grab;
  padding: 6px 4px;
  transition: color 0.2s ease;
  font-weight: bold;
  letter-spacing: 2px;
}

.section-item:hover .section-drag-handle {
  color: #6366f1;
}

/* セクションアイコン */
.section-icon {
  font-size: 20px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f1f5f9;
  border-radius: 8px;
  flex-shrink: 0;
}

/* セクション情報 */
.section-info {
  flex: 1;
  min-width: 0;
}

.section-name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 2px;
}

.section-type-label {
  font-size: 12px;
  color: #64748b;
}

/* セクションアクションボタン */
.section-actions {
  display: flex;
  gap: 6px;
  flex-shrink: 0;
}

.section-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: #f1f5f9;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  font-size: 14px;
  transition: all 0.15s;
}

.section-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.section-btn.btn-visibility {
  font-size: 16px;
}

.section-btn.btn-visibility.hidden {
  color: #94a3b8;
}

.section-btn.btn-edit:hover {
  background: #dbeafe;
  color: #2563eb;
}

.section-btn.btn-duplicate:hover {
  background: #dcfce7;
  color: #16a34a;
}

.section-btn.btn-delete:hover {
  background: #fee2e2;
  color: #dc2626;
}

.section-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.section-btn:disabled:hover {
  background: #f1f5f9;
  color: #64748b;
}

/* ========================================
   カスタムセクションパネル（追加コンテンツ）
======================================== */

#lp-custom-sections-panel {
  background: linear-gradient(135deg, #fefce8 0%, #fef3c7 100%);
  border: 2px solid #fcd34d;
  border-radius: 16px;
  position: relative;
  overflow: hidden;
}

#lp-custom-sections-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #f59e0b, #eab308, #84cc16);
}

#lp-custom-sections-panel .lp-section-header {
  margin-bottom: 8px;
}

#lp-custom-sections-panel .lp-section-header h4 {
  color: #92400e;
  font-size: 18px;
}

#lp-custom-sections-panel .lp-section-number {
  background: linear-gradient(135deg, #f59e0b 0%, #eab308 100%);
  font-size: 16px;
}

#lp-custom-sections-panel .form-hint,
#lp-custom-sections-panel .form-description {
  color: #a16207;
  font-size: 13px;
  margin-bottom: 16px;
}

.custom-sections-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.custom-section-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #fff;
  border: 2px solid #fde68a;
  border-radius: 12px;
  transition: all 0.2s;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

.custom-section-item:hover {
  border-color: #f59e0b;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.2);
  transform: translateY(-2px);
}

.custom-section-item.hidden {
  opacity: 0.5;
  background: #fffbeb;
  border-style: dashed;
}

.custom-section-icon {
  font-size: 28px;
  width: 52px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border-radius: 12px;
  flex-shrink: 0;
}

.custom-section-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
}

.custom-section-type {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  background: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  padding: 3px 10px;
  border-radius: 20px;
  width: fit-content;
  letter-spacing: 0.3px;
}

.custom-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.custom-section-meta {
  font-size: 12px;
  color: #78716c;
}

.custom-section-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.custom-section-actions .section-btn {
  width: 36px;
  height: 36px;
  font-size: 16px;
  border-radius: 10px;
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.custom-section-actions .section-btn:hover {
  background: #fde68a;
  border-color: #f59e0b;
}

.custom-section-actions .btn-edit {
  background: #dbeafe;
  border-color: #93c5fd;
}

.custom-section-actions .btn-edit:hover {
  background: #bfdbfe;
  border-color: #3b82f6;
}

.custom-section-actions .btn-delete:hover {
  background: #fee2e2;
  border-color: #f87171;
}

/* LP設定のカスタムセクション追加ボタンは.btn-open-template-selectorクラスのスタイルを使用 */

/* セクションタイプ別のカラー */
.custom-section-item[data-type="video"] {
  border-color: #fca5a5;
  background: linear-gradient(135deg, #fff 0%, #fef2f2 100%);
}

.custom-section-item[data-type="video"]:hover {
  border-color: #ef4444;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
}

.custom-section-item[data-type="video"] .custom-section-icon {
  background: linear-gradient(135deg, #fecaca 0%, #fca5a5 100%);
}

.custom-section-item[data-type="video"] .custom-section-type {
  background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
}

.custom-section-item[data-type="carousel"] {
  border-color: #93c5fd;
  background: linear-gradient(135deg, #fff 0%, #eff6ff 100%);
}

.custom-section-item[data-type="carousel"]:hover {
  border-color: #3b82f6;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.2);
}

.custom-section-item[data-type="carousel"] .custom-section-icon {
  background: linear-gradient(135deg, #bfdbfe 0%, #93c5fd 100%);
}

.custom-section-item[data-type="carousel"] .custom-section-type {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
}

.custom-section-item[data-type="gallery"] {
  border-color: #86efac;
  background: linear-gradient(135deg, #fff 0%, #f0fdf4 100%);
}

.custom-section-item[data-type="gallery"]:hover {
  border-color: #22c55e;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.2);
}

.custom-section-item[data-type="gallery"] .custom-section-icon {
  background: linear-gradient(135deg, #bbf7d0 0%, #86efac 100%);
}

.custom-section-item[data-type="gallery"] .custom-section-type {
  background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
}

.custom-section-item[data-type="testimonial"] {
  border-color: #f9a8d4;
  background: linear-gradient(135deg, #fff 0%, #fdf2f8 100%);
}

.custom-section-item[data-type="testimonial"]:hover {
  border-color: #ec4899;
  box-shadow: 0 4px 12px rgba(236, 72, 153, 0.2);
}

.custom-section-item[data-type="testimonial"] .custom-section-icon {
  background: linear-gradient(135deg, #fbcfe8 0%, #f9a8d4 100%);
}

.custom-section-item[data-type="testimonial"] .custom-section-type {
  background: linear-gradient(135deg, #ec4899 0%, #db2777 100%);
}

.custom-section-item[data-type="custom"] {
  border-color: #c4b5fd;
  background: linear-gradient(135deg, #fff 0%, #f5f3ff 100%);
}

.custom-section-item[data-type="custom"]:hover {
  border-color: #8b5cf6;
  box-shadow: 0 4px 12px rgba(139, 92, 246, 0.2);
}

.custom-section-item[data-type="custom"] .custom-section-icon {
  background: linear-gradient(135deg, #ddd6fe 0%, #c4b5fd 100%);
}

.custom-section-item[data-type="custom"] .custom-section-type {
  background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
}

/* ========================================
   動画プレビューカード
======================================== */

.video-preview-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-radius: 12px;
  background: #f8fafc;
  border: 2px solid #e2e8f0;
}

.video-preview-icon {
  font-size: 32px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.video-preview-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.video-preview-type {
  font-size: 14px;
  font-weight: 700;
  color: #1e293b;
}

.video-preview-id,
.video-preview-url {
  font-size: 12px;
  color: #64748b;
  font-family: monospace;
}

.video-preview-youtube {
  background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
  border-color: #fca5a5;
}

.video-preview-youtube .video-preview-icon {
  background: #ef4444;
  color: #fff;
}

.video-preview-youtube .video-preview-type {
  color: #dc2626;
}

.video-preview-vimeo {
  background: linear-gradient(135deg, #eff6ff 0%, #dbeafe 100%);
  border-color: #93c5fd;
}

.video-preview-vimeo .video-preview-icon {
  background: #3b82f6;
  color: #fff;
}

.video-preview-vimeo .video-preview-type {
  color: #2563eb;
}

.video-preview-tiktok {
  background: linear-gradient(135deg, #fdf4ff 0%, #fae8ff 100%);
  border-color: #e879f9;
}

.video-preview-tiktok .video-preview-icon {
  background: linear-gradient(135deg, #06b6d4, #ec4899);
  color: #fff;
}

.video-preview-tiktok .video-preview-type {
  color: #a855f7;
}

.video-preview-other {
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-color: #cbd5e1;
}

.video-preview-other .video-preview-icon {
  background: #64748b;
  color: #fff;
}

.preview-empty {
  color: #94a3b8;
  font-size: 14px;
  text-align: center;
  padding: 24px;
  background: #f8fafc;
  border-radius: 8px;
  border: 2px dashed #e2e8f0;
}

/* ========================================
   セクション追加モーダル
======================================== */

.section-type-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 8px 0;
}

.section-type-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 16px;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.section-type-card:hover {
  background: #f1f5f9;
  border-color: #6366f1;
  transform: translateY(-2px);
}

.section-type-card:active {
  transform: translateY(0);
}

.section-type-card.disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.section-type-card.disabled:hover {
  transform: none;
  border-color: transparent;
  background: #f9fafb;
}

.section-type-icon {
  font-size: 32px;
  margin-bottom: 12px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.section-type-name {
  font-weight: 600;
  font-size: 14px;
  color: #1e293b;
  margin-bottom: 4px;
}

.section-type-desc {
  font-size: 12px;
  color: #64748b;
  line-height: 1.4;
}

@media (max-width: 640px) {
  .section-type-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .section-type-card {
    padding: 16px 12px;
  }

  .section-type-icon {
    font-size: 28px;
    width: 48px;
    height: 48px;
    margin-bottom: 8px;
  }
}

/* ========================================
   セクションエディターモーダル
======================================== */

.section-editor-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.editor-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.editor-group label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
}

.editor-group input,
.editor-group textarea,
.editor-group select {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.editor-group input:focus,
.editor-group textarea:focus,
.editor-group select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.editor-group textarea {
  min-height: 100px;
  resize: vertical;
}

.editor-hint {
  font-size: 12px;
  color: #9ca3af;
  margin-top: 4px;
}

/* バリエーション選択 */
.variant-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}

.variant-option {
  position: relative;
}

.variant-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.variant-option label {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 16px 12px;
  background: #f9fafb;
  border: 2px solid transparent;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.variant-option label:hover {
  background: #f1f5f9;
  border-color: #c7d2fe;
}

.variant-option input:checked + label {
  background: #eef2ff;
  border-color: #6366f1;
}

.variant-icon {
  font-size: 24px;
  margin-bottom: 8px;
}

.variant-name {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

@media (max-width: 640px) {
  .variant-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 動的アイテムリスト */
.editor-items-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.editor-item,
.editor-items-list .editor-item,
.carousel-items .editor-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px;
  padding: 16px;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px solid #e5e7eb;
}

.editor-item-header,
.editor-item > .editor-item-header {
  display: flex !important;
  flex-direction: row !important;
  align-items: center;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e5e7eb;
  margin-bottom: 4px;
  width: 100%;
}

.editor-item-header .drag-handle {
  cursor: grab;
  color: #9ca3af;
  font-size: 14px;
  user-select: none;
}

.editor-item-header .drag-handle:active {
  cursor: grabbing;
}

.editor-item-header > span:not(.drag-handle) {
  font-weight: 600;
  color: #374151;
  font-size: 14px;
}

.editor-item-header .btn-remove-item {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border: none;
  background: #fee2e2;
  border-radius: 6px;
  cursor: pointer;
  color: #dc2626;
  font-size: 14px;
  font-weight: bold;
  transition: all 0.15s;
}

.editor-item-header .btn-remove-item:hover {
  background: #fecaca;
}

.editor-item-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.editor-item-actions {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  gap: 6px;
}

.editor-item .btn-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: #fee2e2;
  border-radius: 6px;
  cursor: pointer;
  color: #dc2626;
  font-size: 14px;
  transition: all 0.15s;
}

.editor-item .btn-remove:hover {
  background: #fecaca;
}

.btn-add-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f1f5f9;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  margin-top: 8px;
}

.btn-add-item:hover {
  background: #e0e7ff;
  border-color: #6366f1;
  color: #4f46e5;
}

/* 画像アップロード */
.image-upload-box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 20px;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.image-upload-box:hover {
  background: #f1f5f9;
  border-color: #6366f1;
}

.image-upload-box.drag-over {
  background: #eef2ff;
  border-color: #6366f1;
}

.image-upload-box .upload-icon {
  font-size: 36px;
  margin-bottom: 12px;
  color: #94a3b8;
}

.image-upload-box .upload-text {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 4px;
}

.image-upload-box .upload-hint {
  font-size: 12px;
  color: #9ca3af;
}

.image-preview-container {
  position: relative;
  display: inline-block;
}

.image-preview-container img {
  max-width: 100%;
  max-height: 200px;
  border-radius: 8px;
  object-fit: cover;
}

.image-preview-container .btn-remove-image {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  cursor: pointer;
  transition: background 0.2s;
}

.image-preview-container .btn-remove-image:hover {
  background: rgba(220, 38, 38, 0.9);
}

/* モーダルアクション */
.modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid #e5e7eb;
}

.modal-actions .btn {
  padding: 10px 20px;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.modal-actions .btn-cancel {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #64748b;
}

.modal-actions .btn-cancel:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.modal-actions .btn-save {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border: none;
  color: #fff;
}

.modal-actions .btn-save:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* ギャラリーエディター */
.gallery-images-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.gallery-image-item {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: #f1f5f9;
}

.gallery-image-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.gallery-image-item .btn-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.6);
  border: none;
  border-radius: 50%;
  color: #fff;
  font-size: 12px;
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.2s;
}

.gallery-image-item:hover .btn-remove {
  opacity: 1;
}

.gallery-image-item .btn-remove:hover {
  background: rgba(220, 38, 38, 0.9);
}

.gallery-add-btn {
  aspect-ratio: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s;
  color: #94a3b8;
}

.gallery-add-btn:hover {
  background: #f1f5f9;
  border-color: #6366f1;
  color: #6366f1;
}

.gallery-add-btn .add-icon {
  font-size: 24px;
  margin-bottom: 4px;
}

.gallery-add-btn .add-text {
  font-size: 11px;
}

@media (max-width: 640px) {
  .gallery-images-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* カラム数選択 */
.columns-selector {
  display: flex;
  gap: 8px;
}

.columns-option {
  position: relative;
}

.columns-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.columns-option label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 40px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 600;
  color: #64748b;
  transition: all 0.2s;
}

.columns-option label:hover {
  border-color: #c7d2fe;
  background: #f1f5f9;
}

.columns-option input:checked + label {
  background: #eef2ff;
  border-color: #6366f1;
  color: #4f46e5;
}

/* セクションエディターレイアウトスイッチ */
.layout-switch {
  display: flex;
  gap: 8px;
  padding: 4px;
  background: #f1f5f9;
  border-radius: 8px;
}

.layout-switch-option {
  position: relative;
}

.layout-switch-option input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.layout-switch-option label {
  display: block;
  padding: 8px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  transition: all 0.2s;
}

.layout-switch-option label:hover {
  color: #1e293b;
}

.layout-switch-option input:checked + label {
  background: #fff;
  color: #1e293b;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* ========================================
   LP設定 - ステップインジケーター
======================================== */
.lp-selection-steps {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 24px;
  padding: 16px;
  background: #f8fafc;
  border-radius: 12px;
}

.lp-step {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid #e5e7eb;
  transition: all 0.2s;
}

.lp-step.active {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: transparent;
  color: #fff;
}

.lp-step.completed {
  background: #10b981;
  border-color: transparent;
  color: #fff;
}

.lp-step-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e5e7eb;
  font-size: 12px;
  font-weight: 600;
}

.lp-step.active .lp-step-number,
.lp-step.completed .lp-step-number {
  background: rgba(255, 255, 255, 0.2);
}

.lp-step-label {
  font-size: 14px;
  font-weight: 500;
}

.lp-step-arrow {
  color: #9ca3af;
  font-size: 16px;
}

/* ========================================
   LP設定 - 選択パネル
======================================== */
.lp-selection-panel {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
  border: 1px solid #e5e7eb;
}

.lp-selection-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  gap: 16px;
  flex-wrap: wrap;
}

.lp-selection-header h4 {
  margin: 0;
  font-size: 18px;
  color: #1e293b;
}

.lp-search-box {
  flex: 1;
  max-width: 300px;
}

.lp-search-box input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.lp-search-box input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.lp-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  color: #475569;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-back-btn:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.lp-loading-placeholder {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
  font-size: 14px;
}

/* ========================================
   LP設定 - 会社カードグリッド
======================================== */
.lp-company-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 16px;
}

.lp-company-card {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
}

.lp-company-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.lp-company-card.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.lp-company-icon {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 12px;
  color: #fff;
  font-size: 20px;
  font-weight: 700;
}

.lp-company-name {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-company-domain {
  font-size: 12px;
  color: #9ca3af;
}

/* ========================================
   LP設定 - 求人カードグリッド
======================================== */
.lp-job-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}

.lp-job-card {
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
}

.lp-job-card:hover {
  border-color: #6366f1;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.lp-job-card.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, rgba(99, 102, 241, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
}

.lp-job-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
  line-height: 1.4;
}

.lp-job-id {
  font-size: 12px;
  color: #9ca3af;
  margin-bottom: 12px;
}

.lp-job-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.lp-job-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s;
}

.lp-job-action-btn.primary {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border: none;
  cursor: pointer;
}

.lp-job-action-btn.primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.lp-job-action-btn.secondary {
  background: #f1f5f9;
  color: #475569;
  border: 1px solid #e2e8f0;
}

.lp-job-action-btn.secondary:hover {
  background: #e2e8f0;
  color: #1e293b;
}

.lp-no-results {
  text-align: center;
  padding: 40px;
  color: #9ca3af;
}

.lp-no-results p {
  margin: 0;
  font-size: 14px;
}

/* 求人選択（LP設定）- 旧スタイル互換 */
.job-select-wrapper {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.job-search-input {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.job-search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

#lp-job-select {
  padding: 10px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  max-width: 100%;
}

#lp-job-select:focus {
  outline: none;
  border-color: #6366f1;
}

#lp-job-select option {
  padding: 8px;
}

#lp-job-select optgroup {
  font-weight: 600;
  color: #1e293b;
  background: #f8fafc;
}

#lp-job-select optgroup option {
  font-weight: 400;
  color: #475569;
  padding-left: 16px;
}

/* ========================================
   テンプレートセレクター
======================================== */

.template-selector {
  margin-top: 1.5rem;
}

.template-category-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
}

.template-category-tab {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.875rem;
  white-space: nowrap;
  transition: all 0.2s;
}

.template-category-tab:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.template-category-tab.active {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.template-category-icon {
  font-size: 1.25rem;
}

.template-category-name {
  font-weight: 500;
}

.template-grids {
  position: relative;
}

.template-grid {
  display: none;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
}

.template-grid.active {
  display: grid;
}

.template-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  overflow: hidden;
  transition: all 0.2s;
}

.template-card:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.template-thumbnail {
  position: relative;
  height: 160px;
  overflow: hidden;
  background: #f1f5f9;
}

.template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s;
}

.template-card:hover .template-thumbnail img {
  transform: scale(1.05);
}

.template-info {
  padding: 1rem;
}

.template-name {
  margin: 0 0 0.5rem;
  font-size: 1rem;
  font-weight: 600;
  color: #1e293b;
}

.template-description {
  margin: 0;
  font-size: 0.875rem;
  color: #64748b;
  line-height: 1.5;
}

.template-apply-btn {
  display: block;
  width: calc(100% - 2rem);
  margin: 0 1rem 1rem;
  padding: 0.75rem;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.template-apply-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* テンプレートプレビューモーダル */
.template-preview-modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 2rem;
}

.template-preview-content {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.template-preview-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
  border-bottom: 1px solid #e5e7eb;
}

.template-preview-title {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 600;
}

.template-preview-close {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: #64748b;
  cursor: pointer;
  padding: 0.5rem;
  border-radius: 6px;
  transition: all 0.2s;
}

.template-preview-close:hover {
  background: #f1f5f9;
  color: #1e293b;
}

.template-preview-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.5rem;
}

.template-preview-footer {
  display: flex;
  gap: 1rem;
  justify-content: flex-end;
  padding: 1rem 1.5rem;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
}

.template-preview-btn {
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
}

.template-preview-btn-cancel {
  background: #f1f5f9;
  border: 1px solid #e5e7eb;
  color: #475569;
}

.template-preview-btn-cancel:hover {
  background: #e5e7eb;
}

.template-preview-btn-apply {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  border: none;
  color: #fff;
}

.template-preview-btn-apply:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4);
}

/* 画像アップローダーコンテナ */
#hero-image-uploader-container,
#custom-image-uploader-container,
.gallery-image-uploader-container {
  min-height: 120px;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .template-category-tabs {
    flex-wrap: nowrap;
    -webkit-overflow-scrolling: touch;
  }

  .template-grid {
    grid-template-columns: 1fr;
  }

  .template-preview-modal {
    padding: 1rem;
  }

  .template-preview-content {
    max-height: 95vh;
  }
}

/* ========================================
   LP設定フォーム - 番号付きセクション
======================================== */
.lp-form-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.lp-form-section:last-of-type {
  margin-bottom: 0;
}

.lp-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.lp-section-header h4 {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.lp-section-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  border-radius: 50%;
  flex-shrink: 0;
}

/* サブセクション - セクション内のグループ化 */
.form-subsection {
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px dashed #e5e7eb;
}

.form-subsection:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.form-subsection-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 6px;
}

.form-subsection > .form-description {
  margin-bottom: 12px;
}

/* ========================================
   折りたたみパネル（Collapsible）
======================================== */
.collapsible .collapsible-header {
  cursor: pointer;
  user-select: none;
  transition: background 0.2s;
  padding: 8px 12px;
  margin: -8px -12px 16px -12px;
  border-radius: 8px;
}

.collapsible .collapsible-header:hover {
  background: #f8fafc;
}

.collapse-icon {
  margin-left: auto;
  font-size: 12px;
  color: #64748b;
  transition: transform 0.3s ease;
}

.collapsible.collapsed .collapse-icon {
  transform: rotate(-90deg);
}

.collapsible-content {
  overflow: hidden;
  transition: max-height 0.3s ease, opacity 0.3s ease;
  max-height: 5000px;
  opacity: 1;
}

.collapsible.collapsed .collapsible-content {
  max-height: 0;
  opacity: 0;
  margin: 0;
  padding: 0;
}

/* 折りたたみ時の下線を非表示 */
.collapsible.collapsed {
  padding-bottom: 8px;
  border-bottom-color: transparent;
}

/* ヒントテキスト */
.form-hint,
.lp-form-section > .form-description {
  font-size: 12px;
  color: #64748b;
  margin: 0 0 12px 0;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  border-left: 3px solid #6366f1;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .lp-form-section {
    padding: 16px;
    border-radius: 8px;
  }

  .lp-settings-form,
  .recruit-settings-form {
    padding: 12px;
  }

  .lp-section-number {
    width: 24px;
    height: 24px;
    font-size: 12px;
  }

  .lp-section-header h4 {
    font-size: 14px;
  }
}

/* ========================================
   フォームセクション目次ナビゲーション
   ======================================== */
.form-section-toc {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  margin-bottom: 20px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.form-section-toc .toc-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  cursor: pointer;
  user-select: none;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  transition: background 0.2s;
}

.form-section-toc .toc-toggle:hover {
  background: #f8fafc;
}

.form-section-toc .toc-toggle .toc-collapse-icon {
  margin-left: auto;
  font-size: 10px;
  color: #94a3b8;
  transition: transform 0.2s;
}

.form-section-toc.toc-collapsed .toc-collapse-icon {
  transform: rotate(-90deg);
}

.form-section-toc .toc-items {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 0 8px 10px;
  transition: max-height 0.3s ease, opacity 0.2s ease;
  max-height: 500px;
  opacity: 1;
}

.form-section-toc.toc-collapsed .toc-items {
  max-height: 0;
  opacity: 0;
  padding: 0 8px;
  overflow: hidden;
}

.form-section-toc .toc-item {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 12px;
  color: #64748b;
  text-decoration: none;
  transition: all 0.15s;
  white-space: nowrap;
}

.form-section-toc .toc-item:hover {
  background: #f1f5f9;
  color: #334155;
}

.form-section-toc .toc-item.active {
  background: #ede9fe;
  color: #6366f1;
  font-weight: 500;
}

.form-section-toc .toc-item-number {
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: #f1f5f9;
  font-size: 10px;
  font-weight: 600;
  color: #64748b;
  flex-shrink: 0;
}

.form-section-toc .toc-item.active .toc-item-number {
  background: #6366f1;
  color: #fff;
}

.form-section-toc .toc-item-status {
  font-size: 10px;
  margin-left: 2px;
}

.form-section-toc .toc-item-status.status-done {
  color: #22c55e;
}

.form-section-toc .toc-item-status.status-partial {
  color: #f59e0b;
}

.form-section-toc .toc-item-status.status-empty {
  color: #cbd5e1;
}

/* ========================================
   セクション折りたたみヘッダー（拡張）
   ======================================== */
.collapsible .lp-section-header {
  cursor: pointer;
  padding: 6px 8px;
  margin: -6px -8px 12px;
  border-radius: 8px;
  transition: background 0.15s;
}

.collapsible .lp-section-header:hover {
  background: #f1f5f9;
}

.collapsible.collapsed .lp-section-header {
  margin-bottom: 0;
}

.lp-form-section.collapsible.collapsed {
  padding-bottom: 6px;
}

/* ステータスバッジ */
.section-status-badge {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
  margin-left: auto;
  flex-shrink: 0;
}

.section-status-badge.status-done {
  background: #dcfce7;
  color: #16a34a;
}

.section-status-badge.status-partial {
  background: #fef3c7;
  color: #d97706;
}

.section-status-badge.status-empty {
  background: #f1f5f9;
  color: #94a3b8;
}

/* ========================================
   スクロールトップボタン
   ======================================== */
.scroll-top-btn {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  border: none;
  cursor: pointer;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 100;
}

.scroll-top-btn:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(99, 102, 241, 0.4);
}

/* モバイル対応 */
@media (max-width: 768px) {
  .form-section-toc .toc-items {
    flex-direction: column;
  }

  .form-section-toc .toc-item {
    padding: 8px 12px;
  }

  .scroll-top-btn {
    bottom: 80px;
    right: 16px;
  }
}

/* ========================================
   LP設定 - レイアウトスタイルセレクター
   （LPエディタと同じUI）
======================================== */
.lp-admin-layout-selector {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  max-width: 900px;
}

.lp-admin-layout-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #fff;
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.lp-admin-layout-option:hover {
  border-color: #c7d2fe;
  background: #fafafa;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.lp-admin-layout-option.selected {
  border-color: #6366f1;
  background: linear-gradient(135deg, #eef2ff 0%, #e0e7ff 100%);
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.lp-admin-layout-preview {
  width: 60px;
  height: 40px;
  background: linear-gradient(135deg, #e5e7eb, #f3f4f6);
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lp-admin-layout-option.selected .lp-admin-layout-preview {
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
}

.lp-admin-layout-preview-text {
  font-size: 9px;
  color: #6b7280;
  text-align: center;
  line-height: 1.2;
  padding: 4px;
}

.lp-admin-layout-option.selected .lp-admin-layout-preview-text {
  color: #fff;
}

.lp-admin-layout-info {
  flex: 1;
  min-width: 0;
}

.lp-admin-layout-name {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 2px;
}

.lp-admin-layout-desc {
  display: block;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.lp-admin-layout-check {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 20px;
  height: 20px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: bold;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .lp-admin-layout-selector {
    grid-template-columns: 1fr;
  }

  .lp-admin-layout-option {
    padding: 10px 12px;
  }

  .lp-admin-layout-preview {
    width: 50px;
    height: 34px;
  }
}

/* ========================================
   FAQ エディター
======================================== */
.faq-editor {
  max-width: 700px;
}

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.faq-item {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  position: relative;
  transition: all 0.2s;
}

.faq-item:hover {
  border-color: #c7d2fe;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.1);
}

.faq-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}

.faq-item-number {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
}

.faq-item-actions {
  display: flex;
  gap: 4px;
}

.faq-action-btn {
  background: none;
  border: none;
  padding: 6px;
  cursor: pointer;
  border-radius: 6px;
  color: #9ca3af;
  transition: all 0.2s;
}

.faq-action-btn:hover {
  background: #f3f4f6;
  color: #6b7280;
}

.faq-action-btn.delete:hover {
  background: #fef2f2;
  color: #dc2626;
}

.faq-fields {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.faq-field {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.faq-field label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
}

.faq-field label .faq-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 11px;
  font-weight: bold;
}

.faq-field label .faq-label-icon.q {
  background: #dbeafe;
  color: #2563eb;
}

.faq-field label .faq-label-icon.a {
  background: #dcfce7;
  color: #16a34a;
}

.faq-field input,
.faq-field textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s;
}

.faq-field input:focus,
.faq-field textarea:focus {
  outline: none;
  border-color: #6366f1;
}

.faq-field textarea {
  resize: vertical;
  min-height: 60px;
}

.faq-add-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px;
  background: #f8fafc;
  border: 2px dashed #e5e7eb;
  border-radius: 10px;
  color: #6b7280;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.faq-add-btn:hover {
  border-color: #6366f1;
  background: #eef2ff;
  color: #6366f1;
}

.faq-add-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #e5e7eb;
  border-radius: 50%;
  font-size: 16px;
  font-weight: bold;
  transition: background 0.2s;
}

.faq-add-btn:hover .faq-add-icon {
  background: #6366f1;
  color: #fff;
}

/* FAQ項目が空の場合 */
.faq-list:empty + .faq-add-btn {
  border-style: solid;
  border-color: #c7d2fe;
  background: #eef2ff;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .faq-item {
    padding: 12px;
  }

  .faq-item-header {
    flex-wrap: wrap;
    gap: 8px;
  }
}

/* ======================================
   LP設定セクション - 固定フッター
   ====================================== */

/* LP設定セクションのフォームアクションを固定フッターに */
#section-lp-settings .form-actions {
  position: fixed;
  bottom: 0;
  left: 260px; /* サイドバーの幅分オフセット */
  right: 0;
  z-index: 100;
  background: #fff;
  padding: 16px 32px;
  margin-top: 0;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.1);
  border-top: 1px solid #e2e8f0;
  display: flex;
  gap: 12px;
  justify-content: flex-start;
}

/* LP設定アクティブ時のボディに余白を追加 */
body.lp-settings-active #section-lp-settings {
  padding-bottom: 80px; /* フッターの高さ分 */
}

/* モバイル対応 */
@media (max-width: 1024px) {
  #section-lp-settings .form-actions {
    left: 0; /* モバイルではサイドバーが隠れるため */
    padding: 12px 16px;
  }
}

@media (max-width: 767px) {
  #section-lp-settings .form-actions {
    flex-direction: column;
  }

  #section-lp-settings .form-actions button {
    width: 100%;
  }
}

/* ========================================
   求人カード一覧
======================================== */

/* 検索・絞り込みセクション */
.job-filter-section {
  background: #fff;
  border-radius: 12px;
  padding: 16px 20px;
  margin-bottom: 16px;
  border: 1px solid #e2e8f0;
}

.job-filter-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.job-filter-search {
  flex: 1;
  min-width: 200px;
}

.job-filter-search .filter-input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.job-filter-search .filter-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.job-filter-selects {
  display: flex;
  gap: 8px;
}

.job-filter-selects .filter-select {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
  cursor: pointer;
  min-width: 130px;
}

.job-filter-selects .filter-select:focus {
  outline: none;
  border-color: #6366f1;
}

.btn-small {
  padding: 8px 14px;
  font-size: 13px;
}

#jobs-filtered-count {
  font-size: 12px;
  color: #64748b;
  font-weight: 400;
}

@media (max-width: 767px) {
  .job-filter-row {
    flex-direction: column;
    align-items: stretch;
  }

  .job-filter-search {
    width: 100%;
  }

  .job-filter-selects {
    width: 100%;
  }

  .job-filter-selects .filter-select {
    flex: 1;
    min-width: 0;
  }
}

.job-cards-header {
  background: #fff;
  border-radius: 12px 12px 0 0;
  padding: 16px 20px;
  border: 1px solid #e2e8f0;
  border-bottom: none;
}

.job-cards-count {
  font-size: 14px;
  color: #64748b;
  margin-bottom: 12px;
}

.job-cards-count span {
  font-weight: 600;
  color: #1e293b;
}

.job-cards-header-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 100px 90px 50px 50px 80px 80px;
  gap: 12px;
  align-items: center;
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.job-cards-list {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-top: none;
  border-radius: 0 0 12px 12px;
}

.job-cards-loading {
  padding: 40px;
  text-align: center;
  color: #64748b;
}

.job-card-row {
  display: grid;
  grid-template-columns: 80px 1fr 100px 100px 100px 90px 50px 50px 80px 80px;
  gap: 12px;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}

.job-card-row:last-child {
  border-bottom: none;
}

.job-card-row:hover {
  background: #f8fafc;
}

.job-card-image {
  width: 70px;
  height: 50px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
}

.job-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-card-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #94a3b8;
  font-size: 20px;
}

.job-card-info {
  min-width: 0;
}

.job-card-title {
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.job-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
}

.job-card-tag {
  font-size: 10px;
  padding: 2px 6px;
  border-radius: 3px;
  background: #e0e7ff;
  color: #4338ca;
}

.job-card-tag.urgent {
  background: #fee2e2;
  color: #dc2626;
}

.job-card-type {
  font-size: 13px;
  color: #475569;
}

.job-card-employment-type {
  font-size: 13px;
  color: #475569;
}

.job-card-area {
  font-size: 13px;
  color: #475569;
}

.job-card-deadline {
  font-size: 13px;
  color: #475569;
}

.job-card-deadline.expired {
  color: #dc2626;
}

.job-card-deadline.soon {
  color: #ea580c;
}

.job-card-stats {
  font-size: 14px;
  font-weight: 500;
  color: #1e293b;
  text-align: center;
}

.job-card-status {
  text-align: center;
}

.job-card-status .badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
}

.job-card-status .badge.published {
  background: #dcfce7;
  color: #15803d;
}

.job-card-status .badge.draft {
  background: #f1f5f9;
  color: #64748b;
}

.job-card-status .badge.expired {
  background: #fee2e2;
  color: #dc2626;
}

.job-card-actions {
  display: flex;
  gap: 6px;
  justify-content: center;
}

.job-card-actions .btn-icon {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid #e2e8f0;
  background: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.job-card-actions .btn-icon:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.job-card-actions .btn-icon svg {
  width: 16px;
  height: 16px;
  fill: #64748b;
}

/* 求人カード - レスポンシブ */
@media (max-width: 1200px) {
  .job-cards-header-row,
  .job-card-row {
    grid-template-columns: 70px 1fr 90px 90px 80px 45px 45px 70px 70px;
    gap: 8px;
  }
}

@media (max-width: 1024px) {
  .job-cards-header-row {
    display: none;
  }

  .job-card-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px;
  }

  .job-card-image {
    width: 60px;
    height: 45px;
  }

  .job-card-info {
    flex: 1;
    min-width: 200px;
  }

  .job-card-area,
  .job-card-deadline {
    font-size: 12px;
  }

  .job-card-stats {
    font-size: 12px;
    min-width: 50px;
  }

  .job-card-status {
    min-width: 70px;
  }

  .job-card-actions {
    min-width: 70px;
  }
}

@media (max-width: 767px) {
  .job-card-row {
    display: block;
    padding: 12px;
  }

  .job-card-image {
    float: left;
    margin-right: 12px;
    margin-bottom: 8px;
  }

  .job-card-info {
    overflow: hidden;
  }

  .job-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 12px;
    clear: both;
    padding-top: 12px;
    border-top: 1px solid #f1f5f9;
  }

  .job-card-area,
  .job-card-deadline,
  .job-card-stats,
  .job-card-status,
  .job-card-actions {
    font-size: 12px;
  }
}

/* ========================================
   ロゴアップロードコンポーネント
   ======================================== */

.logo-upload-container {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.logo-preview-area {
  width: 120px;
  height: 60px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}

.logo-preview-area img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

.logo-placeholder {
  color: #94a3b8;
  font-size: 0.75rem;
  text-align: center;
}

.logo-upload-controls {
  flex: 1;
  min-width: 0;
}

.input-with-button {
  display: flex;
  gap: 8px;
}

.input-with-button input {
  flex: 1;
  min-width: 0;
}

.btn-upload-small {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-upload-small:hover {
  background: #4f46e5;
}

.btn-upload-small:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.btn-upload-small .upload-icon {
  font-size: 1rem;
}

/* アップロード中のスタイル */
.logo-preview-area.uploading {
  border-color: #6366f1;
  background: #f0f0ff;
}

.logo-preview-area .upload-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* インライン画像アップロードボタン */
.btn-upload-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-upload-inline:hover {
  background: #4f46e5;
}

.btn-upload-inline:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

.btn-upload-inline .upload-icon {
  font-size: 1rem;
}

.btn-upload-inline .upload-spinner {
  width: 14px;
  height: 14px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 1s linear infinite;
  display: inline-block;
}

/* ヒーロー画像プレビュー */
.hero-image-preview {
  margin-top: 8px;
  display: none;
}

.hero-image-preview img {
  max-width: 200px;
  max-height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.hero-image-preview.uploading {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 200px;
  height: 120px;
  background: #f8fafc;
  border: 2px dashed #6366f1;
  border-radius: 8px;
}

.hero-image-preview .upload-spinner {
  width: 24px;
  height: 24px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* レスポンシブ */
@media (max-width: 600px) {
  .logo-upload-container {
    flex-direction: column;
  }

  .logo-preview-area {
    width: 100%;
    height: 80px;
  }

  .input-with-button {
    flex-direction: column;
  }

  .btn-upload-small,
  .btn-upload-inline {
    width: 100%;
    justify-content: center;
  }
}

/* ========================================
   ヒーロー画像アップロードコンポーネント
   ======================================== */

.hero-upload-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.hero-preview-area {
  width: 100%;
  max-width: 400px;
  height: 180px;
  background: linear-gradient(135deg, #f8fafc 0%, #e2e8f0 100%);
  border: 2px dashed #e2e8f0;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}

.hero-preview-area.has-image {
  border-style: solid;
  border-color: #6366f1;
}

.hero-preview-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hero-placeholder {
  color: #94a3b8;
  font-size: 0.85rem;
  text-align: center;
}

.hero-upload-controls {
  flex: 1;
  min-width: 0;
}

.hero-preview-area.uploading {
  border-color: #6366f1;
  background: linear-gradient(135deg, #f0f0ff 0%, #e8e8ff 100%);
}

.hero-preview-area .upload-spinner {
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@media (max-width: 600px) {
  .hero-preview-area {
    max-width: 100%;
    height: 140px;
  }

  .hero-upload-container .input-with-button {
    flex-direction: column;
  }
}

/* ========================================
   採用ページ情報パネル
======================================== */

.recruit-info-panel {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
}

.recruit-info-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #e2e8f0;
}

.recruit-info-header h4 {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  color: #1f2937;
}

.recruit-info-content {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.recruit-info-row {
  display: flex;
  align-items: center;
  gap: 16px;
}

.recruit-info-label {
  min-width: 80px;
  font-size: 0.875rem;
  color: #64748b;
  font-weight: 500;
}

.recruit-info-value {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 1;
}

.status-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.8125rem;
  font-weight: 500;
}

.status-badge.status-published {
  background: #dcfce7;
  color: #166534;
}

.status-badge.status-draft {
  background: #f1f5f9;
  color: #64748b;
}

.btn-toggle-status {
  font-size: 0.8125rem;
  color: #6366f1;
}

.btn-toggle-status:hover {
  color: #4f46e5;
  text-decoration: underline;
}

.recruit-url-display {
  font-size: 0.875rem;
  color: #3b82f6;
  text-decoration: none;
  word-break: break-all;
}

.recruit-url-display:hover {
  text-decoration: underline;
}

.btn-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: #f1f5f9;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
}

.btn-icon:hover {
  background: #e2e8f0;
  color: #1f2937;
}

/* リンク・バナー取得 */
.embed-links-container {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 12px;
}

.embed-link-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.embed-link-item label {
  font-size: 0.875rem;
  font-weight: 500;
  color: #374151;
}

.embed-code-box {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 10px 12px;
}

.embed-code-box code {
  flex: 1;
  font-size: 0.75rem;
  color: #475569;
  word-break: break-all;
  font-family: 'Monaco', 'Menlo', monospace;
}

.btn-copy-embed {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 4px;
  cursor: pointer;
  color: #64748b;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-copy-embed:hover {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.qr-code-container {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.qr-code-placeholder {
  width: 120px;
  height: 120px;
  background: #f8fafc;
  border: 2px dashed #e2e8f0;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  color: #94a3b8;
  text-align: center;
}

.qr-code-placeholder img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* SNS連携 */
.sns-links-container {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}

.sns-links-container .form-group {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .recruit-info-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .recruit-info-label {
    min-width: auto;
  }

  .sns-links-container {
    grid-template-columns: 1fr;
  }
}

/* ========================================
   求人一覧セクション
======================================== */

#section-job-listings .section-header {
  margin-bottom: 8px;
}

#section-job-listings .section-description {
  color: #64748b;
  font-size: 14px;
  margin: 0 0 24px;
}

/* サマリーカード */
.job-listings-summary {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 24px;
}

.summary-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  display: flex;
  align-items: center;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: transform 0.2s, box-shadow 0.2s;
}

.summary-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.summary-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.summary-card:nth-child(2) .summary-icon {
  background: linear-gradient(135deg, #10b981 0%, #34d399 100%);
}

.summary-card:nth-child(3) .summary-icon {
  background: linear-gradient(135deg, #f59e0b 0%, #fbbf24 100%);
}

.summary-card:nth-child(4) .summary-icon {
  background: linear-gradient(135deg, #3b82f6 0%, #60a5fa 100%);
}

.summary-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.summary-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  line-height: 1.2;
}

.summary-label {
  font-size: 13px;
  color: #64748b;
}

/* ツールバー */
.job-listings-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 16px;
  margin-bottom: 16px;
  padding: 20px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  flex-wrap: wrap;
}

.job-listings-filters {
  display: flex;
  gap: 16px;
  align-items: flex-end;
  flex-wrap: wrap;
  flex: 1;
}

.job-listings-filters .filter-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 160px;
}

.job-listings-filters .filter-group.filter-search {
  flex: 1;
  min-width: 250px;
}

.job-listings-filters .filter-group label,
.job-listings-sort label {
  font-size: 12px;
  color: #64748b;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 4px;
}

.job-listings-filters .filter-group label svg,
.job-listings-sort label svg {
  opacity: 0.7;
}

.job-listings-filters .filter-group select,
.job-listings-filters .filter-group input,
.job-listings-sort select {
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #f8fafc;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}

.job-listings-filters .filter-group select:hover,
.job-listings-filters .filter-group input:hover,
.job-listings-sort select:hover {
  background: #fff;
  border-color: #cbd5e1;
}

.job-listings-filters .filter-group select:focus,
.job-listings-filters .filter-group input:focus,
.job-listings-sort select:focus {
  outline: none;
  background: #fff;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.job-listings-sort {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* 求人カウント */
.job-listings-count {
  margin-bottom: 16px;
  font-size: 14px;
  color: #64748b;
  padding: 12px 16px;
  background: #fff;
  border-radius: 8px;
  display: inline-block;
}

.job-listings-count span {
  font-weight: 700;
  color: #6366f1;
  font-size: 16px;
}

/* ローディング */
.job-listings-container .loading-placeholder {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 12px;
}

.job-listings-container .loading-placeholder .loading-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin: 0 auto 16px;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.job-listings-container .loading-placeholder p {
  margin: 0;
  color: #64748b;
}

/* 求人一覧コンテナ */
.job-listings-container {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 会社グループ */
.job-listings-company-group {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  overflow: hidden;
}

.job-listings-company-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
  border-bottom: 1px solid #e2e8f0;
}

.company-logo-small {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  flex-shrink: 0;
}

.company-logo-small img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.company-logo-small .logo-fallback {
  font-size: 20px;
}

.company-info {
  flex: 1;
  min-width: 0;
}

.company-info .company-name {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
}

.company-info .company-job-count {
  font-size: 13px;
  color: #64748b;
}

.btn-view-company {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #e2e8f0;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-view-company:hover {
  background: #6366f1;
  color: #fff;
}

/* 求人カード一覧 */
.job-listings-cards {
  display: flex;
  flex-direction: column;
}

/* 求人カード */
.job-listing-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  border-bottom: 1px solid #f1f5f9;
  cursor: pointer;
  transition: background 0.2s;
}

.job-listing-card:last-child {
  border-bottom: none;
}

.job-listing-card:hover {
  background: #f8fafc;
}

.job-card-image {
  width: 80px;
  height: 60px;
  border-radius: 6px;
  overflow: hidden;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.job-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.job-card-image.no-image {
  background: #e2e8f0;
}

.job-card-image .no-image-icon {
  font-size: 24px;
  opacity: 0.5;
}

.job-card-content {
  flex: 1;
  min-width: 0;
}

.job-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}

.job-card-title {
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.job-card-status {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 4px;
  font-weight: 500;
  flex-shrink: 0;
}

.job-card-status.status-active {
  background: #dcfce7;
  color: #16a34a;
}

.job-card-status.status-draft {
  background: #fef3c7;
  color: #d97706;
}

.job-card-status.status-expired {
  background: #fee2e2;
  color: #dc2626;
}

.job-card-meta {
  display: flex;
  gap: 16px;
  margin-bottom: 4px;
}

.job-meta-item {
  font-size: 13px;
  color: #64748b;
  display: flex;
  align-items: center;
  gap: 4px;
}

.job-meta-item .meta-icon {
  font-size: 12px;
}

.job-card-stats {
  display: flex;
  gap: 12px;
}

.job-card-stats .stat-item {
  font-size: 12px;
  color: #94a3b8;
}

/* 求人カードメモ行 */
.job-card-memo {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 8px;
  padding: 6px 10px;
  background: #f8fafc;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s;
  min-height: 32px;
}

.job-card-memo:hover {
  background: #e2e8f0;
}

.job-card-memo.editing {
  background: #fff;
  box-shadow: 0 0 0 2px #6366f1;
}

.memo-edit-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: #94a3b8;
  flex-shrink: 0;
}

.job-card-memo:hover .memo-edit-icon {
  color: #6366f1;
}

.memo-text {
  flex: 1;
  font-size: 13px;
  color: #475569;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.4;
}

.memo-text.memo-placeholder {
  color: #94a3b8;
  font-style: italic;
}

.memo-edit-input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 13px;
  color: #1e293b;
  outline: none;
  padding: 0;
  line-height: 1.4;
}

.memo-edit-input::placeholder {
  color: #94a3b8;
  font-style: italic;
}

.job-card-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}

.btn-job-action {
  width: 36px;
  height: 36px;
  border: none;
  border-radius: 8px;
  background: #f1f5f9;
  color: #64748b;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-job-action:hover {
  background: #e2e8f0;
  color: #334155;
}

.btn-job-action.btn-edit-job:hover {
  background: #6366f1;
  color: #fff;
}

.btn-job-action.btn-preview-job:hover {
  background: #10b981;
  color: #fff;
}

/* アクションボタンのカスタムツールチップ（JS制御） */
.action-tooltip {
  position: fixed;
  padding: 6px 12px;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 500;
  white-space: nowrap;
  border-radius: 6px;
  pointer-events: none;
  z-index: 10000;
  animation: tooltipFadeIn 0.15s ease-out;
}

@keyframes tooltipFadeIn {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* エラー・空状態 */
.job-listings-container .no-data,
.job-listings-container .error-message {
  text-align: center;
  padding: 60px 20px;
  background: #fff;
  border-radius: 12px;
  color: #64748b;
}

.job-listings-container .error-message {
  color: #dc2626;
}

/* レスポンシブ */
@media (max-width: 1024px) {
  .job-listings-summary {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .job-listings-summary {
    grid-template-columns: 1fr;
  }

  .summary-card {
    padding: 16px;
  }

  .summary-icon {
    width: 40px;
    height: 40px;
    font-size: 20px;
  }

  .summary-value {
    font-size: 24px;
  }

  .job-listings-toolbar {
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
  }

  .job-listings-filters {
    flex-direction: column;
  }

  .job-listings-filters .filter-group {
    width: 100%;
    min-width: auto;
  }

  .job-listings-filters .filter-group.filter-search {
    min-width: auto;
  }

  .job-listings-sort {
    width: 100%;
  }

  .job-listings-sort select {
    width: 100%;
  }

  .job-listing-card {
    flex-wrap: wrap;
    gap: 12px;
  }

  .job-card-image {
    width: 60px;
    height: 45px;
  }

  .job-card-content {
    width: calc(100% - 80px);
  }

  .job-card-actions {
    width: 100%;
    justify-content: flex-end;
    padding-top: 8px;
    border-top: 1px solid #f1f5f9;
  }
}

/* ===================================
   Job-Manage Embedded Section
   =================================== */

/* ヘッダー */
.job-manage-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e9ecef 100%);
  border-bottom: 1px solid #e5e7eb;
}

.job-manage-header .btn-back {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  color: #374151;
  transition: all 0.2s;
}

.job-manage-header .btn-back:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

.job-manage-company-info {
  flex: 1;
}

.job-manage-company-info h2 {
  margin: 0;
  font-size: 20px;
  font-weight: 600;
  color: #111827;
}

.job-manage-company-info .company-domain {
  font-size: 12px;
  color: #6b7280;
}

.job-manage-header-actions {
  display: flex;
  gap: 8px;
}

/* タブナビゲーション */
.job-manage-tabs {
  display: flex;
  gap: 4px;
  padding: 12px 24px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.jm-tab {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  white-space: nowrap;
  transition: all 0.2s;
}

.jm-tab:hover {
  background: #f3f4f6;
  color: #374151;
}

.jm-tab.active {
  background: var(--primary-color, #6366f1);
  color: white;
}

.jm-tab .tab-icon {
  font-size: 14px;
}

/* コンテンツエリア */
.job-manage-content {
  padding: 0;
}

.jm-subsection {
  display: none;
  padding: 24px;
}

.jm-subsection.active {
  display: block;
}

/* 応募者管理サブセクション */
#jm-applicants .applicants-content {
  display: flex;
  gap: 20px;
  min-height: 500px;
}

#jm-applicants .applicants-list-panel {
  flex: 0 0 55%;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#jm-applicants .applicants-detail-panel {
  flex: 1;
  background: #f8f9fa;
  border-radius: 8px;
  padding: 20px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .job-manage-header {
    flex-wrap: wrap;
    gap: 12px;
  }

  .job-manage-header-actions {
    width: 100%;
    justify-content: flex-end;
  }

  .job-manage-tabs {
    padding: 8px 16px;
  }

  .jm-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .jm-subsection {
    padding: 16px;
  }

  #jm-applicants .applicants-content {
    flex-direction: column;
  }

  #jm-applicants .applicants-list-panel {
    flex: none;
  }
}

/* =====================================
   Company-Edit Embedded - 戻るボタン強調
   ===================================== */
#section-company-edit .btn-back-prominent,
.jm-header .btn-back-prominent {
  background: #3b82f6 !important;
  color: #fff !important;
  border: 2px solid #3b82f6 !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  box-shadow: 0 2px 8px rgba(59, 130, 246, 0.35) !important;
  transition: all 0.2s ease !important;
}

#section-company-edit .btn-back-prominent:hover,
.jm-header .btn-back-prominent:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  color: #fff !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.45) !important;
  transform: translateY(-1px);
}

#section-company-edit .btn-back-prominent svg,
.jm-header .btn-back-prominent svg {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
}

.btn-back-text {
  white-space: nowrap;
}

@media (max-width: 480px) {
  #section-company-edit .btn-back-prominent,
  .jm-header .btn-back-prominent {
    padding: 8px 14px !important;
    font-size: 13px !important;
  }

  .btn-back-text {
    display: none;
  }

  #section-company-edit .btn-back-prominent::after,
  .jm-header .btn-back-prominent::after {
    content: "戻る";
  }
}

/* ========================================
   求人編集セクション（job-manage.html用）
======================================== */
#section-job-edit {
  padding: 0;
}

.job-edit-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 24px;
  background: #f8f9fa;
  border-bottom: 1px solid #e5e7eb;
}

.job-edit-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.job-edit-info h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1f2937;
}

.edit-mode-badge {
  padding: 4px 10px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 4px;
  background: #e0f2fe;
  color: #0369a1;
}

.edit-mode-badge.edit {
  background: #fef3c7;
  color: #b45309;
}

.edit-form-section {
  padding: 24px;
  max-width: 900px;
}

.form-section-card {
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  padding: 20px 24px;
  margin-bottom: 20px;
}

.form-section-title {
  margin: 0 0 16px;
  font-size: 15px;
  font-weight: 600;
  color: #374151;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

.form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 16px;
}

.form-actions-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  background: #fff;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  margin-top: 8px;
}

.form-actions-right {
  display: flex;
  gap: 12px;
}

/* 戻るボタン */
#section-job-edit .btn-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s;
}

#section-job-edit .btn-back:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

#section-job-edit .btn-back svg {
  width: 18px;
  height: 18px;
}

/* レスポンシブ */
@media (max-width: 768px) {
  .job-edit-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 16px;
  }

  .edit-form-section {
    padding: 16px;
  }

  .form-section-card {
    padding: 16px;
  }

  .form-row-2,
  .form-row-3 {
    grid-template-columns: 1fr;
  }

  .form-actions-bar {
    flex-direction: column;
    gap: 12px;
  }

  .form-actions-bar .btn-danger {
    width: 100%;
    order: 2;
  }

  .form-actions-right {
    width: 100%;
    flex-direction: column;
  }

  .form-actions-right button {
    width: 100%;
  }
}

/* ========================================
   採用ページ設定 - セクション管理リスト
   ======================================== */

.recruit-sections-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recruit-section-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  cursor: grab;
  transition: all 0.2s ease;
  user-select: none;
}

.recruit-section-item:hover {
  border-color: #6366f1;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

.recruit-section-item.dragging {
  opacity: 0.6;
  background: #eef2ff;
  border-color: #6366f1;
  border-style: dashed;
  transform: scale(1.02);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.3);
  z-index: 100;
}

.recruit-section-item.drag-over {
  transform: translateY(4px);
  border-color: #10b981;
}

.recruit-section-item .section-drag-handle {
  color: #94a3b8;
  font-size: 14px;
  cursor: grab;
  padding: 4px 2px;
  transition: color 0.2s ease;
  font-weight: bold;
  letter-spacing: 1px;
}

.recruit-section-item:hover .section-drag-handle {
  color: #6366f1;
}

.recruit-section-item .section-icon {
  font-size: 1.25rem;
}

.recruit-section-item .section-name {
  flex: 1;
  font-size: 0.9rem;
  font-weight: 500;
  color: #374151;
}

.recruit-section-item .section-visibility-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-size: 0.8rem;
  color: #6b7280;
}

.recruit-section-item .section-visibility-toggle input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: #6366f1;
  cursor: pointer;
}

.recruit-section-item .toggle-label {
  font-size: 0.8rem;
  color: #6b7280;
}

.recruit-section-item .section-required-badge {
  font-size: 0.7rem;
  font-weight: 600;
  color: #6366f1;
  background: rgba(99, 102, 241, 0.1);
  padding: 4px 8px;
  border-radius: 4px;
}

.section-count-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: 6px;
  background: #4AA7C0;
  color: #fff;
  border-radius: 9px;
  font-size: 10px;
  font-weight: 600;
}

.recruit-section-item.dynamic-section {
  background: #f0fdfa;
  border-color: #99f6e4;
}

.recruit-section-item.dynamic-section:hover {
  background: #ccfbf1;
}

/* ========================================
   求人編集 - 複数入力リスト（勤務時間など）
   ======================================== */

.multi-input-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.multi-input-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.multi-input-item input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.multi-input-item input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.btn-remove-item {
  width: 32px;
  height: 32px;
  border: none;
  background: #fee2e2;
  color: #dc2626;
  border-radius: 6px;
  cursor: pointer;
  font-size: 16px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}

.btn-remove-item:hover {
  background: #fecaca;
  transform: scale(1.05);
}

.btn-add-item {
  padding: 10px 16px;
  background: #f1f5f9;
  color: #475569;
  border: 1px dashed #cbd5e1;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  transition: background 0.2s, border-color 0.2s;
}

.btn-add-item:hover {
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* ========================================
   求人編集 - 給与タイプ（固定/最低/範囲）
   ======================================== */

.salary-range-type-group {
  display: flex;
  gap: 12px;
  margin-top: 4px;
}

.salary-range-type-group .radio-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.salary-range-type-group .radio-label:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.salary-range-type-group .radio-label:has(input:checked) {
  background: #eef2ff;
  border-color: #6366f1;
}

.salary-range-type-group .radio-label input[type="radio"] {
  accent-color: #6366f1;
  cursor: pointer;
}

.salary-range-type-group .radio-label span {
  font-size: 14px;
  color: #475569;
}

.salary-range-type-group .radio-label:has(input:checked) span {
  color: #4f46e5;
  font-weight: 500;
}

.salary-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.salary-input-row .salary-type-label {
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  white-space: nowrap;
  min-width: 36px;
}

.salary-input-row input[type="number"] {
  width: 140px;
  flex-shrink: 0;
}

.salary-input-row .salary-separator {
  font-size: 16px;
  color: #475569;
}

.salary-input-row .salary-unit {
  font-size: 14px;
  color: #475569;
  white-space: nowrap;
}

#jm-salary-preview {
  margin-top: 6px;
  font-size: 13px;
  color: #6366f1;
  font-weight: 500;
}

/* ========================================
   求人編集 - 特徴チェックボックスグリッド
   ======================================== */

.features-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 8px;
}

.features-checkbox-grid .feature-checkbox {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 12px 16px !important;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
  min-height: 44px;
}

.features-checkbox-grid .feature-checkbox:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.features-checkbox-grid .feature-checkbox input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  accent-color: #6366f1;
  cursor: pointer;
  flex-shrink: 0;
}

.features-checkbox-grid .feature-checkbox input[type="checkbox"]:checked + span {
  color: #4f46e5;
  font-weight: 500;
}

.features-checkbox-grid .feature-checkbox span {
  font-size: 13px;
  color: #475569;
  line-height: 1;
}

/* チェック時の強調表示 */
.feature-checkbox:has(input[type="checkbox"]:checked) {
  background: #eef2ff;
  border-color: #6366f1;
  box-shadow: 0 0 0 1px rgba(99, 102, 241, 0.2);
}

/* ========================================
   求人編集 - 表示する特徴
   ======================================== */

.displayed-features-group {
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px dashed #e2e8f0;
}

.displayed-features-group label {
  display: flex;
  align-items: center;
  gap: 8px;
}

.displayed-features-group .form-hint {
  font-size: 12px;
  font-weight: 500;
  color: #f59e0b;
  background: #fffbeb;
  padding: 2px 8px;
  border-radius: 4px;
}

.displayed-features-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 12px;
  min-height: 48px;
  padding: 12px;
  background: #fafafa;
  border: 2px dashed #e2e8f0;
  border-radius: 10px;
}

.displayed-features-empty {
  color: #94a3b8;
  font-size: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 8px;
}

.displayed-feature-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: white;
  border: 2px solid #e2e8f0;
  border-radius: 24px;
  cursor: pointer;
  transition: all 0.2s ease;
  user-select: none;
}

.displayed-feature-item:hover {
  border-color: #cbd5e1;
  background: #f8fafc;
}

.displayed-feature-item.selected {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  border-color: #6366f1;
  color: white;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.3);
}

.displayed-feature-item input[type="checkbox"] {
  display: none;
}

.displayed-feature-label {
  font-size: 13px;
  font-weight: 500;
}

.displayed-feature-item.selected .displayed-feature-label {
  color: white;
}

.displayed-feature-badge {
  font-size: 10px;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  min-width: 36px;
  text-align: center;
}

.displayed-feature-item:not(.selected) .displayed-feature-badge {
  display: none;
}

/* ========================================
   求人編集 - 給与形態選択
   ======================================== */

#salary-other-group {
  margin-top: 12px;
}

#salary-other-group.visible {
  display: block !important;
}

/* 給与入力欄のレイアウト調整 */
.salary-input-group {
  display: flex;
  align-items: center;
  gap: 12px;
}

.salary-input-group .input-with-unit {
  flex: 1;
}

@media (max-width: 768px) {
  .features-checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .multi-input-item {
    flex-wrap: nowrap;
  }

  .multi-input-item input {
    min-width: 0;
  }
}

/* ========================================
   ページアナリティクスタブ
======================================== */

/* フィルターエリア（タブ選択で影響を受ける範囲） */
.page-analytics-filter-area {
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 24px;
  background: #fafbfc;
  transition: border-color 0.2s;
}

.page-analytics-filter-area:has(.page-type-btn[data-type="lp"].active) {
  border-color: #6366f1;
}

.page-analytics-filter-area:has(.page-type-btn[data-type="recruit"].active) {
  border-color: #22c55e;
}

.filter-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.filter-label {
  font-size: 13px;
  font-weight: 600;
  color: #64748b;
}

.page-type-toggle {
  display: flex;
  gap: 8px;
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid #e2e8f0;
}

.page-type-btn {
  padding: 8px 16px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  transition: all 0.2s;
}

.page-type-btn:hover {
  color: #1e293b;
  background: #f8fafc;
}

.page-type-btn.active {
  background: #6366f1;
  color: #fff;
  box-shadow: 0 2px 4px rgba(99, 102, 241, 0.3);
}

.page-type-btn[data-type="lp"].active {
  background: #6366f1;
}

.page-type-btn[data-type="recruit"].active {
  background: #22c55e;
}

/* ページタイプ統計カード */
.page-type-stats {
  padding: 16px;
}

.pts-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.pts-row:last-child {
  border-bottom: none;
}

.pts-label {
  color: #64748b;
  font-size: 13px;
}

.pts-value {
  font-weight: 600;
  color: #1e293b;
}

/* LP/採用ページ比較セクション */
.page-comparison-section {
  margin: 24px 0;
}

.page-comparison-section .section-title {
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #e2e8f0;
}

.comparison-card {
  border-top: 3px solid #e2e8f0;
}

.comparison-card.lp-card {
  border-top-color: #6366f1;
}

.comparison-card.lp-card h4 {
  color: #6366f1;
}

.comparison-card.recruit-card {
  border-top-color: #22c55e;
}

.comparison-card.recruit-card h4 {
  color: #22c55e;
}

/* 流入元・デバイスチャート */
.referrer-bar-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 10px;
}

.referrer-label {
  width: 100px;
  font-size: 12px;
  color: #64748b;
  white-space: nowrap;
}

.referrer-bar-container {
  flex: 1;
  height: 20px;
  background: #f1f5f9;
  border-radius: 4px;
  overflow: hidden;
}

.referrer-bar {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  min-width: 2px;
}

.referrer-value {
  width: 100px;
  font-size: 12px;
  color: #1e293b;
  text-align: right;
}

.device-pie-chart {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.device-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.device-color {
  width: 12px;
  height: 12px;
  border-radius: 3px;
}

.device-label {
  flex: 1;
  font-size: 13px;
  color: #64748b;
}

.device-value {
  font-size: 13px;
  font-weight: 500;
  color: #1e293b;
}

.no-data {
  text-align: center;
  padding: 32px;
  color: #94a3b8;
  font-size: 14px;
}

/* ========================================
   flatpickr カスタムスタイル
======================================== */
.flatpickr-calendar {
  font-family: 'Noto Sans JP', sans-serif;
  border-radius: 8px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  border: 1px solid #e2e8f0;
}

.flatpickr-months {
  background: #6366f1;
  border-radius: 8px 8px 0 0;
  padding: 8px 0;
}

.flatpickr-months .flatpickr-month {
  color: #fff;
  fill: #fff;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: #fff;
  fill: #fff;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: #e0e7ff;
}

.flatpickr-current-month {
  font-weight: 600;
  font-size: 15px;
}

.flatpickr-current-month .numInputWrapper {
  width: 6ch;
}

.flatpickr-current-month input.cur-year {
  color: #fff;
  font-weight: 600;
}

.flatpickr-weekdays {
  background: #f8fafc;
}

.flatpickr-weekday {
  color: #64748b;
  font-weight: 500;
  font-size: 12px;
}

.flatpickr-day {
  color: #334155;
  border-radius: 6px;
  transition: all 0.15s;
}

.flatpickr-day:hover {
  background: #e0e7ff;
  border-color: #e0e7ff;
}

.flatpickr-day.today {
  border-color: #6366f1;
  color: #6366f1;
  font-weight: 600;
}

.flatpickr-day.today:hover {
  background: #6366f1;
  color: #fff;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: #6366f1;
  border-color: #6366f1;
  color: #fff;
}

.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover {
  background: #4f46e5;
  border-color: #4f46e5;
}

.flatpickr-day.inRange {
  background: #e0e7ff;
  border-color: #e0e7ff;
  box-shadow: -5px 0 0 #e0e7ff, 5px 0 0 #e0e7ff;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: #cbd5e1;
}

/* ヘッダー日付ピッカー レスポンシブ */
@media (max-width: 767px) {
  .date-range-picker {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }

  .date-range-picker .date-input {
    width: 100px;
    font-size: 12px;
    padding: 6px 10px;
  }

  .date-range-picker .date-range-presets {
    flex-wrap: wrap;
  }

  .date-range-picker .date-preset-btn {
    padding: 4px 8px;
    font-size: 11px;
  }
}

/* ========================================
   採用ページ設定 - 追加スタイル
   ======================================== */

/* トグルスイッチ */
.toggle-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  flex-wrap: nowrap;
}

.toggle-switch-label input {
  display: none;
}

.toggle-switch {
  display: inline-block;
  position: relative;
  width: 44px;
  min-width: 44px;
  height: 24px;
  background: #cbd5e1;
  border-radius: 12px;
  transition: background 0.2s;
  flex-shrink: 0;
}

.toggle-switch-label > span:last-child {
  white-space: nowrap;
}

.toggle-switch::after {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 20px;
  height: 20px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch-label input:checked + .toggle-switch {
  background: #6366f1;
}

.toggle-switch-label input:checked + .toggle-switch::after {
  transform: translateX(20px);
}

/* 入力プレフィックス */
.input-with-prefix {
  display: flex;
  align-items: center;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.input-with-prefix .input-prefix {
  padding: 10px 12px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 13px;
  border-right: 1px solid #d1d5db;
  white-space: nowrap;
}

.input-with-prefix input {
  flex: 1;
  border: none;
  padding: 10px 12px;
  font-size: 14px;
  outline: none;
}

/* フォーム行（2カラム） */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 768px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* カスタムリンクリスト */
.custom-links-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

.custom-link-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
}

.custom-link-inputs {
  display: flex;
  flex: 1;
  gap: 8px;
}

.custom-link-inputs input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 13px;
}

.btn-remove-link {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fee2e2;
  color: #ef4444;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-remove-link:hover {
  background: #fecaca;
}

/* カスタムセクションリスト（採用ページ設定用） */
.custom-sections-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 12px;
}

/* カスタムセクション追加ボタン */
.add-section-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-add-section {
  padding: 8px 16px;
  background: #f1f5f9;
  border: 1px dashed #94a3b8;
  border-radius: 6px;
  color: #475569;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-section:hover {
  background: #e2e8f0;
  border-color: #6366f1;
  color: #6366f1;
}

/* ========================================
   求人並び替えモード
   ======================================== */

.sort-mode-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%);
  border: 1px solid #fbbf24;
  border-radius: 8px;
  margin-bottom: 16px;
}

.sort-mode-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sort-mode-icon {
  font-size: 20px;
  color: #92400e;
}

.sort-mode-text {
  font-size: 14px;
  font-weight: 500;
  color: #92400e;
}

.sort-mode-actions {
  display: flex;
  gap: 8px;
}

/* 並び替えモード時の求人カード */
.job-listings-cards.sort-mode {
  background: #fffbeb;
  border: 2px dashed #fbbf24;
  border-radius: 8px;
  padding: 8px;
}

.job-listings-cards.sort-mode .job-listing-card {
  cursor: grab;
  background: #fff;
  transition: transform 0.15s, box-shadow 0.15s;
  border-radius: 8px;
  margin-bottom: 4px;
}

.job-listings-cards.sort-mode .job-listing-card:hover {
  background: #fef9e7;
}

.job-listings-cards.sort-mode .job-listing-card:active {
  cursor: grabbing;
}

.job-listings-cards.sort-mode .job-listing-card.dragging {
  opacity: 0.5;
  transform: scale(1.02);
  box-shadow: 0 8px 25px rgba(0,0,0,0.15);
}

.job-listings-cards.sort-mode .job-listing-card.drag-over {
  border-top: 3px solid #6366f1;
}

/* ドラッグハンドル */
.job-card-drag-handle {
  display: none;
  width: 24px;
  height: 24px;
  color: #94a3b8;
  cursor: grab;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
}

.sort-mode .job-card-drag-handle {
  display: flex;
}

.sort-mode .job-card-drag-handle:hover {
  color: #6366f1;
}

/* 順序番号表示 */
.job-order-badge {
  display: none;
  min-width: 24px;
  height: 24px;
  background: #6366f1;
  color: #fff;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.sort-mode .job-order-badge {
  display: flex;
}

/* job-manage用の求人一覧カードスタイル */
#jm-jobs-list.job-listings-cards {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
}

#jm-jobs-list .job-listing-card {
  border-bottom: 1px solid #f1f5f9;
}

#jm-jobs-list .job-listing-card:last-child {
  border-bottom: none;
}

/* ========================================
   テンプレート選択モーダル
   ======================================== */

.template-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

.template-modal {
  background: #fff;
  border-radius: 12px;
  max-width: 640px;
  width: 100%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}

.template-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: #4AA7C0;
  color: #fff;
}

.template-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.template-modal-close {
  background: none;
  border: none;
  color: #fff;
  font-size: 24px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.template-modal-close:hover {
  opacity: 1;
}

.template-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.template-modal-description {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.template-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.template-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.template-item:hover {
  border-color: #4AA7C0;
  box-shadow: 0 2px 8px rgba(74, 167, 192, 0.1);
}

/* テンプレートリスト用（モーダル内の小さいリスト表示） */
.template-list .template-thumbnail {
  flex-shrink: 0;
  width: 100px;
  height: 70px;
  border-radius: 6px;
  overflow: hidden;
  background: #f3f4f6;
  border: 1px solid #e5e7eb;
}

.template-list .template-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.template-list .template-info {
  flex: 1;
  min-width: 0;
}

.template-list .template-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.template-list .template-description {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

.btn-add-template {
  flex-shrink: 0;
  padding: 8px 16px;
  background: #fff;
  color: #4AA7C0;
  border: 1px solid #4AA7C0;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-add-template:hover {
  background: #4AA7C0;
  color: #fff;
}

.template-modal-footer {
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
  text-align: center;
}

.btn-template-cancel {
  padding: 10px 32px;
  background: #fff;
  color: #4AA7C0;
  border: 1px solid #4AA7C0;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-template-cancel:hover {
  background: #f0f9fb;
}

/* アイコンサムネイル（画像の代わりにアイコンを表示） */
.template-icon-thumbnail {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0f9fb 0%, #e0f2f7 100%);
}

.template-icon-large {
  font-size: 32px;
}

/* 無効化されたテンプレートアイテム */
.template-item.disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.template-item.disabled:hover {
  border-color: #e5e7eb;
  box-shadow: none;
}

.btn-add-template:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #f3f4f6;
  color: #9ca3af;
  border-color: #d1d5db;
}

.btn-add-template:disabled:hover {
  background: #f3f4f6;
  color: #9ca3af;
}

/* コンテンツ追加ボタン */
.btn-open-template-selector {
  width: 100%;
  padding: 12px;
  background: #fff;
  color: #4AA7C0;
  border: 2px dashed #4AA7C0;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-open-template-selector:hover {
  background: #f0f9fb;
  border-color: #3a97b0;
}

/* ========================================
   カスタムセクションフィールド（採用ページ設定用）
   ======================================== */

#recruit-custom-sections .custom-section-item,
#lp-custom-sections-list .custom-section-item {
  display: block;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  margin-bottom: 16px;
  overflow: hidden;
}

#recruit-custom-sections .section-item-header,
#lp-custom-sections-list .section-item-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.section-type-badge {
  display: inline-block;
  padding: 6px 14px;
  background: #e5e7eb;
  color: #374151;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}

.section-type-badge.template-badge {
  background: #4AA7C0;
  color: #fff;
}

.section-item-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.section-item-actions button {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

.section-item-actions button:hover:not(:disabled) {
  background: #f3f4f6;
  border-color: #d1d5db;
}

.section-item-actions button:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.btn-remove-section {
  color: #ef4444 !important;
}

.btn-remove-section:hover:not(:disabled) {
  background: #fef2f2 !important;
  border-color: #fecaca !important;
}

#recruit-custom-sections .section-item-content,
#lp-custom-sections-list .section-item-content {
  padding: 24px;
}

/* セクションコンテンツ内のフォームを広く */
#recruit-custom-sections .section-field,
#lp-custom-sections-list .section-field {
  max-width: 100%;
  width: 100%;
}

/* セクションフィールド */
.section-field {
  margin-bottom: 16px;
}

.section-field:last-child {
  margin-bottom: 0;
}

.section-field-hint {
  font-size: 13px;
  color: #9ca3af;
  font-style: italic;
}

/* カスタムセクション カラー設定 */
.section-color-summary {
  font-size: 13px;
  font-weight: 500;
  color: #555;
  cursor: pointer;
  user-select: none;
}

.section-color-details[open] .section-color-summary {
  margin-bottom: 4px;
}

.color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.color-picker-row input[type="color"] {
  width: 36px;
  height: 36px;
  padding: 2px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  flex-shrink: 0;
}

.color-picker-row input[type="text"] {
  flex: 1;
  min-width: 0;
}

/* インラインリスト（画像一覧・社員一覧） */
.inline-list-container {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.inline-list-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inline-list-item-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #6b7280;
}

.inline-list-item-header .btn-inline-remove {
  background: none;
  border: none;
  color: #ef4444;
  cursor: pointer;
  font-size: 14px;
  padding: 2px 6px;
  border-radius: 4px;
}

.inline-list-item-header .btn-inline-remove:hover {
  background: #fef2f2;
}

.inline-image-preview {
  max-width: 100%;
  max-height: 100px;
  border-radius: 4px;
  object-fit: cover;
}

/* サムネイル付き横並びレイアウト */
.inline-list-item-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
}

.inline-image-thumb {
  width: 64px;
  height: 48px;
  min-width: 64px;
  object-fit: cover;
  border-radius: 4px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

.inline-image-thumb-empty {
  width: 64px;
  height: 48px;
  min-width: 64px;
  border-radius: 4px;
  border: 1px dashed #d1d5db;
  background: #f9fafb;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  color: #9ca3af;
}

.inline-list-item-fields {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.btn-inline-add {
  display: block;
  width: 100%;
  padding: 8px;
  background: #f3f4f6;
  border: 1px dashed #d1d5db;
  border-radius: 6px;
  color: #6b7280;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-inline-add:hover {
  background: #e5e7eb;
  color: #374151;
  border-color: #9ca3af;
}

.inline-list-item .section-field-input {
  font-size: 13px;
  padding: 6px 8px;
}

/* 画像アクション行（URL入力 + アップロード/履歴ボタン） */
.inline-image-actions {
  display: flex;
  gap: 4px;
  align-items: center;
}

.inline-image-actions .section-field-input,
.inline-image-actions .sidebar-list-field {
  flex: 1;
  min-width: 0;
}

.btn-inline-upload,
.btn-inline-gallery,
.btn-sidebar-upload,
.btn-sidebar-gallery {
  background: #f3f4f6;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  line-height: 1;
  transition: all 0.2s;
  flex-shrink: 0;
}

.btn-inline-upload:hover,
.btn-inline-gallery:hover,
.btn-sidebar-upload:hover,
.btn-sidebar-gallery:hover {
  background: #e5e7eb;
  border-color: #9ca3af;
}

/* 表示設定の折りたたみ */
.section-display-settings {
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #fafbfc;
  margin-bottom: 8px;
}

.section-display-summary {
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  cursor: pointer;
  user-select: none;
}

.section-display-summary:hover {
  color: #111827;
}

.display-settings-content {
  padding: 8px 12px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.display-settings-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.display-settings-row label {
  font-size: 12px;
  color: #6b7280;
  white-space: nowrap;
  min-width: 60px;
}

.display-settings-row select,
.display-settings-row input[type="number"] {
  font-size: 12px;
  padding: 4px 8px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  background: #fff;
}

.display-settings-row select {
  flex: 1;
}

.display-settings-checks {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.inline-checkbox {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #374151;
  cursor: pointer;
}

.inline-checkbox input[type="checkbox"] {
  margin: 0;
}

.section-field-label {
  display: block;
  margin-bottom: 6px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
}

.section-field-input {
  width: 100%;
  max-width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.section-field-input:focus {
  outline: none;
  border-color: #4AA7C0;
}

textarea.section-field-input {
  resize: vertical;
  min-height: 120px;
}

/* 画像フィールド */
.section-image-field {
  display: flex;
  gap: 8px;
}

.section-image-field .section-image-url {
  flex: 1;
}

.btn-upload-section-image {
  padding: 10px 16px;
  background: #4AA7C0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-upload-section-image:hover {
  background: #3a97b0;
}

.section-image-preview {
  margin-top: 10px;
  max-width: 200px;
  max-height: 150px;
  border-radius: 6px;
  border: 1px solid #e5e7eb;
}

/* 項目リスト（BUSINESS用） */
#recruit-custom-sections .section-items-list {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

#recruit-custom-sections .section-item-entry {
  padding: 20px;
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

#recruit-custom-sections .section-item-field {
  margin-bottom: 0;
}

#recruit-custom-sections .section-item-field label {
  display: block;
  margin-bottom: 8px;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
}

#recruit-custom-sections .section-item-field input,
#recruit-custom-sections .section-item-field textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

#recruit-custom-sections .section-item-field textarea {
  resize: vertical;
  min-height: 100px;
}

#recruit-custom-sections .btn-remove-item {
  padding: 10px 20px;
  background: #fff;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
  align-self: flex-start;
}

#recruit-custom-sections .btn-remove-item:hover {
  background: #fef2f2;
}

#recruit-custom-sections .btn-add-item {
  padding: 12px 24px;
  background: #fff;
  color: #4AA7C0;
  border: 2px dashed #4AA7C0;
  border-radius: 6px;
  font-size: 14px;
  cursor: pointer;
  transition: all 0.2s;
}

#recruit-custom-sections .btn-add-item:hover {
  background: #f0f9fb;
}

/* ギャラリー（PHOTOS用） */
.section-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  margin-bottom: 12px;
}

.section-gallery-item {
  position: relative;
  aspect-ratio: 4/3;
  border-radius: 6px;
  overflow: hidden;
  border: 1px solid #e5e7eb;
}

.section-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.btn-remove-gallery-image {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 24px;
  height: 24px;
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  border: none;
  border-radius: 50%;
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.2s;
}

.section-gallery-item:hover .btn-remove-gallery-image {
  opacity: 1;
}

.btn-add-gallery-image {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  background: #4AA7C0;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  font-size: 14px;
}

.btn-add-gallery-image:hover {
  background: #3a97b0;
}

.gallery-add-icon {
  font-size: 14px;
}

.gallery-add-text {
  font-size: 13px;
}

/* モバイル対応 */
@media (max-width: 640px) {
  .template-item {
    flex-direction: column;
    text-align: center;
  }

  .template-list .template-thumbnail {
    width: 100%;
    height: 100px;
  }

  .btn-add-template {
    width: 100%;
  }

  .section-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ========================================
   リンク・バナー取得セクション
   ======================================== */

/* 埋込URLボックス */
.embed-link-box {
  display: flex;
  gap: 8px;
  align-items: center;
}

.embed-link-box .embed-url-input,
.recruit-settings-form .embed-link-box .embed-url-input,
.lp-form-section .embed-link-box .embed-url-input {
  flex: 1 1 auto;
  min-width: 100px;
  max-width: calc(100% - 110px) !important;
  width: auto !important;
  padding: 10px 12px;
  font-size: 13px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  background: #f9fafb;
  color: #374151;
}

.embed-link-box .btn-copy-embed,
.recruit-settings-form .embed-link-box .btn-copy-embed,
.lp-form-section .embed-link-box .btn-copy-embed {
  flex: 0 0 auto;
  width: auto !important;
  height: auto !important;
  min-width: 100px;
  padding: 10px 16px !important;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.2s;
  white-space: nowrap;
  overflow: visible;
}

.btn-copy-embed:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* バナーグリッド */
.embed-banners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
  margin-top: 12px;
}

@media (max-width: 768px) {
  .embed-banners-grid {
    grid-template-columns: 1fr;
  }
}

.embed-banner-item {
  background: #f9fafb;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.embed-banner-preview {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
  background: #fff;
  border-radius: 6px;
  min-height: 80px;
}

.btn-copy-banner {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 500;
  color: #374151;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.2s;
  align-self: flex-end;
}

.btn-copy-banner:hover {
  background: #f3f4f6;
  border-color: #9ca3af;
}

/* バナースタイル: シンプルボタン */
.banner-style-button a {
  display: inline-block;
  padding: 12px 24px;
  background: #0ea5e9;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  font-size: 14px;
}

/* バナースタイル: 大きめボタン */
.banner-style-button-large a {
  display: inline-block;
  padding: 16px 32px;
  background: linear-gradient(135deg, #0ea5e9, #0284c7);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  font-weight: bold;
  font-size: 16px;
  box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
}

/* バナースタイル: カード型 */
.banner-style-card .banner-card-inner {
  display: block;
  max-width: 200px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.banner-card-label {
  display: block;
  font-size: 11px;
  color: #6b7280;
  margin-bottom: 4px;
}

.banner-card-title {
  display: block;
  font-size: 14px;
  font-weight: bold;
  color: #1f2937;
}

.banner-card-arrow {
  display: block;
  margin-top: 8px;
  color: #0ea5e9;
  font-size: 13px;
}

/* バナースタイル: 求人募集中 */
.banner-style-recruiting .banner-recruiting-inner {
  display: inline-block;
  padding: 14px 24px;
  background: linear-gradient(135deg, #f97316, #ea580c);
  color: #fff;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  box-shadow: 0 4px 14px rgba(249, 115, 22, 0.4);
}

.banner-recruiting-badge {
  display: block;
  font-size: 11px;
  font-weight: 500;
}

.banner-recruiting-title {
  display: block;
  font-size: 16px;
  font-weight: bold;
}

/* バナースタイル: 特設ページ公開中 */
.banner-style-special .banner-special-inner {
  display: inline-block;
  padding: 16px 28px;
  background: linear-gradient(135deg, #6366f1, #4f46e5);
  color: #fff;
  text-decoration: none;
  border-radius: 10px;
  text-align: center;
  box-shadow: 0 4px 20px rgba(99, 102, 241, 0.4);
}

.banner-special-title {
  display: block;
  font-size: 12px;
  font-weight: 500;
}

.banner-special-subtitle {
  display: block;
  font-size: 18px;
  font-weight: bold;
  margin-top: 4px;
}

/* ========================================
   共通モーダルコンポーネント
   src/shared/modal.js で使用
======================================== */

/* オーバーレイ */
.common-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  padding: 20px;
}

/* モーダル本体 */
.common-modal {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 500px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  animation: commonModalFadeIn 0.2s ease-out;
}

.common-modal.common-modal-sm {
  max-width: 400px;
}

@keyframes commonModalFadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ヘッダー */
.common-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  background: #4AA7C0;
  color: #fff;
  border-radius: 12px 12px 0 0;
}

.common-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.common-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #fff;
  padding: 0;
  line-height: 1;
  opacity: 0.8;
  transition: opacity 0.2s;
}

.common-modal-close:hover {
  opacity: 1;
}

/* ボディ */
.common-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
}

.common-modal-description {
  margin: 0 0 20px;
  color: #6b7280;
  font-size: 14px;
  text-align: center;
}

.common-modal-message {
  margin: 0;
  color: #374151;
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

/* リスト形式 */
.common-modal-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.common-modal-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  background: #f9fafb;
  border-radius: 8px;
  transition: background-color 0.2s;
}

.common-modal-item:hover:not(.disabled) {
  background: #f3f4f6;
}

.common-modal-item.disabled {
  opacity: 0.6;
}

.common-modal-item-thumbnail {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 8px;
  overflow: hidden;
  background: #e5e7eb;
}

.common-modal-item-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.common-modal-item-thumbnail.common-modal-item-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
}

.common-modal-item-info {
  flex: 1;
  min-width: 0;
}

.common-modal-item-name {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
}

.common-modal-item-description {
  margin: 0;
  font-size: 12px;
  color: #6b7280;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.common-modal-item-btn {
  flex: 0 0 auto;
  padding: 8px 16px;
  background: #4AA7C0;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
}

.common-modal-item-btn:hover:not([disabled]) {
  background: #3d8fa5;
}

.common-modal-item-btn[disabled] {
  background: #d1d5db;
  color: #6b7280;
  cursor: not-allowed;
}

/* グリッド形式 */
.common-modal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  gap: 12px;
}

.common-modal-grid-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 16px 12px;
  background: #f9fafb;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.2s, transform 0.2s;
  border: 2px solid transparent;
}

.common-modal-grid-item:hover:not([disabled]) {
  background: #f3f4f6;
  transform: translateY(-2px);
}

.common-modal-grid-item[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.common-modal-grid-icon {
  font-size: 28px;
}

.common-modal-grid-name {
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  text-align: center;
}

.common-modal-grid-limit {
  font-size: 11px;
  color: #9ca3af;
}

/* フッター */
.common-modal-footer {
  display: flex;
  justify-content: center;
  gap: 12px;
  padding: 12px 20px;
  border-top: 1px solid #e5e7eb;
}

.common-modal-footer-buttons {
  justify-content: flex-end;
}

.common-modal-cancel {
  padding: 10px 24px;
  background: #fff;
  color: #6b7280;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s, border-color 0.2s;
}

.common-modal-cancel:hover {
  background: #f9fafb;
  border-color: #9ca3af;
}

.common-modal-confirm {
  padding: 10px 24px;
  background: #4AA7C0;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: background-color 0.2s;
}

.common-modal-confirm:hover {
  background: #3d8fa5;
}

.common-modal-confirm.danger {
  background: #ef4444;
}

.common-modal-confirm.danger:hover {
  background: #dc2626;
}

/* ========================================
   求人メモアイコン・ポップアップ
   ======================================== */

/* メモアイコンボタン（アクションエリア内） */
.btn-job-action.btn-memo-icon {
  background: #fef3c7;
  border: 1px solid #fcd34d;
}

.btn-job-action.btn-memo-icon:hover {
  background: #fde68a;
  border-color: #f59e0b;
}

.btn-job-action.btn-memo-icon svg {
  color: #d97706;
}

/* 複製ボタン */
.btn-job-action.btn-duplicate-job {
  background: #e0e7ff;
  border: 1px solid #a5b4fc;
}

.btn-job-action.btn-duplicate-job:hover {
  background: #818cf8;
  color: #fff;
  border-color: #818cf8;
}

.btn-job-action.btn-duplicate-job svg {
  color: #4f46e5;
}

.btn-job-action.btn-duplicate-job:hover svg {
  color: #fff;
}

/* メモポップアップ */
.memo-popup {
  position: fixed;
  z-index: 10001;
  min-width: 250px;
  max-width: 400px;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
  animation: memoPopupFadeIn 0.15s ease-out;
}

@keyframes memoPopupFadeIn {
  from {
    opacity: 0;
    transform: translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.memo-popup-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 14px;
  background: #fef3c7;
  border-radius: 8px 8px 0 0;
  border-bottom: 1px solid #fde68a;
}

.memo-popup-title {
  font-size: 13px;
  font-weight: 600;
  color: #92400e;
}

.memo-popup-close {
  background: none;
  border: none;
  font-size: 18px;
  line-height: 1;
  color: #b45309;
  cursor: pointer;
  padding: 0;
  opacity: 0.7;
  transition: opacity 0.2s;
}

.memo-popup-close:hover {
  opacity: 1;
}

.memo-popup-content {
  padding: 14px;
  font-size: 13px;
  line-height: 1.6;
  color: #374151;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 300px;
  overflow-y: auto;
}

/* ========================================
   会社選択モーダル（複数会社所属ユーザー用）
======================================== */
.company-select-modal {
  max-width: 480px;
  padding: 32px;
  text-align: center;
}

.company-select-modal h2 {
  margin: 0 0 12px 0;
  font-size: 20px;
  font-weight: 600;
  color: #1f2937;
}

.company-select-modal .modal-description {
  margin: 0 0 24px 0;
  font-size: 14px;
  color: #6b7280;
}

.company-select-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.company-select-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: #f9fafb;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: left;
}

.company-select-item:hover {
  background: #f0fdf4;
  border-color: #4AA7C0;
}

.company-select-item .company-icon {
  width: 48px;
  height: 48px;
  background: #4AA7C0;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  flex-shrink: 0;
}

.company-select-item .company-info {
  flex: 1;
}

.company-select-item .company-name {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin-bottom: 2px;
}

.company-select-item .company-domain {
  font-size: 13px;
  color: #6b7280;
}

.company-select-item .arrow-icon {
  color: #9ca3af;
  font-size: 18px;
}

.company-select-item:hover .arrow-icon {
  color: #4AA7C0;
}

/* ========================================
   会社切り替えドロップダウン（ヘッダー用）
======================================== */
.company-switcher {
  position: relative;
}

.company-switcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: #374151;
  transition: all 0.2s;
}

.company-switcher-btn:hover {
  background: #f9fafb;
  border-color: #d1d5db;
}

.company-switcher-btn .current-company {
  max-width: 150px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.company-switcher-btn .dropdown-arrow {
  font-size: 10px;
  color: #9ca3af;
  transition: transform 0.2s;
}

.company-switcher.open .dropdown-arrow {
  transform: rotate(180deg);
}

.company-switcher-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
  z-index: 100;
  display: none;
}

.company-switcher.open .company-switcher-dropdown {
  display: block;
}

.company-switcher-dropdown-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.2s;
}

.company-switcher-dropdown-item:first-child {
  border-radius: 8px 8px 0 0;
}

.company-switcher-dropdown-item:last-child {
  border-radius: 0 0 8px 8px;
}

.company-switcher-dropdown-item:hover {
  background: #f9fafb;
}

.company-switcher-dropdown-item.active {
  background: #f0fdf4;
  color: #4AA7C0;
}

.company-switcher-dropdown-item .check-icon {
  width: 16px;
  color: #4AA7C0;
}

/* ========================================
   画像カルーセル編集UI改善
   ======================================== */

/* 空状態のプレースホルダー */
.carousel-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: linear-gradient(180deg, #f9fafb 0%, #f1f5f9 100%);
  border: 2px dashed #d1d5db;
  border-radius: 12px;
  text-align: center;
}

.carousel-empty-icon {
  font-size: 48px;
  margin-bottom: 12px;
  opacity: 0.6;
}

.carousel-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: #374151;
  margin-bottom: 4px;
}

.carousel-empty-desc {
  font-size: 13px;
  color: #6b7280;
}

/* カルーセルアイテム - ビジュアル改善 */
.carousel-item {
  position: relative;
}

.carousel-item .carousel-preview-thumb {
  width: 100%;
  max-width: 200px;
  height: 120px;
  object-fit: cover;
  border-radius: 8px;
  border: 1px solid #e5e7eb;
  background: #f3f4f6;
}

.carousel-item .carousel-preview-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 200px;
  height: 120px;
  background: #f9fafb;
  border: 2px dashed #d1d5db;
  border-radius: 8px;
  color: #9ca3af;
  font-size: 24px;
}

/* カルーセルアイテムヘッダー改善 */
.carousel-item .editor-item-header {
  background: #f1f5f9;
  margin: -16px -16px 12px -16px;
  padding: 12px 16px !important;
  border-radius: 10px 10px 0 0;
  border-bottom: 1px solid #e2e8f0 !important;
}

.carousel-item .editor-item-header .item-number {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #6366f1;
  color: white;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 600;
}

/* ========================================
   カスタムセクションレイアウト選択UI改善
   ======================================== */

/* レイアウトカード選択 */
.layout-card-selector {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

@media (max-width: 640px) {
  .layout-card-selector {
    grid-template-columns: repeat(2, 1fr);
  }
}

.layout-card {
  position: relative;
  cursor: pointer;
}

.layout-card input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.layout-card-content {
  display: flex;
  flex-direction: column;
  padding: 16px;
  background: #ffffff;
  border: 2px solid #e5e7eb;
  border-radius: 12px;
  transition: all 0.2s ease;
}

.layout-card:hover .layout-card-content {
  border-color: #a5b4fc;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.1);
}

.layout-card input:checked + .layout-card-content {
  border-color: #6366f1;
  background: #f5f3ff;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

.layout-card input:checked + .layout-card-content .layout-check {
  display: flex;
}

/* レイアウトプレビュー（カスタムセクション編集モーダル専用） */
.layout-card-selector .layout-preview {
  width: 100%;
  height: 80px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
  padding: 8px;
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

/* テキストのみ */
.layout-card-selector .layout-preview.text-only .preview-text-block {
  width: 80%;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.layout-card-selector .layout-preview .preview-line {
  height: 4px;
  background: #94a3b8;
  border-radius: 2px;
}

.layout-card-selector .layout-preview .preview-line.short {
  width: 60%;
}

.layout-card-selector .layout-preview .preview-line.medium {
  width: 80%;
}

/* 画像のみ */
.layout-card-selector .layout-preview.image-only .preview-image-block {
  width: 70%;
  height: 60px;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.layout-card-selector .layout-preview .preview-image-icon {
  font-size: 18px;
  opacity: 0.7;
}

/* テキスト左・画像右 */
.layout-card-selector .layout-preview.text-left-image-right {
  justify-content: space-between;
  padding: 8px 12px;
}

.layout-card-selector .layout-preview.text-left-image-right .preview-text-block {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layout-card-selector .layout-preview.text-left-image-right .preview-image-block {
  width: 45%;
  height: 50px;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 4px;
}

/* テキスト右・画像左 */
.layout-card-selector .layout-preview.text-right-image-left {
  justify-content: space-between;
  padding: 8px 12px;
  flex-direction: row-reverse;
}

.layout-card-selector .layout-preview.text-right-image-left .preview-text-block {
  width: 45%;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.layout-card-selector .layout-preview.text-right-image-left .preview-image-block {
  width: 45%;
  height: 50px;
  background: linear-gradient(135deg, #cbd5e1 0%, #94a3b8 100%);
  border-radius: 4px;
}

/* 中央揃え（ボタン付き） */
.layout-card-selector .layout-preview.centered-with-button {
  flex-direction: column;
  gap: 6px;
}

.layout-card-selector .layout-preview.centered-with-button .preview-text-block {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}

.layout-card-selector .layout-preview.centered-with-button .preview-line {
  width: 60%;
}

.layout-card-selector .layout-preview.centered-with-button .preview-line.short {
  width: 40%;
}

.layout-card-selector .layout-preview.centered-with-button .preview-button {
  width: 50px;
  height: 12px;
  background: #6366f1;
  border-radius: 6px;
}

/* フルワイドバナー */
.layout-card-selector .layout-preview.full-width-banner {
  background: linear-gradient(135deg, #475569 0%, #334155 100%);
  position: relative;
  overflow: hidden;
}

.layout-card-selector .layout-preview.full-width-banner .preview-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

.layout-card-selector .layout-preview.full-width-banner .preview-line {
  background: white;
  opacity: 0.9;
}

/* レイアウトカードラベル */
.layout-card-label {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.layout-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}

.layout-check {
  display: none;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  background: #6366f1;
  border-radius: 50%;
  color: white;
}

.layout-check svg {
  width: 12px;
  height: 12px;
}

/* ポイントバリアント選択（コンパクト版） */
.layout-card-selector--points {
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
@media (max-width: 640px) {
  .layout-card-selector--points {
    grid-template-columns: repeat(2, 1fr);
  }
}
.layout-card--compact .layout-card-content {
  padding: 10px 12px;
}
.layout-card--compact .layout-card-label {
  gap: 6px;
}
.layout-card-icon {
  font-size: 16px;
  flex-shrink: 0;
}
.layout-card--compact .layout-card-name {
  font-size: 11px;
  flex: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.layout-card--compact .layout-check {
  width: 16px;
  height: 16px;
}
.layout-card--compact .layout-check svg {
  width: 10px;
  height: 10px;
}

/* ========================================
   リッチテキストエディタ改善
   ======================================== */

/* エディタコンテナ */
.rich-editor-container {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rich-editor-container:focus-within {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* ツールバー */
.rich-editor-toolbar {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
}

.rich-editor-toolbar .toolbar-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #64748b;
  cursor: pointer;
  transition: all 0.15s;
}

.rich-editor-toolbar .toolbar-btn:hover {
  background: #e2e8f0;
  color: #374151;
}

.rich-editor-toolbar .toolbar-btn.active {
  background: #6366f1;
  color: white;
  border-color: #6366f1;
}

.rich-editor-toolbar .toolbar-btn svg {
  width: 16px;
  height: 16px;
}

.rich-editor-toolbar .toolbar-divider {
  width: 1px;
  height: 20px;
  background: #d1d5db;
  margin: 0 6px;
}

.rich-editor-toolbar .toolbar-hint {
  margin-left: auto;
  font-size: 11px;
  color: #9ca3af;
}

/* エディタ本体 */
.rich-editor-content {
  min-height: 120px;
  max-height: 300px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
  overflow-y: auto;
  outline: none;
}

.rich-editor-content:empty::before {
  content: attr(data-placeholder);
  color: #9ca3af;
  pointer-events: none;
}

.rich-editor-content b,
.rich-editor-content strong {
  font-weight: 700;
}

.rich-editor-content i,
.rich-editor-content em {
  font-style: italic;
}

/* 旧rich-editorスタイル上書き */
.rich-editor {
  min-height: 120px;
  max-height: 300px;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.6;
  color: #1f2937;
  background: #fff;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  overflow-y: auto;
  outline: none;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.rich-editor:focus {
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.rich-editor:empty::before {
  content: "本文を入力してください...";
  color: #9ca3af;
  pointer-events: none;
}

/* ========================================
   画像・ボタンセクションUI改善
   ======================================== */

/* 画像セクション */
.image-section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.image-section-card .section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 12px;
}

.image-section-card .section-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #e0f2fe;
  border-radius: 6px;
  font-size: 12px;
}

/* ボタンセクション */
.button-section-card {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 16px;
}

.button-section-card .section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 12px;
}

.button-section-card .section-label-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  background: #fef3c7;
  border-radius: 6px;
  font-size: 12px;
}

.button-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.button-toggle-row .toggle-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  color: #374151;
}

.button-toggle-row .toggle-label-icon {
  font-size: 16px;
}

/* トグルスイッチ */
.toggle-switch {
  position: relative;
  width: 44px;
  height: 24px;
}

.toggle-switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.toggle-switch .toggle-slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #d1d5db;
  transition: 0.3s;
  border-radius: 24px;
}

.toggle-switch .toggle-slider:before {
  position: absolute;
  content: "";
  height: 18px;
  width: 18px;
  left: 3px;
  bottom: 3px;
  background-color: white;
  transition: 0.3s;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

.toggle-switch input:checked + .toggle-slider {
  background-color: #6366f1;
}

.toggle-switch input:checked + .toggle-slider:before {
  transform: translateX(20px);
}

/* ボタンフィールド */
.button-fields {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #e5e7eb;
}

.button-fields .form-group {
  margin-bottom: 12px;
}

.button-fields .form-group:last-child {
  margin-bottom: 0;
}

.button-preview {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  text-align: center;
}

.button-preview-label {
  font-size: 11px;
  color: #9ca3af;
  margin-bottom: 8px;
}

.button-preview .preview-btn {
  display: inline-block;
  padding: 10px 24px;
  background: linear-gradient(135deg, #6366f1, #8b5cf6);
  color: white;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 600;
}

/* ====================================
   UX改善: スティッキー保存バー
   ==================================== */
.sticky-save-bar {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, #fff 80%, transparent);
  padding: 16px 0 8px;
  margin-top: 24px;
  z-index: 50;
}

.sticky-save-bar .form-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  background: #fff;
  padding: 12px 16px;
  border-radius: 12px;
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.1);
}

.sticky-save-bar .autosave-indicator {
  margin-left: auto;
  font-size: 12px;
  color: #6b7280;
  display: flex;
  align-items: center;
  gap: 6px;
}

.sticky-save-bar .autosave-indicator.saving {
  color: #f59e0b;
}

.sticky-save-bar .autosave-indicator.saved {
  color: #10b981;
}

/* ====================================
   UX改善: 進捗インジケーター
   ==================================== */
.form-progress {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #f8fafc;
  border-radius: 8px;
  margin-bottom: 20px;
}

.form-progress-bar {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.form-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 4px;
  transition: width 0.3s ease;
}

.form-progress-text {
  font-size: 13px;
  color: #6b7280;
  white-space: nowrap;
}

.form-progress-text strong {
  color: #374151;
}

/* ====================================
   UX改善: 必須フィールドマーク
   ==================================== */
.required-mark {
  color: #ef4444;
  margin-left: 2px;
}

label.required::after {
  content: " *";
  color: #ef4444;
}

/* ====================================
   UX改善: 文字数カウンター
   ==================================== */
.input-with-counter {
  position: relative;
}

.char-counter {
  position: absolute;
  right: 12px;
  bottom: 8px;
  font-size: 11px;
  color: #9ca3af;
  pointer-events: none;
}

.char-counter.warning {
  color: #f59e0b;
}

.char-counter.error {
  color: #ef4444;
}

/* テキストエリアの場合 */
textarea + .char-counter {
  bottom: 12px;
}

/* ====================================
   UX改善: デバイスプレビュー切替
   ==================================== */
.preview-device-toggle {
  display: flex;
  gap: 4px;
  background: #f3f4f6;
  padding: 4px;
  border-radius: 8px;
}

.preview-device-toggle button {
  padding: 6px 12px;
  border: none;
  background: transparent;
  border-radius: 6px;
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  gap: 4px;
}

.preview-device-toggle button:hover {
  background: #e5e7eb;
}

.preview-device-toggle button.active {
  background: #fff;
  color: #374151;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.preview-device-toggle button svg {
  width: 14px;
  height: 14px;
}

/* プレビューフレームのデスクトップモード */
.recruit-editor-preview[data-device="desktop"] .preview-phone-frame {
  width: 100%;
  max-width: none;
  border-radius: 8px;
  aspect-ratio: 16/10;
}

.recruit-editor-preview[data-device="desktop"] .preview-phone-notch {
  display: none;
}

.recruit-editor-preview[data-device="desktop"] .preview-phone-content {
  padding-top: 0;
}

/* タブレットモード */
.recruit-editor-preview[data-device="tablet"] .preview-phone-frame {
  width: 280px;
  aspect-ratio: 3/4;
  border-radius: 16px;
}

.recruit-editor-preview[data-device="tablet"] .preview-phone-notch {
  display: none;
}

/* ====================================
   UX改善: セクション完了バッジ
   ==================================== */
.section-complete-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #ecfdf5;
  color: #059669;
  font-size: 11px;
  border-radius: 12px;
  margin-left: 8px;
}

.section-complete-badge svg {
  width: 12px;
  height: 12px;
}

.section-incomplete-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  background: #fef3c7;
  color: #d97706;
  font-size: 11px;
  border-radius: 12px;
  margin-left: 8px;
}

/* ====================================
   UX改善: フォームヘルプツールチップ
   ==================================== */
.help-tooltip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  background: #e5e7eb;
  border-radius: 50%;
  font-size: 10px;
  color: #6b7280;
  cursor: help;
  margin-left: 6px;
  position: relative;
}

.help-tooltip:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 0;
  background: #1f2937;
  color: #fff;
  padding: 10px 14px;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  z-index: 1000;
  width: max-content;
  max-width: 300px;
  white-space: normal;
  text-align: left;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.help-tooltip:hover::before {
  content: '';
  position: absolute;
  bottom: calc(100% + 2px);
  left: 8px;
  border: 6px solid transparent;
  border-top-color: #1f2937;
}

/* ========================================
   お知らせ管理モーダル
======================================== */

/* モーダル全体 */
.announcement-modal {
  max-width: 600px;
  width: 90%;
}

.announcement-modal .modal-header {
  background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
  color: #fff;
  border-radius: 12px 12px 0 0;
  padding: 20px 24px;
}

.announcement-modal .modal-header h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
}

.announcement-modal .modal-close {
  color: #fff;
  opacity: 0.8;
}

.announcement-modal .modal-close:hover {
  opacity: 1;
  background: rgba(255, 255, 255, 0.2);
}

/* タイトルアイコン */
.modal-title-icon {
  font-size: 22px;
  line-height: 1;
}

/* モーダルボディ */
.announcement-modal .modal-body {
  padding: 24px;
  background: #f8fafc;
  max-height: 60vh;
  overflow-y: auto;
}

/* アイコン付きラベル */
.form-label-icon {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 8px;
}

.label-icon {
  font-size: 16px;
  line-height: 1;
}

/* スタイル付き入力フィールド */
.form-input-styled {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  transition: all 0.2s ease;
}

.form-input-styled:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-input-styled::placeholder {
  color: #94a3b8;
}

/* 狭い入力フィールド */
.form-input-narrow {
  max-width: 120px;
}

/* スタイル付きテキストエリア */
.form-textarea-styled {
  width: 100%;
  padding: 12px 16px;
  font-size: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  resize: vertical;
  min-height: 120px;
  line-height: 1.6;
  transition: all 0.2s ease;
}

.form-textarea-styled:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.form-textarea-styled::placeholder {
  color: #94a3b8;
}

/* フォームセクション（グループ化） */
.announcement-modal .form-section {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px 20px;
  margin-top: 20px;
}

/* セクションタイトル */
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 16px 0;
  font-size: 14px;
  font-weight: 600;
  color: #475569;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.section-icon {
  font-size: 16px;
  line-height: 1;
}

/* 横並びフォーム */
.form-row {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}

@media (max-width: 480px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

/* 小さいラベル */
.form-label-small {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  margin-bottom: 6px;
}

/* スタイル付きセレクト */
.form-select-styled {
  width: 100%;
  padding: 10px 14px;
  font-size: 14px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  background: #fff;
  color: #1e293b;
  cursor: pointer;
  transition: all 0.2s ease;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  padding-right: 40px;
}

.form-select-styled:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

/* フォームヒント */
.announcement-modal .form-hint {
  font-size: 12px;
  font-weight: 400;
  color: #94a3b8;
}

/* モーダルフッター */
.announcement-modal .modal-footer {
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 16px 24px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  border-radius: 0 0 12px 12px;
}

.announcement-modal .modal-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
}

/* ボタン内アイコン */
.btn-icon {
  font-size: 14px;
  line-height: 1;
}

/* アニメーション */
.announcement-modal {
  animation: modalSlideIn 0.3s ease;
}

@keyframes modalSlideIn {
  from {
    opacity: 0;
    transform: translateY(-20px) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

/* ========================================
   詳細分析 - UX改善スタイル
======================================== */

/* スケルトンローダー */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 50%, #f1f5f9 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
}

.skeleton-text {
  height: 1em;
  margin-bottom: 0.5em;
}

.skeleton-text-sm {
  height: 0.75em;
  width: 60%;
}

.skeleton-card {
  padding: 24px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.skeleton-stat-value {
  height: 28px;
  width: 80px;
  margin-bottom: 8px;
}

.skeleton-stat-label {
  height: 13px;
  width: 100px;
}

.skeleton-chart {
  height: 200px;
  border-radius: 8px;
}

.skeleton-table-row {
  height: 48px;
  margin-bottom: 4px;
  border-radius: 4px;
}

/* タブUI改善 - モバイル対応スクロール */
.analytics-tabs {
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
  flex-wrap: nowrap;
  position: relative;
}

.analytics-tabs::-webkit-scrollbar {
  display: none;
}

.analytics-tab {
  white-space: nowrap;
  flex-shrink: 0;
  position: relative;
}

/* タブアクティブインジケーター */
.analytics-tabs-wrapper {
  position: relative;
}

.analytics-tab::after {
  content: '';
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 3px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  border-radius: 2px;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

.analytics-tab.active::after {
  width: calc(100% - 16px);
}

/* タブコンテンツのフェード切り替え */
.analytics-tab-content {
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

.analytics-tab-content.active {
  opacity: 1;
  transform: translateY(0);
}

/* 統計カード強化 */
.stat-card {
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.stat-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(99, 102, 241, 0.15);
}

.stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #6366f1, #8b5cf6);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.stat-card:hover::before {
  opacity: 1;
}

/* 統計値のカウントアップアニメーション用 */
.stat-value[data-value] {
  transition: transform 0.3s ease;
}

.stat-value.counting {
  transform: scale(1.05);
}

/* カード内のサブテキスト */
.stat-card .stat-sub {
  font-size: 12px;
  color: #94a3b8;
  margin-top: 4px;
}

/* トレンドインジケーター */
.stat-trend {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 12px;
  margin-left: 8px;
}

.stat-trend.up {
  background: #dcfce7;
  color: #16a34a;
}

.stat-trend.down {
  background: #fee2e2;
  color: #dc2626;
}

.stat-trend.neutral {
  background: #f1f5f9;
  color: #64748b;
}

/* ツールチップ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  padding: 8px 12px;
  background: #1e293b;
  color: #fff;
  font-size: 12px;
  font-weight: 400;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
  pointer-events: none;
}

[data-tooltip]::after {
  content: '';
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  z-index: 1000;
}

[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
}

/* テーブル行のインタラクション強化 */
.admin-table.clickable-rows tbody tr {
  cursor: pointer;
  transition: all 0.2s ease;
}

.admin-table.clickable-rows tbody tr:hover {
  background: #f8fafc;
  transform: translateX(4px);
}

.admin-table.clickable-rows tbody tr:active {
  background: #f1f5f9;
}

/* テーブルセルのリップルエフェクト */
.admin-table.interactive tbody td {
  position: relative;
  overflow: hidden;
}

.admin-table.interactive tbody td::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(99, 102, 241, 0.1);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease;
}

.admin-table.interactive tbody tr:active td::after {
  width: 200px;
  height: 200px;
}

/* 空状態デザイン */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 24px;
  text-align: center;
}

.empty-state-icon {
  font-size: 48px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.empty-state-title {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px;
}

.empty-state-description {
  font-size: 14px;
  color: #64748b;
  margin: 0 0 24px;
  max-width: 360px;
}

.empty-state-action {
  padding: 10px 24px;
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 8px;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.empty-state-action:hover {
  background: #4f46e5;
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
}

/* エラー状態 */
.error-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 32px 24px;
  text-align: center;
  background: #fef2f2;
  border-radius: 12px;
  border: 1px solid #fee2e2;
}

.error-state-icon {
  font-size: 36px;
  margin-bottom: 12px;
}

.error-state-title {
  font-size: 16px;
  font-weight: 600;
  color: #dc2626;
  margin: 0 0 8px;
}

.error-state-description {
  font-size: 13px;
  color: #7f1d1d;
  margin: 0 0 16px;
}

.error-state-retry {
  padding: 8px 16px;
  background: #dc2626;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s ease;
}

.error-state-retry:hover {
  background: #b91c1c;
}

/* ローディングプレースホルダー改善 */
.loading-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 32px;
  color: #64748b;
  font-size: 14px;
}

.loading-placeholder::before {
  content: '';
  width: 32px;
  height: 32px;
  border: 3px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* チャートコンテナのホバー効果 */
.chart-container {
  transition: all 0.3s ease;
}

.chart-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* ファネルステージのアニメーション */
.funnel-stage {
  transition: all 0.3s ease;
}

.funnel-stage:hover {
  transform: translateX(8px);
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.15);
}

/* 採用ファネルのステージ間コネクター */
.recruitment-funnel-chart .funnel-stages {
  position: relative;
}

.recruitment-funnel-chart .funnel-stage::before {
  content: '';
  position: absolute;
  left: -12px;
  top: 50%;
  width: 8px;
  height: 2px;
  background: #cbd5e1;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.recruitment-funnel-chart .funnel-stage:not(:first-child)::before {
  opacity: 1;
}

/* アラートカードのパルスアニメーション */
.alert-card.alert-danger {
  animation: alertPulse 2s ease-in-out infinite;
}

@keyframes alertPulse {
  0%, 100% {
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  }
  50% {
    box-shadow: 0 4px 12px rgba(239, 68, 68, 0.2);
  }
}

/* フィルターバーの改善 */
.filter-bar {
  display: flex;
  gap: 12px;
  padding: 16px;
  background: #fff;
  border-radius: 12px;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  flex-wrap: wrap;
  align-items: center;
}

.filter-bar .search-input {
  flex: 1;
  min-width: 200px;
  padding: 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.filter-bar .search-input:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.filter-bar select {
  padding: 10px 36px 10px 16px;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") right 12px center no-repeat;
  -webkit-appearance: none;
  appearance: none;
  cursor: pointer;
  transition: all 0.2s ease;
}

.filter-bar select:focus {
  outline: none;
  border-color: #6366f1;
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

/* 更新ボタン */
.refresh-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 16px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  font-size: 14px;
  color: #475569;
  cursor: pointer;
  transition: all 0.2s ease;
}

.refresh-btn:hover {
  background: #f1f5f9;
  border-color: #cbd5e1;
}

.refresh-btn:active {
  transform: scale(0.98);
}

.refresh-btn.loading {
  pointer-events: none;
  opacity: 0.7;
}

.refresh-btn.loading::before {
  content: '';
  width: 14px;
  height: 14px;
  border: 2px solid #e2e8f0;
  border-top-color: #6366f1;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* セクションヘッダー改善 */
.section-header-enhanced {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e2e8f0;
}

.section-header-enhanced h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
}

.section-header-enhanced h3::before {
  content: '';
  width: 4px;
  height: 20px;
  background: linear-gradient(180deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 2px;
}

.section-header-actions {
  display: flex;
  gap: 8px;
}

/* カード内バッジ */
.card-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.card-badge.success {
  background: #dcfce7;
  color: #16a34a;
}

.card-badge.warning {
  background: #fef3c7;
  color: #d97706;
}

.card-badge.danger {
  background: #fee2e2;
  color: #dc2626;
}

.card-badge.info {
  background: #e0e7ff;
  color: #6366f1;
}

/* 数値ハイライト */
.number-highlight {
  position: relative;
  display: inline-block;
}

.number-highlight.positive {
  color: #16a34a;
}

.number-highlight.negative {
  color: #dc2626;
}

/* プログレスバー */
.progress-bar {
  height: 8px;
  background: #e2e8f0;
  border-radius: 4px;
  overflow: hidden;
}

.progress-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
  border-radius: 4px;
  transition: width 0.6s ease;
}

.progress-bar-fill.success {
  background: linear-gradient(90deg, #10b981 0%, #34d399 100%);
}

.progress-bar-fill.warning {
  background: linear-gradient(90deg, #f59e0b 0%, #fbbf24 100%);
}

.progress-bar-fill.danger {
  background: linear-gradient(90deg, #ef4444 0%, #f87171 100%);
}

/* データカードグリッド改善 */
.company-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 20px;
}

.company-card {
  background: #fff;
  border-radius: 12px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
  cursor: pointer;
  border: 1px solid transparent;
}

.company-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #6366f1;
}

.company-card:active {
  transform: translateY(-2px);
}

/* タブスクロールインジケーター */
.analytics-tabs-container {
  position: relative;
}

.analytics-tabs-container::after {
  content: '';
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 40px;
  background: linear-gradient(90deg, transparent, white);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.analytics-tabs-container.has-scroll::after {
  opacity: 1;
}

/* レスポンシブ調整 */
@media (max-width: 767px) {
  .analytics-tabs {
    padding: 4px;
    gap: 2px;
  }

  .analytics-tab {
    padding: 8px 12px;
    font-size: 13px;
  }

  .stat-card {
    padding: 16px;
  }

  .stat-card .stat-value {
    font-size: 22px;
  }

  .stat-card .stat-icon {
    width: 44px;
    height: 44px;
    font-size: 20px;
  }

  .filter-bar {
    flex-direction: column;
    gap: 8px;
  }

  .filter-bar .search-input,
  .filter-bar select {
    width: 100%;
  }

  .empty-state {
    padding: 32px 16px;
  }

  .empty-state-icon {
    font-size: 36px;
  }

  .empty-state-title {
    font-size: 16px;
  }
}

/* 横スクロールテーブル */
.table-scroll-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: 0 -16px;
  padding: 0 16px;
}

.table-scroll-wrapper::-webkit-scrollbar {
  height: 6px;
}

.table-scroll-wrapper::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 3px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 3px;
}

.table-scroll-wrapper::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ========================================
   画像ギャラリーモーダル
   ======================================== */

.image-gallery-modal {
  max-width: 640px;
}

.image-gallery-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 40px 20px;
  color: #6b7280;
}

.image-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 12px;
  padding: 4px;
  max-height: 50vh;
  overflow-y: auto;
}

.image-gallery-item {
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.image-gallery-item:hover {
  border-color: #6366f1;
  box-shadow: 0 2px 8px rgba(99, 102, 241, 0.2);
}

.image-gallery-thumb {
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background: #f3f4f6;
}

.image-gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.image-gallery-item-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 4px 8px;
  font-size: 0.75rem;
  color: #6b7280;
}

.image-gallery-item-type {
  background: #f3f4f6;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.7rem;
}

.image-gallery-empty {
  text-align: center;
  padding: 40px 20px;
  color: #9ca3af;
}

.image-gallery-empty-hint {
  font-size: 0.85rem;
  margin-top: 4px;
}

/* 履歴ボタン（アップロードボタンの横に配置） */
.btn-gallery-inline {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 16px;
  background: #fff;
  color: #6366f1;
  border: 1px solid #6366f1;
  border-radius: 6px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.2s;
}

.btn-gallery-inline:hover {
  background: #eef2ff;
}

.btn-gallery-inline .gallery-icon {
  font-size: 1rem;
}

@media (max-width: 600px) {
  .image-gallery-modal {
    max-width: 100%;
  }

  .image-gallery-grid {
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
  }

  .btn-gallery-inline {
    width: 100%;
    justify-content: center;
  }
}

/* ===== AI生成機能スタイル ===== */

.ai-buttons-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

.btn-ai {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 6px 14px;
  border: 1px solid #d0d5dd;
  border-radius: 6px;
  background: linear-gradient(135deg, #f8f9fa 0%, #e8f0fe 100%);
  color: #1a73e8;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}

.btn-ai:hover {
  background: linear-gradient(135deg, #e8f0fe 0%, #d2e3fc 100%);
  border-color: #1a73e8;
  box-shadow: 0 1px 3px rgba(26, 115, 232, 0.15);
}

.btn-ai:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  background: #f0f0f0;
}

.btn-ai .ai-icon {
  font-size: 14px;
}

/* AIテーマ提案 */
.ai-theme-section {
  margin-bottom: 16px;
  padding: 12px 16px;
  background: #f8f9ff;
  border: 1px solid #e0e7ff;
  border-radius: 8px;
}

.ai-theme-input-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.ai-theme-url-input {
  flex: 1;
  padding: 8px 12px;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 14px;
}

.ai-theme-result {
  margin-top: 12px;
  padding: 12px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
}

.ai-theme-result-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.ai-theme-result-header h6 {
  margin: 0;
  font-size: 14px;
  font-weight: 600;
}

.ai-theme-colors {
  display: flex;
  gap: 12px;
  margin: 8px 0;
}

.ai-theme-color-swatch {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
}

.ai-theme-color-swatch .swatch {
  width: 24px;
  height: 24px;
  border-radius: 4px;
  border: 1px solid #d1d5db;
}

.ai-theme-reason {
  font-size: 13px;
  color: #6b7280;
  margin: 8px 0;
}

.ai-theme-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

/* CTA候補チップ */
.ai-cta-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.ai-cta-chip {
  padding: 6px 14px;
  border: 1px solid #d1d5db;
  border-radius: 20px;
  background: #f9fafb;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
}

.ai-cta-chip:hover {
  background: #6366f1;
  color: #fff;
  border-color: #6366f1;
}

/* タイトル提案パネル */
.ai-suggestions-panel {
  margin-top: 8px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.ai-suggestion-card {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid #f0f0f0;
  transition: background 0.15s;
}

.ai-suggestion-card:last-child {
  border-bottom: none;
}

.ai-suggestion-card:hover {
  background: #f8f9fa;
}

.suggestion-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1a73e8;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: bold;
  flex-shrink: 0;
}

.suggestion-text {
  flex: 1;
  font-size: 14px;
  color: #333;
}

.btn-use-suggestion {
  padding: 4px 14px;
  border: 1px solid #1a73e8;
  border-radius: 4px;
  background: white;
  color: #1a73e8;
  cursor: pointer;
  font-size: 12px;
  transition: all 0.15s;
  flex-shrink: 0;
}

.btn-use-suggestion:hover {
  background: #1a73e8;
  color: white;
}

/* 校正チェック結果パネル */
.ai-check-results-panel {
  margin-top: 12px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 16px;
  background: #fafafa;
}

.check-section {
  margin-bottom: 16px;
}

.check-section:last-child {
  margin-bottom: 0;
}

.check-title {
  font-size: 14px;
  font-weight: bold;
  margin: 0 0 8px 0;
}

.check-item {
  padding: 8px 12px;
  margin-bottom: 6px;
  border-radius: 6px;
  background: white;
  border-left: 3px solid #ccc;
  font-size: 13px;
}

.check-critical .check-item {
  border-left-color: #e53935;
}

.check-warning .check-item {
  border-left-color: #ffa000;
}

.check-found {
  font-weight: bold;
  color: #333;
  margin-bottom: 2px;
}

.check-reason {
  color: #666;
  margin-bottom: 2px;
}

.check-suggestion {
  color: #1a73e8;
}

.check-clean {
  padding: 16px;
  text-align: center;
  color: #2e7d32;
  font-size: 15px;
  font-weight: 500;
}

/* 都道府県プルダウン + テキスト入力グループ */
.address-input-group {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.address-input-group .prefecture-select {
  flex: 0 0 180px;
  min-width: 180px;
}

.address-input-group input[type="text"] {
  flex: 1;
}

@media (max-width: 640px) {
  .address-input-group {
    flex-direction: column;
  }

  .address-input-group .prefecture-select {
    flex: none;
    width: 100%;
  }
}

/* ========================================
   資格選択モーダル・タグ
   ======================================== */

/* 「+ 資格を追加」ボタン */
.btn-add-qualification {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  padding: 6px 14px;
  background: #f0f7ff;
  color: #0066cc;
  border: 1px dashed #0066cc;
  border-radius: 6px;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-add-qualification:hover {
  background: #deeeff;
}

/* 選択済み資格タグ */
.selected-qualifications-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
  min-height: 0;
}

.qualification-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: #e8f4fd;
  color: #0066cc;
  border: 1px solid #b3d9f2;
  border-radius: 20px;
  font-size: 12px;
  line-height: 1.4;
}

.qualification-tag-remove {
  background: none;
  border: none;
  color: #0066cc;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  opacity: 0.6;
}

.qualification-tag-remove:hover {
  opacity: 1;
  color: #cc0000;
}

/* モーダルオーバーレイ */
.qualification-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 10000;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* モーダル本体 */
.qualification-modal {
  background: #fff;
  border-radius: 12px;
  width: 90%;
  max-width: 640px;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
}

.qualification-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #eee;
}

.qualification-modal-header h3 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}

.qualification-modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: #999;
  padding: 0 4px;
  line-height: 1;
}

.qualification-modal-close:hover {
  color: #333;
}

/* 検索バー */
.qualification-modal-search {
  padding: 12px 20px;
  border-bottom: 1px solid #eee;
}

.qualification-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  box-sizing: border-box;
}

.qualification-search-input:focus {
  outline: none;
  border-color: #0066cc;
  box-shadow: 0 0 0 2px rgba(0, 102, 204, 0.15);
}

/* モーダルボディ（スクロール） */
.qualification-modal-body {
  overflow-y: auto;
  padding: 16px 20px;
  flex: 1;
}

/* カテゴリ */
.qualification-category {
  margin-bottom: 16px;
}

.qualification-category:last-child {
  margin-bottom: 0;
}

.qualification-category-title {
  margin: 0 0 8px 0;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  padding-bottom: 4px;
  border-bottom: 1px solid #eee;
}

.qualification-category-items {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* チェックボックスラベル */
.qualification-checkbox {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 5px 10px;
  background: #f8f9fa;
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  font-size: 12px;
  cursor: pointer;
  transition: all 0.15s;
  user-select: none;
}

.qualification-checkbox:hover {
  background: #eef5ff;
  border-color: #b3d9f2;
}

.qualification-checkbox input[type="checkbox"] {
  display: none;
}

.qualification-checkbox:has(input:checked) {
  background: #e8f4fd;
  border-color: #0066cc;
  color: #0066cc;
}

.qualification-no-results {
  text-align: center;
  color: #999;
  padding: 20px;
  font-size: 14px;
}

/* フッター */
.qualification-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 12px 20px;
  border-top: 1px solid #eee;
}

.qualification-selected-count {
  margin-right: auto;
  font-size: 13px;
  color: #666;
}

/* ダークモード対応（将来用） */
@media (prefers-color-scheme: dark) {
  .analytics-section-dark {
    /* 将来的にダークモード対応を追加 */
  }
}

/* ========================================
   URLスクレイピング
   ======================================== */

.ce-url-scrape-section {
  background: linear-gradient(135deg, #f0f4ff 0%, #e8f0fe 100%);
  border: 1px dashed #4285f4;
  border-radius: 12px;
  padding: 20px 24px;
  margin-bottom: 24px;
}

.ce-url-scrape-section .section-title {
  color: #1a73e8;
  font-size: 15px;
  margin-bottom: 12px;
}

.url-scrape-input-group {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.url-scrape-input-group .url-input {
  flex: 1;
  padding: 10px 14px;
  border: 1px solid #dadce0;
  border-radius: 8px;
  font-size: 14px;
  background: #fff;
}

.url-scrape-input-group .url-input:focus {
  border-color: #4285f4;
  outline: none;
  box-shadow: 0 0 0 3px rgba(66, 133, 244, 0.15);
}

.btn-scrape {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 20px;
  white-space: nowrap;
  border-radius: 8px;
  font-weight: 600;
}

.scrape-status {
  margin-top: 8px;
  padding: 8px 12px;
  border-radius: 6px;
  font-size: 13px;
}

.scrape-status.loading {
  background: #e8f0fe;
  color: #1a73e8;
}

.scrape-status.success {
  background: #e6f4ea;
  color: #137333;
}

.scrape-status.error {
  background: #fce8e6;
  color: #c5221f;
}

/* ========================================
   AI LP全体デザイン生成
======================================== */
.ai-design-section {
  margin-top: 20px;
  padding: 16px;
  background: linear-gradient(135deg, #faf5ff 0%, #f0f9ff 100%);
  border: 1px solid #e9d5ff;
  border-radius: 12px;
}

.btn-ai-large {
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}

.ai-design-result {
  margin-top: 16px;
  padding: 16px;
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
}

.ai-design-result-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
}

.ai-design-result-header h6 {
  font-size: 15px;
  font-weight: 600;
  color: #1f2937;
  margin: 0;
}

.ai-design-industry {
  font-size: 12px;
  padding: 2px 10px;
  background: #f3f4f6;
  border-radius: 12px;
  color: #6b7280;
}

.ai-design-summary {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 16px;
}

.ai-design-summary-item {
  display: flex;
  align-items: center;
  gap: 12px;
}

.ai-design-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  min-width: 100px;
}

.ai-design-value {
  font-size: 13px;
  color: #374151;
}

.ai-design-color-chips {
  display: flex;
  gap: 6px;
}

.ai-design-color-chip {
  display: inline-block;
  width: 24px;
  height: 24px;
  border-radius: 6px;
}

.ai-design-css-details {
  margin-bottom: 16px;
}

.ai-design-css-details summary {
  font-size: 12px;
  color: #6b7280;
  cursor: pointer;
  user-select: none;
}

.ai-design-css-preview {
  margin-top: 8px;
  padding: 12px;
  background: #1f2937;
  color: #e5e7eb;
  border-radius: 8px;
  font-size: 11px;
  line-height: 1.6;
  overflow-x: auto;
  white-space: pre-wrap;
  max-height: 200px;
}

.ai-design-actions {
  display: flex;
  gap: 10px;
}

.ai-design-actions .btn-primary {
  background: linear-gradient(135deg, #7c3aed, #6366f1);
  color: #fff;
  border: none;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.ai-design-actions .btn-primary:hover {
  opacity: 0.9;
}

.ai-design-actions .btn-secondary {
  background: #f3f4f6;
  color: #374151;
  border: 1px solid #d1d5db;
  padding: 10px 24px;
  border-radius: 8px;
  font-weight: 600;
  cursor: pointer;
}

.ai-design-actions .btn-secondary:hover {
  background: #e5e7eb;
}

/* ========================================
   セクション背景設定UI
   ======================================== */
.editor-bg-settings {
  border-top: 1px solid #e5e7eb;
  padding-top: 16px;
  margin-top: 16px;
}

.editor-bg-settings h4 {
  font-size: 13px;
  font-weight: 700;
  color: #374151;
  margin-bottom: 12px;
}

.editor-bg-pattern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.editor-bg-pattern-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 4px;
  border: 2px solid #e5e7eb;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
  user-select: none;
  position: relative;
}

.editor-bg-pattern-item input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

.editor-bg-pattern-item:hover {
  border-color: #9ca3af;
}

.editor-bg-pattern-item.selected {
  border-color: #3b82f6;
  background: #eff6ff;
}

.editor-bg-pattern-preview {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 28px;
  font-size: 14px;
  letter-spacing: 2px;
  color: #6b7280;
  background: #f9fafb;
  border-radius: 4px;
}

.editor-bg-pattern-name {
  font-size: 10px;
  color: #6b7280;
  white-space: nowrap;
}

/* ========================================
   バリアント選択カードUI
   ======================================== */
#hero-variant-buttons,
#points-variant-buttons,
#faq-variant-buttons,
[id$="-variant-buttons"] {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
  gap: 0.4rem;
}

.lp-variant-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
  padding: 0;
  border: 1.5px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  overflow: hidden;
  text-align: center;
}

.lp-variant-card:hover {
  border-color: #a5b4fc;
  box-shadow: 0 2px 6px rgba(99, 102, 241, 0.12);
  transform: translateY(-1px);
}

.lp-variant-card.active {
  border-color: #6366f1;
  background: #f5f3ff;
  box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.18);
}

.lp-variant-card-preview {
  width: 100%;
  padding: 6px 6px 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #f9fafb;
  border-bottom: 1px solid #f0f0f0;
}

.lp-variant-card.active .lp-variant-card-preview {
  background: #eef2ff;
  border-bottom-color: #e0e7ff;
}

.lp-variant-card-preview svg {
  width: 100%;
  height: 36px;
  display: block;
}

.lp-variant-card-info {
  padding: 3px 4px 4px;
  width: 100%;
}

.lp-variant-card-name {
  font-size: 0.68rem;
  font-weight: 600;
  color: #374151;
  line-height: 1.3;
}

.lp-variant-card.active .lp-variant-card-name {
  color: #4338ca;
}

.lp-variant-card-desc {
  display: none;
  font-size: 0.58rem;
  color: #9ca3af;
  line-height: 1.2;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.lp-variant-card.active .lp-variant-card-desc {
  color: #6366f1;
}

/* バリアントセレクターラベル統一 */
.lp-variant-selector label {
  font-size: 12px !important;
  font-weight: 600 !important;
  color: #64748b !important;
  display: block !important;
  margin-bottom: 6px !important;
}

/* バリアントセレクターの統一マージン */
.lp-variant-selector {
  margin: 8px 0 12px !important;
}

/* ========================================
   AI面接設定
======================================== */

/* 面接フロー一覧 */
.ai-interview-flow-list { display: flex; flex-direction: column; gap: 4px; margin: 8px 0; }
.ai-interview-flow-item {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; border-radius: 6px; font-size: 13px;
  background: #f8fafc; border: 1px solid #e5e7eb;
}
.ai-interview-flow-item--highlight {
  background: #eff6ff; border-color: #93c5fd;
}
.ai-interview-flow-num {
  width: 22px; height: 22px; border-radius: 50%;
  background: #e5e7eb; color: #374151; font-size: 11px; font-weight: 700;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.ai-interview-flow-item--highlight .ai-interview-flow-num {
  background: #3b82f6; color: #fff;
}
.ai-interview-flow-label { font-weight: 600; min-width: 120px; }
.ai-interview-flow-desc { color: #6b7280; font-size: 12px; }

.ai-interview-questions-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 8px 0;
}

.ai-interview-question-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 6px;
}

.ai-interview-question-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #6366f1;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
}

.ai-interview-question-input,
.ai-interview-body-check-instruction {
  flex: 1;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
}

.ai-interview-body-check-select {
  width: 160px;
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  border-radius: 4px;
  font-size: 14px;
  flex-shrink: 0;
}

.ai-interview-question-remove {
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: #94a3b8;
  cursor: pointer;
  border-radius: 4px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ai-interview-question-remove:hover {
  background: #fee2e2;
  color: #ef4444;
}

.ai-interview-questions-actions {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.btn-sm {
  padding: 4px 12px;
  font-size: 13px;
}

.btn-accent {
  background: #6366f1;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.btn-accent:hover {
  background: #4f46e5;
}

/* AI面接結果表示 */
.ai-interview-status-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 13px;
  font-weight: 600;
  background: #f0f9ff;
  color: #0369a1;
  margin-bottom: 8px;
}

.ai-interview-duration {
  font-size: 13px;
  color: #6b7280;
  margin-bottom: 12px;
}

.ai-interview-summary {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.ai-interview-summary h4 {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 8px 0 4px;
}

.ai-interview-summary h4:first-child {
  margin-top: 0;
}

.ai-interview-summary p {
  font-size: 14px;
  color: #4b5563;
  line-height: 1.5;
  margin: 0 0 4px;
}

.ai-interview-summary ul {
  margin: 4px 0;
  padding-left: 20px;
}

.ai-interview-summary li {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

/* 構造化レポート */
.ai-interview-report { margin-top: 16px; }
.ai-interview-report h4 { font-size: 13px; font-weight: 700; color: #1f2937; margin: 16px 0 8px; }
.ai-report-timeline { border-left: 2px solid #3b82f6; padding-left: 12px; }
.ai-report-timeline-item { margin-bottom: 12px; }
.ai-report-period { font-size: 11px; color: #6b7280; font-weight: 600; }
.ai-report-detail { font-size: 13px; }
.ai-report-gap { font-size: 13px; color: #f59e0b; background: #fffbeb; padding: 6px 10px; border-radius: 6px; margin-bottom: 6px; }
.ai-report-conditions { display: flex; flex-direction: column; gap: 4px; }
.ai-report-cond-item { display: flex; gap: 8px; font-size: 13px; }
.ai-report-cond-label { font-weight: 600; min-width: 100px; color: #374151; }
.ai-report-matching { font-size: 13px; margin-bottom: 8px; }
.ai-report-match-score { font-size: 16px; margin-bottom: 4px; }
.ai-report-alt-job { font-size: 13px; background: #f0fdf4; padding: 8px 10px; border-radius: 6px; margin-bottom: 6px; }
.ai-report-recommendation { font-size: 13px; color: #059669; background: #ecfdf5; padding: 8px 10px; border-radius: 6px; margin-top: 8px; }
.ai-report-non-recommendation { font-size: 13px; color: #dc2626; background: #fef2f2; padding: 8px 10px; border-radius: 6px; margin-top: 8px; }

.ai-interview-qa-item.ai-interview-followup {
  margin-left: 16px;
  border-left: 3px solid #c7d2fe;
  padding-left: 12px;
}
.ai-interview-qa-item.ai-interview-followup .ai-interview-q {
  color: #6366f1;
}

.ai-interview-qa-list h4 {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px;
}

.ai-interview-qa-item {
  border-bottom: 1px solid #f3f4f6;
  padding: 8px 0;
}

.ai-interview-qa-item:last-child {
  border-bottom: none;
}

.ai-interview-q {
  font-size: 13px;
  font-weight: 600;
  color: #6366f1;
  margin-bottom: 4px;
}

.ai-interview-a {
  font-size: 13px;
  color: #4b5563;
  line-height: 1.5;
}

.btn-play-video {
  display: inline-block;
  margin-top: 4px;
  padding: 2px 8px;
  font-size: 12px;
  color: #6366f1;
  background: #eef2ff;
  border: 1px solid #c7d2fe;
  border-radius: 4px;
  cursor: pointer;
}

.btn-play-video:hover {
  background: #e0e7ff;
}

/* 非言語評価レポート */
.ai-interview-analytics {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 12px;
  margin-bottom: 12px;
}

.ai-interview-analytics h4 {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 10px;
}

.ai-analytics-grid {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-analytics-item {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ai-analytics-label {
  font-size: 12px;
  color: #6b7280;
  width: 100px;
  flex-shrink: 0;
}

.ai-analytics-bar-wrap {
  flex: 1;
  height: 8px;
  background: #e5e7eb;
  border-radius: 4px;
  overflow: hidden;
}

.ai-analytics-bar {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s;
}

.ai-analytics-value {
  font-size: 12px;
  font-weight: 600;
  color: #374151;
  width: 45px;
  text-align: right;
  flex-shrink: 0;
}